@snksergio/design-system 0.1.0 → 0.4.0

package/dist-lib/index.mjs

@@ -1,69 +1,14 @@
-import { e, A, f, B, g, C, h, D, i, j, k, l, m, n, o, q, r, d, s, t, a, u, F, b, v, c, K, M, P, w, S, x, y, z, E, G, H, I, T, J, L, N, O, Q, R, U, V, W, X, Y, Z, _, $, p, a0, a1, a2, a3 } from "./chunks/panel-Ds15whqp.mjs";
-import { D as Dialog, c as DialogTrigger, d as DialogContent, e as DialogTitle, f as DialogClose } from "./chunks/app-shell-CDy42aNI.mjs";
-import { A as A2, H as H2, g as g2, h as h2, i as i2, j as j2, k as k2, I as I2, l as l2, m as m2, n as n2, o as o2, p as p2, M as M2, q as q2, r as r2, s as s2, t as t2, u as u2, v as v2, S as S2, w as w2, x as x2, y as y2, z as z2, B as B2, C as C2, U as U2, E as E2, F as F2 } from "./chunks/app-shell-CDy42aNI.mjs";
-import { B as Button, c as cn, t as tv } from "./chunks/chip-group-D3D0i72q.mjs";
-import { C as C3, a as a4, b as b2, d as d2, e as e2, f as f2 } from "./chunks/chip-group-D3D0i72q.mjs";
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { MoreHorizontal, X as X2, Hash, User, AtSign, Phone, CheckCircle2, Tag, Users, DollarSign, Calendar, Type, ArrowUpDown, MoreVertical } from "lucide-react";
-import { P as P2, p as p3 } from "./chunks/page-header-mC1gGtOI.mjs";
-import { B as B3, T as T2, a as a5, b as b3, c as c2, d as d3, e as e3, f as f3, g as g3, u as u3 } from "./chunks/badge-B_2Zt52o.mjs";
-import { useState, useId, useCallback, useMemo } from "react";
-import { I as I3, i as i3 } from "./chunks/input-DF4XAWmr.mjs";
-function ToolbarMobileDialog({
-  children,
-  trigger,
-  title: title2 = "Filtros e ações",
-  open: openProp,
-  onOpenChange,
-  className,
-  contentClassName
-}) {
-  const [internalOpen, setInternalOpen] = useState(false);
-  const open = openProp ?? internalOpen;
-  const setOpen = onOpenChange ?? setInternalOpen;
-  const titleId = useId();
-  return /* @__PURE__ */ jsxs(Dialog, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx(DialogTrigger, { asChild: true, children: trigger ?? /* @__PURE__ */ jsx(
-      Button,
-      {
-        color: "secondary",
-        variant: "outline",
-        size: "icon-md",
-        "aria-label": "Mais opções",
-        className: cn("md:hidden", className),
-        children: /* @__PURE__ */ jsx(MoreHorizontal, {})
-      }
-    ) }),
-    /* @__PURE__ */ jsxs(
-      DialogContent,
-      {
-        hideClose: true,
-        "aria-labelledby": titleId,
-        className: cn(
-          // Visual alinhado com CommandDialog
-          "overflow-hidden p-0 gap-0 sm:max-w-[384px]",
-          "rounded-[12px] border border-border-default outline-float",
-          contentClassName
-        ),
-        children: [
-          /* @__PURE__ */ jsx(DialogTitle, { id: titleId, className: "sr-only", children: title2 }),
-          /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-gp-3xl p-pad-2xl max-h-[85vh] overflow-y-auto", children })
-        ]
-      }
-    )
-  ] });
-}
-const ToolbarMobileSheet = ToolbarMobileDialog;
-function ToolbarMobileSection({
-  title: title2,
-  children,
-  className
-}) {
-  return /* @__PURE__ */ jsxs("section", { className: cn("flex flex-col gap-gp-md", className), children: [
-    title2 && /* @__PURE__ */ jsx("h3", { className: "text-[12px] font-medium text-fg-muted", children: title2 }),
-    /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-gp-md", children })
-  ] });
-}
+import { e, A, f, B, g, C, h, D, i, j, k, l, m, n, o, q, r, d, s, t, a, u, F, b, v, c, K, M, P, w, S, x, y, z, E, G, H, I, T, J, L, N, O, Q, R, U, V, W, X, Y, Z, _, $, a0, a1, a2, p, a3, a4, a5, a6 } from "./chunks/panel-DZ7X1NZV.mjs";
+import { D as Dialog, c as DialogContent, d as DialogClose } from "./chunks/app-shell-C_enrPD8.mjs";
+import { A as A2, H as H2, e as e2, f as f2, g as g2, h as h2, i as i2, I as I2, j as j2, k as k2, l as l2, m as m2, n as n2, M as M2, o as o2, p as p2, q as q2, r as r2, s as s2, t as t2, S as S2, u as u2, v as v2, w as w2, x as x2, y as y2, z as z2, U as U2, B as B2, C as C2 } from "./chunks/app-shell-C_enrPD8.mjs";
+import { t as tv, B as Button } from "./chunks/chip-group-_e-yh1Zq.mjs";
+import { C as C3, a as a7, b as b2, d as d2, e as e3, f as f3 } from "./chunks/chip-group-_e-yh1Zq.mjs";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { X as X2, Hash, User, AtSign, Phone, CheckCircle2, Tag, Users, DollarSign, Calendar, Type, ArrowUpDown, MoreVertical, MoreHorizontal } from "lucide-react";
+import { P as P2, p as p3 } from "./chunks/page-header-DM2G1mdi.mjs";
+import { B as B3, T as T2, a as a8, b as b3, c as c2, d as d3, e as e4, f as f4, g as g3, u as u3 } from "./chunks/badge-B0D_PRxn.mjs";
+import { useState, useCallback, useMemo } from "react";
+import { I as I3, i as i3 } from "./chunks/input-C9eKSSEb.mjs";
 function defaultId() {
   if (typeof crypto !== "undefined" && "randomUUID" in crypto) {
     return crypto.randomUUID();
@@ -83,20 +28,20 @@ function useToolbarFilters(options) {
     [generateId]
   );
   const remove = useCallback((id) => {
-    setList((prev) => prev.filter((f4) => f4.id !== id));
+    setList((prev) => prev.filter((f5) => f5.id !== id));
   }, []);
   const update = useCallback((id, patch) => {
     setList(
-      (prev) => prev.map((f4) => f4.id === id ? { ...f4, ...patch } : f4)
+      (prev) => prev.map((f5) => f5.id === id ? { ...f5, ...patch } : f5)
     );
   }, []);
   const clear = useCallback(() => setList([]), []);
   const replaceAll = useCallback((next) => setList(next), []);
   const count = useMemo(
-    () => list.filter((f4) => {
-      if (f4.value === null || f4.value === void 0) return false;
-      if (typeof f4.value === "string") return f4.value.length > 0;
-      if (Array.isArray(f4.value)) return f4.value.length > 0;
+    () => list.filter((f5) => {
+      if (f5.value === null || f5.value === void 0) return false;
+      if (typeof f5.value === "string") return f5.value.length > 0;
+      if (Array.isArray(f5.value)) return f5.value.length > 0;
       return true;
     }).length,
     [list]
@@ -271,6 +216,8 @@ const headIcon = tv({
 const headTitleWrap = tv({
   base: [
     "flex-1 min-w-0",
+    "flex flex-col justify-center",
+    // centraliza title+description verticalmente vs icon (40px) à esquerda
     "pr-pad-3xl"
     // reserva espaço pro X close (right-14 + 28px) — evita overlap
   ]
@@ -278,13 +225,13 @@ const headTitleWrap = tv({
 const title = tv({
   base: [
     "m-0 mb-[2px]",
-    "text-[17px] font-bold leading-[1.3]",
+    "text-body-lg font-bold leading-[1.3]",
     "text-fg-default",
     "tracking-[-0.01em]"
   ]
 });
 const description = tv({
-  base: "m-0 text-[12.5px] text-fg-muted leading-[1.45]"
+  base: "m-0 text-body-xs font-normal text-fg-muted leading-[1.45]"
 });
 const body = tv({
   base: "flex flex-col gap-[18px] px-pad-4xl py-[22px]"
@@ -532,7 +479,7 @@ const tabelaStyles = {
     base: [
       "relative flex items-center gap-gp-sm",
       "py-0 pl-[14px] pr-[38px]",
-      "h-[42px] text-[13px] font-semibold leading-none",
+      "h-[42px] text-body-sm font-semibold leading-none",
       "text-fg-muted cursor-pointer select-none",
       "[flex:1_0_auto]",
       "hover:text-fg-default"
@@ -588,7 +535,7 @@ const tabelaStyles = {
       "min-w-[18px] h-[18px] px-[5px]",
       "rounded-radius-sm",
       "bg-bg-brand text-fg-on-brand",
-      "text-[10.5px] font-bold leading-none",
+      "text-caption-xs font-bold leading-none",
       "[font-variant-numeric:tabular-nums]"
     ]
   }),
@@ -670,9 +617,9 @@ const tabelaStyles = {
     ],
     variants: {
       density: {
-        compact: "h-[40px] text-[12px]",
-        comfortable: "h-[56px] text-[13px]",
-        spacious: "h-[64px] text-[13px]"
+        compact: "h-[40px] text-body-xs font-normal",
+        comfortable: "h-[56px] text-body-sm font-normal",
+        spacious: "h-[64px] text-body-sm font-normal"
       }
     },
     defaultVariants: { density: "comfortable" }
@@ -732,7 +679,7 @@ const tabelaStyles = {
   }),
   /* ── Cells específicas ────────────────────────────────────────────── */
   cellId: tv({
-    base: "text-[13px] text-fg-muted [font-variant-numeric:tabular-nums]"
+    base: "text-body-sm font-normal text-fg-muted [font-variant-numeric:tabular-nums]"
   }),
   cellCurrency: tv({
     base: "[font-variant-numeric:tabular-nums] font-semibold"
@@ -741,7 +688,7 @@ const tabelaStyles = {
     base: "[font-variant-numeric:tabular-nums] text-fg-muted"
   }),
   cellStatus: tv({
-    base: "inline-flex items-center gap-gp-md text-[13px] text-fg-default dark:text-fg-muted"
+    base: "inline-flex items-center gap-gp-md text-body-sm font-normal text-fg-default dark:text-fg-muted"
   }),
   dot: tv({
     base: "size-[8px] rounded-radius-full shrink-0"
@@ -760,14 +707,14 @@ const tabelaStyles = {
     base: [
       "grid place-items-center shrink-0",
       "size-[28px] rounded-radius-full",
-      "text-white text-[11px] font-bold"
+      "text-white text-caption-sm font-bold"
     ]
   }),
   avatarSm: tv({
     base: [
       "grid place-items-center shrink-0",
       "size-[22px] rounded-radius-full",
-      "text-white text-[10px] font-bold"
+      "text-white text-caption-xs font-bold"
     ]
   }),
   cellLink: tv({
@@ -804,7 +751,7 @@ const tabelaStyles = {
     base: [
       "inline-flex items-center gap-[4px]",
       "h-[22px] px-[8px] rounded-radius-full",
-      "text-[11px] font-semibold leading-none whitespace-nowrap"
+      "text-caption-sm font-semibold leading-none whitespace-nowrap"
     ],
     variants: {
       kind: {
@@ -932,7 +879,7 @@ function renderHeadCell(col, ctx) {
           {
             type: "button",
             className: tabelaStyles.thMenu(),
-            onClick: (e4) => e4.stopPropagation(),
+            onClick: (e5) => e5.stopPropagation(),
             "aria-label": `Menu da coluna ${col.label}`,
             children: /* @__PURE__ */ jsx(MoreVertical, { size: 15, strokeWidth: 1.7 })
           }
@@ -952,7 +899,7 @@ function renderBodyCell(col, row, ctx) {
         role: "cell",
         className: `${tabelaStyles.tdSelect()} ${tabelaStyles.cellBorderTd()}`,
         style: cellStyle,
-        onClick: (e4) => e4.stopPropagation(),
+        onClick: (e5) => e5.stopPropagation(),
         children: /* @__PURE__ */ jsx(
           "input",
           {
@@ -974,14 +921,14 @@ function renderBodyCell(col, row, ctx) {
         role: "cell",
         className: tabelaStyles.tdActions({ selected: ctx.isHighlighted }),
         style: cellStyle,
-        onClick: (e4) => e4.stopPropagation(),
+        onClick: (e5) => e5.stopPropagation(),
         children: /* @__PURE__ */ jsx(
           "button",
           {
             type: "button",
             className: tabelaStyles.rowMenuBtn(),
             "aria-label": "Ações da linha",
-            onClick: (e4) => e4.stopPropagation(),
+            onClick: (e5) => e5.stopPropagation(),
             children: /* @__PURE__ */ jsx(MoreHorizontal, { size: 16 })
           }
         )
@@ -1014,7 +961,7 @@ function renderCellContent(col, row) {
         {
           href: `mailto:${row.email}`,
           className: tabelaStyles.cellLink(),
-          onClick: (e4) => e4.stopPropagation(),
+          onClick: (e5) => e5.stopPropagation(),
           children: row.email
         }
       );
@@ -1056,11 +1003,11 @@ function CategoryCell({ categoryId }) {
   return /* @__PURE__ */ jsx("span", { className: tabelaStyles.chip({ kind: c3.kind }), children: c3.label });
 }
 function AgentCell({ agentId }) {
-  const a6 = AGENTS[agentId];
-  if (!a6) return /* @__PURE__ */ jsx("span", { className: tabelaStyles.cellMuted(), children: "—" });
-  return /* @__PURE__ */ jsxs("span", { className: tabelaStyles.cellAgent(), title: a6.name, children: [
-    /* @__PURE__ */ jsx("span", { className: tabelaStyles.avatarSm(), style: { background: a6.color }, children: a6.initials }),
-    /* @__PURE__ */ jsx("span", { children: a6.name })
+  const a9 = AGENTS[agentId];
+  if (!a9) return /* @__PURE__ */ jsx("span", { className: tabelaStyles.cellMuted(), children: "—" });
+  return /* @__PURE__ */ jsxs("span", { className: tabelaStyles.cellAgent(), title: a9.name, children: [
+    /* @__PURE__ */ jsx("span", { className: tabelaStyles.avatarSm(), style: { background: a9.color }, children: a9.initials }),
+    /* @__PURE__ */ jsx("span", { children: a9.name })
   ] });
 }
 function PhoneCell({ value }) {
@@ -1070,7 +1017,7 @@ function PhoneCell({ value }) {
     {
       href: `tel:${value.replace(/\D/g, "")}`,
       className: tabelaStyles.cellLink(),
-      onClick: (e4) => e4.stopPropagation(),
+      onClick: (e5) => e5.stopPropagation(),
       children: value
     }
   );
@@ -1089,7 +1036,7 @@ export {
   g as BulkActionsBar,
   Button,
   C3 as Chip,
-  a4 as ChipGroup,
+  a7 as ChipGroup,
   b2 as ChipGroupItem,
   C as ColsPopover,
   h as DEFAULT_FILTER_OPERATORS,
@@ -1113,28 +1060,28 @@ export {
   v as FormFieldSwitch,
   c as FormFieldTextarea,
   H2 as Header,
-  g2 as HeaderBreadcrumb,
-  h2 as HeaderMessages,
-  i2 as HeaderNotifications,
-  j2 as HeaderSearch,
-  k2 as HeaderThemeSwitcher,
+  e2 as HeaderBreadcrumb,
+  f2 as HeaderMessages,
+  g2 as HeaderNotifications,
+  h2 as HeaderSearch,
+  i2 as HeaderThemeSwitcher,
   I3 as Input,
   I2 as InputGroup,
-  l2 as InputGroupAddon,
-  m2 as InputGroupButton,
-  n2 as InputGroupInput,
-  o2 as InputGroupText,
-  p2 as InputGroupTextarea,
+  j2 as InputGroupAddon,
+  k2 as InputGroupButton,
+  l2 as InputGroupInput,
+  m2 as InputGroupText,
+  n2 as InputGroupTextarea,
   K as Kanban,
   M2 as MenuSidebar,
   Modal,
   M as MoreMenu,
-  q2 as MoreMenuCheckboxItem,
-  r2 as MoreMenuItem,
-  s2 as MoreMenuLabel,
-  t2 as MoreMenuRadioGroup,
-  u2 as MoreMenuRadioItem,
-  v2 as MoreMenuSeparator,
+  o2 as MoreMenuCheckboxItem,
+  p2 as MoreMenuItem,
+  q2 as MoreMenuLabel,
+  r2 as MoreMenuRadioGroup,
+  s2 as MoreMenuRadioItem,
+  t2 as MoreMenuSeparator,
   P2 as PageHeader,
   P as Panel,
   w as PanelBody,
@@ -1146,63 +1093,63 @@ export {
   G as PanelTrigger,
   H as SELECTION_COLUMN_WIDTH,
   S2 as SidebarBrandIcon,
-  w2 as SidebarItem,
-  x2 as SidebarPanel,
-  y2 as SidebarPill,
-  z2 as SidebarRail,
-  B2 as SidebarSection,
-  C2 as SidebarSubgroup,
+  u2 as SidebarItem,
+  v2 as SidebarPanel,
+  w2 as SidebarPill,
+  x2 as SidebarRail,
+  y2 as SidebarSection,
+  z2 as SidebarSubgroup,
   I as SortPopover,
   T as TABLE_HEADER_HEIGHT,
   TabelaTeste,
   T2 as Table,
-  a5 as TableBody,
+  a8 as TableBody,
   b3 as TableCardRow,
   c2 as TableCell,
   d3 as TableHead,
-  e3 as TableHeadCell,
-  f3 as TableRow,
+  e4 as TableHeadCell,
+  f4 as TableRow,
   J as TableToolbar,
   L as TableToolbarViews,
   N as ToolbarApplied,
   O as ToolbarDivider,
-  ToolbarMobileDialog,
-  ToolbarMobileSection,
-  ToolbarMobileSheet,
-  Q as ToolbarSaveButton,
-  R as ToolbarSearch,
-  U as ToolbarSegmented,
-  V as ToolbarTabs,
-  W as ToolbarToolButton,
+  Q as ToolbarMobileDialog,
+  R as ToolbarMobileSection,
+  U as ToolbarMobileSheet,
+  V as ToolbarSaveButton,
+  W as ToolbarSearch,
+  X as ToolbarSegmented,
+  Y as ToolbarTabs,
+  Z as ToolbarToolButton,
   U2 as UserMenu,
-  X as ViewsPopover,
+  _ as ViewsPopover,
   actionColumn,
-  Y as avatarVariants,
+  $ as avatarVariants,
   g3 as badgeVariants,
   d2 as buttonVariants,
-  e2 as chipCount,
-  f2 as chipVariants,
-  Z as columnTypeRegistry,
+  e3 as chipCount,
+  f3 as chipVariants,
+  a0 as columnTypeRegistry,
   currencyColumn,
   customColumn,
   dateColumn,
   emailColumn,
-  _ as floatingPanelStyles,
+  a1 as floatingPanelStyles,
   i3 as inputVariants,
   numberColumn,
   p3 as pageHeaderStyles,
-  $ as panelContainer,
+  a2 as panelContainer,
   phoneColumn,
   p as presetView,
-  a0 as savedViewsMockService,
+  a3 as savedViewsMockService,
   statusColumn,
   textColumn,
   u3 as useColumnResize,
-  a1 as useColumnWidths,
-  E2 as useControllable,
-  a2 as useDataTableContext,
-  a3 as useFloatingPanelResize,
-  F2 as useMediaQuery,
+  a4 as useColumnWidths,
+  B2 as useControllable,
+  a5 as useDataTableContext,
+  a6 as useFloatingPanelResize,
+  C2 as useMediaQuery,
   useToolbarFilters,
   useToolbarSort
 };