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

package/dist/server/index.js

@@ -22,7 +22,7 @@ var h = (e, a) => {
 var re = (e, a, r) => G(e, typeof a != "symbol" ? a + "" : a, r);
 import { jsx as l, jsxs as v, Fragment as Z } from "react/jsx-runtime";
 import * as A from "react";
-import ce, { memo as M, forwardRef as z } from "react";
+import ce, { memo as M, forwardRef as F } from "react";
 import { clsx as he } from "clsx";
 import { twMerge as ye } from "tailwind-merge";
 import { cva as ve } from "class-variance-authority";
@@ -313,7 +313,7 @@ const J = {
   caption: E.create("xs", "normal", "normal"),
   button: E.create("base", "normal", "medium")
 };
-function F(e) {
+function D(e) {
   const a = J[e];
   return `${a.fontSize.tailwind} ${a.lineHeight.tailwind} ${a.fontWeight.tailwind}`;
 }
@@ -471,7 +471,7 @@ const L = (e, a) => {
     }
   }
 ), Ee = M(
-  z(function(b, p) {
+  F(function(b, p) {
     var m = b, {
       variant: a = "neutral",
       size: r = "md",
@@ -547,7 +547,7 @@ function Ae(e) {
         d = !0;
         const T = N;
         let k = "child" in T.props ? T.props.child : T.props.children;
-        ie(k) && typeof q == "function" && (k = q(k._payload)), o = Fe(T, k), p.push((S = o == null ? void 0 : o.props) == null ? void 0 : S.children);
+        ie(k) && typeof q == "function" && (k = q(k._payload)), o = De(T, k), p.push((S = o == null ? void 0 : o.props) == null ? void 0 : S.children);
       } else
         p.push(N);
     }), o ? o = A.cloneElement(o, void 0, p) : (
@@ -565,7 +565,7 @@ function Ae(e) {
         );
       return i;
     }
-    const x = ze(c, (g = o.props) != null ? g : {});
+    const x = Fe(c, (g = o.props) != null ? g : {});
     return o.type !== A.Fragment && (x.ref = t ? m : b), A.cloneElement(o, x);
   });
   return a.displayName = `${e}.Slot`, a;
@@ -576,14 +576,14 @@ function Le(e) {
   const a = (r) => "child" in r ? r.children(r.child) : r.children;
   return a.displayName = `${e}.Slottable`, a.__radixId = ue, a;
 }
-var De = /* @__PURE__ */ Le("Slottable"), Fe = (e, a) => {
+var ze = /* @__PURE__ */ Le("Slottable"), De = (e, a) => {
   if ("child" in e.props) {
     const r = e.props.child;
     return A.isValidElement(r) ? A.cloneElement(r, void 0, e.props.children(r.props.children)) : null;
   }
   return A.isValidElement(a) ? a : null;
 };
-function ze(e, a) {
+function Fe(e, a) {
   const r = f({}, a);
   for (const t in a) {
     const i = e[t], c = a[t];
@@ -678,7 +678,7 @@ const Pe = L(
     "inline-flex",
     "items-center",
     "justify-center",
-    F("button").split(" ")[2] || "font-medium",
+    D("button").split(" ")[2] || "font-medium",
     // Extract font-medium
     $("md"),
     "transition-colors",
@@ -844,8 +844,8 @@ function X({
   ) : null;
 }
 const Ie = M(
-  z(function(k, T) {
-    var D = k, {
+  F(function(k, T) {
+    var z = k, {
       variant: a = "primary",
       size: r = "md",
       isLoading: t = !1,
@@ -860,7 +860,7 @@ const Ie = M(
       disabled: u = !1,
       children: g,
       "aria-label": N
-    } = D, S = h(D, [
+    } = z, S = h(z, [
       "variant",
       "size",
       "isLoading",
@@ -892,7 +892,7 @@ const Ie = M(
     }, Q ? { type: Q } : {}), S);
     return b ? /* @__PURE__ */ v(R, y(f({ ref: T }, ee), { children: [
       o && /* @__PURE__ */ l(X, { position: "left", children: o }),
-      /* @__PURE__ */ l(De, { children: g }),
+      /* @__PURE__ */ l(ze, { children: g }),
       d && /* @__PURE__ */ l(X, { position: "right", children: d })
     ] })) : /* @__PURE__ */ l(R, y(f({ ref: T }, ee), { children: t ? /* @__PURE__ */ v(Z, { children: [
       me,
@@ -995,7 +995,7 @@ const le = L(
       disabled: !1
     }
   }
-), We = z(function(a, r) {
+), We = F(function(a, r) {
   const {
     children: t,
     variant: i = "default",
@@ -1030,7 +1030,7 @@ const le = L(
         children: t
       }
     );
-  const { onRemove: N, onClick: S, count: T } = a, k = S !== void 0, D = k && !d, R = (V) => {
+  const { onRemove: N, onClick: S, count: T } = a, k = S !== void 0, z = k && !d, R = (V) => {
     d || (V.key === "Enter" || V.key === " ") && (V.preventDefault(), S == null || S());
   }, B = T !== void 0, P = o || i === "filled", I = B ? /* @__PURE__ */ l(
     "span",
@@ -1072,7 +1072,7 @@ const le = L(
             disabled: d,
             "aria-pressed": o ? !0 : void 0,
             "aria-label": b || U,
-            tabIndex: m !== void 0 ? m : D ? 0 : void 0,
+            tabIndex: m !== void 0 ? m : z ? 0 : void 0,
             className: n(
               "flex-1",
               "bg-transparent",
@@ -1141,7 +1141,10 @@ const Ue = L(
           "bg-surface-secondary-subtle",
           "text-fg-brand-secondary-emphasis",
           "border-line-secondary"
-        )
+        ),
+        // Categorical data-viz tone — fuchsia soft-wash, sibling to the
+        // chart palette. Not a status; distinct from secondary (brand violet).
+        dataviz: n("bg-dataviz-bg", "text-dataviz-dark", "border-dataviz")
       },
       size: {
         sm: n(
@@ -1161,7 +1164,7 @@ const Ue = L(
     defaultVariants: { tone: "neutral", size: "md" }
   }
 ), Ke = M(
-  z(function(b, p) {
+  F(function(b, p) {
     var m = b, {
       label: a,
       source: r,
@@ -1349,7 +1352,7 @@ function Xe({
 }) {
   const c = n(
     s("xs", "mt"),
-    F("caption"),
+    D("caption"),
     e && "text-fg-error",
     a && "text-fg-success",
     !e && !a && "text-fg-secondary"
@@ -1364,7 +1367,7 @@ function Xe({
     }
   );
 }
-const Ge = z(
+const Ge = F(
   function(T, S) {
     var k = T, {
       id: a,
@@ -1398,8 +1401,8 @@ const Ge = z(
     typeof process != "undefined" && process.env.NODE_ENV !== "production" && r && !a && console.warn(
       "[InputBase] `label` was provided without an `id`. The <label> cannot bind to the input (InputBase does not auto-generate an id — that needs a client hook). Pass an `id`, or use the interactive `Input` which auto-generates one."
     );
-    const D = t ? "error" : i ? "success" : "default", R = t && a ? `${a}-error` : void 0, B = c && a ? `${a}-helper` : void 0, P = o === "sm" ? "h-4 w-4" : o === "lg" ? "h-5 w-5" : "h-4 w-4", I = o === "sm" ? "top-2" : o === "lg" ? "top-3.5" : "top-2.5", U = n(
-      qe({ variant: d, size: o, state: D }),
+    const z = t ? "error" : i ? "success" : "default", R = t && a ? `${a}-error` : void 0, B = c && a ? `${a}-helper` : void 0, P = o === "sm" ? "h-4 w-4" : o === "lg" ? "h-5 w-5" : "h-4 w-4", I = o === "sm" ? "top-2" : o === "lg" ? "top-3.5" : "top-2.5", U = n(
+      qe({ variant: d, size: o, state: z }),
       // Icon padding — `pl-9` / `pr-9` aren't on the spacing scale (no
       // semantic key for 36px) so they stay raw at the `sm` size; md/lg use
       // the getter. Mirrors the original Input contract.
@@ -1408,7 +1411,7 @@ const Ge = z(
       x
     ), V = n(
       "block",
-      F("label"),
+      D("label"),
       s("xs", "mb"),
       u && "opacity-50"
     );
@@ -1483,7 +1486,7 @@ const Ye = n(
     "after:font-normal"
   )
 }, Je = M(
-  z(function(o, c) {
+  F(function(o, c) {
     var d = o, { variant: a = "default", className: r = "", children: t } = d, i = h(d, ["variant", "className", "children"]);
     const p = n(
       Ye,
@@ -1584,7 +1587,7 @@ const ea = L("w-full", {
   defaultVariants: {
     variant: "primary"
   }
-}), aa = z(function(x, m) {
+}), aa = F(function(x, m) {
   var u = x, {
     value: a,
     max: r = 100,
@@ -1882,9 +1885,9 @@ function ia(b, p) {
         u = "p";
         break;
     }
-  return e === "heading" ? x.push(F("h2")) : e === "body" || e === "paragraph" ? x.push(F("body")) : e === "bodySmall" ? x.push(F("bodySmall")) : e === "bodyLarge" ? x.push(F("bodyLarge")) : e === "caption" ? x.push(F("caption")) : e === "label" ? x.push(F("label")) : x.push(F("body")), a && x.push("font-bold"), r && x.push("italic"), x.push(sa[c][o]), /* @__PURE__ */ l(u, f({ ref: p, className: n(...x, t) }, d));
+  return e === "heading" ? x.push(D("h2")) : e === "body" || e === "paragraph" ? x.push(D("body")) : e === "bodySmall" ? x.push(D("bodySmall")) : e === "bodyLarge" ? x.push(D("bodyLarge")) : e === "caption" ? x.push(D("caption")) : e === "label" ? x.push(D("label")) : x.push(D("body")), a && x.push("font-bold"), r && x.push("italic"), x.push(sa[c][o]), /* @__PURE__ */ l(u, f({ ref: p, className: n(...x, t) }, d));
 }
-const H = z(ia), la = {
+const H = F(ia), la = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
   lg: "max-w-screen-lg",
@@ -2191,8 +2194,8 @@ function ba(b) {
     role: g,
     tabIndex: N,
     onClick: t,
-    onKeyDown: u ? (D) => {
-      u && (D.key === "Enter" || D.key === " ") && (D.preventDefault(), t == null || t());
+    onKeyDown: u ? (z) => {
+      u && (z.key === "Enter" || z.key === " ") && (z.preventDefault(), t == null || t());
     } : void 0,
     "aria-label": i,
     "aria-labelledby": c
@@ -2390,7 +2393,7 @@ const xa = L(
 }, ya = {
   start: "justify-start",
   center: "justify-center"
-}, va = z(
+}, va = F(
   function(N, g) {
     var S = N, {
       kicker: a,
@@ -2782,7 +2785,7 @@ const ka = L(n("flex items-center", "border-b"), {
   $("full"),
   s("xs", "px"),
   "bg-surface-muted text-fg-secondary text-xs"
-), Ta = z(
+), Ta = F(
   function(b, p) {
     var m = b, {
       items: a,