@mieweb/ui 0.1.0

package/dist/chunk-G2DOD34H.js

@@ -0,0 +1,215 @@
+import { cn } from './chunk-F3SOEIN2.js';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var checkboxVariants = cva(
+  [
+    "shrink-0 appearance-none",
+    "border-2 border-input rounded",
+    "bg-background",
+    "transition-all duration-150",
+    "cursor-pointer",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+    "disabled:cursor-not-allowed disabled:opacity-50",
+    "checked:bg-primary-500 checked:border-primary-500",
+    "indeterminate:bg-primary-500 indeterminate:border-primary-500"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "h-4 w-4",
+        md: "h-5 w-5",
+        lg: "h-6 w-6"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var Checkbox = React.forwardRef(
+  ({
+    className,
+    size,
+    label,
+    description,
+    indeterminate = false,
+    error,
+    labelPosition = "right",
+    id,
+    disabled,
+    ...props
+  }, ref) => {
+    const internalRef = React.useRef(null);
+    const generatedId = React.useId();
+    const checkboxId = id || generatedId;
+    const descriptionId = `${checkboxId}-description`;
+    const errorId = `${checkboxId}-error`;
+    React.useEffect(() => {
+      const checkbox = internalRef.current;
+      if (checkbox) {
+        checkbox.indeterminate = indeterminate;
+      }
+    }, [indeterminate]);
+    React.useImperativeHandle(ref, () => internalRef.current);
+    const checkboxElement = /* @__PURE__ */ jsxs("span", { className: "relative inline-flex items-center justify-center", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: internalRef,
+          id: checkboxId,
+          type: "checkbox",
+          disabled,
+          "aria-describedby": [description ? descriptionId : null, error ? errorId : null].filter(Boolean).join(" ") || void 0,
+          "aria-invalid": !!error,
+          className: cn("peer", checkboxVariants({ size }), className),
+          ...props
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        CheckIcon,
+        {
+          size,
+          className: "pointer-events-none absolute text-white opacity-0 transition-opacity peer-checked:opacity-100"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        MinusIcon,
+        {
+          size,
+          className: "pointer-events-none absolute text-white opacity-0 transition-opacity peer-indeterminate:opacity-100"
+        }
+      )
+    ] });
+    const labelElement = label && /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+      /* @__PURE__ */ jsx(
+        "label",
+        {
+          htmlFor: checkboxId,
+          className: cn(
+            "text-foreground cursor-pointer text-sm font-medium select-none",
+            disabled && "cursor-not-allowed opacity-50"
+          ),
+          children: label
+        }
+      ),
+      description && /* @__PURE__ */ jsx(
+        "p",
+        {
+          id: descriptionId,
+          className: "text-muted-foreground mt-0.5 text-xs",
+          children: description
+        }
+      )
+    ] });
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "flex gap-2",
+            description ? "items-start" : "items-center",
+            labelPosition === "left" && "flex-row-reverse"
+          ),
+          children: [
+            checkboxElement,
+            labelElement
+          ]
+        }
+      ),
+      error && /* @__PURE__ */ jsx("p", { id: errorId, className: "text-destructive text-sm", role: "alert", children: error })
+    ] });
+  }
+);
+Checkbox.displayName = "Checkbox";
+function CheckboxGroup({
+  label,
+  description,
+  error,
+  orientation = "vertical",
+  children,
+  className
+}) {
+  const groupId = React.useId();
+  const descriptionId = `${groupId}-description`;
+  const errorId = `${groupId}-error`;
+  return /* @__PURE__ */ jsxs(
+    "fieldset",
+    {
+      className: cn("flex flex-col", className),
+      "aria-describedby": [description ? descriptionId : null, error ? errorId : null].filter(Boolean).join(" ") || void 0,
+      children: [
+        label && /* @__PURE__ */ jsx("legend", { className: "text-foreground mb-1 text-sm font-medium", children: label }),
+        description && /* @__PURE__ */ jsx("p", { id: descriptionId, className: "text-muted-foreground mb-3 text-xs", children: description }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "group",
+            className: cn(
+              "flex gap-4",
+              orientation === "vertical" && "flex-col gap-2"
+            ),
+            children
+          }
+        ),
+        error && /* @__PURE__ */ jsx("p", { id: errorId, className: "text-destructive mt-2 text-sm", role: "alert", children: error })
+      ]
+    }
+  );
+}
+CheckboxGroup.displayName = "CheckboxGroup";
+function CheckIcon({ size, className }) {
+  const sizeMap = {
+    sm: 10,
+    md: 12,
+    lg: 14
+  };
+  const iconSize = sizeMap[size || "md"];
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: iconSize,
+      height: iconSize,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "3",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" })
+    }
+  );
+}
+function MinusIcon({ size, className }) {
+  const sizeMap = {
+    sm: 10,
+    md: 12,
+    lg: 14
+  };
+  const iconSize = sizeMap[size || "md"];
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: iconSize,
+      height: iconSize,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "3",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("path", { d: "M5 12h14" })
+    }
+  );
+}
+
+export { Checkbox, CheckboxGroup, checkboxVariants };
+//# sourceMappingURL=chunk-G2DOD34H.js.map
+//# sourceMappingURL=chunk-G2DOD34H.js.map

package/dist/chunk-G2DOD34H.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"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","file":"chunk-G2DOD34H.js","sourcesContent":["import * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\n\nconst checkboxVariants = cva(\n  [\n    'shrink-0 appearance-none',\n    'border-2 border-input rounded',\n    'bg-background',\n    'transition-all duration-150',\n    'cursor-pointer',\n    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n    'disabled:cursor-not-allowed disabled:opacity-50',\n    'checked:bg-primary-500 checked:border-primary-500',\n    'indeterminate:bg-primary-500 indeterminate:border-primary-500',\n  ],\n  {\n    variants: {\n      size: {\n        sm: 'h-4 w-4',\n        md: 'h-5 w-5',\n        lg: 'h-6 w-6',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  }\n);\n\nexport interface CheckboxProps\n  extends\n    Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'>,\n    VariantProps<typeof checkboxVariants> {\n  /** Label for the checkbox */\n  label?: string;\n  /** Description text below the label */\n  description?: string;\n  /** Indeterminate state (neither checked nor unchecked) */\n  indeterminate?: boolean;\n  /** Error message */\n  error?: string;\n  /** Position of the label */\n  labelPosition?: 'left' | 'right';\n}\n\n/**\n * An accessible checkbox component with support for indeterminate state.\n *\n * @example\n * ```tsx\n * <Checkbox label=\"Accept terms and conditions\" />\n * <Checkbox label=\"Newsletter\" description=\"Receive updates about new features\" />\n * <Checkbox indeterminate label=\"Select all\" />\n * ```\n */\nconst Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(\n  (\n    {\n      className,\n      size,\n      label,\n      description,\n      indeterminate = false,\n      error,\n      labelPosition = 'right',\n      id,\n      disabled,\n      ...props\n    },\n    ref\n  ) => {\n    const internalRef = React.useRef<HTMLInputElement>(null);\n    const generatedId = React.useId();\n    const checkboxId = id || generatedId;\n    const descriptionId = `${checkboxId}-description`;\n    const errorId = `${checkboxId}-error`;\n\n    // Handle indeterminate state\n    React.useEffect(() => {\n      const checkbox = internalRef.current;\n      if (checkbox) {\n        checkbox.indeterminate = indeterminate;\n      }\n    }, [indeterminate]);\n\n    // Combine refs\n    React.useImperativeHandle(ref, () => internalRef.current!);\n\n    const checkboxElement = (\n      <span className=\"relative inline-flex items-center justify-center\">\n        <input\n          ref={internalRef}\n          id={checkboxId}\n          type=\"checkbox\"\n          disabled={disabled}\n          aria-describedby={\n            [description ? descriptionId : null, error ? errorId : null]\n              .filter(Boolean)\n              .join(' ') || undefined\n          }\n          aria-invalid={!!error}\n          className={cn('peer', checkboxVariants({ size }), className)}\n          {...props}\n        />\n        {/* Custom check icon overlay */}\n        <CheckIcon\n          size={size}\n          className=\"pointer-events-none absolute text-white opacity-0 transition-opacity peer-checked:opacity-100\"\n        />\n        {/* Custom indeterminate icon overlay */}\n        <MinusIcon\n          size={size}\n          className=\"pointer-events-none absolute text-white opacity-0 transition-opacity peer-indeterminate:opacity-100\"\n        />\n      </span>\n    );\n\n    const labelElement = label && (\n      <div className=\"flex flex-col\">\n        <label\n          htmlFor={checkboxId}\n          className={cn(\n            'text-foreground cursor-pointer text-sm font-medium select-none',\n            disabled && 'cursor-not-allowed opacity-50'\n          )}\n        >\n          {label}\n        </label>\n        {description && (\n          <p\n            id={descriptionId}\n            className=\"text-muted-foreground mt-0.5 text-xs\"\n          >\n            {description}\n          </p>\n        )}\n      </div>\n    );\n\n    return (\n      <div className=\"flex flex-col gap-1\">\n        <div\n          className={cn(\n            'flex gap-2',\n            description ? 'items-start' : 'items-center',\n            labelPosition === 'left' && 'flex-row-reverse'\n          )}\n        >\n          {checkboxElement}\n          {labelElement}\n        </div>\n        {error && (\n          <p id={errorId} className=\"text-destructive text-sm\" role=\"alert\">\n            {error}\n          </p>\n        )}\n      </div>\n    );\n  }\n);\n\nCheckbox.displayName = 'Checkbox';\n\n// ============================================================================\n// Checkbox Group\n// ============================================================================\n\nexport interface CheckboxGroupProps {\n  /** Group label */\n  label?: string;\n  /** Description for the group */\n  description?: string;\n  /** Error message for the group */\n  error?: string;\n  /** Orientation of checkboxes */\n  orientation?: 'horizontal' | 'vertical';\n  /** Children checkboxes */\n  children: React.ReactNode;\n  /** Additional class name */\n  className?: string;\n}\n\n/**\n * A container for grouping related checkboxes.\n *\n * @example\n * ```tsx\n * <CheckboxGroup label=\"Interests\" orientation=\"vertical\">\n *   <Checkbox label=\"Sports\" />\n *   <Checkbox label=\"Music\" />\n *   <Checkbox label=\"Travel\" />\n * </CheckboxGroup>\n * ```\n */\nfunction CheckboxGroup({\n  label,\n  description,\n  error,\n  orientation = 'vertical',\n  children,\n  className,\n}: CheckboxGroupProps) {\n  const groupId = React.useId();\n  const descriptionId = `${groupId}-description`;\n  const errorId = `${groupId}-error`;\n\n  return (\n    <fieldset\n      className={cn('flex flex-col', className)}\n      aria-describedby={\n        [description ? descriptionId : null, error ? errorId : null]\n          .filter(Boolean)\n          .join(' ') || undefined\n      }\n    >\n      {label && (\n        <legend className=\"text-foreground mb-1 text-sm font-medium\">\n          {label}\n        </legend>\n      )}\n      {description && (\n        <p id={descriptionId} className=\"text-muted-foreground mb-3 text-xs\">\n          {description}\n        </p>\n      )}\n      <div\n        role=\"group\"\n        className={cn(\n          'flex gap-4',\n          orientation === 'vertical' && 'flex-col gap-2'\n        )}\n      >\n        {children}\n      </div>\n      {error && (\n        <p id={errorId} className=\"text-destructive mt-2 text-sm\" role=\"alert\">\n          {error}\n        </p>\n      )}\n    </fieldset>\n  );\n}\n\nCheckboxGroup.displayName = 'CheckboxGroup';\n\n// ============================================================================\n// Check Icon\n// ============================================================================\n\ninterface CheckIconProps {\n  size?: 'sm' | 'md' | 'lg' | null;\n  className?: string;\n}\n\nfunction CheckIcon({ size, className }: CheckIconProps) {\n  const sizeMap = {\n    sm: 10,\n    md: 12,\n    lg: 14,\n  };\n  const iconSize = sizeMap[size || 'md'];\n\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width={iconSize}\n      height={iconSize}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"3\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      className={className}\n      aria-hidden=\"true\"\n    >\n      <path d=\"M20 6 9 17l-5-5\" />\n    </svg>\n  );\n}\n\nfunction MinusIcon({ size, className }: CheckIconProps) {\n  const sizeMap = {\n    sm: 10,\n    md: 12,\n    lg: 14,\n  };\n  const iconSize = sizeMap[size || 'md'];\n\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width={iconSize}\n      height={iconSize}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"3\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      className={className}\n      aria-hidden=\"true\"\n    >\n      <path d=\"M5 12h14\" />\n    </svg>\n  );\n}\n\nexport { Checkbox, CheckboxGroup, checkboxVariants };\n"]}

package/dist/chunk-GV5JQBPX.js

@@ -0,0 +1,110 @@
+import { cn } from './chunk-F3SOEIN2.js';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var spinnerVariants = cva(
+  ["animate-spin rounded-full border-2 border-current border-t-transparent"],
+  {
+    variants: {
+      size: {
+        xs: "h-3 w-3",
+        sm: "h-4 w-4",
+        md: "h-6 w-6",
+        lg: "h-8 w-8",
+        xl: "h-12 w-12"
+      },
+      variant: {
+        default: "text-primary-500",
+        muted: "text-muted-foreground",
+        white: "text-white"
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      variant: "default"
+    }
+  }
+);
+function Spinner({
+  className,
+  size,
+  variant,
+  label = "Loading",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "status",
+      "aria-label": label,
+      className: cn(spinnerVariants({ size, variant }), className),
+      ...props,
+      children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: label })
+    }
+  );
+}
+Spinner.displayName = "Spinner";
+function SpinnerWithLabel({
+  label,
+  labelPosition = "bottom",
+  size,
+  variant,
+  className,
+  ...props
+}) {
+  const positionClasses = {
+    top: "flex-col-reverse",
+    bottom: "flex-col",
+    left: "flex-row-reverse",
+    right: "flex-row"
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "status",
+      "aria-label": label,
+      className: cn(
+        "inline-flex items-center justify-center gap-2",
+        positionClasses[labelPosition],
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(spinnerVariants({ size, variant })),
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm", children: label })
+      ]
+    }
+  );
+}
+SpinnerWithLabel.displayName = "SpinnerWithLabel";
+function FullPageSpinner({
+  backdrop = true,
+  text,
+  size = "xl",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "fixed inset-0 z-50 flex flex-col items-center justify-center gap-4",
+        backdrop && "bg-background/80 backdrop-blur-sm"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(Spinner, { size, ...props }),
+        text && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", children: text })
+      ]
+    }
+  );
+}
+FullPageSpinner.displayName = "FullPageSpinner";
+
+export { FullPageSpinner, Spinner, SpinnerWithLabel, spinnerVariants };
+//# sourceMappingURL=chunk-GV5JQBPX.js.map
+//# sourceMappingURL=chunk-GV5JQBPX.js.map

package/dist/chunk-GV5JQBPX.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Spinner/Spinner.tsx"],"names":[],"mappings":"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","file":"chunk-GV5JQBPX.js","sourcesContent":["import * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\n\nconst spinnerVariants = cva(\n  ['animate-spin rounded-full border-2 border-current border-t-transparent'],\n  {\n    variants: {\n      size: {\n        xs: 'h-3 w-3',\n        sm: 'h-4 w-4',\n        md: 'h-6 w-6',\n        lg: 'h-8 w-8',\n        xl: 'h-12 w-12',\n      },\n      variant: {\n        default: 'text-primary-500',\n        muted: 'text-muted-foreground',\n        white: 'text-white',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n      variant: 'default',\n    },\n  }\n);\n\nexport interface SpinnerProps\n  extends\n    React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof spinnerVariants> {\n  /** Accessible label for the spinner */\n  label?: string;\n}\n\n/**\n * A loading spinner component.\n *\n * @example\n * ```tsx\n * <Spinner />\n * <Spinner size=\"lg\" label=\"Loading data...\" />\n * <Spinner variant=\"white\" /> // For use on dark backgrounds\n * ```\n */\nfunction Spinner({\n  className,\n  size,\n  variant,\n  label = 'Loading',\n  ...props\n}: SpinnerProps) {\n  return (\n    <div\n      role=\"status\"\n      aria-label={label}\n      className={cn(spinnerVariants({ size, variant }), className)}\n      {...props}\n    >\n      <span className=\"sr-only\">{label}</span>\n    </div>\n  );\n}\n\nSpinner.displayName = 'Spinner';\n\n// ============================================================================\n// Spinner with Label\n// ============================================================================\n\nexport interface SpinnerWithLabelProps extends SpinnerProps {\n  /** Label text to display */\n  label: string;\n  /** Position of the label */\n  labelPosition?: 'top' | 'bottom' | 'left' | 'right';\n}\n\n/**\n * A spinner with a visible label.\n *\n * @example\n * ```tsx\n * <SpinnerWithLabel label=\"Loading...\" />\n * <SpinnerWithLabel label=\"Processing\" labelPosition=\"right\" />\n * ```\n */\nfunction SpinnerWithLabel({\n  label,\n  labelPosition = 'bottom',\n  size,\n  variant,\n  className,\n  ...props\n}: SpinnerWithLabelProps) {\n  const positionClasses = {\n    top: 'flex-col-reverse',\n    bottom: 'flex-col',\n    left: 'flex-row-reverse',\n    right: 'flex-row',\n  };\n\n  return (\n    <div\n      role=\"status\"\n      aria-label={label}\n      className={cn(\n        'inline-flex items-center justify-center gap-2',\n        positionClasses[labelPosition],\n        className\n      )}\n      {...props}\n    >\n      <div\n        className={cn(spinnerVariants({ size, variant }))}\n        aria-hidden=\"true\"\n      />\n      <span className=\"text-muted-foreground text-sm\">{label}</span>\n    </div>\n  );\n}\n\nSpinnerWithLabel.displayName = 'SpinnerWithLabel';\n\n// ============================================================================\n// Full Page Spinner\n// ============================================================================\n\nexport interface FullPageSpinnerProps extends SpinnerProps {\n  /** Whether to show a backdrop */\n  backdrop?: boolean;\n  /** Text to display below the spinner */\n  text?: string;\n}\n\n/**\n * A full-page loading spinner with optional backdrop.\n *\n * @example\n * ```tsx\n * <FullPageSpinner />\n * <FullPageSpinner backdrop text=\"Loading your data...\" />\n * ```\n */\nfunction FullPageSpinner({\n  backdrop = true,\n  text,\n  size = 'xl',\n  ...props\n}: FullPageSpinnerProps) {\n  return (\n    <div\n      className={cn(\n        'fixed inset-0 z-50 flex flex-col items-center justify-center gap-4',\n        backdrop && 'bg-background/80 backdrop-blur-sm'\n      )}\n    >\n      <Spinner size={size} {...props} />\n      {text && <p className=\"text-muted-foreground text-sm\">{text}</p>}\n    </div>\n  );\n}\n\nFullPageSpinner.displayName = 'FullPageSpinner';\n\nexport { Spinner, SpinnerWithLabel, FullPageSpinner, spinnerVariants };\n"]}

package/dist/chunk-H2CIKJQI.js

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+// src/components/VisuallyHidden/VisuallyHidden.tsx
+var VisuallyHidden = React.forwardRef(
+  ({ children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        style: {
+          position: "absolute",
+          width: "1px",
+          height: "1px",
+          padding: 0,
+          margin: "-1px",
+          overflow: "hidden",
+          clip: "rect(0, 0, 0, 0)",
+          whiteSpace: "nowrap",
+          borderWidth: 0
+        },
+        ...props,
+        children
+      }
+    );
+  }
+);
+VisuallyHidden.displayName = "VisuallyHidden";
+
+export { VisuallyHidden };
+//# sourceMappingURL=chunk-H2CIKJQI.js.map
+//# sourceMappingURL=chunk-H2CIKJQI.js.map

package/dist/chunk-H2CIKJQI.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/VisuallyHidden/VisuallyHidden.tsx"],"names":[],"mappings":";;;;AAkBA,IAAM,cAAA,GAAuB,KAAA,CAAA,UAAA;AAAA,EAC3B,CAAC,EAAE,QAAA,EAAU,GAAG,KAAA,IAAS,GAAA,KAAQ;AAC/B,IAAA,uBACE,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,KAAA,EAAO;AAAA,UACL,QAAA,EAAU,UAAA;AAAA,UACV,KAAA,EAAO,KAAA;AAAA,UACP,MAAA,EAAQ,KAAA;AAAA,UACR,OAAA,EAAS,CAAA;AAAA,UACT,MAAA,EAAQ,MAAA;AAAA,UACR,QAAA,EAAU,QAAA;AAAA,UACV,IAAA,EAAM,kBAAA;AAAA,UACN,UAAA,EAAY,QAAA;AAAA,UACZ,WAAA,EAAa;AAAA,SACf;AAAA,QACC,GAAG,KAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;AAEA,cAAA,CAAe,WAAA,GAAc,gBAAA","file":"chunk-H2CIKJQI.js","sourcesContent":["import * as React from 'react';\n\nexport interface VisuallyHiddenProps extends React.HTMLAttributes<HTMLSpanElement> {\n  children: React.ReactNode;\n}\n\n/**\n * Component that hides content visually while keeping it accessible to screen readers.\n * Essential for providing context to assistive technologies without affecting visual layout.\n *\n * @example\n * ```tsx\n * <button>\n *   <IconTrash />\n *   <VisuallyHidden>Delete item</VisuallyHidden>\n * </button>\n * ```\n */\nconst VisuallyHidden = React.forwardRef<HTMLSpanElement, VisuallyHiddenProps>(\n  ({ children, ...props }, ref) => {\n    return (\n      <span\n        ref={ref}\n        style={{\n          position: 'absolute',\n          width: '1px',\n          height: '1px',\n          padding: 0,\n          margin: '-1px',\n          overflow: 'hidden',\n          clip: 'rect(0, 0, 0, 0)',\n          whiteSpace: 'nowrap',\n          borderWidth: 0,\n        }}\n        {...props}\n      >\n        {children}\n      </span>\n    );\n  }\n);\n\nVisuallyHidden.displayName = 'VisuallyHidden';\n\nexport { VisuallyHidden };\n"]}

package/dist/chunk-HB7C7NB5.js

@@ -0,0 +1,20 @@
+import { useState, useEffect } from 'react';
+
+// src/hooks/usePrefersReducedMotion.ts
+function usePrefersReducedMotion() {
+  const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);
+  useEffect(() => {
+    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+    setPrefersReducedMotion(mediaQuery.matches);
+    const handleChange = (event) => {
+      setPrefersReducedMotion(event.matches);
+    };
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, []);
+  return prefersReducedMotion;
+}
+
+export { usePrefersReducedMotion };
+//# sourceMappingURL=chunk-HB7C7NB5.js.map
+//# sourceMappingURL=chunk-HB7C7NB5.js.map

package/dist/chunk-HB7C7NB5.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks/usePrefersReducedMotion.ts"],"names":[],"mappings":";;;AAkBO,SAAS,uBAAA,GAAmC;AACjD,EAAA,MAAM,CAAC,oBAAA,EAAsB,uBAAuB,CAAA,GAAI,SAAS,KAAK,CAAA;AAEtE,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,UAAA,GAAa,MAAA,CAAO,UAAA,CAAW,kCAAkC,CAAA;AACvE,IAAA,uBAAA,CAAwB,WAAW,OAAO,CAAA;AAE1C,IAAA,MAAM,YAAA,GAAe,CAAC,KAAA,KAA+B;AACnD,MAAA,uBAAA,CAAwB,MAAM,OAAO,CAAA;AAAA,IACvC,CAAA;AAEA,IAAA,UAAA,CAAW,gBAAA,CAAiB,UAAU,YAAY,CAAA;AAClD,IAAA,OAAO,MAAM,UAAA,CAAW,mBAAA,CAAoB,QAAA,EAAU,YAAY,CAAA;AAAA,EACpE,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,OAAO,oBAAA;AACT","file":"chunk-HB7C7NB5.js","sourcesContent":["import { useEffect, useState } from 'react';\n\n/**\n * Hook that detects if the user prefers reduced motion.\n * Useful for disabling animations for accessibility.\n *\n * @example\n * ```tsx\n * function AnimatedComponent() {\n *   const prefersReducedMotion = usePrefersReducedMotion();\n *   return (\n *     <div className={prefersReducedMotion ? '' : 'animate-fade-in'}>\n *       Content\n *     </div>\n *   );\n * }\n * ```\n */\nexport function usePrefersReducedMotion(): boolean {\n  const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);\n\n  useEffect(() => {\n    const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');\n    setPrefersReducedMotion(mediaQuery.matches);\n\n    const handleChange = (event: MediaQueryListEvent) => {\n      setPrefersReducedMotion(event.matches);\n    };\n\n    mediaQuery.addEventListener('change', handleChange);\n    return () => mediaQuery.removeEventListener('change', handleChange);\n  }, []);\n\n  return prefersReducedMotion;\n}\n"]}