@sth87/shadcn-design-system 0.0.35 → 0.1.0

package/dist/esm/components/Input/Input.js

@@ -1,21 +1,21 @@
-import { jsx as n, jsxs as c } from "react/jsx-runtime";
-import s from "react";
+import { jsx as t, jsxs as o } from "react/jsx-runtime";
+import r from "react";
 import { Input as Q } from "../../packages/ui/src/components/input.js";
-import { cn as l } from "../../packages/ui/src/lib/utils.js";
+import { cn as a } from "../../packages/ui/src/lib/utils.js";
 import { FloatingLabel as W } from "../FloatLabel.js";
 import { Info as Y, ChevronUp as Z, ChevronDown as T, X as q, EyeOff as F, Eye as L } from "lucide-react";
 import { withMask as ee } from "use-mask-input";
-import { Tooltip as te } from "../Tooltip/Tooltip.js";
-import { Label as ne } from "../../packages/ui/src/components/label.js";
-const re = s.forwardRef(
+import { Tooltip as se } from "../Tooltip/Tooltip.js";
+import { Label as te } from "../../packages/ui/src/components/label.js";
+const ne = r.forwardRef(
   ({
     className: _,
     label: x,
     helperText: v,
     state: N,
-    size: i,
-    isFloatLabel: d,
-    type: a,
+    size: l,
+    isFloatLabel: c,
+    type: d,
     mask: g,
     maskOptions: P,
     maxLength: b,
@@ -24,46 +24,46 @@ const re = s.forwardRef(
     clearable: p,
     onClear: I,
     prefixIcon: u,
-    suffixIcon: o,
+    suffixIcon: i,
     placeholder: B = " ",
     required: C,
     ...e
   }, H) => {
-    const [f, M] = s.useState(() => typeof e.value == "string" ? e.value.length : typeof e.defaultValue == "string" ? e.defaultValue.length : 0), U = (t) => {
-      M(t.target.value.length), e.onChange && e.onChange(t);
+    const [f, M] = r.useState(() => typeof e.value == "string" ? e.value.length : typeof e.defaultValue == "string" ? e.defaultValue.length : 0), U = (s) => {
+      M(s.target.value.length), e.onChange && e.onChange(s);
     }, X = () => {
-      if (r.current) {
-        r.current.value = "", M(0);
-        const t = {
-          target: r.current,
-          currentTarget: r.current
+      if (n.current) {
+        n.current.value = "", M(0);
+        const s = {
+          target: n.current,
+          currentTarget: n.current
         };
-        e.onChange?.(t), I && I();
+        e.onChange?.(s), I && I();
       }
-    }, y = s.useId(), r = s.useRef(null), $ = s.useCallback(
-      (t) => {
-        if (r && (r.current = t), g && t) {
+    }, y = r.useId(), n = r.useRef(null), $ = r.useCallback(
+      (s) => {
+        if (n && (n.current = s), g && s) {
           const m = ee(g, P);
-          typeof m == "function" && m(t);
+          typeof m == "function" && m(s);
         }
       },
       [g, P]
     );
-    s.useImperativeHandle(H, () => r.current);
-    const [R, A] = s.useState(!1), G = {
-      default: "text-muted-foreground",
-      success: "text-success",
-      warning: "text-warning",
-      error: "text-error"
-    }, z = d ? i === "xl" || i === "lg" ? i : "xl" : i || "normal", k = (() => {
-      const t = {
+    r.useImperativeHandle(H, () => n.current);
+    const [R, A] = r.useState(!1), G = {
+      default: "ds:text-muted-foreground",
+      success: "ds:text-success",
+      warning: "ds:text-warning",
+      error: "ds:text-error"
+    }, z = c ? l === "xl" || l === "lg" ? l : "xl" : l || "normal", k = (() => {
+      const s = {
         xs: { prefix: "pl-8", suffix: "pr-8" },
         sm: { prefix: "pl-9", suffix: "pr-9" },
         normal: { prefix: "pl-10", suffix: "pr-10" },
         lg: { prefix: "pl-11", suffix: "pr-11" },
         xl: { prefix: "pl-12", suffix: "pr-12" }
       };
-      return t[z] || t.normal;
+      return s[z] || s.normal;
     })(), j = {
       xs: "size-3",
       sm: "size-3.5",
@@ -71,89 +71,89 @@ const re = s.forwardRef(
       lg: "size-4",
       xl: "size-4"
     }[z] || "size-4", J = () => {
-      const t = a === "number" || a === "password" || a === "datetime" || p && (f > 0 || e?.value);
-      return t && o ? a === "password" && p && (f > 0 || e?.value) ? "pr-20" : "pr-16" : t ? a === "password" && p && (f > 0 || e?.value) ? "pr-16" : "pr-10" : o ? k.suffix : "";
+      const s = d === "number" || d === "password" || d === "datetime" || p && (f > 0 || e?.value);
+      return s && i ? d === "password" && p && (f > 0 || e?.value) ? "pr-20" : "pr-16" : s ? d === "password" && p && (f > 0 || e?.value) ? "pr-16" : "pr-10" : i ? k.suffix : "";
     }, D = (() => {
-      const t = {
+      const s = {
         xs: { left: "left-2.5", right: "right-2.5" },
         sm: { left: "left-3", right: "right-3" },
         normal: { left: "left-3", right: "right-3" },
         lg: { left: "left-3.5", right: "right-3.5" },
         xl: { left: "left-4", right: "right-4" }
       };
-      return t[z] || t.normal;
+      return s[z] || s.normal;
     })(), K = () => {
-      if (r.current) {
-        const t = Number(e.step || 1), m = e.max ? Number(e.max) : 1 / 0, S = Number(r.current.value || 0), E = Math.min(S + t, m);
-        r.current.value = String(E);
+      if (n.current) {
+        const s = Number(e.step || 1), m = e.max ? Number(e.max) : 1 / 0, S = Number(n.current.value || 0), E = Math.min(S + s, m);
+        n.current.value = String(E);
         const h = new Event("input", { bubbles: !0 });
-        r.current.dispatchEvent(h), e.onChange?.(h);
+        n.current.dispatchEvent(h), e.onChange?.(h);
       }
     }, O = () => {
-      if (r.current) {
-        const t = Number(e.step || 1), m = e.min ? Number(e.min) : -1 / 0, S = Number(r.current.value || 0), E = Math.max(S - t, m);
-        r.current.value = String(E);
+      if (n.current) {
+        const s = Number(e.step || 1), m = e.min ? Number(e.min) : -1 / 0, S = Number(n.current.value || 0), E = Math.max(S - s, m);
+        n.current.value = String(E);
         const h = new Event("input", { bubbles: !0 });
-        r.current.dispatchEvent(h), e.onChange?.(h);
+        n.current.dispatchEvent(h), e.onChange?.(h);
       }
     };
-    return /* @__PURE__ */ n("div", { className: _, children: /* @__PURE__ */ c(
+    return /* @__PURE__ */ t("div", { className: _, children: /* @__PURE__ */ o(
       "div",
       {
-        className: l("flex flex-col gap-1.5 relative flex-auto", {
-          "floating-label relative": d
+        className: a("ds:flex ds:flex-col ds:gap-1.5 ds:relative ds:flex-auto", {
+          "ds:floating-label ds:relative": c
         }),
         children: [
-          !d && x && /* @__PURE__ */ c(
-            ne,
+          !c && x && /* @__PURE__ */ o(
+            te,
             {
               htmlFor: y,
-              className: "flex gap-2 text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+              className: "ds:flex ds:gap-2 ds:text-sm ds:font-medium ds:leading-none ds:peer-disabled:cursor-not-allowed ds:peer-disabled:opacity-70",
               children: [
-                /* @__PURE__ */ c("span", { children: [
+                /* @__PURE__ */ o("span", { children: [
                   x,
-                  C && /* @__PURE__ */ n("span", { className: "text-error ml-0.5", children: "*" })
+                  C && /* @__PURE__ */ t("span", { className: "ds:text-error ds:ml-0.5", children: "*" })
                 ] }),
-                w && /* @__PURE__ */ n(te, { content: w, children: /* @__PURE__ */ n(Y, { className: "size-3.5 min-w-3.5" }) })
+                w && /* @__PURE__ */ t(se, { content: w, children: /* @__PURE__ */ t(Y, { className: "ds:size-3.5 ds:min-w-3.5" }) })
               ]
             }
           ),
-          /* @__PURE__ */ c("div", { className: "relative", children: [
-            u && /* @__PURE__ */ n(
+          /* @__PURE__ */ o("div", { className: "ds:relative", children: [
+            u && /* @__PURE__ */ t(
               "div",
               {
-                className: l(
-                  "absolute top-1/2 -translate-y-1/2 text-muted-foreground leading-0",
+                className: a(
+                  "ds:absolute ds:top-1/2 ds:-translate-y-1/2 ds:text-muted-foreground ds:leading-0",
                   D.left
                 ),
-                children: s.isValidElement(u) ? s.cloneElement(u, {
-                  className: l(
+                children: r.isValidElement(u) ? r.cloneElement(u, {
+                  className: a(
                     j,
                     u.props?.className
                   )
                 }) : u
               }
             ),
-            /* @__PURE__ */ n(
+            /* @__PURE__ */ t(
               Q,
               {
                 ref: $,
                 id: y,
-                className: l(
-                  "peer",
+                className: a(
+                  "ds:peer",
                   {
-                    "pt-5 pb-1": d && i !== "lg",
-                    "[&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none [-moz-appearance:textfield] pr-8": a === "number"
+                    "ds:pt-5 ds:pb-1": c && l !== "lg",
+                    "ds:[&::-webkit-outer-spin-button]:appearance-none ds:[&::-webkit-inner-spin-button]:appearance-none ds:[-moz-appearance:textfield] ds:pr-8": d === "number"
                     // "[-webkit-text-fill-color:var(--foreground)]": mask,
                   },
                   u && k.prefix,
-                  g && "placeholder:text-slate-400 placeholder:opacity-100",
+                  g && "ds:placeholder:text-slate-400 ds:placeholder:opacity-100",
                   J()
                   // className,
                 ),
                 state: N,
-                size: d ? i === "xl" || i === "lg" ? i : "xl" : i,
-                type: a === "password" ? R ? "text" : "password" : a,
+                size: c ? l === "xl" || l === "lg" ? l : "xl" : l,
+                type: d === "password" ? R ? "text" : "password" : d,
                 placeholder: B,
                 maxLength: b,
                 onChange: U,
@@ -161,102 +161,102 @@ const re = s.forwardRef(
                 ...e
               }
             ),
-            d && /* @__PURE__ */ n(
+            c && /* @__PURE__ */ t(
               W,
               {
                 htmlFor: y,
-                size: i,
+                size: l,
                 infoTooltip: w,
                 required: C,
                 children: x
               }
             ),
-            a === "number" && /* @__PURE__ */ c("div", { className: "absolute right-1 top-0 h-full flex flex-col gap-0.5", children: [
-              /* @__PURE__ */ n(
+            d === "number" && /* @__PURE__ */ o("div", { className: "ds:absolute ds:right-1 ds:top-0 ds:h-full ds:flex ds:flex-col ds:gap-0.5", children: [
+              /* @__PURE__ */ t(
                 "button",
                 {
                   type: "button",
                   onClick: K,
                   disabled: e.disabled,
-                  className: l(
-                    "h-1/2 w-6 flex items-center justify-center rounded cursor-pointer hover:scale-150 transition-transform",
-                    "disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent"
+                  className: a(
+                    "ds:h-1/2 ds:w-6 ds:flex ds:items-center ds:justify-center ds:rounded ds:cursor-pointer ds:hover:scale-150 ds:transition-transform",
+                    "ds:disabled:opacity-50 ds:disabled:cursor-not-allowed ds:disabled:hover:bg-transparent"
                   ),
                   tabIndex: -1,
-                  children: /* @__PURE__ */ n(Z, { className: "size-3" })
+                  children: /* @__PURE__ */ t(Z, { className: "ds:size-3" })
                 }
               ),
-              /* @__PURE__ */ n(
+              /* @__PURE__ */ t(
                 "button",
                 {
                   type: "button",
                   onClick: O,
                   disabled: e.disabled,
-                  className: l(
-                    "h-1/2 w-6 flex items-center justify-center rounded cursor-pointer hover:scale-150 transition-transform",
-                    "disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent"
+                  className: a(
+                    "ds:h-1/2 ds:w-6 ds:flex ds:items-center ds:justify-center ds:rounded ds:cursor-pointer ds:hover:scale-150 ds:transition-transform",
+                    "ds:disabled:opacity-50 ds:disabled:cursor-not-allowed ds:disabled:hover:bg-transparent"
                   ),
                   tabIndex: -1,
-                  children: /* @__PURE__ */ n(T, { className: "size-3" })
+                  children: /* @__PURE__ */ t(T, { className: "ds:size-3" })
                 }
               )
             ] }),
-            p && (f > 0 || e?.value) && !e.disabled && a !== "number" && /* @__PURE__ */ n(
+            p && (f > 0 || e?.value) && !e.disabled && d !== "number" && /* @__PURE__ */ t(
               "button",
               {
                 type: "button",
                 tabIndex: -1,
-                className: l(
-                  "absolute top-1/2 -translate-y-1/2 p-1 rounded hover:bg-accent transition-colors cursor-pointer",
-                  a === "password" ? o ? "right-14" : "right-10" : o ? "right-10" : "right-2"
+                className: a(
+                  "ds:absolute ds:top-1/2 ds:-translate-y-1/2 ds:p-1 ds:rounded ds:hover:bg-accent ds:transition-colors ds:cursor-pointer",
+                  d === "password" ? i ? "ds:right-14" : "ds:right-10" : i ? "ds:right-10" : "ds:right-2"
                 ),
                 onClick: X,
                 disabled: e.disabled,
-                children: /* @__PURE__ */ n(q, { className: "size-4" })
+                children: /* @__PURE__ */ t(q, { className: "ds:size-4" })
               }
             ),
-            a === "password" && /* @__PURE__ */ n(
+            d === "password" && /* @__PURE__ */ t(
               "button",
               {
                 type: "button",
                 tabIndex: -1,
-                className: l(
-                  "absolute top-1/2 -translate-y-1/2 p-1 rounded hover:bg-accent transition-colors",
-                  o ? "right-10" : "right-2"
+                className: a(
+                  "ds:absolute ds:top-1/2 ds:-translate-y-1/2 ds:p-1 ds:rounded ds:hover:bg-accent ds:transition-colors",
+                  i ? "ds:right-10" : "ds:right-2"
                 ),
-                onClick: () => A((t) => !t),
+                onClick: () => A((s) => !s),
                 disabled: e.disabled,
-                children: R ? /* @__PURE__ */ n(F, { className: "size-4" }) : /* @__PURE__ */ n(L, { className: "size-4" })
+                children: R ? /* @__PURE__ */ t(F, { className: "ds:size-4" }) : /* @__PURE__ */ t(L, { className: "ds:size-4" })
               }
             ),
-            o && /* @__PURE__ */ n(
+            i && /* @__PURE__ */ t(
               "div",
               {
-                className: l(
-                  "absolute top-1/2 -translate-y-1/2 text-muted-foreground leading-0",
+                className: a(
+                  "ds:absolute ds:top-1/2 ds:-translate-y-1/2 ds:text-muted-foreground ds:leading-0",
                   D.right
                 ),
-                children: s.isValidElement(o) ? s.cloneElement(o, {
-                  className: l(
+                children: r.isValidElement(i) ? r.cloneElement(i, {
+                  className: a(
                     j,
-                    o.props?.className
+                    i.props?.className
                   )
-                }) : o
+                }) : i
               }
             )
           ] }),
-          (v || V && typeof b == "number") && /* @__PURE__ */ c("div", { className: "flex items-center justify-between text-xs gap-2", children: [
-            v && /* @__PURE__ */ n(
+          (v || V && typeof b == "number") && /* @__PURE__ */ o("div", { className: "ds:flex ds:items-center ds:justify-between ds:text-xs ds:gap-2", children: [
+            v && /* @__PURE__ */ t(
               "p",
               {
-                className: l(
-                  "text-xs",
+                className: a(
+                  "ds:text-xs",
                   N ? G?.[N] : ""
                 ),
                 children: v
               }
             ),
-            V && typeof b == "number" && /* @__PURE__ */ c("span", { className: "ml-auto text-muted-foreground", children: [
+            V && typeof b == "number" && /* @__PURE__ */ o("span", { className: "ds:ml-auto ds:text-muted-foreground", children: [
               f,
               " / ",
               b
@@ -267,8 +267,8 @@ const re = s.forwardRef(
     ) });
   }
 );
-re.displayName = "Input";
+ne.displayName = "Input";
 export {
-  re as default
+  ne as default
 };
 //# sourceMappingURL=Input.js.map

package/dist/esm/components/Input/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sources":["../../../../src/components/Input/Input.tsx"],"sourcesContent":["import React, { type ChangeEvent } from \"react\";\nimport {\n  Input as SInput,\n  type InputProps as SInputProps,\n} from \"@dsui/ui/components/input\";\nimport { cn } from \"@dsui/ui/lib/utils\";\nimport { FloatingLabel } from \"@/components/FloatLabel\";\nimport { Eye, EyeOff, ChevronDown, ChevronUp, Info, X } from \"lucide-react\";\nimport { withMask, type Options } from \"use-mask-input\";\nimport { Tooltip } from \"../Tooltip/Tooltip\";\nimport { Label } from \"../Label\";\n\n// Re-export base input props to avoid external dependency issues\nexport type BaseInputProps = Omit<React.ComponentProps<\"input\">, \"size\"> & {\n  size?: \"normal\" | \"sm\" | \"xs\" | \"lg\" | \"xl\";\n  state?: \"default\" | \"success\" | \"error\" | \"warning\";\n};\n\nexport type InputProps = BaseInputProps & {\n  label?: string;\n  helperText?: React.ReactNode;\n  isFloatLabel?: boolean;\n  mask?: string;\n  maskOptions?: {\n    placeholder?: string;\n    inputFormat?: string;\n    outputFormat?: string;\n    showMaskOnHover?: boolean;\n    showMaskOnFocus?: boolean;\n    separate?: boolean;\n  } & Options;\n  maxLength?: number;\n  showCharCount?: boolean;\n  infoTooltip?: React.ReactNode;\n  clearable?: boolean;\n  onClear?: () => void;\n  prefixIcon?: React.ReactNode;\n  suffixIcon?: React.ReactNode;\n  required?: boolean;\n};\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      className,\n      label,\n      helperText,\n      state,\n      size,\n      isFloatLabel,\n      type,\n      mask,\n      maskOptions,\n      maxLength,\n      showCharCount,\n      infoTooltip,\n      clearable,\n      onClear,\n      prefixIcon,\n      suffixIcon,\n      placeholder = \" \",\n      required,\n      ...props\n    },\n    ref\n  ) => {\n    // Character count state\n    const [charCount, setCharCount] = React.useState(() => {\n      if (typeof props.value === \"string\") return props.value.length;\n      if (typeof props.defaultValue === \"string\")\n        return props.defaultValue.length;\n      return 0;\n    });\n\n    const handleInput = (e: React.ChangeEvent<HTMLInputElement>) => {\n      setCharCount(e.target.value.length);\n      if (props.onChange) props.onChange(e);\n    };\n\n    const handleClear = () => {\n      if (innerRef.current) {\n        innerRef.current.value = \"\";\n        setCharCount(0);\n        const event = {\n          target: innerRef.current,\n          currentTarget: innerRef.current,\n        } as React.ChangeEvent<HTMLInputElement>;\n        props.onChange?.(event);\n        if (onClear) onClear();\n      }\n    };\n\n    const inputId = React.useId();\n    const innerRef = React.useRef<HTMLInputElement>(null);\n\n    // Combine refs\n    const combinedRef = React.useCallback(\n      (element: HTMLInputElement | null) => {\n        // Set innerRef\n        if (innerRef) {\n          (\n            innerRef as React.MutableRefObject<HTMLInputElement | null>\n          ).current = element;\n        }\n\n        // Apply mask if provided\n        if (mask && element) {\n          const maskRefCallback = withMask(mask, maskOptions);\n          if (typeof maskRefCallback === \"function\") {\n            maskRefCallback(element);\n          }\n        }\n      },\n      [mask, maskOptions]\n    );\n\n    // Expose ref to parent\n    React.useImperativeHandle(ref, () => innerRef.current!);\n\n    const [showPassword, setShowPassword] = React.useState(false);\n\n    // State\n    const helperTextStyles = {\n      default: \"text-muted-foreground\",\n      success: \"text-success\",\n      warning: \"text-warning\",\n      error: \"text-error\",\n    };\n\n    // Calculate current size\n    const currentSize = isFloatLabel\n      ? size === \"xl\" || size === \"lg\"\n        ? size\n        : \"xl\"\n      : size || \"normal\";\n\n    // Calculate padding based on size and icons\n    const getPadding = () => {\n      const sizeMap = {\n        xs: { prefix: \"pl-8\", suffix: \"pr-8\" },\n        sm: { prefix: \"pl-9\", suffix: \"pr-9\" },\n        normal: { prefix: \"pl-10\", suffix: \"pr-10\" },\n        lg: { prefix: \"pl-11\", suffix: \"pr-11\" },\n        xl: { prefix: \"pl-12\", suffix: \"pr-12\" },\n      };\n\n      return sizeMap[currentSize as keyof typeof sizeMap] || sizeMap.normal;\n    };\n\n    const padding = getPadding();\n\n    // Get icon size class based on current size\n    const getIconSizeClass = () => {\n      const sizeMap = {\n        xs: \"size-3\",\n        sm: \"size-3.5\",\n        normal: \"size-4\",\n        lg: \"size-4\",\n        xl: \"size-4\",\n      };\n      return sizeMap[currentSize as keyof typeof sizeMap] || \"size-4\";\n    };\n\n    const iconSizeClass = getIconSizeClass();\n\n    // Calculate right padding considering built-in icons\n    const getRightPadding = () => {\n      const hasBuiltInSuffix =\n        type === \"number\" ||\n        type === \"password\" ||\n        type === \"datetime\" ||\n        (clearable && (charCount > 0 || props?.value));\n\n      if (hasBuiltInSuffix && suffixIcon) {\n        return type === \"password\" &&\n          clearable &&\n          (charCount > 0 || props?.value)\n          ? \"pr-20\" // password + clear + custom icon\n          : \"pr-16\"; // one built-in + custom icon\n      }\n\n      if (hasBuiltInSuffix) {\n        return type === \"password\" &&\n          clearable &&\n          (charCount > 0 || props?.value)\n          ? \"pr-16\" // password + clear\n          : \"pr-10\"; // single built-in icon\n      }\n\n      if (suffixIcon) {\n        return padding.suffix;\n      }\n\n      return \"\";\n    };\n\n    // Icon position calculations\n    const getIconPosition = () => {\n      const sizeMap = {\n        xs: { left: \"left-2.5\", right: \"right-2.5\" },\n        sm: { left: \"left-3\", right: \"right-3\" },\n        normal: { left: \"left-3\", right: \"right-3\" },\n        lg: { left: \"left-3.5\", right: \"right-3.5\" },\n        xl: { left: \"left-4\", right: \"right-4\" },\n      };\n\n      return sizeMap[currentSize as keyof typeof sizeMap] || sizeMap.normal;\n    };\n\n    const iconPosition = getIconPosition();\n\n    /* Spinner Button Handlers */\n    const handleIncrement = () => {\n      if (innerRef.current) {\n        const step = Number(props.step || 1);\n        const max = props.max ? Number(props.max) : Infinity;\n        const currentValue = Number(innerRef.current.value || 0);\n        const newValue = Math.min(currentValue + step, max);\n\n        innerRef.current.value = String(newValue);\n        const event = new Event(\"input\", { bubbles: true });\n        innerRef.current.dispatchEvent(event);\n        props.onChange?.(event as unknown as ChangeEvent<HTMLInputElement>);\n      }\n    };\n\n    const handleDecrement = () => {\n      if (innerRef.current) {\n        const step = Number(props.step || 1);\n        const min = props.min ? Number(props.min) : -Infinity;\n        const currentValue = Number(innerRef.current.value || 0);\n        const newValue = Math.max(currentValue - step, min);\n\n        innerRef.current.value = String(newValue);\n        const event = new Event(\"input\", { bubbles: true });\n        innerRef.current.dispatchEvent(event);\n        props.onChange?.(event as unknown as ChangeEvent<HTMLInputElement>);\n      }\n    };\n    /* End Spinner Button Handlers */\n\n    return (\n      <div className={className}>\n        <div\n          className={cn(\"flex flex-col gap-1.5 relative flex-auto\", {\n            \"floating-label relative\": isFloatLabel,\n          })}\n        >\n          {!isFloatLabel && label && (\n            <Label\n              htmlFor={inputId}\n              className=\"flex gap-2 text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n            >\n              <span>\n                {label}\n                {required && <span className=\"text-error ml-0.5\">*</span>}\n              </span>\n              {infoTooltip && (\n                <Tooltip content={infoTooltip}>\n                  <Info className=\"size-3.5 min-w-3.5\" />\n                </Tooltip>\n              )}\n            </Label>\n          )}\n\n          <div className=\"relative\">\n            {/* Prefix Icon */}\n            {prefixIcon && (\n              <div\n                className={cn(\n                  \"absolute top-1/2 -translate-y-1/2 text-muted-foreground leading-0\",\n                  iconPosition.left\n                )}\n              >\n                {React.isValidElement(prefixIcon)\n                  ? React.cloneElement(prefixIcon, {\n                      className: cn(\n                        iconSizeClass,\n                        (prefixIcon.props as any)?.className\n                      ),\n                    } as Partial<unknown>)\n                  : prefixIcon}\n              </div>\n            )}\n\n            <SInput\n              ref={combinedRef}\n              id={inputId}\n              className={cn(\n                \"peer\",\n                {\n                  \"pt-5 pb-1\": isFloatLabel && size !== \"lg\",\n                  \"[&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none [-moz-appearance:textfield] pr-8\":\n                    type === \"number\",\n                  // \"[-webkit-text-fill-color:var(--foreground)]\": mask,\n                },\n                prefixIcon && padding.prefix,\n                mask && \"placeholder:text-slate-400 placeholder:opacity-100\",\n                getRightPadding()\n                // className,\n              )}\n              state={state}\n              size={\n                isFloatLabel\n                  ? size === \"xl\" || size === \"lg\"\n                    ? size\n                    : \"xl\"\n                  : size\n              }\n              type={\n                type === \"password\"\n                  ? showPassword\n                    ? \"text\"\n                    : \"password\"\n                  : type\n              }\n              placeholder={placeholder}\n              maxLength={maxLength}\n              onChange={handleInput}\n              required={required}\n              {...props}\n            />\n            {isFloatLabel && (\n              <FloatingLabel\n                htmlFor={inputId}\n                size={size}\n                infoTooltip={infoTooltip}\n                required={required}\n              >\n                {label}\n              </FloatingLabel>\n            )}\n\n            {/* Spinner Buttons */}\n            {type === \"number\" && (\n              <div className=\"absolute right-1 top-0 h-full flex flex-col gap-0.5\">\n                <button\n                  type=\"button\"\n                  onClick={handleIncrement}\n                  disabled={props.disabled}\n                  className={cn(\n                    \"h-1/2 w-6 flex items-center justify-center rounded cursor-pointer hover:scale-150 transition-transform\",\n                    \"disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent\"\n                  )}\n                  tabIndex={-1}\n                >\n                  <ChevronUp className=\"size-3\" />\n                </button>\n                <button\n                  type=\"button\"\n                  onClick={handleDecrement}\n                  disabled={props.disabled}\n                  className={cn(\n                    \"h-1/2 w-6 flex items-center justify-center rounded cursor-pointer hover:scale-150 transition-transform\",\n                    \"disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent\"\n                  )}\n                  tabIndex={-1}\n                >\n                  <ChevronDown className=\"size-3\" />\n                </button>\n              </div>\n            )}\n\n            {/* Clear Button */}\n            {clearable &&\n              (charCount > 0 || props?.value) &&\n              !props.disabled &&\n              type !== \"number\" && (\n                <button\n                  type=\"button\"\n                  tabIndex={-1}\n                  className={cn(\n                    \"absolute top-1/2 -translate-y-1/2 p-1 rounded hover:bg-accent transition-colors cursor-pointer\",\n                    type === \"password\"\n                      ? suffixIcon\n                        ? \"right-14\"\n                        : \"right-10\"\n                      : suffixIcon\n                        ? \"right-10\"\n                        : \"right-2\"\n                  )}\n                  onClick={handleClear}\n                  disabled={props.disabled}\n                >\n                  <X className=\"size-4\" />\n                </button>\n              )}\n\n            {/* Show/Hide Password Button */}\n            {type === \"password\" && (\n              <button\n                type=\"button\"\n                tabIndex={-1}\n                className={cn(\n                  \"absolute top-1/2 -translate-y-1/2 p-1 rounded hover:bg-accent transition-colors\",\n                  suffixIcon ? \"right-10\" : \"right-2\"\n                )}\n                onClick={() => setShowPassword((prev) => !prev)}\n                disabled={props.disabled}\n              >\n                {showPassword ? (\n                  <EyeOff className=\"size-4\" />\n                ) : (\n                  <Eye className=\"size-4\" />\n                )}\n              </button>\n            )}\n\n            {/* Suffix Icon */}\n            {suffixIcon && (\n              <div\n                className={cn(\n                  \"absolute top-1/2 -translate-y-1/2 text-muted-foreground leading-0\",\n                  iconPosition.right\n                )}\n              >\n                {React.isValidElement(suffixIcon)\n                  ? React.cloneElement(suffixIcon, {\n                      className: cn(\n                        iconSizeClass,\n                        (suffixIcon.props as any)?.className\n                      ),\n                    } as Partial<unknown>)\n                  : suffixIcon}\n              </div>\n            )}\n          </div>\n\n          {(helperText || (showCharCount && typeof maxLength === \"number\")) && (\n            <div className=\"flex items-center justify-between text-xs gap-2\">\n              {helperText && (\n                <p\n                  className={cn(\n                    \"text-xs\",\n                    state ? helperTextStyles?.[state] : \"\"\n                  )}\n                >\n                  {helperText}\n                </p>\n              )}\n              {showCharCount && typeof maxLength === \"number\" && (\n                <span className=\"ml-auto text-muted-foreground\">\n                  {charCount} / {maxLength}\n                </span>\n              )}\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  }\n);\n\nInput.displayName = \"Input\";\nexport default Input;\n"],"names":["Input","React","className","label","helperText","state","size","isFloatLabel","type","mask","maskOptions","maxLength","showCharCount","infoTooltip","clearable","onClear","prefixIcon","suffixIcon","placeholder","required","props","ref","charCount","setCharCount","handleInput","e","handleClear","innerRef","event","inputId","combinedRef","element","maskRefCallback","withMask","showPassword","setShowPassword","helperTextStyles","currentSize","padding","sizeMap","iconSizeClass","getRightPadding","hasBuiltInSuffix","iconPosition","handleIncrement","step","max","currentValue","newValue","handleDecrement","min","jsx","jsxs","cn","Label","Tooltip","Info","SInput","FloatingLabel","ChevronUp","ChevronDown","X","prev","EyeOff","Eye"],"mappings":";;;;;;;;;AAyCA,MAAMA,KAAQC,EAAM;AAAA,EAClB,CACE;AAAA,IACE,WAAAC;AAAA,IACA,OAAAC;AAAA,IACA,YAAAC;AAAA,IACA,OAAAC;AAAA,IACA,MAAAC;AAAA,IACA,cAAAC;AAAA,IACA,MAAAC;AAAA,IACA,MAAAC;AAAA,IACA,aAAAC;AAAA,IACA,WAAAC;AAAA,IACA,eAAAC;AAAA,IACA,aAAAC;AAAA,IACA,WAAAC;AAAA,IACA,SAAAC;AAAA,IACA,YAAAC;AAAA,IACA,YAAAC;AAAA,IACA,aAAAC,IAAc;AAAA,IACd,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AAEH,UAAM,CAACC,GAAWC,CAAY,IAAItB,EAAM,SAAS,MAC3C,OAAOmB,EAAM,SAAU,WAAiBA,EAAM,MAAM,SACpD,OAAOA,EAAM,gBAAiB,WACzBA,EAAM,aAAa,SACrB,CACR,GAEKI,IAAc,CAACC,MAA2C;AAC9D,MAAAF,EAAaE,EAAE,OAAO,MAAM,MAAM,GAC9BL,EAAM,YAAUA,EAAM,SAASK,CAAC;AAAA,IACtC,GAEMC,IAAc,MAAM;AACxB,UAAIC,EAAS,SAAS;AACpB,QAAAA,EAAS,QAAQ,QAAQ,IACzBJ,EAAa,CAAC;AACd,cAAMK,IAAQ;AAAA,UACZ,QAAQD,EAAS;AAAA,UACjB,eAAeA,EAAS;AAAA,QAAA;AAE1B,QAAAP,EAAM,WAAWQ,CAAK,GAClBb,KAASA,EAAA;AAAA,MACf;AAAA,IACF,GAEMc,IAAU5B,EAAM,MAAA,GAChB0B,IAAW1B,EAAM,OAAyB,IAAI,GAG9C6B,IAAc7B,EAAM;AAAA,MACxB,CAAC8B,MAAqC;AASpC,YAPIJ,MAEAA,EACA,UAAUI,IAIVtB,KAAQsB,GAAS;AACnB,gBAAMC,IAAkBC,GAASxB,GAAMC,CAAW;AAClD,UAAI,OAAOsB,KAAoB,cAC7BA,EAAgBD,CAAO;AAAA,QAE3B;AAAA,MACF;AAAA,MACA,CAACtB,GAAMC,CAAW;AAAA,IAAA;AAIpBT,IAAAA,EAAM,oBAAoBoB,GAAK,MAAMM,EAAS,OAAQ;AAEtD,UAAM,CAACO,GAAcC,CAAe,IAAIlC,EAAM,SAAS,EAAK,GAGtDmC,IAAmB;AAAA,MACvB,SAAS;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA,MACT,OAAO;AAAA,IAAA,GAIHC,IAAc9B,IAChBD,MAAS,QAAQA,MAAS,OACxBA,IACA,OACFA,KAAQ,UAeNgC,KAZa,MAAM;AACvB,YAAMC,IAAU;AAAA,QACd,IAAI,EAAE,QAAQ,QAAQ,QAAQ,OAAA;AAAA,QAC9B,IAAI,EAAE,QAAQ,QAAQ,QAAQ,OAAA;AAAA,QAC9B,QAAQ,EAAE,QAAQ,SAAS,QAAQ,QAAA;AAAA,QACnC,IAAI,EAAE,QAAQ,SAAS,QAAQ,QAAA;AAAA,QAC/B,IAAI,EAAE,QAAQ,SAAS,QAAQ,QAAA;AAAA,MAAQ;AAGzC,aAAOA,EAAQF,CAAmC,KAAKE,EAAQ;AAAA,IACjE,GAEgB,GAcVC,IAVY;AAAA,MACd,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,QAAQ;AAAA,MACR,IAAI;AAAA,MACJ,IAAI;AAAA,IAAA,EAESH,CAAmC,KAAK,UAMnDI,IAAkB,MAAM;AAC5B,YAAMC,IACJlC,MAAS,YACTA,MAAS,cACTA,MAAS,cACRM,MAAcQ,IAAY,KAAKF,GAAO;AAEzC,aAAIsB,KAAoBzB,IACfT,MAAS,cACdM,MACCQ,IAAY,KAAKF,GAAO,SACvB,UACA,UAGFsB,IACKlC,MAAS,cACdM,MACCQ,IAAY,KAAKF,GAAO,SACvB,UACA,UAGFH,IACKqB,EAAQ,SAGV;AAAA,IACT,GAeMK,KAZkB,MAAM;AAC5B,YAAMJ,IAAU;AAAA,QACd,IAAI,EAAE,MAAM,YAAY,OAAO,YAAA;AAAA,QAC/B,IAAI,EAAE,MAAM,UAAU,OAAO,UAAA;AAAA,QAC7B,QAAQ,EAAE,MAAM,UAAU,OAAO,UAAA;AAAA,QACjC,IAAI,EAAE,MAAM,YAAY,OAAO,YAAA;AAAA,QAC/B,IAAI,EAAE,MAAM,UAAU,OAAO,UAAA;AAAA,MAAU;AAGzC,aAAOA,EAAQF,CAAmC,KAAKE,EAAQ;AAAA,IACjE,GAEqB,GAGfK,IAAkB,MAAM;AAC5B,UAAIjB,EAAS,SAAS;AACpB,cAAMkB,IAAO,OAAOzB,EAAM,QAAQ,CAAC,GAC7B0B,IAAM1B,EAAM,MAAM,OAAOA,EAAM,GAAG,IAAI,OACtC2B,IAAe,OAAOpB,EAAS,QAAQ,SAAS,CAAC,GACjDqB,IAAW,KAAK,IAAID,IAAeF,GAAMC,CAAG;AAElD,QAAAnB,EAAS,QAAQ,QAAQ,OAAOqB,CAAQ;AACxC,cAAMpB,IAAQ,IAAI,MAAM,SAAS,EAAE,SAAS,IAAM;AAClD,QAAAD,EAAS,QAAQ,cAAcC,CAAK,GACpCR,EAAM,WAAWQ,CAAiD;AAAA,MACpE;AAAA,IACF,GAEMqB,IAAkB,MAAM;AAC5B,UAAItB,EAAS,SAAS;AACpB,cAAMkB,IAAO,OAAOzB,EAAM,QAAQ,CAAC,GAC7B8B,IAAM9B,EAAM,MAAM,OAAOA,EAAM,GAAG,IAAI,QACtC2B,IAAe,OAAOpB,EAAS,QAAQ,SAAS,CAAC,GACjDqB,IAAW,KAAK,IAAID,IAAeF,GAAMK,CAAG;AAElD,QAAAvB,EAAS,QAAQ,QAAQ,OAAOqB,CAAQ;AACxC,cAAMpB,IAAQ,IAAI,MAAM,SAAS,EAAE,SAAS,IAAM;AAClD,QAAAD,EAAS,QAAQ,cAAcC,CAAK,GACpCR,EAAM,WAAWQ,CAAiD;AAAA,MACpE;AAAA,IACF;AAGA,WACE,gBAAAuB,EAAC,SAAI,WAAAjD,GACH,UAAA,gBAAAkD;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWC,EAAG,4CAA4C;AAAA,UACxD,2BAA2B9C;AAAA,QAAA,CAC5B;AAAA,QAEA,UAAA;AAAA,UAAA,CAACA,KAAgBJ,KAChB,gBAAAiD;AAAA,YAACE;AAAA,YAAA;AAAA,cACC,SAASzB;AAAA,cACT,WAAU;AAAA,cAEV,UAAA;AAAA,gBAAA,gBAAAuB,EAAC,QAAA,EACE,UAAA;AAAA,kBAAAjD;AAAA,kBACAgB,KAAY,gBAAAgC,EAAC,QAAA,EAAK,WAAU,qBAAoB,UAAA,IAAA,CAAC;AAAA,gBAAA,GACpD;AAAA,gBACCtC,uBACE0C,IAAA,EAAQ,SAAS1C,GAChB,UAAA,gBAAAsC,EAACK,GAAA,EAAK,WAAU,qBAAA,CAAqB,EAAA,CACvC;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UAKN,gBAAAJ,EAAC,OAAA,EAAI,WAAU,YAEZ,UAAA;AAAA,YAAApC,KACC,gBAAAmC;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAWE;AAAA,kBACT;AAAA,kBACAV,EAAa;AAAA,gBAAA;AAAA,gBAGd,YAAM,eAAe3B,CAAU,IAC5Bf,EAAM,aAAae,GAAY;AAAA,kBAC7B,WAAWqC;AAAA,oBACTb;AAAA,oBACCxB,EAAW,OAAe;AAAA,kBAAA;AAAA,gBAC7B,CACmB,IACrBA;AAAA,cAAA;AAAA,YAAA;AAAA,YAIR,gBAAAmC;AAAA,cAACM;AAAAA,cAAA;AAAA,gBACC,KAAK3B;AAAA,gBACL,IAAID;AAAA,gBACJ,WAAWwB;AAAA,kBACT;AAAA,kBACA;AAAA,oBACE,aAAa9C,KAAgBD,MAAS;AAAA,oBACtC,kIACEE,MAAS;AAAA;AAAA,kBAAA;AAAA,kBAGbQ,KAAcsB,EAAQ;AAAA,kBACtB7B,KAAQ;AAAA,kBACRgC,EAAA;AAAA;AAAA,gBAAgB;AAAA,gBAGlB,OAAApC;AAAA,gBACA,MACEE,IACID,MAAS,QAAQA,MAAS,OACxBA,IACA,OACFA;AAAA,gBAEN,MACEE,MAAS,aACL0B,IACE,SACA,aACF1B;AAAA,gBAEN,aAAAU;AAAA,gBACA,WAAAP;AAAA,gBACA,UAAUa;AAAA,gBACV,UAAAL;AAAA,gBACC,GAAGC;AAAA,cAAA;AAAA,YAAA;AAAA,YAELb,KACC,gBAAA4C;AAAA,cAACO;AAAA,cAAA;AAAA,gBACC,SAAS7B;AAAA,gBACT,MAAAvB;AAAA,gBACA,aAAAO;AAAA,gBACA,UAAAM;AAAA,gBAEC,UAAAhB;AAAA,cAAA;AAAA,YAAA;AAAA,YAKJK,MAAS,YACR,gBAAA4C,EAAC,OAAA,EAAI,WAAU,uDACb,UAAA;AAAA,cAAA,gBAAAD;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,MAAK;AAAA,kBACL,SAASP;AAAA,kBACT,UAAUxB,EAAM;AAAA,kBAChB,WAAWiC;AAAA,oBACT;AAAA,oBACA;AAAA,kBAAA;AAAA,kBAEF,UAAU;AAAA,kBAEV,UAAA,gBAAAF,EAACQ,GAAA,EAAU,WAAU,SAAA,CAAS;AAAA,gBAAA;AAAA,cAAA;AAAA,cAEhC,gBAAAR;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,MAAK;AAAA,kBACL,SAASF;AAAA,kBACT,UAAU7B,EAAM;AAAA,kBAChB,WAAWiC;AAAA,oBACT;AAAA,oBACA;AAAA,kBAAA;AAAA,kBAEF,UAAU;AAAA,kBAEV,UAAA,gBAAAF,EAACS,GAAA,EAAY,WAAU,SAAA,CAAS;AAAA,gBAAA;AAAA,cAAA;AAAA,YAClC,GACF;AAAA,YAID9C,MACEQ,IAAY,KAAKF,GAAO,UACzB,CAACA,EAAM,YACPZ,MAAS,YACP,gBAAA2C;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAK;AAAA,gBACL,UAAU;AAAA,gBACV,WAAWE;AAAA,kBACT;AAAA,kBACA7C,MAAS,aACLS,IACE,aACA,aACFA,IACE,aACA;AAAA,gBAAA;AAAA,gBAER,SAASS;AAAA,gBACT,UAAUN,EAAM;AAAA,gBAEhB,UAAA,gBAAA+B,EAACU,GAAA,EAAE,WAAU,SAAA,CAAS;AAAA,cAAA;AAAA,YAAA;AAAA,YAK3BrD,MAAS,cACR,gBAAA2C;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAK;AAAA,gBACL,UAAU;AAAA,gBACV,WAAWE;AAAA,kBACT;AAAA,kBACApC,IAAa,aAAa;AAAA,gBAAA;AAAA,gBAE5B,SAAS,MAAMkB,EAAgB,CAAC2B,MAAS,CAACA,CAAI;AAAA,gBAC9C,UAAU1C,EAAM;AAAA,gBAEf,UAAAc,sBACE6B,GAAA,EAAO,WAAU,UAAS,IAE3B,gBAAAZ,EAACa,GAAA,EAAI,WAAU,SAAA,CAAS;AAAA,cAAA;AAAA,YAAA;AAAA,YAM7B/C,KACC,gBAAAkC;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAWE;AAAA,kBACT;AAAA,kBACAV,EAAa;AAAA,gBAAA;AAAA,gBAGd,YAAM,eAAe1B,CAAU,IAC5BhB,EAAM,aAAagB,GAAY;AAAA,kBAC7B,WAAWoC;AAAA,oBACTb;AAAA,oBACCvB,EAAW,OAAe;AAAA,kBAAA;AAAA,gBAC7B,CACmB,IACrBA;AAAA,cAAA;AAAA,YAAA;AAAA,UACN,GAEJ;AAAA,WAEEb,KAAeQ,KAAiB,OAAOD,KAAc,aACrD,gBAAAyC,EAAC,OAAA,EAAI,WAAU,mDACZ,UAAA;AAAA,YAAAhD,KACC,gBAAA+C;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAWE;AAAA,kBACT;AAAA,kBACAhD,IAAQ+B,IAAmB/B,CAAK,IAAI;AAAA,gBAAA;AAAA,gBAGrC,UAAAD;AAAA,cAAA;AAAA,YAAA;AAAA,YAGJQ,KAAiB,OAAOD,KAAc,YACrC,gBAAAyC,EAAC,QAAA,EAAK,WAAU,iCACb,UAAA;AAAA,cAAA9B;AAAA,cAAU;AAAA,cAAIX;AAAA,YAAA,EAAA,CACjB;AAAA,UAAA,EAAA,CAEJ;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,GAGN;AAAA,EAEJ;AACF;AAEAX,GAAM,cAAc;"}
+{"version":3,"file":"Input.js","sources":["../../../../src/components/Input/Input.tsx"],"sourcesContent":["import React, { type ChangeEvent } from \"react\";\nimport {\n  Input as SInput,\n  type InputProps as SInputProps,\n} from \"@dsui/ui/components/input\";\nimport { cn } from \"@dsui/ui/lib/utils\";\nimport { FloatingLabel } from \"@/components/FloatLabel\";\nimport { Eye, EyeOff, ChevronDown, ChevronUp, Info, X } from \"lucide-react\";\nimport { withMask, type Options } from \"use-mask-input\";\nimport { Tooltip } from \"../Tooltip/Tooltip\";\nimport { Label } from \"../Label\";\n\n// Re-export base input props to avoid external dependency issues\nexport type BaseInputProps = Omit<React.ComponentProps<\"input\">, \"size\"> & {\n  size?: \"normal\" | \"sm\" | \"xs\" | \"lg\" | \"xl\";\n  state?: \"default\" | \"success\" | \"error\" | \"warning\";\n};\n\nexport type InputProps = BaseInputProps & {\n  label?: string;\n  helperText?: React.ReactNode;\n  isFloatLabel?: boolean;\n  mask?: string;\n  maskOptions?: {\n    placeholder?: string;\n    inputFormat?: string;\n    outputFormat?: string;\n    showMaskOnHover?: boolean;\n    showMaskOnFocus?: boolean;\n    separate?: boolean;\n  } & Options;\n  maxLength?: number;\n  showCharCount?: boolean;\n  infoTooltip?: React.ReactNode;\n  clearable?: boolean;\n  onClear?: () => void;\n  prefixIcon?: React.ReactNode;\n  suffixIcon?: React.ReactNode;\n  required?: boolean;\n};\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      className,\n      label,\n      helperText,\n      state,\n      size,\n      isFloatLabel,\n      type,\n      mask,\n      maskOptions,\n      maxLength,\n      showCharCount,\n      infoTooltip,\n      clearable,\n      onClear,\n      prefixIcon,\n      suffixIcon,\n      placeholder = \" \",\n      required,\n      ...props\n    },\n    ref\n  ) => {\n    // Character count state\n    const [charCount, setCharCount] = React.useState(() => {\n      if (typeof props.value === \"string\") return props.value.length;\n      if (typeof props.defaultValue === \"string\")\n        return props.defaultValue.length;\n      return 0;\n    });\n\n    const handleInput = (e: React.ChangeEvent<HTMLInputElement>) => {\n      setCharCount(e.target.value.length);\n      if (props.onChange) props.onChange(e);\n    };\n\n    const handleClear = () => {\n      if (innerRef.current) {\n        innerRef.current.value = \"\";\n        setCharCount(0);\n        const event = {\n          target: innerRef.current,\n          currentTarget: innerRef.current,\n        } as React.ChangeEvent<HTMLInputElement>;\n        props.onChange?.(event);\n        if (onClear) onClear();\n      }\n    };\n\n    const inputId = React.useId();\n    const innerRef = React.useRef<HTMLInputElement>(null);\n\n    // Combine refs\n    const combinedRef = React.useCallback(\n      (element: HTMLInputElement | null) => {\n        // Set innerRef\n        if (innerRef) {\n          (\n            innerRef as React.MutableRefObject<HTMLInputElement | null>\n          ).current = element;\n        }\n\n        // Apply mask if provided\n        if (mask && element) {\n          const maskRefCallback = withMask(mask, maskOptions);\n          if (typeof maskRefCallback === \"function\") {\n            maskRefCallback(element);\n          }\n        }\n      },\n      [mask, maskOptions]\n    );\n\n    // Expose ref to parent\n    React.useImperativeHandle(ref, () => innerRef.current!);\n\n    const [showPassword, setShowPassword] = React.useState(false);\n\n    // State\n    const helperTextStyles = {\n      default: \"ds:text-muted-foreground\",\n      success: \"ds:text-success\",\n      warning: \"ds:text-warning\",\n      error: \"ds:text-error\",\n    };\n\n    // Calculate current size\n    const currentSize = isFloatLabel\n      ? size === \"xl\" || size === \"lg\"\n        ? size\n        : \"xl\"\n      : size || \"normal\";\n\n    // Calculate padding based on size and icons\n    const getPadding = () => {\n      const sizeMap = {\n        xs: { prefix: \"pl-8\", suffix: \"pr-8\" },\n        sm: { prefix: \"pl-9\", suffix: \"pr-9\" },\n        normal: { prefix: \"pl-10\", suffix: \"pr-10\" },\n        lg: { prefix: \"pl-11\", suffix: \"pr-11\" },\n        xl: { prefix: \"pl-12\", suffix: \"pr-12\" },\n      };\n\n      return sizeMap[currentSize as keyof typeof sizeMap] || sizeMap.normal;\n    };\n\n    const padding = getPadding();\n\n    // Get icon size class based on current size\n    const getIconSizeClass = () => {\n      const sizeMap = {\n        xs: \"size-3\",\n        sm: \"size-3.5\",\n        normal: \"size-4\",\n        lg: \"size-4\",\n        xl: \"size-4\",\n      };\n      return sizeMap[currentSize as keyof typeof sizeMap] || \"size-4\";\n    };\n\n    const iconSizeClass = getIconSizeClass();\n\n    // Calculate right padding considering built-in icons\n    const getRightPadding = () => {\n      const hasBuiltInSuffix =\n        type === \"number\" ||\n        type === \"password\" ||\n        type === \"datetime\" ||\n        (clearable && (charCount > 0 || props?.value));\n\n      if (hasBuiltInSuffix && suffixIcon) {\n        return type === \"password\" &&\n          clearable &&\n          (charCount > 0 || props?.value)\n          ? \"pr-20\" // password + clear + custom icon\n          : \"pr-16\"; // one built-in + custom icon\n      }\n\n      if (hasBuiltInSuffix) {\n        return type === \"password\" &&\n          clearable &&\n          (charCount > 0 || props?.value)\n          ? \"pr-16\" // password + clear\n          : \"pr-10\"; // single built-in icon\n      }\n\n      if (suffixIcon) {\n        return padding.suffix;\n      }\n\n      return \"\";\n    };\n\n    // Icon position calculations\n    const getIconPosition = () => {\n      const sizeMap = {\n        xs: { left: \"left-2.5\", right: \"right-2.5\" },\n        sm: { left: \"left-3\", right: \"right-3\" },\n        normal: { left: \"left-3\", right: \"right-3\" },\n        lg: { left: \"left-3.5\", right: \"right-3.5\" },\n        xl: { left: \"left-4\", right: \"right-4\" },\n      };\n\n      return sizeMap[currentSize as keyof typeof sizeMap] || sizeMap.normal;\n    };\n\n    const iconPosition = getIconPosition();\n\n    /* Spinner Button Handlers */\n    const handleIncrement = () => {\n      if (innerRef.current) {\n        const step = Number(props.step || 1);\n        const max = props.max ? Number(props.max) : Infinity;\n        const currentValue = Number(innerRef.current.value || 0);\n        const newValue = Math.min(currentValue + step, max);\n\n        innerRef.current.value = String(newValue);\n        const event = new Event(\"input\", { bubbles: true });\n        innerRef.current.dispatchEvent(event);\n        props.onChange?.(event as unknown as ChangeEvent<HTMLInputElement>);\n      }\n    };\n\n    const handleDecrement = () => {\n      if (innerRef.current) {\n        const step = Number(props.step || 1);\n        const min = props.min ? Number(props.min) : -Infinity;\n        const currentValue = Number(innerRef.current.value || 0);\n        const newValue = Math.max(currentValue - step, min);\n\n        innerRef.current.value = String(newValue);\n        const event = new Event(\"input\", { bubbles: true });\n        innerRef.current.dispatchEvent(event);\n        props.onChange?.(event as unknown as ChangeEvent<HTMLInputElement>);\n      }\n    };\n    /* End Spinner Button Handlers */\n\n    return (\n      <div className={className}>\n        <div\n          className={cn(\"ds:flex ds:flex-col ds:gap-1.5 ds:relative ds:flex-auto\", {\n            \"ds:floating-label ds:relative\": isFloatLabel,\n          })}\n        >\n          {!isFloatLabel && label && (\n            <Label\n              htmlFor={inputId}\n              className=\"ds:flex ds:gap-2 ds:text-sm ds:font-medium ds:leading-none ds:peer-disabled:cursor-not-allowed ds:peer-disabled:opacity-70\"\n            >\n              <span>\n                {label}\n                {required && <span className=\"ds:text-error ds:ml-0.5\">*</span>}\n              </span>\n              {infoTooltip && (\n                <Tooltip content={infoTooltip}>\n                  <Info className=\"ds:size-3.5 ds:min-w-3.5\" />\n                </Tooltip>\n              )}\n            </Label>\n          )}\n\n          <div className=\"ds:relative\">\n            {/* Prefix Icon */}\n            {prefixIcon && (\n              <div\n                className={cn(\n                  \"ds:absolute ds:top-1/2 ds:-translate-y-1/2 ds:text-muted-foreground ds:leading-0\",\n                  iconPosition.left\n                )}\n              >\n                {React.isValidElement(prefixIcon)\n                  ? React.cloneElement(prefixIcon, {\n                      className: cn(\n                        iconSizeClass,\n                        (prefixIcon.props as any)?.className\n                      ),\n                    } as Partial<unknown>)\n                  : prefixIcon}\n              </div>\n            )}\n\n            <SInput\n              ref={combinedRef}\n              id={inputId}\n              className={cn(\n                \"ds:peer\",\n                {\n                  \"ds:pt-5 ds:pb-1\": isFloatLabel && size !== \"lg\",\n                  \"ds:[&::-webkit-outer-spin-button]:appearance-none ds:[&::-webkit-inner-spin-button]:appearance-none ds:[-moz-appearance:textfield] ds:pr-8\":\n                    type === \"number\",\n                  // \"[-webkit-text-fill-color:var(--foreground)]\": mask,\n                },\n                prefixIcon && padding.prefix,\n                mask && \"ds:placeholder:text-slate-400 ds:placeholder:opacity-100\",\n                getRightPadding()\n                // className,\n              )}\n              state={state}\n              size={\n                isFloatLabel\n                  ? size === \"xl\" || size === \"lg\"\n                    ? size\n                    : \"xl\"\n                  : size\n              }\n              type={\n                type === \"password\"\n                  ? showPassword\n                    ? \"text\"\n                    : \"password\"\n                  : type\n              }\n              placeholder={placeholder}\n              maxLength={maxLength}\n              onChange={handleInput}\n              required={required}\n              {...props}\n            />\n            {isFloatLabel && (\n              <FloatingLabel\n                htmlFor={inputId}\n                size={size}\n                infoTooltip={infoTooltip}\n                required={required}\n              >\n                {label}\n              </FloatingLabel>\n            )}\n\n            {/* Spinner Buttons */}\n            {type === \"number\" && (\n              <div className=\"ds:absolute ds:right-1 ds:top-0 ds:h-full ds:flex ds:flex-col ds:gap-0.5\">\n                <button\n                  type=\"button\"\n                  onClick={handleIncrement}\n                  disabled={props.disabled}\n                  className={cn(\n                    \"ds:h-1/2 ds:w-6 ds:flex ds:items-center ds:justify-center ds:rounded ds:cursor-pointer ds:hover:scale-150 ds:transition-transform\",\n                    \"ds:disabled:opacity-50 ds:disabled:cursor-not-allowed ds:disabled:hover:bg-transparent\"\n                  )}\n                  tabIndex={-1}\n                >\n                  <ChevronUp className=\"ds:size-3\" />\n                </button>\n                <button\n                  type=\"button\"\n                  onClick={handleDecrement}\n                  disabled={props.disabled}\n                  className={cn(\n                    \"ds:h-1/2 ds:w-6 ds:flex ds:items-center ds:justify-center ds:rounded ds:cursor-pointer ds:hover:scale-150 ds:transition-transform\",\n                    \"ds:disabled:opacity-50 ds:disabled:cursor-not-allowed ds:disabled:hover:bg-transparent\"\n                  )}\n                  tabIndex={-1}\n                >\n                  <ChevronDown className=\"ds:size-3\" />\n                </button>\n              </div>\n            )}\n\n            {/* Clear Button */}\n            {clearable &&\n              (charCount > 0 || props?.value) &&\n              !props.disabled &&\n              type !== \"number\" && (\n                <button\n                  type=\"button\"\n                  tabIndex={-1}\n                  className={cn(\n                    \"ds:absolute ds:top-1/2 ds:-translate-y-1/2 ds:p-1 ds:rounded ds:hover:bg-accent ds:transition-colors ds:cursor-pointer\",\n                    type === \"password\"\n                      ? suffixIcon\n                        ? \"ds:right-14\"\n                        : \"ds:right-10\"\n                      : suffixIcon\n                        ? \"ds:right-10\"\n                        : \"ds:right-2\"\n                  )}\n                  onClick={handleClear}\n                  disabled={props.disabled}\n                >\n                  <X className=\"ds:size-4\" />\n                </button>\n              )}\n\n            {/* Show/Hide Password Button */}\n            {type === \"password\" && (\n              <button\n                type=\"button\"\n                tabIndex={-1}\n                className={cn(\n                  \"ds:absolute ds:top-1/2 ds:-translate-y-1/2 ds:p-1 ds:rounded ds:hover:bg-accent ds:transition-colors\",\n                  suffixIcon ? \"ds:right-10\" : \"ds:right-2\"\n                )}\n                onClick={() => setShowPassword((prev) => !prev)}\n                disabled={props.disabled}\n              >\n                {showPassword ? (\n                  <EyeOff className=\"ds:size-4\" />\n                ) : (\n                  <Eye className=\"ds:size-4\" />\n                )}\n              </button>\n            )}\n\n            {/* Suffix Icon */}\n            {suffixIcon && (\n              <div\n                className={cn(\n                  \"ds:absolute ds:top-1/2 ds:-translate-y-1/2 ds:text-muted-foreground ds:leading-0\",\n                  iconPosition.right\n                )}\n              >\n                {React.isValidElement(suffixIcon)\n                  ? React.cloneElement(suffixIcon, {\n                      className: cn(\n                        iconSizeClass,\n                        (suffixIcon.props as any)?.className\n                      ),\n                    } as Partial<unknown>)\n                  : suffixIcon}\n              </div>\n            )}\n          </div>\n\n          {(helperText || (showCharCount && typeof maxLength === \"number\")) && (\n            <div className=\"ds:flex ds:items-center ds:justify-between ds:text-xs ds:gap-2\">\n              {helperText && (\n                <p\n                  className={cn(\n                    \"ds:text-xs\",\n                    state ? helperTextStyles?.[state] : \"\"\n                  )}\n                >\n                  {helperText}\n                </p>\n              )}\n              {showCharCount && typeof maxLength === \"number\" && (\n                <span className=\"ds:ml-auto ds:text-muted-foreground\">\n                  {charCount} / {maxLength}\n                </span>\n              )}\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  }\n);\n\nInput.displayName = \"Input\";\nexport default Input;\n"],"names":["Input","React","className","label","helperText","state","size","isFloatLabel","type","mask","maskOptions","maxLength","showCharCount","infoTooltip","clearable","onClear","prefixIcon","suffixIcon","placeholder","required","props","ref","charCount","setCharCount","handleInput","e","handleClear","innerRef","event","inputId","combinedRef","element","maskRefCallback","withMask","showPassword","setShowPassword","helperTextStyles","currentSize","padding","sizeMap","iconSizeClass","getRightPadding","hasBuiltInSuffix","iconPosition","handleIncrement","step","max","currentValue","newValue","handleDecrement","min","jsx","jsxs","cn","Label","Tooltip","Info","SInput","FloatingLabel","ChevronUp","ChevronDown","X","prev","EyeOff","Eye"],"mappings":"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"}

package/dist/esm/components/InputOTP/InputOTP.js

@@ -41,26 +41,26 @@ const ct = O.forwardRef(
     length: p,
     size: c = "normal",
     state: o = "default",
-    helperText: e,
+    helperText: s,
     gapSize: i = 4,
-    variant: s = "outlined",
+    variant: d = "outlined",
     className: u,
     rootClassName: f,
     childClassName: x,
     ..._
   }, I) => {
-    const a = P(), h = r === "digits" ? T : r === "chars" ? v : r === "digits-and-chars" ? A : void 0, g = {
-      default: "text-muted-foreground",
-      success: "text-success",
-      warning: "text-warning",
-      error: "text-error"
+    const e = P(), h = r === "digits" ? T : r === "chars" ? v : r === "digits-and-chars" ? A : void 0, g = {
+      default: "ds:text-muted-foreground",
+      success: "ds:text-success",
+      warning: "ds:text-warning",
+      error: "ds:text-error"
     };
-    return /* @__PURE__ */ N("div", { className: m("flex flex-col gap-1.5 relative", f), children: [
-      /* @__PURE__ */ t(L, { htmlFor: a, children: l }),
+    return /* @__PURE__ */ N("div", { className: m("ds:flex ds:flex-col ds:gap-1.5 ds:relative", f), children: [
+      /* @__PURE__ */ t(L, { htmlFor: e, children: l }),
       /* @__PURE__ */ t(
         R,
         {
-          id: a,
+          id: e,
           maxLength: p ?? 4,
           pattern: n ?? h,
           ref: I,
@@ -70,27 +70,27 @@ const ct = O.forwardRef(
             {
               className: m(
                 {
-                  "gap-2 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border": s === "outlined" && i > 0
+                  "ds:gap-2 ds:*:data-[slot=input-otp-slot]:rounded-md ds:*:data-[slot=input-otp-slot]:border": d === "outlined" && i > 0
                 },
                 u
               ),
               style: i > 0 ? { gap: `${i}px` } : void 0,
-              children: Array.from({ length: p ?? 4 }).map((S, d) => /* @__PURE__ */ t(
+              children: Array.from({ length: p ?? 4 }).map((S, a) => /* @__PURE__ */ t(
                 G,
                 {
-                  index: d,
+                  index: a,
                   size: c,
                   state: o ?? void 0,
-                  variant: s,
+                  variant: d,
                   className: x
                 },
-                d
+                a
               ))
             }
           )
         }
       ),
-      e && /* @__PURE__ */ t("p", { className: m("text-xs", o ? g?.[o] : ""), children: e })
+      s && /* @__PURE__ */ t("p", { className: m("ds:text-xs", o ? g?.[o] : ""), children: s })
     ] });
   }
 );

package/dist/esm/components/InputOTP/InputOTP.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputOTP.js","sources":["../../../../src/components/InputOTP/InputOTP.tsx"],"sourcesContent":["import React, { useId } from \"react\";\n\nimport {\n  InputOTP as SInputOTP,\n  InputOTPGroup,\n  InputOTPSlot,\n  type InputOTPProps as SInputOTPProps,\n  REGEXP_ONLY_DIGITS,\n  REGEXP_ONLY_CHARS,\n  REGEXP_ONLY_DIGITS_AND_CHARS,\n  inputOTPSlotVariants,\n} from \"@dsui/ui/components/input-otp\";\nimport { Label } from \"@dsui/ui/components/label\";\nimport type { VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@dsui/ui/index\";\n\nexport type InputOTPProps = Omit<\n  SInputOTPProps,\n  \"size\" | \"render\" | \"maxLength\"\n> & {\n  label?: React.ReactNode;\n  length?: number;\n  inputType?: \"digits\" | \"chars\" | \"digits-and-chars\";\n  size?: VariantProps<typeof inputOTPSlotVariants>[\"size\"];\n  state?: VariantProps<typeof inputOTPSlotVariants>[\"state\"];\n  variant?: VariantProps<typeof inputOTPSlotVariants>[\"variant\"];\n  regexPattern?: string;\n  helperText?: React.ReactNode;\n  gapSize?: number;\n  className?: string;\n  rootClassName?: string;\n  childClassName?: string;\n};\n\nconst InputOTP = React.forwardRef<\n  React.ElementRef<typeof SInputOTP>,\n  InputOTPProps\n>(\n  (\n    {\n      label,\n      inputType = \"digits\",\n      regexPattern,\n      length,\n      size = \"normal\",\n      state = \"default\",\n      helperText,\n      gapSize = 4,\n      variant = \"outlined\",\n      className,\n      rootClassName,\n      childClassName,\n      ...rest\n    },\n    ref\n  ) => {\n    const id = useId();\n\n    const pattern =\n      inputType === \"digits\"\n        ? REGEXP_ONLY_DIGITS\n        : inputType === \"chars\"\n          ? REGEXP_ONLY_CHARS\n          : inputType === \"digits-and-chars\"\n            ? REGEXP_ONLY_DIGITS_AND_CHARS\n            : undefined;\n\n    const helperTextStyles = {\n      default: \"text-muted-foreground\",\n      success: \"text-success\",\n      warning: \"text-warning\",\n      error: \"text-error\",\n    };\n\n    return (\n      <div className={cn(\"flex flex-col gap-1.5 relative\", rootClassName)}>\n        <Label htmlFor={id}>{label}</Label>\n        <SInputOTP\n          id={id}\n          maxLength={length ?? 4}\n          pattern={regexPattern ?? pattern}\n          ref={ref}\n          {...rest}\n        >\n          <InputOTPGroup\n            className={cn(\n              {\n                \"gap-2 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border\":\n                  variant === \"outlined\" && gapSize > 0,\n              },\n              className\n            )}\n            style={gapSize > 0 ? { gap: `${gapSize}px` } : undefined}\n          >\n            {Array.from({ length: length ?? 4 }).map((_, index) => (\n              <InputOTPSlot\n                key={index}\n                index={index}\n                size={size}\n                state={state ?? undefined}\n                variant={variant}\n                className={childClassName}\n              />\n            ))}\n          </InputOTPGroup>\n        </SInputOTP>\n        {helperText && (\n          <p className={cn(\"text-xs\", state ? helperTextStyles?.[state] : \"\")}>\n            {helperText}\n          </p>\n        )}\n      </div>\n    );\n  }\n);\n\nexport default InputOTP;\n"],"names":["InputOTP","React","label","inputType","regexPattern","length","size","state","helperText","gapSize","variant","className","rootClassName","childClassName","rest","ref","id","useId","pattern","REGEXP_ONLY_DIGITS","REGEXP_ONLY_CHARS","REGEXP_ONLY_DIGITS_AND_CHARS","helperTextStyles","cn","jsx","Label","SInputOTP","InputOTPGroup","_","index","InputOTPSlot"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCA,MAAMA,KAAWC,EAAM;AAAA,EAIrB,CACE;AAAA,IACE,OAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,cAAAC;AAAA,IACA,QAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,OAAAC,IAAQ;AAAA,IACR,YAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,SAAAC,IAAU;AAAA,IACV,WAAAC;AAAA,IACA,eAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAMC,IAAKC,EAAA,GAELC,IACJf,MAAc,WACVgB,IACAhB,MAAc,UACZiB,IACAjB,MAAc,qBACZkB,IACA,QAEJC,IAAmB;AAAA,MACvB,SAAS;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA,MACT,OAAO;AAAA,IAAA;AAGT,6BACG,OAAA,EAAI,WAAWC,EAAG,kCAAkCX,CAAa,GAChE,UAAA;AAAA,MAAA,gBAAAY,EAACC,GAAA,EAAM,SAAST,GAAK,UAAAd,GAAM;AAAA,MAC3B,gBAAAsB;AAAA,QAACE;AAAAA,QAAA;AAAA,UACC,IAAAV;AAAA,UACA,WAAWX,KAAU;AAAA,UACrB,SAASD,KAAgBc;AAAA,UACzB,KAAAH;AAAA,UACC,GAAGD;AAAA,UAEJ,UAAA,gBAAAU;AAAA,YAACG;AAAA,YAAA;AAAA,cACC,WAAWJ;AAAA,gBACT;AAAA,kBACE,qFACEb,MAAY,cAAcD,IAAU;AAAA,gBAAA;AAAA,gBAExCE;AAAA,cAAA;AAAA,cAEF,OAAOF,IAAU,IAAI,EAAE,KAAK,GAAGA,CAAO,SAAS;AAAA,cAE9C,UAAA,MAAM,KAAK,EAAE,QAAQJ,KAAU,EAAA,CAAG,EAAE,IAAI,CAACuB,GAAGC,MAC3C,gBAAAL;AAAA,gBAACM;AAAA,gBAAA;AAAA,kBAEC,OAAAD;AAAA,kBACA,MAAAvB;AAAA,kBACA,OAAOC,KAAS;AAAA,kBAChB,SAAAG;AAAA,kBACA,WAAWG;AAAA,gBAAA;AAAA,gBALNgB;AAAA,cAAA,CAOR;AAAA,YAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,MAEDrB,KACC,gBAAAgB,EAAC,KAAA,EAAE,WAAWD,EAAG,WAAWhB,IAAQe,IAAmBf,CAAK,IAAI,EAAE,GAC/D,UAAAC,EAAA,CACH;AAAA,IAAA,GAEJ;AAAA,EAEJ;AACF;"}
+{"version":3,"file":"InputOTP.js","sources":["../../../../src/components/InputOTP/InputOTP.tsx"],"sourcesContent":["import React, { useId } from \"react\";\n\nimport {\n  InputOTP as SInputOTP,\n  InputOTPGroup,\n  InputOTPSlot,\n  type InputOTPProps as SInputOTPProps,\n  REGEXP_ONLY_DIGITS,\n  REGEXP_ONLY_CHARS,\n  REGEXP_ONLY_DIGITS_AND_CHARS,\n  inputOTPSlotVariants,\n} from \"@dsui/ui/components/input-otp\";\nimport { Label } from \"@dsui/ui/components/label\";\nimport type { VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@dsui/ui/index\";\n\nexport type InputOTPProps = Omit<\n  SInputOTPProps,\n  \"size\" | \"render\" | \"maxLength\"\n> & {\n  label?: React.ReactNode;\n  length?: number;\n  inputType?: \"digits\" | \"chars\" | \"digits-and-chars\";\n  size?: VariantProps<typeof inputOTPSlotVariants>[\"size\"];\n  state?: VariantProps<typeof inputOTPSlotVariants>[\"state\"];\n  variant?: VariantProps<typeof inputOTPSlotVariants>[\"variant\"];\n  regexPattern?: string;\n  helperText?: React.ReactNode;\n  gapSize?: number;\n  className?: string;\n  rootClassName?: string;\n  childClassName?: string;\n};\n\nconst InputOTP = React.forwardRef<\n  React.ElementRef<typeof SInputOTP>,\n  InputOTPProps\n>(\n  (\n    {\n      label,\n      inputType = \"digits\",\n      regexPattern,\n      length,\n      size = \"normal\",\n      state = \"default\",\n      helperText,\n      gapSize = 4,\n      variant = \"outlined\",\n      className,\n      rootClassName,\n      childClassName,\n      ...rest\n    },\n    ref\n  ) => {\n    const id = useId();\n\n    const pattern =\n      inputType === \"digits\"\n        ? REGEXP_ONLY_DIGITS\n        : inputType === \"chars\"\n          ? REGEXP_ONLY_CHARS\n          : inputType === \"digits-and-chars\"\n            ? REGEXP_ONLY_DIGITS_AND_CHARS\n            : undefined;\n\n    const helperTextStyles = {\n      default: \"ds:text-muted-foreground\",\n      success: \"ds:text-success\",\n      warning: \"ds:text-warning\",\n      error: \"ds:text-error\",\n    };\n\n    return (\n      <div className={cn(\"ds:flex ds:flex-col ds:gap-1.5 ds:relative\", rootClassName)}>\n        <Label htmlFor={id}>{label}</Label>\n        <SInputOTP\n          id={id}\n          maxLength={length ?? 4}\n          pattern={regexPattern ?? pattern}\n          ref={ref}\n          {...rest}\n        >\n          <InputOTPGroup\n            className={cn(\n              {\n                \"ds:gap-2 ds:*:data-[slot=input-otp-slot]:rounded-md ds:*:data-[slot=input-otp-slot]:border\":\n                  variant === \"outlined\" && gapSize > 0,\n              },\n              className\n            )}\n            style={gapSize > 0 ? { gap: `${gapSize}px` } : undefined}\n          >\n            {Array.from({ length: length ?? 4 }).map((_, index) => (\n              <InputOTPSlot\n                key={index}\n                index={index}\n                size={size}\n                state={state ?? undefined}\n                variant={variant}\n                className={childClassName}\n              />\n            ))}\n          </InputOTPGroup>\n        </SInputOTP>\n        {helperText && (\n          <p className={cn(\"ds:text-xs\", state ? helperTextStyles?.[state] : \"\")}>\n            {helperText}\n          </p>\n        )}\n      </div>\n    );\n  }\n);\n\nexport default InputOTP;\n"],"names":["InputOTP","React","label","inputType","regexPattern","length","size","state","helperText","gapSize","variant","className","rootClassName","childClassName","rest","ref","id","useId","pattern","REGEXP_ONLY_DIGITS","REGEXP_ONLY_CHARS","REGEXP_ONLY_DIGITS_AND_CHARS","helperTextStyles","cn","jsx","Label","SInputOTP","InputOTPGroup","_","index","InputOTPSlot"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCA,MAAMA,KAAWC,EAAM;AAAA,EAIrB,CACE;AAAA,IACE,OAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,cAAAC;AAAA,IACA,QAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,OAAAC,IAAQ;AAAA,IACR,YAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,SAAAC,IAAU;AAAA,IACV,WAAAC;AAAA,IACA,eAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAMC,IAAKC,EAAA,GAELC,IACJf,MAAc,WACVgB,IACAhB,MAAc,UACZiB,IACAjB,MAAc,qBACZkB,IACA,QAEJC,IAAmB;AAAA,MACvB,SAAS;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA,MACT,OAAO;AAAA,IAAA;AAGT,6BACG,OAAA,EAAI,WAAWC,EAAG,8CAA8CX,CAAa,GAC5E,UAAA;AAAA,MAAA,gBAAAY,EAACC,GAAA,EAAM,SAAST,GAAK,UAAAd,GAAM;AAAA,MAC3B,gBAAAsB;AAAA,QAACE;AAAAA,QAAA;AAAA,UACC,IAAAV;AAAA,UACA,WAAWX,KAAU;AAAA,UACrB,SAASD,KAAgBc;AAAA,UACzB,KAAAH;AAAA,UACC,GAAGD;AAAA,UAEJ,UAAA,gBAAAU;AAAA,YAACG;AAAA,YAAA;AAAA,cACC,WAAWJ;AAAA,gBACT;AAAA,kBACE,8FACEb,MAAY,cAAcD,IAAU;AAAA,gBAAA;AAAA,gBAExCE;AAAA,cAAA;AAAA,cAEF,OAAOF,IAAU,IAAI,EAAE,KAAK,GAAGA,CAAO,SAAS;AAAA,cAE9C,UAAA,MAAM,KAAK,EAAE,QAAQJ,KAAU,EAAA,CAAG,EAAE,IAAI,CAACuB,GAAGC,MAC3C,gBAAAL;AAAA,gBAACM;AAAA,gBAAA;AAAA,kBAEC,OAAAD;AAAA,kBACA,MAAAvB;AAAA,kBACA,OAAOC,KAAS;AAAA,kBAChB,SAAAG;AAAA,kBACA,WAAWG;AAAA,gBAAA;AAAA,gBALNgB;AAAA,cAAA,CAOR;AAAA,YAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,MAEDrB,KACC,gBAAAgB,EAAC,KAAA,EAAE,WAAWD,EAAG,cAAchB,IAAQe,IAAmBf,CAAK,IAAI,EAAE,GAClE,UAAAC,EAAA,CACH;AAAA,IAAA,GAEJ;AAAA,EAEJ;AACF;"}