@fragments-sdk/ui 0.9.0 → 0.9.2

package/dist/components/Tooltip/index.d.ts

@@ -0,0 +1,67 @@
+import * as React from 'react';
+export type TooltipSide = 'top' | 'bottom' | 'left' | 'right';
+export type TooltipAlign = 'start' | 'center' | 'end';
+export interface TooltipProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'content' | 'defaultChecked'> {
+    /** The element that triggers the tooltip */
+    children: React.ReactElement;
+    /** Content to display in the tooltip */
+    content: React.ReactNode;
+    /** Which side to show the tooltip */
+    side?: TooltipSide;
+    /** Alignment along the side */
+    align?: TooltipAlign;
+    /** Offset from the trigger (px) */
+    sideOffset?: number;
+    /** Delay before showing (ms) */
+    delay?: number;
+    /** Delay before hiding (ms) */
+    closeDelay?: number;
+    /** Whether the tooltip is disabled */
+    disabled?: boolean;
+    /** Show arrow pointing to trigger */
+    arrow?: boolean;
+    /** Controlled open state */
+    open?: boolean;
+    /** Default open state */
+    defaultOpen?: boolean;
+    /** Callback when open state changes */
+    onOpenChange?: (open: boolean) => void;
+}
+export interface TooltipProviderProps {
+    children: React.ReactNode;
+    /** Default delay for all tooltips (ms) */
+    delay?: number;
+    /** Default close delay for all tooltips (ms) */
+    closeDelay?: number;
+    /** Timeout for instant open when moving between tooltips (ms) */
+    timeout?: number;
+}
+/**
+ * Tooltip - Shows contextual information on hover/focus
+ *
+ * @example
+ * ```tsx
+ * <Tooltip content="Save your changes">
+ *   <Button>Save</Button>
+ * </Tooltip>
+ * ```
+ */
+declare function TooltipRoot({ children, content, side, align, sideOffset, delay, closeDelay, disabled, arrow, open, defaultOpen, onOpenChange, className, ...htmlProps }: TooltipProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * TooltipProvider - Manages shared delay behavior for multiple tooltips
+ *
+ * @example
+ * ```tsx
+ * <TooltipProvider delay={200}>
+ *   <Tooltip content="First">...</Tooltip>
+ *   <Tooltip content="Second">...</Tooltip>
+ * </TooltipProvider>
+ * ```
+ */
+export declare function TooltipProvider({ children, delay, closeDelay, timeout, }: TooltipProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare const Tooltip: typeof TooltipRoot & {
+    Root: typeof TooltipRoot;
+    Provider: typeof TooltipProvider;
+};
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Tooltip/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,MAAM,WAAW,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAC9D,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;AAEtD,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,SAAS,GAAG,gBAAgB,CAAC;IAC5G,4CAA4C;IAC5C,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC;IAC7B,wCAAwC;IACxC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,qCAAqC;IACrC,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,mCAAmC;IACnC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+BAA+B;IAC/B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qCAAqC;IACrC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,4BAA4B;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,yBAAyB;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,uCAAuC;IACvC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC;AAED,MAAM,WAAW,oBAAoB;IACnC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gDAAgD;IAChD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iEAAiE;IACjE,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAMD;;;;;;;;;GASG;AACH,iBAAS,WAAW,CAAC,EACnB,QAAQ,EACR,OAAO,EACP,IAAY,EACZ,KAAgB,EAChB,UAAc,EACd,KAAW,EACX,UAAc,EACd,QAAgB,EAChB,KAAY,EACZ,IAAI,EACJ,WAAW,EACX,YAAY,EACZ,SAAS,EACT,GAAG,SAAS,EACb,EAAE,YAAY,2CAqDd;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,KAAW,EACX,UAAc,EACd,OAAa,GACd,EAAE,oBAAoB,2CAUtB;AAED,eAAO,MAAM,OAAO;;;CAGlB,CAAC"}

package/dist/components/Tooltip/index.js

@@ -0,0 +1,90 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Tooltip as Tooltip$1 } from "@base-ui/react/tooltip";
+import styles from "./Tooltip.module.scss.js";
+function TooltipRoot({
+  children,
+  content,
+  side = "top",
+  align = "center",
+  sideOffset = 6,
+  delay = 400,
+  closeDelay = 0,
+  disabled = false,
+  arrow = true,
+  open,
+  defaultOpen,
+  onOpenChange,
+  className,
+  ...htmlProps
+}) {
+  const renderTrigger = React.useCallback(
+    (triggerProps) => {
+      const childProps = children.props;
+      const mergedProps = { ...childProps, ...triggerProps };
+      for (const [key, triggerHandler] of Object.entries(triggerProps)) {
+        const childHandler = childProps[key];
+        if (key.startsWith("on") && typeof triggerHandler === "function" && typeof childHandler === "function") {
+          mergedProps[key] = (...args) => {
+            childHandler(...args);
+            triggerHandler(...args);
+          };
+        }
+      }
+      return React.cloneElement(children, mergedProps);
+    },
+    [children]
+  );
+  if (disabled) {
+    return children;
+  }
+  return /* @__PURE__ */ jsx(Tooltip$1.Provider, { delay, closeDelay, children: /* @__PURE__ */ jsxs(
+    Tooltip$1.Root,
+    {
+      open,
+      defaultOpen,
+      onOpenChange,
+      children: [
+        /* @__PURE__ */ jsx(Tooltip$1.Trigger, { render: renderTrigger }),
+        /* @__PURE__ */ jsx(Tooltip$1.Portal, { children: /* @__PURE__ */ jsx(
+          Tooltip$1.Positioner,
+          {
+            side,
+            align,
+            sideOffset,
+            className: styles.positioner,
+            children: /* @__PURE__ */ jsxs(Tooltip$1.Popup, { ...htmlProps, className: [styles.popup, className].filter(Boolean).join(" "), children: [
+              content,
+              arrow && /* @__PURE__ */ jsx(Tooltip$1.Arrow, { className: styles.arrow })
+            ] })
+          }
+        ) })
+      ]
+    }
+  ) });
+}
+function TooltipProvider({
+  children,
+  delay = 400,
+  closeDelay = 0,
+  timeout = 400
+}) {
+  return /* @__PURE__ */ jsx(
+    Tooltip$1.Provider,
+    {
+      delay,
+      closeDelay,
+      timeout,
+      children
+    }
+  );
+}
+const Tooltip = Object.assign(TooltipRoot, {
+  Root: TooltipRoot,
+  Provider: TooltipProvider
+});
+export {
+  Tooltip,
+  TooltipProvider
+};
+//# sourceMappingURL=index.js.map

package/dist/components/Tooltip/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/Tooltip/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Tooltip as BaseTooltip } from '@base-ui/react/tooltip';\nimport styles from './Tooltip.module.scss';\n\n// ============================================\n// Types\n// ============================================\n\nexport type TooltipSide = 'top' | 'bottom' | 'left' | 'right';\nexport type TooltipAlign = 'start' | 'center' | 'end';\n\nexport interface TooltipProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'content' | 'defaultChecked'> {\n  /** The element that triggers the tooltip */\n  children: React.ReactElement;\n  /** Content to display in the tooltip */\n  content: React.ReactNode;\n  /** Which side to show the tooltip */\n  side?: TooltipSide;\n  /** Alignment along the side */\n  align?: TooltipAlign;\n  /** Offset from the trigger (px) */\n  sideOffset?: number;\n  /** Delay before showing (ms) */\n  delay?: number;\n  /** Delay before hiding (ms) */\n  closeDelay?: number;\n  /** Whether the tooltip is disabled */\n  disabled?: boolean;\n  /** Show arrow pointing to trigger */\n  arrow?: boolean;\n  /** Controlled open state */\n  open?: boolean;\n  /** Default open state */\n  defaultOpen?: boolean;\n  /** Callback when open state changes */\n  onOpenChange?: (open: boolean) => void;\n}\n\nexport interface TooltipProviderProps {\n  children: React.ReactNode;\n  /** Default delay for all tooltips (ms) */\n  delay?: number;\n  /** Default close delay for all tooltips (ms) */\n  closeDelay?: number;\n  /** Timeout for instant open when moving between tooltips (ms) */\n  timeout?: number;\n}\n\n// ============================================\n// Components\n// ============================================\n\n/**\n * Tooltip - Shows contextual information on hover/focus\n *\n * @example\n * ```tsx\n * <Tooltip content=\"Save your changes\">\n *   <Button>Save</Button>\n * </Tooltip>\n * ```\n */\nfunction TooltipRoot({\n  children,\n  content,\n  side = 'top',\n  align = 'center',\n  sideOffset = 6,\n  delay = 400,\n  closeDelay = 0,\n  disabled = false,\n  arrow = true,\n  open,\n  defaultOpen,\n  onOpenChange,\n  className,\n  ...htmlProps\n}: TooltipProps) {\n  const renderTrigger = React.useCallback(\n    (triggerProps: React.HTMLAttributes<HTMLElement> & { ref?: React.Ref<HTMLElement> }) => {\n      const childProps = children.props as Record<string, unknown>;\n      const mergedProps: Record<string, unknown> = { ...childProps, ...triggerProps };\n\n      for (const [key, triggerHandler] of Object.entries(triggerProps)) {\n        const childHandler = childProps[key];\n        if (\n          key.startsWith('on') &&\n          typeof triggerHandler === 'function' &&\n          typeof childHandler === 'function'\n        ) {\n          mergedProps[key] = (...args: unknown[]) => {\n            (childHandler as (...event: unknown[]) => void)(...args);\n            (triggerHandler as (...event: unknown[]) => void)(...args);\n          };\n        }\n      }\n\n      return React.cloneElement(children, mergedProps);\n    },\n    [children],\n  );\n\n  if (disabled) {\n    return children;\n  }\n\n  return (\n    <BaseTooltip.Provider delay={delay} closeDelay={closeDelay}>\n      <BaseTooltip.Root\n        open={open}\n        defaultOpen={defaultOpen}\n        onOpenChange={onOpenChange}\n      >\n        <BaseTooltip.Trigger render={renderTrigger} />\n        <BaseTooltip.Portal>\n          <BaseTooltip.Positioner\n            side={side}\n            align={align}\n            sideOffset={sideOffset}\n            className={styles.positioner}\n          >\n            <BaseTooltip.Popup {...htmlProps} className={[styles.popup, className].filter(Boolean).join(' ')}>\n              {content}\n              {arrow && <BaseTooltip.Arrow className={styles.arrow} />}\n            </BaseTooltip.Popup>\n          </BaseTooltip.Positioner>\n        </BaseTooltip.Portal>\n      </BaseTooltip.Root>\n    </BaseTooltip.Provider>\n  );\n}\n\n/**\n * TooltipProvider - Manages shared delay behavior for multiple tooltips\n *\n * @example\n * ```tsx\n * <TooltipProvider delay={200}>\n *   <Tooltip content=\"First\">...</Tooltip>\n *   <Tooltip content=\"Second\">...</Tooltip>\n * </TooltipProvider>\n * ```\n */\nexport function TooltipProvider({\n  children,\n  delay = 400,\n  closeDelay = 0,\n  timeout = 400,\n}: TooltipProviderProps) {\n  return (\n    <BaseTooltip.Provider\n      delay={delay}\n      closeDelay={closeDelay}\n      timeout={timeout}\n    >\n      {children}\n    </BaseTooltip.Provider>\n  );\n}\n\nexport const Tooltip = Object.assign(TooltipRoot, {\n  Root: TooltipRoot,\n  Provider: TooltipProvider,\n});\n"],"names":["BaseTooltip"],"mappings":";;;;AAgEA,SAAS,YAAY;AAAA,EACnB;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,WAAW;AAAA,EACX,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAiB;AACf,QAAM,gBAAgB,MAAM;AAAA,IAC1B,CAAC,iBAAuF;AACtF,YAAM,aAAa,SAAS;AAC5B,YAAM,cAAuC,EAAE,GAAG,YAAY,GAAG,aAAA;AAEjE,iBAAW,CAAC,KAAK,cAAc,KAAK,OAAO,QAAQ,YAAY,GAAG;AAChE,cAAM,eAAe,WAAW,GAAG;AACnC,YACE,IAAI,WAAW,IAAI,KACnB,OAAO,mBAAmB,cAC1B,OAAO,iBAAiB,YACxB;AACA,sBAAY,GAAG,IAAI,IAAI,SAAoB;AACxC,yBAA+C,GAAG,IAAI;AACtD,2BAAiD,GAAG,IAAI;AAAA,UAC3D;AAAA,QACF;AAAA,MACF;AAEA,aAAO,MAAM,aAAa,UAAU,WAAW;AAAA,IACjD;AAAA,IACA,CAAC,QAAQ;AAAA,EAAA;AAGX,MAAI,UAAU;AACZ,WAAO;AAAA,EACT;AAEA,SACE,oBAACA,UAAY,UAAZ,EAAqB,OAAc,YAClC,UAAA;AAAA,IAACA,UAAY;AAAA,IAAZ;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MAEA,UAAA;AAAA,QAAA,oBAACA,UAAY,SAAZ,EAAoB,QAAQ,cAAA,CAAe;AAAA,QAC5C,oBAACA,UAAY,QAAZ,EACC,UAAA;AAAA,UAACA,UAAY;AAAA,UAAZ;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA,WAAW,OAAO;AAAA,YAElB,+BAACA,UAAY,OAAZ,EAAmB,GAAG,WAAW,WAAW,CAAC,OAAO,OAAO,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAC5F,UAAA;AAAA,cAAA;AAAA,cACA,SAAS,oBAACA,UAAY,OAAZ,EAAkB,WAAW,OAAO,MAAA,CAAO;AAAA,YAAA,EAAA,CACxD;AAAA,UAAA;AAAA,QAAA,EACF,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAEJ;AAEJ;AAaO,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,UAAU;AACZ,GAAyB;AACvB,SACE;AAAA,IAACA,UAAY;AAAA,IAAZ;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MAEC;AAAA,IAAA;AAAA,EAAA;AAGP;AAEO,MAAM,UAAU,OAAO,OAAO,aAAa;AAAA,EAChD,MAAM;AAAA,EACN,UAAU;AACZ,CAAC;"}

package/dist/components/VisuallyHidden/VisuallyHidden.module.scss.cjs

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const visuallyHidden = "_visuallyHidden_dwm1g_1";
+const styles = {
+  visuallyHidden
+};
+exports.default = styles;
+exports.visuallyHidden = visuallyHidden;
+//# sourceMappingURL=VisuallyHidden.module.scss.cjs.map

package/dist/components/VisuallyHidden/VisuallyHidden.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"VisuallyHidden.module.scss.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dist/components/VisuallyHidden/VisuallyHidden.module.scss.js

@@ -0,0 +1,9 @@
+const visuallyHidden = "_visuallyHidden_dwm1g_1";
+const styles = {
+  visuallyHidden
+};
+export {
+  styles as default,
+  visuallyHidden
+};
+//# sourceMappingURL=VisuallyHidden.module.scss.js.map

package/dist/components/VisuallyHidden/VisuallyHidden.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VisuallyHidden.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/components/VisuallyHidden/index.cjs

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const VisuallyHidden_module = require("./VisuallyHidden.module.scss.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const VisuallyHiddenRoot = React__namespace.forwardRef(
+  function VisuallyHidden2({ children, as: Component = "span" }, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx(Component, { ref, className: VisuallyHidden_module.default.visuallyHidden, children });
+  }
+);
+const VisuallyHidden = Object.assign(VisuallyHiddenRoot, {
+  Root: VisuallyHiddenRoot
+});
+exports.VisuallyHidden = VisuallyHidden;
+//# sourceMappingURL=index.cjs.map

package/dist/components/VisuallyHidden/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../src/components/VisuallyHidden/index.tsx"],"sourcesContent":["import * as React from 'react';\nimport styles from './VisuallyHidden.module.scss';\n\nexport interface VisuallyHiddenProps {\n  children: React.ReactNode;\n  /** HTML element to render */\n  as?: 'span' | 'div';\n}\n\n/**\n * VisuallyHidden hides content visually while keeping it accessible to screen readers.\n * Use this for labels, descriptions, or other text that should be announced by assistive\n * technology but not displayed visually.\n *\n * @example\n * <Button>\n *   <SearchIcon />\n *   <VisuallyHidden>Search</VisuallyHidden>\n * </Button>\n */\nconst VisuallyHiddenRoot = React.forwardRef<HTMLElement, VisuallyHiddenProps>(\n  function VisuallyHidden({ children, as: Component = 'span' }, ref) {\n    return (\n      <Component ref={ref as React.Ref<never>} className={styles.visuallyHidden}>\n        {children}\n      </Component>\n    );\n  }\n);\n\nexport const VisuallyHidden = Object.assign(VisuallyHiddenRoot, {\n  Root: VisuallyHiddenRoot,\n});\n"],"names":["React","VisuallyHidden","styles"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAoBA,MAAM,qBAAqBA,iBAAM;AAAA,EAC/B,SAASC,gBAAe,EAAE,UAAU,IAAI,YAAY,OAAA,GAAU,KAAK;AACjE,0CACG,WAAA,EAAU,KAA8B,WAAWC,8BAAO,gBACxD,UACH;AAAA,EAEJ;AACF;AAEO,MAAM,iBAAiB,OAAO,OAAO,oBAAoB;AAAA,EAC9D,MAAM;AACR,CAAC;;"}

package/dist/components/VisuallyHidden/index.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+export interface VisuallyHiddenProps {
+    children: React.ReactNode;
+    /** HTML element to render */
+    as?: 'span' | 'div';
+}
+export declare const VisuallyHidden: React.ForwardRefExoticComponent<VisuallyHiddenProps & React.RefAttributes<HTMLElement>> & {
+    Root: React.ForwardRefExoticComponent<VisuallyHiddenProps & React.RefAttributes<HTMLElement>>;
+};
+//# sourceMappingURL=index.d.ts.map

package/dist/components/VisuallyHidden/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/VisuallyHidden/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,6BAA6B;IAC7B,EAAE,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;CACrB;AAuBD,eAAO,MAAM,cAAc;;CAEzB,CAAC"}

package/dist/components/VisuallyHidden/index.js

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import styles from "./VisuallyHidden.module.scss.js";
+const VisuallyHiddenRoot = React.forwardRef(
+  function VisuallyHidden2({ children, as: Component = "span" }, ref) {
+    return /* @__PURE__ */ jsx(Component, { ref, className: styles.visuallyHidden, children });
+  }
+);
+const VisuallyHidden = Object.assign(VisuallyHiddenRoot, {
+  Root: VisuallyHiddenRoot
+});
+export {
+  VisuallyHidden
+};
+//# sourceMappingURL=index.js.map

package/dist/components/VisuallyHidden/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/VisuallyHidden/index.tsx"],"sourcesContent":["import * as React from 'react';\nimport styles from './VisuallyHidden.module.scss';\n\nexport interface VisuallyHiddenProps {\n  children: React.ReactNode;\n  /** HTML element to render */\n  as?: 'span' | 'div';\n}\n\n/**\n * VisuallyHidden hides content visually while keeping it accessible to screen readers.\n * Use this for labels, descriptions, or other text that should be announced by assistive\n * technology but not displayed visually.\n *\n * @example\n * <Button>\n *   <SearchIcon />\n *   <VisuallyHidden>Search</VisuallyHidden>\n * </Button>\n */\nconst VisuallyHiddenRoot = React.forwardRef<HTMLElement, VisuallyHiddenProps>(\n  function VisuallyHidden({ children, as: Component = 'span' }, ref) {\n    return (\n      <Component ref={ref as React.Ref<never>} className={styles.visuallyHidden}>\n        {children}\n      </Component>\n    );\n  }\n);\n\nexport const VisuallyHidden = Object.assign(VisuallyHiddenRoot, {\n  Root: VisuallyHiddenRoot,\n});\n"],"names":["VisuallyHidden"],"mappings":";;;AAoBA,MAAM,qBAAqB,MAAM;AAAA,EAC/B,SAASA,gBAAe,EAAE,UAAU,IAAI,YAAY,OAAA,GAAU,KAAK;AACjE,+BACG,WAAA,EAAU,KAA8B,WAAW,OAAO,gBACxD,UACH;AAAA,EAEJ;AACF;AAEO,MAAM,iBAAiB,OAAO,OAAO,oBAAoB;AAAA,EAC9D,MAAM;AACR,CAAC;"}