@inzumer/ui-library 1.0.1 → 1.1.0

package/dist/{chunk-HCLY7B4H.js → chunk-2YBZCUME.js}

@@ -19,10 +19,14 @@ var languageOptionStyles = cva(
     }
   }
 );
+var NEXT_KEYS = /* @__PURE__ */ new Set(["ArrowRight", "ArrowDown"]);
+var PREVIOUS_KEYS = /* @__PURE__ */ new Set(["ArrowLeft", "ArrowUp"]);
 var Language = forwardRef(
   ({ options, value, onChange, className, ...props }, ref) => {
     const buttonRefs = useRef(/* @__PURE__ */ new Map());
     const [indicator, setIndicator] = useState(null);
+    const selectedIndex = options.findIndex((option) => option.value === value);
+    const focusableIndex = selectedIndex === -1 ? 0 : selectedIndex;
     useLayoutEffect(() => {
       const activeButton = buttonRefs.current.get(value);
       if (!activeButton) {
@@ -35,11 +39,38 @@ var Language = forwardRef(
         height: activeButton.offsetHeight
       });
     }, [value, options]);
+    const select = (index) => {
+      const option = options[index];
+      if (!option) {
+        return;
+      }
+      buttonRefs.current.get(option.value)?.focus();
+      if (option.value !== value) {
+        onChange(option.value);
+      }
+    };
+    const handleKeyDown = (event) => {
+      const last = options.length - 1;
+      let target = null;
+      if (NEXT_KEYS.has(event.key)) {
+        target = focusableIndex === last ? 0 : focusableIndex + 1;
+      } else if (PREVIOUS_KEYS.has(event.key)) {
+        target = focusableIndex === 0 ? last : focusableIndex - 1;
+      } else if (event.key === "Home") {
+        target = 0;
+      } else if (event.key === "End") {
+        target = last;
+      }
+      if (target !== null) {
+        event.preventDefault();
+        select(target);
+      }
+    };
     return /* @__PURE__ */ jsxs(
       "div",
       {
         ref,
-        role: "listbox",
+        role: "radiogroup",
         "aria-label": "Language selector",
         className: cn(languageStyles, className),
         ...props,
@@ -56,7 +87,7 @@ var Language = forwardRef(
               }
             }
           ),
-          options.map((option) => {
+          options.map((option, index) => {
             const selected = option.value === value;
             return /* @__PURE__ */ jsx(
               "button",
@@ -69,9 +100,11 @@ var Language = forwardRef(
                   }
                 },
                 type: "button",
-                role: "option",
-                "aria-selected": selected,
+                role: "radio",
+                "aria-checked": selected,
+                tabIndex: index === focusableIndex ? 0 : -1,
                 onClick: () => onChange(option.value),
+                onKeyDown: handleKeyDown,
                 className: languageOptionStyles({ selected }),
                 children: option.label
               },
@@ -86,5 +119,5 @@ var Language = forwardRef(
 Language.displayName = "Language";
 
 export { Language };
-//# sourceMappingURL=chunk-HCLY7B4H.js.map
-//# sourceMappingURL=chunk-HCLY7B4H.js.map
+//# sourceMappingURL=chunk-2YBZCUME.js.map
+//# sourceMappingURL=chunk-2YBZCUME.js.map

package/dist/chunk-2YBZCUME.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/molecules/Language/Language.styles.ts","../src/components/molecules/Language/Language.tsx"],"names":[],"mappings":"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","file":"chunk-2YBZCUME.js","sourcesContent":["import { cva } from 'class-variance-authority';\n\nexport const languageStyles =\n  'relative inline-flex items-center gap-1 rounded-md border border-[var(--border-default)] bg-[var(--surface-secondary)] p-1';\n\nexport const languageIndicatorStyles =\n  'absolute left-0 top-0 rounded bg-[var(--btn-primary-bg)] transition-[transform,width,height] duration-200 ease-out';\n\nexport const languageOptionStyles = cva(\n  'relative z-10 rounded px-2.5 py-1 text-xs font-semibold uppercase transition-colors duration-200 ease-out',\n  {\n    variants: {\n      selected: {\n        true: 'text-[var(--btn-primary-text)]',\n        false: 'text-[var(--text-secondary)] hover:text-[var(--text-primary)]',\n      },\n    },\n    defaultVariants: {\n      selected: false,\n    },\n  },\n);\n","import { cn } from '@utils';\nimport {\n  forwardRef,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type HTMLAttributes,\n  type KeyboardEvent,\n} from 'react';\nimport { languageIndicatorStyles, languageOptionStyles, languageStyles } from './Language.styles';\n\nexport interface LanguageOption {\n  value: string;\n  label: string;\n}\n\nexport type LanguageProps = Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> & {\n  options: LanguageOption[];\n  value: string;\n  onChange: (value: string) => void;\n};\n\ntype IndicatorRect = { left: number; top: number; width: number; height: number };\n\nconst NEXT_KEYS = new Set(['ArrowRight', 'ArrowDown']);\nconst PREVIOUS_KEYS = new Set(['ArrowLeft', 'ArrowUp']);\n\n/**\n * Single-choice segmented switch, following the WAI-ARIA radio group pattern: one Tab stop,\n * arrow keys (and Home/End) move the selection. Name it with `aria-label` (defaults to\n * \"Language selector\") or `aria-labelledby`.\n */\nexport const Language = forwardRef<HTMLDivElement, LanguageProps>(\n  ({ options, value, onChange, className, ...props }, ref) => {\n    const buttonRefs = useRef(new Map<string, HTMLButtonElement>());\n    const [indicator, setIndicator] = useState<IndicatorRect | null>(null);\n    const selectedIndex = options.findIndex((option) => option.value === value);\n    const focusableIndex = selectedIndex === -1 ? 0 : selectedIndex;\n\n    useLayoutEffect(() => {\n      const activeButton = buttonRefs.current.get(value);\n      if (!activeButton) {\n        return;\n      }\n\n      setIndicator({\n        left: activeButton.offsetLeft,\n        top: activeButton.offsetTop,\n        width: activeButton.offsetWidth,\n        height: activeButton.offsetHeight,\n      });\n    }, [value, options]);\n\n    const select = (index: number) => {\n      const option = options[index];\n      if (!option) {\n        return;\n      }\n      buttonRefs.current.get(option.value)?.focus();\n      if (option.value !== value) {\n        onChange(option.value);\n      }\n    };\n\n    const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n      const last = options.length - 1;\n      let target: number | null = null;\n      if (NEXT_KEYS.has(event.key)) {\n        target = focusableIndex === last ? 0 : focusableIndex + 1;\n      } else if (PREVIOUS_KEYS.has(event.key)) {\n        target = focusableIndex === 0 ? last : focusableIndex - 1;\n      } else if (event.key === 'Home') {\n        target = 0;\n      } else if (event.key === 'End') {\n        target = last;\n      }\n      if (target !== null) {\n        event.preventDefault();\n        select(target);\n      }\n    };\n\n    return (\n      <div\n        ref={ref}\n        role=\"radiogroup\"\n        aria-label=\"Language selector\"\n        className={cn(languageStyles, className)}\n        {...props}\n      >\n        {indicator && (\n          <span\n            aria-hidden\n            className={languageIndicatorStyles}\n            style={{\n              width: indicator.width,\n              height: indicator.height,\n              transform: `translate(${indicator.left}px, ${indicator.top}px)`,\n            }}\n          />\n        )}\n        {options.map((option, index) => {\n          const selected = option.value === value;\n\n          return (\n            <button\n              key={option.value}\n              ref={(node) => {\n                if (node) {\n                  buttonRefs.current.set(option.value, node);\n                } else {\n                  buttonRefs.current.delete(option.value);\n                }\n              }}\n              type=\"button\"\n              role=\"radio\"\n              aria-checked={selected}\n              tabIndex={index === focusableIndex ? 0 : -1}\n              onClick={() => onChange(option.value)}\n              onKeyDown={handleKeyDown}\n              className={languageOptionStyles({ selected })}\n            >\n              {option.label}\n            </button>\n          );\n        })}\n      </div>\n    );\n  },\n);\n\nLanguage.displayName = 'Language';\n"]}

package/dist/{chunk-LK2EJ4H6.js → chunk-CJ4LRU6X.js}

@@ -1,6 +1,6 @@
 import { useDismissableLayer } from './chunk-JCJP427C.js';
-import { useMergedRef } from './chunk-P4Z7HH66.js';
 import { useDelayedUnmount } from './chunk-BNEEI7S5.js';
+import { useMergedRef } from './chunk-P4Z7HH66.js';
 import { RichText } from './chunk-P4CV2EPR.js';
 import { cn } from './chunk-6LLGTBM6.js';
 import { forwardRef, useRef } from 'react';
@@ -74,5 +74,5 @@ var Modal = forwardRef(
 Modal.displayName = "Modal";
 
 export { Modal };
-//# sourceMappingURL=chunk-LK2EJ4H6.js.map
-//# sourceMappingURL=chunk-LK2EJ4H6.js.map
+//# sourceMappingURL=chunk-CJ4LRU6X.js.map
+//# sourceMappingURL=chunk-CJ4LRU6X.js.map

package/dist/{chunk-LK2EJ4H6.js.map → chunk-CJ4LRU6X.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/molecules/Modal/Modal.styles.ts","../src/components/molecules/Modal/Modal.tsx"],"names":[],"mappings":";;;;;;;;;AAEO,IAAM,kBAAA,GAAqB,GAAA;AAAA,EAChC;AAAA,IACE,qFAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,IAAA,EAAM,aAAA;AAAA,QACN,KAAA,EAAO;AAAA;AACT,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS;AAAA;AACX;AAEJ,CAAA;AAEO,IAAM,gBAAA,GAAmB,GAAA;AAAA,EAC9B;AAAA,IACE,8GAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,IAAA,EAAM,uBAAA;AAAA,QACN,KAAA,EAAO;AAAA;AACT,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS;AAAA;AACX;AAEJ,CAAA;AAEO,IAAM,gBAAA,GAAmB,uDAAA;AAEzB,IAAM,iBAAA,GAAoB,0CAAA;AC7BjC,IAAM,gBAAA,GAAmB,GAAA;AAUlB,IAAM,KAAA,GAAQ,UAAA;AAAA,EACnB,CACE,EAAE,IAAA,EAAM,OAAA,EAAS,KAAA,EAAO,MAAA,EAAQ,oBAAA,GAAuB,IAAA,EAAM,SAAA,EAAW,QAAA,EAAU,GAAG,KAAA,IACrF,GAAA,KACG;AACH,IAAA,MAAM,QAAA,GAAW,OAA8B,IAAI,CAAA;AACnD,IAAA,MAAM,WAAA,GAAc,YAAA,CAAa,GAAA,EAAK,QAAQ,CAAA;AAC9C,IAAA,MAAM,EAAE,OAAA,EAAS,OAAA,EAAQ,GAAI,iBAAA,CAAkB,MAAM,gBAAgB,CAAA;AAErE,IAAA,mBAAA,CAAoB,IAAA,EAAM,OAAA,EAAS,QAAA,EAAU,oBAAoB,CAAA;AAEjE,IAAA,IAAI,CAAC,OAAA,EAAS;AACZ,MAAA,OAAO,IAAA;AAAA,IACT;AAEA,IAAA,2BACG,KAAA,EAAA,EAAI,SAAA,EAAW,mBAAmB,EAAE,OAAA,EAAS,CAAA,EAC5C,QAAA,kBAAA,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA,EAAK,WAAA;AAAA,QACL,IAAA,EAAK,QAAA;AAAA,QACL,YAAA,EAAW,MAAA;AAAA,QACX,iBAAA,EAAiB,QAAQ,aAAA,GAAgB,MAAA;AAAA,QACzC,WAAW,EAAA,CAAG,gBAAA,CAAiB,EAAE,OAAA,EAAS,GAAG,SAAS,CAAA;AAAA,QACrD,GAAG,KAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,KAAA,oBACC,GAAA,CAAC,QAAA,EAAA,EAAS,EAAA,EAAG,IAAA,EAAK,EAAA,EAAG,eAAc,OAAA,EAAQ,IAAA,EAAK,SAAA,EAAW,gBAAA,EACxD,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,UAED,QAAA;AAAA,UACA,MAAA,oBAAU,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,mBAAoB,QAAA,EAAA,MAAA,EAAO;AAAA;AAAA;AAAA,KACxD,EACF,CAAA;AAAA,EAEJ;AACF;AAEA,KAAA,CAAM,WAAA,GAAc,OAAA","file":"chunk-LK2EJ4H6.js","sourcesContent":["import { cva } from 'class-variance-authority';\n\nexport const modalOverlayStyles = cva(\n  [\n    'fixed inset-0 z-50 flex items-center justify-center bg-[var(--surface-overlay)] p-4',\n    'transition-opacity duration-200 ease-out',\n  ],\n  {\n    variants: {\n      visible: {\n        true: 'opacity-100',\n        false: 'opacity-0',\n      },\n    },\n    defaultVariants: {\n      visible: false,\n    },\n  },\n);\n\nexport const modalPanelStyles = cva(\n  [\n    'w-full max-w-md rounded-xl border border-[var(--border-default)] bg-[var(--surface-secondary)] p-6 shadow-lg',\n    'transition-all duration-200 ease-out',\n  ],\n  {\n    variants: {\n      visible: {\n        true: 'scale-100 opacity-100',\n        false: 'scale-95 opacity-0',\n      },\n    },\n    defaultVariants: {\n      visible: false,\n    },\n  },\n);\n\nexport const modalTitleStyles = 'mb-4 text-lg font-semibold text-[var(--text-primary)]';\n\nexport const modalFooterStyles = 'mt-6 flex items-center justify-end gap-2';\n","import { forwardRef, useRef, type HTMLAttributes, type ReactNode } from 'react';\nimport { RichText } from '@components';\nimport { useDelayedUnmount, useDismissableLayer, useMergedRef } from '@hooks';\nimport { cn } from '@utils';\nimport {\n  modalFooterStyles,\n  modalOverlayStyles,\n  modalPanelStyles,\n  modalTitleStyles,\n} from './Modal.styles';\n\nconst EXIT_DURATION_MS = 200;\n\nexport type ModalProps = Omit<HTMLAttributes<HTMLDivElement>, 'title'> & {\n  open: boolean;\n  onClose: () => void;\n  title?: ReactNode;\n  footer?: ReactNode;\n  closeOnBackdropClick?: boolean;\n};\n\nexport const Modal = forwardRef<HTMLDivElement, ModalProps>(\n  (\n    { open, onClose, title, footer, closeOnBackdropClick = true, className, children, ...props },\n    ref,\n  ) => {\n    const panelRef = useRef<HTMLDivElement | null>(null);\n    const setPanelRef = useMergedRef(ref, panelRef);\n    const { mounted, visible } = useDelayedUnmount(open, EXIT_DURATION_MS);\n\n    useDismissableLayer(open, onClose, panelRef, closeOnBackdropClick);\n\n    if (!mounted) {\n      return null;\n    }\n\n    return (\n      <div className={modalOverlayStyles({ visible })}>\n        <div\n          ref={setPanelRef}\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-labelledby={title ? 'modal-title' : undefined}\n          className={cn(modalPanelStyles({ visible }), className)}\n          {...props}\n        >\n          {title && (\n            <RichText as=\"h2\" id=\"modal-title\" variant=\"s1\" className={modalTitleStyles}>\n              {title}\n            </RichText>\n          )}\n          {children}\n          {footer && <div className={modalFooterStyles}>{footer}</div>}\n        </div>\n      </div>\n    );\n  },\n);\n\nModal.displayName = 'Modal';\n"]}
+{"version":3,"sources":["../src/components/molecules/Modal/Modal.styles.ts","../src/components/molecules/Modal/Modal.tsx"],"names":[],"mappings":";;;;;;;;;AAEO,IAAM,kBAAA,GAAqB,GAAA;AAAA,EAChC;AAAA,IACE,qFAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,IAAA,EAAM,aAAA;AAAA,QACN,KAAA,EAAO;AAAA;AACT,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS;AAAA;AACX;AAEJ,CAAA;AAEO,IAAM,gBAAA,GAAmB,GAAA;AAAA,EAC9B;AAAA,IACE,8GAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,IAAA,EAAM,uBAAA;AAAA,QACN,KAAA,EAAO;AAAA;AACT,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS;AAAA;AACX;AAEJ,CAAA;AAEO,IAAM,gBAAA,GAAmB,uDAAA;AAEzB,IAAM,iBAAA,GAAoB,0CAAA;AC7BjC,IAAM,gBAAA,GAAmB,GAAA;AAUlB,IAAM,KAAA,GAAQ,UAAA;AAAA,EACnB,CACE,EAAE,IAAA,EAAM,OAAA,EAAS,KAAA,EAAO,MAAA,EAAQ,oBAAA,GAAuB,IAAA,EAAM,SAAA,EAAW,QAAA,EAAU,GAAG,KAAA,IACrF,GAAA,KACG;AACH,IAAA,MAAM,QAAA,GAAW,OAA8B,IAAI,CAAA;AACnD,IAAA,MAAM,WAAA,GAAc,YAAA,CAAa,GAAA,EAAK,QAAQ,CAAA;AAC9C,IAAA,MAAM,EAAE,OAAA,EAAS,OAAA,EAAQ,GAAI,iBAAA,CAAkB,MAAM,gBAAgB,CAAA;AAErE,IAAA,mBAAA,CAAoB,IAAA,EAAM,OAAA,EAAS,QAAA,EAAU,oBAAoB,CAAA;AAEjE,IAAA,IAAI,CAAC,OAAA,EAAS;AACZ,MAAA,OAAO,IAAA;AAAA,IACT;AAEA,IAAA,2BACG,KAAA,EAAA,EAAI,SAAA,EAAW,mBAAmB,EAAE,OAAA,EAAS,CAAA,EAC5C,QAAA,kBAAA,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA,EAAK,WAAA;AAAA,QACL,IAAA,EAAK,QAAA;AAAA,QACL,YAAA,EAAW,MAAA;AAAA,QACX,iBAAA,EAAiB,QAAQ,aAAA,GAAgB,MAAA;AAAA,QACzC,WAAW,EAAA,CAAG,gBAAA,CAAiB,EAAE,OAAA,EAAS,GAAG,SAAS,CAAA;AAAA,QACrD,GAAG,KAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,KAAA,oBACC,GAAA,CAAC,QAAA,EAAA,EAAS,EAAA,EAAG,IAAA,EAAK,EAAA,EAAG,eAAc,OAAA,EAAQ,IAAA,EAAK,SAAA,EAAW,gBAAA,EACxD,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,UAED,QAAA;AAAA,UACA,MAAA,oBAAU,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,mBAAoB,QAAA,EAAA,MAAA,EAAO;AAAA;AAAA;AAAA,KACxD,EACF,CAAA;AAAA,EAEJ;AACF;AAEA,KAAA,CAAM,WAAA,GAAc,OAAA","file":"chunk-CJ4LRU6X.js","sourcesContent":["import { cva } from 'class-variance-authority';\n\nexport const modalOverlayStyles = cva(\n  [\n    'fixed inset-0 z-50 flex items-center justify-center bg-[var(--surface-overlay)] p-4',\n    'transition-opacity duration-200 ease-out',\n  ],\n  {\n    variants: {\n      visible: {\n        true: 'opacity-100',\n        false: 'opacity-0',\n      },\n    },\n    defaultVariants: {\n      visible: false,\n    },\n  },\n);\n\nexport const modalPanelStyles = cva(\n  [\n    'w-full max-w-md rounded-xl border border-[var(--border-default)] bg-[var(--surface-secondary)] p-6 shadow-lg',\n    'transition-all duration-200 ease-out',\n  ],\n  {\n    variants: {\n      visible: {\n        true: 'scale-100 opacity-100',\n        false: 'scale-95 opacity-0',\n      },\n    },\n    defaultVariants: {\n      visible: false,\n    },\n  },\n);\n\nexport const modalTitleStyles = 'mb-4 text-lg font-semibold text-[var(--text-primary)]';\n\nexport const modalFooterStyles = 'mt-6 flex items-center justify-end gap-2';\n","import { forwardRef, useRef, type HTMLAttributes, type ReactNode } from 'react';\nimport { RichText } from '@components';\nimport { useDelayedUnmount, useDismissableLayer, useMergedRef } from '@hooks';\nimport { cn } from '@utils';\nimport {\n  modalFooterStyles,\n  modalOverlayStyles,\n  modalPanelStyles,\n  modalTitleStyles,\n} from './Modal.styles';\n\nconst EXIT_DURATION_MS = 200;\n\nexport type ModalProps = Omit<HTMLAttributes<HTMLDivElement>, 'title'> & {\n  open: boolean;\n  onClose: () => void;\n  title?: ReactNode;\n  footer?: ReactNode;\n  closeOnBackdropClick?: boolean;\n};\n\nexport const Modal = forwardRef<HTMLDivElement, ModalProps>(\n  (\n    { open, onClose, title, footer, closeOnBackdropClick = true, className, children, ...props },\n    ref,\n  ) => {\n    const panelRef = useRef<HTMLDivElement | null>(null);\n    const setPanelRef = useMergedRef(ref, panelRef);\n    const { mounted, visible } = useDelayedUnmount(open, EXIT_DURATION_MS);\n\n    useDismissableLayer(open, onClose, panelRef, closeOnBackdropClick);\n\n    if (!mounted) {\n      return null;\n    }\n\n    return (\n      <div className={modalOverlayStyles({ visible })}>\n        <div\n          ref={setPanelRef}\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-labelledby={title ? 'modal-title' : undefined}\n          className={cn(modalPanelStyles({ visible }), className)}\n          {...props}\n        >\n          {title && (\n            <RichText as=\"h2\" id=\"modal-title\" variant=\"s1\" className={modalTitleStyles}>\n              {title}\n            </RichText>\n          )}\n          {children}\n          {footer && <div className={modalFooterStyles}>{footer}</div>}\n        </div>\n      </div>\n    );\n  },\n);\n\nModal.displayName = 'Modal';\n"]}

package/dist/{chunk-KWSZ2S34.js → chunk-DXJQNQ5K.js}

@@ -1,5 +1,6 @@
+import { useMergedRef } from './chunk-P4Z7HH66.js';
 import { cn } from './chunk-6LLGTBM6.js';
-import { forwardRef } from 'react';
+import { forwardRef, Children, isValidElement, cloneElement } from 'react';
 import { cva } from 'class-variance-authority';
 import { jsx } from 'react/jsx-runtime';
 
@@ -57,20 +58,50 @@ var buttonStyles = cva(
     }
   }
 );
+var isHandler = (key, value) => /^on[A-Z]/.test(key) && typeof value === "function";
+var mergeProps = (slotProps, childProps) => {
+  const merged = { ...slotProps, ...childProps };
+  for (const [key, slotValue] of Object.entries(slotProps)) {
+    const childValue = childProps[key];
+    if (isHandler(key, slotValue) && isHandler(key, childValue)) {
+      merged[key] = (...args) => {
+        childValue(...args);
+        slotValue(...args);
+      };
+    }
+  }
+  merged["className"] = cn(slotProps["className"], childProps["className"]);
+  merged["style"] = {
+    ...slotProps["style"],
+    ...childProps["style"]
+  };
+  return merged;
+};
+var Slot = forwardRef(
+  ({ children, ...slotProps }, forwardedRef) => {
+    const child = Children.count(children) === 1 ? Children.toArray(children)[0] : null;
+    const childProps = isValidElement(child) ? child.props : {};
+    const childRef = childProps["ref"] ?? child?.ref;
+    const ref = useMergedRef(forwardedRef, childRef);
+    if (!isValidElement(child)) {
+      return null;
+    }
+    return cloneElement(child, { ...mergeProps(slotProps, childProps), ref });
+  }
+);
+Slot.displayName = "Slot";
 var Button = forwardRef(
-  ({ className, variant, size, fullWidth, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(
-      "button",
-      {
-        ref,
-        className: cn(buttonStyles({ variant, size, fullWidth }), className),
-        ...props
-      }
-    );
+  ({ className, variant, size, fullWidth, asChild = false, ...props }, ref) => {
+    const classes = cn(buttonStyles({ variant, size, fullWidth }), className);
+    if (asChild) {
+      const slotRef = ref;
+      return /* @__PURE__ */ jsx(Slot, { ref: slotRef, className: classes, ...props });
+    }
+    return /* @__PURE__ */ jsx("button", { ref, className: classes, ...props });
   }
 );
 Button.displayName = "Button";
 
-export { Button };
-//# sourceMappingURL=chunk-KWSZ2S34.js.map
-//# sourceMappingURL=chunk-KWSZ2S34.js.map
+export { Button, buttonStyles };
+//# sourceMappingURL=chunk-DXJQNQ5K.js.map
+//# sourceMappingURL=chunk-DXJQNQ5K.js.map

package/dist/chunk-DXJQNQ5K.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/atoms/Button/Button.styles.ts","../src/components/atoms/Button/Slot.tsx","../src/components/atoms/Button/Button.tsx"],"names":["forwardRef"],"mappings":"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","file":"chunk-DXJQNQ5K.js","sourcesContent":["import { cva } from 'class-variance-authority';\n\nexport const buttonStyles = cva(\n  [\n    'inline-flex items-center justify-center gap-2',\n    'font-medium text-sm leading-none',\n    'rounded-md',\n    'transition-colors duration-150 ease-in-out',\n    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--border-focus)] focus-visible:ring-offset-2',\n    'disabled:pointer-events-none disabled:opacity-50',\n    'select-none',\n  ],\n  {\n    variants: {\n      variant: {\n        primary: [\n          'bg-[var(--btn-primary-bg)] text-[var(--btn-primary-text)]',\n          'border border-[var(--btn-primary-border)]',\n          'hover:bg-[var(--btn-primary-bg-hover)]',\n          'active:bg-[var(--btn-primary-bg-active)]',\n        ],\n        secondary: [\n          'bg-[var(--btn-secondary-bg)] text-[var(--btn-secondary-text)]',\n          'border border-[var(--btn-secondary-border)]',\n          'hover:bg-[var(--btn-secondary-bg-hover)]',\n          'active:bg-[var(--btn-secondary-bg-active)]',\n        ],\n        ghost: [\n          'bg-[var(--btn-ghost-bg)] text-[var(--btn-ghost-text)]',\n          'border border-[var(--btn-ghost-border)]',\n          'hover:bg-[var(--btn-ghost-bg-hover)]',\n          'active:bg-[var(--btn-ghost-bg-active)]',\n        ],\n        destructive: [\n          'bg-[var(--btn-destructive-bg)] text-[var(--btn-destructive-text)]',\n          'border border-[var(--btn-destructive-border)]',\n          'hover:bg-[var(--btn-destructive-bg-hover)]',\n          'active:bg-[var(--btn-destructive-bg-active)]',\n        ],\n      },\n      size: {\n        sm: 'h-8 px-3 text-xs',\n        md: 'h-10 px-4 text-sm',\n        lg: 'h-12 px-6 text-base',\n        icon: 'h-10 w-10',\n      },\n      fullWidth: {\n        true: 'w-full',\n      },\n    },\n    defaultVariants: {\n      variant: 'primary',\n      size: 'md',\n    },\n  },\n);\n","import { useMergedRef } from '@hooks';\nimport { cn } from '@utils';\nimport {\n  Children,\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  type CSSProperties,\n  type HTMLAttributes,\n  type ReactNode,\n  type Ref,\n} from 'react';\n\ntype AnyProps = Record<string, unknown>;\n\nexport type SlotProps = HTMLAttributes<HTMLElement> & { children?: ReactNode };\n\nconst isHandler = (key: string, value: unknown): value is (...args: unknown[]) => void =>\n  /^on[A-Z]/.test(key) && typeof value === 'function';\n\n/** Slot props first, child props override — except handlers (both run) and className/style (merged). */\nconst mergeProps = (slotProps: AnyProps, childProps: AnyProps): AnyProps => {\n  const merged: AnyProps = { ...slotProps, ...childProps };\n  for (const [key, slotValue] of Object.entries(slotProps)) {\n    const childValue = childProps[key];\n    if (isHandler(key, slotValue) && isHandler(key, childValue)) {\n      merged[key] = (...args: unknown[]) => {\n        childValue(...args);\n        slotValue(...args);\n      };\n    }\n  }\n  merged['className'] = cn(slotProps['className'] as string, childProps['className'] as string);\n  merged['style'] = {\n    ...(slotProps['style'] as CSSProperties),\n    ...(childProps['style'] as CSSProperties),\n  };\n  return merged;\n};\n\n/**\n * Renders its single child element instead of its own DOM node, merging its props into it\n * (Radix-style `asChild`). Used by `Button` so a link can look like a button and stay an `<a>`.\n */\nexport const Slot = forwardRef<HTMLElement, SlotProps>(\n  ({ children, ...slotProps }, forwardedRef) => {\n    // Text or several children can't receive props: render nothing rather than throwing.\n    const child = Children.count(children) === 1 ? Children.toArray(children)[0] : null;\n    const childProps = isValidElement<AnyProps>(child) ? child.props : {};\n    // React 19 exposes `ref` as a prop; React 18 keeps it on the element.\n    const childRef = (childProps['ref'] ??\n      (child as unknown as { ref?: Ref<HTMLElement> } | null)?.ref) as Ref<HTMLElement> | undefined;\n    const ref = useMergedRef(forwardedRef, childRef);\n\n    if (!isValidElement<AnyProps>(child)) {\n      return null;\n    }\n    return cloneElement(child, { ...mergeProps(slotProps as AnyProps, childProps), ref });\n  },\n);\n\nSlot.displayName = 'Slot';\n","import { cn } from '@utils';\nimport type { VariantProps } from 'class-variance-authority';\nimport { forwardRef, type ButtonHTMLAttributes, type Ref } from 'react';\nimport { buttonStyles } from './Button.styles';\nimport { Slot } from './Slot';\n\nexport type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &\n  VariantProps<typeof buttonStyles> & {\n    /**\n     * Render the single child element (e.g. an `<a>`) with the button styles and props instead of\n     * a `<button>`. Use it for navigation that must look like a button.\n     */\n    asChild?: boolean;\n  };\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ className, variant, size, fullWidth, asChild = false, ...props }, ref) => {\n    const classes = cn(buttonStyles({ variant, size, fullWidth }), className);\n\n    if (asChild) {\n      // The ref points at whatever element the child renders (usually an <a>), not a <button>.\n      const slotRef = ref as unknown as Ref<HTMLElement>;\n      return <Slot ref={slotRef} className={classes} {...props} />;\n    }\n\n    return <button ref={ref} className={classes} {...props} />;\n  },\n);\n\nButton.displayName = 'Button';\n"]}

package/dist/{chunk-K35XIA25.js → chunk-ZEGQFAYE.js}

@@ -1,6 +1,6 @@
 import { useDismissableLayer } from './chunk-JCJP427C.js';
-import { useMergedRef } from './chunk-P4Z7HH66.js';
 import { useDelayedUnmount } from './chunk-BNEEI7S5.js';
+import { useMergedRef } from './chunk-P4Z7HH66.js';
 import { RichText } from './chunk-P4CV2EPR.js';
 import { cn } from './chunk-6LLGTBM6.js';
 import { forwardRef, useRef } from 'react';
@@ -77,5 +77,5 @@ var BottomSheet = forwardRef(
 BottomSheet.displayName = "BottomSheet";
 
 export { BottomSheet };
-//# sourceMappingURL=chunk-K35XIA25.js.map
-//# sourceMappingURL=chunk-K35XIA25.js.map
+//# sourceMappingURL=chunk-ZEGQFAYE.js.map
+//# sourceMappingURL=chunk-ZEGQFAYE.js.map

package/dist/{chunk-K35XIA25.js.map → chunk-ZEGQFAYE.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/molecules/BottomSheet/BottomSheet.styles.ts","../src/components/molecules/BottomSheet/BottomSheet.tsx"],"names":[],"mappings":";;;;;;;;;AAEO,IAAM,wBAAA,GAA2B,GAAA;AAAA,EACtC;AAAA,IACE,8EAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,IAAA,EAAM,aAAA;AAAA,QACN,KAAA,EAAO;AAAA;AACT,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS;AAAA;AACX;AAEJ,CAAA;AAEO,IAAM,sBAAA,GAAyB,GAAA;AAAA,EACpC;AAAA,IACE,+EAAA;AAAA,IACA,6CAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,IAAA,EAAM,eAAA;AAAA,QACN,KAAA,EAAO;AAAA;AACT,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS;AAAA;AACX;AAEJ,CAAA;AAEO,IAAM,uBAAA,GACX,gEAAA;AAEK,IAAM,sBAAA,GAAyB,uDAAA;AAE/B,IAAM,uBAAA,GAA0B,0CAAA;AChCvC,IAAM,gBAAA,GAAmB,GAAA;AAUlB,IAAM,WAAA,GAAc,UAAA;AAAA,EACzB,CACE,EAAE,IAAA,EAAM,OAAA,EAAS,KAAA,EAAO,MAAA,EAAQ,oBAAA,GAAuB,IAAA,EAAM,SAAA,EAAW,QAAA,EAAU,GAAG,KAAA,IACrF,GAAA,KACG;AACH,IAAA,MAAM,QAAA,GAAW,OAA8B,IAAI,CAAA;AACnD,IAAA,MAAM,WAAA,GAAc,YAAA,CAAa,GAAA,EAAK,QAAQ,CAAA;AAC9C,IAAA,MAAM,EAAE,OAAA,EAAS,OAAA,EAAQ,GAAI,iBAAA,CAAkB,MAAM,gBAAgB,CAAA;AAErE,IAAA,mBAAA,CAAoB,IAAA,EAAM,OAAA,EAAS,QAAA,EAAU,oBAAoB,CAAA;AAEjE,IAAA,IAAI,CAAC,OAAA,EAAS;AACZ,MAAA,OAAO,IAAA;AAAA,IACT;AAEA,IAAA,2BACG,KAAA,EAAA,EAAI,SAAA,EAAW,yBAAyB,EAAE,OAAA,EAAS,CAAA,EAClD,QAAA,kBAAA,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA,EAAK,WAAA;AAAA,QACL,IAAA,EAAK,QAAA;AAAA,QACL,YAAA,EAAW,MAAA;AAAA,QACX,iBAAA,EAAiB,QAAQ,oBAAA,GAAuB,MAAA;AAAA,QAChD,WAAW,EAAA,CAAG,sBAAA,CAAuB,EAAE,OAAA,EAAS,GAAG,SAAS,CAAA;AAAA,QAC3D,GAAG,KAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,KAAA,EAAA,EAAI,aAAA,EAAW,IAAA,EAAC,SAAA,EAAW,uBAAA,EAAyB,CAAA;AAAA,UACpD,KAAA,oBACC,GAAA,CAAC,QAAA,EAAA,EAAS,EAAA,EAAG,IAAA,EAAK,EAAA,EAAG,oBAAA,EAAqB,OAAA,EAAQ,IAAA,EAAK,SAAA,EAAW,sBAAA,EAC/D,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,UAED,QAAA;AAAA,UACA,MAAA,oBAAU,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,yBAA0B,QAAA,EAAA,MAAA,EAAO;AAAA;AAAA;AAAA,KAC9D,EACF,CAAA;AAAA,EAEJ;AACF;AAEA,WAAA,CAAY,WAAA,GAAc,aAAA","file":"chunk-K35XIA25.js","sourcesContent":["import { cva } from 'class-variance-authority';\n\nexport const bottomSheetOverlayStyles = cva(\n  [\n    'fixed inset-0 z-50 flex items-end justify-center bg-[var(--surface-overlay)]',\n    'transition-opacity duration-200 ease-out',\n  ],\n  {\n    variants: {\n      visible: {\n        true: 'opacity-100',\n        false: 'opacity-0',\n      },\n    },\n    defaultVariants: {\n      visible: false,\n    },\n  },\n);\n\nexport const bottomSheetPanelStyles = cva(\n  [\n    'w-full max-w-md rounded-t-xl border border-b-0 border-[var(--border-default)]',\n    'bg-[var(--surface-secondary)] p-6 shadow-lg',\n    'transition-transform duration-200 ease-out',\n  ],\n  {\n    variants: {\n      visible: {\n        true: 'translate-y-0',\n        false: 'translate-y-full',\n      },\n    },\n    defaultVariants: {\n      visible: false,\n    },\n  },\n);\n\nexport const bottomSheetHandleStyles =\n  'mx-auto mb-4 h-1.5 w-10 rounded-full bg-[var(--border-strong)]';\n\nexport const bottomSheetTitleStyles = 'mb-4 text-lg font-semibold text-[var(--text-primary)]';\n\nexport const bottomSheetFooterStyles = 'mt-6 flex items-center justify-end gap-2';\n","import { forwardRef, useRef, type HTMLAttributes, type ReactNode } from 'react';\nimport { RichText } from '@components';\nimport { useDelayedUnmount, useDismissableLayer, useMergedRef } from '@hooks';\nimport { cn } from '@utils';\nimport {\n  bottomSheetFooterStyles,\n  bottomSheetHandleStyles,\n  bottomSheetOverlayStyles,\n  bottomSheetPanelStyles,\n  bottomSheetTitleStyles,\n} from './BottomSheet.styles';\n\nconst EXIT_DURATION_MS = 200;\n\nexport type BottomSheetProps = Omit<HTMLAttributes<HTMLDivElement>, 'title'> & {\n  open: boolean;\n  onClose: () => void;\n  title?: ReactNode;\n  footer?: ReactNode;\n  closeOnBackdropClick?: boolean;\n};\n\nexport const BottomSheet = forwardRef<HTMLDivElement, BottomSheetProps>(\n  (\n    { open, onClose, title, footer, closeOnBackdropClick = true, className, children, ...props },\n    ref,\n  ) => {\n    const panelRef = useRef<HTMLDivElement | null>(null);\n    const setPanelRef = useMergedRef(ref, panelRef);\n    const { mounted, visible } = useDelayedUnmount(open, EXIT_DURATION_MS);\n\n    useDismissableLayer(open, onClose, panelRef, closeOnBackdropClick);\n\n    if (!mounted) {\n      return null;\n    }\n\n    return (\n      <div className={bottomSheetOverlayStyles({ visible })}>\n        <div\n          ref={setPanelRef}\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-labelledby={title ? 'bottom-sheet-title' : undefined}\n          className={cn(bottomSheetPanelStyles({ visible }), className)}\n          {...props}\n        >\n          <div aria-hidden className={bottomSheetHandleStyles} />\n          {title && (\n            <RichText as=\"h2\" id=\"bottom-sheet-title\" variant=\"s1\" className={bottomSheetTitleStyles}>\n              {title}\n            </RichText>\n          )}\n          {children}\n          {footer && <div className={bottomSheetFooterStyles}>{footer}</div>}\n        </div>\n      </div>\n    );\n  },\n);\n\nBottomSheet.displayName = 'BottomSheet';\n"]}
+{"version":3,"sources":["../src/components/molecules/BottomSheet/BottomSheet.styles.ts","../src/components/molecules/BottomSheet/BottomSheet.tsx"],"names":[],"mappings":";;;;;;;;;AAEO,IAAM,wBAAA,GAA2B,GAAA;AAAA,EACtC;AAAA,IACE,8EAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,IAAA,EAAM,aAAA;AAAA,QACN,KAAA,EAAO;AAAA;AACT,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS;AAAA;AACX;AAEJ,CAAA;AAEO,IAAM,sBAAA,GAAyB,GAAA;AAAA,EACpC;AAAA,IACE,+EAAA;AAAA,IACA,6CAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,IAAA,EAAM,eAAA;AAAA,QACN,KAAA,EAAO;AAAA;AACT,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS;AAAA;AACX;AAEJ,CAAA;AAEO,IAAM,uBAAA,GACX,gEAAA;AAEK,IAAM,sBAAA,GAAyB,uDAAA;AAE/B,IAAM,uBAAA,GAA0B,0CAAA;AChCvC,IAAM,gBAAA,GAAmB,GAAA;AAUlB,IAAM,WAAA,GAAc,UAAA;AAAA,EACzB,CACE,EAAE,IAAA,EAAM,OAAA,EAAS,KAAA,EAAO,MAAA,EAAQ,oBAAA,GAAuB,IAAA,EAAM,SAAA,EAAW,QAAA,EAAU,GAAG,KAAA,IACrF,GAAA,KACG;AACH,IAAA,MAAM,QAAA,GAAW,OAA8B,IAAI,CAAA;AACnD,IAAA,MAAM,WAAA,GAAc,YAAA,CAAa,GAAA,EAAK,QAAQ,CAAA;AAC9C,IAAA,MAAM,EAAE,OAAA,EAAS,OAAA,EAAQ,GAAI,iBAAA,CAAkB,MAAM,gBAAgB,CAAA;AAErE,IAAA,mBAAA,CAAoB,IAAA,EAAM,OAAA,EAAS,QAAA,EAAU,oBAAoB,CAAA;AAEjE,IAAA,IAAI,CAAC,OAAA,EAAS;AACZ,MAAA,OAAO,IAAA;AAAA,IACT;AAEA,IAAA,2BACG,KAAA,EAAA,EAAI,SAAA,EAAW,yBAAyB,EAAE,OAAA,EAAS,CAAA,EAClD,QAAA,kBAAA,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA,EAAK,WAAA;AAAA,QACL,IAAA,EAAK,QAAA;AAAA,QACL,YAAA,EAAW,MAAA;AAAA,QACX,iBAAA,EAAiB,QAAQ,oBAAA,GAAuB,MAAA;AAAA,QAChD,WAAW,EAAA,CAAG,sBAAA,CAAuB,EAAE,OAAA,EAAS,GAAG,SAAS,CAAA;AAAA,QAC3D,GAAG,KAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,KAAA,EAAA,EAAI,aAAA,EAAW,IAAA,EAAC,SAAA,EAAW,uBAAA,EAAyB,CAAA;AAAA,UACpD,KAAA,oBACC,GAAA,CAAC,QAAA,EAAA,EAAS,EAAA,EAAG,IAAA,EAAK,EAAA,EAAG,oBAAA,EAAqB,OAAA,EAAQ,IAAA,EAAK,SAAA,EAAW,sBAAA,EAC/D,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,UAED,QAAA;AAAA,UACA,MAAA,oBAAU,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,yBAA0B,QAAA,EAAA,MAAA,EAAO;AAAA;AAAA;AAAA,KAC9D,EACF,CAAA;AAAA,EAEJ;AACF;AAEA,WAAA,CAAY,WAAA,GAAc,aAAA","file":"chunk-ZEGQFAYE.js","sourcesContent":["import { cva } from 'class-variance-authority';\n\nexport const bottomSheetOverlayStyles = cva(\n  [\n    'fixed inset-0 z-50 flex items-end justify-center bg-[var(--surface-overlay)]',\n    'transition-opacity duration-200 ease-out',\n  ],\n  {\n    variants: {\n      visible: {\n        true: 'opacity-100',\n        false: 'opacity-0',\n      },\n    },\n    defaultVariants: {\n      visible: false,\n    },\n  },\n);\n\nexport const bottomSheetPanelStyles = cva(\n  [\n    'w-full max-w-md rounded-t-xl border border-b-0 border-[var(--border-default)]',\n    'bg-[var(--surface-secondary)] p-6 shadow-lg',\n    'transition-transform duration-200 ease-out',\n  ],\n  {\n    variants: {\n      visible: {\n        true: 'translate-y-0',\n        false: 'translate-y-full',\n      },\n    },\n    defaultVariants: {\n      visible: false,\n    },\n  },\n);\n\nexport const bottomSheetHandleStyles =\n  'mx-auto mb-4 h-1.5 w-10 rounded-full bg-[var(--border-strong)]';\n\nexport const bottomSheetTitleStyles = 'mb-4 text-lg font-semibold text-[var(--text-primary)]';\n\nexport const bottomSheetFooterStyles = 'mt-6 flex items-center justify-end gap-2';\n","import { forwardRef, useRef, type HTMLAttributes, type ReactNode } from 'react';\nimport { RichText } from '@components';\nimport { useDelayedUnmount, useDismissableLayer, useMergedRef } from '@hooks';\nimport { cn } from '@utils';\nimport {\n  bottomSheetFooterStyles,\n  bottomSheetHandleStyles,\n  bottomSheetOverlayStyles,\n  bottomSheetPanelStyles,\n  bottomSheetTitleStyles,\n} from './BottomSheet.styles';\n\nconst EXIT_DURATION_MS = 200;\n\nexport type BottomSheetProps = Omit<HTMLAttributes<HTMLDivElement>, 'title'> & {\n  open: boolean;\n  onClose: () => void;\n  title?: ReactNode;\n  footer?: ReactNode;\n  closeOnBackdropClick?: boolean;\n};\n\nexport const BottomSheet = forwardRef<HTMLDivElement, BottomSheetProps>(\n  (\n    { open, onClose, title, footer, closeOnBackdropClick = true, className, children, ...props },\n    ref,\n  ) => {\n    const panelRef = useRef<HTMLDivElement | null>(null);\n    const setPanelRef = useMergedRef(ref, panelRef);\n    const { mounted, visible } = useDelayedUnmount(open, EXIT_DURATION_MS);\n\n    useDismissableLayer(open, onClose, panelRef, closeOnBackdropClick);\n\n    if (!mounted) {\n      return null;\n    }\n\n    return (\n      <div className={bottomSheetOverlayStyles({ visible })}>\n        <div\n          ref={setPanelRef}\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-labelledby={title ? 'bottom-sheet-title' : undefined}\n          className={cn(bottomSheetPanelStyles({ visible }), className)}\n          {...props}\n        >\n          <div aria-hidden className={bottomSheetHandleStyles} />\n          {title && (\n            <RichText as=\"h2\" id=\"bottom-sheet-title\" variant=\"s1\" className={bottomSheetTitleStyles}>\n              {title}\n            </RichText>\n          )}\n          {children}\n          {footer && <div className={bottomSheetFooterStyles}>{footer}</div>}\n        </div>\n      </div>\n    );\n  },\n);\n\nBottomSheet.displayName = 'BottomSheet';\n"]}

package/dist/components/atoms/Button/index.d.ts

@@ -10,6 +10,10 @@ declare const buttonStyles: (props?: ({
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 
 type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<typeof buttonStyles> & {
+    /**
+     * Render the single child element (e.g. an `<a>`) with the button styles and props instead of
+     * a `<button>`. Use it for navigation that must look like a button.
+     */
     asChild?: boolean;
 };
 declare const Button: react.ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<(props?: ({
@@ -17,7 +21,11 @@ declare const Button: react.ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLB
     size?: "sm" | "md" | "lg" | "icon" | null | undefined;
     fullWidth?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & {
+    /**
+     * Render the single child element (e.g. an `<a>`) with the button styles and props instead of
+     * a `<button>`. Use it for navigation that must look like a button.
+     */
     asChild?: boolean;
 } & react.RefAttributes<HTMLButtonElement>>;
 
-export { Button, type ButtonProps };
+export { Button, type ButtonProps, buttonStyles };

package/dist/components/atoms/Button/index.js

@@ -1,4 +1,5 @@
-export { Button } from '../../../chunk-KWSZ2S34.js';
+export { Button, buttonStyles } from '../../../chunk-DXJQNQ5K.js';
+import '../../../chunk-P4Z7HH66.js';
 import '../../../chunk-6LLGTBM6.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/components/atoms/Image/index.d.ts

@@ -4,7 +4,7 @@ import * as class_variance_authority_types from 'class-variance-authority/types'
 import { VariantProps } from 'class-variance-authority';
 
 declare const imageStyles: (props?: ({
-    fit?: "fill" | "cover" | "contain" | null | undefined;
+    fit?: "contain" | "cover" | "fill" | null | undefined;
     rounded?: "md" | "none" | "full" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 
@@ -13,7 +13,7 @@ type ImageProps = Omit<ImgHTMLAttributes<HTMLImageElement>, 'alt'> & VariantProp
     lazy?: boolean;
 };
 declare const Image: react.ForwardRefExoticComponent<Omit<ImgHTMLAttributes<HTMLImageElement>, "alt"> & VariantProps<(props?: ({
-    fit?: "fill" | "cover" | "contain" | null | undefined;
+    fit?: "contain" | "cover" | "fill" | null | undefined;
     rounded?: "md" | "none" | "full" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & {
     alt: string;

package/dist/components/atoms/Input/index.d.ts

@@ -4,7 +4,7 @@ import * as class_variance_authority_types from 'class-variance-authority/types'
 import { VariantProps } from 'class-variance-authority';
 
 declare const inputStyles: (props?: ({
-    state?: "default" | "error" | null | undefined;
+    state?: "error" | "default" | null | undefined;
     inputSize?: "sm" | "md" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 
@@ -14,7 +14,7 @@ type InputProps = InputHTMLAttributes<HTMLInputElement> & VariantProps<typeof in
     error?: string;
 };
 declare const Input: react.ForwardRefExoticComponent<InputHTMLAttributes<HTMLInputElement> & VariantProps<(props?: ({
-    state?: "default" | "error" | null | undefined;
+    state?: "error" | "default" | null | undefined;
     inputSize?: "sm" | "md" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & {
     label?: string;

package/dist/components/atoms/RichText/index.d.ts

@@ -5,7 +5,7 @@ import { VariantProps } from 'class-variance-authority';
 
 declare const richTextStyles: (props?: ({
     variant?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "s1" | "s2" | "s3" | "s4" | "p1" | "p2" | "p3" | "p4" | null | undefined;
-    weight?: "bold" | "light" | "normal" | null | undefined;
+    weight?: "normal" | "light" | "bold" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 
 type RichTextVariant = NonNullable<VariantProps<typeof richTextStyles>['variant']>;
@@ -16,7 +16,7 @@ type RichTextProps = HTMLAttributes<HTMLElement> & VariantProps<typeof richTextS
 };
 declare const RichText: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & VariantProps<(props?: ({
     variant?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "s1" | "s2" | "s3" | "s4" | "p1" | "p2" | "p3" | "p4" | null | undefined;
-    weight?: "bold" | "light" | "normal" | null | undefined;
+    weight?: "normal" | "light" | "bold" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & {
     as?: ElementType;
     bold?: boolean;

package/dist/components/atoms/Switch/index.d.ts

@@ -6,7 +6,7 @@ type SwitchProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size' |
     onCheckedChange: (checked: boolean) => void;
     label?: string;
 };
-declare const Switch: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type" | "onChange" | "checked"> & {
+declare const Switch: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "onChange" | "type" | "checked"> & {
     checked: boolean;
     onCheckedChange: (checked: boolean) => void;
     label?: string;

package/dist/components/molecules/BottomSheet/index.js

@@ -1,7 +1,7 @@
-export { BottomSheet } from '../../../chunk-K35XIA25.js';
+export { BottomSheet } from '../../../chunk-ZEGQFAYE.js';
 import '../../../chunk-JCJP427C.js';
-import '../../../chunk-P4Z7HH66.js';
 import '../../../chunk-BNEEI7S5.js';
+import '../../../chunk-P4Z7HH66.js';
 import '../../../chunk-P4CV2EPR.js';
 import '../../../chunk-6LLGTBM6.js';
 //# sourceMappingURL=index.js.map

package/dist/components/molecules/Language/index.d.ts

@@ -10,6 +10,11 @@ type LanguageProps = Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> & {
     value: string;
     onChange: (value: string) => void;
 };
+/**
+ * Single-choice segmented switch, following the WAI-ARIA radio group pattern: one Tab stop,
+ * arrow keys (and Home/End) move the selection. Name it with `aria-label` (defaults to
+ * "Language selector") or `aria-labelledby`.
+ */
 declare const Language: react.ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "onChange"> & {
     options: LanguageOption[];
     value: string;

package/dist/components/molecules/Language/index.js

@@ -1,4 +1,4 @@
-export { Language } from '../../../chunk-HCLY7B4H.js';
+export { Language } from '../../../chunk-2YBZCUME.js';
 import '../../../chunk-6LLGTBM6.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/components/molecules/Modal/index.js

@@ -1,7 +1,7 @@
-export { Modal } from '../../../chunk-LK2EJ4H6.js';
+export { Modal } from '../../../chunk-CJ4LRU6X.js';
 import '../../../chunk-JCJP427C.js';
-import '../../../chunk-P4Z7HH66.js';
 import '../../../chunk-BNEEI7S5.js';
+import '../../../chunk-P4Z7HH66.js';
 import '../../../chunk-P4CV2EPR.js';
 import '../../../chunk-6LLGTBM6.js';
 //# sourceMappingURL=index.js.map

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { Button, ButtonProps } from './components/atoms/Button/index.js';
+export { Button, ButtonProps, buttonStyles } from './components/atoms/Button/index.js';
 export { Icon, IconProps } from './components/atoms/Icon/index.js';
 export { Image, ImageProps } from './components/atoms/Image/index.js';
 export { Input, InputProps } from './components/atoms/Input/index.js';

package/dist/index.js

@@ -1,15 +1,15 @@
 export { useMediaQuery } from './chunk-2HCMNEIQ.js';
-export { BottomSheet } from './chunk-K35XIA25.js';
+export { BottomSheet } from './chunk-ZEGQFAYE.js';
 export { Breadcrumbs } from './chunk-PE6XEC7Y.js';
 export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './chunk-N5CLCKR3.js';
-export { Language } from './chunk-HCLY7B4H.js';
-export { Modal } from './chunk-LK2EJ4H6.js';
+export { Language } from './chunk-2YBZCUME.js';
+export { Modal } from './chunk-CJ4LRU6X.js';
 export { useDismissableLayer } from './chunk-JCJP427C.js';
-export { useMergedRef } from './chunk-P4Z7HH66.js';
 export { Snackbar } from './chunk-BKPP4D3Q.js';
 export { Timeline } from './chunk-UL33H4AD.js';
 export { useDelayedUnmount } from './chunk-BNEEI7S5.js';
-export { Button } from './chunk-KWSZ2S34.js';
+export { Button, buttonStyles } from './chunk-DXJQNQ5K.js';
+export { useMergedRef } from './chunk-P4Z7HH66.js';
 export { Icon } from './chunk-7HQFLM4A.js';
 export { Image } from './chunk-5IHM2545.js';
 export { Input } from './chunk-PVDRNAYK.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inzumer/ui-library",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "private": false,
   "description": "React UI component library for the Inzumer design system",
   "license": "MIT",
@@ -113,7 +113,7 @@
     "dist"
   ],
   "dependencies": {
-    "@inzumer/tokens": "1.0.0"
+    "@inzumer/tokens": "1.1.0"
   },
   "peerDependencies": {
     "class-variance-authority": ">=0.7.0",

package/dist/chunk-HCLY7B4H.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/molecules/Language/Language.styles.ts","../src/components/molecules/Language/Language.tsx"],"names":[],"mappings":"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","file":"chunk-HCLY7B4H.js","sourcesContent":["import { cva } from 'class-variance-authority';\n\nexport const languageStyles =\n  'relative inline-flex items-center gap-1 rounded-md border border-[var(--border-default)] bg-[var(--surface-secondary)] p-1';\n\nexport const languageIndicatorStyles =\n  'absolute left-0 top-0 rounded bg-[var(--btn-primary-bg)] transition-[transform,width,height] duration-200 ease-out';\n\nexport const languageOptionStyles = cva(\n  'relative z-10 rounded px-2.5 py-1 text-xs font-semibold uppercase transition-colors duration-200 ease-out',\n  {\n    variants: {\n      selected: {\n        true: 'text-[var(--btn-primary-text)]',\n        false: 'text-[var(--text-secondary)] hover:text-[var(--text-primary)]',\n      },\n    },\n    defaultVariants: {\n      selected: false,\n    },\n  },\n);\n","import { forwardRef, useLayoutEffect, useRef, useState, type HTMLAttributes } from 'react';\nimport { cn } from '@utils';\nimport {\n  languageIndicatorStyles,\n  languageOptionStyles,\n  languageStyles,\n} from './Language.styles';\n\nexport interface LanguageOption {\n  value: string;\n  label: string;\n}\n\nexport type LanguageProps = Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> & {\n  options: LanguageOption[];\n  value: string;\n  onChange: (value: string) => void;\n};\n\ntype IndicatorRect = { left: number; top: number; width: number; height: number };\n\nexport const Language = forwardRef<HTMLDivElement, LanguageProps>(\n  ({ options, value, onChange, className, ...props }, ref) => {\n    const buttonRefs = useRef(new Map<string, HTMLButtonElement>());\n    const [indicator, setIndicator] = useState<IndicatorRect | null>(null);\n\n    useLayoutEffect(() => {\n      const activeButton = buttonRefs.current.get(value);\n      if (!activeButton) {\n        return;\n      }\n\n      setIndicator({\n        left: activeButton.offsetLeft,\n        top: activeButton.offsetTop,\n        width: activeButton.offsetWidth,\n        height: activeButton.offsetHeight,\n      });\n    }, [value, options]);\n\n    return (\n      <div\n        ref={ref}\n        role=\"listbox\"\n        aria-label=\"Language selector\"\n        className={cn(languageStyles, className)}\n        {...props}\n      >\n        {indicator && (\n          <span\n            aria-hidden\n            className={languageIndicatorStyles}\n            style={{\n              width: indicator.width,\n              height: indicator.height,\n              transform: `translate(${indicator.left}px, ${indicator.top}px)`,\n            }}\n          />\n        )}\n        {options.map((option) => {\n          const selected = option.value === value;\n\n          return (\n            <button\n              key={option.value}\n              ref={(node) => {\n                if (node) {\n                  buttonRefs.current.set(option.value, node);\n                } else {\n                  buttonRefs.current.delete(option.value);\n                }\n              }}\n              type=\"button\"\n              role=\"option\"\n              aria-selected={selected}\n              onClick={() => onChange(option.value)}\n              className={languageOptionStyles({ selected })}\n            >\n              {option.label}\n            </button>\n          );\n        })}\n      </div>\n    );\n  },\n);\n\nLanguage.displayName = 'Language';\n"]}

package/dist/chunk-KWSZ2S34.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/atoms/Button/Button.styles.ts","../src/components/atoms/Button/Button.tsx"],"names":[],"mappings":";;;;;AAEO,IAAM,YAAA,GAAe,GAAA;AAAA,EAC1B;AAAA,IACE,+CAAA;AAAA,IACA,kCAAA;AAAA,IACA,YAAA;AAAA,IACA,4CAAA;AAAA,IACA,sHAAA;AAAA,IACA,kDAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,OAAA,EAAS;AAAA,UACP,2DAAA;AAAA,UACA,2CAAA;AAAA,UACA,wCAAA;AAAA,UACA;AAAA,SACF;AAAA,QACA,SAAA,EAAW;AAAA,UACT,+DAAA;AAAA,UACA,6CAAA;AAAA,UACA,0CAAA;AAAA,UACA;AAAA,SACF;AAAA,QACA,KAAA,EAAO;AAAA,UACL,uDAAA;AAAA,UACA,yCAAA;AAAA,UACA,sCAAA;AAAA,UACA;AAAA,SACF;AAAA,QACA,WAAA,EAAa;AAAA,UACX,mEAAA;AAAA,UACA,+CAAA;AAAA,UACA,4CAAA;AAAA,UACA;AAAA;AACF,OACF;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,kBAAA;AAAA,QACJ,EAAA,EAAI,mBAAA;AAAA,QACJ,EAAA,EAAI,qBAAA;AAAA,QACJ,IAAA,EAAM;AAAA,OACR;AAAA,MACA,SAAA,EAAW;AAAA,QACT,IAAA,EAAM;AAAA;AACR,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS,SAAA;AAAA,MACT,IAAA,EAAM;AAAA;AACR;AAEJ,CAAA;AC7CO,IAAM,MAAA,GAAS,UAAA;AAAA,EACpB,CAAC,EAAE,SAAA,EAAW,OAAA,EAAS,MAAM,SAAA,EAAW,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AAC1D,IAAA,uBACE,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAW,GAAG,YAAA,CAAa,EAAE,SAAS,IAAA,EAAM,SAAA,EAAW,CAAA,EAAG,SAAS,CAAA;AAAA,QAClE,GAAG;AAAA;AAAA,KACN;AAAA,EAEJ;AACF;AAEA,MAAA,CAAO,WAAA,GAAc,QAAA","file":"chunk-KWSZ2S34.js","sourcesContent":["import { cva } from 'class-variance-authority';\n\nexport const buttonStyles = cva(\n  [\n    'inline-flex items-center justify-center gap-2',\n    'font-medium text-sm leading-none',\n    'rounded-md',\n    'transition-colors duration-150 ease-in-out',\n    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--border-focus)] focus-visible:ring-offset-2',\n    'disabled:pointer-events-none disabled:opacity-50',\n    'select-none',\n  ],\n  {\n    variants: {\n      variant: {\n        primary: [\n          'bg-[var(--btn-primary-bg)] text-[var(--btn-primary-text)]',\n          'border border-[var(--btn-primary-border)]',\n          'hover:bg-[var(--btn-primary-bg-hover)]',\n          'active:bg-[var(--btn-primary-bg-active)]',\n        ],\n        secondary: [\n          'bg-[var(--btn-secondary-bg)] text-[var(--btn-secondary-text)]',\n          'border border-[var(--btn-secondary-border)]',\n          'hover:bg-[var(--btn-secondary-bg-hover)]',\n          'active:bg-[var(--btn-secondary-bg-active)]',\n        ],\n        ghost: [\n          'bg-[var(--btn-ghost-bg)] text-[var(--btn-ghost-text)]',\n          'border border-[var(--btn-ghost-border)]',\n          'hover:bg-[var(--btn-ghost-bg-hover)]',\n          'active:bg-[var(--btn-ghost-bg-active)]',\n        ],\n        destructive: [\n          'bg-[var(--btn-destructive-bg)] text-[var(--btn-destructive-text)]',\n          'border border-[var(--btn-destructive-border)]',\n          'hover:bg-[var(--btn-destructive-bg-hover)]',\n          'active:bg-[var(--btn-destructive-bg-active)]',\n        ],\n      },\n      size: {\n        sm: 'h-8 px-3 text-xs',\n        md: 'h-10 px-4 text-sm',\n        lg: 'h-12 px-6 text-base',\n        icon: 'h-10 w-10',\n      },\n      fullWidth: {\n        true: 'w-full',\n      },\n    },\n    defaultVariants: {\n      variant: 'primary',\n      size: 'md',\n    },\n  },\n);\n","import type { VariantProps } from 'class-variance-authority';\nimport { forwardRef, type ButtonHTMLAttributes } from 'react';\nimport { cn } from '@utils';\nimport { buttonStyles } from './Button.styles';\n\nexport type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &\n  VariantProps<typeof buttonStyles> & {\n    asChild?: boolean;\n  };\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ className, variant, size, fullWidth, ...props }, ref) => {\n    return (\n      <button\n        ref={ref}\n        className={cn(buttonStyles({ variant, size, fullWidth }), className)}\n        {...props}\n      />\n    );\n  },\n);\n\nButton.displayName = 'Button';\n"]}