@fabio.caffarello/react-design-system 4.1.0 → 4.3.0

package/dist/granular/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -0,0 +1,137 @@
+"use client";
+var S = Object.defineProperty, B = Object.defineProperties;
+var D = Object.getOwnPropertyDescriptors;
+var i = Object.getOwnPropertySymbols;
+var p = Object.prototype.hasOwnProperty, b = Object.prototype.propertyIsEnumerable;
+var g = (r, a, e) => a in r ? S(r, a, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[a] = e, f = (r, a) => {
+  for (var e in a || (a = {}))
+    p.call(a, e) && g(r, e, a[e]);
+  if (i)
+    for (var e of i(a))
+      b.call(a, e) && g(r, e, a[e]);
+  return r;
+}, u = (r, a) => B(r, D(a));
+var h = (r, a) => {
+  var e = {};
+  for (var s in r)
+    p.call(r, s) && a.indexOf(s) < 0 && (e[s] = r[s]);
+  if (r != null && i)
+    for (var s of i(r))
+      a.indexOf(s) < 0 && b.call(r, s) && (e[s] = r[s]);
+  return e;
+};
+import { jsxs as x, jsx as o, Fragment as j } from "react/jsx-runtime";
+import { memo as C, forwardRef as R } from "react";
+import { getRadiusClass as T } from "../../tokens/radius.js";
+import { getSpacingClass as t } from "../../tokens/spacing.js";
+import { getTypographyWeight as y, getTypographySize as d } from "../../tokens/typography.js";
+import { cn as n } from "../../utils/cn.js";
+import { cva as V } from "../../utils/cva.js";
+const _ = V(
+  n("inline-flex", "items-center", "border", T("md")),
+  {
+    variants: {
+      tone: {
+        neutral: n(
+          "bg-surface-muted",
+          "text-fg-primary",
+          "border-line-default"
+        ),
+        success: n("bg-success-bg", "text-success-dark", "border-success"),
+        warning: n("bg-warning-bg", "text-warning-dark", "border-warning"),
+        error: n("bg-error-bg", "text-error-dark", "border-error"),
+        info: n("bg-info-bg", "text-info-dark", "border-info"),
+        primary: n(
+          "bg-surface-brand-subtle",
+          "text-fg-brand-emphasis",
+          "border-line-brand"
+        ),
+        secondary: n(
+          "bg-surface-secondary-subtle",
+          "text-fg-brand-secondary-emphasis",
+          "border-line-secondary"
+        )
+      },
+      size: {
+        sm: n(
+          t("1.5", "px"),
+          t("0.5", "py"),
+          t("0.5", "gap"),
+          "[&_svg]:size-3"
+        ),
+        md: n(
+          t("sm", "px"),
+          t("0.5", "py"),
+          t("xs", "gap"),
+          "[&_svg]:size-3.5"
+        )
+      }
+    },
+    defaultVariants: { tone: "neutral", size: "md" }
+  }
+), F = C(
+  R(function(W, v) {
+    var m = W, {
+      label: a,
+      source: e,
+      tone: s = "neutral",
+      size: l = "md",
+      icon: c,
+      className: N = ""
+    } = m, k = h(m, [
+      "label",
+      "source",
+      "tone",
+      "size",
+      "icon",
+      "className"
+    ]);
+    const w = e != null && e !== "", z = l === "sm" ? "caption" : "bodySmall";
+    return /* @__PURE__ */ x(
+      "span",
+      u(f({
+        ref: v,
+        className: n(_({ tone: s, size: l }), N)
+      }, k), {
+        children: [
+          c ? /* @__PURE__ */ o(
+            "span",
+            {
+              className: "inline-flex shrink-0 items-center",
+              "aria-hidden": "true",
+              children: c
+            }
+          ) : null,
+          /* @__PURE__ */ o(
+            "span",
+            {
+              className: n(
+                d(z),
+                y("label")
+              ),
+              children: a
+            }
+          ),
+          w ? /* @__PURE__ */ x(j, { children: [
+            /* @__PURE__ */ o("span", { "aria-hidden": "true", className: d("caption"), children: "·" }),
+            /* @__PURE__ */ o(
+              "span",
+              {
+                className: n(
+                  d("caption"),
+                  y("caption")
+                ),
+                children: e
+              }
+            )
+          ] }) : null
+        ]
+      })
+    );
+  })
+);
+F.displayName = "DataBadge";
+export {
+  F as default
+};
+//# sourceMappingURL=DataBadge.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataBadge.js","sources":["../../../../../src/ui/primitives/DataBadge/DataBadge.tsx"],"sourcesContent":["import { memo, forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { getRadiusClass } from \"../../tokens/radius\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\nimport {\n  getTypographySize,\n  getTypographyWeight,\n} from \"../../tokens/typography\";\nimport { cn, cva } from \"../../utils\";\n\n/**\n * Semantic tone for a {@link DataBadge}. Mirrors the `Badge` vocabulary\n * (role, not tone) so the soft-wash color treatment is shared and already\n * AA-verified. Map a consumer's tone names onto these roles:\n * `default → neutral`, `destructive → error`, `brand → primary`,\n * `accent → info` (or `secondary`).\n */\nexport type DataBadgeTone =\n  | \"neutral\"\n  | \"success\"\n  | \"warning\"\n  | \"error\"\n  | \"info\"\n  | \"primary\"\n  | \"secondary\";\n\nexport type DataBadgeSize = \"sm\" | \"md\";\n\nexport interface DataBadgeProps extends HTMLAttributes<HTMLSpanElement> {\n  /** Primary datum — the value the badge is about (e.g. \"L2\", \"Aprovada\"). */\n  label: ReactNode;\n  /**\n   * Provenance of the datum, rendered as a lesser-emphasis sub-label after\n   * the label (e.g. \"Câmara\", \"Portal Transparência\"). Omitted when absent.\n   */\n  source?: ReactNode;\n  /** Semantic tone (role-based color). Defaults to `neutral`. */\n  tone?: DataBadgeTone;\n  /** Optional decorative leading icon (rendered `aria-hidden`). */\n  icon?: ReactNode;\n  /** Size scale. Defaults to `md`. */\n  size?: DataBadgeSize;\n}\n\n// Tone → soft-wash classes, mirroring Badge's already-AA-verified scale.\nconst dataBadgeVariants = cva(\n  cn(\"inline-flex\", \"items-center\", \"border\", getRadiusClass(\"md\")),\n  {\n    variants: {\n      tone: {\n        neutral: cn(\n          \"bg-surface-muted\",\n          \"text-fg-primary\",\n          \"border-line-default\",\n        ),\n        success: cn(\"bg-success-bg\", \"text-success-dark\", \"border-success\"),\n        warning: cn(\"bg-warning-bg\", \"text-warning-dark\", \"border-warning\"),\n        error: cn(\"bg-error-bg\", \"text-error-dark\", \"border-error\"),\n        info: cn(\"bg-info-bg\", \"text-info-dark\", \"border-info\"),\n        primary: cn(\n          \"bg-surface-brand-subtle\",\n          \"text-fg-brand-emphasis\",\n          \"border-line-brand\",\n        ),\n        secondary: cn(\n          \"bg-surface-secondary-subtle\",\n          \"text-fg-brand-secondary-emphasis\",\n          \"border-line-secondary\",\n        ),\n      },\n      size: {\n        sm: cn(\n          getSpacingClass(\"1.5\", \"px\"),\n          getSpacingClass(\"0.5\", \"py\"),\n          getSpacingClass(\"0.5\", \"gap\"),\n          \"[&_svg]:size-3\",\n        ),\n        md: cn(\n          getSpacingClass(\"sm\", \"px\"),\n          getSpacingClass(\"0.5\", \"py\"),\n          getSpacingClass(\"xs\", \"gap\"),\n          \"[&_svg]:size-3.5\",\n        ),\n      },\n    },\n    defaultVariants: { tone: \"neutral\", size: \"md\" },\n  },\n);\n\n/**\n * DataBadge\n *\n * An inline metadata chip: a primary `label`, an optional lesser-emphasis\n * `source` sub-label (the datum's provenance), a semantic `tone`, and an\n * optional decorative `icon`. Built for transparency/data UIs where a value\n * must travel with where it came from (\"L2 · Portal Transparência\").\n *\n * Why a separate primitive and not `Badge`: `Badge` is a single-string\n * status label; `DataBadge` carries a value + its source as a structured\n * pair. The `source` is the differentiator — it has no slot in `Badge` /\n * `Chip` / `Info`.\n *\n * Accessibility: the visible text (label, then source) IS the accessible\n * name — the separator and any `icon` are `aria-hidden`. Hierarchy between\n * label and source is conveyed by size + weight, never by dropping the\n * source below its tone's AA-safe text color. The root is a plain inline\n * `<span>` with no live-region role (metadata is static, not announced);\n * pass `role` / `aria-label` via props if a grouping role is wanted.\n *\n * Server-safe: no hooks, no client APIs, no DOM handlers of its own — ships\n * from the `./server` entry.\n *\n * @example\n * ```tsx\n * <DataBadge label=\"L2\" source=\"Portal Transparência\" tone=\"warning\" />\n * <DataBadge label=\"Aprovada\" tone=\"success\" />\n * ```\n */\nconst DataBadge = memo(\n  forwardRef<HTMLSpanElement, DataBadgeProps>(function DataBadge(\n    {\n      label,\n      source,\n      tone = \"neutral\",\n      size = \"md\",\n      icon,\n      className = \"\",\n      ...rest\n    },\n    ref,\n  ) {\n    const hasSource = source !== undefined && source !== null && source !== \"\";\n    // Label is the larger/heavier tier; source is one size smaller and a\n    // lighter weight. Both keep the tone's AA-safe text color — hierarchy\n    // comes from size + weight, not from reducing contrast.\n    const labelSize = size === \"sm\" ? \"caption\" : \"bodySmall\";\n\n    return (\n      <span\n        ref={ref}\n        className={cn(dataBadgeVariants({ tone, size }), className)}\n        {...rest}\n      >\n        {icon ? (\n          <span\n            className=\"inline-flex shrink-0 items-center\"\n            aria-hidden=\"true\"\n          >\n            {icon}\n          </span>\n        ) : null}\n        <span\n          className={cn(\n            getTypographySize(labelSize),\n            getTypographyWeight(\"label\"),\n          )}\n        >\n          {label}\n        </span>\n        {hasSource ? (\n          <>\n            <span aria-hidden=\"true\" className={getTypographySize(\"caption\")}>\n              ·\n            </span>\n            <span\n              className={cn(\n                getTypographySize(\"caption\"),\n                getTypographyWeight(\"caption\"),\n              )}\n            >\n              {source}\n            </span>\n          </>\n        ) : null}\n      </span>\n    );\n  }),\n);\n\nDataBadge.displayName = \"DataBadge\";\n\nexport default DataBadge;\n"],"names":["dataBadgeVariants","cva","cn","getRadiusClass","getSpacingClass","DataBadge","memo","forwardRef","_a","ref","_b","label","source","tone","size","icon","className","rest","__objRest","hasSource","labelSize","jsxs","__spreadProps","__spreadValues","jsx","getTypographySize","getTypographyWeight","Fragment"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CA,MAAMA,IAAoBC;AAAA,EACxBC,EAAG,eAAe,gBAAgB,UAAUC,EAAe,IAAI,CAAC;AAAA,EAChE;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,SAASD;AAAA,UACP;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,QAEF,SAASA,EAAG,iBAAiB,qBAAqB,gBAAgB;AAAA,QAClE,SAASA,EAAG,iBAAiB,qBAAqB,gBAAgB;AAAA,QAClE,OAAOA,EAAG,eAAe,mBAAmB,cAAc;AAAA,QAC1D,MAAMA,EAAG,cAAc,kBAAkB,aAAa;AAAA,QACtD,SAASA;AAAA,UACP;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,QAEF,WAAWA;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,MAEF,MAAM;AAAA,QACJ,IAAIA;AAAA,UACFE,EAAgB,OAAO,IAAI;AAAA,UAC3BA,EAAgB,OAAO,IAAI;AAAA,UAC3BA,EAAgB,OAAO,KAAK;AAAA,UAC5B;AAAA,QAAA;AAAA,QAEF,IAAIF;AAAA,UACFE,EAAgB,MAAM,IAAI;AAAA,UAC1BA,EAAgB,OAAO,IAAI;AAAA,UAC3BA,EAAgB,MAAM,KAAK;AAAA,UAC3B;AAAA,QAAA;AAAA,MACF;AAAA,IACF;AAAA,IAEF,iBAAiB,EAAE,MAAM,WAAW,MAAM,KAAA;AAAA,EAAK;AAEnD,GA+BMC,IAAYC;AAAA,EAChBC,EAA4C,SAC1CC,GASAC,GACA;AAVA,QAAAC,IAAAF,GACE;AAAA,aAAAG;AAAA,MACA,QAAAC;AAAA,MACA,MAAAC,IAAO;AAAA,MACP,MAAAC,IAAO;AAAA,MACP,MAAAC;AAAA,MACA,WAAAC,IAAY;AAAA,QANdN,GAOKO,IAAAC,EAPLR,GAOK;AAAA,MANH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAKF,UAAMS,IAAoCP,KAAW,QAAQA,MAAW,IAIlEQ,IAAYN,MAAS,OAAO,YAAY;AAE9C,WACE,gBAAAO;AAAA,MAAC;AAAA,MAAAC,EAAAC,EAAA;AAAA,QACC,KAAAd;AAAA,QACA,WAAWP,EAAGF,EAAkB,EAAE,MAAAa,GAAM,MAAAC,EAAA,CAAM,GAAGE,CAAS;AAAA,SACtDC,IAHL;AAAA,QAKE,UAAA;AAAA,UAAAF,IACC,gBAAAS;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,eAAY;AAAA,cAEX,UAAAT;AAAA,YAAA;AAAA,UAAA,IAED;AAAA,UACJ,gBAAAS;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWtB;AAAA,gBACTuB,EAAkBL,CAAS;AAAA,gBAC3BM,EAAoB,OAAO;AAAA,cAAA;AAAA,cAG5B,UAAAf;AAAA,YAAA;AAAA,UAAA;AAAA,UAEFQ,IACC,gBAAAE,EAAAM,GAAA,EACE,UAAA;AAAA,YAAA,gBAAAH,EAAC,UAAK,eAAY,QAAO,WAAWC,EAAkB,SAAS,GAAG,UAAA,KAElE;AAAA,YACA,gBAAAD;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAWtB;AAAA,kBACTuB,EAAkB,SAAS;AAAA,kBAC3BC,EAAoB,SAAS;AAAA,gBAAA;AAAA,gBAG9B,UAAAd;AAAA,cAAA;AAAA,YAAA;AAAA,UACH,EAAA,CACF,IACE;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV,CAAC;AACH;AAEAP,EAAU,cAAc;"}

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