erp-pro-ui 0.2.6 → 0.2.7

package/dist/chunks/{multi-select-combobox-C_8sxaiL.mjs.map → multi-select-combobox-BOdKmPj2.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"multi-select-combobox-C_8sxaiL.mjs","names":[],"sources":["../../src/components/forms/multi-select-combobox/MultiSelectCombobox.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { motion, useMotionTemplate, useMotionValue } from \"framer-motion\";\n\nimport { CheckIcon, ChevronDownIcon, CloseIcon } from \"../../icons\";\nimport { DropdownMenu } from \"../../overlays/dropdown-menu\";\nimport { mergeClassNames } from \"../../../utils\";\n\nexport interface MultiSelectOption {\n  label: string;\n  value: string;\n}\n\nexport interface MultiSelectComboboxProps {\n  options: MultiSelectOption[];\n  value: string[];\n  onChange: (values: string[]) => void;\n  placeholder?: string;\n  searchPlaceholder?: string;\n  noOptionsText?: string;\n  className?: string;\n  bgClassName?: string;\n}\n\nconst MultiSelectCombobox: React.FC<MultiSelectComboboxProps> = ({\n  options,\n  value = [],\n  onChange,\n  placeholder = \"Select...\",\n  searchPlaceholder = \"Type to search...\",\n  noOptionsText = \"No options found\",\n  className,\n  bgClassName = \"bg-ds-surface-1\",\n}) => {\n  const [open, setOpen] = useState(false);\n  const [search, setSearch] = useState(\"\");\n  const [visible, setVisible] = useState(false);\n  const mouseX = useMotionValue(0);\n  const mouseY = useMotionValue(0);\n  const radius = 100;\n\n  // Filter options by search\n  const filteredOptions = options.filter((opt) =>\n    opt.label.toLowerCase().includes(search.toLowerCase()),\n  );\n\n  const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {\n    const { left, top } = event.currentTarget.getBoundingClientRect();\n    mouseX.set(event.clientX - left);\n    mouseY.set(event.clientY - top);\n  };\n\n  const handleOptionClick = (optionValue: string) => {\n    if (value.includes(optionValue)) {\n      onChange(value.filter((v) => v !== optionValue));\n    } else {\n      onChange([...value, optionValue]);\n    }\n  };\n\n  const handleRemoveTag = (optionValue: string, e: React.MouseEvent) => {\n    e.stopPropagation();\n    onChange(value.filter((v) => v !== optionValue));\n  };\n\n  const selectedLabels = value\n    .map((v) => options.find((opt) => opt.value === v)?.label)\n    .filter(Boolean);\n\n  return (\n    <DropdownMenu\n      className={mergeClassNames(\"w-full\", className)}\n      open={open}\n      onOpenChange={(nextOpen) => {\n        setOpen(nextOpen);\n        if (!nextOpen) {\n          setSearch(\"\");\n        }\n      }}\n      animationClassName=\"origin-top-left\"\n      panelClassName=\"top-[40px] start-0 z-20 mt-1 flex w-full max-h-60 flex-col rounded-lg border border-ds-border-2 bg-ds-surface-1 shadow-3 backdrop-blur-xl transition\"\n      trigger={\n        <motion.div\n          style={{\n            backgroundImage: useMotionTemplate`\n              radial-gradient(\n                ${visible ? `${radius}px` : \"0px\"} circle at ${mouseX}px ${mouseY}px,\n                var(--ds-color-accent),\n                transparent 90%\n              )\n            `,\n          }}\n          onMouseMove={handleMouseMove}\n          onMouseEnter={() => setVisible(true)}\n          onMouseLeave={() => setVisible(false)}\n          className=\"group/multi-combobox w-full rounded-lg border-ds-border-2 p-[2px] transition duration-300 hover:border-ds-border-accent\"\n        >\n          <div\n            className={mergeClassNames(\n              \"flex min-h-10 w-full cursor-pointer items-center justify-between rounded-md border border-ds-border-field px-3 py-2 text-sm text-ds-1 transition duration-400 ease-in-out group-hover/multi-combobox:shadow-none\",\n              bgClassName,\n            )}\n          >\n            <div className=\"flex flex-1 flex-wrap gap-1\">\n              {selectedLabels.length > 0 ? (\n                selectedLabels.map((label, index) => (\n                  <span\n                    key={value[index]}\n                    className=\"inline-flex items-center gap-1 rounded-md border border-ds-border-field bg-ds-surface-2 px-2 py-0.5 text-xs font-medium text-ds-1\"\n                  >\n                    {label}\n                    <button\n                      type=\"button\"\n                      onMouseDown={(e) => e.stopPropagation()}\n                      onClick={(e) => handleRemoveTag(value[index], e)}\n                      className=\"ms-0.5 rounded-full p-0.5 text-ds-2 transition-colors hover:bg-ds-surface-1 hover:text-ds-1\"\n                    >\n                      <CloseIcon className=\"h-3 w-3\" aria-hidden=\"true\" />\n                    </button>\n                  </span>\n                ))\n              ) : (\n                <span className=\"text-ds-2\">{placeholder}</span>\n              )}\n            </div>\n            <span\n              className={mergeClassNames(\n                \"ms-2 shrink-0 text-ds-2 transition-transform duration-300\",\n                open ? \"rotate-180\" : \"rotate-0\",\n              )}\n            >\n              <ChevronDownIcon\n                width={24}\n                height={24}\n                color=\"currentColor\"\n                className=\"h-5 w-5\"\n              />\n            </span>\n          </div>\n        </motion.div>\n      }\n    >\n      {/* Sticky search input */}\n      <div className=\"sticky top-0 z-10 rounded-t-lg border-b border-ds-border-2/30 bg-ds-surface-1/95 backdrop-blur-sm\">\n        <input\n          autoFocus\n          className=\"w-full rounded-t-lg bg-transparent px-3 py-2 text-sm text-ds-1 outline-none placeholder:text-ds-2 focus-visible:ring-2 focus-visible:ring-ds-focus/30\"\n          placeholder={searchPlaceholder}\n          value={search}\n          onChange={(e) => setSearch(e.target.value)}\n          onClick={(e) => e.stopPropagation()}\n        />\n      </div>\n      {/* Scrollable options */}\n      <div className=\"max-h-80 flex-1 overflow-auto\">\n        {filteredOptions.length === 0 && (\n          <div className=\"p-3 text-center text-sm text-ds-2\">\n            {noOptionsText}\n          </div>\n        )}\n        {filteredOptions.map((option) => {\n          const isSelected = value.includes(option.value);\n          return (\n            <div\n              key={option.value}\n              className={mergeClassNames(\n                \"flex cursor-pointer items-center gap-2 px-3 py-2 text-sm transition\",\n                isSelected\n                  ? \"bg-ds-surface-2 text-ds-1\"\n                  : \"text-ds-1 hover:bg-ds-surface-2 hover:text-ds-1\",\n              )}\n              onClick={() => handleOptionClick(option.value)}\n            >\n              <span\n                className={mergeClassNames(\n                  \"flex h-4 w-4 items-center justify-center rounded border transition\",\n                  isSelected\n                    ? \"border-ds-border-accent bg-ds-accent text-ds-on-accent\"\n                    : \"border-ds-border-2\",\n                )}\n              >\n                {isSelected && <CheckIcon width={12} height={12} />}\n              </span>\n              <span className=\"flex-1\">{option.label}</span>\n            </div>\n          );\n        })}\n      </div>\n    </DropdownMenu>\n  );\n};\n\nexport default MultiSelectCombobox;\n"],"mappings":";;;;;;;AAuBA,IAAM,uBAA2D,EAC/D,SACA,QAAQ,EAAE,EACV,UACA,cAAc,aACd,oBAAoB,qBACpB,gBAAgB,oBAChB,WACA,cAAc,wBACV;CACJ,MAAM,CAAC,MAAM,WAAW,SAAS,MAAM;CACvC,MAAM,CAAC,QAAQ,aAAa,SAAS,GAAG;CACxC,MAAM,CAAC,SAAS,cAAc,SAAS,MAAM;CAC7C,MAAM,SAAS,eAAe,EAAE;CAChC,MAAM,SAAS,eAAe,EAAE;CAChC,MAAM,SAAS;CAGf,MAAM,kBAAkB,QAAQ,QAAQ,QACtC,IAAI,MAAM,aAAa,CAAC,SAAS,OAAO,aAAa,CAAC,CACvD;CAED,MAAM,mBAAmB,UAA4C;EACnE,MAAM,EAAE,MAAM,QAAQ,MAAM,cAAc,uBAAuB;AACjE,SAAO,IAAI,MAAM,UAAU,KAAK;AAChC,SAAO,IAAI,MAAM,UAAU,IAAI;;CAGjC,MAAM,qBAAqB,gBAAwB;AACjD,MAAI,MAAM,SAAS,YAAY,CAC7B,UAAS,MAAM,QAAQ,MAAM,MAAM,YAAY,CAAC;MAEhD,UAAS,CAAC,GAAG,OAAO,YAAY,CAAC;;CAIrC,MAAM,mBAAmB,aAAqB,MAAwB;AACpE,IAAE,iBAAiB;AACnB,WAAS,MAAM,QAAQ,MAAM,MAAM,YAAY,CAAC;;CAGlD,MAAM,iBAAiB,MACpB,KAAK,MAAM,QAAQ,MAAM,QAAQ,IAAI,UAAU,EAAE,EAAE,MAAM,CACzD,OAAO,QAAQ;AAElB,QACE,qBAAC,cAAD;EACE,WAAW,gBAAgB,UAAU,UAAU;EACzC;EACN,eAAe,aAAa;AAC1B,WAAQ,SAAS;AACjB,OAAI,CAAC,SACH,WAAU,GAAG;;EAGjB,oBAAmB;EACnB,gBAAe;EACf,SACE,oBAAC,OAAO,KAAR;GACE,OAAO,EACL,iBAAiB,iBAAiB;;kBAE5B,UAAU,GAAG,OAAO,MAAM,MAAM,aAAa,OAAO,KAAK,OAAO;;;;eAKvE;GACD,aAAa;GACb,oBAAoB,WAAW,KAAK;GACpC,oBAAoB,WAAW,MAAM;GACrC,WAAU;aAEV,qBAAC,OAAD;IACE,WAAW,gBACT,oNACA,YACD;cAJH,CAME,oBAAC,OAAD;KAAK,WAAU;eACZ,eAAe,SAAS,IACvB,eAAe,KAAK,OAAO,UACzB,qBAAC,QAAD;MAEE,WAAU;gBAFZ,CAIG,OACD,oBAAC,UAAD;OACE,MAAK;OACL,cAAc,MAAM,EAAE,iBAAiB;OACvC,UAAU,MAAM,gBAAgB,MAAM,QAAQ,EAAE;OAChD,WAAU;iBAEV,oBAAC,WAAD;QAAW,WAAU;QAAU,eAAY;QAAS,CAAA;OAC7C,CAAA,CACJ;QAZA,MAAM,OAYN,CACP,GAEF,oBAAC,QAAD;MAAM,WAAU;gBAAa;MAAmB,CAAA;KAE9C,CAAA,EACN,oBAAC,QAAD;KACE,WAAW,gBACT,6DACA,OAAO,eAAe,WACvB;eAED,oBAAC,iBAAD;MACE,OAAO;MACP,QAAQ;MACR,OAAM;MACN,WAAU;MACV,CAAA;KACG,CAAA,CACH;;GACK,CAAA;YArEjB,CAyEE,oBAAC,OAAD;GAAK,WAAU;aACb,oBAAC,SAAD;IACE,WAAA;IACA,WAAU;IACV,aAAa;IACb,OAAO;IACP,WAAW,MAAM,UAAU,EAAE,OAAO,MAAM;IAC1C,UAAU,MAAM,EAAE,iBAAiB;IACnC,CAAA;GACE,CAAA,EAEN,qBAAC,OAAD;GAAK,WAAU;aAAf,CACG,gBAAgB,WAAW,KAC1B,oBAAC,OAAD;IAAK,WAAU;cACZ;IACG,CAAA,EAEP,gBAAgB,KAAK,WAAW;IAC/B,MAAM,aAAa,MAAM,SAAS,OAAO,MAAM;AAC/C,WACE,qBAAC,OAAD;KAEE,WAAW,gBACT,uEACA,aACI,8BACA,kDACL;KACD,eAAe,kBAAkB,OAAO,MAAM;eARhD,CAUE,oBAAC,QAAD;MACE,WAAW,gBACT,sEACA,aACI,2DACA,qBACL;gBAEA,cAAc,oBAAC,WAAD;OAAW,OAAO;OAAI,QAAQ;OAAM,CAAA;MAC9C,CAAA,EACP,oBAAC,QAAD;MAAM,WAAU;gBAAU,OAAO;MAAa,CAAA,CAC1C;OApBC,OAAO,MAoBR;KAER,CACE;KACO"}
+{"version":3,"file":"multi-select-combobox-BOdKmPj2.mjs","names":[],"sources":["../../src/components/forms/multi-select-combobox/MultiSelectCombobox.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { motion, useMotionTemplate, useMotionValue } from \"framer-motion\";\n\nimport { CheckIcon, ChevronDownIcon, CloseIcon } from \"../../icons\";\nimport { DropdownMenu } from \"../../overlays/dropdown-menu\";\nimport { mergeClassNames } from \"../../../utils\";\n\nexport interface MultiSelectOption {\n  label: string;\n  value: string;\n}\n\nexport interface MultiSelectComboboxProps {\n  options: MultiSelectOption[];\n  value: string[];\n  onChange: (values: string[]) => void;\n  placeholder?: string;\n  searchPlaceholder?: string;\n  noOptionsText?: string;\n  className?: string;\n  bgClassName?: string;\n}\n\nconst MultiSelectCombobox: React.FC<MultiSelectComboboxProps> = ({\n  options,\n  value = [],\n  onChange,\n  placeholder = \"Select...\",\n  searchPlaceholder = \"Type to search...\",\n  noOptionsText = \"No options found\",\n  className,\n  bgClassName = \"bg-ds-surface-1\",\n}) => {\n  const [open, setOpen] = useState(false);\n  const [search, setSearch] = useState(\"\");\n  const [visible, setVisible] = useState(false);\n  const mouseX = useMotionValue(0);\n  const mouseY = useMotionValue(0);\n  const radius = 100;\n\n  // Filter options by search\n  const filteredOptions = options.filter((opt) =>\n    opt.label.toLowerCase().includes(search.toLowerCase()),\n  );\n\n  const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {\n    const { left, top } = event.currentTarget.getBoundingClientRect();\n    mouseX.set(event.clientX - left);\n    mouseY.set(event.clientY - top);\n  };\n\n  const handleOptionClick = (optionValue: string) => {\n    if (value.includes(optionValue)) {\n      onChange(value.filter((v) => v !== optionValue));\n    } else {\n      onChange([...value, optionValue]);\n    }\n  };\n\n  const handleRemoveTag = (optionValue: string, e: React.MouseEvent) => {\n    e.stopPropagation();\n    onChange(value.filter((v) => v !== optionValue));\n  };\n\n  const selectedLabels = value\n    .map((v) => options.find((opt) => opt.value === v)?.label)\n    .filter(Boolean);\n\n  return (\n    <DropdownMenu\n      className={mergeClassNames(\"w-full\", className)}\n      open={open}\n      onOpenChange={(nextOpen) => {\n        setOpen(nextOpen);\n        if (!nextOpen) {\n          setSearch(\"\");\n        }\n      }}\n      animationClassName=\"origin-top-left\"\n      panelClassName=\"top-[40px] start-0 z-20 mt-1 flex w-full max-h-60 flex-col rounded-lg border border-ds-border-2 bg-ds-surface-1 shadow-3 backdrop-blur-xl transition\"\n      trigger={\n        <motion.div\n          style={{\n            backgroundImage: useMotionTemplate`\n              radial-gradient(\n                ${visible ? `${radius}px` : \"0px\"} circle at ${mouseX}px ${mouseY}px,\n                var(--ds-color-accent),\n                transparent 90%\n              )\n            `,\n          }}\n          onMouseMove={handleMouseMove}\n          onMouseEnter={() => setVisible(true)}\n          onMouseLeave={() => setVisible(false)}\n          className=\"group/multi-combobox w-full rounded-lg border-ds-border-2 p-[2px] transition duration-300 hover:border-ds-border-accent\"\n        >\n          <div\n            className={mergeClassNames(\n              \"flex min-h-10 w-full cursor-pointer items-center justify-between rounded-md border border-ds-border-field px-3 py-2 text-sm text-ds-1 transition duration-400 ease-in-out group-hover/multi-combobox:shadow-none\",\n              bgClassName,\n            )}\n          >\n            <div className=\"flex flex-1 flex-wrap gap-1\">\n              {selectedLabels.length > 0 ? (\n                selectedLabels.map((label, index) => (\n                  <span\n                    key={value[index]}\n                    className=\"inline-flex items-center gap-1 rounded-md border border-ds-border-field bg-ds-surface-2 px-2 py-0.5 text-xs font-medium text-ds-1\"\n                  >\n                    {label}\n                    <button\n                      type=\"button\"\n                      onMouseDown={(e) => e.stopPropagation()}\n                      onClick={(e) => handleRemoveTag(value[index], e)}\n                      className=\"ms-0.5 rounded-full p-0.5 text-ds-2 transition-colors hover:bg-ds-surface-1 hover:text-ds-1\"\n                    >\n                      <CloseIcon className=\"h-3 w-3\" aria-hidden=\"true\" />\n                    </button>\n                  </span>\n                ))\n              ) : (\n                <span className=\"text-ds-2\">{placeholder}</span>\n              )}\n            </div>\n            <span\n              className={mergeClassNames(\n                \"ms-2 shrink-0 text-ds-2 transition-transform duration-300\",\n                open ? \"rotate-180\" : \"rotate-0\",\n              )}\n            >\n              <ChevronDownIcon\n                width={24}\n                height={24}\n                color=\"currentColor\"\n                className=\"h-5 w-5\"\n              />\n            </span>\n          </div>\n        </motion.div>\n      }\n    >\n      {/* Sticky search input */}\n      <div className=\"sticky top-0 z-10 rounded-t-lg border-b border-ds-border-2/30 bg-ds-surface-1/95 backdrop-blur-sm\">\n        <input\n          autoFocus\n          className=\"w-full rounded-t-lg bg-transparent px-3 py-2 text-sm text-ds-1 outline-none placeholder:text-ds-2 focus-visible:ring-2 focus-visible:ring-ds-focus/30\"\n          placeholder={searchPlaceholder}\n          value={search}\n          onChange={(e) => setSearch(e.target.value)}\n          onClick={(e) => e.stopPropagation()}\n        />\n      </div>\n      {/* Scrollable options */}\n      <div className=\"max-h-80 flex-1 overflow-auto\">\n        {filteredOptions.length === 0 && (\n          <div className=\"p-3 text-center text-sm text-ds-2\">\n            {noOptionsText}\n          </div>\n        )}\n        {filteredOptions.map((option) => {\n          const isSelected = value.includes(option.value);\n          return (\n            <div\n              key={option.value}\n              className={mergeClassNames(\n                \"flex cursor-pointer items-center gap-2 px-3 py-2 text-sm transition\",\n                isSelected\n                  ? \"bg-ds-surface-2 text-ds-1\"\n                  : \"text-ds-1 hover:bg-ds-surface-2 hover:text-ds-1\",\n              )}\n              onClick={() => handleOptionClick(option.value)}\n            >\n              <span\n                className={mergeClassNames(\n                  \"flex h-4 w-4 items-center justify-center rounded border transition\",\n                  isSelected\n                    ? \"border-ds-border-accent bg-ds-accent text-ds-on-accent\"\n                    : \"border-ds-border-2\",\n                )}\n              >\n                {isSelected && <CheckIcon width={12} height={12} />}\n              </span>\n              <span className=\"flex-1\">{option.label}</span>\n            </div>\n          );\n        })}\n      </div>\n    </DropdownMenu>\n  );\n};\n\nexport default MultiSelectCombobox;\n"],"mappings":"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"}

package/dist/chunks/{multi-select-combobox-CFJGq1hn.cjs → multi-select-combobox-PPYRcaPg.cjs}

@@ -1,7 +1,7 @@
-const require_chunk = require("./chunk-B_GkZjkl.cjs");
-const require_utils = require("./utils-LRbEQHYs.cjs");
-const require_icons = require("./icons-ub9iu-JG.cjs");
-const require_DropdownMenu = require("./DropdownMenu-yh04burS.cjs");
+const require_chunk = require("./chunk-D6vf50IK.cjs");
+const require_utils = require("./utils-CoA0q63n.cjs");
+const require_icons = require("./icons-Ci8yEvvF.cjs");
+const require_DropdownMenu = require("./DropdownMenu-CEmlmX7P.cjs");
 let react = require("react");
 react = require_chunk.__toESM(react, 1);
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -124,4 +124,4 @@ Object.defineProperty(exports, "MultiSelectCombobox", {
 	}
 });
 
-//# sourceMappingURL=multi-select-combobox-CFJGq1hn.cjs.map
+//# sourceMappingURL=multi-select-combobox-PPYRcaPg.cjs.map

package/dist/chunks/{multi-select-combobox-CFJGq1hn.cjs.map → multi-select-combobox-PPYRcaPg.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"multi-select-combobox-CFJGq1hn.cjs","names":[],"sources":["../../src/components/forms/multi-select-combobox/MultiSelectCombobox.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { motion, useMotionTemplate, useMotionValue } from \"framer-motion\";\n\nimport { CheckIcon, ChevronDownIcon, CloseIcon } from \"../../icons\";\nimport { DropdownMenu } from \"../../overlays/dropdown-menu\";\nimport { mergeClassNames } from \"../../../utils\";\n\nexport interface MultiSelectOption {\n  label: string;\n  value: string;\n}\n\nexport interface MultiSelectComboboxProps {\n  options: MultiSelectOption[];\n  value: string[];\n  onChange: (values: string[]) => void;\n  placeholder?: string;\n  searchPlaceholder?: string;\n  noOptionsText?: string;\n  className?: string;\n  bgClassName?: string;\n}\n\nconst MultiSelectCombobox: React.FC<MultiSelectComboboxProps> = ({\n  options,\n  value = [],\n  onChange,\n  placeholder = \"Select...\",\n  searchPlaceholder = \"Type to search...\",\n  noOptionsText = \"No options found\",\n  className,\n  bgClassName = \"bg-ds-surface-1\",\n}) => {\n  const [open, setOpen] = useState(false);\n  const [search, setSearch] = useState(\"\");\n  const [visible, setVisible] = useState(false);\n  const mouseX = useMotionValue(0);\n  const mouseY = useMotionValue(0);\n  const radius = 100;\n\n  // Filter options by search\n  const filteredOptions = options.filter((opt) =>\n    opt.label.toLowerCase().includes(search.toLowerCase()),\n  );\n\n  const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {\n    const { left, top } = event.currentTarget.getBoundingClientRect();\n    mouseX.set(event.clientX - left);\n    mouseY.set(event.clientY - top);\n  };\n\n  const handleOptionClick = (optionValue: string) => {\n    if (value.includes(optionValue)) {\n      onChange(value.filter((v) => v !== optionValue));\n    } else {\n      onChange([...value, optionValue]);\n    }\n  };\n\n  const handleRemoveTag = (optionValue: string, e: React.MouseEvent) => {\n    e.stopPropagation();\n    onChange(value.filter((v) => v !== optionValue));\n  };\n\n  const selectedLabels = value\n    .map((v) => options.find((opt) => opt.value === v)?.label)\n    .filter(Boolean);\n\n  return (\n    <DropdownMenu\n      className={mergeClassNames(\"w-full\", className)}\n      open={open}\n      onOpenChange={(nextOpen) => {\n        setOpen(nextOpen);\n        if (!nextOpen) {\n          setSearch(\"\");\n        }\n      }}\n      animationClassName=\"origin-top-left\"\n      panelClassName=\"top-[40px] start-0 z-20 mt-1 flex w-full max-h-60 flex-col rounded-lg border border-ds-border-2 bg-ds-surface-1 shadow-3 backdrop-blur-xl transition\"\n      trigger={\n        <motion.div\n          style={{\n            backgroundImage: useMotionTemplate`\n              radial-gradient(\n                ${visible ? `${radius}px` : \"0px\"} circle at ${mouseX}px ${mouseY}px,\n                var(--ds-color-accent),\n                transparent 90%\n              )\n            `,\n          }}\n          onMouseMove={handleMouseMove}\n          onMouseEnter={() => setVisible(true)}\n          onMouseLeave={() => setVisible(false)}\n          className=\"group/multi-combobox w-full rounded-lg border-ds-border-2 p-[2px] transition duration-300 hover:border-ds-border-accent\"\n        >\n          <div\n            className={mergeClassNames(\n              \"flex min-h-10 w-full cursor-pointer items-center justify-between rounded-md border border-ds-border-field px-3 py-2 text-sm text-ds-1 transition duration-400 ease-in-out group-hover/multi-combobox:shadow-none\",\n              bgClassName,\n            )}\n          >\n            <div className=\"flex flex-1 flex-wrap gap-1\">\n              {selectedLabels.length > 0 ? (\n                selectedLabels.map((label, index) => (\n                  <span\n                    key={value[index]}\n                    className=\"inline-flex items-center gap-1 rounded-md border border-ds-border-field bg-ds-surface-2 px-2 py-0.5 text-xs font-medium text-ds-1\"\n                  >\n                    {label}\n                    <button\n                      type=\"button\"\n                      onMouseDown={(e) => e.stopPropagation()}\n                      onClick={(e) => handleRemoveTag(value[index], e)}\n                      className=\"ms-0.5 rounded-full p-0.5 text-ds-2 transition-colors hover:bg-ds-surface-1 hover:text-ds-1\"\n                    >\n                      <CloseIcon className=\"h-3 w-3\" aria-hidden=\"true\" />\n                    </button>\n                  </span>\n                ))\n              ) : (\n                <span className=\"text-ds-2\">{placeholder}</span>\n              )}\n            </div>\n            <span\n              className={mergeClassNames(\n                \"ms-2 shrink-0 text-ds-2 transition-transform duration-300\",\n                open ? \"rotate-180\" : \"rotate-0\",\n              )}\n            >\n              <ChevronDownIcon\n                width={24}\n                height={24}\n                color=\"currentColor\"\n                className=\"h-5 w-5\"\n              />\n            </span>\n          </div>\n        </motion.div>\n      }\n    >\n      {/* Sticky search input */}\n      <div className=\"sticky top-0 z-10 rounded-t-lg border-b border-ds-border-2/30 bg-ds-surface-1/95 backdrop-blur-sm\">\n        <input\n          autoFocus\n          className=\"w-full rounded-t-lg bg-transparent px-3 py-2 text-sm text-ds-1 outline-none placeholder:text-ds-2 focus-visible:ring-2 focus-visible:ring-ds-focus/30\"\n          placeholder={searchPlaceholder}\n          value={search}\n          onChange={(e) => setSearch(e.target.value)}\n          onClick={(e) => e.stopPropagation()}\n        />\n      </div>\n      {/* Scrollable options */}\n      <div className=\"max-h-80 flex-1 overflow-auto\">\n        {filteredOptions.length === 0 && (\n          <div className=\"p-3 text-center text-sm text-ds-2\">\n            {noOptionsText}\n          </div>\n        )}\n        {filteredOptions.map((option) => {\n          const isSelected = value.includes(option.value);\n          return (\n            <div\n              key={option.value}\n              className={mergeClassNames(\n                \"flex cursor-pointer items-center gap-2 px-3 py-2 text-sm transition\",\n                isSelected\n                  ? \"bg-ds-surface-2 text-ds-1\"\n                  : \"text-ds-1 hover:bg-ds-surface-2 hover:text-ds-1\",\n              )}\n              onClick={() => handleOptionClick(option.value)}\n            >\n              <span\n                className={mergeClassNames(\n                  \"flex h-4 w-4 items-center justify-center rounded border transition\",\n                  isSelected\n                    ? \"border-ds-border-accent bg-ds-accent text-ds-on-accent\"\n                    : \"border-ds-border-2\",\n                )}\n              >\n                {isSelected && <CheckIcon width={12} height={12} />}\n              </span>\n              <span className=\"flex-1\">{option.label}</span>\n            </div>\n          );\n        })}\n      </div>\n    </DropdownMenu>\n  );\n};\n\nexport default MultiSelectCombobox;\n"],"mappings":"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"}
+{"version":3,"file":"multi-select-combobox-PPYRcaPg.cjs","names":[],"sources":["../../src/components/forms/multi-select-combobox/MultiSelectCombobox.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { motion, useMotionTemplate, useMotionValue } from \"framer-motion\";\n\nimport { CheckIcon, ChevronDownIcon, CloseIcon } from \"../../icons\";\nimport { DropdownMenu } from \"../../overlays/dropdown-menu\";\nimport { mergeClassNames } from \"../../../utils\";\n\nexport interface MultiSelectOption {\n  label: string;\n  value: string;\n}\n\nexport interface MultiSelectComboboxProps {\n  options: MultiSelectOption[];\n  value: string[];\n  onChange: (values: string[]) => void;\n  placeholder?: string;\n  searchPlaceholder?: string;\n  noOptionsText?: string;\n  className?: string;\n  bgClassName?: string;\n}\n\nconst MultiSelectCombobox: React.FC<MultiSelectComboboxProps> = ({\n  options,\n  value = [],\n  onChange,\n  placeholder = \"Select...\",\n  searchPlaceholder = \"Type to search...\",\n  noOptionsText = \"No options found\",\n  className,\n  bgClassName = \"bg-ds-surface-1\",\n}) => {\n  const [open, setOpen] = useState(false);\n  const [search, setSearch] = useState(\"\");\n  const [visible, setVisible] = useState(false);\n  const mouseX = useMotionValue(0);\n  const mouseY = useMotionValue(0);\n  const radius = 100;\n\n  // Filter options by search\n  const filteredOptions = options.filter((opt) =>\n    opt.label.toLowerCase().includes(search.toLowerCase()),\n  );\n\n  const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {\n    const { left, top } = event.currentTarget.getBoundingClientRect();\n    mouseX.set(event.clientX - left);\n    mouseY.set(event.clientY - top);\n  };\n\n  const handleOptionClick = (optionValue: string) => {\n    if (value.includes(optionValue)) {\n      onChange(value.filter((v) => v !== optionValue));\n    } else {\n      onChange([...value, optionValue]);\n    }\n  };\n\n  const handleRemoveTag = (optionValue: string, e: React.MouseEvent) => {\n    e.stopPropagation();\n    onChange(value.filter((v) => v !== optionValue));\n  };\n\n  const selectedLabels = value\n    .map((v) => options.find((opt) => opt.value === v)?.label)\n    .filter(Boolean);\n\n  return (\n    <DropdownMenu\n      className={mergeClassNames(\"w-full\", className)}\n      open={open}\n      onOpenChange={(nextOpen) => {\n        setOpen(nextOpen);\n        if (!nextOpen) {\n          setSearch(\"\");\n        }\n      }}\n      animationClassName=\"origin-top-left\"\n      panelClassName=\"top-[40px] start-0 z-20 mt-1 flex w-full max-h-60 flex-col rounded-lg border border-ds-border-2 bg-ds-surface-1 shadow-3 backdrop-blur-xl transition\"\n      trigger={\n        <motion.div\n          style={{\n            backgroundImage: useMotionTemplate`\n              radial-gradient(\n                ${visible ? `${radius}px` : \"0px\"} circle at ${mouseX}px ${mouseY}px,\n                var(--ds-color-accent),\n                transparent 90%\n              )\n            `,\n          }}\n          onMouseMove={handleMouseMove}\n          onMouseEnter={() => setVisible(true)}\n          onMouseLeave={() => setVisible(false)}\n          className=\"group/multi-combobox w-full rounded-lg border-ds-border-2 p-[2px] transition duration-300 hover:border-ds-border-accent\"\n        >\n          <div\n            className={mergeClassNames(\n              \"flex min-h-10 w-full cursor-pointer items-center justify-between rounded-md border border-ds-border-field px-3 py-2 text-sm text-ds-1 transition duration-400 ease-in-out group-hover/multi-combobox:shadow-none\",\n              bgClassName,\n            )}\n          >\n            <div className=\"flex flex-1 flex-wrap gap-1\">\n              {selectedLabels.length > 0 ? (\n                selectedLabels.map((label, index) => (\n                  <span\n                    key={value[index]}\n                    className=\"inline-flex items-center gap-1 rounded-md border border-ds-border-field bg-ds-surface-2 px-2 py-0.5 text-xs font-medium text-ds-1\"\n                  >\n                    {label}\n                    <button\n                      type=\"button\"\n                      onMouseDown={(e) => e.stopPropagation()}\n                      onClick={(e) => handleRemoveTag(value[index], e)}\n                      className=\"ms-0.5 rounded-full p-0.5 text-ds-2 transition-colors hover:bg-ds-surface-1 hover:text-ds-1\"\n                    >\n                      <CloseIcon className=\"h-3 w-3\" aria-hidden=\"true\" />\n                    </button>\n                  </span>\n                ))\n              ) : (\n                <span className=\"text-ds-2\">{placeholder}</span>\n              )}\n            </div>\n            <span\n              className={mergeClassNames(\n                \"ms-2 shrink-0 text-ds-2 transition-transform duration-300\",\n                open ? \"rotate-180\" : \"rotate-0\",\n              )}\n            >\n              <ChevronDownIcon\n                width={24}\n                height={24}\n                color=\"currentColor\"\n                className=\"h-5 w-5\"\n              />\n            </span>\n          </div>\n        </motion.div>\n      }\n    >\n      {/* Sticky search input */}\n      <div className=\"sticky top-0 z-10 rounded-t-lg border-b border-ds-border-2/30 bg-ds-surface-1/95 backdrop-blur-sm\">\n        <input\n          autoFocus\n          className=\"w-full rounded-t-lg bg-transparent px-3 py-2 text-sm text-ds-1 outline-none placeholder:text-ds-2 focus-visible:ring-2 focus-visible:ring-ds-focus/30\"\n          placeholder={searchPlaceholder}\n          value={search}\n          onChange={(e) => setSearch(e.target.value)}\n          onClick={(e) => e.stopPropagation()}\n        />\n      </div>\n      {/* Scrollable options */}\n      <div className=\"max-h-80 flex-1 overflow-auto\">\n        {filteredOptions.length === 0 && (\n          <div className=\"p-3 text-center text-sm text-ds-2\">\n            {noOptionsText}\n          </div>\n        )}\n        {filteredOptions.map((option) => {\n          const isSelected = value.includes(option.value);\n          return (\n            <div\n              key={option.value}\n              className={mergeClassNames(\n                \"flex cursor-pointer items-center gap-2 px-3 py-2 text-sm transition\",\n                isSelected\n                  ? \"bg-ds-surface-2 text-ds-1\"\n                  : \"text-ds-1 hover:bg-ds-surface-2 hover:text-ds-1\",\n              )}\n              onClick={() => handleOptionClick(option.value)}\n            >\n              <span\n                className={mergeClassNames(\n                  \"flex h-4 w-4 items-center justify-center rounded border transition\",\n                  isSelected\n                    ? \"border-ds-border-accent bg-ds-accent text-ds-on-accent\"\n                    : \"border-ds-border-2\",\n                )}\n              >\n                {isSelected && <CheckIcon width={12} height={12} />}\n              </span>\n              <span className=\"flex-1\">{option.label}</span>\n            </div>\n          );\n        })}\n      </div>\n    </DropdownMenu>\n  );\n};\n\nexport default MultiSelectCombobox;\n"],"mappings":"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"}

package/dist/chunks/{otp-input-BpcTJOmU.mjs → otp-input--_itTXaL.mjs}

@@ -177,4 +177,4 @@ OTPInput.displayName = "OTPInput";
 //#endregion
 export { OTPInput as t };
 
-//# sourceMappingURL=otp-input-BpcTJOmU.mjs.map
+//# sourceMappingURL=otp-input--_itTXaL.mjs.map

package/dist/chunks/{otp-input-BpcTJOmU.mjs.map → otp-input--_itTXaL.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"otp-input-BpcTJOmU.mjs","names":[],"sources":["../../src/components/forms/otp-input/OTPInput.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useState,\n  useRef,\n  useCallback,\n  useEffect,\n  type KeyboardEvent,\n  type ClipboardEvent,\n  type ChangeEvent,\n} from \"react\";\n\nexport type OTPInputSize = \"sm\" | \"md\" | \"lg\";\nexport type OTPInputVariant = \"outlined\" | \"filled\" | \"underlined\";\n\nexport interface OTPInputProps {\n  /** Number of OTP digits */\n  length?: number;\n  /** Callback when OTP value changes */\n  onChange?: (value: string) => void;\n  /** Callback when all digits are filled */\n  onComplete?: (value: string) => void;\n  /** The current value (controlled) */\n  value?: string;\n  /** Default value (uncontrolled) */\n  defaultValue?: string;\n  /** Size of the input boxes */\n  size?: OTPInputSize;\n  /** Visual variant */\n  variant?: OTPInputVariant;\n  /** Whether the input is disabled */\n  disabled?: boolean;\n  /** Whether there's an error */\n  error?: boolean;\n  /** Error message to display */\n  errorMessage?: string;\n  /** Placeholder character */\n  placeholder?: string;\n  /** Whether to mask the input (like password) */\n  mask?: boolean;\n  /** Whether to auto-focus the first input */\n  autoFocus?: boolean;\n  /** Input type - number only or alphanumeric */\n  type?: \"number\" | \"text\";\n  /** Custom className for the container */\n  className?: string;\n  /** Custom className for each input box */\n  inputClassName?: string;\n  /** Separator to show between groups of digits */\n  separator?: React.ReactNode;\n  /** Position(s) to show separator (e.g., [3] means after 3rd digit) */\n  separatorPositions?: number[];\n  /** Accessible label */\n  \"aria-label\"?: string;\n}\n\nconst sizeStyles: Record<OTPInputSize, string> = {\n  sm: \"w-9 h-10 text-base\",\n  md: \"w-12 h-14 text-xl\",\n  lg: \"w-14 h-16 text-2xl\",\n};\n\nconst variantStyles: Record<\n  OTPInputVariant,\n  { base: string; focus: string; error: string }\n> = {\n  outlined: {\n    base: \"border border-ds-border-field bg-ds-surface-1 rounded-lg text-ds-1\",\n    focus: \"focus:border-ds-border-accent focus:ring-2 focus:ring-ds-accent\",\n    error: \"border-destructive\",\n  },\n  filled: {\n    base: \"border border-transparent bg-ds-accent-subtle rounded-lg text-ds-1\",\n    focus:\n      \"focus:border-ds-border-accent focus:bg-ds-surface-1 focus:ring-2 focus:ring-ds-accent\",\n    error: \"bg-danger-subtle border-danger-border\",\n  },\n  underlined: {\n    base: \"border-b-2 border-ds-border-1 bg-transparent rounded-none text-ds-1\",\n    focus: \"focus:border-ds-border-accent\",\n    error: \"border-destructive\",\n  },\n};\n\nconst OTPInput = forwardRef<HTMLDivElement, OTPInputProps>(\n  (\n    {\n      length = 6,\n      onChange,\n      onComplete,\n      value: controlledValue,\n      defaultValue = \"\",\n      size = \"md\",\n      variant = \"outlined\",\n      disabled = false,\n      error = false,\n      errorMessage,\n      placeholder = \"\",\n      mask = false,\n      autoFocus = false,\n      type = \"number\",\n      className = \"\",\n      inputClassName = \"\",\n      separator = <span className=\"text-ds-3 text-2xl mx-2\">—</span>,\n      separatorPositions = [],\n      \"aria-label\": ariaLabel = \"One-time password\",\n    },\n    ref,\n  ) => {\n    const [values, setValues] = useState<string[]>(() => {\n      const initial = controlledValue ?? defaultValue;\n      return initial\n        .split(\"\")\n        .slice(0, length)\n        .concat(Array(length).fill(\"\"))\n        .slice(0, length);\n    });\n\n    const inputRefs = useRef<(HTMLInputElement | null)[]>([]);\n\n    // Sync with controlled value\n    useEffect(() => {\n      if (controlledValue !== undefined) {\n        const newValues = controlledValue\n          .split(\"\")\n          .slice(0, length)\n          .concat(Array(length).fill(\"\"))\n          .slice(0, length);\n        setValues(newValues);\n      }\n    }, [controlledValue, length]);\n\n    // Auto-focus first input\n    useEffect(() => {\n      if (autoFocus && inputRefs.current[0]) {\n        inputRefs.current[0].focus();\n      }\n    }, [autoFocus]);\n\n    const focusInput = useCallback(\n      (index: number) => {\n        if (index >= 0 && index < length && inputRefs.current[index]) {\n          inputRefs.current[index]?.focus();\n          inputRefs.current[index]?.select();\n        }\n      },\n      [length],\n    );\n\n    const handleChange = useCallback(\n      (index: number, e: ChangeEvent<HTMLInputElement>) => {\n        const inputValue = e.target.value;\n        const char = inputValue.slice(-1);\n\n        // Validate input based on type\n        if (type === \"number\" && char && !/^\\d$/.test(char)) {\n          return;\n        }\n\n        const newValues = [...values];\n        newValues[index] = char;\n        setValues(newValues);\n\n        const otpValue = newValues.join(\"\");\n        onChange?.(otpValue);\n\n        // Move to next input if value entered\n        if (char && index < length - 1) {\n          focusInput(index + 1);\n        }\n\n        // Check if complete\n        if (newValues.every((v) => v !== \"\") && newValues.length === length) {\n          onComplete?.(otpValue);\n        }\n      },\n      [values, onChange, onComplete, length, type, focusInput],\n    );\n\n    const handleKeyDown = useCallback(\n      (index: number, e: KeyboardEvent<HTMLInputElement>) => {\n        switch (e.key) {\n          case \"Backspace\":\n            e.preventDefault();\n            const newValues = [...values];\n            if (values[index]) {\n              // Clear current value\n              newValues[index] = \"\";\n              setValues(newValues);\n              onChange?.(newValues.join(\"\"));\n            } else if (index > 0) {\n              // Move to previous and clear\n              newValues[index - 1] = \"\";\n              setValues(newValues);\n              onChange?.(newValues.join(\"\"));\n              focusInput(index - 1);\n            }\n            break;\n          case \"ArrowLeft\":\n            e.preventDefault();\n            focusInput(index - 1);\n            break;\n          case \"ArrowRight\":\n            e.preventDefault();\n            focusInput(index + 1);\n            break;\n          case \"Delete\":\n            e.preventDefault();\n            const deleteValues = [...values];\n            deleteValues[index] = \"\";\n            setValues(deleteValues);\n            onChange?.(deleteValues.join(\"\"));\n            break;\n        }\n      },\n      [values, onChange, focusInput],\n    );\n\n    const handlePaste = useCallback(\n      (e: ClipboardEvent<HTMLInputElement>) => {\n        e.preventDefault();\n        const pastedData = e.clipboardData.getData(\"text\").slice(0, length);\n\n        // Validate pasted content\n        if (type === \"number\" && !/^\\d*$/.test(pastedData)) {\n          return;\n        }\n\n        const newValues = pastedData\n          .split(\"\")\n          .slice(0, length)\n          .concat(Array(length).fill(\"\"))\n          .slice(0, length);\n\n        setValues(newValues);\n        const otpValue = newValues.join(\"\");\n        onChange?.(otpValue);\n\n        // Focus last filled input or last input\n        const lastFilledIndex = newValues.findLastIndex((v) => v !== \"\");\n        focusInput(Math.min(lastFilledIndex + 1, length - 1));\n\n        // Check if complete\n        if (newValues.every((v) => v !== \"\") && pastedData.length >= length) {\n          onComplete?.(otpValue);\n        }\n      },\n      [length, type, onChange, onComplete, focusInput],\n    );\n\n    const handleFocus = useCallback((e: React.FocusEvent<HTMLInputElement>) => {\n      e.target.select();\n    }, []);\n\n    const renderInputs = () => {\n      const inputs: React.ReactNode[] = [];\n\n      for (let i = 0; i < length; i++) {\n        // Add separator if needed\n        if (separatorPositions.includes(i) && i > 0) {\n          inputs.push(\n            <div key={`separator-${i}`} className=\"flex items-center\">\n              {separator}\n            </div>,\n          );\n        }\n\n        inputs.push(\n          <input\n            key={i}\n            ref={(el) => {\n              inputRefs.current[i] = el;\n              // React 19: Return cleanup function\n              return () => {\n                inputRefs.current[i] = null;\n              };\n            }}\n            type={mask ? \"password\" : \"text\"}\n            inputMode={type === \"number\" ? \"numeric\" : \"text\"}\n            pattern={type === \"number\" ? \"\\\\d*\" : undefined}\n            maxLength={1}\n            value={values[i] || \"\"}\n            placeholder={placeholder}\n            disabled={disabled}\n            onChange={(e) => handleChange(i, e)}\n            onKeyDown={(e) => handleKeyDown(i, e)}\n            onPaste={handlePaste}\n            onFocus={handleFocus}\n            aria-label={`${ariaLabel} digit ${i + 1}`}\n            className={`\n              text-center font-semibold outline-none transition-all\n              placeholder:text-ds-2\n              ${sizeStyles[size]}\n              ${variantStyles[variant].base}\n              ${!error ? variantStyles[variant].focus : \"\"}\n              ${error ? variantStyles[variant].error : \"\"}\n              ${disabled ? \"opacity-50 cursor-not-allowed bg-ds-surface-1\" : \"\"}\n              ${inputClassName}\n            `}\n          />,\n        );\n      }\n\n      return inputs;\n    };\n\n    return (\n      <div ref={ref} className={`flex flex-col gap-2 ${className}`}>\n        <div\n          className=\"flex items-center gap-2\"\n          role=\"group\"\n          aria-label={ariaLabel}\n        >\n          {renderInputs()}\n        </div>\n        {error && errorMessage && (\n          <span className=\"text-sm text-destructive\">{errorMessage}</span>\n        )}\n      </div>\n    );\n  },\n);\n\nOTPInput.displayName = \"OTPInput\";\n\nexport default OTPInput;\nexport { OTPInput };\n"],"mappings":"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"}
+{"version":3,"file":"otp-input--_itTXaL.mjs","names":[],"sources":["../../src/components/forms/otp-input/OTPInput.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useState,\n  useRef,\n  useCallback,\n  useEffect,\n  type KeyboardEvent,\n  type ClipboardEvent,\n  type ChangeEvent,\n} from \"react\";\n\nexport type OTPInputSize = \"sm\" | \"md\" | \"lg\";\nexport type OTPInputVariant = \"outlined\" | \"filled\" | \"underlined\";\n\nexport interface OTPInputProps {\n  /** Number of OTP digits */\n  length?: number;\n  /** Callback when OTP value changes */\n  onChange?: (value: string) => void;\n  /** Callback when all digits are filled */\n  onComplete?: (value: string) => void;\n  /** The current value (controlled) */\n  value?: string;\n  /** Default value (uncontrolled) */\n  defaultValue?: string;\n  /** Size of the input boxes */\n  size?: OTPInputSize;\n  /** Visual variant */\n  variant?: OTPInputVariant;\n  /** Whether the input is disabled */\n  disabled?: boolean;\n  /** Whether there's an error */\n  error?: boolean;\n  /** Error message to display */\n  errorMessage?: string;\n  /** Placeholder character */\n  placeholder?: string;\n  /** Whether to mask the input (like password) */\n  mask?: boolean;\n  /** Whether to auto-focus the first input */\n  autoFocus?: boolean;\n  /** Input type - number only or alphanumeric */\n  type?: \"number\" | \"text\";\n  /** Custom className for the container */\n  className?: string;\n  /** Custom className for each input box */\n  inputClassName?: string;\n  /** Separator to show between groups of digits */\n  separator?: React.ReactNode;\n  /** Position(s) to show separator (e.g., [3] means after 3rd digit) */\n  separatorPositions?: number[];\n  /** Accessible label */\n  \"aria-label\"?: string;\n}\n\nconst sizeStyles: Record<OTPInputSize, string> = {\n  sm: \"w-9 h-10 text-base\",\n  md: \"w-12 h-14 text-xl\",\n  lg: \"w-14 h-16 text-2xl\",\n};\n\nconst variantStyles: Record<\n  OTPInputVariant,\n  { base: string; focus: string; error: string }\n> = {\n  outlined: {\n    base: \"border border-ds-border-field bg-ds-surface-1 rounded-lg text-ds-1\",\n    focus: \"focus:border-ds-border-accent focus:ring-2 focus:ring-ds-accent\",\n    error: \"border-destructive\",\n  },\n  filled: {\n    base: \"border border-transparent bg-ds-accent-subtle rounded-lg text-ds-1\",\n    focus:\n      \"focus:border-ds-border-accent focus:bg-ds-surface-1 focus:ring-2 focus:ring-ds-accent\",\n    error: \"bg-danger-subtle border-danger-border\",\n  },\n  underlined: {\n    base: \"border-b-2 border-ds-border-1 bg-transparent rounded-none text-ds-1\",\n    focus: \"focus:border-ds-border-accent\",\n    error: \"border-destructive\",\n  },\n};\n\nconst OTPInput = forwardRef<HTMLDivElement, OTPInputProps>(\n  (\n    {\n      length = 6,\n      onChange,\n      onComplete,\n      value: controlledValue,\n      defaultValue = \"\",\n      size = \"md\",\n      variant = \"outlined\",\n      disabled = false,\n      error = false,\n      errorMessage,\n      placeholder = \"\",\n      mask = false,\n      autoFocus = false,\n      type = \"number\",\n      className = \"\",\n      inputClassName = \"\",\n      separator = <span className=\"text-ds-3 text-2xl mx-2\">—</span>,\n      separatorPositions = [],\n      \"aria-label\": ariaLabel = \"One-time password\",\n    },\n    ref,\n  ) => {\n    const [values, setValues] = useState<string[]>(() => {\n      const initial = controlledValue ?? defaultValue;\n      return initial\n        .split(\"\")\n        .slice(0, length)\n        .concat(Array(length).fill(\"\"))\n        .slice(0, length);\n    });\n\n    const inputRefs = useRef<(HTMLInputElement | null)[]>([]);\n\n    // Sync with controlled value\n    useEffect(() => {\n      if (controlledValue !== undefined) {\n        const newValues = controlledValue\n          .split(\"\")\n          .slice(0, length)\n          .concat(Array(length).fill(\"\"))\n          .slice(0, length);\n        setValues(newValues);\n      }\n    }, [controlledValue, length]);\n\n    // Auto-focus first input\n    useEffect(() => {\n      if (autoFocus && inputRefs.current[0]) {\n        inputRefs.current[0].focus();\n      }\n    }, [autoFocus]);\n\n    const focusInput = useCallback(\n      (index: number) => {\n        if (index >= 0 && index < length && inputRefs.current[index]) {\n          inputRefs.current[index]?.focus();\n          inputRefs.current[index]?.select();\n        }\n      },\n      [length],\n    );\n\n    const handleChange = useCallback(\n      (index: number, e: ChangeEvent<HTMLInputElement>) => {\n        const inputValue = e.target.value;\n        const char = inputValue.slice(-1);\n\n        // Validate input based on type\n        if (type === \"number\" && char && !/^\\d$/.test(char)) {\n          return;\n        }\n\n        const newValues = [...values];\n        newValues[index] = char;\n        setValues(newValues);\n\n        const otpValue = newValues.join(\"\");\n        onChange?.(otpValue);\n\n        // Move to next input if value entered\n        if (char && index < length - 1) {\n          focusInput(index + 1);\n        }\n\n        // Check if complete\n        if (newValues.every((v) => v !== \"\") && newValues.length === length) {\n          onComplete?.(otpValue);\n        }\n      },\n      [values, onChange, onComplete, length, type, focusInput],\n    );\n\n    const handleKeyDown = useCallback(\n      (index: number, e: KeyboardEvent<HTMLInputElement>) => {\n        switch (e.key) {\n          case \"Backspace\":\n            e.preventDefault();\n            const newValues = [...values];\n            if (values[index]) {\n              // Clear current value\n              newValues[index] = \"\";\n              setValues(newValues);\n              onChange?.(newValues.join(\"\"));\n            } else if (index > 0) {\n              // Move to previous and clear\n              newValues[index - 1] = \"\";\n              setValues(newValues);\n              onChange?.(newValues.join(\"\"));\n              focusInput(index - 1);\n            }\n            break;\n          case \"ArrowLeft\":\n            e.preventDefault();\n            focusInput(index - 1);\n            break;\n          case \"ArrowRight\":\n            e.preventDefault();\n            focusInput(index + 1);\n            break;\n          case \"Delete\":\n            e.preventDefault();\n            const deleteValues = [...values];\n            deleteValues[index] = \"\";\n            setValues(deleteValues);\n            onChange?.(deleteValues.join(\"\"));\n            break;\n        }\n      },\n      [values, onChange, focusInput],\n    );\n\n    const handlePaste = useCallback(\n      (e: ClipboardEvent<HTMLInputElement>) => {\n        e.preventDefault();\n        const pastedData = e.clipboardData.getData(\"text\").slice(0, length);\n\n        // Validate pasted content\n        if (type === \"number\" && !/^\\d*$/.test(pastedData)) {\n          return;\n        }\n\n        const newValues = pastedData\n          .split(\"\")\n          .slice(0, length)\n          .concat(Array(length).fill(\"\"))\n          .slice(0, length);\n\n        setValues(newValues);\n        const otpValue = newValues.join(\"\");\n        onChange?.(otpValue);\n\n        // Focus last filled input or last input\n        const lastFilledIndex = newValues.findLastIndex((v) => v !== \"\");\n        focusInput(Math.min(lastFilledIndex + 1, length - 1));\n\n        // Check if complete\n        if (newValues.every((v) => v !== \"\") && pastedData.length >= length) {\n          onComplete?.(otpValue);\n        }\n      },\n      [length, type, onChange, onComplete, focusInput],\n    );\n\n    const handleFocus = useCallback((e: React.FocusEvent<HTMLInputElement>) => {\n      e.target.select();\n    }, []);\n\n    const renderInputs = () => {\n      const inputs: React.ReactNode[] = [];\n\n      for (let i = 0; i < length; i++) {\n        // Add separator if needed\n        if (separatorPositions.includes(i) && i > 0) {\n          inputs.push(\n            <div key={`separator-${i}`} className=\"flex items-center\">\n              {separator}\n            </div>,\n          );\n        }\n\n        inputs.push(\n          <input\n            key={i}\n            ref={(el) => {\n              inputRefs.current[i] = el;\n              // React 19: Return cleanup function\n              return () => {\n                inputRefs.current[i] = null;\n              };\n            }}\n            type={mask ? \"password\" : \"text\"}\n            inputMode={type === \"number\" ? \"numeric\" : \"text\"}\n            pattern={type === \"number\" ? \"\\\\d*\" : undefined}\n            maxLength={1}\n            value={values[i] || \"\"}\n            placeholder={placeholder}\n            disabled={disabled}\n            onChange={(e) => handleChange(i, e)}\n            onKeyDown={(e) => handleKeyDown(i, e)}\n            onPaste={handlePaste}\n            onFocus={handleFocus}\n            aria-label={`${ariaLabel} digit ${i + 1}`}\n            className={`\n              text-center font-semibold outline-none transition-all\n              placeholder:text-ds-2\n              ${sizeStyles[size]}\n              ${variantStyles[variant].base}\n              ${!error ? variantStyles[variant].focus : \"\"}\n              ${error ? variantStyles[variant].error : \"\"}\n              ${disabled ? \"opacity-50 cursor-not-allowed bg-ds-surface-1\" : \"\"}\n              ${inputClassName}\n            `}\n          />,\n        );\n      }\n\n      return inputs;\n    };\n\n    return (\n      <div ref={ref} className={`flex flex-col gap-2 ${className}`}>\n        <div\n          className=\"flex items-center gap-2\"\n          role=\"group\"\n          aria-label={ariaLabel}\n        >\n          {renderInputs()}\n        </div>\n        {error && errorMessage && (\n          <span className=\"text-sm text-destructive\">{errorMessage}</span>\n        )}\n      </div>\n    );\n  },\n);\n\nOTPInput.displayName = \"OTPInput\";\n\nexport default OTPInput;\nexport { OTPInput };\n"],"mappings":"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"}

package/dist/chunks/{otp-input-B5-tuc0q.cjs → otp-input-Dgw_47Z7.cjs}

@@ -1,4 +1,3 @@
-require("./chunk-B_GkZjkl.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/forms/otp-input/OTPInput.tsx
@@ -183,4 +182,4 @@ Object.defineProperty(exports, "OTPInput", {
 	}
 });
 
-//# sourceMappingURL=otp-input-B5-tuc0q.cjs.map
+//# sourceMappingURL=otp-input-Dgw_47Z7.cjs.map

package/dist/chunks/{otp-input-B5-tuc0q.cjs.map → otp-input-Dgw_47Z7.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"otp-input-B5-tuc0q.cjs","names":[],"sources":["../../src/components/forms/otp-input/OTPInput.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useState,\n  useRef,\n  useCallback,\n  useEffect,\n  type KeyboardEvent,\n  type ClipboardEvent,\n  type ChangeEvent,\n} from \"react\";\n\nexport type OTPInputSize = \"sm\" | \"md\" | \"lg\";\nexport type OTPInputVariant = \"outlined\" | \"filled\" | \"underlined\";\n\nexport interface OTPInputProps {\n  /** Number of OTP digits */\n  length?: number;\n  /** Callback when OTP value changes */\n  onChange?: (value: string) => void;\n  /** Callback when all digits are filled */\n  onComplete?: (value: string) => void;\n  /** The current value (controlled) */\n  value?: string;\n  /** Default value (uncontrolled) */\n  defaultValue?: string;\n  /** Size of the input boxes */\n  size?: OTPInputSize;\n  /** Visual variant */\n  variant?: OTPInputVariant;\n  /** Whether the input is disabled */\n  disabled?: boolean;\n  /** Whether there's an error */\n  error?: boolean;\n  /** Error message to display */\n  errorMessage?: string;\n  /** Placeholder character */\n  placeholder?: string;\n  /** Whether to mask the input (like password) */\n  mask?: boolean;\n  /** Whether to auto-focus the first input */\n  autoFocus?: boolean;\n  /** Input type - number only or alphanumeric */\n  type?: \"number\" | \"text\";\n  /** Custom className for the container */\n  className?: string;\n  /** Custom className for each input box */\n  inputClassName?: string;\n  /** Separator to show between groups of digits */\n  separator?: React.ReactNode;\n  /** Position(s) to show separator (e.g., [3] means after 3rd digit) */\n  separatorPositions?: number[];\n  /** Accessible label */\n  \"aria-label\"?: string;\n}\n\nconst sizeStyles: Record<OTPInputSize, string> = {\n  sm: \"w-9 h-10 text-base\",\n  md: \"w-12 h-14 text-xl\",\n  lg: \"w-14 h-16 text-2xl\",\n};\n\nconst variantStyles: Record<\n  OTPInputVariant,\n  { base: string; focus: string; error: string }\n> = {\n  outlined: {\n    base: \"border border-ds-border-field bg-ds-surface-1 rounded-lg text-ds-1\",\n    focus: \"focus:border-ds-border-accent focus:ring-2 focus:ring-ds-accent\",\n    error: \"border-destructive\",\n  },\n  filled: {\n    base: \"border border-transparent bg-ds-accent-subtle rounded-lg text-ds-1\",\n    focus:\n      \"focus:border-ds-border-accent focus:bg-ds-surface-1 focus:ring-2 focus:ring-ds-accent\",\n    error: \"bg-danger-subtle border-danger-border\",\n  },\n  underlined: {\n    base: \"border-b-2 border-ds-border-1 bg-transparent rounded-none text-ds-1\",\n    focus: \"focus:border-ds-border-accent\",\n    error: \"border-destructive\",\n  },\n};\n\nconst OTPInput = forwardRef<HTMLDivElement, OTPInputProps>(\n  (\n    {\n      length = 6,\n      onChange,\n      onComplete,\n      value: controlledValue,\n      defaultValue = \"\",\n      size = \"md\",\n      variant = \"outlined\",\n      disabled = false,\n      error = false,\n      errorMessage,\n      placeholder = \"\",\n      mask = false,\n      autoFocus = false,\n      type = \"number\",\n      className = \"\",\n      inputClassName = \"\",\n      separator = <span className=\"text-ds-3 text-2xl mx-2\">—</span>,\n      separatorPositions = [],\n      \"aria-label\": ariaLabel = \"One-time password\",\n    },\n    ref,\n  ) => {\n    const [values, setValues] = useState<string[]>(() => {\n      const initial = controlledValue ?? defaultValue;\n      return initial\n        .split(\"\")\n        .slice(0, length)\n        .concat(Array(length).fill(\"\"))\n        .slice(0, length);\n    });\n\n    const inputRefs = useRef<(HTMLInputElement | null)[]>([]);\n\n    // Sync with controlled value\n    useEffect(() => {\n      if (controlledValue !== undefined) {\n        const newValues = controlledValue\n          .split(\"\")\n          .slice(0, length)\n          .concat(Array(length).fill(\"\"))\n          .slice(0, length);\n        setValues(newValues);\n      }\n    }, [controlledValue, length]);\n\n    // Auto-focus first input\n    useEffect(() => {\n      if (autoFocus && inputRefs.current[0]) {\n        inputRefs.current[0].focus();\n      }\n    }, [autoFocus]);\n\n    const focusInput = useCallback(\n      (index: number) => {\n        if (index >= 0 && index < length && inputRefs.current[index]) {\n          inputRefs.current[index]?.focus();\n          inputRefs.current[index]?.select();\n        }\n      },\n      [length],\n    );\n\n    const handleChange = useCallback(\n      (index: number, e: ChangeEvent<HTMLInputElement>) => {\n        const inputValue = e.target.value;\n        const char = inputValue.slice(-1);\n\n        // Validate input based on type\n        if (type === \"number\" && char && !/^\\d$/.test(char)) {\n          return;\n        }\n\n        const newValues = [...values];\n        newValues[index] = char;\n        setValues(newValues);\n\n        const otpValue = newValues.join(\"\");\n        onChange?.(otpValue);\n\n        // Move to next input if value entered\n        if (char && index < length - 1) {\n          focusInput(index + 1);\n        }\n\n        // Check if complete\n        if (newValues.every((v) => v !== \"\") && newValues.length === length) {\n          onComplete?.(otpValue);\n        }\n      },\n      [values, onChange, onComplete, length, type, focusInput],\n    );\n\n    const handleKeyDown = useCallback(\n      (index: number, e: KeyboardEvent<HTMLInputElement>) => {\n        switch (e.key) {\n          case \"Backspace\":\n            e.preventDefault();\n            const newValues = [...values];\n            if (values[index]) {\n              // Clear current value\n              newValues[index] = \"\";\n              setValues(newValues);\n              onChange?.(newValues.join(\"\"));\n            } else if (index > 0) {\n              // Move to previous and clear\n              newValues[index - 1] = \"\";\n              setValues(newValues);\n              onChange?.(newValues.join(\"\"));\n              focusInput(index - 1);\n            }\n            break;\n          case \"ArrowLeft\":\n            e.preventDefault();\n            focusInput(index - 1);\n            break;\n          case \"ArrowRight\":\n            e.preventDefault();\n            focusInput(index + 1);\n            break;\n          case \"Delete\":\n            e.preventDefault();\n            const deleteValues = [...values];\n            deleteValues[index] = \"\";\n            setValues(deleteValues);\n            onChange?.(deleteValues.join(\"\"));\n            break;\n        }\n      },\n      [values, onChange, focusInput],\n    );\n\n    const handlePaste = useCallback(\n      (e: ClipboardEvent<HTMLInputElement>) => {\n        e.preventDefault();\n        const pastedData = e.clipboardData.getData(\"text\").slice(0, length);\n\n        // Validate pasted content\n        if (type === \"number\" && !/^\\d*$/.test(pastedData)) {\n          return;\n        }\n\n        const newValues = pastedData\n          .split(\"\")\n          .slice(0, length)\n          .concat(Array(length).fill(\"\"))\n          .slice(0, length);\n\n        setValues(newValues);\n        const otpValue = newValues.join(\"\");\n        onChange?.(otpValue);\n\n        // Focus last filled input or last input\n        const lastFilledIndex = newValues.findLastIndex((v) => v !== \"\");\n        focusInput(Math.min(lastFilledIndex + 1, length - 1));\n\n        // Check if complete\n        if (newValues.every((v) => v !== \"\") && pastedData.length >= length) {\n          onComplete?.(otpValue);\n        }\n      },\n      [length, type, onChange, onComplete, focusInput],\n    );\n\n    const handleFocus = useCallback((e: React.FocusEvent<HTMLInputElement>) => {\n      e.target.select();\n    }, []);\n\n    const renderInputs = () => {\n      const inputs: React.ReactNode[] = [];\n\n      for (let i = 0; i < length; i++) {\n        // Add separator if needed\n        if (separatorPositions.includes(i) && i > 0) {\n          inputs.push(\n            <div key={`separator-${i}`} className=\"flex items-center\">\n              {separator}\n            </div>,\n          );\n        }\n\n        inputs.push(\n          <input\n            key={i}\n            ref={(el) => {\n              inputRefs.current[i] = el;\n              // React 19: Return cleanup function\n              return () => {\n                inputRefs.current[i] = null;\n              };\n            }}\n            type={mask ? \"password\" : \"text\"}\n            inputMode={type === \"number\" ? \"numeric\" : \"text\"}\n            pattern={type === \"number\" ? \"\\\\d*\" : undefined}\n            maxLength={1}\n            value={values[i] || \"\"}\n            placeholder={placeholder}\n            disabled={disabled}\n            onChange={(e) => handleChange(i, e)}\n            onKeyDown={(e) => handleKeyDown(i, e)}\n            onPaste={handlePaste}\n            onFocus={handleFocus}\n            aria-label={`${ariaLabel} digit ${i + 1}`}\n            className={`\n              text-center font-semibold outline-none transition-all\n              placeholder:text-ds-2\n              ${sizeStyles[size]}\n              ${variantStyles[variant].base}\n              ${!error ? variantStyles[variant].focus : \"\"}\n              ${error ? variantStyles[variant].error : \"\"}\n              ${disabled ? \"opacity-50 cursor-not-allowed bg-ds-surface-1\" : \"\"}\n              ${inputClassName}\n            `}\n          />,\n        );\n      }\n\n      return inputs;\n    };\n\n    return (\n      <div ref={ref} className={`flex flex-col gap-2 ${className}`}>\n        <div\n          className=\"flex items-center gap-2\"\n          role=\"group\"\n          aria-label={ariaLabel}\n        >\n          {renderInputs()}\n        </div>\n        {error && errorMessage && (\n          <span className=\"text-sm text-destructive\">{errorMessage}</span>\n        )}\n      </div>\n    );\n  },\n);\n\nOTPInput.displayName = \"OTPInput\";\n\nexport default OTPInput;\nexport { OTPInput };\n"],"mappings":"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"}
+{"version":3,"file":"otp-input-Dgw_47Z7.cjs","names":[],"sources":["../../src/components/forms/otp-input/OTPInput.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useState,\n  useRef,\n  useCallback,\n  useEffect,\n  type KeyboardEvent,\n  type ClipboardEvent,\n  type ChangeEvent,\n} from \"react\";\n\nexport type OTPInputSize = \"sm\" | \"md\" | \"lg\";\nexport type OTPInputVariant = \"outlined\" | \"filled\" | \"underlined\";\n\nexport interface OTPInputProps {\n  /** Number of OTP digits */\n  length?: number;\n  /** Callback when OTP value changes */\n  onChange?: (value: string) => void;\n  /** Callback when all digits are filled */\n  onComplete?: (value: string) => void;\n  /** The current value (controlled) */\n  value?: string;\n  /** Default value (uncontrolled) */\n  defaultValue?: string;\n  /** Size of the input boxes */\n  size?: OTPInputSize;\n  /** Visual variant */\n  variant?: OTPInputVariant;\n  /** Whether the input is disabled */\n  disabled?: boolean;\n  /** Whether there's an error */\n  error?: boolean;\n  /** Error message to display */\n  errorMessage?: string;\n  /** Placeholder character */\n  placeholder?: string;\n  /** Whether to mask the input (like password) */\n  mask?: boolean;\n  /** Whether to auto-focus the first input */\n  autoFocus?: boolean;\n  /** Input type - number only or alphanumeric */\n  type?: \"number\" | \"text\";\n  /** Custom className for the container */\n  className?: string;\n  /** Custom className for each input box */\n  inputClassName?: string;\n  /** Separator to show between groups of digits */\n  separator?: React.ReactNode;\n  /** Position(s) to show separator (e.g., [3] means after 3rd digit) */\n  separatorPositions?: number[];\n  /** Accessible label */\n  \"aria-label\"?: string;\n}\n\nconst sizeStyles: Record<OTPInputSize, string> = {\n  sm: \"w-9 h-10 text-base\",\n  md: \"w-12 h-14 text-xl\",\n  lg: \"w-14 h-16 text-2xl\",\n};\n\nconst variantStyles: Record<\n  OTPInputVariant,\n  { base: string; focus: string; error: string }\n> = {\n  outlined: {\n    base: \"border border-ds-border-field bg-ds-surface-1 rounded-lg text-ds-1\",\n    focus: \"focus:border-ds-border-accent focus:ring-2 focus:ring-ds-accent\",\n    error: \"border-destructive\",\n  },\n  filled: {\n    base: \"border border-transparent bg-ds-accent-subtle rounded-lg text-ds-1\",\n    focus:\n      \"focus:border-ds-border-accent focus:bg-ds-surface-1 focus:ring-2 focus:ring-ds-accent\",\n    error: \"bg-danger-subtle border-danger-border\",\n  },\n  underlined: {\n    base: \"border-b-2 border-ds-border-1 bg-transparent rounded-none text-ds-1\",\n    focus: \"focus:border-ds-border-accent\",\n    error: \"border-destructive\",\n  },\n};\n\nconst OTPInput = forwardRef<HTMLDivElement, OTPInputProps>(\n  (\n    {\n      length = 6,\n      onChange,\n      onComplete,\n      value: controlledValue,\n      defaultValue = \"\",\n      size = \"md\",\n      variant = \"outlined\",\n      disabled = false,\n      error = false,\n      errorMessage,\n      placeholder = \"\",\n      mask = false,\n      autoFocus = false,\n      type = \"number\",\n      className = \"\",\n      inputClassName = \"\",\n      separator = <span className=\"text-ds-3 text-2xl mx-2\">—</span>,\n      separatorPositions = [],\n      \"aria-label\": ariaLabel = \"One-time password\",\n    },\n    ref,\n  ) => {\n    const [values, setValues] = useState<string[]>(() => {\n      const initial = controlledValue ?? defaultValue;\n      return initial\n        .split(\"\")\n        .slice(0, length)\n        .concat(Array(length).fill(\"\"))\n        .slice(0, length);\n    });\n\n    const inputRefs = useRef<(HTMLInputElement | null)[]>([]);\n\n    // Sync with controlled value\n    useEffect(() => {\n      if (controlledValue !== undefined) {\n        const newValues = controlledValue\n          .split(\"\")\n          .slice(0, length)\n          .concat(Array(length).fill(\"\"))\n          .slice(0, length);\n        setValues(newValues);\n      }\n    }, [controlledValue, length]);\n\n    // Auto-focus first input\n    useEffect(() => {\n      if (autoFocus && inputRefs.current[0]) {\n        inputRefs.current[0].focus();\n      }\n    }, [autoFocus]);\n\n    const focusInput = useCallback(\n      (index: number) => {\n        if (index >= 0 && index < length && inputRefs.current[index]) {\n          inputRefs.current[index]?.focus();\n          inputRefs.current[index]?.select();\n        }\n      },\n      [length],\n    );\n\n    const handleChange = useCallback(\n      (index: number, e: ChangeEvent<HTMLInputElement>) => {\n        const inputValue = e.target.value;\n        const char = inputValue.slice(-1);\n\n        // Validate input based on type\n        if (type === \"number\" && char && !/^\\d$/.test(char)) {\n          return;\n        }\n\n        const newValues = [...values];\n        newValues[index] = char;\n        setValues(newValues);\n\n        const otpValue = newValues.join(\"\");\n        onChange?.(otpValue);\n\n        // Move to next input if value entered\n        if (char && index < length - 1) {\n          focusInput(index + 1);\n        }\n\n        // Check if complete\n        if (newValues.every((v) => v !== \"\") && newValues.length === length) {\n          onComplete?.(otpValue);\n        }\n      },\n      [values, onChange, onComplete, length, type, focusInput],\n    );\n\n    const handleKeyDown = useCallback(\n      (index: number, e: KeyboardEvent<HTMLInputElement>) => {\n        switch (e.key) {\n          case \"Backspace\":\n            e.preventDefault();\n            const newValues = [...values];\n            if (values[index]) {\n              // Clear current value\n              newValues[index] = \"\";\n              setValues(newValues);\n              onChange?.(newValues.join(\"\"));\n            } else if (index > 0) {\n              // Move to previous and clear\n              newValues[index - 1] = \"\";\n              setValues(newValues);\n              onChange?.(newValues.join(\"\"));\n              focusInput(index - 1);\n            }\n            break;\n          case \"ArrowLeft\":\n            e.preventDefault();\n            focusInput(index - 1);\n            break;\n          case \"ArrowRight\":\n            e.preventDefault();\n            focusInput(index + 1);\n            break;\n          case \"Delete\":\n            e.preventDefault();\n            const deleteValues = [...values];\n            deleteValues[index] = \"\";\n            setValues(deleteValues);\n            onChange?.(deleteValues.join(\"\"));\n            break;\n        }\n      },\n      [values, onChange, focusInput],\n    );\n\n    const handlePaste = useCallback(\n      (e: ClipboardEvent<HTMLInputElement>) => {\n        e.preventDefault();\n        const pastedData = e.clipboardData.getData(\"text\").slice(0, length);\n\n        // Validate pasted content\n        if (type === \"number\" && !/^\\d*$/.test(pastedData)) {\n          return;\n        }\n\n        const newValues = pastedData\n          .split(\"\")\n          .slice(0, length)\n          .concat(Array(length).fill(\"\"))\n          .slice(0, length);\n\n        setValues(newValues);\n        const otpValue = newValues.join(\"\");\n        onChange?.(otpValue);\n\n        // Focus last filled input or last input\n        const lastFilledIndex = newValues.findLastIndex((v) => v !== \"\");\n        focusInput(Math.min(lastFilledIndex + 1, length - 1));\n\n        // Check if complete\n        if (newValues.every((v) => v !== \"\") && pastedData.length >= length) {\n          onComplete?.(otpValue);\n        }\n      },\n      [length, type, onChange, onComplete, focusInput],\n    );\n\n    const handleFocus = useCallback((e: React.FocusEvent<HTMLInputElement>) => {\n      e.target.select();\n    }, []);\n\n    const renderInputs = () => {\n      const inputs: React.ReactNode[] = [];\n\n      for (let i = 0; i < length; i++) {\n        // Add separator if needed\n        if (separatorPositions.includes(i) && i > 0) {\n          inputs.push(\n            <div key={`separator-${i}`} className=\"flex items-center\">\n              {separator}\n            </div>,\n          );\n        }\n\n        inputs.push(\n          <input\n            key={i}\n            ref={(el) => {\n              inputRefs.current[i] = el;\n              // React 19: Return cleanup function\n              return () => {\n                inputRefs.current[i] = null;\n              };\n            }}\n            type={mask ? \"password\" : \"text\"}\n            inputMode={type === \"number\" ? \"numeric\" : \"text\"}\n            pattern={type === \"number\" ? \"\\\\d*\" : undefined}\n            maxLength={1}\n            value={values[i] || \"\"}\n            placeholder={placeholder}\n            disabled={disabled}\n            onChange={(e) => handleChange(i, e)}\n            onKeyDown={(e) => handleKeyDown(i, e)}\n            onPaste={handlePaste}\n            onFocus={handleFocus}\n            aria-label={`${ariaLabel} digit ${i + 1}`}\n            className={`\n              text-center font-semibold outline-none transition-all\n              placeholder:text-ds-2\n              ${sizeStyles[size]}\n              ${variantStyles[variant].base}\n              ${!error ? variantStyles[variant].focus : \"\"}\n              ${error ? variantStyles[variant].error : \"\"}\n              ${disabled ? \"opacity-50 cursor-not-allowed bg-ds-surface-1\" : \"\"}\n              ${inputClassName}\n            `}\n          />,\n        );\n      }\n\n      return inputs;\n    };\n\n    return (\n      <div ref={ref} className={`flex flex-col gap-2 ${className}`}>\n        <div\n          className=\"flex items-center gap-2\"\n          role=\"group\"\n          aria-label={ariaLabel}\n        >\n          {renderInputs()}\n        </div>\n        {error && errorMessage && (\n          <span className=\"text-sm text-destructive\">{errorMessage}</span>\n        )}\n      </div>\n    );\n  },\n);\n\nOTPInput.displayName = \"OTPInput\";\n\nexport default OTPInput;\nexport { OTPInput };\n"],"mappings":"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"}

package/dist/chunks/{overlay-DzE_GyYf.cjs → overlay-15EzdrIu.cjs}

@@ -1,4 +1,3 @@
-require("./chunk-B_GkZjkl.cjs");
 let react = require("react");
 //#region src/components/shared/overlay.ts
 var focusableSelectors = [
@@ -57,4 +56,4 @@ Object.defineProperty(exports, "useOverlayEffects", {
 	}
 });
 
-//# sourceMappingURL=overlay-DzE_GyYf.cjs.map
+//# sourceMappingURL=overlay-15EzdrIu.cjs.map

package/dist/chunks/{overlay-DzE_GyYf.cjs.map → overlay-15EzdrIu.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"overlay-DzE_GyYf.cjs","names":[],"sources":["../../src/components/shared/overlay.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport type { RefObject } from \"react\";\n\nconst focusableSelectors = [\n  \"a[href]\",\n  \"button:not([disabled])\",\n  \"textarea:not([disabled])\",\n  \"input:not([disabled])\",\n  \"select:not([disabled])\",\n  '[tabindex]:not([tabindex=\"-1\"])',\n];\n\nconst scheduleMicrotask = (callback: () => void) => {\n  if (typeof queueMicrotask === \"function\") {\n    queueMicrotask(callback);\n    return;\n  }\n  Promise.resolve()\n    .then(callback)\n    .catch(() => {\n      callback();\n    });\n};\n\nexport const useBodyScrollLock = (active: boolean) => {\n  useEffect(() => {\n    if (!active || typeof window === \"undefined\") return;\n    const { overflow } = document.body.style;\n    document.body.style.overflow = \"hidden\";\n    return () => {\n      document.body.style.overflow = overflow;\n    };\n  }, [active]);\n};\n\nexport const useFocusTrap = (\n  containerRef: RefObject<HTMLElement | null>,\n  active: boolean,\n) => {\n  useEffect(() => {\n    if (!active || typeof window === \"undefined\") return;\n    const container = containerRef.current;\n    if (!container) return;\n\n    const getFocusable = () =>\n      Array.from(\n        container.querySelectorAll<HTMLElement>(focusableSelectors.join(\",\")),\n      ).filter(\n        (el) => !el.hasAttribute(\"disabled\") && !el.getAttribute(\"aria-hidden\"),\n      );\n\n    const focusable = getFocusable();\n    const first = focusable[0];\n    const last = focusable[focusable.length - 1];\n    first?.focus();\n\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key !== \"Tab\" || focusable.length === 0) return;\n      if (event.shiftKey) {\n        if (document.activeElement === first) {\n          event.preventDefault();\n          (last || first)?.focus();\n        }\n      } else if (document.activeElement === last) {\n        event.preventDefault();\n        (first || last)?.focus();\n      }\n    };\n\n    container.addEventListener(\"keydown\", handleKeyDown);\n    return () => container.removeEventListener(\"keydown\", handleKeyDown);\n  }, [containerRef, active]);\n};\n\nexport const useOverlayEffects = (\n  containerRef: RefObject<HTMLElement | null>,\n  active: boolean,\n) => {\n  useBodyScrollLock(active);\n  useFocusTrap(containerRef, active);\n};\n\nexport const useOverlayTransition = (open: boolean, duration = 200) => {\n  const [closing, setClosing] = useState(false);\n\n  useEffect(() => {\n    if (open) {\n      return undefined;\n    }\n\n    scheduleMicrotask(() => setClosing(true));\n    const timer = setTimeout(() => setClosing(false), duration);\n\n    return () => {\n      clearTimeout(timer);\n      scheduleMicrotask(() => setClosing(false));\n    };\n  }, [open, duration]);\n\n  const shouldRender = open || closing;\n  const transitionState: \"open\" | \"closing\" | \"closed\" = open\n    ? \"open\"\n    : closing\n      ? \"closing\"\n      : \"closed\";\n\n  return { shouldRender, transitionState };\n};\n"],"mappings":";;;AAGA,IAAM,qBAAqB;CACzB;CACA;CACA;CACA;CACA;CACA;CACD;AAcD,IAAa,qBAAqB,WAAoB;AACpD,EAAA,GAAA,MAAA,iBAAgB;AACd,MAAI,CAAC,UAAU,OAAO,WAAW,YAAa;EAC9C,MAAM,EAAE,aAAa,SAAS,KAAK;AACnC,WAAS,KAAK,MAAM,WAAW;AAC/B,eAAa;AACX,YAAS,KAAK,MAAM,WAAW;;IAEhC,CAAC,OAAO,CAAC;;AAGd,IAAa,gBACX,cACA,WACG;AACH,EAAA,GAAA,MAAA,iBAAgB;AACd,MAAI,CAAC,UAAU,OAAO,WAAW,YAAa;EAC9C,MAAM,YAAY,aAAa;AAC/B,MAAI,CAAC,UAAW;EAEhB,MAAM,qBACJ,MAAM,KACJ,UAAU,iBAA8B,mBAAmB,KAAK,IAAI,CAAC,CACtE,CAAC,QACC,OAAO,CAAC,GAAG,aAAa,WAAW,IAAI,CAAC,GAAG,aAAa,cAAc,CACxE;EAEH,MAAM,YAAY,cAAc;EAChC,MAAM,QAAQ,UAAU;EACxB,MAAM,OAAO,UAAU,UAAU,SAAS;AAC1C,SAAO,OAAO;EAEd,MAAM,iBAAiB,UAAyB;AAC9C,OAAI,MAAM,QAAQ,SAAS,UAAU,WAAW,EAAG;AACnD,OAAI,MAAM;QACJ,SAAS,kBAAkB,OAAO;AACpC,WAAM,gBAAgB;AACtB,MAAC,QAAQ,QAAQ,OAAO;;cAEjB,SAAS,kBAAkB,MAAM;AAC1C,UAAM,gBAAgB;AACtB,KAAC,SAAS,OAAO,OAAO;;;AAI5B,YAAU,iBAAiB,WAAW,cAAc;AACpD,eAAa,UAAU,oBAAoB,WAAW,cAAc;IACnE,CAAC,cAAc,OAAO,CAAC;;AAG5B,IAAa,qBACX,cACA,WACG;AACH,mBAAkB,OAAO;AACzB,cAAa,cAAc,OAAO"}
+{"version":3,"file":"overlay-15EzdrIu.cjs","names":[],"sources":["../../src/components/shared/overlay.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport type { RefObject } from \"react\";\n\nconst focusableSelectors = [\n  \"a[href]\",\n  \"button:not([disabled])\",\n  \"textarea:not([disabled])\",\n  \"input:not([disabled])\",\n  \"select:not([disabled])\",\n  '[tabindex]:not([tabindex=\"-1\"])',\n];\n\nconst scheduleMicrotask = (callback: () => void) => {\n  if (typeof queueMicrotask === \"function\") {\n    queueMicrotask(callback);\n    return;\n  }\n  Promise.resolve()\n    .then(callback)\n    .catch(() => {\n      callback();\n    });\n};\n\nexport const useBodyScrollLock = (active: boolean) => {\n  useEffect(() => {\n    if (!active || typeof window === \"undefined\") return;\n    const { overflow } = document.body.style;\n    document.body.style.overflow = \"hidden\";\n    return () => {\n      document.body.style.overflow = overflow;\n    };\n  }, [active]);\n};\n\nexport const useFocusTrap = (\n  containerRef: RefObject<HTMLElement | null>,\n  active: boolean,\n) => {\n  useEffect(() => {\n    if (!active || typeof window === \"undefined\") return;\n    const container = containerRef.current;\n    if (!container) return;\n\n    const getFocusable = () =>\n      Array.from(\n        container.querySelectorAll<HTMLElement>(focusableSelectors.join(\",\")),\n      ).filter(\n        (el) => !el.hasAttribute(\"disabled\") && !el.getAttribute(\"aria-hidden\"),\n      );\n\n    const focusable = getFocusable();\n    const first = focusable[0];\n    const last = focusable[focusable.length - 1];\n    first?.focus();\n\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key !== \"Tab\" || focusable.length === 0) return;\n      if (event.shiftKey) {\n        if (document.activeElement === first) {\n          event.preventDefault();\n          (last || first)?.focus();\n        }\n      } else if (document.activeElement === last) {\n        event.preventDefault();\n        (first || last)?.focus();\n      }\n    };\n\n    container.addEventListener(\"keydown\", handleKeyDown);\n    return () => container.removeEventListener(\"keydown\", handleKeyDown);\n  }, [containerRef, active]);\n};\n\nexport const useOverlayEffects = (\n  containerRef: RefObject<HTMLElement | null>,\n  active: boolean,\n) => {\n  useBodyScrollLock(active);\n  useFocusTrap(containerRef, active);\n};\n\nexport const useOverlayTransition = (open: boolean, duration = 200) => {\n  const [closing, setClosing] = useState(false);\n\n  useEffect(() => {\n    if (open) {\n      return undefined;\n    }\n\n    scheduleMicrotask(() => setClosing(true));\n    const timer = setTimeout(() => setClosing(false), duration);\n\n    return () => {\n      clearTimeout(timer);\n      scheduleMicrotask(() => setClosing(false));\n    };\n  }, [open, duration]);\n\n  const shouldRender = open || closing;\n  const transitionState: \"open\" | \"closing\" | \"closed\" = open\n    ? \"open\"\n    : closing\n      ? \"closing\"\n      : \"closed\";\n\n  return { shouldRender, transitionState };\n};\n"],"mappings":";;AAGA,IAAM,qBAAqB;CACzB;CACA;CACA;CACA;CACA;CACA;AACF;AAcA,IAAa,qBAAqB,WAAoB;CACpD,CAAA,GAAA,MAAA,iBAAgB;EACd,IAAI,CAAC,UAAU,OAAO,WAAW,aAAa;EAC9C,MAAM,EAAE,aAAa,SAAS,KAAK;EACnC,SAAS,KAAK,MAAM,WAAW;EAC/B,aAAa;GACX,SAAS,KAAK,MAAM,WAAW;EACjC;CACF,GAAG,CAAC,MAAM,CAAC;AACb;AAEA,IAAa,gBACX,cACA,WACG;CACH,CAAA,GAAA,MAAA,iBAAgB;EACd,IAAI,CAAC,UAAU,OAAO,WAAW,aAAa;EAC9C,MAAM,YAAY,aAAa;EAC/B,IAAI,CAAC,WAAW;EAEhB,MAAM,qBACJ,MAAM,KACJ,UAAU,iBAA8B,mBAAmB,KAAK,GAAG,CAAC,CACtE,EAAE,QACC,OAAO,CAAC,GAAG,aAAa,UAAU,KAAK,CAAC,GAAG,aAAa,aAAa,CACxE;EAEF,MAAM,YAAY,aAAa;EAC/B,MAAM,QAAQ,UAAU;EACxB,MAAM,OAAO,UAAU,UAAU,SAAS;EAC1C,OAAO,MAAM;EAEb,MAAM,iBAAiB,UAAyB;GAC9C,IAAI,MAAM,QAAQ,SAAS,UAAU,WAAW,GAAG;GACnD,IAAI,MAAM;QACJ,SAAS,kBAAkB,OAAO;KACpC,MAAM,eAAe;KACrB,CAAC,QAAQ,QAAQ,MAAM;IACzB;UACK,IAAI,SAAS,kBAAkB,MAAM;IAC1C,MAAM,eAAe;IACrB,CAAC,SAAS,OAAO,MAAM;GACzB;EACF;EAEA,UAAU,iBAAiB,WAAW,aAAa;EACnD,aAAa,UAAU,oBAAoB,WAAW,aAAa;CACrE,GAAG,CAAC,cAAc,MAAM,CAAC;AAC3B;AAEA,IAAa,qBACX,cACA,WACG;CACH,kBAAkB,MAAM;CACxB,aAAa,cAAc,MAAM;AACnC"}

package/dist/chunks/{overlay-CG1dMYtO.mjs → overlay-BMbhF-EC.mjs}

@@ -51,4 +51,4 @@ var useOverlayEffects = (containerRef, active) => {
 //#endregion
 export { useOverlayEffects as t };
 
-//# sourceMappingURL=overlay-CG1dMYtO.mjs.map
+//# sourceMappingURL=overlay-BMbhF-EC.mjs.map

package/dist/chunks/{overlay-CG1dMYtO.mjs.map → overlay-BMbhF-EC.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"overlay-CG1dMYtO.mjs","names":[],"sources":["../../src/components/shared/overlay.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport type { RefObject } from \"react\";\n\nconst focusableSelectors = [\n  \"a[href]\",\n  \"button:not([disabled])\",\n  \"textarea:not([disabled])\",\n  \"input:not([disabled])\",\n  \"select:not([disabled])\",\n  '[tabindex]:not([tabindex=\"-1\"])',\n];\n\nconst scheduleMicrotask = (callback: () => void) => {\n  if (typeof queueMicrotask === \"function\") {\n    queueMicrotask(callback);\n    return;\n  }\n  Promise.resolve()\n    .then(callback)\n    .catch(() => {\n      callback();\n    });\n};\n\nexport const useBodyScrollLock = (active: boolean) => {\n  useEffect(() => {\n    if (!active || typeof window === \"undefined\") return;\n    const { overflow } = document.body.style;\n    document.body.style.overflow = \"hidden\";\n    return () => {\n      document.body.style.overflow = overflow;\n    };\n  }, [active]);\n};\n\nexport const useFocusTrap = (\n  containerRef: RefObject<HTMLElement | null>,\n  active: boolean,\n) => {\n  useEffect(() => {\n    if (!active || typeof window === \"undefined\") return;\n    const container = containerRef.current;\n    if (!container) return;\n\n    const getFocusable = () =>\n      Array.from(\n        container.querySelectorAll<HTMLElement>(focusableSelectors.join(\",\")),\n      ).filter(\n        (el) => !el.hasAttribute(\"disabled\") && !el.getAttribute(\"aria-hidden\"),\n      );\n\n    const focusable = getFocusable();\n    const first = focusable[0];\n    const last = focusable[focusable.length - 1];\n    first?.focus();\n\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key !== \"Tab\" || focusable.length === 0) return;\n      if (event.shiftKey) {\n        if (document.activeElement === first) {\n          event.preventDefault();\n          (last || first)?.focus();\n        }\n      } else if (document.activeElement === last) {\n        event.preventDefault();\n        (first || last)?.focus();\n      }\n    };\n\n    container.addEventListener(\"keydown\", handleKeyDown);\n    return () => container.removeEventListener(\"keydown\", handleKeyDown);\n  }, [containerRef, active]);\n};\n\nexport const useOverlayEffects = (\n  containerRef: RefObject<HTMLElement | null>,\n  active: boolean,\n) => {\n  useBodyScrollLock(active);\n  useFocusTrap(containerRef, active);\n};\n\nexport const useOverlayTransition = (open: boolean, duration = 200) => {\n  const [closing, setClosing] = useState(false);\n\n  useEffect(() => {\n    if (open) {\n      return undefined;\n    }\n\n    scheduleMicrotask(() => setClosing(true));\n    const timer = setTimeout(() => setClosing(false), duration);\n\n    return () => {\n      clearTimeout(timer);\n      scheduleMicrotask(() => setClosing(false));\n    };\n  }, [open, duration]);\n\n  const shouldRender = open || closing;\n  const transitionState: \"open\" | \"closing\" | \"closed\" = open\n    ? \"open\"\n    : closing\n      ? \"closing\"\n      : \"closed\";\n\n  return { shouldRender, transitionState };\n};\n"],"mappings":";;AAGA,IAAM,qBAAqB;CACzB;CACA;CACA;CACA;CACA;CACA;CACD;AAcD,IAAa,qBAAqB,WAAoB;AACpD,iBAAgB;AACd,MAAI,CAAC,UAAU,OAAO,WAAW,YAAa;EAC9C,MAAM,EAAE,aAAa,SAAS,KAAK;AACnC,WAAS,KAAK,MAAM,WAAW;AAC/B,eAAa;AACX,YAAS,KAAK,MAAM,WAAW;;IAEhC,CAAC,OAAO,CAAC;;AAGd,IAAa,gBACX,cACA,WACG;AACH,iBAAgB;AACd,MAAI,CAAC,UAAU,OAAO,WAAW,YAAa;EAC9C,MAAM,YAAY,aAAa;AAC/B,MAAI,CAAC,UAAW;EAEhB,MAAM,qBACJ,MAAM,KACJ,UAAU,iBAA8B,mBAAmB,KAAK,IAAI,CAAC,CACtE,CAAC,QACC,OAAO,CAAC,GAAG,aAAa,WAAW,IAAI,CAAC,GAAG,aAAa,cAAc,CACxE;EAEH,MAAM,YAAY,cAAc;EAChC,MAAM,QAAQ,UAAU;EACxB,MAAM,OAAO,UAAU,UAAU,SAAS;AAC1C,SAAO,OAAO;EAEd,MAAM,iBAAiB,UAAyB;AAC9C,OAAI,MAAM,QAAQ,SAAS,UAAU,WAAW,EAAG;AACnD,OAAI,MAAM;QACJ,SAAS,kBAAkB,OAAO;AACpC,WAAM,gBAAgB;AACtB,MAAC,QAAQ,QAAQ,OAAO;;cAEjB,SAAS,kBAAkB,MAAM;AAC1C,UAAM,gBAAgB;AACtB,KAAC,SAAS,OAAO,OAAO;;;AAI5B,YAAU,iBAAiB,WAAW,cAAc;AACpD,eAAa,UAAU,oBAAoB,WAAW,cAAc;IACnE,CAAC,cAAc,OAAO,CAAC;;AAG5B,IAAa,qBACX,cACA,WACG;AACH,mBAAkB,OAAO;AACzB,cAAa,cAAc,OAAO"}
+{"version":3,"file":"overlay-BMbhF-EC.mjs","names":[],"sources":["../../src/components/shared/overlay.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport type { RefObject } from \"react\";\n\nconst focusableSelectors = [\n  \"a[href]\",\n  \"button:not([disabled])\",\n  \"textarea:not([disabled])\",\n  \"input:not([disabled])\",\n  \"select:not([disabled])\",\n  '[tabindex]:not([tabindex=\"-1\"])',\n];\n\nconst scheduleMicrotask = (callback: () => void) => {\n  if (typeof queueMicrotask === \"function\") {\n    queueMicrotask(callback);\n    return;\n  }\n  Promise.resolve()\n    .then(callback)\n    .catch(() => {\n      callback();\n    });\n};\n\nexport const useBodyScrollLock = (active: boolean) => {\n  useEffect(() => {\n    if (!active || typeof window === \"undefined\") return;\n    const { overflow } = document.body.style;\n    document.body.style.overflow = \"hidden\";\n    return () => {\n      document.body.style.overflow = overflow;\n    };\n  }, [active]);\n};\n\nexport const useFocusTrap = (\n  containerRef: RefObject<HTMLElement | null>,\n  active: boolean,\n) => {\n  useEffect(() => {\n    if (!active || typeof window === \"undefined\") return;\n    const container = containerRef.current;\n    if (!container) return;\n\n    const getFocusable = () =>\n      Array.from(\n        container.querySelectorAll<HTMLElement>(focusableSelectors.join(\",\")),\n      ).filter(\n        (el) => !el.hasAttribute(\"disabled\") && !el.getAttribute(\"aria-hidden\"),\n      );\n\n    const focusable = getFocusable();\n    const first = focusable[0];\n    const last = focusable[focusable.length - 1];\n    first?.focus();\n\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key !== \"Tab\" || focusable.length === 0) return;\n      if (event.shiftKey) {\n        if (document.activeElement === first) {\n          event.preventDefault();\n          (last || first)?.focus();\n        }\n      } else if (document.activeElement === last) {\n        event.preventDefault();\n        (first || last)?.focus();\n      }\n    };\n\n    container.addEventListener(\"keydown\", handleKeyDown);\n    return () => container.removeEventListener(\"keydown\", handleKeyDown);\n  }, [containerRef, active]);\n};\n\nexport const useOverlayEffects = (\n  containerRef: RefObject<HTMLElement | null>,\n  active: boolean,\n) => {\n  useBodyScrollLock(active);\n  useFocusTrap(containerRef, active);\n};\n\nexport const useOverlayTransition = (open: boolean, duration = 200) => {\n  const [closing, setClosing] = useState(false);\n\n  useEffect(() => {\n    if (open) {\n      return undefined;\n    }\n\n    scheduleMicrotask(() => setClosing(true));\n    const timer = setTimeout(() => setClosing(false), duration);\n\n    return () => {\n      clearTimeout(timer);\n      scheduleMicrotask(() => setClosing(false));\n    };\n  }, [open, duration]);\n\n  const shouldRender = open || closing;\n  const transitionState: \"open\" | \"closing\" | \"closed\" = open\n    ? \"open\"\n    : closing\n      ? \"closing\"\n      : \"closed\";\n\n  return { shouldRender, transitionState };\n};\n"],"mappings":";;AAGA,IAAM,qBAAqB;CACzB;CACA;CACA;CACA;CACA;CACA;AACF;AAcA,IAAa,qBAAqB,WAAoB;CACpD,gBAAgB;EACd,IAAI,CAAC,UAAU,OAAO,WAAW,aAAa;EAC9C,MAAM,EAAE,aAAa,SAAS,KAAK;EACnC,SAAS,KAAK,MAAM,WAAW;EAC/B,aAAa;GACX,SAAS,KAAK,MAAM,WAAW;EACjC;CACF,GAAG,CAAC,MAAM,CAAC;AACb;AAEA,IAAa,gBACX,cACA,WACG;CACH,gBAAgB;EACd,IAAI,CAAC,UAAU,OAAO,WAAW,aAAa;EAC9C,MAAM,YAAY,aAAa;EAC/B,IAAI,CAAC,WAAW;EAEhB,MAAM,qBACJ,MAAM,KACJ,UAAU,iBAA8B,mBAAmB,KAAK,GAAG,CAAC,CACtE,EAAE,QACC,OAAO,CAAC,GAAG,aAAa,UAAU,KAAK,CAAC,GAAG,aAAa,aAAa,CACxE;EAEF,MAAM,YAAY,aAAa;EAC/B,MAAM,QAAQ,UAAU;EACxB,MAAM,OAAO,UAAU,UAAU,SAAS;EAC1C,OAAO,MAAM;EAEb,MAAM,iBAAiB,UAAyB;GAC9C,IAAI,MAAM,QAAQ,SAAS,UAAU,WAAW,GAAG;GACnD,IAAI,MAAM;QACJ,SAAS,kBAAkB,OAAO;KACpC,MAAM,eAAe;KACrB,CAAC,QAAQ,QAAQ,MAAM;IACzB;UACK,IAAI,SAAS,kBAAkB,MAAM;IAC1C,MAAM,eAAe;IACrB,CAAC,SAAS,OAAO,MAAM;GACzB;EACF;EAEA,UAAU,iBAAiB,WAAW,aAAa;EACnD,aAAa,UAAU,oBAAoB,WAAW,aAAa;CACrE,GAAG,CAAC,cAAc,MAAM,CAAC;AAC3B;AAEA,IAAa,qBACX,cACA,WACG;CACH,kBAAkB,MAAM;CACxB,aAAa,cAAc,MAAM;AACnC"}

package/dist/chunks/{password-strength-meter-_o1T1HLO.cjs → password-strength-meter-Be1c-dnK.cjs}

@@ -1,5 +1,4 @@
-require("./chunk-B_GkZjkl.cjs");
-const require_icons = require("./icons-ub9iu-JG.cjs");
+const require_icons = require("./icons-Ci8yEvvF.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/forms/password-strength-meter/PasswordCriteria.tsx
@@ -102,4 +101,4 @@ Object.defineProperty(exports, "PasswordStrengthMeter", {
 	}
 });
 
-//# sourceMappingURL=password-strength-meter-_o1T1HLO.cjs.map
+//# sourceMappingURL=password-strength-meter-Be1c-dnK.cjs.map

package/dist/chunks/{password-strength-meter-_o1T1HLO.cjs.map → password-strength-meter-Be1c-dnK.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"password-strength-meter-_o1T1HLO.cjs","names":[],"sources":["../../src/components/forms/password-strength-meter/PasswordCriteria.tsx","../../src/components/forms/password-strength-meter/PasswordStrengthMeter.tsx"],"sourcesContent":["import { CheckIcon, CloseIcon } from \"../../icons\";\n\ninterface PasswordCriteriaProps {\n  password: string;\n}\n\nexport const PasswordCriteria = ({ password }: PasswordCriteriaProps) => {\n  const criteria = [\n    { label: \"At least 6 characters\", met: password.length >= 6 },\n    { label: \"Contains uppercase letter\", met: /[A-Z]/.test(password) },\n    { label: \"Contains lowercase letter\", met: /[a-z]/.test(password) },\n    { label: \"Contains a number\", met: /\\d/.test(password) },\n    { label: \"Contains special character\", met: /[^A-Za-z0-9]/.test(password) },\n  ];\n\n  return (\n    <div className=\"mt-2 space-y-1\">\n      {criteria.map((item) => (\n        <div key={item.label} className=\"flex items-center text-xs\">\n          {item.met ? (\n            <CheckIcon className=\"me-2 size-4 text-success\" title=\"CheckIcon\" />\n          ) : (\n            <CloseIcon className=\"me-2 size-4 text-ds-3\" title=\"CloseIcon\" />\n          )}\n          <span className={item.met ? \"text-success\" : \"text-ds-2\"}>\n            {item.label}\n          </span>\n        </div>\n      ))}\n    </div>\n  );\n};\n","import { useMemo } from \"react\";\n\nimport { PasswordCriteria } from \"./PasswordCriteria\";\n\nexport interface PasswordStrengthMeterProps {\n  password: string;\n}\n\nexport function PasswordStrengthMeter({\n  password,\n}: PasswordStrengthMeterProps) {\n  // Calculate password strength using an object mapping approach\n  const getStrength = (pass: string): number => {\n    const criteria = {\n      minLength: pass.length >= 6,\n      hasMixedCase: /[a-z]/.test(pass) && /[A-Z]/.test(pass),\n      hasNumber: /\\d/.test(pass),\n      hasSpecialChar: /[^a-zA-Z\\d]/.test(pass),\n    };\n\n    // Count the number of criteria that pass\n    return Object.values(criteria).filter(Boolean).length;\n  };\n\n  // Memoize the strength calculation to avoid unnecessary recalculations\n  const strength = useMemo(() => getStrength(password), [password]);\n\n  // Determine strength color based on the calculated strength\n  const getColor = (strength: number): string => {\n    const colors = [\n      \"bg-ds-state-danger\",\n      \"bg-ds-state-danger\",\n      \"bg-ds-state-warning\",\n      \"bg-ds-state-warning\",\n      \"bg-ds-state-success\",\n    ];\n    return colors[strength] || \"bg-ds-surface-3\";\n  };\n\n  // Get a text label corresponding to the password strength\n  const getStrengthText = (strength: number): string => {\n    const strengthLevels = [\"Very Weak\", \"Weak\", \"Fair\", \"Good\", \"Strong\"];\n    return strengthLevels[strength] || \"Very Weak\";\n  };\n\n  return (\n    <div className=\"mt-2\">\n      {/* Strength Label */}\n      <div className=\"mb-1 flex items-center justify-between\">\n        <span className=\"text-xs text-ds-2\">Password strength</span>\n        <span className=\"text-xs text-ds-2\">{getStrengthText(strength)}</span>\n      </div>\n\n      {/* Strength Meter */}\n      <div className=\"flex gap-1\">\n        {Array.from({ length: 4 }, (_, index) => (\n          <div\n            key={index}\n            className={`h-1 w-1/4 rounded-full transition-colors duration-300 ${\n              index < strength ? getColor(strength) : \"bg-ds-surface-3\"\n            }`}\n          />\n        ))}\n      </div>\n\n      <PasswordCriteria password={password} />\n    </div>\n  );\n}\n"],"mappings":";;;;;AAMA,IAAa,oBAAoB,EAAE,eAAsC;AASvE,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,WAAU;YACZ;GATH;IAAE,OAAO;IAAyB,KAAK,SAAS,UAAU;IAAG;GAC7D;IAAE,OAAO;IAA6B,KAAK,QAAQ,KAAK,SAAS;IAAE;GACnE;IAAE,OAAO;IAA6B,KAAK,QAAQ,KAAK,SAAS;IAAE;GACnE;IAAE,OAAO;IAAqB,KAAK,KAAK,KAAK,SAAS;IAAE;GACxD;IAAE,OAAO;IAA8B,KAAK,eAAe,KAAK,SAAS;IAAE;GAKxE,CAAS,KAAK,SACb,iBAAA,GAAA,kBAAA,MAAC,OAAD;GAAsB,WAAU;aAAhC,CACG,KAAK,MACJ,iBAAA,GAAA,kBAAA,KAAC,cAAA,WAAD;IAAW,WAAU;IAA2B,OAAM;IAAc,CAAA,GAEpE,iBAAA,GAAA,kBAAA,KAAC,cAAA,WAAD;IAAW,WAAU;IAAwB,OAAM;IAAc,CAAA,EAEnE,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAAM,WAAW,KAAK,MAAM,iBAAiB;cAC1C,KAAK;IACD,CAAA,CACH;KATI,KAAK,MAST,CACN;EACE,CAAA;;;;ACrBV,SAAgB,sBAAsB,EACpC,YAC6B;CAE7B,MAAM,eAAe,SAAyB;EAC5C,MAAM,WAAW;GACf,WAAW,KAAK,UAAU;GAC1B,cAAc,QAAQ,KAAK,KAAK,IAAI,QAAQ,KAAK,KAAK;GACtD,WAAW,KAAK,KAAK,KAAK;GAC1B,gBAAgB,cAAc,KAAK,KAAK;GACzC;AAGD,SAAO,OAAO,OAAO,SAAS,CAAC,OAAO,QAAQ,CAAC;;CAIjD,MAAM,YAAA,GAAA,MAAA,eAAyB,YAAY,SAAS,EAAE,CAAC,SAAS,CAAC;CAGjE,MAAM,YAAY,aAA6B;AAQ7C,SAAO;GANL;GACA;GACA;GACA;GACA;GAEK,CAAO,aAAa;;CAI7B,MAAM,mBAAmB,aAA6B;AAEpD,SAAO;GADiB;GAAa;GAAQ;GAAQ;GAAQ;GACtD,CAAe,aAAa;;AAGrC,QACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAK,WAAU;YAAf;GAEE,iBAAA,GAAA,kBAAA,MAAC,OAAD;IAAK,WAAU;cAAf,CACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;KAAM,WAAU;eAAoB;KAAwB,CAAA,EAC5D,iBAAA,GAAA,kBAAA,KAAC,QAAD;KAAM,WAAU;eAAqB,gBAAgB,SAAS;KAAQ,CAAA,CAClE;;GAGN,iBAAA,GAAA,kBAAA,KAAC,OAAD;IAAK,WAAU;cACZ,MAAM,KAAK,EAAE,QAAQ,GAAG,GAAG,GAAG,UAC7B,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAEE,WAAW,yDACT,QAAQ,WAAW,SAAS,SAAS,GAAG,qBAE1C,EAJK,MAIL,CACF;IACE,CAAA;GAEN,iBAAA,GAAA,kBAAA,KAAC,kBAAD,EAA4B,UAAY,CAAA;GACpC"}
+{"version":3,"file":"password-strength-meter-Be1c-dnK.cjs","names":[],"sources":["../../src/components/forms/password-strength-meter/PasswordCriteria.tsx","../../src/components/forms/password-strength-meter/PasswordStrengthMeter.tsx"],"sourcesContent":["import { CheckIcon, CloseIcon } from \"../../icons\";\n\ninterface PasswordCriteriaProps {\n  password: string;\n}\n\nexport const PasswordCriteria = ({ password }: PasswordCriteriaProps) => {\n  const criteria = [\n    { label: \"At least 6 characters\", met: password.length >= 6 },\n    { label: \"Contains uppercase letter\", met: /[A-Z]/.test(password) },\n    { label: \"Contains lowercase letter\", met: /[a-z]/.test(password) },\n    { label: \"Contains a number\", met: /\\d/.test(password) },\n    { label: \"Contains special character\", met: /[^A-Za-z0-9]/.test(password) },\n  ];\n\n  return (\n    <div className=\"mt-2 space-y-1\">\n      {criteria.map((item) => (\n        <div key={item.label} className=\"flex items-center text-xs\">\n          {item.met ? (\n            <CheckIcon className=\"me-2 size-4 text-success\" title=\"CheckIcon\" />\n          ) : (\n            <CloseIcon className=\"me-2 size-4 text-ds-3\" title=\"CloseIcon\" />\n          )}\n          <span className={item.met ? \"text-success\" : \"text-ds-2\"}>\n            {item.label}\n          </span>\n        </div>\n      ))}\n    </div>\n  );\n};\n","import { useMemo } from \"react\";\n\nimport { PasswordCriteria } from \"./PasswordCriteria\";\n\nexport interface PasswordStrengthMeterProps {\n  password: string;\n}\n\nexport function PasswordStrengthMeter({\n  password,\n}: PasswordStrengthMeterProps) {\n  // Calculate password strength using an object mapping approach\n  const getStrength = (pass: string): number => {\n    const criteria = {\n      minLength: pass.length >= 6,\n      hasMixedCase: /[a-z]/.test(pass) && /[A-Z]/.test(pass),\n      hasNumber: /\\d/.test(pass),\n      hasSpecialChar: /[^a-zA-Z\\d]/.test(pass),\n    };\n\n    // Count the number of criteria that pass\n    return Object.values(criteria).filter(Boolean).length;\n  };\n\n  // Memoize the strength calculation to avoid unnecessary recalculations\n  const strength = useMemo(() => getStrength(password), [password]);\n\n  // Determine strength color based on the calculated strength\n  const getColor = (strength: number): string => {\n    const colors = [\n      \"bg-ds-state-danger\",\n      \"bg-ds-state-danger\",\n      \"bg-ds-state-warning\",\n      \"bg-ds-state-warning\",\n      \"bg-ds-state-success\",\n    ];\n    return colors[strength] || \"bg-ds-surface-3\";\n  };\n\n  // Get a text label corresponding to the password strength\n  const getStrengthText = (strength: number): string => {\n    const strengthLevels = [\"Very Weak\", \"Weak\", \"Fair\", \"Good\", \"Strong\"];\n    return strengthLevels[strength] || \"Very Weak\";\n  };\n\n  return (\n    <div className=\"mt-2\">\n      {/* Strength Label */}\n      <div className=\"mb-1 flex items-center justify-between\">\n        <span className=\"text-xs text-ds-2\">Password strength</span>\n        <span className=\"text-xs text-ds-2\">{getStrengthText(strength)}</span>\n      </div>\n\n      {/* Strength Meter */}\n      <div className=\"flex gap-1\">\n        {Array.from({ length: 4 }, (_, index) => (\n          <div\n            key={index}\n            className={`h-1 w-1/4 rounded-full transition-colors duration-300 ${\n              index < strength ? getColor(strength) : \"bg-ds-surface-3\"\n            }`}\n          />\n        ))}\n      </div>\n\n      <PasswordCriteria password={password} />\n    </div>\n  );\n}\n"],"mappings":";;;;AAMA,IAAa,oBAAoB,EAAE,eAAsC;CASvE,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,WAAU;YACZ;GATH;IAAE,OAAO;IAAyB,KAAK,SAAS,UAAU;GAAE;GAC5D;IAAE,OAAO;IAA6B,KAAK,QAAQ,KAAK,QAAQ;GAAE;GAClE;IAAE,OAAO;IAA6B,KAAK,QAAQ,KAAK,QAAQ;GAAE;GAClE;IAAE,OAAO;IAAqB,KAAK,KAAK,KAAK,QAAQ;GAAE;GACvD;IAAE,OAAO;IAA8B,KAAK,eAAe,KAAK,QAAQ;GAAE;EAKvE,EAAS,KAAK,SACb,iBAAA,GAAA,kBAAA,MAAC,OAAD;GAAsB,WAAU;aAAhC,CACG,KAAK,MACJ,iBAAA,GAAA,kBAAA,KAAC,cAAA,WAAD;IAAW,WAAU;IAA2B,OAAM;GAAa,CAAA,IAEnE,iBAAA,GAAA,kBAAA,KAAC,cAAA,WAAD;IAAW,WAAU;IAAwB,OAAM;GAAa,CAAA,GAElE,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAAM,WAAW,KAAK,MAAM,iBAAiB;cAC1C,KAAK;GACF,CAAA,CACH;KATK,KAAK,KASV,CACN;CACE,CAAA;AAET;;;ACvBA,SAAgB,sBAAsB,EACpC,YAC6B;CAE7B,MAAM,eAAe,SAAyB;EAC5C,MAAM,WAAW;GACf,WAAW,KAAK,UAAU;GAC1B,cAAc,QAAQ,KAAK,IAAI,KAAK,QAAQ,KAAK,IAAI;GACrD,WAAW,KAAK,KAAK,IAAI;GACzB,gBAAgB,cAAc,KAAK,IAAI;EACzC;EAGA,OAAO,OAAO,OAAO,QAAQ,EAAE,OAAO,OAAO,EAAE;CACjD;CAGA,MAAM,YAAA,GAAA,MAAA,eAAyB,YAAY,QAAQ,GAAG,CAAC,QAAQ,CAAC;CAGhE,MAAM,YAAY,aAA6B;EAQ7C,OAAO;GANL;GACA;GACA;GACA;GACA;EAEK,EAAO,aAAa;CAC7B;CAGA,MAAM,mBAAmB,aAA6B;EAEpD,OAAO;GADiB;GAAa;GAAQ;GAAQ;GAAQ;EACtD,EAAe,aAAa;CACrC;CAEA,OACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAK,WAAU;YAAf;GAEE,iBAAA,GAAA,kBAAA,MAAC,OAAD;IAAK,WAAU;cAAf,CACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;KAAM,WAAU;eAAoB;IAAuB,CAAA,GAC3D,iBAAA,GAAA,kBAAA,KAAC,QAAD;KAAM,WAAU;eAAqB,gBAAgB,QAAQ;IAAQ,CAAA,CAClE;;GAGL,iBAAA,GAAA,kBAAA,KAAC,OAAD;IAAK,WAAU;cACZ,MAAM,KAAK,EAAE,QAAQ,EAAE,IAAI,GAAG,UAC7B,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAEE,WAAW,yDACT,QAAQ,WAAW,SAAS,QAAQ,IAAI,oBAE3C,GAJM,KAIN,CACF;GACE,CAAA;GAEL,iBAAA,GAAA,kBAAA,KAAC,kBAAD,EAA4B,SAAW,CAAA;EACpC;;AAET"}

package/dist/chunks/{password-strength-meter-CH6uQAuK.mjs → password-strength-meter-Q1Qr-4tz.mjs}

@@ -1,4 +1,4 @@
-import { K as CloseIcon, q as CheckIcon } from "./icons-JzMKLygv.mjs";
+import { J as CheckIcon, q as CloseIcon } from "./icons-CkVHNbbN.mjs";
 import { useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/forms/password-strength-meter/PasswordCriteria.tsx
@@ -96,4 +96,4 @@ function PasswordStrengthMeter({ password }) {
 //#endregion
 export { PasswordStrengthMeter as t };
 
-//# sourceMappingURL=password-strength-meter-CH6uQAuK.mjs.map
+//# sourceMappingURL=password-strength-meter-Q1Qr-4tz.mjs.map

package/dist/chunks/{password-strength-meter-CH6uQAuK.mjs.map → password-strength-meter-Q1Qr-4tz.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"password-strength-meter-CH6uQAuK.mjs","names":[],"sources":["../../src/components/forms/password-strength-meter/PasswordCriteria.tsx","../../src/components/forms/password-strength-meter/PasswordStrengthMeter.tsx"],"sourcesContent":["import { CheckIcon, CloseIcon } from \"../../icons\";\n\ninterface PasswordCriteriaProps {\n  password: string;\n}\n\nexport const PasswordCriteria = ({ password }: PasswordCriteriaProps) => {\n  const criteria = [\n    { label: \"At least 6 characters\", met: password.length >= 6 },\n    { label: \"Contains uppercase letter\", met: /[A-Z]/.test(password) },\n    { label: \"Contains lowercase letter\", met: /[a-z]/.test(password) },\n    { label: \"Contains a number\", met: /\\d/.test(password) },\n    { label: \"Contains special character\", met: /[^A-Za-z0-9]/.test(password) },\n  ];\n\n  return (\n    <div className=\"mt-2 space-y-1\">\n      {criteria.map((item) => (\n        <div key={item.label} className=\"flex items-center text-xs\">\n          {item.met ? (\n            <CheckIcon className=\"me-2 size-4 text-success\" title=\"CheckIcon\" />\n          ) : (\n            <CloseIcon className=\"me-2 size-4 text-ds-3\" title=\"CloseIcon\" />\n          )}\n          <span className={item.met ? \"text-success\" : \"text-ds-2\"}>\n            {item.label}\n          </span>\n        </div>\n      ))}\n    </div>\n  );\n};\n","import { useMemo } from \"react\";\n\nimport { PasswordCriteria } from \"./PasswordCriteria\";\n\nexport interface PasswordStrengthMeterProps {\n  password: string;\n}\n\nexport function PasswordStrengthMeter({\n  password,\n}: PasswordStrengthMeterProps) {\n  // Calculate password strength using an object mapping approach\n  const getStrength = (pass: string): number => {\n    const criteria = {\n      minLength: pass.length >= 6,\n      hasMixedCase: /[a-z]/.test(pass) && /[A-Z]/.test(pass),\n      hasNumber: /\\d/.test(pass),\n      hasSpecialChar: /[^a-zA-Z\\d]/.test(pass),\n    };\n\n    // Count the number of criteria that pass\n    return Object.values(criteria).filter(Boolean).length;\n  };\n\n  // Memoize the strength calculation to avoid unnecessary recalculations\n  const strength = useMemo(() => getStrength(password), [password]);\n\n  // Determine strength color based on the calculated strength\n  const getColor = (strength: number): string => {\n    const colors = [\n      \"bg-ds-state-danger\",\n      \"bg-ds-state-danger\",\n      \"bg-ds-state-warning\",\n      \"bg-ds-state-warning\",\n      \"bg-ds-state-success\",\n    ];\n    return colors[strength] || \"bg-ds-surface-3\";\n  };\n\n  // Get a text label corresponding to the password strength\n  const getStrengthText = (strength: number): string => {\n    const strengthLevels = [\"Very Weak\", \"Weak\", \"Fair\", \"Good\", \"Strong\"];\n    return strengthLevels[strength] || \"Very Weak\";\n  };\n\n  return (\n    <div className=\"mt-2\">\n      {/* Strength Label */}\n      <div className=\"mb-1 flex items-center justify-between\">\n        <span className=\"text-xs text-ds-2\">Password strength</span>\n        <span className=\"text-xs text-ds-2\">{getStrengthText(strength)}</span>\n      </div>\n\n      {/* Strength Meter */}\n      <div className=\"flex gap-1\">\n        {Array.from({ length: 4 }, (_, index) => (\n          <div\n            key={index}\n            className={`h-1 w-1/4 rounded-full transition-colors duration-300 ${\n              index < strength ? getColor(strength) : \"bg-ds-surface-3\"\n            }`}\n          />\n        ))}\n      </div>\n\n      <PasswordCriteria password={password} />\n    </div>\n  );\n}\n"],"mappings":";;;;AAMA,IAAa,oBAAoB,EAAE,eAAsC;AASvE,QACE,oBAAC,OAAD;EAAK,WAAU;YACZ;GATH;IAAE,OAAO;IAAyB,KAAK,SAAS,UAAU;IAAG;GAC7D;IAAE,OAAO;IAA6B,KAAK,QAAQ,KAAK,SAAS;IAAE;GACnE;IAAE,OAAO;IAA6B,KAAK,QAAQ,KAAK,SAAS;IAAE;GACnE;IAAE,OAAO;IAAqB,KAAK,KAAK,KAAK,SAAS;IAAE;GACxD;IAAE,OAAO;IAA8B,KAAK,eAAe,KAAK,SAAS;IAAE;GAKxE,CAAS,KAAK,SACb,qBAAC,OAAD;GAAsB,WAAU;aAAhC,CACG,KAAK,MACJ,oBAAC,WAAD;IAAW,WAAU;IAA2B,OAAM;IAAc,CAAA,GAEpE,oBAAC,WAAD;IAAW,WAAU;IAAwB,OAAM;IAAc,CAAA,EAEnE,oBAAC,QAAD;IAAM,WAAW,KAAK,MAAM,iBAAiB;cAC1C,KAAK;IACD,CAAA,CACH;KATI,KAAK,MAST,CACN;EACE,CAAA;;;;ACrBV,SAAgB,sBAAsB,EACpC,YAC6B;CAE7B,MAAM,eAAe,SAAyB;EAC5C,MAAM,WAAW;GACf,WAAW,KAAK,UAAU;GAC1B,cAAc,QAAQ,KAAK,KAAK,IAAI,QAAQ,KAAK,KAAK;GACtD,WAAW,KAAK,KAAK,KAAK;GAC1B,gBAAgB,cAAc,KAAK,KAAK;GACzC;AAGD,SAAO,OAAO,OAAO,SAAS,CAAC,OAAO,QAAQ,CAAC;;CAIjD,MAAM,WAAW,cAAc,YAAY,SAAS,EAAE,CAAC,SAAS,CAAC;CAGjE,MAAM,YAAY,aAA6B;AAQ7C,SAAO;GANL;GACA;GACA;GACA;GACA;GAEK,CAAO,aAAa;;CAI7B,MAAM,mBAAmB,aAA6B;AAEpD,SAAO;GADiB;GAAa;GAAQ;GAAQ;GAAQ;GACtD,CAAe,aAAa;;AAGrC,QACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GAEE,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,QAAD;KAAM,WAAU;eAAoB;KAAwB,CAAA,EAC5D,oBAAC,QAAD;KAAM,WAAU;eAAqB,gBAAgB,SAAS;KAAQ,CAAA,CAClE;;GAGN,oBAAC,OAAD;IAAK,WAAU;cACZ,MAAM,KAAK,EAAE,QAAQ,GAAG,GAAG,GAAG,UAC7B,oBAAC,OAAD,EAEE,WAAW,yDACT,QAAQ,WAAW,SAAS,SAAS,GAAG,qBAE1C,EAJK,MAIL,CACF;IACE,CAAA;GAEN,oBAAC,kBAAD,EAA4B,UAAY,CAAA;GACpC"}
+{"version":3,"file":"password-strength-meter-Q1Qr-4tz.mjs","names":[],"sources":["../../src/components/forms/password-strength-meter/PasswordCriteria.tsx","../../src/components/forms/password-strength-meter/PasswordStrengthMeter.tsx"],"sourcesContent":["import { CheckIcon, CloseIcon } from \"../../icons\";\n\ninterface PasswordCriteriaProps {\n  password: string;\n}\n\nexport const PasswordCriteria = ({ password }: PasswordCriteriaProps) => {\n  const criteria = [\n    { label: \"At least 6 characters\", met: password.length >= 6 },\n    { label: \"Contains uppercase letter\", met: /[A-Z]/.test(password) },\n    { label: \"Contains lowercase letter\", met: /[a-z]/.test(password) },\n    { label: \"Contains a number\", met: /\\d/.test(password) },\n    { label: \"Contains special character\", met: /[^A-Za-z0-9]/.test(password) },\n  ];\n\n  return (\n    <div className=\"mt-2 space-y-1\">\n      {criteria.map((item) => (\n        <div key={item.label} className=\"flex items-center text-xs\">\n          {item.met ? (\n            <CheckIcon className=\"me-2 size-4 text-success\" title=\"CheckIcon\" />\n          ) : (\n            <CloseIcon className=\"me-2 size-4 text-ds-3\" title=\"CloseIcon\" />\n          )}\n          <span className={item.met ? \"text-success\" : \"text-ds-2\"}>\n            {item.label}\n          </span>\n        </div>\n      ))}\n    </div>\n  );\n};\n","import { useMemo } from \"react\";\n\nimport { PasswordCriteria } from \"./PasswordCriteria\";\n\nexport interface PasswordStrengthMeterProps {\n  password: string;\n}\n\nexport function PasswordStrengthMeter({\n  password,\n}: PasswordStrengthMeterProps) {\n  // Calculate password strength using an object mapping approach\n  const getStrength = (pass: string): number => {\n    const criteria = {\n      minLength: pass.length >= 6,\n      hasMixedCase: /[a-z]/.test(pass) && /[A-Z]/.test(pass),\n      hasNumber: /\\d/.test(pass),\n      hasSpecialChar: /[^a-zA-Z\\d]/.test(pass),\n    };\n\n    // Count the number of criteria that pass\n    return Object.values(criteria).filter(Boolean).length;\n  };\n\n  // Memoize the strength calculation to avoid unnecessary recalculations\n  const strength = useMemo(() => getStrength(password), [password]);\n\n  // Determine strength color based on the calculated strength\n  const getColor = (strength: number): string => {\n    const colors = [\n      \"bg-ds-state-danger\",\n      \"bg-ds-state-danger\",\n      \"bg-ds-state-warning\",\n      \"bg-ds-state-warning\",\n      \"bg-ds-state-success\",\n    ];\n    return colors[strength] || \"bg-ds-surface-3\";\n  };\n\n  // Get a text label corresponding to the password strength\n  const getStrengthText = (strength: number): string => {\n    const strengthLevels = [\"Very Weak\", \"Weak\", \"Fair\", \"Good\", \"Strong\"];\n    return strengthLevels[strength] || \"Very Weak\";\n  };\n\n  return (\n    <div className=\"mt-2\">\n      {/* Strength Label */}\n      <div className=\"mb-1 flex items-center justify-between\">\n        <span className=\"text-xs text-ds-2\">Password strength</span>\n        <span className=\"text-xs text-ds-2\">{getStrengthText(strength)}</span>\n      </div>\n\n      {/* Strength Meter */}\n      <div className=\"flex gap-1\">\n        {Array.from({ length: 4 }, (_, index) => (\n          <div\n            key={index}\n            className={`h-1 w-1/4 rounded-full transition-colors duration-300 ${\n              index < strength ? getColor(strength) : \"bg-ds-surface-3\"\n            }`}\n          />\n        ))}\n      </div>\n\n      <PasswordCriteria password={password} />\n    </div>\n  );\n}\n"],"mappings":";;;;AAMA,IAAa,oBAAoB,EAAE,eAAsC;CASvE,OACE,oBAAC,OAAD;EAAK,WAAU;YACZ;GATH;IAAE,OAAO;IAAyB,KAAK,SAAS,UAAU;GAAE;GAC5D;IAAE,OAAO;IAA6B,KAAK,QAAQ,KAAK,QAAQ;GAAE;GAClE;IAAE,OAAO;IAA6B,KAAK,QAAQ,KAAK,QAAQ;GAAE;GAClE;IAAE,OAAO;IAAqB,KAAK,KAAK,KAAK,QAAQ;GAAE;GACvD;IAAE,OAAO;IAA8B,KAAK,eAAe,KAAK,QAAQ;GAAE;EAKvE,EAAS,KAAK,SACb,qBAAC,OAAD;GAAsB,WAAU;aAAhC,CACG,KAAK,MACJ,oBAAC,WAAD;IAAW,WAAU;IAA2B,OAAM;GAAa,CAAA,IAEnE,oBAAC,WAAD;IAAW,WAAU;IAAwB,OAAM;GAAa,CAAA,GAElE,oBAAC,QAAD;IAAM,WAAW,KAAK,MAAM,iBAAiB;cAC1C,KAAK;GACF,CAAA,CACH;KATK,KAAK,KASV,CACN;CACE,CAAA;AAET;;;ACvBA,SAAgB,sBAAsB,EACpC,YAC6B;CAE7B,MAAM,eAAe,SAAyB;EAC5C,MAAM,WAAW;GACf,WAAW,KAAK,UAAU;GAC1B,cAAc,QAAQ,KAAK,IAAI,KAAK,QAAQ,KAAK,IAAI;GACrD,WAAW,KAAK,KAAK,IAAI;GACzB,gBAAgB,cAAc,KAAK,IAAI;EACzC;EAGA,OAAO,OAAO,OAAO,QAAQ,EAAE,OAAO,OAAO,EAAE;CACjD;CAGA,MAAM,WAAW,cAAc,YAAY,QAAQ,GAAG,CAAC,QAAQ,CAAC;CAGhE,MAAM,YAAY,aAA6B;EAQ7C,OAAO;GANL;GACA;GACA;GACA;GACA;EAEK,EAAO,aAAa;CAC7B;CAGA,MAAM,mBAAmB,aAA6B;EAEpD,OAAO;GADiB;GAAa;GAAQ;GAAQ;GAAQ;EACtD,EAAe,aAAa;CACrC;CAEA,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GAEE,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,QAAD;KAAM,WAAU;eAAoB;IAAuB,CAAA,GAC3D,oBAAC,QAAD;KAAM,WAAU;eAAqB,gBAAgB,QAAQ;IAAQ,CAAA,CAClE;;GAGL,oBAAC,OAAD;IAAK,WAAU;cACZ,MAAM,KAAK,EAAE,QAAQ,EAAE,IAAI,GAAG,UAC7B,oBAAC,OAAD,EAEE,WAAW,yDACT,QAAQ,WAAW,SAAS,QAAQ,IAAI,oBAE3C,GAJM,KAIN,CACF;GACE,CAAA;GAEL,oBAAC,kBAAD,EAA4B,SAAW,CAAA;EACpC;;AAET"}

package/dist/chunks/{progress-bar-FfdFVvTT.cjs → progress-bar-BsnX079N.cjs}

@@ -1,5 +1,5 @@
-const require_chunk = require("./chunk-B_GkZjkl.cjs");
-const require_utils = require("./utils-LRbEQHYs.cjs");
+const require_chunk = require("./chunk-D6vf50IK.cjs");
+const require_utils = require("./utils-CoA0q63n.cjs");
 let react = require("react");
 react = require_chunk.__toESM(react, 1);
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -166,4 +166,4 @@ Object.defineProperty(exports, "ProgressBar", {
 	}
 });
 
-//# sourceMappingURL=progress-bar-FfdFVvTT.cjs.map
+//# sourceMappingURL=progress-bar-BsnX079N.cjs.map

package/dist/chunks/{progress-bar-FfdFVvTT.cjs.map → progress-bar-BsnX079N.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"progress-bar-FfdFVvTT.cjs","names":[],"sources":["../../src/components/data-display/progress-bar/ProgressBar.tsx","../../src/components/data-display/progress-bar/CircularProgress.tsx"],"sourcesContent":["import React from \"react\";\n\nexport type ProgressBarSize = \"sm\" | \"md\" | \"lg\";\nexport type ProgressBarTone =\n  | \"default\"\n  | \"success\"\n  | \"warning\"\n  | \"danger\"\n  | \"info\";\n\nexport interface ProgressBarProps {\n  value: number;\n  max?: number;\n  label?: React.ReactNode;\n  percentageLabel?: React.ReactNode;\n  showPercentage?: boolean;\n  size?: ProgressBarSize;\n  tone?: ProgressBarTone;\n  className?: string;\n  trackClassName?: string;\n  fillClassName?: string;\n  ariaLabel?: string;\n}\n\nconst sizeStyles: Record<\n  ProgressBarSize,\n  {\n    track: string;\n    label: string;\n    percentage: string;\n  }\n> = {\n  sm: {\n    track: \"h-1.5\",\n    label: \"text-xs\",\n    percentage: \"text-xs\",\n  },\n  md: {\n    track: \"h-2.5\",\n    label: \"text-sm\",\n    percentage: \"text-sm\",\n  },\n  lg: {\n    track: \"h-3.5\",\n    label: \"text-base\",\n    percentage: \"text-base\",\n  },\n};\n\nconst toneStyles: Record<\n  ProgressBarTone,\n  {\n    color: string;\n    trackBackground: string;\n  }\n> = {\n  default: {\n    color: \"var(--ds-chart-1)\",\n    trackBackground:\n      \"linear-gradient(90deg, rgba(15, 23, 42, 0.08) 0%, rgba(30, 41, 59, 0.14) 100%)\",\n  },\n  success: {\n    color: \"var(--ds-chart-3)\",\n    trackBackground:\n      \"linear-gradient(90deg, rgba(20, 83, 45, 0.12) 0%, rgba(34, 197, 94, 0.18) 100%)\",\n  },\n  warning: {\n    color: \"var(--ds-chart-4)\",\n    trackBackground:\n      \"linear-gradient(90deg, rgba(120, 53, 15, 0.12) 0%, rgba(245, 158, 11, 0.18) 100%)\",\n  },\n  danger: {\n    color: \"var(--ds-chart-5)\",\n    trackBackground:\n      \"linear-gradient(90deg, rgba(127, 29, 29, 0.12) 0%, rgba(239, 68, 68, 0.18) 100%)\",\n  },\n  info: {\n    color: \"var(--ds-chart-2)\",\n    trackBackground:\n      \"linear-gradient(90deg, rgba(30, 64, 175, 0.12) 0%, rgba(59, 130, 246, 0.18) 100%)\",\n  },\n};\n\nfunction clampValue(value: number, max: number): number {\n  if (!Number.isFinite(value)) {\n    return 0;\n  }\n\n  return Math.min(Math.max(value, 0), max);\n}\n\nexport default function ProgressBar({\n  value,\n  max = 100,\n  label,\n  percentageLabel,\n  showPercentage = true,\n  size = \"md\",\n  tone = \"default\",\n  className = \"\",\n  trackClassName = \"\",\n  fillClassName = \"\",\n  ariaLabel = \"Progress\",\n}: ProgressBarProps) {\n  const safeMax = Number.isFinite(max) && max > 0 ? max : 100;\n  const clampedValue = clampValue(value, safeMax);\n  const percentage = (clampedValue / safeMax) * 100;\n  const roundedPercentage = Math.round(percentage);\n  const toneStyle = toneStyles[tone];\n  const resolvedPercentageLabel = percentageLabel ?? `${roundedPercentage}%`;\n\n  return (\n    <div className={`w-full space-y-3 ${className}`}>\n      {(label || showPercentage) && (\n        <div className=\"flex items-center justify-between gap-4\">\n          <div\n            className={`font-mono font-semibold tracking-[0.08em] text-ds-1 ${sizeStyles[size].label}`}\n          >\n            {label}\n          </div>\n          {showPercentage && (\n            <div\n              className={`font-mono font-medium tracking-[0.08em] text-ds-2 ${sizeStyles[size].percentage}`}\n            >\n              {resolvedPercentageLabel}\n            </div>\n          )}\n        </div>\n      )}\n\n      <div\n        role=\"progressbar\"\n        aria-label={ariaLabel}\n        aria-valuemin={0}\n        aria-valuemax={safeMax}\n        aria-valuenow={Math.round(clampedValue)}\n        aria-valuetext={`${roundedPercentage}%`}\n        className={`relative overflow-hidden rounded-full border border-ds-border-2/50 bg-ds-surface-2/80 shadow-[inset_0_1px_1px_rgba(255,255,255,0.2)] ${sizeStyles[size].track} ${trackClassName}`}\n        style={{ background: toneStyle.trackBackground }}\n      >\n        <div\n          className={`h-full rounded-full transition-[width,filter,box-shadow] duration-500 ease-out ${fillClassName}`}\n          style={{\n            width: `${percentage}%`,\n            background: `linear-gradient(90deg, color-mix(in srgb, ${toneStyle.color} 68%, white 32%) 0%, ${toneStyle.color} 100%)`,\n            boxShadow: `inset 0 1px 0 rgba(255,255,255,0.4), 0 0 14px color-mix(in srgb, ${toneStyle.color} 32%, transparent)`,\n            filter: percentage > 0 ? \"saturate(1.05) brightness(1.02)\" : \"none\",\n          }}\n        />\n      </div>\n    </div>\n  );\n}\n","import { mergeClassNames } from \"../../../utils\";\n\nexport type CircularProgressTone =\n  | \"default\"\n  | \"success\"\n  | \"warning\"\n  | \"danger\"\n  | \"info\";\n\nexport interface CircularProgressProps {\n  value: number;\n  max?: number;\n  size?: number;\n  strokeWidth?: number;\n  tone?: CircularProgressTone;\n  showValue?: boolean;\n  valueLabel?: string;\n  className?: string;\n  trackClassName?: string;\n  progressClassName?: string;\n  ariaLabel?: string;\n}\n\nconst toneColorMap: Record<CircularProgressTone, string> = {\n  default: \"var(--ds-chart-1)\",\n  success: \"var(--ds-chart-3)\",\n  warning: \"var(--ds-chart-4)\",\n  danger: \"var(--ds-chart-5)\",\n  info: \"var(--ds-chart-2)\",\n};\n\nfunction clamp(value: number, max: number): number {\n  if (!Number.isFinite(value)) return 0;\n  return Math.min(Math.max(value, 0), max);\n}\n\nexport default function CircularProgress({\n  value,\n  max = 100,\n  size = 24,\n  strokeWidth = 3,\n  tone = \"default\",\n  showValue = false,\n  valueLabel,\n  className,\n  trackClassName,\n  progressClassName,\n  ariaLabel = \"Circular progress\",\n}: CircularProgressProps) {\n  const safeMax = Number.isFinite(max) && max > 0 ? max : 100;\n  const safeValue = clamp(value, safeMax);\n  const percentage = (safeValue / safeMax) * 100;\n\n  const center = size / 2;\n  const radius = center - strokeWidth / 2;\n  const circumference = 2 * Math.PI * radius;\n  const dashOffset = circumference - (percentage / 100) * circumference;\n  const label = valueLabel ?? `${Math.round(percentage)}%`;\n\n  return (\n    <span\n      role=\"progressbar\"\n      aria-label={ariaLabel}\n      aria-valuemin={0}\n      aria-valuemax={safeMax}\n      aria-valuenow={Math.round(safeValue)}\n      aria-valuetext={label}\n      className={mergeClassNames(\n        \"relative inline-flex items-center justify-center\",\n        className,\n      )}\n      style={{ width: size, height: size }}\n    >\n      <svg\n        width={size}\n        height={size}\n        viewBox={`0 0 ${size} ${size}`}\n        className=\"-rotate-90\"\n      >\n        <circle\n          cx={center}\n          cy={center}\n          r={radius}\n          fill=\"none\"\n          stroke=\"var(--ds-border-2)\"\n          strokeOpacity={0.5}\n          strokeWidth={strokeWidth}\n          className={trackClassName}\n        />\n        <circle\n          cx={center}\n          cy={center}\n          r={radius}\n          fill=\"none\"\n          stroke={toneColorMap[tone]}\n          strokeWidth={strokeWidth}\n          strokeLinecap=\"round\"\n          strokeDasharray={circumference}\n          strokeDashoffset={dashOffset}\n          className={mergeClassNames(\n            \"transition-[stroke-dashoffset] duration-500 ease-out\",\n            progressClassName,\n          )}\n        />\n      </svg>\n\n      {showValue ? (\n        <span className=\"absolute text-[10px] font-semibold leading-none text-ds-1\">\n          {Math.round(percentage)}\n        </span>\n      ) : null}\n    </span>\n  );\n}\n\nexport { CircularProgress };\n"],"mappings":"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"}
+{"version":3,"file":"progress-bar-BsnX079N.cjs","names":[],"sources":["../../src/components/data-display/progress-bar/ProgressBar.tsx","../../src/components/data-display/progress-bar/CircularProgress.tsx"],"sourcesContent":["import React from \"react\";\n\nexport type ProgressBarSize = \"sm\" | \"md\" | \"lg\";\nexport type ProgressBarTone =\n  | \"default\"\n  | \"success\"\n  | \"warning\"\n  | \"danger\"\n  | \"info\";\n\nexport interface ProgressBarProps {\n  value: number;\n  max?: number;\n  label?: React.ReactNode;\n  percentageLabel?: React.ReactNode;\n  showPercentage?: boolean;\n  size?: ProgressBarSize;\n  tone?: ProgressBarTone;\n  className?: string;\n  trackClassName?: string;\n  fillClassName?: string;\n  ariaLabel?: string;\n}\n\nconst sizeStyles: Record<\n  ProgressBarSize,\n  {\n    track: string;\n    label: string;\n    percentage: string;\n  }\n> = {\n  sm: {\n    track: \"h-1.5\",\n    label: \"text-xs\",\n    percentage: \"text-xs\",\n  },\n  md: {\n    track: \"h-2.5\",\n    label: \"text-sm\",\n    percentage: \"text-sm\",\n  },\n  lg: {\n    track: \"h-3.5\",\n    label: \"text-base\",\n    percentage: \"text-base\",\n  },\n};\n\nconst toneStyles: Record<\n  ProgressBarTone,\n  {\n    color: string;\n    trackBackground: string;\n  }\n> = {\n  default: {\n    color: \"var(--ds-chart-1)\",\n    trackBackground:\n      \"linear-gradient(90deg, rgba(15, 23, 42, 0.08) 0%, rgba(30, 41, 59, 0.14) 100%)\",\n  },\n  success: {\n    color: \"var(--ds-chart-3)\",\n    trackBackground:\n      \"linear-gradient(90deg, rgba(20, 83, 45, 0.12) 0%, rgba(34, 197, 94, 0.18) 100%)\",\n  },\n  warning: {\n    color: \"var(--ds-chart-4)\",\n    trackBackground:\n      \"linear-gradient(90deg, rgba(120, 53, 15, 0.12) 0%, rgba(245, 158, 11, 0.18) 100%)\",\n  },\n  danger: {\n    color: \"var(--ds-chart-5)\",\n    trackBackground:\n      \"linear-gradient(90deg, rgba(127, 29, 29, 0.12) 0%, rgba(239, 68, 68, 0.18) 100%)\",\n  },\n  info: {\n    color: \"var(--ds-chart-2)\",\n    trackBackground:\n      \"linear-gradient(90deg, rgba(30, 64, 175, 0.12) 0%, rgba(59, 130, 246, 0.18) 100%)\",\n  },\n};\n\nfunction clampValue(value: number, max: number): number {\n  if (!Number.isFinite(value)) {\n    return 0;\n  }\n\n  return Math.min(Math.max(value, 0), max);\n}\n\nexport default function ProgressBar({\n  value,\n  max = 100,\n  label,\n  percentageLabel,\n  showPercentage = true,\n  size = \"md\",\n  tone = \"default\",\n  className = \"\",\n  trackClassName = \"\",\n  fillClassName = \"\",\n  ariaLabel = \"Progress\",\n}: ProgressBarProps) {\n  const safeMax = Number.isFinite(max) && max > 0 ? max : 100;\n  const clampedValue = clampValue(value, safeMax);\n  const percentage = (clampedValue / safeMax) * 100;\n  const roundedPercentage = Math.round(percentage);\n  const toneStyle = toneStyles[tone];\n  const resolvedPercentageLabel = percentageLabel ?? `${roundedPercentage}%`;\n\n  return (\n    <div className={`w-full space-y-3 ${className}`}>\n      {(label || showPercentage) && (\n        <div className=\"flex items-center justify-between gap-4\">\n          <div\n            className={`font-mono font-semibold tracking-[0.08em] text-ds-1 ${sizeStyles[size].label}`}\n          >\n            {label}\n          </div>\n          {showPercentage && (\n            <div\n              className={`font-mono font-medium tracking-[0.08em] text-ds-2 ${sizeStyles[size].percentage}`}\n            >\n              {resolvedPercentageLabel}\n            </div>\n          )}\n        </div>\n      )}\n\n      <div\n        role=\"progressbar\"\n        aria-label={ariaLabel}\n        aria-valuemin={0}\n        aria-valuemax={safeMax}\n        aria-valuenow={Math.round(clampedValue)}\n        aria-valuetext={`${roundedPercentage}%`}\n        className={`relative overflow-hidden rounded-full border border-ds-border-2/50 bg-ds-surface-2/80 shadow-[inset_0_1px_1px_rgba(255,255,255,0.2)] ${sizeStyles[size].track} ${trackClassName}`}\n        style={{ background: toneStyle.trackBackground }}\n      >\n        <div\n          className={`h-full rounded-full transition-[width,filter,box-shadow] duration-500 ease-out ${fillClassName}`}\n          style={{\n            width: `${percentage}%`,\n            background: `linear-gradient(90deg, color-mix(in srgb, ${toneStyle.color} 68%, white 32%) 0%, ${toneStyle.color} 100%)`,\n            boxShadow: `inset 0 1px 0 rgba(255,255,255,0.4), 0 0 14px color-mix(in srgb, ${toneStyle.color} 32%, transparent)`,\n            filter: percentage > 0 ? \"saturate(1.05) brightness(1.02)\" : \"none\",\n          }}\n        />\n      </div>\n    </div>\n  );\n}\n","import { mergeClassNames } from \"../../../utils\";\n\nexport type CircularProgressTone =\n  | \"default\"\n  | \"success\"\n  | \"warning\"\n  | \"danger\"\n  | \"info\";\n\nexport interface CircularProgressProps {\n  value: number;\n  max?: number;\n  size?: number;\n  strokeWidth?: number;\n  tone?: CircularProgressTone;\n  showValue?: boolean;\n  valueLabel?: string;\n  className?: string;\n  trackClassName?: string;\n  progressClassName?: string;\n  ariaLabel?: string;\n}\n\nconst toneColorMap: Record<CircularProgressTone, string> = {\n  default: \"var(--ds-chart-1)\",\n  success: \"var(--ds-chart-3)\",\n  warning: \"var(--ds-chart-4)\",\n  danger: \"var(--ds-chart-5)\",\n  info: \"var(--ds-chart-2)\",\n};\n\nfunction clamp(value: number, max: number): number {\n  if (!Number.isFinite(value)) return 0;\n  return Math.min(Math.max(value, 0), max);\n}\n\nexport default function CircularProgress({\n  value,\n  max = 100,\n  size = 24,\n  strokeWidth = 3,\n  tone = \"default\",\n  showValue = false,\n  valueLabel,\n  className,\n  trackClassName,\n  progressClassName,\n  ariaLabel = \"Circular progress\",\n}: CircularProgressProps) {\n  const safeMax = Number.isFinite(max) && max > 0 ? max : 100;\n  const safeValue = clamp(value, safeMax);\n  const percentage = (safeValue / safeMax) * 100;\n\n  const center = size / 2;\n  const radius = center - strokeWidth / 2;\n  const circumference = 2 * Math.PI * radius;\n  const dashOffset = circumference - (percentage / 100) * circumference;\n  const label = valueLabel ?? `${Math.round(percentage)}%`;\n\n  return (\n    <span\n      role=\"progressbar\"\n      aria-label={ariaLabel}\n      aria-valuemin={0}\n      aria-valuemax={safeMax}\n      aria-valuenow={Math.round(safeValue)}\n      aria-valuetext={label}\n      className={mergeClassNames(\n        \"relative inline-flex items-center justify-center\",\n        className,\n      )}\n      style={{ width: size, height: size }}\n    >\n      <svg\n        width={size}\n        height={size}\n        viewBox={`0 0 ${size} ${size}`}\n        className=\"-rotate-90\"\n      >\n        <circle\n          cx={center}\n          cy={center}\n          r={radius}\n          fill=\"none\"\n          stroke=\"var(--ds-border-2)\"\n          strokeOpacity={0.5}\n          strokeWidth={strokeWidth}\n          className={trackClassName}\n        />\n        <circle\n          cx={center}\n          cy={center}\n          r={radius}\n          fill=\"none\"\n          stroke={toneColorMap[tone]}\n          strokeWidth={strokeWidth}\n          strokeLinecap=\"round\"\n          strokeDasharray={circumference}\n          strokeDashoffset={dashOffset}\n          className={mergeClassNames(\n            \"transition-[stroke-dashoffset] duration-500 ease-out\",\n            progressClassName,\n          )}\n        />\n      </svg>\n\n      {showValue ? (\n        <span className=\"absolute text-[10px] font-semibold leading-none text-ds-1\">\n          {Math.round(percentage)}\n        </span>\n      ) : null}\n    </span>\n  );\n}\n\nexport { CircularProgress };\n"],"mappings":"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"}

package/dist/chunks/{progress-bar-BAvRSW1b.mjs → progress-bar-l5WpbpZf.mjs}

@@ -1,4 +1,4 @@
-import { n as mergeClassNames } from "./utils-7S0u48mU.mjs";
+import { n as mergeClassNames } from "./utils-Dc7j29ec.mjs";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/data-display/progress-bar/ProgressBar.tsx
@@ -153,4 +153,4 @@ function CircularProgress({ value, max = 100, size = 24, strokeWidth = 3, tone =
 //#endregion
 export { ProgressBar as n, CircularProgress as t };
 
-//# sourceMappingURL=progress-bar-BAvRSW1b.mjs.map
+//# sourceMappingURL=progress-bar-l5WpbpZf.mjs.map