npm - @snksergio/design-system - Versions diffs - 0.67.0 → 0.68.0 - Mend

@snksergio/design-system 0.67.0 → 0.68.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (123) hide show

package/dist-lib/src/components/shadcn/card.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"card.cjs","sources":["../../../../src/components/shadcn/card.tsx"],"sourcesContent":["import * as React from \"react\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\nimport {\r\n ClickableSurface,\r\n type ClickableSurfaceProps,\r\n} from \"./clickable-surface\"\r\n\r\n/*\r\n Card — superfície de conteúdo, com `size` que escala o padding interno de TODAS as\r\n * partes e um `variant` de header em faixa.\r\n \r\n ## `size` — 3 densidades, propagadas por contexto\r\n \r\n lg → 24px (pad-4xl)\r\n * md → 20px (pad-3xl) ← DEFAULT\r\n * sm → 16px (pad-2xl)\r\n \r\n O valor é declarado uma vez no `<Card>` e chega em `CardHeader`/`CardContent`/\r\n * `CardFooter` por `CardSizeContext` — o mesmo mecanismo que o `Tabs` usa pro\r\n * `variant`. Repetir `size` nas partes é o erro que deixa uma seção com densidade\r\n * diferente do resto do card.\r\n \r\n ⚠️ `md` (20px) é o default, e antes era 24px. Mudança deliberada de 2026-08-19:\r\n * 24 virou o `lg`. Card que dependia dos 24px passa `size=\"lg\"`.\r\n \r\n ⚠️ Não existe 18px na escala de `pad` (vai 16 → 20 → 24), então `sm` é 16px.\r\n \r\n ## O padding é dividido entre o Card e as partes — e é de propósito\r\n \r\n O `Card` carrega o padding vertical (`py-`); cada parte carrega o\r\n horizontal (`px-`). Assim o `gap` do Card controla o respiro ENTRE seções sem\r\n somar com padding de cada uma, e uma parte pode ser full-bleed (tabela que encosta\r\n * nas bordas, imagem de topo) só zerando o próprio `px`.\r\n \r\n ## `CardHeader variant=\"banded\"` — header em faixa\r\n \r\n Fundo `bg-subtle` + borda embaixo, encostado nas bordas do card. Espelha o padrão\r\n * das seções de `#/order-detail` e `?app=edit-page`, que era composição local do\r\n * showcase e agora é variante do componente.\r\n \r\n Mecânica: a faixa precisa cancelar o padding vertical do Card pra encostar no\r\n * topo (`-mt-` do mesmo tamanho do `size`) e arredondar as quinas de cima\r\n (`rounded-t-`) — em vez de `overflow-hidden` no Card, que clipa qualquer coisa que\r\n precise vazar. Ela também troca o `px-` por padding nos 4 lados, senão o texto\r\n cola na borda de cima.\r\n /\r\n\r\n/ ── size: contexto ──────────────────────────────────────────────────────── /\r\n\r\ntype CardSize = \"sm\" \| \"md\" \| \"lg\"\r\n\r\nconst CardSizeContext = React.createContext<CardSize>(\"md\")\r\n\r\n/\r\n Padding interno por size — via `pad-card-`, a família de token dedicada a\r\n padding de card** (`tokens/.../components/spacing.ts`), não a escala genérica\r\n * `pad-`. Os valores são iguais (16/20/24), mas o semântico existe pra isto: mudar\r\n a densidade de card no futuro é mexer em `padCard`, num lugar, sem caçar\r\n * `pad-3xl` espalhado.\r\n \r\n A família é simétrica desde 2026-08-19 (`sm`/`md`/`lg`). O nome antigo `pad-card-base`\r\n * continua existindo como alias de `md`, só pra não quebrar quem já o consome — não\r\n * usar aqui nem em código novo. Ver o cabeçalho de `components/spacing.ts`.\r\n /\r\nconst PAD_X: Record<CardSize, string> = {\r\n sm: \"px-pad-card-sm\",\r\n md: \"px-pad-card-md\",\r\n lg: \"px-pad-card-lg\",\r\n}\r\nconst PAD_Y: Record<CardSize, string> = {\r\n sm: \"py-pad-card-sm\",\r\n md: \"py-pad-card-md\",\r\n lg: \"py-pad-card-lg\",\r\n}\r\nconst PAD_ALL: Record<CardSize, string> = {\r\n sm: \"p-pad-card-sm\",\r\n md: \"p-pad-card-md\",\r\n lg: \"p-pad-card-lg\",\r\n}\r\n/* Cancela o `py` do Card, pra faixa encostar no topo. /\r\nconst PULL_TOP: Record<CardSize, string> = {\r\n sm: \"-mt-pad-card-sm\",\r\n md: \"-mt-pad-card-md\",\r\n lg: \"-mt-pad-card-lg\",\r\n}\r\n\r\n/ ── Card ────────────────────────────────────────────────────────────────── /\r\n\r\n/\r\n Card clicável — `onClick` e/ou `href` transformam a superfície inteira em alvo.\r\n \r\n Um `onClick` solto numa `<div>` (que é o que o consumidor escrevia) não tem foco,\r\n * não responde a Enter/Space, não é anunciado como controle e não existe pra quem\r\n * navega por teclado. Aqui o alvo é um `<button>`/`<a>` esticado por cima — ver\r\n * `ClickableSurface` pra por que não trocamos a raiz. A `<div>` continua `<div>`,\r\n * então nada do que já existe muda.\r\n \r\n `surfaceLabel` é o nome acessível e é obrigatório quando há clique: o alvo é vazio,\r\n * e sem ele o leitor anuncia \"botão\" e mais nada. Controle DENTRO do card (um menu,\r\n * um botão secundário) precisa de `relative z-10` pra ficar acima do overlay.\r\n /\r\ntype CardClickProps =\r\n \| { onClick?: never; href?: never; surfaceLabel?: never; target?: never; renderLink?: never }\r\n \| ({ surfaceLabel: string } & Pick<\r\n ClickableSurfaceProps,\r\n \"onClick\" \| \"href\" \| \"target\" \| \"renderLink\"\r\n >);\r\n\r\nconst Card = React.forwardRef<\r\n HTMLDivElement,\r\n Omit<React.HTMLAttributes<HTMLDivElement>, \"onClick\"> & { size?: CardSize } & CardClickProps\r\n>((\n { className, size = \"md\", children, onClick, href, surfaceLabel, target, renderLink, ...props },\n ref,\n) => {\r\n const clicavel = Boolean(onClick \|\| href);\r\n return (\r\n <CardSizeContext.Provider value={size}>\r\n <div\r\n ref={ref}\r\n className={cn(\r\n \"flex flex-col gap-gp-4xl rounded-radius-base bg-bg-surface text-body-md text-fg-default shadow-sh-lg ring-1 ring-fg-default/5 dark:ring-fg-default/10\",\r\n PAD_Y[size],\r\n clicavel && \"relative transition-colors hover:bg-bg-subtle\",\r\n className\r\n )}\r\n {...props}\r\n >\r\n {children}\r\n {clicavel && (\r\n <ClickableSurface\r\n label={surfaceLabel as string}\r\n onClick={onClick}\r\n href={href}\r\n target={target}\r\n renderLink={renderLink}\r\n />\r\n )}\r\n </div>\r\n </CardSizeContext.Provider>\r\n );\r\n})\r\nCard.displayName = \"Card\"\r\n\r\n/ ── CardHeader ──────────────────────────────────────────────────────────── /\r\n\r\ntype CardHeaderVariant = \"plain\" \| \"banded\"\r\n\r\n/\r\n Não há contexto de variante aqui de propósito. Houve um, por ~20 minutos em\r\n * 2026-08-19, pra a faixa deixar o título semibold enquanto o header plano ficava\r\n * medium — até descobrir que o preset `text-title-md` já é 600 e que o `medium`\r\n * era um override indevido no `CardTitle`. Removido o override, o peso é o mesmo nas\r\n * duas variantes e o contexto virou código morto.\r\n /\r\nconst CardHeader = React.forwardRef<\r\n HTMLDivElement,\r\n React.HTMLAttributes<HTMLDivElement> & { variant?: CardHeaderVariant }\r\n>(({ className, variant = \"plain\", ...props }, ref) => {\r\n const size = React.useContext(CardSizeContext)\r\n return (\r\n <div\r\n ref={ref}\r\n className={cn(\r\n // `gap-gp-2xs` (2px) e não `gp-sm` (6px): título e subtítulo de card são UMA\r\n // unidade de leitura, não dois blocos. Com 6px o subtítulo lê como parágrafo\r\n // solto sob o título; com 2px lê como legenda dele. É o valor que o showcase\r\n // já aplicava no helper local dos cards de gráfico — a diferença apareceu ao\r\n // comparar o mesmo card montado com o helper e com este componente, e o\r\n // mantenedor escolheu o compacto como padrão (2026-08-19).\r\n //\r\n // ⚠️ Divergência DELIBERADA do shadcn upstream, que usa 6px: ao re-sincronizar\r\n // este primitivo, não reverter (mesma classe de cuidado da L-040).\r\n \"grid auto-rows-min items-start gap-gp-2xs\",\r\n variant === \"banded\"\r\n ? cn(\r\n // Faixa: padding nos 4 lados (o `px` sozinho deixaria o texto colado no\r\n // topo), fundo, divisória, e o `-mt` que cancela o `py` do Card pra\r\n // encostar na borda. `rounded-t` em vez de `overflow-hidden` no Card —\r\n // clipar o Card quebraria qualquer coisa que precise vazar dele.\r\n PAD_ALL[size],\r\n PULL_TOP[size],\r\n // `bg-subtle` + `border-subtle`: os mesmos tokens da referência\r\n // (`SectionCard` do order-detail / `?app=edit-page`), escolhidos pelo\r\n // mantenedor em 2026-08-19.\r\n //\r\n // ⚠️ Medido, pra quem for mexer não achar que é descuido: no dark* o\r\n // `bg-subtle` é 1% de branco sobre um surface de 0.225 — ~0,8pp de\r\n // diferença, uma faixa muito discreta. No light são 0.973 sobre\r\n // 1.0, que lê normalmente. É restrição intencional, não bug: a decisão\r\n // veio de quem desenhou a tela de referência. Se um dia o dark precisar\r\n // de mais presença, `bg-muted` é 3× (e no light é idêntico ao subtle).\r\n \"rounded-t-radius-base border-b border-border-subtle bg-bg-subtle\"\r\n )\r\n : PAD_X[size],\r\n className\r\n )}\r\n {...props}\r\n />\r\n )\r\n})\r\nCardHeader.displayName = \"CardHeader\"\r\n\r\nconst CardTitle = React.forwardRef<\r\n HTMLDivElement,\r\n React.HTMLAttributes<HTMLDivElement>\r\n>(({ className, ...props }, ref) => (\r\n <div\r\n ref={ref}\r\n // SEM `font-`: o peso vem do preset. `text-title-md` já emite `font-weight: 600`\r\n // (conferido no tema gerado), o token declara \"title: 600 (semibold) — mais usado\r\n // no projeto\", e o `DESIGN.md` lista `title-md · 600 · Card title (default)`.\r\n //\r\n // Aqui havia um `font-medium` que anulava o próprio preset* e derrubava o título\r\n // pra 500 — sem estar documentado em lugar nenhum, e contra o spec do DS. Foi achado\r\n // em 2026-08-19 comparando o mesmo card montado com o helper local do showcase (que\r\n // acertava, `font-semibold`) e com este componente. Não reintroduzir: quem quer outro\r\n // peso passa `font-` no `className`, que é o caminho de exceção.\r\n className={cn(\"text-title-md text-fg-default\", className)}\r\n {...props}\r\n />\r\n))\r\nCardTitle.displayName = \"CardTitle\"\r\n\r\nconst CardDescription = React.forwardRef<\r\n HTMLDivElement,\r\n React.HTMLAttributes<HTMLDivElement>\r\n>(({ className, ...props }, ref) => (\r\n <div\r\n ref={ref}\r\n // `caption-md` (12px/400) e não `body-md` (14/400) — decisão do mantenedor\r\n // 2026-08-19: 14 competia com o conteúdo do card.\r\n //\r\n // Entre os dois presets de 12px, `caption-md` e não `body-xs`, por PESO: `body-xs`\r\n // é 12/500, o que deixaria o subtítulo mais pesado que os 400 de hoje e pediria\r\n // um `font-normal` por cima — reintroduzindo o override de preset que acabou de sair\r\n // do `CardTitle`. `caption-md` é 12/400: só o tamanho muda. E é o que o\r\n // `CardCheckbox.description` já usa, que é o análogo mais próximo no DS.\r\n className={cn(\"text-caption-md text-fg-muted\", className)}\r\n {...props}\r\n />\r\n))\r\nCardDescription.displayName = \"CardDescription\"\r\n\r\n/ ── CardContent · CardFooter ────────────────────────────────────────────── */\r\n\r\nconst CardContent = React.forwardRef<\r\n HTMLDivElement,\r\n React.HTMLAttributes<HTMLDivElement>\r\n>(({ className, ...props }, ref) => {\r\n const size = React.useContext(CardSizeContext)\r\n return <div ref={ref} className={cn(PAD_X[size], className)} {...props} />\r\n})\r\nCardContent.displayName = \"CardContent\"\r\n\r\nconst CardFooter = React.forwardRef<\r\n HTMLDivElement,\r\n React.HTMLAttributes<HTMLDivElement>\r\n>(({ className, ...props }, ref) => {\r\n const size = React.useContext(CardSizeContext)\r\n return (\r\n <div\r\n ref={ref}\r\n className={cn(\"flex items-center\", PAD_X[size], className)}\r\n {...props}\r\n />\r\n )\r\n})\r\nCardFooter.displayName = \"CardFooter\"\r\n\r\nexport { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }\r\nexport type { CardSize, CardHeaderVariant }\r\n"],"names":["React","jsx","jsxs","cn","ClickableSurface"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAoDA,MAAM,kBAAkBA,iBAAM,cAAwB,IAAI;AAa1D,MAAM,QAAkC;AAAA,EACtC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AACA,MAAM,QAAkC;AAAA,EACtC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AACA,MAAM,UAAoC;AAAA,EACxC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,WAAqC;AAAA,EACzC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAwBA,MAAM,OAAOA,iBAAM,WAGjB,CACA,EAAE,WAAW,OAAO,MAAM,UAAU,SAAS,MAAM,cAAc,QAAQ,YAAY,GAAG,MAAA,GACxF,QACG;AACH,QAAM,WAAW,QAAQ,WAAW,IAAI;AACxC,SACAC,2BAAAA,IAAC,gBAAgB,UAAhB,EAAyB,OAAO,MAC/B,UAAAC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAWC,MAAAA;AAAAA,QACT;AAAA,QACA,MAAM,IAAI;AAAA,QACV,YAAY;AAAA,QACZ;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEH,UAAA;AAAA,QAAA;AAAA,QACA,YACCF,2BAAAA;AAAAA,UAACG,iBAAAA;AAAAA,UAAA;AAAA,YACC,OAAO;AAAA,YACP;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA,GAGN;AAEF,CAAC;AACD,KAAK,cAAc;AAanB,MAAM,aAAaJ,iBAAM,WAGvB,CAAC,EAAE,WAAW,UAAU,SAAS,GAAG,MAAA,GAAS,QAAQ;AACrD,QAAM,OAAOA,iBAAM,WAAW,eAAe;AAC7C,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAWE,MAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,QAUT;AAAA,QACA,YAAY,WACRA,MAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,UAKE,QAAQ,IAAI;AAAA,UACZ,SAAS,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAWb;AAAA,QAAA,IAEF,MAAM,IAAI;AAAA,QACd;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;AACD,WAAW,cAAc;AAEzB,MAAM,YAAYH,iBAAM,WAGtB,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAC1BC,2BAAAA;AAAAA,EAAC;AAAA,EAAA;AAAA,IACC;AAAA,IAUA,WAAWE,MAAAA,GAAG,iCAAiC,SAAS;AAAA,IACvD,GAAG;AAAA,EAAA;AACN,CACD;AACD,UAAU,cAAc;AAExB,MAAM,kBAAkBH,iBAAM,WAG5B,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAC1BC,2BAAAA;AAAAA,EAAC;AAAA,EAAA;AAAA,IACC;AAAA,IASA,WAAWE,MAAAA,GAAG,iCAAiC,SAAS;AAAA,IACvD,GAAG;AAAA,EAAA;AACN,CACD;AACD,gBAAgB,cAAc;AAI9B,MAAM,cAAcH,iBAAM,WAGxB,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAAQ;AAClC,QAAM,OAAOA,iBAAM,WAAW,eAAe;AAC7C,SAAOC,+BAAC,OAAA,EAAI,KAAU,WAAWE,MAAAA,GAAG,MAAM,IAAI,GAAG,SAAS,GAAI,GAAG,MAAA,CAAO;AAC1E,CAAC;AACD,YAAY,cAAc;AAE1B,MAAM,aAAaH,iBAAM,WAGvB,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAAQ;AAClC,QAAM,OAAOA,iBAAM,WAAW,eAAe;AAC7C,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAWE,MAAAA,GAAG,qBAAqB,MAAM,IAAI,GAAG,SAAS;AAAA,MACxD,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;AACD,WAAW,cAAc;;;;;;;"}
1	+ {"version":3,"file":"card.cjs","sources":["../../../../src/components/shadcn/card.tsx"],"sourcesContent":["import * as React from \"react\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\nimport {\r\n ClickableSurface,\r\n type ClickableSurfaceProps,\r\n} from \"./clickable-surface\"\r\n\r\n/*\r\n Card — superfície de conteúdo, com `size` que escala o padding interno de TODAS as\r\n * partes e um `variant` de header em faixa.\r\n \r\n ## `size` — 3 densidades, propagadas por contexto\r\n \r\n lg → 24px (pad-4xl)\r\n * md → 20px (pad-3xl) ← DEFAULT\r\n * sm → 16px (pad-2xl)\r\n \r\n O valor é declarado uma vez no `<Card>` e chega em `CardHeader`/`CardContent`/\r\n * `CardFooter` por `CardSizeContext` — o mesmo mecanismo que o `Tabs` usa pro\r\n * `variant`. Repetir `size` nas partes é o erro que deixa uma seção com densidade\r\n * diferente do resto do card.\r\n \r\n ⚠️ `md` (20px) é o default, e antes era 24px. Mudança deliberada de 2026-08-19:\r\n * 24 virou o `lg`. Card que dependia dos 24px passa `size=\"lg\"`.\r\n \r\n ⚠️ Não existe 18px na escala de `pad` (vai 16 → 20 → 24), então `sm` é 16px.\r\n \r\n ## O padding é dividido entre o Card e as partes — e é de propósito\r\n \r\n O `Card` carrega o padding vertical (`py-`); cada parte carrega o\r\n horizontal (`px-`). Assim o `gap` do Card controla o respiro ENTRE seções sem\r\n somar com padding de cada uma, e uma parte pode ser full-bleed (tabela que encosta\r\n * nas bordas, imagem de topo) só zerando o próprio `px`.\r\n \r\n ## `CardHeader variant=\"banded\"` — header em faixa\r\n \r\n Fundo `bg-subtle` + borda embaixo, encostado nas bordas do card. Espelha o padrão\r\n * das seções de `#/order-detail` e `?app=edit-page`, que era composição local do\r\n * showcase e agora é variante do componente.\r\n \r\n Mecânica: a faixa precisa cancelar o padding vertical do Card pra encostar no\r\n * topo (`-mt-` do mesmo tamanho do `size`) e arredondar as quinas de cima\r\n (`rounded-t-`) — em vez de `overflow-hidden` no Card, que clipa qualquer coisa que\r\n precise vazar. Ela também troca o `px-` por padding nos 4 lados, senão o texto\r\n cola na borda de cima.\r\n /\r\n\r\n/ ── size: contexto ──────────────────────────────────────────────────────── /\r\n\r\ntype CardSize = \"sm\" \| \"md\" \| \"lg\"\r\n\r\nconst CardSizeContext = React.createContext<CardSize>(\"md\")\r\n\r\n/\r\n Padding interno por size — via `pad-card-`, a família de token dedicada a\r\n padding de card** (`tokens/.../components/spacing.ts`), não a escala genérica\r\n * `pad-`. Os valores são iguais (16/20/24), mas o semântico existe pra isto: mudar\r\n a densidade de card no futuro é mexer em `padCard`, num lugar, sem caçar\r\n * `pad-3xl` espalhado.\r\n \r\n A família é simétrica desde 2026-08-19 (`sm`/`md`/`lg`). O nome antigo `pad-card-base`\r\n * continua existindo como alias de `md`, só pra não quebrar quem já o consome — não\r\n * usar aqui nem em código novo. Ver o cabeçalho de `components/spacing.ts`.\r\n /\r\nconst PAD_X: Record<CardSize, string> = {\r\n sm: \"px-pad-card-sm\",\r\n md: \"px-pad-card-md\",\r\n lg: \"px-pad-card-lg\",\r\n}\r\nconst PAD_Y: Record<CardSize, string> = {\r\n sm: \"py-pad-card-sm\",\r\n md: \"py-pad-card-md\",\r\n lg: \"py-pad-card-lg\",\r\n}\r\nconst PAD_ALL: Record<CardSize, string> = {\r\n sm: \"p-pad-card-sm\",\r\n md: \"p-pad-card-md\",\r\n lg: \"p-pad-card-lg\",\r\n}\r\n/* Cancela o `py` do Card, pra faixa encostar no topo. /\r\nconst PULL_TOP: Record<CardSize, string> = {\r\n sm: \"-mt-pad-card-sm\",\r\n md: \"-mt-pad-card-md\",\r\n lg: \"-mt-pad-card-lg\",\r\n}\r\n\r\n/ ── Card ────────────────────────────────────────────────────────────────── /\r\n\r\n/\r\n Card clicável — `onClick` e/ou `href` transformam a superfície inteira em alvo.\r\n \r\n Um `onClick` solto numa `<div>` (que é o que o consumidor escrevia) não tem foco,\r\n * não responde a Enter/Space, não é anunciado como controle e não existe pra quem\r\n * navega por teclado. Aqui o alvo é um `<button>`/`<a>` esticado por cima — ver\r\n * `ClickableSurface` pra por que não trocamos a raiz. A `<div>` continua `<div>`,\r\n * então nada do que já existe muda.\r\n \r\n `surfaceLabel` é o nome acessível e é obrigatório quando há clique: o alvo é vazio,\r\n * e sem ele o leitor anuncia \"botão\" e mais nada. Controle DENTRO do card (um menu,\r\n * um botão secundário) precisa de `relative z-10` pra ficar acima do overlay.\r\n /\r\ntype CardClickProps =\r\n \| {\r\n onClick?: never; href?: never; surfaceLabel?: never; target?: never;\r\n renderLink?: never; surfaceClassName?: never; disabled?: never;\r\n }\r\n \| ({\r\n surfaceLabel: string;\r\n /\r\n className do ALVO esticado, não do card. Existe porque o anel de foco é externo\r\n * (`ring`) e some quando o card está dentro de um container com\r\n * `overflow-hidden` ou `content-visibility` — reportado pelo consumidor, que\r\n * resolveu com `ring-inset`. Sem esta prop, não havia como alcançar o alvo.\r\n /\r\n surfaceClassName?: string;\r\n } & Pick<\r\n ClickableSurfaceProps,\r\n \| \"onClick\"\r\n \| \"href\"\r\n \| \"target\"\r\n \| \"renderLink\"\r\n \| \"aria-pressed\"\r\n \| \"aria-current\"\r\n \| \"aria-expanded\"\r\n \| \"disabled\"\r\n >);\r\n\r\nconst Card = React.forwardRef<\r\n HTMLDivElement,\r\n Omit<React.HTMLAttributes<HTMLDivElement>, \"onClick\"> & { size?: CardSize } & CardClickProps\r\n>((\r\n {\r\n className,\r\n size = \"md\",\r\n children,\r\n onClick,\r\n href,\r\n surfaceLabel,\r\n surfaceClassName,\r\n target,\r\n renderLink,\r\n \"aria-pressed\": ariaPressed,\r\n \"aria-current\": ariaCurrent,\r\n \"aria-expanded\": ariaExpanded,\r\n disabled,\r\n ...props\r\n },\r\n ref,\r\n) => {\r\n const clicavel = Boolean(onClick \|\| href);\r\n return (\r\n <CardSizeContext.Provider value={size}>\r\n <div\r\n ref={ref}\r\n className={cn(\r\n \"flex flex-col gap-gp-4xl rounded-radius-base bg-bg-surface text-body-md text-fg-default shadow-sh-lg ring-1 ring-fg-default/5 dark:ring-fg-default/10\",\r\n PAD_Y[size],\r\n clicavel && \"relative transition-colors hover:bg-bg-subtle\",\r\n className\r\n )}\r\n {...props}\r\n >\r\n {children}\r\n {clicavel && (\r\n <ClickableSurface\r\n label={surfaceLabel as string}\r\n onClick={onClick}\r\n href={href}\r\n target={target}\r\n renderLink={renderLink}\r\n className={surfaceClassName}\r\n aria-pressed={ariaPressed}\r\n aria-current={ariaCurrent}\r\n aria-expanded={ariaExpanded}\r\n disabled={disabled}\r\n />\r\n )}\r\n </div>\r\n </CardSizeContext.Provider>\r\n );\r\n})\r\nCard.displayName = \"Card\"\r\n\r\n/ ── CardHeader ──────────────────────────────────────────────────────────── /\r\n\r\ntype CardHeaderVariant = \"plain\" \| \"banded\"\r\n\r\n/\r\n Não há contexto de variante aqui de propósito. Houve um, por ~20 minutos em\r\n * 2026-08-19, pra a faixa deixar o título semibold enquanto o header plano ficava\r\n * medium — até descobrir que o preset `text-title-md` já é 600 e que o `medium`\r\n * era um override indevido no `CardTitle`. Removido o override, o peso é o mesmo nas\r\n * duas variantes e o contexto virou código morto.\r\n /\r\nconst CardHeader = React.forwardRef<\r\n HTMLDivElement,\r\n React.HTMLAttributes<HTMLDivElement> & { variant?: CardHeaderVariant }\r\n>(({ className, variant = \"plain\", ...props }, ref) => {\r\n const size = React.useContext(CardSizeContext)\r\n return (\r\n <div\r\n ref={ref}\r\n className={cn(\r\n // `gap-gp-2xs` (2px) e não `gp-sm` (6px): título e subtítulo de card são UMA\r\n // unidade de leitura, não dois blocos. Com 6px o subtítulo lê como parágrafo\r\n // solto sob o título; com 2px lê como legenda dele. É o valor que o showcase\r\n // já aplicava no helper local dos cards de gráfico — a diferença apareceu ao\r\n // comparar o mesmo card montado com o helper e com este componente, e o\r\n // mantenedor escolheu o compacto como padrão (2026-08-19).\r\n //\r\n // ⚠️ Divergência DELIBERADA do shadcn upstream, que usa 6px: ao re-sincronizar\r\n // este primitivo, não reverter (mesma classe de cuidado da L-040).\r\n \"grid auto-rows-min items-start gap-gp-2xs\",\r\n variant === \"banded\"\r\n ? cn(\r\n // Faixa: padding nos 4 lados (o `px` sozinho deixaria o texto colado no\r\n // topo), fundo, divisória, e o `-mt` que cancela o `py` do Card pra\r\n // encostar na borda. `rounded-t` em vez de `overflow-hidden` no Card —\r\n // clipar o Card quebraria qualquer coisa que precise vazar dele.\r\n PAD_ALL[size],\r\n PULL_TOP[size],\r\n // `bg-subtle` + `border-subtle`: os mesmos tokens da referência\r\n // (`SectionCard` do order-detail / `?app=edit-page`), escolhidos pelo\r\n // mantenedor em 2026-08-19.\r\n //\r\n // ⚠️ Medido, pra quem for mexer não achar que é descuido: no dark* o\r\n // `bg-subtle` é 1% de branco sobre um surface de 0.225 — ~0,8pp de\r\n // diferença, uma faixa muito discreta. No light são 0.973 sobre\r\n // 1.0, que lê normalmente. É restrição intencional, não bug: a decisão\r\n // veio de quem desenhou a tela de referência. Se um dia o dark precisar\r\n // de mais presença, `bg-muted` é 3× (e no light é idêntico ao subtle).\r\n \"rounded-t-radius-base border-b border-border-subtle bg-bg-subtle\"\r\n )\r\n : PAD_X[size],\r\n className\r\n )}\r\n {...props}\r\n />\r\n )\r\n})\r\nCardHeader.displayName = \"CardHeader\"\r\n\r\nconst CardTitle = React.forwardRef<\r\n HTMLDivElement,\r\n React.HTMLAttributes<HTMLDivElement>\r\n>(({ className, ...props }, ref) => (\r\n <div\r\n ref={ref}\r\n // SEM `font-`: o peso vem do preset. `text-title-md` já emite `font-weight: 600`\r\n // (conferido no tema gerado), o token declara \"title: 600 (semibold) — mais usado\r\n // no projeto\", e o `DESIGN.md` lista `title-md · 600 · Card title (default)`.\r\n //\r\n // Aqui havia um `font-medium` que anulava o próprio preset* e derrubava o título\r\n // pra 500 — sem estar documentado em lugar nenhum, e contra o spec do DS. Foi achado\r\n // em 2026-08-19 comparando o mesmo card montado com o helper local do showcase (que\r\n // acertava, `font-semibold`) e com este componente. Não reintroduzir: quem quer outro\r\n // peso passa `font-` no `className`, que é o caminho de exceção.\r\n className={cn(\"text-title-md text-fg-default\", className)}\r\n {...props}\r\n />\r\n))\r\nCardTitle.displayName = \"CardTitle\"\r\n\r\nconst CardDescription = React.forwardRef<\r\n HTMLDivElement,\r\n React.HTMLAttributes<HTMLDivElement>\r\n>(({ className, ...props }, ref) => (\r\n <div\r\n ref={ref}\r\n // `caption-md` (12px/400) e não `body-md` (14/400) — decisão do mantenedor\r\n // 2026-08-19: 14 competia com o conteúdo do card.\r\n //\r\n // Entre os dois presets de 12px, `caption-md` e não `body-xs`, por PESO: `body-xs`\r\n // é 12/500, o que deixaria o subtítulo mais pesado que os 400 de hoje e pediria\r\n // um `font-normal` por cima — reintroduzindo o override de preset que acabou de sair\r\n // do `CardTitle`. `caption-md` é 12/400: só o tamanho muda. E é o que o\r\n // `CardCheckbox.description` já usa, que é o análogo mais próximo no DS.\r\n className={cn(\"text-caption-md text-fg-muted\", className)}\r\n {...props}\r\n />\r\n))\r\nCardDescription.displayName = \"CardDescription\"\r\n\r\n/ ── CardContent · CardFooter ────────────────────────────────────────────── */\r\n\r\nconst CardContent = React.forwardRef<\r\n HTMLDivElement,\r\n React.HTMLAttributes<HTMLDivElement>\r\n>(({ className, ...props }, ref) => {\r\n const size = React.useContext(CardSizeContext)\r\n return <div ref={ref} className={cn(PAD_X[size], className)} {...props} />\r\n})\r\nCardContent.displayName = \"CardContent\"\r\n\r\nconst CardFooter = React.forwardRef<\r\n HTMLDivElement,\r\n React.HTMLAttributes<HTMLDivElement>\r\n>(({ className, ...props }, ref) => {\r\n const size = React.useContext(CardSizeContext)\r\n return (\r\n <div\r\n ref={ref}\r\n className={cn(\"flex items-center\", PAD_X[size], className)}\r\n {...props}\r\n />\r\n )\r\n})\r\nCardFooter.displayName = \"CardFooter\"\r\n\r\nexport { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }\r\nexport type { CardSize, CardHeaderVariant }\r\n"],"names":["React","jsx","jsxs","cn","ClickableSurface"],"mappings":"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"}

package/dist-lib/src/components/shadcn/card.d.ts CHANGED Viewed

@@ -59,9 +59,18 @@ type CardClickProps = {
     surfaceLabel?: never;
     target?: never;
     renderLink?: never;
+    surfaceClassName?: never;
+    disabled?: never;
 } | ({
     surfaceLabel: string;
-} & Pick<ClickableSurfaceProps, "onClick" | "href" | "target" | "renderLink">);
+    /**
+     * className do ALVO esticado, não do card. Existe porque o anel de foco é externo
+     * (`ring`) e some quando o card está dentro de um container com
+     * `overflow-hidden` ou `content-visibility` — reportado pelo consumidor, que
+     * resolveu com `ring-inset`. Sem esta prop, não havia como alcançar o alvo.
+     */
+    surfaceClassName?: string;
+} & Pick<ClickableSurfaceProps, "onClick" | "href" | "target" | "renderLink" | "aria-pressed" | "aria-current" | "aria-expanded" | "disabled">);
 declare const Card: React.ForwardRefExoticComponent<(Omit<React.HTMLAttributes<HTMLDivElement>, "onClick"> & ({
     size?: CardSize;
 } & CardClickProps)) & React.RefAttributes<HTMLDivElement>>;

package/dist-lib/src/components/shadcn/card.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../../src/components/shadcn/card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EAEL,KAAK,qBAAqB,EAC3B,MAAM,qBAAqB,CAAA;AAE5B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AAIH,KAAK,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAuClC;;;;;;;;;;;;GAYG;AACH,KAAK,cAAc,GACf;~~IAAE~~,OAAO,CAAC,EAAE,KAAK,CAAC;IAAC,IAAI,CAAC,EAAE,KAAK,CAAC;IAAC,YAAY,CAAC,EAAE,KAAK,CAAC;IAAC,MAAM,CAAC,EAAE,KAAK,CAAC;~~IAAC~~,UAAU,CAAC,EAAE,KAAK,~~CAAA~~;~~CAAE~~,~~GAC3F~~,CAAC;~~IAAE~~,YAAY,EAAE,MAAM,~~CAAA~~;~~CAAE~~,GAAG,IAAI,~~CAC9B~~,qBAAqB,~~EACrB~~,SAAS,~~GAAG~~,MAAM,~~GAAG~~,QAAQ,~~GAAG~~,YAAY,~~CAC7C~~,CAAC,CAAC;AAEP,QAAA,MAAM,IAAI;WAEyD,QAAQ;~~2DA+BzE~~,CAAA;AAKF,KAAK,iBAAiB,GAAG,OAAO,GAAG,QAAQ,CAAA;AAE3C;;;;;;GAMG;AACH,QAAA,MAAM,UAAU;cAEqC,iBAAiB;wCA2CpE,CAAA;AAGF,QAAA,MAAM,SAAS,6GAkBb,CAAA;AAGF,QAAA,MAAM,eAAe,6GAiBnB,CAAA;AAKF,QAAA,MAAM,WAAW,6GAMf,CAAA;AAGF,QAAA,MAAM,UAAU,6GAYd,CAAA;AAGF,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,eAAe,EAAE,WAAW,EAAE,CAAA;AAChF,YAAY,EAAE,QAAQ,EAAE,iBAAiB,EAAE,CAAA"}
1	+ {"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../../src/components/shadcn/card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EAEL,KAAK,qBAAqB,EAC3B,MAAM,qBAAqB,CAAA;AAE5B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AAIH,KAAK,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAuClC;;;;;;;;;;;;GAYG;AACH,KAAK,cAAc,GACf;IACE,OAAO,CAAC,EAAE,KAAK,CAAC;IAAC,IAAI,CAAC,EAAE,KAAK,CAAC;IAAC,YAAY,CAAC,EAAE,KAAK,CAAC;IAAC,MAAM,CAAC,EAAE,KAAK,CAAC;IACpE,UAAU,CAAC,EAAE,KAAK,CAAC;IAAC,gBAAgB,CAAC,EAAE,KAAK,CAAC;IAAC,QAAQ,CAAC,EAAE,KAAK,CAAC;CAChE,GACD,CAAC;IACC,YAAY,EAAE,MAAM,CAAC;IACrB;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,GAAG,IAAI,CACN,qBAAqB,EACnB,SAAS,GACT,MAAM,GACN,QAAQ,GACR,YAAY,GACZ,cAAc,GACd,cAAc,GACd,eAAe,GACf,UAAU,CACb,CAAC,CAAC;AAEP,QAAA,MAAM,IAAI;WAEyD,QAAQ;2DAmDzE,CAAA;AAKF,KAAK,iBAAiB,GAAG,OAAO,GAAG,QAAQ,CAAA;AAE3C;;;;;;GAMG;AACH,QAAA,MAAM,UAAU;cAEqC,iBAAiB;wCA2CpE,CAAA;AAGF,QAAA,MAAM,SAAS,6GAkBb,CAAA;AAGF,QAAA,MAAM,eAAe,6GAiBnB,CAAA;AAKF,QAAA,MAAM,WAAW,6GAMf,CAAA;AAGF,QAAA,MAAM,UAAU,6GAYd,CAAA;AAGF,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,eAAe,EAAE,WAAW,EAAE,CAAA;AAChF,YAAY,EAAE,QAAQ,EAAE,iBAAiB,EAAE,CAAA"}

package/dist-lib/src/components/shadcn/card.mjs CHANGED Viewed

@@ -23,7 +23,22 @@ const PULL_TOP = {
   md: "-mt-pad-card-md",
   lg: "-mt-pad-card-lg"
 };
-const Card = React.forwardRef(({ className, size = "md", children, onClick, href, surfaceLabel, target, renderLink, ...props }, ref) => {
+const Card = React.forwardRef(({
+  className,
+  size = "md",
+  children,
+  onClick,
+  href,
+  surfaceLabel,
+  surfaceClassName,
+  target,
+  renderLink,
+  "aria-pressed": ariaPressed,
+  "aria-current": ariaCurrent,
+  "aria-expanded": ariaExpanded,
+  disabled,
+  ...props
+}, ref) => {
   const clicavel = Boolean(onClick || href);
   return /* @__PURE__ */ jsx(CardSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsxs(
     "div",
@@ -45,7 +60,12 @@ const Card = React.forwardRef(({ className, size = "md", children, onClick, href
             onClick,
             href,
             target,
-            renderLink
+            renderLink,
+            className: surfaceClassName,
+            "aria-pressed": ariaPressed,
+            "aria-current": ariaCurrent,
+            "aria-expanded": ariaExpanded,
+            disabled
           }
         )
       ]

package/dist-lib/src/components/shadcn/card.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"card.mjs","sources":["../../../../src/components/shadcn/card.tsx"],"sourcesContent":["import * as React from \"react\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\nimport {\r\n ClickableSurface,\r\n type ClickableSurfaceProps,\r\n} from \"./clickable-surface\"\r\n\r\n/*\r\n Card — superfície de conteúdo, com `size` que escala o padding interno de TODAS as\r\n * partes e um `variant` de header em faixa.\r\n \r\n ## `size` — 3 densidades, propagadas por contexto\r\n \r\n lg → 24px (pad-4xl)\r\n * md → 20px (pad-3xl) ← DEFAULT\r\n * sm → 16px (pad-2xl)\r\n \r\n O valor é declarado uma vez no `<Card>` e chega em `CardHeader`/`CardContent`/\r\n * `CardFooter` por `CardSizeContext` — o mesmo mecanismo que o `Tabs` usa pro\r\n * `variant`. Repetir `size` nas partes é o erro que deixa uma seção com densidade\r\n * diferente do resto do card.\r\n \r\n ⚠️ `md` (20px) é o default, e antes era 24px. Mudança deliberada de 2026-08-19:\r\n * 24 virou o `lg`. Card que dependia dos 24px passa `size=\"lg\"`.\r\n \r\n ⚠️ Não existe 18px na escala de `pad` (vai 16 → 20 → 24), então `sm` é 16px.\r\n \r\n ## O padding é dividido entre o Card e as partes — e é de propósito\r\n \r\n O `Card` carrega o padding vertical (`py-`); cada parte carrega o\r\n horizontal (`px-`). Assim o `gap` do Card controla o respiro ENTRE seções sem\r\n somar com padding de cada uma, e uma parte pode ser full-bleed (tabela que encosta\r\n * nas bordas, imagem de topo) só zerando o próprio `px`.\r\n \r\n ## `CardHeader variant=\"banded\"` — header em faixa\r\n \r\n Fundo `bg-subtle` + borda embaixo, encostado nas bordas do card. Espelha o padrão\r\n * das seções de `#/order-detail` e `?app=edit-page`, que era composição local do\r\n * showcase e agora é variante do componente.\r\n \r\n Mecânica: a faixa precisa cancelar o padding vertical do Card pra encostar no\r\n * topo (`-mt-` do mesmo tamanho do `size`) e arredondar as quinas de cima\r\n (`rounded-t-`) — em vez de `overflow-hidden` no Card, que clipa qualquer coisa que\r\n precise vazar. Ela também troca o `px-` por padding nos 4 lados, senão o texto\r\n cola na borda de cima.\r\n /\r\n\r\n/ ── size: contexto ──────────────────────────────────────────────────────── /\r\n\r\ntype CardSize = \"sm\" \| \"md\" \| \"lg\"\r\n\r\nconst CardSizeContext = React.createContext<CardSize>(\"md\")\r\n\r\n/\r\n Padding interno por size — via `pad-card-`, a família de token dedicada a\r\n padding de card** (`tokens/.../components/spacing.ts`), não a escala genérica\r\n * `pad-`. Os valores são iguais (16/20/24), mas o semântico existe pra isto: mudar\r\n a densidade de card no futuro é mexer em `padCard`, num lugar, sem caçar\r\n * `pad-3xl` espalhado.\r\n \r\n A família é simétrica desde 2026-08-19 (`sm`/`md`/`lg`). O nome antigo `pad-card-base`\r\n * continua existindo como alias de `md`, só pra não quebrar quem já o consome — não\r\n * usar aqui nem em código novo. Ver o cabeçalho de `components/spacing.ts`.\r\n /\r\nconst PAD_X: Record<CardSize, string> = {\r\n sm: \"px-pad-card-sm\",\r\n md: \"px-pad-card-md\",\r\n lg: \"px-pad-card-lg\",\r\n}\r\nconst PAD_Y: Record<CardSize, string> = {\r\n sm: \"py-pad-card-sm\",\r\n md: \"py-pad-card-md\",\r\n lg: \"py-pad-card-lg\",\r\n}\r\nconst PAD_ALL: Record<CardSize, string> = {\r\n sm: \"p-pad-card-sm\",\r\n md: \"p-pad-card-md\",\r\n lg: \"p-pad-card-lg\",\r\n}\r\n/* Cancela o `py` do Card, pra faixa encostar no topo. /\r\nconst PULL_TOP: Record<CardSize, string> = {\r\n sm: \"-mt-pad-card-sm\",\r\n md: \"-mt-pad-card-md\",\r\n lg: \"-mt-pad-card-lg\",\r\n}\r\n\r\n/ ── Card ────────────────────────────────────────────────────────────────── /\r\n\r\n/\r\n Card clicável — `onClick` e/ou `href` transformam a superfície inteira em alvo.\r\n \r\n Um `onClick` solto numa `<div>` (que é o que o consumidor escrevia) não tem foco,\r\n * não responde a Enter/Space, não é anunciado como controle e não existe pra quem\r\n * navega por teclado. Aqui o alvo é um `<button>`/`<a>` esticado por cima — ver\r\n * `ClickableSurface` pra por que não trocamos a raiz. A `<div>` continua `<div>`,\r\n * então nada do que já existe muda.\r\n \r\n `surfaceLabel` é o nome acessível e é obrigatório quando há clique: o alvo é vazio,\r\n * e sem ele o leitor anuncia \"botão\" e mais nada. Controle DENTRO do card (um menu,\r\n * um botão secundário) precisa de `relative z-10` pra ficar acima do overlay.\r\n /\r\ntype CardClickProps =\r\n \| { onClick?: never; href?: never; surfaceLabel?: never; target?: never; renderLink?: never }\r\n \| ({ surfaceLabel: string } & Pick<\r\n ClickableSurfaceProps,\r\n \"onClick\" \| \"href\" \| \"target\" \| \"renderLink\"\r\n >);\r\n\r\nconst Card = React.forwardRef<\r\n HTMLDivElement,\r\n Omit<React.HTMLAttributes<HTMLDivElement>, \"onClick\"> & { size?: CardSize } & CardClickProps\r\n>((\n { className, size = \"md\", children, onClick, href, surfaceLabel, target, renderLink, ...props },\n ref,\n) => {\r\n const clicavel = Boolean(onClick \|\| href);\r\n return (\r\n <CardSizeContext.Provider value={size}>\r\n <div\r\n ref={ref}\r\n className={cn(\r\n \"flex flex-col gap-gp-4xl rounded-radius-base bg-bg-surface text-body-md text-fg-default shadow-sh-lg ring-1 ring-fg-default/5 dark:ring-fg-default/10\",\r\n PAD_Y[size],\r\n clicavel && \"relative transition-colors hover:bg-bg-subtle\",\r\n className\r\n )}\r\n {...props}\r\n >\r\n {children}\r\n {clicavel && (\r\n <ClickableSurface\r\n label={surfaceLabel as string}\r\n onClick={onClick}\r\n href={href}\r\n target={target}\r\n renderLink={renderLink}\r\n />\r\n )}\r\n </div>\r\n </CardSizeContext.Provider>\r\n );\r\n})\r\nCard.displayName = \"Card\"\r\n\r\n/ ── CardHeader ──────────────────────────────────────────────────────────── /\r\n\r\ntype CardHeaderVariant = \"plain\" \| \"banded\"\r\n\r\n/\r\n Não há contexto de variante aqui de propósito. Houve um, por ~20 minutos em\r\n * 2026-08-19, pra a faixa deixar o título semibold enquanto o header plano ficava\r\n * medium — até descobrir que o preset `text-title-md` já é 600 e que o `medium`\r\n * era um override indevido no `CardTitle`. Removido o override, o peso é o mesmo nas\r\n * duas variantes e o contexto virou código morto.\r\n /\r\nconst CardHeader = React.forwardRef<\r\n HTMLDivElement,\r\n React.HTMLAttributes<HTMLDivElement> & { variant?: CardHeaderVariant }\r\n>(({ className, variant = \"plain\", ...props }, ref) => {\r\n const size = React.useContext(CardSizeContext)\r\n return (\r\n <div\r\n ref={ref}\r\n className={cn(\r\n // `gap-gp-2xs` (2px) e não `gp-sm` (6px): título e subtítulo de card são UMA\r\n // unidade de leitura, não dois blocos. Com 6px o subtítulo lê como parágrafo\r\n // solto sob o título; com 2px lê como legenda dele. É o valor que o showcase\r\n // já aplicava no helper local dos cards de gráfico — a diferença apareceu ao\r\n // comparar o mesmo card montado com o helper e com este componente, e o\r\n // mantenedor escolheu o compacto como padrão (2026-08-19).\r\n //\r\n // ⚠️ Divergência DELIBERADA do shadcn upstream, que usa 6px: ao re-sincronizar\r\n // este primitivo, não reverter (mesma classe de cuidado da L-040).\r\n \"grid auto-rows-min items-start gap-gp-2xs\",\r\n variant === \"banded\"\r\n ? cn(\r\n // Faixa: padding nos 4 lados (o `px` sozinho deixaria o texto colado no\r\n // topo), fundo, divisória, e o `-mt` que cancela o `py` do Card pra\r\n // encostar na borda. `rounded-t` em vez de `overflow-hidden` no Card —\r\n // clipar o Card quebraria qualquer coisa que precise vazar dele.\r\n PAD_ALL[size],\r\n PULL_TOP[size],\r\n // `bg-subtle` + `border-subtle`: os mesmos tokens da referência\r\n // (`SectionCard` do order-detail / `?app=edit-page`), escolhidos pelo\r\n // mantenedor em 2026-08-19.\r\n //\r\n // ⚠️ Medido, pra quem for mexer não achar que é descuido: no dark* o\r\n // `bg-subtle` é 1% de branco sobre um surface de 0.225 — ~0,8pp de\r\n // diferença, uma faixa muito discreta. No light são 0.973 sobre\r\n // 1.0, que lê normalmente. É restrição intencional, não bug: a decisão\r\n // veio de quem desenhou a tela de referência. Se um dia o dark precisar\r\n // de mais presença, `bg-muted` é 3× (e no light é idêntico ao subtle).\r\n \"rounded-t-radius-base border-b border-border-subtle bg-bg-subtle\"\r\n )\r\n : PAD_X[size],\r\n className\r\n )}\r\n {...props}\r\n />\r\n )\r\n})\r\nCardHeader.displayName = \"CardHeader\"\r\n\r\nconst CardTitle = React.forwardRef<\r\n HTMLDivElement,\r\n React.HTMLAttributes<HTMLDivElement>\r\n>(({ className, ...props }, ref) => (\r\n <div\r\n ref={ref}\r\n // SEM `font-`: o peso vem do preset. `text-title-md` já emite `font-weight: 600`\r\n // (conferido no tema gerado), o token declara \"title: 600 (semibold) — mais usado\r\n // no projeto\", e o `DESIGN.md` lista `title-md · 600 · Card title (default)`.\r\n //\r\n // Aqui havia um `font-medium` que anulava o próprio preset* e derrubava o título\r\n // pra 500 — sem estar documentado em lugar nenhum, e contra o spec do DS. Foi achado\r\n // em 2026-08-19 comparando o mesmo card montado com o helper local do showcase (que\r\n // acertava, `font-semibold`) e com este componente. Não reintroduzir: quem quer outro\r\n // peso passa `font-` no `className`, que é o caminho de exceção.\r\n className={cn(\"text-title-md text-fg-default\", className)}\r\n {...props}\r\n />\r\n))\r\nCardTitle.displayName = \"CardTitle\"\r\n\r\nconst CardDescription = React.forwardRef<\r\n HTMLDivElement,\r\n React.HTMLAttributes<HTMLDivElement>\r\n>(({ className, ...props }, ref) => (\r\n <div\r\n ref={ref}\r\n // `caption-md` (12px/400) e não `body-md` (14/400) — decisão do mantenedor\r\n // 2026-08-19: 14 competia com o conteúdo do card.\r\n //\r\n // Entre os dois presets de 12px, `caption-md` e não `body-xs`, por PESO: `body-xs`\r\n // é 12/500, o que deixaria o subtítulo mais pesado que os 400 de hoje e pediria\r\n // um `font-normal` por cima — reintroduzindo o override de preset que acabou de sair\r\n // do `CardTitle`. `caption-md` é 12/400: só o tamanho muda. E é o que o\r\n // `CardCheckbox.description` já usa, que é o análogo mais próximo no DS.\r\n className={cn(\"text-caption-md text-fg-muted\", className)}\r\n {...props}\r\n />\r\n))\r\nCardDescription.displayName = \"CardDescription\"\r\n\r\n/ ── CardContent · CardFooter ────────────────────────────────────────────── */\r\n\r\nconst CardContent = React.forwardRef<\r\n HTMLDivElement,\r\n React.HTMLAttributes<HTMLDivElement>\r\n>(({ className, ...props }, ref) => {\r\n const size = React.useContext(CardSizeContext)\r\n return <div ref={ref} className={cn(PAD_X[size], className)} {...props} />\r\n})\r\nCardContent.displayName = \"CardContent\"\r\n\r\nconst CardFooter = React.forwardRef<\r\n HTMLDivElement,\r\n React.HTMLAttributes<HTMLDivElement>\r\n>(({ className, ...props }, ref) => {\r\n const size = React.useContext(CardSizeContext)\r\n return (\r\n <div\r\n ref={ref}\r\n className={cn(\"flex items-center\", PAD_X[size], className)}\r\n {...props}\r\n />\r\n )\r\n})\r\nCardFooter.displayName = \"CardFooter\"\r\n\r\nexport { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }\r\nexport type { CardSize, CardHeaderVariant }\r\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"card.mjs","sources":["../../../../src/components/shadcn/card.tsx"],"sourcesContent":["import * as React from \"react\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\nimport {\r\n ClickableSurface,\r\n type ClickableSurfaceProps,\r\n} from \"./clickable-surface\"\r\n\r\n/*\r\n Card — superfície de conteúdo, com `size` que escala o padding interno de TODAS as\r\n * partes e um `variant` de header em faixa.\r\n \r\n ## `size` — 3 densidades, propagadas por contexto\r\n \r\n lg → 24px (pad-4xl)\r\n * md → 20px (pad-3xl) ← DEFAULT\r\n * sm → 16px (pad-2xl)\r\n \r\n O valor é declarado uma vez no `<Card>` e chega em `CardHeader`/`CardContent`/\r\n * `CardFooter` por `CardSizeContext` — o mesmo mecanismo que o `Tabs` usa pro\r\n * `variant`. Repetir `size` nas partes é o erro que deixa uma seção com densidade\r\n * diferente do resto do card.\r\n \r\n ⚠️ `md` (20px) é o default, e antes era 24px. Mudança deliberada de 2026-08-19:\r\n * 24 virou o `lg`. Card que dependia dos 24px passa `size=\"lg\"`.\r\n \r\n ⚠️ Não existe 18px na escala de `pad` (vai 16 → 20 → 24), então `sm` é 16px.\r\n \r\n ## O padding é dividido entre o Card e as partes — e é de propósito\r\n \r\n O `Card` carrega o padding vertical (`py-`); cada parte carrega o\r\n horizontal (`px-`). Assim o `gap` do Card controla o respiro ENTRE seções sem\r\n somar com padding de cada uma, e uma parte pode ser full-bleed (tabela que encosta\r\n * nas bordas, imagem de topo) só zerando o próprio `px`.\r\n \r\n ## `CardHeader variant=\"banded\"` — header em faixa\r\n \r\n Fundo `bg-subtle` + borda embaixo, encostado nas bordas do card. Espelha o padrão\r\n * das seções de `#/order-detail` e `?app=edit-page`, que era composição local do\r\n * showcase e agora é variante do componente.\r\n \r\n Mecânica: a faixa precisa cancelar o padding vertical do Card pra encostar no\r\n * topo (`-mt-` do mesmo tamanho do `size`) e arredondar as quinas de cima\r\n (`rounded-t-`) — em vez de `overflow-hidden` no Card, que clipa qualquer coisa que\r\n precise vazar. Ela também troca o `px-` por padding nos 4 lados, senão o texto\r\n cola na borda de cima.\r\n /\r\n\r\n/ ── size: contexto ──────────────────────────────────────────────────────── /\r\n\r\ntype CardSize = \"sm\" \| \"md\" \| \"lg\"\r\n\r\nconst CardSizeContext = React.createContext<CardSize>(\"md\")\r\n\r\n/\r\n Padding interno por size — via `pad-card-`, a família de token dedicada a\r\n padding de card** (`tokens/.../components/spacing.ts`), não a escala genérica\r\n * `pad-`. Os valores são iguais (16/20/24), mas o semântico existe pra isto: mudar\r\n a densidade de card no futuro é mexer em `padCard`, num lugar, sem caçar\r\n * `pad-3xl` espalhado.\r\n \r\n A família é simétrica desde 2026-08-19 (`sm`/`md`/`lg`). O nome antigo `pad-card-base`\r\n * continua existindo como alias de `md`, só pra não quebrar quem já o consome — não\r\n * usar aqui nem em código novo. Ver o cabeçalho de `components/spacing.ts`.\r\n /\r\nconst PAD_X: Record<CardSize, string> = {\r\n sm: \"px-pad-card-sm\",\r\n md: \"px-pad-card-md\",\r\n lg: \"px-pad-card-lg\",\r\n}\r\nconst PAD_Y: Record<CardSize, string> = {\r\n sm: \"py-pad-card-sm\",\r\n md: \"py-pad-card-md\",\r\n lg: \"py-pad-card-lg\",\r\n}\r\nconst PAD_ALL: Record<CardSize, string> = {\r\n sm: \"p-pad-card-sm\",\r\n md: \"p-pad-card-md\",\r\n lg: \"p-pad-card-lg\",\r\n}\r\n/* Cancela o `py` do Card, pra faixa encostar no topo. /\r\nconst PULL_TOP: Record<CardSize, string> = {\r\n sm: \"-mt-pad-card-sm\",\r\n md: \"-mt-pad-card-md\",\r\n lg: \"-mt-pad-card-lg\",\r\n}\r\n\r\n/ ── Card ────────────────────────────────────────────────────────────────── /\r\n\r\n/\r\n Card clicável — `onClick` e/ou `href` transformam a superfície inteira em alvo.\r\n \r\n Um `onClick` solto numa `<div>` (que é o que o consumidor escrevia) não tem foco,\r\n * não responde a Enter/Space, não é anunciado como controle e não existe pra quem\r\n * navega por teclado. Aqui o alvo é um `<button>`/`<a>` esticado por cima — ver\r\n * `ClickableSurface` pra por que não trocamos a raiz. A `<div>` continua `<div>`,\r\n * então nada do que já existe muda.\r\n \r\n `surfaceLabel` é o nome acessível e é obrigatório quando há clique: o alvo é vazio,\r\n * e sem ele o leitor anuncia \"botão\" e mais nada. Controle DENTRO do card (um menu,\r\n * um botão secundário) precisa de `relative z-10` pra ficar acima do overlay.\r\n /\r\ntype CardClickProps =\r\n \| {\r\n onClick?: never; href?: never; surfaceLabel?: never; target?: never;\r\n renderLink?: never; surfaceClassName?: never; disabled?: never;\r\n }\r\n \| ({\r\n surfaceLabel: string;\r\n /\r\n className do ALVO esticado, não do card. Existe porque o anel de foco é externo\r\n * (`ring`) e some quando o card está dentro de um container com\r\n * `overflow-hidden` ou `content-visibility` — reportado pelo consumidor, que\r\n * resolveu com `ring-inset`. Sem esta prop, não havia como alcançar o alvo.\r\n /\r\n surfaceClassName?: string;\r\n } & Pick<\r\n ClickableSurfaceProps,\r\n \| \"onClick\"\r\n \| \"href\"\r\n \| \"target\"\r\n \| \"renderLink\"\r\n \| \"aria-pressed\"\r\n \| \"aria-current\"\r\n \| \"aria-expanded\"\r\n \| \"disabled\"\r\n >);\r\n\r\nconst Card = React.forwardRef<\r\n HTMLDivElement,\r\n Omit<React.HTMLAttributes<HTMLDivElement>, \"onClick\"> & { size?: CardSize } & CardClickProps\r\n>((\r\n {\r\n className,\r\n size = \"md\",\r\n children,\r\n onClick,\r\n href,\r\n surfaceLabel,\r\n surfaceClassName,\r\n target,\r\n renderLink,\r\n \"aria-pressed\": ariaPressed,\r\n \"aria-current\": ariaCurrent,\r\n \"aria-expanded\": ariaExpanded,\r\n disabled,\r\n ...props\r\n },\r\n ref,\r\n) => {\r\n const clicavel = Boolean(onClick \|\| href);\r\n return (\r\n <CardSizeContext.Provider value={size}>\r\n <div\r\n ref={ref}\r\n className={cn(\r\n \"flex flex-col gap-gp-4xl rounded-radius-base bg-bg-surface text-body-md text-fg-default shadow-sh-lg ring-1 ring-fg-default/5 dark:ring-fg-default/10\",\r\n PAD_Y[size],\r\n clicavel && \"relative transition-colors hover:bg-bg-subtle\",\r\n className\r\n )}\r\n {...props}\r\n >\r\n {children}\r\n {clicavel && (\r\n <ClickableSurface\r\n label={surfaceLabel as string}\r\n onClick={onClick}\r\n href={href}\r\n target={target}\r\n renderLink={renderLink}\r\n className={surfaceClassName}\r\n aria-pressed={ariaPressed}\r\n aria-current={ariaCurrent}\r\n aria-expanded={ariaExpanded}\r\n disabled={disabled}\r\n />\r\n )}\r\n </div>\r\n </CardSizeContext.Provider>\r\n );\r\n})\r\nCard.displayName = \"Card\"\r\n\r\n/ ── CardHeader ──────────────────────────────────────────────────────────── /\r\n\r\ntype CardHeaderVariant = \"plain\" \| \"banded\"\r\n\r\n/\r\n Não há contexto de variante aqui de propósito. Houve um, por ~20 minutos em\r\n * 2026-08-19, pra a faixa deixar o título semibold enquanto o header plano ficava\r\n * medium — até descobrir que o preset `text-title-md` já é 600 e que o `medium`\r\n * era um override indevido no `CardTitle`. Removido o override, o peso é o mesmo nas\r\n * duas variantes e o contexto virou código morto.\r\n /\r\nconst CardHeader = React.forwardRef<\r\n HTMLDivElement,\r\n React.HTMLAttributes<HTMLDivElement> & { variant?: CardHeaderVariant }\r\n>(({ className, variant = \"plain\", ...props }, ref) => {\r\n const size = React.useContext(CardSizeContext)\r\n return (\r\n <div\r\n ref={ref}\r\n className={cn(\r\n // `gap-gp-2xs` (2px) e não `gp-sm` (6px): título e subtítulo de card são UMA\r\n // unidade de leitura, não dois blocos. Com 6px o subtítulo lê como parágrafo\r\n // solto sob o título; com 2px lê como legenda dele. É o valor que o showcase\r\n // já aplicava no helper local dos cards de gráfico — a diferença apareceu ao\r\n // comparar o mesmo card montado com o helper e com este componente, e o\r\n // mantenedor escolheu o compacto como padrão (2026-08-19).\r\n //\r\n // ⚠️ Divergência DELIBERADA do shadcn upstream, que usa 6px: ao re-sincronizar\r\n // este primitivo, não reverter (mesma classe de cuidado da L-040).\r\n \"grid auto-rows-min items-start gap-gp-2xs\",\r\n variant === \"banded\"\r\n ? cn(\r\n // Faixa: padding nos 4 lados (o `px` sozinho deixaria o texto colado no\r\n // topo), fundo, divisória, e o `-mt` que cancela o `py` do Card pra\r\n // encostar na borda. `rounded-t` em vez de `overflow-hidden` no Card —\r\n // clipar o Card quebraria qualquer coisa que precise vazar dele.\r\n PAD_ALL[size],\r\n PULL_TOP[size],\r\n // `bg-subtle` + `border-subtle`: os mesmos tokens da referência\r\n // (`SectionCard` do order-detail / `?app=edit-page`), escolhidos pelo\r\n // mantenedor em 2026-08-19.\r\n //\r\n // ⚠️ Medido, pra quem for mexer não achar que é descuido: no dark* o\r\n // `bg-subtle` é 1% de branco sobre um surface de 0.225 — ~0,8pp de\r\n // diferença, uma faixa muito discreta. No light são 0.973 sobre\r\n // 1.0, que lê normalmente. É restrição intencional, não bug: a decisão\r\n // veio de quem desenhou a tela de referência. Se um dia o dark precisar\r\n // de mais presença, `bg-muted` é 3× (e no light é idêntico ao subtle).\r\n \"rounded-t-radius-base border-b border-border-subtle bg-bg-subtle\"\r\n )\r\n : PAD_X[size],\r\n className\r\n )}\r\n {...props}\r\n />\r\n )\r\n})\r\nCardHeader.displayName = \"CardHeader\"\r\n\r\nconst CardTitle = React.forwardRef<\r\n HTMLDivElement,\r\n React.HTMLAttributes<HTMLDivElement>\r\n>(({ className, ...props }, ref) => (\r\n <div\r\n ref={ref}\r\n // SEM `font-`: o peso vem do preset. `text-title-md` já emite `font-weight: 600`\r\n // (conferido no tema gerado), o token declara \"title: 600 (semibold) — mais usado\r\n // no projeto\", e o `DESIGN.md` lista `title-md · 600 · Card title (default)`.\r\n //\r\n // Aqui havia um `font-medium` que anulava o próprio preset* e derrubava o título\r\n // pra 500 — sem estar documentado em lugar nenhum, e contra o spec do DS. Foi achado\r\n // em 2026-08-19 comparando o mesmo card montado com o helper local do showcase (que\r\n // acertava, `font-semibold`) e com este componente. Não reintroduzir: quem quer outro\r\n // peso passa `font-` no `className`, que é o caminho de exceção.\r\n className={cn(\"text-title-md text-fg-default\", className)}\r\n {...props}\r\n />\r\n))\r\nCardTitle.displayName = \"CardTitle\"\r\n\r\nconst CardDescription = React.forwardRef<\r\n HTMLDivElement,\r\n React.HTMLAttributes<HTMLDivElement>\r\n>(({ className, ...props }, ref) => (\r\n <div\r\n ref={ref}\r\n // `caption-md` (12px/400) e não `body-md` (14/400) — decisão do mantenedor\r\n // 2026-08-19: 14 competia com o conteúdo do card.\r\n //\r\n // Entre os dois presets de 12px, `caption-md` e não `body-xs`, por PESO: `body-xs`\r\n // é 12/500, o que deixaria o subtítulo mais pesado que os 400 de hoje e pediria\r\n // um `font-normal` por cima — reintroduzindo o override de preset que acabou de sair\r\n // do `CardTitle`. `caption-md` é 12/400: só o tamanho muda. E é o que o\r\n // `CardCheckbox.description` já usa, que é o análogo mais próximo no DS.\r\n className={cn(\"text-caption-md text-fg-muted\", className)}\r\n {...props}\r\n />\r\n))\r\nCardDescription.displayName = \"CardDescription\"\r\n\r\n/ ── CardContent · CardFooter ────────────────────────────────────────────── */\r\n\r\nconst CardContent = React.forwardRef<\r\n HTMLDivElement,\r\n React.HTMLAttributes<HTMLDivElement>\r\n>(({ className, ...props }, ref) => {\r\n const size = React.useContext(CardSizeContext)\r\n return <div ref={ref} className={cn(PAD_X[size], className)} {...props} />\r\n})\r\nCardContent.displayName = \"CardContent\"\r\n\r\nconst CardFooter = React.forwardRef<\r\n HTMLDivElement,\r\n React.HTMLAttributes<HTMLDivElement>\r\n>(({ className, ...props }, ref) => {\r\n const size = React.useContext(CardSizeContext)\r\n return (\r\n <div\r\n ref={ref}\r\n className={cn(\"flex items-center\", PAD_X[size], className)}\r\n {...props}\r\n />\r\n )\r\n})\r\nCardFooter.displayName = \"CardFooter\"\r\n\r\nexport { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }\r\nexport type { CardSize, CardHeaderVariant }\r\n"],"names":[],"mappings":"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"}

package/dist-lib/src/components/shadcn/clickable-surface.cjs CHANGED Viewed

@@ -10,10 +10,23 @@ function ClickableSurface({
   href,
   target,
   renderLink,
-  className
+  className,
+  disabled,
+  ...estado
 }) {
   if (!onClick && !href) return null;
-  const classes = utils.cn(CLICKABLE_SURFACE_CLASS, className);
+  const classes = utils.cn(
+    CLICKABLE_SURFACE_CLASS,
+    // `<a>` não tem `disabled`; e mesmo no `<button>` o alvo precisa sair da ordem de
+    // foco, senão o Tab para num controle que não faz nada.
+    disabled && "pointer-events-none",
+    className
+  );
+  const aria = {
+    ...estado,
+    "aria-disabled": disabled || void 0,
+    tabIndex: disabled ? -1 : void 0
+  };
   if (href) {
     const aoClicar = (e) => {
       if (navLink.shouldPreventNavigation({
@@ -31,11 +44,22 @@ function ClickableSurface({
       className: classes,
       onClick: aoClicar,
       target,
-      "aria-label": label
+      "aria-label": label,
+      ...aria
     };
     return renderLink ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: renderLink({ ...props, onClick: (e) => onClick?.(e) }) }) : /* @__PURE__ */ jsxRuntime.jsx("a", { ...props });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: classes, onClick, "aria-label": label });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      className: classes,
+      onClick,
+      "aria-label": label,
+      disabled,
+      ...aria
+    }
+  );
 }
 ClickableSurface.displayName = "ClickableSurface";
 exports.CLICKABLE_SURFACE_CLASS = CLICKABLE_SURFACE_CLASS;

package/dist-lib/src/components/shadcn/clickable-surface.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"clickable-surface.cjs","sources":["../../../../src/components/shadcn/clickable-surface.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\nimport { shouldPreventNavigation } from \"@/utils/nav-link\";\n\n/*\n ClickableSurface — o alvo esticado que transforma um card inteiro em botão ou link.\n \n ## Por que um elemento por cima, e não trocar a raiz por `<button>`\n \n O conteúdo permitido dentro de `<button>` é phrasing content. Um card tem `<h3>`,\n * parágrafos, às vezes uma tabela — HTML inválido, e o leitor de tela perde o heading\n * (deixa de anunciar a estrutura e passa a ler tudo como rótulo do botão). Trocar a raiz\n * por `<a>` tem o mesmo problema e ainda torna todo o texto interno parte do nome do link.\n \n A saída é um `<button>`/`<a>` vazio, absoluto, cobrindo a superfície: a árvore\n * semântica do card fica intacta e o alvo ganha foco, Enter/Space e — com `href` —\n * ctrl+clique, \"abrir em nova aba\" e \"copiar endereço\" de graça.\n \n ## Contrato de quem usa\n \n 1. O container precisa ser `relative` (senão o `inset-0` escapa pro ancestral posicionado).\n * 2. `label` é obrigatório: o alvo é vazio, então sem ele o leitor anuncia \"botão\" e nada mais.\n * 3. Controle que fica ACIMA do card (um menu, um botão de ajuda) precisa de `relative z-10`,\n * senão o overlay o cobre e o clique vai pro card.\n \n Usado por `Card` (`onClick`/`href`) e por `Kpi`. Existe como peça própria porque a\n * segunda cópia de um padrão de acessibilidade sutil é onde ele começa a divergir.\n /\nexport type ClickableSurfaceLinkProps = {\n href: string;\n className: string;\n onClick: (e: React.MouseEvent<HTMLAnchorElement>) => void;\n target?: string;\n \"aria-label\": string;\n};\n\nexport type ClickableSurfaceProps = {\n /* Nome acessível do alvo. Obrigatório — o elemento não tem conteúdo. /\n label: string;\n /* Clique. Sem `href`, o alvo é `<button type=\"button\">`. /\n onClick?: (e: React.MouseEvent<HTMLElement>) => void;\n /* Destino. Com `href`, o alvo é `<a>`. /\n href?: string;\n /* `target` do anchor. `\"_blank\"` desliga o cancelamento da navegação. /\n target?: string;\n /* Substitui o `<a>` interno pelo link do seu router (L-068). */\n renderLink?: (props: ClickableSurfaceLinkProps) => React.ReactNode;\n className?: string;\n};\n\nexport const CLICKABLE_SURFACE_CLASS =\n \"absolute inset-0 z-0 rounded-[inherit] focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring-brand\";\n\nexport function ClickableSurface({\n label,\n onClick,\n href,\n target,\n renderLink,\n className,\n}: ClickableSurfaceProps) {\n if (!onClick && !href) return null;\n\n const classes = cn(CLICKABLE_SURFACE_CLASS, className);\n\n if (href) {\n const aoClicar = (e: React.MouseEvent<HTMLAnchorElement>) => {\n // As 5 exceções que não podem cancelar a navegação (clique modificado, target,\n // href externo, href de hash, ausência de handler) estão medidas na L-068 — não\n // reimplemente aqui.\n if (\n shouldPreventNavigation({\n href,\n hasHandler: Boolean(onClick),\n target,\n event: e,\n })\n ) {\n e.preventDefault();\n }\n onClick?.(e);\n };\n\n const props: ClickableSurfaceLinkProps = {\n href,\n className: classes,\n onClick: aoClicar,\n target,\n \"aria-label\": label,\n };\n\n // Com `renderLink`, quem decide a navegação é o `<Link>` do router — o DS não mexe\n // em preventDefault (mesma regra do AppShell).\n return renderLink ? (\n <>{renderLink({ ...props, onClick: (e) => onClick?.(e) })}</>\n ) : (\n <a {...props} />\n );\n }\n\n return (\n <button type=\"button\" className={classes} onClick={onClick} aria-label={label} />\n );\n}\n\nClickableSurface.displayName = \"ClickableSurface\";\n"],"names":["cn","shouldPreventNavigation","jsx","Fragment"],"mappings":";;;;;~~AAqDO~~,MAAM,0BACX;AAEK,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;~~AACF~~,GAA0B;AACxB,MAAI,CAAC,WAAW,CAAC,KAAM,QAAO;AAE9B,QAAM,UAAUA,MAAAA,GAAG,~~yBAAyB~~,~~SAAS~~;~~AAErD~~,MAAI,MAAM;AACR,UAAM,WAAW,CAAC,MAA2C;AAI3D,UACEC,gCAAwB;AAAA,QACtB;AAAA,QACA,YAAY,QAAQ,OAAO;AAAA,QAC3B;AAAA,QACA,OAAO;AAAA,MAAA,CACR,GACD;AACA,UAAE,eAAA;AAAA,MACJ;AACA,gBAAU,CAAC;AAAA,IACb;AAEA,UAAM,QAAmC;AAAA,MACvC;AAAA,MACA,WAAW;AAAA,MACX,SAAS;AAAA,MACT;AAAA,MACA,cAAc;AAAA,IAAA;~~AAKhB~~,WAAO,aACLC,2BAAAA,IAAAC,qBAAA,EAAG,UAAA,WAAW,EAAE,GAAG,OAAO,SAAS,CAAC,MAAM,UAAU,CAAC,GAAG,EAAA,CAAE,IAE1DD,2BAAAA,IAAC,KAAA,EAAG,GAAG,OAAO;AAAA,EAElB;AAEA,SACEA~~,+BAAC~~,~~YAAO~~,MAAK,~~UAAS~~,WAAW,~~SAAS~~,~~SAAkB~~,cAAY,~~OAAO~~;~~AAEnF~~;AAEA,iBAAiB,cAAc;;;"}
1	+ {"version":3,"file":"clickable-surface.cjs","sources":["../../../../src/components/shadcn/clickable-surface.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\nimport { shouldPreventNavigation } from \"@/utils/nav-link\";\r\n\r\n/*\r\n ClickableSurface — o alvo esticado que transforma um card inteiro em botão ou link.\r\n \r\n ## Por que um elemento por cima, e não trocar a raiz por `<button>`\r\n \r\n O conteúdo permitido dentro de `<button>` é phrasing content. Um card tem `<h3>`,\r\n * parágrafos, às vezes uma tabela — HTML inválido, e o leitor de tela perde o heading\r\n * (deixa de anunciar a estrutura e passa a ler tudo como rótulo do botão). Trocar a raiz\r\n * por `<a>` tem o mesmo problema e ainda torna todo o texto interno parte do nome do link.\r\n \r\n A saída é um `<button>`/`<a>` vazio, absoluto, cobrindo a superfície: a árvore\r\n * semântica do card fica intacta e o alvo ganha foco, Enter/Space e — com `href` —\r\n * ctrl+clique, \"abrir em nova aba\" e \"copiar endereço\" de graça.\r\n \r\n ## Contrato de quem usa\r\n \r\n 1. O container precisa ser `relative` (senão o `inset-0` escapa pro ancestral posicionado).\r\n * 2. `label` é obrigatório: o alvo é vazio, então sem ele o leitor anuncia \"botão\" e nada mais.\r\n * 3. Controle que fica ACIMA do card (um menu, um botão de ajuda) precisa de `relative z-10`,\r\n * senão o overlay o cobre e o clique vai pro card.\r\n \r\n Usado por `Card` (`onClick`/`href`) e por `Kpi`. Existe como peça própria porque a\r\n * segunda cópia de um padrão de acessibilidade sutil é onde ele começa a divergir.\r\n /\r\nexport type ClickableSurfaceLinkProps = {\r\n href: string;\r\n className: string;\r\n onClick: (e: React.MouseEvent<HTMLAnchorElement>) => void;\r\n target?: string;\r\n \"aria-label\": string;\r\n};\r\n\r\n/\r\n Atributos de ESTADO que o alvo precisa carregar quando a superfície representa uma\r\n * seleção, e não só um link.\r\n \r\n Reportado pelo consumidor igreen-tickets: 19 superfícies (card de lote, pipeline,\r\n * ranking, nav de categoria) viraram `ClickableSurface`, e a seleção ficou *só\r\n visual** — o alvo não anunciava estado nenhum. Sem isto, quem usa leitor de tela não\r\n * sabe qual card está escolhido.\r\n /\r\nexport type ClickableSurfaceStateProps = {\r\n /* Botão de alternância — o card está \"ligado\"? /\r\n \"aria-pressed\"?: React.AriaAttributes[\"aria-pressed\"];\r\n /* Item selecionado dentro de um conjunto (nav, ranking, pipeline). /\r\n \"aria-current\"?: React.AriaAttributes[\"aria-current\"];\r\n /* A superfície abre/fecha algo. /\r\n \"aria-expanded\"?: React.AriaAttributes[\"aria-expanded\"];\r\n /* Descreve o alvo por outro elemento (ex.: o título do card). /\r\n \"aria-describedby\"?: string;\r\n /\r\n Desabilita o alvo. Em `<a>` não existe `disabled`: vira\r\n * `aria-disabled` + `pointer-events-none` + `tabIndex={-1}`, que é a forma correta.\r\n /\r\n disabled?: boolean;\r\n};\r\n\r\nexport type ClickableSurfaceProps = ClickableSurfaceStateProps & {\r\n /* Nome acessível do alvo. Obrigatório — o elemento não tem conteúdo. /\r\n label: string;\r\n /* Clique. Sem `href`, o alvo é `<button type=\"button\">`. /\r\n onClick?: (e: React.MouseEvent<HTMLElement>) => void;\r\n /* Destino. Com `href`, o alvo é `<a>`. /\r\n href?: string;\r\n /* `target` do anchor. `\"_blank\"` desliga o cancelamento da navegação. /\r\n target?: string;\r\n /* Substitui o `<a>` interno pelo link do seu router (L-068). */\r\n renderLink?: (props: ClickableSurfaceLinkProps) => React.ReactNode;\r\n className?: string;\r\n};\r\n\r\nexport const CLICKABLE_SURFACE_CLASS =\r\n \"absolute inset-0 z-0 rounded-[inherit] focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring-brand\";\r\n\r\nexport function ClickableSurface({\r\n label,\r\n onClick,\r\n href,\r\n target,\r\n renderLink,\r\n className,\r\n disabled,\r\n ...estado\r\n}: ClickableSurfaceProps) {\r\n if (!onClick && !href) return null;\r\n\r\n const classes = cn(\r\n CLICKABLE_SURFACE_CLASS,\r\n // `<a>` não tem `disabled`; e mesmo no `<button>` o alvo precisa sair da ordem de\r\n // foco, senão o Tab para num controle que não faz nada.\r\n disabled && \"pointer-events-none\",\r\n className,\r\n );\r\n const aria = {\r\n ...estado,\r\n \"aria-disabled\": disabled \|\| undefined,\r\n tabIndex: disabled ? -1 : undefined,\r\n };\r\n\r\n if (href) {\r\n const aoClicar = (e: React.MouseEvent<HTMLAnchorElement>) => {\r\n // As 5 exceções que não podem cancelar a navegação (clique modificado, target,\r\n // href externo, href de hash, ausência de handler) estão medidas na L-068 — não\r\n // reimplemente aqui.\r\n if (\r\n shouldPreventNavigation({\r\n href,\r\n hasHandler: Boolean(onClick),\r\n target,\r\n event: e,\r\n })\r\n ) {\r\n e.preventDefault();\r\n }\r\n onClick?.(e);\r\n };\r\n\r\n const props: ClickableSurfaceLinkProps = {\r\n href,\r\n className: classes,\r\n onClick: aoClicar,\r\n target,\r\n \"aria-label\": label,\r\n ...aria,\r\n };\r\n\r\n // Com `renderLink`, quem decide a navegação é o `<Link>` do router — o DS não mexe\r\n // em preventDefault (mesma regra do AppShell).\r\n return renderLink ? (\r\n <>{renderLink({ ...props, onClick: (e) => onClick?.(e) })}</>\r\n ) : (\r\n <a {...props} />\r\n );\r\n }\r\n\r\n return (\r\n <button\r\n type=\"button\"\r\n className={classes}\r\n onClick={onClick}\r\n aria-label={label}\r\n disabled={disabled}\r\n {...aria}\r\n />\r\n );\r\n}\r\n\r\nClickableSurface.displayName = \"ClickableSurface\";\r\n"],"names":["cn","shouldPreventNavigation","jsx","Fragment"],"mappings":";;;;;AA8EO,MAAM,0BACX;AAEK,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA0B;AACxB,MAAI,CAAC,WAAW,CAAC,KAAM,QAAO;AAE9B,QAAM,UAAUA,MAAAA;AAAAA,IACd;AAAA;AAAA;AAAA,IAGA,YAAY;AAAA,IACZ;AAAA,EAAA;AAEF,QAAM,OAAO;AAAA,IACX,GAAG;AAAA,IACH,iBAAiB,YAAY;AAAA,IAC7B,UAAU,WAAW,KAAK;AAAA,EAAA;AAG5B,MAAI,MAAM;AACR,UAAM,WAAW,CAAC,MAA2C;AAI3D,UACEC,gCAAwB;AAAA,QACtB;AAAA,QACA,YAAY,QAAQ,OAAO;AAAA,QAC3B;AAAA,QACA,OAAO;AAAA,MAAA,CACR,GACD;AACA,UAAE,eAAA;AAAA,MACJ;AACA,gBAAU,CAAC;AAAA,IACb;AAEA,UAAM,QAAmC;AAAA,MACvC;AAAA,MACA,WAAW;AAAA,MACX,SAAS;AAAA,MACT;AAAA,MACA,cAAc;AAAA,MACd,GAAG;AAAA,IAAA;AAKL,WAAO,aACLC,2BAAAA,IAAAC,qBAAA,EAAG,UAAA,WAAW,EAAE,GAAG,OAAO,SAAS,CAAC,MAAM,UAAU,CAAC,GAAG,EAAA,CAAE,IAE1DD,2BAAAA,IAAC,KAAA,EAAG,GAAG,OAAO;AAAA,EAElB;AAEA,SACEA,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAW;AAAA,MACX;AAAA,MACA,cAAY;AAAA,MACZ;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,iBAAiB,cAAc;;;"}

package/dist-lib/src/components/shadcn/clickable-surface.d.ts CHANGED Viewed

@@ -30,7 +30,31 @@ export type ClickableSurfaceLinkProps = {
     target?: string;
     "aria-label": string;
 };
-export type ClickableSurfaceProps = {
+/**
+ * Atributos de ESTADO que o alvo precisa carregar quando a superfície representa uma
+ * seleção, e não só um link.
+ *
+ * Reportado pelo consumidor igreen-tickets: 19 superfícies (card de lote, pipeline,
+ * ranking, nav de categoria) viraram `ClickableSurface`, e a seleção ficou **só
+ * visual** — o alvo não anunciava estado nenhum. Sem isto, quem usa leitor de tela não
+ * sabe qual card está escolhido.
+ */
+export type ClickableSurfaceStateProps = {
+    /** Botão de alternância — o card está "ligado"? */
+    "aria-pressed"?: React.AriaAttributes["aria-pressed"];
+    /** Item selecionado dentro de um conjunto (nav, ranking, pipeline). */
+    "aria-current"?: React.AriaAttributes["aria-current"];
+    /** A superfície abre/fecha algo. */
+    "aria-expanded"?: React.AriaAttributes["aria-expanded"];
+    /** Descreve o alvo por outro elemento (ex.: o título do card). */
+    "aria-describedby"?: string;
+    /**
+     * Desabilita o alvo. Em `<a>` não existe `disabled`: vira
+     * `aria-disabled` + `pointer-events-none` + `tabIndex={-1}`, que é a forma correta.
+     */
+    disabled?: boolean;
+};
+export type ClickableSurfaceProps = ClickableSurfaceStateProps & {
     /** Nome acessível do alvo. Obrigatório — o elemento não tem conteúdo. */
     label: string;
     /** Clique. Sem `href`, o alvo é `<button type="button">`. */
@@ -44,7 +68,7 @@ export type ClickableSurfaceProps = {
     className?: string;
 };
 export declare const CLICKABLE_SURFACE_CLASS = "absolute inset-0 z-0 rounded-[inherit] focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring-brand";
-export declare function ClickableSurface({ label, onClick, href, target, renderLink, className, }: ClickableSurfaceProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function ClickableSurface({ label, onClick, href, target, renderLink, className, disabled, ...estado }: ClickableSurfaceProps): import("react/jsx-runtime").JSX.Element | null;
 export declare namespace ClickableSurface {
     var displayName: string;
 }

package/dist-lib/src/components/shadcn/clickable-surface.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"clickable-surface.d.ts","sourceRoot":"","sources":["../../../../src/components/shadcn/clickable-surface.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,MAAM,yBAAyB,GAAG;IACtC,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC1D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;~~IAClC~~,yEAAyE;IACzE,KAAK,EAAE,MAAM,CAAC;IACd,6DAA6D;IAC7D,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACrD,2CAA2C;IAC3C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0EAA0E;IAC1E,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,iEAAiE;IACjE,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,yBAAyB,KAAK,KAAK,CAAC,SAAS,CAAC;IACnE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,uBAAuB,yHACoF,CAAC;AAEzH,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,OAAO,EACP,IAAI,EACJ,MAAM,EACN,UAAU,EACV,SAAS,~~GACV~~,EAAE,qBAAqB,~~kDA2CvB~~;~~yBAlDe~~,gBAAgB"}
1	+ {"version":3,"file":"clickable-surface.d.ts","sourceRoot":"","sources":["../../../../src/components/shadcn/clickable-surface.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,MAAM,yBAAyB,GAAG;IACtC,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC1D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF;;;;;;;;GAQG;AACH,MAAM,MAAM,0BAA0B,GAAG;IACvC,mDAAmD;IACnD,cAAc,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;IACtD,uEAAuE;IACvE,cAAc,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;IACtD,oCAAoC;IACpC,eAAe,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC;IACxD,kEAAkE;IAClE,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,0BAA0B,GAAG;IAC/D,yEAAyE;IACzE,KAAK,EAAE,MAAM,CAAC;IACd,6DAA6D;IAC7D,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACrD,2CAA2C;IAC3C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0EAA0E;IAC1E,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,iEAAiE;IACjE,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,yBAAyB,KAAK,KAAK,CAAC,SAAS,CAAC;IACnE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,uBAAuB,yHACoF,CAAC;AAEzH,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,OAAO,EACP,IAAI,EACJ,MAAM,EACN,UAAU,EACV,SAAS,EACT,QAAQ,EACR,GAAG,MAAM,EACV,EAAE,qBAAqB,kDA8DvB;yBAvEe,gBAAgB"}

package/dist-lib/src/components/shadcn/clickable-surface.mjs CHANGED Viewed

@@ -8,10 +8,23 @@ function ClickableSurface({
   href,
   target,
   renderLink,
-  className
+  className,
+  disabled,
+  ...estado
 }) {
   if (!onClick && !href) return null;
-  const classes = cn(CLICKABLE_SURFACE_CLASS, className);
+  const classes = cn(
+    CLICKABLE_SURFACE_CLASS,
+    // `<a>` não tem `disabled`; e mesmo no `<button>` o alvo precisa sair da ordem de
+    // foco, senão o Tab para num controle que não faz nada.
+    disabled && "pointer-events-none",
+    className
+  );
+  const aria = {
+    ...estado,
+    "aria-disabled": disabled || void 0,
+    tabIndex: disabled ? -1 : void 0
+  };
   if (href) {
     const aoClicar = (e) => {
       if (shouldPreventNavigation({
@@ -29,11 +42,22 @@ function ClickableSurface({
       className: classes,
       onClick: aoClicar,
       target,
-      "aria-label": label
+      "aria-label": label,
+      ...aria
     };
     return renderLink ? /* @__PURE__ */ jsx(Fragment, { children: renderLink({ ...props, onClick: (e) => onClick?.(e) }) }) : /* @__PURE__ */ jsx("a", { ...props });
   }
-  return /* @__PURE__ */ jsx("button", { type: "button", className: classes, onClick, "aria-label": label });
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: classes,
+      onClick,
+      "aria-label": label,
+      disabled,
+      ...aria
+    }
+  );
 }
 ClickableSurface.displayName = "ClickableSurface";
 export {

package/dist-lib/src/components/shadcn/clickable-surface.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"clickable-surface.mjs","sources":["../../../../src/components/shadcn/clickable-surface.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\nimport { shouldPreventNavigation } from \"@/utils/nav-link\";\n\n/*\n ClickableSurface — o alvo esticado que transforma um card inteiro em botão ou link.\n \n ## Por que um elemento por cima, e não trocar a raiz por `<button>`\n \n O conteúdo permitido dentro de `<button>` é phrasing content. Um card tem `<h3>`,\n * parágrafos, às vezes uma tabela — HTML inválido, e o leitor de tela perde o heading\n * (deixa de anunciar a estrutura e passa a ler tudo como rótulo do botão). Trocar a raiz\n * por `<a>` tem o mesmo problema e ainda torna todo o texto interno parte do nome do link.\n \n A saída é um `<button>`/`<a>` vazio, absoluto, cobrindo a superfície: a árvore\n * semântica do card fica intacta e o alvo ganha foco, Enter/Space e — com `href` —\n * ctrl+clique, \"abrir em nova aba\" e \"copiar endereço\" de graça.\n \n ## Contrato de quem usa\n \n 1. O container precisa ser `relative` (senão o `inset-0` escapa pro ancestral posicionado).\n * 2. `label` é obrigatório: o alvo é vazio, então sem ele o leitor anuncia \"botão\" e nada mais.\n * 3. Controle que fica ACIMA do card (um menu, um botão de ajuda) precisa de `relative z-10`,\n * senão o overlay o cobre e o clique vai pro card.\n \n Usado por `Card` (`onClick`/`href`) e por `Kpi`. Existe como peça própria porque a\n * segunda cópia de um padrão de acessibilidade sutil é onde ele começa a divergir.\n /\nexport type ClickableSurfaceLinkProps = {\n href: string;\n className: string;\n onClick: (e: React.MouseEvent<HTMLAnchorElement>) => void;\n target?: string;\n \"aria-label\": string;\n};\n\nexport type ClickableSurfaceProps = {\n /* Nome acessível do alvo. Obrigatório — o elemento não tem conteúdo. /\n label: string;\n /* Clique. Sem `href`, o alvo é `<button type=\"button\">`. /\n onClick?: (e: React.MouseEvent<HTMLElement>) => void;\n /* Destino. Com `href`, o alvo é `<a>`. /\n href?: string;\n /* `target` do anchor. `\"_blank\"` desliga o cancelamento da navegação. /\n target?: string;\n /* Substitui o `<a>` interno pelo link do seu router (L-068). */\n renderLink?: (props: ClickableSurfaceLinkProps) => React.ReactNode;\n className?: string;\n};\n\nexport const CLICKABLE_SURFACE_CLASS =\n \"absolute inset-0 z-0 rounded-[inherit] focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring-brand\";\n\nexport function ClickableSurface({\n label,\n onClick,\n href,\n target,\n renderLink,\n className,\n}: ClickableSurfaceProps) {\n if (!onClick && !href) return null;\n\n const classes = cn(CLICKABLE_SURFACE_CLASS, className);\n\n if (href) {\n const aoClicar = (e: React.MouseEvent<HTMLAnchorElement>) => {\n // As 5 exceções que não podem cancelar a navegação (clique modificado, target,\n // href externo, href de hash, ausência de handler) estão medidas na L-068 — não\n // reimplemente aqui.\n if (\n shouldPreventNavigation({\n href,\n hasHandler: Boolean(onClick),\n target,\n event: e,\n })\n ) {\n e.preventDefault();\n }\n onClick?.(e);\n };\n\n const props: ClickableSurfaceLinkProps = {\n href,\n className: classes,\n onClick: aoClicar,\n target,\n \"aria-label\": label,\n };\n\n // Com `renderLink`, quem decide a navegação é o `<Link>` do router — o DS não mexe\n // em preventDefault (mesma regra do AppShell).\n return renderLink ? (\n <>{renderLink({ ...props, onClick: (e) => onClick?.(e) })}</>\n ) : (\n <a {...props} />\n );\n }\n\n return (\n <button type=\"button\" className={classes} onClick={onClick} aria-label={label} />\n );\n}\n\nClickableSurface.displayName = \"ClickableSurface\";\n"],"names":[],"mappings":";;;~~AAqDO~~,MAAM,0BACX;AAEK,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;~~AACF~~,GAA0B;AACxB,MAAI,CAAC,WAAW,CAAC,KAAM,QAAO;AAE9B,QAAM,UAAU,GAAG,~~yBAAyB~~,~~SAAS~~;~~AAErD~~,MAAI,MAAM;AACR,UAAM,WAAW,CAAC,MAA2C;AAI3D,UACE,wBAAwB;AAAA,QACtB;AAAA,QACA,YAAY,QAAQ,OAAO;AAAA,QAC3B;AAAA,QACA,OAAO;AAAA,MAAA,CACR,GACD;AACA,UAAE,eAAA;AAAA,MACJ;AACA,gBAAU,CAAC;AAAA,IACb;AAEA,UAAM,QAAmC;AAAA,MACvC;AAAA,MACA,WAAW;AAAA,MACX,SAAS;AAAA,MACT;AAAA,MACA,cAAc;AAAA,IAAA;~~AAKhB~~,WAAO,aACL,oBAAA,UAAA,EAAG,UAAA,WAAW,EAAE,GAAG,OAAO,SAAS,CAAC,MAAM,UAAU,CAAC,GAAG,EAAA,CAAE,IAE1D,oBAAC,KAAA,EAAG,GAAG,OAAO;AAAA,EAElB;AAEA,SACE,~~oBAAC~~,~~YAAO~~,MAAK,~~UAAS~~,WAAW,~~SAAS~~,~~SAAkB~~,cAAY,~~OAAO~~;~~AAEnF~~;AAEA,iBAAiB,cAAc;"}
1	+ {"version":3,"file":"clickable-surface.mjs","sources":["../../../../src/components/shadcn/clickable-surface.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\nimport { shouldPreventNavigation } from \"@/utils/nav-link\";\r\n\r\n/*\r\n ClickableSurface — o alvo esticado que transforma um card inteiro em botão ou link.\r\n \r\n ## Por que um elemento por cima, e não trocar a raiz por `<button>`\r\n \r\n O conteúdo permitido dentro de `<button>` é phrasing content. Um card tem `<h3>`,\r\n * parágrafos, às vezes uma tabela — HTML inválido, e o leitor de tela perde o heading\r\n * (deixa de anunciar a estrutura e passa a ler tudo como rótulo do botão). Trocar a raiz\r\n * por `<a>` tem o mesmo problema e ainda torna todo o texto interno parte do nome do link.\r\n \r\n A saída é um `<button>`/`<a>` vazio, absoluto, cobrindo a superfície: a árvore\r\n * semântica do card fica intacta e o alvo ganha foco, Enter/Space e — com `href` —\r\n * ctrl+clique, \"abrir em nova aba\" e \"copiar endereço\" de graça.\r\n \r\n ## Contrato de quem usa\r\n \r\n 1. O container precisa ser `relative` (senão o `inset-0` escapa pro ancestral posicionado).\r\n * 2. `label` é obrigatório: o alvo é vazio, então sem ele o leitor anuncia \"botão\" e nada mais.\r\n * 3. Controle que fica ACIMA do card (um menu, um botão de ajuda) precisa de `relative z-10`,\r\n * senão o overlay o cobre e o clique vai pro card.\r\n \r\n Usado por `Card` (`onClick`/`href`) e por `Kpi`. Existe como peça própria porque a\r\n * segunda cópia de um padrão de acessibilidade sutil é onde ele começa a divergir.\r\n /\r\nexport type ClickableSurfaceLinkProps = {\r\n href: string;\r\n className: string;\r\n onClick: (e: React.MouseEvent<HTMLAnchorElement>) => void;\r\n target?: string;\r\n \"aria-label\": string;\r\n};\r\n\r\n/\r\n Atributos de ESTADO que o alvo precisa carregar quando a superfície representa uma\r\n * seleção, e não só um link.\r\n \r\n Reportado pelo consumidor igreen-tickets: 19 superfícies (card de lote, pipeline,\r\n * ranking, nav de categoria) viraram `ClickableSurface`, e a seleção ficou *só\r\n visual** — o alvo não anunciava estado nenhum. Sem isto, quem usa leitor de tela não\r\n * sabe qual card está escolhido.\r\n /\r\nexport type ClickableSurfaceStateProps = {\r\n /* Botão de alternância — o card está \"ligado\"? /\r\n \"aria-pressed\"?: React.AriaAttributes[\"aria-pressed\"];\r\n /* Item selecionado dentro de um conjunto (nav, ranking, pipeline). /\r\n \"aria-current\"?: React.AriaAttributes[\"aria-current\"];\r\n /* A superfície abre/fecha algo. /\r\n \"aria-expanded\"?: React.AriaAttributes[\"aria-expanded\"];\r\n /* Descreve o alvo por outro elemento (ex.: o título do card). /\r\n \"aria-describedby\"?: string;\r\n /\r\n Desabilita o alvo. Em `<a>` não existe `disabled`: vira\r\n * `aria-disabled` + `pointer-events-none` + `tabIndex={-1}`, que é a forma correta.\r\n /\r\n disabled?: boolean;\r\n};\r\n\r\nexport type ClickableSurfaceProps = ClickableSurfaceStateProps & {\r\n /* Nome acessível do alvo. Obrigatório — o elemento não tem conteúdo. /\r\n label: string;\r\n /* Clique. Sem `href`, o alvo é `<button type=\"button\">`. /\r\n onClick?: (e: React.MouseEvent<HTMLElement>) => void;\r\n /* Destino. Com `href`, o alvo é `<a>`. /\r\n href?: string;\r\n /* `target` do anchor. `\"_blank\"` desliga o cancelamento da navegação. /\r\n target?: string;\r\n /* Substitui o `<a>` interno pelo link do seu router (L-068). */\r\n renderLink?: (props: ClickableSurfaceLinkProps) => React.ReactNode;\r\n className?: string;\r\n};\r\n\r\nexport const CLICKABLE_SURFACE_CLASS =\r\n \"absolute inset-0 z-0 rounded-[inherit] focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring-brand\";\r\n\r\nexport function ClickableSurface({\r\n label,\r\n onClick,\r\n href,\r\n target,\r\n renderLink,\r\n className,\r\n disabled,\r\n ...estado\r\n}: ClickableSurfaceProps) {\r\n if (!onClick && !href) return null;\r\n\r\n const classes = cn(\r\n CLICKABLE_SURFACE_CLASS,\r\n // `<a>` não tem `disabled`; e mesmo no `<button>` o alvo precisa sair da ordem de\r\n // foco, senão o Tab para num controle que não faz nada.\r\n disabled && \"pointer-events-none\",\r\n className,\r\n );\r\n const aria = {\r\n ...estado,\r\n \"aria-disabled\": disabled \|\| undefined,\r\n tabIndex: disabled ? -1 : undefined,\r\n };\r\n\r\n if (href) {\r\n const aoClicar = (e: React.MouseEvent<HTMLAnchorElement>) => {\r\n // As 5 exceções que não podem cancelar a navegação (clique modificado, target,\r\n // href externo, href de hash, ausência de handler) estão medidas na L-068 — não\r\n // reimplemente aqui.\r\n if (\r\n shouldPreventNavigation({\r\n href,\r\n hasHandler: Boolean(onClick),\r\n target,\r\n event: e,\r\n })\r\n ) {\r\n e.preventDefault();\r\n }\r\n onClick?.(e);\r\n };\r\n\r\n const props: ClickableSurfaceLinkProps = {\r\n href,\r\n className: classes,\r\n onClick: aoClicar,\r\n target,\r\n \"aria-label\": label,\r\n ...aria,\r\n };\r\n\r\n // Com `renderLink`, quem decide a navegação é o `<Link>` do router — o DS não mexe\r\n // em preventDefault (mesma regra do AppShell).\r\n return renderLink ? (\r\n <>{renderLink({ ...props, onClick: (e) => onClick?.(e) })}</>\r\n ) : (\r\n <a {...props} />\r\n );\r\n }\r\n\r\n return (\r\n <button\r\n type=\"button\"\r\n className={classes}\r\n onClick={onClick}\r\n aria-label={label}\r\n disabled={disabled}\r\n {...aria}\r\n />\r\n );\r\n}\r\n\r\nClickableSurface.displayName = \"ClickableSurface\";\r\n"],"names":[],"mappings":";;;AA8EO,MAAM,0BACX;AAEK,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA0B;AACxB,MAAI,CAAC,WAAW,CAAC,KAAM,QAAO;AAE9B,QAAM,UAAU;AAAA,IACd;AAAA;AAAA;AAAA,IAGA,YAAY;AAAA,IACZ;AAAA,EAAA;AAEF,QAAM,OAAO;AAAA,IACX,GAAG;AAAA,IACH,iBAAiB,YAAY;AAAA,IAC7B,UAAU,WAAW,KAAK;AAAA,EAAA;AAG5B,MAAI,MAAM;AACR,UAAM,WAAW,CAAC,MAA2C;AAI3D,UACE,wBAAwB;AAAA,QACtB;AAAA,QACA,YAAY,QAAQ,OAAO;AAAA,QAC3B;AAAA,QACA,OAAO;AAAA,MAAA,CACR,GACD;AACA,UAAE,eAAA;AAAA,MACJ;AACA,gBAAU,CAAC;AAAA,IACb;AAEA,UAAM,QAAmC;AAAA,MACvC;AAAA,MACA,WAAW;AAAA,MACX,SAAS;AAAA,MACT;AAAA,MACA,cAAc;AAAA,MACd,GAAG;AAAA,IAAA;AAKL,WAAO,aACL,oBAAA,UAAA,EAAG,UAAA,WAAW,EAAE,GAAG,OAAO,SAAS,CAAC,MAAM,UAAU,CAAC,GAAG,EAAA,CAAE,IAE1D,oBAAC,KAAA,EAAG,GAAG,OAAO;AAAA,EAElB;AAEA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAW;AAAA,MACX;AAAA,MACA,cAAY;AAAA,MACZ;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,iBAAiB,cAAc;"}

package/dist-lib/src/components/shadcn/command.cjs CHANGED Viewed

@@ -45,25 +45,45 @@ const Command = React__namespace.forwardRef(({ className, ...props }, ref) => /*
   }
 ));
 Command.displayName = cmdk.Command.displayName;
-const CommandDialog = ({ children, ...props }) => {
+const COMMAND_DIALOG_SIZE = {
+  // 384px — o DEFAULT, e é a largura que a paleta sempre teve. Era
+  // `sm:max-w-[384px]` hardcoded; `max-w-sm` é o mesmo valor pelo nome do Tailwind
+  // (24rem), agora que a escala nativa voltou a valer. Tokenizar não muda pixel.
+  sm: "sm:max-w-sm",
+  md: "sm:max-w-drawer-md",
+  // 480px
+  lg: "sm:max-w-modal-md"
+  // 640px
+};
+const CommandDialog = ({
+  children,
+  size = "sm",
+  contentClassName,
+  commandProps,
+  title = "Comando",
+  ...props
+}) => {
   return /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog, { ...props, children: /* @__PURE__ */ jsxRuntime.jsxs(
     dialog.DialogContent,
     {
       hideClose: true,
       "aria-describedby": void 0,
       className: utils.cn(
-        "overflow-hidden p-0 gap-0 sm:max-w-[384px]",
+        "overflow-hidden p-0 gap-0",
+        COMMAND_DIALOG_SIZE[size],
         "rounded-[12px] border border-border-default",
         // Outline padrão de elementos flutuantes
-        "outline-float"
+        "outline-float",
+        contentClassName
       ),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogTitle, { className: "sr-only", children: "Comando" }),
-        /* @__PURE__ */ jsxRuntime.jsx(Command, { children })
+        /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogTitle, { className: "sr-only", children: title }),
+        /* @__PURE__ */ jsxRuntime.jsx(Command, { ...commandProps, children })
       ]
     }
   ) });
 };
+const CommandLoading = cmdk.Command.Loading;
 const CommandInput = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
   "div",
   {
@@ -182,6 +202,7 @@ exports.CommandGroup = CommandGroup;
 exports.CommandInput = CommandInput;
 exports.CommandItem = CommandItem;
 exports.CommandList = CommandList;
+exports.CommandLoading = CommandLoading;
 exports.CommandSeparator = CommandSeparator;
 exports.CommandShortcut = CommandShortcut;
 //# sourceMappingURL=command.cjs.map

package/dist-lib/src/components/shadcn/command.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"command.cjs","sources":["../../../../src/components/shadcn/command.tsx"],"sourcesContent":["\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { type DialogProps } from \"@radix-ui/react-dialog\"\r\nimport { Command as CommandPrimitive } from \"cmdk\"\r\nimport { Search } from \"lucide-react\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\nimport { Dialog, DialogContent, DialogTitle } from \"@/components/shadcn/dialog\"\r\n\r\n/*\r\n Command — alinhado com o views-popover do design-and-table-v2.\r\n \r\n Estrutura:\r\n * - <Command> raiz (flex column)\r\n * - <CommandInput> = input \"real\" boxed (bg-input + border + radius-lg + shadow)\r\n * - <CommandList> com padding 4px\r\n * - <CommandGroup> heading uppercase + items\r\n * - <CommandItem> radius-lg (10px), px 12, py 8, font 13px, ícones 18px\r\n \r\n Pattern do input replica `.tbl-views-pop-search` exatamente.\r\n /\r\n\r\nconst Command = React.forwardRef<\r\n React.ElementRef<typeof CommandPrimitive>,\r\n React.ComponentPropsWithoutRef<typeof CommandPrimitive>\r\n>(({ className, ...props }, ref) => (\r\n <CommandPrimitive\r\n ref={ref}\r\n className={cn(\r\n // `bg-popover`/`text-popover-foreground` são vocabulário SHADCN, não do DS —\r\n // dependem da bridge do `globals.css`/`index.css`, que NÃO viaja pros canais npm\r\n // e submódulo. Lá a var não existe e a cor cai em `currentColor` (L-039/L-040).\r\n //\r\n // ⚠️ O substituto é `bg-bg-surface`, NÃO `bg-bg-dropdown`. A primeira troca (v0.36.0)\r\n // usou `dropdown` por ser o token da receita de flutuante — mas ele é TRANSLÚCIDO no\r\n // dark (`canvas` a 70%, pareado com `before:backdrop-blur-2xl`, que este componente\r\n // não tem), enquanto a bridge resolvia `popover` pra `surface-elevated`, OPACO.\r\n // Medido: light idêntico nos dois; dark `oklch(0.225 0 0)` vs `oklab(0.205 0 0 / 0.7)`.\r\n // `bg-bg-surface` reproduz o valor original nos DOIS modos.\r\n \"flex h-full w-full flex-col overflow-hidden p-pad-xl bg-bg-surface text-fg-default\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n))\r\nCommand.displayName = CommandPrimitive.displayName\r\n\r\nconst CommandDialog = ({ children, ...props }: DialogProps) => {\r\n return (\r\n <Dialog {...props}>\r\n <DialogContent\r\n hideClose\r\n // A11y: Radix exige título; aqui é sr-only (paleta de comando não tem\r\n // header visível) e opt-out de descrição.\r\n aria-describedby={undefined}\r\n className={cn(\r\n \"overflow-hidden p-0 gap-0 sm:max-w-[384px]\",\r\n \"rounded-[12px] border border-border-default\",\r\n // Outline padrão de elementos flutuantes\r\n \"outline-float\"\r\n )}\r\n >\r\n <DialogTitle className=\"sr-only\">Comando</DialogTitle>\r\n <Command>{children}</Command>\r\n </DialogContent>\r\n </Dialog>\r\n )\r\n}\r\n\r\n/ ── Input boxed (igual views-popover search) ─────────────────────────────── /\r\nconst CommandInput = React.forwardRef<\r\n React.ElementRef<typeof CommandPrimitive.Input>,\r\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>\r\n>(({ className, ...props }, ref) => (\r\n <div\r\n cmdk-input-wrapper=\"\"\r\n className={cn(\r\n \"flex items-center gap-gp-md h-form-md px-pad-xl rounded-radius-lg\",\r\n \"bg-bg-input border border-border-subtle shadow-sh-sm\",\r\n \"transition-[border-color,box-shadow,background-color] duration-150\",\r\n \"focus-within:border-border-brand focus-within:shadow-sh-ring\",\r\n \"dark:bg-bg-muted dark:border-border-input dark:shadow-sh-none\"\r\n )}\r\n >\r\n <Search className=\"size-[14px] text-fg-muted shrink-0\" strokeWidth={1.8} />\r\n <CommandPrimitive.Input\r\n ref={ref}\r\n className={cn(\r\n \"flex-1 min-w-0 bg-transparent border-0 outline-none\",\r\n \"text-body-sm font-normal text-fg-default placeholder:text-fg-muted\",\r\n \"disabled:cursor-not-allowed disabled:opacity-50\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n </div>\r\n))\r\nCommandInput.displayName = CommandPrimitive.Input.displayName\r\n\r\n/ ── List ─────────────────────────────────────────────────────────────────── /\r\nconst CommandList = React.forwardRef<\r\n React.ElementRef<typeof CommandPrimitive.List>,\r\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>\r\n>(({ className, ...props }, ref) => (\r\n <CommandPrimitive.List\r\n ref={ref}\r\n className={cn(\r\n \"max-h-[300px] overflow-y-auto overflow-x-hidden mt-pad-md scrollbar-thin\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n))\r\nCommandList.displayName = CommandPrimitive.List.displayName\r\n\r\nconst CommandEmpty = React.forwardRef<\r\n React.ElementRef<typeof CommandPrimitive.Empty>,\r\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>\r\n>((props, ref) => (\r\n <CommandPrimitive.Empty\r\n ref={ref}\r\n className=\"py-pad-5xl text-center text-body-md text-fg-muted\"\r\n {...props}\r\n />\r\n))\r\nCommandEmpty.displayName = CommandPrimitive.Empty.displayName\r\n\r\n/ ── Group (heading uppercase 28px, sem padding extra no group) ──────────── /\r\nconst CommandGroup = React.forwardRef<\r\n React.ElementRef<typeof CommandPrimitive.Group>,\r\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>\r\n>(({ className, ...props }, ref) => (\r\n <CommandPrimitive.Group\r\n ref={ref}\r\n className={cn(\r\n \"overflow-hidden text-fg-default\",\r\n \"[&_[cmdk-group-heading]]:flex [&_[cmdk-group-heading]]:items-center\",\r\n \"[&_[cmdk-group-heading]]:h-[28px] [&_[cmdk-group-heading]]:px-pad-xl\",\r\n \"[&_[cmdk-group-heading]]:text-caption-xs [&_[cmdk-group-heading]]:font-bold\",\r\n \"[&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:tracking-wider\",\r\n \"[&_[cmdk-group-heading]]:text-fg-subtle\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n))\r\nCommandGroup.displayName = CommandPrimitive.Group.displayName\r\n\r\nconst CommandSeparator = React.forwardRef<\r\n React.ElementRef<typeof CommandPrimitive.Separator>,\r\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>\r\n>(({ className, ...props }, ref) => (\r\n <CommandPrimitive.Separator\r\n ref={ref}\r\n className={cn(\"mx-pad-xs my-pad-xs h-px bg-border-default\", className)}\r\n {...props}\r\n />\r\n))\r\nCommandSeparator.displayName = CommandPrimitive.Separator.displayName\r\n\r\n/ ── Item: px-12 py-8, radius-lg (10px), font 13px, ícones 18px ───────────── */\r\nconst CommandItem = React.forwardRef<\r\n React.ElementRef<typeof CommandPrimitive.Item>,\r\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>\r\n>(({ className, ...props }, ref) => (\r\n <CommandPrimitive.Item\r\n ref={ref}\r\n className={cn(\r\n \"relative flex cursor-default select-none items-center gap-gp-md\",\r\n \"rounded-radius-lg px-pad-xl py-pad-md\",\r\n \"text-body-sm font-medium text-fg-muted\",\r\n \"outline-none transition-colors\",\r\n \"data-[selected='true']:bg-bg-muted data-[selected='true']:text-fg-default data-[selected='true']:[&_svg]:text-fg-default\",\r\n \"data-[disabled='true']:pointer-events-none data-[disabled='true']:opacity-50\",\r\n \"[&_svg]:pointer-events-none [&_svg]:size-[18px] [&_svg]:shrink-0 [&_svg]:text-fg-muted\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n))\r\nCommandItem.displayName = CommandPrimitive.Item.displayName\r\n\r\nconst CommandShortcut = ({\r\n className,\r\n ...props\r\n}: React.HTMLAttributes<HTMLSpanElement>) => {\r\n return (\r\n <span\r\n className={cn(\r\n \"ml-auto text-caption-sm tracking-wider text-fg-subtle\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n )\r\n}\r\nCommandShortcut.displayName = \"CommandShortcut\"\r\n\r\nexport {\r\n Command,\r\n CommandDialog,\r\n CommandInput,\r\n CommandList,\r\n CommandEmpty,\r\n CommandGroup,\r\n CommandItem,\r\n CommandShortcut,\r\n CommandSeparator,\r\n}\r\n"],"names":["React","jsx","CommandPrimitive","cn","Dialog","jsxs","DialogContent","DialogTitle","Search"],"mappings":"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"}
1	+ {"version":3,"file":"command.cjs","sources":["../../../../src/components/shadcn/command.tsx"],"sourcesContent":["\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { type DialogProps } from \"@radix-ui/react-dialog\"\r\nimport { Command as CommandPrimitive } from \"cmdk\"\r\nimport { Search } from \"lucide-react\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\nimport { Dialog, DialogContent, DialogTitle } from \"@/components/shadcn/dialog\"\r\n\r\n/*\r\n Command — alinhado com o views-popover do design-and-table-v2.\r\n \r\n Estrutura:\r\n * - <Command> raiz (flex column)\r\n * - <CommandInput> = input \"real\" boxed (bg-input + border + radius-lg + shadow)\r\n * - <CommandList> com padding 4px\r\n * - <CommandGroup> heading uppercase + items\r\n * - <CommandItem> radius-lg (10px), px 12, py 8, font 13px, ícones 18px\r\n \r\n Pattern do input replica `.tbl-views-pop-search` exatamente.\r\n /\r\n\r\nconst Command = React.forwardRef<\r\n React.ElementRef<typeof CommandPrimitive>,\r\n React.ComponentPropsWithoutRef<typeof CommandPrimitive>\r\n>(({ className, ...props }, ref) => (\r\n <CommandPrimitive\r\n ref={ref}\r\n className={cn(\r\n // `bg-popover`/`text-popover-foreground` são vocabulário SHADCN, não do DS —\r\n // dependem da bridge do `globals.css`/`index.css`, que NÃO viaja pros canais npm\r\n // e submódulo. Lá a var não existe e a cor cai em `currentColor` (L-039/L-040).\r\n //\r\n // ⚠️ O substituto é `bg-bg-surface`, NÃO `bg-bg-dropdown`. A primeira troca (v0.36.0)\r\n // usou `dropdown` por ser o token da receita de flutuante — mas ele é TRANSLÚCIDO no\r\n // dark (`canvas` a 70%, pareado com `before:backdrop-blur-2xl`, que este componente\r\n // não tem), enquanto a bridge resolvia `popover` pra `surface-elevated`, OPACO.\r\n // Medido: light idêntico nos dois; dark `oklch(0.225 0 0)` vs `oklab(0.205 0 0 / 0.7)`.\r\n // `bg-bg-surface` reproduz o valor original nos DOIS modos.\r\n \"flex h-full w-full flex-col overflow-hidden p-pad-xl bg-bg-surface text-fg-default\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n))\r\nCommand.displayName = CommandPrimitive.displayName\r\n\r\n/\r\n Largura da paleta. Era `sm:max-w-[384px]` fixo — arbitrário, sem token, e sem saída:\r\n * paleta com resultado rico (ícone + título + descrição + atalho) não cabe em 384px.\r\n /\r\nconst COMMAND_DIALOG_SIZE = {\r\n // 384px — o DEFAULT, e é a largura que a paleta sempre teve. Era\r\n // `sm:max-w-[384px]` hardcoded; `max-w-sm` é o mesmo valor pelo nome do Tailwind\r\n // (24rem), agora que a escala nativa voltou a valer. Tokenizar não muda pixel.\r\n sm: \"sm:max-w-sm\",\r\n md: \"sm:max-w-drawer-md\", // 480px\r\n lg: \"sm:max-w-modal-md\", // 640px\r\n} as const;\r\n\r\nexport type CommandDialogSize = keyof typeof COMMAND_DIALOG_SIZE;\r\n\r\ntype CommandDialogProps = DialogProps & {\r\n /* Largura da paleta: sm 384 (default, a de sempre) · md 480 · lg 640. /\r\n size?: CommandDialogSize;\r\n /* className do `DialogContent` — altura máxima, sombra, o que for. /\r\n contentClassName?: string;\r\n /\r\n Props repassadas ao `<Command>` do cmdk: `shouldFilter`, `filter`, `loop`,\r\n * `value`, `onValueChange`.\r\n \r\n Sem isto, busca no SERVIDOR era impossível pelo `CommandDialog` — o cmdk filtra do\r\n * lado do cliente por default, e não havia como passar `shouldFilter={false}`. O\r\n * consumidor igreen-tickets montou a busca global dele com `Dialog` + `Command` na\r\n * mão por causa disso, o que é uma composição legítima, mas não deveria ser\r\n * obrigatória pra algo tão comum.\r\n /\r\n commandProps?: React.ComponentPropsWithoutRef<typeof CommandPrimitive>;\r\n /* Título acessível da paleta (sr-only). Default \"Comando\". /\r\n title?: string;\r\n};\r\n\r\nconst CommandDialog = ({\r\n children,\r\n size = \"sm\",\r\n contentClassName,\r\n commandProps,\r\n title = \"Comando\",\r\n ...props\r\n}: CommandDialogProps) => {\r\n return (\r\n <Dialog {...props}>\r\n <DialogContent\r\n hideClose\r\n // A11y: Radix exige título; aqui é sr-only (paleta de comando não tem\r\n // header visível) e opt-out de descrição.\r\n aria-describedby={undefined}\r\n className={cn(\r\n \"overflow-hidden p-0 gap-0\",\r\n COMMAND_DIALOG_SIZE[size],\r\n \"rounded-[12px] border border-border-default\",\r\n // Outline padrão de elementos flutuantes\r\n \"outline-float\",\r\n contentClassName\r\n )}\r\n >\r\n <DialogTitle className=\"sr-only\">{title}</DialogTitle>\r\n <Command {...commandProps}>{children}</Command>\r\n </DialogContent>\r\n </Dialog>\r\n )\r\n}\r\n\r\n/\r\n Estado de carregando do cmdk, reexportado sem casca própria.\r\n \r\n O pacote não o exportava, então busca assíncrona pelo `CommandDialog` não tinha como\r\n * mostrar progresso — o consumidor importava do `cmdk` direto, o que fura o contrato de\r\n * \"o DS é a fonte\" e prende a versão do cmdk no projeto dele.\r\n /\r\nconst CommandLoading = CommandPrimitive.Loading;\r\n\r\n/ ── Input boxed (igual views-popover search) ─────────────────────────────── /\r\nconst CommandInput = React.forwardRef<\r\n React.ElementRef<typeof CommandPrimitive.Input>,\r\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>\r\n>(({ className, ...props }, ref) => (\r\n <div\r\n cmdk-input-wrapper=\"\"\r\n className={cn(\r\n \"flex items-center gap-gp-md h-form-md px-pad-xl rounded-radius-lg\",\r\n \"bg-bg-input border border-border-subtle shadow-sh-sm\",\r\n \"transition-[border-color,box-shadow,background-color] duration-150\",\r\n \"focus-within:border-border-brand focus-within:shadow-sh-ring\",\r\n \"dark:bg-bg-muted dark:border-border-input dark:shadow-sh-none\"\r\n )}\r\n >\r\n <Search className=\"size-[14px] text-fg-muted shrink-0\" strokeWidth={1.8} />\r\n <CommandPrimitive.Input\r\n ref={ref}\r\n className={cn(\r\n \"flex-1 min-w-0 bg-transparent border-0 outline-none\",\r\n \"text-body-sm font-normal text-fg-default placeholder:text-fg-muted\",\r\n \"disabled:cursor-not-allowed disabled:opacity-50\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n </div>\r\n))\r\nCommandInput.displayName = CommandPrimitive.Input.displayName\r\n\r\n/ ── List ─────────────────────────────────────────────────────────────────── /\r\nconst CommandList = React.forwardRef<\r\n React.ElementRef<typeof CommandPrimitive.List>,\r\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>\r\n>(({ className, ...props }, ref) => (\r\n <CommandPrimitive.List\r\n ref={ref}\r\n className={cn(\r\n \"max-h-[300px] overflow-y-auto overflow-x-hidden mt-pad-md scrollbar-thin\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n))\r\nCommandList.displayName = CommandPrimitive.List.displayName\r\n\r\nconst CommandEmpty = React.forwardRef<\r\n React.ElementRef<typeof CommandPrimitive.Empty>,\r\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>\r\n>((props, ref) => (\r\n <CommandPrimitive.Empty\r\n ref={ref}\r\n className=\"py-pad-5xl text-center text-body-md text-fg-muted\"\r\n {...props}\r\n />\r\n))\r\nCommandEmpty.displayName = CommandPrimitive.Empty.displayName\r\n\r\n/ ── Group (heading uppercase 28px, sem padding extra no group) ──────────── /\r\nconst CommandGroup = React.forwardRef<\r\n React.ElementRef<typeof CommandPrimitive.Group>,\r\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>\r\n>(({ className, ...props }, ref) => (\r\n <CommandPrimitive.Group\r\n ref={ref}\r\n className={cn(\r\n \"overflow-hidden text-fg-default\",\r\n \"[&_[cmdk-group-heading]]:flex [&_[cmdk-group-heading]]:items-center\",\r\n \"[&_[cmdk-group-heading]]:h-[28px] [&_[cmdk-group-heading]]:px-pad-xl\",\r\n \"[&_[cmdk-group-heading]]:text-caption-xs [&_[cmdk-group-heading]]:font-bold\",\r\n \"[&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:tracking-wider\",\r\n \"[&_[cmdk-group-heading]]:text-fg-subtle\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n))\r\nCommandGroup.displayName = CommandPrimitive.Group.displayName\r\n\r\nconst CommandSeparator = React.forwardRef<\r\n React.ElementRef<typeof CommandPrimitive.Separator>,\r\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>\r\n>(({ className, ...props }, ref) => (\r\n <CommandPrimitive.Separator\r\n ref={ref}\r\n className={cn(\"mx-pad-xs my-pad-xs h-px bg-border-default\", className)}\r\n {...props}\r\n />\r\n))\r\nCommandSeparator.displayName = CommandPrimitive.Separator.displayName\r\n\r\n/ ── Item: px-12 py-8, radius-lg (10px), font 13px, ícones 18px ───────────── */\r\nconst CommandItem = React.forwardRef<\r\n React.ElementRef<typeof CommandPrimitive.Item>,\r\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>\r\n>(({ className, ...props }, ref) => (\r\n <CommandPrimitive.Item\r\n ref={ref}\r\n className={cn(\r\n \"relative flex cursor-default select-none items-center gap-gp-md\",\r\n \"rounded-radius-lg px-pad-xl py-pad-md\",\r\n \"text-body-sm font-medium text-fg-muted\",\r\n \"outline-none transition-colors\",\r\n \"data-[selected='true']:bg-bg-muted data-[selected='true']:text-fg-default data-[selected='true']:[&_svg]:text-fg-default\",\r\n \"data-[disabled='true']:pointer-events-none data-[disabled='true']:opacity-50\",\r\n \"[&_svg]:pointer-events-none [&_svg]:size-[18px] [&_svg]:shrink-0 [&_svg]:text-fg-muted\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n))\r\nCommandItem.displayName = CommandPrimitive.Item.displayName\r\n\r\nconst CommandShortcut = ({\r\n className,\r\n ...props\r\n}: React.HTMLAttributes<HTMLSpanElement>) => {\r\n return (\r\n <span\r\n className={cn(\r\n \"ml-auto text-caption-sm tracking-wider text-fg-subtle\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n )\r\n}\r\nCommandShortcut.displayName = \"CommandShortcut\"\r\n\r\nexport {\r\n Command,\r\n CommandDialog,\r\n CommandLoading,\r\n CommandInput,\r\n CommandList,\r\n CommandEmpty,\r\n CommandGroup,\r\n CommandItem,\r\n CommandShortcut,\r\n CommandSeparator,\r\n}\r\n"],"names":["React","jsx","CommandPrimitive","cn","Dialog","jsxs","DialogContent","DialogTitle","Search"],"mappings":"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"}