trdr-ds-install 1.8.0 → 1.8.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "trdr-ds-install",
-  "version": "1.8.0",
+  "version": "1.8.1",
   "description": "Installs the TRDR Design System skill for Claude Code",
   "bin": {
     "trdr-ds-install": "./bin/install.js"

package/plugins/trdr-design-system/skills/trdr-ds/SKILL.md

@@ -6,7 +6,7 @@ argument-hint: "[analyze|apply|foundation|violations|components|final|resume|sta
 allowed-tools: [Read, Glob, Grep, Edit, Write, Bash, WebFetch]
 ---
 
-**Skill version:** 1.8.0
+**Skill version:** 1.8.1
 **npm package:** trdr-ds-install
 
 You are implementing the **TRDR Design System** in a developer's project. The Design Hub is the single source of truth and lives at **https://trdr.mrocontent.com.br**.
@@ -60,7 +60,7 @@ Compare the result with the **Skill version** constant at the top of this file.
 - If registry version == local version: skip silently, continue.
 - If registry version > local version:
   ```
-  🔄 Nova versão da skill disponível: trdr-ds-install@[registry-version] (instalada: 1.8.0)
+  🔄 Nova versão da skill disponível: trdr-ds-install@[registry-version] (instalada: 1.8.1)
 
   Responda:
   - `"atualizar"` / `"update"` — instalar a nova versão agora (requer reiniciar /trdr-ds após)

package/plugins/trdr-design-system/skills/trdr-ds/data/components.json

@@ -1,8 +1,8 @@
 {
   "version": "1.0",
-  "generatedAt": "2026-05-13T16:34:15.953Z",
-  "total": 20,
-  "implemented": 20,
+  "generatedAt": "2026-05-13T18:53:51.673Z",
+  "total": 25,
+  "implemented": 25,
   "categories": {
     "formulario": "Formulário / Controles",
     "modal": "Modais / Overlays",
@@ -2156,6 +2156,481 @@
         "prompt": "Implemente o componente Badge do Design System TRDR.\n\nESPECIFICAÇÕES PIXEL-PERFECT:\n- Border-radius: 5px (fixo, não token)\n- Border: 1px solid (cor varia por variante)\n- Default (sm): height 16px, padding 0 4px, Inter 12px/500, letter-spacing 0.2px\n- Large: height auto (~25px), padding 4px uniforme, Inter 14px/400, letter-spacing 0, line-height 1.2\n- Dot: 6×6px, border-radius full, cor = currentColor\n\nVARIANTES E TOKENS OBRIGATÓRIOS:\n- Neutral: bg --surface-secondary (#222222), text --content-tertiary (#A4A4A4), border --border-subtle (#222222)\n- Brand: bg --surface-brand (#00D4FF29), text --content-brand (#00D4FF), border --content-brand\n- Success: bg --surface-success (#4FE29014), text --content-success (#4FE290), border --content-success\n- Warning: bg --surface-warning (#FFCC4014), text --content-warning (#FFD35A), border --content-warning\n- Archived: bg --surface-tertiary (#1A1A1A), text --content-disabled (#4A4A4A), border --border-disabled (#777777)\n\nPROPS:\n- variant: 'neutral' | 'brand' | 'success' | 'warning' | 'archived' (default: 'neutral')\n- size: 'default' | 'lg' (default: 'default')\n- dot: boolean (default: false) — mostra dot 6×6 antes do texto via ::before\n\nNOTAS:\n- O dot usa currentColor para herdar a cor do texto da variante\n- Merged no Figma = variante \"success\" com dot\n- Active no Figma = variante \"brand\" com dot\n- Archived = variante dedicada com dot\n- NUNCA usar hex direto. NUNCA usar --scale-spacing-* ou --scale-radius-*."
       },
       "dependencies": []
+    },
+    {
+      "slug": "table",
+      "name": "Table",
+      "figmaId": "—",
+      "category": "outros",
+      "description": "Tabela genérica do Design System TRDR. Header 11px uppercase, cells 13px, hover row, border-bottom subtle. Variantes: bordered (wrapper com borda + radius), compact (padding reduzido), striped (linhas alternadas).",
+      "props": [
+        {
+          "name": "Bordered",
+          "type": "boolean",
+          "values": [
+            "true",
+            "false"
+          ]
+        },
+        {
+          "name": "Compact",
+          "type": "boolean",
+          "values": [
+            "true",
+            "false"
+          ]
+        },
+        {
+          "name": "Striped",
+          "type": "boolean",
+          "values": [
+            "true",
+            "false"
+          ]
+        },
+        {
+          "name": "Hoverable",
+          "type": "boolean",
+          "values": [
+            "true",
+            "false"
+          ]
+        }
+      ],
+      "dimensions": [
+        {
+          "label": "Default",
+          "width": "100% (fill)",
+          "height": "auto"
+        },
+        {
+          "label": "Header row",
+          "width": "100%",
+          "height": "auto (~28px)"
+        },
+        {
+          "label": "Body row",
+          "width": "100%",
+          "height": "auto (~40px)"
+        }
+      ],
+      "tokens": [
+        {
+          "property": "Header text",
+          "token": "content-tertiary",
+          "value": "#A4A4A4"
+        },
+        {
+          "property": "Header border",
+          "token": "border-subtle",
+          "value": "#222222"
+        },
+        {
+          "property": "Header padding",
+          "token": "spacing-sm / spacing-lg",
+          "value": "8px / 16px"
+        },
+        {
+          "property": "Cell text",
+          "token": "content-secondary",
+          "value": "#E8E8E8"
+        },
+        {
+          "property": "Cell border",
+          "token": "border-subtle",
+          "value": "#222222"
+        },
+        {
+          "property": "Cell padding",
+          "token": "spacing-md / spacing-lg",
+          "value": "12px / 16px"
+        },
+        {
+          "property": "Hover BG",
+          "token": "bg-tertiary",
+          "value": "#141519"
+        },
+        {
+          "property": "Striped BG",
+          "token": "bg-secondary",
+          "value": "#0E0E0E"
+        },
+        {
+          "property": "Wrapper border",
+          "token": "border-subtle",
+          "value": "#222222"
+        },
+        {
+          "property": "Wrapper radius",
+          "token": "radius-md",
+          "value": "8px"
+        }
+      ],
+      "anatomy": "[div.trdr-table-wrapper?]  ← wrapper opcional (bordered): borda + radius + overflow\n  └── [table.trdr-table .trdr-table-compact? .trdr-table-striped? .trdr-table-bordered?]\n        ├── thead > tr > th  ← 11px/600/uppercase, letter-spacing 0.08em, tertiary\n        └── tbody > tr > td  ← 13px/secondary, hover bg-tertiary\n\nCompact: padding reduzido (xs/md), font 12px\nStriped: nth-child(even) bg-secondary\nBordered: wrapper com border 1px subtle, radius-md, overflow hidden",
+      "implemented": true,
+      "code": {
+        "html": "<!-- Default -->\n<table class=\"trdr-table\">\n  <thead>\n    <tr>\n      <th>Token</th>\n      <th>CSS Variable</th>\n      <th>Valor</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>bg-primary</td>\n      <td>--bg-primary</td>\n      <td>#0A0A0A</td>\n    </tr>\n    <tr>\n      <td>bg-secondary</td>\n      <td>--bg-secondary</td>\n      <td>#0E0E0E</td>\n    </tr>\n  </tbody>\n</table>\n\n<!-- Bordered (com wrapper) -->\n<div class=\"trdr-table-wrapper\">\n  <table class=\"trdr-table trdr-table-bordered\">\n    <thead>\n      <tr><th>Prop</th><th>Tipo</th><th>Default</th></tr>\n    </thead>\n    <tbody>\n      <tr><td>variant</td><td>enum</td><td>neutral</td></tr>\n      <tr><td>size</td><td>enum</td><td>default</td></tr>\n    </tbody>\n  </table>\n</div>\n\n<!-- Compact + Striped -->\n<table class=\"trdr-table trdr-table-compact trdr-table-striped\">\n  <thead>\n    <tr><th>Ativo</th><th>Preço</th><th>Var%</th></tr>\n  </thead>\n  <tbody>\n    <tr><td>PETR4</td><td>38.42</td><td>+1.2%</td></tr>\n    <tr><td>VALE3</td><td>62.18</td><td>-0.8%</td></tr>\n    <tr><td>ITUB4</td><td>34.56</td><td>+0.3%</td></tr>\n    <tr><td>BBDC4</td><td>14.20</td><td>-1.1%</td></tr>\n  </tbody>\n</table>",
+        "css": ".trdr-table {\n  width: 100%;\n  border-collapse: collapse;\n}\n\n.trdr-table th {\n  text-align: left;\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.08em;\n  color: var(--content-tertiary);\n  padding: var(--spacing-sm) var(--spacing-lg);\n  border-bottom: 1px solid var(--border-subtle);\n}\n\n.trdr-table td {\n  padding: var(--spacing-md) var(--spacing-lg);\n  border-bottom: 1px solid var(--border-subtle);\n  font-size: 13px;\n  color: var(--content-secondary);\n  vertical-align: middle;\n}\n\n.trdr-table tr:last-child td {\n  border-bottom: none;\n}\n\n.trdr-table tr:hover td {\n  background-color: var(--bg-tertiary);\n}\n\n/* Wrapper — borda + radius + overflow */\n.trdr-table-wrapper {\n  border: 1px solid var(--border-subtle);\n  border-radius: var(--radius-md);\n  overflow: hidden;\n  overflow-x: auto;\n}\n\n.trdr-table-bordered tr:last-child td {\n  border-bottom: 1px solid var(--border-subtle);\n}\n\n/* Compact — padding reduzido */\n.trdr-table-compact th {\n  padding: var(--spacing-xs) var(--spacing-md);\n}\n\n.trdr-table-compact td {\n  padding: var(--spacing-sm) var(--spacing-md);\n  font-size: 12px;\n}\n\n/* Striped — linhas alternadas */\n.trdr-table-striped tbody tr:nth-child(even) td {\n  background-color: var(--bg-secondary);\n}\n\n.trdr-table-striped tbody tr:nth-child(even):hover td {\n  background-color: var(--bg-tertiary);\n}\n\n/* Sem hover */\n.trdr-table-no-hover tr:hover td {\n  background-color: transparent;\n}",
+        "react": "import Table from '@/components/ui/Table'\n\nexport default function Example() {\n  return (\n    <>\n      {/* Default */}\n      <Table>\n        <thead>\n          <tr><th>Token</th><th>CSS Variable</th><th>Valor</th></tr>\n        </thead>\n        <tbody>\n          <tr><td>bg-primary</td><td>--bg-primary</td><td>#0A0A0A</td></tr>\n          <tr><td>bg-secondary</td><td>--bg-secondary</td><td>#0E0E0E</td></tr>\n        </tbody>\n      </Table>\n\n      {/* Bordered — renderiza wrapper automaticamente */}\n      <Table bordered>\n        <thead>\n          <tr><th>Prop</th><th>Tipo</th><th>Default</th></tr>\n        </thead>\n        <tbody>\n          <tr><td>variant</td><td>enum</td><td>neutral</td></tr>\n        </tbody>\n      </Table>\n\n      {/* Compact + Striped */}\n      <Table compact striped>\n        <thead>\n          <tr><th>Ativo</th><th>Preço</th><th>Var%</th></tr>\n        </thead>\n        <tbody>\n          <tr><td>PETR4</td><td>38.42</td><td>+1.2%</td></tr>\n          <tr><td>VALE3</td><td>62.18</td><td>-0.8%</td></tr>\n        </tbody>\n      </Table>\n\n      {/* Sem hover */}\n      <Table hoverable={false}>\n        <thead>\n          <tr><th>Coluna</th><th>Valor</th></tr>\n        </thead>\n        <tbody>\n          <tr><td>Dado</td><td>123</td></tr>\n        </tbody>\n      </Table>\n    </>\n  )\n}",
+        "prompt": "Implemente o componente Table do Design System TRDR.\n\nESPECIFICAÇÕES PIXEL-PERFECT:\n- width: 100%, border-collapse: collapse\n- Header (th): 11px/600/uppercase, letter-spacing 0.08em, color --content-tertiary, padding --spacing-sm --spacing-lg, border-bottom 1px solid --border-subtle\n- Cell (td): 13px, color --content-secondary, padding --spacing-md --spacing-lg, border-bottom 1px solid --border-subtle, vertical-align middle\n- Last row: sem border-bottom\n- Hover: bg --bg-tertiary com transition\n\nVARIANTES:\n- bordered: wrapper div com border 1px solid --border-subtle, border-radius --radius-md (8px), overflow hidden; last-row mantém borda\n- compact: th padding --spacing-xs --spacing-md, td padding --spacing-sm --spacing-md, font 12px\n- striped: nth-child(even) bg --bg-secondary\n- hoverable: true por padrão, false remove hover\n\nTOKENS OBRIGATÓRIOS:\n- --content-tertiary (#A4A4A4) — header text\n- --content-secondary (#E8E8E8) — cell text\n- --border-subtle (#222222) — borders\n- --bg-tertiary (#141519) — hover\n- --bg-secondary (#0E0E0E) — striped rows\n- --spacing-sm (8px), --spacing-md (12px), --spacing-lg (16px), --spacing-xs (4px)\n- --radius-md (8px) — wrapper bordered\n- Font: var(--font-secondary) — Inter\n\nNOTAS:\n- O componente React aceita children (thead, tbody direto)\n- bordered=true renderiza wrapper automaticamente\n- NUNCA usar hex direto. NUNCA usar --scale-spacing-*."
+      },
+      "dependencies": []
+    },
+    {
+      "slug": "copy-button",
+      "name": "CopyButton",
+      "figmaId": "—",
+      "category": "outros",
+      "description": "Botão de copiar para clipboard com feedback visual. Ícone copy → check ao clicar, com transição de cor. 2 tamanhos (default 28px, sm 20px).",
+      "props": [
+        {
+          "name": "Size",
+          "type": "enum",
+          "values": [
+            "Default",
+            "Small"
+          ]
+        },
+        {
+          "name": "State",
+          "type": "enum",
+          "values": [
+            "Idle",
+            "Copied"
+          ]
+        }
+      ],
+      "dimensions": [
+        {
+          "label": "Default",
+          "width": "28px",
+          "height": "28px"
+        },
+        {
+          "label": "Small",
+          "width": "20px",
+          "height": "20px"
+        }
+      ],
+      "tokens": [
+        {
+          "property": "Icon color",
+          "token": "content-tertiary",
+          "value": "#A4A4A4"
+        },
+        {
+          "property": "Icon hover",
+          "token": "content-primary",
+          "value": "#FFFFFF"
+        },
+        {
+          "property": "BG hover",
+          "token": "surface-secondary",
+          "value": "#222222"
+        },
+        {
+          "property": "Border hover",
+          "token": "border-default",
+          "value": "#4A4A4A"
+        },
+        {
+          "property": "Copied color",
+          "token": "content-success",
+          "value": "#4FE290"
+        },
+        {
+          "property": "Copied BG",
+          "token": "surface-success",
+          "value": "#4FE29014"
+        },
+        {
+          "property": "Copied border",
+          "token": "content-success",
+          "value": "#4FE290"
+        },
+        {
+          "property": "Border radius",
+          "token": "radius-sm",
+          "value": "4px"
+        }
+      ],
+      "anatomy": "[button.trdr-copy-btn .trdr-copy-btn-sm?]\n  └── [svg 14×14 (default) / 12×12 (sm)]\n        ├── idle: ícone copy (rect + path)\n        └── copied: ícone check (polyline)\n\nDefault: 28×28px, border-radius radius-sm, bg transparent, border 1px transparent\nSmall: 20×20px, svg 12×12px\nHover: icon primary, bg surface-secondary, border border-default\nCopied: icon + border content-success, bg surface-success — auto-reset 1.5s",
+      "implemented": true,
+      "code": {
+        "html": "<!-- Default -->\n<button class=\"trdr-copy-btn\" title=\"Copiar\">\n  <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n    <rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\" ry=\"2\" />\n    <path d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\" />\n  </svg>\n</button>\n\n<!-- Small -->\n<button class=\"trdr-copy-btn trdr-copy-btn-sm\" title=\"Copiar\">\n  <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n    <rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\" ry=\"2\" />\n    <path d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\" />\n  </svg>\n</button>\n\n<!-- Estado copiado (class .copied) -->\n<button class=\"trdr-copy-btn copied\" title=\"Copiado!\">\n  <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n    <polyline points=\"20 6 9 17 4 12\" />\n  </svg>\n</button>",
+        "css": ".trdr-copy-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  border-radius: var(--radius-sm);\n  background: transparent;\n  color: var(--content-tertiary);\n  border: 1px solid transparent;\n  transition: all 0.15s ease;\n  cursor: pointer;\n  flex-shrink: 0;\n}\n\n.trdr-copy-btn:hover {\n  color: var(--content-primary);\n  background-color: var(--surface-secondary);\n  border-color: var(--border-default);\n}\n\n.trdr-copy-btn.copied {\n  color: var(--content-success);\n  background-color: var(--surface-success);\n  border-color: var(--content-success);\n}\n\n.trdr-copy-btn-sm {\n  width: 20px;\n  height: 20px;\n}\n\n.trdr-copy-btn-sm svg {\n  width: 12px;\n  height: 12px;\n}",
+        "react": "import CopyButton from '@/components/ui/CopyButton'\n\nexport default function Example() {\n  return (\n    <>\n      {/* Default (28px) */}\n      <CopyButton text=\"--bg-primary\" label=\"Token\" />\n\n      {/* Small (20px) */}\n      <CopyButton text=\"--bg-primary\" label=\"Token\" size=\"sm\" />\n    </>\n  )\n}",
+        "prompt": "Implemente o componente CopyButton do Design System TRDR.\n\nESPECIFICAÇÕES:\n- Default: 28×28px, border-radius var(--radius-sm), bg transparent, border 1px transparent\n- Small: 20×20px, svg 12×12px (classe .trdr-copy-btn-sm)\n- Ícone SVG inline: copy (rect + path) → check (polyline) ao copiar\n- Auto-reset para idle após 1.5s\n\nESTADOS:\n- Idle: cor --content-tertiary\n- Hover: cor --content-primary, bg --surface-secondary, border --border-default\n- Copied: cor --content-success, bg --surface-success, border --content-success\n\nTOKENS OBRIGATÓRIOS:\n- --content-tertiary (#A4A4A4) — ícone idle\n- --content-primary (#FFFFFF) — ícone hover\n- --surface-secondary (#222222) — bg hover\n- --border-default (#4A4A4A) — border hover\n- --content-success (#4FE290) — ícone/border copied\n- --surface-success (#4FE29014) — bg copied\n- --radius-sm (4px)\n\nNOTAS:\n- Usa navigator.clipboard.writeText com fallback document.execCommand\n- NUNCA usar hex direto. NUNCA usar --scale-spacing-*."
+      },
+      "dependencies": []
+    },
+    {
+      "slug": "search-input",
+      "name": "SearchInput",
+      "figmaId": "—",
+      "category": "formulario",
+      "description": "Input de busca com ícone lupa à esquerda. Baseado no TextInput (.trdr-input) com wrapper posicional para o ícone. Modo controlado (value/onChange) ou URL-sync (paramName).",
+      "props": [
+        {
+          "name": "Placeholder",
+          "type": "string",
+          "values": [
+            "Buscar..."
+          ]
+        },
+        {
+          "name": "Mode",
+          "type": "enum",
+          "values": [
+            "Controlled",
+            "URL-sync"
+          ]
+        }
+      ],
+      "dimensions": [
+        {
+          "label": "Default",
+          "width": "100% (fill, max 400px)",
+          "height": "24px"
+        }
+      ],
+      "tokens": [
+        {
+          "property": "Icon color",
+          "token": "content-tertiary",
+          "value": "#A4A4A4"
+        },
+        {
+          "property": "Input BG",
+          "token": "surface-primary",
+          "value": "#141519"
+        },
+        {
+          "property": "Input border",
+          "token": "border-default",
+          "value": "#4A4A4A"
+        },
+        {
+          "property": "Input text",
+          "token": "content-primary",
+          "value": "#FFFFFF"
+        },
+        {
+          "property": "Placeholder",
+          "token": "content-disabled",
+          "value": "#4A4A4A"
+        }
+      ],
+      "anatomy": "[div.trdr-search-input]\n  ├── [svg.trdr-search-input-icon 16×16]  ← absolute, left 10px, vertical-center\n  └── [input.trdr-input]  ← padding-left 36px para dar espaço ao ícone\n\nHerda todos os estilos de .trdr-input (TextInput)",
+      "implemented": true,
+      "code": {
+        "html": "<!-- Search Input -->\n<div class=\"trdr-search-input\">\n  <svg class=\"trdr-search-input-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n    <circle cx=\"11\" cy=\"11\" r=\"8\" />\n    <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\" />\n  </svg>\n  <input type=\"text\" class=\"trdr-input\" placeholder=\"Buscar...\" />\n</div>",
+        "css": ".trdr-search-input {\n  position: relative;\n  width: 100%;\n}\n\n.trdr-search-input-icon {\n  position: absolute;\n  left: 10px;\n  top: 50%;\n  transform: translateY(-50%);\n  color: var(--content-tertiary);\n  pointer-events: none;\n}\n\n.trdr-search-input .trdr-input {\n  padding-left: 36px;\n}",
+        "react": "import SearchInput from '@/components/ui/SearchInput'\n\nexport default function Example() {\n  const [query, setQuery] = useState('')\n\n  return (\n    <>\n      {/* Modo controlado */}\n      <SearchInput\n        value={query}\n        onChange={setQuery}\n        placeholder=\"Buscar tokens...\"\n      />\n\n      {/* Modo URL-sync (Next.js) */}\n      <SearchInput paramName=\"q\" placeholder=\"Buscar...\" />\n    </>\n  )\n}",
+        "prompt": "Implemente o componente SearchInput do Design System TRDR.\n\nESPECIFICAÇÕES:\n- Wrapper: position relative, width 100%\n- Ícone: SVG lupa 16×16, position absolute, left 10px, top 50%, transform translateY(-50%), cor --content-tertiary\n- Input: classe .trdr-input (herda do TextInput), padding-left 36px para não sobrepor ícone\n\nTOKENS OBRIGATÓRIOS:\n- --content-tertiary (#A4A4A4) — ícone lupa\n- Herda tokens de .trdr-input: --surface-primary (bg), --border-default (border), --content-primary (text)\n\nDEPENDÊNCIA: TextInput (.trdr-input deve estar disponível no CSS)\n\nNOTAS:\n- Aceita modo controlado (value + onChange) ou URL-sync (paramName para query params Next.js)\n- NUNCA usar hex direto. NUNCA usar --scale-spacing-*."
+      },
+      "dependencies": [
+        "text-input"
+      ]
+    },
+    {
+      "slug": "stat-card",
+      "name": "StatCard",
+      "figmaId": "—",
+      "category": "outros",
+      "description": "Card de estatística com valor destaque (36px bold), label e descrição opcional. Variante accent com gradient brand e cor de valor em brand.",
+      "props": [
+        {
+          "name": "Accent",
+          "type": "boolean",
+          "values": [
+            "true",
+            "false"
+          ]
+        }
+      ],
+      "dimensions": [
+        {
+          "label": "Default",
+          "width": "auto (fill)",
+          "height": "auto"
+        }
+      ],
+      "tokens": [
+        {
+          "property": "BG",
+          "token": "bg-secondary",
+          "value": "#0E0E0E"
+        },
+        {
+          "property": "Border",
+          "token": "border-subtle",
+          "value": "#222222"
+        },
+        {
+          "property": "Radius",
+          "token": "radius-md",
+          "value": "8px"
+        },
+        {
+          "property": "Padding",
+          "token": "spacing-2xl",
+          "value": "24px"
+        },
+        {
+          "property": "Gap",
+          "token": "spacing-xs",
+          "value": "4px"
+        },
+        {
+          "property": "Value color",
+          "token": "content-primary",
+          "value": "#FFFFFF"
+        },
+        {
+          "property": "Value font",
+          "token": "font-primary",
+          "value": "JetBrains Mono"
+        },
+        {
+          "property": "Label color",
+          "token": "content-secondary",
+          "value": "#E8E8E8"
+        },
+        {
+          "property": "Desc color",
+          "token": "content-tertiary",
+          "value": "#A4A4A4"
+        },
+        {
+          "property": "Accent border",
+          "token": "action-brand-alpha",
+          "value": "#00D4FF29"
+        },
+        {
+          "property": "Accent value",
+          "token": "action-brand-default",
+          "value": "#00D4FF"
+        }
+      ],
+      "anatomy": "[div.trdr-stat-card .trdr-stat-card-accent?]\n  ├── [div.trdr-stat-value]  ← font-primary 36px/600, primary (accent: brand)\n  ├── [div.trdr-stat-label]  ← 13px/500, secondary\n  └── [div.trdr-stat-desc?]  ← 12px, tertiary, margin-top spacing-xs\n\nDefault: bg-secondary, border 1px subtle, radius-md, padding spacing-2xl, flex-col gap spacing-xs\nAccent: border action-brand-alpha, bg gradient 135deg brand-alpha → bg-secondary",
+      "implemented": true,
+      "code": {
+        "html": "<!-- Default -->\n<div class=\"trdr-stat-card\">\n  <div class=\"trdr-stat-value\">292</div>\n  <div class=\"trdr-stat-label\">Tokens</div>\n  <div class=\"trdr-stat-desc\">Primitivos + semânticos</div>\n</div>\n\n<!-- Accent -->\n<div class=\"trdr-stat-card trdr-stat-card-accent\">\n  <div class=\"trdr-stat-value\">20</div>\n  <div class=\"trdr-stat-label\">Componentes</div>\n  <div class=\"trdr-stat-desc\">Implementados com código</div>\n</div>",
+        "css": ".trdr-stat-card {\n  background-color: var(--bg-secondary);\n  border: 1px solid var(--border-subtle);\n  border-radius: var(--radius-md);\n  padding: var(--spacing-2xl);\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-xs);\n}\n\n.trdr-stat-card-accent {\n  border-color: var(--action-brand-alpha);\n  background: linear-gradient(135deg, var(--action-brand-alpha) 0%, var(--bg-secondary) 100%);\n}\n\n.trdr-stat-value {\n  font-family: var(--font-primary);\n  font-size: 36px;\n  font-weight: 600;\n  color: var(--content-primary);\n  line-height: 1;\n}\n\n.trdr-stat-card-accent .trdr-stat-value {\n  color: var(--action-brand-default);\n}\n\n.trdr-stat-label {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--content-secondary);\n}\n\n.trdr-stat-desc {\n  font-size: 12px;\n  color: var(--content-tertiary);\n  margin-top: var(--spacing-xs);\n}",
+        "react": "import StatCard from '@/components/ui/StatCard'\n\nexport default function Example() {\n  return (\n    <>\n      {/* Default */}\n      <StatCard value={292} label=\"Tokens\" description=\"Primitivos + semânticos\" />\n\n      {/* Accent */}\n      <StatCard value={20} label=\"Componentes\" description=\"Implementados com código\" accent />\n    </>\n  )\n}",
+        "prompt": "Implemente o componente StatCard do Design System TRDR.\n\nESPECIFICAÇÕES:\n- Container: bg --bg-secondary, border 1px --border-subtle, radius --radius-md (8px), padding --spacing-2xl (24px), flex-col, gap --spacing-xs (4px)\n- Value: font --font-primary, 36px/600, cor --content-primary, line-height 1\n- Label: 13px/500, cor --content-secondary\n- Desc: 12px, cor --content-tertiary, margin-top --spacing-xs\n\nVARIANTE ACCENT:\n- border-color: --action-brand-alpha (#00D4FF29)\n- bg: linear-gradient(135deg, --action-brand-alpha 0%, --bg-secondary 100%)\n- Value cor: --action-brand-default (#00D4FF)\n\nTOKENS OBRIGATÓRIOS:\n- --bg-secondary (#0E0E0E), --border-subtle (#222222), --radius-md (8px), --spacing-2xl (24px), --spacing-xs (4px)\n- --content-primary (#FFFFFF), --content-secondary (#E8E8E8), --content-tertiary (#A4A4A4)\n- --action-brand-alpha (#00D4FF29), --action-brand-default (#00D4FF)\n- --font-primary (JetBrains Mono)\n\nNOTAS:\n- NUNCA usar hex direto. NUNCA usar --scale-spacing-*."
+      },
+      "dependencies": []
+    },
+    {
+      "slug": "sidebar",
+      "name": "Sidebar",
+      "figmaId": "—",
+      "category": "navegacao",
+      "description": "Navegação lateral genérica com grupos de itens, ícones Material Symbols, header com logo e footer com versão. Width 240px, sticky top 0, height 100vh.",
+      "props": [
+        {
+          "name": "Width",
+          "type": "enum",
+          "values": [
+            "240px (default)"
+          ]
+        }
+      ],
+      "dimensions": [
+        {
+          "label": "Default",
+          "width": "240px",
+          "height": "100vh"
+        },
+        {
+          "label": "Item",
+          "width": "100%",
+          "height": "32px"
+        },
+        {
+          "label": "Icon",
+          "width": "20px",
+          "height": "20px"
+        }
+      ],
+      "tokens": [
+        {
+          "property": "BG",
+          "token": "bg-secondary",
+          "value": "#0E0E0E"
+        },
+        {
+          "property": "Border",
+          "token": "border-subtle",
+          "value": "#222222"
+        },
+        {
+          "property": "Group label",
+          "token": "content-brand",
+          "value": "#00D4FF"
+        },
+        {
+          "property": "Item text",
+          "token": "content-secondary",
+          "value": "#E8E8E8"
+        },
+        {
+          "property": "Item hover text",
+          "token": "content-primary",
+          "value": "#FFFFFF"
+        },
+        {
+          "property": "Item hover BG",
+          "token": "surface-secondary",
+          "value": "#222222"
+        },
+        {
+          "property": "Item active text",
+          "token": "content-primary",
+          "value": "#FFFFFF"
+        },
+        {
+          "property": "Item active BG",
+          "token": "surface-secondary",
+          "value": "#222222"
+        },
+        {
+          "property": "Icon color",
+          "token": "content-tertiary",
+          "value": "#A4A4A4"
+        },
+        {
+          "property": "Icon active",
+          "token": "content-secondary",
+          "value": "#E8E8E8"
+        },
+        {
+          "property": "Version BG",
+          "token": "surface-brand",
+          "value": "#00D4FF29"
+        },
+        {
+          "property": "Version text",
+          "token": "content-brand",
+          "value": "#00D4FF"
+        },
+        {
+          "property": "Version label",
+          "token": "content-tertiary",
+          "value": "#A4A4A4"
+        }
+      ],
+      "anatomy": "[aside.trdr-sidebar]\n  ├── [div.trdr-sidebar-header]  ← logo, padding 32px, border-bottom\n  ├── [nav.trdr-sidebar-nav]  ← flex-1, padding 32px 24px, gap 32px\n  │     └── [div.trdr-sidebar-group] × N\n  │           ├── [span.trdr-sidebar-group-label]  ← 12px/400, brand, uppercase\n  │           └── [ul.trdr-sidebar-list]\n  │                 └── [li > a.trdr-sidebar-item .trdr-sidebar-item-active?]\n  │                       ├── [span.trdr-sidebar-icon]  ← Material Symbols 20px\n  │                       └── label text\n  └── [div.trdr-sidebar-footer]  ← border-top, flex, gap 8px\n        ├── [span.trdr-sidebar-version]  ← mono 11px, brand bg/text\n        └── [span.trdr-sidebar-version-label]  ← 11px, tertiary\n\nItem: height 32px, padding 0 8px, gap 8px, radius 4px, Inter 14px/400\nHover: text primary, bg surface-secondary\nActive: mesmos estilos de hover + icon secondary",
+      "implemented": true,
+      "code": {
+        "html": "<aside class=\"trdr-sidebar\">\n  <div class=\"trdr-sidebar-header\">\n    <img src=\"/logo.svg\" alt=\"Logo\" width=\"120\" />\n  </div>\n\n  <nav class=\"trdr-sidebar-nav\">\n    <div class=\"trdr-sidebar-group\">\n      <span class=\"trdr-sidebar-group-label\">Visão Geral</span>\n      <ul class=\"trdr-sidebar-list\">\n        <li>\n          <a href=\"/\" class=\"trdr-sidebar-item trdr-sidebar-item-active\">\n            <span class=\"trdr-sidebar-icon\">home</span>\n            Home\n          </a>\n        </li>\n      </ul>\n    </div>\n\n    <div class=\"trdr-sidebar-group\">\n      <span class=\"trdr-sidebar-group-label\">Tokens</span>\n      <ul class=\"trdr-sidebar-list\">\n        <li>\n          <a href=\"/tokens\" class=\"trdr-sidebar-item\">\n            <span class=\"trdr-sidebar-icon\">grain</span>\n            Primitivos\n          </a>\n        </li>\n        <li>\n          <a href=\"/semanticos\" class=\"trdr-sidebar-item\">\n            <span class=\"trdr-sidebar-icon\">join_left</span>\n            Semânticos\n          </a>\n        </li>\n      </ul>\n    </div>\n  </nav>\n\n  <div class=\"trdr-sidebar-footer\">\n    <span class=\"trdr-sidebar-version\">v1.5</span>\n    <span class=\"trdr-sidebar-version-label\">designtokens.md</span>\n  </div>\n</aside>",
+        "css": ".trdr-sidebar {\n  position: sticky;\n  top: 0;\n  height: 100vh;\n  width: 240px;\n  background-color: var(--bg-secondary);\n  border-right: 1px solid var(--border-subtle);\n  display: flex;\n  flex-direction: column;\n  overflow-y: auto;\n  overflow-x: hidden;\n  flex-shrink: 0;\n}\n\n.trdr-sidebar-header {\n  padding: 32px;\n  border-bottom: 1px solid var(--border-subtle);\n  flex-shrink: 0;\n}\n\n.trdr-sidebar-nav {\n  flex: 1;\n  padding: 32px 24px;\n  display: flex;\n  flex-direction: column;\n  gap: 32px;\n  overflow-y: auto;\n}\n\n.trdr-sidebar-group {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.trdr-sidebar-group-label {\n  font-family: var(--font-secondary);\n  font-size: 12px;\n  font-weight: 400;\n  color: var(--content-brand);\n  text-transform: uppercase;\n  letter-spacing: 0.02em;\n}\n\n.trdr-sidebar-list {\n  list-style: none;\n  display: flex;\n  flex-direction: column;\n  gap: 0;\n  margin: 0;\n  padding: 0;\n}\n\n.trdr-sidebar-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  height: 32px;\n  padding: 0 8px;\n  font-family: var(--font-secondary);\n  font-size: 14px;\n  font-weight: 400;\n  color: var(--content-secondary);\n  border-radius: 4px;\n  text-decoration: none;\n  transition: color 0.12s ease, background-color 0.12s ease;\n}\n\n.trdr-sidebar-item:hover {\n  color: var(--content-primary);\n  background-color: var(--surface-secondary);\n}\n\n.trdr-sidebar-item-active {\n  color: var(--content-primary);\n  background-color: var(--surface-secondary);\n}\n\n.trdr-sidebar-icon {\n  font-family: 'Material Symbols Outlined';\n  font-weight: 300;\n  font-style: normal;\n  font-size: 20px;\n  line-height: 20px;\n  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20;\n  color: var(--content-tertiary);\n  flex-shrink: 0;\n  user-select: none;\n}\n\n.trdr-sidebar-item-active .trdr-sidebar-icon {\n  color: var(--content-secondary);\n}\n\n.trdr-sidebar-footer {\n  padding: 16px 24px;\n  border-top: 1px solid var(--border-subtle);\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.trdr-sidebar-version {\n  font-family: var(--font-mono);\n  font-size: 11px;\n  color: var(--content-brand);\n  background-color: var(--surface-brand);\n  padding: 2px 6px;\n  border-radius: 4px;\n}\n\n.trdr-sidebar-version-label {\n  font-size: 11px;\n  color: var(--content-tertiary);\n}",
+        "react": "// A Sidebar do Hub usa a versão com rotas hardcoded.\n// Para uso genérico, passe groups como prop:\n\ninterface SidebarGroup {\n  label: string\n  items: Array<{ href: string; label: string; icon: string; active?: boolean }>\n}\n\nfunction Sidebar({ groups }: { groups: SidebarGroup[] }) {\n  return (\n    <aside className=\"trdr-sidebar\">\n      <div className=\"trdr-sidebar-header\">\n        <img src=\"/logo.svg\" alt=\"Logo\" width={120} />\n      </div>\n      <nav className=\"trdr-sidebar-nav\">\n        {groups.map(group => (\n          <div key={group.label} className=\"trdr-sidebar-group\">\n            <span className=\"trdr-sidebar-group-label\">{group.label}</span>\n            <ul className=\"trdr-sidebar-list\">\n              {group.items.map(item => (\n                <li key={item.href}>\n                  <a\n                    href={item.href}\n                    className={`trdr-sidebar-item ${item.active ? 'trdr-sidebar-item-active' : ''}`}\n                  >\n                    <span className=\"trdr-sidebar-icon\">{item.icon}</span>\n                    {item.label}\n                  </a>\n                </li>\n              ))}\n            </ul>\n          </div>\n        ))}\n      </nav>\n      <div className=\"trdr-sidebar-footer\">\n        <span className=\"trdr-sidebar-version\">v1.0</span>\n        <span className=\"trdr-sidebar-version-label\">app</span>\n      </div>\n    </aside>\n  )\n}",
+        "prompt": "Implemente o componente Sidebar do Design System TRDR.\n\nESPECIFICAÇÕES:\n- Container: sticky top 0, height 100vh, width 240px, bg --bg-secondary, border-right 1px --border-subtle, flex-col, overflow-y auto\n- Header: padding 32px, border-bottom 1px --border-subtle (logo aqui)\n- Nav: flex 1, padding 32px 24px, gap 32px entre grupos\n- Group label: Inter 12px/400, --content-brand, uppercase, letter-spacing 0.02em\n- Item: flex, gap 8px, height 32px, padding 0 8px, Inter 14px/400, --content-secondary, radius 4px\n- Item hover/active: text --content-primary, bg --surface-secondary\n- Icon: Material Symbols 20px, --content-tertiary (active: --content-secondary)\n- Footer: padding 16px 24px, border-top, flex, gap 8px\n- Version badge: mono 11px, --content-brand, bg --surface-brand, padding 2px 6px, radius 4px\n\nTOKENS OBRIGATÓRIOS:\n- --bg-secondary (#0E0E0E), --border-subtle (#222222), --surface-secondary (#222222)\n- --content-brand (#00D4FF), --content-secondary (#E8E8E8), --content-primary (#FFFFFF), --content-tertiary (#A4A4A4)\n- --surface-brand (#00D4FF29)\n- --font-secondary (Inter), --font-mono\n- Font Material Symbols Outlined para ícones\n\nNOTAS:\n- Aceitar groups como prop para ser genérico (não hardcodar nav items)\n- NUNCA usar hex direto. NUNCA usar --scale-spacing-*."
+      },
+      "dependencies": []
     }
   ]
 }

package/plugins/trdr-design-system/skills/trdr-ds/references/tokens.css

@@ -1,7 +1,7 @@
 /*
  * SNAPSHOT — TRDR Design Tokens
- * Sincronizado de: https://trdr.mrocontent.com.br/tokens.css
- * Em: 2026-05-13T15:33:35.454Z
+ * Sincronizado de: ../trdr-design-hub
+ * Em: 2026-05-13T18:53:59.317Z
  * Não edite manualmente — atualize via "npm run sync-tokens"
  */