erp-pro-ui 0.1.8 → 0.2.0

package/dist/chunks/{input-T4OlFhBc.cjs → input-DkCPyWXi.cjs}

@@ -1,5 +1,7 @@
 require("./chunk-B_GkZjkl.cjs");
-const require_utils = require("./utils-B4SmmY4J.cjs");
+const require_utils = require("./utils-LRbEQHYs.cjs");
+const require_icons = require("./icons-CRanVZB1.cjs");
+const require_Tooltip = require("./Tooltip-DD30yj3A.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let framer_motion = require("framer-motion");
@@ -13,7 +15,7 @@ var InputState = /* @__PURE__ */ function(InputState) {
 }({});
 //#endregion
 //#region src/components/forms/input/Input.tsx
-var Input = (0, react.forwardRef)(({ className = "", label, labelHint, error, helperText, id, extra, placeholder, state = InputState.DEFAULT, disabled, message, leftIcon, leftIconClassName, rightIcon, rightIconClassName, icon, iconClassName, bgClassName = "bg-ds-surface-1", ...props }, ref) => {
+var Input = (0, react.forwardRef)(({ className = "", label, labelTooltip, labelHint, error, helperText, id, extra, placeholder, state = InputState.DEFAULT, disabled, required, message, leftIcon, leftIconClassName, rightIcon, rightIconClassName, icon, iconClassName, bgClassName = "bg-ds-surface-1", ...props }, ref) => {
 	const radius = 100;
 	const [visible, setVisible] = (0, react.useState)(false);
 	const mouseX = (0, framer_motion.useMotionValue)(0);
@@ -29,25 +31,43 @@ var Input = (0, react.forwardRef)(({ className = "", label, labelHint, error, he
 	};
 	const wrapperStateStyles = {
 		[InputState.DISABLED]: "border border-ds-border-field bg-ds-surface-1",
-		[InputState.ERROR]: "border-destructive ",
-		[InputState.SUCCESS]: "border-success-border ",
-		[InputState.DEFAULT]: "border-ds-border-2 "
+		[InputState.ERROR]: "border-ds-state-danger",
+		[InputState.SUCCESS]: "border-ds-state-success",
+		[InputState.DEFAULT]: "border-ds-border-2"
 	};
 	const inputStateStyles = {
 		[InputState.DISABLED]: "border-transparent bg-transparent text-ds-2 placeholder:!text-ds-3 placeholder:opacity-60",
-		[InputState.ERROR]: "text-destructive placeholder:text-destructive",
-		[InputState.SUCCESS]: "text-success placeholder:text-success",
-		[InputState.DEFAULT]: "text-ds-1"
+		[InputState.ERROR]: "border-ds-state-danger! text-ds-1",
+		[InputState.SUCCESS]: "border-ds-state-success! text-ds-1",
+		[InputState.DEFAULT]: "border-ds-border-field text-ds-1"
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "w-full",
 		children: [
 			label || labelHint ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: require_utils.mergeClassNames("mb-2 flex items-center gap-3", label ? "justify-between" : "justify-end"),
-				children: [label ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+				children: [label ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
 					htmlFor: id,
-					className: "block text-sm leading-none font-medium text-ds-1 peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
-					children: label
+					className: "inline-flex items-center gap-1.5 text-sm leading-none font-medium text-ds-1 peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+					children: [
+						label,
+						required && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("sup", {
+							className: "ms-0.5 text-ds-state-danger",
+							children: "*"
+						}),
+						labelTooltip && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Tooltip, {
+							content: labelTooltip,
+							position: "top",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "cursor-help text-ds-3 hover:text-ds-2 transition-colors",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.InfoCircleIcon, {
+									width: 14,
+									height: 14,
+									color: "currentColor"
+								})
+							})
+						})
+					]
 				}) : null, labelHint ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: "shrink-0 text-xs text-ds-2",
 					children: labelHint
@@ -89,6 +109,7 @@ var Input = (0, react.forwardRef)(({ className = "", label, labelHint, error, he
 							id,
 							placeholder,
 							disabled: isDisabled,
+							required,
 							className: require_utils.mergeClassNames("flex h-10 w-full rounded-md border border-ds-border-field py-2 text-sm text-ds-1 transition duration-400 ease-in-out file:border-0 file:text-sm file:font-medium placeholder:text-ds-3 placeholder:opacity-70 focus-visible:ring-1 focus-visible:ring-ds-focus focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50", bgClassName, inputStateStyles[resolvedState], className),
 							style: {
 								paddingInlineStart: leftIcon ? "2.5rem" : "0.75rem",
@@ -101,7 +122,7 @@ var Input = (0, react.forwardRef)(({ className = "", label, labelHint, error, he
 				})
 			}),
 			(error || message) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-				className: require_utils.mergeClassNames("text-sm font-medium mt-1", error ? "text-destructive" : "text-ds-2"),
+				className: require_utils.mergeClassNames("text-sm font-medium mt-1", error ? "text-ds-state-danger" : "text-ds-2"),
 				children: error || message
 			}),
 			helperText && !error && !message && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
@@ -126,4 +147,4 @@ Object.defineProperty(exports, "InputState", {
 	}
 });
 
-//# sourceMappingURL=input-T4OlFhBc.cjs.map
+//# sourceMappingURL=input-DkCPyWXi.cjs.map

package/dist/chunks/input-DkCPyWXi.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-DkCPyWXi.cjs","names":[],"sources":["../../src/components/forms/input/types.ts","../../src/components/forms/input/Input.tsx"],"sourcesContent":["import type { InputHTMLAttributes, ReactNode } from \"react\";\n\nexport enum InputState {\n  DEFAULT = \"default\",\n  DISABLED = \"disabled\",\n  ERROR = \"error\",\n  SUCCESS = \"success\",\n}\n\nexport interface InputProps extends InputHTMLAttributes<HTMLInputElement> {\n  label?: string;\n  /** Text shown in a tooltip on the info icon next to the label. */\n  labelTooltip?: string;\n  labelHint?: ReactNode;\n  error?: string;\n  helperText?: string;\n  id?: string;\n  extra?: string;\n  state?: InputState;\n  message?: string;\n  leftIcon?: ReactNode;\n  leftIconClassName?: string;\n  rightIcon?: ReactNode;\n  rightIconClassName?: string;\n  icon?: ReactNode;\n  iconClassName?: string;\n  /** Custom background classes (e.g. \"ui:bg-ds-surface-1\"). */\n  bgClassName?: string;\n}\n","import { forwardRef, useState } from \"react\";\nimport { type InputProps, InputState } from \"./types\";\nimport { motion, useMotionTemplate, useMotionValue } from \"framer-motion\";\nimport { mergeClassNames } from \"../../../utils\";\nimport { Tooltip } from \"../../overlays/tooltip/Tooltip\";\nimport { InfoCircleIcon } from \"../../icons\";\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      className = \"\",\n      label,\n      labelTooltip,\n      labelHint,\n      error,\n      helperText,\n      id,\n      extra,\n      placeholder,\n      state = InputState.DEFAULT,\n      disabled,\n      required,\n      message,\n      leftIcon,\n      leftIconClassName,\n      rightIcon,\n      rightIconClassName,\n      icon,\n      iconClassName,\n      bgClassName = \"bg-ds-surface-1\",\n      ...props\n    },\n    ref,\n  ) => {\n    const radius = 100;\n    const [visible, setVisible] = useState(false);\n    const mouseX = useMotionValue(0);\n    const mouseY = useMotionValue(0);\n    const resolvedState = disabled\n      ? InputState.DISABLED\n      : error\n        ? InputState.ERROR\n        : state;\n    const isDisabled = resolvedState === InputState.DISABLED;\n    const trailingIcon = rightIcon ?? icon;\n    const trailingIconClassName = rightIcon\n      ? rightIconClassName\n      : (rightIconClassName ?? iconClassName);\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 wrapperStateStyles: Record<InputState, string> = {\n      [InputState.DISABLED]: \"border border-ds-border-field bg-ds-surface-1\",\n      [InputState.ERROR]: \"border-ds-state-danger\",\n      [InputState.SUCCESS]: \"border-ds-state-success\",\n      [InputState.DEFAULT]: \"border-ds-border-2\",\n    };\n\n    const inputStateStyles: Record<InputState, string> = {\n      [InputState.DISABLED]:\n        \"border-transparent bg-transparent text-ds-2 placeholder:!text-ds-3 placeholder:opacity-60\",\n      [InputState.ERROR]: \"border-ds-state-danger! text-ds-1\",\n      [InputState.SUCCESS]: \"border-ds-state-success! text-ds-1\",\n      [InputState.DEFAULT]: \"border-ds-border-field text-ds-1\",\n    };\n\n    return (\n      <div className=\"w-full\">\n        {label || labelHint ? (\n          <div\n            className={mergeClassNames(\n              \"mb-2 flex items-center gap-3\",\n              label ? \"justify-between\" : \"justify-end\",\n            )}\n          >\n            {label ? (\n              <label\n                htmlFor={id}\n                className=\"inline-flex items-center gap-1.5 text-sm leading-none font-medium text-ds-1 peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n              >\n                {label}\n                {required && (\n                  <sup className=\"ms-0.5 text-ds-state-danger\">*</sup>\n                )}\n                {labelTooltip && (\n                  <Tooltip content={labelTooltip} position=\"top\">\n                    <span className=\"cursor-help text-ds-3 hover:text-ds-2 transition-colors\">\n                      <InfoCircleIcon width={14} height={14} color=\"currentColor\" />\n                    </span>\n                  </Tooltip>\n                )}\n              </label>\n            ) : null}\n            {labelHint ? (\n              <div className=\"shrink-0 text-xs text-ds-2\">{labelHint}</div>\n            ) : null}\n          </div>\n        ) : null}\n\n        <motion.div\n          style={{\n            backgroundImage: isDisabled\n              ? \"none\"\n              : useMotionTemplate`\n                  radial-gradient(\n                    ${\n                      visible ? `${radius}px` : \"0px\"\n                    } circle at ${mouseX}px ${mouseY}px,\n                    var(--ds-color-accent),\n                    transparent 90%\n                  )\n                `,\n          }}\n          onMouseMove={!isDisabled ? handleMouseMove : undefined}\n          onMouseEnter={!isDisabled ? () => setVisible(true) : undefined}\n          onMouseLeave={!isDisabled ? () => setVisible(false) : undefined}\n          className={mergeClassNames(\n            \"group/input rounded-lg transition duration-300\",\n            isDisabled ? \"p-px\" : \"p-[2px] hover:border-ds-border-accent\",\n            wrapperStateStyles[resolvedState],\n            extra,\n          )}\n        >\n          <div className=\"relative flex items-center\">\n            {leftIcon ? (\n              <div\n                className={mergeClassNames(\n                  \"pointer-events-none absolute inset-y-0 flex items-center text-ds-2\",\n                  leftIconClassName,\n                )}\n                style={{ insetInlineStart: 0, paddingInlineStart: \"0.75rem\" }}\n              >\n                {leftIcon}\n              </div>\n            ) : null}\n            {trailingIcon ? (\n              <div\n                className={mergeClassNames(\n                  \"pointer-events-none absolute inset-y-0 flex items-center text-ds-2\",\n                  trailingIconClassName,\n                )}\n                style={{ insetInlineEnd: 0, paddingInlineEnd: \"0.75rem\" }}\n              >\n                {trailingIcon}\n              </div>\n            ) : null}\n            <input\n              ref={ref}\n              id={id}\n              placeholder={placeholder}\n              disabled={isDisabled}\n              required={required}\n              className={mergeClassNames(\n                \"flex h-10 w-full rounded-md border border-ds-border-field py-2 text-sm text-ds-1 transition duration-400 ease-in-out file:border-0 file:text-sm file:font-medium placeholder:text-ds-3 placeholder:opacity-70 focus-visible:ring-1 focus-visible:ring-ds-focus focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50\",\n                bgClassName,\n                inputStateStyles[resolvedState],\n                className,\n              )}\n              style={{\n                paddingInlineStart: leftIcon ? \"2.5rem\" : \"0.75rem\",\n                paddingInlineEnd: trailingIcon ? \"2.5rem\" : \"0.75rem\",\n              }}\n              {...props}\n              autoComplete=\"off\"\n            />\n          </div>\n        </motion.div>\n\n        {(error || message) && (\n          <p\n            className={mergeClassNames(\n              \"text-sm font-medium mt-1\",\n              error ? \"text-ds-state-danger\" : \"text-ds-2\",\n            )}\n          >\n            {error || message}\n          </p>\n        )}\n        {helperText && !error && !message && (\n          <p className=\"text-sm text-ds-2 mt-1\">{helperText}</p>\n        )}\n      </div>\n    );\n  },\n);\n\nInput.displayName = \"Input\";\n"],"mappings":"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"}

package/dist/chunks/{label-CxmbGh0l.cjs → label-BKzqfAAq.cjs}

@@ -15,7 +15,7 @@ var Label = (0, react.forwardRef)(({ className = "", children, required, ...prop
         `.trim().replace(/\s+/g, " "),
 		...props,
 		children: [children, required && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: "text-destructive ml-1",
+			className: "text-destructive ms-1",
 			children: "*"
 		})]
 	});
@@ -29,4 +29,4 @@ Object.defineProperty(exports, "Label", {
 	}
 });
 
-//# sourceMappingURL=label-CxmbGh0l.cjs.map
+//# sourceMappingURL=label-BKzqfAAq.cjs.map

package/dist/chunks/{label-CxmbGh0l.cjs.map → label-BKzqfAAq.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"label-CxmbGh0l.cjs","names":[],"sources":["../../src/components/forms/label/Label.tsx"],"sourcesContent":["import type { LabelProps } from \"./types\";\nimport { forwardRef } from \"react\";\n\nexport const Label = forwardRef<HTMLLabelElement, LabelProps>(\n  ({ className = \"\", children, required, ...props }, ref) => {\n    return (\n      <label\n        ref={ref}\n        className={`\n          text-sm\n          font-medium\n          leading-none\n          peer-disabled:cursor-not-allowed\n          peer-disabled:opacity-70\n          ${className}\n        `\n          .trim()\n          .replace(/\\s+/g, \" \")}\n        {...props}\n      >\n        {children}\n        {required && <span className=\"text-destructive ml-1\">*</span>}\n      </label>\n    );\n  },\n);\n\nLabel.displayName = \"Label\";\n"],"mappings":";;;;AAGA,IAAa,SAAA,GAAA,MAAA,aACV,EAAE,YAAY,IAAI,UAAU,UAAU,GAAG,SAAS,QAAQ;AACzD,QACE,iBAAA,GAAA,kBAAA,MAAC,SAAD;EACO;EACL,WAAW;;;;;;YAMP,UAAU;UAEX,MAAM,CACN,QAAQ,QAAQ,IAAI;EACvB,GAAI;YAZN,CAcG,UACA,YAAY,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,WAAU;aAAwB;GAAQ,CAAA,CACvD;;EAGb;AAED,MAAM,cAAc"}
+{"version":3,"file":"label-BKzqfAAq.cjs","names":[],"sources":["../../src/components/forms/label/Label.tsx"],"sourcesContent":["import type { LabelProps } from \"./types\";\nimport { forwardRef } from \"react\";\n\nexport const Label = forwardRef<HTMLLabelElement, LabelProps>(\n  ({ className = \"\", children, required, ...props }, ref) => {\n    return (\n      <label\n        ref={ref}\n        className={`\n          text-sm\n          font-medium\n          leading-none\n          peer-disabled:cursor-not-allowed\n          peer-disabled:opacity-70\n          ${className}\n        `\n          .trim()\n          .replace(/\\s+/g, \" \")}\n        {...props}\n      >\n        {children}\n        {required && <span className=\"text-destructive ms-1\">*</span>}\n      </label>\n    );\n  },\n);\n\nLabel.displayName = \"Label\";\n"],"mappings":";;;;AAGA,IAAa,SAAA,GAAA,MAAA,aACV,EAAE,YAAY,IAAI,UAAU,UAAU,GAAG,SAAS,QAAQ;AACzD,QACE,iBAAA,GAAA,kBAAA,MAAC,SAAD;EACO;EACL,WAAW;;;;;;YAMP,UAAU;UAEX,MAAM,CACN,QAAQ,QAAQ,IAAI;EACvB,GAAI;YAZN,CAcG,UACA,YAAY,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,WAAU;aAAwB;GAAQ,CAAA,CACvD;;EAGb;AAED,MAAM,cAAc"}

package/dist/chunks/{label-C1Ekt3j2.mjs → label-Drxg0cG2.mjs}

@@ -14,7 +14,7 @@ var Label = forwardRef(({ className = "", children, required, ...props }, ref) =
         `.trim().replace(/\s+/g, " "),
 		...props,
 		children: [children, required && /* @__PURE__ */ jsx("span", {
-			className: "text-destructive ml-1",
+			className: "text-destructive ms-1",
 			children: "*"
 		})]
 	});
@@ -23,4 +23,4 @@ Label.displayName = "Label";
 //#endregion
 export { Label as t };
 
-//# sourceMappingURL=label-C1Ekt3j2.mjs.map
+//# sourceMappingURL=label-Drxg0cG2.mjs.map

package/dist/chunks/{label-C1Ekt3j2.mjs.map → label-Drxg0cG2.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"label-C1Ekt3j2.mjs","names":[],"sources":["../../src/components/forms/label/Label.tsx"],"sourcesContent":["import type { LabelProps } from \"./types\";\nimport { forwardRef } from \"react\";\n\nexport const Label = forwardRef<HTMLLabelElement, LabelProps>(\n  ({ className = \"\", children, required, ...props }, ref) => {\n    return (\n      <label\n        ref={ref}\n        className={`\n          text-sm\n          font-medium\n          leading-none\n          peer-disabled:cursor-not-allowed\n          peer-disabled:opacity-70\n          ${className}\n        `\n          .trim()\n          .replace(/\\s+/g, \" \")}\n        {...props}\n      >\n        {children}\n        {required && <span className=\"text-destructive ml-1\">*</span>}\n      </label>\n    );\n  },\n);\n\nLabel.displayName = \"Label\";\n"],"mappings":";;;AAGA,IAAa,QAAQ,YAClB,EAAE,YAAY,IAAI,UAAU,UAAU,GAAG,SAAS,QAAQ;AACzD,QACE,qBAAC,SAAD;EACO;EACL,WAAW;;;;;;YAMP,UAAU;UAEX,MAAM,CACN,QAAQ,QAAQ,IAAI;EACvB,GAAI;YAZN,CAcG,UACA,YAAY,oBAAC,QAAD;GAAM,WAAU;aAAwB;GAAQ,CAAA,CACvD;;EAGb;AAED,MAAM,cAAc"}
+{"version":3,"file":"label-Drxg0cG2.mjs","names":[],"sources":["../../src/components/forms/label/Label.tsx"],"sourcesContent":["import type { LabelProps } from \"./types\";\nimport { forwardRef } from \"react\";\n\nexport const Label = forwardRef<HTMLLabelElement, LabelProps>(\n  ({ className = \"\", children, required, ...props }, ref) => {\n    return (\n      <label\n        ref={ref}\n        className={`\n          text-sm\n          font-medium\n          leading-none\n          peer-disabled:cursor-not-allowed\n          peer-disabled:opacity-70\n          ${className}\n        `\n          .trim()\n          .replace(/\\s+/g, \" \")}\n        {...props}\n      >\n        {children}\n        {required && <span className=\"text-destructive ms-1\">*</span>}\n      </label>\n    );\n  },\n);\n\nLabel.displayName = \"Label\";\n"],"mappings":";;;AAGA,IAAa,QAAQ,YAClB,EAAE,YAAY,IAAI,UAAU,UAAU,GAAG,SAAS,QAAQ;AACzD,QACE,qBAAC,SAAD;EACO;EACL,WAAW;;;;;;YAMP,UAAU;UAEX,MAAM,CACN,QAAQ,QAAQ,IAAI;EACvB,GAAI;YAZN,CAcG,UACA,YAAY,oBAAC,QAAD;GAAM,WAAU;aAAwB;GAAQ,CAAA,CACvD;;EAGb;AAED,MAAM,cAAc"}

package/dist/chunks/loading-BiM4mKh6.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"loading-BiM4mKh6.cjs","names":[],"sources":["../../src/components/data-display/loading/Loading.tsx"],"sourcesContent":["import { LoaderIcon, RingLoaderIcon } from \"../../icons\";\n\nexport type LoadingVariant =\n  | \"spinner\"\n  | \"dots\"\n  | \"pulse\"\n  | \"bars\"\n  | \"ring\"\n  | \"bounce\"\n  | \"wave\"\n  | \"skeleton\";\n\nexport type LoadingSize = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n\nexport interface LoadingProps {\n  /** The variant/style of the loading indicator */\n  variant?: LoadingVariant;\n  /** Size of the loading indicator */\n  size?: LoadingSize;\n  /** Custom color for the loading indicator */\n  color?: string;\n  /** Text to display alongside the loading indicator */\n  text?: string;\n  /** Position of the text relative to the indicator */\n  textPosition?: \"right\" | \"bottom\";\n  /** Whether to show as a full-screen overlay */\n  fullScreen?: boolean;\n  /** Whether to show as an overlay within parent container */\n  overlay?: boolean;\n  /** Custom className */\n  className?: string;\n  /** Skeleton specific: width */\n  skeletonWidth?: string;\n  /** Skeleton specific: height */\n  skeletonHeight?: string;\n  /** Skeleton specific: rounded style */\n  skeletonRounded?: \"none\" | \"sm\" | \"md\" | \"lg\" | \"full\";\n}\n\nconst sizeMap: Record<LoadingSize, { container: string; text: string }> = {\n  xs: { container: \"w-4 h-4\", text: \"text-xs\" },\n  sm: { container: \"w-6 h-6\", text: \"text-sm\" },\n  md: { container: \"w-8 h-8\", text: \"text-sm\" },\n  lg: { container: \"w-12 h-12\", text: \"text-base\" },\n  xl: { container: \"w-16 h-16\", text: \"text-lg\" },\n};\n\n// Spinner - Classic rotating circle\nfunction Spinner({\n  size = \"md\",\n  color = \"currentColor\",\n}: {\n  size?: LoadingSize;\n  color?: string;\n}) {\n  return (\n    <LoaderIcon\n      className={`animate-spin ${sizeMap[size].container}`}\n      color={color}\n      aria-hidden=\"true\"\n    />\n  );\n}\n\n// Dots - Three bouncing dots\nfunction Dots({\n  size = \"md\",\n  color = \"currentColor\",\n}: {\n  size?: LoadingSize;\n  color?: string;\n}) {\n  const dotSize = {\n    xs: \"w-1.5 h-1.5\",\n    sm: \"w-2 h-2\",\n    md: \"w-2.5 h-2.5\",\n    lg: \"w-3 h-3\",\n    xl: \"w-4 h-4\",\n  };\n\n  return (\n    <div className=\"flex items-center gap-1\">\n      {[0, 1, 2].map((i) => (\n        <div\n          key={i}\n          className={`${dotSize[size]} rounded-full animate-bounce`}\n          style={{\n            backgroundColor: color,\n            animationDelay: `${i * 0.15}s`,\n            animationDuration: \"0.6s\",\n          }}\n        />\n      ))}\n    </div>\n  );\n}\n\n// Pulse - Pulsing circle\nfunction Pulse({\n  size = \"md\",\n  color = \"currentColor\",\n}: {\n  size?: LoadingSize;\n  color?: string;\n}) {\n  return (\n    <div className={`relative ${sizeMap[size].container}`}>\n      <div\n        className=\"absolute inset-0 rounded-full animate-ping opacity-75\"\n        style={{ backgroundColor: color }}\n      />\n      <div\n        className=\"absolute inset-2 rounded-full\"\n        style={{ backgroundColor: color }}\n      />\n    </div>\n  );\n}\n\n// Bars - Audio-style animated bars\nfunction Bars({\n  size = \"md\",\n  color = \"currentColor\",\n}: {\n  size?: LoadingSize;\n  color?: string;\n}) {\n  const barWidth = {\n    xs: \"w-0.5\",\n    sm: \"w-1\",\n    md: \"w-1.5\",\n    lg: \"w-2\",\n    xl: \"w-2.5\",\n  };\n\n  return (\n    <div className={`flex items-end gap-0.5 ${sizeMap[size].container}`}>\n      {[0, 1, 2, 3, 4].map((i) => (\n        <div\n          key={i}\n          className={`${barWidth[size]} rounded-sm`}\n          style={{\n            backgroundColor: color,\n            animation: \"loading-bars 1s ease-in-out infinite\",\n            animationDelay: `${i * 0.1}s`,\n            height: \"40%\",\n          }}\n        />\n      ))}\n      <style>{`\n        @keyframes loading-bars {\n          0%, 100% { height: 40%; }\n          50% { height: 100%; }\n        }\n      `}</style>\n    </div>\n  );\n}\n\n// Ring - Rotating ring with gradient\nfunction Ring({\n  size = \"md\",\n  color = \"currentColor\",\n}: {\n  size?: LoadingSize;\n  color?: string;\n}) {\n  const strokeWidth = {\n    xs: 3,\n    sm: 3,\n    md: 4,\n    lg: 4,\n    xl: 5,\n  };\n\n  return (\n    <RingLoaderIcon\n      className={`animate-spin ${sizeMap[size].container}`}\n      color={color}\n      strokeWidth={strokeWidth[size]}\n      aria-hidden=\"true\"\n    />\n  );\n}\n\n// Bounce - Three bouncing circles\nfunction Bounce({\n  size = \"md\",\n  color = \"currentColor\",\n}: {\n  size?: LoadingSize;\n  color?: string;\n}) {\n  const dotSize = {\n    xs: \"w-2 h-2\",\n    sm: \"w-3 h-3\",\n    md: \"w-4 h-4\",\n    lg: \"w-5 h-5\",\n    xl: \"w-6 h-6\",\n  };\n\n  return (\n    <div className=\"flex items-center gap-1\">\n      {[0, 1, 2].map((i) => (\n        <div\n          key={i}\n          className={`${dotSize[size]} rounded-full`}\n          style={{\n            backgroundColor: color,\n            animation: \"loading-bounce 1.4s ease-in-out infinite both\",\n            animationDelay: `${i * 0.16}s`,\n          }}\n        />\n      ))}\n      <style>{`\n        @keyframes loading-bounce {\n          0%, 80%, 100% { transform: scale(0); }\n          40% { transform: scale(1); }\n        }\n      `}</style>\n    </div>\n  );\n}\n\n// Wave - Wave animation\nfunction Wave({\n  size = \"md\",\n  color = \"currentColor\",\n}: {\n  size?: LoadingSize;\n  color?: string;\n}) {\n  const barHeight = {\n    xs: \"h-3\",\n    sm: \"h-4\",\n    md: \"h-6\",\n    lg: \"h-8\",\n    xl: \"h-10\",\n  };\n  const barWidth = {\n    xs: \"w-0.5\",\n    sm: \"w-1\",\n    md: \"w-1\",\n    lg: \"w-1.5\",\n    xl: \"w-2\",\n  };\n\n  return (\n    <div className=\"flex items-center gap-0.5\">\n      {[0, 1, 2, 3, 4].map((i) => (\n        <div\n          key={i}\n          className={`${barWidth[size]} ${barHeight[size]} rounded-full`}\n          style={{\n            backgroundColor: color,\n            animation: \"loading-wave 1.2s ease-in-out infinite\",\n            animationDelay: `${i * 0.1}s`,\n          }}\n        />\n      ))}\n      <style>{`\n        @keyframes loading-wave {\n          0%, 40%, 100% { transform: scaleY(0.4); }\n          20% { transform: scaleY(1); }\n        }\n      `}</style>\n    </div>\n  );\n}\n\n// Skeleton - Loading placeholder\nfunction Skeleton({\n  width = \"100%\",\n  height = \"1rem\",\n  rounded = \"md\",\n}: {\n  width?: string;\n  height?: string;\n  rounded?: \"none\" | \"sm\" | \"md\" | \"lg\" | \"full\";\n}) {\n  const roundedMap = {\n    none: \"\",\n    sm: \"rounded-sm\",\n    md: \"rounded-md\",\n    lg: \"rounded-lg\",\n    full: \"rounded-full\",\n  };\n\n  return (\n    <div\n      className={`animate-pulse bg-ds-surface-3 ${roundedMap[rounded]}`}\n      style={{ width, height }}\n    />\n  );\n}\n\nexport default function Loading({\n  variant = \"spinner\",\n  size = \"md\",\n  color = \"var(--ds-color-accent)\",\n  text,\n  textPosition = \"right\",\n  fullScreen = false,\n  overlay = false,\n  className = \"\",\n  skeletonWidth,\n  skeletonHeight,\n  skeletonRounded = \"md\",\n}: LoadingProps) {\n  const renderLoader = () => {\n    switch (variant) {\n      case \"spinner\":\n        return <Spinner size={size} color={color} />;\n      case \"dots\":\n        return <Dots size={size} color={color} />;\n      case \"pulse\":\n        return <Pulse size={size} color={color} />;\n      case \"bars\":\n        return <Bars size={size} color={color} />;\n      case \"ring\":\n        return <Ring size={size} color={color} />;\n      case \"bounce\":\n        return <Bounce size={size} color={color} />;\n      case \"wave\":\n        return <Wave size={size} color={color} />;\n      case \"skeleton\":\n        return (\n          <Skeleton\n            width={skeletonWidth}\n            height={skeletonHeight}\n            rounded={skeletonRounded}\n          />\n        );\n      default:\n        return <Spinner size={size} color={color} />;\n    }\n  };\n\n  const content = (\n    <div\n      className={`inline-flex items-center ${\n        textPosition === \"bottom\" ? \"flex-col gap-2\" : \"flex-row gap-3\"\n      } ${className}`}\n    >\n      {renderLoader()}\n      {text && (\n        <span className={`${sizeMap[size].text} text-ds-2 font-medium`}>\n          {text}\n        </span>\n      )}\n    </div>\n  );\n\n  if (fullScreen) {\n    return (\n      <div className=\"fixed inset-0 z-50 flex items-center justify-center bg-ds-canvas/80 backdrop-blur-sm\">\n        {content}\n      </div>\n    );\n  }\n\n  if (overlay) {\n    return (\n      <div className=\"absolute inset-0 z-10 flex items-center justify-center bg-ds-canvas/70 backdrop-blur-sm rounded-inherit\">\n        {content}\n      </div>\n    );\n  }\n\n  return content;\n}\n\n// Export individual components for direct use\nexport { Spinner, Dots, Pulse, Bars, Ring, Bounce, Wave, Skeleton };\n"],"mappings":"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"}
+{"version":3,"file":"loading-BiM4mKh6.cjs","names":[],"sources":["../../src/components/data-display/loading/Loading.tsx"],"sourcesContent":["import { LoaderIcon, RingLoaderIcon } from \"../../icons\";\n\nexport type LoadingVariant =\n  | \"spinner\"\n  | \"dots\"\n  | \"pulse\"\n  | \"bars\"\n  | \"ring\"\n  | \"bounce\"\n  | \"wave\"\n  | \"skeleton\";\n\nexport type LoadingSize = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n\nexport interface LoadingProps {\n  /** The variant/style of the loading indicator */\n  variant?: LoadingVariant;\n  /** Size of the loading indicator */\n  size?: LoadingSize;\n  /** Custom color for the loading indicator */\n  color?: string;\n  /** Text to display alongside the loading indicator */\n  text?: string;\n  /** Position of the text relative to the indicator */\n  textPosition?: \"right\" | \"bottom\";\n  /** Whether to show as a full-screen overlay */\n  fullScreen?: boolean;\n  /** Whether to show as an overlay within parent container */\n  overlay?: boolean;\n  /** Custom className */\n  className?: string;\n  /** Skeleton specific: width */\n  skeletonWidth?: string;\n  /** Skeleton specific: height */\n  skeletonHeight?: string;\n  /** Skeleton specific: rounded style */\n  skeletonRounded?: \"none\" | \"sm\" | \"md\" | \"lg\" | \"full\";\n}\n\nconst sizeMap: Record<LoadingSize, { container: string; text: string }> = {\n  xs: { container: \"w-4 h-4\", text: \"text-xs\" },\n  sm: { container: \"w-6 h-6\", text: \"text-sm\" },\n  md: { container: \"w-8 h-8\", text: \"text-sm\" },\n  lg: { container: \"w-12 h-12\", text: \"text-base\" },\n  xl: { container: \"w-16 h-16\", text: \"text-lg\" },\n};\n\n// Spinner - Classic rotating circle\nfunction Spinner({\n  size = \"md\",\n  color = \"currentColor\",\n}: {\n  size?: LoadingSize;\n  color?: string;\n}) {\n  return (\n    <LoaderIcon\n      className={`animate-spin ${sizeMap[size].container}`}\n      color={color}\n      aria-hidden=\"true\"\n    />\n  );\n}\n\n// Dots - Three bouncing dots\nfunction Dots({\n  size = \"md\",\n  color = \"currentColor\",\n}: {\n  size?: LoadingSize;\n  color?: string;\n}) {\n  const dotSize = {\n    xs: \"w-1.5 h-1.5\",\n    sm: \"w-2 h-2\",\n    md: \"w-2.5 h-2.5\",\n    lg: \"w-3 h-3\",\n    xl: \"w-4 h-4\",\n  };\n\n  return (\n    <div className=\"flex items-center gap-1\">\n      {[0, 1, 2].map((i) => (\n        <div\n          key={i}\n          className={`${dotSize[size]} rounded-full animate-bounce`}\n          style={{\n            backgroundColor: color,\n            animationDelay: `${i * 0.15}s`,\n            animationDuration: \"0.6s\",\n          }}\n        />\n      ))}\n    </div>\n  );\n}\n\n// Pulse - Pulsing circle\nfunction Pulse({\n  size = \"md\",\n  color = \"currentColor\",\n}: {\n  size?: LoadingSize;\n  color?: string;\n}) {\n  return (\n    <div className={`relative ${sizeMap[size].container}`}>\n      <div\n        className=\"absolute inset-0 rounded-full animate-ping opacity-75\"\n        style={{ backgroundColor: color }}\n      />\n      <div\n        className=\"absolute inset-2 rounded-full\"\n        style={{ backgroundColor: color }}\n      />\n    </div>\n  );\n}\n\n// Bars - Audio-style animated bars\nfunction Bars({\n  size = \"md\",\n  color = \"currentColor\",\n}: {\n  size?: LoadingSize;\n  color?: string;\n}) {\n  const barWidth = {\n    xs: \"w-0.5\",\n    sm: \"w-1\",\n    md: \"w-1.5\",\n    lg: \"w-2\",\n    xl: \"w-2.5\",\n  };\n\n  return (\n    <div className={`flex items-end gap-0.5 ${sizeMap[size].container}`}>\n      {[0, 1, 2, 3, 4].map((i) => (\n        <div\n          key={i}\n          className={`${barWidth[size]} rounded-sm`}\n          style={{\n            backgroundColor: color,\n            animation: \"loading-bars 1s ease-in-out infinite\",\n            animationDelay: `${i * 0.1}s`,\n            height: \"40%\",\n          }}\n        />\n      ))}\n      <style>{`\n        @keyframes loading-bars {\n          0%, 100% { height: 40%; }\n          50% { height: 100%; }\n        }\n      `}</style>\n    </div>\n  );\n}\n\n// Ring - Rotating ring with gradient\nfunction Ring({\n  size = \"md\",\n  color = \"currentColor\",\n}: {\n  size?: LoadingSize;\n  color?: string;\n}) {\n  const strokeWidth = {\n    xs: 3,\n    sm: 3,\n    md: 4,\n    lg: 4,\n    xl: 5,\n  };\n\n  return (\n    <RingLoaderIcon\n      className={`animate-spin ${sizeMap[size].container}`}\n      color={color}\n      strokeWidth={strokeWidth[size]}\n      aria-hidden=\"true\"\n    />\n  );\n}\n\n// Bounce - Three bouncing circles\nfunction Bounce({\n  size = \"md\",\n  color = \"currentColor\",\n}: {\n  size?: LoadingSize;\n  color?: string;\n}) {\n  const dotSize = {\n    xs: \"w-2 h-2\",\n    sm: \"w-3 h-3\",\n    md: \"w-4 h-4\",\n    lg: \"w-5 h-5\",\n    xl: \"w-6 h-6\",\n  };\n\n  return (\n    <div className=\"flex items-center gap-1\">\n      {[0, 1, 2].map((i) => (\n        <div\n          key={i}\n          className={`${dotSize[size]} rounded-full`}\n          style={{\n            backgroundColor: color,\n            animation: \"loading-bounce 1.4s ease-in-out infinite both\",\n            animationDelay: `${i * 0.16}s`,\n          }}\n        />\n      ))}\n      <style>{`\n        @keyframes loading-bounce {\n          0%, 80%, 100% { transform: scale(0); }\n          40% { transform: scale(1); }\n        }\n      `}</style>\n    </div>\n  );\n}\n\n// Wave - Wave animation\nfunction Wave({\n  size = \"md\",\n  color = \"currentColor\",\n}: {\n  size?: LoadingSize;\n  color?: string;\n}) {\n  const barHeight = {\n    xs: \"h-3\",\n    sm: \"h-4\",\n    md: \"h-6\",\n    lg: \"h-8\",\n    xl: \"h-10\",\n  };\n  const barWidth = {\n    xs: \"w-0.5\",\n    sm: \"w-1\",\n    md: \"w-1\",\n    lg: \"w-1.5\",\n    xl: \"w-2\",\n  };\n\n  return (\n    <div className=\"flex items-center gap-0.5\">\n      {[0, 1, 2, 3, 4].map((i) => (\n        <div\n          key={i}\n          className={`${barWidth[size]} ${barHeight[size]} rounded-full`}\n          style={{\n            backgroundColor: color,\n            animation: \"loading-wave 1.2s ease-in-out infinite\",\n            animationDelay: `${i * 0.1}s`,\n          }}\n        />\n      ))}\n      <style>{`\n        @keyframes loading-wave {\n          0%, 40%, 100% { transform: scaleY(0.4); }\n          20% { transform: scaleY(1); }\n        }\n      `}</style>\n    </div>\n  );\n}\n\n// Skeleton - Loading placeholder\nfunction Skeleton({\n  width = \"100%\",\n  height = \"1rem\",\n  rounded = \"md\",\n}: {\n  width?: string;\n  height?: string;\n  rounded?: \"none\" | \"sm\" | \"md\" | \"lg\" | \"full\";\n}) {\n  const roundedMap = {\n    none: \"\",\n    sm: \"rounded-sm\",\n    md: \"rounded-md\",\n    lg: \"rounded-lg\",\n    full: \"rounded-full\",\n  };\n\n  return (\n    <div\n      className={`animate-pulse bg-ds-surface-3 ${roundedMap[rounded]}`}\n      style={{ width, height }}\n    />\n  );\n}\n\nexport default function Loading({\n  variant = \"spinner\",\n  size = \"md\",\n  color = \"var(--ds-color-accent)\",\n  text,\n  textPosition = \"right\",\n  fullScreen = false,\n  overlay = false,\n  className = \"\",\n  skeletonWidth,\n  skeletonHeight,\n  skeletonRounded = \"md\",\n}: LoadingProps) {\n  const renderLoader = () => {\n    switch (variant) {\n      case \"spinner\":\n        return <Spinner size={size} color={color} />;\n      case \"dots\":\n        return <Dots size={size} color={color} />;\n      case \"pulse\":\n        return <Pulse size={size} color={color} />;\n      case \"bars\":\n        return <Bars size={size} color={color} />;\n      case \"ring\":\n        return <Ring size={size} color={color} />;\n      case \"bounce\":\n        return <Bounce size={size} color={color} />;\n      case \"wave\":\n        return <Wave size={size} color={color} />;\n      case \"skeleton\":\n        return (\n          <Skeleton\n            width={skeletonWidth}\n            height={skeletonHeight}\n            rounded={skeletonRounded}\n          />\n        );\n      default:\n        return <Spinner size={size} color={color} />;\n    }\n  };\n\n  const content = (\n    <div\n      className={`inline-flex items-center ${\n        textPosition === \"bottom\" ? \"flex-col gap-2\" : \"flex-row gap-3\"\n      } ${className}`}\n    >\n      {renderLoader()}\n      {text && (\n        <span className={`${sizeMap[size].text} text-ds-2 font-medium`}>\n          {text}\n        </span>\n      )}\n    </div>\n  );\n\n  if (fullScreen) {\n    return (\n      <div className=\"fixed inset-0 z-50 flex items-center justify-center bg-ds-canvas/80 backdrop-blur-sm\">\n        {content}\n      </div>\n    );\n  }\n\n  if (overlay) {\n    return (\n      <div className=\"absolute inset-0 z-10 flex items-center justify-center bg-ds-canvas/70 backdrop-blur-sm rounded-inherit\">\n        {content}\n      </div>\n    );\n  }\n\n  return content;\n}\n\n// Export individual components for direct use\nexport { Spinner, Dots, Pulse, Bars, Ring, Bounce, Wave, Skeleton };\n"],"mappings":"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"}

package/dist/chunks/loading-Dtosnb4A.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"loading-Dtosnb4A.mjs","names":[],"sources":["../../src/components/data-display/loading/Loading.tsx"],"sourcesContent":["import { LoaderIcon, RingLoaderIcon } from \"../../icons\";\n\nexport type LoadingVariant =\n  | \"spinner\"\n  | \"dots\"\n  | \"pulse\"\n  | \"bars\"\n  | \"ring\"\n  | \"bounce\"\n  | \"wave\"\n  | \"skeleton\";\n\nexport type LoadingSize = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n\nexport interface LoadingProps {\n  /** The variant/style of the loading indicator */\n  variant?: LoadingVariant;\n  /** Size of the loading indicator */\n  size?: LoadingSize;\n  /** Custom color for the loading indicator */\n  color?: string;\n  /** Text to display alongside the loading indicator */\n  text?: string;\n  /** Position of the text relative to the indicator */\n  textPosition?: \"right\" | \"bottom\";\n  /** Whether to show as a full-screen overlay */\n  fullScreen?: boolean;\n  /** Whether to show as an overlay within parent container */\n  overlay?: boolean;\n  /** Custom className */\n  className?: string;\n  /** Skeleton specific: width */\n  skeletonWidth?: string;\n  /** Skeleton specific: height */\n  skeletonHeight?: string;\n  /** Skeleton specific: rounded style */\n  skeletonRounded?: \"none\" | \"sm\" | \"md\" | \"lg\" | \"full\";\n}\n\nconst sizeMap: Record<LoadingSize, { container: string; text: string }> = {\n  xs: { container: \"w-4 h-4\", text: \"text-xs\" },\n  sm: { container: \"w-6 h-6\", text: \"text-sm\" },\n  md: { container: \"w-8 h-8\", text: \"text-sm\" },\n  lg: { container: \"w-12 h-12\", text: \"text-base\" },\n  xl: { container: \"w-16 h-16\", text: \"text-lg\" },\n};\n\n// Spinner - Classic rotating circle\nfunction Spinner({\n  size = \"md\",\n  color = \"currentColor\",\n}: {\n  size?: LoadingSize;\n  color?: string;\n}) {\n  return (\n    <LoaderIcon\n      className={`animate-spin ${sizeMap[size].container}`}\n      color={color}\n      aria-hidden=\"true\"\n    />\n  );\n}\n\n// Dots - Three bouncing dots\nfunction Dots({\n  size = \"md\",\n  color = \"currentColor\",\n}: {\n  size?: LoadingSize;\n  color?: string;\n}) {\n  const dotSize = {\n    xs: \"w-1.5 h-1.5\",\n    sm: \"w-2 h-2\",\n    md: \"w-2.5 h-2.5\",\n    lg: \"w-3 h-3\",\n    xl: \"w-4 h-4\",\n  };\n\n  return (\n    <div className=\"flex items-center gap-1\">\n      {[0, 1, 2].map((i) => (\n        <div\n          key={i}\n          className={`${dotSize[size]} rounded-full animate-bounce`}\n          style={{\n            backgroundColor: color,\n            animationDelay: `${i * 0.15}s`,\n            animationDuration: \"0.6s\",\n          }}\n        />\n      ))}\n    </div>\n  );\n}\n\n// Pulse - Pulsing circle\nfunction Pulse({\n  size = \"md\",\n  color = \"currentColor\",\n}: {\n  size?: LoadingSize;\n  color?: string;\n}) {\n  return (\n    <div className={`relative ${sizeMap[size].container}`}>\n      <div\n        className=\"absolute inset-0 rounded-full animate-ping opacity-75\"\n        style={{ backgroundColor: color }}\n      />\n      <div\n        className=\"absolute inset-2 rounded-full\"\n        style={{ backgroundColor: color }}\n      />\n    </div>\n  );\n}\n\n// Bars - Audio-style animated bars\nfunction Bars({\n  size = \"md\",\n  color = \"currentColor\",\n}: {\n  size?: LoadingSize;\n  color?: string;\n}) {\n  const barWidth = {\n    xs: \"w-0.5\",\n    sm: \"w-1\",\n    md: \"w-1.5\",\n    lg: \"w-2\",\n    xl: \"w-2.5\",\n  };\n\n  return (\n    <div className={`flex items-end gap-0.5 ${sizeMap[size].container}`}>\n      {[0, 1, 2, 3, 4].map((i) => (\n        <div\n          key={i}\n          className={`${barWidth[size]} rounded-sm`}\n          style={{\n            backgroundColor: color,\n            animation: \"loading-bars 1s ease-in-out infinite\",\n            animationDelay: `${i * 0.1}s`,\n            height: \"40%\",\n          }}\n        />\n      ))}\n      <style>{`\n        @keyframes loading-bars {\n          0%, 100% { height: 40%; }\n          50% { height: 100%; }\n        }\n      `}</style>\n    </div>\n  );\n}\n\n// Ring - Rotating ring with gradient\nfunction Ring({\n  size = \"md\",\n  color = \"currentColor\",\n}: {\n  size?: LoadingSize;\n  color?: string;\n}) {\n  const strokeWidth = {\n    xs: 3,\n    sm: 3,\n    md: 4,\n    lg: 4,\n    xl: 5,\n  };\n\n  return (\n    <RingLoaderIcon\n      className={`animate-spin ${sizeMap[size].container}`}\n      color={color}\n      strokeWidth={strokeWidth[size]}\n      aria-hidden=\"true\"\n    />\n  );\n}\n\n// Bounce - Three bouncing circles\nfunction Bounce({\n  size = \"md\",\n  color = \"currentColor\",\n}: {\n  size?: LoadingSize;\n  color?: string;\n}) {\n  const dotSize = {\n    xs: \"w-2 h-2\",\n    sm: \"w-3 h-3\",\n    md: \"w-4 h-4\",\n    lg: \"w-5 h-5\",\n    xl: \"w-6 h-6\",\n  };\n\n  return (\n    <div className=\"flex items-center gap-1\">\n      {[0, 1, 2].map((i) => (\n        <div\n          key={i}\n          className={`${dotSize[size]} rounded-full`}\n          style={{\n            backgroundColor: color,\n            animation: \"loading-bounce 1.4s ease-in-out infinite both\",\n            animationDelay: `${i * 0.16}s`,\n          }}\n        />\n      ))}\n      <style>{`\n        @keyframes loading-bounce {\n          0%, 80%, 100% { transform: scale(0); }\n          40% { transform: scale(1); }\n        }\n      `}</style>\n    </div>\n  );\n}\n\n// Wave - Wave animation\nfunction Wave({\n  size = \"md\",\n  color = \"currentColor\",\n}: {\n  size?: LoadingSize;\n  color?: string;\n}) {\n  const barHeight = {\n    xs: \"h-3\",\n    sm: \"h-4\",\n    md: \"h-6\",\n    lg: \"h-8\",\n    xl: \"h-10\",\n  };\n  const barWidth = {\n    xs: \"w-0.5\",\n    sm: \"w-1\",\n    md: \"w-1\",\n    lg: \"w-1.5\",\n    xl: \"w-2\",\n  };\n\n  return (\n    <div className=\"flex items-center gap-0.5\">\n      {[0, 1, 2, 3, 4].map((i) => (\n        <div\n          key={i}\n          className={`${barWidth[size]} ${barHeight[size]} rounded-full`}\n          style={{\n            backgroundColor: color,\n            animation: \"loading-wave 1.2s ease-in-out infinite\",\n            animationDelay: `${i * 0.1}s`,\n          }}\n        />\n      ))}\n      <style>{`\n        @keyframes loading-wave {\n          0%, 40%, 100% { transform: scaleY(0.4); }\n          20% { transform: scaleY(1); }\n        }\n      `}</style>\n    </div>\n  );\n}\n\n// Skeleton - Loading placeholder\nfunction Skeleton({\n  width = \"100%\",\n  height = \"1rem\",\n  rounded = \"md\",\n}: {\n  width?: string;\n  height?: string;\n  rounded?: \"none\" | \"sm\" | \"md\" | \"lg\" | \"full\";\n}) {\n  const roundedMap = {\n    none: \"\",\n    sm: \"rounded-sm\",\n    md: \"rounded-md\",\n    lg: \"rounded-lg\",\n    full: \"rounded-full\",\n  };\n\n  return (\n    <div\n      className={`animate-pulse bg-ds-surface-3 ${roundedMap[rounded]}`}\n      style={{ width, height }}\n    />\n  );\n}\n\nexport default function Loading({\n  variant = \"spinner\",\n  size = \"md\",\n  color = \"var(--ds-color-accent)\",\n  text,\n  textPosition = \"right\",\n  fullScreen = false,\n  overlay = false,\n  className = \"\",\n  skeletonWidth,\n  skeletonHeight,\n  skeletonRounded = \"md\",\n}: LoadingProps) {\n  const renderLoader = () => {\n    switch (variant) {\n      case \"spinner\":\n        return <Spinner size={size} color={color} />;\n      case \"dots\":\n        return <Dots size={size} color={color} />;\n      case \"pulse\":\n        return <Pulse size={size} color={color} />;\n      case \"bars\":\n        return <Bars size={size} color={color} />;\n      case \"ring\":\n        return <Ring size={size} color={color} />;\n      case \"bounce\":\n        return <Bounce size={size} color={color} />;\n      case \"wave\":\n        return <Wave size={size} color={color} />;\n      case \"skeleton\":\n        return (\n          <Skeleton\n            width={skeletonWidth}\n            height={skeletonHeight}\n            rounded={skeletonRounded}\n          />\n        );\n      default:\n        return <Spinner size={size} color={color} />;\n    }\n  };\n\n  const content = (\n    <div\n      className={`inline-flex items-center ${\n        textPosition === \"bottom\" ? \"flex-col gap-2\" : \"flex-row gap-3\"\n      } ${className}`}\n    >\n      {renderLoader()}\n      {text && (\n        <span className={`${sizeMap[size].text} text-ds-2 font-medium`}>\n          {text}\n        </span>\n      )}\n    </div>\n  );\n\n  if (fullScreen) {\n    return (\n      <div className=\"fixed inset-0 z-50 flex items-center justify-center bg-ds-canvas/80 backdrop-blur-sm\">\n        {content}\n      </div>\n    );\n  }\n\n  if (overlay) {\n    return (\n      <div className=\"absolute inset-0 z-10 flex items-center justify-center bg-ds-canvas/70 backdrop-blur-sm rounded-inherit\">\n        {content}\n      </div>\n    );\n  }\n\n  return content;\n}\n\n// Export individual components for direct use\nexport { Spinner, Dots, Pulse, Bars, Ring, Bounce, Wave, Skeleton };\n"],"mappings":"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"}
+{"version":3,"file":"loading-Dtosnb4A.mjs","names":[],"sources":["../../src/components/data-display/loading/Loading.tsx"],"sourcesContent":["import { LoaderIcon, RingLoaderIcon } from \"../../icons\";\n\nexport type LoadingVariant =\n  | \"spinner\"\n  | \"dots\"\n  | \"pulse\"\n  | \"bars\"\n  | \"ring\"\n  | \"bounce\"\n  | \"wave\"\n  | \"skeleton\";\n\nexport type LoadingSize = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n\nexport interface LoadingProps {\n  /** The variant/style of the loading indicator */\n  variant?: LoadingVariant;\n  /** Size of the loading indicator */\n  size?: LoadingSize;\n  /** Custom color for the loading indicator */\n  color?: string;\n  /** Text to display alongside the loading indicator */\n  text?: string;\n  /** Position of the text relative to the indicator */\n  textPosition?: \"right\" | \"bottom\";\n  /** Whether to show as a full-screen overlay */\n  fullScreen?: boolean;\n  /** Whether to show as an overlay within parent container */\n  overlay?: boolean;\n  /** Custom className */\n  className?: string;\n  /** Skeleton specific: width */\n  skeletonWidth?: string;\n  /** Skeleton specific: height */\n  skeletonHeight?: string;\n  /** Skeleton specific: rounded style */\n  skeletonRounded?: \"none\" | \"sm\" | \"md\" | \"lg\" | \"full\";\n}\n\nconst sizeMap: Record<LoadingSize, { container: string; text: string }> = {\n  xs: { container: \"w-4 h-4\", text: \"text-xs\" },\n  sm: { container: \"w-6 h-6\", text: \"text-sm\" },\n  md: { container: \"w-8 h-8\", text: \"text-sm\" },\n  lg: { container: \"w-12 h-12\", text: \"text-base\" },\n  xl: { container: \"w-16 h-16\", text: \"text-lg\" },\n};\n\n// Spinner - Classic rotating circle\nfunction Spinner({\n  size = \"md\",\n  color = \"currentColor\",\n}: {\n  size?: LoadingSize;\n  color?: string;\n}) {\n  return (\n    <LoaderIcon\n      className={`animate-spin ${sizeMap[size].container}`}\n      color={color}\n      aria-hidden=\"true\"\n    />\n  );\n}\n\n// Dots - Three bouncing dots\nfunction Dots({\n  size = \"md\",\n  color = \"currentColor\",\n}: {\n  size?: LoadingSize;\n  color?: string;\n}) {\n  const dotSize = {\n    xs: \"w-1.5 h-1.5\",\n    sm: \"w-2 h-2\",\n    md: \"w-2.5 h-2.5\",\n    lg: \"w-3 h-3\",\n    xl: \"w-4 h-4\",\n  };\n\n  return (\n    <div className=\"flex items-center gap-1\">\n      {[0, 1, 2].map((i) => (\n        <div\n          key={i}\n          className={`${dotSize[size]} rounded-full animate-bounce`}\n          style={{\n            backgroundColor: color,\n            animationDelay: `${i * 0.15}s`,\n            animationDuration: \"0.6s\",\n          }}\n        />\n      ))}\n    </div>\n  );\n}\n\n// Pulse - Pulsing circle\nfunction Pulse({\n  size = \"md\",\n  color = \"currentColor\",\n}: {\n  size?: LoadingSize;\n  color?: string;\n}) {\n  return (\n    <div className={`relative ${sizeMap[size].container}`}>\n      <div\n        className=\"absolute inset-0 rounded-full animate-ping opacity-75\"\n        style={{ backgroundColor: color }}\n      />\n      <div\n        className=\"absolute inset-2 rounded-full\"\n        style={{ backgroundColor: color }}\n      />\n    </div>\n  );\n}\n\n// Bars - Audio-style animated bars\nfunction Bars({\n  size = \"md\",\n  color = \"currentColor\",\n}: {\n  size?: LoadingSize;\n  color?: string;\n}) {\n  const barWidth = {\n    xs: \"w-0.5\",\n    sm: \"w-1\",\n    md: \"w-1.5\",\n    lg: \"w-2\",\n    xl: \"w-2.5\",\n  };\n\n  return (\n    <div className={`flex items-end gap-0.5 ${sizeMap[size].container}`}>\n      {[0, 1, 2, 3, 4].map((i) => (\n        <div\n          key={i}\n          className={`${barWidth[size]} rounded-sm`}\n          style={{\n            backgroundColor: color,\n            animation: \"loading-bars 1s ease-in-out infinite\",\n            animationDelay: `${i * 0.1}s`,\n            height: \"40%\",\n          }}\n        />\n      ))}\n      <style>{`\n        @keyframes loading-bars {\n          0%, 100% { height: 40%; }\n          50% { height: 100%; }\n        }\n      `}</style>\n    </div>\n  );\n}\n\n// Ring - Rotating ring with gradient\nfunction Ring({\n  size = \"md\",\n  color = \"currentColor\",\n}: {\n  size?: LoadingSize;\n  color?: string;\n}) {\n  const strokeWidth = {\n    xs: 3,\n    sm: 3,\n    md: 4,\n    lg: 4,\n    xl: 5,\n  };\n\n  return (\n    <RingLoaderIcon\n      className={`animate-spin ${sizeMap[size].container}`}\n      color={color}\n      strokeWidth={strokeWidth[size]}\n      aria-hidden=\"true\"\n    />\n  );\n}\n\n// Bounce - Three bouncing circles\nfunction Bounce({\n  size = \"md\",\n  color = \"currentColor\",\n}: {\n  size?: LoadingSize;\n  color?: string;\n}) {\n  const dotSize = {\n    xs: \"w-2 h-2\",\n    sm: \"w-3 h-3\",\n    md: \"w-4 h-4\",\n    lg: \"w-5 h-5\",\n    xl: \"w-6 h-6\",\n  };\n\n  return (\n    <div className=\"flex items-center gap-1\">\n      {[0, 1, 2].map((i) => (\n        <div\n          key={i}\n          className={`${dotSize[size]} rounded-full`}\n          style={{\n            backgroundColor: color,\n            animation: \"loading-bounce 1.4s ease-in-out infinite both\",\n            animationDelay: `${i * 0.16}s`,\n          }}\n        />\n      ))}\n      <style>{`\n        @keyframes loading-bounce {\n          0%, 80%, 100% { transform: scale(0); }\n          40% { transform: scale(1); }\n        }\n      `}</style>\n    </div>\n  );\n}\n\n// Wave - Wave animation\nfunction Wave({\n  size = \"md\",\n  color = \"currentColor\",\n}: {\n  size?: LoadingSize;\n  color?: string;\n}) {\n  const barHeight = {\n    xs: \"h-3\",\n    sm: \"h-4\",\n    md: \"h-6\",\n    lg: \"h-8\",\n    xl: \"h-10\",\n  };\n  const barWidth = {\n    xs: \"w-0.5\",\n    sm: \"w-1\",\n    md: \"w-1\",\n    lg: \"w-1.5\",\n    xl: \"w-2\",\n  };\n\n  return (\n    <div className=\"flex items-center gap-0.5\">\n      {[0, 1, 2, 3, 4].map((i) => (\n        <div\n          key={i}\n          className={`${barWidth[size]} ${barHeight[size]} rounded-full`}\n          style={{\n            backgroundColor: color,\n            animation: \"loading-wave 1.2s ease-in-out infinite\",\n            animationDelay: `${i * 0.1}s`,\n          }}\n        />\n      ))}\n      <style>{`\n        @keyframes loading-wave {\n          0%, 40%, 100% { transform: scaleY(0.4); }\n          20% { transform: scaleY(1); }\n        }\n      `}</style>\n    </div>\n  );\n}\n\n// Skeleton - Loading placeholder\nfunction Skeleton({\n  width = \"100%\",\n  height = \"1rem\",\n  rounded = \"md\",\n}: {\n  width?: string;\n  height?: string;\n  rounded?: \"none\" | \"sm\" | \"md\" | \"lg\" | \"full\";\n}) {\n  const roundedMap = {\n    none: \"\",\n    sm: \"rounded-sm\",\n    md: \"rounded-md\",\n    lg: \"rounded-lg\",\n    full: \"rounded-full\",\n  };\n\n  return (\n    <div\n      className={`animate-pulse bg-ds-surface-3 ${roundedMap[rounded]}`}\n      style={{ width, height }}\n    />\n  );\n}\n\nexport default function Loading({\n  variant = \"spinner\",\n  size = \"md\",\n  color = \"var(--ds-color-accent)\",\n  text,\n  textPosition = \"right\",\n  fullScreen = false,\n  overlay = false,\n  className = \"\",\n  skeletonWidth,\n  skeletonHeight,\n  skeletonRounded = \"md\",\n}: LoadingProps) {\n  const renderLoader = () => {\n    switch (variant) {\n      case \"spinner\":\n        return <Spinner size={size} color={color} />;\n      case \"dots\":\n        return <Dots size={size} color={color} />;\n      case \"pulse\":\n        return <Pulse size={size} color={color} />;\n      case \"bars\":\n        return <Bars size={size} color={color} />;\n      case \"ring\":\n        return <Ring size={size} color={color} />;\n      case \"bounce\":\n        return <Bounce size={size} color={color} />;\n      case \"wave\":\n        return <Wave size={size} color={color} />;\n      case \"skeleton\":\n        return (\n          <Skeleton\n            width={skeletonWidth}\n            height={skeletonHeight}\n            rounded={skeletonRounded}\n          />\n        );\n      default:\n        return <Spinner size={size} color={color} />;\n    }\n  };\n\n  const content = (\n    <div\n      className={`inline-flex items-center ${\n        textPosition === \"bottom\" ? \"flex-col gap-2\" : \"flex-row gap-3\"\n      } ${className}`}\n    >\n      {renderLoader()}\n      {text && (\n        <span className={`${sizeMap[size].text} text-ds-2 font-medium`}>\n          {text}\n        </span>\n      )}\n    </div>\n  );\n\n  if (fullScreen) {\n    return (\n      <div className=\"fixed inset-0 z-50 flex items-center justify-center bg-ds-canvas/80 backdrop-blur-sm\">\n        {content}\n      </div>\n    );\n  }\n\n  if (overlay) {\n    return (\n      <div className=\"absolute inset-0 z-10 flex items-center justify-center bg-ds-canvas/70 backdrop-blur-sm rounded-inherit\">\n        {content}\n      </div>\n    );\n  }\n\n  return content;\n}\n\n// Export individual components for direct use\nexport { Spinner, Dots, Pulse, Bars, Ring, Bounce, Wave, Skeleton };\n"],"mappings":"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"}

package/dist/chunks/{multi-select-combobox-BzqYLVpV.cjs → multi-select-combobox-C0DoDzxQ.cjs}

@@ -1,7 +1,7 @@
 const require_chunk = require("./chunk-B_GkZjkl.cjs");
-const require_utils = require("./utils-B4SmmY4J.cjs");
+const require_utils = require("./utils-LRbEQHYs.cjs");
 const require_icons = require("./icons-CRanVZB1.cjs");
-const require_DropdownMenu = require("./DropdownMenu-DOvo5pV_.cjs");
+const require_DropdownMenu = require("./DropdownMenu-BDrNYO-D.cjs");
 let react = require("react");
 react = require_chunk.__toESM(react, 1);
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -37,7 +37,7 @@ var MultiSelectCombobox = ({ options, value = [], onChange, placeholder = "Selec
 			if (!nextOpen) setSearch("");
 		},
 		animationClassName: "origin-top-left",
-		panelClassName: "top-[40px] left-0 z-20 mt-1 flex max-h-60 flex-col rounded-lg border border-ds-border-2 bg-ds-surface-1 shadow-3 backdrop-blur-xl transition",
+		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",
 		trigger: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, {
 			style: { backgroundImage: framer_motion.useMotionTemplate`
               radial-gradient(
@@ -60,7 +60,7 @@ var MultiSelectCombobox = ({ options, value = [], onChange, placeholder = "Selec
 							type: "button",
 							onMouseDown: (e) => e.stopPropagation(),
 							onClick: (e) => handleRemoveTag(value[index], e),
-							className: "ml-0.5 rounded-full p-0.5 text-ds-2 transition-colors hover:bg-ds-surface-1 hover:text-ds-1",
+							className: "ms-0.5 rounded-full p-0.5 text-ds-2 transition-colors hover:bg-ds-surface-1 hover:text-ds-1",
 							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.CloseIcon, {
 								className: "h-3 w-3",
 								"aria-hidden": "true"
@@ -71,7 +71,7 @@ var MultiSelectCombobox = ({ options, value = [], onChange, placeholder = "Selec
 						children: placeholder
 					})
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: require_utils.mergeClassNames("ml-2 shrink-0 text-ds-2 transition-transform duration-300", open ? "rotate-180" : "rotate-0"),
+					className: require_utils.mergeClassNames("ms-2 shrink-0 text-ds-2 transition-transform duration-300", open ? "rotate-180" : "rotate-0"),
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.ChevronDownIcon, {
 						width: 24,
 						height: 24,
@@ -124,4 +124,4 @@ Object.defineProperty(exports, "MultiSelectCombobox", {
 	}
 });
 
-//# sourceMappingURL=multi-select-combobox-BzqYLVpV.cjs.map
+//# sourceMappingURL=multi-select-combobox-C0DoDzxQ.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"multi-select-combobox-C0DoDzxQ.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/{multi-select-combobox-BrFtvCrS.mjs → multi-select-combobox-Do23ZfOQ.mjs}

@@ -1,6 +1,6 @@
-import { n as mergeClassNames } from "./utils-ati1KkDb.mjs";
+import { n as mergeClassNames } from "./utils-7S0u48mU.mjs";
 import { J as CheckIcon, N as ChevronDownIcon, q as CloseIcon } from "./icons-bx3nrxNv.mjs";
-import { t as DropdownMenu } from "./DropdownMenu-C17Zqu_E.mjs";
+import { t as DropdownMenu } from "./DropdownMenu-BtTOri-A.mjs";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { motion, useMotionTemplate, useMotionValue } from "framer-motion";
@@ -35,7 +35,7 @@ var MultiSelectCombobox = ({ options, value = [], onChange, placeholder = "Selec
 			if (!nextOpen) setSearch("");
 		},
 		animationClassName: "origin-top-left",
-		panelClassName: "top-[40px] left-0 z-20 mt-1 flex max-h-60 flex-col rounded-lg border border-ds-border-2 bg-ds-surface-1 shadow-3 backdrop-blur-xl transition",
+		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",
 		trigger: /* @__PURE__ */ jsx(motion.div, {
 			style: { backgroundImage: useMotionTemplate`
               radial-gradient(
@@ -58,7 +58,7 @@ var MultiSelectCombobox = ({ options, value = [], onChange, placeholder = "Selec
 							type: "button",
 							onMouseDown: (e) => e.stopPropagation(),
 							onClick: (e) => handleRemoveTag(value[index], e),
-							className: "ml-0.5 rounded-full p-0.5 text-ds-2 transition-colors hover:bg-ds-surface-1 hover:text-ds-1",
+							className: "ms-0.5 rounded-full p-0.5 text-ds-2 transition-colors hover:bg-ds-surface-1 hover:text-ds-1",
 							children: /* @__PURE__ */ jsx(CloseIcon, {
 								className: "h-3 w-3",
 								"aria-hidden": "true"
@@ -69,7 +69,7 @@ var MultiSelectCombobox = ({ options, value = [], onChange, placeholder = "Selec
 						children: placeholder
 					})
 				}), /* @__PURE__ */ jsx("span", {
-					className: mergeClassNames("ml-2 shrink-0 text-ds-2 transition-transform duration-300", open ? "rotate-180" : "rotate-0"),
+					className: mergeClassNames("ms-2 shrink-0 text-ds-2 transition-transform duration-300", open ? "rotate-180" : "rotate-0"),
 					children: /* @__PURE__ */ jsx(ChevronDownIcon, {
 						width: 24,
 						height: 24,
@@ -117,4 +117,4 @@ var MultiSelectCombobox = ({ options, value = [], onChange, placeholder = "Selec
 //#endregion
 export { MultiSelectCombobox as t };
 
-//# sourceMappingURL=multi-select-combobox-BrFtvCrS.mjs.map
+//# sourceMappingURL=multi-select-combobox-Do23ZfOQ.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"multi-select-combobox-Do23ZfOQ.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/otp-input-CkhV-sGl.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"otp-input-CkhV-sGl.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-CkhV-sGl.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":";;;;AAuDA,IAAM,aAA2C;CAC/C,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,IAAM,gBAGF;CACF,UAAU;EACR,MAAM;EACN,OAAO;EACP,OAAO;EACR;CACD,QAAQ;EACN,MAAM;EACN,OACE;EACF,OAAO;EACR;CACD,YAAY;EACV,MAAM;EACN,OAAO;EACP,OAAO;EACR;CACF;AAED,IAAM,YAAA,GAAA,MAAA,aAEF,EACE,SAAS,GACT,UACA,YACA,OAAO,iBACP,eAAe,IACf,OAAO,MACP,UAAU,YACV,WAAW,OACX,QAAQ,OACR,cACA,cAAc,IACd,OAAO,OACP,YAAY,OACZ,OAAO,UACP,YAAY,IACZ,iBAAiB,IACjB,YAAY,iBAAA,GAAA,kBAAA,KAAC,QAAD;CAAM,WAAU;WAA0B;CAAQ,CAAA,EAC9D,qBAAqB,EAAE,EACvB,cAAc,YAAY,uBAE5B,QACG;CACH,MAAM,CAAC,QAAQ,cAAA,GAAA,MAAA,gBAAsC;AAEnD,UADgB,mBAAmB,cAEhC,MAAM,GAAG,CACT,MAAM,GAAG,OAAO,CAChB,OAAO,MAAM,OAAO,CAAC,KAAK,GAAG,CAAC,CAC9B,MAAM,GAAG,OAAO;GACnB;CAEF,MAAM,aAAA,GAAA,MAAA,QAAgD,EAAE,CAAC;AAGzD,EAAA,GAAA,MAAA,iBAAgB;AACd,MAAI,oBAAoB,KAAA,EAMtB,WALkB,gBACf,MAAM,GAAG,CACT,MAAM,GAAG,OAAO,CAChB,OAAO,MAAM,OAAO,CAAC,KAAK,GAAG,CAAC,CAC9B,MAAM,GAAG,OACF,CAAU;IAErB,CAAC,iBAAiB,OAAO,CAAC;AAG7B,EAAA,GAAA,MAAA,iBAAgB;AACd,MAAI,aAAa,UAAU,QAAQ,GACjC,WAAU,QAAQ,GAAG,OAAO;IAE7B,CAAC,UAAU,CAAC;CAEf,MAAM,cAAA,GAAA,MAAA,cACH,UAAkB;AACjB,MAAI,SAAS,KAAK,QAAQ,UAAU,UAAU,QAAQ,QAAQ;AAC5D,aAAU,QAAQ,QAAQ,OAAO;AACjC,aAAU,QAAQ,QAAQ,QAAQ;;IAGtC,CAAC,OAAO,CACT;CAED,MAAM,gBAAA,GAAA,MAAA,cACH,OAAe,MAAqC;EAEnD,MAAM,OADa,EAAE,OAAO,MACJ,MAAM,GAAG;AAGjC,MAAI,SAAS,YAAY,QAAQ,CAAC,OAAO,KAAK,KAAK,CACjD;EAGF,MAAM,YAAY,CAAC,GAAG,OAAO;AAC7B,YAAU,SAAS;AACnB,YAAU,UAAU;EAEpB,MAAM,WAAW,UAAU,KAAK,GAAG;AACnC,aAAW,SAAS;AAGpB,MAAI,QAAQ,QAAQ,SAAS,EAC3B,YAAW,QAAQ,EAAE;AAIvB,MAAI,UAAU,OAAO,MAAM,MAAM,GAAG,IAAI,UAAU,WAAW,OAC3D,cAAa,SAAS;IAG1B;EAAC;EAAQ;EAAU;EAAY;EAAQ;EAAM;EAAW,CACzD;CAED,MAAM,iBAAA,GAAA,MAAA,cACH,OAAe,MAAuC;AACrD,UAAQ,EAAE,KAAV;GACE,KAAK;AACH,MAAE,gBAAgB;IAClB,MAAM,YAAY,CAAC,GAAG,OAAO;AAC7B,QAAI,OAAO,QAAQ;AAEjB,eAAU,SAAS;AACnB,eAAU,UAAU;AACpB,gBAAW,UAAU,KAAK,GAAG,CAAC;eACrB,QAAQ,GAAG;AAEpB,eAAU,QAAQ,KAAK;AACvB,eAAU,UAAU;AACpB,gBAAW,UAAU,KAAK,GAAG,CAAC;AAC9B,gBAAW,QAAQ,EAAE;;AAEvB;GACF,KAAK;AACH,MAAE,gBAAgB;AAClB,eAAW,QAAQ,EAAE;AACrB;GACF,KAAK;AACH,MAAE,gBAAgB;AAClB,eAAW,QAAQ,EAAE;AACrB;GACF,KAAK;AACH,MAAE,gBAAgB;IAClB,MAAM,eAAe,CAAC,GAAG,OAAO;AAChC,iBAAa,SAAS;AACtB,cAAU,aAAa;AACvB,eAAW,aAAa,KAAK,GAAG,CAAC;AACjC;;IAGN;EAAC;EAAQ;EAAU;EAAW,CAC/B;CAED,MAAM,eAAA,GAAA,MAAA,cACH,MAAwC;AACvC,IAAE,gBAAgB;EAClB,MAAM,aAAa,EAAE,cAAc,QAAQ,OAAO,CAAC,MAAM,GAAG,OAAO;AAGnE,MAAI,SAAS,YAAY,CAAC,QAAQ,KAAK,WAAW,CAChD;EAGF,MAAM,YAAY,WACf,MAAM,GAAG,CACT,MAAM,GAAG,OAAO,CAChB,OAAO,MAAM,OAAO,CAAC,KAAK,GAAG,CAAC,CAC9B,MAAM,GAAG,OAAO;AAEnB,YAAU,UAAU;EACpB,MAAM,WAAW,UAAU,KAAK,GAAG;AACnC,aAAW,SAAS;EAGpB,MAAM,kBAAkB,UAAU,eAAe,MAAM,MAAM,GAAG;AAChE,aAAW,KAAK,IAAI,kBAAkB,GAAG,SAAS,EAAE,CAAC;AAGrD,MAAI,UAAU,OAAO,MAAM,MAAM,GAAG,IAAI,WAAW,UAAU,OAC3D,cAAa,SAAS;IAG1B;EAAC;EAAQ;EAAM;EAAU;EAAY;EAAW,CACjD;CAED,MAAM,eAAA,GAAA,MAAA,cAA2B,MAA0C;AACzE,IAAE,OAAO,QAAQ;IAChB,EAAE,CAAC;CAEN,MAAM,qBAAqB;EACzB,MAAM,SAA4B,EAAE;AAEpC,OAAK,IAAI,IAAI,GAAG,IAAI,QAAQ,KAAK;AAE/B,OAAI,mBAAmB,SAAS,EAAE,IAAI,IAAI,EACxC,QAAO,KACL,iBAAA,GAAA,kBAAA,KAAC,OAAD;IAA4B,WAAU;cACnC;IACG,EAFI,aAAa,IAEjB,CACP;AAGH,UAAO,KACL,iBAAA,GAAA,kBAAA,KAAC,SAAD;IAEE,MAAM,OAAO;AACX,eAAU,QAAQ,KAAK;AAEvB,kBAAa;AACX,gBAAU,QAAQ,KAAK;;;IAG3B,MAAM,OAAO,aAAa;IAC1B,WAAW,SAAS,WAAW,YAAY;IAC3C,SAAS,SAAS,WAAW,SAAS,KAAA;IACtC,WAAW;IACX,OAAO,OAAO,MAAM;IACP;IACH;IACV,WAAW,MAAM,aAAa,GAAG,EAAE;IACnC,YAAY,MAAM,cAAc,GAAG,EAAE;IACrC,SAAS;IACT,SAAS;IACT,cAAY,GAAG,UAAU,SAAS,IAAI;IACtC,WAAW;;;gBAGP,WAAW,MAAM;gBACjB,cAAc,SAAS,KAAK;gBAC5B,CAAC,QAAQ,cAAc,SAAS,QAAQ,GAAG;gBAC3C,QAAQ,cAAc,SAAS,QAAQ,GAAG;gBAC1C,WAAW,kDAAkD,GAAG;gBAChE,eAAe;;IAEnB,EA9BK,EA8BL,CACH;;AAGH,SAAO;;AAGT,QACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAU;EAAK,WAAW,uBAAuB;YAAjD,CACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;GACE,WAAU;GACV,MAAK;GACL,cAAY;aAEX,cAAc;GACX,CAAA,EACL,SAAS,gBACR,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,WAAU;aAA4B;GAAoB,CAAA,CAE9D;;EAGX;AAED,SAAS,cAAc"}

package/dist/chunks/otp-input-JOysxKfD.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"otp-input-JOysxKfD.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-JOysxKfD.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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"}