erp-pro-ui 0.1.0 → 0.1.2

package/dist/chunks/multi-select-combobox-ELSH_Xr4.mjs

@@ -0,0 +1,132 @@
+import { n as mergeClassNames } from "./utils-ati1KkDb.mjs";
+import { J as CheckIcon, N as ChevronDownIcon, q as CloseIcon } from "./icons-DuumN7z-.mjs";
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { motion, useMotionTemplate, useMotionValue } from "framer-motion";
+//#region src/components/forms/multi-select-combobox/MultiSelectCombobox.tsx
+var MultiSelectCombobox = ({ options, value = [], onChange, placeholder = "Select...", className, bgClassName = "bg-background-secondary" }) => {
+	const [open, setOpen] = useState(false);
+	const [search, setSearch] = useState("");
+	const [visible, setVisible] = useState(false);
+	const ref = useRef(null);
+	const mouseX = useMotionValue(0);
+	const mouseY = useMotionValue(0);
+	const radius = 100;
+	const filteredOptions = options.filter((opt) => opt.label.toLowerCase().includes(search.toLowerCase()));
+	useEffect(() => {
+		const handleClick = (e) => {
+			if (ref.current && !ref.current.contains(e.target)) {
+				setOpen(false);
+				setSearch("");
+			}
+		};
+		if (open) document.addEventListener("mousedown", handleClick);
+		return () => document.removeEventListener("mousedown", handleClick);
+	}, [open]);
+	const handleMouseMove = (event) => {
+		const { left, top } = event.currentTarget.getBoundingClientRect();
+		mouseX.set(event.clientX - left);
+		mouseY.set(event.clientY - top);
+	};
+	const handleOptionClick = (optionValue) => {
+		if (value.includes(optionValue)) onChange(value.filter((v) => v !== optionValue));
+		else onChange([...value, optionValue]);
+	};
+	const handleRemoveTag = (optionValue, e) => {
+		e.stopPropagation();
+		onChange(value.filter((v) => v !== optionValue));
+	};
+	const selectedLabels = value.map((v) => options.find((opt) => opt.value === v)?.label).filter(Boolean);
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: mergeClassNames("relative w-full", className),
+		tabIndex: 0,
+		children: [/* @__PURE__ */ jsx(motion.div, {
+			style: { backgroundImage: useMotionTemplate`
+            radial-gradient(
+              ${visible ? `${radius}px` : "0px"} circle at ${mouseX}px ${mouseY}px,
+              var(--ds-color-accent),
+              transparent 90%
+            )
+          ` },
+			onMouseMove: handleMouseMove,
+			onMouseEnter: () => setVisible(true),
+			onMouseLeave: () => setVisible(false),
+			className: "group/multi-combobox rounded-lg border-border p-[2px] transition duration-300 hover:border-accent",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: mergeClassNames("shadow-input flex min-h-10 w-full cursor-pointer items-center justify-between rounded-md border border-input px-3 py-2 text-sm text-foreground transition duration-400 ease-in-out group-hover/multi-combobox:shadow-none", bgClassName),
+				onClick: () => {
+					setOpen((o) => {
+						if (o) setSearch("");
+						return !o;
+					});
+				},
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "flex flex-1 flex-wrap gap-1",
+					children: selectedLabels.length > 0 ? selectedLabels.map((label, index) => /* @__PURE__ */ jsxs("span", {
+						className: "inline-flex items-center gap-1 rounded-md bg-accent-subtle px-2 py-0.5 text-xs font-medium text-accent",
+						children: [label, /* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: (e) => handleRemoveTag(value[index], e),
+							className: "ml-0.5 rounded-full p-0.5 transition-colors hover:bg-accent/10",
+							children: /* @__PURE__ */ jsx(CloseIcon, {
+								className: "w-3 h-3",
+								"aria-hidden": "true"
+							})
+						})]
+					}, value[index])) : /* @__PURE__ */ jsx("span", {
+						className: "text-muted-foreground",
+						children: placeholder
+					})
+				}), /* @__PURE__ */ jsx("span", {
+					className: mergeClassNames("ml-2 shrink-0 text-muted-foreground transition-transform duration-300", open ? "rotate-180" : "rotate-0"),
+					children: /* @__PURE__ */ jsx(ChevronDownIcon, {
+						width: 24,
+						height: 24,
+						color: "currentColor",
+						className: "h-5 w-5"
+					})
+				})]
+			})
+		}), open && /* @__PURE__ */ jsxs("div", {
+			className: "absolute right-0 left-0 z-20 mt-1 flex max-h-60 flex-col rounded-lg border border-border bg-background-secondary shadow-3 backdrop-blur-xl transition",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "sticky top-0 z-10 rounded-t-lg border-b border-border-muted bg-elevated/95 backdrop-blur-sm",
+				children: /* @__PURE__ */ jsx("input", {
+					autoFocus: true,
+					className: "w-full bg-transparent px-3 py-2 text-sm text-foreground outline-none placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-accent",
+					placeholder: "Type to search...",
+					value: search,
+					onChange: (e) => setSearch(e.target.value),
+					onClick: (e) => e.stopPropagation()
+				})
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "max-h-80 flex-1 overflow-auto",
+				children: [filteredOptions.length === 0 && /* @__PURE__ */ jsx("div", {
+					className: "p-3 text-center text-muted-foreground text-sm",
+					children: "No options found"
+				}), filteredOptions.map((option) => {
+					const isSelected = value.includes(option.value);
+					return /* @__PURE__ */ jsxs("div", {
+						className: mergeClassNames("flex cursor-pointer items-center gap-2 px-3 py-2 text-sm transition", isSelected ? "bg-accent-subtle text-accent" : "text-foreground hover:bg-accent hover:text-on-accent"),
+						onClick: () => handleOptionClick(option.value),
+						children: [/* @__PURE__ */ jsx("span", {
+							className: mergeClassNames("flex h-4 w-4 items-center justify-center rounded border transition", isSelected ? "border-accent bg-accent text-on-accent" : "border-border"),
+							children: isSelected && /* @__PURE__ */ jsx(CheckIcon, {
+								width: 12,
+								height: 12
+							})
+						}), /* @__PURE__ */ jsx("span", {
+							className: "flex-1",
+							children: option.label
+						})]
+					}, option.value);
+				})]
+			})]
+		})]
+	});
+};
+//#endregion
+export { MultiSelectCombobox as t };
+
+//# sourceMappingURL=multi-select-combobox-ELSH_Xr4.mjs.map

package/dist/chunks/multi-select-combobox-ELSH_Xr4.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"multi-select-combobox-ELSH_Xr4.mjs","names":[],"sources":["../../src/components/forms/multi-select-combobox/MultiSelectCombobox.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\nimport { motion, useMotionTemplate, useMotionValue } from \"framer-motion\";\n\nimport { CheckIcon, ChevronDownIcon, CloseIcon } from \"../../icons\";\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  className?: string;\n  bgClassName?: string;\n}\n\nconst MultiSelectCombobox: React.FC<MultiSelectComboboxProps> = ({\n  options,\n  value = [],\n  onChange,\n  placeholder = \"Select...\",\n  className,\n  bgClassName = \"bg-background-secondary\",\n}) => {\n  const [open, setOpen] = useState(false);\n  const [search, setSearch] = useState(\"\");\n  const [visible, setVisible] = useState(false);\n  const ref = useRef<HTMLDivElement>(null);\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  // Close dropdown on outside click\n  useEffect(() => {\n    const handleClick = (e: MouseEvent) => {\n      if (ref.current && !ref.current.contains(e.target as Node)) {\n        setOpen(false);\n        setSearch(\"\");\n      }\n    };\n    if (open) {\n      document.addEventListener(\"mousedown\", handleClick);\n    }\n    return () => document.removeEventListener(\"mousedown\", handleClick);\n  }, [open]);\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    <div\n      ref={ref}\n      className={mergeClassNames(\"relative w-full\", className)}\n      tabIndex={0}\n    >\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 rounded-lg border-border p-[2px] transition duration-300 hover:border-accent\"\n      >\n        <div\n          className={mergeClassNames(\n            \"shadow-input flex min-h-10 w-full cursor-pointer items-center justify-between rounded-md border border-input px-3 py-2 text-sm text-foreground transition duration-400 ease-in-out group-hover/multi-combobox:shadow-none\",\n            bgClassName,\n          )}\n          onClick={() => {\n            setOpen((o) => {\n              if (o) setSearch(\"\");\n              return !o;\n            });\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 bg-accent-subtle px-2 py-0.5 text-xs font-medium text-accent\"\n                >\n                  {label}\n                  <button\n                    type=\"button\"\n                    onClick={(e) => handleRemoveTag(value[index], e)}\n                    className=\"ml-0.5 rounded-full p-0.5 transition-colors hover:bg-accent/10\"\n                  >\n                    <CloseIcon className=\"w-3 h-3\" aria-hidden=\"true\" />\n                  </button>\n                </span>\n              ))\n            ) : (\n              <span className=\"text-muted-foreground\">{placeholder}</span>\n            )}\n          </div>\n          <span\n            className={mergeClassNames(\n              \"ml-2 shrink-0 text-muted-foreground 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      {open && (\n        <div className=\"absolute right-0 left-0 z-20 mt-1 flex max-h-60 flex-col rounded-lg border border-border bg-background-secondary shadow-3 backdrop-blur-xl transition\">\n          {/* Sticky search input */}\n          <div className=\"sticky top-0 z-10 rounded-t-lg border-b border-border-muted bg-elevated/95 backdrop-blur-sm\">\n            <input\n              autoFocus\n              className=\"w-full bg-transparent px-3 py-2 text-sm text-foreground outline-none placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-accent\"\n              placeholder=\"Type to search...\"\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-muted-foreground text-sm\">\n                No options found\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-accent-subtle text-accent\"\n                      : \"text-foreground hover:bg-accent hover:text-on-accent\",\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-accent bg-accent text-on-accent\"\n                        : \"border-border\",\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        </div>\n      )}\n    </div>\n  );\n};\n\nexport default MultiSelectCombobox;\n"],"mappings":";;;;;;AAoBA,IAAM,uBAA2D,EAC/D,SACA,QAAQ,EAAE,EACV,UACA,cAAc,aACd,WACA,cAAc,gCACV;CACJ,MAAM,CAAC,MAAM,WAAW,SAAS,MAAM;CACvC,MAAM,CAAC,QAAQ,aAAa,SAAS,GAAG;CACxC,MAAM,CAAC,SAAS,cAAc,SAAS,MAAM;CAC7C,MAAM,MAAM,OAAuB,KAAK;CACxC,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;AAGD,iBAAgB;EACd,MAAM,eAAe,MAAkB;AACrC,OAAI,IAAI,WAAW,CAAC,IAAI,QAAQ,SAAS,EAAE,OAAe,EAAE;AAC1D,YAAQ,MAAM;AACd,cAAU,GAAG;;;AAGjB,MAAI,KACF,UAAS,iBAAiB,aAAa,YAAY;AAErD,eAAa,SAAS,oBAAoB,aAAa,YAAY;IAClE,CAAC,KAAK,CAAC;CAEV,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,OAAD;EACO;EACL,WAAW,gBAAgB,mBAAmB,UAAU;EACxD,UAAU;YAHZ,CAKE,oBAAC,OAAO,KAAR;GACE,OAAO,EACL,iBAAiB,iBAAiB;;gBAE5B,UAAU,GAAG,OAAO,MAAM,MAAM,aAAa,OAAO,KAAK,OAAO;;;;aAKvE;GACD,aAAa;GACb,oBAAoB,WAAW,KAAK;GACpC,oBAAoB,WAAW,MAAM;GACrC,WAAU;aAEV,qBAAC,OAAD;IACE,WAAW,gBACT,6NACA,YACD;IACD,eAAe;AACb,cAAS,MAAM;AACb,UAAI,EAAG,WAAU,GAAG;AACpB,aAAO,CAAC;OACR;;cATN,CAYE,oBAAC,OAAD;KAAK,WAAU;eACZ,eAAe,SAAS,IACvB,eAAe,KAAK,OAAO,UACzB,qBAAC,QAAD;MAEE,WAAU;gBAFZ,CAIG,OACD,oBAAC,UAAD;OACE,MAAK;OACL,UAAU,MAAM,gBAAgB,MAAM,QAAQ,EAAE;OAChD,WAAU;iBAEV,oBAAC,WAAD;QAAW,WAAU;QAAU,eAAY;QAAS,CAAA;OAC7C,CAAA,CACJ;QAXA,MAAM,OAWN,CACP,GAEF,oBAAC,QAAD;MAAM,WAAU;gBAAyB;MAAmB,CAAA;KAE1D,CAAA,EACN,oBAAC,QAAD;KACE,WAAW,gBACT,yEACA,OAAO,eAAe,WACvB;eAED,oBAAC,iBAAD;MACE,OAAO;MACP,QAAQ;MACR,OAAM;MACN,WAAU;MACV,CAAA;KACG,CAAA,CACH;;GACK,CAAA,EACZ,QACC,qBAAC,OAAD;GAAK,WAAU;aAAf,CAEE,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,SAAD;KACE,WAAA;KACA,WAAU;KACV,aAAY;KACZ,OAAO;KACP,WAAW,MAAM,UAAU,EAAE,OAAO,MAAM;KAC1C,UAAU,MAAM,EAAE,iBAAiB;KACnC,CAAA;IACE,CAAA,EAEN,qBAAC,OAAD;IAAK,WAAU;cAAf,CACG,gBAAgB,WAAW,KAC1B,oBAAC,OAAD;KAAK,WAAU;eAAgD;KAEzD,CAAA,EAEP,gBAAgB,KAAK,WAAW;KAC/B,MAAM,aAAa,MAAM,SAAS,OAAO,MAAM;AAC/C,YACE,qBAAC,OAAD;MAEE,WAAW,gBACT,uEACA,aACI,iCACA,uDACL;MACD,eAAe,kBAAkB,OAAO,MAAM;gBARhD,CAUE,oBAAC,QAAD;OACE,WAAW,gBACT,sEACA,aACI,2CACA,gBACL;iBAEA,cAAc,oBAAC,WAAD;QAAW,OAAO;QAAI,QAAQ;QAAM,CAAA;OAC9C,CAAA,EACP,oBAAC,QAAD;OAAM,WAAU;iBAAU,OAAO;OAAa,CAAA,CAC1C;QApBC,OAAO,MAoBR;MAER,CACE;MACF;KAEJ"}

package/dist/chunks/multi-select-combobox-UW0X15W7.cjs

@@ -0,0 +1,139 @@
+const require_chunk = require("./chunk-B_GkZjkl.cjs");
+const require_utils = require("./utils-B4SmmY4J.cjs");
+const require_icons = require("./icons-BxIzP2jd.cjs");
+let react = require("react");
+react = require_chunk.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let framer_motion = require("framer-motion");
+//#region src/components/forms/multi-select-combobox/MultiSelectCombobox.tsx
+var MultiSelectCombobox = ({ options, value = [], onChange, placeholder = "Select...", className, bgClassName = "bg-background-secondary" }) => {
+	const [open, setOpen] = (0, react.useState)(false);
+	const [search, setSearch] = (0, react.useState)("");
+	const [visible, setVisible] = (0, react.useState)(false);
+	const ref = (0, react.useRef)(null);
+	const mouseX = (0, framer_motion.useMotionValue)(0);
+	const mouseY = (0, framer_motion.useMotionValue)(0);
+	const radius = 100;
+	const filteredOptions = options.filter((opt) => opt.label.toLowerCase().includes(search.toLowerCase()));
+	(0, react.useEffect)(() => {
+		const handleClick = (e) => {
+			if (ref.current && !ref.current.contains(e.target)) {
+				setOpen(false);
+				setSearch("");
+			}
+		};
+		if (open) document.addEventListener("mousedown", handleClick);
+		return () => document.removeEventListener("mousedown", handleClick);
+	}, [open]);
+	const handleMouseMove = (event) => {
+		const { left, top } = event.currentTarget.getBoundingClientRect();
+		mouseX.set(event.clientX - left);
+		mouseY.set(event.clientY - top);
+	};
+	const handleOptionClick = (optionValue) => {
+		if (value.includes(optionValue)) onChange(value.filter((v) => v !== optionValue));
+		else onChange([...value, optionValue]);
+	};
+	const handleRemoveTag = (optionValue, e) => {
+		e.stopPropagation();
+		onChange(value.filter((v) => v !== optionValue));
+	};
+	const selectedLabels = value.map((v) => options.find((opt) => opt.value === v)?.label).filter(Boolean);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		ref,
+		className: require_utils.mergeClassNames("relative w-full", className),
+		tabIndex: 0,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, {
+			style: { backgroundImage: framer_motion.useMotionTemplate`
+            radial-gradient(
+              ${visible ? `${radius}px` : "0px"} circle at ${mouseX}px ${mouseY}px,
+              var(--ds-color-accent),
+              transparent 90%
+            )
+          ` },
+			onMouseMove: handleMouseMove,
+			onMouseEnter: () => setVisible(true),
+			onMouseLeave: () => setVisible(false),
+			className: "group/multi-combobox rounded-lg border-border p-[2px] transition duration-300 hover:border-accent",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: require_utils.mergeClassNames("shadow-input flex min-h-10 w-full cursor-pointer items-center justify-between rounded-md border border-input px-3 py-2 text-sm text-foreground transition duration-400 ease-in-out group-hover/multi-combobox:shadow-none", bgClassName),
+				onClick: () => {
+					setOpen((o) => {
+						if (o) setSearch("");
+						return !o;
+					});
+				},
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "flex flex-1 flex-wrap gap-1",
+					children: selectedLabels.length > 0 ? selectedLabels.map((label, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						className: "inline-flex items-center gap-1 rounded-md bg-accent-subtle px-2 py-0.5 text-xs font-medium text-accent",
+						children: [label, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							onClick: (e) => handleRemoveTag(value[index], e),
+							className: "ml-0.5 rounded-full p-0.5 transition-colors hover:bg-accent/10",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.CloseIcon, {
+								className: "w-3 h-3",
+								"aria-hidden": "true"
+							})
+						})]
+					}, value[index])) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "text-muted-foreground",
+						children: placeholder
+					})
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: require_utils.mergeClassNames("ml-2 shrink-0 text-muted-foreground transition-transform duration-300", open ? "rotate-180" : "rotate-0"),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.ChevronDownIcon, {
+						width: 24,
+						height: 24,
+						color: "currentColor",
+						className: "h-5 w-5"
+					})
+				})]
+			})
+		}), open && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "absolute right-0 left-0 z-20 mt-1 flex max-h-60 flex-col rounded-lg border border-border bg-background-secondary shadow-3 backdrop-blur-xl transition",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "sticky top-0 z-10 rounded-t-lg border-b border-border-muted bg-elevated/95 backdrop-blur-sm",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+					autoFocus: true,
+					className: "w-full bg-transparent px-3 py-2 text-sm text-foreground outline-none placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-accent",
+					placeholder: "Type to search...",
+					value: search,
+					onChange: (e) => setSearch(e.target.value),
+					onClick: (e) => e.stopPropagation()
+				})
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "max-h-80 flex-1 overflow-auto",
+				children: [filteredOptions.length === 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "p-3 text-center text-muted-foreground text-sm",
+					children: "No options found"
+				}), filteredOptions.map((option) => {
+					const isSelected = value.includes(option.value);
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: require_utils.mergeClassNames("flex cursor-pointer items-center gap-2 px-3 py-2 text-sm transition", isSelected ? "bg-accent-subtle text-accent" : "text-foreground hover:bg-accent hover:text-on-accent"),
+						onClick: () => handleOptionClick(option.value),
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: require_utils.mergeClassNames("flex h-4 w-4 items-center justify-center rounded border transition", isSelected ? "border-accent bg-accent text-on-accent" : "border-border"),
+							children: isSelected && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.CheckIcon, {
+								width: 12,
+								height: 12
+							})
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "flex-1",
+							children: option.label
+						})]
+					}, option.value);
+				})]
+			})]
+		})]
+	});
+};
+//#endregion
+Object.defineProperty(exports, "MultiSelectCombobox", {
+	enumerable: true,
+	get: function() {
+		return MultiSelectCombobox;
+	}
+});
+
+//# sourceMappingURL=multi-select-combobox-UW0X15W7.cjs.map

package/dist/chunks/multi-select-combobox-UW0X15W7.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"multi-select-combobox-UW0X15W7.cjs","names":[],"sources":["../../src/components/forms/multi-select-combobox/MultiSelectCombobox.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\nimport { motion, useMotionTemplate, useMotionValue } from \"framer-motion\";\n\nimport { CheckIcon, ChevronDownIcon, CloseIcon } from \"../../icons\";\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  className?: string;\n  bgClassName?: string;\n}\n\nconst MultiSelectCombobox: React.FC<MultiSelectComboboxProps> = ({\n  options,\n  value = [],\n  onChange,\n  placeholder = \"Select...\",\n  className,\n  bgClassName = \"bg-background-secondary\",\n}) => {\n  const [open, setOpen] = useState(false);\n  const [search, setSearch] = useState(\"\");\n  const [visible, setVisible] = useState(false);\n  const ref = useRef<HTMLDivElement>(null);\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  // Close dropdown on outside click\n  useEffect(() => {\n    const handleClick = (e: MouseEvent) => {\n      if (ref.current && !ref.current.contains(e.target as Node)) {\n        setOpen(false);\n        setSearch(\"\");\n      }\n    };\n    if (open) {\n      document.addEventListener(\"mousedown\", handleClick);\n    }\n    return () => document.removeEventListener(\"mousedown\", handleClick);\n  }, [open]);\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    <div\n      ref={ref}\n      className={mergeClassNames(\"relative w-full\", className)}\n      tabIndex={0}\n    >\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 rounded-lg border-border p-[2px] transition duration-300 hover:border-accent\"\n      >\n        <div\n          className={mergeClassNames(\n            \"shadow-input flex min-h-10 w-full cursor-pointer items-center justify-between rounded-md border border-input px-3 py-2 text-sm text-foreground transition duration-400 ease-in-out group-hover/multi-combobox:shadow-none\",\n            bgClassName,\n          )}\n          onClick={() => {\n            setOpen((o) => {\n              if (o) setSearch(\"\");\n              return !o;\n            });\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 bg-accent-subtle px-2 py-0.5 text-xs font-medium text-accent\"\n                >\n                  {label}\n                  <button\n                    type=\"button\"\n                    onClick={(e) => handleRemoveTag(value[index], e)}\n                    className=\"ml-0.5 rounded-full p-0.5 transition-colors hover:bg-accent/10\"\n                  >\n                    <CloseIcon className=\"w-3 h-3\" aria-hidden=\"true\" />\n                  </button>\n                </span>\n              ))\n            ) : (\n              <span className=\"text-muted-foreground\">{placeholder}</span>\n            )}\n          </div>\n          <span\n            className={mergeClassNames(\n              \"ml-2 shrink-0 text-muted-foreground 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      {open && (\n        <div className=\"absolute right-0 left-0 z-20 mt-1 flex max-h-60 flex-col rounded-lg border border-border bg-background-secondary shadow-3 backdrop-blur-xl transition\">\n          {/* Sticky search input */}\n          <div className=\"sticky top-0 z-10 rounded-t-lg border-b border-border-muted bg-elevated/95 backdrop-blur-sm\">\n            <input\n              autoFocus\n              className=\"w-full bg-transparent px-3 py-2 text-sm text-foreground outline-none placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-accent\"\n              placeholder=\"Type to search...\"\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-muted-foreground text-sm\">\n                No options found\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-accent-subtle text-accent\"\n                      : \"text-foreground hover:bg-accent hover:text-on-accent\",\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-accent bg-accent text-on-accent\"\n                        : \"border-border\",\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        </div>\n      )}\n    </div>\n  );\n};\n\nexport default MultiSelectCombobox;\n"],"mappings":"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"}

package/dist/chunks/otp-input-B6zzOEqw.cjs

@@ -0,0 +1,186 @@
+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
+var sizeStyles = {
+	sm: "w-9 h-10 text-base",
+	md: "w-12 h-14 text-xl",
+	lg: "w-14 h-16 text-2xl"
+};
+var variantStyles = {
+	outlined: {
+		base: "border border-input bg-background-secondary rounded-lg shadow-input text-foreground",
+		focus: "focus:border-accent focus:ring-2 focus:ring-accent",
+		error: "border-destructive"
+	},
+	filled: {
+		base: "border border-transparent bg-accent-subtle rounded-lg text-foreground",
+		focus: "focus:border-accent focus:bg-background-secondary focus:ring-2 focus:ring-accent",
+		error: "bg-danger-subtle border-danger-border"
+	},
+	underlined: {
+		base: "border-b-2 border-border-strong bg-transparent rounded-none text-foreground",
+		focus: "focus:border-accent",
+		error: "border-destructive"
+	}
+};
+var OTPInput = (0, react.forwardRef)(({ length = 6, onChange, onComplete, value: controlledValue, defaultValue = "", size = "md", variant = "outlined", disabled = false, error = false, errorMessage, placeholder = "", mask = false, autoFocus = false, type = "number", className = "", inputClassName = "", separator = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+	className: "text-neutral-400 text-2xl mx-2",
+	children: "—"
+}), separatorPositions = [], "aria-label": ariaLabel = "One-time password" }, ref) => {
+	const [values, setValues] = (0, react.useState)(() => {
+		return (controlledValue ?? defaultValue).split("").slice(0, length).concat(Array(length).fill("")).slice(0, length);
+	});
+	const inputRefs = (0, react.useRef)([]);
+	(0, react.useEffect)(() => {
+		if (controlledValue !== void 0) setValues(controlledValue.split("").slice(0, length).concat(Array(length).fill("")).slice(0, length));
+	}, [controlledValue, length]);
+	(0, react.useEffect)(() => {
+		if (autoFocus && inputRefs.current[0]) inputRefs.current[0].focus();
+	}, [autoFocus]);
+	const focusInput = (0, react.useCallback)((index) => {
+		if (index >= 0 && index < length && inputRefs.current[index]) {
+			inputRefs.current[index]?.focus();
+			inputRefs.current[index]?.select();
+		}
+	}, [length]);
+	const handleChange = (0, react.useCallback)((index, e) => {
+		const char = e.target.value.slice(-1);
+		if (type === "number" && char && !/^\d$/.test(char)) return;
+		const newValues = [...values];
+		newValues[index] = char;
+		setValues(newValues);
+		const otpValue = newValues.join("");
+		onChange?.(otpValue);
+		if (char && index < length - 1) focusInput(index + 1);
+		if (newValues.every((v) => v !== "") && newValues.length === length) onComplete?.(otpValue);
+	}, [
+		values,
+		onChange,
+		onComplete,
+		length,
+		type,
+		focusInput
+	]);
+	const handleKeyDown = (0, react.useCallback)((index, e) => {
+		switch (e.key) {
+			case "Backspace":
+				e.preventDefault();
+				const newValues = [...values];
+				if (values[index]) {
+					newValues[index] = "";
+					setValues(newValues);
+					onChange?.(newValues.join(""));
+				} else if (index > 0) {
+					newValues[index - 1] = "";
+					setValues(newValues);
+					onChange?.(newValues.join(""));
+					focusInput(index - 1);
+				}
+				break;
+			case "ArrowLeft":
+				e.preventDefault();
+				focusInput(index - 1);
+				break;
+			case "ArrowRight":
+				e.preventDefault();
+				focusInput(index + 1);
+				break;
+			case "Delete":
+				e.preventDefault();
+				const deleteValues = [...values];
+				deleteValues[index] = "";
+				setValues(deleteValues);
+				onChange?.(deleteValues.join(""));
+				break;
+		}
+	}, [
+		values,
+		onChange,
+		focusInput
+	]);
+	const handlePaste = (0, react.useCallback)((e) => {
+		e.preventDefault();
+		const pastedData = e.clipboardData.getData("text").slice(0, length);
+		if (type === "number" && !/^\d*$/.test(pastedData)) return;
+		const newValues = pastedData.split("").slice(0, length).concat(Array(length).fill("")).slice(0, length);
+		setValues(newValues);
+		const otpValue = newValues.join("");
+		onChange?.(otpValue);
+		const lastFilledIndex = newValues.findLastIndex((v) => v !== "");
+		focusInput(Math.min(lastFilledIndex + 1, length - 1));
+		if (newValues.every((v) => v !== "") && pastedData.length >= length) onComplete?.(otpValue);
+	}, [
+		length,
+		type,
+		onChange,
+		onComplete,
+		focusInput
+	]);
+	const handleFocus = (0, react.useCallback)((e) => {
+		e.target.select();
+	}, []);
+	const renderInputs = () => {
+		const inputs = [];
+		for (let i = 0; i < length; i++) {
+			if (separatorPositions.includes(i) && i > 0) inputs.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "flex items-center",
+				children: separator
+			}, `separator-${i}`));
+			inputs.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+				ref: (el) => {
+					inputRefs.current[i] = el;
+					return () => {
+						inputRefs.current[i] = null;
+					};
+				},
+				type: mask ? "password" : "text",
+				inputMode: type === "number" ? "numeric" : "text",
+				pattern: type === "number" ? "\\d*" : void 0,
+				maxLength: 1,
+				value: values[i] || "",
+				placeholder,
+				disabled,
+				onChange: (e) => handleChange(i, e),
+				onKeyDown: (e) => handleKeyDown(i, e),
+				onPaste: handlePaste,
+				onFocus: handleFocus,
+				"aria-label": `${ariaLabel} digit ${i + 1}`,
+				className: `
+              text-center font-semibold outline-none transition-all
+              placeholder:text-muted-foreground
+              ${sizeStyles[size]}
+              ${variantStyles[variant].base}
+              ${!error ? variantStyles[variant].focus : ""}
+              ${error ? variantStyles[variant].error : ""}
+              ${disabled ? "opacity-50 cursor-not-allowed bg-muted" : ""}
+              ${inputClassName}
+            `
+			}, i));
+		}
+		return inputs;
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		ref,
+		className: `flex flex-col gap-2 ${className}`,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "flex items-center gap-2",
+			role: "group",
+			"aria-label": ariaLabel,
+			children: renderInputs()
+		}), error && errorMessage && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "text-sm text-destructive",
+			children: errorMessage
+		})]
+	});
+});
+OTPInput.displayName = "OTPInput";
+//#endregion
+Object.defineProperty(exports, "OTPInput", {
+	enumerable: true,
+	get: function() {
+		return OTPInput;
+	}
+});
+
+//# sourceMappingURL=otp-input-B6zzOEqw.cjs.map

package/dist/chunks/otp-input-B6zzOEqw.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"otp-input-B6zzOEqw.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-input bg-background-secondary rounded-lg shadow-input text-foreground\",\n    focus: \"focus:border-accent focus:ring-2 focus:ring-accent\",\n    error: \"border-destructive\",\n  },\n  filled: {\n    base: \"border border-transparent bg-accent-subtle rounded-lg text-foreground\",\n    focus:\n      \"focus:border-accent focus:bg-background-secondary focus:ring-2 focus:ring-accent\",\n    error: \"bg-danger-subtle border-danger-border\",\n  },\n  underlined: {\n    base: \"border-b-2 border-border-strong bg-transparent rounded-none text-foreground\",\n    focus: \"focus: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-neutral-400 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-muted-foreground\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-muted\" : \"\"}\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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"}