trdr-ds-install 1.9.0 → 2.0.0

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

@@ -0,0 +1,36 @@
+{
+  "slug": "abas",
+  "name": "Abas",
+  "figmaId": "253:2861",
+  "category": "navegacao",
+  "description": "Barra de abas horizontal. Aba ativa com fundo surface.secondary.",
+  "props": [],
+  "dimensions": [
+    {
+      "label": "Default",
+      "width": "476px",
+      "height": "45px"
+    }
+  ],
+  "tokens": [
+    {
+      "property": "Tab ativa BG",
+      "token": "action.secondary.default",
+      "value": "#4A4A4A"
+    },
+    {
+      "property": "Tab inativa text",
+      "token": "content.tertiary",
+      "value": "#A4A4A4"
+    }
+  ],
+  "notes": "Estilo 2 de abas: fundo na tab ativa. Diferente do header-window (bottom-border) e pill tabs.",
+  "implemented": true,
+  "code": {
+    "html": "<div class=\"trdr-abas\">\n  <div class=\"trdr-abas-item trdr-abas-item-active\">\n    <span>Todos os tokens</span>\n  </div>\n  <div class=\"trdr-abas-item\">\n    <span>Primitivos</span>\n  </div>\n  <div class=\"trdr-abas-item\">\n    <span>Semânticos</span>\n  </div>\n  <div class=\"trdr-abas-item\">\n    <span>Scale</span>\n  </div>\n  <div class=\"trdr-abas-item\">\n    <span>Tipografia</span>\n  </div>\n</div>",
+    "css": ".trdr-abas {\n  display: flex;\n  align-items: stretch;\n  border-bottom: 1px solid var(--border-subtle);  /* #222222 */\n  overflow-x: auto;\n  height: 45px;\n}\n\n.trdr-abas-item {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  padding: 0 12px;\n  cursor: pointer;\n  font-family: var(--font-secondary);\n  font-size: 16px;\n  font-weight: 500;\n  color: var(--content-tertiary);      /* #A4A4A4 */\n  white-space: nowrap;\n  transition: color 0.15s ease;\n}\n\n.trdr-abas-item:hover { color: var(--content-secondary); }\n\n.trdr-abas-item-active {\n  color: var(--content-primary);       /* #FFFFFF */\n}\n\n.trdr-abas-item-active::after {\n  content: '';\n  position: absolute;\n  bottom: 0; left: 0; right: 0;\n  height: 2px;\n  background-color: var(--action-brand-active);  /* #007D99 */\n}",
+    "react": "import { useState } from 'react'\n\nconst tabs = ['Todos os tokens', 'Primitivos', 'Semânticos', 'Scale', 'Tipografia']\n\nexport default function Example() {\n  const [active, setActive] = useState(0)\n\n  return (\n    <div className=\"trdr-abas\">\n      {tabs.map((tab, i) => (\n        <div\n          key={tab}\n          className={`trdr-abas-item ${i === active ? 'trdr-abas-item-active' : ''}`}\n          onClick={() => setActive(i)}\n        >\n          {tab}\n        </div>\n      ))}\n    </div>\n  )\n}",
+    "prompt": "Implemente o componente Abas do Design System TRDR.\n\nESPECIFICAÇÕES PIXEL-PERFECT:\n- Container (.trdr-abas): flex, align-items stretch, border-bottom 1px --border-subtle (#222222), height 45px, overflow-x auto\n- Item (.trdr-abas-item): position relative, padding 0 12px, flex col centered, font 16px/500 Inter\n- Tab inativa: color --content-tertiary (#A4A4A4), hover: --content-secondary (#E8E8E8)\n- Tab ativa (.trdr-abas-item-active): color --content-primary (#FFFFFF)\n- Indicador ativo: ::after position absolute, bottom 0, left 0, right 0, height 2px, bg --action-brand-active (#007D99)\n- Largura total: 476px | Transição: color 0.15s ease"
+  },
+  "dependencies": []
+}

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

@@ -0,0 +1,139 @@
+{
+  "slug": "badge",
+  "name": "Badge",
+  "figmaId": "2316:8953",
+  "category": "outros",
+  "description": "Badge de status com dot opcional. 5 variantes (Neutral, Brand, Success, Warning, Archived) e 2 tamanhos (default 12px/16px, large 14px/25px). Border-radius 5px.",
+  "props": [
+    {
+      "name": "Variant",
+      "type": "enum",
+      "values": [
+        "Neutral",
+        "Brand",
+        "Success",
+        "Warning",
+        "Archived"
+      ]
+    },
+    {
+      "name": "Size",
+      "type": "enum",
+      "values": [
+        "Default",
+        "Large"
+      ]
+    },
+    {
+      "name": "Dot",
+      "type": "boolean",
+      "values": [
+        "true",
+        "false"
+      ]
+    }
+  ],
+  "dimensions": [
+    {
+      "label": "Default (sm)",
+      "width": "auto (hug)",
+      "height": "16px"
+    },
+    {
+      "label": "Large",
+      "width": "auto (hug)",
+      "height": "25px"
+    },
+    {
+      "label": "Dot icon",
+      "width": "6px",
+      "height": "6px"
+    }
+  ],
+  "tokens": [
+    {
+      "property": "BG Neutral",
+      "token": "surface-secondary",
+      "value": "#222222"
+    },
+    {
+      "property": "BG Brand",
+      "token": "surface-brand",
+      "value": "#00D4FF29"
+    },
+    {
+      "property": "BG Success",
+      "token": "surface-success",
+      "value": "#4FE29014"
+    },
+    {
+      "property": "BG Warning",
+      "token": "surface-warning",
+      "value": "#FFCC4014"
+    },
+    {
+      "property": "BG Archived",
+      "token": "surface-tertiary",
+      "value": "#1A1A1A"
+    },
+    {
+      "property": "Text Neutral",
+      "token": "content-tertiary",
+      "value": "#A4A4A4"
+    },
+    {
+      "property": "Text Brand",
+      "token": "content-brand",
+      "value": "#00D4FF"
+    },
+    {
+      "property": "Text Success",
+      "token": "content-success",
+      "value": "#4FE290"
+    },
+    {
+      "property": "Text Warning",
+      "token": "content-warning",
+      "value": "#FFD35A"
+    },
+    {
+      "property": "Text Archived",
+      "token": "content-disabled",
+      "value": "#4A4A4A"
+    },
+    {
+      "property": "Border Neutral",
+      "token": "border-subtle",
+      "value": "#222222"
+    },
+    {
+      "property": "Border Brand",
+      "token": "content-brand",
+      "value": "#00D4FF"
+    },
+    {
+      "property": "Border Success",
+      "token": "content-success",
+      "value": "#4FE290"
+    },
+    {
+      "property": "Border Warning",
+      "token": "content-warning",
+      "value": "#FFD35A"
+    },
+    {
+      "property": "Border Archived",
+      "token": "border-disabled",
+      "value": "#777777"
+    }
+  ],
+  "anatomy": "[span.trdr-badge .trdr-badge-{variant} .trdr-badge-lg? .trdr-badge-dot?]\n  └── [::before dot 6×6px border-radius full, cor = currentColor] (se .trdr-badge-dot)\n  └── [texto label]\n\nContainer: inline-flex, align-items center, border-radius 5px, border 1px solid\nDefault (sm): height 16px, padding 0 4px, Inter 12px/500, letter-spacing 0.2px\nLarge: height auto (~25px), padding 4px uniforme, Inter 14px/400, letter-spacing 0, line-height 1.2",
+  "implemented": true,
+  "code": {
+    "html": "<!-- Neutral (default) -->\n<span class=\"trdr-badge trdr-badge-neutral\">Badge</span>\n\n<!-- Brand com dot -->\n<span class=\"trdr-badge trdr-badge-brand trdr-badge-dot\">Active</span>\n\n<!-- Success com dot -->\n<span class=\"trdr-badge trdr-badge-success trdr-badge-dot\">Merged</span>\n\n<!-- Warning -->\n<span class=\"trdr-badge trdr-badge-warning\">Atenção</span>\n\n<!-- Archived com dot -->\n<span class=\"trdr-badge trdr-badge-archived trdr-badge-dot\">Archived</span>\n\n<!-- Large -->\n<span class=\"trdr-badge trdr-badge-brand trdr-badge-lg trdr-badge-dot\">Active</span>\n<span class=\"trdr-badge trdr-badge-success trdr-badge-lg trdr-badge-dot\">Merged</span>\n<span class=\"trdr-badge trdr-badge-neutral trdr-badge-lg\">Badge</span>",
+    "css": ".trdr-badge {\n  display: inline-flex;\n  align-items: center;\n  height: 16px;\n  padding: 0 4px;\n  border-radius: 5px;                         /* fixo, não token */\n  font-family: var(--font-secondary);          /* Inter */\n  font-size: 12px;\n  font-weight: 500;\n  letter-spacing: 0.2px;\n  line-height: 1;\n  white-space: nowrap;\n}\n\n/* Tamanho Large (Figma \"Badge large\") */\n.trdr-badge-lg {\n  font-size: 14px;\n  font-weight: 400;\n  letter-spacing: 0;\n  line-height: 1.2;\n  padding: 4px;                                /* 4px uniforme */\n  height: auto;                                /* ~25px, hug content */\n}\n\n/* --- Variantes --- */\n.trdr-badge-neutral {\n  background-color: var(--surface-secondary);  /* #222222 */\n  color: var(--content-tertiary);              /* #A4A4A4 */\n  border: 1px solid var(--border-subtle);      /* #222222 */\n}\n\n.trdr-badge-brand {\n  background-color: var(--surface-brand);      /* #00D4FF29 */\n  color: var(--content-brand);                 /* #00D4FF */\n  border: 1px solid var(--content-brand);      /* #00D4FF */\n}\n\n.trdr-badge-success {\n  background-color: var(--surface-success);    /* #4FE29014 */\n  color: var(--content-success);               /* #4FE290 */\n  border: 1px solid var(--content-success);    /* #4FE290 */\n}\n\n.trdr-badge-warning {\n  background-color: var(--surface-warning);    /* #FFCC4014 */\n  color: var(--content-warning);               /* #FFD35A */\n  border: 1px solid var(--content-warning);    /* #FFD35A */\n}\n\n.trdr-badge-archived {\n  background-color: var(--surface-tertiary);   /* #1A1A1A */\n  color: var(--content-disabled);              /* #4A4A4A */\n  border: 1px solid var(--border-disabled);    /* #777777 */\n}\n\n/* Dot indicator (pseudo-element) */\n.trdr-badge-dot::before {\n  content: '';\n  display: inline-block;\n  width: 6px;\n  height: 6px;\n  border-radius: var(--radius-full);           /* 9999px */\n  background-color: currentColor;\n}",
+    "react": "import Badge from '@/components/ui/Badge'\n\nexport default function Example() {\n  return (\n    <>\n      {/* Variantes default (12px) */}\n      <Badge variant=\"neutral\">Badge</Badge>\n      <Badge variant=\"brand\" dot>Active</Badge>\n      <Badge variant=\"success\" dot>Merged</Badge>\n      <Badge variant=\"warning\">Atenção</Badge>\n      <Badge variant=\"archived\" dot>Archived</Badge>\n\n      {/* Variantes large (14px) — match do Figma \"Badge large\" */}\n      <Badge variant=\"brand\" size=\"lg\" dot>Active</Badge>\n      <Badge variant=\"success\" size=\"lg\" dot>Merged</Badge>\n      <Badge variant=\"neutral\" size=\"lg\">Badge</Badge>\n      <Badge variant=\"archived\" size=\"lg\" dot>Archived</Badge>\n    </>\n  )\n}",
+    "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": []
+}

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

@@ -0,0 +1,121 @@
+{
+  "slug": "boleta",
+  "name": "Painel de Negociações (Boleta)",
+  "figmaId": "903:1853",
+  "category": "trading",
+  "implemented": true,
+  "description": "Painel lateral de entrada de ordens. Inclui segmented control Avançado/Simples, campos de estratégia, quantidade e preço, botões de compra/venda por tipo de ordem, ação Zerar e resumo de posição.",
+  "props": [
+    {
+      "name": "versao",
+      "type": "enum",
+      "values": [
+        "avancado",
+        "simples"
+      ]
+    }
+  ],
+  "dimensions": [
+    {
+      "label": "Largura fixa",
+      "width": "283px",
+      "height": "—"
+    },
+    {
+      "label": "Abas (header)",
+      "width": "100%",
+      "height": "45px"
+    },
+    {
+      "label": "Input de campo",
+      "width": "100%",
+      "height": "32px"
+    },
+    {
+      "label": "Botão de ação",
+      "width": "flex-1",
+      "height": "32–34px"
+    }
+  ],
+  "tokens": [
+    {
+      "property": "Comprar BG",
+      "token": "context.trading.long.default",
+      "value": "rgba(79,226,144,0.08)"
+    },
+    {
+      "property": "Comprar hover BG",
+      "token": "context.trading.long.hover",
+      "value": "rgba(79,226,144,0.12)"
+    },
+    {
+      "property": "Comprar texto",
+      "token": "context.trading.long.text",
+      "value": "#4FE290"
+    },
+    {
+      "property": "Vender BG",
+      "token": "context.trading.short.default",
+      "value": "rgba(243,79,69,0.08)"
+    },
+    {
+      "property": "Vender hover BG",
+      "token": "context.trading.short.hover",
+      "value": "rgba(243,79,69,0.12)"
+    },
+    {
+      "property": "Vender texto",
+      "token": "context.trading.short.text",
+      "value": "#F34F45"
+    },
+    {
+      "property": "Zerar borda/texto",
+      "token": "color.orange.500",
+      "value": "#FF6400"
+    },
+    {
+      "property": "Zerar hover BG",
+      "token": "context.trading.stop.alpha",
+      "value": "rgba(255,100,0,0.08)"
+    },
+    {
+      "property": "Segment control BG",
+      "token": "surface.secondary",
+      "value": "#222222"
+    },
+    {
+      "property": "Segment ativo BG",
+      "token": "action.secondary.default",
+      "value": "#4A4A4A"
+    },
+    {
+      "property": "Input BG",
+      "token": "surface.primary",
+      "value": "#4A4A4A"
+    },
+    {
+      "property": "Borda seção",
+      "token": "border.subtle",
+      "value": "#222222"
+    },
+    {
+      "property": "Posição \"Zerado\"",
+      "token": "content.success",
+      "value": "#4FE290"
+    }
+  ],
+  "anatomy": "Painel de 283px de largura com border-left sutil. 3 seções: Abas (45px, segmented control pill), Container (padding 8px, gap 16px — linhas de info, inputs 32px, quick buttons e checkbox TP/SL), Botões (padding 8px, gap 8px — rows de Compra+Venda, Zerar, Cancel, grupo Cancelar/Inverter, resumo Posição).",
+  "code": {
+    "html": "<!-- Painel de Negociações (Boleta) -->\n<div class=\"trdr-boleta\">\n\n  <!-- Abas -->\n  <div class=\"trdr-boleta-abas\">\n    <div class=\"trdr-boleta-segment-control\">\n      <button class=\"trdr-boleta-segment trdr-boleta-segment-active\">Avançado</button>\n      <button class=\"trdr-boleta-segment\">Simples</button>\n    </div>\n  </div>\n\n  <!-- Campos -->\n  <div class=\"trdr-boleta-container\">\n    <!-- Estratégia -->\n    <div style=\"display:flex;align-items:center;justify-content:space-between\">\n      <span class=\"trdr-boleta-label\">Estratégia</span>\n      <span style=\"color:var(--content-primary);font-size:12px;font-weight:500\">Manejo ▾</span>\n    </div>\n\n    <!-- Disponível -->\n    <div style=\"display:flex;align-items:center;justify-content:space-between\">\n      <span class=\"trdr-boleta-label\">Disp.</span>\n      <span style=\"color:var(--content-primary);font-size:12px;font-weight:500\">258.010.200,00 USDT</span>\n    </div>\n\n    <!-- Quantidade -->\n    <div style=\"display:flex;flex-direction:column;gap:8px\">\n      <span class=\"trdr-boleta-label\">Quantidade</span>\n      <input class=\"trdr-boleta-input\" placeholder=\"Inserir\" />\n      <div style=\"display:flex;gap:4px\">\n        <button class=\"trdr-boleta-quick-btn\">1</button>\n        <button class=\"trdr-boleta-quick-btn\">2</button>\n        <button class=\"trdr-boleta-quick-btn\">3</button>\n      </div>\n    </div>\n\n    <!-- Preço da Ordem -->\n    <div style=\"display:flex;flex-direction:column;gap:8px\">\n      <span class=\"trdr-boleta-label\">Preço da Ordem</span>\n      <input class=\"trdr-boleta-input\" value=\"0,00\" />\n    </div>\n\n    <!-- TP/SL -->\n    <label style=\"display:flex;align-items:center;gap:8px;cursor:pointer\">\n      <input type=\"checkbox\" style=\"display:none\" />\n      <span style=\"width:16px;height:16px;border:1px solid var(--border-default);border-radius:5px;background:var(--surface-tertiary);flex-shrink:0;display:block\"></span>\n      <span style=\"font-size:12px;font-weight:500;color:var(--content-primary)\">TP/SL</span>\n    </label>\n  </div>\n\n  <!-- Botões -->\n  <div class=\"trdr-boleta-botoes\">\n    <div style=\"display:flex;gap:8px\">\n      <button class=\"trdr-boleta-btn-long\">CP Limite</button>\n      <button class=\"trdr-boleta-btn-short\">VD Limite</button>\n    </div>\n    <div style=\"display:flex;gap:8px\">\n      <button class=\"trdr-boleta-btn-long\">CP Mercado</button>\n      <button class=\"trdr-boleta-btn-short\">VD Mercado</button>\n    </div>\n    <div style=\"display:flex;gap:8px\">\n      <button class=\"trdr-boleta-btn-long\">Bid</button>\n      <button class=\"trdr-boleta-btn-short\">Ask</button>\n    </div>\n    <button class=\"trdr-boleta-btn-zerar\">Zerar (5)</button>\n    <button class=\"trdr-boleta-btn-ghost\">Cancelar ordens (2) + Zerar (5)</button>\n    <div style=\"display:flex;gap:8px\">\n      <button class=\"trdr-boleta-btn-ghost\" style=\"width:auto;flex-shrink:0\">Cancelar Ordem</button>\n      <button class=\"trdr-boleta-btn-ghost\" style=\"flex:1;min-width:100px\">Inverter</button>\n    </div>\n  </div>\n\n</div>",
+    "css": "/* Boleta — variáveis usadas */\n/* --context-trading-long-default: rgba(79,226,144,0.08)  */\n/* --context-trading-long-hover:   rgba(79,226,144,0.12)  */\n/* --context-trading-long-text:    #4FE290               */\n/* --context-trading-short-default: rgba(243,79,69,0.08)  */\n/* --context-trading-short-hover:   rgba(243,79,69,0.12)  */\n/* --context-trading-short-text:    #F34F45               */\n/* --color-orange-500:             #FF6400  (Zerar)        */\n/* --context-trading-stop-alpha:   rgba(255,100,0,0.08)   */\n/* --surface-secondary:            #222222                */\n/* --action-secondary-default:     #4A4A4A                */\n/* --surface-primary:              #4A4A4A                */\n/* --border-subtle:                #222222                */\n/* --content-success:              #4FE290                */\n\n.trdr-boleta { width: 283px; border-left: 1px solid var(--border-subtle); }\n\n.trdr-boleta-btn-long {\n  flex: 1;\n  background: var(--context-trading-long-default);\n  border-radius: var(--radius-md);\n  padding: 8px;\n  border: none; cursor: pointer;\n  font-size: 14px; font-weight: 600;\n  color: var(--context-trading-long-text);\n  transition: background 0.15s ease;\n}\n.trdr-boleta-btn-long:hover { background: var(--context-trading-long-hover); }\n\n.trdr-boleta-btn-short {\n  flex: 1;\n  background: var(--context-trading-short-default);\n  border-radius: var(--radius-md);\n  padding: 8px 12px;\n  border: none; cursor: pointer;\n  font-size: 14px; font-weight: 600;\n  color: var(--context-trading-short-text);\n  transition: background 0.15s ease;\n}\n.trdr-boleta-btn-short:hover { background: var(--context-trading-short-hover); }\n\n.trdr-boleta-btn-zerar {\n  width: 100%; height: 32px;\n  border: 1px solid var(--color-orange-500);\n  border-radius: var(--radius-md);\n  background: transparent; cursor: pointer;\n  font-size: 14px; font-weight: 600;\n  color: var(--color-orange-500);\n  transition: background 0.15s ease;\n}\n.trdr-boleta-btn-zerar:hover { background: var(--context-trading-stop-alpha); }",
+    "react": "import Boleta from '@/components/ui/Boleta'\n// Sub-componentes usados internamente:\n// import SegmentedControl from '@/components/ui/SegmentedControl'\n// import TextInput from '@/components/ui/TextInput'\n// import Checkbox from '@/components/ui/Checkbox'\n// import Button from '@/components/ui/Button'\n// import Dropdown from '@/components/ui/Dropdown'\n\n// Versão padrão (Avançado)\n<Boleta />\n\n// Versão Simples\n<Boleta versao=\"simples\" />\n\n// Com className customizado\n<Boleta versao=\"avancado\" className=\"meu-override\" />",
+    "prompt": "Implemente o componente Boleta do Design System TRDR — painel lateral de negociações de 283px de largura.\n\nSUB-COMPONENTES OBRIGATÓRIOS (importar do DS):\n- SegmentedControl — abas Avançado/Simples\n- TextInput (size=\"large\") — campos Quantidade e Preço da Ordem\n- Checkbox — toggle TP/SL\n- Button (variant=\"long\"/\"short\"/\"ghost\") — botões de ação de compra/venda e ações secundárias\n- Dropdown (stroke={false}) — seletor de Estratégia\n\nESTRUTURA (3 seções com border-left: 1px solid --border-subtle):\n\n1. ABAS (height: 45px, padding: 8px, border-bottom sutil)\n   - <SegmentedControl tabs={['Avançado', 'Simples']} active={0} />\n\n2. CONTAINER — campos do formulário (padding: 8px, gap: 16px, border-bottom sutil)\n   - \"Estratégia\": label + <Dropdown value=\"Manejo\" stroke={false} />\n   - \"Disp.\": label + valor \"258.010.200,00 USDT\" (primary)\n   - \"Quantidade\": label + <TextInput placeholder=\"Inserir\" size=\"large\" /> + 3 quick <Button variant=\"ghost\" size=\"lg\">\n   - \"Preço da Ordem\": label + <TextInput defaultValue=\"0,00\" size=\"large\" />\n   - <Checkbox checked={false} label=\"TP/SL\" />\n\n3. BOTÕES (padding: 8px, gap: 8px)\n   - 4 rows de ação: <Button variant=\"long\" size=\"lg\"> + <Button variant=\"short\" size=\"lg\">\n   - \"Zerar (5)\": botão custom (border --color-orange-500, text laranja) — sem variante atômica\n   - \"Cancelar ordens (2) + Zerar (5)\": <Button variant=\"ghost\" size=\"lg\">\n   - Row \"Cancelar Ordem\" + \"Inverter\": <Button variant=\"ghost\" size=\"lg\">\n   - Resumo Posição: \"Posição\" (14px tertiary) / \"Zerado\" (16px --content-success), + 2 linhas meta\n\nResultado pixel-perfect com exatamente 283px de largura."
+  },
+  "dependencies": [
+    "segmented-control",
+    "text-input",
+    "checkbox",
+    "button",
+    "dropdown"
+  ]
+}

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

@@ -0,0 +1,166 @@
+{
+  "slug": "button",
+  "name": "Button",
+  "figmaId": "1318:749",
+  "category": "formulario",
+  "description": "Botão principal do sistema com 10 variantes visuais, 2 tamanhos e 4 estados.",
+  "props": [
+    {
+      "name": "Variant",
+      "type": "enum",
+      "values": [
+        "Primary",
+        "Secondary",
+        "Ghost",
+        "Link",
+        "Link Danger",
+        "Destructive",
+        "Inverse",
+        "Long",
+        "Short",
+        "Secondary Destruct"
+      ]
+    },
+    {
+      "name": "Size",
+      "type": "enum",
+      "values": [
+        "Default",
+        "Large"
+      ]
+    },
+    {
+      "name": "State",
+      "type": "enum",
+      "values": [
+        "Default",
+        "Hover",
+        "Pressed",
+        "Disabled"
+      ]
+    },
+    {
+      "name": "Icon Left",
+      "type": "boolean",
+      "values": [
+        "true",
+        "false"
+      ]
+    },
+    {
+      "name": "Icon Right",
+      "type": "boolean",
+      "values": [
+        "true",
+        "false"
+      ]
+    }
+  ],
+  "dimensions": [
+    {
+      "label": "Default",
+      "height": "24px"
+    },
+    {
+      "label": "Large",
+      "height": "32px"
+    }
+  ],
+  "tokens": [
+    {
+      "property": "BG Primary",
+      "token": "action.brand.default",
+      "value": "#00D4FF"
+    },
+    {
+      "property": "BG Primary Hover",
+      "token": "action.brand.hover",
+      "value": "#00A8CC"
+    },
+    {
+      "property": "BG Primary Active",
+      "token": "action.brand.active",
+      "value": "#007D99"
+    },
+    {
+      "property": "BG Secondary",
+      "token": "action.secondary.default",
+      "value": "#4A4A4A"
+    },
+    {
+      "property": "Text sobre Primary",
+      "token": "content.inverse",
+      "value": "#1A1A1A"
+    },
+    {
+      "property": "Text sobre Secondary",
+      "token": "content.primary",
+      "value": "#FFFFFF"
+    },
+    {
+      "property": "Text Ghost",
+      "token": "content.secondary",
+      "value": "#E8E8E8"
+    },
+    {
+      "property": "BG Destructive",
+      "token": "action.destructive.default",
+      "value": "#EA580C"
+    },
+    {
+      "property": "BG Long (trading)",
+      "token": "context.trading.long.default",
+      "value": "#4FE29014"
+    },
+    {
+      "property": "Text Long (trading)",
+      "token": "context.trading.long.text",
+      "value": "#6DE7A2"
+    },
+    {
+      "property": "BG Short (trading)",
+      "token": "context.trading.short.default",
+      "value": "#F1312614"
+    },
+    {
+      "property": "Text Short (trading)",
+      "token": "context.trading.short.text",
+      "value": "#F56D64"
+    },
+    {
+      "property": "Border radius",
+      "token": "scale.radius.md",
+      "value": "8px"
+    },
+    {
+      "property": "Border Ghost",
+      "token": "border.default",
+      "value": "#4A4A4A"
+    },
+    {
+      "property": "Font family",
+      "token": "font.secondary",
+      "value": "Inter"
+    },
+    {
+      "property": "Font size Default",
+      "token": "font-size-100",
+      "value": "14px"
+    },
+    {
+      "property": "Font weight",
+      "token": "text.label.sm.weight",
+      "value": "600 (SemiBold)"
+    }
+  ],
+  "anatomy": "[Icon Left?] [Label] [Icon Right?]\nGap: 4px | Padding: 8px H (Default) / 12px H (Large)\nHeight: 24px (Default) / 32px (Large) | Border-radius: 8px",
+  "notes": "Variantes \"Long\" e \"Short\" são botões para contextos de trading (compra/venda). \"Secondary Destruct\" é Ghost com cor destrutiva. \"Inverse\" é usado sobre fundos claros.",
+  "implemented": true,
+  "code": {
+    "html": "<!-- Primary -->\n<button class=\"trdr-btn trdr-btn-primary\">Confirmar</button>\n<button class=\"trdr-btn trdr-btn-primary trdr-btn-lg\">Confirmar (Large)</button>\n<button class=\"trdr-btn trdr-btn-primary\" disabled>Desabilitado</button>\n\n<!-- Secondary -->\n<button class=\"trdr-btn trdr-btn-secondary\">Cancelar</button>\n\n<!-- Ghost -->\n<button class=\"trdr-btn trdr-btn-ghost\">Ghost</button>\n\n<!-- Destructive -->\n<button class=\"trdr-btn trdr-btn-destructive\">Excluir</button>\n\n<!-- Inverse -->\n<button class=\"trdr-btn trdr-btn-inverse\">Inverse</button>\n\n<!-- Link -->\n<button class=\"trdr-btn trdr-btn-link\">Ver mais</button>\n\n<!-- Link Danger -->\n<button class=\"trdr-btn trdr-btn-link-danger\">Remover</button>\n\n<!-- Secondary Destruct -->\n<button class=\"trdr-btn trdr-btn-secondary-destruct\">Cancelar operação</button>\n\n<!-- Long / Short — Trading -->\n<button class=\"trdr-btn trdr-btn-long\">Long</button>\n<button class=\"trdr-btn trdr-btn-short\">Short</button>",
+    "css": "/* Button — Design System TRDR | Figma: 1318:749 */\n.trdr-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--spacing-xs);       /* 4px */\n  height: 24px;\n  padding: 0 var(--spacing-sm); /* 0 8px */\n  border-radius: var(--radius-md); /* 8px */\n  font-family: var(--font-secondary);\n  font-size: 14px;\n  font-weight: 600;\n  line-height: 1;\n  white-space: nowrap;\n  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;\n  cursor: pointer;\n  border: none;\n  text-decoration: none;\n}\n\n.trdr-btn-lg {\n  height: 32px;\n  padding: 0 var(--spacing-md); /* 0 12px */\n}\n\n/* Primary */\n.trdr-btn-primary {\n  background-color: var(--action-brand-default); /* #00D4FF */\n  color: var(--content-inverse);\n  border: 0.5px solid var(--action-brand-default);\n}\n.trdr-btn-primary:hover  { background-color: var(--action-brand-hover); border-color: var(--action-brand-hover); }\n.trdr-btn-primary:active { background-color: var(--action-brand-active); border-color: var(--action-brand-active); }\n.trdr-btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }\n\n/* Secondary */\n.trdr-btn-secondary {\n  background-color: var(--action-secondary-default); /* #4A4A4A */\n  color: var(--content-primary);\n}\n.trdr-btn-secondary:hover  { background-color: var(--action-secondary-hover); }\n.trdr-btn-secondary:active { background-color: var(--action-secondary-active); }\n.trdr-btn-secondary:disabled { background-color: var(--action-secondary-disabled); color: var(--content-disabled); cursor: not-allowed; }\n\n/* Ghost */\n.trdr-btn-ghost {\n  background-color: transparent;\n  color: var(--content-secondary); /* #E8E8E8 */\n  border: 1px solid var(--border-default); /* #4A4A4A */\n}\n.trdr-btn-ghost:hover  { background-color: var(--surface-secondary); border-color: var(--border-strong); color: var(--content-primary); }\n.trdr-btn-ghost:active { background-color: var(--surface-primary); }\n.trdr-btn-ghost:disabled { color: var(--content-disabled); border-color: var(--border-disabled); opacity: 0.5; cursor: not-allowed; }\n\n/* Destructive */\n.trdr-btn-destructive {\n  background-color: var(--action-destructive-default); /* #EA580C */\n  color: var(--content-primary);\n}\n.trdr-btn-destructive:hover  { background-color: var(--action-destructive-hover); }\n.trdr-btn-destructive:active { background-color: var(--action-destructive-active); }\n\n/* Inverse */\n.trdr-btn-inverse {\n  background-color: var(--bg-inverse); /* #FFFFFF */\n  color: var(--content-inverse);       /* #1A1A1A */\n  border: 0.5px solid var(--bg-inverse);\n}\n.trdr-btn-inverse:hover { background-color: var(--color-neutral-100); }\n\n/* Link */\n.trdr-btn-link {\n  background-color: transparent;\n  color: var(--content-brand); /* #00D4FF */\n  padding-left: 0;\n  padding-right: 0;\n}\n.trdr-btn-link:hover { color: var(--action-brand-hover); text-decoration: underline; }\n\n/* Link Danger */\n.trdr-btn-link-danger {\n  background-color: transparent;\n  color: var(--content-error); /* #F34F45 */\n  padding-left: 0;\n  padding-right: 0;\n}\n.trdr-btn-link-danger:hover { color: var(--action-destructive-hover); text-decoration: underline; }\n\n/* Secondary Destruct */\n.trdr-btn-secondary-destruct {\n  background-color: transparent;\n  color: var(--action-destructive-default);\n  border: 1px solid var(--action-destructive-default);\n}\n.trdr-btn-secondary-destruct:hover { background-color: var(--action-destructive-disabled); }\n\n/* Long — Trading compra (verde) */\n.trdr-btn-long {\n  background-color: var(--context-trading-long-default);\n  color: var(--context-trading-long-text);\n  min-width: 80px;\n}\n.trdr-btn-long:hover { background-color: var(--context-trading-long-hover); }\n\n/* Short — Trading venda (vermelho) */\n.trdr-btn-short {\n  background-color: var(--context-trading-short-default);\n  color: var(--context-trading-short-text);\n  min-width: 80px;\n}\n.trdr-btn-short:hover { background-color: var(--context-trading-short-hover); }",
+    "react": "import Button from '@/components/ui/Button'\n\n// Variantes principais\n<Button variant=\"primary\">Confirmar</Button>\n<Button variant=\"secondary\">Cancelar</Button>\n<Button variant=\"ghost\">Ghost</Button>\n<Button variant=\"destructive\">Excluir</Button>\n\n// Tamanho Large\n<Button variant=\"primary\" size=\"lg\">Confirmar (Large)</Button>\n\n// Com ícone (Material Symbols)\n<Button\n  variant=\"primary\"\n  iconLeft={<span style={{ fontFamily: 'Material Symbols Outlined', fontSize: 16 }}>add</span>}\n>\n  Nova posição\n</Button>\n\n// Disabled\n<Button variant=\"primary\" disabled>Processando...</Button>\n\n// Variantes de link\n<Button variant=\"link\">Ver mais</Button>\n<Button variant=\"link-danger\">Remover</Button>\n\n// Inverse (sobre fundo claro)\n<Button variant=\"inverse\">Ação</Button>\n\n// Secondary Destruct\n<Button variant=\"secondary-destruct\">Cancelar operação</Button>\n\n// Trading\n<Button variant=\"long\">Long</Button>\n<Button variant=\"short\">Short</Button>\n\n// Interface de Props:\n// variant?: 'primary' | 'secondary' | 'ghost' | 'destructive' | 'inverse'\n//         | 'link' | 'link-danger' | 'secondary-destruct' | 'long' | 'short'\n// size?: 'default' | 'lg'\n// iconLeft?: React.ReactNode\n// iconRight?: React.ReactNode\n// + todos os atributos nativos do <button>",
+    "prompt": "Implemente o componente Button do Design System TRDR. Figma ID: 1318:749.\n\nDIMENSÕES:\n- Default: height 24px, padding 0 8px, gap 4px\n- Large: height 32px, padding 0 12px, gap 4px\n- Border-radius: var(--radius-md) — 8px (OBRIGATÓRIO, não usar --radius-sm)\n\nTIPOGRAFIA:\n- font-family: var(--font-secondary) — Inter\n- font-size: 14px (ambos os tamanhos)\n- font-weight: 600 (SemiBold)\n\n10 VARIANTES com tokens obrigatórios:\n\nPrimary:\n  BG: var(--action-brand-default) /* #00D4FF */\n  Color: var(--content-inverse)\n  Border: 0.5px solid var(--action-brand-default)\n  Hover: var(--action-brand-hover) | Active: var(--action-brand-active)\n\nSecondary:\n  BG: var(--action-secondary-default) /* #4A4A4A */\n  Color: var(--content-primary)\n  Hover: var(--action-secondary-hover) | Active: var(--action-secondary-active)\n\nGhost:\n  BG: transparent | Color: var(--content-secondary) /* #E8E8E8 */\n  Border: 1px solid var(--border-default)\n  Hover: BG var(--surface-secondary), border var(--border-strong), color var(--content-primary)\n\nDestructive:\n  BG: var(--action-destructive-default) /* #EA580C */\n  Color: var(--content-primary)\n  Hover: var(--action-destructive-hover) | Active: var(--action-destructive-active)\n\nInverse:\n  BG: var(--bg-inverse) /* #FFFFFF */\n  Color: var(--content-inverse) /* #1A1A1A */\n  Border: 0.5px solid var(--bg-inverse)\n\nLink:\n  BG: transparent | Color: var(--content-brand) | padding-x: 0\n  Hover: color var(--action-brand-hover), text-decoration underline\n\nLink Danger:\n  BG: transparent | Color: var(--content-error) | padding-x: 0\n  Hover: color var(--action-destructive-hover), text-decoration underline\n\nSecondary Destruct:\n  BG: transparent | Color: var(--action-destructive-default)\n  Border: 1px solid var(--action-destructive-default)\n  Hover: BG var(--action-destructive-disabled)\n\nLong (trading compra):\n  BG: var(--context-trading-long-default) | Color: var(--context-trading-long-text)\n  min-width: 80px\n  Hover: var(--context-trading-long-hover) | Active: var(--context-trading-long-active)\n\nShort (trading venda):\n  BG: var(--context-trading-short-default) | Color: var(--context-trading-short-text)\n  min-width: 80px\n  Hover: var(--context-trading-short-hover) | Active: var(--context-trading-short-active)\n\nDisabled (global): opacity 0.4, cursor not-allowed\n\nImplemente como componente React com CSS Module. Props: variant, size, iconLeft, iconRight + atributos nativos do button. Resultado deve ser pixel-perfect em relação ao Figma."
+  },
+  "dependencies": []
+}

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

@@ -0,0 +1,55 @@
+{
+  "slug": "card",
+  "name": "Card",
+  "figmaId": "—",
+  "category": "outros",
+  "description": "Card de conteúdo — container com borda, padding e hover. Usado como base para cards de navegação e informação no Design Hub.",
+  "props": [
+    {
+      "name": "Variant",
+      "type": "enum",
+      "values": [
+        "Default",
+        "With Icon"
+      ]
+    }
+  ],
+  "dimensions": [
+    {
+      "label": "Default",
+      "height": "auto"
+    }
+  ],
+  "tokens": [
+    {
+      "property": "Background",
+      "token": "surface.tertiary",
+      "value": "#1A1A1A"
+    },
+    {
+      "property": "Border",
+      "token": "border.subtle",
+      "value": "#222222"
+    },
+    {
+      "property": "Radius",
+      "token": "scale.radius.md",
+      "value": "12px"
+    },
+    {
+      "property": "Padding",
+      "token": "scale.spacing.2xl",
+      "value": "24px"
+    }
+  ],
+  "anatomy": "Container 1 (borda inferior quando há footer):\n  [Header: Icon? 44px brand | Badges direita]\n  [Title H-6: Space Grotesk 500, 26px, content/secondary]\n  [Desc B-3: Inter 400, 14px, content/tertiary]\nContainer 2 (footer, opcional):\n  [Figma ID B-4: Inter 500, 12px, content/tertiary | Badges direita]",
+  "notes": "Hover: border-color passa para border.default, background para surface.secondary. Gap entre containers: scale/spacing/md (12px). Container 1 recebe border-bottom + pb:12px quando há footer.",
+  "implemented": true,
+  "code": {
+    "html": "<!-- Card com footer (variante componente) — Design System TRDR (Figma: 2316:2462) -->\n<a href=\"/destino\" class=\"card\">\n\n  <!-- Container 1: conteúdo principal -->\n  <div class=\"card-container1 card-has-footer\">\n    <div class=\"card-header\">\n      <!-- Ícone (opcional) -->\n      <span class=\"card-icon material-symbols-outlined\">palette</span>\n      <!-- Badges do header (opcional) -->\n      <div class=\"card-badges\">\n        <span class=\"trdr-badge trdr-badge-neutral\">Tokens</span>\n      </div>\n    </div>\n    <!-- H-6: Space Grotesk 500, 26px -->\n    <span class=\"card-title\">Design Tokens</span>\n    <!-- B-3: Inter 400, 14px, content/tertiary -->\n    <p class=\"card-desc\">Cores, espaçamentos e tokens semânticos do design system.</p>\n  </div>\n\n  <!-- Container 2: footer (opcional) -->\n  <div class=\"card-footer\">\n    <code class=\"card-figma-id\">2316:2462</code>\n    <div class=\"card-badges\">\n      <span class=\"trdr-badge trdr-badge-success\">Implementado</span>\n    </div>\n  </div>\n\n</a>",
+    "css": "/* Card — Design System TRDR (Figma node: 2316:2462, 380×154) */\n.card {\n  display: flex;\n  flex-direction: column;\n  gap: var(--scale-spacing-md);          /* 12px entre container1 e footer */\n  min-width: 250px;\n  padding: var(--scale-spacing-2xl);     /* 24px */\n  background: var(--surface-tertiary);\n  border: 1px solid var(--border-subtle);\n  border-radius: var(--scale-radius-md); /* 12px */\n  text-decoration: none;\n  overflow: hidden;\n  transition: border-color 0.15s ease, background-color 0.15s ease;\n  cursor: pointer;\n}\n\n.card:hover {\n  border-color: var(--border-default);\n  background: var(--surface-secondary);\n}\n\n/* Container 1 — conteúdo principal */\n.card-container1 {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  align-items: flex-start;\n  width: 100%;\n}\n\n/* Borda inferior quando há footer */\n.card-has-footer {\n  border-bottom: 1px solid var(--border-subtle);\n  padding-bottom: var(--scale-spacing-md); /* 12px */\n}\n\n.card-header {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  width: 100%;\n}\n\n/* Material Symbols Outlined — ExtraLight (wght 100) */\n.card-icon {\n  font-family: 'Material Symbols Outlined';\n  font-size: 44px;\n  font-style: normal;\n  line-height: 1;\n  color: var(--content-brand);\n  font-variation-settings: 'FILL' 0, 'GRAD' 0, 'wght' 100, 'opsz' 48;\n}\n\n.card-badges {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  flex-shrink: 0;\n}\n\n/* H-6: Space Grotesk Medium 500, 26px */\n.card-title {\n  font-family: var(--font-primary); /* Space Grotesk */\n  font-size: 26px;\n  font-weight: 500;\n  line-height: 1.1;\n  color: var(--content-secondary);\n}\n\n/* B-3: Inter Regular 400, 14px */\n.card-desc {\n  font-family: var(--font-secondary); /* Inter */\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 1.2;\n  color: var(--content-tertiary);\n  margin: 0;\n}\n\n/* Container 2 — footer */\n.card-footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n}\n\n/* B-4: Inter Medium 500, 12px, 0.2px tracking */\n.card-figma-id {\n  font-family: var(--font-secondary);\n  font-size: 12px;\n  font-weight: 500;\n  letter-spacing: 0.2px;\n  color: var(--content-tertiary);\n  font-style: normal;\n}",
+    "react": "'use client'\nimport Link from 'next/link'\nimport styles from './Card.module.css'\n\ninterface CardBadge {\n  label: string\n  variant?: 'neutral' | 'brand' | 'success'\n}\n\ninterface CardProps {\n  href: string\n  icon?: string             // Material Symbols Outlined name (ex: 'palette')\n  title: string\n  description: string\n  headerBadges?: CardBadge[] // badges no header (topo direito)\n  footerLeft?: string        // texto do footer (ex: Figma ID '2316:2462')\n  footerBadges?: CardBadge[] // badges do footer\n  className?: string\n}\n\nexport default function Card({\n  href, icon, title, description,\n  headerBadges, footerLeft, footerBadges, className = '',\n}: CardProps) {\n  const hasFooter = footerLeft || (footerBadges && footerBadges.length > 0)\n\n  return (\n    <Link href={href} className={`${styles.card} ${className}`}>\n\n      {/* Container 1 — conteúdo principal */}\n      <div className={`${styles.container1} ${hasFooter ? styles.hasBorder : ''}`}>\n        <div className={styles.header}>\n          {icon && (\n            <span\n              className={styles.icon}\n              style={{ fontVariationSettings: \"'FILL' 0, 'GRAD' 0, 'wght' 100, 'opsz' 48\" }}\n            >\n              {icon}\n            </span>\n          )}\n          {headerBadges && headerBadges.length > 0 && (\n            <div className={styles.badges}>\n              {headerBadges.map(b => (\n                <span key={b.label} className={`trdr-badge trdr-badge-${b.variant ?? 'neutral'}`}>\n                  {b.label}\n                </span>\n              ))}\n            </div>\n          )}\n        </div>\n        <span className={styles.title}>{title}</span>\n        <p className={styles.desc}>{description}</p>\n      </div>\n\n      {/* Container 2 — footer (opcional) */}\n      {hasFooter && (\n        <div className={styles.container2}>\n          {footerLeft && <code className={styles.footerLeft}>{footerLeft}</code>}\n          {footerBadges && footerBadges.length > 0 && (\n            <div className={styles.badges}>\n              {footerBadges.map(b => (\n                <span key={b.label} className={`trdr-badge trdr-badge-${b.variant ?? 'neutral'}`}>\n                  {b.label}\n                </span>\n              ))}\n            </div>\n          )}\n        </div>\n      )}\n\n    </Link>\n  )\n}\n\n/* Card.module.css — estrutura dois containers */\n/*\n.card {\n  display: flex; flex-direction: column;\n  gap: var(--scale-spacing-md);\n  padding: var(--scale-spacing-2xl);\n  background: var(--surface-tertiary);\n  border: 1px solid var(--border-subtle);\n  border-radius: var(--scale-radius-md);\n  text-decoration: none; cursor: pointer;\n  transition: border-color 0.15s ease, background-color 0.15s ease;\n}\n.card:hover { border-color: var(--border-default); background: var(--surface-secondary); }\n.container1 { display: flex; flex-direction: column; gap: 8px; width: 100%; }\n.hasBorder { border-bottom: 1px solid var(--border-subtle); padding-bottom: var(--scale-spacing-md); }\n.header { display: flex; align-items: flex-start; justify-content: space-between; width: 100%; }\n.icon { font-family: 'Material Symbols Outlined'; font-size: 44px; color: var(--content-brand); }\n.badges { display: flex; align-items: center; gap: 4px; }\n.title { font-family: var(--font-primary); font-size: 26px; font-weight: 500; color: var(--content-secondary); }\n.desc { font-family: var(--font-secondary); font-size: 14px; font-weight: 400; color: var(--content-tertiary); margin: 0; }\n.container2 { display: flex; align-items: center; justify-content: space-between; width: 100%; }\n.footerLeft { font-family: var(--font-secondary); font-size: 12px; font-weight: 500; letter-spacing: 0.2px; color: var(--content-tertiary); }\n*/",
+    "prompt": "Implemente o componente Card do Design System TRDR.\nReferência Figma: nó 2316:2462 (380×154)\n\nEstrutura de dois containers separados por borda:\n\nContainer 1 (conteúdo principal):\n- Header: ícone Material Symbols Outlined 44px ExtraLight (wght 100) em var(--content-brand) à esquerda + badges à direita (opcional)\n- Título H-6: Space Grotesk Medium 500, 26px, line-height 1.1, var(--content-secondary)\n- Descrição B-3: Inter Regular 400, 14px, line-height 1.2, var(--content-tertiary)\n- Quando há footer: recebe border-bottom 1px solid var(--border-subtle) + padding-bottom 12px\n\nContainer 2 (footer, opcional):\n- Esquerda: Figma ID em B-4 (Inter Medium 500, 12px, 0.2px tracking, var(--content-tertiary))\n- Direita: badges (trdr-badge-success = implementado, trdr-badge-brand = código)\n\nTokens TRDR obrigatórios:\n- Background: var(--surface-tertiary) → hover: var(--surface-secondary)\n- Border: 1px solid var(--border-subtle) → hover: var(--border-default)\n- Border radius: var(--scale-radius-md) — 12px\n- Padding: var(--scale-spacing-2xl) — 24px\n- Gap entre containers: var(--scale-spacing-md) — 12px\n- Transição: border-color e background-color em 0.15s ease\n\nImplemente como componente React com CSS Module. Use as classes .trdr-badge e .trdr-badge-{variant} para os badges. O componente deve aceitar as props: href, icon?, title, description, headerBadges?, footerLeft?, footerBadges?."
+  },
+  "dependencies": []
+}