@fluityy/designsystem 0.2.4 → 0.2.6

package/dist/index.js

@@ -1,5 +1,5 @@
 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 { forwardRef as p, useState as v, useRef as L, useEffect as C, createContext as N, 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";
@@ -62,12 +62,12 @@ const fe = V(
   }
 ), 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: [
+    const [d, f] = v(!1), g = l === "password", b = g ? d ? "text" : "password" : l, x = 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: v,
+          id: x,
           type: b,
           className: i(
             fe({ size: r, invalid: a }),
@@ -103,7 +103,7 @@ const fe = 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 }),
+      /* @__PURE__ */ t("label", { htmlFor: x, className: "text-xs font-medium text-fg", children: n }),
       h
     ] }) : h;
   }
@@ -131,11 +131,11 @@ const he = p(({ className: e, ...r }, a) => /* @__PURE__ */ t("h3", { ref: a, cl
 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(
+const ve = p(
   ({ className: e, ...r }, a) => /* @__PURE__ */ t("div", { ref: a, className: i("p-6 pt-0", e), ...r })
 );
-xe.displayName = "CardContent";
-const ve = V(
+ve.displayName = "CardContent";
+const xe = 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: {
@@ -159,7 +159,7 @@ const ve = V(
   }
 ), 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;
+    const d = a !== void 0, [f, g] = v(n ?? !1), b = d ? a : f;
     return /* @__PURE__ */ t(
       "button",
       {
@@ -172,7 +172,7 @@ const ve = V(
           const h = !b;
           d || g(h), o == null || o(h);
         },
-        className: i(ve({ size: r, checked: b }), e),
+        className: i(xe({ size: r, checked: b }), e),
         ...s,
         children: /* @__PURE__ */ t("span", { className: we({ size: r, checked: b }) })
       }
@@ -183,7 +183,7 @@ G.displayName = "Switch";
 const ye = p(
   ({ className: e, label: r, indeterminate: a = !1, disabled: n, id: o, ...l }, s) => {
     const c = L(null);
-    N(() => {
+    C(() => {
       c.current && (c.current.indeterminate = a);
     }, [a]);
     const d = (f) => {
@@ -248,7 +248,7 @@ const ye = p(
   }
 );
 ye.displayName = "Checkbox";
-const U = C(null);
+const U = N(null);
 function ur({
   value: e,
   defaultValue: r,
@@ -258,18 +258,18 @@ function ur({
   children: l,
   ...s
 }) {
-  const c = K(), d = e !== void 0, [f, g] = x(r), b = d ? e : f, v = (h) => {
+  const c = K(), d = e !== void 0, [f, g] = v(r), b = d ? e : f, x = (h) => {
     d || g(h), a == null || a(h);
   };
   return /* @__PURE__ */ t(
     U.Provider,
     {
-      value: { name: n ?? c, value: b, onChange: v },
+      value: { name: n ?? c, value: b, onChange: x },
       children: /* @__PURE__ */ t("div", { role: "radiogroup", className: i("flex flex-col gap-2", o), ...s, children: l })
     }
   );
 }
-const Ne = p(
+const Ce = 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>");
@@ -315,8 +315,8 @@ const Ne = p(
     );
   }
 );
-Ne.displayName = "Radio";
-const Ce = V(
+Ce.displayName = "Radio";
+const Ne = V(
   "w-full appearance-none bg-bg-muted text-fg border border-transparent transition-colors outline-none focus-visible:border-border-strong disabled:opacity-50 disabled:pointer-events-none rounded-lg pr-9",
   {
     variants: {
@@ -338,7 +338,7 @@ const Ce = V(
       "select",
       {
         ref: l,
-        className: i(Ce({ size: r, invalid: a }), e),
+        className: i(Ne({ size: r, invalid: a }), e),
         ...o,
         children: n
       }
@@ -360,15 +360,15 @@ const Ce = V(
   ] })
 );
 Ve.displayName = "Select";
-const O = C(null);
+const O = N(null);
 function j() {
   const e = y(O);
   if (!e) throw new Error("Componentes de Dropdown precisam estar dentro de <Dropdown>");
   return e;
 }
 function dr({ children: e }) {
-  const [r, a] = x(!1), n = L(null);
-  return N(() => {
+  const [r, a] = v(!1), n = L(null);
+  return C(() => {
     if (!r) return;
     const o = (s) => {
       n.current && !n.current.contains(s.target) && a(!1);
@@ -500,7 +500,7 @@ function Ee(e) {
 }
 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;
+    const [d, f] = v(!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",
@@ -662,8 +662,8 @@ function je() {
   return /* @__PURE__ */ t("li", { "aria-hidden": !0, className: "text-fg-muted", children: "/" });
 }
 function Be(e, r = 1e3) {
-  const [a, n] = x(0);
-  return N(() => {
+  const [a, n] = v(0);
+  return C(() => {
     n(0);
     const o = performance.now(), l = (s) => {
       const c = Math.min((s - o) / r, 1), d = 1 - (1 - c) ** 4;
@@ -674,7 +674,7 @@ function Be(e, r = 1e3) {
 }
 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;
+    const g = Be(n ?? 0), b = typeof l == "number", x = b && l >= 0, h = n !== void 0 ? o ? o(g) : Math.round(g).toLocaleString("pt-BR") : a;
     return /* @__PURE__ */ u(
       "div",
       {
@@ -690,8 +690,8 @@ const _e = p(
             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: h }),
-          b && /* @__PURE__ */ u(Y, { variant: v ? "success" : "danger", size: "sm", className: "self-start", children: [
-            v ? "▲" : "▼",
+          b && /* @__PURE__ */ u(Y, { variant: x ? "success" : "danger", size: "sm", className: "self-start", children: [
+            x ? "▲" : "▼",
             " ",
             Math.abs(l),
             "%"
@@ -770,7 +770,7 @@ function Ke({
   defaultValue: r,
   onChange: a
 }) {
-  const n = e !== void 0, [o, l] = x(r), s = n ? e : o, c = z(
+  const n = e !== void 0, [o, l] = v(r), s = n ? e : o, c = z(
     (d) => {
       n || l(d), a == null || a(d);
     },
@@ -778,7 +778,7 @@ function Ke({
   );
   return [s, c];
 }
-const $ = C(null);
+const $ = N(null);
 function B() {
   const e = y($);
   if (!e) throw new Error("Componentes de Tabs precisam estar dentro de <Tabs>");
@@ -799,9 +799,9 @@ function br({
   });
   return /* @__PURE__ */ t($.Provider, { value: { value: s, setValue: c }, children: /* @__PURE__ */ t("div", { className: n, ...l, children: o }) });
 }
-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(() => {
+function vr({ className: e, children: r, ...a }) {
+  const { value: n } = B(), o = L(null), [l, s] = v({ left: 0, width: 0, ready: !1 });
+  return C(() => {
     const c = o.current;
     if (!c) return;
     const d = c.querySelector('[aria-selected="true"]');
@@ -827,7 +827,7 @@ function xr({ className: e, children: r, ...a }) {
     }
   );
 }
-function vr({ value: e, className: r, ...a }) {
+function xr({ value: e, className: r, ...a }) {
   const n = B(), o = n.value === e;
   return /* @__PURE__ */ t(
     "button",
@@ -856,7 +856,7 @@ function wr({ value: e, className: r, ...a }) {
     }
   );
 }
-const J = C(null), _ = C("");
+const J = N(null), _ = N("");
 function Q() {
   const e = y(J);
   if (!e) throw new Error("Componentes de Accordion precisam estar dentro de <Accordion>");
@@ -869,9 +869,9 @@ function yr({
   children: n,
   ...o
 }) {
-  const l = r ? Array.isArray(r) ? r : [r] : [], [s, c] = x(l), d = (f) => c((g) => {
+  const l = r ? Array.isArray(r) ? r : [r] : [], [s, c] = v(l), d = (f) => c((g) => {
     const b = g.includes(f);
-    return e === "single" ? b ? [] : [f] : b ? g.filter((v) => v !== f) : [...g, f];
+    return e === "single" ? b ? [] : [f] : b ? g.filter((x) => x !== f) : [...g, f];
   });
   return /* @__PURE__ */ t(J.Provider, { value: { open: s, toggle: d }, children: /* @__PURE__ */ t(
     "div",
@@ -882,10 +882,10 @@ function yr({
     }
   ) });
 }
-function Nr({ value: e, children: r, ...a }) {
+function Cr({ value: e, children: r, ...a }) {
   return /* @__PURE__ */ t(_.Provider, { value: e, children: /* @__PURE__ */ t("div", { ...a, children: r }) });
 }
-function Cr({
+function Nr({
   className: e,
   children: r,
   ...a
@@ -924,7 +924,7 @@ const qe = {
   right: "left-full top-1/2 -translate-y-1/2 ml-2"
 };
 function kr({ content: e, side: r = "top", children: a, className: n }) {
-  const [o, l] = x(!1), s = K();
+  const [o, l] = v(!1), s = K();
   return /* @__PURE__ */ u(
     "span",
     {
@@ -953,15 +953,15 @@ function kr({ content: e, side: r = "top", children: a, className: n }) {
     }
   );
 }
-const X = C(null);
+const X = N(null);
 function Z() {
   const e = y(X);
   if (!e) throw new Error("Componentes de Popover precisam estar dentro de <Popover>");
   return e;
 }
 function zr({ children: e }) {
-  const [r, a] = x(!1), n = L(null);
-  return N(() => {
+  const [r, a] = v(!1), n = L(null);
+  return C(() => {
     if (!r) return;
     const o = (s) => {
       n.current && !n.current.contains(s.target) && a(!1);
@@ -1000,11 +1000,11 @@ function Tr({
   ) : null;
 }
 function R({ children: e }) {
-  const [r, a] = x(!1);
-  return N(() => a(!0), []), r ? ue(e, document.body) : null;
+  const [r, a] = v(!1);
+  return C(() => a(!0), []), r ? ue(e, document.body) : null;
 }
 function ee(e, r) {
-  N(() => {
+  C(() => {
     if (!e) return;
     const a = (o) => o.key === "Escape" && r(), n = document.body.style.overflow;
     return document.body.style.overflow = "hidden", document.addEventListener("keydown", a), () => {
@@ -1012,7 +1012,7 @@ function ee(e, r) {
     };
   }, [e, r]);
 }
-const re = C(null);
+const re = N(null);
 function Ge({ open: e, onOpenChange: r, children: a }) {
   const n = () => r == null ? void 0 : r(!1);
   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: [
@@ -1077,7 +1077,7 @@ function Dr({ 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), Oe = {
+const te = N(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",
@@ -1154,14 +1154,14 @@ function Rr({ className: e, ...r }) {
     }
   );
 }
-const ae = C(null), Ye = {
+const ae = N(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 Fr({ children: e }) {
-  const [r, a] = x([]), n = L(0), o = z((s) => {
+  const [r, a] = v([]), 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);
@@ -1175,7 +1175,7 @@ function Fr({ children: e }) {
   ] });
 }
 function $e({ item: e, onDismiss: r }) {
-  N(() => {
+  C(() => {
     if (!e.duration) return;
     const n = setTimeout(r, e.duration);
     return () => clearTimeout(n);
@@ -1406,9 +1406,9 @@ function qr({
   footerAction: g
 }) {
   var T, E;
-  const b = ((E = (T = n[0]) == null ? void 0 : T.items[0]) == null ? void 0 : E.id) ?? "", [v, h] = x(
+  const b = ((E = (T = n[0]) == null ? void 0 : T.items[0]) == null ? void 0 : E.id) ?? "", [x, h] = v(
     o ?? b
-  ), w = l ?? v, P = (k) => {
+  ), w = l ?? x, 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: [
@@ -1436,7 +1436,7 @@ function qr({
     ] })
   ] }) }) });
 }
-const ne = C(null), F = "flui-color-mode", W = "flui-brand", H = "flui-radius";
+const ne = N(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);
@@ -1455,22 +1455,22 @@ function Gr({
   defaultRadius: n = "default",
   target: o
 }) {
-  const [l, s] = x(
+  const [l, s] = v(
     () => I(F, r)
-  ), [c, d] = x(
+  ), [c, d] = v(
     () => I(W, a)
-  ), [f, g] = x(
+  ), [f, g] = v(
     () => I(H, n)
-  ), [b, v] = x(ar);
-  N(() => {
+  ), [b, x] = v(ar);
+  C(() => {
     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);
+    const T = (k) => x(k.matches);
     return m.addEventListener("change", T), () => m.removeEventListener("change", T);
   }, []);
   const h = l === "system" ? b ? "dark" : "light" : l;
-  N(() => {
+  C(() => {
     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]);
@@ -1884,6 +1884,19 @@ const Or = [
     isColor: !0,
     reference: null
   },
+  {
+    name: "flui-color-neutral-750",
+    cssVar: "--flui-color-neutral-750",
+    path: [
+      "color",
+      "neutral",
+      "750"
+    ],
+    group: "color",
+    value: "#2c303c",
+    isColor: !0,
+    reference: null
+  },
   {
     name: "flui-color-neutral-800",
     cssVar: "--flui-color-neutral-800",
@@ -1897,6 +1910,32 @@ const Or = [
     isColor: !0,
     reference: null
   },
+  {
+    name: "flui-color-neutral-850",
+    cssVar: "--flui-color-neutral-850",
+    path: [
+      "color",
+      "neutral",
+      "850"
+    ],
+    group: "color",
+    value: "#1a1d25",
+    isColor: !0,
+    reference: null
+  },
+  {
+    name: "flui-color-neutral-875",
+    cssVar: "--flui-color-neutral-875",
+    path: [
+      "color",
+      "neutral",
+      "875"
+    ],
+    group: "color",
+    value: "#161920",
+    isColor: !0,
+    reference: null
+  },
   {
     name: "flui-color-neutral-900",
     cssVar: "--flui-color-neutral-900",
@@ -2765,8 +2804,8 @@ const Or = [
 export {
   yr as Accordion,
   Vr as AccordionContent,
-  Nr as AccordionItem,
-  Cr as AccordionTrigger,
+  Cr as AccordionItem,
+  Nr as AccordionTrigger,
   He as Alert,
   Le as Avatar,
   Y as Badge,
@@ -2775,7 +2814,7 @@ export {
   je as BreadcrumbSeparator,
   S as Button,
   pe as Card,
-  xe as CardContent,
+  ve as CardContent,
   be as CardDescription,
   ge as CardHeader,
   he as CardTitle,
@@ -2807,7 +2846,7 @@ export {
   Mr as PopoverTrigger,
   qr as ProfileSettingsModal,
   Ae as Progress,
-  Ne as Radio,
+  Ce as Radio,
   ur as RadioGroup,
   Ve as Select,
   Wr as SettingRow,
@@ -2818,8 +2857,8 @@ export {
   G as Switch,
   br as Tabs,
   wr as TabsContent,
-  xr as TabsList,
-  vr as TabsTrigger,
+  vr as TabsList,
+  xr as TabsTrigger,
   Xe as Textarea,
   Gr as ThemeProvider,
   Fr as ToastProvider,