@snksergio/design-system 0.19.1 → 0.30.2

package/dist-lib/chunks/badge-gU2wtxrn.cjs

@@ -1,856 +0,0 @@
-"use strict";
-const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
-const CheckboxPrimitive = require("@radix-ui/react-checkbox");
-const lucideReact = require("lucide-react");
-const chipGroup = require("./chip-group-2-f_Yo7Y.cjs");
-function _interopNamespaceDefault(e) {
-  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
-  if (e) {
-    for (const k in e) {
-      if (k !== "default") {
-        const d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: () => e[k]
-        });
-      }
-    }
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
-const CheckboxPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(CheckboxPrimitive);
-const Checkbox = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  CheckboxPrimitive__namespace.Root,
-  {
-    ref,
-    className: chipGroup.cn(
-      "peer relative flex size-4 shrink-0 items-center justify-center cursor-pointer",
-      "rounded-radius-xs",
-      "bg-bg-input dark:bg-bg-muted",
-      "border-[1.5px] border-border-input",
-      "transition-[background-color,border-color,box-shadow] outline-none",
-      "hover:border-border-default",
-      "focus-visible:shadow-sh-ring",
-      "disabled:cursor-not-allowed disabled:opacity-50",
-      "data-[state=checked]:bg-bg-brand data-[state=checked]:border-border-brand",
-      "data-[state=indeterminate]:bg-bg-brand data-[state=indeterminate]:border-border-brand",
-      className
-    ),
-    ...props,
-    children: /* @__PURE__ */ jsxRuntime.jsx(
-      CheckboxPrimitive__namespace.Indicator,
-      {
-        className: chipGroup.cn("grid place-content-center text-fg-on-brand"),
-        children: props.checked === "indeterminate" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Minus, { className: "size-3", strokeWidth: 3 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "size-3", strokeWidth: 3 })
-      }
-    )
-  }
-));
-Checkbox.displayName = CheckboxPrimitive__namespace.Root.displayName;
-const tableStyles = chipGroup.tv({
-  slots: {
-    /* Root grid container. Aplica container-type pra container queries.
-       flex flex-col: scroll child usa flex-1 min-h-0 pra esticar quando há altura forçada
-       (consumer aplica `max-h-[Npx]` no Table) ou pegar altura natural quando não há. */
-    root: [
-      "relative flex flex-col w-full",
-      "bg-bg-table border border-border-table rounded-radius-xl shadow-sh-sm",
-      "overflow-hidden",
-      "[container-type:inline-size]"
-    ],
-    /* Container que faz o scroll (envolve head + body).
-       flex-1 + min-h-0: estica até preencher o root quando há altura forçada;
-       caso contrário, altura natural do conteúdo (flex-1 sem espaço extra = no-op).
-       overflow-auto: scroll-X sempre disponível (colunas largas); scroll-Y só ativa
-       quando o conteúdo excede a altura (que só acontece com max-h externo).
-       scrollbar-thin: classe global do projeto (globals.css) — alpha responsivo light/dark. */
-    scroll: [
-      "flex-1 min-h-0 overflow-auto relative",
-      "scrollbar-thin"
-    ],
-    /* Header row (flex de TableHeadCell). Sticky default. */
-    head: [
-      "flex w-max min-w-full",
-      "bg-bg-table-head border-b border-border-table",
-      "z-20"
-    ],
-    /* Cell do header — type, padding, alinhamento. */
-    headCell: [
-      "relative flex items-center gap-gp-md shrink-0",
-      "h-[42px] px-pad-2xl",
-      "text-body-sm font-semibold leading-none",
-      "text-fg-muted",
-      "select-none",
-      "hover:text-fg-default"
-    ],
-    /* Body container — contém as rows. */
-    body: [
-      "flex flex-col w-max min-w-full"
-    ],
-    /* Row (flex de TableCell). */
-    row: [
-      "group/row relative flex w-full",
-      "border-b border-border-table last:border-b-0",
-      "bg-bg-table",
-      "transition-colors duration-150"
-    ],
-    /* Cell — content cell padrão. */
-    cell: [
-      "flex items-center shrink-0",
-      "px-pad-2xl",
-      "text-body-sm font-normal text-fg-default",
-      "whitespace-nowrap overflow-hidden"
-    ],
-    /* Drag handle do resize — barrinha invisível no edge direito.
-       Apenas a linha dentro do header (after:). Sem projeção pra baixo (before:)
-       porque pseudo-elements absolute COM h-screen ainda contam pro scrollHeight
-       do ancestral com overflow-auto, esticando o body verticalmente. */
-    resizeHandle: [
-      "absolute right-0 top-0 bottom-0 w-[6px] cursor-col-resize z-10",
-      // Linha 1px vertical dentro do header — aparece no hover do TH
-      "after:content-[''] after:absolute after:left-1/2 after:-translate-x-1/2",
-      "after:top-[8px] after:bottom-[8px] after:w-px after:bg-transparent",
-      "after:transition-all after:duration-150",
-      "group-hover/headcell:after:bg-border-default",
-      // Hover direto no handle → linha brand 2px full-height
-      "hover:after:bg-bg-brand hover:after:w-[2px] hover:after:top-0 hover:after:bottom-0",
-      // DRAG ATIVO → mantém linha brand visível independente do :hover
-      "data-[dragging=true]:after:bg-bg-brand data-[dragging=true]:after:w-[2px] data-[dragging=true]:after:top-0 data-[dragging=true]:after:bottom-0"
-    ],
-    /* Ícone de sort no head cell. */
-    sortIcon: [
-      "shrink-0 size-icon-xs",
-      "transition-opacity duration-150"
-    ],
-    /* Ícone de tipo de coluna no head (Hash, User, AtSign…). */
-    typeIcon: [
-      "shrink-0 size-[13px] text-fg-muted opacity-70",
-      "group-hover/headcell:opacity-100"
-    ],
-    /* Badge brand com índice de sort (1, 2, 3). */
-    sortBadge: [
-      "inline-flex items-center justify-center shrink-0",
-      "min-w-[18px] h-[18px] px-[5px]",
-      "rounded-radius-xs bg-bg-brand text-fg-on-brand",
-      "text-caption-xs font-bold leading-none tabular-nums"
-    ],
-    /* Stack absolute na borda direita do head cell — agrupa sort e headMenu.
-       Largura dinâmica: encolhe quando itens estão "hidden", cresce quando aparecem no hover. */
-    headRightStack: [
-      "absolute right-pad-md top-1/2 -translate-y-1/2 z-[1]",
-      // 8px de respiro da borda direita
-      "inline-flex items-center gap-gp-xs",
-      "bg-bg-table-head pl-pad-xs",
-      "pointer-events-none"
-    ],
-    /* Sort ativo (asc/desc) — sempre visível quando isSorted=true. */
-    headSortActive: [
-      "inline-flex items-center gap-gp-xs shrink-0",
-      "text-fg-default"
-    ],
-    /* Sort hint (sortable mas inativo) — display:none default, inline-flex no hover.
-       Como é display:none, NÃO ocupa espaço no stack até aparecer. */
-    headSortHint: [
-      "hidden group-hover/headcell:inline-flex items-center shrink-0",
-      "text-fg-muted opacity-60"
-    ],
-    /* Head menu wrapper — display:none default, inline-flex no hover.
-       Tem pointer-events:auto pra restaurar interatividade (parent stack tem pointer-events:none). */
-    headMenuItem: [
-      // Esconde por padrao; revela quando:
-      //   1. hover no header (group-hover) — UX padrao
-      //   2. focus interno (focus-within) — keyboard navigation
-      //   3. dropdown interno aberto (:has data-state=open) — mantem visivel
-      //      enquanto user move cursor pra dentro do menu portal
-      //   4. data-menu-active=true no botao — mantem visivel durante a janela
-      //      de close animation (~200ms) pra portal nao perder a ancora
-      "hidden items-center shrink-0",
-      "group-hover/headcell:inline-flex",
-      "focus-within:inline-flex",
-      "has-[[data-state=open]]:inline-flex",
-      "has-[[data-menu-active=true]]:inline-flex",
-      "pointer-events-auto"
-    ],
-    /* Card mode — wrapper de cada row no modo card. */
-    cardWrap: [
-      "flex flex-col w-full p-pad-card-sm gap-gp-md",
-      "border-b border-border-table last:border-b-0",
-      "bg-bg-table"
-    ],
-    /* Card mode — header do card (primary + checkbox + actions). */
-    cardHeader: [
-      "flex items-center justify-between gap-gp-md"
-    ],
-    /* Card mode — body items (label/value). */
-    cardItem: [
-      "flex flex-col gap-gp-2xs"
-    ],
-    /* Card mode — label da coluna acima do valor. */
-    cardLabel: [
-      "text-body-xs uppercase tracking-wider text-fg-muted"
-    ],
-    /* Card mode — valor abaixo do label. */
-    cardValue: [
-      "text-body-md text-fg-default"
-    ]
-  },
-  variants: {
-    // ⚠️ Alturas de row por densidade. DEVEM casar com `DENSITY_ROW_HEIGHT` em
-    // `DataTable/data-table.constants.ts` (usado pela estimativa do virtualizer).
-    // Mudou aqui → mudar lá, senão o scroll virtual desalinha.
-    density: {
-      compact: { row: "h-[40px]", cell: "py-0", headCell: "" },
-      standard: { row: "h-[56px]", cell: "py-0", headCell: "" },
-      comfortable: { row: "h-[64px]", cell: "py-0", headCell: "" }
-    },
-    sticky: {
-      true: { head: "sticky top-0" },
-      false: {}
-    },
-    selected: {
-      true: {
-        row: [
-          "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(" "),
-        cardWrap: "bg-bg-table-row-selected hover:bg-bg-table-row-selected-hover"
-      },
-      false: {
-        row: "hover:bg-bg-table-row-hover",
-        cardWrap: "hover:bg-bg-table-row-hover"
-      }
-    },
-    clickable: {
-      true: { row: "cursor-pointer", cardWrap: "cursor-pointer" },
-      false: {}
-    },
-    pinned: {
-      // `bg-inherit` cobre o conteúdo scrollado nos estados normais (row bg opaco).
-      // Quando a row está destacada (`data-highlighted` via group/row), o bg da row
-      // é color-mix com transparent → trocamos pro token SÓLIDO pra não vazar.
-      // Hover usa variante de grupo ARBITRÁRIA única (`[[data-highlighted]:hover]`)
-      // — encadear dois `group-*/row` geraria descendente aninhado (não casa).
-      left: {
-        headCell: "sticky z-10 bg-bg-table-head",
-        cell: "sticky z-[5] bg-inherit group-data-[highlighted]/row:bg-bg-table-row-selected-solid group-[[data-highlighted]:hover]/row:bg-bg-table-row-selected-hover-solid"
-      },
-      right: {
-        headCell: "sticky z-10 bg-bg-table-head",
-        cell: "sticky z-[5] bg-inherit group-data-[highlighted]/row:bg-bg-table-row-selected-solid group-[[data-highlighted]:hover]/row:bg-bg-table-row-selected-hover-solid"
-      }
-    },
-    align: {
-      left: { cell: "justify-start text-left", headCell: "justify-start text-left" },
-      center: { cell: "justify-center text-center", headCell: "justify-center text-center" },
-      right: { cell: "justify-end text-right", headCell: "justify-end text-right" }
-    },
-    sortable: {
-      true: { headCell: "cursor-pointer hover:text-fg-default" },
-      false: {}
-    },
-    ellipsis: {
-      true: { cell: "overflow-hidden [&>*]:truncate" },
-      false: {}
-    },
-    cellBorders: {
-      true: {
-        // `:has(+ [data-purpose='actions'])`: a cell ANTES da coluna actions
-        // perde border-right — evita o divider visual encostado na actions.
-        headCell: "border-r border-border-table last:border-r-0 has-[+_[data-purpose='actions']]:border-r-0",
-        cell: "border-r border-border-table last:border-r-0 has-[+_[data-purpose='actions']]:border-r-0"
-      },
-      false: {}
-    },
-    /** Variant pra cells de coluna especial (selection / actions).
-     *
-     *  - `selection`: remove padding pra checkbox 28px caber em 56px e centralizar.
-     *  - `actions`: header em branco (sem texto/menu), sem border-right, padding
-     *    horizontal mínimo. Usado quando `type: "actions"` no DataTableColumnDef.
-     *    Border-right removida via `!border-r-0` (override do cellBorders=true). */
-    purpose: {
-      default: {},
-      selection: {
-        // Sem padding + centralizado: checkbox 28px fica no meio dos 56px.
-        // justify-center sobrescreve o align default (left) — coluna de seleção
-        // sempre centraliza, sem o consumer precisar passar align="center".
-        headCell: "px-0 py-0 justify-center",
-        cell: "px-0 py-0 justify-center"
-      },
-      actions: {
-        headCell: "!border-r-0 px-pad-md",
-        cell: "!border-r-0 px-pad-md"
-      }
-    }
-  },
-  defaultVariants: {
-    density: "standard",
-    sticky: true,
-    selected: false,
-    clickable: false,
-    align: "left",
-    sortable: false,
-    ellipsis: false,
-    cellBorders: true,
-    purpose: "default"
-  }
-});
-const DEFAULT_MIN = 60;
-const DEFAULT_MAX = 800;
-function useColumnResize({
-  currentWidth,
-  minWidth = DEFAULT_MIN,
-  maxWidth = DEFAULT_MAX,
-  onResize,
-  onResizeEnd,
-  onResizeLiveDOM
-}) {
-  const [isDragging, setIsDragging] = React.useState(false);
-  const onResizeRef = React.useRef(onResize);
-  const onResizeEndRef = React.useRef(onResizeEnd);
-  const onResizeLiveDOMRef = React.useRef(onResizeLiveDOM);
-  const minRef = React.useRef(minWidth);
-  const maxRef = React.useRef(maxWidth);
-  onResizeRef.current = onResize;
-  onResizeEndRef.current = onResizeEnd;
-  onResizeLiveDOMRef.current = onResizeLiveDOM;
-  minRef.current = minWidth;
-  maxRef.current = maxWidth;
-  const stateRef = React.useRef({ startX: 0, startWidth: 0, lastWidth: currentWidth, dragging: false });
-  stateRef.current.lastWidth = currentWidth;
-  const handlersRef = React.useRef(null);
-  if (!handlersRef.current) {
-    handlersRef.current = {
-      move: (e) => {
-        if (!stateRef.current.dragging) return;
-        const delta = e.clientX - stateRef.current.startX;
-        const next = Math.min(
-          maxRef.current,
-          Math.max(minRef.current, stateRef.current.startWidth + delta)
-        );
-        stateRef.current.lastWidth = next;
-        onResizeLiveDOMRef.current?.(next);
-        onResizeRef.current?.(next);
-      },
-      up: () => {
-        if (!stateRef.current.dragging) return;
-        stateRef.current.dragging = false;
-        setIsDragging(false);
-        document.removeEventListener("mousemove", handlersRef.current.move);
-        document.removeEventListener("mouseup", handlersRef.current.up);
-        document.body.style.cursor = "";
-        document.body.style.userSelect = "";
-        onResizeEndRef.current?.(stateRef.current.lastWidth);
-      }
-    };
-  }
-  const onMouseDown = React.useCallback(
-    (e) => {
-      e.preventDefault();
-      e.stopPropagation();
-      stateRef.current = {
-        startX: e.clientX,
-        startWidth: currentWidth,
-        lastWidth: currentWidth,
-        dragging: true
-      };
-      setIsDragging(true);
-      document.addEventListener("mousemove", handlersRef.current.move);
-      document.addEventListener("mouseup", handlersRef.current.up);
-      document.body.style.cursor = "col-resize";
-      document.body.style.userSelect = "none";
-    },
-    [currentWidth]
-  );
-  React.useEffect(() => {
-    return () => {
-      if (stateRef.current.dragging && handlersRef.current) {
-        document.removeEventListener("mousemove", handlersRef.current.move);
-        document.removeEventListener("mouseup", handlersRef.current.up);
-        document.body.style.cursor = "";
-        document.body.style.userSelect = "";
-      }
-    };
-  }, []);
-  return {
-    onMouseDown,
-    isDragging
-  };
-}
-const TableContext = React.createContext({
-  density: "standard",
-  cellBorders: true,
-  resizingField: null,
-  setResizingField: () => {
-  },
-  isScrolled: false
-});
-function useTableContext() {
-  return React.useContext(TableContext);
-}
-const styles$1 = tableStyles();
-function Table({
-  density = "standard",
-  cardBreakpoint = 768,
-  cellBorders = true,
-  ariaLabel,
-  className,
-  scrollRef: externalScrollRef,
-  children
-}) {
-  const cardCss = cardBreakpoint === false ? void 0 : { "--table-card-bp": `${cardBreakpoint}px` };
-  const [resizingField, setResizingField] = React.useState(null);
-  const [isScrolled, setIsScrolled] = React.useState(false);
-  const internalScrollRef = React.useRef(null);
-  const scrollRef = externalScrollRef ?? internalScrollRef;
-  React.useEffect(() => {
-    const el = scrollRef.current;
-    if (!el) return;
-    const onScroll = () => setIsScrolled(el.scrollTop > 0);
-    el.addEventListener("scroll", onScroll, { passive: true });
-    onScroll();
-    return () => el.removeEventListener("scroll", onScroll);
-  }, [scrollRef]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    TableContext.Provider,
-    {
-      value: { density, cellBorders, resizingField, setResizingField, isScrolled },
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          role: "grid",
-          "aria-label": ariaLabel,
-          "data-density": density,
-          "data-resizing-col": resizingField ?? void 0,
-          className: chipGroup.cn(styles$1.root(), className),
-          style: cardCss,
-          children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: scrollRef, className: styles$1.scroll(), children })
-        }
-      )
-    }
-  );
-}
-function TableHead({
-  sticky = true,
-  className,
-  rootProps,
-  children
-}) {
-  const { isScrolled } = useTableContext();
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      ...rootProps,
-      role: "rowgroup",
-      "data-scrolled": isScrolled ? "true" : void 0,
-      className: chipGroup.cn(tableStyles({ sticky }).head(), className),
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { role: "row", className: "flex w-full", children })
-    }
-  );
-}
-function TableBody({
-  className,
-  style,
-  rootProps,
-  virtualized,
-  children
-}) {
-  const virtualStyle = virtualized ? {
-    height: virtualized.totalHeight,
-    position: "relative",
-    minWidth: "100%",
-    ...style
-  } : style;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      ...rootProps,
-      role: "rowgroup",
-      className: chipGroup.cn(
-        styles$1.body(),
-        virtualized && "!block",
-        className
-      ),
-      style: virtualStyle,
-      children
-    }
-  );
-}
-const TableRow = React.forwardRef(function TableRow2({
-  selected = false,
-  open = false,
-  focused = false,
-  clickable,
-  onClick,
-  className,
-  rootProps,
-  children
-}, ref) {
-  const { density } = useTableContext();
-  const isClickable = clickable ?? !!onClick;
-  const highlighted = selected || open;
-  const solidPinned = highlighted || focused;
-  const dataState = selected && open ? "selected open" : selected ? "selected" : open ? "open" : void 0;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      ...rootProps,
-      ref,
-      role: "row",
-      "aria-selected": selected || void 0,
-      "data-state": dataState,
-      "data-focused": focused || void 0,
-      "data-highlighted": solidPinned || void 0,
-      tabIndex: focused ? 0 : -1,
-      className: chipGroup.cn(
-        "group/row",
-        tableStyles({ selected: highlighted, clickable: isClickable, density }).row(),
-        // Focus visual — bg tinted (match checkbox selected) + borda brand interna.
-        // A borda vem de um overlay ::after com z-[7] (ACIMA do pinned cell z-[5]):
-        // `outline` no row era pintado SOB as sticky cells (bg opaco) e quebrava
-        // no topo/embaixo na coluna fixa. O overlay desenha por cima, contínuo.
-        focused && "bg-bg-table-row-selected hover:bg-bg-table-row-selected-hover z-[6] relative after:content-[''] after:absolute after:inset-0 after:z-[7] after:pointer-events-none after:border-2 after:border-bg-brand",
-        className
-      ),
-      onClick,
-      children
-    }
-  );
-});
-const TableCell = React.forwardRef(function TableCell2({
-  field,
-  tooltip,
-  width,
-  pinned,
-  pinOffset,
-  align = "left",
-  ellipsis = false,
-  label,
-  className,
-  rootProps,
-  purpose = "default",
-  children
-}, ref) {
-  const { density, cellBorders, resizingField } = useTableContext();
-  const isResizingThisCol = field !== void 0 && resizingField === field;
-  const style = {};
-  if (width !== void 0) {
-    style.width = width;
-    style.minWidth = width;
-    style.maxWidth = width;
-  }
-  if (pinned === "left" && pinOffset !== void 0) style.left = pinOffset;
-  if (pinned === "right" && pinOffset !== void 0) style.right = pinOffset;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      ...rootProps,
-      ref,
-      role: "gridcell",
-      "data-pinned": pinned,
-      "data-label": label,
-      "data-field": field,
-      "data-purpose": purpose,
-      "data-resize-active": isResizingThisCol ? "true" : void 0,
-      title: tooltip,
-      className: chipGroup.cn(
-        tableStyles({ pinned, align, ellipsis, density, cellBorders, purpose }).cell(),
-        // Linha brand 2px alinhada com o centro do resize handle do header (~2px do edge)
-        isResizingThisCol && "relative after:absolute after:right-[2px] after:top-0 after:bottom-0 after:w-[2px] after:bg-bg-brand after:pointer-events-none",
-        className
-      ),
-      style,
-      children
-    }
-  );
-});
-const TableHeadCell = React.forwardRef(function TableHeadCell2({
-  field,
-  width,
-  pinned,
-  pinOffset,
-  align = "left",
-  sortable = false,
-  sortDirection = null,
-  sortIndex = 1,
-  onSortClick,
-  icon: Icon,
-  headMenu,
-  resizable,
-  onResize,
-  onResizeEnd,
-  className,
-  style: extraStyle,
-  rootProps,
-  purpose = "default",
-  children
-}, forwardedRef) {
-  const { density, cellBorders, setResizingField } = useTableContext();
-  const headCellRef = React.useRef(null);
-  const setRefs = React.useCallback((el) => {
-    headCellRef.current = el;
-    if (typeof forwardedRef === "function") forwardedRef(el);
-    else if (forwardedRef) forwardedRef.current = el;
-  }, [forwardedRef]);
-  const resize = useColumnResize({
-    currentWidth: width ?? 160,
-    // Live DOM update — escreve `style.width` direto nas cells com `data-field`
-    // correspondente, escopado ao `[role="grid"]` ancestral. Síncrono, sem React,
-    // zero re-render durante o drag. Documented hook API via `onResizeLiveDOM`
-    // (vs `onResize` que vai pro state externo, normalmente debounced ao mouseup).
-    onResizeLiveDOM: field ? (w) => {
-      const grid = headCellRef.current?.closest('[role="grid"]');
-      grid?.querySelectorAll(`[data-field="${field}"]`).forEach((el) => {
-        el.style.width = `${w}px`;
-        el.style.minWidth = `${w}px`;
-        el.style.maxWidth = `${w}px`;
-      });
-    } : void 0,
-    onResize,
-    onResizeEnd
-  });
-  React.useEffect(() => {
-    if (resize.isDragging && field) {
-      setResizingField(field);
-      return () => setResizingField(null);
-    }
-  }, [resize.isDragging, field, setResizingField]);
-  const style = {};
-  if (width !== void 0) {
-    style.width = width;
-    style.minWidth = width;
-    style.maxWidth = width;
-  }
-  if (pinned === "left" && pinOffset !== void 0) style.left = pinOffset;
-  if (pinned === "right" && pinOffset !== void 0) style.right = pinOffset;
-  const ariaSort = sortable ? sortDirection === "asc" ? "ascending" : sortDirection === "desc" ? "descending" : "none" : void 0;
-  const isSorted = sortDirection === "asc" || sortDirection === "desc";
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      ...rootProps,
-      ref: setRefs,
-      role: "columnheader",
-      "aria-sort": ariaSort,
-      "data-pinned": pinned,
-      "data-sort": sortDirection ?? void 0,
-      "data-field": field,
-      "data-purpose": purpose,
-      className: chipGroup.cn(
-        "group/headcell",
-        tableStyles({ pinned, align, sortable, density, cellBorders, purpose }).headCell(),
-        className
-      ),
-      style: { ...style, ...extraStyle },
-      onClick: sortable ? onSortClick : void 0,
-      children: [
-        Icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: styles$1.typeIcon(), size: 13, strokeWidth: 1.7, "aria-hidden": true }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "span",
-          {
-            className: chipGroup.cn(
-              "flex-1 min-w-0",
-              // Coluna de seleção (checkbox) centraliza por padrão — sem precisar
-              // de align="center" no consumer (alinha com o purpose="selection").
-              align === "center" || purpose === "selection" ? "flex items-center justify-center" : align === "right" ? chipGroup.cn(
-                "truncate text-right",
-                // Reserva espaço pro headRightStack APENAS quando sort está
-                // ATIVO (sort badge + indicator visíveis permanentemente).
-                // Para hover-only icons (sortable hint sem sort + headMenu),
-                // NÃO reserva espaço — headRightStack tem `bg-bg-table-head`
-                // que mascara o texto durante hover. Texto right-aligned
-                // encosta corretamente na borda quando sem hover (antes
-                // ficava com ~60px de "vazio" reservado pros ícones invisíveis).
-                isSorted && "pr-[60px]"
-              ) : "truncate text-left"
-            ),
-            children
-          }
-        ),
-        (sortable || headMenu) && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles$1.headRightStack(), children: [
-          isSorted && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles$1.headSortActive(), children: [
-            sortIndex !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles$1.sortBadge(), children: sortIndex }),
-            /* @__PURE__ */ jsxRuntime.jsx(SortIndicator, { direction: sortDirection })
-          ] }),
-          sortable && !isSorted && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles$1.headSortHint(), children: /* @__PURE__ */ jsxRuntime.jsx(SortIndicator, { direction: null }) }),
-          headMenu && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles$1.headMenuItem(), children: headMenu })
-        ] }),
-        resizable && /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: styles$1.resizeHandle(),
-            "data-dragging": resize.isDragging,
-            onPointerDown: (e) => e.stopPropagation(),
-            onMouseDown: resize.onMouseDown,
-            onClick: (e) => e.stopPropagation(),
-            onMouseEnter: () => field && setResizingField(field),
-            onMouseLeave: () => {
-              if (!resize.isDragging) setResizingField(null);
-            },
-            "aria-hidden": true
-          }
-        )
-      ]
-    }
-  );
-});
-function SortIndicator({ direction }) {
-  if (direction === "asc") return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUp, { className: styles$1.sortIcon(), "aria-hidden": true });
-  if (direction === "desc") return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDown, { className: styles$1.sortIcon(), "aria-hidden": true });
-  return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUpDown, { className: styles$1.sortIcon(), "aria-hidden": true });
-}
-const styles = tableStyles();
-function TableCardRow({
-  header,
-  headerActions,
-  items,
-  selected = false,
-  open = false,
-  clickable,
-  onClick,
-  className
-}) {
-  const isClickable = clickable ?? !!onClick;
-  const highlighted = selected || open;
-  const handleClick = (e) => {
-    if (!onClick) return;
-    if (e.target.closest(
-      'button, a, input, label, [role="menu"], [role="menuitem"], [data-slot="card-actions"]'
-    )) {
-      return;
-    }
-    onClick(e);
-  };
-  const dataState = selected && open ? "selected open" : selected ? "selected" : open ? "open" : void 0;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      role: "article",
-      "aria-selected": selected || void 0,
-      "data-state": dataState,
-      className: chipGroup.cn(
-        tableStyles({ selected: highlighted, clickable: isClickable }).cardWrap(),
-        className
-      ),
-      onClick: handleClick,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.cardHeader(), children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-gp-md min-w-0", children: header }),
-          headerActions && /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              className: "flex items-center gap-gp-xs shrink-0",
-              "data-slot": "card-actions",
-              children: headerActions
-            }
-          )
-        ] }),
-        items.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-gp-md", children: items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.cardItem(), children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.cardLabel(), children: item.label }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.cardValue(), children: item.value })
-        ] }, item.key ?? i)) })
-      ]
-    }
-  );
-}
-const badgeVariants = chipGroup.tv({
-  base: [
-    "inline-flex items-center justify-center",
-    "border border-transparent",
-    "font-semibold leading-none whitespace-nowrap",
-    "transition-colors",
-    "focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring-secondary",
-    "[&_svg]:pointer-events-none [&_svg]:shrink-0"
-  ],
-  variants: {
-    color: {
-      primary: "",
-      secondary: "",
-      critical: "",
-      success: "",
-      warning: "",
-      info: ""
-    },
-    variant: {
-      solid: "",
-      soft: "",
-      outline: "bg-transparent",
-      ghost: "bg-transparent border-transparent"
-    },
-    size: {
-      sm: "h-comp-2xs px-pad-sm text-caption-xs gap-gp-2xs [&_svg]:size-3",
-      // 20px / 6 / 10
-      md: "h-comp-xs px-pad-md text-body-xs gap-gp-xs [&_svg]:size-3.5",
-      // 24px / 8 / 12 (default)
-      lg: "h-comp-sm px-pad-lg text-body-sm font-normal gap-gp-sm [&_svg]:size-4"
-      // 28px / 10 / 13
-    },
-    shape: {
-      default: "rounded-radius-sm",
-      // 6px — counter, value tags
-      pill: "rounded-radius-full"
-      // pill — status chips
-    }
-  },
-  compoundVariants: [
-    /* ── Primary (brand) ─────────────────────────────────────────────── */
-    { color: "primary", variant: "solid", class: "bg-bg-brand text-fg-on-brand" },
-    { color: "primary", variant: "soft", class: "bg-bg-brand-subtle text-fg-brand" },
-    { color: "primary", variant: "outline", class: "border-border-brand text-fg-brand" },
-    { color: "primary", variant: "ghost", class: "text-fg-brand" },
-    /* ── Secondary (neutral) ─────────────────────────────────────────── */
-    { color: "secondary", variant: "solid", class: "bg-bg-emphasis text-fg-default" },
-    { color: "secondary", variant: "soft", class: "bg-bg-muted text-fg-muted" },
-    { color: "secondary", variant: "outline", class: "border-border-default text-fg-default" },
-    { color: "secondary", variant: "ghost", class: "text-fg-muted" },
-    /* ── Critical (danger) ───────────────────────────────────────────── */
-    { color: "critical", variant: "solid", class: "bg-bg-danger text-fg-on-danger" },
-    { color: "critical", variant: "soft", class: "bg-bg-danger-muted text-fg-danger" },
-    { color: "critical", variant: "outline", class: "border-border-danger-muted text-fg-danger" },
-    { color: "critical", variant: "ghost", class: "text-fg-danger" },
-    /* ── Success ─────────────────────────────────────────────────────── */
-    { color: "success", variant: "solid", class: "bg-bg-success text-fg-on-success" },
-    { color: "success", variant: "soft", class: "bg-bg-success-muted text-fg-success" },
-    { color: "success", variant: "outline", class: "border-border-success-muted text-fg-success" },
-    { color: "success", variant: "ghost", class: "text-fg-success" },
-    /* ── Warning ─────────────────────────────────────────────────────── */
-    { color: "warning", variant: "solid", class: "bg-bg-warning text-fg-on-warning" },
-    { color: "warning", variant: "soft", class: "bg-bg-warning-muted text-fg-warning" },
-    { color: "warning", variant: "outline", class: "border-border-warning-muted text-fg-warning" },
-    { color: "warning", variant: "ghost", class: "text-fg-warning" },
-    /* ── Info ────────────────────────────────────────────────────────── */
-    { color: "info", variant: "solid", class: "bg-bg-info text-fg-on-info" },
-    { color: "info", variant: "soft", class: "bg-bg-info-muted text-fg-info" },
-    { color: "info", variant: "outline", class: "border-border-info-muted text-fg-info" },
-    { color: "info", variant: "ghost", class: "text-fg-info" }
-  ],
-  defaultVariants: {
-    color: "secondary",
-    variant: "soft",
-    size: "md",
-    shape: "default"
-  }
-});
-function Badge({ className, color, variant, size, shape, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "span",
-    {
-      className: badgeVariants({ color, variant, size, shape, className }),
-      ...props
-    }
-  );
-}
-exports.Badge = Badge;
-exports.Checkbox = Checkbox;
-exports.Table = Table;
-exports.TableBody = TableBody;
-exports.TableCardRow = TableCardRow;
-exports.TableCell = TableCell;
-exports.TableHead = TableHead;
-exports.TableHeadCell = TableHeadCell;
-exports.TableRow = TableRow;
-exports.badgeVariants = badgeVariants;
-exports.useColumnResize = useColumnResize;
-//# sourceMappingURL=badge-gU2wtxrn.cjs.map