@sth87/shadcn-design-system 0.1.0 → 0.1.2

package/dist/esm/components/Checkbox/Checkbox.js

@@ -1,4 +1,4 @@
-import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
 import u, { useState as D } from "react";
 import { Checkbox as L } from "../../packages/ui/src/components/checkbox.js";
 import "@radix-ui/react-slot";
@@ -10,7 +10,7 @@ import { Label as V } from "../../packages/ui/src/components/label.js";
 import "../../packages/ui/src/components/select.js";
 import "../../packages/ui/src/components/combobox.js";
 import "@radix-ui/react-tooltip";
-import { cn as l } from "../../packages/ui/src/lib/utils.js";
+import { cn as a } from "../../packages/ui/src/lib/utils.js";
 import { Info as g } from "lucide-react";
 import "react-day-picker";
 import "../../packages/ui/src/components/popover.js";
@@ -38,40 +38,40 @@ import { ConfettiPiece as q } from "../../utils/css.js";
 const B = u.forwardRef(
   (C, N) => {
     const {
-      label: s,
+      label: o,
       infoTooltip: i,
       helperText: r,
-      state: m,
+      state: l,
       variant: w = "default",
       size: v = "default",
       color: k,
       labelPosition: t = "right",
-      labelAlignment: d = "center",
+      labelAlignment: m = "center",
       icon: y,
       animation: T,
       id: I,
       onCheckedChange: c,
       ...j
-    } = C, [z, p] = D(!1), A = u.useId(), n = I || A, P = {
+    } = C, [z, p] = D(!1), A = u.useId(), d = I || A, P = {
       default: "ds:text-muted-foreground",
       success: "ds:text-success",
       warning: "ds:text-warning",
       error: "ds:text-error"
-    }, S = (a) => {
-      a && (p(!0), setTimeout(() => p(!1), 800)), c?.(a);
-    }, f = t === "top" || t === "bottom", _ = f ? "flex-col" : "flex-row", F = f ? "gap-1.5" : "gap-2", R = d === "start" ? "items-start" : d === "center" ? "items-center" : "items-end", h = "flex gap-2 peer-disabled:cursor-not-allowed peer-disabled:opacity-70";
-    return /* @__PURE__ */ o("div", { className: l("ds:flex ds:flex-col ds:gap-1.5 ds:relative", {}), children: [
-      /* @__PURE__ */ o("div", { className: l("ds:flex", _, F, R), children: [
-        (t === "top" || t === "left") && s && /* @__PURE__ */ o("label", { htmlFor: n, className: h, children: [
-          s,
+    }, S = (n) => {
+      n && (p(!0), setTimeout(() => p(!1), 800)), c?.(n);
+    }, f = t === "top" || t === "bottom", _ = f ? "ds:flex-col" : "ds:flex-row", F = f ? "ds:gap-1.5" : "ds:gap-2", R = m === "start" ? "ds:items-start" : m === "center" ? "ds:items-center" : "ds:items-end", h = "ds:flex ds:gap-2 ds:peer-disabled:cursor-not-allowed ds:peer-disabled:opacity-70";
+    return /* @__PURE__ */ s("div", { className: a("ds:flex ds:flex-col ds:gap-1.5 ds:relative", {}), children: [
+      /* @__PURE__ */ s("div", { className: a("ds:flex", _, F, R), children: [
+        (t === "top" || t === "left") && o && /* @__PURE__ */ s("label", { htmlFor: d, className: h, children: [
+          o,
           i && /* @__PURE__ */ e(b, { content: i, children: /* @__PURE__ */ e(g, { className: "ds:size-3.5 ds:min-w-3.5" }) })
         ] }),
-        /* @__PURE__ */ o("div", { className: "ds:relative ds:inline-flex", children: [
+        /* @__PURE__ */ s("div", { className: "ds:relative ds:inline-flex", children: [
           /* @__PURE__ */ e(
             L,
             {
               ref: N,
-              id: n,
+              id: d,
               ...j,
               variant: w,
               size: v,
@@ -80,19 +80,19 @@ const B = u.forwardRef(
               onCheckedChange: T ? S : c
             }
           ),
-          /* @__PURE__ */ e($, { children: z && /* @__PURE__ */ e("div", { className: "ds:pointer-events-none ds:absolute ds:inset-0", children: [...Array(12)].map((a, x) => /* @__PURE__ */ e(q, { index: x }, x)) }) })
+          /* @__PURE__ */ e($, { children: z && /* @__PURE__ */ e("div", { className: "ds:pointer-events-none ds:absolute ds:inset-0", children: [...Array(12)].map((n, x) => /* @__PURE__ */ e(q, { index: x }, x)) }) })
         ] }),
-        (t === "bottom" || t === "right") && s && /* @__PURE__ */ o(V, { htmlFor: n, className: h, children: [
-          s,
+        (t === "bottom" || t === "right") && o && /* @__PURE__ */ s(V, { htmlFor: d, className: h, children: [
+          o,
           i && /* @__PURE__ */ e(b, { content: i, children: /* @__PURE__ */ e(g, { className: "ds:size-3.5 ds:min-w-3.5" }) })
         ] })
       ] }),
       r && /* @__PURE__ */ e("div", { className: "ds:flex ds:items-center ds:justify-between ds:text-xs ds:gap-2", children: r && /* @__PURE__ */ e(
         "p",
         {
-          className: l(
+          className: a(
             "ds:text-xs",
-            m ? P?.[m] : ""
+            l ? P?.[l] : ""
           ),
           children: r
         }

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { Checkbox as SCheckbox } from \"@dsui/ui/components/checkbox\";\nimport { cn } from \"@dsui/ui/index\";\nimport { Tooltip } from \"../Tooltip/Tooltip\";\nimport { Label } from \"../Label\";\nimport { Info } from \"lucide-react\";\nimport { AnimatePresence } from \"motion/react\";\nimport { ConfettiPiece } from \"@/utils/css\";\nimport type { CheckedState } from \"@radix-ui/react-checkbox\";\n\nexport type CheckboxProps = Omit<\n  React.ComponentPropsWithoutRef<typeof SCheckbox>,\n  \"onCheckedChange\" | \"variant\" | \"size\" | \"color\" | \"icon\"\n> & {\n  onCheckedChange?: (checked: CheckedState) => void;\n  variant?: \"default\" | \"circle\";\n  size?: \"sm\" | \"default\" | \"lg\";\n  color?:\n    | \"primary\"\n    | \"secondary\"\n    | \"accent\"\n    | \"destructive\"\n    | \"muted\"\n    | \"success\"\n    | \"error\"\n    | \"warning\";\n  icon?: React.ReactNode;\n  label?: React.ReactNode;\n  labelPosition?: \"top\" | \"left\" | \"right\" | \"bottom\";\n  labelAlignment?: \"start\" | \"center\" | \"end\";\n  infoTooltip?: React.ReactNode;\n  helperText?: React.ReactNode;\n  state?: \"default\" | \"error\" | \"success\" | \"warning\";\n  animation?: \"confetti\" | undefined;\n};\n\nconst Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(\n  (props, ref) => {\n    const {\n      label,\n      infoTooltip,\n      helperText,\n      state,\n      variant = \"default\",\n      size = \"default\",\n      color,\n      labelPosition = \"right\",\n      labelAlignment = \"center\",\n      icon,\n      animation,\n      id,\n      onCheckedChange,\n      ...rest\n    } = props;\n    const [showConfetti, setShowConfetti] = useState(false);\n    const generatedId = React.useId();\n    const inputId = id || generatedId;\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    const handleCheckedChange = (checked: CheckedState) => {\n      if (checked) {\n        setShowConfetti(true);\n        setTimeout(() => setShowConfetti(false), 800);\n      }\n      onCheckedChange?.(checked);\n    };\n\n    const isVertical = labelPosition === \"top\" || labelPosition === \"bottom\";\n    const flexDirection = isVertical ? \"flex-col\" : \"flex-row\";\n    const gapClass = isVertical ? \"gap-1.5\" : \"gap-2\";\n\n    const alignmentClass =\n      labelAlignment === \"start\"\n        ? \"items-start\"\n        : labelAlignment === \"center\"\n          ? \"items-center\"\n          : \"items-end\";\n\n    const labelClass =\n      \"flex gap-2 peer-disabled:cursor-not-allowed peer-disabled:opacity-70\";\n\n    return (\n      <div className={cn(\"ds:flex ds:flex-col ds:gap-1.5 ds:relative\", {})}>\n        <div className={cn(\"ds:flex\", flexDirection, gapClass, alignmentClass)}>\n          {(labelPosition === \"top\" || labelPosition === \"left\") && label && (\n            <label htmlFor={inputId} className={labelClass}>\n              {label}\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 ds:inline-flex\">\n            <SCheckbox\n              ref={ref}\n              id={inputId}\n              {...rest}\n              variant={variant}\n              size={size}\n              color={color}\n              icon={icon}\n              onCheckedChange={\n                animation ? handleCheckedChange : onCheckedChange\n              }\n            />\n\n            <AnimatePresence>\n              {showConfetti && (\n                <div className=\"ds:pointer-events-none ds:absolute ds:inset-0\">\n                  {[...Array(12)].map((_, i) => (\n                    <ConfettiPiece key={i} index={i} />\n                  ))}\n                </div>\n              )}\n            </AnimatePresence>\n          </div>\n\n          {(labelPosition === \"bottom\" || labelPosition === \"right\") &&\n            label && (\n              <Label htmlFor={inputId} className={labelClass}>\n                {label}\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        </div>\n\n        {helperText && (\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          </div>\n        )}\n      </div>\n    );\n  }\n);\n\nCheckbox.displayName = \"Checkbox\";\nexport default Checkbox;\n"],"names":["Checkbox","React","props","ref","label","infoTooltip","helperText","state","variant","size","color","labelPosition","labelAlignment","icon","animation","id","onCheckedChange","rest","showConfetti","setShowConfetti","useState","generatedId","inputId","helperTextStyles","handleCheckedChange","checked","isVertical","flexDirection","gapClass","alignmentClass","labelClass","cn","jsxs","Tooltip","jsx","Info","SCheckbox","AnimatePresence","_","i","ConfettiPiece","Label"],"mappings":"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"}
+{"version":3,"file":"Checkbox.js","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { Checkbox as SCheckbox } from \"@dsui/ui/components/checkbox\";\nimport { cn } from \"@dsui/ui/index\";\nimport { Tooltip } from \"../Tooltip/Tooltip\";\nimport { Label } from \"../Label\";\nimport { Info } from \"lucide-react\";\nimport { AnimatePresence } from \"motion/react\";\nimport { ConfettiPiece } from \"@/utils/css\";\nimport type { CheckedState } from \"@radix-ui/react-checkbox\";\n\nexport type CheckboxProps = Omit<\n  React.ComponentPropsWithoutRef<typeof SCheckbox>,\n  \"onCheckedChange\" | \"variant\" | \"size\" | \"color\" | \"icon\"\n> & {\n  onCheckedChange?: (checked: CheckedState) => void;\n  variant?: \"default\" | \"circle\";\n  size?: \"sm\" | \"default\" | \"lg\";\n  color?:\n    | \"primary\"\n    | \"secondary\"\n    | \"accent\"\n    | \"destructive\"\n    | \"muted\"\n    | \"success\"\n    | \"error\"\n    | \"warning\";\n  icon?: React.ReactNode;\n  label?: React.ReactNode;\n  labelPosition?: \"top\" | \"left\" | \"right\" | \"bottom\";\n  labelAlignment?: \"start\" | \"center\" | \"end\";\n  infoTooltip?: React.ReactNode;\n  helperText?: React.ReactNode;\n  state?: \"default\" | \"error\" | \"success\" | \"warning\";\n  animation?: \"confetti\" | undefined;\n};\n\nconst Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(\n  (props, ref) => {\n    const {\n      label,\n      infoTooltip,\n      helperText,\n      state,\n      variant = \"default\",\n      size = \"default\",\n      color,\n      labelPosition = \"right\",\n      labelAlignment = \"center\",\n      icon,\n      animation,\n      id,\n      onCheckedChange,\n      ...rest\n    } = props;\n    const [showConfetti, setShowConfetti] = useState(false);\n    const generatedId = React.useId();\n    const inputId = id || generatedId;\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    const handleCheckedChange = (checked: CheckedState) => {\n      if (checked) {\n        setShowConfetti(true);\n        setTimeout(() => setShowConfetti(false), 800);\n      }\n      onCheckedChange?.(checked);\n    };\n\n    const isVertical = labelPosition === \"top\" || labelPosition === \"bottom\";\n    const flexDirection = isVertical ? \"ds:flex-col\" : \"ds:flex-row\";\n    const gapClass = isVertical ? \"ds:gap-1.5\" : \"ds:gap-2\";\n\n    const alignmentClass =\n      labelAlignment === \"start\"\n        ? \"ds:items-start\"\n        : labelAlignment === \"center\"\n          ? \"ds:items-center\"\n          : \"ds:items-end\";\n\n    const labelClass =\n      \"ds:flex ds:gap-2 ds:peer-disabled:cursor-not-allowed ds:peer-disabled:opacity-70\";\n\n    return (\n      <div className={cn(\"ds:flex ds:flex-col ds:gap-1.5 ds:relative\", {})}>\n        <div className={cn(\"ds:flex\", flexDirection, gapClass, alignmentClass)}>\n          {(labelPosition === \"top\" || labelPosition === \"left\") && label && (\n            <label htmlFor={inputId} className={labelClass}>\n              {label}\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 ds:inline-flex\">\n            <SCheckbox\n              ref={ref}\n              id={inputId}\n              {...rest}\n              variant={variant}\n              size={size}\n              color={color}\n              icon={icon}\n              onCheckedChange={\n                animation ? handleCheckedChange : onCheckedChange\n              }\n            />\n\n            <AnimatePresence>\n              {showConfetti && (\n                <div className=\"ds:pointer-events-none ds:absolute ds:inset-0\">\n                  {[...Array(12)].map((_, i) => (\n                    <ConfettiPiece key={i} index={i} />\n                  ))}\n                </div>\n              )}\n            </AnimatePresence>\n          </div>\n\n          {(labelPosition === \"bottom\" || labelPosition === \"right\") &&\n            label && (\n              <Label htmlFor={inputId} className={labelClass}>\n                {label}\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        </div>\n\n        {helperText && (\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          </div>\n        )}\n      </div>\n    );\n  }\n);\n\nCheckbox.displayName = \"Checkbox\";\nexport default Checkbox;\n"],"names":["Checkbox","React","props","ref","label","infoTooltip","helperText","state","variant","size","color","labelPosition","labelAlignment","icon","animation","id","onCheckedChange","rest","showConfetti","setShowConfetti","useState","generatedId","inputId","helperTextStyles","handleCheckedChange","checked","isVertical","flexDirection","gapClass","alignmentClass","labelClass","cn","jsxs","Tooltip","jsx","Info","SCheckbox","AnimatePresence","_","i","ConfettiPiece","Label"],"mappings":"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"}

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

@@ -7,7 +7,7 @@ import { Info as Y, ChevronUp as Z, ChevronDown as T, X as q, EyeOff as F, Eye a
 import { withMask as ee } from "use-mask-input";
 import { Tooltip as se } from "../Tooltip/Tooltip.js";
 import { Label as te } from "../../packages/ui/src/components/label.js";
-const ne = r.forwardRef(
+const de = r.forwardRef(
   ({
     className: _,
     label: x,
@@ -15,7 +15,7 @@ const ne = r.forwardRef(
     state: N,
     size: l,
     isFloatLabel: c,
-    type: d,
+    type: n,
     mask: g,
     maskOptions: P,
     maxLength: b,
@@ -32,24 +32,24 @@ const ne = r.forwardRef(
     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 (n.current) {
-        n.current.value = "", M(0);
+      if (d.current) {
+        d.current.value = "", M(0);
         const s = {
-          target: n.current,
-          currentTarget: n.current
+          target: d.current,
+          currentTarget: d.current
         };
         e.onChange?.(s), I && I();
       }
-    }, y = r.useId(), n = r.useRef(null), $ = r.useCallback(
+    }, y = r.useId(), d = r.useRef(null), $ = r.useCallback(
       (s) => {
-        if (n && (n.current = s), g && s) {
+        if (d && (d.current = s), g && s) {
           const m = ee(g, P);
           typeof m == "function" && m(s);
         }
       },
       [g, P]
     );
-    r.useImperativeHandle(H, () => n.current);
+    r.useImperativeHandle(H, () => d.current);
     const [R, A] = r.useState(!1), G = {
       default: "ds:text-muted-foreground",
       success: "ds:text-success",
@@ -57,44 +57,44 @@ const ne = r.forwardRef(
       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" }
+        xs: { prefix: "ds:pl-8", suffix: "ds:pr-8" },
+        sm: { prefix: "ds:pl-9", suffix: "ds:pr-9" },
+        normal: { prefix: "ds:pl-10", suffix: "ds:pr-10" },
+        lg: { prefix: "ds:pl-11", suffix: "ds:pr-11" },
+        xl: { prefix: "ds:pl-12", suffix: "ds:pr-12" }
       };
       return s[z] || s.normal;
     })(), j = {
-      xs: "size-3",
-      sm: "size-3.5",
-      normal: "size-4",
-      lg: "size-4",
-      xl: "size-4"
-    }[z] || "size-4", J = () => {
-      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 : "";
+      xs: "ds:size-3",
+      sm: "ds:size-3.5",
+      normal: "ds:size-4",
+      lg: "ds:size-4",
+      xl: "ds:size-4"
+    }[z] || "ds:size-4", J = () => {
+      const s = n === "number" || n === "password" || n === "datetime" || p && (f > 0 || e?.value);
+      return s && i ? n === "password" && p && (f > 0 || e?.value) ? "ds:pr-20" : "ds:pr-16" : s ? n === "password" && p && (f > 0 || e?.value) ? "ds:pr-16" : "ds:pr-10" : i ? k.suffix : "";
     }, D = (() => {
       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" }
+        xs: { left: "ds:left-2.5", right: "ds:right-2.5" },
+        sm: { left: "ds:left-3", right: "ds:right-3" },
+        normal: { left: "ds:left-3", right: "ds:right-3" },
+        lg: { left: "ds:left-3.5", right: "ds:right-3.5" },
+        xl: { left: "ds:left-4", right: "ds:right-4" }
       };
       return s[z] || s.normal;
     })(), K = () => {
-      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);
+      if (d.current) {
+        const s = Number(e.step || 1), m = e.max ? Number(e.max) : 1 / 0, S = Number(d.current.value || 0), E = Math.min(S + s, m);
+        d.current.value = String(E);
         const h = new Event("input", { bubbles: !0 });
-        n.current.dispatchEvent(h), e.onChange?.(h);
+        d.current.dispatchEvent(h), e.onChange?.(h);
       }
     }, O = () => {
-      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);
+      if (d.current) {
+        const s = Number(e.step || 1), m = e.min ? Number(e.min) : -1 / 0, S = Number(d.current.value || 0), E = Math.max(S - s, m);
+        d.current.value = String(E);
         const h = new Event("input", { bubbles: !0 });
-        n.current.dispatchEvent(h), e.onChange?.(h);
+        d.current.dispatchEvent(h), e.onChange?.(h);
       }
     };
     return /* @__PURE__ */ t("div", { className: _, children: /* @__PURE__ */ o(
@@ -143,7 +143,7 @@ const ne = r.forwardRef(
                   "ds:peer",
                   {
                     "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"
+                    "ds:[&::-webkit-outer-spin-button]:appearance-none ds:[&::-webkit-inner-spin-button]:appearance-none ds:[-moz-appearance:textfield] ds:pr-8": n === "number"
                     // "[-webkit-text-fill-color:var(--foreground)]": mask,
                   },
                   u && k.prefix,
@@ -153,7 +153,7 @@ const ne = r.forwardRef(
                 ),
                 state: N,
                 size: c ? l === "xl" || l === "lg" ? l : "xl" : l,
-                type: d === "password" ? R ? "text" : "password" : d,
+                type: n === "password" ? R ? "text" : "password" : n,
                 placeholder: B,
                 maxLength: b,
                 onChange: U,
@@ -171,7 +171,7 @@ const ne = r.forwardRef(
                 children: x
               }
             ),
-            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: [
+            n === "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",
                 {
@@ -201,21 +201,21 @@ const ne = r.forwardRef(
                 }
               )
             ] }),
-            p && (f > 0 || e?.value) && !e.disabled && d !== "number" && /* @__PURE__ */ t(
+            p && (f > 0 || e?.value) && !e.disabled && n !== "number" && /* @__PURE__ */ t(
               "button",
               {
                 type: "button",
                 tabIndex: -1,
                 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"
+                  n === "password" ? i ? "ds:right-14" : "ds:right-10" : i ? "ds:right-10" : "ds:right-2"
                 ),
                 onClick: X,
                 disabled: e.disabled,
                 children: /* @__PURE__ */ t(q, { className: "ds:size-4" })
               }
             ),
-            d === "password" && /* @__PURE__ */ t(
+            n === "password" && /* @__PURE__ */ t(
               "button",
               {
                 type: "button",
@@ -267,8 +267,8 @@ const ne = r.forwardRef(
     ) });
   }
 );
-ne.displayName = "Input";
+de.displayName = "Input";
 export {
-  ne as default
+  de 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: \"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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"}
+{"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: \"ds:pl-8\", suffix: \"ds:pr-8\" },\n        sm: { prefix: \"ds:pl-9\", suffix: \"ds:pr-9\" },\n        normal: { prefix: \"ds:pl-10\", suffix: \"ds:pr-10\" },\n        lg: { prefix: \"ds:pl-11\", suffix: \"ds:pr-11\" },\n        xl: { prefix: \"ds:pl-12\", suffix: \"ds: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: \"ds:size-3\",\n        sm: \"ds:size-3.5\",\n        normal: \"ds:size-4\",\n        lg: \"ds:size-4\",\n        xl: \"ds:size-4\",\n      };\n      return sizeMap[currentSize as keyof typeof sizeMap] || \"ds: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          ? \"ds:pr-20\" // password + clear + custom icon\n          : \"ds:pr-16\"; // one built-in + custom icon\n      }\n\n      if (hasBuiltInSuffix) {\n        return type === \"password\" &&\n          clearable &&\n          (charCount > 0 || props?.value)\n          ? \"ds:pr-16\" // password + clear\n          : \"ds: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: \"ds:left-2.5\", right: \"ds:right-2.5\" },\n        sm: { left: \"ds:left-3\", right: \"ds:right-3\" },\n        normal: { left: \"ds:left-3\", right: \"ds:right-3\" },\n        lg: { left: \"ds:left-3.5\", right: \"ds:right-3.5\" },\n        xl: { left: \"ds:left-4\", right: \"ds: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/Rate/Rate.js

@@ -9,9 +9,9 @@ const Z = Q.forwardRef(
     defaultValue: _ = 0,
     allowHalf: a = !1,
     allowClear: k = !0,
-    size: i = "middle",
+    size: d = "middle",
     color: b = "warning",
-    character: d,
+    character: i,
     className: A,
     style: E,
     disabled: l = !1,
@@ -29,14 +29,14 @@ const Z = Q.forwardRef(
       middle: 24,
       large: 32
     }, H = {
-      primary: "text-primary [&_svg]:fill-primary",
-      secondary: "text-secondary [&_svg]:fill-secondary",
-      accent: "text-accent [&_svg]:fill-accent",
-      destructive: "text-destructive [&_svg]:fill-destructive",
-      muted: "text-muted-foreground [&_svg]:fill-muted-foreground",
-      success: "text-success [&_svg]:fill-success",
-      error: "text-error [&_svg]:fill-error",
-      warning: "text-yellow-400 [&_svg]:fill-yellow-400"
+      primary: "ds:text-primary ds:[&_svg]:fill-primary",
+      secondary: "ds:text-secondary ds:[&_svg]:fill-secondary",
+      accent: "ds:text-accent ds:[&_svg]:fill-accent",
+      destructive: "ds:text-destructive ds:[&_svg]:fill-destructive",
+      muted: "ds:text-muted-foreground ds:[&_svg]:fill-muted-foreground",
+      success: "ds:text-success ds:[&_svg]:fill-success",
+      error: "ds:text-error ds:[&_svg]:fill-error",
+      warning: "ds:text-yellow-400 ds:[&_svg]:fill-yellow-400"
     }, p = (e, s) => {
       if (l) return;
       const r = s ? e + 0.5 : e + 1;
@@ -82,15 +82,15 @@ const Z = Q.forwardRef(
       if (!a) return !1;
       const r = (o !== null ? o : n) - e;
       return r > 0 && r <= 0.5;
-    }, g = (e = !1) => typeof d == "function" ? d({
+    }, g = (e = !1) => typeof i == "function" ? i({
       count: c,
       value: n,
       defaultValue: _,
       allowHalf: a,
       allowClear: k,
-      size: i,
+      size: d,
       disabled: l
-    }) : e ? /* @__PURE__ */ t(X, { className: "ds:w-full ds:h-full" }) : d || /* @__PURE__ */ t(Y, { className: "ds:w-full ds:h-full" }), J = (e) => {
+    }) : e ? /* @__PURE__ */ t(X, { className: "ds:w-full ds:h-full" }) : i || /* @__PURE__ */ t(Y, { className: "ds:w-full ds:h-full" }), J = (e) => {
       if (!(!f || !f[e]))
         return f[e];
     };
@@ -127,8 +127,8 @@ const Z = Q.forwardRef(
               {
                 className: "ds:relative ds:inline-flex",
                 style: {
-                  width: `${S[i]}px`,
-                  height: `${S[i]}px`
+                  width: `${S[d]}px`,
+                  height: `${S[d]}px`
                 },
                 children: [
                   /* @__PURE__ */ t("div", { className: "ds:text-muted-foreground/30 ds:pointer-events-none", children: g(!1) }),

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

@@ -1 +1 @@
-{"version":3,"file":"Rate.js","sources":["../../../../src/components/Rate/Rate.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { useState, useRef } from \"react\";\nimport type { KeyboardEvent } from \"react\";\nimport { Star, StarHalf } from \"lucide-react\";\nimport { cn } from \"@dsui/ui/lib/utils\";\n\nexport interface RateProps {\n  // Display\n  count?: number;\n  value?: number;\n  defaultValue?: number;\n  allowHalf?: boolean;\n  allowClear?: boolean;\n\n  // Appearance\n  size?: \"small\" | \"middle\" | \"large\";\n  color?:\n    | \"primary\"\n    | \"secondary\"\n    | \"accent\"\n    | \"destructive\"\n    | \"muted\"\n    | \"success\"\n    | \"error\"\n    | \"warning\";\n  character?: React.ReactNode | ((rateProps: RateProps) => React.ReactNode);\n  className?: string;\n  style?: React.CSSProperties;\n\n  // Interaction\n  disabled?: boolean;\n  autoFocus?: boolean;\n  keyboard?: boolean;\n\n  // Tooltips\n  tooltips?: string[];\n\n  // Callbacks\n  onChange?: (value: number) => void;\n  onHoverChange?: (value: number) => void;\n  onFocus?: () => void;\n  onBlur?: () => void;\n  onKeyDown?: (event: KeyboardEvent<HTMLDivElement>) => void;\n}\n\nconst Rate = React.forwardRef<HTMLDivElement, RateProps>(\n  (\n    {\n      count = 5,\n      value: controlledValue,\n      defaultValue = 0,\n      allowHalf = false,\n      allowClear = true,\n      size = \"middle\",\n      color = \"warning\",\n      character,\n      className,\n      style,\n      disabled = false,\n      autoFocus = false,\n      keyboard = true,\n      tooltips,\n      onChange,\n      onHoverChange,\n      onFocus,\n      onBlur,\n      onKeyDown,\n    },\n    ref\n  ) => {\n    const [internalValue, setInternalValue] = useState(defaultValue);\n    const [hoverValue, setHoverValue] = useState<number | null>(null);\n    const containerRef = useRef<HTMLDivElement>(null);\n\n    // Use controlled or uncontrolled value\n    const value =\n      controlledValue !== undefined ? controlledValue : internalValue;\n\n    // Size in pixels\n    const sizeMap = {\n      small: 20,\n      middle: 24,\n      large: 32,\n    };\n\n    // Color mapping for filled stars\n    const colorMap = {\n      primary: \"text-primary [&_svg]:fill-primary\",\n      secondary: \"text-secondary [&_svg]:fill-secondary\",\n      accent: \"text-accent [&_svg]:fill-accent\",\n      destructive: \"text-destructive [&_svg]:fill-destructive\",\n      muted: \"text-muted-foreground [&_svg]:fill-muted-foreground\",\n      success: \"text-success [&_svg]:fill-success\",\n      error: \"text-error [&_svg]:fill-error\",\n      warning: \"text-yellow-400 [&_svg]:fill-yellow-400\",\n    };\n\n    // Handle star click\n    const handleStarClick = (starIndex: number, isHalf: boolean) => {\n      if (disabled) return;\n\n      const newValue = isHalf ? starIndex + 0.5 : starIndex + 1;\n\n      // If clicking the same value and allowClear is true, clear the rating\n      if (allowClear && newValue === value) {\n        setInternalValue(0);\n        onChange?.(0);\n      } else {\n        setInternalValue(newValue);\n        onChange?.(newValue);\n      }\n    };\n\n    // Handle star hover\n    const handleStarHover = (starIndex: number, isHalf: boolean) => {\n      if (disabled) return;\n\n      const newHoverValue = isHalf ? starIndex + 0.5 : starIndex + 1;\n      setHoverValue(newHoverValue);\n      onHoverChange?.(newHoverValue);\n    };\n\n    // Handle mouse leave\n    const handleMouseLeave = () => {\n      setHoverValue(null);\n      onHoverChange?.(0);\n    };\n\n    // Handle keyboard navigation\n    const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n      if (!keyboard || disabled) return;\n\n      onKeyDown?.(event);\n\n      const step = allowHalf ? 0.5 : 1;\n      let newValue = value;\n\n      switch (event.key) {\n        case \"ArrowRight\":\n        case \"ArrowUp\":\n          event.preventDefault();\n          newValue = Math.min(value + step, count);\n          break;\n        case \"ArrowLeft\":\n        case \"ArrowDown\":\n          event.preventDefault();\n          newValue = Math.max(value - step, 0);\n          break;\n        case \"Home\":\n          event.preventDefault();\n          newValue = allowHalf ? 0.5 : 1;\n          break;\n        case \"End\":\n          event.preventDefault();\n          newValue = count;\n          break;\n        default:\n          return;\n      }\n\n      setInternalValue(newValue);\n      onChange?.(newValue);\n    };\n\n    // Handle focus\n    const handleFocus = () => {\n      onFocus?.();\n    };\n\n    // Handle blur\n    const handleBlur = () => {\n      onBlur?.();\n    };\n\n    // Get star fill percentage\n    const getStarFill = (starIndex: number) => {\n      const currentValue = hoverValue !== null ? hoverValue : value;\n\n      if (currentValue >= starIndex + 1) {\n        return 100; // Full star\n      } else if (currentValue > starIndex && currentValue < starIndex + 1) {\n        return (currentValue - starIndex) * 100; // Partial star\n      }\n      return 0; // Empty star\n    };\n\n    // Check if star should show as half\n    const isHalfStar = (starIndex: number) => {\n      if (!allowHalf) return false;\n      const currentValue = hoverValue !== null ? hoverValue : value;\n      const fill = currentValue - starIndex;\n      return fill > 0 && fill <= 0.5;\n    };\n\n    // Render character\n    const renderCharacter = (isHalf: boolean = false) => {\n      if (typeof character === \"function\") {\n        return character({\n          count,\n          value,\n          defaultValue,\n          allowHalf,\n          allowClear,\n          size,\n          disabled,\n        });\n      }\n      if (isHalf) {\n        return <StarHalf className=\"ds:w-full ds:h-full\" />;\n      }\n      return character || <Star className=\"ds:w-full ds:h-full\" />;\n    };\n\n    // Get tooltip for star\n    const getTooltip = (starIndex: number) => {\n      if (!tooltips || !tooltips[starIndex]) return undefined;\n      return tooltips[starIndex];\n    };\n\n    return (\n      <div\n        ref={(node) => {\n          containerRef.current = node;\n          if (typeof ref === \"function\") {\n            ref(node);\n          } else if (ref) {\n            ref.current = node;\n          }\n        }}\n        className={cn(\n          \"ds:inline-flex ds:items-center ds:gap-1\",\n          disabled && \"ds:opacity-50 ds:cursor-not-allowed\",\n          !disabled && \"ds:cursor-pointer\",\n          className\n        )}\n        style={style}\n        onMouseLeave={handleMouseLeave}\n        onKeyDown={handleKeyDown}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        tabIndex={disabled ? -1 : 0}\n        role=\"slider\"\n        aria-label=\"Rate\"\n        aria-valuemin={0}\n        aria-valuemax={count}\n        aria-valuenow={value}\n        aria-disabled={disabled}\n        autoFocus={autoFocus}\n      >\n        {Array.from({ length: count }, (_, index) => {\n          const fillPercentage = getStarFill(index);\n          const tooltip = getTooltip(index);\n          const showHalfStar = isHalfStar(index);\n\n          return (\n            <div key={index} className=\"ds:relative ds:group\" title={tooltip}>\n              {/* Container for half stars */}\n              <div\n                className=\"ds:relative ds:inline-flex\"\n                style={{\n                  width: `${sizeMap[size]}px`,\n                  height: `${sizeMap[size]}px`,\n                }}\n              >\n                {/* Empty star background */}\n                <div className=\"ds:text-muted-foreground/30 ds:pointer-events-none\">\n                  {renderCharacter(false)}\n                </div>\n\n                {/* Filled star overlay */}\n                {fillPercentage > 0 && (\n                  <div\n                    className={cn(\n                      \"ds:absolute ds:inset-0 ds:pointer-events-none\",\n                      colorMap[color]\n                    )}\n                  >\n                    {showHalfStar ? (\n                      renderCharacter(true)\n                    ) : (\n                      <div\n                        className=\"ds:overflow-hidden\"\n                        style={{ width: `${fillPercentage}%` }}\n                      >\n                        {renderCharacter(false)}\n                      </div>\n                    )}\n                  </div>\n                )}\n\n                {/* Interactive overlay for clicking and hovering */}\n                {!disabled && (\n                  <>\n                    {allowHalf ? (\n                      <>\n                        {/* Left half */}\n                        <div\n                          className=\"ds:absolute ds:inset-0 ds:w-1/2 ds:cursor-pointer\"\n                          onClick={() => handleStarClick(index, true)}\n                          onMouseEnter={() => handleStarHover(index, true)}\n                        />\n                        {/* Right half */}\n                        <div\n                          className=\"ds:absolute ds:inset-0 ds:left-1/2 ds:w-1/2 ds:cursor-pointer\"\n                          onClick={() => handleStarClick(index, false)}\n                          onMouseEnter={() => handleStarHover(index, false)}\n                        />\n                      </>\n                    ) : (\n                      <div\n                        className=\"ds:absolute ds:inset-0 ds:cursor-pointer\"\n                        onClick={() => handleStarClick(index, false)}\n                        onMouseEnter={() => handleStarHover(index, false)}\n                      />\n                    )}\n                  </>\n                )}\n              </div>\n\n              {/* Show tooltip text below star on hover */}\n              {tooltip &&\n                (hoverValue === index + 1 ||\n                  (allowHalf && hoverValue === index + 0.5)) && (\n                  <div className=\"ds:absolute ds:top-full ds:left-1/2 ds:-translate-x-1/2 ds:mt-1 ds:px-2 ds:py-1 ds:text-xs ds:bg-foreground ds:text-background ds:rounded ds:whitespace-nowrap ds:z-10\">\n                    {tooltip}\n                  </div>\n                )}\n            </div>\n          );\n        })}\n      </div>\n    );\n  }\n);\n\nRate.displayName = \"Rate\";\n\nexport default Rate;\n"],"names":["Rate","React","count","controlledValue","defaultValue","allowHalf","allowClear","size","color","character","className","style","disabled","autoFocus","keyboard","tooltips","onChange","onHoverChange","onFocus","onBlur","onKeyDown","ref","internalValue","setInternalValue","useState","hoverValue","setHoverValue","containerRef","useRef","value","sizeMap","colorMap","handleStarClick","starIndex","isHalf","newValue","handleStarHover","newHoverValue","handleMouseLeave","handleKeyDown","event","step","handleFocus","handleBlur","getStarFill","currentValue","isHalfStar","fill","renderCharacter","jsx","StarHalf","Star","getTooltip","node","cn","_","index","fillPercentage","tooltip","showHalfStar","jsxs","Fragment"],"mappings":"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"}
+{"version":3,"file":"Rate.js","sources":["../../../../src/components/Rate/Rate.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { useState, useRef } from \"react\";\nimport type { KeyboardEvent } from \"react\";\nimport { Star, StarHalf } from \"lucide-react\";\nimport { cn } from \"@dsui/ui/lib/utils\";\n\nexport interface RateProps {\n  // Display\n  count?: number;\n  value?: number;\n  defaultValue?: number;\n  allowHalf?: boolean;\n  allowClear?: boolean;\n\n  // Appearance\n  size?: \"small\" | \"middle\" | \"large\";\n  color?:\n    | \"primary\"\n    | \"secondary\"\n    | \"accent\"\n    | \"destructive\"\n    | \"muted\"\n    | \"success\"\n    | \"error\"\n    | \"warning\";\n  character?: React.ReactNode | ((rateProps: RateProps) => React.ReactNode);\n  className?: string;\n  style?: React.CSSProperties;\n\n  // Interaction\n  disabled?: boolean;\n  autoFocus?: boolean;\n  keyboard?: boolean;\n\n  // Tooltips\n  tooltips?: string[];\n\n  // Callbacks\n  onChange?: (value: number) => void;\n  onHoverChange?: (value: number) => void;\n  onFocus?: () => void;\n  onBlur?: () => void;\n  onKeyDown?: (event: KeyboardEvent<HTMLDivElement>) => void;\n}\n\nconst Rate = React.forwardRef<HTMLDivElement, RateProps>(\n  (\n    {\n      count = 5,\n      value: controlledValue,\n      defaultValue = 0,\n      allowHalf = false,\n      allowClear = true,\n      size = \"middle\",\n      color = \"warning\",\n      character,\n      className,\n      style,\n      disabled = false,\n      autoFocus = false,\n      keyboard = true,\n      tooltips,\n      onChange,\n      onHoverChange,\n      onFocus,\n      onBlur,\n      onKeyDown,\n    },\n    ref\n  ) => {\n    const [internalValue, setInternalValue] = useState(defaultValue);\n    const [hoverValue, setHoverValue] = useState<number | null>(null);\n    const containerRef = useRef<HTMLDivElement>(null);\n\n    // Use controlled or uncontrolled value\n    const value =\n      controlledValue !== undefined ? controlledValue : internalValue;\n\n    // Size in pixels\n    const sizeMap = {\n      small: 20,\n      middle: 24,\n      large: 32,\n    };\n\n    // Color mapping for filled stars\n    const colorMap = {\n      primary: \"ds:text-primary ds:[&_svg]:fill-primary\",\n      secondary: \"ds:text-secondary ds:[&_svg]:fill-secondary\",\n      accent: \"ds:text-accent ds:[&_svg]:fill-accent\",\n      destructive: \"ds:text-destructive ds:[&_svg]:fill-destructive\",\n      muted: \"ds:text-muted-foreground ds:[&_svg]:fill-muted-foreground\",\n      success: \"ds:text-success ds:[&_svg]:fill-success\",\n      error: \"ds:text-error ds:[&_svg]:fill-error\",\n      warning: \"ds:text-yellow-400 ds:[&_svg]:fill-yellow-400\",\n    };\n\n    // Handle star click\n    const handleStarClick = (starIndex: number, isHalf: boolean) => {\n      if (disabled) return;\n\n      const newValue = isHalf ? starIndex + 0.5 : starIndex + 1;\n\n      // If clicking the same value and allowClear is true, clear the rating\n      if (allowClear && newValue === value) {\n        setInternalValue(0);\n        onChange?.(0);\n      } else {\n        setInternalValue(newValue);\n        onChange?.(newValue);\n      }\n    };\n\n    // Handle star hover\n    const handleStarHover = (starIndex: number, isHalf: boolean) => {\n      if (disabled) return;\n\n      const newHoverValue = isHalf ? starIndex + 0.5 : starIndex + 1;\n      setHoverValue(newHoverValue);\n      onHoverChange?.(newHoverValue);\n    };\n\n    // Handle mouse leave\n    const handleMouseLeave = () => {\n      setHoverValue(null);\n      onHoverChange?.(0);\n    };\n\n    // Handle keyboard navigation\n    const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n      if (!keyboard || disabled) return;\n\n      onKeyDown?.(event);\n\n      const step = allowHalf ? 0.5 : 1;\n      let newValue = value;\n\n      switch (event.key) {\n        case \"ArrowRight\":\n        case \"ArrowUp\":\n          event.preventDefault();\n          newValue = Math.min(value + step, count);\n          break;\n        case \"ArrowLeft\":\n        case \"ArrowDown\":\n          event.preventDefault();\n          newValue = Math.max(value - step, 0);\n          break;\n        case \"Home\":\n          event.preventDefault();\n          newValue = allowHalf ? 0.5 : 1;\n          break;\n        case \"End\":\n          event.preventDefault();\n          newValue = count;\n          break;\n        default:\n          return;\n      }\n\n      setInternalValue(newValue);\n      onChange?.(newValue);\n    };\n\n    // Handle focus\n    const handleFocus = () => {\n      onFocus?.();\n    };\n\n    // Handle blur\n    const handleBlur = () => {\n      onBlur?.();\n    };\n\n    // Get star fill percentage\n    const getStarFill = (starIndex: number) => {\n      const currentValue = hoverValue !== null ? hoverValue : value;\n\n      if (currentValue >= starIndex + 1) {\n        return 100; // Full star\n      } else if (currentValue > starIndex && currentValue < starIndex + 1) {\n        return (currentValue - starIndex) * 100; // Partial star\n      }\n      return 0; // Empty star\n    };\n\n    // Check if star should show as half\n    const isHalfStar = (starIndex: number) => {\n      if (!allowHalf) return false;\n      const currentValue = hoverValue !== null ? hoverValue : value;\n      const fill = currentValue - starIndex;\n      return fill > 0 && fill <= 0.5;\n    };\n\n    // Render character\n    const renderCharacter = (isHalf: boolean = false) => {\n      if (typeof character === \"function\") {\n        return character({\n          count,\n          value,\n          defaultValue,\n          allowHalf,\n          allowClear,\n          size,\n          disabled,\n        });\n      }\n      if (isHalf) {\n        return <StarHalf className=\"ds:w-full ds:h-full\" />;\n      }\n      return character || <Star className=\"ds:w-full ds:h-full\" />;\n    };\n\n    // Get tooltip for star\n    const getTooltip = (starIndex: number) => {\n      if (!tooltips || !tooltips[starIndex]) return undefined;\n      return tooltips[starIndex];\n    };\n\n    return (\n      <div\n        ref={(node) => {\n          containerRef.current = node;\n          if (typeof ref === \"function\") {\n            ref(node);\n          } else if (ref) {\n            ref.current = node;\n          }\n        }}\n        className={cn(\n          \"ds:inline-flex ds:items-center ds:gap-1\",\n          disabled && \"ds:opacity-50 ds:cursor-not-allowed\",\n          !disabled && \"ds:cursor-pointer\",\n          className\n        )}\n        style={style}\n        onMouseLeave={handleMouseLeave}\n        onKeyDown={handleKeyDown}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        tabIndex={disabled ? -1 : 0}\n        role=\"slider\"\n        aria-label=\"Rate\"\n        aria-valuemin={0}\n        aria-valuemax={count}\n        aria-valuenow={value}\n        aria-disabled={disabled}\n        autoFocus={autoFocus}\n      >\n        {Array.from({ length: count }, (_, index) => {\n          const fillPercentage = getStarFill(index);\n          const tooltip = getTooltip(index);\n          const showHalfStar = isHalfStar(index);\n\n          return (\n            <div key={index} className=\"ds:relative ds:group\" title={tooltip}>\n              {/* Container for half stars */}\n              <div\n                className=\"ds:relative ds:inline-flex\"\n                style={{\n                  width: `${sizeMap[size]}px`,\n                  height: `${sizeMap[size]}px`,\n                }}\n              >\n                {/* Empty star background */}\n                <div className=\"ds:text-muted-foreground/30 ds:pointer-events-none\">\n                  {renderCharacter(false)}\n                </div>\n\n                {/* Filled star overlay */}\n                {fillPercentage > 0 && (\n                  <div\n                    className={cn(\n                      \"ds:absolute ds:inset-0 ds:pointer-events-none\",\n                      colorMap[color]\n                    )}\n                  >\n                    {showHalfStar ? (\n                      renderCharacter(true)\n                    ) : (\n                      <div\n                        className=\"ds:overflow-hidden\"\n                        style={{ width: `${fillPercentage}%` }}\n                      >\n                        {renderCharacter(false)}\n                      </div>\n                    )}\n                  </div>\n                )}\n\n                {/* Interactive overlay for clicking and hovering */}\n                {!disabled && (\n                  <>\n                    {allowHalf ? (\n                      <>\n                        {/* Left half */}\n                        <div\n                          className=\"ds:absolute ds:inset-0 ds:w-1/2 ds:cursor-pointer\"\n                          onClick={() => handleStarClick(index, true)}\n                          onMouseEnter={() => handleStarHover(index, true)}\n                        />\n                        {/* Right half */}\n                        <div\n                          className=\"ds:absolute ds:inset-0 ds:left-1/2 ds:w-1/2 ds:cursor-pointer\"\n                          onClick={() => handleStarClick(index, false)}\n                          onMouseEnter={() => handleStarHover(index, false)}\n                        />\n                      </>\n                    ) : (\n                      <div\n                        className=\"ds:absolute ds:inset-0 ds:cursor-pointer\"\n                        onClick={() => handleStarClick(index, false)}\n                        onMouseEnter={() => handleStarHover(index, false)}\n                      />\n                    )}\n                  </>\n                )}\n              </div>\n\n              {/* Show tooltip text below star on hover */}\n              {tooltip &&\n                (hoverValue === index + 1 ||\n                  (allowHalf && hoverValue === index + 0.5)) && (\n                  <div className=\"ds:absolute ds:top-full ds:left-1/2 ds:-translate-x-1/2 ds:mt-1 ds:px-2 ds:py-1 ds:text-xs ds:bg-foreground ds:text-background ds:rounded ds:whitespace-nowrap ds:z-10\">\n                    {tooltip}\n                  </div>\n                )}\n            </div>\n          );\n        })}\n      </div>\n    );\n  }\n);\n\nRate.displayName = \"Rate\";\n\nexport default Rate;\n"],"names":["Rate","React","count","controlledValue","defaultValue","allowHalf","allowClear","size","color","character","className","style","disabled","autoFocus","keyboard","tooltips","onChange","onHoverChange","onFocus","onBlur","onKeyDown","ref","internalValue","setInternalValue","useState","hoverValue","setHoverValue","containerRef","useRef","value","sizeMap","colorMap","handleStarClick","starIndex","isHalf","newValue","handleStarHover","newHoverValue","handleMouseLeave","handleKeyDown","event","step","handleFocus","handleBlur","getStarFill","currentValue","isHalfStar","fill","renderCharacter","jsx","StarHalf","Star","getTooltip","node","cn","_","index","fillPercentage","tooltip","showHalfStar","jsxs","Fragment"],"mappings":";;;;AA8CA,MAAMA,IAAOC,EAAM;AAAA,EACjB,CACE;AAAA,IACE,OAAAC,IAAQ;AAAA,IACR,OAAOC;AAAA,IACP,cAAAC,IAAe;AAAA,IACf,WAAAC,IAAY;AAAA,IACZ,YAAAC,IAAa;AAAA,IACb,MAAAC,IAAO;AAAA,IACP,OAAAC,IAAQ;AAAA,IACR,WAAAC;AAAA,IACA,WAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,WAAAC,IAAY;AAAA,IACZ,UAAAC,IAAW;AAAA,IACX,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,eAAAC;AAAA,IACA,SAAAC;AAAA,IACA,QAAAC;AAAA,IACA,WAAAC;AAAA,EAAA,GAEFC,MACG;AACH,UAAM,CAACC,GAAeC,CAAgB,IAAIC,EAASpB,CAAY,GACzD,CAACqB,GAAYC,CAAa,IAAIF,EAAwB,IAAI,GAC1DG,IAAeC,EAAuB,IAAI,GAG1CC,IACJ1B,MAAoB,SAAYA,IAAkBmB,GAG9CQ,IAAU;AAAA,MACd,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,OAAO;AAAA,IAAA,GAIHC,IAAW;AAAA,MACf,SAAS;AAAA,MACT,WAAW;AAAA,MACX,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,OAAO;AAAA,MACP,SAAS;AAAA,MACT,OAAO;AAAA,MACP,SAAS;AAAA,IAAA,GAILC,IAAkB,CAACC,GAAmBC,MAAoB;AAC9D,UAAItB,EAAU;AAEd,YAAMuB,IAAWD,IAASD,IAAY,MAAMA,IAAY;AAGxD,MAAI3B,KAAc6B,MAAaN,KAC7BN,EAAiB,CAAC,GAClBP,IAAW,CAAC,MAEZO,EAAiBY,CAAQ,GACzBnB,IAAWmB,CAAQ;AAAA,IAEvB,GAGMC,IAAkB,CAACH,GAAmBC,MAAoB;AAC9D,UAAItB,EAAU;AAEd,YAAMyB,IAAgBH,IAASD,IAAY,MAAMA,IAAY;AAC7D,MAAAP,EAAcW,CAAa,GAC3BpB,IAAgBoB,CAAa;AAAA,IAC/B,GAGMC,IAAmB,MAAM;AAC7B,MAAAZ,EAAc,IAAI,GAClBT,IAAgB,CAAC;AAAA,IACnB,GAGMsB,IAAgB,CAACC,MAAyC;AAC9D,UAAI,CAAC1B,KAAYF,EAAU;AAE3B,MAAAQ,IAAYoB,CAAK;AAEjB,YAAMC,IAAOpC,IAAY,MAAM;AAC/B,UAAI8B,IAAWN;AAEf,cAAQW,EAAM,KAAA;AAAA,QACZ,KAAK;AAAA,QACL,KAAK;AACH,UAAAA,EAAM,eAAA,GACNL,IAAW,KAAK,IAAIN,IAAQY,GAAMvC,CAAK;AACvC;AAAA,QACF,KAAK;AAAA,QACL,KAAK;AACH,UAAAsC,EAAM,eAAA,GACNL,IAAW,KAAK,IAAIN,IAAQY,GAAM,CAAC;AACnC;AAAA,QACF,KAAK;AACH,UAAAD,EAAM,eAAA,GACNL,IAAW9B,IAAY,MAAM;AAC7B;AAAA,QACF,KAAK;AACH,UAAAmC,EAAM,eAAA,GACNL,IAAWjC;AACX;AAAA,QACF;AACE;AAAA,MAAA;AAGJ,MAAAqB,EAAiBY,CAAQ,GACzBnB,IAAWmB,CAAQ;AAAA,IACrB,GAGMO,IAAc,MAAM;AACxB,MAAAxB,IAAA;AAAA,IACF,GAGMyB,IAAa,MAAM;AACvB,MAAAxB,IAAA;AAAA,IACF,GAGMyB,IAAc,CAACX,MAAsB;AACzC,YAAMY,IAAepB,MAAe,OAAOA,IAAaI;AAExD,aAAIgB,KAAgBZ,IAAY,IACvB,MACEY,IAAeZ,KAAaY,IAAeZ,IAAY,KACxDY,IAAeZ,KAAa,MAE/B;AAAA,IACT,GAGMa,IAAa,CAACb,MAAsB;AACxC,UAAI,CAAC5B,EAAW,QAAO;AAEvB,YAAM0C,KADetB,MAAe,OAAOA,IAAaI,KAC5BI;AAC5B,aAAOc,IAAO,KAAKA,KAAQ;AAAA,IAC7B,GAGMC,IAAkB,CAACd,IAAkB,OACrC,OAAOzB,KAAc,aAChBA,EAAU;AAAA,MACf,OAAAP;AAAA,MACA,OAAA2B;AAAA,MACA,cAAAzB;AAAA,MACA,WAAAC;AAAA,MACA,YAAAC;AAAA,MACA,MAAAC;AAAA,MACA,UAAAK;AAAA,IAAA,CACD,IAECsB,IACK,gBAAAe,EAACC,GAAA,EAAS,WAAU,sBAAA,CAAsB,IAE5CzC,KAAa,gBAAAwC,EAACE,GAAA,EAAK,WAAU,sBAAA,CAAsB,GAItDC,IAAa,CAACnB,MAAsB;AACxC,UAAI,GAAClB,KAAY,CAACA,EAASkB,CAAS;AACpC,eAAOlB,EAASkB,CAAS;AAAA,IAC3B;AAEA,WACE,gBAAAgB;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK,CAACI,MAAS;AACb,UAAA1B,EAAa,UAAU0B,GACnB,OAAOhC,KAAQ,aACjBA,EAAIgC,CAAI,IACChC,MACTA,EAAI,UAAUgC;AAAA,QAElB;AAAA,QACA,WAAWC;AAAA,UACT;AAAA,UACA1C,KAAY;AAAA,UACZ,CAACA,KAAY;AAAA,UACbF;AAAA,QAAA;AAAA,QAEF,OAAAC;AAAA,QACA,cAAc2B;AAAA,QACd,WAAWC;AAAA,QACX,SAASG;AAAA,QACT,QAAQC;AAAA,QACR,UAAU/B,IAAW,KAAK;AAAA,QAC1B,MAAK;AAAA,QACL,cAAW;AAAA,QACX,iBAAe;AAAA,QACf,iBAAeV;AAAA,QACf,iBAAe2B;AAAA,QACf,iBAAejB;AAAA,QACf,WAAAC;AAAA,QAEC,UAAA,MAAM,KAAK,EAAE,QAAQX,KAAS,CAACqD,GAAGC,MAAU;AAC3C,gBAAMC,IAAiBb,EAAYY,CAAK,GAClCE,IAAUN,EAAWI,CAAK,GAC1BG,IAAeb,EAAWU,CAAK;AAErC,iBACE,gBAAAI,EAAC,OAAA,EAAgB,WAAU,wBAAuB,OAAOF,GAEvD,UAAA;AAAA,YAAA,gBAAAE;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAU;AAAA,gBACV,OAAO;AAAA,kBACL,OAAO,GAAG9B,EAAQvB,CAAI,CAAC;AAAA,kBACvB,QAAQ,GAAGuB,EAAQvB,CAAI,CAAC;AAAA,gBAAA;AAAA,gBAI1B,UAAA;AAAA,kBAAA,gBAAA0C,EAAC,OAAA,EAAI,WAAU,sDACZ,UAAAD,EAAgB,EAAK,GACxB;AAAA,kBAGCS,IAAiB,KAChB,gBAAAR;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBACC,WAAWK;AAAA,wBACT;AAAA,wBACAvB,EAASvB,CAAK;AAAA,sBAAA;AAAA,sBAGf,UAAAmD,IACCX,EAAgB,EAAI,IAEpB,gBAAAC;AAAA,wBAAC;AAAA,wBAAA;AAAA,0BACC,WAAU;AAAA,0BACV,OAAO,EAAE,OAAO,GAAGQ,CAAc,IAAA;AAAA,0BAEhC,YAAgB,EAAK;AAAA,wBAAA;AAAA,sBAAA;AAAA,oBACxB;AAAA,kBAAA;AAAA,kBAML,CAAC7C,KACA,gBAAAqC,EAAAY,GAAA,EACG,UAAAxD,IACC,gBAAAuD,EAAAC,GAAA,EAEE,UAAA;AAAA,oBAAA,gBAAAZ;AAAA,sBAAC;AAAA,sBAAA;AAAA,wBACC,WAAU;AAAA,wBACV,SAAS,MAAMjB,EAAgBwB,GAAO,EAAI;AAAA,wBAC1C,cAAc,MAAMpB,EAAgBoB,GAAO,EAAI;AAAA,sBAAA;AAAA,oBAAA;AAAA,oBAGjD,gBAAAP;AAAA,sBAAC;AAAA,sBAAA;AAAA,wBACC,WAAU;AAAA,wBACV,SAAS,MAAMjB,EAAgBwB,GAAO,EAAK;AAAA,wBAC3C,cAAc,MAAMpB,EAAgBoB,GAAO,EAAK;AAAA,sBAAA;AAAA,oBAAA;AAAA,kBAClD,EAAA,CACF,IAEA,gBAAAP;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBACC,WAAU;AAAA,sBACV,SAAS,MAAMjB,EAAgBwB,GAAO,EAAK;AAAA,sBAC3C,cAAc,MAAMpB,EAAgBoB,GAAO,EAAK;AAAA,oBAAA;AAAA,kBAAA,EAClD,CAEJ;AAAA,gBAAA;AAAA,cAAA;AAAA,YAAA;AAAA,YAKHE,MACEjC,MAAe+B,IAAQ,KACrBnD,KAAaoB,MAAe+B,IAAQ,QACrC,gBAAAP,EAAC,OAAA,EAAI,WAAU,0KACZ,UAAAS,EAAA,CACH;AAAA,UAAA,EAAA,GAtEIF,CAwEV;AAAA,QAEJ,CAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEAxD,EAAK,cAAc;"}