@fabio.caffarello/react-design-system 4.0.0 → 4.2.0

package/dist/granular/ui/primitives/Input/Input.js

@@ -1,82 +1,50 @@
 "use client";
-var ie = Object.defineProperty;
-var P = Object.getOwnPropertySymbols;
-var K = Object.prototype.hasOwnProperty, Q = Object.prototype.propertyIsEnumerable;
-var J = (r, t, e) => t in r ? ie(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e, U = (r, t) => {
-  for (var e in t || (t = {}))
-    K.call(t, e) && J(r, e, t[e]);
-  if (P)
-    for (var e of P(t))
-      Q.call(t, e) && J(r, e, t[e]);
-  return r;
-};
-var Y = (r, t) => {
-  var e = {};
-  for (var s in r)
-    K.call(r, s) && t.indexOf(s) < 0 && (e[s] = r[s]);
-  if (r != null && P)
-    for (var s of P(r))
-      t.indexOf(s) < 0 && Q.call(r, s) && (e[s] = r[s]);
+var K = Object.defineProperty;
+var c = Object.getOwnPropertySymbols;
+var S = Object.prototype.hasOwnProperty, N = Object.prototype.propertyIsEnumerable;
+var b = (e, s, t) => s in e ? K(e, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[s] = t, E = (e, s) => {
+  for (var t in s || (s = {}))
+    S.call(s, t) && b(e, t, s[t]);
+  if (c)
+    for (var t of c(s))
+      N.call(s, t) && b(e, t, s[t]);
   return e;
 };
-import { jsxs as F, jsx as n } from "react/jsx-runtime";
-import { memo as _, forwardRef as de, useId as ue, useMemo as o, useState as fe, useCallback as T } from "react";
-import { getTypographySize as j, getTypographyClasses as z } from "../../tokens/typography.js";
-import { getRadiusClass as pe } from "../../tokens/radius.js";
-import { getSpacingClass as l } from "../../tokens/spacing.js";
-import { X as me, EyeOff as be, Eye as ge } from "lucide-react";
-import { Button as Z } from "../Button/Button.js";
-import { cva as ve } from "../../utils/cva.js";
-import { cn as c } from "../../utils/cn.js";
-const he = _(function({
-  error: t,
-  success: e,
-  helperText: s,
-  errorId: i,
-  helperId: d
-}) {
-  const a = o(
-    () => c(
-      l("xs", "mt"),
-      z("caption"),
-      t && "text-fg-error",
-      e && "text-fg-success",
-      !t && !e && "text-fg-secondary"
-    ),
-    [t, e]
-  ), v = o(
-    () => s || (t ? "Error" : e ? "Success" : ""),
-    [s, t, e]
-  );
-  return /* @__PURE__ */ n(
-    "div",
-    {
-      id: i || d,
-      className: a,
-      role: t || e ? "alert" : void 0,
-      children: v
-    }
-  );
-}), ye = _(
-  de(function(xe, ee) {
-    var O = xe, {
-      id: t,
-      label: e,
-      error: s = !1,
-      success: i = !1,
-      helperText: d,
-      size: a = "md",
-      variant: v = "outlined",
-      leftIcon: h,
-      rightIcon: y,
-      showClearButton: k = !1,
-      onClear: C,
-      className: H = "",
-      disabled: m = !1,
+var T = (e, s) => {
+  var t = {};
+  for (var a in e)
+    S.call(e, a) && s.indexOf(a) < 0 && (t[a] = e[a]);
+  if (e != null && c)
+    for (var a of c(e))
+      s.indexOf(a) < 0 && N.call(e, a) && (t[a] = e[a]);
+  return t;
+};
+import { jsxs as L, Fragment as M, jsx as o } from "react/jsx-runtime";
+import { memo as Q, forwardRef as U, useId as W, useState as Y } from "react";
+import { getSpacingClass as I } from "../../tokens/spacing.js";
+import { X as Z, EyeOff as _, Eye as ee } from "lucide-react";
+import { Button as j } from "../Button/Button.js";
+import te from "./InputBase.js";
+const se = Q(
+  U(function(ae, D) {
+    var y = ae, {
+      id: s,
+      label: t,
+      error: a = !1,
+      success: $ = !1,
+      helperText: B,
+      size: p = "md",
+      variant: C = "outlined",
+      leftIcon: O,
+      rightIcon: u,
+      showClearButton: R = !1,
+      onClear: g,
+      className: k = "",
+      disabled: v = !1,
       type: x = "text",
-      value: b,
-      onChange: w
-    } = O, q = Y(O, [
+      value: r,
+      onChange: d
+    } = y, A = T(y, [
       "id",
       "label",
       "error",
@@ -94,258 +62,94 @@ const he = _(function({
       "value",
       "onChange"
     ]);
-    const te = ue(), u = t || `input-${te}`, V = o(
-      () => s ? `${u}-error` : void 0,
-      [s, u]
-    ), D = o(
-      () => d ? `${u}-helper` : void 0,
-      [d, u]
-    ), [N, se] = fe(!1), f = o(() => x === "password", [x]), oe = o(
-      () => f && N ? "text" : x,
-      [f, N, x]
-    ), I = o(
-      () => s ? "error" : i ? "success" : "default",
-      [s, i]
-    ), L = o(
-      () => b != null && b !== "",
-      [b]
-    ), S = o(
-      () => k && L && !m,
-      [k, L, m]
-    ), M = o(() => "focus:border-line-focus", []), W = o(() => "focus:border-error", []), X = o(() => "focus:border-success", []), A = o(
-      () => M.replace("focus:border-", "focus:ring-"),
-      [M]
-    ), $ = T(
-      (p) => p === "error" ? W.replace("focus:border-", "focus:ring-") : X.replace("focus:border-", "focus:ring-"),
-      [W, X]
-    ), B = o(
-      () => ve(
-        // Base classes
-        c(
-          "w-full",
-          pe("md"),
-          "transition-colors",
-          "focus:outline-none",
-          "focus:ring-2",
-          "focus:ring-offset-2",
-          "disabled:opacity-50",
-          "disabled:cursor-not-allowed"
-        ),
-        {
-          variants: {
-            variant: {
-              default: c(
-                "border-0",
-                "border-b-2",
-                "border-line-default",
-                "focus:border-line-focus"
-              ),
-              outlined: c(
-                "border",
-                "border-line-default",
-                "focus:border-line-focus"
-              ),
-              filled: c(
-                "bg-surface-muted",
-                "border-0",
-                "focus:bg-surface-base",
-                "focus:ring-2",
-                A
-              )
+    const q = W(), z = s || `input-${q}`, [f, F] = Y(!1), n = x === "password", H = n && f ? "text" : x, V = r != null && r !== "", m = R && V && !v, i = p === "sm" ? "h-4 w-4" : p === "lg" ? "h-5 w-5" : "h-4 w-4", X = (l) => {
+      var P;
+      if (l.stopPropagation(), g)
+        g();
+      else if (d) {
+        const h = (P = l.currentTarget.closest(".relative")) == null ? void 0 : P.querySelector("input");
+        if (h) {
+          const w = {
+            target: h,
+            currentTarget: h,
+            bubbles: !0,
+            cancelable: !0,
+            defaultPrevented: !1,
+            eventPhase: 2,
+            isTrusted: !1,
+            nativeEvent: new Event("change"),
+            preventDefault: () => {
             },
-            size: {
-              sm: c(
-                "h-8",
-                j("bodySmall"),
-                l("md", "px")
-              ),
-              md: c(
-                "h-10",
-                j("body"),
-                l("base", "px")
-              ),
-              lg: c(
-                "h-12",
-                j("bodyLarge"),
-                l("lg", "px")
-              )
+            stopPropagation: () => {
             },
-            state: {
-              default: "",
-              error: c(
-                "border-error",
-                "focus:border-error",
-                $("error")
-              ),
-              success: c(
-                "border-success",
-                "focus:border-success",
-                $("success")
-              )
-            }
-          },
-          defaultVariants: {
-            variant: "outlined",
-            size: "md",
-            state: "default"
-          }
+            persist: () => {
+            },
+            timeStamp: Date.now()
+          };
+          Object.defineProperty(w.target, "value", {
+            value: "",
+            writable: !0
+          }), Object.defineProperty(w.currentTarget, "value", {
+            value: "",
+            writable: !0
+          }), d(w);
+        }
+      }
+    }, G = () => F((l) => !l), J = m || n || !!u ? /* @__PURE__ */ L(M, { children: [
+      m && /* @__PURE__ */ o(
+        j,
+        {
+          variant: "ghost",
+          size: "sm",
+          onClick: X,
+          className: `h-auto ${I("xs", "p")}`,
+          "aria-label": "Clear input",
+          children: /* @__PURE__ */ o(Z, { className: i })
         }
       ),
-      [A, $]
-    ), re = o(
-      () => c(
-        B({ variant: v, size: a, state: I }),
-        // Icon padding - specific values for icon positioning.
-        // `pl-9` / `pr-9` aren't on the spacing scale (no semantic
-        // key for 36px); they stay raw until a future PR either
-        // extends the scale or refactors the icon-padding contract.
-        h && (a === "sm" ? "pl-9" : a === "lg" ? l("3xl", "pl") : l("2xl", "pl")),
-        (y || S || f) && (a === "sm" ? "pr-9" : a === "lg" ? l("3xl", "pr") : l("2xl", "pr")),
-        H
-      ),
-      [
-        B,
-        v,
-        a,
-        I,
-        h,
-        y,
-        S,
-        f,
-        H
-      ]
-    ), ae = o(
-      () => c(
-        "block",
-        z("label"),
-        l("xs", "mb"),
-        m && "opacity-50"
-      ),
-      [m]
-    ), g = o(
-      () => a === "sm" ? "h-4 w-4" : a === "lg" ? "h-5 w-5" : "h-4 w-4",
-      [a]
-    ), ne = o(
-      () => a === "sm" ? "top-2" : a === "lg" ? "top-3.5" : "top-2.5",
-      [a]
-    ), le = T(
-      (p) => {
-        var G;
-        if (p.stopPropagation(), C)
-          C();
-        else if (w) {
-          const E = (G = p.currentTarget.closest(".relative")) == null ? void 0 : G.querySelector("input");
-          if (E) {
-            const R = {
-              target: E,
-              currentTarget: E,
-              bubbles: !0,
-              cancelable: !0,
-              defaultPrevented: !1,
-              eventPhase: 2,
-              isTrusted: !1,
-              nativeEvent: new Event("change"),
-              preventDefault: () => {
-              },
-              stopPropagation: () => {
-              },
-              persist: () => {
-              },
-              timeStamp: Date.now()
-            };
-            Object.defineProperty(R.target, "value", {
-              value: "",
-              writable: !0
-            }), Object.defineProperty(R.currentTarget, "value", {
-              value: "",
-              writable: !0
-            }), w(R);
-          }
+      n && /* @__PURE__ */ o(
+        j,
+        {
+          variant: "ghost",
+          size: "sm",
+          onClick: G,
+          className: `h-auto ${I("xs", "p")}`,
+          "aria-label": f ? "Hide password" : "Show password",
+          children: f ? /* @__PURE__ */ o(_, { className: i }) : /* @__PURE__ */ o(ee, { className: i })
         }
-      },
-      [C, w]
-    ), ce = T(() => {
-      se((p) => !p);
-    }, []);
-    return /* @__PURE__ */ F("div", { className: "w-full", children: [
-      e && /* @__PURE__ */ n("label", { htmlFor: u, className: ae, children: e }),
-      /* @__PURE__ */ F("div", { className: "relative", children: [
-        h && /* @__PURE__ */ n(
-          "div",
-          {
-            className: `absolute left-3 ${ne} text-fg-secondary opacity-60 pointer-events-none`,
-            children: /* @__PURE__ */ n("div", { className: g, children: h })
-          }
-        ),
-        /* @__PURE__ */ n(
-          "input",
-          U({
-            id: u,
-            ref: ee,
-            type: oe,
-            className: re,
-            disabled: m,
-            value: b,
-            onChange: w,
-            "aria-invalid": s,
-            "aria-required": q.required,
-            "aria-describedby": V || D,
-            suppressHydrationWarning: !0
-          }, q)
-        ),
-        /* @__PURE__ */ F(
-          "div",
-          {
-            className: `absolute right-3 top-0 bottom-0 flex items-center ${l("xs", "gap")}`,
-            children: [
-              S && /* @__PURE__ */ n(
-                Z,
-                {
-                  variant: "ghost",
-                  size: "sm",
-                  onClick: le,
-                  className: `h-auto ${l("xs", "p")}`,
-                  "aria-label": "Clear input",
-                  children: /* @__PURE__ */ n(me, { className: g })
-                }
-              ),
-              f && /* @__PURE__ */ n(
-                Z,
-                {
-                  variant: "ghost",
-                  size: "sm",
-                  onClick: ce,
-                  className: `h-auto ${l("xs", "p")}`,
-                  "aria-label": N ? "Hide password" : "Show password",
-                  children: N ? /* @__PURE__ */ n(be, { className: g }) : /* @__PURE__ */ n(ge, { className: g })
-                }
-              ),
-              y && !S && !f && /* @__PURE__ */ n(
-                "div",
-                {
-                  className: `text-fg-secondary opacity-60 pointer-events-none ${g}`,
-                  children: y
-                }
-              )
-            ]
-          }
-        )
-      ] }),
-      (s || i || d) && /* @__PURE__ */ n(
-        he,
+      ),
+      u && !m && !n && /* @__PURE__ */ o(
+        "div",
         {
-          error: s,
-          success: i,
-          helperText: d,
-          errorId: V,
-          helperId: D
+          className: `text-fg-secondary opacity-60 pointer-events-none ${i}`,
+          children: u
         }
       )
-    ] });
+    ] }) : void 0;
+    return /* @__PURE__ */ o(
+      te,
+      E({
+        ref: D,
+        id: z,
+        label: t,
+        error: a,
+        success: $,
+        helperText: B,
+        size: p,
+        variant: C,
+        leftIcon: O,
+        rightSlot: J,
+        className: k,
+        disabled: v,
+        type: H,
+        value: r,
+        onChange: d
+      }, A)
+    );
   })
 );
-ye.displayName = "Input";
+se.displayName = "Input";
 export {
-  ye as default
+  se as default
 };
 //# sourceMappingURL=Input.js.map

package/dist/granular/ui/primitives/Input/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sources":["../../../../../src/ui/primitives/Input/Input.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, useState, memo, useId, useMemo, useCallback } from \"react\";\nimport type { InputHTMLAttributes, ReactNode } from \"react\";\nimport {\n  getTypographyClasses,\n  getTypographySize,\n} from \"../../tokens/typography\";\nimport { getRadiusClass } from \"../../tokens/radius\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\nimport { cn, cva } from \"../../utils\";\nimport { X, Eye, EyeOff } from \"lucide-react\";\nimport Button from \"../Button/Button\";\n\n/**\n * Helper Text Component\n * Memoized component for helper/error text\n */\nconst HelperText = memo(function HelperText({\n  error,\n  success,\n  helperText,\n  errorId,\n  helperId,\n}: {\n  error: boolean;\n  success: boolean;\n  helperText?: string;\n  errorId?: string;\n  helperId?: string;\n}) {\n  const helperClasses = useMemo(\n    () =>\n      cn(\n        getSpacingClass(\"xs\", \"mt\"),\n        getTypographyClasses(\"caption\"),\n        error && \"text-fg-error\",\n        success && \"text-fg-success\",\n        !error && !success && \"text-fg-secondary\",\n      ),\n    [error, success],\n  );\n\n  const text = useMemo(\n    () => helperText || (error ? \"Error\" : success ? \"Success\" : \"\"),\n    [helperText, error, success],\n  );\n\n  return (\n    <div\n      id={errorId || helperId}\n      className={helperClasses}\n      role={error || success ? \"alert\" : undefined}\n    >\n      {text}\n    </div>\n  );\n});\n\nexport type InputSize = \"sm\" | \"md\" | \"lg\";\nexport type InputVariant = \"default\" | \"outlined\" | \"filled\";\nexport type InputState = \"default\" | \"error\" | \"success\";\n\nexport interface InputProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  \"size\"\n> {\n  label?: ReactNode;\n  error?: boolean;\n  success?: boolean;\n  helperText?: string;\n  size?: InputSize;\n  variant?: InputVariant;\n  leftIcon?: ReactNode;\n  rightIcon?: ReactNode;\n  showClearButton?: boolean;\n  onClear?: () => void;\n}\n\n/**\n * Input Component\n *\n * A styled text input component with label, error/success states, icons, and clear button.\n * Uses Composite Pattern when combined with Label and ErrorMessage.\n *\n * @example\n * ```tsx\n * <Input\n *   id=\"email\"\n *   label=\"Email\"\n *   type=\"email\"\n *   placeholder=\"Enter your email\"\n *   error={hasError}\n *   helperText={errorMessage}\n *   leftIcon={<MailIcon />}\n * />\n * ```\n */\nconst Input = memo(\n  forwardRef<HTMLInputElement, InputProps>(function Input(\n    {\n      id,\n      label,\n      error = false,\n      success = false,\n      helperText,\n      size = \"md\",\n      variant = \"outlined\",\n      leftIcon,\n      rightIcon,\n      showClearButton = false,\n      onClear,\n      className = \"\",\n      disabled = false,\n      type = \"text\",\n      value,\n      onChange,\n      ...props\n    },\n    ref,\n  ) {\n    // Stable fallback id when the consumer doesn't provide one. useId\n    // is SSR-safe and stable across renders, replacing the deprecated\n    // Math.random().substr() pattern.\n    const reactId = useId();\n    const inputId = id || `input-${reactId}`;\n\n    // Memoize error and helper IDs\n    const errorId = useMemo(\n      () => (error ? `${inputId}-error` : undefined),\n      [error, inputId],\n    );\n\n    const helperId = useMemo(\n      () => (helperText ? `${inputId}-helper` : undefined),\n      [helperText, inputId],\n    );\n\n    // Password toggle state\n    const [showPassword, setShowPassword] = useState(false);\n\n    // Memoize password-related values\n    const isPassword = useMemo(() => type === \"password\", [type]);\n    const inputType = useMemo(\n      () => (isPassword && showPassword ? \"text\" : type),\n      [isPassword, showPassword, type],\n    );\n\n    // Memoize state\n    const state = useMemo<InputState>(\n      () => (error ? \"error\" : success ? \"success\" : \"default\"),\n      [error, success],\n    );\n\n    // Memoize clear button visibility\n    const hasValue = useMemo(\n      () => value !== undefined && value !== null && value !== \"\",\n      [value],\n    );\n\n    const shouldShowClear = useMemo(\n      () => showClearButton && hasValue && !disabled,\n      [showClearButton, hasValue, disabled],\n    );\n\n    // Memoize focus ring colors\n    const primaryFocusRing = useMemo(() => \"focus:border-line-focus\", []);\n\n    const errorFocusRing = useMemo(() => \"focus:border-error\", []);\n\n    const successFocusRing = useMemo(() => \"focus:border-success\", []);\n\n    const getFocusRingColor = useMemo(\n      () => primaryFocusRing.replace(\"focus:border-\", \"focus:ring-\"),\n      [primaryFocusRing],\n    );\n\n    const getStateFocusRingColor = useCallback(\n      (stateType: \"error\" | \"success\"): string => {\n        return stateType === \"error\"\n          ? errorFocusRing.replace(\"focus:border-\", \"focus:ring-\")\n          : successFocusRing.replace(\"focus:border-\", \"focus:ring-\");\n      },\n      [errorFocusRing, successFocusRing],\n    );\n\n    // Input variants using CVA — memoize so the function reference is\n    // stable across renders. inputClasses below depends on this; without\n    // memoization a fresh cva() each render would invalidate that memo\n    // on every render (defeating its purpose).\n    const inputVariants = useMemo(\n      () =>\n        cva(\n          // Base classes\n          cn(\n            \"w-full\",\n            getRadiusClass(\"md\"),\n            \"transition-colors\",\n            \"focus:outline-none\",\n            \"focus:ring-2\",\n            \"focus:ring-offset-2\",\n            \"disabled:opacity-50\",\n            \"disabled:cursor-not-allowed\",\n          ),\n          {\n            variants: {\n              variant: {\n                default: cn(\n                  \"border-0\",\n                  \"border-b-2\",\n                  \"border-line-default\",\n                  \"focus:border-line-focus\",\n                ),\n                outlined: cn(\n                  \"border\",\n                  \"border-line-default\",\n                  \"focus:border-line-focus\",\n                ),\n                filled: cn(\n                  \"bg-surface-muted\",\n                  \"border-0\",\n                  \"focus:bg-surface-base\",\n                  \"focus:ring-2\",\n                  getFocusRingColor,\n                ),\n              },\n              size: {\n                sm: cn(\n                  \"h-8\",\n                  getTypographySize(\"bodySmall\"),\n                  getSpacingClass(\"md\", \"px\"),\n                ),\n                md: cn(\n                  \"h-10\",\n                  getTypographySize(\"body\"),\n                  getSpacingClass(\"base\", \"px\"),\n                ),\n                lg: cn(\n                  \"h-12\",\n                  getTypographySize(\"bodyLarge\"),\n                  getSpacingClass(\"lg\", \"px\"),\n                ),\n              },\n              state: {\n                default: \"\",\n                error: cn(\n                  \"border-error\",\n                  \"focus:border-error\",\n                  getStateFocusRingColor(\"error\"),\n                ),\n                success: cn(\n                  \"border-success\",\n                  \"focus:border-success\",\n                  getStateFocusRingColor(\"success\"),\n                ),\n              },\n            },\n            defaultVariants: {\n              variant: \"outlined\",\n              size: \"md\",\n              state: \"default\",\n            },\n          },\n        ),\n      [getFocusRingColor, getStateFocusRingColor],\n    );\n\n    // Memoize input classes\n    const inputClasses = useMemo(\n      () =>\n        cn(\n          inputVariants({ variant, size, state }),\n          // Icon padding - specific values for icon positioning.\n          // `pl-9` / `pr-9` aren't on the spacing scale (no semantic\n          // key for 36px); they stay raw until a future PR either\n          // extends the scale or refactors the icon-padding contract.\n          leftIcon &&\n            (size === \"sm\"\n              ? \"pl-9\"\n              : size === \"lg\"\n                ? getSpacingClass(\"3xl\", \"pl\")\n                : getSpacingClass(\"2xl\", \"pl\")),\n          (rightIcon || shouldShowClear || isPassword) &&\n            (size === \"sm\"\n              ? \"pr-9\"\n              : size === \"lg\"\n                ? getSpacingClass(\"3xl\", \"pr\")\n                : getSpacingClass(\"2xl\", \"pr\")),\n          className,\n        ),\n      [\n        inputVariants,\n        variant,\n        size,\n        state,\n        leftIcon,\n        rightIcon,\n        shouldShowClear,\n        isPassword,\n        className,\n      ],\n    );\n\n    // Memoize label classes\n    const labelClasses = useMemo(\n      () =>\n        cn(\n          \"block\",\n          getTypographyClasses(\"label\"),\n          getSpacingClass(\"xs\", \"mb\"),\n          disabled && \"opacity-50\",\n        ),\n      [disabled],\n    );\n\n    // Memoize icon size and position\n    const iconSize = useMemo(\n      () => (size === \"sm\" ? \"h-4 w-4\" : size === \"lg\" ? \"h-5 w-5\" : \"h-4 w-4\"),\n      [size],\n    );\n\n    const iconPosition = useMemo(\n      () => (size === \"sm\" ? \"top-2\" : size === \"lg\" ? \"top-3.5\" : \"top-2.5\"),\n      [size],\n    );\n\n    // Memoize clear handler\n    const handleClear = useCallback(\n      (e: React.MouseEvent) => {\n        e.stopPropagation();\n        if (onClear) {\n          onClear();\n        } else if (onChange) {\n          // Create synthetic event to clear input\n          const inputElement = e.currentTarget\n            .closest(\".relative\")\n            ?.querySelector(\"input\") as HTMLInputElement;\n          if (inputElement) {\n            const syntheticEvent = {\n              target: inputElement,\n              currentTarget: inputElement,\n              bubbles: true,\n              cancelable: true,\n              defaultPrevented: false,\n              eventPhase: 2,\n              isTrusted: false,\n              nativeEvent: new Event(\"change\"),\n              preventDefault: () => {},\n              stopPropagation: () => {},\n              persist: () => {},\n              timeStamp: Date.now(),\n            } as unknown as React.ChangeEvent<HTMLInputElement>;\n            Object.defineProperty(syntheticEvent.target, \"value\", {\n              value: \"\",\n              writable: true,\n            });\n            Object.defineProperty(syntheticEvent.currentTarget, \"value\", {\n              value: \"\",\n              writable: true,\n            });\n            onChange(syntheticEvent);\n          }\n        }\n      },\n      [onClear, onChange],\n    );\n\n    // Memoize password toggle handler\n    const handleTogglePassword = useCallback(() => {\n      setShowPassword((prev) => !prev);\n    }, []);\n\n    return (\n      <div className=\"w-full\">\n        {label && (\n          <label htmlFor={inputId} className={labelClasses}>\n            {label}\n          </label>\n        )}\n        <div className=\"relative\">\n          {leftIcon && (\n            <div\n              className={`absolute left-3 ${iconPosition} text-fg-secondary opacity-60 pointer-events-none`}\n            >\n              <div className={iconSize}>{leftIcon}</div>\n            </div>\n          )}\n          <input\n            id={inputId}\n            ref={ref}\n            type={inputType}\n            className={inputClasses}\n            disabled={disabled}\n            value={value}\n            onChange={onChange}\n            aria-invalid={error}\n            aria-required={props.required}\n            aria-describedby={errorId || helperId}\n            suppressHydrationWarning\n            {...props}\n          />\n          <div\n            className={`absolute right-3 top-0 bottom-0 flex items-center ${getSpacingClass(\"xs\", \"gap\")}`}\n          >\n            {shouldShowClear && (\n              <Button\n                variant=\"ghost\"\n                size=\"sm\"\n                onClick={handleClear}\n                className={`h-auto ${getSpacingClass(\"xs\", \"p\")}`}\n                aria-label=\"Clear input\"\n              >\n                <X className={iconSize} />\n              </Button>\n            )}\n            {isPassword && (\n              <Button\n                variant=\"ghost\"\n                size=\"sm\"\n                onClick={handleTogglePassword}\n                className={`h-auto ${getSpacingClass(\"xs\", \"p\")}`}\n                aria-label={showPassword ? \"Hide password\" : \"Show password\"}\n              >\n                {showPassword ? (\n                  <EyeOff className={iconSize} />\n                ) : (\n                  <Eye className={iconSize} />\n                )}\n              </Button>\n            )}\n            {rightIcon && !shouldShowClear && !isPassword && (\n              <div\n                className={`text-fg-secondary opacity-60 pointer-events-none ${iconSize}`}\n              >\n                {rightIcon}\n              </div>\n            )}\n          </div>\n        </div>\n        {(error || success || helperText) && (\n          <HelperText\n            error={error}\n            success={success}\n            helperText={helperText}\n            errorId={errorId}\n            helperId={helperId}\n          />\n        )}\n      </div>\n    );\n  }),\n);\n\nInput.displayName = \"Input\";\n\nexport default Input;\n"],"names":["HelperText","memo","error","success","helperText","errorId","helperId","helperClasses","useMemo","cn","getSpacingClass","getTypographyClasses","text","jsx","Input","forwardRef","_a","ref","_b","id","label","size","variant","leftIcon","rightIcon","showClearButton","onClear","className","disabled","type","value","onChange","props","__objRest","reactId","useId","inputId","showPassword","setShowPassword","useState","isPassword","inputType","state","hasValue","shouldShowClear","primaryFocusRing","errorFocusRing","successFocusRing","getFocusRingColor","getStateFocusRingColor","useCallback","stateType","inputVariants","cva","getRadiusClass","getTypographySize","inputClasses","labelClasses","iconSize","iconPosition","handleClear","e","inputElement","syntheticEvent","handleTogglePassword","prev","jsxs","__spreadValues","Button","X","EyeOff","Eye"],"mappings":"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"}
+{"version":3,"file":"Input.js","sources":["../../../../../src/ui/primitives/Input/Input.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, useState, memo, useId } from \"react\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\nimport { X, Eye, EyeOff } from \"lucide-react\";\nimport Button from \"../Button/Button\";\nimport InputBase from \"./InputBase\";\nimport type { InputBaseProps } from \"./InputBase\";\n\n// The presentational variant types live on InputBase now (the shared,\n// server-safe core). Re-exported here so existing deep imports and the\n// folder index keep resolving them from \"./Input\".\nexport type { InputSize, InputVariant, InputState } from \"./InputBase\";\n\nexport interface InputProps extends Omit<InputBaseProps, \"rightSlot\"> {\n  showClearButton?: boolean;\n  onClear?: () => void;\n}\n\n/**\n * Input Component\n *\n * The interactive text input: everything `InputBase` renders, plus the\n * client-only affordances that require React state — the password\n * visibility toggle (`type=\"password\"`), the clear button\n * (`showClearButton`), and the `useId` auto-id fallback. It **composes**\n * `InputBase` (issue #224): the presentational shell lives once in\n * `InputBase`, and `Input` layers the stateful affixes on top, passing\n * the resolved `id`, the toggled `type`, and its buttons via `rightSlot`.\n *\n * Need a server-renderable / native-form input with no client state?\n * Import `InputBase` from `@fabio.caffarello/react-design-system/server`.\n *\n * @example\n * ```tsx\n * <Input\n *   id=\"email\"\n *   label=\"Email\"\n *   type=\"email\"\n *   placeholder=\"Enter your email\"\n *   error={hasError}\n *   helperText={errorMessage}\n *   leftIcon={<MailIcon />}\n * />\n * ```\n */\nconst Input = memo(\n  forwardRef<HTMLInputElement, InputProps>(function Input(\n    {\n      id,\n      label,\n      error = false,\n      success = false,\n      helperText,\n      size = \"md\",\n      variant = \"outlined\",\n      leftIcon,\n      rightIcon,\n      showClearButton = false,\n      onClear,\n      className = \"\",\n      disabled = false,\n      type = \"text\",\n      value,\n      onChange,\n      ...props\n    },\n    ref,\n  ) {\n    // Stable fallback id when the consumer doesn't provide one. This is\n    // the client hook that keeps Input on the main entry; InputBase (no\n    // useId) is the server-safe half and receives the resolved id below.\n    const reactId = useId();\n    const inputId = id || `input-${reactId}`;\n\n    // Password toggle state.\n    const [showPassword, setShowPassword] = useState(false);\n    const isPassword = type === \"password\";\n    const inputType = isPassword && showPassword ? \"text\" : type;\n\n    const hasValue = value !== undefined && value !== null && value !== \"\";\n    const shouldShowClear = showClearButton && hasValue && !disabled;\n\n    const iconSize =\n      size === \"sm\" ? \"h-4 w-4\" : size === \"lg\" ? \"h-5 w-5\" : \"h-4 w-4\";\n\n    const handleClear = (e: React.MouseEvent) => {\n      e.stopPropagation();\n      if (onClear) {\n        onClear();\n      } else if (onChange) {\n        // Create a synthetic event to clear the input when the consumer\n        // is controlled but didn't pass onClear.\n        const inputElement = e.currentTarget\n          .closest(\".relative\")\n          ?.querySelector(\"input\") as HTMLInputElement;\n        if (inputElement) {\n          const syntheticEvent = {\n            target: inputElement,\n            currentTarget: inputElement,\n            bubbles: true,\n            cancelable: true,\n            defaultPrevented: false,\n            eventPhase: 2,\n            isTrusted: false,\n            nativeEvent: new Event(\"change\"),\n            preventDefault: () => {},\n            stopPropagation: () => {},\n            persist: () => {},\n            timeStamp: Date.now(),\n          } as unknown as React.ChangeEvent<HTMLInputElement>;\n          Object.defineProperty(syntheticEvent.target, \"value\", {\n            value: \"\",\n            writable: true,\n          });\n          Object.defineProperty(syntheticEvent.currentTarget, \"value\", {\n            value: \"\",\n            writable: true,\n          });\n          onChange(syntheticEvent);\n        }\n      }\n    };\n\n    const handleTogglePassword = () => setShowPassword((prev) => !prev);\n\n    // Trailing-affix slot: the interactive clear + password-toggle\n    // buttons (the reason Input stays client), falling back to the\n    // decorative rightIcon when neither is active. Same content and DOM\n    // order the pre-composition Input rendered, now projected into\n    // InputBase's right-affix container.\n    const hasRightAffix = shouldShowClear || isPassword || Boolean(rightIcon);\n    const rightSlot = hasRightAffix ? (\n      <>\n        {shouldShowClear && (\n          <Button\n            variant=\"ghost\"\n            size=\"sm\"\n            onClick={handleClear}\n            className={`h-auto ${getSpacingClass(\"xs\", \"p\")}`}\n            aria-label=\"Clear input\"\n          >\n            <X className={iconSize} />\n          </Button>\n        )}\n        {isPassword && (\n          <Button\n            variant=\"ghost\"\n            size=\"sm\"\n            onClick={handleTogglePassword}\n            className={`h-auto ${getSpacingClass(\"xs\", \"p\")}`}\n            aria-label={showPassword ? \"Hide password\" : \"Show password\"}\n          >\n            {showPassword ? (\n              <EyeOff className={iconSize} />\n            ) : (\n              <Eye className={iconSize} />\n            )}\n          </Button>\n        )}\n        {rightIcon && !shouldShowClear && !isPassword && (\n          <div\n            className={`text-fg-secondary opacity-60 pointer-events-none ${iconSize}`}\n          >\n            {rightIcon}\n          </div>\n        )}\n      </>\n    ) : undefined;\n\n    return (\n      <InputBase\n        ref={ref}\n        id={inputId}\n        label={label}\n        error={error}\n        success={success}\n        helperText={helperText}\n        size={size}\n        variant={variant}\n        leftIcon={leftIcon}\n        rightSlot={rightSlot}\n        className={className}\n        disabled={disabled}\n        type={inputType}\n        value={value}\n        onChange={onChange}\n        {...props}\n      />\n    );\n  }),\n);\n\nInput.displayName = \"Input\";\n\nexport default Input;\n"],"names":["Input","memo","forwardRef","_a","ref","_b","id","label","error","success","helperText","size","variant","leftIcon","rightIcon","showClearButton","onClear","className","disabled","type","value","onChange","props","__objRest","reactId","useId","inputId","showPassword","setShowPassword","useState","isPassword","inputType","hasValue","shouldShowClear","iconSize","handleClear","e","inputElement","syntheticEvent","handleTogglePassword","prev","rightSlot","jsxs","Fragment","jsx","Button","getSpacingClass","X","EyeOff","Eye","InputBase","__spreadValues"],"mappings":"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"}