@getgreenline/blaze-ui 1.0.3 → 1.0.4-5.02-beta

package/dist/components/visually-hidden.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"visually-hidden.d.ts","sourceRoot":"","sources":["../../src/components/visually-hidden.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B;;;;;;;;;;;GAWG;AACH,QAAA,MAAM,cAAc,sKAgBlB,CAAA;AAIF,OAAO,EAAE,cAAc,EAAE,CAAA"}

package/dist/components/visually-hidden.js

@@ -0,0 +1,22 @@
+import { jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { cn } from '../lib/utils.js';
+
+/**
+ * VisuallyHidden component
+ *
+ * Hides content visually while keeping it accessible to screen readers.
+ * This is useful for meeting accessibility requirements (like DialogTitle in Radix)
+ * without changing the visual design.
+ *
+ * Uses CSS positioning to move content off-screen rather than display:none,
+ * which would hide it from screen readers as well.
+ *
+ * @see https://www.a11yproject.com/posts/how-to-hide-content/
+ */
+const VisuallyHidden = React.forwardRef(({ children, className, ...props }, ref) => {
+    return (jsx("span", { ref: ref, className: cn("tw:absolute tw:w-px tw:h-px tw:p-0 tw:-m-px tw:overflow-hidden tw:whitespace-nowrap tw:border-0", className), ...props, children: children }));
+});
+VisuallyHidden.displayName = "VisuallyHidden";
+
+export { VisuallyHidden };