Initial implementation

Author: hectahertz

packages/react/src/Hidden/Hidden.module.css

@@ -1,13 +1,19 @@
 .Hidden {
-  @media screen and (--viewportRange-narrow) {
-    display: var(--hiddenDisplay-narrow, block);
+  &[data-hidden-narrow] {
+    @media (--viewportRange-narrow) {
+      display: none;
+    }
   }
 
-  @media screen and (--viewportRange-regular) {
-    display: var(--hiddenDisplay-regular, block);
+  &[data-hidden-regular] {
+    @media (--viewportRange-regular) {
+      display: none;
+    }
   }
 
-  @media screen and (--viewportRange-wide) {
-    display: var(--hiddenDisplay-wide, block);
+  &[data-hidden-wide] {
+    @media (--viewportRange-wide) {
+      display: none;
+    }
   }
 }

packages/react/src/Hidden/Hidden.tsx

@@ -2,6 +2,7 @@ import type React from 'react'
 import {type CSSProperties} from 'react'
 import {clsx} from 'clsx'
 import type {ResponsiveValue} from '../hooks/useResponsiveValue'
+import {getResponsiveAttributes} from '../internal/utils/getResponsiveAttributes'
 import classes from './Hidden.module.css'
 
 type Viewport = 'narrow' | 'regular' | 'wide'
@@ -35,19 +36,13 @@ function normalize(hiddenViewports: Array<Viewport> | Viewport): ResponsiveValue
 }
 
 export const Hidden = ({when, className, style, children}: HiddenProps) => {
-  const normalizedStyles = normalize(when)
+  const normalizedHidden = normalize(when)
 
   return (
     <div
       className={clsx(className, classes.Hidden)}
-      style={
-        {
-          '--hiddenDisplay-narrow': normalizedStyles.narrow ? 'none' : undefined,
-          '--hiddenDisplay-regular': normalizedStyles.regular ? 'none' : undefined,
-          '--hiddenDisplay-wide': normalizedStyles.wide ? 'none' : undefined,
-          ...style,
-        } as CSSProperties
-      }
+      {...getResponsiveAttributes('hidden', normalizedHidden)}
+      style={style}
     >
       {children}
     </div>