@snksergio/design-system 0.1.0

package/dist-lib/chunks/badge-B_2Zt52o.mjs

@@ -0,0 +1,797 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { useState, useRef, useCallback, useEffect, createContext, forwardRef, useContext } from "react";
+import { ArrowUp, ArrowDown, ArrowUpDown, Minus, Check } from "lucide-react";
+import { t as tv, c as cn } from "./chip-group-D3D0i72q.mjs";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+const tableStyles = 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-[13px] 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-[13px] 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-[10.5px] 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-subheading-xs text-fg-muted"
+    ],
+    /* Card mode — valor abaixo do label. */
+    cardValue: [
+      "text-paragraph-sm text-fg-default"
+    ]
+  },
+  variants: {
+    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: {
+      left: { headCell: "sticky z-10 bg-bg-table-head", cell: "sticky z-[5] bg-inherit" },
+      right: { headCell: "sticky z-10 bg-bg-table-head", cell: "sticky z-[5] bg-inherit" }
+    },
+    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: {
+        headCell: "px-0 py-0",
+        cell: "px-0 py-0"
+      },
+      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] = useState(false);
+  const onResizeRef = useRef(onResize);
+  const onResizeEndRef = useRef(onResizeEnd);
+  const onResizeLiveDOMRef = useRef(onResizeLiveDOM);
+  const minRef = useRef(minWidth);
+  const maxRef = useRef(maxWidth);
+  onResizeRef.current = onResize;
+  onResizeEndRef.current = onResizeEnd;
+  onResizeLiveDOMRef.current = onResizeLiveDOM;
+  minRef.current = minWidth;
+  maxRef.current = maxWidth;
+  const stateRef = useRef({ startX: 0, startWidth: 0, lastWidth: currentWidth, dragging: false });
+  stateRef.current.lastWidth = currentWidth;
+  const handlersRef = 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 = 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]
+  );
+  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 = createContext({
+  density: "standard",
+  cellBorders: true,
+  resizingField: null,
+  setResizingField: () => {
+  },
+  isScrolled: false
+});
+function useTableContext() {
+  return 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] = useState(null);
+  const [isScrolled, setIsScrolled] = useState(false);
+  const internalScrollRef = useRef(null);
+  const scrollRef = externalScrollRef ?? internalScrollRef;
+  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__ */ jsx(
+    TableContext.Provider,
+    {
+      value: { density, cellBorders, resizingField, setResizingField, isScrolled },
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          role: "grid",
+          "aria-label": ariaLabel,
+          "data-density": density,
+          "data-resizing-col": resizingField ?? void 0,
+          className: cn(styles$1.root(), className),
+          style: cardCss,
+          children: /* @__PURE__ */ jsx("div", { ref: scrollRef, className: styles$1.scroll(), children })
+        }
+      )
+    }
+  );
+}
+function TableHead({
+  sticky = true,
+  className,
+  rootProps,
+  children
+}) {
+  const { isScrolled } = useTableContext();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...rootProps,
+      role: "rowgroup",
+      "data-scrolled": isScrolled ? "true" : void 0,
+      className: cn(tableStyles({ sticky }).head(), className),
+      children: /* @__PURE__ */ 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__ */ jsx(
+    "div",
+    {
+      ...rootProps,
+      role: "rowgroup",
+      className: cn(
+        styles$1.body(),
+        virtualized && "!block",
+        className
+      ),
+      style: virtualStyle,
+      children
+    }
+  );
+}
+const TableRow = 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 dataState = selected && open ? "selected open" : selected ? "selected" : open ? "open" : void 0;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...rootProps,
+      ref,
+      role: "row",
+      "aria-selected": selected || void 0,
+      "data-state": dataState,
+      "data-focused": focused || void 0,
+      tabIndex: focused ? 0 : -1,
+      className: cn(
+        tableStyles({ selected: highlighted, clickable: isClickable, density }).row(),
+        // Focus visual — bg tinted (match checkbox selected) + outline brand interno.
+        // Outline em vez de ring/border pra não interferir com sticky/bordas.
+        focused && "bg-bg-table-row-selected hover:bg-bg-table-row-selected-hover outline outline-2 outline-offset-[-2px] outline-bg-brand z-[6] relative",
+        className
+      ),
+      onClick,
+      children
+    }
+  );
+});
+const TableCell = 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__ */ 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: 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 = 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 = useRef(null);
+  const setRefs = 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
+  });
+  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__ */ 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: cn(
+        "group/headcell",
+        tableStyles({ pinned, align, sortable, density, cellBorders, purpose }).headCell(),
+        className
+      ),
+      style: { ...style, ...extraStyle },
+      onClick: sortable ? onSortClick : void 0,
+      children: [
+        Icon && /* @__PURE__ */ jsx(Icon, { className: styles$1.typeIcon(), size: 13, strokeWidth: 1.7, "aria-hidden": true }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "flex-1 min-w-0",
+              align === "center" ? "flex items-center justify-center" : align === "right" ? cn(
+                "truncate text-right",
+                // Reserva espaço pro headRightStack (absolute right-pad-md ~8px +
+                // sort badge + sort indicator + headMenu button + gaps) quando há
+                // algo a renderizar. Sem isso, o texto right-aligned é coberto pelo
+                // stack quando aparece no hover (bg-bg-table-head do stack mascara).
+                (sortable || headMenu) && "pr-[60px]"
+              ) : "truncate text-left"
+            ),
+            children
+          }
+        ),
+        (sortable || headMenu) && /* @__PURE__ */ jsxs("span", { className: styles$1.headRightStack(), children: [
+          isSorted && /* @__PURE__ */ jsxs("span", { className: styles$1.headSortActive(), children: [
+            sortIndex !== void 0 && /* @__PURE__ */ jsx("span", { className: styles$1.sortBadge(), children: sortIndex }),
+            /* @__PURE__ */ jsx(SortIndicator, { direction: sortDirection })
+          ] }),
+          sortable && !isSorted && /* @__PURE__ */ jsx("span", { className: styles$1.headSortHint(), children: /* @__PURE__ */ jsx(SortIndicator, { direction: null }) }),
+          headMenu && /* @__PURE__ */ jsx("span", { className: styles$1.headMenuItem(), children: headMenu })
+        ] }),
+        resizable && /* @__PURE__ */ 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__ */ jsx(ArrowUp, { className: styles$1.sortIcon(), "aria-hidden": true });
+  if (direction === "desc") return /* @__PURE__ */ jsx(ArrowDown, { className: styles$1.sortIcon(), "aria-hidden": true });
+  return /* @__PURE__ */ jsx(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 dataState = selected && open ? "selected open" : selected ? "selected" : open ? "open" : void 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "article",
+      "aria-selected": selected || void 0,
+      "data-state": dataState,
+      className: cn(
+        tableStyles({ selected: highlighted, clickable: isClickable }).cardWrap(),
+        className
+      ),
+      onClick,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: styles.cardHeader(), children: [
+          /* @__PURE__ */ jsx("div", { className: "flex items-center gap-gp-md min-w-0", children: header }),
+          headerActions && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-gp-xs shrink-0", children: headerActions })
+        ] }),
+        items.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-gp-md", children: items.map((item, i) => /* @__PURE__ */ jsxs("div", { className: styles.cardItem(), children: [
+          /* @__PURE__ */ jsx("span", { className: styles.cardLabel(), children: item.label }),
+          /* @__PURE__ */ jsx("span", { className: styles.cardValue(), children: item.value })
+        ] }, item.key ?? i)) })
+      ]
+    }
+  );
+}
+const Checkbox = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  CheckboxPrimitive.Root,
+  {
+    ref,
+    className: 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__ */ jsx(
+      CheckboxPrimitive.Indicator,
+      {
+        className: cn("grid place-content-center text-fg-on-brand"),
+        children: props.checked === "indeterminate" ? /* @__PURE__ */ jsx(Minus, { className: "size-3", strokeWidth: 3 }) : /* @__PURE__ */ jsx(Check, { className: "size-3", strokeWidth: 3 })
+      }
+    )
+  }
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+const badgeVariants = 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-[10px] gap-gp-2xs [&_svg]:size-3",
+      // 20px / 6 / 10
+      md: "h-comp-xs px-pad-md text-label-xs gap-gp-xs [&_svg]:size-3.5",
+      // 24px / 8 / 12 (default)
+      lg: "h-comp-sm px-pad-lg text-[13px] 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__ */ jsx(
+    "span",
+    {
+      className: badgeVariants({ color, variant, size, shape, className }),
+      ...props
+    }
+  );
+}
+export {
+  Badge as B,
+  Checkbox as C,
+  Table as T,
+  TableBody as a,
+  TableCardRow as b,
+  TableCell as c,
+  TableHead as d,
+  TableHeadCell as e,
+  TableRow as f,
+  badgeVariants as g,
+  useColumnResize as u
+};
+//# sourceMappingURL=badge-B_2Zt52o.mjs.map