@snksergio/design-system 0.1.0

package/dist-lib/index.cjs

@@ -0,0 +1,1207 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const panel = require("./chunks/panel-bzNmFlEZ.mjs");
+const appShell = require("./chunks/app-shell-BNTvOETJ.mjs");
+const chipGroup = require("./chunks/chip-group-CsKBBHW2.mjs");
+const jsxRuntime = require("react/jsx-runtime");
+const lucideReact = require("lucide-react");
+const pageHeader = require("./chunks/page-header-Dw-3wqAG.mjs");
+const badge = require("./chunks/badge-DKpXURa1.mjs");
+const React = require("react");
+const input = require("./chunks/input-374MpdBL.mjs");
+function ToolbarMobileDialog({
+  children,
+  trigger,
+  title: title2 = "Filtros e ações",
+  open: openProp,
+  onOpenChange,
+  className,
+  contentClassName
+}) {
+  const [internalOpen, setInternalOpen] = React.useState(false);
+  const open = openProp ?? internalOpen;
+  const setOpen = onOpenChange ?? setInternalOpen;
+  const titleId = React.useId();
+  return /* @__PURE__ */ jsxRuntime.jsxs(appShell.Dialog, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(appShell.DialogTrigger, { asChild: true, children: trigger ?? /* @__PURE__ */ jsxRuntime.jsx(
+      chipGroup.Button,
+      {
+        color: "secondary",
+        variant: "outline",
+        size: "icon-md",
+        "aria-label": "Mais opções",
+        className: chipGroup.cn("md:hidden", className),
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreHorizontal, {})
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      appShell.DialogContent,
+      {
+        hideClose: true,
+        "aria-labelledby": titleId,
+        className: chipGroup.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__ */ jsxRuntime.jsx(appShell.DialogTitle, { id: titleId, className: "sr-only", children: title2 }),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("section", { className: chipGroup.cn("flex flex-col gap-gp-md", className), children: [
+    title2 && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-[12px] font-medium text-fg-muted", children: title2 }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-gp-md", children })
+  ] });
+}
+function defaultId() {
+  if (typeof crypto !== "undefined" && "randomUUID" in crypto) {
+    return crypto.randomUUID();
+  }
+  return `f_${Date.now()}_${Math.random().toString(36).slice(2, 9)}`;
+}
+function useToolbarFilters(options) {
+  const { initial = [], generateId = defaultId } = options ?? {};
+  const [list, setList] = React.useState(initial);
+  const add = React.useCallback(
+    (entry) => {
+      setList((prev) => [
+        ...prev,
+        { ...entry, id: entry.id ?? generateId() }
+      ]);
+    },
+    [generateId]
+  );
+  const remove = React.useCallback((id) => {
+    setList((prev) => prev.filter((f) => f.id !== id));
+  }, []);
+  const update = React.useCallback((id, patch) => {
+    setList(
+      (prev) => prev.map((f) => f.id === id ? { ...f, ...patch } : f)
+    );
+  }, []);
+  const clear = React.useCallback(() => setList([]), []);
+  const replaceAll = React.useCallback((next) => setList(next), []);
+  const count = React.useMemo(
+    () => list.filter((f) => {
+      if (f.value === null || f.value === void 0) return false;
+      if (typeof f.value === "string") return f.value.length > 0;
+      if (Array.isArray(f.value)) return f.value.length > 0;
+      return true;
+    }).length,
+    [list]
+  );
+  return { list, add, remove, update, clear, replaceAll, count };
+}
+function useToolbarSort(options) {
+  const { initial = [], maxColumns = Infinity } = options ?? {};
+  const [list, setList] = React.useState(initial);
+  const toggle = React.useCallback(
+    (columnKey) => {
+      setList((prev) => {
+        const idx = prev.findIndex((s) => s.columnKey === columnKey);
+        if (idx === -1) {
+          const next = [...prev, { columnKey, direction: "asc" }];
+          if (next.length > maxColumns) next.shift();
+          return next;
+        }
+        const current = prev[idx];
+        if (current.direction === "asc") {
+          const next = [...prev];
+          next[idx] = { ...current, direction: "desc" };
+          return next;
+        }
+        return prev.filter((_, i) => i !== idx);
+      });
+    },
+    [maxColumns]
+  );
+  const set = React.useCallback(
+    (columnKey, direction) => {
+      setList((prev) => {
+        const idx = prev.findIndex((s) => s.columnKey === columnKey);
+        if (idx === -1) {
+          const next2 = [...prev, { columnKey, direction }];
+          if (next2.length > maxColumns) next2.shift();
+          return next2;
+        }
+        const next = [...prev];
+        next[idx] = { columnKey, direction };
+        return next;
+      });
+    },
+    [maxColumns]
+  );
+  const remove = React.useCallback((columnKey) => {
+    setList((prev) => prev.filter((s) => s.columnKey !== columnKey));
+  }, []);
+  const clear = React.useCallback(() => setList([]), []);
+  const replaceAll = React.useCallback(
+    (next) => setList(next),
+    []
+  );
+  const directionOf = React.useCallback(
+    (columnKey) => list.find((s) => s.columnKey === columnKey)?.direction,
+    [list]
+  );
+  return {
+    list,
+    toggle,
+    set,
+    remove,
+    clear,
+    replaceAll,
+    count: list.length,
+    directionOf
+  };
+}
+function textColumn(field, headerName, overrides) {
+  return { field, headerName, type: "text", ...overrides };
+}
+function numberColumn(field, headerName, overrides) {
+  return { field, headerName, type: "number", sortable: true, ...overrides };
+}
+function currencyColumn(field, headerName, overrides) {
+  const { currency, locale, ...rest } = overrides ?? {};
+  return {
+    field,
+    headerName,
+    type: "currency",
+    sortable: true,
+    ...currency || locale ? { typeOptions: { currency, locale } } : {},
+    ...rest
+  };
+}
+function emailColumn(field, headerName = "Email", overrides) {
+  return { field, headerName, type: "email", ...overrides };
+}
+function phoneColumn(field, headerName = "Telefone", overrides) {
+  return { field, headerName, type: "phone", ...overrides };
+}
+function dateColumn(field, headerName, overrides) {
+  return { field, headerName, type: "date", sortable: true, ...overrides };
+}
+function statusColumn(field, headerName, options, overrides) {
+  return {
+    field,
+    headerName,
+    type: "status",
+    filterType: "select",
+    filterOptions: options,
+    enableColumnFilter: true,
+    ...overrides
+  };
+}
+function actionColumn(opts) {
+  return {
+    field: "_actions",
+    headerName: "",
+    type: "actions",
+    width: opts.width ?? 120,
+    pinned: "right",
+    getActions: opts.getActions
+  };
+}
+function customColumn(field, headerName, render, overrides) {
+  return { field, headerName, render, ...overrides };
+}
+const dialog = chipGroup.tv({
+  base: [
+    // Override do DialogContent default (grid + p-pad-4xl + rounded-radius-base + shadow-sh-xl)
+    "!gap-0 !p-0",
+    "border border-border-default",
+    "!rounded-radius-2xl !shadow-sh-2xl",
+    "outline-float",
+    "flex flex-col overflow-hidden",
+    "w-[calc(100%-32px)]"
+  ],
+  variants: {
+    size: {
+      sm: "!max-w-[440px]",
+      md: "!max-w-[540px]",
+      lg: "!max-w-[720px]"
+    }
+  },
+  defaultVariants: { size: "md" }
+});
+const closeBtn = chipGroup.tv({
+  base: [
+    "absolute top-[14px] right-[14px] z-[1]",
+    "grid place-items-center size-[28px]",
+    "rounded-radius-md bg-transparent border-0 cursor-pointer",
+    "text-fg-muted opacity-55",
+    "transition-[background-color,color,opacity] duration-150",
+    "hover:bg-bg-muted hover:text-fg-default hover:opacity-100",
+    "focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring-brand",
+    "dark:hover:bg-bg-muted-hover"
+  ]
+});
+const head = chipGroup.tv({
+  base: [
+    "flex items-center gap-[14px]",
+    "px-pad-4xl pt-pad-4xl pb-pad-3xl",
+    // 24/24/20
+    "border-b border-border-default"
+  ],
+  variants: {
+    // Sem icon — alinha texto à esquerda direto
+    withIcon: { false: "", true: "" }
+  }
+});
+const headIcon = chipGroup.tv({
+  base: [
+    "shrink-0 grid place-items-center size-form-lg",
+    // 40×40
+    "bg-bg-muted border border-border-input rounded-radius-lg",
+    // radius-lg=10px
+    "text-fg-default",
+    "dark:bg-bg-accent dark:border-border-subtle"
+  ]
+});
+const headTitleWrap = chipGroup.tv({
+  base: [
+    "flex-1 min-w-0",
+    "pr-pad-3xl"
+    // reserva espaço pro X close (right-14 + 28px) — evita overlap
+  ]
+});
+const title = chipGroup.tv({
+  base: [
+    "m-0 mb-[2px]",
+    "text-[17px] font-bold leading-[1.3]",
+    "text-fg-default",
+    "tracking-[-0.01em]"
+  ]
+});
+const description = chipGroup.tv({
+  base: "m-0 text-[12.5px] text-fg-muted leading-[1.45]"
+});
+const body = chipGroup.tv({
+  base: "flex flex-col gap-[18px] px-pad-4xl py-[22px]"
+});
+const foot = chipGroup.tv({
+  base: [
+    "flex items-center gap-gp-lg",
+    // gap 10px
+    "px-pad-4xl pt-pad-md pb-[22px]"
+    // 24/8/22
+  ],
+  variants: {
+    layout: {
+      end: "justify-end",
+      between: "justify-between"
+    }
+  },
+  defaultVariants: { layout: "end" }
+});
+const footRight = chipGroup.tv({
+  base: "flex items-center gap-gp-lg"
+});
+function Modal({
+  open,
+  onClose,
+  icon,
+  title: title$1,
+  description: description$1,
+  children,
+  primaryAction,
+  secondaryAction,
+  tertiaryAction,
+  footer,
+  size = "md",
+  hideClose = false,
+  closeOnOverlay = true,
+  className
+}) {
+  const hasHeader = Boolean(icon || title$1 || description$1);
+  const hasStructuredFooter = Boolean(primaryAction || secondaryAction || tertiaryAction);
+  const showFooter = Boolean(footer) || hasStructuredFooter;
+  const handleOpenChange = (next) => {
+    if (next) return;
+    if (!closeOnOverlay) return;
+    onClose();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(appShell.Dialog, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    appShell.DialogContent,
+    {
+      className: dialog({ size, className }),
+      hideClose: true,
+      "aria-labelledby": title$1 ? "modal-title" : void 0,
+      "aria-describedby": description$1 ? "modal-description" : void 0,
+      children: [
+        !hideClose && /* @__PURE__ */ jsxRuntime.jsx(appShell.DialogClose, { className: closeBtn(), "aria-label": "Fechar", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "size-icon-sm" }) }),
+        hasHeader && /* @__PURE__ */ jsxRuntime.jsxs("header", { className: head(), children: [
+          icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: headIcon(), "aria-hidden": "true", children: icon }),
+          (title$1 || description$1) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: headTitleWrap(), children: [
+            title$1 && /* @__PURE__ */ jsxRuntime.jsx("h3", { id: "modal-title", className: title(), children: title$1 }),
+            description$1 && /* @__PURE__ */ jsxRuntime.jsx("p", { id: "modal-description", className: description(), children: description$1 })
+          ] })
+        ] }),
+        children !== void 0 && children !== null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: body(), children }),
+        showFooter && /* @__PURE__ */ jsxRuntime.jsx(
+          "footer",
+          {
+            className: foot({
+              layout: tertiaryAction ? "between" : "end"
+            }),
+            children: footer ?? /* @__PURE__ */ jsxRuntime.jsx(
+              StructuredActions,
+              {
+                primary: primaryAction,
+                secondary: secondaryAction,
+                tertiary: tertiaryAction,
+                onClose
+              }
+            )
+          }
+        )
+      ]
+    }
+  ) });
+}
+function StructuredActions({
+  primary,
+  secondary,
+  tertiary,
+  onClose
+}) {
+  const renderTertiary = tertiary && /* @__PURE__ */ jsxRuntime.jsx(
+    chipGroup.Button,
+    {
+      color: tertiary.danger ? "critical" : "secondary",
+      variant: "ghost",
+      size: "md",
+      onClick: tertiary.onClick,
+      disabled: tertiary.disabled,
+      loading: tertiary.loading,
+      children: tertiary.label
+    }
+  );
+  const renderSecondary = secondary && /* @__PURE__ */ jsxRuntime.jsx(
+    chipGroup.Button,
+    {
+      color: "secondary",
+      variant: "outline",
+      size: "md",
+      onClick: secondary.onClick ?? onClose,
+      disabled: secondary.disabled,
+      loading: secondary.loading,
+      children: secondary.label
+    }
+  );
+  const renderPrimary = primary && /* @__PURE__ */ jsxRuntime.jsx(
+    chipGroup.Button,
+    {
+      color: primary.danger ? "critical" : "primary",
+      variant: "filled",
+      size: "md",
+      onClick: primary.onClick,
+      disabled: primary.disabled,
+      loading: primary.loading,
+      children: primary.label
+    }
+  );
+  if (tertiary) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      renderTertiary,
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: footRight(), children: [
+        renderSecondary,
+        renderPrimary
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    renderSecondary,
+    renderPrimary
+  ] });
+}
+const COLUMNS = [
+  { key: "select", width: 44, type: "select" },
+  { key: "id", width: 120, label: "ID", type: "id", icon: lucideReact.Hash },
+  { key: "name", minWidth: 220, label: "Nome", type: "person", icon: lucideReact.User, sorted: true },
+  { key: "email", minWidth: 240, label: "Email", type: "email", icon: lucideReact.AtSign },
+  { key: "phone", minWidth: 170, label: "Telefone", type: "phone", icon: lucideReact.Phone },
+  { key: "status", minWidth: 140, label: "Status", type: "status", icon: lucideReact.CheckCircle2 },
+  { key: "category", minWidth: 130, label: "Categoria", type: "category", icon: lucideReact.Tag },
+  { key: "agent", minWidth: 170, label: "Atribuído", type: "agent", icon: lucideReact.Users },
+  { key: "value", width: 130, label: "Valor", type: "currency", icon: lucideReact.DollarSign },
+  { key: "createdAt", width: 130, label: "Criado em", type: "date", icon: lucideReact.Calendar },
+  { key: "lastContact", width: 150, label: "Último contato", type: "date", icon: lucideReact.Calendar },
+  { key: "location", minWidth: 150, label: "Localização", type: "text", icon: lucideReact.Type },
+  { key: "actions", width: 44, type: "actions" }
+];
+function getColCellStyle(col) {
+  if (col.width) return { width: col.width, flex: `0 0 ${col.width}px` };
+  if (col.minWidth) return { minWidth: col.minWidth, flex: `1 0 ${col.minWidth}px` };
+  return {};
+}
+const STATUSES = {
+  active: { label: "Ativo", color: "var(--color-fg-success)" },
+  pending: { label: "Pendente", color: "var(--color-fg-warning)" },
+  paused: { label: "Pausado", color: "var(--color-fg-info)" },
+  inactive: { label: "Inativo", color: "var(--color-fg-muted)" }
+};
+const CATEGORIES = {
+  royal: { label: "Royal", kind: "warning" },
+  licenciado: { label: "Licenciado", kind: "info" },
+  lead: { label: "Lead", kind: "success" }
+};
+const AGENTS = {
+  you: { name: "Você", initials: "VC", color: "#0a3a2e" },
+  aline: { name: "Aline Castro", initials: "AC", color: "#f59e0b" },
+  carlos: { name: "Carlos Souza", initials: "CS", color: "#8754ec" },
+  maria: { name: "Maria Lima", initials: "ML", color: "#ef4444" }
+};
+const BASE_DATE = (/* @__PURE__ */ new Date("2026-04-15T12:00:00Z")).getTime();
+const DAY_MS = 864e5;
+const ROWS_BASE = [
+  { id: "CLI-2401", name: "Maria Silva", initials: "MS", avatarColor: "#f59e0b", email: "maria.silva@example.com", phone: "+55 11 91234-5678", statusId: "active", categoryId: "royal", location: "São Paulo, SP", value: 4800, agentId: "you", createdAt: BASE_DATE - 65 * DAY_MS, lastContact: BASE_DATE - 2 * DAY_MS },
+  { id: "CLI-2402", name: "João Santos", initials: "JS", avatarColor: "#0a3a2e", email: "joao.santos@example.com", phone: "+55 11 92345-6789", statusId: "pending", categoryId: "licenciado", location: "Rio de Janeiro, RJ", value: 12300, agentId: "aline", createdAt: BASE_DATE - 58 * DAY_MS, lastContact: BASE_DATE - 5 * DAY_MS },
+  { id: "CLI-2403", name: "Carlos Oliveira", initials: "CO", avatarColor: "#8754ec", email: "carlos.oliveira@example.com", phone: "+55 11 93456-7890", statusId: "active", categoryId: "lead", location: "Belo Horizonte, MG", value: 2150, agentId: "carlos", createdAt: BASE_DATE - 51 * DAY_MS, lastContact: BASE_DATE - 1 * DAY_MS },
+  { id: "CLI-2404", name: "Ana Costa", initials: "AC", avatarColor: "#1cb280", email: "ana.costa@example.com", phone: "+55 11 94567-8901", statusId: "paused", categoryId: "royal", location: "Porto Alegre, RS", value: 8900, agentId: "maria", createdAt: BASE_DATE - 44 * DAY_MS, lastContact: BASE_DATE - 12 * DAY_MS },
+  { id: "CLI-2405", name: "Pedro Pereira", initials: "PP", avatarColor: "#ef4444", email: "pedro.pereira@example.com", phone: "+55 11 95678-9012", statusId: "inactive", categoryId: "lead", location: "Curitiba, PR", value: 1100, agentId: "you", createdAt: BASE_DATE - 37 * DAY_MS, lastContact: BASE_DATE - 30 * DAY_MS },
+  { id: "CLI-2406", name: "Lúcia Almeida", initials: "LA", avatarColor: "#f9a47a", email: "lucia.almeida@example.com", phone: "+55 11 96789-0123", statusId: "active", categoryId: "licenciado", location: "Recife, PE", value: 6750, agentId: "aline", createdAt: BASE_DATE - 30 * DAY_MS, lastContact: BASE_DATE - 3 * DAY_MS },
+  { id: "CLI-2407", name: "Roberto Souza", initials: "RS", avatarColor: "#0088cc", email: "roberto.souza@example.com", phone: "+55 11 97890-1234", statusId: "pending", categoryId: "royal", location: "São Paulo, SP", value: 15200, agentId: "carlos", createdAt: BASE_DATE - 23 * DAY_MS, lastContact: BASE_DATE - 7 * DAY_MS },
+  { id: "CLI-2408", name: "Fernanda Lima", initials: "FL", avatarColor: "#e1306c", email: "fernanda.lima@example.com", phone: "+55 11 98901-2345", statusId: "active", categoryId: "lead", location: "Rio de Janeiro, RJ", value: 3400, agentId: "maria", createdAt: BASE_DATE - 16 * DAY_MS, lastContact: BASE_DATE - 1 * DAY_MS },
+  { id: "CLI-2409", name: "Bruno Rodrigues", initials: "BR", avatarColor: "#70c748", email: "bruno.rodrigues@example.com", phone: "+55 11 99012-3456", statusId: "paused", categoryId: "licenciado", location: "Belo Horizonte, MG", value: 5600, agentId: "you", createdAt: BASE_DATE - 9 * DAY_MS, lastContact: BASE_DATE - 6 * DAY_MS },
+  { id: "CLI-2410", name: "Camila Ribeiro", initials: "CR", avatarColor: "#8754ec", email: "camila.ribeiro@example.com", phone: "+55 11 90123-4567", statusId: "active", categoryId: "royal", location: "Porto Alegre, RS", value: 9800, agentId: "aline", createdAt: BASE_DATE - 2 * DAY_MS, lastContact: BASE_DATE }
+];
+const NAME_SUFFIXES = ["", " Jr", " Filho", " Neto", " II"];
+const CITY_OVERRIDES = ["Salvador, BA", "Fortaleza, CE", "Manaus, AM", "Brasília, DF", "Vitória, ES"];
+const ROWS_MOCK = Array.from({ length: 50 }, (_, i) => {
+  const base = ROWS_BASE[i % ROWS_BASE.length];
+  const cycle = Math.floor(i / ROWS_BASE.length);
+  const seq = 2401 + i;
+  const nameSuffix = NAME_SUFFIXES[cycle];
+  return {
+    ...base,
+    id: `CLI-${seq}`,
+    name: `${base.name}${nameSuffix}`,
+    location: cycle === 0 ? base.location : CITY_OVERRIDES[cycle - 1] ?? base.location,
+    value: base.value + cycle * 175,
+    createdAt: base.createdAt - cycle * 7 * DAY_MS,
+    lastContact: base.lastContact - cycle * 3 * DAY_MS
+  };
+});
+function formatCurrency(value) {
+  return value.toLocaleString("pt-BR", { style: "currency", currency: "BRL", minimumFractionDigits: 2 });
+}
+const MONTHS_SHORT = ["jan", "fev", "mar", "abr", "mai", "jun", "jul", "ago", "set", "out", "nov", "dez"];
+function formatDateShort(value) {
+  if (!value) return "—";
+  const d = new Date(value);
+  const day = d.getDate().toString().padStart(2, "0");
+  return `${day} de ${MONTHS_SHORT[d.getMonth()]}`;
+}
+const tabelaStyles = {
+  /* ── Wrap (container externo) ─────────────────────────────────────── */
+  wrap: chipGroup.tv({
+    base: [
+      "flex-1 overflow-auto min-h-0",
+      "bg-bg-table border border-border-table rounded-radius-xl",
+      "scrollbar-default"
+    ]
+  }),
+  /* tbl-table — inner container, min-width: max-content pra scroll horizontal */
+  table: chipGroup.tv({
+    base: "block min-w-max"
+  }),
+  /* ── Head ─────────────────────────────────────────────────────────── */
+  thead: chipGroup.tv({
+    base: [
+      "sticky top-0 z-[5]",
+      "bg-bg-table-head",
+      "border-b border-border-table"
+    ]
+  }),
+  trHead: chipGroup.tv({
+    base: "flex bg-bg-table-head"
+  }),
+  /* tbl-th base — 42px sempre, padding-right reserva espaço pro menu absoluto */
+  th: chipGroup.tv({
+    base: [
+      "relative flex items-center gap-gp-sm",
+      "py-0 pl-[14px] pr-[38px]",
+      "h-[42px] text-[13px] font-semibold leading-none",
+      "text-fg-muted cursor-pointer select-none",
+      "[flex:1_0_auto]",
+      "hover:text-fg-default"
+      // hover do th faz menu aparecer (ver thMenu)
+      // hover do th faz sort-hint aparecer (ver sortHint)
+    ],
+    variants: {
+      sorted: { true: "text-fg-default" }
+    },
+    defaultVariants: { sorted: false }
+  }),
+  /* Coluna select — 44px, sem hover, justify-center, sem padding right pro menu */
+  thSelect: chipGroup.tv({
+    base: [
+      "relative flex items-center justify-center",
+      "w-[44px] [flex:0_0_44px] px-[12px] py-0",
+      "h-[42px] cursor-default select-none",
+      "bg-bg-table-head"
+    ]
+  }),
+  /* Coluna actions — 44px sticky right */
+  thActions: chipGroup.tv({
+    base: [
+      "relative flex items-center justify-center",
+      "w-[44px] [flex:0_0_44px] p-0",
+      "h-[42px] cursor-default select-none",
+      "sticky right-0 z-[3]",
+      "bg-bg-table-head"
+    ]
+  }),
+  /* Label da coluna — elipsa */
+  thLabel: chipGroup.tv({
+    base: "flex-1 min-w-0 whitespace-nowrap overflow-hidden text-ellipsis text-left"
+  }),
+  /* Ícone de tipo — opacity 0.7 rest, 1 no hover do th OU quando sorted */
+  thTypeIcon: chipGroup.tv({
+    base: [
+      "shrink-0 size-[13px] text-fg-muted opacity-70",
+      "group-hover/th:opacity-100"
+    ],
+    variants: {
+      sorted: { true: "opacity-100" }
+    },
+    defaultVariants: { sorted: false }
+  }),
+  /* Sort badge "1" (chip brand) + arrow */
+  thSort: chipGroup.tv({
+    base: "inline-flex items-center gap-[4px] shrink-0 text-fg-default"
+  }),
+  thSortIndex: chipGroup.tv({
+    base: [
+      "grid place-items-center",
+      "min-w-[18px] h-[18px] px-[5px]",
+      "rounded-radius-sm",
+      "bg-bg-brand text-fg-on-brand",
+      "text-[10.5px] font-bold leading-none",
+      "[font-variant-numeric:tabular-nums]"
+    ]
+  }),
+  /* Hint atenuado em hover de col não-sorted (sinaliza clicável) */
+  thSortHint: chipGroup.tv({
+    base: [
+      "inline-flex items-center shrink-0 text-fg-muted",
+      "opacity-0 transition-opacity duration-150",
+      "group-hover/th:opacity-50"
+    ]
+  }),
+  /* Menu "..." absolute, aparece só no hover */
+  thMenu: chipGroup.tv({
+    base: [
+      "absolute right-[6px] top-1/2 -translate-y-1/2 z-[1]",
+      "grid place-items-center size-[28px]",
+      "border-0 bg-transparent text-fg-muted rounded-radius-md cursor-pointer",
+      "opacity-0 transition-all duration-150",
+      "group-hover/th:opacity-100",
+      "hover:bg-bg-muted hover:text-fg-default"
+    ]
+  }),
+  /* Resize handle (6px) — linha que vira brand e projeta pra baixo no hover */
+  thResize: chipGroup.tv({
+    base: [
+      "absolute right-0 top-0 bottom-0 w-[6px] z-[2]",
+      "bg-transparent cursor-col-resize",
+      // ::before linha vertical dentro do header
+      "before:content-[''] before:absolute before:left-1/2 before:-translate-x-1/2",
+      "before:top-[8px] before:bottom-[8px] before:w-px before:bg-transparent",
+      "before:transition-all before:duration-150",
+      "group-hover/th:before:bg-fg-muted",
+      // hover direto no handle → brand 2px + altura total
+      "hover:before:bg-bg-brand hover:before:w-[2px] hover:before:top-0 hover:before:bottom-0",
+      // ::after projeção 100vh pra baixo cobrindo body
+      "after:content-[''] after:absolute after:left-1/2 after:-translate-x-1/2",
+      "after:top-full after:w-[2px] after:h-screen after:bg-transparent after:pointer-events-none",
+      "after:transition-colors after:duration-150",
+      "hover:after:bg-bg-brand"
+    ]
+  }),
+  /* ── Body ─────────────────────────────────────────────────────────── */
+  tbody: chipGroup.tv({
+    base: "bg-bg-surface"
+  }),
+  /* tbl-tr — flex row, altura por densidade. Default comfortable (56px). */
+  tr: chipGroup.tv({
+    base: [
+      "relative flex",
+      "border-b border-border-table bg-bg-surface",
+      "cursor-pointer transition-colors duration-150",
+      "hover:bg-bg-table-row-hover",
+      "focus-visible:outline-2 focus-visible:outline-bg-brand focus-visible:-outline-offset-2"
+    ],
+    variants: {
+      density: {
+        compact: "h-[40px]",
+        comfortable: "h-[56px]",
+        spacious: "h-[64px]"
+      },
+      // Selected (checkbox) e Open (detail panel) — mesmo visual brand-tinted
+      // + strip lateral 3px brand via ::before
+      selected: {
+        true: [
+          "bg-bg-table-row-selected hover:bg-bg-table-row-selected-hover",
+          "before:content-[''] before:absolute before:left-0 before:top-0 before:bottom-0",
+          "before:w-[3px] before:bg-bg-brand before:z-[5] before:pointer-events-none"
+        ].join(" ")
+      }
+    },
+    defaultVariants: { density: "comfortable", selected: false }
+  }),
+  /* Cells base — height/font-size variam por densidade */
+  td: chipGroup.tv({
+    base: [
+      "flex items-center px-[14px] py-0",
+      "text-fg-default",
+      "[flex:1_0_auto] overflow-hidden whitespace-nowrap"
+    ],
+    variants: {
+      density: {
+        compact: "h-[40px] text-[12px]",
+        comfortable: "h-[56px] text-[13px]",
+        spacious: "h-[64px] text-[13px]"
+      }
+    },
+    defaultVariants: { density: "comfortable" }
+  }),
+  tdSelect: chipGroup.tv({
+    base: [
+      "flex items-center justify-center",
+      "w-[44px] [flex:0_0_44px] px-[12px] py-0"
+    ],
+    variants: {
+      density: {
+        compact: "h-[40px]",
+        comfortable: "h-[56px]",
+        spacious: "h-[64px]"
+      }
+    },
+    defaultVariants: { density: "comfortable" }
+  }),
+  /* tdActions — sticky right, bg adapta ao estado da row */
+  tdActions: chipGroup.tv({
+    base: [
+      "flex items-center justify-center",
+      "w-[44px] [flex:0_0_44px] p-0",
+      "sticky right-0 z-[2]",
+      "bg-bg-surface",
+      // bg adapta ao estado da row pai
+      "group-hover/tr:bg-bg-table-row-hover"
+    ],
+    variants: {
+      density: {
+        compact: "h-[40px]",
+        comfortable: "h-[56px]",
+        spacious: "h-[64px]"
+      },
+      selected: {
+        true: "!bg-bg-table-row-selected group-hover/tr:!bg-bg-table-row-selected-hover"
+      }
+    },
+    defaultVariants: { density: "comfortable", selected: false }
+  }),
+  /* Botão "..." da row — opacity 0 → 1 no hover */
+  rowMenuBtn: chipGroup.tv({
+    base: [
+      "grid place-items-center size-[28px]",
+      "border-0 bg-transparent text-fg-muted rounded-radius-md cursor-pointer",
+      "opacity-0 transition-all duration-150",
+      "group-hover/tr:opacity-100",
+      "hover:bg-bg-muted hover:text-fg-default"
+    ]
+  }),
+  /* ── Cell borders verticais (sempre on neste componente) ──────────── */
+  cellBorderTh: chipGroup.tv({
+    base: "border-r border-border-table"
+  }),
+  cellBorderTd: chipGroup.tv({
+    base: "border-r border-border-table"
+  }),
+  /* ── Cells específicas ────────────────────────────────────────────── */
+  cellId: chipGroup.tv({
+    base: "text-[13px] text-fg-muted [font-variant-numeric:tabular-nums]"
+  }),
+  cellCurrency: chipGroup.tv({
+    base: "[font-variant-numeric:tabular-nums] font-semibold"
+  }),
+  cellDate: chipGroup.tv({
+    base: "[font-variant-numeric:tabular-nums] text-fg-muted"
+  }),
+  cellStatus: chipGroup.tv({
+    base: "inline-flex items-center gap-gp-md text-[13px] text-fg-default dark:text-fg-muted"
+  }),
+  dot: chipGroup.tv({
+    base: "size-[8px] rounded-radius-full shrink-0"
+  }),
+  cellPerson: chipGroup.tv({
+    base: "inline-flex items-center gap-gp-md whitespace-nowrap overflow-hidden"
+  }),
+  cellPersonName: chipGroup.tv({
+    base: "whitespace-nowrap overflow-hidden text-ellipsis font-medium"
+  }),
+  cellAgent: chipGroup.tv({
+    base: "inline-flex items-center gap-gp-md whitespace-nowrap overflow-hidden"
+  }),
+  /* Avatar 28px (sm 22px) — bg via inline style (cor por entidade) */
+  avatar: chipGroup.tv({
+    base: [
+      "grid place-items-center shrink-0",
+      "size-[28px] rounded-radius-full",
+      "text-white text-[11px] font-bold"
+    ]
+  }),
+  avatarSm: chipGroup.tv({
+    base: [
+      "grid place-items-center shrink-0",
+      "size-[22px] rounded-radius-full",
+      "text-white text-[10px] font-bold"
+    ]
+  }),
+  cellLink: chipGroup.tv({
+    base: "text-fg-brand no-underline hover:underline"
+  }),
+  cellMuted: chipGroup.tv({
+    base: "text-fg-muted"
+  }),
+  /* ── Checkbox custom (16px com check rotacionado) ─────────────────── */
+  checkbox: chipGroup.tv({
+    base: [
+      "appearance-none size-[16px] cursor-pointer relative",
+      "border-[1.5px] border-border-input bg-bg-input rounded-radius-sm",
+      "transition-[background,border-color] duration-100",
+      "checked:bg-bg-brand checked:border-border-brand",
+      "indeterminate:bg-bg-brand indeterminate:border-border-brand",
+      // Check mark via ::after — retângulo rotacionado 45deg
+      "checked:after:content-[''] checked:after:absolute",
+      "checked:after:left-1/2 checked:after:top-1/2",
+      "checked:after:w-[4px] checked:after:h-[8px]",
+      "checked:after:border-solid checked:after:border-fg-on-brand",
+      "checked:after:[border-width:0_2px_2px_0]",
+      "checked:after:[transform:translate(-50%,-55%)_rotate(45deg)]",
+      // Barra indeterminate
+      "indeterminate:after:content-[''] indeterminate:after:absolute",
+      "indeterminate:after:left-1/2 indeterminate:after:top-1/2",
+      "indeterminate:after:w-[8px] indeterminate:after:h-[2px]",
+      "indeterminate:after:bg-fg-on-brand indeterminate:after:rounded-[1px]",
+      "indeterminate:after:[transform:translate(-50%,-50%)]"
+    ]
+  }),
+  /* ── Chip de categoria (pílula soft com kind) ─────────────────────── */
+  chip: chipGroup.tv({
+    base: [
+      "inline-flex items-center gap-[4px]",
+      "h-[22px] px-[8px] rounded-radius-full",
+      "text-[11px] font-semibold leading-none whitespace-nowrap"
+    ],
+    variants: {
+      kind: {
+        success: "bg-bg-success-muted text-fg-success",
+        warning: "bg-bg-warning-muted text-fg-warning",
+        info: "bg-bg-info-muted    text-fg-info",
+        danger: "bg-bg-danger-muted  text-fg-danger"
+      }
+    },
+    defaultVariants: { kind: "info" }
+  })
+};
+function TabelaTeste() {
+  const [selectedIds, setSelectedIds] = React.useState(/* @__PURE__ */ new Set());
+  const [openRowId, setOpenRowId] = React.useState(null);
+  const allSelected = selectedIds.size === ROWS_MOCK.length;
+  const someSelected = selectedIds.size > 0 && !allSelected;
+  const toggleSelect = (id) => {
+    setSelectedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  };
+  const toggleAll = () => {
+    if (selectedIds.size > 0) setSelectedIds(/* @__PURE__ */ new Set());
+    else setSelectedIds(new Set(ROWS_MOCK.map((r) => r.id)));
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "region",
+      "aria-label": "Tabela de clientes (referência)",
+      className: tabelaStyles.wrap(),
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tabelaStyles.table(), children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: tabelaStyles.thead(), role: "rowgroup", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: tabelaStyles.trHead(), role: "row", children: COLUMNS.map((col) => renderHeadCell(col, {
+          allSelected,
+          someSelected,
+          onToggleAll: toggleAll
+        })) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: tabelaStyles.tbody(), role: "rowgroup", children: ROWS_MOCK.map((row) => {
+          const isSelected = selectedIds.has(row.id);
+          const isOpen = openRowId === row.id;
+          const isHighlighted = isSelected || isOpen;
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              role: "row",
+              tabIndex: 0,
+              onClick: () => setOpenRowId((cur) => cur === row.id ? null : row.id),
+              className: `group/tr ${tabelaStyles.tr({ selected: isHighlighted })}`,
+              children: COLUMNS.map(
+                (col) => renderBodyCell(col, row, {
+                  isSelected,
+                  isHighlighted,
+                  onToggle: () => toggleSelect(row.id)
+                })
+              )
+            },
+            row.id
+          );
+        }) })
+      ] })
+    }
+  );
+}
+function renderHeadCell(col, ctx) {
+  const cellStyle = getColCellStyle(col);
+  if (col.type === "select") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        role: "columnheader",
+        className: `${tabelaStyles.thSelect()} ${tabelaStyles.cellBorderTh()}`,
+        style: cellStyle,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "checkbox",
+            className: tabelaStyles.checkbox(),
+            checked: ctx.allSelected,
+            ref: (el) => {
+              if (el) el.indeterminate = ctx.someSelected;
+            },
+            onChange: ctx.onToggleAll,
+            "aria-label": "Selecionar todas"
+          }
+        )
+      },
+      col.key
+    );
+  }
+  if (col.type === "actions") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        role: "columnheader",
+        "aria-label": "Ações",
+        className: tabelaStyles.thActions(),
+        style: cellStyle
+      },
+      col.key
+    );
+  }
+  const isBeforeActions = COLUMNS[COLUMNS.indexOf(col) + 1]?.type === "actions";
+  const borderCls = isBeforeActions ? "" : tabelaStyles.cellBorderTh();
+  const TypeIcon = col.icon;
+  const sorted = Boolean(col.sorted);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      role: "columnheader",
+      style: cellStyle,
+      className: `group/th ${tabelaStyles.th({ sorted })} ${borderCls}`,
+      children: [
+        TypeIcon && /* @__PURE__ */ jsxRuntime.jsx(TypeIcon, { strokeWidth: 1.7, className: tabelaStyles.thTypeIcon({ sorted }), "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: tabelaStyles.thLabel(), children: col.label }),
+        sorted ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: tabelaStyles.thSort(), children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: tabelaStyles.thSortIndex(), children: "1" }),
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUpDown, { size: 12, strokeWidth: 1.8 })
+        ] }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: tabelaStyles.thSortHint(), "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUpDown, { size: 11, strokeWidth: 1.8 }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: tabelaStyles.thMenu(),
+            onClick: (e) => e.stopPropagation(),
+            "aria-label": `Menu da coluna ${col.label}`,
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreVertical, { size: 15, strokeWidth: 1.7 })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: tabelaStyles.thResize(), "aria-hidden": "true" })
+      ]
+    },
+    col.key
+  );
+}
+function renderBodyCell(col, row, ctx) {
+  const cellStyle = getColCellStyle(col);
+  if (col.type === "select") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        role: "cell",
+        className: `${tabelaStyles.tdSelect()} ${tabelaStyles.cellBorderTd()}`,
+        style: cellStyle,
+        onClick: (e) => e.stopPropagation(),
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "checkbox",
+            className: tabelaStyles.checkbox(),
+            checked: ctx.isSelected,
+            onChange: ctx.onToggle,
+            "aria-label": `Selecionar ${row.name}`
+          }
+        )
+      },
+      col.key
+    );
+  }
+  if (col.type === "actions") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        role: "cell",
+        className: tabelaStyles.tdActions({ selected: ctx.isHighlighted }),
+        style: cellStyle,
+        onClick: (e) => e.stopPropagation(),
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: tabelaStyles.rowMenuBtn(),
+            "aria-label": "Ações da linha",
+            onClick: (e) => e.stopPropagation(),
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreHorizontal, { size: 16 })
+          }
+        )
+      },
+      col.key
+    );
+  }
+  const isBeforeActions = COLUMNS[COLUMNS.indexOf(col) + 1]?.type === "actions";
+  const borderCls = isBeforeActions ? "" : tabelaStyles.cellBorderTd();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "cell",
+      style: cellStyle,
+      className: `${tabelaStyles.td()} ${borderCls}`,
+      children: renderCellContent(col, row)
+    },
+    col.key
+  );
+}
+function renderCellContent(col, row) {
+  switch (col.type) {
+    case "id":
+      return /* @__PURE__ */ jsxRuntime.jsx("span", { className: tabelaStyles.cellId(), children: row.id });
+    case "person":
+      return /* @__PURE__ */ jsxRuntime.jsx(PersonCell, { row });
+    case "email":
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "a",
+        {
+          href: `mailto:${row.email}`,
+          className: tabelaStyles.cellLink(),
+          onClick: (e) => e.stopPropagation(),
+          children: row.email
+        }
+      );
+    case "phone":
+      return /* @__PURE__ */ jsxRuntime.jsx(PhoneCell, { value: row.phone });
+    case "status":
+      return /* @__PURE__ */ jsxRuntime.jsx(StatusCell, { statusId: row.statusId });
+    case "category":
+      return /* @__PURE__ */ jsxRuntime.jsx(CategoryCell, { categoryId: row.categoryId });
+    case "agent":
+      return /* @__PURE__ */ jsxRuntime.jsx(AgentCell, { agentId: row.agentId });
+    case "currency":
+      return /* @__PURE__ */ jsxRuntime.jsx("span", { className: tabelaStyles.cellCurrency(), children: formatCurrency(row.value) });
+    case "date":
+      return /* @__PURE__ */ jsxRuntime.jsx(DateCell, { value: row[col.key] });
+    case "text":
+      return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: row[col.key] });
+    default:
+      return null;
+  }
+}
+function PersonCell({ row }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: tabelaStyles.cellPerson(), title: row.name, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: tabelaStyles.avatar(), style: { background: row.avatarColor }, children: row.initials }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: tabelaStyles.cellPersonName(), children: row.name })
+  ] });
+}
+function StatusCell({ statusId }) {
+  const st = STATUSES[statusId];
+  if (!st) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: tabelaStyles.cellStatus(), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: tabelaStyles.dot(), style: { background: st.color }, "aria-hidden": true }),
+    st.label
+  ] });
+}
+function CategoryCell({ categoryId }) {
+  const c = CATEGORIES[categoryId];
+  if (!c) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: tabelaStyles.chip({ kind: c.kind }), children: c.label });
+}
+function AgentCell({ agentId }) {
+  const a = AGENTS[agentId];
+  if (!a) return /* @__PURE__ */ jsxRuntime.jsx("span", { className: tabelaStyles.cellMuted(), children: "—" });
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: tabelaStyles.cellAgent(), title: a.name, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: tabelaStyles.avatarSm(), style: { background: a.color }, children: a.initials }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { children: a.name })
+  ] });
+}
+function PhoneCell({ value }) {
+  if (!value) return /* @__PURE__ */ jsxRuntime.jsx("span", { className: tabelaStyles.cellMuted(), children: "—" });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "a",
+    {
+      href: `tel:${value.replace(/\D/g, "")}`,
+      className: tabelaStyles.cellLink(),
+      onClick: (e) => e.stopPropagation(),
+      children: value
+    }
+  );
+}
+function DateCell({ value }) {
+  if (!value) return /* @__PURE__ */ jsxRuntime.jsx("span", { className: tabelaStyles.cellMuted(), children: "—" });
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: tabelaStyles.cellDate(), children: formatDateShort(value) });
+}
+exports.AddViewModal = panel.AddViewModal;
+exports.AlertModal = panel.AlertModal;
+exports.Avatar = panel.Avatar;
+exports.BulkActionButton = panel.BulkActionButton;
+exports.BulkActionsBar = panel.BulkActionsBar;
+exports.ColsPopover = panel.ColsPopover;
+exports.DEFAULT_FILTER_OPERATORS = panel.DEFAULT_FILTER_OPERATORS;
+exports.DataTable = panel.DataTable;
+exports.DataTableActionsCell = panel.DataTableActionsCell;
+exports.DataTableEditCell = panel.DataTableEditCell;
+exports.DataTableEmpty = panel.DataTableEmpty;
+exports.DataTableFloatingBulkBar = panel.DataTableFloatingBulkBar;
+exports.DataTableLoading = panel.DataTableLoading;
+exports.DataTableNoResults = panel.DataTableNoResults;
+exports.DataTableTotalizerRow = panel.DataTableTotalizerRow;
+exports.FLOATING_PANEL_SIZE_PX = panel.FLOATING_PANEL_SIZE_PX;
+exports.FilterPopover = panel.FilterPopover;
+exports.FloatingPanel = panel.FloatingPanel;
+exports.FooterTable = panel.FooterTable;
+exports.FooterTableSkeleton = panel.FooterTableSkeleton;
+exports.FormField = panel.FormField;
+exports.FormFieldCheckbox = panel.FormFieldCheckbox;
+exports.FormFieldInput = panel.FormFieldInput;
+exports.FormFieldSelect = panel.FormFieldSelect;
+exports.FormFieldSwitch = panel.FormFieldSwitch;
+exports.FormFieldTextarea = panel.FormFieldTextarea;
+exports.Kanban = panel.Kanban;
+exports.MoreMenu = panel.MoreMenu;
+exports.Panel = panel.Panel;
+exports.PanelBody = panel.PanelBody;
+exports.PanelCloseAction = panel.SheetClose;
+exports.PanelContent = panel.SheetContent;
+exports.PanelFooter = panel.PanelFooter;
+exports.PanelHeader = panel.PanelHeader;
+exports.PanelRoot = panel.Sheet;
+exports.PanelTrigger = panel.SheetTrigger;
+exports.SELECTION_COLUMN_WIDTH = panel.SELECTION_COLUMN_WIDTH;
+exports.SortPopover = panel.SortPopover;
+exports.TABLE_HEADER_HEIGHT = panel.TABLE_HEADER_HEIGHT;
+exports.TableToolbar = panel.TableToolbar;
+exports.TableToolbarViews = panel.TableToolbarViews;
+exports.ToolbarApplied = panel.ToolbarApplied;
+exports.ToolbarDivider = panel.ToolbarDivider;
+exports.ToolbarSaveButton = panel.ToolbarSaveButton;
+exports.ToolbarSearch = panel.ToolbarSearch;
+exports.ToolbarSegmented = panel.ToolbarSegmented;
+exports.ToolbarTabs = panel.ToolbarTabs;
+exports.ToolbarToolButton = panel.ToolbarToolButton;
+exports.ViewsPopover = panel.ViewsPopover;
+exports.avatarVariants = panel.avatarVariants;
+exports.columnTypeRegistry = panel.columnTypeRegistry;
+exports.floatingPanelStyles = panel.floatingPanelStyles;
+exports.panelContainer = panel.panelContainer;
+exports.presetView = panel.presetView;
+exports.savedViewsMockService = panel.savedViewsMockService;
+exports.useColumnWidths = panel.useColumnWidths;
+exports.useDataTableContext = panel.useDataTableContext;
+exports.useFloatingPanelResize = panel.useFloatingPanelResize;
+exports.AppShell = appShell.AppShell;
+exports.Header = appShell.Header;
+exports.HeaderBreadcrumb = appShell.HeaderBreadcrumb;
+exports.HeaderMessages = appShell.HeaderMessages;
+exports.HeaderNotifications = appShell.HeaderNotifications;
+exports.HeaderSearch = appShell.HeaderSearch;
+exports.HeaderThemeSwitcher = appShell.HeaderThemeSwitcher;
+exports.InputGroup = appShell.InputGroup;
+exports.InputGroupAddon = appShell.InputGroupAddon;
+exports.InputGroupButton = appShell.InputGroupButton;
+exports.InputGroupInput = appShell.InputGroupInput;
+exports.InputGroupText = appShell.InputGroupText;
+exports.InputGroupTextarea = appShell.InputGroupTextarea;
+exports.MenuSidebar = appShell.MenuSidebar;
+exports.MoreMenuCheckboxItem = appShell.DropdownMenuCheckboxItem;
+exports.MoreMenuItem = appShell.DropdownMenuItem;
+exports.MoreMenuLabel = appShell.DropdownMenuLabel;
+exports.MoreMenuRadioGroup = appShell.DropdownMenuRadioGroup;
+exports.MoreMenuRadioItem = appShell.DropdownMenuRadioItem;
+exports.MoreMenuSeparator = appShell.DropdownMenuSeparator;
+exports.SidebarBrandIcon = appShell.SidebarBrandIcon;
+exports.SidebarItem = appShell.SidebarItem;
+exports.SidebarPanel = appShell.SidebarPanel;
+exports.SidebarPill = appShell.SidebarPill;
+exports.SidebarRail = appShell.SidebarRail;
+exports.SidebarSection = appShell.SidebarSection;
+exports.SidebarSubgroup = appShell.SidebarSubgroup;
+exports.UserMenu = appShell.UserMenu;
+exports.useControllable = appShell.useControllable;
+exports.useMediaQuery = appShell.useMediaQuery;
+exports.Button = chipGroup.Button;
+exports.Chip = chipGroup.Chip;
+exports.ChipGroup = chipGroup.ChipGroup;
+exports.ChipGroupItem = chipGroup.ChipGroupItem;
+exports.buttonVariants = chipGroup.buttonVariants;
+exports.chipCount = chipGroup.chipCount;
+exports.chipVariants = chipGroup.chipVariants;
+exports.PageHeader = pageHeader.PageHeader;
+exports.pageHeaderStyles = pageHeader.pageHeaderStyles;
+exports.Badge = badge.Badge;
+exports.Table = badge.Table;
+exports.TableBody = badge.TableBody;
+exports.TableCardRow = badge.TableCardRow;
+exports.TableCell = badge.TableCell;
+exports.TableHead = badge.TableHead;
+exports.TableHeadCell = badge.TableHeadCell;
+exports.TableRow = badge.TableRow;
+exports.badgeVariants = badge.badgeVariants;
+exports.useColumnResize = badge.useColumnResize;
+exports.Input = input.Input;
+exports.inputVariants = input.inputVariants;
+exports.Modal = Modal;
+exports.TabelaTeste = TabelaTeste;
+exports.ToolbarMobileDialog = ToolbarMobileDialog;
+exports.ToolbarMobileSection = ToolbarMobileSection;
+exports.ToolbarMobileSheet = ToolbarMobileSheet;
+exports.actionColumn = actionColumn;
+exports.currencyColumn = currencyColumn;
+exports.customColumn = customColumn;
+exports.dateColumn = dateColumn;
+exports.emailColumn = emailColumn;
+exports.numberColumn = numberColumn;
+exports.phoneColumn = phoneColumn;
+exports.statusColumn = statusColumn;
+exports.textColumn = textColumn;
+exports.useToolbarFilters = useToolbarFilters;
+exports.useToolbarSort = useToolbarSort;
+//# sourceMappingURL=index.cjs.map