@sth87/shadcn-design-system 0.0.1

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Input.js","sources":["../../../../src/components/Input/Input.tsx"],"sourcesContent":["import React 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\";\n\nexport type InputProps = SInputProps & {\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      }\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      }\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 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","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","Tooltip","Info","SInput","FloatingLabel","ChevronUp","ChevronDown","X","prev","EyeOff","Eye"],"mappings":"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"}

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

@@ -0,0 +1,70 @@
+import { jsxs as N, jsx as t } from "react/jsx-runtime";
+import O, { useId as P } from "react";
+import { InputOTP as R, REGEXP_ONLY_DIGITS as E, REGEXP_ONLY_CHARS as G, REGEXP_ONLY_DIGITS_AND_CHARS as L, InputOTPGroup as T, InputOTPSlot as v } from "@dsui/ui/components/input-otp";
+import { Label as A } from "@dsui/ui/components/label";
+import { cn as s } from "@dsui/ui/index";
+const j = O.forwardRef(
+  ({
+    label: i,
+    inputType: r = "digits",
+    regexPattern: m,
+    length: a,
+    size: u = "normal",
+    state: o = "default",
+    helperText: d,
+    gapSize: e = 4,
+    variant: l = "outlined",
+    className: p,
+    rootClassName: f,
+    childClassName: x,
+    ..._
+  }, I) => {
+    const n = P(), h = r === "digits" ? E : r === "chars" ? G : r === "digits-and-chars" ? L : void 0, g = {
+      default: "text-muted-foreground",
+      success: "text-success",
+      warning: "text-warning",
+      error: "text-error"
+    };
+    return /* @__PURE__ */ N("div", { className: s("flex flex-col gap-1.5 relative", f), children: [
+      /* @__PURE__ */ t(A, { htmlFor: n, children: i }),
+      /* @__PURE__ */ t(
+        R,
+        {
+          id: n,
+          maxLength: a ?? 4,
+          pattern: m ?? h,
+          ref: I,
+          ..._,
+          children: /* @__PURE__ */ t(
+            T,
+            {
+              className: s(
+                {
+                  "gap-2 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border": l === "outlined" && e > 0
+                },
+                p
+              ),
+              style: e > 0 ? { gap: `${e}px` } : void 0,
+              children: Array.from({ length: a ?? 4 }).map((S, c) => /* @__PURE__ */ t(
+                v,
+                {
+                  index: c,
+                  size: u,
+                  state: o ?? void 0,
+                  variant: l,
+                  className: x
+                },
+                c
+              ))
+            }
+          )
+        }
+      ),
+      d && /* @__PURE__ */ t("p", { className: s("text-xs", o ? g?.[o] : ""), children: d })
+    ] });
+  }
+);
+export {
+  j as default
+};
+//# sourceMappingURL=InputOTP.js.map

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

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

package/dist/esm/components/Interactive/CursorFollow.js

@@ -0,0 +1,257 @@
+import { jsx as d, jsxs as L, Fragment as z } from "react/jsx-runtime";
+import * as t from "react";
+import { useMotionValue as k, AnimatePresence as M, motion as H, useSpring as F } from "motion/react";
+import { cn as A } from "@dsui/ui/index";
+const B = {
+  slow: { stiffness: 100, damping: 20, bounce: 0 },
+  normal: { stiffness: 500, damping: 50, bounce: 0 },
+  fast: { stiffness: 1e3, damping: 80, bounce: 0 },
+  realtime: { stiffness: 2e3, damping: 100, bounce: 0 }
+}, N = t.createContext(
+  void 0
+), X = () => {
+  const v = t.useContext(N);
+  if (!v)
+    throw new Error("useCursor must be used within a CursorProvider");
+  return v;
+}, I = {
+  default: null,
+  // Use system cursor
+  pointer: /* @__PURE__ */ d("div", { className: "h-5 w-5 rounded-full bg-white/30 border-2 border-white" })
+};
+function q({
+  ref: v,
+  children: e,
+  cursorType: o = "default",
+  followText: h,
+  showFollow: b,
+  followAlign: x = "bottom-right",
+  followSideOffset: s = 15,
+  followTransition: y = "normal",
+  ...E
+}) {
+  const [g, f] = t.useState({ x: 0, y: 0 }), [c, C] = t.useState(!1), r = t.useRef(null), p = t.useRef(null);
+  t.useImperativeHandle(v, () => r.current), t.useEffect(() => {
+    if (!r.current) return;
+    const i = r.current.parentElement;
+    if (!i) return;
+    getComputedStyle(i).position === "static" && (i.style.position = "relative");
+    const w = (m) => {
+      const l = i.getBoundingClientRect();
+      f({ x: m.clientX - l.left, y: m.clientY - l.top }), C(!0);
+    }, S = () => C(!1);
+    return i.addEventListener("mousemove", w), i.addEventListener("mouseleave", S), () => {
+      i.removeEventListener("mousemove", w), i.removeEventListener("mouseleave", S);
+    };
+  }, []);
+  const u = o !== void 0, P = b ?? h !== void 0, n = B[y];
+  return /* @__PURE__ */ d(
+    N.Provider,
+    {
+      value: { cursorPos: g, isActive: c, containerRef: r, cursorRef: p },
+      children: /* @__PURE__ */ L("div", { ref: r, "data-slot": "cursor-provider", ...E, children: [
+        e,
+        u && /* @__PURE__ */ d(Y, { cursorType: o }),
+        P && /* @__PURE__ */ d(
+          j,
+          {
+            followText: h,
+            align: x,
+            sideOffset: s,
+            transition: n
+          }
+        )
+      ] })
+    }
+  );
+}
+function Y({
+  ref: v,
+  children: e,
+  cursorType: o = "default",
+  className: h,
+  style: b,
+  ...x
+}) {
+  const { cursorPos: s, isActive: y, containerRef: E, cursorRef: g } = X();
+  t.useImperativeHandle(v, () => g.current);
+  const f = k(0), c = k(0), r = e || (typeof o == "string" && o in I ? I[o] : o), p = r !== null;
+  return t.useEffect(() => {
+    const u = E.current?.parentElement;
+    return u && y && p && (u.style.cursor = "none"), () => {
+      u && (u.style.cursor = "default");
+    };
+  }, [E, y, p]), t.useEffect(() => {
+    f.set(s.x), c.set(s.y);
+  }, [s, f, c]), r ? /* @__PURE__ */ d(M, { children: y && /* @__PURE__ */ d(
+    H.div,
+    {
+      ref: g,
+      "data-slot": "cursor",
+      className: A(
+        "transform-[translate(-50%,-50%)] pointer-events-none z-[9999] absolute",
+        h
+      ),
+      style: { top: c, left: f, ...b },
+      initial: { scale: 0, opacity: 0 },
+      animate: { scale: 1, opacity: 1 },
+      exit: { scale: 0, opacity: 0 },
+      ...x,
+      children: r
+    }
+  ) }) : null;
+}
+function j({
+  ref: v,
+  sideOffset: e = 15,
+  align: o = "bottom-right",
+  children: h,
+  className: b,
+  style: x,
+  followText: s,
+  transition: y,
+  transitionPreset: E = "normal",
+  ...g
+}) {
+  const { cursorPos: f, isActive: c, cursorRef: C } = X(), r = t.useRef(null);
+  t.useImperativeHandle(
+    v,
+    () => r.current
+  );
+  const p = k(0), u = k(0), P = y || B[E], n = F(p, P), i = F(u, P), w = t.useCallback(() => {
+    const m = r.current?.getBoundingClientRect(), l = m?.width ?? 0, R = m?.height ?? 0;
+    let a;
+    switch (o) {
+      case "center":
+        a = { x: l / 2, y: R / 2 };
+        break;
+      case "top":
+        a = { x: l / 2, y: R + e };
+        break;
+      case "top-left":
+        a = { x: l + e, y: R + e };
+        break;
+      case "top-right":
+        a = { x: -e, y: R + e };
+        break;
+      case "bottom":
+        a = { x: l / 2, y: -e };
+        break;
+      case "bottom-left":
+        a = { x: l + e, y: -e };
+        break;
+      case "bottom-right":
+        a = { x: -e, y: -e };
+        break;
+      case "left":
+        a = { x: l + e, y: R / 2 };
+        break;
+      case "right":
+        a = { x: -e, y: R / 2 };
+        break;
+      default:
+        a = { x: 0, y: 0 };
+    }
+    return a;
+  }, [o, e]);
+  t.useEffect(() => {
+    const m = w(), l = C.current?.getBoundingClientRect(), R = l?.width ?? 20, a = l?.height ?? 20;
+    p.set(f.x - m.x + R / 2), u.set(f.y - m.y + a / 2);
+  }, [w, f, C, p, u]);
+  const S = () => h || (s ? typeof s == "string" ? /* @__PURE__ */ d("div", { className: "px-4 py-2 bg-white rounded-md shadow-lg text-sm font-medium", children: s }) : s : null);
+  return /* @__PURE__ */ d(M, { children: c && /* @__PURE__ */ d(
+    H.div,
+    {
+      ref: r,
+      "data-slot": "cursor-follow",
+      className: A(
+        "transform-[translate(-50%,-50%)] pointer-events-none z-[9998] absolute",
+        b
+      ),
+      style: { top: i, left: n, ...x },
+      initial: { scale: 0, opacity: 0 },
+      animate: { scale: 1, opacity: 1 },
+      exit: { scale: 0, opacity: 0 },
+      ...g,
+      children: S()
+    }
+  ) });
+}
+function D(v = {}) {
+  const {
+    cursorType: e = "default",
+    followText: o,
+    showFollow: h,
+    align: b = "bottom-right",
+    sideOffset: x = 15,
+    transitionPreset: s = "normal",
+    className: y,
+    style: E
+  } = v, [g, f] = t.useState({ x: 0, y: 0 }), [c, C] = t.useState(!1), r = t.useRef(null), p = t.useRef(null);
+  t.useEffect(() => {
+    if (!r.current) return;
+    const n = r.current;
+    getComputedStyle(n).position === "static" && (n.style.position = "relative");
+    const i = (S) => {
+      const m = n.getBoundingClientRect();
+      f({ x: S.clientX - m.left, y: S.clientY - m.top }), C(!0);
+    }, w = () => C(!1);
+    return n.addEventListener("mousemove", i), n.addEventListener("mouseleave", w), () => {
+      n.removeEventListener("mousemove", i), n.removeEventListener("mouseleave", w);
+    };
+  }, []);
+  const u = e !== "default";
+  t.useEffect(() => {
+    if (!r.current || !c || !u) return;
+    const n = r.current;
+    return n.style.cursor = "none", () => {
+      n.style.cursor = "default";
+    };
+  }, [c, u]);
+  const P = t.useCallback(() => c ? /* @__PURE__ */ L(
+    N.Provider,
+    {
+      value: { cursorPos: g, isActive: c, containerRef: r, cursorRef: p },
+      children: [
+        /* @__PURE__ */ d(Y, { cursorType: e }),
+        (h ?? o !== void 0) && /* @__PURE__ */ d(
+          j,
+          {
+            followText: o,
+            align: b,
+            sideOffset: x,
+            transitionPreset: s
+          }
+        )
+      ]
+    }
+  ) : null, [
+    c,
+    g,
+    e,
+    o,
+    h,
+    b,
+    x,
+    s
+  ]);
+  return {
+    ref: r,
+    className: A("relative", y),
+    style: { ...E },
+    "data-cursor-container": !0,
+    children: (n) => /* @__PURE__ */ L(z, { children: [
+      n,
+      P()
+    ] })
+  };
+}
+export {
+  Y as Cursor,
+  j as CursorFollow,
+  q as CursorProvider,
+  B as TRANSITION_PRESETS,
+  X as useCursor,
+  D as useCursorFollow
+};
+//# sourceMappingURL=CursorFollow.js.map