@snksergio/design-system 0.5.0 → 0.17.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"clientes-showcase-mocks-DygUqkkh.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\"\r\n\r\nimport * as React from \"react\"\r\nimport * as SeparatorPrimitive from \"@radix-ui/react-separator\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst Separator = React.forwardRef<\r\n  React.ElementRef<typeof SeparatorPrimitive.Root>,\r\n  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>\r\n>(\r\n  (\r\n    { className, orientation = \"horizontal\", decorative = true, ...props },\r\n    ref\r\n  ) => (\r\n    <SeparatorPrimitive.Root\r\n      ref={ref}\r\n      decorative={decorative}\r\n      orientation={orientation}\r\n      className={cn(\r\n        \"shrink-0 bg-border\",\r\n        orientation === \"horizontal\" ? \"h-[1px] w-full\" : \"h-full w-[1px]\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  )\r\n)\r\nSeparator.displayName = SeparatorPrimitive.Root.displayName\r\n\r\nexport { Separator }\r\n","import { createContext, useContext } from \"react\";\r\n\r\ntype DocNavContext = {\r\n  onNavigate: (pageId: string) => void;\r\n};\r\n\r\nconst DocNavCtx = createContext<DocNavContext>({ onNavigate: () => {} });\r\n\r\nexport function DocNavProvider({ onNavigate, children }: { onNavigate: (pageId: string) => void; children: React.ReactNode }) {\r\n  return <DocNavCtx.Provider value={{ onNavigate }}>{children}</DocNavCtx.Provider>;\r\n}\r\n\r\nexport function useDocNav() {\r\n  return useContext(DocNavCtx);\r\n}\r\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 {\r\n  CLIENTS_MOCK,\r\n  STATUSES,\r\n  CATEGORIES,\r\n  AGENTS,\r\n  type ClientRow,\r\n} from \"../TableDoc\";\r\n\r\n/* ── Dataset 87 clientes (bate com badge do print) ─────────────── */\r\n\r\nexport const CLIENTS_87: ClientRow[] = Array.from({ length: 9 }, (_, batch) =>\r\n  CLIENTS_MOCK.map((row, i) => ({\r\n    ...row,\r\n    id: `CLI-${2400 + batch * 10 + i}`,\r\n  })),\r\n)\r\n  .flat()\r\n  .slice(0, 87);\r\n\r\n/* ── Lookups por categoria de status (column color mapping) ────── */\r\n\r\nexport const STATUS_COLOR_MAP: Record<string, string> = {\r\n  active: \"success\",\r\n  pending: \"warning\",\r\n  paused: \"info\",\r\n  inactive: \"neutral\",\r\n};\r\n\r\nexport const STATUS_DOT: Record<string, string> = {\r\n  active: \"var(--color-fg-success)\",\r\n  pending: \"var(--color-fg-warning)\",\r\n  paused: \"var(--color-fg-info)\",\r\n  inactive: \"var(--color-fg-muted)\",\r\n};\r\n\r\nexport const CATEGORY_KIND: Record<string, \"warning\" | \"info\" | \"success\"> = {\r\n  royal: \"warning\",\r\n  licenciado: \"info\",\r\n  lead: \"success\",\r\n};\r\n\r\n/* ── Options pra filters/selects ───────────────────────────────── */\r\n\r\nexport const STATUS_OPTIONS = Object.entries(STATUSES).map(([v, m]) => ({\r\n  value: v,\r\n  label: m.label,\r\n  color: STATUS_COLOR_MAP[v] ?? \"neutral\",\r\n}));\r\n\r\nexport const CATEGORY_OPTIONS = Object.entries(CATEGORIES).map(([v, m]) => ({\r\n  value: v,\r\n  label: m.label,\r\n  color: m.kind === \"neutral\" ? \"neutral\" : m.kind,\r\n}));\r\n\r\nexport const AGENT_OPTIONS = Object.entries(AGENTS).map(([v, a]) => ({\r\n  value: v,\r\n  label: a.name,\r\n}));\r\n\r\n/* ── Avatar lookup pro column type \"user\" ──────────────────────── */\r\n\r\nexport const AGENTS_LOOKUP = Object.fromEntries(\r\n  Object.entries(AGENTS).map(([id, a]) => [\r\n    id,\r\n    {\r\n      name: a.name,\r\n      initials: a.name\r\n        .split(\" \")\r\n        .map((s) => s[0])\r\n        .join(\"\")\r\n        .slice(0, 2),\r\n      color: a.color,\r\n    },\r\n  ]),\r\n);\r\n\r\n/* ── Kanban columns (1 por status) ─────────────────────────────── */\r\n\r\nexport const KANBAN_COLUMNS = Object.entries(STATUSES).map(([id, s]) => ({\r\n  id,\r\n  label: s.label,\r\n  dotColor: STATUS_DOT[id] ?? \"var(--color-fg-muted)\",\r\n}));\r\n\r\n/* ── Cidades pro select do drawer ──────────────────────────────── */\r\n\r\nexport const CITIES = [\r\n  \"São Paulo, SP\",\r\n  \"Rio de Janeiro, RJ\",\r\n  \"Belo Horizonte, MG\",\r\n  \"Porto Alegre, RS\",\r\n  \"Curitiba, PR\",\r\n  \"Recife, PE\",\r\n  \"Salvador, BA\",\r\n  \"Fortaleza, CE\",\r\n  \"Brasília, DF\",\r\n  \"Manaus, AM\",\r\n];\r\n\r\n/* ── Helpers de formatação ─────────────────────────────────────── */\r\n\r\nexport function formatBRL(value: number) {\r\n  return value.toLocaleString(\"pt-BR\", {\r\n    style: \"currency\",\r\n    currency: \"BRL\",\r\n    minimumFractionDigits: 2,\r\n  });\r\n}\r\n\r\nexport function formatShortDate(ms: number) {\r\n  if (!ms) return \"—\";\r\n  const d = new Date(ms);\r\n  const day = d.getDate().toString().padStart(2, \"0\");\r\n  const months = [\"jan\", \"fev\", \"mar\", \"abr\", \"mai\", \"jun\", \"jul\", \"ago\", \"set\", \"out\", \"nov\", \"dez\"];\r\n  return `${day} ${months[d.getMonth()]}`;\r\n}\r\n"],"names":["React","jsx","SeparatorPrimitive","cn","createContext"],"mappings":"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"}

package/dist-lib/chunks/{clientes-showcase-mocks-DEHCKxMK.mjs → clientes-showcase-mocks-ayU1SDOA.mjs}

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { createContext } from "react";
 import "lucide-react";
-import "./badge-B0D_PRxn.mjs";
+import "./badge-DBdk74KN.mjs";
 import { c as cn } from "./chip-group-_e-yh1Zq.mjs";
 import * as SeparatorPrimitive from "@radix-ui/react-separator";
 const Separator = React.forwardRef(
@@ -166,4 +166,4 @@ export {
   AGENTS_LOOKUP as j,
   AGENT_OPTIONS as k
 };
-//# sourceMappingURL=clientes-showcase-mocks-DEHCKxMK.mjs.map
+//# sourceMappingURL=clientes-showcase-mocks-ayU1SDOA.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"clientes-showcase-mocks-ayU1SDOA.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\"\r\n\r\nimport * as React from \"react\"\r\nimport * as SeparatorPrimitive from \"@radix-ui/react-separator\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst Separator = React.forwardRef<\r\n  React.ElementRef<typeof SeparatorPrimitive.Root>,\r\n  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>\r\n>(\r\n  (\r\n    { className, orientation = \"horizontal\", decorative = true, ...props },\r\n    ref\r\n  ) => (\r\n    <SeparatorPrimitive.Root\r\n      ref={ref}\r\n      decorative={decorative}\r\n      orientation={orientation}\r\n      className={cn(\r\n        \"shrink-0 bg-border\",\r\n        orientation === \"horizontal\" ? \"h-[1px] w-full\" : \"h-full w-[1px]\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  )\r\n)\r\nSeparator.displayName = SeparatorPrimitive.Root.displayName\r\n\r\nexport { Separator }\r\n","import { createContext, useContext } from \"react\";\r\n\r\ntype DocNavContext = {\r\n  onNavigate: (pageId: string) => void;\r\n};\r\n\r\nconst DocNavCtx = createContext<DocNavContext>({ onNavigate: () => {} });\r\n\r\nexport function DocNavProvider({ onNavigate, children }: { onNavigate: (pageId: string) => void; children: React.ReactNode }) {\r\n  return <DocNavCtx.Provider value={{ onNavigate }}>{children}</DocNavCtx.Provider>;\r\n}\r\n\r\nexport function useDocNav() {\r\n  return useContext(DocNavCtx);\r\n}\r\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 {\r\n  CLIENTS_MOCK,\r\n  STATUSES,\r\n  CATEGORIES,\r\n  AGENTS,\r\n  type ClientRow,\r\n} from \"../TableDoc\";\r\n\r\n/* ── Dataset 87 clientes (bate com badge do print) ─────────────── */\r\n\r\nexport const CLIENTS_87: ClientRow[] = Array.from({ length: 9 }, (_, batch) =>\r\n  CLIENTS_MOCK.map((row, i) => ({\r\n    ...row,\r\n    id: `CLI-${2400 + batch * 10 + i}`,\r\n  })),\r\n)\r\n  .flat()\r\n  .slice(0, 87);\r\n\r\n/* ── Lookups por categoria de status (column color mapping) ────── */\r\n\r\nexport const STATUS_COLOR_MAP: Record<string, string> = {\r\n  active: \"success\",\r\n  pending: \"warning\",\r\n  paused: \"info\",\r\n  inactive: \"neutral\",\r\n};\r\n\r\nexport const STATUS_DOT: Record<string, string> = {\r\n  active: \"var(--color-fg-success)\",\r\n  pending: \"var(--color-fg-warning)\",\r\n  paused: \"var(--color-fg-info)\",\r\n  inactive: \"var(--color-fg-muted)\",\r\n};\r\n\r\nexport const CATEGORY_KIND: Record<string, \"warning\" | \"info\" | \"success\"> = {\r\n  royal: \"warning\",\r\n  licenciado: \"info\",\r\n  lead: \"success\",\r\n};\r\n\r\n/* ── Options pra filters/selects ───────────────────────────────── */\r\n\r\nexport const STATUS_OPTIONS = Object.entries(STATUSES).map(([v, m]) => ({\r\n  value: v,\r\n  label: m.label,\r\n  color: STATUS_COLOR_MAP[v] ?? \"neutral\",\r\n}));\r\n\r\nexport const CATEGORY_OPTIONS = Object.entries(CATEGORIES).map(([v, m]) => ({\r\n  value: v,\r\n  label: m.label,\r\n  color: m.kind === \"neutral\" ? \"neutral\" : m.kind,\r\n}));\r\n\r\nexport const AGENT_OPTIONS = Object.entries(AGENTS).map(([v, a]) => ({\r\n  value: v,\r\n  label: a.name,\r\n}));\r\n\r\n/* ── Avatar lookup pro column type \"user\" ──────────────────────── */\r\n\r\nexport const AGENTS_LOOKUP = Object.fromEntries(\r\n  Object.entries(AGENTS).map(([id, a]) => [\r\n    id,\r\n    {\r\n      name: a.name,\r\n      initials: a.name\r\n        .split(\" \")\r\n        .map((s) => s[0])\r\n        .join(\"\")\r\n        .slice(0, 2),\r\n      color: a.color,\r\n    },\r\n  ]),\r\n);\r\n\r\n/* ── Kanban columns (1 por status) ─────────────────────────────── */\r\n\r\nexport const KANBAN_COLUMNS = Object.entries(STATUSES).map(([id, s]) => ({\r\n  id,\r\n  label: s.label,\r\n  dotColor: STATUS_DOT[id] ?? \"var(--color-fg-muted)\",\r\n}));\r\n\r\n/* ── Cidades pro select do drawer ──────────────────────────────── */\r\n\r\nexport const CITIES = [\r\n  \"São Paulo, SP\",\r\n  \"Rio de Janeiro, RJ\",\r\n  \"Belo Horizonte, MG\",\r\n  \"Porto Alegre, RS\",\r\n  \"Curitiba, PR\",\r\n  \"Recife, PE\",\r\n  \"Salvador, BA\",\r\n  \"Fortaleza, CE\",\r\n  \"Brasília, DF\",\r\n  \"Manaus, AM\",\r\n];\r\n\r\n/* ── Helpers de formatação ─────────────────────────────────────── */\r\n\r\nexport function formatBRL(value: number) {\r\n  return value.toLocaleString(\"pt-BR\", {\r\n    style: \"currency\",\r\n    currency: \"BRL\",\r\n    minimumFractionDigits: 2,\r\n  });\r\n}\r\n\r\nexport function formatShortDate(ms: number) {\r\n  if (!ms) return \"—\";\r\n  const d = new Date(ms);\r\n  const day = d.getDate().toString().padStart(2, \"0\");\r\n  const months = [\"jan\", \"fev\", \"mar\", \"abr\", \"mai\", \"jun\", \"jul\", \"ago\", \"set\", \"out\", \"nov\", \"dez\"];\r\n  return `${day} ${months[d.getMonth()]}`;\r\n}\r\n"],"names":[],"mappings":"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"}

package/dist-lib/chunks/{page-header-qOywgRWy.cjs → page-header-BZ-WrxV2.cjs}

@@ -13,7 +13,9 @@ const pageHeaderStyles = chipGroup.tv({
       "whitespace-nowrap overflow-hidden text-ellipsis"
     ],
     actionsRow: "flex items-center gap-gp-sm shrink-0",
-    extraRow: "w-full"
+    // mt-gp-xl: +20px somados ao gap-gp-md (12px) do root = ~32px de respiro
+    // entre o título/descrição e o slot de conteúdo (tabs/filtros).
+    extraRow: "w-full mt-gp-xl"
   },
   variants: {
     hideTextOnMobile: {
@@ -72,4 +74,4 @@ function PageHeader({
 PageHeader.displayName = "PageHeader";
 exports.PageHeader = PageHeader;
 exports.pageHeaderStyles = pageHeaderStyles;
-//# sourceMappingURL=page-header-qOywgRWy.cjs.map
+//# sourceMappingURL=page-header-BZ-WrxV2.cjs.map

package/dist-lib/chunks/page-header-BZ-WrxV2.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-header-BZ-WrxV2.cjs","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    // mt-gp-xl: +20px somados ao gap-gp-md (12px) do root = ~32px de respiro\r\n    // entre o título/descrição e o slot de conteúdo (tabs/filtros).\r\n    extraRow: \"w-full mt-gp-xl\",\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\";\r\nimport { pageHeaderStyles } from \"./page-header.styles\";\r\nimport type { PageHeaderProps } from \"./page-header.types\";\r\n\r\n/**\r\n * PageHeader — bloco de título reutilizável colocado dentro do body do\r\n * `<AppShell>`. Cobre o caso comum:\r\n *\r\n *   - Título (h1) + descrição (sub) + badge (chip ao lado)\r\n *   - Slot de ações à direita (botões / dropdowns)\r\n *   - Slot livre abaixo pra tabs, filtros ou qualquer conteúdo extra\r\n *\r\n * Mobile-ready por default:\r\n *   - Title/description/badge somem em viewports pequenas\r\n *     (Header global do AppShell já mostra title/breadcrumb)\r\n *   - O último botão do `actions` vira fluid (CTA full-width)\r\n *\r\n * @example\r\n * ```tsx\r\n * <PageHeader\r\n *   title=\"Clientes\"\r\n *   description=\"Gerencie sua base de clientes.\"\r\n *   badge={<Chip color=\"primary\" variant=\"soft\">87 registros</Chip>}\r\n *   actions={\r\n *     <>\r\n *       <Button variant=\"outline\" size=\"icon-md\"><MoreHorizontal /></Button>\r\n *       <Button variant=\"filled\" color=\"primary\">Novo cliente</Button>\r\n *     </>\r\n *   }\r\n * />\r\n * ```\r\n *\r\n * @example com tabs abaixo (slot children):\r\n * ```tsx\r\n * <PageHeader title=\"Configurações\" actions={<Button>Salvar</Button>}>\r\n *   <Tabs ... />\r\n * </PageHeader>\r\n * ```\r\n */\r\nexport function PageHeader({\r\n  title,\r\n  description,\r\n  badge,\r\n  actions,\r\n  children,\r\n  hideTextOnMobile = true,\r\n  fluidPrimaryOnMobile = true,\r\n  className,\r\n}: PageHeaderProps) {\r\n  const s = pageHeaderStyles({\r\n    hideTextOnMobile,\r\n    mobileFluid: fluidPrimaryOnMobile,\r\n  });\r\n\r\n  const hasText = !!(title || description || badge);\r\n  const hasTopRow = hasText || !!actions;\r\n\r\n  return (\r\n    <header className={cn(s.root(), className)}>\r\n      {hasTopRow && (\r\n        <div className={s.topRow()}>\r\n          {hasText && (\r\n            <div className={s.textCol()}>\r\n              {(title || badge) && (\r\n                <div className={s.titleRow()}>\r\n                  {title && <h1 className={s.title()}>{title}</h1>}\r\n                  {badge}\r\n                </div>\r\n              )}\r\n              {description && <p className={s.description()}>{description}</p>}\r\n            </div>\r\n          )}\r\n          {actions && <div className={s.actionsRow()}>{actions}</div>}\r\n        </div>\r\n      )}\r\n      {children && <div className={s.extraRow()}>{children}</div>}\r\n    </header>\r\n  );\r\n}\r\n\r\nPageHeader.displayName = \"PageHeader\";\r\n"],"names":["tv","jsxs","cn","jsx"],"mappings":";;;AAkBO,MAAM,mBAAmBA,UAAAA,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;AAAA;AAAA,IAGZ,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;AClBM,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,SACEC,2BAAAA,KAAC,YAAO,WAAWC,UAAAA,GAAG,EAAE,KAAA,GAAQ,SAAS,GACtC,UAAA;AAAA,IAAA,aACCD,2BAAAA,KAAC,OAAA,EAAI,WAAW,EAAE,UACf,UAAA;AAAA,MAAA,WACCA,2BAAAA,KAAC,OAAA,EAAI,WAAW,EAAE,WACd,UAAA;AAAA,SAAA,SAAS,UACTA,2BAAAA,KAAC,OAAA,EAAI,WAAW,EAAE,YACf,UAAA;AAAA,UAAA,wCAAU,MAAA,EAAG,WAAW,EAAE,MAAA,GAAU,UAAA,OAAM;AAAA,UAC1C;AAAA,QAAA,GACH;AAAA,QAED,eAAeE,2BAAAA,IAAC,KAAA,EAAE,WAAW,EAAE,YAAA,GAAgB,UAAA,YAAA,CAAY;AAAA,MAAA,GAC9D;AAAA,MAED,WAAWA,2BAAAA,IAAC,OAAA,EAAI,WAAW,EAAE,WAAA,GAAe,UAAA,QAAA,CAAQ;AAAA,IAAA,GACvD;AAAA,IAED,YAAYA,2BAAAA,IAAC,OAAA,EAAI,WAAW,EAAE,SAAA,GAAa,SAAA,CAAS;AAAA,EAAA,GACvD;AAEJ;AAEA,WAAW,cAAc;;;"}

package/dist-lib/chunks/{page-header-DM2G1mdi.mjs → page-header-CQbTGWQ8.mjs}

@@ -12,7 +12,9 @@ const pageHeaderStyles = tv({
       "whitespace-nowrap overflow-hidden text-ellipsis"
     ],
     actionsRow: "flex items-center gap-gp-sm shrink-0",
-    extraRow: "w-full"
+    // mt-gp-xl: +20px somados ao gap-gp-md (12px) do root = ~32px de respiro
+    // entre o título/descrição e o slot de conteúdo (tabs/filtros).
+    extraRow: "w-full mt-gp-xl"
   },
   variants: {
     hideTextOnMobile: {
@@ -73,4 +75,4 @@ export {
   PageHeader as P,
   pageHeaderStyles as p
 };
-//# sourceMappingURL=page-header-DM2G1mdi.mjs.map
+//# sourceMappingURL=page-header-CQbTGWQ8.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"page-header-CQbTGWQ8.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    // mt-gp-xl: +20px somados ao gap-gp-md (12px) do root = ~32px de respiro\r\n    // entre o título/descrição e o slot de conteúdo (tabs/filtros).\r\n    extraRow: \"w-full mt-gp-xl\",\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\";\r\nimport { pageHeaderStyles } from \"./page-header.styles\";\r\nimport type { PageHeaderProps } from \"./page-header.types\";\r\n\r\n/**\r\n * PageHeader — bloco de título reutilizável colocado dentro do body do\r\n * `<AppShell>`. Cobre o caso comum:\r\n *\r\n *   - Título (h1) + descrição (sub) + badge (chip ao lado)\r\n *   - Slot de ações à direita (botões / dropdowns)\r\n *   - Slot livre abaixo pra tabs, filtros ou qualquer conteúdo extra\r\n *\r\n * Mobile-ready por default:\r\n *   - Title/description/badge somem em viewports pequenas\r\n *     (Header global do AppShell já mostra title/breadcrumb)\r\n *   - O último botão do `actions` vira fluid (CTA full-width)\r\n *\r\n * @example\r\n * ```tsx\r\n * <PageHeader\r\n *   title=\"Clientes\"\r\n *   description=\"Gerencie sua base de clientes.\"\r\n *   badge={<Chip color=\"primary\" variant=\"soft\">87 registros</Chip>}\r\n *   actions={\r\n *     <>\r\n *       <Button variant=\"outline\" size=\"icon-md\"><MoreHorizontal /></Button>\r\n *       <Button variant=\"filled\" color=\"primary\">Novo cliente</Button>\r\n *     </>\r\n *   }\r\n * />\r\n * ```\r\n *\r\n * @example com tabs abaixo (slot children):\r\n * ```tsx\r\n * <PageHeader title=\"Configurações\" actions={<Button>Salvar</Button>}>\r\n *   <Tabs ... />\r\n * </PageHeader>\r\n * ```\r\n */\r\nexport function PageHeader({\r\n  title,\r\n  description,\r\n  badge,\r\n  actions,\r\n  children,\r\n  hideTextOnMobile = true,\r\n  fluidPrimaryOnMobile = true,\r\n  className,\r\n}: PageHeaderProps) {\r\n  const s = pageHeaderStyles({\r\n    hideTextOnMobile,\r\n    mobileFluid: fluidPrimaryOnMobile,\r\n  });\r\n\r\n  const hasText = !!(title || description || badge);\r\n  const hasTopRow = hasText || !!actions;\r\n\r\n  return (\r\n    <header className={cn(s.root(), className)}>\r\n      {hasTopRow && (\r\n        <div className={s.topRow()}>\r\n          {hasText && (\r\n            <div className={s.textCol()}>\r\n              {(title || badge) && (\r\n                <div className={s.titleRow()}>\r\n                  {title && <h1 className={s.title()}>{title}</h1>}\r\n                  {badge}\r\n                </div>\r\n              )}\r\n              {description && <p className={s.description()}>{description}</p>}\r\n            </div>\r\n          )}\r\n          {actions && <div className={s.actionsRow()}>{actions}</div>}\r\n        </div>\r\n      )}\r\n      {children && <div className={s.extraRow()}>{children}</div>}\r\n    </header>\r\n  );\r\n}\r\n\r\nPageHeader.displayName = \"PageHeader\";\r\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;AAAA;AAAA,IAGZ,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;AClBM,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;"}