@fluityy/designsystem 0.2.5 → 0.2.7

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 v, 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";
@@ -115,7 +115,7 @@ const pe = p(
     {
       ref: a,
       className: i(
-        "bg-bg border border-border-default rounded-lg shadow-sm",
+        "bg-bg-subtle border border-border-default rounded-lg shadow-sm",
         e
       ),
       ...r
@@ -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,
@@ -269,7 +269,7 @@ function ur({
     }
   );
 }
-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,7 +360,7 @@ 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>");
@@ -368,7 +368,7 @@ function j() {
 }
 function dr({ children: e }) {
   const [r, a] = v(!1), n = L(null);
-  return N(() => {
+  return C(() => {
     if (!r) return;
     const o = (s) => {
       n.current && !n.current.contains(s.target) && a(!1);
@@ -663,7 +663,7 @@ function je() {
 }
 function Be(e, r = 1e3) {
   const [a, n] = v(0);
-  return N(() => {
+  return C(() => {
     n(0);
     const o = performance.now(), l = (s) => {
       const c = Math.min((s - o) / r, 1), d = 1 - (1 - c) ** 4;
@@ -680,7 +680,7 @@ const _e = p(
       {
         ref: f,
         className: i(
-          "flex flex-col gap-2 rounded-xl bg-bg-muted dark:bg-neutral-900 p-8 shadow-sm",
+          "flex flex-col gap-2 rounded-xl bg-bg-subtle p-8 shadow-sm",
           e
         ),
         ...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>");
@@ -801,7 +801,7 @@ function br({
 }
 function vr({ className: e, children: r, ...a }) {
   const { value: n } = B(), o = L(null), [l, s] = v({ left: 0, width: 0, ready: !1 });
-  return N(() => {
+  return C(() => {
     const c = o.current;
     if (!c) return;
     const d = c.querySelector('[aria-selected="true"]');
@@ -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>");
@@ -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
@@ -953,7 +953,7 @@ 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>");
@@ -961,7 +961,7 @@ function Z() {
 }
 function zr({ children: e }) {
   const [r, a] = v(!1), n = L(null);
-  return N(() => {
+  return C(() => {
     if (!r) return;
     const o = (s) => {
       n.current && !n.current.contains(s.target) && a(!1);
@@ -1001,10 +1001,10 @@ function Tr({
 }
 function R({ children: e }) {
   const [r, a] = v(!1);
-  return N(() => a(!0), []), r ? ue(e, document.body) : null;
+  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,7 +1154,7 @@ 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" },
@@ -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);
@@ -1301,8 +1301,8 @@ function rr({
   onSelect: n,
   footerAction: o
 }) {
-  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: [
+  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-subtle font-medium text-fg" : "text-fg hover:bg-bg-subtle");
+  return /* @__PURE__ */ u("aside", { className: "flex w-52 shrink-0 flex-col gap-5 overflow-y-auto border-r border-border-default bg-bg 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",
@@ -1364,7 +1364,7 @@ function Wr({
   ] });
 }
 function tr({ children: e }) {
-  return /* @__PURE__ */ t("div", { className: "divide-y divide-border-default rounded-xl bg-bg", children: e });
+  return /* @__PURE__ */ t("div", { className: "divide-y divide-border-default rounded-xl bg-bg-elevated", children: e });
 }
 function Hr({
   title: e,
@@ -1383,7 +1383,7 @@ function Kr({
   onConnect: o,
   onDisconnect: l
 }) {
-  return /* @__PURE__ */ u("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-elevated 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__ */ u("div", { className: "flex-1 min-w-0", children: [
       /* @__PURE__ */ t("p", { className: "text-sm font-medium text-fg", children: r }),
@@ -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);
@@ -1462,7 +1462,7 @@ function Gr({
   ), [f, g] = v(
     () => I(H, n)
   ), [b, x] = v(ar);
-  N(() => {
+  C(() => {
     var E;
     const m = (E = window.matchMedia) == null ? void 0 : E.call(window, "(prefers-color-scheme: dark)");
     if (!m) return;
@@ -1470,7 +1470,7 @@ function Gr({
     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]);
@@ -1806,6 +1806,19 @@ const Or = [
     isColor: !0,
     reference: null
   },
+  {
+    name: "flui-color-neutral-150",
+    cssVar: "--flui-color-neutral-150",
+    path: [
+      "color",
+      "neutral",
+      "150"
+    ],
+    group: "color",
+    value: "#eceef2",
+    isColor: !0,
+    reference: null
+  },
   {
     name: "flui-color-neutral-200",
     cssVar: "--flui-color-neutral-200",
@@ -1923,6 +1936,19 @@ const Or = [
     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",
@@ -2075,9 +2101,22 @@ const Or = [
       "muted"
     ],
     group: "semantic",
-    value: "#f3f4f7",
+    value: "#eceef2",
     isColor: !0,
-    reference: "--flui-color-neutral-100"
+    reference: "--flui-color-neutral-150"
+  },
+  {
+    name: "flui-semantic-bg-elevated",
+    cssVar: "--flui-semantic-bg-elevated",
+    path: [
+      "semantic",
+      "bg",
+      "elevated"
+    ],
+    group: "semantic",
+    value: "#ffffff",
+    isColor: !0,
+    reference: "--flui-color-neutral-0"
   },
   {
     name: "flui-semantic-fg-default",
@@ -2127,9 +2166,9 @@ const Or = [
       "default"
     ],
     group: "semantic",
-    value: "#dde1e9",
+    value: "#eceef2",
     isColor: !0,
-    reference: "--flui-color-neutral-200"
+    reference: "--flui-color-neutral-150"
   },
   {
     name: "flui-semantic-border-strong",
@@ -2791,8 +2830,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,
@@ -2833,7 +2872,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,