@zentauri-ui/zentauri-components 1.9.1 → 2.0.0

package/dist/ui/modal/animated.js

@@ -1,10 +1,12 @@
 "use client";
 'use strict';
 
-var chunkPZBTZGJE_js = require('../../chunk-PZBTZGJE.js');
+var chunkEKBSSKJQ_js = require('../../chunk-EKBSSKJQ.js');
 var chunkGBWGVNDA_js = require('../../chunk-GBWGVNDA.js');
 require('../../chunk-UIYFEP3I.js');
+require('../../chunk-YN4ZS3R2.js');
 var chunkZS5756ZC_js = require('../../chunk-ZS5756ZC.js');
+require('../../chunk-PZ5AY32C.js');
 var framerMotion = require('framer-motion');
 var reactDom = require('react-dom');
 var jsxRuntime = require('react/jsx-runtime');
@@ -48,7 +50,7 @@ function ModalContentAnimated({
   id,
   style
 }) {
-  const { open, setOpen, titleId, descriptionId, contentRef, triggerRef } = chunkPZBTZGJE_js.useModalContext("ModalContent");
+  const { open, setOpen, titleId, descriptionId, contentRef, triggerRef } = chunkEKBSSKJQ_js.useModalContext("ModalContent");
   const reduceMotion = framerMotion.useReducedMotion();
   const overlayMotion = modalOverlayAnimationPresets[reduceMotion ? "fade" : animation];
   const panelMotion = modalOverlayAnimationPresets[reduceMotion ? "fade" : animation];
@@ -69,7 +71,7 @@ function ModalContentAnimated({
         {
           role: "presentation",
           "data-slot": "modal-overlay",
-          className: chunkPZBTZGJE_js.modalOverlayVariants(),
+          className: chunkEKBSSKJQ_js.modalOverlayVariants(),
           onClick: () => setOpen(false),
           initial: animation === "none" ? false : overlayMotion.initial,
           animate: animation === "none" ? void 0 : overlayMotion.animate,
@@ -95,7 +97,7 @@ function ModalContentAnimated({
           "data-slot": "modal-content",
           tabIndex: -1,
           className: chunkZS5756ZC_js.cn(
-            chunkPZBTZGJE_js.modalContentVariants({ size, position, appearance }),
+            chunkEKBSSKJQ_js.modalContentVariants({ size, position, appearance }),
             className
           ),
           initial: animation === "none" ? false : panelMotion.initial,

package/dist/ui/modal/animated.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/ui/modal/animated/animations.ts","../../../src/ui/modal/animated/modal-content-animated.tsx"],"names":["useModalContext","useReducedMotion","useFocusManagement","createPortal","jsx","AnimatePresence","jsxs","motion","modalOverlayVariants","cn","modalContentVariants"],"mappings":"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","file":"animated.js","sourcesContent":["import type { ModalAnimationPresets } from \"./types\";\n\nexport const modalOverlayAnimationPresets: ModalAnimationPresets = {\n  none: {},\n  fade: {\n    initial: { opacity: 0 },\n    animate: { opacity: 1 },\n    exit: { opacity: 0 },\n    transition: { duration: 0.2 },\n  },\n  scale: {\n    initial: { opacity: 0, scale: 0.96 },\n    animate: { opacity: 1, scale: 1 },\n    exit: { opacity: 0, scale: 0.96 },\n    transition: { type: \"spring\", stiffness: 420, damping: 32 },\n  },\n  \"slide-up\": {\n    initial: { opacity: 0, y: 24 },\n    animate: { opacity: 1, y: 0 },\n    exit: { opacity: 0, y: 16 },\n    transition: { type: \"spring\", stiffness: 380, damping: 30 },\n  },\n  \"slide-down\": {\n    initial: { opacity: 0, y: -24 },\n    animate: { opacity: 1, y: 0 },\n    exit: { opacity: 0, y: -16 },\n    transition: { type: \"spring\", stiffness: 380, damping: 30 },\n  },\n};\n","\"use client\";\n\nimport { AnimatePresence, motion, useReducedMotion } from \"framer-motion\";\nimport { createPortal } from \"react-dom\";\n\nimport { cn } from \"../../../lib/utils\";\nimport { useFocusManagement } from \"../../../hooks/useFocusManagement\";\n\nimport { modalOverlayAnimationPresets } from \"./animations\";\nimport type { ModalContentAnimatedProps } from \"./types\";\nimport { modalContentVariants, modalOverlayVariants } from \"../variants\";\nimport { useModalContext } from \"../modal-base\";\n\nexport function ModalContentAnimated({\n  className,\n  size,\n  position,\n  appearance,\n  animation = \"scale\",\n  children,\n  ref,\n  id,\n  style,\n}: ModalContentAnimatedProps) {\n  const { open, setOpen, titleId, descriptionId, contentRef, triggerRef } =\n    useModalContext(\"ModalContent\");\n  const reduceMotion = useReducedMotion();\n  const overlayMotion =\n    modalOverlayAnimationPresets[reduceMotion ? \"fade\" : animation];\n  const panelMotion =\n    modalOverlayAnimationPresets[reduceMotion ? \"fade\" : animation];\n\n  useFocusManagement({\n    open,\n    setOpen,\n    contentRef,\n    triggerRef,\n  });\n\n  const portalTarget = typeof document !== \"undefined\" ? document.body : null;\n\n  if (!portalTarget) {\n    return null;\n  }\n\n  return createPortal(\n    <AnimatePresence>\n      {open ? (\n        <div className=\"fixed inset-0 z-50\" data-slot=\"modal-portal\">\n          <motion.div\n            role=\"presentation\"\n            data-slot=\"modal-overlay\"\n            className={modalOverlayVariants()}\n            onClick={() => setOpen(false)}\n            initial={animation === \"none\" ? false : overlayMotion.initial}\n            animate={animation === \"none\" ? undefined : overlayMotion.animate}\n            exit={animation === \"none\" ? undefined : overlayMotion.exit}\n            transition={overlayMotion.transition}\n          />\n          <motion.div\n            ref={(node) => {\n              contentRef.current = node;\n              if (typeof ref === \"function\") {\n                ref(node);\n              } else if (ref) {\n                (ref as React.RefObject<HTMLDivElement | null>).current = node;\n              }\n            }}\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-labelledby={titleId}\n            aria-describedby={descriptionId}\n            data-slot=\"modal-content\"\n            tabIndex={-1}\n            className={cn(\n              modalContentVariants({ size, position, appearance }),\n              className,\n            )}\n            initial={animation === \"none\" ? false : panelMotion.initial}\n            animate={animation === \"none\" ? undefined : panelMotion.animate}\n            exit={animation === \"none\" ? undefined : panelMotion.exit}\n            transition={panelMotion.transition}\n            id={id}\n            style={style}\n          >\n            {children}\n          </motion.div>\n        </div>\n      ) : null}\n    </AnimatePresence>,\n    portalTarget,\n  );\n}\n\nModalContentAnimated.displayName = \"ModalContent\";\n"]}
+{"version":3,"sources":["../../../src/ui/modal/animated/animations.ts","../../../src/ui/modal/animated/modal-content-animated.tsx"],"names":["useModalContext","useReducedMotion","useFocusManagement","createPortal","jsx","AnimatePresence","jsxs","motion","modalOverlayVariants","cn","modalContentVariants"],"mappings":"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","file":"animated.js","sourcesContent":["import type { ModalAnimationPresets } from \"./types\";\n\nexport const modalOverlayAnimationPresets: ModalAnimationPresets = {\n  none: {},\n  fade: {\n    initial: { opacity: 0 },\n    animate: { opacity: 1 },\n    exit: { opacity: 0 },\n    transition: { duration: 0.2 },\n  },\n  scale: {\n    initial: { opacity: 0, scale: 0.96 },\n    animate: { opacity: 1, scale: 1 },\n    exit: { opacity: 0, scale: 0.96 },\n    transition: { type: \"spring\", stiffness: 420, damping: 32 },\n  },\n  \"slide-up\": {\n    initial: { opacity: 0, y: 24 },\n    animate: { opacity: 1, y: 0 },\n    exit: { opacity: 0, y: 16 },\n    transition: { type: \"spring\", stiffness: 380, damping: 30 },\n  },\n  \"slide-down\": {\n    initial: { opacity: 0, y: -24 },\n    animate: { opacity: 1, y: 0 },\n    exit: { opacity: 0, y: -16 },\n    transition: { type: \"spring\", stiffness: 380, damping: 30 },\n  },\n};\n","\"use client\";\n\nimport { AnimatePresence, motion, useReducedMotion } from \"framer-motion\";\nimport { createPortal } from \"react-dom\";\n\nimport { cn } from \"../../../lib/utils\";\nimport { useFocusManagement } from \"../../../hooks/useFocusManagement\";\n\nimport { modalOverlayAnimationPresets } from \"./animations\";\nimport type { ModalContentAnimatedProps } from \"./types\";\nimport { modalContentVariants, modalOverlayVariants } from \"../variants\";\nimport { useModalContext } from \"../modal-base\";\n\nexport function ModalContentAnimated({\n  className,\n  size,\n  position,\n  appearance,\n  animation = \"scale\",\n  children,\n  ref,\n  id,\n  style,\n}: ModalContentAnimatedProps) {\n  const { open, setOpen, titleId, descriptionId, contentRef, triggerRef } =\n    useModalContext(\"ModalContent\");\n  const reduceMotion = useReducedMotion();\n  const overlayMotion =\n    modalOverlayAnimationPresets[reduceMotion ? \"fade\" : animation];\n  const panelMotion =\n    modalOverlayAnimationPresets[reduceMotion ? \"fade\" : animation];\n\n  useFocusManagement({\n    open,\n    setOpen,\n    contentRef,\n    triggerRef,\n  });\n\n  const portalTarget = typeof document !== \"undefined\" ? document.body : null;\n\n  if (!portalTarget) {\n    return null;\n  }\n\n  return createPortal(\n    <AnimatePresence>\n      {open ? (\n        <div className=\"fixed inset-0 z-50\" data-slot=\"modal-portal\">\n          <motion.div\n            role=\"presentation\"\n            data-slot=\"modal-overlay\"\n            className={modalOverlayVariants()}\n            onClick={() => setOpen(false)}\n            initial={animation === \"none\" ? false : overlayMotion.initial}\n            animate={animation === \"none\" ? undefined : overlayMotion.animate}\n            exit={animation === \"none\" ? undefined : overlayMotion.exit}\n            transition={overlayMotion.transition}\n          />\n          <motion.div\n            ref={(node) => {\n              contentRef.current = node;\n              if (typeof ref === \"function\") {\n                ref(node);\n              } else if (ref) {\n                (ref as React.RefObject<HTMLDivElement | null>).current = node;\n              }\n            }}\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-labelledby={titleId}\n            aria-describedby={descriptionId}\n            data-slot=\"modal-content\"\n            tabIndex={-1}\n            className={cn(\n              modalContentVariants({ size, position, appearance }),\n              className,\n            )}\n            initial={animation === \"none\" ? false : panelMotion.initial}\n            animate={animation === \"none\" ? undefined : panelMotion.animate}\n            exit={animation === \"none\" ? undefined : panelMotion.exit}\n            transition={panelMotion.transition}\n            id={id}\n            style={style}\n          >\n            {children}\n          </motion.div>\n        </div>\n      ) : null}\n    </AnimatePresence>,\n    portalTarget,\n  );\n}\n\nModalContentAnimated.displayName = \"ModalContent\";\n"]}

package/dist/ui/modal/animated.mjs

@@ -1,8 +1,10 @@
 "use client";
-import { useModalContext, modalOverlayVariants, modalContentVariants } from '../../chunk-VO7LNOC5.mjs';
+import { useModalContext, modalOverlayVariants, modalContentVariants } from '../../chunk-4LVEWKXF.mjs';
 import { useFocusManagement } from '../../chunk-K6YI4FJO.mjs';
 import '../../chunk-PMAF6FBF.mjs';
+import '../../chunk-OQCI2IVL.mjs';
 import { cn } from '../../chunk-4D54YOL6.mjs';
+import '../../chunk-J5LGTIGS.mjs';
 import { useReducedMotion, AnimatePresence, motion } from 'framer-motion';
 import { createPortal } from 'react-dom';
 import { jsx, jsxs } from 'react/jsx-runtime';

package/dist/ui/modal/animated.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/ui/modal/animated/animations.ts","../../../src/ui/modal/animated/modal-content-animated.tsx"],"names":[],"mappings":"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","file":"animated.mjs","sourcesContent":["import type { ModalAnimationPresets } from \"./types\";\n\nexport const modalOverlayAnimationPresets: ModalAnimationPresets = {\n  none: {},\n  fade: {\n    initial: { opacity: 0 },\n    animate: { opacity: 1 },\n    exit: { opacity: 0 },\n    transition: { duration: 0.2 },\n  },\n  scale: {\n    initial: { opacity: 0, scale: 0.96 },\n    animate: { opacity: 1, scale: 1 },\n    exit: { opacity: 0, scale: 0.96 },\n    transition: { type: \"spring\", stiffness: 420, damping: 32 },\n  },\n  \"slide-up\": {\n    initial: { opacity: 0, y: 24 },\n    animate: { opacity: 1, y: 0 },\n    exit: { opacity: 0, y: 16 },\n    transition: { type: \"spring\", stiffness: 380, damping: 30 },\n  },\n  \"slide-down\": {\n    initial: { opacity: 0, y: -24 },\n    animate: { opacity: 1, y: 0 },\n    exit: { opacity: 0, y: -16 },\n    transition: { type: \"spring\", stiffness: 380, damping: 30 },\n  },\n};\n","\"use client\";\n\nimport { AnimatePresence, motion, useReducedMotion } from \"framer-motion\";\nimport { createPortal } from \"react-dom\";\n\nimport { cn } from \"../../../lib/utils\";\nimport { useFocusManagement } from \"../../../hooks/useFocusManagement\";\n\nimport { modalOverlayAnimationPresets } from \"./animations\";\nimport type { ModalContentAnimatedProps } from \"./types\";\nimport { modalContentVariants, modalOverlayVariants } from \"../variants\";\nimport { useModalContext } from \"../modal-base\";\n\nexport function ModalContentAnimated({\n  className,\n  size,\n  position,\n  appearance,\n  animation = \"scale\",\n  children,\n  ref,\n  id,\n  style,\n}: ModalContentAnimatedProps) {\n  const { open, setOpen, titleId, descriptionId, contentRef, triggerRef } =\n    useModalContext(\"ModalContent\");\n  const reduceMotion = useReducedMotion();\n  const overlayMotion =\n    modalOverlayAnimationPresets[reduceMotion ? \"fade\" : animation];\n  const panelMotion =\n    modalOverlayAnimationPresets[reduceMotion ? \"fade\" : animation];\n\n  useFocusManagement({\n    open,\n    setOpen,\n    contentRef,\n    triggerRef,\n  });\n\n  const portalTarget = typeof document !== \"undefined\" ? document.body : null;\n\n  if (!portalTarget) {\n    return null;\n  }\n\n  return createPortal(\n    <AnimatePresence>\n      {open ? (\n        <div className=\"fixed inset-0 z-50\" data-slot=\"modal-portal\">\n          <motion.div\n            role=\"presentation\"\n            data-slot=\"modal-overlay\"\n            className={modalOverlayVariants()}\n            onClick={() => setOpen(false)}\n            initial={animation === \"none\" ? false : overlayMotion.initial}\n            animate={animation === \"none\" ? undefined : overlayMotion.animate}\n            exit={animation === \"none\" ? undefined : overlayMotion.exit}\n            transition={overlayMotion.transition}\n          />\n          <motion.div\n            ref={(node) => {\n              contentRef.current = node;\n              if (typeof ref === \"function\") {\n                ref(node);\n              } else if (ref) {\n                (ref as React.RefObject<HTMLDivElement | null>).current = node;\n              }\n            }}\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-labelledby={titleId}\n            aria-describedby={descriptionId}\n            data-slot=\"modal-content\"\n            tabIndex={-1}\n            className={cn(\n              modalContentVariants({ size, position, appearance }),\n              className,\n            )}\n            initial={animation === \"none\" ? false : panelMotion.initial}\n            animate={animation === \"none\" ? undefined : panelMotion.animate}\n            exit={animation === \"none\" ? undefined : panelMotion.exit}\n            transition={panelMotion.transition}\n            id={id}\n            style={style}\n          >\n            {children}\n          </motion.div>\n        </div>\n      ) : null}\n    </AnimatePresence>,\n    portalTarget,\n  );\n}\n\nModalContentAnimated.displayName = \"ModalContent\";\n"]}
+{"version":3,"sources":["../../../src/ui/modal/animated/animations.ts","../../../src/ui/modal/animated/modal-content-animated.tsx"],"names":[],"mappings":"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","file":"animated.mjs","sourcesContent":["import type { ModalAnimationPresets } from \"./types\";\n\nexport const modalOverlayAnimationPresets: ModalAnimationPresets = {\n  none: {},\n  fade: {\n    initial: { opacity: 0 },\n    animate: { opacity: 1 },\n    exit: { opacity: 0 },\n    transition: { duration: 0.2 },\n  },\n  scale: {\n    initial: { opacity: 0, scale: 0.96 },\n    animate: { opacity: 1, scale: 1 },\n    exit: { opacity: 0, scale: 0.96 },\n    transition: { type: \"spring\", stiffness: 420, damping: 32 },\n  },\n  \"slide-up\": {\n    initial: { opacity: 0, y: 24 },\n    animate: { opacity: 1, y: 0 },\n    exit: { opacity: 0, y: 16 },\n    transition: { type: \"spring\", stiffness: 380, damping: 30 },\n  },\n  \"slide-down\": {\n    initial: { opacity: 0, y: -24 },\n    animate: { opacity: 1, y: 0 },\n    exit: { opacity: 0, y: -16 },\n    transition: { type: \"spring\", stiffness: 380, damping: 30 },\n  },\n};\n","\"use client\";\n\nimport { AnimatePresence, motion, useReducedMotion } from \"framer-motion\";\nimport { createPortal } from \"react-dom\";\n\nimport { cn } from \"../../../lib/utils\";\nimport { useFocusManagement } from \"../../../hooks/useFocusManagement\";\n\nimport { modalOverlayAnimationPresets } from \"./animations\";\nimport type { ModalContentAnimatedProps } from \"./types\";\nimport { modalContentVariants, modalOverlayVariants } from \"../variants\";\nimport { useModalContext } from \"../modal-base\";\n\nexport function ModalContentAnimated({\n  className,\n  size,\n  position,\n  appearance,\n  animation = \"scale\",\n  children,\n  ref,\n  id,\n  style,\n}: ModalContentAnimatedProps) {\n  const { open, setOpen, titleId, descriptionId, contentRef, triggerRef } =\n    useModalContext(\"ModalContent\");\n  const reduceMotion = useReducedMotion();\n  const overlayMotion =\n    modalOverlayAnimationPresets[reduceMotion ? \"fade\" : animation];\n  const panelMotion =\n    modalOverlayAnimationPresets[reduceMotion ? \"fade\" : animation];\n\n  useFocusManagement({\n    open,\n    setOpen,\n    contentRef,\n    triggerRef,\n  });\n\n  const portalTarget = typeof document !== \"undefined\" ? document.body : null;\n\n  if (!portalTarget) {\n    return null;\n  }\n\n  return createPortal(\n    <AnimatePresence>\n      {open ? (\n        <div className=\"fixed inset-0 z-50\" data-slot=\"modal-portal\">\n          <motion.div\n            role=\"presentation\"\n            data-slot=\"modal-overlay\"\n            className={modalOverlayVariants()}\n            onClick={() => setOpen(false)}\n            initial={animation === \"none\" ? false : overlayMotion.initial}\n            animate={animation === \"none\" ? undefined : overlayMotion.animate}\n            exit={animation === \"none\" ? undefined : overlayMotion.exit}\n            transition={overlayMotion.transition}\n          />\n          <motion.div\n            ref={(node) => {\n              contentRef.current = node;\n              if (typeof ref === \"function\") {\n                ref(node);\n              } else if (ref) {\n                (ref as React.RefObject<HTMLDivElement | null>).current = node;\n              }\n            }}\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-labelledby={titleId}\n            aria-describedby={descriptionId}\n            data-slot=\"modal-content\"\n            tabIndex={-1}\n            className={cn(\n              modalContentVariants({ size, position, appearance }),\n              className,\n            )}\n            initial={animation === \"none\" ? false : panelMotion.initial}\n            animate={animation === \"none\" ? undefined : panelMotion.animate}\n            exit={animation === \"none\" ? undefined : panelMotion.exit}\n            transition={panelMotion.transition}\n            id={id}\n            style={style}\n          >\n            {children}\n          </motion.div>\n        </div>\n      ) : null}\n    </AnimatePresence>,\n    portalTarget,\n  );\n}\n\nModalContentAnimated.displayName = \"ModalContent\";\n"]}

package/dist/ui/modal.js

@@ -1,56 +1,58 @@
 "use client";
 'use strict';
 
-var chunkPZBTZGJE_js = require('../chunk-PZBTZGJE.js');
+var chunkEKBSSKJQ_js = require('../chunk-EKBSSKJQ.js');
 require('../chunk-GBWGVNDA.js');
 require('../chunk-UIYFEP3I.js');
+require('../chunk-YN4ZS3R2.js');
 require('../chunk-ZS5756ZC.js');
+require('../chunk-PZ5AY32C.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 var Modal2 = (props) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(chunkPZBTZGJE_js.Modal, { ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(chunkEKBSSKJQ_js.Modal, { ...props });
 };
 Modal2.displayName = "Modal";
 
 Object.defineProperty(exports, "ModalBody", {
   enumerable: true,
-  get: function () { return chunkPZBTZGJE_js.ModalBody; }
+  get: function () { return chunkEKBSSKJQ_js.ModalBody; }
 });
 Object.defineProperty(exports, "ModalClose", {
   enumerable: true,
-  get: function () { return chunkPZBTZGJE_js.ModalClose; }
+  get: function () { return chunkEKBSSKJQ_js.ModalClose; }
 });
 Object.defineProperty(exports, "ModalContent", {
   enumerable: true,
-  get: function () { return chunkPZBTZGJE_js.ModalContent; }
+  get: function () { return chunkEKBSSKJQ_js.ModalContent; }
 });
 Object.defineProperty(exports, "ModalDescription", {
   enumerable: true,
-  get: function () { return chunkPZBTZGJE_js.ModalDescription; }
+  get: function () { return chunkEKBSSKJQ_js.ModalDescription; }
 });
 Object.defineProperty(exports, "ModalFooter", {
   enumerable: true,
-  get: function () { return chunkPZBTZGJE_js.ModalFooter; }
+  get: function () { return chunkEKBSSKJQ_js.ModalFooter; }
 });
 Object.defineProperty(exports, "ModalHeader", {
   enumerable: true,
-  get: function () { return chunkPZBTZGJE_js.ModalHeader; }
+  get: function () { return chunkEKBSSKJQ_js.ModalHeader; }
 });
 Object.defineProperty(exports, "ModalTitle", {
   enumerable: true,
-  get: function () { return chunkPZBTZGJE_js.ModalTitle; }
+  get: function () { return chunkEKBSSKJQ_js.ModalTitle; }
 });
 Object.defineProperty(exports, "ModalTrigger", {
   enumerable: true,
-  get: function () { return chunkPZBTZGJE_js.ModalTrigger; }
+  get: function () { return chunkEKBSSKJQ_js.ModalTrigger; }
 });
 Object.defineProperty(exports, "modalContentVariants", {
   enumerable: true,
-  get: function () { return chunkPZBTZGJE_js.modalContentVariants; }
+  get: function () { return chunkEKBSSKJQ_js.modalContentVariants; }
 });
 Object.defineProperty(exports, "modalOverlayVariants", {
   enumerable: true,
-  get: function () { return chunkPZBTZGJE_js.modalOverlayVariants; }
+  get: function () { return chunkEKBSSKJQ_js.modalOverlayVariants; }
 });
 exports.Modal = Modal2;
 //# sourceMappingURL=modal.js.map

package/dist/ui/modal.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/ui/modal/modal.tsx"],"names":["Modal","jsx"],"mappings":";;;;;;;;AAGO,IAAMA,MAAAA,GAAQ,CAAC,KAAA,KAAsB;AAC1C,EAAA,uBAAOC,cAAA,CAACD,sBAAA,EAAA,EAAW,GAAG,KAAA,EAAO,CAAA;AAC/B;AAEAA,MAAAA,CAAM,WAAA,GAAc,OAAA","file":"modal.js","sourcesContent":["import { Modal as ModalBase } from \"./modal-base\";\nimport type { ModalProps } from \"./types\";\n\nexport const Modal = (props: ModalProps) => {\n  return <ModalBase {...props} />;\n};\n\nModal.displayName = \"Modal\";\n"]}
+{"version":3,"sources":["../../src/ui/modal/modal.tsx"],"names":["Modal","jsx"],"mappings":";;;;;;;;;;AAGO,IAAMA,MAAAA,GAAQ,CAAC,KAAA,KAAsB;AAC1C,EAAA,uBAAOC,cAAA,CAACD,sBAAA,EAAA,EAAW,GAAG,KAAA,EAAO,CAAA;AAC/B;AAEAA,MAAAA,CAAM,WAAA,GAAc,OAAA","file":"modal.js","sourcesContent":["import { Modal as ModalBase } from \"./modal-base\";\nimport type { ModalProps } from \"./types\";\n\nexport const Modal = (props: ModalProps) => {\n  return <ModalBase {...props} />;\n};\n\nModal.displayName = \"Modal\";\n"]}

package/dist/ui/modal.mjs

@@ -1,9 +1,11 @@
 "use client";
-import { Modal } from '../chunk-VO7LNOC5.mjs';
-export { ModalBody, ModalClose, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalTitle, ModalTrigger, modalContentVariants, modalOverlayVariants } from '../chunk-VO7LNOC5.mjs';
+import { Modal } from '../chunk-4LVEWKXF.mjs';
+export { ModalBody, ModalClose, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalTitle, ModalTrigger, modalContentVariants, modalOverlayVariants } from '../chunk-4LVEWKXF.mjs';
 import '../chunk-K6YI4FJO.mjs';
 import '../chunk-PMAF6FBF.mjs';
+import '../chunk-OQCI2IVL.mjs';
 import '../chunk-4D54YOL6.mjs';
+import '../chunk-J5LGTIGS.mjs';
 import { jsx } from 'react/jsx-runtime';
 
 var Modal2 = (props) => {

package/dist/ui/modal.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/ui/modal/modal.tsx"],"names":["Modal"],"mappings":";;;;;;;AAGO,IAAMA,MAAAA,GAAQ,CAAC,KAAA,KAAsB;AAC1C,EAAA,uBAAO,GAAA,CAAC,KAAA,EAAA,EAAW,GAAG,KAAA,EAAO,CAAA;AAC/B;AAEAA,MAAAA,CAAM,WAAA,GAAc,OAAA","file":"modal.mjs","sourcesContent":["import { Modal as ModalBase } from \"./modal-base\";\nimport type { ModalProps } from \"./types\";\n\nexport const Modal = (props: ModalProps) => {\n  return <ModalBase {...props} />;\n};\n\nModal.displayName = \"Modal\";\n"]}
+{"version":3,"sources":["../../src/ui/modal/modal.tsx"],"names":["Modal"],"mappings":";;;;;;;;;AAGO,IAAMA,MAAAA,GAAQ,CAAC,KAAA,KAAsB;AAC1C,EAAA,uBAAO,GAAA,CAAC,KAAA,EAAA,EAAW,GAAG,KAAA,EAAO,CAAA;AAC/B;AAEAA,MAAAA,CAAM,WAAA,GAAc,OAAA","file":"modal.mjs","sourcesContent":["import { Modal as ModalBase } from \"./modal-base\";\nimport type { ModalProps } from \"./types\";\n\nexport const Modal = (props: ModalProps) => {\n  return <ModalBase {...props} />;\n};\n\nModal.displayName = \"Modal\";\n"]}

package/dist/ui/otp-input.js

@@ -1,63 +1,17 @@
 "use client";
 'use strict';
 
+var chunkMCYFKM7T_js = require('../chunk-MCYFKM7T.js');
 var chunkZS5756ZC_js = require('../chunk-ZS5756ZC.js');
+require('../chunk-PZ5AY32C.js');
 var react = require('react');
 var classVarianceAuthority = require('class-variance-authority');
 var jsxRuntime = require('react/jsx-runtime');
 
-// src/design-system/otp-input.ts
-var zuiOtpRootBase = "grid w-fit gap-2 text-[color:var(--zui-otp-label-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-otp-label-fg-dark,oklch(98.4%_0.003_247.858))] data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50";
-var zuiOtpLabelBase = "text-sm font-medium leading-6 text-[color:var(--zui-otp-label-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-otp-label-fg-dark,oklch(98.4%_0.003_247.858))]";
-var zuiOtpHintBase = "max-w-sm text-xs leading-5 text-[color:var(--zui-otp-hint-fg,oklch(55.4%_0.046_257.417))] dark:text-[color:var(--zui-otp-hint-fg-dark,oklch(70.4%_0.04_256.788))]";
-var zuiOtpCellsBase = "flex flex-wrap items-center gap-2";
-var zuiOtpCellBase = "grid place-items-center rounded-xl border bg-[var(--zui-otp-bg,#ffffff)] text-center font-semibold tabular-nums text-[color:var(--zui-otp-fg,oklch(20.8%_0.042_265.755))] shadow-sm shadow-black/5 outline-none transition-[background-color,border-color,box-shadow,color,transform] placeholder:text-transparent focus-visible:-translate-y-0.5 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--zui-otp-ring-offset-focus,#ffffff)] disabled:cursor-not-allowed dark:bg-[var(--zui-otp-bg-dark,oklch(12.9%_0.042_264.695))] dark:text-[color:var(--zui-otp-fg-dark,oklch(98.4%_0.003_247.858))] dark:shadow-black/20 dark:focus-visible:ring-offset-[var(--zui-otp-ring-offset-focus-dark,oklch(12.9%_0.042_264.695))]";
-var zuiOtpSeparatorBase = "h-px w-3 shrink-0 bg-[color:var(--zui-otp-separator,#94a3b8)] opacity-70 dark:bg-[color:var(--zui-otp-separator-dark,#64748b)]";
-var zuiOtpErrorBase = "text-sm leading-6 text-[color:var(--zui-otp-error-fg,oklch(58.6%_0.253_17.585))] dark:text-[color:var(--zui-otp-error-fg-dark,oklch(71.2%_0.194_13.428))]";
-var zuiOtpSizes = {
-  sm: "size-7 md:size-9 rounded-lg text-sm",
-  md: "size-9 md:size-11 text-base",
-  lg: "size-11 md:size-13 rounded-2xl text-lg"
-};
-var zuiOtpAppearances = {
-  default: "border-[color:var(--zui-otp-default-border,#cbd5e1)] focus-visible:border-[color:var(--zui-otp-default-border-focus,oklch(44.6%_0.043_257.281))] focus-visible:ring-[var(--zui-otp-default-ring-focus,oklch(44.6%_0.043_257.281_/_0.25))] dark:border-[color:var(--zui-otp-default-border-dark,#475569)] dark:focus-visible:border-[color:var(--zui-otp-default-border-focus-dark,oklch(86.9%_0.022_252.894))] dark:focus-visible:ring-[var(--zui-otp-default-ring-focus-dark,oklch(86.9%_0.022_252.894_/_0.25))]",
-  outline: "border-[color:var(--zui-otp-outline-border,#64748b)] bg-transparent focus-visible:border-[color:var(--zui-otp-outline-border-focus,oklch(54.6%_0.245_262.881))] focus-visible:ring-[var(--zui-otp-outline-ring-focus,oklch(54.6%_0.245_262.881_/_0.28))] dark:border-[color:var(--zui-otp-outline-border-dark,#94a3b8)] dark:bg-transparent dark:focus-visible:border-[color:var(--zui-otp-outline-border-focus-dark,oklch(70.7%_0.165_254.624))] dark:focus-visible:ring-[var(--zui-otp-outline-ring-focus-dark,oklch(70.7%_0.165_254.624_/_0.28))]",
-  glass: "border-[color:var(--zui-otp-glass-border,#ffffff66)] bg-[var(--zui-otp-glass-bg,#ffffffcc)] backdrop-blur-md focus-visible:border-[color:var(--zui-otp-glass-border-focus,oklch(70.7%_0.165_254.624))] focus-visible:ring-[var(--zui-otp-glass-ring-focus,oklch(70.7%_0.165_254.624_/_0.32))] dark:border-[color:var(--zui-otp-glass-border-dark,#ffffff26)] dark:bg-[var(--zui-otp-glass-bg-dark,#0f172acc)] dark:focus-visible:border-[color:var(--zui-otp-glass-border-focus-dark,oklch(78.9%_0.154_211.53))] dark:focus-visible:ring-[var(--zui-otp-glass-ring-focus-dark,oklch(78.9%_0.154_211.53_/_0.32))]",
-  success: "border-[color:var(--zui-otp-success-border,oklch(69.6%_0.17_162.48_/_0.6))] focus-visible:border-[color:var(--zui-otp-success-border-focus,oklch(59.6%_0.145_163.225))] focus-visible:ring-[var(--zui-otp-success-ring-focus,oklch(59.6%_0.145_163.225_/_0.28))] dark:border-[color:var(--zui-otp-success-border-dark,oklch(69.6%_0.17_162.48_/_0.5))] dark:focus-visible:border-[color:var(--zui-otp-success-border-focus-dark,oklch(77.7%_0.152_181.912))] dark:focus-visible:ring-[var(--zui-otp-success-ring-focus-dark,oklch(77.7%_0.152_181.912_/_0.28))]",
-  error: "border-[color:var(--zui-otp-error-border,oklch(58.6%_0.253_17.585_/_0.7))] focus-visible:border-[color:var(--zui-otp-error-border-focus,oklch(58.6%_0.253_17.585))] focus-visible:ring-[var(--zui-otp-error-ring-focus,oklch(58.6%_0.253_17.585_/_0.28))] dark:border-[color:var(--zui-otp-error-border-dark,oklch(71.2%_0.194_13.428_/_0.65))] dark:focus-visible:border-[color:var(--zui-otp-error-border-focus-dark,oklch(71.2%_0.194_13.428))] dark:focus-visible:ring-[var(--zui-otp-error-ring-focus-dark,oklch(71.2%_0.194_13.428_/_0.28))]",
-  warning: "border-[color:var(--zui-otp-warning-border,oklch(79.5%_0.184_86.047_/_0.7))] focus-visible:border-[color:var(--zui-otp-warning-border-focus,oklch(68.1%_0.162_75.834))] focus-visible:ring-[var(--zui-otp-warning-ring-focus,oklch(68.1%_0.162_75.834_/_0.28))] dark:border-[color:var(--zui-otp-warning-border-dark,oklch(79.5%_0.184_86.047_/_0.5))] dark:focus-visible:border-[color:var(--zui-otp-warning-border-focus-dark,oklch(85.2%_0.199_91.936))] dark:focus-visible:ring-[var(--zui-otp-warning-ring-focus-dark,oklch(85.2%_0.199_91.936_/_0.28))]",
-  info: "border-[color:var(--zui-otp-info-border,oklch(62.3%_0.214_259.815_/_0.7))] focus-visible:border-[color:var(--zui-otp-info-border-focus,oklch(54.6%_0.245_262.881))] focus-visible:ring-[var(--zui-otp-info-ring-focus,oklch(54.6%_0.245_262.881_/_0.28))] dark:border-[color:var(--zui-otp-info-border-dark,oklch(62.3%_0.214_259.815_/_0.5))] dark:focus-visible:border-[color:var(--zui-otp-info-border-focus-dark,oklch(70.7%_0.165_254.624))] dark:focus-visible:ring-[var(--zui-otp-info-ring-focus-dark,oklch(70.7%_0.165_254.624_/_0.28))]",
-  violet: "border-[color:var(--zui-otp-violet-border,oklch(60.6%_0.25_292.717_/_0.7))] focus-visible:border-[color:var(--zui-otp-violet-border-focus,oklch(54.1%_0.281_293.009))] focus-visible:ring-[var(--zui-otp-violet-ring-focus,oklch(54.1%_0.281_293.009_/_0.28))] dark:border-[color:var(--zui-otp-violet-border-dark,oklch(60.6%_0.25_292.717_/_0.5))] dark:focus-visible:border-[color:var(--zui-otp-violet-border-focus-dark,oklch(70.2%_0.183_293.541))] dark:focus-visible:ring-[var(--zui-otp-violet-ring-focus-dark,oklch(70.2%_0.183_293.541_/_0.28))]",
-  amber: "border-[color:var(--zui-otp-amber-border,oklch(76.9%_0.188_70.08_/_0.7))] focus-visible:border-[color:var(--zui-otp-amber-border-focus,oklch(66.6%_0.179_58.318))] focus-visible:ring-[var(--zui-otp-amber-ring-focus,oklch(66.6%_0.179_58.318_/_0.28))] dark:border-[color:var(--zui-otp-amber-border-dark,oklch(76.9%_0.188_70.08_/_0.5))] dark:focus-visible:border-[color:var(--zui-otp-amber-border-focus-dark,oklch(82.8%_0.189_84.429))] dark:focus-visible:ring-[var(--zui-otp-amber-ring-focus-dark,oklch(82.8%_0.189_84.429_/_0.28))]",
-  pink: "border-[color:var(--zui-otp-pink-border,oklch(65.6%_0.241_354.308_/_0.7))] focus-visible:border-[color:var(--zui-otp-pink-border-focus,oklch(59.2%_0.249_0.584))] focus-visible:ring-[var(--zui-otp-pink-ring-focus,oklch(59.2%_0.249_0.584_/_0.28))] dark:border-[color:var(--zui-otp-pink-border-dark,oklch(65.6%_0.241_354.308_/_0.5))] dark:focus-visible:border-[color:var(--zui-otp-pink-border-focus-dark,oklch(71.8%_0.202_349.761))] dark:focus-visible:ring-[var(--zui-otp-pink-ring-focus-dark,oklch(71.8%_0.202_349.761_/_0.28))]",
-  indigo: "border-[color:var(--zui-otp-indigo-border,oklch(58.5%_0.233_277.117_/_0.7))] focus-visible:border-[color:var(--zui-otp-indigo-border-focus,oklch(51.1%_0.262_276.966))] focus-visible:ring-[var(--zui-otp-indigo-ring-focus,oklch(51.1%_0.262_276.966_/_0.28))] dark:border-[color:var(--zui-otp-indigo-border-dark,oklch(58.5%_0.233_277.117_/_0.5))] dark:focus-visible:border-[color:var(--zui-otp-indigo-border-focus-dark,oklch(67.3%_0.182_276.935))] dark:focus-visible:ring-[var(--zui-otp-indigo-ring-focus-dark,oklch(67.3%_0.182_276.935_/_0.28))]",
-  orange: "border-[color:var(--zui-otp-orange-border,oklch(70.5%_0.213_47.604_/_0.7))] focus-visible:border-[color:var(--zui-otp-orange-border-focus,oklch(64.6%_0.222_41.116))] focus-visible:ring-[var(--zui-otp-orange-ring-focus,oklch(64.6%_0.222_41.116_/_0.28))] dark:border-[color:var(--zui-otp-orange-border-dark,oklch(70.5%_0.213_47.604_/_0.5))] dark:focus-visible:border-[color:var(--zui-otp-orange-border-focus-dark,oklch(75%_0.183_55.934))] dark:focus-visible:ring-[var(--zui-otp-orange-ring-focus-dark,oklch(75%_0.183_55.934_/_0.28))]",
-  blue: "border border-[color:var(--zui-otp-blue-border,#2563eb)] dark:border-[color:var(--zui-otp-blue-border-dark,#3b82f6)] bg-[var(--zui-otp-blue-bg,#2563eb14)] dark:bg-[var(--zui-otp-blue-bg-dark,#3b82f624)] text-[color:var(--zui-otp-blue-fg,#0f172a)] dark:text-[color:var(--zui-otp-blue-fg-dark,#f8fafc)]",
-  cyan: "border border-[color:var(--zui-otp-cyan-border,#0891b2)] dark:border-[color:var(--zui-otp-cyan-border-dark,#22d3ee)] bg-[var(--zui-otp-cyan-bg,#0891b214)] dark:bg-[var(--zui-otp-cyan-bg-dark,#22d3ee24)] text-[color:var(--zui-otp-cyan-fg,#0f172a)] dark:text-[color:var(--zui-otp-cyan-fg-dark,#f8fafc)]",
-  green: "border border-[color:var(--zui-otp-green-border,#16a34a)] dark:border-[color:var(--zui-otp-green-border-dark,#22c55e)] bg-[var(--zui-otp-green-bg,#16a34a14)] dark:bg-[var(--zui-otp-green-bg-dark,#22c55e24)] text-[color:var(--zui-otp-green-fg,#0f172a)] dark:text-[color:var(--zui-otp-green-fg-dark,#f8fafc)]",
-  lime: "border border-[color:var(--zui-otp-lime-border,#65a30d)] dark:border-[color:var(--zui-otp-lime-border-dark,#a3e635)] bg-[var(--zui-otp-lime-bg,#65a30d14)] dark:bg-[var(--zui-otp-lime-bg-dark,#a3e63524)] text-[color:var(--zui-otp-lime-fg,#0f172a)] dark:text-[color:var(--zui-otp-lime-fg-dark,#f8fafc)]",
-  mint: "border border-[color:var(--zui-otp-mint-border,#10b981)] dark:border-[color:var(--zui-otp-mint-border-dark,#6ee7b7)] bg-[var(--zui-otp-mint-bg,#10b98114)] dark:bg-[var(--zui-otp-mint-bg-dark,#6ee7b724)] text-[color:var(--zui-otp-mint-fg,#0f172a)] dark:text-[color:var(--zui-otp-mint-fg-dark,#f8fafc)]",
-  ocean: "border border-[color:var(--zui-otp-ocean-border,#0284c7)] dark:border-[color:var(--zui-otp-ocean-border-dark,#38bdf8)] bg-[var(--zui-otp-ocean-bg,#0284c714)] dark:bg-[var(--zui-otp-ocean-bg-dark,#38bdf824)] text-[color:var(--zui-otp-ocean-fg,#0f172a)] dark:text-[color:var(--zui-otp-ocean-fg-dark,#f8fafc)]",
-  sapphire: "border border-[color:var(--zui-otp-sapphire-border,#1d4ed8)] dark:border-[color:var(--zui-otp-sapphire-border-dark,#60a5fa)] bg-[var(--zui-otp-sapphire-bg,#1d4ed814)] dark:bg-[var(--zui-otp-sapphire-bg-dark,#60a5fa24)] text-[color:var(--zui-otp-sapphire-fg,#0f172a)] dark:text-[color:var(--zui-otp-sapphire-fg-dark,#f8fafc)]",
-  lavender: "border border-[color:var(--zui-otp-lavender-border,#8b5cf6)] dark:border-[color:var(--zui-otp-lavender-border-dark,#a78bfa)] bg-[var(--zui-otp-lavender-bg,#8b5cf614)] dark:bg-[var(--zui-otp-lavender-bg-dark,#a78bfa24)] text-[color:var(--zui-otp-lavender-fg,#0f172a)] dark:text-[color:var(--zui-otp-lavender-fg-dark,#f8fafc)]",
-  ruby: "border border-[color:var(--zui-otp-ruby-border,#be123c)] dark:border-[color:var(--zui-otp-ruby-border-dark,#fb7185)] bg-[var(--zui-otp-ruby-bg,#be123c14)] dark:bg-[var(--zui-otp-ruby-bg-dark,#fb718524)] text-[color:var(--zui-otp-ruby-fg,#0f172a)] dark:text-[color:var(--zui-otp-ruby-fg-dark,#f8fafc)]",
-  red: "border border-[color:var(--zui-otp-red-border,#dc2626)] dark:border-[color:var(--zui-otp-red-border-dark,#ef4444)] bg-[var(--zui-otp-red-bg,#dc262614)] dark:bg-[var(--zui-otp-red-bg-dark,#ef444424)] text-[color:var(--zui-otp-red-fg,#0f172a)] dark:text-[color:var(--zui-otp-red-fg-dark,#f8fafc)]",
-  slate: "border border-[color:var(--zui-otp-slate-border,#475569)] dark:border-[color:var(--zui-otp-slate-border-dark,#64748b)] bg-[var(--zui-otp-slate-bg,#47556914)] dark:bg-[var(--zui-otp-slate-bg-dark,#64748b24)] text-[color:var(--zui-otp-slate-fg,#0f172a)] dark:text-[color:var(--zui-otp-slate-fg-dark,#f8fafc)]",
-  zinc: "border border-[color:var(--zui-otp-zinc-border,#52525b)] dark:border-[color:var(--zui-otp-zinc-border-dark,#71717a)] bg-[var(--zui-otp-zinc-bg,#52525b14)] dark:bg-[var(--zui-otp-zinc-bg-dark,#71717a24)] text-[color:var(--zui-otp-zinc-fg,#0f172a)] dark:text-[color:var(--zui-otp-zinc-fg-dark,#f8fafc)]",
-  stone: "border border-[color:var(--zui-otp-stone-border,#57534e)] dark:border-[color:var(--zui-otp-stone-border-dark,#78716c)] bg-[var(--zui-otp-stone-bg,#57534e14)] dark:bg-[var(--zui-otp-stone-bg-dark,#78716c24)] text-[color:var(--zui-otp-stone-fg,#0f172a)] dark:text-[color:var(--zui-otp-stone-fg-dark,#f8fafc)]",
-  royal: "border border-[color:var(--zui-otp-royal-border,#4338ca)] dark:border-[color:var(--zui-otp-royal-border-dark,#818cf8)] bg-[var(--zui-otp-royal-bg,#4338ca14)] dark:bg-[var(--zui-otp-royal-bg-dark,#818cf824)] text-[color:var(--zui-otp-royal-fg,#0f172a)] dark:text-[color:var(--zui-otp-royal-fg-dark,#f8fafc)]",
-  electric: "border border-[color:var(--zui-otp-electric-border,#0ea5e9)] dark:border-[color:var(--zui-otp-electric-border-dark,#38bdf8)] bg-[var(--zui-otp-electric-bg,#0ea5e914)] dark:bg-[var(--zui-otp-electric-bg-dark,#38bdf824)] text-[color:var(--zui-otp-electric-fg,#0f172a)] dark:text-[color:var(--zui-otp-electric-fg-dark,#f8fafc)]",
-  forest: "border border-[color:var(--zui-otp-forest-border,#166534)] dark:border-[color:var(--zui-otp-forest-border-dark,#4ade80)] bg-[var(--zui-otp-forest-bg,#16653414)] dark:bg-[var(--zui-otp-forest-bg-dark,#4ade8024)] text-[color:var(--zui-otp-forest-fg,#0f172a)] dark:text-[color:var(--zui-otp-forest-fg-dark,#f8fafc)]",
-  sunset: "border border-[color:var(--zui-otp-sunset-border,#ea580c)] dark:border-[color:var(--zui-otp-sunset-border-dark,#fb923c)] bg-[var(--zui-otp-sunset-bg,#ea580c14)] dark:bg-[var(--zui-otp-sunset-bg-dark,#fb923c24)] text-[color:var(--zui-otp-sunset-fg,#0f172a)] dark:text-[color:var(--zui-otp-sunset-fg-dark,#f8fafc)]",
-  magenta: "border border-[color:var(--zui-otp-magenta-border,#c026d3)] dark:border-[color:var(--zui-otp-magenta-border-dark,#e879f9)] bg-[var(--zui-otp-magenta-bg,#c026d314)] dark:bg-[var(--zui-otp-magenta-bg-dark,#e879f924)] text-[color:var(--zui-otp-magenta-fg,#0f172a)] dark:text-[color:var(--zui-otp-magenta-fg-dark,#f8fafc)]",
-  crimson: "border border-[color:var(--zui-otp-crimson-border,#b91c1c)] dark:border-[color:var(--zui-otp-crimson-border-dark,#f87171)] bg-[var(--zui-otp-crimson-bg,#b91c1c14)] dark:bg-[var(--zui-otp-crimson-bg-dark,#f8717124)] text-[color:var(--zui-otp-crimson-fg,#0f172a)] dark:text-[color:var(--zui-otp-crimson-fg-dark,#f8fafc)]",
-  aqua: "border border-[color:var(--zui-otp-aqua-border,#0f766e)] dark:border-[color:var(--zui-otp-aqua-border-dark,#2dd4bf)] bg-[var(--zui-otp-aqua-bg,#0f766e14)] dark:bg-[var(--zui-otp-aqua-bg-dark,#2dd4bf24)] text-[color:var(--zui-otp-aqua-fg,#0f172a)] dark:text-[color:var(--zui-otp-aqua-fg-dark,#f8fafc)]",
-  plum: "border border-[color:var(--zui-otp-plum-border,#7e22ce)] dark:border-[color:var(--zui-otp-plum-border-dark,#c084fc)] bg-[var(--zui-otp-plum-bg,#7e22ce14)] dark:bg-[var(--zui-otp-plum-bg-dark,#c084fc24)] text-[color:var(--zui-otp-plum-fg,#0f172a)] dark:text-[color:var(--zui-otp-plum-fg-dark,#f8fafc)]"
-};
-var otpInputCellVariants = classVarianceAuthority.cva(zuiOtpCellBase, {
+var otpInputCellVariants = classVarianceAuthority.cva(chunkMCYFKM7T_js.zuiOtpCellBase, {
   variants: {
-    appearance: zuiOtpAppearances,
-    size: zuiOtpSizes
+    appearance: chunkMCYFKM7T_js.zuiOtpAppearances,
+    size: chunkMCYFKM7T_js.zuiOtpSizes
   },
   defaultVariants: {
     appearance: "default",
@@ -250,14 +204,14 @@ function OTPInput(props) {
       "aria-labelledby": label !== void 0 ? labelId : void 0,
       "aria-describedby": describedBy || void 0,
       "aria-invalid": errorMessage !== void 0 ? true : void 0,
-      className: chunkZS5756ZC_js.cn(zuiOtpRootBase, className),
+      className: chunkZS5756ZC_js.cn(chunkMCYFKM7T_js.zuiOtpRootBase, className),
       "data-disabled": disabled ? "true" : void 0,
       "data-slot": "otp-input",
       ...rest,
       children: [
-        label !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("p", { id: labelId, className: zuiOtpLabelBase, children: label }),
-        hint !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("p", { id: hintId, className: zuiOtpHintBase, children: hint }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: zuiOtpCellsBase, "data-slot": "otp-input-cells", children: cells.map((char, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+        label !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("p", { id: labelId, className: chunkMCYFKM7T_js.zuiOtpLabelBase, children: label }),
+        hint !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("p", { id: hintId, className: chunkMCYFKM7T_js.zuiOtpHintBase, children: hint }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkMCYFKM7T_js.zuiOtpCellsBase, "data-slot": "otp-input-cells", children: cells.map((char, index) => /* @__PURE__ */ jsxRuntime.jsxs(
           "span",
           {
             className: "contents",
@@ -293,7 +247,7 @@ function OTPInput(props) {
                 "span",
                 {
                   "aria-hidden": "true",
-                  className: zuiOtpSeparatorBase,
+                  className: chunkMCYFKM7T_js.zuiOtpSeparatorBase,
                   "data-slot": "otp-input-separator"
                 }
               )
@@ -310,7 +264,7 @@ function OTPInput(props) {
             disabled
           }
         ),
-        errorMessage !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("p", { id: errorId, className: zuiOtpErrorBase, children: errorMessage })
+        errorMessage !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("p", { id: errorId, className: chunkMCYFKM7T_js.zuiOtpErrorBase, children: errorMessage })
       ]
     }
   );

package/dist/ui/otp-input.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/design-system/otp-input.ts","../../src/ui/otp-input/variants.ts","../../src/ui/otp-input/otp-input.tsx"],"names":["cva","useId","useState","useRef","useMemo","useCallback","jsxs","cn","jsx"],"mappings":"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","file":"otp-input.js","sourcesContent":["export const zuiOtpRootBase =\n  \"grid w-fit gap-2 text-[color:var(--zui-otp-label-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-otp-label-fg-dark,oklch(98.4%_0.003_247.858))] data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50\";\n\nexport const zuiOtpLabelBase =\n  \"text-sm font-medium leading-6 text-[color:var(--zui-otp-label-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-otp-label-fg-dark,oklch(98.4%_0.003_247.858))]\";\n\nexport const zuiOtpHintBase =\n  \"max-w-sm text-xs leading-5 text-[color:var(--zui-otp-hint-fg,oklch(55.4%_0.046_257.417))] dark:text-[color:var(--zui-otp-hint-fg-dark,oklch(70.4%_0.04_256.788))]\";\n\nexport const zuiOtpCellsBase = \"flex flex-wrap items-center gap-2\";\n\nexport const zuiOtpCellBase =\n  \"grid place-items-center rounded-xl border bg-[var(--zui-otp-bg,#ffffff)] text-center font-semibold tabular-nums text-[color:var(--zui-otp-fg,oklch(20.8%_0.042_265.755))] shadow-sm shadow-black/5 outline-none transition-[background-color,border-color,box-shadow,color,transform] placeholder:text-transparent focus-visible:-translate-y-0.5 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--zui-otp-ring-offset-focus,#ffffff)] disabled:cursor-not-allowed dark:bg-[var(--zui-otp-bg-dark,oklch(12.9%_0.042_264.695))] dark:text-[color:var(--zui-otp-fg-dark,oklch(98.4%_0.003_247.858))] dark:shadow-black/20 dark:focus-visible:ring-offset-[var(--zui-otp-ring-offset-focus-dark,oklch(12.9%_0.042_264.695))]\";\n\nexport const zuiOtpSeparatorBase =\n  \"h-px w-3 shrink-0 bg-[color:var(--zui-otp-separator,#94a3b8)] opacity-70 dark:bg-[color:var(--zui-otp-separator-dark,#64748b)]\";\n\nexport const zuiOtpErrorBase =\n  \"text-sm leading-6 text-[color:var(--zui-otp-error-fg,oklch(58.6%_0.253_17.585))] dark:text-[color:var(--zui-otp-error-fg-dark,oklch(71.2%_0.194_13.428))]\";\n\nexport const zuiOtpSizes = {\n  sm: \"size-7 md:size-9 rounded-lg text-sm\",\n  md: \"size-9 md:size-11 text-base\",\n  lg: \"size-11 md:size-13 rounded-2xl text-lg\",\n} as const;\n\nexport const zuiOtpAppearances = {\n  default:\n    \"border-[color:var(--zui-otp-default-border,#cbd5e1)] focus-visible:border-[color:var(--zui-otp-default-border-focus,oklch(44.6%_0.043_257.281))] focus-visible:ring-[var(--zui-otp-default-ring-focus,oklch(44.6%_0.043_257.281_/_0.25))] dark:border-[color:var(--zui-otp-default-border-dark,#475569)] dark:focus-visible:border-[color:var(--zui-otp-default-border-focus-dark,oklch(86.9%_0.022_252.894))] dark:focus-visible:ring-[var(--zui-otp-default-ring-focus-dark,oklch(86.9%_0.022_252.894_/_0.25))]\",\n  outline:\n    \"border-[color:var(--zui-otp-outline-border,#64748b)] bg-transparent focus-visible:border-[color:var(--zui-otp-outline-border-focus,oklch(54.6%_0.245_262.881))] focus-visible:ring-[var(--zui-otp-outline-ring-focus,oklch(54.6%_0.245_262.881_/_0.28))] dark:border-[color:var(--zui-otp-outline-border-dark,#94a3b8)] dark:bg-transparent dark:focus-visible:border-[color:var(--zui-otp-outline-border-focus-dark,oklch(70.7%_0.165_254.624))] dark:focus-visible:ring-[var(--zui-otp-outline-ring-focus-dark,oklch(70.7%_0.165_254.624_/_0.28))]\",\n  glass:\n    \"border-[color:var(--zui-otp-glass-border,#ffffff66)] bg-[var(--zui-otp-glass-bg,#ffffffcc)] backdrop-blur-md focus-visible:border-[color:var(--zui-otp-glass-border-focus,oklch(70.7%_0.165_254.624))] focus-visible:ring-[var(--zui-otp-glass-ring-focus,oklch(70.7%_0.165_254.624_/_0.32))] dark:border-[color:var(--zui-otp-glass-border-dark,#ffffff26)] dark:bg-[var(--zui-otp-glass-bg-dark,#0f172acc)] dark:focus-visible:border-[color:var(--zui-otp-glass-border-focus-dark,oklch(78.9%_0.154_211.53))] dark:focus-visible:ring-[var(--zui-otp-glass-ring-focus-dark,oklch(78.9%_0.154_211.53_/_0.32))]\",\n  success:\n    \"border-[color:var(--zui-otp-success-border,oklch(69.6%_0.17_162.48_/_0.6))] focus-visible:border-[color:var(--zui-otp-success-border-focus,oklch(59.6%_0.145_163.225))] focus-visible:ring-[var(--zui-otp-success-ring-focus,oklch(59.6%_0.145_163.225_/_0.28))] dark:border-[color:var(--zui-otp-success-border-dark,oklch(69.6%_0.17_162.48_/_0.5))] dark:focus-visible:border-[color:var(--zui-otp-success-border-focus-dark,oklch(77.7%_0.152_181.912))] dark:focus-visible:ring-[var(--zui-otp-success-ring-focus-dark,oklch(77.7%_0.152_181.912_/_0.28))]\",\n  error:\n    \"border-[color:var(--zui-otp-error-border,oklch(58.6%_0.253_17.585_/_0.7))] focus-visible:border-[color:var(--zui-otp-error-border-focus,oklch(58.6%_0.253_17.585))] focus-visible:ring-[var(--zui-otp-error-ring-focus,oklch(58.6%_0.253_17.585_/_0.28))] dark:border-[color:var(--zui-otp-error-border-dark,oklch(71.2%_0.194_13.428_/_0.65))] dark:focus-visible:border-[color:var(--zui-otp-error-border-focus-dark,oklch(71.2%_0.194_13.428))] dark:focus-visible:ring-[var(--zui-otp-error-ring-focus-dark,oklch(71.2%_0.194_13.428_/_0.28))]\",\n  warning:\n    \"border-[color:var(--zui-otp-warning-border,oklch(79.5%_0.184_86.047_/_0.7))] focus-visible:border-[color:var(--zui-otp-warning-border-focus,oklch(68.1%_0.162_75.834))] focus-visible:ring-[var(--zui-otp-warning-ring-focus,oklch(68.1%_0.162_75.834_/_0.28))] dark:border-[color:var(--zui-otp-warning-border-dark,oklch(79.5%_0.184_86.047_/_0.5))] dark:focus-visible:border-[color:var(--zui-otp-warning-border-focus-dark,oklch(85.2%_0.199_91.936))] dark:focus-visible:ring-[var(--zui-otp-warning-ring-focus-dark,oklch(85.2%_0.199_91.936_/_0.28))]\",\n  info: \"border-[color:var(--zui-otp-info-border,oklch(62.3%_0.214_259.815_/_0.7))] focus-visible:border-[color:var(--zui-otp-info-border-focus,oklch(54.6%_0.245_262.881))] focus-visible:ring-[var(--zui-otp-info-ring-focus,oklch(54.6%_0.245_262.881_/_0.28))] dark:border-[color:var(--zui-otp-info-border-dark,oklch(62.3%_0.214_259.815_/_0.5))] dark:focus-visible:border-[color:var(--zui-otp-info-border-focus-dark,oklch(70.7%_0.165_254.624))] dark:focus-visible:ring-[var(--zui-otp-info-ring-focus-dark,oklch(70.7%_0.165_254.624_/_0.28))]\",\n  violet:\n    \"border-[color:var(--zui-otp-violet-border,oklch(60.6%_0.25_292.717_/_0.7))] focus-visible:border-[color:var(--zui-otp-violet-border-focus,oklch(54.1%_0.281_293.009))] focus-visible:ring-[var(--zui-otp-violet-ring-focus,oklch(54.1%_0.281_293.009_/_0.28))] dark:border-[color:var(--zui-otp-violet-border-dark,oklch(60.6%_0.25_292.717_/_0.5))] dark:focus-visible:border-[color:var(--zui-otp-violet-border-focus-dark,oklch(70.2%_0.183_293.541))] dark:focus-visible:ring-[var(--zui-otp-violet-ring-focus-dark,oklch(70.2%_0.183_293.541_/_0.28))]\",\n  amber:\n    \"border-[color:var(--zui-otp-amber-border,oklch(76.9%_0.188_70.08_/_0.7))] focus-visible:border-[color:var(--zui-otp-amber-border-focus,oklch(66.6%_0.179_58.318))] focus-visible:ring-[var(--zui-otp-amber-ring-focus,oklch(66.6%_0.179_58.318_/_0.28))] dark:border-[color:var(--zui-otp-amber-border-dark,oklch(76.9%_0.188_70.08_/_0.5))] dark:focus-visible:border-[color:var(--zui-otp-amber-border-focus-dark,oklch(82.8%_0.189_84.429))] dark:focus-visible:ring-[var(--zui-otp-amber-ring-focus-dark,oklch(82.8%_0.189_84.429_/_0.28))]\",\n  pink: \"border-[color:var(--zui-otp-pink-border,oklch(65.6%_0.241_354.308_/_0.7))] focus-visible:border-[color:var(--zui-otp-pink-border-focus,oklch(59.2%_0.249_0.584))] focus-visible:ring-[var(--zui-otp-pink-ring-focus,oklch(59.2%_0.249_0.584_/_0.28))] dark:border-[color:var(--zui-otp-pink-border-dark,oklch(65.6%_0.241_354.308_/_0.5))] dark:focus-visible:border-[color:var(--zui-otp-pink-border-focus-dark,oklch(71.8%_0.202_349.761))] dark:focus-visible:ring-[var(--zui-otp-pink-ring-focus-dark,oklch(71.8%_0.202_349.761_/_0.28))]\",\n  indigo:\n    \"border-[color:var(--zui-otp-indigo-border,oklch(58.5%_0.233_277.117_/_0.7))] focus-visible:border-[color:var(--zui-otp-indigo-border-focus,oklch(51.1%_0.262_276.966))] focus-visible:ring-[var(--zui-otp-indigo-ring-focus,oklch(51.1%_0.262_276.966_/_0.28))] dark:border-[color:var(--zui-otp-indigo-border-dark,oklch(58.5%_0.233_277.117_/_0.5))] dark:focus-visible:border-[color:var(--zui-otp-indigo-border-focus-dark,oklch(67.3%_0.182_276.935))] dark:focus-visible:ring-[var(--zui-otp-indigo-ring-focus-dark,oklch(67.3%_0.182_276.935_/_0.28))]\",\n  orange:\n    \"border-[color:var(--zui-otp-orange-border,oklch(70.5%_0.213_47.604_/_0.7))] focus-visible:border-[color:var(--zui-otp-orange-border-focus,oklch(64.6%_0.222_41.116))] focus-visible:ring-[var(--zui-otp-orange-ring-focus,oklch(64.6%_0.222_41.116_/_0.28))] dark:border-[color:var(--zui-otp-orange-border-dark,oklch(70.5%_0.213_47.604_/_0.5))] dark:focus-visible:border-[color:var(--zui-otp-orange-border-focus-dark,oklch(75%_0.183_55.934))] dark:focus-visible:ring-[var(--zui-otp-orange-ring-focus-dark,oklch(75%_0.183_55.934_/_0.28))]\",\n  blue: \"border border-[color:var(--zui-otp-blue-border,#2563eb)] dark:border-[color:var(--zui-otp-blue-border-dark,#3b82f6)] bg-[var(--zui-otp-blue-bg,#2563eb14)] dark:bg-[var(--zui-otp-blue-bg-dark,#3b82f624)] text-[color:var(--zui-otp-blue-fg,#0f172a)] dark:text-[color:var(--zui-otp-blue-fg-dark,#f8fafc)]\",\n  cyan: \"border border-[color:var(--zui-otp-cyan-border,#0891b2)] dark:border-[color:var(--zui-otp-cyan-border-dark,#22d3ee)] bg-[var(--zui-otp-cyan-bg,#0891b214)] dark:bg-[var(--zui-otp-cyan-bg-dark,#22d3ee24)] text-[color:var(--zui-otp-cyan-fg,#0f172a)] dark:text-[color:var(--zui-otp-cyan-fg-dark,#f8fafc)]\",\n  green:\n    \"border border-[color:var(--zui-otp-green-border,#16a34a)] dark:border-[color:var(--zui-otp-green-border-dark,#22c55e)] bg-[var(--zui-otp-green-bg,#16a34a14)] dark:bg-[var(--zui-otp-green-bg-dark,#22c55e24)] text-[color:var(--zui-otp-green-fg,#0f172a)] dark:text-[color:var(--zui-otp-green-fg-dark,#f8fafc)]\",\n  lime: \"border border-[color:var(--zui-otp-lime-border,#65a30d)] dark:border-[color:var(--zui-otp-lime-border-dark,#a3e635)] bg-[var(--zui-otp-lime-bg,#65a30d14)] dark:bg-[var(--zui-otp-lime-bg-dark,#a3e63524)] text-[color:var(--zui-otp-lime-fg,#0f172a)] dark:text-[color:var(--zui-otp-lime-fg-dark,#f8fafc)]\",\n  mint: \"border border-[color:var(--zui-otp-mint-border,#10b981)] dark:border-[color:var(--zui-otp-mint-border-dark,#6ee7b7)] bg-[var(--zui-otp-mint-bg,#10b98114)] dark:bg-[var(--zui-otp-mint-bg-dark,#6ee7b724)] text-[color:var(--zui-otp-mint-fg,#0f172a)] dark:text-[color:var(--zui-otp-mint-fg-dark,#f8fafc)]\",\n  ocean:\n    \"border border-[color:var(--zui-otp-ocean-border,#0284c7)] dark:border-[color:var(--zui-otp-ocean-border-dark,#38bdf8)] bg-[var(--zui-otp-ocean-bg,#0284c714)] dark:bg-[var(--zui-otp-ocean-bg-dark,#38bdf824)] text-[color:var(--zui-otp-ocean-fg,#0f172a)] dark:text-[color:var(--zui-otp-ocean-fg-dark,#f8fafc)]\",\n  sapphire:\n    \"border border-[color:var(--zui-otp-sapphire-border,#1d4ed8)] dark:border-[color:var(--zui-otp-sapphire-border-dark,#60a5fa)] bg-[var(--zui-otp-sapphire-bg,#1d4ed814)] dark:bg-[var(--zui-otp-sapphire-bg-dark,#60a5fa24)] text-[color:var(--zui-otp-sapphire-fg,#0f172a)] dark:text-[color:var(--zui-otp-sapphire-fg-dark,#f8fafc)]\",\n  lavender:\n    \"border border-[color:var(--zui-otp-lavender-border,#8b5cf6)] dark:border-[color:var(--zui-otp-lavender-border-dark,#a78bfa)] bg-[var(--zui-otp-lavender-bg,#8b5cf614)] dark:bg-[var(--zui-otp-lavender-bg-dark,#a78bfa24)] text-[color:var(--zui-otp-lavender-fg,#0f172a)] dark:text-[color:var(--zui-otp-lavender-fg-dark,#f8fafc)]\",\n  ruby: \"border border-[color:var(--zui-otp-ruby-border,#be123c)] dark:border-[color:var(--zui-otp-ruby-border-dark,#fb7185)] bg-[var(--zui-otp-ruby-bg,#be123c14)] dark:bg-[var(--zui-otp-ruby-bg-dark,#fb718524)] text-[color:var(--zui-otp-ruby-fg,#0f172a)] dark:text-[color:var(--zui-otp-ruby-fg-dark,#f8fafc)]\",\n  red: \"border border-[color:var(--zui-otp-red-border,#dc2626)] dark:border-[color:var(--zui-otp-red-border-dark,#ef4444)] bg-[var(--zui-otp-red-bg,#dc262614)] dark:bg-[var(--zui-otp-red-bg-dark,#ef444424)] text-[color:var(--zui-otp-red-fg,#0f172a)] dark:text-[color:var(--zui-otp-red-fg-dark,#f8fafc)]\",\n  slate:\n    \"border border-[color:var(--zui-otp-slate-border,#475569)] dark:border-[color:var(--zui-otp-slate-border-dark,#64748b)] bg-[var(--zui-otp-slate-bg,#47556914)] dark:bg-[var(--zui-otp-slate-bg-dark,#64748b24)] text-[color:var(--zui-otp-slate-fg,#0f172a)] dark:text-[color:var(--zui-otp-slate-fg-dark,#f8fafc)]\",\n  zinc: \"border border-[color:var(--zui-otp-zinc-border,#52525b)] dark:border-[color:var(--zui-otp-zinc-border-dark,#71717a)] bg-[var(--zui-otp-zinc-bg,#52525b14)] dark:bg-[var(--zui-otp-zinc-bg-dark,#71717a24)] text-[color:var(--zui-otp-zinc-fg,#0f172a)] dark:text-[color:var(--zui-otp-zinc-fg-dark,#f8fafc)]\",\n  stone:\n    \"border border-[color:var(--zui-otp-stone-border,#57534e)] dark:border-[color:var(--zui-otp-stone-border-dark,#78716c)] bg-[var(--zui-otp-stone-bg,#57534e14)] dark:bg-[var(--zui-otp-stone-bg-dark,#78716c24)] text-[color:var(--zui-otp-stone-fg,#0f172a)] dark:text-[color:var(--zui-otp-stone-fg-dark,#f8fafc)]\",\n  royal:\n    \"border border-[color:var(--zui-otp-royal-border,#4338ca)] dark:border-[color:var(--zui-otp-royal-border-dark,#818cf8)] bg-[var(--zui-otp-royal-bg,#4338ca14)] dark:bg-[var(--zui-otp-royal-bg-dark,#818cf824)] text-[color:var(--zui-otp-royal-fg,#0f172a)] dark:text-[color:var(--zui-otp-royal-fg-dark,#f8fafc)]\",\n  electric:\n    \"border border-[color:var(--zui-otp-electric-border,#0ea5e9)] dark:border-[color:var(--zui-otp-electric-border-dark,#38bdf8)] bg-[var(--zui-otp-electric-bg,#0ea5e914)] dark:bg-[var(--zui-otp-electric-bg-dark,#38bdf824)] text-[color:var(--zui-otp-electric-fg,#0f172a)] dark:text-[color:var(--zui-otp-electric-fg-dark,#f8fafc)]\",\n  forest:\n    \"border border-[color:var(--zui-otp-forest-border,#166534)] dark:border-[color:var(--zui-otp-forest-border-dark,#4ade80)] bg-[var(--zui-otp-forest-bg,#16653414)] dark:bg-[var(--zui-otp-forest-bg-dark,#4ade8024)] text-[color:var(--zui-otp-forest-fg,#0f172a)] dark:text-[color:var(--zui-otp-forest-fg-dark,#f8fafc)]\",\n  sunset:\n    \"border border-[color:var(--zui-otp-sunset-border,#ea580c)] dark:border-[color:var(--zui-otp-sunset-border-dark,#fb923c)] bg-[var(--zui-otp-sunset-bg,#ea580c14)] dark:bg-[var(--zui-otp-sunset-bg-dark,#fb923c24)] text-[color:var(--zui-otp-sunset-fg,#0f172a)] dark:text-[color:var(--zui-otp-sunset-fg-dark,#f8fafc)]\",\n  magenta:\n    \"border border-[color:var(--zui-otp-magenta-border,#c026d3)] dark:border-[color:var(--zui-otp-magenta-border-dark,#e879f9)] bg-[var(--zui-otp-magenta-bg,#c026d314)] dark:bg-[var(--zui-otp-magenta-bg-dark,#e879f924)] text-[color:var(--zui-otp-magenta-fg,#0f172a)] dark:text-[color:var(--zui-otp-magenta-fg-dark,#f8fafc)]\",\n  crimson:\n    \"border border-[color:var(--zui-otp-crimson-border,#b91c1c)] dark:border-[color:var(--zui-otp-crimson-border-dark,#f87171)] bg-[var(--zui-otp-crimson-bg,#b91c1c14)] dark:bg-[var(--zui-otp-crimson-bg-dark,#f8717124)] text-[color:var(--zui-otp-crimson-fg,#0f172a)] dark:text-[color:var(--zui-otp-crimson-fg-dark,#f8fafc)]\",\n  aqua: \"border border-[color:var(--zui-otp-aqua-border,#0f766e)] dark:border-[color:var(--zui-otp-aqua-border-dark,#2dd4bf)] bg-[var(--zui-otp-aqua-bg,#0f766e14)] dark:bg-[var(--zui-otp-aqua-bg-dark,#2dd4bf24)] text-[color:var(--zui-otp-aqua-fg,#0f172a)] dark:text-[color:var(--zui-otp-aqua-fg-dark,#f8fafc)]\",\n  plum: \"border border-[color:var(--zui-otp-plum-border,#7e22ce)] dark:border-[color:var(--zui-otp-plum-border-dark,#c084fc)] bg-[var(--zui-otp-plum-bg,#7e22ce14)] dark:bg-[var(--zui-otp-plum-bg-dark,#c084fc24)] text-[color:var(--zui-otp-plum-fg,#0f172a)] dark:text-[color:var(--zui-otp-plum-fg-dark,#f8fafc)]\",\n} as const;\n","import { cva } from \"class-variance-authority\";\n\nimport {\n  zuiOtpAppearances,\n  zuiOtpCellBase,\n  zuiOtpSizes,\n} from \"../../design-system/otp-input\";\n\nexport const otpInputCellVariants = cva(zuiOtpCellBase, {\n  variants: {\n    appearance: zuiOtpAppearances,\n    size: zuiOtpSizes,\n  },\n  defaultVariants: {\n    appearance: \"default\",\n    size: \"md\",\n  },\n});\n","\"use client\";\n\nimport {\n  type ClipboardEvent,\n  type KeyboardEvent,\n  useCallback,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport {\n  zuiOtpCellsBase,\n  zuiOtpErrorBase,\n  zuiOtpHintBase,\n  zuiOtpLabelBase,\n  zuiOtpRootBase,\n  zuiOtpSeparatorBase,\n} from \"../../design-system/otp-input\";\nimport { cn } from \"../../lib/utils\";\n\nimport type { OTPInputAllowedCharacters, OTPInputProps } from \"./types\";\nimport { otpInputCellVariants } from \"./variants\";\n\nfunction clampLength(length: number): number {\n  return Number.isFinite(length) ? Math.max(1, Math.min(12, length)) : 6;\n}\n\nfunction sanitizeValue(\n  value: string,\n  allowedCharacters: OTPInputAllowedCharacters,\n  maxLength: number,\n): string {\n  const pattern = allowedCharacters === \"numeric\" ? /[0-9]/g : /[a-zA-Z0-9]/g;\n  return (value.match(pattern) ?? []).join(\"\").slice(0, maxLength);\n}\n\nfunction valueToCells(value: string, length: number): string[] {\n  return Array.from({ length }, (_, index) => {\n    const c = value[index] ?? \"\\x00\";\n    return c === \"\\x00\" ? \"\" : c;\n  });\n}\n\nfunction cellsToInternal(cells: string[], length: number): string {\n  return Array.from({ length }, (_, i) => cells[i] || \"\\x00\").join(\"\");\n}\n\nexport function OTPInput(props: OTPInputProps) {\n  const {\n    allowedCharacters = \"numeric\",\n    appearance,\n    autoFocus,\n    cellClassName,\n    className,\n    defaultValue = \"\",\n    disabled,\n    errorMessage,\n    hint,\n    id,\n    label,\n    length = 6,\n    mask,\n    name,\n    onComplete,\n    onValueChange,\n    ref,\n    separatorEvery,\n    size,\n    value,\n    ...rest\n  } = props;\n  const generatedId = useId();\n  const rootId = id ?? generatedId;\n  const resolvedLength = clampLength(length);\n  const isControlled = value !== undefined;\n  const [uncontrolledValue, setUncontrolledValue] = useState(() => {\n    const clean = sanitizeValue(\n      defaultValue,\n      allowedCharacters,\n      resolvedLength,\n    );\n    return clean.padEnd(resolvedLength, \"\\x00\");\n  });\n  const inputRefs = useRef<Array<HTMLInputElement | null>>([]);\n  const cells = useMemo(\n    () =>\n      isControlled\n        ? valueToCells(\n            sanitizeValue(\n              value ?? \"\",\n              allowedCharacters,\n              resolvedLength,\n            ).padEnd(resolvedLength, \"\\x00\"),\n            resolvedLength,\n          )\n        : Array.from({ length: resolvedLength }, (_, index) => {\n            const c = uncontrolledValue[index] ?? \"\\x00\";\n            return c === \"\\x00\" ? \"\" : sanitizeValue(c, allowedCharacters, 1);\n          }),\n    [allowedCharacters, isControlled, resolvedLength, uncontrolledValue, value],\n  );\n  const sanitizedValue = cells.filter(Boolean).join(\"\");\n  const labelId = `${rootId}-label`;\n  const hintId = `${rootId}-hint`;\n  const errorId = `${rootId}-error`;\n  const describedBy = [\n    hint !== undefined ? hintId : undefined,\n    errorMessage !== undefined ? errorId : undefined,\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  const commitValue = useCallback(\n    (nextCells: string[]) => {\n      if (!isControlled) {\n        setUncontrolledValue(cellsToInternal(nextCells, resolvedLength));\n      }\n      const next = nextCells.filter(Boolean).join(\"\").slice(0, resolvedLength);\n      onValueChange?.(next);\n      if (next.length === resolvedLength) {\n        onComplete?.(next);\n      }\n    },\n    [isControlled, onComplete, onValueChange, resolvedLength],\n  );\n\n  const focusCell = useCallback(\n    (index: number) => {\n      const target =\n        inputRefs.current[Math.max(0, Math.min(index, resolvedLength - 1))];\n      target?.focus();\n      target?.select();\n    },\n    [resolvedLength],\n  );\n\n  const updateAtIndex = useCallback(\n    (index: number, nextChars: string, isPaste = false) => {\n      let chars: string | undefined = sanitizeValue(\n        nextChars,\n        allowedCharacters,\n        resolvedLength,\n      );\n\n      // Detect single-char overwrite: browser gives \"existingChar + typedChar\"\n      if (\n        !isPaste &&\n        chars &&\n        chars.length === 2 &&\n        chars[0] === (cells[index] ?? \"\")\n      ) {\n        chars = chars[1];\n      }\n\n      if (!chars?.length || (!isPaste && chars === cells[index])) {\n        return;\n      }\n\n      const nextCells = [...cells];\n\n      chars.split(\"\").forEach((char, offset) => {\n        const targetIndex = index + offset;\n        if (targetIndex < resolvedLength) {\n          nextCells[targetIndex] = char;\n        }\n      });\n\n      commitValue(nextCells);\n      focusCell(\n        Math.min(index + Math.max(chars.length, 1), resolvedLength - 1),\n      );\n    },\n    [allowedCharacters, cells, commitValue, focusCell, resolvedLength],\n  );\n\n  const clearAtIndex = useCallback(\n    (index: number) => {\n      const nextCells = [...cells];\n      nextCells[index] = \"\";\n      commitValue(nextCells);\n    },\n    [cells, commitValue],\n  );\n\n  const handlePaste = useCallback(\n    (event: ClipboardEvent<HTMLInputElement>, index: number) => {\n      event.preventDefault();\n      updateAtIndex(index, event.clipboardData.getData(\"text\"), true);\n    },\n    [updateAtIndex],\n  );\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLInputElement>, index: number) => {\n      if (event.key === \"Backspace\") {\n        event.preventDefault();\n        if (cells[index]) {\n          clearAtIndex(index);\n          return;\n        }\n        clearAtIndex(Math.max(index - 1, 0));\n        focusCell(index - 1);\n        return;\n      }\n\n      if (event.key === \"Delete\") {\n        event.preventDefault();\n        clearAtIndex(index);\n        return;\n      }\n\n      if (event.key === \"ArrowLeft\") {\n        event.preventDefault();\n        focusCell(index - 1);\n        return;\n      }\n\n      if (event.key === \"ArrowRight\") {\n        event.preventDefault();\n        focusCell(index + 1);\n        return;\n      }\n\n      if (event.key === \"Home\") {\n        event.preventDefault();\n        focusCell(0);\n        return;\n      }\n\n      if (event.key === \"End\") {\n        event.preventDefault();\n        focusCell(resolvedLength - 1);\n      }\n    },\n    [cells, clearAtIndex, focusCell, resolvedLength],\n  );\n\n  return (\n    <div\n      ref={ref}\n      id={rootId}\n      role=\"group\"\n      aria-labelledby={label !== undefined ? labelId : undefined}\n      aria-describedby={describedBy || undefined}\n      aria-invalid={errorMessage !== undefined ? true : undefined}\n      className={cn(zuiOtpRootBase, className)}\n      data-disabled={disabled ? \"true\" : undefined}\n      data-slot=\"otp-input\"\n      {...rest}\n    >\n      {label !== undefined && (\n        <p id={labelId} className={zuiOtpLabelBase}>\n          {label}\n        </p>\n      )}\n      {hint !== undefined && (\n        <p id={hintId} className={zuiOtpHintBase}>\n          {hint}\n        </p>\n      )}\n      <div className={zuiOtpCellsBase} data-slot=\"otp-input-cells\">\n        {cells.map((char, index) => (\n          <span\n            key={`${rootId}-${index}`}\n            className=\"contents\"\n            data-slot=\"otp-input-cell-wrapper\"\n          >\n            <input\n              ref={(node) => {\n                inputRefs.current[index] = node;\n              }}\n              aria-label={`Digit ${index + 1} of ${resolvedLength}`}\n              autoComplete={index === 0 ? \"one-time-code\" : \"off\"}\n              autoFocus={autoFocus && index === 0}\n              className={cn(\n                otpInputCellVariants({ appearance, size }),\n                cellClassName,\n              )}\n              data-slot=\"otp-input-cell\"\n              disabled={disabled}\n              inputMode={allowedCharacters === \"numeric\" ? \"numeric\" : \"text\"}\n              maxLength={resolvedLength}\n              onChange={(event) =>\n                updateAtIndex(index, event.currentTarget.value, false)\n              }\n              onFocus={(event) => event.currentTarget.select()}\n              onKeyDown={(event) => handleKeyDown(event, index)}\n              onPaste={(event) => handlePaste(event, index)}\n              pattern={\n                allowedCharacters === \"numeric\" ? \"[0-9]*\" : \"[A-Za-z0-9]*\"\n              }\n              type={mask ? \"password\" : \"text\"}\n              value={char}\n            />\n            {separatorEvery &&\n              separatorEvery > 0 &&\n              index < resolvedLength - 1 &&\n              (index + 1) % separatorEvery === 0 && (\n                <span\n                  aria-hidden=\"true\"\n                  className={zuiOtpSeparatorBase}\n                  data-slot=\"otp-input-separator\"\n                />\n              )}\n          </span>\n        ))}\n      </div>\n      {name !== undefined && (\n        <input\n          type=\"hidden\"\n          name={name}\n          value={sanitizedValue}\n          disabled={disabled}\n        />\n      )}\n      {errorMessage !== undefined && (\n        <p id={errorId} className={zuiOtpErrorBase}>\n          {errorMessage}\n        </p>\n      )}\n    </div>\n  );\n}\n\nOTPInput.displayName = \"OTPInput\";\n"]}
+{"version":3,"sources":["../../src/ui/otp-input/variants.ts","../../src/ui/otp-input/otp-input.tsx"],"names":["cva","zuiOtpCellBase","zuiOtpAppearances","zuiOtpSizes","useId","useState","useRef","useMemo","useCallback","jsxs","cn","zuiOtpRootBase","jsx","zuiOtpLabelBase","zuiOtpHintBase","zuiOtpCellsBase","zuiOtpSeparatorBase","zuiOtpErrorBase"],"mappings":"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","file":"otp-input.js","sourcesContent":["import { cva } from \"class-variance-authority\";\n\nimport {\n  zuiOtpAppearances,\n  zuiOtpCellBase,\n  zuiOtpSizes,\n} from \"../../design-system/otp-input\";\n\nexport const otpInputCellVariants = cva(zuiOtpCellBase, {\n  variants: {\n    appearance: zuiOtpAppearances,\n    size: zuiOtpSizes,\n  },\n  defaultVariants: {\n    appearance: \"default\",\n    size: \"md\",\n  },\n});\n","\"use client\";\n\nimport {\n  type ClipboardEvent,\n  type KeyboardEvent,\n  useCallback,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport {\n  zuiOtpCellsBase,\n  zuiOtpErrorBase,\n  zuiOtpHintBase,\n  zuiOtpLabelBase,\n  zuiOtpRootBase,\n  zuiOtpSeparatorBase,\n} from \"../../design-system/otp-input\";\nimport { cn } from \"../../lib/utils\";\n\nimport type { OTPInputAllowedCharacters, OTPInputProps } from \"./types\";\nimport { otpInputCellVariants } from \"./variants\";\n\nfunction clampLength(length: number): number {\n  return Number.isFinite(length) ? Math.max(1, Math.min(12, length)) : 6;\n}\n\nfunction sanitizeValue(\n  value: string,\n  allowedCharacters: OTPInputAllowedCharacters,\n  maxLength: number,\n): string {\n  const pattern = allowedCharacters === \"numeric\" ? /[0-9]/g : /[a-zA-Z0-9]/g;\n  return (value.match(pattern) ?? []).join(\"\").slice(0, maxLength);\n}\n\nfunction valueToCells(value: string, length: number): string[] {\n  return Array.from({ length }, (_, index) => {\n    const c = value[index] ?? \"\\x00\";\n    return c === \"\\x00\" ? \"\" : c;\n  });\n}\n\nfunction cellsToInternal(cells: string[], length: number): string {\n  return Array.from({ length }, (_, i) => cells[i] || \"\\x00\").join(\"\");\n}\n\nexport function OTPInput(props: OTPInputProps) {\n  const {\n    allowedCharacters = \"numeric\",\n    appearance,\n    autoFocus,\n    cellClassName,\n    className,\n    defaultValue = \"\",\n    disabled,\n    errorMessage,\n    hint,\n    id,\n    label,\n    length = 6,\n    mask,\n    name,\n    onComplete,\n    onValueChange,\n    ref,\n    separatorEvery,\n    size,\n    value,\n    ...rest\n  } = props;\n  const generatedId = useId();\n  const rootId = id ?? generatedId;\n  const resolvedLength = clampLength(length);\n  const isControlled = value !== undefined;\n  const [uncontrolledValue, setUncontrolledValue] = useState(() => {\n    const clean = sanitizeValue(\n      defaultValue,\n      allowedCharacters,\n      resolvedLength,\n    );\n    return clean.padEnd(resolvedLength, \"\\x00\");\n  });\n  const inputRefs = useRef<Array<HTMLInputElement | null>>([]);\n  const cells = useMemo(\n    () =>\n      isControlled\n        ? valueToCells(\n            sanitizeValue(\n              value ?? \"\",\n              allowedCharacters,\n              resolvedLength,\n            ).padEnd(resolvedLength, \"\\x00\"),\n            resolvedLength,\n          )\n        : Array.from({ length: resolvedLength }, (_, index) => {\n            const c = uncontrolledValue[index] ?? \"\\x00\";\n            return c === \"\\x00\" ? \"\" : sanitizeValue(c, allowedCharacters, 1);\n          }),\n    [allowedCharacters, isControlled, resolvedLength, uncontrolledValue, value],\n  );\n  const sanitizedValue = cells.filter(Boolean).join(\"\");\n  const labelId = `${rootId}-label`;\n  const hintId = `${rootId}-hint`;\n  const errorId = `${rootId}-error`;\n  const describedBy = [\n    hint !== undefined ? hintId : undefined,\n    errorMessage !== undefined ? errorId : undefined,\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  const commitValue = useCallback(\n    (nextCells: string[]) => {\n      if (!isControlled) {\n        setUncontrolledValue(cellsToInternal(nextCells, resolvedLength));\n      }\n      const next = nextCells.filter(Boolean).join(\"\").slice(0, resolvedLength);\n      onValueChange?.(next);\n      if (next.length === resolvedLength) {\n        onComplete?.(next);\n      }\n    },\n    [isControlled, onComplete, onValueChange, resolvedLength],\n  );\n\n  const focusCell = useCallback(\n    (index: number) => {\n      const target =\n        inputRefs.current[Math.max(0, Math.min(index, resolvedLength - 1))];\n      target?.focus();\n      target?.select();\n    },\n    [resolvedLength],\n  );\n\n  const updateAtIndex = useCallback(\n    (index: number, nextChars: string, isPaste = false) => {\n      let chars: string | undefined = sanitizeValue(\n        nextChars,\n        allowedCharacters,\n        resolvedLength,\n      );\n\n      // Detect single-char overwrite: browser gives \"existingChar + typedChar\"\n      if (\n        !isPaste &&\n        chars &&\n        chars.length === 2 &&\n        chars[0] === (cells[index] ?? \"\")\n      ) {\n        chars = chars[1];\n      }\n\n      if (!chars?.length || (!isPaste && chars === cells[index])) {\n        return;\n      }\n\n      const nextCells = [...cells];\n\n      chars.split(\"\").forEach((char, offset) => {\n        const targetIndex = index + offset;\n        if (targetIndex < resolvedLength) {\n          nextCells[targetIndex] = char;\n        }\n      });\n\n      commitValue(nextCells);\n      focusCell(\n        Math.min(index + Math.max(chars.length, 1), resolvedLength - 1),\n      );\n    },\n    [allowedCharacters, cells, commitValue, focusCell, resolvedLength],\n  );\n\n  const clearAtIndex = useCallback(\n    (index: number) => {\n      const nextCells = [...cells];\n      nextCells[index] = \"\";\n      commitValue(nextCells);\n    },\n    [cells, commitValue],\n  );\n\n  const handlePaste = useCallback(\n    (event: ClipboardEvent<HTMLInputElement>, index: number) => {\n      event.preventDefault();\n      updateAtIndex(index, event.clipboardData.getData(\"text\"), true);\n    },\n    [updateAtIndex],\n  );\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLInputElement>, index: number) => {\n      if (event.key === \"Backspace\") {\n        event.preventDefault();\n        if (cells[index]) {\n          clearAtIndex(index);\n          return;\n        }\n        clearAtIndex(Math.max(index - 1, 0));\n        focusCell(index - 1);\n        return;\n      }\n\n      if (event.key === \"Delete\") {\n        event.preventDefault();\n        clearAtIndex(index);\n        return;\n      }\n\n      if (event.key === \"ArrowLeft\") {\n        event.preventDefault();\n        focusCell(index - 1);\n        return;\n      }\n\n      if (event.key === \"ArrowRight\") {\n        event.preventDefault();\n        focusCell(index + 1);\n        return;\n      }\n\n      if (event.key === \"Home\") {\n        event.preventDefault();\n        focusCell(0);\n        return;\n      }\n\n      if (event.key === \"End\") {\n        event.preventDefault();\n        focusCell(resolvedLength - 1);\n      }\n    },\n    [cells, clearAtIndex, focusCell, resolvedLength],\n  );\n\n  return (\n    <div\n      ref={ref}\n      id={rootId}\n      role=\"group\"\n      aria-labelledby={label !== undefined ? labelId : undefined}\n      aria-describedby={describedBy || undefined}\n      aria-invalid={errorMessage !== undefined ? true : undefined}\n      className={cn(zuiOtpRootBase, className)}\n      data-disabled={disabled ? \"true\" : undefined}\n      data-slot=\"otp-input\"\n      {...rest}\n    >\n      {label !== undefined && (\n        <p id={labelId} className={zuiOtpLabelBase}>\n          {label}\n        </p>\n      )}\n      {hint !== undefined && (\n        <p id={hintId} className={zuiOtpHintBase}>\n          {hint}\n        </p>\n      )}\n      <div className={zuiOtpCellsBase} data-slot=\"otp-input-cells\">\n        {cells.map((char, index) => (\n          <span\n            key={`${rootId}-${index}`}\n            className=\"contents\"\n            data-slot=\"otp-input-cell-wrapper\"\n          >\n            <input\n              ref={(node) => {\n                inputRefs.current[index] = node;\n              }}\n              aria-label={`Digit ${index + 1} of ${resolvedLength}`}\n              autoComplete={index === 0 ? \"one-time-code\" : \"off\"}\n              autoFocus={autoFocus && index === 0}\n              className={cn(\n                otpInputCellVariants({ appearance, size }),\n                cellClassName,\n              )}\n              data-slot=\"otp-input-cell\"\n              disabled={disabled}\n              inputMode={allowedCharacters === \"numeric\" ? \"numeric\" : \"text\"}\n              maxLength={resolvedLength}\n              onChange={(event) =>\n                updateAtIndex(index, event.currentTarget.value, false)\n              }\n              onFocus={(event) => event.currentTarget.select()}\n              onKeyDown={(event) => handleKeyDown(event, index)}\n              onPaste={(event) => handlePaste(event, index)}\n              pattern={\n                allowedCharacters === \"numeric\" ? \"[0-9]*\" : \"[A-Za-z0-9]*\"\n              }\n              type={mask ? \"password\" : \"text\"}\n              value={char}\n            />\n            {separatorEvery &&\n              separatorEvery > 0 &&\n              index < resolvedLength - 1 &&\n              (index + 1) % separatorEvery === 0 && (\n                <span\n                  aria-hidden=\"true\"\n                  className={zuiOtpSeparatorBase}\n                  data-slot=\"otp-input-separator\"\n                />\n              )}\n          </span>\n        ))}\n      </div>\n      {name !== undefined && (\n        <input\n          type=\"hidden\"\n          name={name}\n          value={sanitizedValue}\n          disabled={disabled}\n        />\n      )}\n      {errorMessage !== undefined && (\n        <p id={errorId} className={zuiOtpErrorBase}>\n          {errorMessage}\n        </p>\n      )}\n    </div>\n  );\n}\n\nOTPInput.displayName = \"OTPInput\";\n"]}

package/dist/ui/otp-input.mjs

@@ -1,57 +1,11 @@
 "use client";
+import { zuiOtpCellBase, zuiOtpSizes, zuiOtpAppearances, zuiOtpLabelBase, zuiOtpHintBase, zuiOtpCellsBase, zuiOtpSeparatorBase, zuiOtpErrorBase, zuiOtpRootBase } from '../chunk-WN7XWKAS.mjs';
 import { cn } from '../chunk-4D54YOL6.mjs';
+import '../chunk-J5LGTIGS.mjs';
 import { useId, useState, useRef, useMemo, useCallback } from 'react';
 import { cva } from 'class-variance-authority';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-// src/design-system/otp-input.ts
-var zuiOtpRootBase = "grid w-fit gap-2 text-[color:var(--zui-otp-label-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-otp-label-fg-dark,oklch(98.4%_0.003_247.858))] data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50";
-var zuiOtpLabelBase = "text-sm font-medium leading-6 text-[color:var(--zui-otp-label-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-otp-label-fg-dark,oklch(98.4%_0.003_247.858))]";
-var zuiOtpHintBase = "max-w-sm text-xs leading-5 text-[color:var(--zui-otp-hint-fg,oklch(55.4%_0.046_257.417))] dark:text-[color:var(--zui-otp-hint-fg-dark,oklch(70.4%_0.04_256.788))]";
-var zuiOtpCellsBase = "flex flex-wrap items-center gap-2";
-var zuiOtpCellBase = "grid place-items-center rounded-xl border bg-[var(--zui-otp-bg,#ffffff)] text-center font-semibold tabular-nums text-[color:var(--zui-otp-fg,oklch(20.8%_0.042_265.755))] shadow-sm shadow-black/5 outline-none transition-[background-color,border-color,box-shadow,color,transform] placeholder:text-transparent focus-visible:-translate-y-0.5 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--zui-otp-ring-offset-focus,#ffffff)] disabled:cursor-not-allowed dark:bg-[var(--zui-otp-bg-dark,oklch(12.9%_0.042_264.695))] dark:text-[color:var(--zui-otp-fg-dark,oklch(98.4%_0.003_247.858))] dark:shadow-black/20 dark:focus-visible:ring-offset-[var(--zui-otp-ring-offset-focus-dark,oklch(12.9%_0.042_264.695))]";
-var zuiOtpSeparatorBase = "h-px w-3 shrink-0 bg-[color:var(--zui-otp-separator,#94a3b8)] opacity-70 dark:bg-[color:var(--zui-otp-separator-dark,#64748b)]";
-var zuiOtpErrorBase = "text-sm leading-6 text-[color:var(--zui-otp-error-fg,oklch(58.6%_0.253_17.585))] dark:text-[color:var(--zui-otp-error-fg-dark,oklch(71.2%_0.194_13.428))]";
-var zuiOtpSizes = {
-  sm: "size-7 md:size-9 rounded-lg text-sm",
-  md: "size-9 md:size-11 text-base",
-  lg: "size-11 md:size-13 rounded-2xl text-lg"
-};
-var zuiOtpAppearances = {
-  default: "border-[color:var(--zui-otp-default-border,#cbd5e1)] focus-visible:border-[color:var(--zui-otp-default-border-focus,oklch(44.6%_0.043_257.281))] focus-visible:ring-[var(--zui-otp-default-ring-focus,oklch(44.6%_0.043_257.281_/_0.25))] dark:border-[color:var(--zui-otp-default-border-dark,#475569)] dark:focus-visible:border-[color:var(--zui-otp-default-border-focus-dark,oklch(86.9%_0.022_252.894))] dark:focus-visible:ring-[var(--zui-otp-default-ring-focus-dark,oklch(86.9%_0.022_252.894_/_0.25))]",
-  outline: "border-[color:var(--zui-otp-outline-border,#64748b)] bg-transparent focus-visible:border-[color:var(--zui-otp-outline-border-focus,oklch(54.6%_0.245_262.881))] focus-visible:ring-[var(--zui-otp-outline-ring-focus,oklch(54.6%_0.245_262.881_/_0.28))] dark:border-[color:var(--zui-otp-outline-border-dark,#94a3b8)] dark:bg-transparent dark:focus-visible:border-[color:var(--zui-otp-outline-border-focus-dark,oklch(70.7%_0.165_254.624))] dark:focus-visible:ring-[var(--zui-otp-outline-ring-focus-dark,oklch(70.7%_0.165_254.624_/_0.28))]",
-  glass: "border-[color:var(--zui-otp-glass-border,#ffffff66)] bg-[var(--zui-otp-glass-bg,#ffffffcc)] backdrop-blur-md focus-visible:border-[color:var(--zui-otp-glass-border-focus,oklch(70.7%_0.165_254.624))] focus-visible:ring-[var(--zui-otp-glass-ring-focus,oklch(70.7%_0.165_254.624_/_0.32))] dark:border-[color:var(--zui-otp-glass-border-dark,#ffffff26)] dark:bg-[var(--zui-otp-glass-bg-dark,#0f172acc)] dark:focus-visible:border-[color:var(--zui-otp-glass-border-focus-dark,oklch(78.9%_0.154_211.53))] dark:focus-visible:ring-[var(--zui-otp-glass-ring-focus-dark,oklch(78.9%_0.154_211.53_/_0.32))]",
-  success: "border-[color:var(--zui-otp-success-border,oklch(69.6%_0.17_162.48_/_0.6))] focus-visible:border-[color:var(--zui-otp-success-border-focus,oklch(59.6%_0.145_163.225))] focus-visible:ring-[var(--zui-otp-success-ring-focus,oklch(59.6%_0.145_163.225_/_0.28))] dark:border-[color:var(--zui-otp-success-border-dark,oklch(69.6%_0.17_162.48_/_0.5))] dark:focus-visible:border-[color:var(--zui-otp-success-border-focus-dark,oklch(77.7%_0.152_181.912))] dark:focus-visible:ring-[var(--zui-otp-success-ring-focus-dark,oklch(77.7%_0.152_181.912_/_0.28))]",
-  error: "border-[color:var(--zui-otp-error-border,oklch(58.6%_0.253_17.585_/_0.7))] focus-visible:border-[color:var(--zui-otp-error-border-focus,oklch(58.6%_0.253_17.585))] focus-visible:ring-[var(--zui-otp-error-ring-focus,oklch(58.6%_0.253_17.585_/_0.28))] dark:border-[color:var(--zui-otp-error-border-dark,oklch(71.2%_0.194_13.428_/_0.65))] dark:focus-visible:border-[color:var(--zui-otp-error-border-focus-dark,oklch(71.2%_0.194_13.428))] dark:focus-visible:ring-[var(--zui-otp-error-ring-focus-dark,oklch(71.2%_0.194_13.428_/_0.28))]",
-  warning: "border-[color:var(--zui-otp-warning-border,oklch(79.5%_0.184_86.047_/_0.7))] focus-visible:border-[color:var(--zui-otp-warning-border-focus,oklch(68.1%_0.162_75.834))] focus-visible:ring-[var(--zui-otp-warning-ring-focus,oklch(68.1%_0.162_75.834_/_0.28))] dark:border-[color:var(--zui-otp-warning-border-dark,oklch(79.5%_0.184_86.047_/_0.5))] dark:focus-visible:border-[color:var(--zui-otp-warning-border-focus-dark,oklch(85.2%_0.199_91.936))] dark:focus-visible:ring-[var(--zui-otp-warning-ring-focus-dark,oklch(85.2%_0.199_91.936_/_0.28))]",
-  info: "border-[color:var(--zui-otp-info-border,oklch(62.3%_0.214_259.815_/_0.7))] focus-visible:border-[color:var(--zui-otp-info-border-focus,oklch(54.6%_0.245_262.881))] focus-visible:ring-[var(--zui-otp-info-ring-focus,oklch(54.6%_0.245_262.881_/_0.28))] dark:border-[color:var(--zui-otp-info-border-dark,oklch(62.3%_0.214_259.815_/_0.5))] dark:focus-visible:border-[color:var(--zui-otp-info-border-focus-dark,oklch(70.7%_0.165_254.624))] dark:focus-visible:ring-[var(--zui-otp-info-ring-focus-dark,oklch(70.7%_0.165_254.624_/_0.28))]",
-  violet: "border-[color:var(--zui-otp-violet-border,oklch(60.6%_0.25_292.717_/_0.7))] focus-visible:border-[color:var(--zui-otp-violet-border-focus,oklch(54.1%_0.281_293.009))] focus-visible:ring-[var(--zui-otp-violet-ring-focus,oklch(54.1%_0.281_293.009_/_0.28))] dark:border-[color:var(--zui-otp-violet-border-dark,oklch(60.6%_0.25_292.717_/_0.5))] dark:focus-visible:border-[color:var(--zui-otp-violet-border-focus-dark,oklch(70.2%_0.183_293.541))] dark:focus-visible:ring-[var(--zui-otp-violet-ring-focus-dark,oklch(70.2%_0.183_293.541_/_0.28))]",
-  amber: "border-[color:var(--zui-otp-amber-border,oklch(76.9%_0.188_70.08_/_0.7))] focus-visible:border-[color:var(--zui-otp-amber-border-focus,oklch(66.6%_0.179_58.318))] focus-visible:ring-[var(--zui-otp-amber-ring-focus,oklch(66.6%_0.179_58.318_/_0.28))] dark:border-[color:var(--zui-otp-amber-border-dark,oklch(76.9%_0.188_70.08_/_0.5))] dark:focus-visible:border-[color:var(--zui-otp-amber-border-focus-dark,oklch(82.8%_0.189_84.429))] dark:focus-visible:ring-[var(--zui-otp-amber-ring-focus-dark,oklch(82.8%_0.189_84.429_/_0.28))]",
-  pink: "border-[color:var(--zui-otp-pink-border,oklch(65.6%_0.241_354.308_/_0.7))] focus-visible:border-[color:var(--zui-otp-pink-border-focus,oklch(59.2%_0.249_0.584))] focus-visible:ring-[var(--zui-otp-pink-ring-focus,oklch(59.2%_0.249_0.584_/_0.28))] dark:border-[color:var(--zui-otp-pink-border-dark,oklch(65.6%_0.241_354.308_/_0.5))] dark:focus-visible:border-[color:var(--zui-otp-pink-border-focus-dark,oklch(71.8%_0.202_349.761))] dark:focus-visible:ring-[var(--zui-otp-pink-ring-focus-dark,oklch(71.8%_0.202_349.761_/_0.28))]",
-  indigo: "border-[color:var(--zui-otp-indigo-border,oklch(58.5%_0.233_277.117_/_0.7))] focus-visible:border-[color:var(--zui-otp-indigo-border-focus,oklch(51.1%_0.262_276.966))] focus-visible:ring-[var(--zui-otp-indigo-ring-focus,oklch(51.1%_0.262_276.966_/_0.28))] dark:border-[color:var(--zui-otp-indigo-border-dark,oklch(58.5%_0.233_277.117_/_0.5))] dark:focus-visible:border-[color:var(--zui-otp-indigo-border-focus-dark,oklch(67.3%_0.182_276.935))] dark:focus-visible:ring-[var(--zui-otp-indigo-ring-focus-dark,oklch(67.3%_0.182_276.935_/_0.28))]",
-  orange: "border-[color:var(--zui-otp-orange-border,oklch(70.5%_0.213_47.604_/_0.7))] focus-visible:border-[color:var(--zui-otp-orange-border-focus,oklch(64.6%_0.222_41.116))] focus-visible:ring-[var(--zui-otp-orange-ring-focus,oklch(64.6%_0.222_41.116_/_0.28))] dark:border-[color:var(--zui-otp-orange-border-dark,oklch(70.5%_0.213_47.604_/_0.5))] dark:focus-visible:border-[color:var(--zui-otp-orange-border-focus-dark,oklch(75%_0.183_55.934))] dark:focus-visible:ring-[var(--zui-otp-orange-ring-focus-dark,oklch(75%_0.183_55.934_/_0.28))]",
-  blue: "border border-[color:var(--zui-otp-blue-border,#2563eb)] dark:border-[color:var(--zui-otp-blue-border-dark,#3b82f6)] bg-[var(--zui-otp-blue-bg,#2563eb14)] dark:bg-[var(--zui-otp-blue-bg-dark,#3b82f624)] text-[color:var(--zui-otp-blue-fg,#0f172a)] dark:text-[color:var(--zui-otp-blue-fg-dark,#f8fafc)]",
-  cyan: "border border-[color:var(--zui-otp-cyan-border,#0891b2)] dark:border-[color:var(--zui-otp-cyan-border-dark,#22d3ee)] bg-[var(--zui-otp-cyan-bg,#0891b214)] dark:bg-[var(--zui-otp-cyan-bg-dark,#22d3ee24)] text-[color:var(--zui-otp-cyan-fg,#0f172a)] dark:text-[color:var(--zui-otp-cyan-fg-dark,#f8fafc)]",
-  green: "border border-[color:var(--zui-otp-green-border,#16a34a)] dark:border-[color:var(--zui-otp-green-border-dark,#22c55e)] bg-[var(--zui-otp-green-bg,#16a34a14)] dark:bg-[var(--zui-otp-green-bg-dark,#22c55e24)] text-[color:var(--zui-otp-green-fg,#0f172a)] dark:text-[color:var(--zui-otp-green-fg-dark,#f8fafc)]",
-  lime: "border border-[color:var(--zui-otp-lime-border,#65a30d)] dark:border-[color:var(--zui-otp-lime-border-dark,#a3e635)] bg-[var(--zui-otp-lime-bg,#65a30d14)] dark:bg-[var(--zui-otp-lime-bg-dark,#a3e63524)] text-[color:var(--zui-otp-lime-fg,#0f172a)] dark:text-[color:var(--zui-otp-lime-fg-dark,#f8fafc)]",
-  mint: "border border-[color:var(--zui-otp-mint-border,#10b981)] dark:border-[color:var(--zui-otp-mint-border-dark,#6ee7b7)] bg-[var(--zui-otp-mint-bg,#10b98114)] dark:bg-[var(--zui-otp-mint-bg-dark,#6ee7b724)] text-[color:var(--zui-otp-mint-fg,#0f172a)] dark:text-[color:var(--zui-otp-mint-fg-dark,#f8fafc)]",
-  ocean: "border border-[color:var(--zui-otp-ocean-border,#0284c7)] dark:border-[color:var(--zui-otp-ocean-border-dark,#38bdf8)] bg-[var(--zui-otp-ocean-bg,#0284c714)] dark:bg-[var(--zui-otp-ocean-bg-dark,#38bdf824)] text-[color:var(--zui-otp-ocean-fg,#0f172a)] dark:text-[color:var(--zui-otp-ocean-fg-dark,#f8fafc)]",
-  sapphire: "border border-[color:var(--zui-otp-sapphire-border,#1d4ed8)] dark:border-[color:var(--zui-otp-sapphire-border-dark,#60a5fa)] bg-[var(--zui-otp-sapphire-bg,#1d4ed814)] dark:bg-[var(--zui-otp-sapphire-bg-dark,#60a5fa24)] text-[color:var(--zui-otp-sapphire-fg,#0f172a)] dark:text-[color:var(--zui-otp-sapphire-fg-dark,#f8fafc)]",
-  lavender: "border border-[color:var(--zui-otp-lavender-border,#8b5cf6)] dark:border-[color:var(--zui-otp-lavender-border-dark,#a78bfa)] bg-[var(--zui-otp-lavender-bg,#8b5cf614)] dark:bg-[var(--zui-otp-lavender-bg-dark,#a78bfa24)] text-[color:var(--zui-otp-lavender-fg,#0f172a)] dark:text-[color:var(--zui-otp-lavender-fg-dark,#f8fafc)]",
-  ruby: "border border-[color:var(--zui-otp-ruby-border,#be123c)] dark:border-[color:var(--zui-otp-ruby-border-dark,#fb7185)] bg-[var(--zui-otp-ruby-bg,#be123c14)] dark:bg-[var(--zui-otp-ruby-bg-dark,#fb718524)] text-[color:var(--zui-otp-ruby-fg,#0f172a)] dark:text-[color:var(--zui-otp-ruby-fg-dark,#f8fafc)]",
-  red: "border border-[color:var(--zui-otp-red-border,#dc2626)] dark:border-[color:var(--zui-otp-red-border-dark,#ef4444)] bg-[var(--zui-otp-red-bg,#dc262614)] dark:bg-[var(--zui-otp-red-bg-dark,#ef444424)] text-[color:var(--zui-otp-red-fg,#0f172a)] dark:text-[color:var(--zui-otp-red-fg-dark,#f8fafc)]",
-  slate: "border border-[color:var(--zui-otp-slate-border,#475569)] dark:border-[color:var(--zui-otp-slate-border-dark,#64748b)] bg-[var(--zui-otp-slate-bg,#47556914)] dark:bg-[var(--zui-otp-slate-bg-dark,#64748b24)] text-[color:var(--zui-otp-slate-fg,#0f172a)] dark:text-[color:var(--zui-otp-slate-fg-dark,#f8fafc)]",
-  zinc: "border border-[color:var(--zui-otp-zinc-border,#52525b)] dark:border-[color:var(--zui-otp-zinc-border-dark,#71717a)] bg-[var(--zui-otp-zinc-bg,#52525b14)] dark:bg-[var(--zui-otp-zinc-bg-dark,#71717a24)] text-[color:var(--zui-otp-zinc-fg,#0f172a)] dark:text-[color:var(--zui-otp-zinc-fg-dark,#f8fafc)]",
-  stone: "border border-[color:var(--zui-otp-stone-border,#57534e)] dark:border-[color:var(--zui-otp-stone-border-dark,#78716c)] bg-[var(--zui-otp-stone-bg,#57534e14)] dark:bg-[var(--zui-otp-stone-bg-dark,#78716c24)] text-[color:var(--zui-otp-stone-fg,#0f172a)] dark:text-[color:var(--zui-otp-stone-fg-dark,#f8fafc)]",
-  royal: "border border-[color:var(--zui-otp-royal-border,#4338ca)] dark:border-[color:var(--zui-otp-royal-border-dark,#818cf8)] bg-[var(--zui-otp-royal-bg,#4338ca14)] dark:bg-[var(--zui-otp-royal-bg-dark,#818cf824)] text-[color:var(--zui-otp-royal-fg,#0f172a)] dark:text-[color:var(--zui-otp-royal-fg-dark,#f8fafc)]",
-  electric: "border border-[color:var(--zui-otp-electric-border,#0ea5e9)] dark:border-[color:var(--zui-otp-electric-border-dark,#38bdf8)] bg-[var(--zui-otp-electric-bg,#0ea5e914)] dark:bg-[var(--zui-otp-electric-bg-dark,#38bdf824)] text-[color:var(--zui-otp-electric-fg,#0f172a)] dark:text-[color:var(--zui-otp-electric-fg-dark,#f8fafc)]",
-  forest: "border border-[color:var(--zui-otp-forest-border,#166534)] dark:border-[color:var(--zui-otp-forest-border-dark,#4ade80)] bg-[var(--zui-otp-forest-bg,#16653414)] dark:bg-[var(--zui-otp-forest-bg-dark,#4ade8024)] text-[color:var(--zui-otp-forest-fg,#0f172a)] dark:text-[color:var(--zui-otp-forest-fg-dark,#f8fafc)]",
-  sunset: "border border-[color:var(--zui-otp-sunset-border,#ea580c)] dark:border-[color:var(--zui-otp-sunset-border-dark,#fb923c)] bg-[var(--zui-otp-sunset-bg,#ea580c14)] dark:bg-[var(--zui-otp-sunset-bg-dark,#fb923c24)] text-[color:var(--zui-otp-sunset-fg,#0f172a)] dark:text-[color:var(--zui-otp-sunset-fg-dark,#f8fafc)]",
-  magenta: "border border-[color:var(--zui-otp-magenta-border,#c026d3)] dark:border-[color:var(--zui-otp-magenta-border-dark,#e879f9)] bg-[var(--zui-otp-magenta-bg,#c026d314)] dark:bg-[var(--zui-otp-magenta-bg-dark,#e879f924)] text-[color:var(--zui-otp-magenta-fg,#0f172a)] dark:text-[color:var(--zui-otp-magenta-fg-dark,#f8fafc)]",
-  crimson: "border border-[color:var(--zui-otp-crimson-border,#b91c1c)] dark:border-[color:var(--zui-otp-crimson-border-dark,#f87171)] bg-[var(--zui-otp-crimson-bg,#b91c1c14)] dark:bg-[var(--zui-otp-crimson-bg-dark,#f8717124)] text-[color:var(--zui-otp-crimson-fg,#0f172a)] dark:text-[color:var(--zui-otp-crimson-fg-dark,#f8fafc)]",
-  aqua: "border border-[color:var(--zui-otp-aqua-border,#0f766e)] dark:border-[color:var(--zui-otp-aqua-border-dark,#2dd4bf)] bg-[var(--zui-otp-aqua-bg,#0f766e14)] dark:bg-[var(--zui-otp-aqua-bg-dark,#2dd4bf24)] text-[color:var(--zui-otp-aqua-fg,#0f172a)] dark:text-[color:var(--zui-otp-aqua-fg-dark,#f8fafc)]",
-  plum: "border border-[color:var(--zui-otp-plum-border,#7e22ce)] dark:border-[color:var(--zui-otp-plum-border-dark,#c084fc)] bg-[var(--zui-otp-plum-bg,#7e22ce14)] dark:bg-[var(--zui-otp-plum-bg-dark,#c084fc24)] text-[color:var(--zui-otp-plum-fg,#0f172a)] dark:text-[color:var(--zui-otp-plum-fg-dark,#f8fafc)]"
-};
 var otpInputCellVariants = cva(zuiOtpCellBase, {
   variants: {
     appearance: zuiOtpAppearances,