@snksergio/design-system 0.5.1 → 0.17.0

package/dist-lib/chunks/badge-B0D_PRxn.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"badge-B0D_PRxn.mjs","sources":["../../src/components/ui/Table/table.styles.ts","../../src/components/ui/Table/use-column-resize.ts","../../src/components/ui/Table/table.tsx","../../src/components/ui/Table/table-card-row.tsx","../../src/components/shadcn/checkbox.tsx","../../src/components/shadcn/badge.tsx"],"sourcesContent":["import { tv } from \"@/utils/tv\";\r\n\r\n/**\r\n * Table styles — slots tv pra Table, TableHead, TableHeadCell, TableBody, TableRow, TableCell.\r\n *\r\n * Densidade afeta: altura mínima de row + padding vertical de cell.\r\n * Modo card: aplicado via container query (@container) — root declara container-type.\r\n */\r\nexport const tableStyles = tv({\r\n  slots: {\r\n    /* Root grid container. Aplica container-type pra container queries.\r\n       flex flex-col: scroll child usa flex-1 min-h-0 pra esticar quando há altura forçada\r\n       (consumer aplica `max-h-[Npx]` no Table) ou pegar altura natural quando não há. */\r\n    root: [\r\n      \"relative flex flex-col w-full\",\r\n      \"bg-bg-table border border-border-table rounded-radius-xl shadow-sh-sm\",\r\n      \"overflow-hidden\",\r\n      \"[container-type:inline-size]\",\r\n    ],\r\n    /* Container que faz o scroll (envolve head + body).\r\n       flex-1 + min-h-0: estica até preencher o root quando há altura forçada;\r\n       caso contrário, altura natural do conteúdo (flex-1 sem espaço extra = no-op).\r\n       overflow-auto: scroll-X sempre disponível (colunas largas); scroll-Y só ativa\r\n       quando o conteúdo excede a altura (que só acontece com max-h externo).\r\n       scrollbar-thin: classe global do projeto (globals.css) — alpha responsivo light/dark. */\r\n    scroll: [\r\n      \"flex-1 min-h-0 overflow-auto relative\",\r\n      \"scrollbar-thin\",\r\n    ],\r\n    /* Header row (flex de TableHeadCell). Sticky default. */\r\n    head: [\r\n      \"flex w-max min-w-full\",\r\n      \"bg-bg-table-head border-b border-border-table\",\r\n      \"z-20\",\r\n    ],\r\n    /* Cell do header — type, padding, alinhamento. */\r\n    headCell: [\r\n      \"relative flex items-center gap-gp-md shrink-0\",\r\n      \"h-[42px] px-pad-2xl\",\r\n      \"text-body-sm font-semibold leading-none\",\r\n      \"text-fg-muted\",\r\n      \"select-none\",\r\n      \"hover:text-fg-default\",\r\n    ],\r\n    /* Body container — contém as rows. */\r\n    body: [\r\n      \"flex flex-col w-max min-w-full\",\r\n    ],\r\n    /* Row (flex de TableCell). */\r\n    row: [\r\n      \"group/row relative flex w-full\",\r\n      \"border-b border-border-table last:border-b-0\",\r\n      \"bg-bg-table\",\r\n      \"transition-colors duration-150\",\r\n    ],\r\n    /* Cell — content cell padrão. */\r\n    cell: [\r\n      \"flex items-center shrink-0\",\r\n      \"px-pad-2xl\",\r\n      \"text-body-sm font-normal text-fg-default\",\r\n      \"whitespace-nowrap overflow-hidden\",\r\n    ],\r\n    /* Drag handle do resize — barrinha invisível no edge direito.\r\n       Apenas a linha dentro do header (after:). Sem projeção pra baixo (before:)\r\n       porque pseudo-elements absolute COM h-screen ainda contam pro scrollHeight\r\n       do ancestral com overflow-auto, esticando o body verticalmente. */\r\n    resizeHandle: [\r\n      \"absolute right-0 top-0 bottom-0 w-[6px] cursor-col-resize z-10\",\r\n      // Linha 1px vertical dentro do header — aparece no hover do TH\r\n      \"after:content-[''] after:absolute after:left-1/2 after:-translate-x-1/2\",\r\n      \"after:top-[8px] after:bottom-[8px] after:w-px after:bg-transparent\",\r\n      \"after:transition-all after:duration-150\",\r\n      \"group-hover/headcell:after:bg-border-default\",\r\n      // Hover direto no handle → linha brand 2px full-height\r\n      \"hover:after:bg-bg-brand hover:after:w-[2px] hover:after:top-0 hover:after:bottom-0\",\r\n      // DRAG ATIVO → mantém linha brand visível independente do :hover\r\n      \"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\",\r\n    ],\r\n    /* Ícone de sort no head cell. */\r\n    sortIcon: [\r\n      \"shrink-0 size-icon-xs\",\r\n      \"transition-opacity duration-150\",\r\n    ],\r\n    /* Ícone de tipo de coluna no head (Hash, User, AtSign…). */\r\n    typeIcon: [\r\n      \"shrink-0 size-[13px] text-fg-muted opacity-70\",\r\n      \"group-hover/headcell:opacity-100\",\r\n    ],\r\n    /* Badge brand com índice de sort (1, 2, 3). */\r\n    sortBadge: [\r\n      \"inline-flex items-center justify-center shrink-0\",\r\n      \"min-w-[18px] h-[18px] px-[5px]\",\r\n      \"rounded-radius-xs bg-bg-brand text-fg-on-brand\",\r\n      \"text-caption-xs font-bold leading-none tabular-nums\",\r\n    ],\r\n    /* Stack absolute na borda direita do head cell — agrupa sort e headMenu.\r\n       Largura dinâmica: encolhe quando itens estão \"hidden\", cresce quando aparecem no hover. */\r\n    headRightStack: [\r\n      \"absolute right-pad-md top-1/2 -translate-y-1/2 z-[1]\",  // 8px de respiro da borda direita\r\n      \"inline-flex items-center gap-gp-xs\",\r\n      \"bg-bg-table-head pl-pad-xs\",\r\n      \"pointer-events-none\",\r\n    ],\r\n    /* Sort ativo (asc/desc) — sempre visível quando isSorted=true. */\r\n    headSortActive: [\r\n      \"inline-flex items-center gap-gp-xs shrink-0\",\r\n      \"text-fg-default\",\r\n    ],\r\n    /* Sort hint (sortable mas inativo) — display:none default, inline-flex no hover.\r\n       Como é display:none, NÃO ocupa espaço no stack até aparecer. */\r\n    headSortHint: [\r\n      \"hidden group-hover/headcell:inline-flex items-center shrink-0\",\r\n      \"text-fg-muted opacity-60\",\r\n    ],\r\n    /* Head menu wrapper — display:none default, inline-flex no hover.\r\n       Tem pointer-events:auto pra restaurar interatividade (parent stack tem pointer-events:none). */\r\n    headMenuItem: [\r\n      // Esconde por padrao; revela quando:\r\n      //   1. hover no header (group-hover) — UX padrao\r\n      //   2. focus interno (focus-within) — keyboard navigation\r\n      //   3. dropdown interno aberto (:has data-state=open) — mantem visivel\r\n      //      enquanto user move cursor pra dentro do menu portal\r\n      //   4. data-menu-active=true no botao — mantem visivel durante a janela\r\n      //      de close animation (~200ms) pra portal nao perder a ancora\r\n      \"hidden items-center shrink-0\",\r\n      \"group-hover/headcell:inline-flex\",\r\n      \"focus-within:inline-flex\",\r\n      \"has-[[data-state=open]]:inline-flex\",\r\n      \"has-[[data-menu-active=true]]:inline-flex\",\r\n      \"pointer-events-auto\",\r\n    ],\r\n    /* Card mode — wrapper de cada row no modo card. */\r\n    cardWrap: [\r\n      \"flex flex-col w-full p-pad-card-sm gap-gp-md\",\r\n      \"border-b border-border-table last:border-b-0\",\r\n      \"bg-bg-table\",\r\n    ],\r\n    /* Card mode — header do card (primary + checkbox + actions). */\r\n    cardHeader: [\r\n      \"flex items-center justify-between gap-gp-md\",\r\n    ],\r\n    /* Card mode — body items (label/value). */\r\n    cardItem: [\r\n      \"flex flex-col gap-gp-2xs\",\r\n    ],\r\n    /* Card mode — label da coluna acima do valor. */\r\n    cardLabel: [\r\n      \"text-body-xs uppercase tracking-wider text-fg-muted\",\r\n    ],\r\n    /* Card mode — valor abaixo do label. */\r\n    cardValue: [\r\n      \"text-body-md text-fg-default\",\r\n    ],\r\n  },\r\n  variants: {\r\n    density: {\r\n      compact:     { row: \"h-[40px]\", cell: \"py-0\", headCell: \"\" },\r\n      standard:    { row: \"h-[56px]\", cell: \"py-0\", headCell: \"\" },\r\n      comfortable: { row: \"h-[64px]\", cell: \"py-0\", headCell: \"\" },\r\n    },\r\n    sticky: {\r\n      true:  { head: \"sticky top-0\" },\r\n      false: {},\r\n    },\r\n    selected: {\r\n      true: {\r\n        row: [\r\n          \"bg-bg-table-row-selected hover:bg-bg-table-row-selected-hover\",\r\n          \"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\",\r\n        ].join(\" \"),\r\n        cardWrap: \"bg-bg-table-row-selected hover:bg-bg-table-row-selected-hover\",\r\n      },\r\n      false: {\r\n        row: \"hover:bg-bg-table-row-hover\",\r\n        cardWrap: \"hover:bg-bg-table-row-hover\",\r\n      },\r\n    },\r\n    clickable: {\r\n      true:  { row: \"cursor-pointer\", cardWrap: \"cursor-pointer\" },\r\n      false: {},\r\n    },\r\n    pinned: {\r\n      left:  { headCell: \"sticky z-10 bg-bg-table-head\", cell: \"sticky z-[5] bg-inherit\" },\r\n      right: { headCell: \"sticky z-10 bg-bg-table-head\", cell: \"sticky z-[5] bg-inherit\" },\r\n    },\r\n    align: {\r\n      left:   { cell: \"justify-start text-left\",     headCell: \"justify-start text-left\" },\r\n      center: { cell: \"justify-center text-center\", headCell: \"justify-center text-center\" },\r\n      right:  { cell: \"justify-end text-right\",     headCell: \"justify-end text-right\" },\r\n    },\r\n    sortable: {\r\n      true:  { headCell: \"cursor-pointer hover:text-fg-default\" },\r\n      false: {},\r\n    },\r\n    ellipsis: {\r\n      true:  { cell: \"overflow-hidden [&>*]:truncate\" },\r\n      false: {},\r\n    },\r\n    cellBorders: {\r\n      true: {\r\n        // `:has(+ [data-purpose='actions'])`: a cell ANTES da coluna actions\r\n        // perde border-right — evita o divider visual encostado na actions.\r\n        headCell:\r\n          \"border-r border-border-table last:border-r-0 has-[+_[data-purpose='actions']]:border-r-0\",\r\n        cell:\r\n          \"border-r border-border-table last:border-r-0 has-[+_[data-purpose='actions']]:border-r-0\",\r\n      },\r\n      false: {},\r\n    },\r\n    /** Variant pra cells de coluna especial (selection / actions).\r\n     *\r\n     *  - `selection`: remove padding pra checkbox 28px caber em 56px e centralizar.\r\n     *  - `actions`: header em branco (sem texto/menu), sem border-right, padding\r\n     *    horizontal mínimo. Usado quando `type: \"actions\"` no DataTableColumnDef.\r\n     *    Border-right removida via `!border-r-0` (override do cellBorders=true). */\r\n    purpose: {\r\n      default: {},\r\n      selection: {\r\n        headCell: \"px-0 py-0\",\r\n        cell: \"px-0 py-0\",\r\n      },\r\n      actions: {\r\n        headCell: \"!border-r-0 px-pad-md\",\r\n        cell: \"!border-r-0 px-pad-md\",\r\n      },\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    density: \"standard\",\r\n    sticky: true,\r\n    selected: false,\r\n    clickable: false,\r\n    align: \"left\",\r\n    sortable: false,\r\n    ellipsis: false,\r\n    cellBorders: true,\r\n    purpose: \"default\",\r\n  },\r\n});\r\n","import { useCallback, useEffect, useRef, useState } from \"react\";\n\nexport type UseColumnResizeParams = {\n  currentWidth: number;\n  minWidth?: number;\n  maxWidth?: number;\n  /** Disparado a cada `mousemove` durante o drag.\n   *  Tipicamente usado pra side-effect \"live preview\" pelo consumer.\n   *  Em consumers React, prefira `onResizeEnd` pra evitar re-render storm —\n   *  use `onResizeLiveDOM` pra DOM mutation síncrona sem state. */\n  onResize?: (widthPx: number) => void;\n  /** Disparado no `mouseup` com largura final em px.\n   *  Pra consumers React: ideal pra commit no state (1 update por drag). */\n  onResizeEnd?: (widthPx: number) => void;\n  /** Callback síncrono pra DOM mutation durante drag (sem state React).\n   *  Recomendado pra atualizar inline styles em massa (ex: <Cell width>) sem\n   *  causar re-render storm. Chamado a cada mousemove em paralelo com `onResize`.\n   *  Pattern: consumer query DOM via ref + aplica `style.width` direto. */\n  onResizeLiveDOM?: (widthPx: number) => void;\n};\n\nexport type UseColumnResizeResult = {\n  onMouseDown: (e: React.MouseEvent) => void;\n  isDragging: boolean;\n};\n\nconst DEFAULT_MIN = 60;\nconst DEFAULT_MAX = 800;\n\nexport function useColumnResize({\n  currentWidth,\n  minWidth = DEFAULT_MIN,\n  maxWidth = DEFAULT_MAX,\n  onResize,\n  onResizeEnd,\n  onResizeLiveDOM,\n}: UseColumnResizeParams): UseColumnResizeResult {\n  const [isDragging, setIsDragging] = useState(false);\n\n  const onResizeRef = useRef(onResize);\n  const onResizeEndRef = useRef(onResizeEnd);\n  const onResizeLiveDOMRef = useRef(onResizeLiveDOM);\n  const minRef = useRef(minWidth);\n  const maxRef = useRef(maxWidth);\n\n  onResizeRef.current = onResize;\n  onResizeEndRef.current = onResizeEnd;\n  onResizeLiveDOMRef.current = onResizeLiveDOM;\n  minRef.current = minWidth;\n  maxRef.current = maxWidth;\n\n  const stateRef = useRef<{\n    startX: number;\n    startWidth: number;\n    lastWidth: number;\n    dragging: boolean;\n  }>({ startX: 0, startWidth: 0, lastWidth: currentWidth, dragging: false });\n\n  stateRef.current.lastWidth = currentWidth;\n\n  const handlersRef = useRef<{\n    move: (e: MouseEvent) => void;\n    up: (e: MouseEvent) => void;\n  } | null>(null);\n\n  if (!handlersRef.current) {\n    handlersRef.current = {\n      move: (e: MouseEvent) => {\n        if (!stateRef.current.dragging) return;\n        const delta = e.clientX - stateRef.current.startX;\n        const next = Math.min(\n          maxRef.current,\n          Math.max(minRef.current, stateRef.current.startWidth + delta),\n        );\n        stateRef.current.lastWidth = next;\n        // Live DOM primeiro (síncrono, sem React) — feedback visual fluido.\n        // Depois o callback onResize (estado/state). Os 2 podem coexistir.\n        onResizeLiveDOMRef.current?.(next);\n        onResizeRef.current?.(next);\n      },\n      up: () => {\n        if (!stateRef.current.dragging) return;\n        stateRef.current.dragging = false;\n        setIsDragging(false);\n        document.removeEventListener(\"mousemove\", handlersRef.current!.move);\n        document.removeEventListener(\"mouseup\", handlersRef.current!.up);\n        document.body.style.cursor = \"\";\n        document.body.style.userSelect = \"\";\n        onResizeEndRef.current?.(stateRef.current.lastWidth);\n      },\n    };\n  }\n\n  const onMouseDown = useCallback(\n    (e: React.MouseEvent) => {\n      e.preventDefault();\n      e.stopPropagation();\n      stateRef.current = {\n        startX: e.clientX,\n        startWidth: currentWidth,\n        lastWidth: currentWidth,\n        dragging: true,\n      };\n      setIsDragging(true);\n      document.addEventListener(\"mousemove\", handlersRef.current!.move);\n      document.addEventListener(\"mouseup\", handlersRef.current!.up);\n      document.body.style.cursor = \"col-resize\";\n      document.body.style.userSelect = \"none\";\n    },\n    [currentWidth],\n  );\n\n  useEffect(() => {\n    return () => {\n      if (stateRef.current.dragging && handlersRef.current) {\n        document.removeEventListener(\"mousemove\", handlersRef.current.move);\n        document.removeEventListener(\"mouseup\", handlersRef.current.up);\n        document.body.style.cursor = \"\";\n        document.body.style.userSelect = \"\";\n      }\n    };\n  }, []);\n\n  return {\n    onMouseDown,\n    isDragging,\n  };\n}\n","import type React from \"react\";\nimport { createContext, forwardRef, useCallback, useContext, useEffect, useRef, useState } from \"react\";\nimport { ArrowUp, ArrowDown, ArrowUpDown } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport { tableStyles } from \"./table.styles\";\nimport { useColumnResize } from \"./use-column-resize\";\nimport type {\n  TableProps,\n  TableHeadProps,\n  TableBodyProps,\n  TableRowProps,\n  TableCellProps,\n  TableHeadCellProps,\n  TableDensity,\n  SortDirection,\n} from \"./table.types\";\n\n/* ── Context interno (privado) — propaga density + cellBorders pros subcomponentes ─ */\n\ntype TableContextValue = {\n  density: TableDensity;\n  cellBorders: boolean;\n  /**\n   * Field da coluna com resize handle ATIVO — drag em curso OU hover sobre o handle.\n   * Aplica linha brand em todas as cells da coluna. Null quando nenhum.\n   */\n  resizingField: string | null;\n  setResizingField: (field: string | null) => void;\n  /** True quando body scrollou pra baixo (scrollTop > 0) — header ganha shadow. */\n  isScrolled: boolean;\n};\n\nconst TableContext = createContext<TableContextValue>({\n  density: \"standard\",\n  cellBorders: true,\n  resizingField: null,\n  setResizingField: () => {},\n  isScrolled: false,\n});\n\nfunction useTableContext(): TableContextValue {\n  return useContext(TableContext);\n}\n\nconst styles = tableStyles();\n\n/* ── <Table> root ─────────────────────────────────────────────────── */\n\nexport function Table({\n  density = \"standard\",\n  cardBreakpoint = 768,\n  cellBorders = true,\n  ariaLabel,\n  className,\n  scrollRef: externalScrollRef,\n  children,\n}: TableProps) {\n  // Container queries via inline style — Tailwind v4 não tem arbitrary container query no momento da escrita\n  const cardCss =\n    cardBreakpoint === false\n      ? undefined\n      : ({ \"--table-card-bp\": `${cardBreakpoint}px` } as React.CSSProperties);\n\n  // State pra tracking de coluna em drag ativo (resize) — aplica data-resizing-col no root,\n  // CSS estiliza todas as cells com data-field correspondente (full-height line).\n  const [resizingField, setResizingField] = useState<string | null>(null);\n\n  // Detecta scroll vertical pra mostrar shadow no sticky header\n  const [isScrolled, setIsScrolled] = useState(false);\n  const internalScrollRef = useRef<HTMLDivElement>(null);\n  // Usa ref externa se passada (DataTable virtualization), senao a interna.\n  const scrollRef = externalScrollRef ?? internalScrollRef;\n  useEffect(() => {\n    const el = scrollRef.current;\n    if (!el) return;\n    const onScroll = () => setIsScrolled(el.scrollTop > 0);\n    el.addEventListener(\"scroll\", onScroll, { passive: true });\n    onScroll();\n    return () => el.removeEventListener(\"scroll\", onScroll);\n  }, [scrollRef]);\n\n  return (\n    <TableContext.Provider\n      value={{ density, cellBorders, resizingField, setResizingField, isScrolled }}\n    >\n      <div\n        role=\"grid\"\n        aria-label={ariaLabel}\n        data-density={density}\n        data-resizing-col={resizingField ?? undefined}\n        className={cn(styles.root(), className)}\n        style={cardCss}\n      >\n        <div ref={scrollRef} className={styles.scroll()}>{children}</div>\n      </div>\n    </TableContext.Provider>\n  );\n}\n\n/* ── <TableHead> ──────────────────────────────────────────────────── */\n\nexport function TableHead({\n  sticky = true,\n  className,\n  rootProps,\n  children,\n}: TableHeadProps) {\n  const { isScrolled } = useTableContext();\n  return (\n    <div\n      {...rootProps}\n      role=\"rowgroup\"\n      data-scrolled={isScrolled ? \"true\" : undefined}\n      className={cn(tableStyles({ sticky }).head(), className)}\n    >\n      <div role=\"row\" className=\"flex w-full\">\n        {children}\n      </div>\n    </div>\n  );\n}\n\n/* ── <TableBody> ──────────────────────────────────────────────────── */\n\nexport function TableBody({\n  className,\n  style,\n  rootProps,\n  virtualized,\n  children,\n}: TableBodyProps) {\n  // Em modo virtualizado: body vira block + position relative + height total\n  // pra que rows absolute-positioned (do @tanstack/react-virtual) renderizem\n  // corretamente. Override do flex-col default via className `!block`.\n  const virtualStyle: React.CSSProperties | undefined = virtualized\n    ? {\n        height: virtualized.totalHeight,\n        position: \"relative\",\n        minWidth: \"100%\",\n        ...style,\n      }\n    : style;\n  return (\n    <div\n      {...rootProps}\n      role=\"rowgroup\"\n      className={cn(\n        styles.body(),\n        virtualized && \"!block\",\n        className,\n      )}\n      style={virtualStyle}\n    >\n      {children}\n    </div>\n  );\n}\n\n/* ── <TableRow> ───────────────────────────────────────────────────── */\n\nexport const TableRow = forwardRef<HTMLDivElement, TableRowProps>(function TableRow({\n  selected = false,\n  open = false,\n  focused = false,\n  clickable,\n  onClick,\n  className,\n  rootProps,\n  children,\n}, ref) {\n  const { density } = useTableContext();\n  const isClickable = clickable ?? !!onClick;\n  const highlighted = selected || open;\n  const dataState = selected && open\n    ? \"selected open\"\n    : selected\n      ? \"selected\"\n      : open\n        ? \"open\"\n        : undefined;\n\n  return (\n    <div\n      {...rootProps}\n      ref={ref}\n      role=\"row\"\n      aria-selected={selected || undefined}\n      data-state={dataState}\n      data-focused={focused || undefined}\n      tabIndex={focused ? 0 : -1}\n      className={cn(\n        tableStyles({ selected: highlighted, clickable: isClickable, density }).row(),\n        // Focus visual — bg tinted (match checkbox selected) + outline brand interno.\n        // Outline em vez de ring/border pra não interferir com sticky/bordas.\n        focused &&\n          \"bg-bg-table-row-selected hover:bg-bg-table-row-selected-hover outline outline-2 outline-offset-[-2px] outline-bg-brand z-[6] relative\",\n        className,\n      )}\n      onClick={onClick}\n    >\n      {children}\n    </div>\n  );\n});\n\n/* ── <TableCell> ──────────────────────────────────────────────────── */\n\nexport const TableCell = forwardRef<HTMLDivElement, TableCellProps>(function TableCell({\n  field,\n  tooltip,\n  width,\n  pinned,\n  pinOffset,\n  align = \"left\",\n  ellipsis = false,\n  label,\n  className,\n  rootProps,\n  purpose = \"default\",\n  children,\n}, ref) {\n  const { density, cellBorders, resizingField } = useTableContext();\n  const isResizingThisCol = field !== undefined && resizingField === field;\n  const style: React.CSSProperties = {};\n  if (width !== undefined) {\n    style.width = width;\n    style.minWidth = width;\n    style.maxWidth = width;\n  }\n  if (pinned === \"left\" && pinOffset !== undefined) style.left = pinOffset;\n  if (pinned === \"right\" && pinOffset !== undefined) style.right = pinOffset;\n\n  return (\n    <div\n      {...rootProps}\n      ref={ref}\n      role=\"gridcell\"\n      data-pinned={pinned}\n      data-label={label}\n      data-field={field}\n      data-purpose={purpose}\n      data-resize-active={isResizingThisCol ? \"true\" : undefined}\n      title={tooltip}\n      className={cn(\n        tableStyles({ pinned, align, ellipsis, density, cellBorders, purpose }).cell(),\n        // Linha brand 2px alinhada com o centro do resize handle do header (~2px do edge)\n        isResizingThisCol &&\n          \"relative after:absolute after:right-[2px] after:top-0 after:bottom-0 after:w-[2px] after:bg-bg-brand after:pointer-events-none\",\n        className,\n      )}\n      style={style}\n    >\n      {children}\n    </div>\n  );\n});\n\n/* ── <TableHeadCell> ──────────────────────────────────────────────── */\n\nexport const TableHeadCell = forwardRef<HTMLDivElement, TableHeadCellProps>(function TableHeadCell({\n  field,\n  width,\n  pinned,\n  pinOffset,\n  align = \"left\",\n  sortable = false,\n  sortDirection = null,\n  sortIndex = 1,\n  onSortClick,\n  icon: Icon,\n  headMenu,\n  resizable,\n  onResize,\n  onResizeEnd,\n  className,\n  style: extraStyle,\n  rootProps,\n  purpose = \"default\",\n  children,\n}, forwardedRef) {\n  const { density, cellBorders, setResizingField } = useTableContext();\n  const headCellRef = useRef<HTMLDivElement | null>(null);\n  // Merge forwardedRef com headCellRef interno (usado pelo resize live-DOM).\n  const setRefs = useCallback((el: HTMLDivElement | null) => {\n    headCellRef.current = el;\n    if (typeof forwardedRef === \"function\") forwardedRef(el);\n    else if (forwardedRef) forwardedRef.current = el;\n  }, [forwardedRef]);\n\n  const resize = useColumnResize({\n    currentWidth: width ?? 160,\n    // Live DOM update — escreve `style.width` direto nas cells com `data-field`\n    // correspondente, escopado ao `[role=\"grid\"]` ancestral. Síncrono, sem React,\n    // zero re-render durante o drag. Documented hook API via `onResizeLiveDOM`\n    // (vs `onResize` que vai pro state externo, normalmente debounced ao mouseup).\n    onResizeLiveDOM: field\n      ? (w) => {\n          const grid = headCellRef.current?.closest('[role=\"grid\"]');\n          grid?.querySelectorAll<HTMLElement>(`[data-field=\"${field}\"]`).forEach((el) => {\n            el.style.width = `${w}px`;\n            el.style.minWidth = `${w}px`;\n            el.style.maxWidth = `${w}px`;\n          });\n        }\n      : undefined,\n    onResize,\n    onResizeEnd,\n  });\n\n  // Propaga isDragging do header pro Table root via context (CSS highlight column-wide)\n  useEffect(() => {\n    if (resize.isDragging && field) {\n      setResizingField(field);\n      return () => setResizingField(null);\n    }\n  }, [resize.isDragging, field, setResizingField]);\n\n  const style: React.CSSProperties = {};\n  if (width !== undefined) {\n    style.width = width;\n    style.minWidth = width;\n    style.maxWidth = width;\n  }\n  if (pinned === \"left\" && pinOffset !== undefined) style.left = pinOffset;\n  if (pinned === \"right\" && pinOffset !== undefined) style.right = pinOffset;\n\n  const ariaSort: React.AriaAttributes[\"aria-sort\"] = sortable\n    ? sortDirection === \"asc\"\n      ? \"ascending\"\n      : sortDirection === \"desc\"\n        ? \"descending\"\n        : \"none\"\n    : undefined;\n\n  const isSorted = sortDirection === \"asc\" || sortDirection === \"desc\";\n\n  return (\n    <div\n      {...rootProps}\n      ref={setRefs}\n      role=\"columnheader\"\n      aria-sort={ariaSort}\n      data-pinned={pinned}\n      data-sort={sortDirection ?? undefined}\n      data-field={field}\n      data-purpose={purpose}\n      className={cn(\n        \"group/headcell\",\n        tableStyles({ pinned, align, sortable, density, cellBorders, purpose }).headCell(),\n        className,\n      )}\n      style={{ ...style, ...extraStyle }}\n      onClick={sortable ? onSortClick : undefined}\n    >\n      {Icon && <Icon className={styles.typeIcon()} size={13} strokeWidth={1.7} aria-hidden />}\n      <span\n        className={cn(\n          \"flex-1 min-w-0\",\n          align === \"center\"\n            ? \"flex items-center justify-center\"\n            : align === \"right\"\n              ? cn(\n                  \"truncate text-right\",\n                  // Reserva espaço pro headRightStack (absolute right-pad-md ~8px +\n                  // sort badge + sort indicator + headMenu button + gaps) quando há\n                  // algo a renderizar. Sem isso, o texto right-aligned é coberto pelo\n                  // stack quando aparece no hover (bg-bg-table-head do stack mascara).\n                  (sortable || headMenu) && \"pr-[60px]\",\n                )\n              : \"truncate text-left\",\n        )}\n      >\n        {children}\n      </span>\n      {/* Right stack absolute: sort + headMenu agrupados, larguras dinâmicas via hidden/flex.\n          Renderiza só se houver algo pra mostrar (sortable ou headMenu). */}\n      {(sortable || headMenu) && (\n        <span className={styles.headRightStack()}>\n          {isSorted && (\n            <span className={styles.headSortActive()}>\n              {sortIndex !== undefined && (\n                <span className={styles.sortBadge()}>{sortIndex}</span>\n              )}\n              <SortIndicator direction={sortDirection} />\n            </span>\n          )}\n          {sortable && !isSorted && (\n            <span className={styles.headSortHint()}>\n              <SortIndicator direction={null} />\n            </span>\n          )}\n          {headMenu && (\n            <span className={styles.headMenuItem()}>{headMenu}</span>\n          )}\n        </span>\n      )}\n      {resizable && (\n        <div\n          className={styles.resizeHandle()}\n          data-dragging={resize.isDragging}\n          // dnd-kit PointerSensor escuta onPointerDown (dispara ANTES de mousedown).\n          // Sem este stopPropagation, dragging do resize handle ativa o sortable\n          // do header em paralelo — coluna começa a \"voar\" enquanto o usuário\n          // tenta apenas redimensionar.\n          onPointerDown={(e) => e.stopPropagation()}\n          onMouseDown={resize.onMouseDown}\n          // click dispara depois de mouseup quando o cursor não andou muito —\n          // sem stopPropagation aqui, click no handle borbulha pro header e\n          // ativa onSortClick. mousedown/pointerdown stopPropagation NÃO\n          // impedem o click subsequente (são eventos separados).\n          onClick={(e) => e.stopPropagation()}\n          onMouseEnter={() => field && setResizingField(field)}\n          onMouseLeave={() => {\n            // So limpa se nao estiver em drag — drag continua marcado via useEffect\n            if (!resize.isDragging) setResizingField(null);\n          }}\n          aria-hidden\n        />\n      )}\n    </div>\n  );\n});\n\n/* ── Sort indicator interno ───────────────────────────────────────── */\n\nfunction SortIndicator({ direction }: { direction: SortDirection }) {\n  if (direction === \"asc\") return <ArrowUp className={styles.sortIcon()} aria-hidden />;\n  if (direction === \"desc\") return <ArrowDown className={styles.sortIcon()} aria-hidden />;\n  // Hint quando sortable && null — controlado por display no slot headSortHint (hidden → inline-flex no hover)\n  return <ArrowUpDown className={styles.sortIcon()} aria-hidden />;\n}\n","import { cn } from \"@/lib/utils\";\nimport type { MouseEvent, ReactNode } from \"react\";\nimport { tableStyles } from \"./table.styles\";\n\nconst styles = tableStyles();\n\nexport type TableCardRowProps = {\n  /** Conteúdo do header do card (esquerda). Normalmente checkbox + primary column. */\n  header?: ReactNode;\n  /** Conteúdo do canto superior direito do header. Normalmente actions/menu. */\n  headerActions?: ReactNode;\n  /** Itens label/value renderizados no body do card. */\n  items: ReadonlyArray<{\n    /** Label da coluna (mostrado acima do valor). */\n    label: ReactNode;\n    /** Valor renderizado. */\n    value: ReactNode;\n    /** Key opcional pro React. Default = index. */\n    key?: string | number;\n  }>;\n  selected?: boolean;\n  /**\n   * Row está em foco pra detalhe (ex: click abriu drawer com info). Visual idêntico ao `selected`\n   * (bg brand-tinted + strip lateral brand) — mas semanticamente independente: pode coexistir com `selected`.\n   * Use pra padrão de \"click row → abre detail panel\", mantendo seleção (checkbox) separada.\n   */\n  open?: boolean;\n  clickable?: boolean;\n  onClick?: (e: MouseEvent<HTMLDivElement>) => void;\n  className?: string;\n};\n\n/**\n * <TableCardRow> — renderização \"card vertical\" de uma linha pra mobile/container estreito.\n *\n * Layout:\n *   ┌─────────────────────────────────────┐\n *   │ {header}              {headerActions} │\n *   ├─────────────────────────────────────┤\n *   │ {label}: {value}                     │\n *   │ {label}: {value}                     │\n *   └─────────────────────────────────────┘\n */\nexport function TableCardRow({\n  header,\n  headerActions,\n  items,\n  selected = false,\n  open = false,\n  clickable,\n  onClick,\n  className,\n}: TableCardRowProps) {\n  const isClickable = clickable ?? !!onClick;\n  const highlighted = selected || open;\n  const dataState = selected && open\n    ? \"selected open\"\n    : selected\n      ? \"selected\"\n      : open\n        ? \"open\"\n        : undefined;\n\n  return (\n    <div\n      role=\"article\"\n      aria-selected={selected || undefined}\n      data-state={dataState}\n      className={cn(\n        tableStyles({ selected: highlighted, clickable: isClickable }).cardWrap(),\n        className,\n      )}\n      onClick={onClick}\n    >\n      <div className={styles.cardHeader()}>\n        <div className=\"flex items-center gap-gp-md min-w-0\">{header}</div>\n        {headerActions && (\n          <div className=\"flex items-center gap-gp-xs shrink-0\">{headerActions}</div>\n        )}\n      </div>\n\n      {items.length > 0 && (\n        <div className=\"flex flex-col gap-gp-md\">\n          {items.map((item, i) => (\n            <div key={item.key ?? i} className={styles.cardItem()}>\n              <span className={styles.cardLabel()}>{item.label}</span>\n              <span className={styles.cardValue()}>{item.value}</span>\n            </div>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n","\"use client\"\n\nimport * as React from \"react\"\nimport * as CheckboxPrimitive from \"@radix-ui/react-checkbox\"\nimport { Check, Minus } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/**\n * Checkbox — alinhado com `.tbl-checkbox` do design-and-table-v2.\n *\n * Specs:\n *   - 16x16, border 1.5px border-input, radius 4px (radius-xs)\n *   - bg-input (light) / dark:bg-bg-muted\n *   - hover: border-default (mais visível)\n *   - checked/indeterminate: bg-brand + border-brand\n *   - check icon: branco (fg-on-brand)\n *   - focus: shadow-sh-ring (brand glow)\n */\nconst Checkbox = React.forwardRef<\n  React.ElementRef<typeof CheckboxPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>\n>(({ className, ...props }, ref) => (\n  <CheckboxPrimitive.Root\n    ref={ref}\n    className={cn(\n      \"peer relative flex size-4 shrink-0 items-center justify-center cursor-pointer\",\n      \"rounded-radius-xs\",\n      \"bg-bg-input dark:bg-bg-muted\",\n      \"border-[1.5px] border-border-input\",\n      \"transition-[background-color,border-color,box-shadow] outline-none\",\n      \"hover:border-border-default\",\n      \"focus-visible:shadow-sh-ring\",\n      \"disabled:cursor-not-allowed disabled:opacity-50\",\n      \"data-[state=checked]:bg-bg-brand data-[state=checked]:border-border-brand\",\n      \"data-[state=indeterminate]:bg-bg-brand data-[state=indeterminate]:border-border-brand\",\n      className\n    )}\n    {...props}\n  >\n    <CheckboxPrimitive.Indicator\n      className={cn(\"grid place-content-center text-fg-on-brand\")}\n    >\n      {props.checked === \"indeterminate\" ? (\n        <Minus className=\"size-3\" strokeWidth={3} />\n      ) : (\n        <Check className=\"size-3\" strokeWidth={3} />\n      )}\n    </CheckboxPrimitive.Indicator>\n  </CheckboxPrimitive.Root>\n))\nCheckbox.displayName = CheckboxPrimitive.Root.displayName\n\nexport { Checkbox }\n","import * as React from \"react\";\r\nimport { tv, type VariantProps } from \"@/utils/tv\";\r\n\r\n/**\r\n * Badge — pill/tag visual indicator alinhado com sandbox.\r\n *\r\n * Patterns suportados:\r\n *   - Counter (.tbl-page-count): default shape (radius-sm 6px), soft primary\r\n *   - Status chip (.chip): shape=\"pill\" (radius-full), soft + colored\r\n *   - Inline tag: default shape, qualquer cor\r\n *\r\n * API:\r\n *   color:   primary | secondary | critical | success | warning | info\r\n *   variant: solid | soft | outline | ghost\r\n *   size:    sm (20px) | md (24px, default) | lg (28px)\r\n *   shape:   default (radius 6px) | pill (radius full)\r\n */\r\nconst badgeVariants = tv({\r\n  base: [\r\n    \"inline-flex items-center justify-center\",\r\n    \"border border-transparent\",\r\n    \"font-semibold leading-none whitespace-nowrap\",\r\n    \"transition-colors\",\r\n    \"focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring-secondary\",\r\n    \"[&_svg]:pointer-events-none [&_svg]:shrink-0\",\r\n  ],\r\n\r\n  variants: {\r\n    color: {\r\n      primary: \"\",\r\n      secondary: \"\",\r\n      critical: \"\",\r\n      success: \"\",\r\n      warning: \"\",\r\n      info: \"\",\r\n    },\r\n\r\n    variant: {\r\n      solid: \"\",\r\n      soft: \"\",\r\n      outline: \"bg-transparent\",\r\n      ghost: \"bg-transparent border-transparent\",\r\n    },\r\n\r\n    size: {\r\n      sm: \"h-comp-2xs px-pad-sm text-caption-xs gap-gp-2xs [&_svg]:size-3\",     // 20px / 6 / 10\r\n      md: \"h-comp-xs px-pad-md text-body-xs gap-gp-xs [&_svg]:size-3.5\",  // 24px / 8 / 12 (default)\r\n      lg: \"h-comp-sm px-pad-lg text-body-sm font-normal gap-gp-sm [&_svg]:size-4\",      // 28px / 10 / 13\r\n    },\r\n\r\n    shape: {\r\n      default: \"rounded-radius-sm\",   // 6px — counter, value tags\r\n      pill: \"rounded-radius-full\",    // pill — status chips\r\n    },\r\n  },\r\n\r\n  compoundVariants: [\r\n    /* ── Primary (brand) ─────────────────────────────────────────────── */\r\n    { color: \"primary\", variant: \"solid\",   class: \"bg-bg-brand text-fg-on-brand\" },\r\n    { color: \"primary\", variant: \"soft\",    class: \"bg-bg-brand-subtle text-fg-brand\" },\r\n    { color: \"primary\", variant: \"outline\", class: \"border-border-brand text-fg-brand\" },\r\n    { color: \"primary\", variant: \"ghost\",   class: \"text-fg-brand\" },\r\n\r\n    /* ── Secondary (neutral) ─────────────────────────────────────────── */\r\n    { color: \"secondary\", variant: \"solid\",   class: \"bg-bg-emphasis text-fg-default\" },\r\n    { color: \"secondary\", variant: \"soft\",    class: \"bg-bg-muted text-fg-muted\" },\r\n    { color: \"secondary\", variant: \"outline\", class: \"border-border-default text-fg-default\" },\r\n    { color: \"secondary\", variant: \"ghost\",   class: \"text-fg-muted\" },\r\n\r\n    /* ── Critical (danger) ───────────────────────────────────────────── */\r\n    { color: \"critical\", variant: \"solid\",   class: \"bg-bg-danger text-fg-on-danger\" },\r\n    { color: \"critical\", variant: \"soft\",    class: \"bg-bg-danger-muted text-fg-danger\" },\r\n    { color: \"critical\", variant: \"outline\", class: \"border-border-danger-muted text-fg-danger\" },\r\n    { color: \"critical\", variant: \"ghost\",   class: \"text-fg-danger\" },\r\n\r\n    /* ── Success ─────────────────────────────────────────────────────── */\r\n    { color: \"success\", variant: \"solid\",   class: \"bg-bg-success text-fg-on-success\" },\r\n    { color: \"success\", variant: \"soft\",    class: \"bg-bg-success-muted text-fg-success\" },\r\n    { color: \"success\", variant: \"outline\", class: \"border-border-success-muted text-fg-success\" },\r\n    { color: \"success\", variant: \"ghost\",   class: \"text-fg-success\" },\r\n\r\n    /* ── Warning ─────────────────────────────────────────────────────── */\r\n    { color: \"warning\", variant: \"solid\",   class: \"bg-bg-warning text-fg-on-warning\" },\r\n    { color: \"warning\", variant: \"soft\",    class: \"bg-bg-warning-muted text-fg-warning\" },\r\n    { color: \"warning\", variant: \"outline\", class: \"border-border-warning-muted text-fg-warning\" },\r\n    { color: \"warning\", variant: \"ghost\",   class: \"text-fg-warning\" },\r\n\r\n    /* ── Info ────────────────────────────────────────────────────────── */\r\n    { color: \"info\", variant: \"solid\",   class: \"bg-bg-info text-fg-on-info\" },\r\n    { color: \"info\", variant: \"soft\",    class: \"bg-bg-info-muted text-fg-info\" },\r\n    { color: \"info\", variant: \"outline\", class: \"border-border-info-muted text-fg-info\" },\r\n    { color: \"info\", variant: \"ghost\",   class: \"text-fg-info\" },\r\n  ],\r\n\r\n  defaultVariants: {\r\n    color: \"secondary\",\r\n    variant: \"soft\",\r\n    size: \"md\",\r\n    shape: \"default\",\r\n  },\r\n});\r\n\r\nexport type BadgeVariantProps = VariantProps<typeof badgeVariants>;\r\n\r\nexport interface BadgeProps\r\n  extends Omit<React.HTMLAttributes<HTMLSpanElement>, \"color\">,\r\n    BadgeVariantProps {\r\n  asChild?: boolean;\r\n}\r\n\r\nfunction Badge({ className, color, variant, size, shape, ...props }: BadgeProps) {\r\n  return (\r\n    <span\r\n      className={badgeVariants({ color, variant, size, shape, className })}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nexport { Badge, badgeVariants };\r\n"],"names":["styles","TableRow","TableCell","TableHeadCell"],"mappings":"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"}

package/dist-lib/chunks/badge-CUttkO1X.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"badge-CUttkO1X.cjs","sources":["../../src/components/ui/Table/table.styles.ts","../../src/components/ui/Table/use-column-resize.ts","../../src/components/ui/Table/table.tsx","../../src/components/ui/Table/table-card-row.tsx","../../src/components/shadcn/checkbox.tsx","../../src/components/shadcn/badge.tsx"],"sourcesContent":["import { tv } from \"@/utils/tv\";\r\n\r\n/**\r\n * Table styles — slots tv pra Table, TableHead, TableHeadCell, TableBody, TableRow, TableCell.\r\n *\r\n * Densidade afeta: altura mínima de row + padding vertical de cell.\r\n * Modo card: aplicado via container query (@container) — root declara container-type.\r\n */\r\nexport const tableStyles = tv({\r\n  slots: {\r\n    /* Root grid container. Aplica container-type pra container queries.\r\n       flex flex-col: scroll child usa flex-1 min-h-0 pra esticar quando há altura forçada\r\n       (consumer aplica `max-h-[Npx]` no Table) ou pegar altura natural quando não há. */\r\n    root: [\r\n      \"relative flex flex-col w-full\",\r\n      \"bg-bg-table border border-border-table rounded-radius-xl shadow-sh-sm\",\r\n      \"overflow-hidden\",\r\n      \"[container-type:inline-size]\",\r\n    ],\r\n    /* Container que faz o scroll (envolve head + body).\r\n       flex-1 + min-h-0: estica até preencher o root quando há altura forçada;\r\n       caso contrário, altura natural do conteúdo (flex-1 sem espaço extra = no-op).\r\n       overflow-auto: scroll-X sempre disponível (colunas largas); scroll-Y só ativa\r\n       quando o conteúdo excede a altura (que só acontece com max-h externo).\r\n       scrollbar-thin: classe global do projeto (globals.css) — alpha responsivo light/dark. */\r\n    scroll: [\r\n      \"flex-1 min-h-0 overflow-auto relative\",\r\n      \"scrollbar-thin\",\r\n    ],\r\n    /* Header row (flex de TableHeadCell). Sticky default. */\r\n    head: [\r\n      \"flex w-max min-w-full\",\r\n      \"bg-bg-table-head border-b border-border-table\",\r\n      \"z-20\",\r\n    ],\r\n    /* Cell do header — type, padding, alinhamento. */\r\n    headCell: [\r\n      \"relative flex items-center gap-gp-md shrink-0\",\r\n      \"h-[42px] px-pad-2xl\",\r\n      \"text-body-sm font-semibold leading-none\",\r\n      \"text-fg-muted\",\r\n      \"select-none\",\r\n      \"hover:text-fg-default\",\r\n    ],\r\n    /* Body container — contém as rows. */\r\n    body: [\r\n      \"flex flex-col w-max min-w-full\",\r\n    ],\r\n    /* Row (flex de TableCell). */\r\n    row: [\r\n      \"group/row relative flex w-full\",\r\n      \"border-b border-border-table last:border-b-0\",\r\n      \"bg-bg-table\",\r\n      \"transition-colors duration-150\",\r\n    ],\r\n    /* Cell — content cell padrão. */\r\n    cell: [\r\n      \"flex items-center shrink-0\",\r\n      \"px-pad-2xl\",\r\n      \"text-body-sm font-normal text-fg-default\",\r\n      \"whitespace-nowrap overflow-hidden\",\r\n    ],\r\n    /* Drag handle do resize — barrinha invisível no edge direito.\r\n       Apenas a linha dentro do header (after:). Sem projeção pra baixo (before:)\r\n       porque pseudo-elements absolute COM h-screen ainda contam pro scrollHeight\r\n       do ancestral com overflow-auto, esticando o body verticalmente. */\r\n    resizeHandle: [\r\n      \"absolute right-0 top-0 bottom-0 w-[6px] cursor-col-resize z-10\",\r\n      // Linha 1px vertical dentro do header — aparece no hover do TH\r\n      \"after:content-[''] after:absolute after:left-1/2 after:-translate-x-1/2\",\r\n      \"after:top-[8px] after:bottom-[8px] after:w-px after:bg-transparent\",\r\n      \"after:transition-all after:duration-150\",\r\n      \"group-hover/headcell:after:bg-border-default\",\r\n      // Hover direto no handle → linha brand 2px full-height\r\n      \"hover:after:bg-bg-brand hover:after:w-[2px] hover:after:top-0 hover:after:bottom-0\",\r\n      // DRAG ATIVO → mantém linha brand visível independente do :hover\r\n      \"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\",\r\n    ],\r\n    /* Ícone de sort no head cell. */\r\n    sortIcon: [\r\n      \"shrink-0 size-icon-xs\",\r\n      \"transition-opacity duration-150\",\r\n    ],\r\n    /* Ícone de tipo de coluna no head (Hash, User, AtSign…). */\r\n    typeIcon: [\r\n      \"shrink-0 size-[13px] text-fg-muted opacity-70\",\r\n      \"group-hover/headcell:opacity-100\",\r\n    ],\r\n    /* Badge brand com índice de sort (1, 2, 3). */\r\n    sortBadge: [\r\n      \"inline-flex items-center justify-center shrink-0\",\r\n      \"min-w-[18px] h-[18px] px-[5px]\",\r\n      \"rounded-radius-xs bg-bg-brand text-fg-on-brand\",\r\n      \"text-caption-xs font-bold leading-none tabular-nums\",\r\n    ],\r\n    /* Stack absolute na borda direita do head cell — agrupa sort e headMenu.\r\n       Largura dinâmica: encolhe quando itens estão \"hidden\", cresce quando aparecem no hover. */\r\n    headRightStack: [\r\n      \"absolute right-pad-md top-1/2 -translate-y-1/2 z-[1]\",  // 8px de respiro da borda direita\r\n      \"inline-flex items-center gap-gp-xs\",\r\n      \"bg-bg-table-head pl-pad-xs\",\r\n      \"pointer-events-none\",\r\n    ],\r\n    /* Sort ativo (asc/desc) — sempre visível quando isSorted=true. */\r\n    headSortActive: [\r\n      \"inline-flex items-center gap-gp-xs shrink-0\",\r\n      \"text-fg-default\",\r\n    ],\r\n    /* Sort hint (sortable mas inativo) — display:none default, inline-flex no hover.\r\n       Como é display:none, NÃO ocupa espaço no stack até aparecer. */\r\n    headSortHint: [\r\n      \"hidden group-hover/headcell:inline-flex items-center shrink-0\",\r\n      \"text-fg-muted opacity-60\",\r\n    ],\r\n    /* Head menu wrapper — display:none default, inline-flex no hover.\r\n       Tem pointer-events:auto pra restaurar interatividade (parent stack tem pointer-events:none). */\r\n    headMenuItem: [\r\n      // Esconde por padrao; revela quando:\r\n      //   1. hover no header (group-hover) — UX padrao\r\n      //   2. focus interno (focus-within) — keyboard navigation\r\n      //   3. dropdown interno aberto (:has data-state=open) — mantem visivel\r\n      //      enquanto user move cursor pra dentro do menu portal\r\n      //   4. data-menu-active=true no botao — mantem visivel durante a janela\r\n      //      de close animation (~200ms) pra portal nao perder a ancora\r\n      \"hidden items-center shrink-0\",\r\n      \"group-hover/headcell:inline-flex\",\r\n      \"focus-within:inline-flex\",\r\n      \"has-[[data-state=open]]:inline-flex\",\r\n      \"has-[[data-menu-active=true]]:inline-flex\",\r\n      \"pointer-events-auto\",\r\n    ],\r\n    /* Card mode — wrapper de cada row no modo card. */\r\n    cardWrap: [\r\n      \"flex flex-col w-full p-pad-card-sm gap-gp-md\",\r\n      \"border-b border-border-table last:border-b-0\",\r\n      \"bg-bg-table\",\r\n    ],\r\n    /* Card mode — header do card (primary + checkbox + actions). */\r\n    cardHeader: [\r\n      \"flex items-center justify-between gap-gp-md\",\r\n    ],\r\n    /* Card mode — body items (label/value). */\r\n    cardItem: [\r\n      \"flex flex-col gap-gp-2xs\",\r\n    ],\r\n    /* Card mode — label da coluna acima do valor. */\r\n    cardLabel: [\r\n      \"text-body-xs uppercase tracking-wider text-fg-muted\",\r\n    ],\r\n    /* Card mode — valor abaixo do label. */\r\n    cardValue: [\r\n      \"text-body-md text-fg-default\",\r\n    ],\r\n  },\r\n  variants: {\r\n    density: {\r\n      compact:     { row: \"h-[40px]\", cell: \"py-0\", headCell: \"\" },\r\n      standard:    { row: \"h-[56px]\", cell: \"py-0\", headCell: \"\" },\r\n      comfortable: { row: \"h-[64px]\", cell: \"py-0\", headCell: \"\" },\r\n    },\r\n    sticky: {\r\n      true:  { head: \"sticky top-0\" },\r\n      false: {},\r\n    },\r\n    selected: {\r\n      true: {\r\n        row: [\r\n          \"bg-bg-table-row-selected hover:bg-bg-table-row-selected-hover\",\r\n          \"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\",\r\n        ].join(\" \"),\r\n        cardWrap: \"bg-bg-table-row-selected hover:bg-bg-table-row-selected-hover\",\r\n      },\r\n      false: {\r\n        row: \"hover:bg-bg-table-row-hover\",\r\n        cardWrap: \"hover:bg-bg-table-row-hover\",\r\n      },\r\n    },\r\n    clickable: {\r\n      true:  { row: \"cursor-pointer\", cardWrap: \"cursor-pointer\" },\r\n      false: {},\r\n    },\r\n    pinned: {\r\n      left:  { headCell: \"sticky z-10 bg-bg-table-head\", cell: \"sticky z-[5] bg-inherit\" },\r\n      right: { headCell: \"sticky z-10 bg-bg-table-head\", cell: \"sticky z-[5] bg-inherit\" },\r\n    },\r\n    align: {\r\n      left:   { cell: \"justify-start text-left\",     headCell: \"justify-start text-left\" },\r\n      center: { cell: \"justify-center text-center\", headCell: \"justify-center text-center\" },\r\n      right:  { cell: \"justify-end text-right\",     headCell: \"justify-end text-right\" },\r\n    },\r\n    sortable: {\r\n      true:  { headCell: \"cursor-pointer hover:text-fg-default\" },\r\n      false: {},\r\n    },\r\n    ellipsis: {\r\n      true:  { cell: \"overflow-hidden [&>*]:truncate\" },\r\n      false: {},\r\n    },\r\n    cellBorders: {\r\n      true: {\r\n        // `:has(+ [data-purpose='actions'])`: a cell ANTES da coluna actions\r\n        // perde border-right — evita o divider visual encostado na actions.\r\n        headCell:\r\n          \"border-r border-border-table last:border-r-0 has-[+_[data-purpose='actions']]:border-r-0\",\r\n        cell:\r\n          \"border-r border-border-table last:border-r-0 has-[+_[data-purpose='actions']]:border-r-0\",\r\n      },\r\n      false: {},\r\n    },\r\n    /** Variant pra cells de coluna especial (selection / actions).\r\n     *\r\n     *  - `selection`: remove padding pra checkbox 28px caber em 56px e centralizar.\r\n     *  - `actions`: header em branco (sem texto/menu), sem border-right, padding\r\n     *    horizontal mínimo. Usado quando `type: \"actions\"` no DataTableColumnDef.\r\n     *    Border-right removida via `!border-r-0` (override do cellBorders=true). */\r\n    purpose: {\r\n      default: {},\r\n      selection: {\r\n        headCell: \"px-0 py-0\",\r\n        cell: \"px-0 py-0\",\r\n      },\r\n      actions: {\r\n        headCell: \"!border-r-0 px-pad-md\",\r\n        cell: \"!border-r-0 px-pad-md\",\r\n      },\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    density: \"standard\",\r\n    sticky: true,\r\n    selected: false,\r\n    clickable: false,\r\n    align: \"left\",\r\n    sortable: false,\r\n    ellipsis: false,\r\n    cellBorders: true,\r\n    purpose: \"default\",\r\n  },\r\n});\r\n","import { useCallback, useEffect, useRef, useState } from \"react\";\n\nexport type UseColumnResizeParams = {\n  currentWidth: number;\n  minWidth?: number;\n  maxWidth?: number;\n  /** Disparado a cada `mousemove` durante o drag.\n   *  Tipicamente usado pra side-effect \"live preview\" pelo consumer.\n   *  Em consumers React, prefira `onResizeEnd` pra evitar re-render storm —\n   *  use `onResizeLiveDOM` pra DOM mutation síncrona sem state. */\n  onResize?: (widthPx: number) => void;\n  /** Disparado no `mouseup` com largura final em px.\n   *  Pra consumers React: ideal pra commit no state (1 update por drag). */\n  onResizeEnd?: (widthPx: number) => void;\n  /** Callback síncrono pra DOM mutation durante drag (sem state React).\n   *  Recomendado pra atualizar inline styles em massa (ex: <Cell width>) sem\n   *  causar re-render storm. Chamado a cada mousemove em paralelo com `onResize`.\n   *  Pattern: consumer query DOM via ref + aplica `style.width` direto. */\n  onResizeLiveDOM?: (widthPx: number) => void;\n};\n\nexport type UseColumnResizeResult = {\n  onMouseDown: (e: React.MouseEvent) => void;\n  isDragging: boolean;\n};\n\nconst DEFAULT_MIN = 60;\nconst DEFAULT_MAX = 800;\n\nexport function useColumnResize({\n  currentWidth,\n  minWidth = DEFAULT_MIN,\n  maxWidth = DEFAULT_MAX,\n  onResize,\n  onResizeEnd,\n  onResizeLiveDOM,\n}: UseColumnResizeParams): UseColumnResizeResult {\n  const [isDragging, setIsDragging] = useState(false);\n\n  const onResizeRef = useRef(onResize);\n  const onResizeEndRef = useRef(onResizeEnd);\n  const onResizeLiveDOMRef = useRef(onResizeLiveDOM);\n  const minRef = useRef(minWidth);\n  const maxRef = useRef(maxWidth);\n\n  onResizeRef.current = onResize;\n  onResizeEndRef.current = onResizeEnd;\n  onResizeLiveDOMRef.current = onResizeLiveDOM;\n  minRef.current = minWidth;\n  maxRef.current = maxWidth;\n\n  const stateRef = useRef<{\n    startX: number;\n    startWidth: number;\n    lastWidth: number;\n    dragging: boolean;\n  }>({ startX: 0, startWidth: 0, lastWidth: currentWidth, dragging: false });\n\n  stateRef.current.lastWidth = currentWidth;\n\n  const handlersRef = useRef<{\n    move: (e: MouseEvent) => void;\n    up: (e: MouseEvent) => void;\n  } | null>(null);\n\n  if (!handlersRef.current) {\n    handlersRef.current = {\n      move: (e: MouseEvent) => {\n        if (!stateRef.current.dragging) return;\n        const delta = e.clientX - stateRef.current.startX;\n        const next = Math.min(\n          maxRef.current,\n          Math.max(minRef.current, stateRef.current.startWidth + delta),\n        );\n        stateRef.current.lastWidth = next;\n        // Live DOM primeiro (síncrono, sem React) — feedback visual fluido.\n        // Depois o callback onResize (estado/state). Os 2 podem coexistir.\n        onResizeLiveDOMRef.current?.(next);\n        onResizeRef.current?.(next);\n      },\n      up: () => {\n        if (!stateRef.current.dragging) return;\n        stateRef.current.dragging = false;\n        setIsDragging(false);\n        document.removeEventListener(\"mousemove\", handlersRef.current!.move);\n        document.removeEventListener(\"mouseup\", handlersRef.current!.up);\n        document.body.style.cursor = \"\";\n        document.body.style.userSelect = \"\";\n        onResizeEndRef.current?.(stateRef.current.lastWidth);\n      },\n    };\n  }\n\n  const onMouseDown = useCallback(\n    (e: React.MouseEvent) => {\n      e.preventDefault();\n      e.stopPropagation();\n      stateRef.current = {\n        startX: e.clientX,\n        startWidth: currentWidth,\n        lastWidth: currentWidth,\n        dragging: true,\n      };\n      setIsDragging(true);\n      document.addEventListener(\"mousemove\", handlersRef.current!.move);\n      document.addEventListener(\"mouseup\", handlersRef.current!.up);\n      document.body.style.cursor = \"col-resize\";\n      document.body.style.userSelect = \"none\";\n    },\n    [currentWidth],\n  );\n\n  useEffect(() => {\n    return () => {\n      if (stateRef.current.dragging && handlersRef.current) {\n        document.removeEventListener(\"mousemove\", handlersRef.current.move);\n        document.removeEventListener(\"mouseup\", handlersRef.current.up);\n        document.body.style.cursor = \"\";\n        document.body.style.userSelect = \"\";\n      }\n    };\n  }, []);\n\n  return {\n    onMouseDown,\n    isDragging,\n  };\n}\n","import type React from \"react\";\nimport { createContext, forwardRef, useCallback, useContext, useEffect, useRef, useState } from \"react\";\nimport { ArrowUp, ArrowDown, ArrowUpDown } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport { tableStyles } from \"./table.styles\";\nimport { useColumnResize } from \"./use-column-resize\";\nimport type {\n  TableProps,\n  TableHeadProps,\n  TableBodyProps,\n  TableRowProps,\n  TableCellProps,\n  TableHeadCellProps,\n  TableDensity,\n  SortDirection,\n} from \"./table.types\";\n\n/* ── Context interno (privado) — propaga density + cellBorders pros subcomponentes ─ */\n\ntype TableContextValue = {\n  density: TableDensity;\n  cellBorders: boolean;\n  /**\n   * Field da coluna com resize handle ATIVO — drag em curso OU hover sobre o handle.\n   * Aplica linha brand em todas as cells da coluna. Null quando nenhum.\n   */\n  resizingField: string | null;\n  setResizingField: (field: string | null) => void;\n  /** True quando body scrollou pra baixo (scrollTop > 0) — header ganha shadow. */\n  isScrolled: boolean;\n};\n\nconst TableContext = createContext<TableContextValue>({\n  density: \"standard\",\n  cellBorders: true,\n  resizingField: null,\n  setResizingField: () => {},\n  isScrolled: false,\n});\n\nfunction useTableContext(): TableContextValue {\n  return useContext(TableContext);\n}\n\nconst styles = tableStyles();\n\n/* ── <Table> root ─────────────────────────────────────────────────── */\n\nexport function Table({\n  density = \"standard\",\n  cardBreakpoint = 768,\n  cellBorders = true,\n  ariaLabel,\n  className,\n  scrollRef: externalScrollRef,\n  children,\n}: TableProps) {\n  // Container queries via inline style — Tailwind v4 não tem arbitrary container query no momento da escrita\n  const cardCss =\n    cardBreakpoint === false\n      ? undefined\n      : ({ \"--table-card-bp\": `${cardBreakpoint}px` } as React.CSSProperties);\n\n  // State pra tracking de coluna em drag ativo (resize) — aplica data-resizing-col no root,\n  // CSS estiliza todas as cells com data-field correspondente (full-height line).\n  const [resizingField, setResizingField] = useState<string | null>(null);\n\n  // Detecta scroll vertical pra mostrar shadow no sticky header\n  const [isScrolled, setIsScrolled] = useState(false);\n  const internalScrollRef = useRef<HTMLDivElement>(null);\n  // Usa ref externa se passada (DataTable virtualization), senao a interna.\n  const scrollRef = externalScrollRef ?? internalScrollRef;\n  useEffect(() => {\n    const el = scrollRef.current;\n    if (!el) return;\n    const onScroll = () => setIsScrolled(el.scrollTop > 0);\n    el.addEventListener(\"scroll\", onScroll, { passive: true });\n    onScroll();\n    return () => el.removeEventListener(\"scroll\", onScroll);\n  }, [scrollRef]);\n\n  return (\n    <TableContext.Provider\n      value={{ density, cellBorders, resizingField, setResizingField, isScrolled }}\n    >\n      <div\n        role=\"grid\"\n        aria-label={ariaLabel}\n        data-density={density}\n        data-resizing-col={resizingField ?? undefined}\n        className={cn(styles.root(), className)}\n        style={cardCss}\n      >\n        <div ref={scrollRef} className={styles.scroll()}>{children}</div>\n      </div>\n    </TableContext.Provider>\n  );\n}\n\n/* ── <TableHead> ──────────────────────────────────────────────────── */\n\nexport function TableHead({\n  sticky = true,\n  className,\n  rootProps,\n  children,\n}: TableHeadProps) {\n  const { isScrolled } = useTableContext();\n  return (\n    <div\n      {...rootProps}\n      role=\"rowgroup\"\n      data-scrolled={isScrolled ? \"true\" : undefined}\n      className={cn(tableStyles({ sticky }).head(), className)}\n    >\n      <div role=\"row\" className=\"flex w-full\">\n        {children}\n      </div>\n    </div>\n  );\n}\n\n/* ── <TableBody> ──────────────────────────────────────────────────── */\n\nexport function TableBody({\n  className,\n  style,\n  rootProps,\n  virtualized,\n  children,\n}: TableBodyProps) {\n  // Em modo virtualizado: body vira block + position relative + height total\n  // pra que rows absolute-positioned (do @tanstack/react-virtual) renderizem\n  // corretamente. Override do flex-col default via className `!block`.\n  const virtualStyle: React.CSSProperties | undefined = virtualized\n    ? {\n        height: virtualized.totalHeight,\n        position: \"relative\",\n        minWidth: \"100%\",\n        ...style,\n      }\n    : style;\n  return (\n    <div\n      {...rootProps}\n      role=\"rowgroup\"\n      className={cn(\n        styles.body(),\n        virtualized && \"!block\",\n        className,\n      )}\n      style={virtualStyle}\n    >\n      {children}\n    </div>\n  );\n}\n\n/* ── <TableRow> ───────────────────────────────────────────────────── */\n\nexport const TableRow = forwardRef<HTMLDivElement, TableRowProps>(function TableRow({\n  selected = false,\n  open = false,\n  focused = false,\n  clickable,\n  onClick,\n  className,\n  rootProps,\n  children,\n}, ref) {\n  const { density } = useTableContext();\n  const isClickable = clickable ?? !!onClick;\n  const highlighted = selected || open;\n  const dataState = selected && open\n    ? \"selected open\"\n    : selected\n      ? \"selected\"\n      : open\n        ? \"open\"\n        : undefined;\n\n  return (\n    <div\n      {...rootProps}\n      ref={ref}\n      role=\"row\"\n      aria-selected={selected || undefined}\n      data-state={dataState}\n      data-focused={focused || undefined}\n      tabIndex={focused ? 0 : -1}\n      className={cn(\n        tableStyles({ selected: highlighted, clickable: isClickable, density }).row(),\n        // Focus visual — bg tinted (match checkbox selected) + outline brand interno.\n        // Outline em vez de ring/border pra não interferir com sticky/bordas.\n        focused &&\n          \"bg-bg-table-row-selected hover:bg-bg-table-row-selected-hover outline outline-2 outline-offset-[-2px] outline-bg-brand z-[6] relative\",\n        className,\n      )}\n      onClick={onClick}\n    >\n      {children}\n    </div>\n  );\n});\n\n/* ── <TableCell> ──────────────────────────────────────────────────── */\n\nexport const TableCell = forwardRef<HTMLDivElement, TableCellProps>(function TableCell({\n  field,\n  tooltip,\n  width,\n  pinned,\n  pinOffset,\n  align = \"left\",\n  ellipsis = false,\n  label,\n  className,\n  rootProps,\n  purpose = \"default\",\n  children,\n}, ref) {\n  const { density, cellBorders, resizingField } = useTableContext();\n  const isResizingThisCol = field !== undefined && resizingField === field;\n  const style: React.CSSProperties = {};\n  if (width !== undefined) {\n    style.width = width;\n    style.minWidth = width;\n    style.maxWidth = width;\n  }\n  if (pinned === \"left\" && pinOffset !== undefined) style.left = pinOffset;\n  if (pinned === \"right\" && pinOffset !== undefined) style.right = pinOffset;\n\n  return (\n    <div\n      {...rootProps}\n      ref={ref}\n      role=\"gridcell\"\n      data-pinned={pinned}\n      data-label={label}\n      data-field={field}\n      data-purpose={purpose}\n      data-resize-active={isResizingThisCol ? \"true\" : undefined}\n      title={tooltip}\n      className={cn(\n        tableStyles({ pinned, align, ellipsis, density, cellBorders, purpose }).cell(),\n        // Linha brand 2px alinhada com o centro do resize handle do header (~2px do edge)\n        isResizingThisCol &&\n          \"relative after:absolute after:right-[2px] after:top-0 after:bottom-0 after:w-[2px] after:bg-bg-brand after:pointer-events-none\",\n        className,\n      )}\n      style={style}\n    >\n      {children}\n    </div>\n  );\n});\n\n/* ── <TableHeadCell> ──────────────────────────────────────────────── */\n\nexport const TableHeadCell = forwardRef<HTMLDivElement, TableHeadCellProps>(function TableHeadCell({\n  field,\n  width,\n  pinned,\n  pinOffset,\n  align = \"left\",\n  sortable = false,\n  sortDirection = null,\n  sortIndex = 1,\n  onSortClick,\n  icon: Icon,\n  headMenu,\n  resizable,\n  onResize,\n  onResizeEnd,\n  className,\n  style: extraStyle,\n  rootProps,\n  purpose = \"default\",\n  children,\n}, forwardedRef) {\n  const { density, cellBorders, setResizingField } = useTableContext();\n  const headCellRef = useRef<HTMLDivElement | null>(null);\n  // Merge forwardedRef com headCellRef interno (usado pelo resize live-DOM).\n  const setRefs = useCallback((el: HTMLDivElement | null) => {\n    headCellRef.current = el;\n    if (typeof forwardedRef === \"function\") forwardedRef(el);\n    else if (forwardedRef) forwardedRef.current = el;\n  }, [forwardedRef]);\n\n  const resize = useColumnResize({\n    currentWidth: width ?? 160,\n    // Live DOM update — escreve `style.width` direto nas cells com `data-field`\n    // correspondente, escopado ao `[role=\"grid\"]` ancestral. Síncrono, sem React,\n    // zero re-render durante o drag. Documented hook API via `onResizeLiveDOM`\n    // (vs `onResize` que vai pro state externo, normalmente debounced ao mouseup).\n    onResizeLiveDOM: field\n      ? (w) => {\n          const grid = headCellRef.current?.closest('[role=\"grid\"]');\n          grid?.querySelectorAll<HTMLElement>(`[data-field=\"${field}\"]`).forEach((el) => {\n            el.style.width = `${w}px`;\n            el.style.minWidth = `${w}px`;\n            el.style.maxWidth = `${w}px`;\n          });\n        }\n      : undefined,\n    onResize,\n    onResizeEnd,\n  });\n\n  // Propaga isDragging do header pro Table root via context (CSS highlight column-wide)\n  useEffect(() => {\n    if (resize.isDragging && field) {\n      setResizingField(field);\n      return () => setResizingField(null);\n    }\n  }, [resize.isDragging, field, setResizingField]);\n\n  const style: React.CSSProperties = {};\n  if (width !== undefined) {\n    style.width = width;\n    style.minWidth = width;\n    style.maxWidth = width;\n  }\n  if (pinned === \"left\" && pinOffset !== undefined) style.left = pinOffset;\n  if (pinned === \"right\" && pinOffset !== undefined) style.right = pinOffset;\n\n  const ariaSort: React.AriaAttributes[\"aria-sort\"] = sortable\n    ? sortDirection === \"asc\"\n      ? \"ascending\"\n      : sortDirection === \"desc\"\n        ? \"descending\"\n        : \"none\"\n    : undefined;\n\n  const isSorted = sortDirection === \"asc\" || sortDirection === \"desc\";\n\n  return (\n    <div\n      {...rootProps}\n      ref={setRefs}\n      role=\"columnheader\"\n      aria-sort={ariaSort}\n      data-pinned={pinned}\n      data-sort={sortDirection ?? undefined}\n      data-field={field}\n      data-purpose={purpose}\n      className={cn(\n        \"group/headcell\",\n        tableStyles({ pinned, align, sortable, density, cellBorders, purpose }).headCell(),\n        className,\n      )}\n      style={{ ...style, ...extraStyle }}\n      onClick={sortable ? onSortClick : undefined}\n    >\n      {Icon && <Icon className={styles.typeIcon()} size={13} strokeWidth={1.7} aria-hidden />}\n      <span\n        className={cn(\n          \"flex-1 min-w-0\",\n          align === \"center\"\n            ? \"flex items-center justify-center\"\n            : align === \"right\"\n              ? cn(\n                  \"truncate text-right\",\n                  // Reserva espaço pro headRightStack (absolute right-pad-md ~8px +\n                  // sort badge + sort indicator + headMenu button + gaps) quando há\n                  // algo a renderizar. Sem isso, o texto right-aligned é coberto pelo\n                  // stack quando aparece no hover (bg-bg-table-head do stack mascara).\n                  (sortable || headMenu) && \"pr-[60px]\",\n                )\n              : \"truncate text-left\",\n        )}\n      >\n        {children}\n      </span>\n      {/* Right stack absolute: sort + headMenu agrupados, larguras dinâmicas via hidden/flex.\n          Renderiza só se houver algo pra mostrar (sortable ou headMenu). */}\n      {(sortable || headMenu) && (\n        <span className={styles.headRightStack()}>\n          {isSorted && (\n            <span className={styles.headSortActive()}>\n              {sortIndex !== undefined && (\n                <span className={styles.sortBadge()}>{sortIndex}</span>\n              )}\n              <SortIndicator direction={sortDirection} />\n            </span>\n          )}\n          {sortable && !isSorted && (\n            <span className={styles.headSortHint()}>\n              <SortIndicator direction={null} />\n            </span>\n          )}\n          {headMenu && (\n            <span className={styles.headMenuItem()}>{headMenu}</span>\n          )}\n        </span>\n      )}\n      {resizable && (\n        <div\n          className={styles.resizeHandle()}\n          data-dragging={resize.isDragging}\n          // dnd-kit PointerSensor escuta onPointerDown (dispara ANTES de mousedown).\n          // Sem este stopPropagation, dragging do resize handle ativa o sortable\n          // do header em paralelo — coluna começa a \"voar\" enquanto o usuário\n          // tenta apenas redimensionar.\n          onPointerDown={(e) => e.stopPropagation()}\n          onMouseDown={resize.onMouseDown}\n          // click dispara depois de mouseup quando o cursor não andou muito —\n          // sem stopPropagation aqui, click no handle borbulha pro header e\n          // ativa onSortClick. mousedown/pointerdown stopPropagation NÃO\n          // impedem o click subsequente (são eventos separados).\n          onClick={(e) => e.stopPropagation()}\n          onMouseEnter={() => field && setResizingField(field)}\n          onMouseLeave={() => {\n            // So limpa se nao estiver em drag — drag continua marcado via useEffect\n            if (!resize.isDragging) setResizingField(null);\n          }}\n          aria-hidden\n        />\n      )}\n    </div>\n  );\n});\n\n/* ── Sort indicator interno ───────────────────────────────────────── */\n\nfunction SortIndicator({ direction }: { direction: SortDirection }) {\n  if (direction === \"asc\") return <ArrowUp className={styles.sortIcon()} aria-hidden />;\n  if (direction === \"desc\") return <ArrowDown className={styles.sortIcon()} aria-hidden />;\n  // Hint quando sortable && null — controlado por display no slot headSortHint (hidden → inline-flex no hover)\n  return <ArrowUpDown className={styles.sortIcon()} aria-hidden />;\n}\n","import { cn } from \"@/lib/utils\";\nimport type { MouseEvent, ReactNode } from \"react\";\nimport { tableStyles } from \"./table.styles\";\n\nconst styles = tableStyles();\n\nexport type TableCardRowProps = {\n  /** Conteúdo do header do card (esquerda). Normalmente checkbox + primary column. */\n  header?: ReactNode;\n  /** Conteúdo do canto superior direito do header. Normalmente actions/menu. */\n  headerActions?: ReactNode;\n  /** Itens label/value renderizados no body do card. */\n  items: ReadonlyArray<{\n    /** Label da coluna (mostrado acima do valor). */\n    label: ReactNode;\n    /** Valor renderizado. */\n    value: ReactNode;\n    /** Key opcional pro React. Default = index. */\n    key?: string | number;\n  }>;\n  selected?: boolean;\n  /**\n   * Row está em foco pra detalhe (ex: click abriu drawer com info). Visual idêntico ao `selected`\n   * (bg brand-tinted + strip lateral brand) — mas semanticamente independente: pode coexistir com `selected`.\n   * Use pra padrão de \"click row → abre detail panel\", mantendo seleção (checkbox) separada.\n   */\n  open?: boolean;\n  clickable?: boolean;\n  onClick?: (e: MouseEvent<HTMLDivElement>) => void;\n  className?: string;\n};\n\n/**\n * <TableCardRow> — renderização \"card vertical\" de uma linha pra mobile/container estreito.\n *\n * Layout:\n *   ┌─────────────────────────────────────┐\n *   │ {header}              {headerActions} │\n *   ├─────────────────────────────────────┤\n *   │ {label}: {value}                     │\n *   │ {label}: {value}                     │\n *   └─────────────────────────────────────┘\n */\nexport function TableCardRow({\n  header,\n  headerActions,\n  items,\n  selected = false,\n  open = false,\n  clickable,\n  onClick,\n  className,\n}: TableCardRowProps) {\n  const isClickable = clickable ?? !!onClick;\n  const highlighted = selected || open;\n  const dataState = selected && open\n    ? \"selected open\"\n    : selected\n      ? \"selected\"\n      : open\n        ? \"open\"\n        : undefined;\n\n  return (\n    <div\n      role=\"article\"\n      aria-selected={selected || undefined}\n      data-state={dataState}\n      className={cn(\n        tableStyles({ selected: highlighted, clickable: isClickable }).cardWrap(),\n        className,\n      )}\n      onClick={onClick}\n    >\n      <div className={styles.cardHeader()}>\n        <div className=\"flex items-center gap-gp-md min-w-0\">{header}</div>\n        {headerActions && (\n          <div className=\"flex items-center gap-gp-xs shrink-0\">{headerActions}</div>\n        )}\n      </div>\n\n      {items.length > 0 && (\n        <div className=\"flex flex-col gap-gp-md\">\n          {items.map((item, i) => (\n            <div key={item.key ?? i} className={styles.cardItem()}>\n              <span className={styles.cardLabel()}>{item.label}</span>\n              <span className={styles.cardValue()}>{item.value}</span>\n            </div>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n","\"use client\"\n\nimport * as React from \"react\"\nimport * as CheckboxPrimitive from \"@radix-ui/react-checkbox\"\nimport { Check, Minus } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/**\n * Checkbox — alinhado com `.tbl-checkbox` do design-and-table-v2.\n *\n * Specs:\n *   - 16x16, border 1.5px border-input, radius 4px (radius-xs)\n *   - bg-input (light) / dark:bg-bg-muted\n *   - hover: border-default (mais visível)\n *   - checked/indeterminate: bg-brand + border-brand\n *   - check icon: branco (fg-on-brand)\n *   - focus: shadow-sh-ring (brand glow)\n */\nconst Checkbox = React.forwardRef<\n  React.ElementRef<typeof CheckboxPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>\n>(({ className, ...props }, ref) => (\n  <CheckboxPrimitive.Root\n    ref={ref}\n    className={cn(\n      \"peer relative flex size-4 shrink-0 items-center justify-center cursor-pointer\",\n      \"rounded-radius-xs\",\n      \"bg-bg-input dark:bg-bg-muted\",\n      \"border-[1.5px] border-border-input\",\n      \"transition-[background-color,border-color,box-shadow] outline-none\",\n      \"hover:border-border-default\",\n      \"focus-visible:shadow-sh-ring\",\n      \"disabled:cursor-not-allowed disabled:opacity-50\",\n      \"data-[state=checked]:bg-bg-brand data-[state=checked]:border-border-brand\",\n      \"data-[state=indeterminate]:bg-bg-brand data-[state=indeterminate]:border-border-brand\",\n      className\n    )}\n    {...props}\n  >\n    <CheckboxPrimitive.Indicator\n      className={cn(\"grid place-content-center text-fg-on-brand\")}\n    >\n      {props.checked === \"indeterminate\" ? (\n        <Minus className=\"size-3\" strokeWidth={3} />\n      ) : (\n        <Check className=\"size-3\" strokeWidth={3} />\n      )}\n    </CheckboxPrimitive.Indicator>\n  </CheckboxPrimitive.Root>\n))\nCheckbox.displayName = CheckboxPrimitive.Root.displayName\n\nexport { Checkbox }\n","import * as React from \"react\";\r\nimport { tv, type VariantProps } from \"@/utils/tv\";\r\n\r\n/**\r\n * Badge — pill/tag visual indicator alinhado com sandbox.\r\n *\r\n * Patterns suportados:\r\n *   - Counter (.tbl-page-count): default shape (radius-sm 6px), soft primary\r\n *   - Status chip (.chip): shape=\"pill\" (radius-full), soft + colored\r\n *   - Inline tag: default shape, qualquer cor\r\n *\r\n * API:\r\n *   color:   primary | secondary | critical | success | warning | info\r\n *   variant: solid | soft | outline | ghost\r\n *   size:    sm (20px) | md (24px, default) | lg (28px)\r\n *   shape:   default (radius 6px) | pill (radius full)\r\n */\r\nconst badgeVariants = tv({\r\n  base: [\r\n    \"inline-flex items-center justify-center\",\r\n    \"border border-transparent\",\r\n    \"font-semibold leading-none whitespace-nowrap\",\r\n    \"transition-colors\",\r\n    \"focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring-secondary\",\r\n    \"[&_svg]:pointer-events-none [&_svg]:shrink-0\",\r\n  ],\r\n\r\n  variants: {\r\n    color: {\r\n      primary: \"\",\r\n      secondary: \"\",\r\n      critical: \"\",\r\n      success: \"\",\r\n      warning: \"\",\r\n      info: \"\",\r\n    },\r\n\r\n    variant: {\r\n      solid: \"\",\r\n      soft: \"\",\r\n      outline: \"bg-transparent\",\r\n      ghost: \"bg-transparent border-transparent\",\r\n    },\r\n\r\n    size: {\r\n      sm: \"h-comp-2xs px-pad-sm text-caption-xs gap-gp-2xs [&_svg]:size-3\",     // 20px / 6 / 10\r\n      md: \"h-comp-xs px-pad-md text-body-xs gap-gp-xs [&_svg]:size-3.5\",  // 24px / 8 / 12 (default)\r\n      lg: \"h-comp-sm px-pad-lg text-body-sm font-normal gap-gp-sm [&_svg]:size-4\",      // 28px / 10 / 13\r\n    },\r\n\r\n    shape: {\r\n      default: \"rounded-radius-sm\",   // 6px — counter, value tags\r\n      pill: \"rounded-radius-full\",    // pill — status chips\r\n    },\r\n  },\r\n\r\n  compoundVariants: [\r\n    /* ── Primary (brand) ─────────────────────────────────────────────── */\r\n    { color: \"primary\", variant: \"solid\",   class: \"bg-bg-brand text-fg-on-brand\" },\r\n    { color: \"primary\", variant: \"soft\",    class: \"bg-bg-brand-subtle text-fg-brand\" },\r\n    { color: \"primary\", variant: \"outline\", class: \"border-border-brand text-fg-brand\" },\r\n    { color: \"primary\", variant: \"ghost\",   class: \"text-fg-brand\" },\r\n\r\n    /* ── Secondary (neutral) ─────────────────────────────────────────── */\r\n    { color: \"secondary\", variant: \"solid\",   class: \"bg-bg-emphasis text-fg-default\" },\r\n    { color: \"secondary\", variant: \"soft\",    class: \"bg-bg-muted text-fg-muted\" },\r\n    { color: \"secondary\", variant: \"outline\", class: \"border-border-default text-fg-default\" },\r\n    { color: \"secondary\", variant: \"ghost\",   class: \"text-fg-muted\" },\r\n\r\n    /* ── Critical (danger) ───────────────────────────────────────────── */\r\n    { color: \"critical\", variant: \"solid\",   class: \"bg-bg-danger text-fg-on-danger\" },\r\n    { color: \"critical\", variant: \"soft\",    class: \"bg-bg-danger-muted text-fg-danger\" },\r\n    { color: \"critical\", variant: \"outline\", class: \"border-border-danger-muted text-fg-danger\" },\r\n    { color: \"critical\", variant: \"ghost\",   class: \"text-fg-danger\" },\r\n\r\n    /* ── Success ─────────────────────────────────────────────────────── */\r\n    { color: \"success\", variant: \"solid\",   class: \"bg-bg-success text-fg-on-success\" },\r\n    { color: \"success\", variant: \"soft\",    class: \"bg-bg-success-muted text-fg-success\" },\r\n    { color: \"success\", variant: \"outline\", class: \"border-border-success-muted text-fg-success\" },\r\n    { color: \"success\", variant: \"ghost\",   class: \"text-fg-success\" },\r\n\r\n    /* ── Warning ─────────────────────────────────────────────────────── */\r\n    { color: \"warning\", variant: \"solid\",   class: \"bg-bg-warning text-fg-on-warning\" },\r\n    { color: \"warning\", variant: \"soft\",    class: \"bg-bg-warning-muted text-fg-warning\" },\r\n    { color: \"warning\", variant: \"outline\", class: \"border-border-warning-muted text-fg-warning\" },\r\n    { color: \"warning\", variant: \"ghost\",   class: \"text-fg-warning\" },\r\n\r\n    /* ── Info ────────────────────────────────────────────────────────── */\r\n    { color: \"info\", variant: \"solid\",   class: \"bg-bg-info text-fg-on-info\" },\r\n    { color: \"info\", variant: \"soft\",    class: \"bg-bg-info-muted text-fg-info\" },\r\n    { color: \"info\", variant: \"outline\", class: \"border-border-info-muted text-fg-info\" },\r\n    { color: \"info\", variant: \"ghost\",   class: \"text-fg-info\" },\r\n  ],\r\n\r\n  defaultVariants: {\r\n    color: \"secondary\",\r\n    variant: \"soft\",\r\n    size: \"md\",\r\n    shape: \"default\",\r\n  },\r\n});\r\n\r\nexport type BadgeVariantProps = VariantProps<typeof badgeVariants>;\r\n\r\nexport interface BadgeProps\r\n  extends Omit<React.HTMLAttributes<HTMLSpanElement>, \"color\">,\r\n    BadgeVariantProps {\r\n  asChild?: boolean;\r\n}\r\n\r\nfunction Badge({ className, color, variant, size, shape, ...props }: BadgeProps) {\r\n  return (\r\n    <span\r\n      className={badgeVariants({ color, variant, size, shape, className })}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nexport { Badge, badgeVariants };\r\n"],"names":["tv","useState","useRef","useCallback","useEffect","createContext","useContext","styles","jsx","cn","forwardRef","TableRow","TableCell","TableHeadCell","jsxs","ArrowUp","ArrowDown","ArrowUpDown","React","CheckboxPrimitive","Minus","Check"],"mappings":"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"}

package/dist-lib/chunks/clientes-showcase-mocks-CPNOhx1G.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"clientes-showcase-mocks-CPNOhx1G.cjs","sources":["../../src/components/shadcn/separator.tsx","../../src/preview/components/doc-context.tsx","../../src/preview/pages/TableDoc.tsx","../../src/preview/pages/ClientesShowcase/clientes-showcase-mocks.ts"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport * as SeparatorPrimitive from \"@radix-ui/react-separator\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Separator = React.forwardRef<\n  React.ElementRef<typeof SeparatorPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>\n>(\n  (\n    { className, orientation = \"horizontal\", decorative = true, ...props },\n    ref\n  ) => (\n    <SeparatorPrimitive.Root\n      ref={ref}\n      decorative={decorative}\n      orientation={orientation}\n      className={cn(\n        \"shrink-0 bg-border\",\n        orientation === \"horizontal\" ? \"h-[1px] w-full\" : \"h-full w-[1px]\",\n        className\n      )}\n      {...props}\n    />\n  )\n)\nSeparator.displayName = SeparatorPrimitive.Root.displayName\n\nexport { Separator }\n","import { createContext, useContext } from \"react\";\n\ntype DocNavContext = {\n  onNavigate: (pageId: string) => void;\n};\n\nconst DocNavCtx = createContext<DocNavContext>({ onNavigate: () => {} });\n\nexport function DocNavProvider({ onNavigate, children }: { onNavigate: (pageId: string) => void; children: React.ReactNode }) {\n  return <DocNavCtx.Provider value={{ onNavigate }}>{children}</DocNavCtx.Provider>;\n}\n\nexport function useDocNav() {\n  return useContext(DocNavCtx);\n}\n","import { useMemo, useState } from \"react\";\r\nimport {\r\n  Hash,\r\n  User,\r\n  AtSign,\r\n  Phone,\r\n  CheckCircle2,\r\n  Tag,\r\n  Users as UsersIcon,\r\n  DollarSign,\r\n  Calendar,\r\n  Type,\r\n  MoreVertical,\r\n  MoreHorizontal,\r\n  Pencil,\r\n} from \"lucide-react\";\r\nimport {\r\n  Table,\r\n  TableBody,\r\n  TableCardRow,\r\n  TableCell,\r\n  TableHead,\r\n  TableHeadCell,\r\n  TableRow,\r\n  useColumnWidths,\r\n  type SortDirection,\r\n  type TableDensity,\r\n} from \"@/components/ui/Table\";\r\nimport { Badge } from \"@/components/shadcn/badge\";\r\nimport { Checkbox } from \"@/components/shadcn/checkbox\";\r\nimport { Button } from \"@/components/ui/Button/button\";\r\nimport { Chip } from \"@/components/ui/Chip\";\r\nimport {\r\n  DocLayout,\r\n  DocHeader,\r\n  DocSeparator,\r\n  SectionH2,\r\n  ExampleSection,\r\n  PropsTable,\r\n  type PropItem,\r\n} from \"../components\";\r\n\r\n/* ═══════════════════════════════════════════════════════════════════════════\r\n   Table Documentation Page\r\n   ═══════════════════════════════════════════════════════════════════════════ */\r\n\r\nconst TOC = [\r\n  { id: \"examples\", label: \"Examples\" },\r\n  { id: \"ex-density\", label: \"Densidades\" },\r\n  { id: \"ex-sticky\", label: \"Sticky header\" },\r\n  { id: \"ex-pin-sort-resize\", label: \"Pin + Sort + Resize\" },\r\n  { id: \"ex-selection\", label: \"Selection / hover\" },\r\n  { id: \"ex-card-mode\", label: \"Card mode (responsive)\" },\r\n  { id: \"ex-full\", label: \"Tabela completa\" },\r\n  { id: \"api\", label: \"API Reference\" },\r\n  { id: \"api-table\", label: \"<Table>\" },\r\n  { id: \"api-head\", label: \"<TableHead>\" },\r\n  { id: \"api-headcell\", label: \"<TableHeadCell>\" },\r\n  { id: \"api-row\", label: \"<TableRow>\" },\r\n  { id: \"api-cell\", label: \"<TableCell>\" },\r\n  { id: \"api-cardrow\", label: \"<TableCardRow>\" },\r\n];\r\n\r\nconst TABLE_PROPS: PropItem[] = [\r\n  { name: \"density\", type: '\"compact\" | \"standard\" | \"comfortable\"', defaultVal: '\"standard\"' },\r\n  { name: \"cardBreakpoint\", type: \"number | false\", defaultVal: \"768\" },\r\n  { name: \"ariaLabel\", type: \"string\", defaultVal: \"—\" },\r\n  { name: \"className\", type: \"string\", defaultVal: \"—\" },\r\n  { name: \"children\", type: \"ReactNode\", defaultVal: \"—\" },\r\n];\r\n\r\nconst HEAD_PROPS: PropItem[] = [\r\n  { name: \"sticky\", type: \"boolean\", defaultVal: \"true\" },\r\n  { name: \"className\", type: \"string\", defaultVal: \"—\" },\r\n];\r\n\r\nconst HEAD_CELL_PROPS: PropItem[] = [\r\n  { name: \"width\", type: \"number\", defaultVal: \"—\" },\r\n  { name: \"pinned\", type: '\"left\" | \"right\"', defaultVal: \"—\" },\r\n  { name: \"pinOffset\", type: \"number\", defaultVal: \"—\" },\r\n  { name: \"align\", type: '\"left\" | \"center\" | \"right\"', defaultVal: '\"left\"' },\r\n  { name: \"sortable\", type: \"boolean\", defaultVal: \"false\" },\r\n  { name: \"sortDirection\", type: '\"asc\" | \"desc\" | null', defaultVal: \"null\" },\r\n  { name: \"onSortClick\", type: \"() => void\", defaultVal: \"—\" },\r\n  { name: \"resizable\", type: \"boolean\", defaultVal: \"—\" },\r\n  { name: \"onResize\", type: \"(widthPx: number) => void\", defaultVal: \"—\" },\r\n  { name: \"onResizeEnd\", type: \"(widthPx: number) => void\", defaultVal: \"—\" },\r\n];\r\n\r\nconst ROW_PROPS: PropItem[] = [\r\n  { name: \"selected\", type: \"boolean\", defaultVal: \"false\" },\r\n  { name: \"clickable\", type: \"boolean\", defaultVal: \"auto (true se onClick)\" },\r\n  { name: \"onClick\", type: \"(e: MouseEvent) => void\", defaultVal: \"—\" },\r\n];\r\n\r\nconst CELL_PROPS: PropItem[] = [\r\n  { name: \"width\", type: \"number\", defaultVal: \"—\" },\r\n  { name: \"pinned\", type: '\"left\" | \"right\"', defaultVal: \"—\" },\r\n  { name: \"pinOffset\", type: \"number\", defaultVal: \"—\" },\r\n  { name: \"align\", type: '\"left\" | \"center\" | \"right\"', defaultVal: '\"left\"' },\r\n  { name: \"ellipsis\", type: \"boolean\", defaultVal: \"false\" },\r\n  { name: \"label\", type: \"string (usado no card mode)\", defaultVal: \"—\" },\r\n];\r\n\r\nconst CARD_ROW_PROPS: PropItem[] = [\r\n  { name: \"header\", type: \"ReactNode (esquerda)\", defaultVal: \"—\" },\r\n  { name: \"headerActions\", type: \"ReactNode (direita)\", defaultVal: \"—\" },\r\n  { name: \"items\", type: \"ReadonlyArray<{ label, value, key? }>\", defaultVal: \"—\" },\r\n  { name: \"selected\", type: \"boolean\", defaultVal: \"false\" },\r\n  { name: \"clickable\", type: \"boolean\", defaultVal: \"auto\" },\r\n  { name: \"onClick\", type: \"(e: MouseEvent) => void\", defaultVal: \"—\" },\r\n];\r\n\r\ntype User = {\r\n  id: number;\r\n  name: string;\r\n  email: string;\r\n  role: string;\r\n  status: \"active\" | \"inactive\" | \"pending\";\r\n};\r\n\r\nconst SEED_USERS: User[] = [\r\n  { id: 1, name: \"Ana Souza\",     email: \"ana@igreen.com\",     role: \"Admin\",    status: \"active\" },\r\n  { id: 2, name: \"Bruno Lima\",    email: \"bruno@igreen.com\",   role: \"Manager\",  status: \"active\" },\r\n  { id: 3, name: \"Carla Mendes\",  email: \"carla@igreen.com\",   role: \"Analyst\",  status: \"pending\" },\r\n  { id: 4, name: \"Diego Rocha\",   email: \"diego@igreen.com\",   role: \"Analyst\",  status: \"inactive\" },\r\n  { id: 5, name: \"Eduarda Lima\",  email: \"eduarda@igreen.com\", role: \"Admin\",    status: \"active\" },\r\n  { id: 6, name: \"Felipe Costa\",  email: \"felipe@igreen.com\",  role: \"Manager\",  status: \"active\" },\r\n  { id: 7, name: \"Giovana Reis\",  email: \"giovana@igreen.com\", role: \"Analyst\",  status: \"active\" },\r\n  { id: 8, name: \"Henrique Sá\",   email: \"henrique@igreen.com\", role: \"Viewer\",  status: \"pending\" },\r\n];\r\n\r\nconst statusColor: Record<User[\"status\"], \"success\" | \"warning\" | \"secondary\"> = {\r\n  active: \"success\",\r\n  pending: \"warning\",\r\n  inactive: \"secondary\",\r\n};\r\n\r\n/* App.tsx uses: import TableDoc from \"./preview/pages/TableDoc\" (default import)\r\n   Therefore: export default function TableDoc() */\r\nexport default function TableDoc() {\r\n  return (\r\n    <DocLayout toc={TOC}>\r\n      <DocHeader\r\n        category=\"Tables\"\r\n        title=\"Table\"\r\n        description=\"Primitivo de tabela em divs. API 'lego' controlada — você gerencia widths, sort, selection. Para tabelas feature-completas use <DataTable>.\"\r\n      />\r\n\r\n      <DocSeparator />\r\n\r\n      {/* Hero preview */}\r\n      <ExampleSection id=\"ex-hero\" title=\"\" description=\"\">\r\n        <div className=\"w-full\">\r\n          <HeroExample />\r\n        </div>\r\n      </ExampleSection>\r\n\r\n      <SectionH2 id=\"examples\" title=\"Examples\" />\r\n\r\n      <ExampleSection\r\n        id=\"ex-density\"\r\n        title=\"Densidades\"\r\n        description=\"Três modos: compact (32px), standard (40px, default) e comfortable (44px). Density propaga automaticamente pelos subcomponentes via Context interno.\"\r\n        code={`<Table density=\"compact\">\r\n  <TableHead>{/* ... */}</TableHead>\r\n  <TableBody>{/* ... */}</TableBody>\r\n</Table>`}\r\n      >\r\n        <div className=\"w-full\">\r\n          <DensityExample />\r\n        </div>\r\n      </ExampleSection>\r\n\r\n      <ExampleSection\r\n        id=\"ex-sticky\"\r\n        title=\"Sticky header\"\r\n        description=\"Header sticky no topo durante scroll vertical (default). Use altura fixa no container pra ativar o scroll.\"\r\n        code={`<div style={{ height: 320 }}>\r\n  <Table>\r\n    <TableHead sticky>{/* ... */}</TableHead>\r\n    <TableBody>{/* ... */}</TableBody>\r\n  </Table>\r\n</div>`}\r\n      >\r\n        <div className=\"w-full\">\r\n          <StickyExample />\r\n        </div>\r\n      </ExampleSection>\r\n\r\n      <ExampleSection\r\n        id=\"ex-pin-sort-resize\"\r\n        title=\"Pin + Sort + Resize\"\r\n        description=\"Coluna fixa à esquerda (checkbox + nome) e à direita (actions). Headers clicáveis ciclam asc → desc → none. Drag no edge direito do header redimensiona.\"\r\n        code={`const { widths, offsets } = useColumnWidths(cols);\r\n\r\n<TableHeadCell\r\n  width={widths.name}\r\n  pinned=\"left\"\r\n  pinOffset={offsets.name}\r\n  sortable\r\n  sortDirection={sort.field === \"name\" ? sort.dir : null}\r\n  onSortClick={() => toggleSort(\"name\")}\r\n  resizable\r\n  onResize={(w) => setWidth(\"name\", w)}\r\n>\r\n  Nome\r\n</TableHeadCell>`}\r\n      >\r\n        <div className=\"w-full\">\r\n          <PinSortResizeExample />\r\n        </div>\r\n      </ExampleSection>\r\n\r\n      <ExampleSection\r\n        id=\"ex-selection\"\r\n        title=\"Selection / hover / clickable\"\r\n        description=\"A row tem visual de selected (bg brand alpha) e hover. Combinar clickable + onClick faz a linha toda virar trigger.\"\r\n        code={`<TableRow\r\n  selected={isSelected(row.id)}\r\n  clickable\r\n  onClick={() => toggleRow(row.id)}\r\n>\r\n  {/* cells */}\r\n</TableRow>`}\r\n      >\r\n        <div className=\"w-full\">\r\n          <SelectionExample />\r\n        </div>\r\n      </ExampleSection>\r\n\r\n      <ExampleSection\r\n        id=\"ex-card-mode\"\r\n        title=\"Card mode (responsive)\"\r\n        description=\"No `<Table>` puro, o consumer renderiza `<TableCardRow>` manualmente em vez de `<TableRow>` quando o container fica estreito (decide via ResizeObserver/matchMedia). Já no `<DataTable>`, o switch é automático: abaixo de `cardBreakpoint` (default 768px), todas as rows viram cards automaticamente — sem trabalho extra.\"\r\n        code={`<TableCardRow\r\n  header={<strong>{row.name}</strong>}\r\n  headerActions={<Button size=\"icon-xs\"><Pencil /></Button>}\r\n  items={[\r\n    { label: \"Email\", value: row.email },\r\n    { label: \"Cargo\", value: row.role },\r\n  ]}\r\n/>`}\r\n      >\r\n        <div className=\"w-full\">\r\n          <CardModeExample />\r\n        </div>\r\n      </ExampleSection>\r\n\r\n      <ExampleSection\r\n        id=\"ex-full\"\r\n        title=\"Tabela completa (estilo design-and-table-v2)\"\r\n        description=\"Replica visual da tabela de CRUD: 13 colunas com icone de tipo, sort badge, cell borders, sticky right action column, strip lateral brand em selected, hover '...' na row, status/category/person/agent cells customizadas.\"\r\n        code={`<Table cellBorders density=\"comfortable\">\r\n  <TableHead>\r\n    <TableHeadCell icon={Hash} width={120}>ID</TableHeadCell>\r\n    <TableHeadCell icon={User} sortable sortDirection=\"asc\">Nome</TableHeadCell>\r\n    <TableHeadCell icon={AtSign} headMenu={<Button>...</Button>}>Email</TableHeadCell>\r\n  </TableHead>\r\n  <TableBody>\r\n    {rows.map(row => (\r\n      <TableRow key={row.id} selected={isSelected(row.id)}>\r\n        <TableCell>{row.id}</TableCell>\r\n        <TableCell><PersonCell row={row} /></TableCell>\r\n      </TableRow>\r\n    ))}\r\n  </TableBody>\r\n</Table>`}\r\n      >\r\n        <div className=\"w-full\">\r\n          <ClientsTableExample />\r\n        </div>\r\n      </ExampleSection>\r\n\r\n      {/* ── API Reference ───────────────────────────────────────────── */}\r\n      <SectionH2 id=\"api\" title=\"API Reference\" />\r\n\r\n      <div id=\"api-table\" className=\"mb-12\">\r\n        <h3 className=\"text-title-lg font-semibold text-fg-default mb-gp-md\">&lt;Table&gt;</h3>\r\n        <PropsTable items={TABLE_PROPS} />\r\n      </div>\r\n\r\n      <div id=\"api-head\" className=\"mb-12\">\r\n        <h3 className=\"text-title-lg font-semibold text-fg-default mb-gp-md\">&lt;TableHead&gt;</h3>\r\n        <PropsTable items={HEAD_PROPS} />\r\n      </div>\r\n\r\n      <div id=\"api-headcell\" className=\"mb-12\">\r\n        <h3 className=\"text-title-lg font-semibold text-fg-default mb-gp-md\">&lt;TableHeadCell&gt;</h3>\r\n        <PropsTable items={HEAD_CELL_PROPS} />\r\n      </div>\r\n\r\n      <div id=\"api-row\" className=\"mb-12\">\r\n        <h3 className=\"text-title-lg font-semibold text-fg-default mb-gp-md\">&lt;TableRow&gt;</h3>\r\n        <PropsTable items={ROW_PROPS} />\r\n      </div>\r\n\r\n      <div id=\"api-cell\" className=\"mb-12\">\r\n        <h3 className=\"text-title-lg font-semibold text-fg-default mb-gp-md\">&lt;TableCell&gt;</h3>\r\n        <PropsTable items={CELL_PROPS} />\r\n      </div>\r\n\r\n      <div id=\"api-cardrow\" className=\"mb-12\">\r\n        <h3 className=\"text-title-lg font-semibold text-fg-default mb-gp-md\">&lt;TableCardRow&gt;</h3>\r\n        <PropsTable items={CARD_ROW_PROPS} />\r\n      </div>\r\n    </DocLayout>\r\n  );\r\n}\r\n\r\n/* ── Examples ─────────────────────────────────────────────────────── */\r\n\r\nfunction HeroExample() {\r\n  const columns = useMemo(() => [\r\n    { field: \"name\",   headerName: \"Nome\",   width: 180 },\r\n    { field: \"email\",  headerName: \"Email\",  width: 220 },\r\n    { field: \"status\", headerName: \"Status\", width: 100 },\r\n  ], []);\r\n  const { widths } = useColumnWidths(columns);\r\n\r\n  return (\r\n    <Table ariaLabel=\"Hero example\">\r\n      <TableHead>\r\n        {columns.map((c) => (\r\n          <TableHeadCell key={c.field} width={widths[c.field]}>{c.headerName}</TableHeadCell>\r\n        ))}\r\n      </TableHead>\r\n      <TableBody>\r\n        {SEED_USERS.slice(0, 3).map((row) => (\r\n          <TableRow key={row.id}>\r\n            <TableCell width={widths.name}>{row.name}</TableCell>\r\n            <TableCell width={widths.email}>{row.email}</TableCell>\r\n            <TableCell width={widths.status}>\r\n              <Badge color={statusColor[row.status]} variant=\"soft\" size=\"sm\">{row.status}</Badge>\r\n            </TableCell>\r\n          </TableRow>\r\n        ))}\r\n      </TableBody>\r\n    </Table>\r\n  );\r\n}\r\n\r\nfunction DensityExample() {\r\n  const [density, setDensity] = useState<TableDensity>(\"standard\");\r\n  const columns = useMemo(() => [\r\n    { field: \"name\",   headerName: \"Nome\",   width: 180 },\r\n    { field: \"email\",  headerName: \"Email\",  width: 220 },\r\n    { field: \"role\",   headerName: \"Cargo\",  width: 120 },\r\n    { field: \"status\", headerName: \"Status\", width: 110 },\r\n  ], []);\r\n  const { widths } = useColumnWidths(columns);\r\n\r\n  return (\r\n    <div className=\"flex flex-col gap-gp-md\">\r\n      <div className=\"flex gap-gp-md\">\r\n        {([\"compact\", \"standard\", \"comfortable\"] as const).map((d) => (\r\n          <Button\r\n            key={d}\r\n            size=\"xs\"\r\n            variant={density === d ? \"filled\" : \"outline\"}\r\n            color={density === d ? \"primary\" : \"secondary\"}\r\n            onClick={() => setDensity(d)}\r\n          >\r\n            {d}\r\n          </Button>\r\n        ))}\r\n      </div>\r\n\r\n      <Table density={density} ariaLabel=\"Density example\">\r\n        <TableHead>\r\n          {columns.map((c) => (\r\n            <TableHeadCell key={c.field} width={widths[c.field]}>{c.headerName}</TableHeadCell>\r\n          ))}\r\n        </TableHead>\r\n        <TableBody>\r\n          {SEED_USERS.slice(0, 4).map((row) => (\r\n            <TableRow key={row.id}>\r\n              <TableCell width={widths.name}>{row.name}</TableCell>\r\n              <TableCell width={widths.email}>{row.email}</TableCell>\r\n              <TableCell width={widths.role}>{row.role}</TableCell>\r\n              <TableCell width={widths.status}>\r\n                <Badge color={statusColor[row.status]} variant=\"soft\" size=\"md\">{row.status}</Badge>\r\n              </TableCell>\r\n            </TableRow>\r\n          ))}\r\n        </TableBody>\r\n      </Table>\r\n    </div>\r\n  );\r\n}\r\n\r\nfunction StickyExample() {\r\n  const columns = useMemo(() => [\r\n    { field: \"name\",  headerName: \"Nome\",  width: 180 },\r\n    { field: \"email\", headerName: \"Email\", width: 220 },\r\n    { field: \"role\",  headerName: \"Cargo\", width: 120 },\r\n  ], []);\r\n  const { widths } = useColumnWidths(columns);\r\n  const bigRows = useMemo(\r\n    () => Array.from({ length: 30 }, (_, i) => SEED_USERS[i % SEED_USERS.length]),\r\n    [],\r\n  );\r\n\r\n  return (\r\n    <div style={{ height: 320 }}>\r\n      <Table ariaLabel=\"Sticky example\">\r\n        <TableHead>\r\n          {columns.map((c) => (\r\n            <TableHeadCell key={c.field} width={widths[c.field]}>{c.headerName}</TableHeadCell>\r\n          ))}\r\n        </TableHead>\r\n        <TableBody>\r\n          {bigRows.map((row, i) => (\r\n            <TableRow key={`${row.id}-${i}`}>\r\n              <TableCell width={widths.name}>{row.name}</TableCell>\r\n              <TableCell width={widths.email}>{row.email}</TableCell>\r\n              <TableCell width={widths.role}>{row.role}</TableCell>\r\n            </TableRow>\r\n          ))}\r\n        </TableBody>\r\n      </Table>\r\n    </div>\r\n  );\r\n}\r\n\r\nfunction PinSortResizeExample() {\r\n  const initialCols = useMemo(\r\n    () => [\r\n      { field: \"select\", headerName: \"\",       width: 56,  pinned: \"left\" as const,  resizable: false, sortable: false },\r\n      { field: \"name\",   headerName: \"Nome\",   width: 160, pinned: \"left\" as const,  resizable: true,  sortable: true },\r\n      { field: \"email\",  headerName: \"Email\",  width: 200,                            resizable: true,  sortable: true },\r\n      { field: \"role\",   headerName: \"Cargo\",  width: 120,                            resizable: true,  sortable: true },\r\n      { field: \"status\", headerName: \"Status\", width: 110,                            resizable: true,  sortable: true },\r\n      { field: \"actions\", headerName: \"\",      width: 56,  pinned: \"right\" as const, resizable: false, sortable: false },\r\n    ],\r\n    [],\r\n  );\r\n\r\n  const [widthMap, setWidthMap] = useState<Record<string, number>>({});\r\n  const cols = useMemo(\r\n    () => initialCols.map((c) => ({ ...c, width: widthMap[c.field] ?? c.width })),\r\n    [initialCols, widthMap],\r\n  );\r\n  const { widths, offsets } = useColumnWidths(cols);\r\n\r\n  const [sort, setSort] = useState<{ field: string; dir: SortDirection }>({ field: \"\", dir: null });\r\n  const onSort = (field: string) => {\r\n    setSort((prev) => {\r\n      if (prev.field !== field) return { field, dir: \"asc\" };\r\n      if (prev.dir === \"asc\") return { field, dir: \"desc\" };\r\n      return { field: \"\", dir: null };\r\n    });\r\n  };\r\n\r\n  return (\r\n    <Table ariaLabel=\"Pin + sort + resize example\">\r\n      <TableHead>\r\n        {cols.map((c) => (\r\n          <TableHeadCell\r\n            key={c.field}\r\n            width={widths[c.field]}\r\n            pinned={c.pinned}\r\n            pinOffset={offsets[c.field]}\r\n            sortable={c.sortable}\r\n            sortDirection={sort.field === c.field ? sort.dir : null}\r\n            onSortClick={() => onSort(c.field)}\r\n            resizable={c.resizable}\r\n            onResize={(w) => setWidthMap((m) => ({ ...m, [c.field]: w }))}\r\n          >\r\n            {c.headerName}\r\n          </TableHeadCell>\r\n        ))}\r\n      </TableHead>\r\n      <TableBody>\r\n        {SEED_USERS.map((row) => (\r\n          <TableRow key={row.id}>\r\n            <TableCell width={widths.select} pinned=\"left\" pinOffset={offsets.select}>\r\n              <Checkbox aria-label={`Selecionar ${row.name}`} />\r\n            </TableCell>\r\n            <TableCell width={widths.name} pinned=\"left\" pinOffset={offsets.name} ellipsis>{row.name}</TableCell>\r\n            <TableCell width={widths.email} ellipsis>{row.email}</TableCell>\r\n            <TableCell width={widths.role}>{row.role}</TableCell>\r\n            <TableCell width={widths.status}>\r\n              <Badge color={statusColor[row.status]} variant=\"soft\" size=\"md\">{row.status}</Badge>\r\n            </TableCell>\r\n            <TableCell width={widths.actions} pinned=\"right\" pinOffset={offsets.actions} align=\"center\">\r\n              <Button size=\"icon-xs\" variant=\"ghost\" color=\"secondary\" aria-label=\"Mais\">\r\n                <MoreVertical />\r\n              </Button>\r\n            </TableCell>\r\n          </TableRow>\r\n        ))}\r\n      </TableBody>\r\n    </Table>\r\n  );\r\n}\r\n\r\nfunction SelectionExample() {\r\n  const [selected, setSelected] = useState<Set<number>>(new Set([2, 5]));\r\n  const columns = useMemo(() => [\r\n    { field: \"select\", headerName: \"\",     width: 56 },\r\n    { field: \"name\",   headerName: \"Nome\", width: 180 },\r\n    { field: \"email\",  headerName: \"Email\", width: 220 },\r\n  ], []);\r\n  const { widths } = useColumnWidths(columns);\r\n\r\n  const toggle = (id: number) => {\r\n    setSelected((prev) => {\r\n      const next = new Set(prev);\r\n      if (next.has(id)) next.delete(id); else next.add(id);\r\n      return next;\r\n    });\r\n  };\r\n\r\n  const rows = SEED_USERS.slice(0, 6);\r\n  const allSelected = selected.size === rows.length;\r\n  const someSelected = selected.size > 0 && !allSelected;\r\n  const toggleAll = () => {\r\n    if (selected.size > 0) setSelected(new Set());\r\n    else setSelected(new Set(rows.map((r) => r.id)));\r\n  };\r\n\r\n  return (\r\n    <Table ariaLabel=\"Selection example\">\r\n      <TableHead>\r\n        <TableHeadCell width={widths.select} align=\"center\">\r\n          <Checkbox\r\n            checked={allSelected ? true : someSelected ? \"indeterminate\" : false}\r\n            onCheckedChange={toggleAll}\r\n            aria-label=\"Selecionar todos\"\r\n          />\r\n        </TableHeadCell>\r\n        {columns.slice(1).map((c) => (\r\n          <TableHeadCell key={c.field} width={widths[c.field]}>{c.headerName}</TableHeadCell>\r\n        ))}\r\n      </TableHead>\r\n      <TableBody>\r\n        {rows.map((row) => (\r\n          <TableRow\r\n            key={row.id}\r\n            selected={selected.has(row.id)}\r\n            clickable\r\n            onClick={() => toggle(row.id)}\r\n          >\r\n            <TableCell width={widths.select} align=\"center\">\r\n              <Checkbox\r\n                checked={selected.has(row.id)}\r\n                aria-label={`Selecionar ${row.name}`}\r\n                onClick={(e) => e.stopPropagation()}\r\n                onCheckedChange={() => toggle(row.id)}\r\n              />\r\n            </TableCell>\r\n            <TableCell width={widths.name}>{row.name}</TableCell>\r\n            <TableCell width={widths.email}>{row.email}</TableCell>\r\n          </TableRow>\r\n        ))}\r\n      </TableBody>\r\n    </Table>\r\n  );\r\n}\r\n\r\nfunction CardModeExample() {\r\n  return (\r\n    <Table cardBreakpoint={768} ariaLabel=\"Card mode example\">\r\n      <TableBody>\r\n        {SEED_USERS.slice(0, 4).map((row) => (\r\n          <TableCardRow\r\n            key={row.id}\r\n            header={\r\n              <>\r\n                <Checkbox aria-label={`Selecionar ${row.name}`} />\r\n                <strong className=\"text-body-lg text-fg-strong\">{row.name}</strong>\r\n              </>\r\n            }\r\n            headerActions={\r\n              <Button size=\"icon-xs\" variant=\"ghost\" color=\"secondary\" aria-label=\"Editar\">\r\n                <Pencil />\r\n              </Button>\r\n            }\r\n            items={[\r\n              { label: \"Email\", value: row.email },\r\n              { label: \"Cargo\", value: row.role },\r\n              {\r\n                label: \"Status\",\r\n                value: <Badge color={statusColor[row.status]} variant=\"soft\" size=\"md\">{row.status}</Badge>,\r\n              },\r\n            ]}\r\n          />\r\n        ))}\r\n      </TableBody>\r\n    </Table>\r\n  );\r\n}\r\n\r\n/* ═══════════════════════════════════════════════════════════════════════════\r\n   ClientsTable example: replica do design-and-table-v2\r\n   ═══════════════════════════════════════════════════════════════════════════ */\r\n\r\nexport const STATUSES: Record<string, { label: string; color: string }> = {\r\n  active:   { label: \"Ativo\",    color: \"var(--color-fg-success)\" },\r\n  pending:  { label: \"Pendente\", color: \"var(--color-fg-warning)\" },\r\n  paused:   { label: \"Pausado\",  color: \"var(--color-fg-info)\" },\r\n  inactive: { label: \"Inativo\",  color: \"var(--color-fg-muted)\" },\r\n};\r\n\r\nexport type CategoryKind = \"warning\" | \"info\" | \"success\" | \"neutral\";\r\nexport const CATEGORIES: Record<string, { label: string; kind: CategoryKind }> = {\r\n  royal:      { label: \"Royal\",      kind: \"warning\" },\r\n  licenciado: { label: \"Licenciado\", kind: \"info\" },\r\n  lead:       { label: \"Lead\",       kind: \"success\" },\r\n};\r\n\r\nexport const AGENTS: Record<string, { name: string; initials: string; color: string }> = {\r\n  you:    { name: \"Voce\",         initials: \"VC\", color: \"#0a3a2e\" },\r\n  aline:  { name: \"Aline Castro\", initials: \"AC\", color: \"#f59e0b\" },\r\n  carlos: { name: \"Carlos Souza\", initials: \"CS\", color: \"#8754ec\" },\r\n  maria:  { name: \"Maria Lima\",   initials: \"ML\", color: \"#ef4444\" },\r\n};\r\n\r\nexport type ClientRow = {\r\n  id: string;\r\n  name: string;\r\n  initials: string;\r\n  avatarColor: string;\r\n  email: string;\r\n  phone: string;\r\n  statusId: keyof typeof STATUSES;\r\n  categoryId: keyof typeof CATEGORIES;\r\n  location: string;\r\n  value: number;\r\n  agentId: keyof typeof AGENTS;\r\n  createdAt: number;\r\n  lastContact: number;\r\n};\r\n\r\nconst BASE_DATE = new Date(\"2026-04-15T12:00:00Z\").getTime();\r\nconst DAY_MS = 86400000;\r\n\r\nexport const CLIENTS_MOCK: ClientRow[] = [\r\n  { 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  },\r\n  { 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  },\r\n  { 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  },\r\n  { 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 },\r\n  { 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 },\r\n  { 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  },\r\n  { 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  },\r\n  { 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  },\r\n  { 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  },\r\n  { 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              },\r\n];\r\n\r\nconst MONTHS_SHORT = [\"jan\", \"fev\", \"mar\", \"abr\", \"mai\", \"jun\", \"jul\", \"ago\", \"set\", \"out\", \"nov\", \"dez\"];\r\nexport function formatDateShort(value: number): string {\r\n  const d = new Date(value);\r\n  const day = d.getDate().toString().padStart(2, \"0\");\r\n  return `${day} de ${MONTHS_SHORT[d.getMonth()]}`;\r\n}\r\nexport function formatCurrency(value: number): string {\r\n  return value.toLocaleString(\"pt-BR\", { style: \"currency\", currency: \"BRL\", minimumFractionDigits: 2 });\r\n}\r\n\r\nexport function ClientAvatar({ initials, color, sm = false }: { initials: string; color: string; sm?: boolean }) {\r\n  return (\r\n    <span\r\n      className={`inline-grid place-items-center rounded-radius-full text-white font-bold shrink-0 ${sm ? \"size-[22px] text-caption-xs\" : \"size-[28px] text-caption-sm\"}`}\r\n      style={{ background: color }}\r\n      aria-hidden\r\n    >\r\n      {initials}\r\n    </span>\r\n  );\r\n}\r\n\r\nexport function PersonCell({ row }: { row: ClientRow }) {\r\n  return (\r\n    <span className=\"inline-flex items-center gap-gp-md whitespace-nowrap overflow-hidden\" title={row.name}>\r\n      <ClientAvatar initials={row.initials} color={row.avatarColor} />\r\n      <span className=\"truncate font-medium text-fg-default\">{row.name}</span>\r\n    </span>\r\n  );\r\n}\r\n\r\nexport function AgentCell({ agentId }: { agentId: keyof typeof AGENTS }) {\r\n  const a = AGENTS[agentId];\r\n  return (\r\n    <span className=\"inline-flex items-center gap-gp-md whitespace-nowrap\" title={a.name}>\r\n      <ClientAvatar initials={a.initials} color={a.color} sm />\r\n      <span className=\"text-fg-default\">{a.name}</span>\r\n    </span>\r\n  );\r\n}\r\n\r\nexport function StatusDot({ statusId }: { statusId: keyof typeof STATUSES }) {\r\n  const s = STATUSES[statusId];\r\n  return (\r\n    <span className=\"inline-flex items-center gap-gp-md text-fg-default\">\r\n      <span className=\"size-[8px] rounded-radius-full shrink-0\" style={{ background: s.color }} aria-hidden />\r\n      {s.label}\r\n    </span>\r\n  );\r\n}\r\n\r\nexport function CategoryChip({ categoryId }: { categoryId: keyof typeof CATEGORIES }) {\r\n  const c = CATEGORIES[categoryId];\r\n  const colorMap = {\r\n    warning: \"warning\",\r\n    info: \"info\",\r\n    success: \"success\",\r\n    neutral: \"neutral\",\r\n  } as const;\r\n  return (\r\n    <Chip color={colorMap[c.kind]} variant=\"soft\" size=\"sm\">\r\n      {c.label}\r\n    </Chip>\r\n  );\r\n}\r\n\r\nexport function ClientsTableExample() {\r\n  const [selected, setSelected] = useState<Set<string>>(new Set([\"CLI-2401\"]));\r\n  const [openRowId, setOpenRowId] = useState<string | null>(null);\r\n  const [sortDir, setSortDir] = useState<SortDirection>(\"asc\");\r\n\r\n  const toggle = (id: string) => {\r\n    setSelected((prev) => {\r\n      const next = new Set(prev);\r\n      if (next.has(id)) next.delete(id); else next.add(id);\r\n      return next;\r\n    });\r\n  };\r\n\r\n  const allSelected = selected.size === CLIENTS_MOCK.length;\r\n  const someSelected = selected.size > 0 && !allSelected;\r\n  const toggleAll = () => {\r\n    if (selected.size > 0) setSelected(new Set());\r\n    else setSelected(new Set(CLIENTS_MOCK.map((r) => r.id)));\r\n  };\r\n\r\n  const cycleSort = () => {\r\n    setSortDir((prev) => (prev === \"asc\" ? \"desc\" : prev === \"desc\" ? null : \"asc\"));\r\n  };\r\n\r\n  const initialCols = useMemo(() => [\r\n    { field: \"select\",      headerName: \"\",                width: 56 },\r\n    { field: \"id\",          headerName: \"ID\",              width: 120,    icon: Hash },\r\n    { field: \"name\",        headerName: \"Nome\",            width: 220,    icon: User },\r\n    { field: \"email\",       headerName: \"Email\",           width: 240,    icon: AtSign },\r\n    { field: \"phone\",       headerName: \"Telefone\",        width: 170,    icon: Phone },\r\n    { field: \"status\",      headerName: \"Status\",          width: 140,    icon: CheckCircle2 },\r\n    { field: \"category\",    headerName: \"Categoria\",       width: 130,    icon: Tag },\r\n    { field: \"agent\",       headerName: \"Atribuido\",       width: 170,    icon: UsersIcon },\r\n    { field: \"value\",       headerName: \"Valor\",           width: 130,    icon: DollarSign },\r\n    { field: \"createdAt\",   headerName: \"Criado em\",       width: 130,    icon: Calendar },\r\n    { field: \"lastContact\", headerName: \"Ultimo contato\",  width: 150,    icon: Calendar },\r\n    { field: \"location\",    headerName: \"Localizacao\",     width: 150,    icon: Type },\r\n    { field: \"actions\",     headerName: \"\",                width: 44 },\r\n  ], []);\r\n\r\n  const [widthMap, setWidthMap] = useState<Record<string, number>>({});\r\n  const cols = useMemo(\r\n    () => initialCols.map((c) => ({ ...c, width: widthMap[c.field] ?? c.width })),\r\n    [initialCols, widthMap],\r\n  );\r\n\r\n  const { widths } = useColumnWidths(cols);\r\n\r\n  return (\r\n    <Table cellBorders density=\"comfortable\" ariaLabel=\"Tabela de clientes\">\r\n      <TableHead>\r\n        <TableHeadCell width={widths.select} align=\"center\">\r\n          <Checkbox\r\n            checked={allSelected ? true : someSelected ? \"indeterminate\" : false}\r\n            onCheckedChange={toggleAll}\r\n            aria-label=\"Selecionar todos\"\r\n          />\r\n        </TableHeadCell>\r\n\r\n        {cols.slice(1, -1).map((c) => (\r\n          <TableHeadCell\r\n            key={c.field}\r\n            width={widths[c.field]}\r\n            icon={c.icon}\r\n            sortable={c.field === \"name\"}\r\n            sortDirection={c.field === \"name\" ? sortDir : null}\r\n            sortIndex={1}\r\n            onSortClick={c.field === \"name\" ? cycleSort : undefined}\r\n            resizable\r\n            onResize={(w) => setWidthMap((m) => ({ ...m, [c.field]: w }))}\r\n            headMenu={\r\n              <Button size=\"icon-2xs\" variant=\"ghost\" color=\"secondary\" aria-label={`Menu da coluna ${c.headerName}`} onClick={(e: React.MouseEvent) => e.stopPropagation()}>\r\n                <MoreVertical />\r\n              </Button>\r\n            }\r\n          >\r\n            {c.headerName}\r\n          </TableHeadCell>\r\n        ))}\r\n\r\n        <TableHeadCell width={widths.actions} align=\"center\" />\r\n      </TableHead>\r\n\r\n      <TableBody>\r\n        {CLIENTS_MOCK.map((row) => {\r\n          const isSelected = selected.has(row.id);\r\n          return (\r\n            <TableRow\r\n              key={row.id}\r\n              selected={isSelected}\r\n              open={openRowId === row.id}\r\n              clickable\r\n              onClick={() => setOpenRowId((cur) => (cur === row.id ? null : row.id))}\r\n            >\r\n              <TableCell width={widths.select} align=\"center\">\r\n                <Checkbox\r\n                  checked={isSelected}\r\n                  onCheckedChange={() => toggle(row.id)}\r\n                  onClick={(e: React.MouseEvent) => e.stopPropagation()}\r\n                  aria-label={`Selecionar ${row.name}`}\r\n                />\r\n              </TableCell>\r\n\r\n              <TableCell width={widths.id}>\r\n                <span className=\"text-fg-muted tabular-nums\">{row.id}</span>\r\n              </TableCell>\r\n\r\n              <TableCell width={widths.name}>\r\n                <PersonCell row={row} />\r\n              </TableCell>\r\n\r\n              <TableCell width={widths.email}>\r\n                <a\r\n                  href={`mailto:${row.email}`}\r\n                  className=\"text-fg-brand hover:underline\"\r\n                  onClick={(e: React.MouseEvent) => e.stopPropagation()}\r\n                >\r\n                  {row.email}\r\n                </a>\r\n              </TableCell>\r\n\r\n              <TableCell width={widths.phone}>\r\n                <a\r\n                  href={`tel:${row.phone.replace(/\\D/g, \"\")}`}\r\n                  className=\"text-fg-brand hover:underline\"\r\n                  onClick={(e: React.MouseEvent) => e.stopPropagation()}\r\n                >\r\n                  {row.phone}\r\n                </a>\r\n              </TableCell>\r\n\r\n              <TableCell width={widths.status}>\r\n                <StatusDot statusId={row.statusId} />\r\n              </TableCell>\r\n\r\n              <TableCell width={widths.category}>\r\n                <CategoryChip categoryId={row.categoryId} />\r\n              </TableCell>\r\n\r\n              <TableCell width={widths.agent}>\r\n                <AgentCell agentId={row.agentId} />\r\n              </TableCell>\r\n\r\n              <TableCell width={widths.value}>\r\n                <span className=\"font-semibold tabular-nums\">{formatCurrency(row.value)}</span>\r\n              </TableCell>\r\n\r\n              <TableCell width={widths.createdAt}>\r\n                <span className=\"text-fg-muted tabular-nums\">{formatDateShort(row.createdAt)}</span>\r\n              </TableCell>\r\n\r\n              <TableCell width={widths.lastContact}>\r\n                <span className=\"text-fg-muted tabular-nums\">{formatDateShort(row.lastContact)}</span>\r\n              </TableCell>\r\n\r\n              <TableCell width={widths.location}>{row.location}</TableCell>\r\n\r\n              <TableCell width={widths.actions} align=\"center\" className=\"!px-0 opacity-0 group-hover/row:opacity-100 transition-opacity\">\r\n                <Button size=\"icon-xs\" variant=\"ghost\" color=\"secondary\" aria-label=\"Acoes\" onClick={(e: React.MouseEvent<HTMLButtonElement>) => e.stopPropagation()}>\r\n                  <MoreHorizontal />\r\n                </Button>\r\n              </TableCell>\r\n            </TableRow>\r\n          );\r\n        })}\r\n      </TableBody>\r\n    </Table>\r\n  );\r\n}\r\n","import {\n  CLIENTS_MOCK,\n  STATUSES,\n  CATEGORIES,\n  AGENTS,\n  type ClientRow,\n} from \"../TableDoc\";\n\n/* ── Dataset 87 clientes (bate com badge do print) ─────────────── */\n\nexport const CLIENTS_87: ClientRow[] = Array.from({ length: 9 }, (_, batch) =>\n  CLIENTS_MOCK.map((row, i) => ({\n    ...row,\n    id: `CLI-${2400 + batch * 10 + i}`,\n  })),\n)\n  .flat()\n  .slice(0, 87);\n\n/* ── Lookups por categoria de status (column color mapping) ────── */\n\nexport const STATUS_COLOR_MAP: Record<string, string> = {\n  active: \"success\",\n  pending: \"warning\",\n  paused: \"info\",\n  inactive: \"neutral\",\n};\n\nexport const STATUS_DOT: Record<string, string> = {\n  active: \"var(--color-fg-success)\",\n  pending: \"var(--color-fg-warning)\",\n  paused: \"var(--color-fg-info)\",\n  inactive: \"var(--color-fg-muted)\",\n};\n\nexport const CATEGORY_KIND: Record<string, \"warning\" | \"info\" | \"success\"> = {\n  royal: \"warning\",\n  licenciado: \"info\",\n  lead: \"success\",\n};\n\n/* ── Options pra filters/selects ───────────────────────────────── */\n\nexport const STATUS_OPTIONS = Object.entries(STATUSES).map(([v, m]) => ({\n  value: v,\n  label: m.label,\n  color: STATUS_COLOR_MAP[v] ?? \"neutral\",\n}));\n\nexport const CATEGORY_OPTIONS = Object.entries(CATEGORIES).map(([v, m]) => ({\n  value: v,\n  label: m.label,\n  color: m.kind === \"neutral\" ? \"neutral\" : m.kind,\n}));\n\nexport const AGENT_OPTIONS = Object.entries(AGENTS).map(([v, a]) => ({\n  value: v,\n  label: a.name,\n}));\n\n/* ── Avatar lookup pro column type \"user\" ──────────────────────── */\n\nexport const AGENTS_LOOKUP = Object.fromEntries(\n  Object.entries(AGENTS).map(([id, a]) => [\n    id,\n    {\n      name: a.name,\n      initials: a.name\n        .split(\" \")\n        .map((s) => s[0])\n        .join(\"\")\n        .slice(0, 2),\n      color: a.color,\n    },\n  ]),\n);\n\n/* ── Kanban columns (1 por status) ─────────────────────────────── */\n\nexport const KANBAN_COLUMNS = Object.entries(STATUSES).map(([id, s]) => ({\n  id,\n  label: s.label,\n  dotColor: STATUS_DOT[id] ?? \"var(--color-fg-muted)\",\n}));\n\n/* ── Cidades pro select do drawer ──────────────────────────────── */\n\nexport const CITIES = [\n  \"São Paulo, SP\",\n  \"Rio de Janeiro, RJ\",\n  \"Belo Horizonte, MG\",\n  \"Porto Alegre, RS\",\n  \"Curitiba, PR\",\n  \"Recife, PE\",\n  \"Salvador, BA\",\n  \"Fortaleza, CE\",\n  \"Brasília, DF\",\n  \"Manaus, AM\",\n];\n\n/* ── Helpers de formatação ─────────────────────────────────────── */\n\nexport function formatBRL(value: number) {\n  return value.toLocaleString(\"pt-BR\", {\n    style: \"currency\",\n    currency: \"BRL\",\n    minimumFractionDigits: 2,\n  });\n}\n\nexport function formatShortDate(ms: number) {\n  if (!ms) return \"—\";\n  const d = new Date(ms);\n  const day = d.getDate().toString().padStart(2, \"0\");\n  const months = [\"jan\", \"fev\", \"mar\", \"abr\", \"mai\", \"jun\", \"jul\", \"ago\", \"set\", \"out\", \"nov\", \"dez\"];\n  return `${day} ${months[d.getMonth()]}`;\n}\n"],"names":["React","jsx","SeparatorPrimitive","cn","createContext"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAOA,MAAM,YAAYA,iBAAM;AAAA,EAItB,CACE,EAAE,WAAW,cAAc,cAAc,aAAa,MAAM,GAAG,SAC/D,QAEAC,2BAAAA;AAAAA,IAACC,8BAAmB;AAAA,IAAnB;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAWC,UAAAA;AAAAA,QACT;AAAA,QACA,gBAAgB,eAAe,mBAAmB;AAAA,QAClD;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;AACA,UAAU,cAAcD,8BAAmB,KAAK;ACtB9BE,MAAAA,cAA6B,EAAE,YAAY,MAAM;AAAC,EAAA,CAAG;ACglBhE,MAAM,WAA6D;AAAA,EACxE,QAAU,EAAE,OAAO,SAAY,OAAO,0BAAA;AAAA,EACtC,SAAU,EAAE,OAAO,YAAY,OAAO,0BAAA;AAAA,EACtC,QAAU,EAAE,OAAO,WAAY,OAAO,uBAAA;AAAA,EACtC,UAAU,EAAE,OAAO,WAAY,OAAO,wBAAA;AACxC;AAGO,MAAM,aAAoE;AAAA,EAC/E,OAAY,EAAE,OAAO,SAAc,MAAM,UAAA;AAAA,EACzC,YAAY,EAAE,OAAO,cAAc,MAAM,OAAA;AAAA,EACzC,MAAY,EAAE,OAAO,QAAc,MAAM,UAAA;AAC3C;AAEO,MAAM,SAA4E;AAAA,EACvF,KAAQ,EAAE,MAAM,QAAgB,UAAU,MAAM,OAAO,UAAA;AAAA,EACvD,OAAQ,EAAE,MAAM,gBAAgB,UAAU,MAAM,OAAO,UAAA;AAAA,EACvD,QAAQ,EAAE,MAAM,gBAAgB,UAAU,MAAM,OAAO,UAAA;AAAA,EACvD,OAAQ,EAAE,MAAM,cAAgB,UAAU,MAAM,OAAO,UAAA;AACzD;AAkBA,MAAM,aAAY,oBAAI,KAAK,sBAAsB,GAAE,QAAA;AACnD,MAAM,SAAS;AAER,MAAM,eAA4B;AAAA,EACvC,EAAE,IAAI,YAAY,MAAM,eAAmB,UAAU,MAAM,aAAa,WAAW,OAAO,2BAA+B,OAAO,qBAAqB,UAAU,UAAY,YAAY,SAAc,UAAU,iBAAsB,OAAO,MAAO,SAAS,OAAU,WAAW,YAAY,KAAK,QAAQ,aAAa,YAAY,IAAI,OAAA;AAAA,EACvU,EAAE,IAAI,YAAY,MAAM,eAAmB,UAAU,MAAM,aAAa,WAAW,OAAO,2BAA+B,OAAO,qBAAqB,UAAU,WAAY,YAAY,cAAc,UAAU,sBAAsB,OAAO,OAAO,SAAS,SAAU,WAAW,YAAY,KAAK,QAAQ,aAAa,YAAY,IAAI,OAAA;AAAA,EACvU,EAAE,IAAI,YAAY,MAAM,mBAAmB,UAAU,MAAM,aAAa,WAAW,OAAO,+BAA+B,OAAO,qBAAqB,UAAU,UAAY,YAAY,QAAc,UAAU,sBAAsB,OAAO,MAAO,SAAS,UAAU,WAAW,YAAY,KAAK,QAAQ,aAAa,YAAY,IAAI,OAAA;AAAA,EACvU,EAAE,IAAI,YAAY,MAAM,aAAmB,UAAU,MAAM,aAAa,WAAW,OAAO,yBAA+B,OAAO,qBAAqB,UAAU,UAAY,YAAY,SAAc,UAAU,oBAAsB,OAAO,MAAO,SAAS,SAAU,WAAW,YAAY,KAAK,QAAQ,aAAa,YAAY,KAAK,OAAA;AAAA,EACxU,EAAE,IAAI,YAAY,MAAM,iBAAmB,UAAU,MAAM,aAAa,WAAW,OAAO,6BAA+B,OAAO,qBAAqB,UAAU,YAAY,YAAY,QAAc,UAAU,gBAAsB,OAAO,MAAO,SAAS,OAAU,WAAW,YAAY,KAAK,QAAQ,aAAa,YAAY,KAAK,OAAA;AAAA,EACxU,EAAE,IAAI,YAAY,MAAM,iBAAmB,UAAU,MAAM,aAAa,WAAW,OAAO,6BAA+B,OAAO,qBAAqB,UAAU,UAAY,YAAY,cAAc,UAAU,cAAsB,OAAO,MAAO,SAAS,SAAU,WAAW,YAAY,KAAK,QAAQ,aAAa,YAAY,IAAI,OAAA;AAAA,EACvU,EAAE,IAAI,YAAY,MAAM,iBAAmB,UAAU,MAAM,aAAa,WAAW,OAAO,6BAA+B,OAAO,qBAAqB,UAAU,WAAY,YAAY,SAAc,UAAU,iBAAsB,OAAO,OAAO,SAAS,UAAU,WAAW,YAAY,KAAK,QAAQ,aAAa,YAAY,IAAI,OAAA;AAAA,EACvU,EAAE,IAAI,YAAY,MAAM,iBAAmB,UAAU,MAAM,aAAa,WAAW,OAAO,6BAA+B,OAAO,qBAAqB,UAAU,UAAY,YAAY,QAAc,UAAU,sBAAsB,OAAO,MAAO,SAAS,SAAU,WAAW,YAAY,KAAK,QAAQ,aAAa,YAAY,IAAI,OAAA;AAAA,EACvU,EAAE,IAAI,YAAY,MAAM,mBAAmB,UAAU,MAAM,aAAa,WAAW,OAAO,+BAA+B,OAAO,qBAAqB,UAAU,UAAY,YAAY,cAAc,UAAU,sBAAsB,OAAO,MAAO,SAAS,OAAU,WAAW,YAAY,IAAI,QAAS,aAAa,YAAY,IAAI,OAAA;AAAA,EACvU,EAAE,IAAI,YAAY,MAAM,kBAAmB,UAAU,MAAM,aAAa,WAAW,OAAO,8BAA+B,OAAO,qBAAqB,UAAU,UAAY,YAAY,SAAc,UAAU,oBAAsB,OAAO,MAAO,SAAS,SAAU,WAAW,YAAY,IAAI,QAAS,aAAa,UAAA;AACzT;AC/nBO,MAAM,aAA0B,MAAM;AAAA,EAAK,EAAE,QAAQ,EAAA;AAAA,EAAK,CAAC,GAAG,UACnE,aAAa,IAAI,CAAC,KAAK,OAAO;AAAA,IAC5B,GAAG;AAAA,IACH,IAAI,OAAO,OAAO,QAAQ,KAAK,CAAC;AAAA,EAAA,EAChC;AACJ,EACG,KAAA,EACA,MAAM,GAAG,EAAE;AAIP,MAAM,mBAA2C;AAAA,EACtD,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,UAAU;AACZ;AAEO,MAAM,aAAqC;AAAA,EAChD,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,UAAU;AACZ;AAEO,MAAM,gBAAgE;AAAA,EAC3E,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,MAAM;AACR;AAIO,MAAM,iBAAiB,OAAO,QAAQ,QAAQ,EAAE,IAAI,CAAC,CAAC,GAAG,CAAC,OAAO;AAAA,EACtE,OAAO;AAAA,EACP,OAAO,EAAE;AAAA,EACT,OAAO,iBAAiB,CAAC,KAAK;AAChC,EAAE;AAEK,MAAM,mBAAmB,OAAO,QAAQ,UAAU,EAAE,IAAI,CAAC,CAAC,GAAG,CAAC,OAAO;AAAA,EAC1E,OAAO;AAAA,EACP,OAAO,EAAE;AAAA,EACT,OAAO,EAAE,SAAS,YAAY,YAAY,EAAE;AAC9C,EAAE;AAEK,MAAM,gBAAgB,OAAO,QAAQ,MAAM,EAAE,IAAI,CAAC,CAAC,GAAG,CAAC,OAAO;AAAA,EACnE,OAAO;AAAA,EACP,OAAO,EAAE;AACX,EAAE;AAIK,MAAM,gBAAgB,OAAO;AAAA,EAClC,OAAO,QAAQ,MAAM,EAAE,IAAI,CAAC,CAAC,IAAI,CAAC,MAAM;AAAA,IACtC;AAAA,IACA;AAAA,MACE,MAAM,EAAE;AAAA,MACR,UAAU,EAAE,KACT,MAAM,GAAG,EACT,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,EACf,KAAK,EAAE,EACP,MAAM,GAAG,CAAC;AAAA,MACb,OAAO,EAAE;AAAA,IAAA;AAAA,EACX,CACD;AACH;AAIO,MAAM,iBAAiB,OAAO,QAAQ,QAAQ,EAAE,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO;AAAA,EACvE;AAAA,EACA,OAAO,EAAE;AAAA,EACT,UAAU,WAAW,EAAE,KAAK;AAC9B,EAAE;AAIK,MAAM,SAAS;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAIO,SAAS,UAAU,OAAe;AACvC,SAAO,MAAM,eAAe,SAAS;AAAA,IACnC,OAAO;AAAA,IACP,UAAU;AAAA,IACV,uBAAuB;AAAA,EAAA,CACxB;AACH;AAEO,SAAS,gBAAgB,IAAY;AAC1C,MAAI,CAAC,GAAI,QAAO;AAChB,QAAM,IAAI,IAAI,KAAK,EAAE;AACrB,QAAM,MAAM,EAAE,QAAA,EAAU,WAAW,SAAS,GAAG,GAAG;AAClD,QAAM,SAAS,CAAC,OAAO,OAAO,OAAO,OAAO,OAAO,OAAO,OAAO,OAAO,OAAO,OAAO,OAAO,KAAK;AAClG,SAAO,GAAG,GAAG,IAAI,OAAO,EAAE,SAAA,CAAU,CAAC;AACvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist-lib/chunks/clientes-showcase-mocks-DEHCKxMK.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"clientes-showcase-mocks-DEHCKxMK.mjs","sources":["../../src/components/shadcn/separator.tsx","../../src/preview/components/doc-context.tsx","../../src/preview/pages/TableDoc.tsx","../../src/preview/pages/ClientesShowcase/clientes-showcase-mocks.ts"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport * as SeparatorPrimitive from \"@radix-ui/react-separator\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Separator = React.forwardRef<\n  React.ElementRef<typeof SeparatorPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>\n>(\n  (\n    { className, orientation = \"horizontal\", decorative = true, ...props },\n    ref\n  ) => (\n    <SeparatorPrimitive.Root\n      ref={ref}\n      decorative={decorative}\n      orientation={orientation}\n      className={cn(\n        \"shrink-0 bg-border\",\n        orientation === \"horizontal\" ? \"h-[1px] w-full\" : \"h-full w-[1px]\",\n        className\n      )}\n      {...props}\n    />\n  )\n)\nSeparator.displayName = SeparatorPrimitive.Root.displayName\n\nexport { Separator }\n","import { createContext, useContext } from \"react\";\n\ntype DocNavContext = {\n  onNavigate: (pageId: string) => void;\n};\n\nconst DocNavCtx = createContext<DocNavContext>({ onNavigate: () => {} });\n\nexport function DocNavProvider({ onNavigate, children }: { onNavigate: (pageId: string) => void; children: React.ReactNode }) {\n  return <DocNavCtx.Provider value={{ onNavigate }}>{children}</DocNavCtx.Provider>;\n}\n\nexport function useDocNav() {\n  return useContext(DocNavCtx);\n}\n","import { useMemo, useState } from \"react\";\r\nimport {\r\n  Hash,\r\n  User,\r\n  AtSign,\r\n  Phone,\r\n  CheckCircle2,\r\n  Tag,\r\n  Users as UsersIcon,\r\n  DollarSign,\r\n  Calendar,\r\n  Type,\r\n  MoreVertical,\r\n  MoreHorizontal,\r\n  Pencil,\r\n} from \"lucide-react\";\r\nimport {\r\n  Table,\r\n  TableBody,\r\n  TableCardRow,\r\n  TableCell,\r\n  TableHead,\r\n  TableHeadCell,\r\n  TableRow,\r\n  useColumnWidths,\r\n  type SortDirection,\r\n  type TableDensity,\r\n} from \"@/components/ui/Table\";\r\nimport { Badge } from \"@/components/shadcn/badge\";\r\nimport { Checkbox } from \"@/components/shadcn/checkbox\";\r\nimport { Button } from \"@/components/ui/Button/button\";\r\nimport { Chip } from \"@/components/ui/Chip\";\r\nimport {\r\n  DocLayout,\r\n  DocHeader,\r\n  DocSeparator,\r\n  SectionH2,\r\n  ExampleSection,\r\n  PropsTable,\r\n  type PropItem,\r\n} from \"../components\";\r\n\r\n/* ═══════════════════════════════════════════════════════════════════════════\r\n   Table Documentation Page\r\n   ═══════════════════════════════════════════════════════════════════════════ */\r\n\r\nconst TOC = [\r\n  { id: \"examples\", label: \"Examples\" },\r\n  { id: \"ex-density\", label: \"Densidades\" },\r\n  { id: \"ex-sticky\", label: \"Sticky header\" },\r\n  { id: \"ex-pin-sort-resize\", label: \"Pin + Sort + Resize\" },\r\n  { id: \"ex-selection\", label: \"Selection / hover\" },\r\n  { id: \"ex-card-mode\", label: \"Card mode (responsive)\" },\r\n  { id: \"ex-full\", label: \"Tabela completa\" },\r\n  { id: \"api\", label: \"API Reference\" },\r\n  { id: \"api-table\", label: \"<Table>\" },\r\n  { id: \"api-head\", label: \"<TableHead>\" },\r\n  { id: \"api-headcell\", label: \"<TableHeadCell>\" },\r\n  { id: \"api-row\", label: \"<TableRow>\" },\r\n  { id: \"api-cell\", label: \"<TableCell>\" },\r\n  { id: \"api-cardrow\", label: \"<TableCardRow>\" },\r\n];\r\n\r\nconst TABLE_PROPS: PropItem[] = [\r\n  { name: \"density\", type: '\"compact\" | \"standard\" | \"comfortable\"', defaultVal: '\"standard\"' },\r\n  { name: \"cardBreakpoint\", type: \"number | false\", defaultVal: \"768\" },\r\n  { name: \"ariaLabel\", type: \"string\", defaultVal: \"—\" },\r\n  { name: \"className\", type: \"string\", defaultVal: \"—\" },\r\n  { name: \"children\", type: \"ReactNode\", defaultVal: \"—\" },\r\n];\r\n\r\nconst HEAD_PROPS: PropItem[] = [\r\n  { name: \"sticky\", type: \"boolean\", defaultVal: \"true\" },\r\n  { name: \"className\", type: \"string\", defaultVal: \"—\" },\r\n];\r\n\r\nconst HEAD_CELL_PROPS: PropItem[] = [\r\n  { name: \"width\", type: \"number\", defaultVal: \"—\" },\r\n  { name: \"pinned\", type: '\"left\" | \"right\"', defaultVal: \"—\" },\r\n  { name: \"pinOffset\", type: \"number\", defaultVal: \"—\" },\r\n  { name: \"align\", type: '\"left\" | \"center\" | \"right\"', defaultVal: '\"left\"' },\r\n  { name: \"sortable\", type: \"boolean\", defaultVal: \"false\" },\r\n  { name: \"sortDirection\", type: '\"asc\" | \"desc\" | null', defaultVal: \"null\" },\r\n  { name: \"onSortClick\", type: \"() => void\", defaultVal: \"—\" },\r\n  { name: \"resizable\", type: \"boolean\", defaultVal: \"—\" },\r\n  { name: \"onResize\", type: \"(widthPx: number) => void\", defaultVal: \"—\" },\r\n  { name: \"onResizeEnd\", type: \"(widthPx: number) => void\", defaultVal: \"—\" },\r\n];\r\n\r\nconst ROW_PROPS: PropItem[] = [\r\n  { name: \"selected\", type: \"boolean\", defaultVal: \"false\" },\r\n  { name: \"clickable\", type: \"boolean\", defaultVal: \"auto (true se onClick)\" },\r\n  { name: \"onClick\", type: \"(e: MouseEvent) => void\", defaultVal: \"—\" },\r\n];\r\n\r\nconst CELL_PROPS: PropItem[] = [\r\n  { name: \"width\", type: \"number\", defaultVal: \"—\" },\r\n  { name: \"pinned\", type: '\"left\" | \"right\"', defaultVal: \"—\" },\r\n  { name: \"pinOffset\", type: \"number\", defaultVal: \"—\" },\r\n  { name: \"align\", type: '\"left\" | \"center\" | \"right\"', defaultVal: '\"left\"' },\r\n  { name: \"ellipsis\", type: \"boolean\", defaultVal: \"false\" },\r\n  { name: \"label\", type: \"string (usado no card mode)\", defaultVal: \"—\" },\r\n];\r\n\r\nconst CARD_ROW_PROPS: PropItem[] = [\r\n  { name: \"header\", type: \"ReactNode (esquerda)\", defaultVal: \"—\" },\r\n  { name: \"headerActions\", type: \"ReactNode (direita)\", defaultVal: \"—\" },\r\n  { name: \"items\", type: \"ReadonlyArray<{ label, value, key? }>\", defaultVal: \"—\" },\r\n  { name: \"selected\", type: \"boolean\", defaultVal: \"false\" },\r\n  { name: \"clickable\", type: \"boolean\", defaultVal: \"auto\" },\r\n  { name: \"onClick\", type: \"(e: MouseEvent) => void\", defaultVal: \"—\" },\r\n];\r\n\r\ntype User = {\r\n  id: number;\r\n  name: string;\r\n  email: string;\r\n  role: string;\r\n  status: \"active\" | \"inactive\" | \"pending\";\r\n};\r\n\r\nconst SEED_USERS: User[] = [\r\n  { id: 1, name: \"Ana Souza\",     email: \"ana@igreen.com\",     role: \"Admin\",    status: \"active\" },\r\n  { id: 2, name: \"Bruno Lima\",    email: \"bruno@igreen.com\",   role: \"Manager\",  status: \"active\" },\r\n  { id: 3, name: \"Carla Mendes\",  email: \"carla@igreen.com\",   role: \"Analyst\",  status: \"pending\" },\r\n  { id: 4, name: \"Diego Rocha\",   email: \"diego@igreen.com\",   role: \"Analyst\",  status: \"inactive\" },\r\n  { id: 5, name: \"Eduarda Lima\",  email: \"eduarda@igreen.com\", role: \"Admin\",    status: \"active\" },\r\n  { id: 6, name: \"Felipe Costa\",  email: \"felipe@igreen.com\",  role: \"Manager\",  status: \"active\" },\r\n  { id: 7, name: \"Giovana Reis\",  email: \"giovana@igreen.com\", role: \"Analyst\",  status: \"active\" },\r\n  { id: 8, name: \"Henrique Sá\",   email: \"henrique@igreen.com\", role: \"Viewer\",  status: \"pending\" },\r\n];\r\n\r\nconst statusColor: Record<User[\"status\"], \"success\" | \"warning\" | \"secondary\"> = {\r\n  active: \"success\",\r\n  pending: \"warning\",\r\n  inactive: \"secondary\",\r\n};\r\n\r\n/* App.tsx uses: import TableDoc from \"./preview/pages/TableDoc\" (default import)\r\n   Therefore: export default function TableDoc() */\r\nexport default function TableDoc() {\r\n  return (\r\n    <DocLayout toc={TOC}>\r\n      <DocHeader\r\n        category=\"Tables\"\r\n        title=\"Table\"\r\n        description=\"Primitivo de tabela em divs. API 'lego' controlada — você gerencia widths, sort, selection. Para tabelas feature-completas use <DataTable>.\"\r\n      />\r\n\r\n      <DocSeparator />\r\n\r\n      {/* Hero preview */}\r\n      <ExampleSection id=\"ex-hero\" title=\"\" description=\"\">\r\n        <div className=\"w-full\">\r\n          <HeroExample />\r\n        </div>\r\n      </ExampleSection>\r\n\r\n      <SectionH2 id=\"examples\" title=\"Examples\" />\r\n\r\n      <ExampleSection\r\n        id=\"ex-density\"\r\n        title=\"Densidades\"\r\n        description=\"Três modos: compact (32px), standard (40px, default) e comfortable (44px). Density propaga automaticamente pelos subcomponentes via Context interno.\"\r\n        code={`<Table density=\"compact\">\r\n  <TableHead>{/* ... */}</TableHead>\r\n  <TableBody>{/* ... */}</TableBody>\r\n</Table>`}\r\n      >\r\n        <div className=\"w-full\">\r\n          <DensityExample />\r\n        </div>\r\n      </ExampleSection>\r\n\r\n      <ExampleSection\r\n        id=\"ex-sticky\"\r\n        title=\"Sticky header\"\r\n        description=\"Header sticky no topo durante scroll vertical (default). Use altura fixa no container pra ativar o scroll.\"\r\n        code={`<div style={{ height: 320 }}>\r\n  <Table>\r\n    <TableHead sticky>{/* ... */}</TableHead>\r\n    <TableBody>{/* ... */}</TableBody>\r\n  </Table>\r\n</div>`}\r\n      >\r\n        <div className=\"w-full\">\r\n          <StickyExample />\r\n        </div>\r\n      </ExampleSection>\r\n\r\n      <ExampleSection\r\n        id=\"ex-pin-sort-resize\"\r\n        title=\"Pin + Sort + Resize\"\r\n        description=\"Coluna fixa à esquerda (checkbox + nome) e à direita (actions). Headers clicáveis ciclam asc → desc → none. Drag no edge direito do header redimensiona.\"\r\n        code={`const { widths, offsets } = useColumnWidths(cols);\r\n\r\n<TableHeadCell\r\n  width={widths.name}\r\n  pinned=\"left\"\r\n  pinOffset={offsets.name}\r\n  sortable\r\n  sortDirection={sort.field === \"name\" ? sort.dir : null}\r\n  onSortClick={() => toggleSort(\"name\")}\r\n  resizable\r\n  onResize={(w) => setWidth(\"name\", w)}\r\n>\r\n  Nome\r\n</TableHeadCell>`}\r\n      >\r\n        <div className=\"w-full\">\r\n          <PinSortResizeExample />\r\n        </div>\r\n      </ExampleSection>\r\n\r\n      <ExampleSection\r\n        id=\"ex-selection\"\r\n        title=\"Selection / hover / clickable\"\r\n        description=\"A row tem visual de selected (bg brand alpha) e hover. Combinar clickable + onClick faz a linha toda virar trigger.\"\r\n        code={`<TableRow\r\n  selected={isSelected(row.id)}\r\n  clickable\r\n  onClick={() => toggleRow(row.id)}\r\n>\r\n  {/* cells */}\r\n</TableRow>`}\r\n      >\r\n        <div className=\"w-full\">\r\n          <SelectionExample />\r\n        </div>\r\n      </ExampleSection>\r\n\r\n      <ExampleSection\r\n        id=\"ex-card-mode\"\r\n        title=\"Card mode (responsive)\"\r\n        description=\"No `<Table>` puro, o consumer renderiza `<TableCardRow>` manualmente em vez de `<TableRow>` quando o container fica estreito (decide via ResizeObserver/matchMedia). Já no `<DataTable>`, o switch é automático: abaixo de `cardBreakpoint` (default 768px), todas as rows viram cards automaticamente — sem trabalho extra.\"\r\n        code={`<TableCardRow\r\n  header={<strong>{row.name}</strong>}\r\n  headerActions={<Button size=\"icon-xs\"><Pencil /></Button>}\r\n  items={[\r\n    { label: \"Email\", value: row.email },\r\n    { label: \"Cargo\", value: row.role },\r\n  ]}\r\n/>`}\r\n      >\r\n        <div className=\"w-full\">\r\n          <CardModeExample />\r\n        </div>\r\n      </ExampleSection>\r\n\r\n      <ExampleSection\r\n        id=\"ex-full\"\r\n        title=\"Tabela completa (estilo design-and-table-v2)\"\r\n        description=\"Replica visual da tabela de CRUD: 13 colunas com icone de tipo, sort badge, cell borders, sticky right action column, strip lateral brand em selected, hover '...' na row, status/category/person/agent cells customizadas.\"\r\n        code={`<Table cellBorders density=\"comfortable\">\r\n  <TableHead>\r\n    <TableHeadCell icon={Hash} width={120}>ID</TableHeadCell>\r\n    <TableHeadCell icon={User} sortable sortDirection=\"asc\">Nome</TableHeadCell>\r\n    <TableHeadCell icon={AtSign} headMenu={<Button>...</Button>}>Email</TableHeadCell>\r\n  </TableHead>\r\n  <TableBody>\r\n    {rows.map(row => (\r\n      <TableRow key={row.id} selected={isSelected(row.id)}>\r\n        <TableCell>{row.id}</TableCell>\r\n        <TableCell><PersonCell row={row} /></TableCell>\r\n      </TableRow>\r\n    ))}\r\n  </TableBody>\r\n</Table>`}\r\n      >\r\n        <div className=\"w-full\">\r\n          <ClientsTableExample />\r\n        </div>\r\n      </ExampleSection>\r\n\r\n      {/* ── API Reference ───────────────────────────────────────────── */}\r\n      <SectionH2 id=\"api\" title=\"API Reference\" />\r\n\r\n      <div id=\"api-table\" className=\"mb-12\">\r\n        <h3 className=\"text-title-lg font-semibold text-fg-default mb-gp-md\">&lt;Table&gt;</h3>\r\n        <PropsTable items={TABLE_PROPS} />\r\n      </div>\r\n\r\n      <div id=\"api-head\" className=\"mb-12\">\r\n        <h3 className=\"text-title-lg font-semibold text-fg-default mb-gp-md\">&lt;TableHead&gt;</h3>\r\n        <PropsTable items={HEAD_PROPS} />\r\n      </div>\r\n\r\n      <div id=\"api-headcell\" className=\"mb-12\">\r\n        <h3 className=\"text-title-lg font-semibold text-fg-default mb-gp-md\">&lt;TableHeadCell&gt;</h3>\r\n        <PropsTable items={HEAD_CELL_PROPS} />\r\n      </div>\r\n\r\n      <div id=\"api-row\" className=\"mb-12\">\r\n        <h3 className=\"text-title-lg font-semibold text-fg-default mb-gp-md\">&lt;TableRow&gt;</h3>\r\n        <PropsTable items={ROW_PROPS} />\r\n      </div>\r\n\r\n      <div id=\"api-cell\" className=\"mb-12\">\r\n        <h3 className=\"text-title-lg font-semibold text-fg-default mb-gp-md\">&lt;TableCell&gt;</h3>\r\n        <PropsTable items={CELL_PROPS} />\r\n      </div>\r\n\r\n      <div id=\"api-cardrow\" className=\"mb-12\">\r\n        <h3 className=\"text-title-lg font-semibold text-fg-default mb-gp-md\">&lt;TableCardRow&gt;</h3>\r\n        <PropsTable items={CARD_ROW_PROPS} />\r\n      </div>\r\n    </DocLayout>\r\n  );\r\n}\r\n\r\n/* ── Examples ─────────────────────────────────────────────────────── */\r\n\r\nfunction HeroExample() {\r\n  const columns = useMemo(() => [\r\n    { field: \"name\",   headerName: \"Nome\",   width: 180 },\r\n    { field: \"email\",  headerName: \"Email\",  width: 220 },\r\n    { field: \"status\", headerName: \"Status\", width: 100 },\r\n  ], []);\r\n  const { widths } = useColumnWidths(columns);\r\n\r\n  return (\r\n    <Table ariaLabel=\"Hero example\">\r\n      <TableHead>\r\n        {columns.map((c) => (\r\n          <TableHeadCell key={c.field} width={widths[c.field]}>{c.headerName}</TableHeadCell>\r\n        ))}\r\n      </TableHead>\r\n      <TableBody>\r\n        {SEED_USERS.slice(0, 3).map((row) => (\r\n          <TableRow key={row.id}>\r\n            <TableCell width={widths.name}>{row.name}</TableCell>\r\n            <TableCell width={widths.email}>{row.email}</TableCell>\r\n            <TableCell width={widths.status}>\r\n              <Badge color={statusColor[row.status]} variant=\"soft\" size=\"sm\">{row.status}</Badge>\r\n            </TableCell>\r\n          </TableRow>\r\n        ))}\r\n      </TableBody>\r\n    </Table>\r\n  );\r\n}\r\n\r\nfunction DensityExample() {\r\n  const [density, setDensity] = useState<TableDensity>(\"standard\");\r\n  const columns = useMemo(() => [\r\n    { field: \"name\",   headerName: \"Nome\",   width: 180 },\r\n    { field: \"email\",  headerName: \"Email\",  width: 220 },\r\n    { field: \"role\",   headerName: \"Cargo\",  width: 120 },\r\n    { field: \"status\", headerName: \"Status\", width: 110 },\r\n  ], []);\r\n  const { widths } = useColumnWidths(columns);\r\n\r\n  return (\r\n    <div className=\"flex flex-col gap-gp-md\">\r\n      <div className=\"flex gap-gp-md\">\r\n        {([\"compact\", \"standard\", \"comfortable\"] as const).map((d) => (\r\n          <Button\r\n            key={d}\r\n            size=\"xs\"\r\n            variant={density === d ? \"filled\" : \"outline\"}\r\n            color={density === d ? \"primary\" : \"secondary\"}\r\n            onClick={() => setDensity(d)}\r\n          >\r\n            {d}\r\n          </Button>\r\n        ))}\r\n      </div>\r\n\r\n      <Table density={density} ariaLabel=\"Density example\">\r\n        <TableHead>\r\n          {columns.map((c) => (\r\n            <TableHeadCell key={c.field} width={widths[c.field]}>{c.headerName}</TableHeadCell>\r\n          ))}\r\n        </TableHead>\r\n        <TableBody>\r\n          {SEED_USERS.slice(0, 4).map((row) => (\r\n            <TableRow key={row.id}>\r\n              <TableCell width={widths.name}>{row.name}</TableCell>\r\n              <TableCell width={widths.email}>{row.email}</TableCell>\r\n              <TableCell width={widths.role}>{row.role}</TableCell>\r\n              <TableCell width={widths.status}>\r\n                <Badge color={statusColor[row.status]} variant=\"soft\" size=\"md\">{row.status}</Badge>\r\n              </TableCell>\r\n            </TableRow>\r\n          ))}\r\n        </TableBody>\r\n      </Table>\r\n    </div>\r\n  );\r\n}\r\n\r\nfunction StickyExample() {\r\n  const columns = useMemo(() => [\r\n    { field: \"name\",  headerName: \"Nome\",  width: 180 },\r\n    { field: \"email\", headerName: \"Email\", width: 220 },\r\n    { field: \"role\",  headerName: \"Cargo\", width: 120 },\r\n  ], []);\r\n  const { widths } = useColumnWidths(columns);\r\n  const bigRows = useMemo(\r\n    () => Array.from({ length: 30 }, (_, i) => SEED_USERS[i % SEED_USERS.length]),\r\n    [],\r\n  );\r\n\r\n  return (\r\n    <div style={{ height: 320 }}>\r\n      <Table ariaLabel=\"Sticky example\">\r\n        <TableHead>\r\n          {columns.map((c) => (\r\n            <TableHeadCell key={c.field} width={widths[c.field]}>{c.headerName}</TableHeadCell>\r\n          ))}\r\n        </TableHead>\r\n        <TableBody>\r\n          {bigRows.map((row, i) => (\r\n            <TableRow key={`${row.id}-${i}`}>\r\n              <TableCell width={widths.name}>{row.name}</TableCell>\r\n              <TableCell width={widths.email}>{row.email}</TableCell>\r\n              <TableCell width={widths.role}>{row.role}</TableCell>\r\n            </TableRow>\r\n          ))}\r\n        </TableBody>\r\n      </Table>\r\n    </div>\r\n  );\r\n}\r\n\r\nfunction PinSortResizeExample() {\r\n  const initialCols = useMemo(\r\n    () => [\r\n      { field: \"select\", headerName: \"\",       width: 56,  pinned: \"left\" as const,  resizable: false, sortable: false },\r\n      { field: \"name\",   headerName: \"Nome\",   width: 160, pinned: \"left\" as const,  resizable: true,  sortable: true },\r\n      { field: \"email\",  headerName: \"Email\",  width: 200,                            resizable: true,  sortable: true },\r\n      { field: \"role\",   headerName: \"Cargo\",  width: 120,                            resizable: true,  sortable: true },\r\n      { field: \"status\", headerName: \"Status\", width: 110,                            resizable: true,  sortable: true },\r\n      { field: \"actions\", headerName: \"\",      width: 56,  pinned: \"right\" as const, resizable: false, sortable: false },\r\n    ],\r\n    [],\r\n  );\r\n\r\n  const [widthMap, setWidthMap] = useState<Record<string, number>>({});\r\n  const cols = useMemo(\r\n    () => initialCols.map((c) => ({ ...c, width: widthMap[c.field] ?? c.width })),\r\n    [initialCols, widthMap],\r\n  );\r\n  const { widths, offsets } = useColumnWidths(cols);\r\n\r\n  const [sort, setSort] = useState<{ field: string; dir: SortDirection }>({ field: \"\", dir: null });\r\n  const onSort = (field: string) => {\r\n    setSort((prev) => {\r\n      if (prev.field !== field) return { field, dir: \"asc\" };\r\n      if (prev.dir === \"asc\") return { field, dir: \"desc\" };\r\n      return { field: \"\", dir: null };\r\n    });\r\n  };\r\n\r\n  return (\r\n    <Table ariaLabel=\"Pin + sort + resize example\">\r\n      <TableHead>\r\n        {cols.map((c) => (\r\n          <TableHeadCell\r\n            key={c.field}\r\n            width={widths[c.field]}\r\n            pinned={c.pinned}\r\n            pinOffset={offsets[c.field]}\r\n            sortable={c.sortable}\r\n            sortDirection={sort.field === c.field ? sort.dir : null}\r\n            onSortClick={() => onSort(c.field)}\r\n            resizable={c.resizable}\r\n            onResize={(w) => setWidthMap((m) => ({ ...m, [c.field]: w }))}\r\n          >\r\n            {c.headerName}\r\n          </TableHeadCell>\r\n        ))}\r\n      </TableHead>\r\n      <TableBody>\r\n        {SEED_USERS.map((row) => (\r\n          <TableRow key={row.id}>\r\n            <TableCell width={widths.select} pinned=\"left\" pinOffset={offsets.select}>\r\n              <Checkbox aria-label={`Selecionar ${row.name}`} />\r\n            </TableCell>\r\n            <TableCell width={widths.name} pinned=\"left\" pinOffset={offsets.name} ellipsis>{row.name}</TableCell>\r\n            <TableCell width={widths.email} ellipsis>{row.email}</TableCell>\r\n            <TableCell width={widths.role}>{row.role}</TableCell>\r\n            <TableCell width={widths.status}>\r\n              <Badge color={statusColor[row.status]} variant=\"soft\" size=\"md\">{row.status}</Badge>\r\n            </TableCell>\r\n            <TableCell width={widths.actions} pinned=\"right\" pinOffset={offsets.actions} align=\"center\">\r\n              <Button size=\"icon-xs\" variant=\"ghost\" color=\"secondary\" aria-label=\"Mais\">\r\n                <MoreVertical />\r\n              </Button>\r\n            </TableCell>\r\n          </TableRow>\r\n        ))}\r\n      </TableBody>\r\n    </Table>\r\n  );\r\n}\r\n\r\nfunction SelectionExample() {\r\n  const [selected, setSelected] = useState<Set<number>>(new Set([2, 5]));\r\n  const columns = useMemo(() => [\r\n    { field: \"select\", headerName: \"\",     width: 56 },\r\n    { field: \"name\",   headerName: \"Nome\", width: 180 },\r\n    { field: \"email\",  headerName: \"Email\", width: 220 },\r\n  ], []);\r\n  const { widths } = useColumnWidths(columns);\r\n\r\n  const toggle = (id: number) => {\r\n    setSelected((prev) => {\r\n      const next = new Set(prev);\r\n      if (next.has(id)) next.delete(id); else next.add(id);\r\n      return next;\r\n    });\r\n  };\r\n\r\n  const rows = SEED_USERS.slice(0, 6);\r\n  const allSelected = selected.size === rows.length;\r\n  const someSelected = selected.size > 0 && !allSelected;\r\n  const toggleAll = () => {\r\n    if (selected.size > 0) setSelected(new Set());\r\n    else setSelected(new Set(rows.map((r) => r.id)));\r\n  };\r\n\r\n  return (\r\n    <Table ariaLabel=\"Selection example\">\r\n      <TableHead>\r\n        <TableHeadCell width={widths.select} align=\"center\">\r\n          <Checkbox\r\n            checked={allSelected ? true : someSelected ? \"indeterminate\" : false}\r\n            onCheckedChange={toggleAll}\r\n            aria-label=\"Selecionar todos\"\r\n          />\r\n        </TableHeadCell>\r\n        {columns.slice(1).map((c) => (\r\n          <TableHeadCell key={c.field} width={widths[c.field]}>{c.headerName}</TableHeadCell>\r\n        ))}\r\n      </TableHead>\r\n      <TableBody>\r\n        {rows.map((row) => (\r\n          <TableRow\r\n            key={row.id}\r\n            selected={selected.has(row.id)}\r\n            clickable\r\n            onClick={() => toggle(row.id)}\r\n          >\r\n            <TableCell width={widths.select} align=\"center\">\r\n              <Checkbox\r\n                checked={selected.has(row.id)}\r\n                aria-label={`Selecionar ${row.name}`}\r\n                onClick={(e) => e.stopPropagation()}\r\n                onCheckedChange={() => toggle(row.id)}\r\n              />\r\n            </TableCell>\r\n            <TableCell width={widths.name}>{row.name}</TableCell>\r\n            <TableCell width={widths.email}>{row.email}</TableCell>\r\n          </TableRow>\r\n        ))}\r\n      </TableBody>\r\n    </Table>\r\n  );\r\n}\r\n\r\nfunction CardModeExample() {\r\n  return (\r\n    <Table cardBreakpoint={768} ariaLabel=\"Card mode example\">\r\n      <TableBody>\r\n        {SEED_USERS.slice(0, 4).map((row) => (\r\n          <TableCardRow\r\n            key={row.id}\r\n            header={\r\n              <>\r\n                <Checkbox aria-label={`Selecionar ${row.name}`} />\r\n                <strong className=\"text-body-lg text-fg-strong\">{row.name}</strong>\r\n              </>\r\n            }\r\n            headerActions={\r\n              <Button size=\"icon-xs\" variant=\"ghost\" color=\"secondary\" aria-label=\"Editar\">\r\n                <Pencil />\r\n              </Button>\r\n            }\r\n            items={[\r\n              { label: \"Email\", value: row.email },\r\n              { label: \"Cargo\", value: row.role },\r\n              {\r\n                label: \"Status\",\r\n                value: <Badge color={statusColor[row.status]} variant=\"soft\" size=\"md\">{row.status}</Badge>,\r\n              },\r\n            ]}\r\n          />\r\n        ))}\r\n      </TableBody>\r\n    </Table>\r\n  );\r\n}\r\n\r\n/* ═══════════════════════════════════════════════════════════════════════════\r\n   ClientsTable example: replica do design-and-table-v2\r\n   ═══════════════════════════════════════════════════════════════════════════ */\r\n\r\nexport const STATUSES: Record<string, { label: string; color: string }> = {\r\n  active:   { label: \"Ativo\",    color: \"var(--color-fg-success)\" },\r\n  pending:  { label: \"Pendente\", color: \"var(--color-fg-warning)\" },\r\n  paused:   { label: \"Pausado\",  color: \"var(--color-fg-info)\" },\r\n  inactive: { label: \"Inativo\",  color: \"var(--color-fg-muted)\" },\r\n};\r\n\r\nexport type CategoryKind = \"warning\" | \"info\" | \"success\" | \"neutral\";\r\nexport const CATEGORIES: Record<string, { label: string; kind: CategoryKind }> = {\r\n  royal:      { label: \"Royal\",      kind: \"warning\" },\r\n  licenciado: { label: \"Licenciado\", kind: \"info\" },\r\n  lead:       { label: \"Lead\",       kind: \"success\" },\r\n};\r\n\r\nexport const AGENTS: Record<string, { name: string; initials: string; color: string }> = {\r\n  you:    { name: \"Voce\",         initials: \"VC\", color: \"#0a3a2e\" },\r\n  aline:  { name: \"Aline Castro\", initials: \"AC\", color: \"#f59e0b\" },\r\n  carlos: { name: \"Carlos Souza\", initials: \"CS\", color: \"#8754ec\" },\r\n  maria:  { name: \"Maria Lima\",   initials: \"ML\", color: \"#ef4444\" },\r\n};\r\n\r\nexport type ClientRow = {\r\n  id: string;\r\n  name: string;\r\n  initials: string;\r\n  avatarColor: string;\r\n  email: string;\r\n  phone: string;\r\n  statusId: keyof typeof STATUSES;\r\n  categoryId: keyof typeof CATEGORIES;\r\n  location: string;\r\n  value: number;\r\n  agentId: keyof typeof AGENTS;\r\n  createdAt: number;\r\n  lastContact: number;\r\n};\r\n\r\nconst BASE_DATE = new Date(\"2026-04-15T12:00:00Z\").getTime();\r\nconst DAY_MS = 86400000;\r\n\r\nexport const CLIENTS_MOCK: ClientRow[] = [\r\n  { 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  },\r\n  { 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  },\r\n  { 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  },\r\n  { 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 },\r\n  { 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 },\r\n  { 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  },\r\n  { 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  },\r\n  { 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  },\r\n  { 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  },\r\n  { 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              },\r\n];\r\n\r\nconst MONTHS_SHORT = [\"jan\", \"fev\", \"mar\", \"abr\", \"mai\", \"jun\", \"jul\", \"ago\", \"set\", \"out\", \"nov\", \"dez\"];\r\nexport function formatDateShort(value: number): string {\r\n  const d = new Date(value);\r\n  const day = d.getDate().toString().padStart(2, \"0\");\r\n  return `${day} de ${MONTHS_SHORT[d.getMonth()]}`;\r\n}\r\nexport function formatCurrency(value: number): string {\r\n  return value.toLocaleString(\"pt-BR\", { style: \"currency\", currency: \"BRL\", minimumFractionDigits: 2 });\r\n}\r\n\r\nexport function ClientAvatar({ initials, color, sm = false }: { initials: string; color: string; sm?: boolean }) {\r\n  return (\r\n    <span\r\n      className={`inline-grid place-items-center rounded-radius-full text-white font-bold shrink-0 ${sm ? \"size-[22px] text-caption-xs\" : \"size-[28px] text-caption-sm\"}`}\r\n      style={{ background: color }}\r\n      aria-hidden\r\n    >\r\n      {initials}\r\n    </span>\r\n  );\r\n}\r\n\r\nexport function PersonCell({ row }: { row: ClientRow }) {\r\n  return (\r\n    <span className=\"inline-flex items-center gap-gp-md whitespace-nowrap overflow-hidden\" title={row.name}>\r\n      <ClientAvatar initials={row.initials} color={row.avatarColor} />\r\n      <span className=\"truncate font-medium text-fg-default\">{row.name}</span>\r\n    </span>\r\n  );\r\n}\r\n\r\nexport function AgentCell({ agentId }: { agentId: keyof typeof AGENTS }) {\r\n  const a = AGENTS[agentId];\r\n  return (\r\n    <span className=\"inline-flex items-center gap-gp-md whitespace-nowrap\" title={a.name}>\r\n      <ClientAvatar initials={a.initials} color={a.color} sm />\r\n      <span className=\"text-fg-default\">{a.name}</span>\r\n    </span>\r\n  );\r\n}\r\n\r\nexport function StatusDot({ statusId }: { statusId: keyof typeof STATUSES }) {\r\n  const s = STATUSES[statusId];\r\n  return (\r\n    <span className=\"inline-flex items-center gap-gp-md text-fg-default\">\r\n      <span className=\"size-[8px] rounded-radius-full shrink-0\" style={{ background: s.color }} aria-hidden />\r\n      {s.label}\r\n    </span>\r\n  );\r\n}\r\n\r\nexport function CategoryChip({ categoryId }: { categoryId: keyof typeof CATEGORIES }) {\r\n  const c = CATEGORIES[categoryId];\r\n  const colorMap = {\r\n    warning: \"warning\",\r\n    info: \"info\",\r\n    success: \"success\",\r\n    neutral: \"neutral\",\r\n  } as const;\r\n  return (\r\n    <Chip color={colorMap[c.kind]} variant=\"soft\" size=\"sm\">\r\n      {c.label}\r\n    </Chip>\r\n  );\r\n}\r\n\r\nexport function ClientsTableExample() {\r\n  const [selected, setSelected] = useState<Set<string>>(new Set([\"CLI-2401\"]));\r\n  const [openRowId, setOpenRowId] = useState<string | null>(null);\r\n  const [sortDir, setSortDir] = useState<SortDirection>(\"asc\");\r\n\r\n  const toggle = (id: string) => {\r\n    setSelected((prev) => {\r\n      const next = new Set(prev);\r\n      if (next.has(id)) next.delete(id); else next.add(id);\r\n      return next;\r\n    });\r\n  };\r\n\r\n  const allSelected = selected.size === CLIENTS_MOCK.length;\r\n  const someSelected = selected.size > 0 && !allSelected;\r\n  const toggleAll = () => {\r\n    if (selected.size > 0) setSelected(new Set());\r\n    else setSelected(new Set(CLIENTS_MOCK.map((r) => r.id)));\r\n  };\r\n\r\n  const cycleSort = () => {\r\n    setSortDir((prev) => (prev === \"asc\" ? \"desc\" : prev === \"desc\" ? null : \"asc\"));\r\n  };\r\n\r\n  const initialCols = useMemo(() => [\r\n    { field: \"select\",      headerName: \"\",                width: 56 },\r\n    { field: \"id\",          headerName: \"ID\",              width: 120,    icon: Hash },\r\n    { field: \"name\",        headerName: \"Nome\",            width: 220,    icon: User },\r\n    { field: \"email\",       headerName: \"Email\",           width: 240,    icon: AtSign },\r\n    { field: \"phone\",       headerName: \"Telefone\",        width: 170,    icon: Phone },\r\n    { field: \"status\",      headerName: \"Status\",          width: 140,    icon: CheckCircle2 },\r\n    { field: \"category\",    headerName: \"Categoria\",       width: 130,    icon: Tag },\r\n    { field: \"agent\",       headerName: \"Atribuido\",       width: 170,    icon: UsersIcon },\r\n    { field: \"value\",       headerName: \"Valor\",           width: 130,    icon: DollarSign },\r\n    { field: \"createdAt\",   headerName: \"Criado em\",       width: 130,    icon: Calendar },\r\n    { field: \"lastContact\", headerName: \"Ultimo contato\",  width: 150,    icon: Calendar },\r\n    { field: \"location\",    headerName: \"Localizacao\",     width: 150,    icon: Type },\r\n    { field: \"actions\",     headerName: \"\",                width: 44 },\r\n  ], []);\r\n\r\n  const [widthMap, setWidthMap] = useState<Record<string, number>>({});\r\n  const cols = useMemo(\r\n    () => initialCols.map((c) => ({ ...c, width: widthMap[c.field] ?? c.width })),\r\n    [initialCols, widthMap],\r\n  );\r\n\r\n  const { widths } = useColumnWidths(cols);\r\n\r\n  return (\r\n    <Table cellBorders density=\"comfortable\" ariaLabel=\"Tabela de clientes\">\r\n      <TableHead>\r\n        <TableHeadCell width={widths.select} align=\"center\">\r\n          <Checkbox\r\n            checked={allSelected ? true : someSelected ? \"indeterminate\" : false}\r\n            onCheckedChange={toggleAll}\r\n            aria-label=\"Selecionar todos\"\r\n          />\r\n        </TableHeadCell>\r\n\r\n        {cols.slice(1, -1).map((c) => (\r\n          <TableHeadCell\r\n            key={c.field}\r\n            width={widths[c.field]}\r\n            icon={c.icon}\r\n            sortable={c.field === \"name\"}\r\n            sortDirection={c.field === \"name\" ? sortDir : null}\r\n            sortIndex={1}\r\n            onSortClick={c.field === \"name\" ? cycleSort : undefined}\r\n            resizable\r\n            onResize={(w) => setWidthMap((m) => ({ ...m, [c.field]: w }))}\r\n            headMenu={\r\n              <Button size=\"icon-2xs\" variant=\"ghost\" color=\"secondary\" aria-label={`Menu da coluna ${c.headerName}`} onClick={(e: React.MouseEvent) => e.stopPropagation()}>\r\n                <MoreVertical />\r\n              </Button>\r\n            }\r\n          >\r\n            {c.headerName}\r\n          </TableHeadCell>\r\n        ))}\r\n\r\n        <TableHeadCell width={widths.actions} align=\"center\" />\r\n      </TableHead>\r\n\r\n      <TableBody>\r\n        {CLIENTS_MOCK.map((row) => {\r\n          const isSelected = selected.has(row.id);\r\n          return (\r\n            <TableRow\r\n              key={row.id}\r\n              selected={isSelected}\r\n              open={openRowId === row.id}\r\n              clickable\r\n              onClick={() => setOpenRowId((cur) => (cur === row.id ? null : row.id))}\r\n            >\r\n              <TableCell width={widths.select} align=\"center\">\r\n                <Checkbox\r\n                  checked={isSelected}\r\n                  onCheckedChange={() => toggle(row.id)}\r\n                  onClick={(e: React.MouseEvent) => e.stopPropagation()}\r\n                  aria-label={`Selecionar ${row.name}`}\r\n                />\r\n              </TableCell>\r\n\r\n              <TableCell width={widths.id}>\r\n                <span className=\"text-fg-muted tabular-nums\">{row.id}</span>\r\n              </TableCell>\r\n\r\n              <TableCell width={widths.name}>\r\n                <PersonCell row={row} />\r\n              </TableCell>\r\n\r\n              <TableCell width={widths.email}>\r\n                <a\r\n                  href={`mailto:${row.email}`}\r\n                  className=\"text-fg-brand hover:underline\"\r\n                  onClick={(e: React.MouseEvent) => e.stopPropagation()}\r\n                >\r\n                  {row.email}\r\n                </a>\r\n              </TableCell>\r\n\r\n              <TableCell width={widths.phone}>\r\n                <a\r\n                  href={`tel:${row.phone.replace(/\\D/g, \"\")}`}\r\n                  className=\"text-fg-brand hover:underline\"\r\n                  onClick={(e: React.MouseEvent) => e.stopPropagation()}\r\n                >\r\n                  {row.phone}\r\n                </a>\r\n              </TableCell>\r\n\r\n              <TableCell width={widths.status}>\r\n                <StatusDot statusId={row.statusId} />\r\n              </TableCell>\r\n\r\n              <TableCell width={widths.category}>\r\n                <CategoryChip categoryId={row.categoryId} />\r\n              </TableCell>\r\n\r\n              <TableCell width={widths.agent}>\r\n                <AgentCell agentId={row.agentId} />\r\n              </TableCell>\r\n\r\n              <TableCell width={widths.value}>\r\n                <span className=\"font-semibold tabular-nums\">{formatCurrency(row.value)}</span>\r\n              </TableCell>\r\n\r\n              <TableCell width={widths.createdAt}>\r\n                <span className=\"text-fg-muted tabular-nums\">{formatDateShort(row.createdAt)}</span>\r\n              </TableCell>\r\n\r\n              <TableCell width={widths.lastContact}>\r\n                <span className=\"text-fg-muted tabular-nums\">{formatDateShort(row.lastContact)}</span>\r\n              </TableCell>\r\n\r\n              <TableCell width={widths.location}>{row.location}</TableCell>\r\n\r\n              <TableCell width={widths.actions} align=\"center\" className=\"!px-0 opacity-0 group-hover/row:opacity-100 transition-opacity\">\r\n                <Button size=\"icon-xs\" variant=\"ghost\" color=\"secondary\" aria-label=\"Acoes\" onClick={(e: React.MouseEvent<HTMLButtonElement>) => e.stopPropagation()}>\r\n                  <MoreHorizontal />\r\n                </Button>\r\n              </TableCell>\r\n            </TableRow>\r\n          );\r\n        })}\r\n      </TableBody>\r\n    </Table>\r\n  );\r\n}\r\n","import {\n  CLIENTS_MOCK,\n  STATUSES,\n  CATEGORIES,\n  AGENTS,\n  type ClientRow,\n} from \"../TableDoc\";\n\n/* ── Dataset 87 clientes (bate com badge do print) ─────────────── */\n\nexport const CLIENTS_87: ClientRow[] = Array.from({ length: 9 }, (_, batch) =>\n  CLIENTS_MOCK.map((row, i) => ({\n    ...row,\n    id: `CLI-${2400 + batch * 10 + i}`,\n  })),\n)\n  .flat()\n  .slice(0, 87);\n\n/* ── Lookups por categoria de status (column color mapping) ────── */\n\nexport const STATUS_COLOR_MAP: Record<string, string> = {\n  active: \"success\",\n  pending: \"warning\",\n  paused: \"info\",\n  inactive: \"neutral\",\n};\n\nexport const STATUS_DOT: Record<string, string> = {\n  active: \"var(--color-fg-success)\",\n  pending: \"var(--color-fg-warning)\",\n  paused: \"var(--color-fg-info)\",\n  inactive: \"var(--color-fg-muted)\",\n};\n\nexport const CATEGORY_KIND: Record<string, \"warning\" | \"info\" | \"success\"> = {\n  royal: \"warning\",\n  licenciado: \"info\",\n  lead: \"success\",\n};\n\n/* ── Options pra filters/selects ───────────────────────────────── */\n\nexport const STATUS_OPTIONS = Object.entries(STATUSES).map(([v, m]) => ({\n  value: v,\n  label: m.label,\n  color: STATUS_COLOR_MAP[v] ?? \"neutral\",\n}));\n\nexport const CATEGORY_OPTIONS = Object.entries(CATEGORIES).map(([v, m]) => ({\n  value: v,\n  label: m.label,\n  color: m.kind === \"neutral\" ? \"neutral\" : m.kind,\n}));\n\nexport const AGENT_OPTIONS = Object.entries(AGENTS).map(([v, a]) => ({\n  value: v,\n  label: a.name,\n}));\n\n/* ── Avatar lookup pro column type \"user\" ──────────────────────── */\n\nexport const AGENTS_LOOKUP = Object.fromEntries(\n  Object.entries(AGENTS).map(([id, a]) => [\n    id,\n    {\n      name: a.name,\n      initials: a.name\n        .split(\" \")\n        .map((s) => s[0])\n        .join(\"\")\n        .slice(0, 2),\n      color: a.color,\n    },\n  ]),\n);\n\n/* ── Kanban columns (1 por status) ─────────────────────────────── */\n\nexport const KANBAN_COLUMNS = Object.entries(STATUSES).map(([id, s]) => ({\n  id,\n  label: s.label,\n  dotColor: STATUS_DOT[id] ?? \"var(--color-fg-muted)\",\n}));\n\n/* ── Cidades pro select do drawer ──────────────────────────────── */\n\nexport const CITIES = [\n  \"São Paulo, SP\",\n  \"Rio de Janeiro, RJ\",\n  \"Belo Horizonte, MG\",\n  \"Porto Alegre, RS\",\n  \"Curitiba, PR\",\n  \"Recife, PE\",\n  \"Salvador, BA\",\n  \"Fortaleza, CE\",\n  \"Brasília, DF\",\n  \"Manaus, AM\",\n];\n\n/* ── Helpers de formatação ─────────────────────────────────────── */\n\nexport function formatBRL(value: number) {\n  return value.toLocaleString(\"pt-BR\", {\n    style: \"currency\",\n    currency: \"BRL\",\n    minimumFractionDigits: 2,\n  });\n}\n\nexport function formatShortDate(ms: number) {\n  if (!ms) return \"—\";\n  const d = new Date(ms);\n  const day = d.getDate().toString().padStart(2, \"0\");\n  const months = [\"jan\", \"fev\", \"mar\", \"abr\", \"mai\", \"jun\", \"jul\", \"ago\", \"set\", \"out\", \"nov\", \"dez\"];\n  return `${day} ${months[d.getMonth()]}`;\n}\n"],"names":[],"mappings":";;;;;;;AAOA,MAAM,YAAY,MAAM;AAAA,EAItB,CACE,EAAE,WAAW,cAAc,cAAc,aAAa,MAAM,GAAG,SAC/D,QAEA;AAAA,IAAC,mBAAmB;AAAA,IAAnB;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA,gBAAgB,eAAe,mBAAmB;AAAA,QAClD;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;AACA,UAAU,cAAc,mBAAmB,KAAK;ACtB9B,cAA6B,EAAE,YAAY,MAAM;AAAC,EAAA,CAAG;ACglBhE,MAAM,WAA6D;AAAA,EACxE,QAAU,EAAE,OAAO,SAAY,OAAO,0BAAA;AAAA,EACtC,SAAU,EAAE,OAAO,YAAY,OAAO,0BAAA;AAAA,EACtC,QAAU,EAAE,OAAO,WAAY,OAAO,uBAAA;AAAA,EACtC,UAAU,EAAE,OAAO,WAAY,OAAO,wBAAA;AACxC;AAGO,MAAM,aAAoE;AAAA,EAC/E,OAAY,EAAE,OAAO,SAAc,MAAM,UAAA;AAAA,EACzC,YAAY,EAAE,OAAO,cAAc,MAAM,OAAA;AAAA,EACzC,MAAY,EAAE,OAAO,QAAc,MAAM,UAAA;AAC3C;AAEO,MAAM,SAA4E;AAAA,EACvF,KAAQ,EAAE,MAAM,QAAgB,UAAU,MAAM,OAAO,UAAA;AAAA,EACvD,OAAQ,EAAE,MAAM,gBAAgB,UAAU,MAAM,OAAO,UAAA;AAAA,EACvD,QAAQ,EAAE,MAAM,gBAAgB,UAAU,MAAM,OAAO,UAAA;AAAA,EACvD,OAAQ,EAAE,MAAM,cAAgB,UAAU,MAAM,OAAO,UAAA;AACzD;AAkBA,MAAM,aAAY,oBAAI,KAAK,sBAAsB,GAAE,QAAA;AACnD,MAAM,SAAS;AAER,MAAM,eAA4B;AAAA,EACvC,EAAE,IAAI,YAAY,MAAM,eAAmB,UAAU,MAAM,aAAa,WAAW,OAAO,2BAA+B,OAAO,qBAAqB,UAAU,UAAY,YAAY,SAAc,UAAU,iBAAsB,OAAO,MAAO,SAAS,OAAU,WAAW,YAAY,KAAK,QAAQ,aAAa,YAAY,IAAI,OAAA;AAAA,EACvU,EAAE,IAAI,YAAY,MAAM,eAAmB,UAAU,MAAM,aAAa,WAAW,OAAO,2BAA+B,OAAO,qBAAqB,UAAU,WAAY,YAAY,cAAc,UAAU,sBAAsB,OAAO,OAAO,SAAS,SAAU,WAAW,YAAY,KAAK,QAAQ,aAAa,YAAY,IAAI,OAAA;AAAA,EACvU,EAAE,IAAI,YAAY,MAAM,mBAAmB,UAAU,MAAM,aAAa,WAAW,OAAO,+BAA+B,OAAO,qBAAqB,UAAU,UAAY,YAAY,QAAc,UAAU,sBAAsB,OAAO,MAAO,SAAS,UAAU,WAAW,YAAY,KAAK,QAAQ,aAAa,YAAY,IAAI,OAAA;AAAA,EACvU,EAAE,IAAI,YAAY,MAAM,aAAmB,UAAU,MAAM,aAAa,WAAW,OAAO,yBAA+B,OAAO,qBAAqB,UAAU,UAAY,YAAY,SAAc,UAAU,oBAAsB,OAAO,MAAO,SAAS,SAAU,WAAW,YAAY,KAAK,QAAQ,aAAa,YAAY,KAAK,OAAA;AAAA,EACxU,EAAE,IAAI,YAAY,MAAM,iBAAmB,UAAU,MAAM,aAAa,WAAW,OAAO,6BAA+B,OAAO,qBAAqB,UAAU,YAAY,YAAY,QAAc,UAAU,gBAAsB,OAAO,MAAO,SAAS,OAAU,WAAW,YAAY,KAAK,QAAQ,aAAa,YAAY,KAAK,OAAA;AAAA,EACxU,EAAE,IAAI,YAAY,MAAM,iBAAmB,UAAU,MAAM,aAAa,WAAW,OAAO,6BAA+B,OAAO,qBAAqB,UAAU,UAAY,YAAY,cAAc,UAAU,cAAsB,OAAO,MAAO,SAAS,SAAU,WAAW,YAAY,KAAK,QAAQ,aAAa,YAAY,IAAI,OAAA;AAAA,EACvU,EAAE,IAAI,YAAY,MAAM,iBAAmB,UAAU,MAAM,aAAa,WAAW,OAAO,6BAA+B,OAAO,qBAAqB,UAAU,WAAY,YAAY,SAAc,UAAU,iBAAsB,OAAO,OAAO,SAAS,UAAU,WAAW,YAAY,KAAK,QAAQ,aAAa,YAAY,IAAI,OAAA;AAAA,EACvU,EAAE,IAAI,YAAY,MAAM,iBAAmB,UAAU,MAAM,aAAa,WAAW,OAAO,6BAA+B,OAAO,qBAAqB,UAAU,UAAY,YAAY,QAAc,UAAU,sBAAsB,OAAO,MAAO,SAAS,SAAU,WAAW,YAAY,KAAK,QAAQ,aAAa,YAAY,IAAI,OAAA;AAAA,EACvU,EAAE,IAAI,YAAY,MAAM,mBAAmB,UAAU,MAAM,aAAa,WAAW,OAAO,+BAA+B,OAAO,qBAAqB,UAAU,UAAY,YAAY,cAAc,UAAU,sBAAsB,OAAO,MAAO,SAAS,OAAU,WAAW,YAAY,IAAI,QAAS,aAAa,YAAY,IAAI,OAAA;AAAA,EACvU,EAAE,IAAI,YAAY,MAAM,kBAAmB,UAAU,MAAM,aAAa,WAAW,OAAO,8BAA+B,OAAO,qBAAqB,UAAU,UAAY,YAAY,SAAc,UAAU,oBAAsB,OAAO,MAAO,SAAS,SAAU,WAAW,YAAY,IAAI,QAAS,aAAa,UAAA;AACzT;AC/nBO,MAAM,aAA0B,MAAM;AAAA,EAAK,EAAE,QAAQ,EAAA;AAAA,EAAK,CAAC,GAAG,UACnE,aAAa,IAAI,CAAC,KAAK,OAAO;AAAA,IAC5B,GAAG;AAAA,IACH,IAAI,OAAO,OAAO,QAAQ,KAAK,CAAC;AAAA,EAAA,EAChC;AACJ,EACG,KAAA,EACA,MAAM,GAAG,EAAE;AAIP,MAAM,mBAA2C;AAAA,EACtD,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,UAAU;AACZ;AAEO,MAAM,aAAqC;AAAA,EAChD,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,UAAU;AACZ;AAEO,MAAM,gBAAgE;AAAA,EAC3E,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,MAAM;AACR;AAIO,MAAM,iBAAiB,OAAO,QAAQ,QAAQ,EAAE,IAAI,CAAC,CAAC,GAAG,CAAC,OAAO;AAAA,EACtE,OAAO;AAAA,EACP,OAAO,EAAE;AAAA,EACT,OAAO,iBAAiB,CAAC,KAAK;AAChC,EAAE;AAEK,MAAM,mBAAmB,OAAO,QAAQ,UAAU,EAAE,IAAI,CAAC,CAAC,GAAG,CAAC,OAAO;AAAA,EAC1E,OAAO;AAAA,EACP,OAAO,EAAE;AAAA,EACT,OAAO,EAAE,SAAS,YAAY,YAAY,EAAE;AAC9C,EAAE;AAEK,MAAM,gBAAgB,OAAO,QAAQ,MAAM,EAAE,IAAI,CAAC,CAAC,GAAG,CAAC,OAAO;AAAA,EACnE,OAAO;AAAA,EACP,OAAO,EAAE;AACX,EAAE;AAIK,MAAM,gBAAgB,OAAO;AAAA,EAClC,OAAO,QAAQ,MAAM,EAAE,IAAI,CAAC,CAAC,IAAI,CAAC,MAAM;AAAA,IACtC;AAAA,IACA;AAAA,MACE,MAAM,EAAE;AAAA,MACR,UAAU,EAAE,KACT,MAAM,GAAG,EACT,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,EACf,KAAK,EAAE,EACP,MAAM,GAAG,CAAC;AAAA,MACb,OAAO,EAAE;AAAA,IAAA;AAAA,EACX,CACD;AACH;AAIO,MAAM,iBAAiB,OAAO,QAAQ,QAAQ,EAAE,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO;AAAA,EACvE;AAAA,EACA,OAAO,EAAE;AAAA,EACT,UAAU,WAAW,EAAE,KAAK;AAC9B,EAAE;AAIK,MAAM,SAAS;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAIO,SAAS,UAAU,OAAe;AACvC,SAAO,MAAM,eAAe,SAAS;AAAA,IACnC,OAAO;AAAA,IACP,UAAU;AAAA,IACV,uBAAuB;AAAA,EAAA,CACxB;AACH;AAEO,SAAS,gBAAgB,IAAY;AAC1C,MAAI,CAAC,GAAI,QAAO;AAChB,QAAM,IAAI,IAAI,KAAK,EAAE;AACrB,QAAM,MAAM,EAAE,QAAA,EAAU,WAAW,SAAS,GAAG,GAAG;AAClD,QAAM,SAAS,CAAC,OAAO,OAAO,OAAO,OAAO,OAAO,OAAO,OAAO,OAAO,OAAO,OAAO,OAAO,KAAK;AAClG,SAAO,GAAG,GAAG,IAAI,OAAO,EAAE,SAAA,CAAU,CAAC;AACvC;;;;;;;;;;;;;;;;"}

package/dist-lib/chunks/page-header-DM2G1mdi.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"page-header-DM2G1mdi.mjs","sources":["../../src/components/ui/PageHeader/page-header.styles.ts","../../src/components/ui/PageHeader/page-header.tsx"],"sourcesContent":["import { tv } from \"@/utils/tv\";\r\n\r\n/**\r\n * PageHeader styles — bloco de título de página colocado dentro do body\r\n * do `<AppShell>`.\r\n *\r\n * Layout desktop:\r\n *   ┌──────────────────────────────────────────────────────────┐\r\n *   │ [title] [badge]              [action1] [action2] [CTA]   │\r\n *   │ description                                              │\r\n *   ├──────────────────────────────────────────────────────────┤\r\n *   │ {children — ex: <Tabs />}                                │\r\n *   └──────────────────────────────────────────────────────────┘\r\n *\r\n * Mobile:\r\n *   - Text section sai (hideTextOnMobile, default true)\r\n *   - Actions ocupam toda a largura; último botão vira fluid (CTA primary)\r\n */\r\nexport const pageHeaderStyles = tv({\r\n  slots: {\r\n    root: \"shrink-0 flex flex-col gap-gp-md\",\r\n    topRow: \"flex items-center justify-between gap-gp-2xl\",\r\n    textCol: \"flex flex-col gap-gp-xs min-w-0 flex-1\",\r\n    titleRow: \"flex items-center gap-gp-md\",\r\n    title: \"m-0 text-title-lg font-bold tracking-[-0.01em] text-fg-default\",\r\n    description: [\r\n      \"m-0 text-body-md text-fg-subtle leading-[1.5]\",\r\n      \"whitespace-nowrap overflow-hidden text-ellipsis\",\r\n    ],\r\n    actionsRow: \"flex items-center gap-gp-sm shrink-0\",\r\n    extraRow: \"w-full\",\r\n  },\r\n  variants: {\r\n    hideTextOnMobile: {\r\n      true: { textCol: \"max-md:hidden\" },\r\n      false: {},\r\n    },\r\n    /**\r\n     * Mobile: actions ocupa o espaço (text hidden) + último filho vira fluid.\r\n     * Off = mantém actions square e shrink-0 (mesmo comportamento desktop).\r\n     */\r\n    mobileFluid: {\r\n      true: {\r\n        actionsRow: [\r\n          \"max-md:shrink max-md:flex-1 max-md:justify-end\",\r\n          \"max-md:[&>:last-child]:flex-1\",\r\n        ],\r\n      },\r\n      false: {},\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    hideTextOnMobile: true,\r\n    mobileFluid: true,\r\n  },\r\n});\r\n","import { cn } from \"@/lib/utils\";\nimport { pageHeaderStyles } from \"./page-header.styles\";\nimport type { PageHeaderProps } from \"./page-header.types\";\n\n/**\n * PageHeader — bloco de título reutilizável colocado dentro do body do\n * `<AppShell>`. Cobre o caso comum:\n *\n *   - Título (h1) + descrição (sub) + badge (chip ao lado)\n *   - Slot de ações à direita (botões / dropdowns)\n *   - Slot livre abaixo pra tabs, filtros ou qualquer conteúdo extra\n *\n * Mobile-ready por default:\n *   - Title/description/badge somem em viewports pequenas\n *     (Header global do AppShell já mostra title/breadcrumb)\n *   - O último botão do `actions` vira fluid (CTA full-width)\n *\n * @example\n * ```tsx\n * <PageHeader\n *   title=\"Clientes\"\n *   description=\"Gerencie sua base de clientes.\"\n *   badge={<Chip color=\"primary\" variant=\"soft\">87 registros</Chip>}\n *   actions={\n *     <>\n *       <Button variant=\"outline\" size=\"icon-md\"><MoreHorizontal /></Button>\n *       <Button variant=\"filled\" color=\"primary\">Novo cliente</Button>\n *     </>\n *   }\n * />\n * ```\n *\n * @example com tabs abaixo (slot children):\n * ```tsx\n * <PageHeader title=\"Configurações\" actions={<Button>Salvar</Button>}>\n *   <Tabs ... />\n * </PageHeader>\n * ```\n */\nexport function PageHeader({\n  title,\n  description,\n  badge,\n  actions,\n  children,\n  hideTextOnMobile = true,\n  fluidPrimaryOnMobile = true,\n  className,\n}: PageHeaderProps) {\n  const s = pageHeaderStyles({\n    hideTextOnMobile,\n    mobileFluid: fluidPrimaryOnMobile,\n  });\n\n  const hasText = !!(title || description || badge);\n  const hasTopRow = hasText || !!actions;\n\n  return (\n    <header className={cn(s.root(), className)}>\n      {hasTopRow && (\n        <div className={s.topRow()}>\n          {hasText && (\n            <div className={s.textCol()}>\n              {(title || badge) && (\n                <div className={s.titleRow()}>\n                  {title && <h1 className={s.title()}>{title}</h1>}\n                  {badge}\n                </div>\n              )}\n              {description && <p className={s.description()}>{description}</p>}\n            </div>\n          )}\n          {actions && <div className={s.actionsRow()}>{actions}</div>}\n        </div>\n      )}\n      {children && <div className={s.extraRow()}>{children}</div>}\n    </header>\n  );\n}\n\nPageHeader.displayName = \"PageHeader\";\n"],"names":[],"mappings":";;AAkBO,MAAM,mBAAmB,GAAG;AAAA,EACjC,OAAO;AAAA,IACL,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,UAAU;AAAA,IACV,OAAO;AAAA,IACP,aAAa;AAAA,MACX;AAAA,MACA;AAAA,IAAA;AAAA,IAEF,YAAY;AAAA,IACZ,UAAU;AAAA,EAAA;AAAA,EAEZ,UAAU;AAAA,IACR,kBAAkB;AAAA,MAChB,MAAM,EAAE,SAAS,gBAAA;AAAA,MACjB,OAAO,CAAA;AAAA,IAAC;AAAA;AAAA;AAAA;AAAA;AAAA,IAMV,aAAa;AAAA,MACX,MAAM;AAAA,QACJ,YAAY;AAAA,UACV;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,MAEF,OAAO,CAAA;AAAA,IAAC;AAAA,EACV;AAAA,EAEF,iBAAiB;AAAA,IACf,kBAAkB;AAAA,IAClB,aAAa;AAAA,EAAA;AAEjB,CAAC;AChBM,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,mBAAmB;AAAA,EACnB,uBAAuB;AAAA,EACvB;AACF,GAAoB;AAClB,QAAM,IAAI,iBAAiB;AAAA,IACzB;AAAA,IACA,aAAa;AAAA,EAAA,CACd;AAED,QAAM,UAAU,CAAC,EAAE,SAAS,eAAe;AAC3C,QAAM,YAAY,WAAW,CAAC,CAAC;AAE/B,SACE,qBAAC,YAAO,WAAW,GAAG,EAAE,KAAA,GAAQ,SAAS,GACtC,UAAA;AAAA,IAAA,aACC,qBAAC,OAAA,EAAI,WAAW,EAAE,UACf,UAAA;AAAA,MAAA,WACC,qBAAC,OAAA,EAAI,WAAW,EAAE,WACd,UAAA;AAAA,SAAA,SAAS,UACT,qBAAC,OAAA,EAAI,WAAW,EAAE,YACf,UAAA;AAAA,UAAA,6BAAU,MAAA,EAAG,WAAW,EAAE,MAAA,GAAU,UAAA,OAAM;AAAA,UAC1C;AAAA,QAAA,GACH;AAAA,QAED,eAAe,oBAAC,KAAA,EAAE,WAAW,EAAE,YAAA,GAAgB,UAAA,YAAA,CAAY;AAAA,MAAA,GAC9D;AAAA,MAED,WAAW,oBAAC,OAAA,EAAI,WAAW,EAAE,WAAA,GAAe,UAAA,QAAA,CAAQ;AAAA,IAAA,GACvD;AAAA,IAED,YAAY,oBAAC,OAAA,EAAI,WAAW,EAAE,SAAA,GAAa,SAAA,CAAS;AAAA,EAAA,GACvD;AAEJ;AAEA,WAAW,cAAc;"}