@fluityy/designsystem 0.2.3 → 0.2.4

package/dist/index.js

@@ -1,5 +1,5 @@
-import { jsx as t, jsxs as d } from "react/jsx-runtime";
-import { forwardRef as g, useState as b, useRef as T, useEffect as N, createContext as C, useContext as w, useId as K, cloneElement as q, Children as oe, Fragment as le, useCallback as M, useMemo as se } from "react";
+import { jsx as t, jsxs as u } from "react/jsx-runtime";
+import { forwardRef as p, useState as x, useRef as L, useEffect as N, createContext as C, useContext as y, useId as K, cloneElement as q, Children as oe, Fragment as le, useCallback as z, useMemo as se } from "react";
 import { cva as V } from "class-variance-authority";
 import { clsx as ie } from "clsx";
 import { twMerge as ce } from "tailwind-merge";
@@ -33,17 +33,17 @@ const de = V(
       size: "md"
     }
   }
-), L = g(
-  ({ className: e, variant: r, size: a, fullWidth: n, ...o }, s) => /* @__PURE__ */ t(
+), S = p(
+  ({ className: e, variant: r, size: a, fullWidth: n, ...o }, l) => /* @__PURE__ */ t(
     "button",
     {
-      ref: s,
+      ref: l,
       className: i(de({ variant: r, size: a, fullWidth: n }), e),
       ...o
     }
   )
 );
-L.displayName = "Button";
+S.displayName = "Button";
 const fe = V(
   "flex w-full bg-bg-muted text-fg placeholder:text-fg-muted border border-transparent transition-colors outline-none rounded-lg focus-visible:border-border-strong disabled:opacity-50 disabled:pointer-events-none",
   {
@@ -60,41 +60,41 @@ const fe = V(
     },
     defaultVariants: { size: "md", invalid: !1 }
   }
-), me = g(
-  ({ className: e, size: r, invalid: a, label: n, id: o, type: s, ...l }, c) => {
-    const [u, m] = b(!1), f = s === "password", p = f ? u ? "text" : "password" : s, h = o ?? (n ? n.toLowerCase().replace(/\s+/g, "-") : void 0), v = /* @__PURE__ */ d("div", { className: "relative flex w-full items-center", children: [
+), me = p(
+  ({ className: e, size: r, invalid: a, label: n, id: o, type: l, ...s }, c) => {
+    const [d, f] = x(!1), g = l === "password", b = g ? d ? "text" : "password" : l, v = o ?? (n ? n.toLowerCase().replace(/\s+/g, "-") : void 0), h = /* @__PURE__ */ u("div", { className: "relative flex w-full items-center", children: [
       /* @__PURE__ */ t(
         "input",
         {
           ref: c,
-          id: h,
-          type: p,
+          id: v,
+          type: b,
           className: i(
             fe({ size: r, invalid: a }),
-            f && "pr-10",
+            g && "pr-10",
             e
           ),
-          ...l
+          ...s
         }
       ),
-      f && /* @__PURE__ */ t(
+      g && /* @__PURE__ */ t(
         "button",
         {
           type: "button",
           tabIndex: -1,
-          onClick: () => m((y) => !y),
-          "aria-label": u ? "Ocultar senha" : "Mostrar senha",
+          onClick: () => f((w) => !w),
+          "aria-label": d ? "Ocultar senha" : "Mostrar senha",
           className: "absolute right-3 cursor-pointer text-fg-muted transition-colors hover:text-fg",
-          children: u ? (
+          children: d ? (
             // olho fechado
-            /* @__PURE__ */ d("svg", { viewBox: "0 0 24 24", className: "h-4 w-4", fill: "none", stroke: "currentColor", strokeWidth: 1.75, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": !0, children: [
+            /* @__PURE__ */ u("svg", { viewBox: "0 0 24 24", className: "h-4 w-4", fill: "none", stroke: "currentColor", strokeWidth: 1.75, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": !0, children: [
               /* @__PURE__ */ t("path", { d: "M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94" }),
               /* @__PURE__ */ t("path", { d: "M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19" }),
               /* @__PURE__ */ t("line", { x1: "1", y1: "1", x2: "23", y2: "23" })
             ] })
           ) : (
             // olho aberto
-            /* @__PURE__ */ d("svg", { viewBox: "0 0 24 24", className: "h-4 w-4", fill: "none", stroke: "currentColor", strokeWidth: 1.75, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": !0, children: [
+            /* @__PURE__ */ u("svg", { viewBox: "0 0 24 24", className: "h-4 w-4", fill: "none", stroke: "currentColor", strokeWidth: 1.75, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": !0, children: [
               /* @__PURE__ */ t("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }),
               /* @__PURE__ */ t("circle", { cx: "12", cy: "12", r: "3" })
             ] })
@@ -102,14 +102,14 @@ const fe = V(
         }
       )
     ] });
-    return n ? /* @__PURE__ */ d("div", { className: "flex w-full flex-col gap-1.5", children: [
-      /* @__PURE__ */ t("label", { htmlFor: h, className: "text-xs font-medium text-fg", children: n }),
-      v
-    ] }) : v;
+    return n ? /* @__PURE__ */ u("div", { className: "flex w-full flex-col gap-1.5", children: [
+      /* @__PURE__ */ t("label", { htmlFor: v, className: "text-xs font-medium text-fg", children: n }),
+      h
+    ] }) : h;
   }
 );
 me.displayName = "Input";
-const pe = g(
+const pe = p(
   ({ className: e, ...r }, a) => /* @__PURE__ */ t(
     "div",
     {
@@ -123,19 +123,19 @@ const pe = g(
   )
 );
 pe.displayName = "Card";
-const ge = g(
+const ge = p(
   ({ className: e, ...r }, a) => /* @__PURE__ */ t("div", { ref: a, className: i("flex flex-col gap-1 p-6", e), ...r })
 );
 ge.displayName = "CardHeader";
-const be = g(({ className: e, ...r }, a) => /* @__PURE__ */ t("h3", { ref: a, className: i("text-lg font-semibold text-fg", e), ...r }));
-be.displayName = "CardTitle";
-const he = g(({ className: e, ...r }, a) => /* @__PURE__ */ t("p", { ref: a, className: i("text-sm text-fg-muted", e), ...r }));
-he.displayName = "CardDescription";
-const ve = g(
+const he = p(({ className: e, ...r }, a) => /* @__PURE__ */ t("h3", { ref: a, className: i("text-lg font-semibold text-fg", e), ...r }));
+he.displayName = "CardTitle";
+const be = p(({ className: e, ...r }, a) => /* @__PURE__ */ t("p", { ref: a, className: i("text-sm text-fg-muted", e), ...r }));
+be.displayName = "CardDescription";
+const xe = p(
   ({ className: e, ...r }, a) => /* @__PURE__ */ t("div", { ref: a, className: i("p-6 pt-0", e), ...r })
 );
-ve.displayName = "CardContent";
-const xe = V(
+xe.displayName = "CardContent";
+const ve = V(
   "relative inline-flex shrink-0 cursor-pointer items-center rounded-full transition-colors outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 ring-offset-bg disabled:cursor-not-allowed disabled:opacity-50",
   {
     variants: {
@@ -157,39 +157,39 @@ const xe = V(
     ],
     defaultVariants: { size: "md", checked: !1 }
   }
-), G = g(
-  ({ className: e, size: r, checked: a, defaultChecked: n, onCheckedChange: o, disabled: s, ...l }, c) => {
-    const u = a !== void 0, [m, f] = b(n ?? !1), p = u ? a : m;
+), G = p(
+  ({ className: e, size: r, checked: a, defaultChecked: n, onCheckedChange: o, disabled: l, ...s }, c) => {
+    const d = a !== void 0, [f, g] = x(n ?? !1), b = d ? a : f;
     return /* @__PURE__ */ t(
       "button",
       {
         ref: c,
         type: "button",
         role: "switch",
-        "aria-checked": p,
-        disabled: s,
+        "aria-checked": b,
+        disabled: l,
         onClick: () => {
-          const v = !p;
-          u || f(v), o == null || o(v);
+          const h = !b;
+          d || g(h), o == null || o(h);
         },
-        className: i(xe({ size: r, checked: p }), e),
-        ...l,
-        children: /* @__PURE__ */ t("span", { className: we({ size: r, checked: p }) })
+        className: i(ve({ size: r, checked: b }), e),
+        ...s,
+        children: /* @__PURE__ */ t("span", { className: we({ size: r, checked: b }) })
       }
     );
   }
 );
 G.displayName = "Switch";
-const ye = g(
-  ({ className: e, label: r, indeterminate: a = !1, disabled: n, id: o, ...s }, l) => {
-    const c = T(null);
+const ye = p(
+  ({ className: e, label: r, indeterminate: a = !1, disabled: n, id: o, ...l }, s) => {
+    const c = L(null);
     N(() => {
       c.current && (c.current.indeterminate = a);
     }, [a]);
-    const u = (m) => {
-      c.current = m, typeof l == "function" ? l(m) : l && (l.current = m);
+    const d = (f) => {
+      c.current = f, typeof s == "function" ? s(f) : s && (s.current = f);
     };
-    return /* @__PURE__ */ d(
+    return /* @__PURE__ */ u(
       "label",
       {
         className: i(
@@ -201,15 +201,15 @@ const ye = g(
           /* @__PURE__ */ t(
             "input",
             {
-              ref: u,
+              ref: d,
               id: o,
               type: "checkbox",
               disabled: n,
               className: "peer sr-only",
-              ...s
+              ...l
             }
           ),
-          /* @__PURE__ */ d(
+          /* @__PURE__ */ u(
             "span",
             {
               className: i(
@@ -248,33 +248,33 @@ const ye = g(
   }
 );
 ye.displayName = "Checkbox";
-const O = C(null);
-function lr({
+const U = C(null);
+function ur({
   value: e,
   defaultValue: r,
   onValueChange: a,
   name: n,
   className: o,
-  children: s,
-  ...l
+  children: l,
+  ...s
 }) {
-  const c = K(), u = e !== void 0, [m, f] = b(r), p = u ? e : m, h = (v) => {
-    u || f(v), a == null || a(v);
+  const c = K(), d = e !== void 0, [f, g] = x(r), b = d ? e : f, v = (h) => {
+    d || g(h), a == null || a(h);
   };
   return /* @__PURE__ */ t(
-    O.Provider,
+    U.Provider,
     {
-      value: { name: n ?? c, value: p, onChange: h },
-      children: /* @__PURE__ */ t("div", { role: "radiogroup", className: i("flex flex-col gap-2", o), ...l, children: s })
+      value: { name: n ?? c, value: b, onChange: v },
+      children: /* @__PURE__ */ t("div", { role: "radiogroup", className: i("flex flex-col gap-2", o), ...s, children: l })
     }
   );
 }
-const Ne = g(
-  ({ className: e, value: r, label: a, disabled: n, ...o }, s) => {
-    const l = w(O);
-    if (!l) throw new Error("<Radio> precisa estar dentro de <RadioGroup>");
-    const c = l.value === r;
-    return /* @__PURE__ */ d(
+const Ne = p(
+  ({ className: e, value: r, label: a, disabled: n, ...o }, l) => {
+    const s = y(U);
+    if (!s) throw new Error("<Radio> precisa estar dentro de <RadioGroup>");
+    const c = s.value === r;
+    return /* @__PURE__ */ u(
       "label",
       {
         className: i(
@@ -286,13 +286,13 @@ const Ne = g(
           /* @__PURE__ */ t(
             "input",
             {
-              ref: s,
+              ref: l,
               type: "radio",
-              name: l.name,
+              name: s.name,
               value: r,
               checked: c,
               disabled: n,
-              onChange: () => l.onChange(r),
+              onChange: () => s.onChange(r),
               className: "peer sr-only",
               ...o
             }
@@ -332,12 +332,12 @@ const Ce = V(
     },
     defaultVariants: { size: "md", invalid: !1 }
   }
-), Ve = g(
-  ({ className: e, size: r, invalid: a, children: n, ...o }, s) => /* @__PURE__ */ d("div", { className: "relative inline-flex w-full items-center", children: [
+), Ve = p(
+  ({ className: e, size: r, invalid: a, children: n, ...o }, l) => /* @__PURE__ */ u("div", { className: "relative inline-flex w-full items-center", children: [
     /* @__PURE__ */ t(
       "select",
       {
-        ref: s,
+        ref: l,
         className: i(Ce({ size: r, invalid: a }), e),
         ...o,
         children: n
@@ -360,27 +360,27 @@ const Ce = V(
   ] })
 );
 Ve.displayName = "Select";
-const U = C(null);
+const O = C(null);
 function j() {
-  const e = w(U);
+  const e = y(O);
   if (!e) throw new Error("Componentes de Dropdown precisam estar dentro de <Dropdown>");
   return e;
 }
-function sr({ children: e }) {
-  const [r, a] = b(!1), n = T(null);
+function dr({ children: e }) {
+  const [r, a] = x(!1), n = L(null);
   return N(() => {
     if (!r) return;
-    const o = (l) => {
-      n.current && !n.current.contains(l.target) && a(!1);
-    }, s = (l) => {
-      l.key === "Escape" && a(!1);
+    const o = (s) => {
+      n.current && !n.current.contains(s.target) && a(!1);
+    }, l = (s) => {
+      s.key === "Escape" && a(!1);
     };
-    return document.addEventListener("mousedown", o), document.addEventListener("keydown", s), () => {
-      document.removeEventListener("mousedown", o), document.removeEventListener("keydown", s);
+    return document.addEventListener("mousedown", o), document.addEventListener("keydown", l), () => {
+      document.removeEventListener("mousedown", o), document.removeEventListener("keydown", l);
     };
-  }, [r]), /* @__PURE__ */ t(U.Provider, { value: { open: r, setOpen: a }, children: /* @__PURE__ */ t("div", { ref: n, className: "relative inline-block text-left", children: e }) });
+  }, [r]), /* @__PURE__ */ t(O.Provider, { value: { open: r, setOpen: a }, children: /* @__PURE__ */ t("div", { ref: n, className: "relative inline-block text-left", children: e }) });
 }
-function ir({ children: e }) {
+function fr({ children: e }) {
   const { open: r, setOpen: a } = j();
   return q(e, {
     onClick: () => a(!r),
@@ -388,7 +388,7 @@ function ir({ children: e }) {
     "aria-expanded": r
   });
 }
-function cr({
+function mr({
   children: e,
   align: r = "start",
   className: a
@@ -407,21 +407,21 @@ function cr({
     }
   ) : null;
 }
-function ur({
+function pr({
   children: e,
   onSelect: r,
   destructive: a,
   className: n,
   ...o
 }) {
-  const { setOpen: s } = j();
+  const { setOpen: l } = j();
   return /* @__PURE__ */ t(
     "button",
     {
       type: "button",
       role: "menuitem",
       onClick: () => {
-        r == null || r(), s(!1);
+        r == null || r(), l(!1);
       },
       className: i(
         "flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-left text-sm outline-none transition-colors cursor-pointer",
@@ -434,11 +434,11 @@ function ur({
     }
   );
 }
-function dr() {
+function gr() {
   return /* @__PURE__ */ t("div", { role: "separator", className: "my-1 h-px bg-border-default" });
 }
 const ke = V(
-  "inline-flex items-center gap-1 font-medium whitespace-nowrap rounded-full",
+  "inline-flex items-center gap-1 font-medium whitespace-nowrap rounded-[var(--flui-radius-badge)]",
   {
     variants: {
       variant: {
@@ -458,7 +458,7 @@ const ke = V(
     },
     defaultVariants: { variant: "neutral", size: "sm" }
   }
-), Y = g(
+), Y = p(
   ({ className: e, variant: r, size: a, ...n }, o) => /* @__PURE__ */ t(
     "span",
     {
@@ -498,26 +498,26 @@ function Ee(e) {
     return ((a = r[0]) == null ? void 0 : a.toUpperCase()) ?? "";
   }).join("") : "";
 }
-const Pe = g(
-  ({ className: e, size: r = "md", src: a, alt: n, name: o, status: s, ...l }, c) => {
-    const [u, m] = b(!1), f = a && !u;
-    return /* @__PURE__ */ d("span", { ref: c, className: i(ze({ size: r }), e), ...l, children: [
-      /* @__PURE__ */ t("span", { className: "flex h-full w-full items-center justify-center overflow-hidden rounded-full bg-bg-muted font-medium text-fg", children: f ? /* @__PURE__ */ t(
+const Le = p(
+  ({ className: e, size: r = "md", src: a, alt: n, name: o, status: l, ...s }, c) => {
+    const [d, f] = x(!1), g = a && !d;
+    return /* @__PURE__ */ u("span", { ref: c, className: i(ze({ size: r }), e), ...s, children: [
+      /* @__PURE__ */ t("span", { className: "flex h-full w-full items-center justify-center overflow-hidden rounded-full bg-bg-muted font-medium text-fg", children: g ? /* @__PURE__ */ t(
         "img",
         {
           src: a,
           alt: n ?? o ?? "",
           className: "h-full w-full object-cover",
-          onError: () => m(!0)
+          onError: () => f(!0)
         }
       ) : /* @__PURE__ */ t("span", { "aria-hidden": !0, children: Ee(o) }) }),
-      s && /* @__PURE__ */ t(
+      l && /* @__PURE__ */ t(
         "span",
         {
-          "aria-label": s,
+          "aria-label": l,
           className: i(
             "absolute bottom-[8%] right-[8%] rounded-full ring-2 ring-bg",
-            Me[s],
+            Me[l],
             Te[r ?? "md"]
           )
         }
@@ -525,8 +525,8 @@ const Pe = g(
     ] });
   }
 );
-Pe.displayName = "Avatar";
-const De = V("animate-spin text-primary", {
+Le.displayName = "Avatar";
+const Pe = V("animate-spin text-primary", {
   variants: {
     size: {
       sm: "h-4 w-4",
@@ -535,8 +535,8 @@ const De = V("animate-spin text-primary", {
     }
   },
   defaultVariants: { size: "md" }
-}), Le = g(
-  ({ className: e, size: r, label: a = "Carregando", ...n }, o) => /* @__PURE__ */ d(
+}), De = p(
+  ({ className: e, size: r, label: a = "Carregando", ...n }, o) => /* @__PURE__ */ u(
     "svg",
     {
       ref: o,
@@ -544,7 +544,7 @@ const De = V("animate-spin text-primary", {
       fill: "none",
       role: "status",
       "aria-label": a,
-      className: i(De({ size: r }), e),
+      className: i(Pe({ size: r }), e),
       ...n,
       children: [
         /* @__PURE__ */ t("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "3", className: "opacity-20" }),
@@ -561,14 +561,14 @@ const De = V("animate-spin text-primary", {
     }
   )
 );
-Le.displayName = "Spinner";
-const je = g(
-  ({ className: e, value: r = 0, max: a = 100, indeterminate: n, ...o }, s) => {
-    const l = Math.min(100, Math.max(0, r / a * 100));
+De.displayName = "Spinner";
+const Ae = p(
+  ({ className: e, value: r = 0, max: a = 100, indeterminate: n, ...o }, l) => {
+    const s = Math.min(100, Math.max(0, r / a * 100));
     return /* @__PURE__ */ t(
       "div",
       {
-        ref: s,
+        ref: l,
         role: "progressbar",
         "aria-valuemin": 0,
         "aria-valuemax": a,
@@ -582,15 +582,15 @@ const je = g(
           "div",
           {
             className: "h-full rounded-full bg-primary transition-[width] duration-300",
-            style: { width: `${l}%` }
+            style: { width: `${s}%` }
           }
         )
       }
     );
   }
 );
-je.displayName = "Progress";
-const Ie = g(
+Ae.displayName = "Progress";
+const Ie = p(
   ({ className: e, orientation: r = "horizontal", label: a, ...n }, o) => r === "vertical" ? /* @__PURE__ */ t(
     "div",
     {
@@ -600,7 +600,7 @@ const Ie = g(
       className: i("mx-2 h-full w-px self-stretch bg-border-default", e),
       ...n
     }
-  ) : a ? /* @__PURE__ */ d(
+  ) : a ? /* @__PURE__ */ u(
     "div",
     {
       ref: o,
@@ -625,17 +625,17 @@ const Ie = g(
   )
 );
 Ie.displayName = "Divider";
-const Se = g(
+const Se = p(
   ({ className: e, children: r, ...a }, n) => {
     const o = oe.toArray(r);
-    return /* @__PURE__ */ t("nav", { ref: n, "aria-label": "breadcrumb", className: e, ...a, children: /* @__PURE__ */ t("ol", { className: "flex flex-wrap items-center gap-1.5 text-sm", children: o.map((s, l) => /* @__PURE__ */ d(le, { children: [
-      s,
-      l < o.length - 1 && /* @__PURE__ */ t(Ae, {})
-    ] }, l)) }) });
+    return /* @__PURE__ */ t("nav", { ref: n, "aria-label": "breadcrumb", className: e, ...a, children: /* @__PURE__ */ t("ol", { className: "flex flex-wrap items-center gap-1.5 text-sm", children: o.map((l, s) => /* @__PURE__ */ u(le, { children: [
+      l,
+      s < o.length - 1 && /* @__PURE__ */ t(je, {})
+    ] }, s)) }) });
   }
 );
 Se.displayName = "Breadcrumb";
-function fr({
+function hr({
   href: e,
   current: r,
   className: a,
@@ -658,45 +658,45 @@ function fr({
     }
   ) });
 }
-function Ae() {
+function je() {
   return /* @__PURE__ */ t("li", { "aria-hidden": !0, className: "text-fg-muted", children: "/" });
 }
 function Be(e, r = 1e3) {
-  const [a, n] = b(0);
+  const [a, n] = x(0);
   return N(() => {
     n(0);
-    const o = performance.now(), s = (l) => {
-      const c = Math.min((l - o) / r, 1), u = 1 - (1 - c) ** 4;
-      n(e * u), c < 1 ? requestAnimationFrame(s) : n(e);
+    const o = performance.now(), l = (s) => {
+      const c = Math.min((s - o) / r, 1), d = 1 - (1 - c) ** 4;
+      n(e * d), c < 1 ? requestAnimationFrame(l) : n(e);
     };
-    requestAnimationFrame(s);
+    requestAnimationFrame(l);
   }, [e, r]), a;
 }
-const _e = g(
-  ({ className: e, label: r, value: a, countUp: n, formatCount: o, delta: s, helpText: l, icon: c, ...u }, m) => {
-    const f = Be(n ?? 0), p = typeof s == "number", h = p && s >= 0, v = n !== void 0 ? o ? o(f) : Math.round(f).toLocaleString("pt-BR") : a;
-    return /* @__PURE__ */ d(
+const _e = p(
+  ({ className: e, label: r, value: a, countUp: n, formatCount: o, delta: l, helpText: s, icon: c, ...d }, f) => {
+    const g = Be(n ?? 0), b = typeof l == "number", v = b && l >= 0, h = n !== void 0 ? o ? o(g) : Math.round(g).toLocaleString("pt-BR") : a;
+    return /* @__PURE__ */ u(
       "div",
       {
-        ref: m,
+        ref: f,
         className: i(
-          "flex flex-col gap-2 rounded-xl bg-bg-muted dark:bg-bg-subtle p-8 shadow-sm",
+          "flex flex-col gap-2 rounded-xl bg-bg-muted dark:bg-neutral-900 p-8 shadow-sm",
           e
         ),
-        ...u,
+        ...d,
         children: [
-          /* @__PURE__ */ d("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ u("div", { className: "flex items-center justify-between", children: [
             /* @__PURE__ */ t("span", { className: "text-sm text-fg-muted", children: r }),
             c && /* @__PURE__ */ t("span", { className: "text-fg-muted", children: c })
           ] }),
-          /* @__PURE__ */ t("span", { className: "text-3xl font-bold text-fg whitespace-nowrap tabular-nums", children: v }),
-          p && /* @__PURE__ */ d(Y, { variant: h ? "success" : "danger", size: "sm", className: "self-start", children: [
-            h ? "▲" : "▼",
+          /* @__PURE__ */ t("span", { className: "text-3xl font-bold text-fg whitespace-nowrap tabular-nums", children: h }),
+          b && /* @__PURE__ */ u(Y, { variant: v ? "success" : "danger", size: "sm", className: "self-start", children: [
+            v ? "▲" : "▼",
             " ",
-            Math.abs(s),
+            Math.abs(l),
             "%"
           ] }),
-          l && /* @__PURE__ */ t("span", { className: "text-xs text-fg-muted", children: l })
+          s && /* @__PURE__ */ t("span", { className: "text-xs text-fg-muted", children: s })
         ]
       }
     );
@@ -723,16 +723,16 @@ const Re = V("flex gap-3 rounded-lg p-4 text-sm", {
   success: "✓",
   warning: "!",
   danger: "✕"
-}, He = g(
-  ({ className: e, variant: r = "info", title: a, onClose: n, children: o, ...s }, l) => {
+}, He = p(
+  ({ className: e, variant: r = "info", title: a, onClose: n, children: o, ...l }, s) => {
     const c = r ?? "info";
-    return /* @__PURE__ */ d(
+    return /* @__PURE__ */ u(
       "div",
       {
-        ref: l,
+        ref: s,
         role: "alert",
         className: i(Re({ variant: r }), e),
-        ...s,
+        ...l,
         children: [
           /* @__PURE__ */ t(
             "span",
@@ -745,7 +745,7 @@ const Re = V("flex gap-3 rounded-lg p-4 text-sm", {
               children: We[c]
             }
           ),
-          /* @__PURE__ */ d("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ u("div", { className: "min-w-0 flex-1", children: [
             a && /* @__PURE__ */ t("div", { className: "font-semibold text-fg", children: a }),
             o && /* @__PURE__ */ t("div", { className: "text-fg-muted", children: o })
           ] }),
@@ -770,43 +770,43 @@ function Ke({
   defaultValue: r,
   onChange: a
 }) {
-  const n = e !== void 0, [o, s] = b(r), l = n ? e : o, c = M(
-    (u) => {
-      n || s(u), a == null || a(u);
+  const n = e !== void 0, [o, l] = x(r), s = n ? e : o, c = z(
+    (d) => {
+      n || l(d), a == null || a(d);
     },
     [n, a]
   );
-  return [l, c];
+  return [s, c];
 }
 const $ = C(null);
-function I() {
-  const e = w($);
+function B() {
+  const e = y($);
   if (!e) throw new Error("Componentes de Tabs precisam estar dentro de <Tabs>");
   return e;
 }
-function mr({
+function br({
   value: e,
   defaultValue: r,
   onValueChange: a,
   className: n,
   children: o,
-  ...s
+  ...l
 }) {
-  const [l, c] = Ke({
+  const [s, c] = Ke({
     value: e,
     defaultValue: r ?? "",
     onChange: a
   });
-  return /* @__PURE__ */ t($.Provider, { value: { value: l, setValue: c }, children: /* @__PURE__ */ t("div", { className: n, ...s, children: o }) });
+  return /* @__PURE__ */ t($.Provider, { value: { value: s, setValue: c }, children: /* @__PURE__ */ t("div", { className: n, ...l, children: o }) });
 }
-function pr({ className: e, children: r, ...a }) {
-  const { value: n } = I(), o = T(null), [s, l] = b({ left: 0, width: 0, ready: !1 });
+function xr({ className: e, children: r, ...a }) {
+  const { value: n } = B(), o = L(null), [l, s] = x({ left: 0, width: 0, ready: !1 });
   return N(() => {
     const c = o.current;
     if (!c) return;
-    const u = c.querySelector('[aria-selected="true"]');
-    u && l({ left: u.offsetLeft, width: u.offsetWidth, ready: !0 });
-  }, [n]), /* @__PURE__ */ d(
+    const d = c.querySelector('[aria-selected="true"]');
+    d && s({ left: d.offsetLeft, width: d.offsetWidth, ready: !0 });
+  }, [n]), /* @__PURE__ */ u(
     "div",
     {
       ref: o,
@@ -815,20 +815,20 @@ function pr({ className: e, children: r, ...a }) {
       ...a,
       children: [
         r,
-        s.ready && /* @__PURE__ */ t(
+        l.ready && /* @__PURE__ */ t(
           "span",
           {
             "aria-hidden": !0,
             className: "pointer-events-none absolute bottom-[-1px] h-[2px] rounded-full bg-primary transition-all duration-250 ease-out",
-            style: { left: s.left, width: s.width }
+            style: { left: l.left, width: l.width }
           }
         )
       ]
     }
   );
 }
-function gr({ value: e, className: r, ...a }) {
-  const n = I(), o = n.value === e;
+function vr({ value: e, className: r, ...a }) {
+  const n = B(), o = n.value === e;
   return /* @__PURE__ */ t(
     "button",
     {
@@ -846,8 +846,8 @@ function gr({ value: e, className: r, ...a }) {
     }
   );
 }
-function br({ value: e, className: r, ...a }) {
-  return I().value !== e ? null : /* @__PURE__ */ t(
+function wr({ value: e, className: r, ...a }) {
+  return B().value !== e ? null : /* @__PURE__ */ t(
     "div",
     {
       role: "tabpanel",
@@ -856,24 +856,24 @@ function br({ value: e, className: r, ...a }) {
     }
   );
 }
-const J = C(null), S = C("");
+const J = C(null), _ = C("");
 function Q() {
-  const e = w(J);
+  const e = y(J);
   if (!e) throw new Error("Componentes de Accordion precisam estar dentro de <Accordion>");
   return e;
 }
-function hr({
+function yr({
   type: e = "single",
   defaultValue: r,
   className: a,
   children: n,
   ...o
 }) {
-  const s = r ? Array.isArray(r) ? r : [r] : [], [l, c] = b(s), u = (m) => c((f) => {
-    const p = f.includes(m);
-    return e === "single" ? p ? [] : [m] : p ? f.filter((h) => h !== m) : [...f, m];
+  const l = r ? Array.isArray(r) ? r : [r] : [], [s, c] = x(l), d = (f) => c((g) => {
+    const b = g.includes(f);
+    return e === "single" ? b ? [] : [f] : b ? g.filter((v) => v !== f) : [...g, f];
   });
-  return /* @__PURE__ */ t(J.Provider, { value: { open: l, toggle: u }, children: /* @__PURE__ */ t(
+  return /* @__PURE__ */ t(J.Provider, { value: { open: s, toggle: d }, children: /* @__PURE__ */ t(
     "div",
     {
       className: i("border-y border-border-default divide-y divide-border-default", a),
@@ -882,20 +882,20 @@ function hr({
     }
   ) });
 }
-function vr({ value: e, children: r, ...a }) {
-  return /* @__PURE__ */ t(S.Provider, { value: e, children: /* @__PURE__ */ t("div", { ...a, children: r }) });
+function Nr({ value: e, children: r, ...a }) {
+  return /* @__PURE__ */ t(_.Provider, { value: e, children: /* @__PURE__ */ t("div", { ...a, children: r }) });
 }
-function xr({
+function Cr({
   className: e,
   children: r,
   ...a
 }) {
-  const n = Q(), o = w(S), s = n.open.includes(o);
-  return /* @__PURE__ */ d(
+  const n = Q(), o = y(_), l = n.open.includes(o);
+  return /* @__PURE__ */ u(
     "button",
     {
       type: "button",
-      "aria-expanded": s,
+      "aria-expanded": l,
       onClick: () => n.toggle(o),
       className: i(
         "flex w-full items-center justify-between gap-2 py-4 text-left text-sm font-medium text-fg outline-none cursor-pointer",
@@ -905,16 +905,16 @@ function xr({
       ...a,
       children: [
         r,
-        /* @__PURE__ */ t("span", { className: i("text-fg-muted transition-transform", s && "rotate-180"), children: "▾" })
+        /* @__PURE__ */ t("span", { className: i("text-fg-muted transition-transform", l && "rotate-180"), children: "▾" })
       ]
     }
   );
 }
-function wr({
+function Vr({
   className: e,
   ...r
 }) {
-  const a = Q(), n = w(S);
+  const a = Q(), n = y(_);
   return a.open.includes(n) ? /* @__PURE__ */ t("div", { className: i("pb-4 text-sm text-fg-muted", e), ...r }) : null;
 }
 const qe = {
@@ -923,23 +923,23 @@ const qe = {
   left: "right-full top-1/2 -translate-y-1/2 mr-2",
   right: "left-full top-1/2 -translate-y-1/2 ml-2"
 };
-function yr({ content: e, side: r = "top", children: a, className: n }) {
-  const [o, s] = b(!1), l = K();
-  return /* @__PURE__ */ d(
+function kr({ content: e, side: r = "top", children: a, className: n }) {
+  const [o, l] = x(!1), s = K();
+  return /* @__PURE__ */ u(
     "span",
     {
       className: "relative inline-flex",
-      onMouseEnter: () => s(!0),
-      onMouseLeave: () => s(!1),
-      onFocus: () => s(!0),
-      onBlur: () => s(!1),
+      onMouseEnter: () => l(!0),
+      onMouseLeave: () => l(!1),
+      onFocus: () => l(!0),
+      onBlur: () => l(!1),
       children: [
-        /* @__PURE__ */ t("span", { "aria-describedby": o ? l : void 0, children: a }),
+        /* @__PURE__ */ t("span", { "aria-describedby": o ? s : void 0, children: a }),
         o && /* @__PURE__ */ t(
           "span",
           {
             role: "tooltip",
-            id: l,
+            id: s,
             className: i(
               "pointer-events-none absolute z-50 whitespace-nowrap rounded-md bg-fg px-2 py-1 text-xs text-bg shadow-md",
               "animate-[flui-fade-in_120ms_ease-out]",
@@ -955,23 +955,23 @@ function yr({ content: e, side: r = "top", children: a, className: n }) {
 }
 const X = C(null);
 function Z() {
-  const e = w(X);
+  const e = y(X);
   if (!e) throw new Error("Componentes de Popover precisam estar dentro de <Popover>");
   return e;
 }
-function Nr({ children: e }) {
-  const [r, a] = b(!1), n = T(null);
+function zr({ children: e }) {
+  const [r, a] = x(!1), n = L(null);
   return N(() => {
     if (!r) return;
-    const o = (l) => {
-      n.current && !n.current.contains(l.target) && a(!1);
-    }, s = (l) => l.key === "Escape" && a(!1);
-    return document.addEventListener("mousedown", o), document.addEventListener("keydown", s), () => {
-      document.removeEventListener("mousedown", o), document.removeEventListener("keydown", s);
+    const o = (s) => {
+      n.current && !n.current.contains(s.target) && a(!1);
+    }, l = (s) => s.key === "Escape" && a(!1);
+    return document.addEventListener("mousedown", o), document.addEventListener("keydown", l), () => {
+      document.removeEventListener("mousedown", o), document.removeEventListener("keydown", l);
     };
   }, [r]), /* @__PURE__ */ t(X.Provider, { value: { open: r, setOpen: a }, children: /* @__PURE__ */ t("div", { ref: n, className: "relative inline-block", children: e }) });
 }
-function Cr({ children: e }) {
+function Mr({ children: e }) {
   const { open: r, setOpen: a } = Z();
   return q(e, {
     onClick: () => a(!r),
@@ -979,7 +979,7 @@ function Cr({ children: e }) {
     "aria-expanded": r
   });
 }
-function Vr({
+function Tr({
   children: e,
   align: r = "start",
   className: a
@@ -999,8 +999,8 @@ function Vr({
     }
   ) : null;
 }
-function A({ children: e }) {
-  const [r, a] = b(!1);
+function R({ children: e }) {
+  const [r, a] = x(!1);
   return N(() => a(!0), []), r ? ue(e, document.body) : null;
 }
 function ee(e, r) {
@@ -1015,7 +1015,7 @@ function ee(e, r) {
 const re = C(null);
 function Ge({ open: e, onOpenChange: r, children: a }) {
   const n = () => r == null ? void 0 : r(!1);
-  return ee(e, n), e ? /* @__PURE__ */ t(A, { children: /* @__PURE__ */ t(re.Provider, { value: { close: n }, children: /* @__PURE__ */ d("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-4", children: [
+  return ee(e, n), e ? /* @__PURE__ */ t(R, { children: /* @__PURE__ */ t(re.Provider, { value: { close: n }, children: /* @__PURE__ */ u("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-4", children: [
     /* @__PURE__ */ t(
       "div",
       {
@@ -1026,13 +1026,13 @@ function Ge({ open: e, onOpenChange: r, children: a }) {
     a
   ] }) }) }) : null;
 }
-function Oe({
+function Ue({
   className: e,
   children: r,
   ...a
 }) {
-  const n = w(re);
-  return /* @__PURE__ */ d(
+  const n = y(re);
+  return /* @__PURE__ */ u(
     "div",
     {
       role: "dialog",
@@ -1059,33 +1059,33 @@ function Oe({
     }
   );
 }
-function kr({ className: e, ...r }) {
+function Er({ className: e, ...r }) {
   return /* @__PURE__ */ t("div", { className: i("flex flex-col gap-1 p-6 pb-2", e), ...r });
 }
-function zr({ className: e, ...r }) {
+function Lr({ className: e, ...r }) {
   return /* @__PURE__ */ t("h2", { className: i("text-lg font-semibold text-fg", e), ...r });
 }
-function Mr({
+function Pr({
   className: e,
   ...r
 }) {
   return /* @__PURE__ */ t("p", { className: i("text-sm text-fg-muted", e), ...r });
 }
-function Tr({ className: e, ...r }) {
+function Dr({ className: e, ...r }) {
   return /* @__PURE__ */ t("div", { className: i("px-6 py-2", e), ...r });
 }
-function Er({ className: e, ...r }) {
+function Ar({ className: e, ...r }) {
   return /* @__PURE__ */ t("div", { className: i("flex justify-end gap-2 p-6 pt-4", e), ...r });
 }
-const te = C(null), Ue = {
+const te = C(null), Oe = {
   left: "left-0 top-0 h-full w-[420px] max-w-[96vw] border-r",
   right: "right-0 top-0 h-full w-[420px] max-w-[96vw] border-l",
   top: "top-0 left-0 w-full max-h-[90vh] border-b",
   bottom: "bottom-0 left-0 w-full max-h-[90vh] border-t"
 };
-function Pr({ open: e, onOpenChange: r, side: a = "right", children: n }) {
+function Ir({ open: e, onOpenChange: r, side: a = "right", children: n }) {
   const o = () => r == null ? void 0 : r(!1);
-  return ee(e, o), e ? /* @__PURE__ */ t(A, { children: /* @__PURE__ */ t(te.Provider, { value: { close: o, side: a }, children: /* @__PURE__ */ d("div", { className: "fixed inset-0 z-50", children: [
+  return ee(e, o), e ? /* @__PURE__ */ t(R, { children: /* @__PURE__ */ t(te.Provider, { value: { close: o, side: a }, children: /* @__PURE__ */ u("div", { className: "fixed inset-0 z-50", children: [
     /* @__PURE__ */ t(
       "div",
       {
@@ -1096,13 +1096,13 @@ function Pr({ open: e, onOpenChange: r, side: a = "right", children: n }) {
     n
   ] }) }) }) : null;
 }
-function Dr({
+function Sr({
   className: e,
   children: r,
   ...a
 }) {
-  const n = w(te), o = (n == null ? void 0 : n.side) ?? "right";
-  return /* @__PURE__ */ d(
+  const n = y(te), o = (n == null ? void 0 : n.side) ?? "right";
+  return /* @__PURE__ */ u(
     "div",
     {
       role: "dialog",
@@ -1110,7 +1110,7 @@ function Dr({
       className: i(
         "absolute z-10 flex flex-col border-border-default bg-bg shadow-lg",
         "animate-[flui-fade-in_160ms_ease-out]",
-        Ue[o],
+        Oe[o],
         e
       ),
       ...a,
@@ -1130,7 +1130,7 @@ function Dr({
     }
   );
 }
-function Lr({ className: e, ...r }) {
+function jr({ className: e, ...r }) {
   return /* @__PURE__ */ t(
     "div",
     {
@@ -1139,13 +1139,13 @@ function Lr({ className: e, ...r }) {
     }
   );
 }
-function jr({ className: e, ...r }) {
+function Br({ className: e, ...r }) {
   return /* @__PURE__ */ t("h2", { className: i("text-lg font-semibold text-fg", e), ...r });
 }
-function Ir({ className: e, ...r }) {
+function _r({ className: e, ...r }) {
   return /* @__PURE__ */ t("div", { className: i("flex-1 overflow-y-auto p-6", e), ...r });
 }
-function Sr({ className: e, ...r }) {
+function Rr({ className: e, ...r }) {
   return /* @__PURE__ */ t(
     "div",
     {
@@ -1154,63 +1154,81 @@ function Sr({ className: e, ...r }) {
     }
   );
 }
-const ae = C(null), P = {
-  info: { wrapper: "bg-brand-100 border-l-primary", title: "text-fg", description: "text-fg-muted" },
-  success: { wrapper: "bg-success-subtle border-l-success", title: "text-success-fg", description: "text-success-fg/70" },
-  warning: { wrapper: "bg-warning/15 border-l-warning", title: "text-fg", description: "text-fg-muted" },
-  danger: { wrapper: "bg-danger/10 border-l-danger", title: "text-danger", description: "text-danger/70" }
+const ae = C(null), Ye = {
+  info: { wrapper: "bg-[var(--color-toast-info-bg)]", title: "text-fg", description: "text-fg-muted", action: "text-primary hover:text-primary/80" },
+  success: { wrapper: "bg-[var(--color-toast-success-bg)]", title: "text-success-fg", description: "text-fg-muted", action: "text-success-fg hover:text-success-fg/80" },
+  warning: { wrapper: "bg-[var(--color-toast-warning-bg)]", title: "text-fg", description: "text-fg-muted", action: "text-fg hover:text-fg/80" },
+  danger: { wrapper: "bg-[var(--color-toast-danger-bg)]", title: "text-danger", description: "text-fg-muted", action: "text-danger hover:text-danger/80" }
 };
-function Ar({ children: e }) {
-  const [r, a] = b([]), n = T(0), o = M((l) => {
-    a((c) => c.filter((u) => u.id !== l));
-  }, []), s = M((l) => {
+function Fr({ children: e }) {
+  const [r, a] = x([]), n = L(0), o = z((s) => {
+    a((c) => c.map((d) => d.id === s ? { ...d, leaving: !0 } : d)), setTimeout(() => {
+      a((c) => c.filter((d) => d.id !== s));
+    }, 160);
+  }, []), l = z((s) => {
     const c = ++n.current;
-    return a((u) => [...u, { id: c, variant: "info", duration: 4e3, ...l }]), c;
+    return a((d) => [...d, { id: c, variant: "info", duration: 4e3, ...s }]), c;
   }, []);
-  return /* @__PURE__ */ d(ae.Provider, { value: { toast: s, dismiss: o }, children: [
+  return /* @__PURE__ */ u(ae.Provider, { value: { toast: l, dismiss: o }, children: [
     e,
-    /* @__PURE__ */ t(A, { children: /* @__PURE__ */ t("div", { className: "pointer-events-none fixed bottom-4 right-4 z-[60] flex w-80 max-w-[90vw] flex-col gap-2", children: r.map((l) => /* @__PURE__ */ t(Ye, { item: l, onDismiss: () => o(l.id) }, l.id)) }) })
+    /* @__PURE__ */ t(R, { children: /* @__PURE__ */ t("div", { className: "pointer-events-none fixed bottom-4 right-8 z-[60] flex w-80 max-w-[90vw] flex-col gap-2", children: r.map((s) => /* @__PURE__ */ t($e, { item: s, onDismiss: () => o(s.id) }, s.id)) }) })
   ] });
 }
-function Ye({ item: e, onDismiss: r }) {
-  return N(() => {
+function $e({ item: e, onDismiss: r }) {
+  N(() => {
     if (!e.duration) return;
-    const a = setTimeout(r, e.duration);
-    return () => clearTimeout(a);
-  }, [e.duration, r]), /* @__PURE__ */ d(
+    const n = setTimeout(r, e.duration);
+    return () => clearTimeout(n);
+  }, [e.duration, r]);
+  const a = Ye[e.variant ?? "info"];
+  return /* @__PURE__ */ u(
     "div",
     {
       role: "status",
       className: i(
-        "pointer-events-auto flex items-start gap-3 rounded-lg border-l-4 p-4 shadow-md",
-        "animate-[flui-slide-up_160ms_ease-out]",
-        P[e.variant ?? "info"].wrapper
+        "pointer-events-auto flex items-start gap-3 rounded-3xl p-4 shadow-sm",
+        e.leaving ? "animate-[flui-slide-down_160ms_ease-in_forwards]" : "animate-[flui-slide-up_160ms_ease-out]",
+        a.wrapper
       ),
       children: [
-        /* @__PURE__ */ d("div", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ t("div", { className: i("text-sm font-semibold", P[e.variant ?? "info"].title), children: e.title }),
-          e.description && /* @__PURE__ */ t("div", { className: i("mt-0.5 text-sm", P[e.variant ?? "info"].description), children: e.description })
+        e.icon && /* @__PURE__ */ t("span", { className: i("mt-0.5 shrink-0", a.title), children: e.icon }),
+        /* @__PURE__ */ u("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ t("div", { className: i("text-sm font-semibold", a.title), children: e.title }),
+          e.description && /* @__PURE__ */ t("div", { className: i("mt-0.5 text-sm", a.description), children: e.description })
         ] }),
-        /* @__PURE__ */ t(
-          "button",
-          {
-            type: "button",
-            onClick: r,
-            "aria-label": "Fechar",
-            className: i("shrink-0 cursor-pointer rounded-sm px-1 transition-colors opacity-60 hover:opacity-100", P[e.variant ?? "info"].title),
-            children: "✕"
-          }
-        )
+        /* @__PURE__ */ u("div", { className: "flex shrink-0 items-center gap-1", children: [
+          e.action && /* @__PURE__ */ t(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                e.action.onClick(), r();
+              },
+              className: i("cursor-pointer rounded-sm px-1.5 py-0.5 text-xs font-semibold transition-colors", a.action),
+              children: e.action.label
+            }
+          ),
+          /* @__PURE__ */ t(
+            "button",
+            {
+              type: "button",
+              onClick: r,
+              "aria-label": "Fechar",
+              className: i("cursor-pointer rounded-sm px-1 transition-colors opacity-60 hover:opacity-100", a.title),
+              children: "✕"
+            }
+          )
+        ] })
       ]
     }
   );
 }
-function Br() {
-  const e = w(ae);
+function Je() {
+  const e = y(ae);
   if (!e) throw new Error("useToast precisa estar dentro de <ToastProvider>");
   return e;
 }
-const $e = V(
+const Qe = V(
   "flex w-full bg-bg-muted text-fg placeholder:text-fg-muted border border-transparent transition-colors outline-none resize-y rounded-lg min-h-28 px-3 py-3 text-sm focus-visible:border-border-strong disabled:opacity-50 disabled:pointer-events-none",
   {
     variants: {
@@ -1221,27 +1239,71 @@ const $e = V(
     },
     defaultVariants: { invalid: !1 }
   }
-), Je = g(
+), Xe = p(
   ({ className: e, invalid: r, ...a }, n) => /* @__PURE__ */ t(
     "textarea",
     {
       ref: n,
-      className: i($e({ invalid: r }), e),
+      className: i(Qe({ invalid: r }), e),
       ...a
     }
   )
 );
-Je.displayName = "Textarea";
-function Qe({
+Xe.displayName = "Textarea";
+const Ze = p(
+  ({ code: e, language: r, className: a, ...n }, o) => {
+    const { toast: l } = Je();
+    function s() {
+      navigator.clipboard.writeText(e).then(() => {
+        l({ title: "Copiado!", variant: "success", duration: 2e3 });
+      });
+    }
+    return /* @__PURE__ */ u(
+      "div",
+      {
+        ref: o,
+        className: i("overflow-hidden rounded-lg bg-bg-subtle", a),
+        ...n,
+        children: [
+          /* @__PURE__ */ u("div", { className: "flex items-center justify-between bg-bg-muted px-4 py-2", children: [
+            r ? /* @__PURE__ */ t("span", { className: "font-mono text-xs text-fg-muted", children: r }) : /* @__PURE__ */ t("span", {}),
+            /* @__PURE__ */ u(
+              "button",
+              {
+                type: "button",
+                onClick: s,
+                "aria-label": "Copiar código",
+                className: "inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-xs text-fg-muted transition-colors hover:bg-bg hover:text-fg",
+                children: [
+                  /* @__PURE__ */ t(er, {}),
+                  "Copiar"
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ t("pre", { className: "overflow-x-auto p-4 text-sm leading-relaxed", children: /* @__PURE__ */ t("code", { className: "font-mono text-fg", children: e }) })
+        ]
+      }
+    );
+  }
+);
+Ze.displayName = "CodeBlock";
+function er() {
+  return /* @__PURE__ */ u("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": !0, children: [
+    /* @__PURE__ */ t("rect", { x: "6", y: "6", width: "8", height: "8", rx: "1.5" }),
+    /* @__PURE__ */ t("path", { d: "M4 10H3a1.5 1.5 0 0 1-1.5-1.5v-6A1.5 1.5 0 0 1 3 1h6A1.5 1.5 0 0 1 10.5 2.5V4" })
+  ] });
+}
+function rr({
   user: e,
   nav: r,
   active: a,
   onSelect: n,
   footerAction: o
 }) {
-  const s = (l) => "flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-left text-sm transition-colors " + (l ? "bg-bg-muted font-medium text-fg" : "text-fg hover:bg-bg-muted");
-  return /* @__PURE__ */ d("aside", { className: "flex w-52 shrink-0 flex-col gap-5 overflow-y-auto border-r border-border-default py-5 pl-4 pr-2", children: [
-    /* @__PURE__ */ d("div", { className: "flex items-center gap-2.5 px-1", children: [
+  const l = (s) => "flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-left text-sm transition-colors " + (s ? "bg-bg-muted font-medium text-fg" : "text-fg hover:bg-bg-muted");
+  return /* @__PURE__ */ u("aside", { className: "flex w-52 shrink-0 flex-col gap-5 overflow-y-auto border-r border-border-default py-5 pl-4 pr-2", children: [
+    /* @__PURE__ */ u("div", { className: "flex items-center gap-2.5 px-1", children: [
       e.avatar ? /* @__PURE__ */ t(
         "img",
         {
@@ -1250,7 +1312,7 @@ function Qe({
           className: "h-8 w-8 shrink-0 rounded-full object-cover"
         }
       ) : /* @__PURE__ */ t("span", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary-subtle text-xs font-semibold text-primary", children: e.initials ?? e.name.slice(0, 2).toUpperCase() }),
-      /* @__PURE__ */ d("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ u("div", { className: "min-w-0", children: [
         /* @__PURE__ */ t("p", { className: "truncate text-sm font-medium text-fg", children: e.name }),
         e.subtitle && /* @__PURE__ */ t("p", { className: "truncate text-xs text-fg-muted", children: e.subtitle })
       ] }),
@@ -1269,173 +1331,182 @@ function Qe({
         }
       )
     ] }),
-    r.map(({ group: l, items: c }) => /* @__PURE__ */ d("div", { children: [
-      /* @__PURE__ */ t("p", { className: "mb-1 px-1 text-xs font-semibold text-fg-muted", children: l }),
-      /* @__PURE__ */ t("ul", { className: "flex flex-col gap-0.5", children: c.map((u) => /* @__PURE__ */ t("li", { children: /* @__PURE__ */ d(
+    r.map(({ group: s, items: c }) => /* @__PURE__ */ u("div", { children: [
+      /* @__PURE__ */ t("p", { className: "mb-1 px-1 text-xs font-semibold text-fg-muted", children: s }),
+      /* @__PURE__ */ t("ul", { className: "flex flex-col gap-0.5", children: c.map((d) => /* @__PURE__ */ t("li", { children: /* @__PURE__ */ u(
         "button",
         {
           type: "button",
-          onClick: () => n(u.id),
-          className: s(u.id === a),
+          onClick: () => n(d.id),
+          className: l(d.id === a),
           children: [
-            u.icon && /* @__PURE__ */ t("span", { className: "shrink-0 text-fg [&>svg]:h-[15px] [&>svg]:w-[15px]", children: u.icon }),
-            u.label
+            d.icon && /* @__PURE__ */ t("span", { className: "shrink-0 text-fg [&>svg]:h-[15px] [&>svg]:w-[15px]", children: d.icon }),
+            d.label
           ]
         }
-      ) }, u.id)) })
-    ] }, l)),
+      ) }, d.id)) })
+    ] }, s)),
     o && /* @__PURE__ */ t("div", { className: "mt-auto", children: o })
   ] });
 }
-function _r({
+function Wr({
   title: e,
   description: r,
   checked: a,
   onCheckedChange: n
 }) {
-  return /* @__PURE__ */ d("div", { className: "flex items-center justify-between gap-6 px-4 py-4", children: [
-    /* @__PURE__ */ d("div", { children: [
+  return /* @__PURE__ */ u("div", { className: "flex items-center justify-between gap-6 px-4 py-4", children: [
+    /* @__PURE__ */ u("div", { children: [
       /* @__PURE__ */ t("p", { className: "text-sm font-medium text-fg", children: e }),
       r && /* @__PURE__ */ t("p", { className: "mt-0.5 text-sm text-fg-muted", children: r })
     ] }),
     /* @__PURE__ */ t(G, { checked: a, onCheckedChange: n, className: "shrink-0" })
   ] });
 }
-function Xe({ children: e }) {
+function tr({ children: e }) {
   return /* @__PURE__ */ t("div", { className: "divide-y divide-border-default rounded-xl bg-bg", children: e });
 }
-function Rr({
+function Hr({
   title: e,
   children: r
 }) {
-  return /* @__PURE__ */ d("div", { className: "flex flex-col gap-3", children: [
+  return /* @__PURE__ */ u("div", { className: "flex flex-col gap-3", children: [
     /* @__PURE__ */ t("h3", { className: "text-base font-semibold text-fg", children: e }),
-    /* @__PURE__ */ t(Xe, { children: r })
+    /* @__PURE__ */ t(tr, { children: r })
   ] });
 }
-function Fr({
+function Kr({
   icon: e,
   title: r,
   description: a,
   connected: n = !1,
   onConnect: o,
-  onDisconnect: s
+  onDisconnect: l
 }) {
-  return /* @__PURE__ */ d("div", { className: "flex items-center gap-4 rounded-xl bg-bg px-4 py-4", children: [
+  return /* @__PURE__ */ u("div", { className: "flex items-center gap-4 rounded-xl bg-bg px-4 py-4", children: [
     /* @__PURE__ */ t("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-bg-muted", children: /* @__PURE__ */ t("span", { className: "[&>svg]:h-4 [&>svg]:w-4", children: e }) }),
-    /* @__PURE__ */ d("div", { className: "flex-1 min-w-0", children: [
+    /* @__PURE__ */ u("div", { className: "flex-1 min-w-0", children: [
       /* @__PURE__ */ t("p", { className: "text-sm font-medium text-fg", children: r }),
       a && /* @__PURE__ */ t("p", { className: "mt-0.5 text-sm text-fg-muted", children: a })
     ] }),
-    n ? /* @__PURE__ */ t(L, { variant: "danger-ghost", size: "sm", onClick: s, children: "Desconectar" }) : /* @__PURE__ */ t(L, { variant: "secondary", size: "sm", onClick: o, children: "Conectar" })
+    n ? /* @__PURE__ */ t(S, { variant: "danger-ghost", size: "sm", onClick: l, children: "Desconectar" }) : /* @__PURE__ */ t(S, { variant: "secondary", size: "sm", onClick: o, children: "Conectar" })
   ] });
 }
-function Wr({
+function qr({
   open: e,
   onOpenChange: r,
   user: a,
   nav: n,
   defaultSection: o,
-  activeSection: s,
-  onSectionChange: l,
+  activeSection: l,
+  onSectionChange: s,
   sectionTitles: c = {},
-  sectionSubtitles: u = {},
-  renderSection: m,
-  footerAction: f
+  sectionSubtitles: d = {},
+  renderSection: f,
+  footerAction: g
 }) {
-  var _, R;
-  const p = ((R = (_ = n[0]) == null ? void 0 : _.items[0]) == null ? void 0 : R.id) ?? "", [h, v] = b(
-    o ?? p
-  ), y = s ?? h, x = (z) => {
-    v(z), l == null || l(z);
-  }, k = n.flatMap((z) => z.items).find((z) => z.id === y), E = c[y] ?? (k == null ? void 0 : k.label) ?? y, B = u[y];
-  return /* @__PURE__ */ t(Ge, { open: e, onOpenChange: r, children: /* @__PURE__ */ t(Oe, { className: "max-w-[1300px] overflow-hidden p-0", children: /* @__PURE__ */ d("div", { className: "flex h-[820px]", children: [
+  var T, E;
+  const b = ((E = (T = n[0]) == null ? void 0 : T.items[0]) == null ? void 0 : E.id) ?? "", [v, h] = x(
+    o ?? b
+  ), w = l ?? v, P = (k) => {
+    h(k), s == null || s(k);
+  }, M = n.flatMap((k) => k.items).find((k) => k.id === w), D = c[w] ?? (M == null ? void 0 : M.label) ?? w, m = d[w];
+  return /* @__PURE__ */ t(Ge, { open: e, onOpenChange: r, children: /* @__PURE__ */ t(Ue, { className: "max-w-[1300px] overflow-hidden p-0", children: /* @__PURE__ */ u("div", { className: "flex h-[820px]", children: [
     /* @__PURE__ */ t(
-      Qe,
+      rr,
       {
         user: a,
         nav: n,
-        active: y,
-        onSelect: x,
-        footerAction: f
+        active: w,
+        onSelect: P,
+        footerAction: g
       }
     ),
-    /* @__PURE__ */ d("div", { className: "flex flex-1 flex-col overflow-hidden bg-bg-subtle", children: [
-      /* @__PURE__ */ d("div", { className: "relative px-[200px] pb-8 pt-8", children: [
-        /* @__PURE__ */ t("h2", { className: "font-display text-2xl font-semibold tracking-tight text-fg", children: E }),
-        B && /* @__PURE__ */ t("p", { className: "mt-0.5 text-sm text-fg-muted", children: B }),
+    /* @__PURE__ */ u("div", { className: "flex flex-1 flex-col overflow-hidden bg-bg-subtle", children: [
+      /* @__PURE__ */ u("div", { className: "relative px-[200px] pb-8 pt-8", children: [
+        /* @__PURE__ */ t("h2", { className: "font-display text-2xl font-semibold tracking-tight text-fg", children: D }),
+        m && /* @__PURE__ */ t("p", { className: "mt-0.5 text-sm text-fg-muted", children: m }),
         /* @__PURE__ */ t("div", { className: "pointer-events-none absolute inset-x-0 -bottom-6 h-6 bg-gradient-to-b from-bg-subtle to-transparent" })
       ] }),
-      /* @__PURE__ */ t("div", { className: "flex-1 overflow-y-auto px-[200px] pb-8 pt-6", children: (m == null ? void 0 : m(y)) ?? /* @__PURE__ */ d("p", { className: "text-sm text-fg-muted", children: [
+      /* @__PURE__ */ t("div", { className: "flex-1 overflow-y-auto px-[200px] pb-8 pt-6", children: (f == null ? void 0 : f(w)) ?? /* @__PURE__ */ u("p", { className: "text-sm text-fg-muted", children: [
         "Conteúdo de ",
-        /* @__PURE__ */ t("strong", { children: E }),
+        /* @__PURE__ */ t("strong", { children: D }),
         "."
       ] }) })
     ] })
   ] }) }) });
 }
-const ne = C(null), F = "flui-color-mode", W = "flui-brand";
-function Ze() {
+const ne = C(null), F = "flui-color-mode", W = "flui-brand", H = "flui-radius";
+function ar() {
   var e;
   return typeof window < "u" && ((e = window.matchMedia) == null ? void 0 : e.call(window, "(prefers-color-scheme: dark)").matches);
 }
-function H(e, r) {
+function I(e, r) {
   try {
     return localStorage.getItem(e) ?? r;
   } catch {
     return r;
   }
 }
-function Hr({
+function Gr({
   children: e,
   defaultMode: r = "system",
   defaultBrand: a = "default",
-  target: n
+  defaultRadius: n = "default",
+  target: o
 }) {
-  const [o, s] = b(
-    () => H(F, r)
-  ), [l, c] = b(
-    () => H(W, a)
-  ), [u, m] = b(Ze);
+  const [l, s] = x(
+    () => I(F, r)
+  ), [c, d] = x(
+    () => I(W, a)
+  ), [f, g] = x(
+    () => I(H, n)
+  ), [b, v] = x(ar);
   N(() => {
-    var k;
-    const x = (k = window.matchMedia) == null ? void 0 : k.call(window, "(prefers-color-scheme: dark)");
-    if (!x) return;
-    const D = (E) => m(E.matches);
-    return x.addEventListener("change", D), () => x.removeEventListener("change", D);
+    var E;
+    const m = (E = window.matchMedia) == null ? void 0 : E.call(window, "(prefers-color-scheme: dark)");
+    if (!m) return;
+    const T = (k) => v(k.matches);
+    return m.addEventListener("change", T), () => m.removeEventListener("change", T);
   }, []);
-  const f = o === "system" ? u ? "dark" : "light" : o;
+  const h = l === "system" ? b ? "dark" : "light" : l;
   N(() => {
-    const x = (n == null ? void 0 : n()) ?? document.documentElement;
-    x.setAttribute("data-theme", f), l && l !== "default" ? x.setAttribute("data-brand", l) : x.removeAttribute("data-brand");
-  }, [f, l, n]);
-  const p = M((x) => {
-    s(x);
+    const m = (o == null ? void 0 : o()) ?? document.documentElement;
+    m.setAttribute("data-theme", h), c && c !== "default" ? m.setAttribute("data-brand", c) : m.removeAttribute("data-brand"), f && f !== "default" ? m.setAttribute("data-radius", f) : m.removeAttribute("data-radius");
+  }, [h, c, f, o]);
+  const w = z((m) => {
+    s(m);
+    try {
+      localStorage.setItem(F, m);
+    } catch {
+    }
+  }, []), P = z((m) => {
+    d(m);
     try {
-      localStorage.setItem(F, x);
+      localStorage.setItem(W, m);
     } catch {
     }
-  }, []), h = M((x) => {
-    c(x);
+  }, []), A = z((m) => {
+    g(m);
     try {
-      localStorage.setItem(W, x);
+      localStorage.setItem(H, m);
     } catch {
     }
-  }, []), v = M(() => {
-    p(f === "dark" ? "light" : "dark");
-  }, [f, p]), y = se(
-    () => ({ mode: o, resolvedMode: f, brand: l, setMode: p, setBrand: h, toggleMode: v }),
-    [o, f, l, p, h, v]
+  }, []), M = z(() => {
+    w(h === "dark" ? "light" : "dark");
+  }, [h, w]), D = se(
+    () => ({ mode: l, resolvedMode: h, brand: c, radius: f, setMode: w, setBrand: P, setRadius: A, toggleMode: M }),
+    [l, h, c, f, w, P, A, M]
   );
-  return /* @__PURE__ */ t(ne.Provider, { value: y, children: e });
+  return /* @__PURE__ */ t(ne.Provider, { value: D, children: e });
 }
-function Kr() {
-  const e = w(ne);
+function Ur() {
+  const e = y(ne);
   if (!e)
     throw new Error("useTheme precisa estar dentro de <ThemeProvider>");
   return e;
 }
-const qr = [
+const Or = [
   {
     name: "flui-color-accent-scale-50",
     cssVar: "--flui-color-accent-scale-50",
@@ -1839,6 +1910,32 @@ const qr = [
     isColor: !0,
     reference: null
   },
+  {
+    name: "flui-color-neutral-950",
+    cssVar: "--flui-color-neutral-950",
+    path: [
+      "color",
+      "neutral",
+      "950"
+    ],
+    group: "color",
+    value: "#0e1015",
+    isColor: !0,
+    reference: null
+  },
+  {
+    name: "flui-color-neutral-1000",
+    cssVar: "--flui-color-neutral-1000",
+    path: [
+      "color",
+      "neutral",
+      "1000"
+    ],
+    group: "color",
+    value: "#050608",
+    isColor: !0,
+    reference: null
+  },
   {
     name: "flui-color-success-500",
     cssVar: "--flui-color-success-500",
@@ -2666,73 +2763,74 @@ const qr = [
   }
 ];
 export {
-  hr as Accordion,
-  wr as AccordionContent,
-  vr as AccordionItem,
-  xr as AccordionTrigger,
+  yr as Accordion,
+  Vr as AccordionContent,
+  Nr as AccordionItem,
+  Cr as AccordionTrigger,
   He as Alert,
-  Pe as Avatar,
+  Le as Avatar,
   Y as Badge,
   Se as Breadcrumb,
-  fr as BreadcrumbItem,
-  Ae as BreadcrumbSeparator,
-  L as Button,
+  hr as BreadcrumbItem,
+  je as BreadcrumbSeparator,
+  S as Button,
   pe as Card,
-  ve as CardContent,
-  he as CardDescription,
+  xe as CardContent,
+  be as CardDescription,
   ge as CardHeader,
-  be as CardTitle,
+  he as CardTitle,
   ye as Checkbox,
+  Ze as CodeBlock,
   Ie as Divider,
-  Pr as Drawer,
-  Ir as DrawerBody,
-  Dr as DrawerContent,
-  Sr as DrawerFooter,
-  Lr as DrawerHeader,
-  jr as DrawerTitle,
-  sr as Dropdown,
-  cr as DropdownContent,
-  ur as DropdownItem,
-  dr as DropdownSeparator,
-  ir as DropdownTrigger,
+  Ir as Drawer,
+  _r as DrawerBody,
+  Sr as DrawerContent,
+  Rr as DrawerFooter,
+  jr as DrawerHeader,
+  Br as DrawerTitle,
+  dr as Dropdown,
+  mr as DropdownContent,
+  pr as DropdownItem,
+  gr as DropdownSeparator,
+  fr as DropdownTrigger,
   me as Input,
-  Fr as IntegrationRow,
+  Kr as IntegrationRow,
   Ge as Modal,
-  Tr as ModalBody,
-  Oe as ModalContent,
-  Mr as ModalDescription,
-  Er as ModalFooter,
-  kr as ModalHeader,
-  zr as ModalTitle,
-  Nr as Popover,
-  Vr as PopoverContent,
-  Cr as PopoverTrigger,
-  Wr as ProfileSettingsModal,
-  je as Progress,
+  Dr as ModalBody,
+  Ue as ModalContent,
+  Pr as ModalDescription,
+  Ar as ModalFooter,
+  Er as ModalHeader,
+  Lr as ModalTitle,
+  zr as Popover,
+  Tr as PopoverContent,
+  Mr as PopoverTrigger,
+  qr as ProfileSettingsModal,
+  Ae as Progress,
   Ne as Radio,
-  lr as RadioGroup,
+  ur as RadioGroup,
   Ve as Select,
-  _r as SettingRow,
-  Xe as SettingsCard,
-  Rr as SettingsGroup,
-  Le as Spinner,
+  Wr as SettingRow,
+  tr as SettingsCard,
+  Hr as SettingsGroup,
+  De as Spinner,
   _e as StatCard,
   G as Switch,
-  mr as Tabs,
-  br as TabsContent,
-  pr as TabsList,
-  gr as TabsTrigger,
-  Je as Textarea,
-  Hr as ThemeProvider,
-  Ar as ToastProvider,
-  yr as Tooltip,
+  br as Tabs,
+  wr as TabsContent,
+  xr as TabsList,
+  vr as TabsTrigger,
+  Xe as Textarea,
+  Gr as ThemeProvider,
+  Fr as ToastProvider,
+  kr as Tooltip,
   ke as badgeVariants,
   de as buttonVariants,
   i as cn,
   fe as inputVariants,
-  $e as textareaVariants,
-  qr as tokens,
-  Kr as useTheme,
-  Br as useToast
+  Qe as textareaVariants,
+  Or as tokens,
+  Ur as useTheme,
+  Je as useToast
 };
 //# sourceMappingURL=index.js.map