@sth87/shadcn-design-system 0.0.34 → 0.0.36

package/dist/esm/components/FloatLabel.js

@@ -1,16 +1,24 @@
-import { jsxs as l, jsx as r } from "react/jsx-runtime";
-import * as i from "react";
-import { cn as u } from "../packages/ui/src/lib/utils.js";
-import { Label as f } from "../packages/ui/src/components/label.js";
-import { Tooltip as h } from "./Tooltip/Tooltip.js";
-import { Info as g } from "lucide-react";
-const w = i.forwardRef(
-  ({ className: a, infoTooltip: p, size: t = "xl", shouldFloat: o, children: n, ...c }, s) => {
-    const e = t === "lg" || !1;
-    return /* @__PURE__ */ l(
-      f,
+import { jsxs as p, jsx as r } from "react/jsx-runtime";
+import * as u from "react";
+import { cn as f } from "../packages/ui/src/lib/utils.js";
+import { Label as h } from "../packages/ui/src/components/label.js";
+import { Tooltip as g } from "./Tooltip/Tooltip.js";
+import { Info as w } from "lucide-react";
+const m = u.forwardRef(
+  ({
+    className: t,
+    infoTooltip: a,
+    size: n = "xl",
+    shouldFloat: o,
+    required: c,
+    children: s,
+    ...l
+  }, i) => {
+    const e = n === "lg" || !1;
+    return /* @__PURE__ */ p(
+      h,
       {
-        className: u(
+        className: f(
           "absolute start-2 select-none pointer-events-none",
           "bg-background px-3 translate-y-2",
           "flex",
@@ -40,20 +48,23 @@ const w = i.forwardRef(
             "top-0 scale-100 translate-x-0 w-[calc(100%-(--spacing(4)))] h-[calc(100%-(--spacing(4)))] py-3 bg-background": typeof o == "boolean" && !o && e
           },
           "will-change-transform transition-all duration-300 ease-in-out",
-          a
+          t
         ),
-        ref: s,
-        ...c,
+        ref: i,
+        ...l,
         children: [
-          /* @__PURE__ */ r("span", { className: "truncate whitespace-nowrap max-w-full pointer-events-none", children: n }),
-          p && /* @__PURE__ */ r(h, { content: p, children: /* @__PURE__ */ r(g, { className: "size-3.5 min-w-3.5 z-10 pointer-events-auto" }) })
+          /* @__PURE__ */ p("span", { className: "truncate whitespace-nowrap max-w-full pointer-events-none", children: [
+            s,
+            c && /* @__PURE__ */ r("span", { className: "text-error ml-0.5", children: "*" })
+          ] }),
+          a && /* @__PURE__ */ r(g, { content: a, children: /* @__PURE__ */ r(w, { className: "size-3.5 min-w-3.5 z-10 pointer-events-auto" }) })
         ]
       }
     );
   }
 );
-w.displayName = "FloatingLabel";
+m.displayName = "FloatingLabel";
 export {
-  w as FloatingLabel
+  m as FloatingLabel
 };
 //# sourceMappingURL=FloatLabel.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FloatLabel.js","sources":["../../../src/components/FloatLabel.tsx"],"sourcesContent":["import * as React from \"react\";\n\nimport { cn } from \"@dsui/ui/lib/utils\";\nimport { Label } from \"@dsui/ui/components/label\";\nimport { Tooltip } from \"./Tooltip/Tooltip\";\nimport { Info } from \"lucide-react\";\n\nconst FloatingLabel = React.forwardRef<\n  React.ElementRef<typeof Label>,\n  React.ComponentPropsWithoutRef<typeof Label> & {\n    infoTooltip?: React.ReactNode;\n    size?: string;\n    shouldFloat?: boolean;\n  }\n>(\n  (\n    { className, infoTooltip, size = \"xl\", shouldFloat, children, ...props },\n    ref\n  ) => {\n    const lagerSize = size === \"lg\" || false;\n\n    return (\n      <Label\n        className={cn(\n          \"absolute start-2 select-none pointer-events-none\",\n          \"bg-background px-3 translate-y-2\",\n          \"flex\",\n          {\n            \"top-0.5 origin-left scale-75 translate-x-1 max-w-full h-3 py-0 bg-transparent\":\n              !lagerSize,\n            // State empty (placeholder shown) - ở giữa input\n            \"peer-placeholder-shown:top-0 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-x-0 peer-placeholder-shown:w-[calc(100%-(--spacing(4)))] peer-placeholder-shown:h-[calc(100%-(--spacing(4)))] peer-placeholder-shown:py-3 peer-placeholder-shown:bg-background\":\n              !lagerSize,\n            // // State focus - nằm trên input\n            \"peer-focus:top-0.5 peer-focus:origin-left peer-focus:scale-75 peer-focus:translate-x-1 peer-focus:text-primary peer-focus:max-w-full peer-focus:h-3 peer-focus:py-0 peer-focus:bg-transparent\":\n              !lagerSize,\n            \"group-focus-within:top-0.5 group-focus-within:origin-left group-focus-within:scale-75 group-focus-within:translate-x-1 group-focus-within:text-primary group-focus-within:max-w-full group-focus-within:h-3 group-focus-within:py-0 group-focus-within:bg-transparent\":\n              !lagerSize,\n          },\n          {\n            \"-top-3.5 origin-left scale-75 translate-x-0 max-w-full w-auto h-3 py-0\":\n              lagerSize,\n            // State empty (placeholder shown) - ở giữa input\n            \"peer-placeholder-shown:-top-0.5 peer-placeholder-shown:scale-100 peer-placeholder-shown:w-[calc(100%-(--spacing(4)))] peer-placeholder-shown:h-[calc(100%-(--spacing(3)))] peer-placeholder-shown:py-2 peer-placeholder-shown:bg-background\":\n              lagerSize,\n            // // State focus - nằm trên input\n            \"peer-focus:-top-3.5 peer-focus:origin-left peer-focus:scale-75 peer-focus:text-primary peer-focus:max-w-full peer-focus:w-auto peer-focus:h-3 peer-focus:py-0\":\n              lagerSize,\n            \"group-focus-within:-top-3.5 group-focus-within:origin-left group-focus-within:scale-75 group-focus-within:text-primary group-focus-within:max-w-full group-focus-within:w-auto group-focus-within:h-3 group-focus-within:py-0\":\n              lagerSize,\n          },\n\n          // State when shouldFloat prop is set\n          {\n            \"top-0.5 origin-left scale-75 translate-x-1 max-w-full h-3 py-0\":\n              typeof shouldFloat === \"boolean\" && shouldFloat && !lagerSize,\n            \"top-0 scale-100 translate-x-0 w-[calc(100%-(--spacing(4)))] h-[calc(100%-(--spacing(4)))] py-3 bg-background\":\n              typeof shouldFloat === \"boolean\" && !shouldFloat && !lagerSize,\n          },\n          {\n            \"-top-3.5 origin-left scale-75 translate-x-0 max-w-full h-3 py-0\":\n              typeof shouldFloat === \"boolean\" && shouldFloat && lagerSize,\n            \"top-0 scale-100 translate-x-0 w-[calc(100%-(--spacing(4)))] h-[calc(100%-(--spacing(4)))] py-3 bg-background\":\n              typeof shouldFloat === \"boolean\" && !shouldFloat && lagerSize,\n          },\n          \"will-change-transform transition-all duration-300 ease-in-out\",\n          className\n        )}\n        ref={ref}\n        {...props}\n      >\n        <span className=\"truncate whitespace-nowrap max-w-full pointer-events-none\">\n          {children}\n        </span>\n\n        {infoTooltip && (\n          <Tooltip content={infoTooltip}>\n            <Info className=\"size-3.5 min-w-3.5 z-10 pointer-events-auto\" />\n          </Tooltip>\n        )}\n      </Label>\n    );\n  }\n);\n\nFloatingLabel.displayName = \"FloatingLabel\";\n\nexport { FloatingLabel };\n"],"names":["FloatingLabel","React","className","infoTooltip","size","shouldFloat","children","props","ref","lagerSize","jsxs","Label","cn","jsx","Tooltip","Info"],"mappings":";;;;;;AAOA,MAAMA,IAAgBC,EAAM;AAAA,EAQ1B,CACE,EAAE,WAAAC,GAAW,aAAAC,GAAa,MAAAC,IAAO,MAAM,aAAAC,GAAa,UAAAC,GAAU,GAAGC,EAAA,GACjEC,MACG;AACH,UAAMC,IAAYL,MAAS,QAAQ;AAEnC,WACE,gBAAAM;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,WAAWC;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,YACE,iFACE,CAACH;AAAA;AAAA,YAEH,iRACE,CAACA;AAAA;AAAA,YAEH,iMACE,CAACA;AAAA,YACH,yQACE,CAACA;AAAA,UAAA;AAAA,UAEL;AAAA,YACE,0EACEA;AAAA;AAAA,YAEF,+OACEA;AAAA;AAAA,YAEF,iKACEA;AAAA,YACF,iOACEA;AAAA,UAAA;AAAA;AAAA,UAIJ;AAAA,YACE,kEACE,OAAOJ,KAAgB,aAAaA,KAAe,CAACI;AAAA,YACtD,gHACE,OAAOJ,KAAgB,aAAa,CAACA,KAAe,CAACI;AAAA,UAAA;AAAA,UAEzD;AAAA,YACE,mEACE,OAAOJ,KAAgB,aAAaA,KAAeI;AAAA,YACrD,gHACE,OAAOJ,KAAgB,aAAa,CAACA,KAAeI;AAAA,UAAA;AAAA,UAExD;AAAA,UACAP;AAAA,QAAA;AAAA,QAEF,KAAAM;AAAA,QACC,GAAGD;AAAA,QAEJ,UAAA;AAAA,UAAA,gBAAAM,EAAC,QAAA,EAAK,WAAU,6DACb,UAAAP,EAAA,CACH;AAAA,UAECH,uBACEW,GAAA,EAAQ,SAASX,GAChB,UAAA,gBAAAU,EAACE,GAAA,EAAK,WAAU,8CAAA,CAA8C,EAAA,CAChE;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEAf,EAAc,cAAc;"}
+{"version":3,"file":"FloatLabel.js","sources":["../../../src/components/FloatLabel.tsx"],"sourcesContent":["import * as React from \"react\";\n\nimport { cn } from \"@dsui/ui/lib/utils\";\nimport { Label } from \"@dsui/ui/components/label\";\nimport { Tooltip } from \"./Tooltip/Tooltip\";\nimport { Info } from \"lucide-react\";\n\nconst FloatingLabel = React.forwardRef<\n  React.ElementRef<typeof Label>,\n  React.ComponentPropsWithoutRef<typeof Label> & {\n    infoTooltip?: React.ReactNode;\n    size?: string;\n    shouldFloat?: boolean;\n    required?: boolean;\n  }\n>(\n  (\n    {\n      className,\n      infoTooltip,\n      size = \"xl\",\n      shouldFloat,\n      required,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const lagerSize = size === \"lg\" || false;\n\n    return (\n      <Label\n        className={cn(\n          \"absolute start-2 select-none pointer-events-none\",\n          \"bg-background px-3 translate-y-2\",\n          \"flex\",\n          {\n            \"top-0.5 origin-left scale-75 translate-x-1 max-w-full h-3 py-0 bg-transparent\":\n              !lagerSize,\n            // State empty (placeholder shown) - ở giữa input\n            \"peer-placeholder-shown:top-0 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-x-0 peer-placeholder-shown:w-[calc(100%-(--spacing(4)))] peer-placeholder-shown:h-[calc(100%-(--spacing(4)))] peer-placeholder-shown:py-3 peer-placeholder-shown:bg-background\":\n              !lagerSize,\n            // // State focus - nằm trên input\n            \"peer-focus:top-0.5 peer-focus:origin-left peer-focus:scale-75 peer-focus:translate-x-1 peer-focus:text-primary peer-focus:max-w-full peer-focus:h-3 peer-focus:py-0 peer-focus:bg-transparent\":\n              !lagerSize,\n            \"group-focus-within:top-0.5 group-focus-within:origin-left group-focus-within:scale-75 group-focus-within:translate-x-1 group-focus-within:text-primary group-focus-within:max-w-full group-focus-within:h-3 group-focus-within:py-0 group-focus-within:bg-transparent\":\n              !lagerSize,\n          },\n          {\n            \"-top-3.5 origin-left scale-75 translate-x-0 max-w-full w-auto h-3 py-0\":\n              lagerSize,\n            // State empty (placeholder shown) - ở giữa input\n            \"peer-placeholder-shown:-top-0.5 peer-placeholder-shown:scale-100 peer-placeholder-shown:w-[calc(100%-(--spacing(4)))] peer-placeholder-shown:h-[calc(100%-(--spacing(3)))] peer-placeholder-shown:py-2 peer-placeholder-shown:bg-background\":\n              lagerSize,\n            // // State focus - nằm trên input\n            \"peer-focus:-top-3.5 peer-focus:origin-left peer-focus:scale-75 peer-focus:text-primary peer-focus:max-w-full peer-focus:w-auto peer-focus:h-3 peer-focus:py-0\":\n              lagerSize,\n            \"group-focus-within:-top-3.5 group-focus-within:origin-left group-focus-within:scale-75 group-focus-within:text-primary group-focus-within:max-w-full group-focus-within:w-auto group-focus-within:h-3 group-focus-within:py-0\":\n              lagerSize,\n          },\n\n          // State when shouldFloat prop is set\n          {\n            \"top-0.5 origin-left scale-75 translate-x-1 max-w-full h-3 py-0\":\n              typeof shouldFloat === \"boolean\" && shouldFloat && !lagerSize,\n            \"top-0 scale-100 translate-x-0 w-[calc(100%-(--spacing(4)))] h-[calc(100%-(--spacing(4)))] py-3 bg-background\":\n              typeof shouldFloat === \"boolean\" && !shouldFloat && !lagerSize,\n          },\n          {\n            \"-top-3.5 origin-left scale-75 translate-x-0 max-w-full h-3 py-0\":\n              typeof shouldFloat === \"boolean\" && shouldFloat && lagerSize,\n            \"top-0 scale-100 translate-x-0 w-[calc(100%-(--spacing(4)))] h-[calc(100%-(--spacing(4)))] py-3 bg-background\":\n              typeof shouldFloat === \"boolean\" && !shouldFloat && lagerSize,\n          },\n          \"will-change-transform transition-all duration-300 ease-in-out\",\n          className\n        )}\n        ref={ref}\n        {...props}\n      >\n        <span className=\"truncate whitespace-nowrap max-w-full pointer-events-none\">\n          {children}\n          {required && <span className=\"text-error ml-0.5\">*</span>}\n        </span>\n\n        {infoTooltip && (\n          <Tooltip content={infoTooltip}>\n            <Info className=\"size-3.5 min-w-3.5 z-10 pointer-events-auto\" />\n          </Tooltip>\n        )}\n      </Label>\n    );\n  }\n);\n\nFloatingLabel.displayName = \"FloatingLabel\";\n\nexport { FloatingLabel };\n"],"names":["FloatingLabel","React","className","infoTooltip","size","shouldFloat","required","children","props","ref","lagerSize","jsxs","Label","cn","jsx","Tooltip","Info"],"mappings":";;;;;;AAOA,MAAMA,IAAgBC,EAAM;AAAA,EAS1B,CACE;AAAA,IACE,WAAAC;AAAA,IACA,aAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,aAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAMC,IAAYN,MAAS,QAAQ;AAEnC,WACE,gBAAAO;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,WAAWC;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,YACE,iFACE,CAACH;AAAA;AAAA,YAEH,iRACE,CAACA;AAAA;AAAA,YAEH,iMACE,CAACA;AAAA,YACH,yQACE,CAACA;AAAA,UAAA;AAAA,UAEL;AAAA,YACE,0EACEA;AAAA;AAAA,YAEF,+OACEA;AAAA;AAAA,YAEF,iKACEA;AAAA,YACF,iOACEA;AAAA,UAAA;AAAA;AAAA,UAIJ;AAAA,YACE,kEACE,OAAOL,KAAgB,aAAaA,KAAe,CAACK;AAAA,YACtD,gHACE,OAAOL,KAAgB,aAAa,CAACA,KAAe,CAACK;AAAA,UAAA;AAAA,UAEzD;AAAA,YACE,mEACE,OAAOL,KAAgB,aAAaA,KAAeK;AAAA,YACrD,gHACE,OAAOL,KAAgB,aAAa,CAACA,KAAeK;AAAA,UAAA;AAAA,UAExD;AAAA,UACAR;AAAA,QAAA;AAAA,QAEF,KAAAO;AAAA,QACC,GAAGD;AAAA,QAEJ,UAAA;AAAA,UAAA,gBAAAG,EAAC,QAAA,EAAK,WAAU,6DACb,UAAA;AAAA,YAAAJ;AAAA,YACAD,KAAY,gBAAAQ,EAAC,QAAA,EAAK,WAAU,qBAAoB,UAAA,IAAA,CAAC;AAAA,UAAA,GACpD;AAAA,UAECX,uBACEY,GAAA,EAAQ,SAASZ,GAChB,UAAA,gBAAAW,EAACE,GAAA,EAAK,WAAU,8CAAA,CAA8C,EAAA,CAChE;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEAhB,EAAc,cAAc;"}

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

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