@inzumer/ui-library 1.1.0 → 1.3.0

package/dist/index.d.ts

@@ -4,18 +4,25 @@ export { Image, ImageProps } from './components/atoms/Image/index.js';
 export { Input, InputProps } from './components/atoms/Input/index.js';
 export { Link, LinkProps } from './components/atoms/Link/index.js';
 export { RichText, RichTextProps, RichTextVariant, elementByVariant } from './components/atoms/RichText/index.js';
+export { Select, SelectProps } from './components/atoms/Select/index.js';
 export { Switch, SwitchProps } from './components/atoms/Switch/index.js';
+export { Textarea, TextareaProps } from './components/atoms/Textarea/index.js';
+export { Accordion, AccordionProps } from './components/molecules/Accordion/index.js';
 export { BottomSheet, BottomSheetProps } from './components/molecules/BottomSheet/index.js';
 export { BreadcrumbItem, Breadcrumbs, BreadcrumbsProps } from './components/molecules/Breadcrumbs/index.js';
 export { Card, CardContent, CardContentProps, CardDescription, CardDescriptionProps, CardFooter, CardFooterProps, CardHeader, CardHeaderProps, CardProps, CardTitle, CardTitleProps } from './components/molecules/Card/index.js';
+export { Drawer, DrawerProps } from './components/molecules/Drawer/index.js';
 export { Language, LanguageOption, LanguageProps } from './components/molecules/Language/index.js';
 export { Modal, ModalProps } from './components/molecules/Modal/index.js';
 export { Snackbar, SnackbarProps } from './components/molecules/Snackbar/index.js';
+export { Table, TableBody, TableCell, TableCellProps, TableHead, TableHeaderCell, TableHeaderCellProps, TableProps, TableRow } from './components/molecules/Table/index.js';
 export { Timeline, TimelineItem, TimelineProps } from './components/molecules/Timeline/index.js';
 export { useDelayedUnmount } from './hooks/useDelayedUnmount/index.js';
 export { useDismissableLayer } from './hooks/useDismissableLayer/index.js';
+export { useFocusTrap } from './hooks/useFocusTrap/index.js';
 export { useMediaQuery } from './hooks/useMediaQuery/index.js';
 export { useMergedRef } from './hooks/useMergedRef/index.js';
+export { useScrollLock } from './hooks/useScrollLock/index.js';
 export { cn } from './utils/cn/index.js';
 import 'react';
 import 'class-variance-authority/types';

package/dist/index.js

@@ -1,20 +1,29 @@
+export { Modal } from './chunk-SMKLV4ET.js';
+export { Snackbar } from './chunk-BKPP4D3Q.js';
+export { Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow } from './chunk-XCUA543I.js';
+export { Timeline } from './chunk-UL33H4AD.js';
 export { useMediaQuery } from './chunk-2HCMNEIQ.js';
-export { BottomSheet } from './chunk-ZEGQFAYE.js';
+export { Switch } from './chunk-ZABQF65Z.js';
+export { Textarea } from './chunk-3YRDRHO3.js';
+export { Accordion } from './chunk-V3YXRI7M.js';
+export { BottomSheet } from './chunk-PF5PSCG4.js';
 export { Breadcrumbs } from './chunk-PE6XEC7Y.js';
 export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './chunk-N5CLCKR3.js';
-export { Language } from './chunk-2YBZCUME.js';
-export { Modal } from './chunk-CJ4LRU6X.js';
-export { useDismissableLayer } from './chunk-JCJP427C.js';
-export { Snackbar } from './chunk-BKPP4D3Q.js';
-export { Timeline } from './chunk-UL33H4AD.js';
+export { Drawer } from './chunk-NKNSSH2Q.js';
+export { useScrollLock } from './chunk-53YMHM24.js';
 export { useDelayedUnmount } from './chunk-BNEEI7S5.js';
-export { Button, buttonStyles } from './chunk-DXJQNQ5K.js';
+export { useDismissableLayer } from './chunk-JCJP427C.js';
+export { useFocusTrap } from './chunk-QT62VC36.js';
+export { Language } from './chunk-2YBZCUME.js';
+import './chunk-GQMA2AQI.js';
+export { Button, buttonStyles } from './chunk-KL6I2JFC.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';
+export { Input } from './chunk-DP274HDM.js';
 export { Link } from './chunk-D4I5OF3C.js';
-export { Switch } from './chunk-ZABQF65Z.js';
+export { Select } from './chunk-WUEVXL76.js';
+import './chunk-FFKHEBQ7.js';
 export { RichText, elementByVariant } from './chunk-P4CV2EPR.js';
 export { cn } from './chunk-6LLGTBM6.js';
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inzumer/ui-library",
-  "version": "1.1.0",
+  "version": "1.3.0",
   "private": false,
   "description": "React UI component library for the Inzumer design system",
   "license": "MIT",
@@ -56,10 +56,22 @@
       "types": "./dist/components/atoms/RichText/index.d.ts",
       "import": "./dist/components/atoms/RichText/index.js"
     },
+    "./select": {
+      "types": "./dist/components/atoms/Select/index.d.ts",
+      "import": "./dist/components/atoms/Select/index.js"
+    },
     "./switch": {
       "types": "./dist/components/atoms/Switch/index.d.ts",
       "import": "./dist/components/atoms/Switch/index.js"
     },
+    "./textarea": {
+      "types": "./dist/components/atoms/Textarea/index.d.ts",
+      "import": "./dist/components/atoms/Textarea/index.js"
+    },
+    "./accordion": {
+      "types": "./dist/components/molecules/Accordion/index.d.ts",
+      "import": "./dist/components/molecules/Accordion/index.js"
+    },
     "./bottom-sheet": {
       "types": "./dist/components/molecules/BottomSheet/index.d.ts",
       "import": "./dist/components/molecules/BottomSheet/index.js"
@@ -72,6 +84,10 @@
       "types": "./dist/components/molecules/Card/index.d.ts",
       "import": "./dist/components/molecules/Card/index.js"
     },
+    "./drawer": {
+      "types": "./dist/components/molecules/Drawer/index.d.ts",
+      "import": "./dist/components/molecules/Drawer/index.js"
+    },
     "./language": {
       "types": "./dist/components/molecules/Language/index.d.ts",
       "import": "./dist/components/molecules/Language/index.js"
@@ -84,6 +100,10 @@
       "types": "./dist/components/molecules/Snackbar/index.d.ts",
       "import": "./dist/components/molecules/Snackbar/index.js"
     },
+    "./table": {
+      "types": "./dist/components/molecules/Table/index.d.ts",
+      "import": "./dist/components/molecules/Table/index.js"
+    },
     "./timeline": {
       "types": "./dist/components/molecules/Timeline/index.d.ts",
       "import": "./dist/components/molecules/Timeline/index.js"
@@ -96,6 +116,10 @@
       "types": "./dist/hooks/useDismissableLayer/index.d.ts",
       "import": "./dist/hooks/useDismissableLayer/index.js"
     },
+    "./use-focus-trap": {
+      "types": "./dist/hooks/useFocusTrap/index.d.ts",
+      "import": "./dist/hooks/useFocusTrap/index.js"
+    },
     "./use-media-query": {
       "types": "./dist/hooks/useMediaQuery/index.d.ts",
       "import": "./dist/hooks/useMediaQuery/index.js"
@@ -104,6 +128,10 @@
       "types": "./dist/hooks/useMergedRef/index.d.ts",
       "import": "./dist/hooks/useMergedRef/index.js"
     },
+    "./use-scroll-lock": {
+      "types": "./dist/hooks/useScrollLock/index.d.ts",
+      "import": "./dist/hooks/useScrollLock/index.js"
+    },
     "./cn": {
       "types": "./dist/utils/cn/index.d.ts",
       "import": "./dist/utils/cn/index.js"

package/dist/chunk-CJ4LRU6X.js.map

@@ -1 +0,0 @@
-{"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-PVDRNAYK.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/atoms/Input/Input.styles.ts","../src/components/atoms/Input/Input.tsx"],"names":[],"mappings":";;;;;;AAEO,IAAM,WAAA,GAAc,GAAA;AAAA,EACzB;AAAA,IACE,kCAAA;AAAA,IACA,kCAAA;AAAA,IACA,sBAAA;AAAA,IACA,qCAAA;AAAA,IACA,6CAAA;AAAA,IACA,4CAAA;AAAA,IACA,sHAAA;AAAA,IACA,kDAAA;AAAA,IACA,iDAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,KAAA,EAAO;AAAA,QACL,OAAA,EAAS,EAAA;AAAA,QACT,KAAA,EAAO;AAAA,OACT;AAAA,MACA,SAAA,EAAW;AAAA,QACT,EAAA,EAAI,kBAAA;AAAA,QACJ,EAAA,EAAI,mBAAA;AAAA,QACJ,EAAA,EAAI;AAAA;AACN,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,KAAA,EAAO,SAAA;AAAA,MACP,SAAA,EAAW;AAAA;AACb;AAEJ,CAAA;AAEO,IAAM,gBAAA,GAAmB,gDAAA;AACzB,IAAM,gBAAA,GAAmB,oCAAA;AACzB,IAAM,eAAA,GAAkB,sCAAA;AClBxB,IAAM,KAAA,GAAQ,UAAA;AAAA,EACnB,CAAC,EAAE,SAAA,EAAW,KAAA,EAAO,SAAA,EAAW,KAAA,EAAO,IAAA,EAAM,KAAA,EAAO,EAAA,EAAI,MAAA,EAAQ,GAAG,KAAA,IAAS,GAAA,KAAQ;AAClF,IAAA,MAAM,cAAc,KAAA,EAAM;AAC1B,IAAA,MAAM,KAAK,MAAA,IAAU,WAAA;AACrB,IAAA,MAAM,aAAA,GAAgB,QAAQ,OAAA,GAAU,KAAA;AAExC,IAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,uBAAA,EACZ,QAAA,EAAA;AAAA,MAAA,KAAA,oBACC,GAAA,CAAC,OAAA,EAAA,EAAM,OAAA,EAAS,EAAA,EACd,QAAA,kBAAA,GAAA,CAAC,QAAA,EAAA,EAAS,EAAA,EAAG,MAAA,EAAO,OAAA,EAAQ,IAAA,EAAK,SAAA,EAAW,gBAAA,EACzC,iBACH,CAAA,EACF,CAAA;AAAA,sBAEF,GAAA;AAAA,QAAC,OAAA;AAAA,QAAA;AAAA,UACC,GAAA;AAAA,UACA,EAAA;AAAA,UACA,kBAAA,EAAkB,QAAQ,CAAA,EAAG,EAAE,WAAW,IAAA,GAAO,CAAA,EAAG,EAAE,CAAA,KAAA,CAAA,GAAU,MAAA;AAAA,UAChE,cAAA,EAAc,QAAQ,MAAA,GAAS,MAAA;AAAA,UAC/B,SAAA,EAAW,GAAG,WAAA,CAAY,EAAE,OAAO,aAAA,EAAe,SAAA,EAAW,CAAA,EAAG,SAAS,CAAA;AAAA,UACxE,GAAG;AAAA;AAAA,OACN;AAAA,MACC,KAAA,oBACC,GAAA,CAAC,QAAA,EAAA,EAAS,EAAA,EAAG,KAAI,EAAA,EAAI,CAAA,EAAG,EAAE,CAAA,MAAA,CAAA,EAAU,MAAK,OAAA,EAAQ,OAAA,EAAQ,IAAA,EAAK,SAAA,EAAW,kBACtE,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,MAED,CAAC,KAAA,IAAS,IAAA,oBACT,GAAA,CAAC,YAAS,EAAA,EAAG,GAAA,EAAI,EAAA,EAAI,CAAA,EAAG,EAAE,CAAA,KAAA,CAAA,EAAS,OAAA,EAAQ,IAAA,EAAK,SAAA,EAAW,iBACxD,QAAA,EAAA,IAAA,EACH;AAAA,KAAA,EAEJ,CAAA;AAAA,EAEJ;AACF;AAEA,KAAA,CAAM,WAAA,GAAc,OAAA","file":"chunk-PVDRNAYK.js","sourcesContent":["import { cva } from 'class-variance-authority';\n\nexport const inputStyles = cva(\n  [\n    'flex w-full rounded-md px-3 py-2',\n    'text-sm text-[var(--input-text)]',\n    'bg-[var(--input-bg)]',\n    'border border-[var(--input-border)]',\n    'placeholder:text-[var(--input-placeholder)]',\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-0',\n    'focus-visible:border-[var(--input-border-focus)]',\n    'disabled:cursor-not-allowed disabled:opacity-50',\n    'file:border-0 file:bg-transparent file:text-sm file:font-medium',\n  ],\n  {\n    variants: {\n      state: {\n        default: '',\n        error: 'border-[var(--input-border-error)] focus-visible:ring-[var(--border-error)]',\n      },\n      inputSize: {\n        sm: 'h-8 px-2 text-xs',\n        md: 'h-10 px-3 text-sm',\n        lg: 'h-12 px-4 text-base',\n      },\n    },\n    defaultVariants: {\n      state: 'default',\n      inputSize: 'md',\n    },\n  },\n);\n\nexport const inputLabelStyles = 'text-sm font-medium text-[var(--text-primary)]';\nexport const inputErrorStyles = 'text-xs text-[var(--border-error)]';\nexport const inputHintStyles = 'text-xs text-[var(--text-secondary)]';\n","import type { VariantProps } from 'class-variance-authority';\nimport { forwardRef, useId, type InputHTMLAttributes } from 'react';\nimport { RichText } from '@components';\nimport { cn } from '@utils';\nimport {\n  inputErrorStyles,\n  inputHintStyles,\n  inputLabelStyles,\n  inputStyles,\n} from './Input.styles';\n\nexport type InputProps = InputHTMLAttributes<HTMLInputElement> &\n  VariantProps<typeof inputStyles> & {\n    label?: string;\n    hint?: string;\n    error?: string;\n  };\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(\n  ({ className, state, inputSize, label, hint, error, id: idProp, ...props }, ref) => {\n    const generatedId = useId();\n    const id = idProp ?? generatedId;\n    const resolvedState = error ? 'error' : state;\n\n    return (\n      <div className=\"flex flex-col gap-1.5\">\n        {label && (\n          <label htmlFor={id}>\n            <RichText as=\"span\" variant=\"p3\" className={inputLabelStyles}>\n              {label}\n            </RichText>\n          </label>\n        )}\n        <input\n          ref={ref}\n          id={id}\n          aria-describedby={error ? `${id}-error` : hint ? `${id}-hint` : undefined}\n          aria-invalid={error ? 'true' : undefined}\n          className={cn(inputStyles({ state: resolvedState, inputSize }), className)}\n          {...props}\n        />\n        {error && (\n          <RichText as=\"p\" id={`${id}-error`} role=\"alert\" variant=\"p4\" className={inputErrorStyles}>\n            {error}\n          </RichText>\n        )}\n        {!error && hint && (\n          <RichText as=\"p\" id={`${id}-hint`} variant=\"p4\" className={inputHintStyles}>\n            {hint}\n          </RichText>\n        )}\n      </div>\n    );\n  },\n);\n\nInput.displayName = 'Input';\n"]}

package/dist/chunk-ZEGQFAYE.js.map

@@ -1 +0,0 @@
-{"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"]}