trdr-ds-install 1.11.0 → 2.0.0

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

@@ -0,0 +1,91 @@
+{
+  "slug": "tabela-cotacoes",
+  "name": "Tabela de Cotações",
+  "figmaId": "77:3681",
+  "category": "trading",
+  "implemented": true,
+  "description": "Tabela de cotações em tempo real. Exibe ativo, último preço, variação % com código de cor (verde/vermelho), tendência (seta), quantidade e dados de oferta/demanda.",
+  "props": [
+    {
+      "name": "rows",
+      "type": "CotacaoRow[]",
+      "values": [
+        "array de dados de cotação"
+      ]
+    }
+  ],
+  "dimensions": [
+    {
+      "label": "Largura total",
+      "width": "800px",
+      "height": "—"
+    },
+    {
+      "label": "Altura do header",
+      "width": "—",
+      "height": "32px"
+    },
+    {
+      "label": "Altura da linha",
+      "width": "—",
+      "height": "32px"
+    },
+    {
+      "label": "Célula Último",
+      "width": "80px",
+      "height": "32px"
+    }
+  ],
+  "tokens": [
+    {
+      "property": "Var% positivo",
+      "token": "context.trading.up",
+      "value": "#4FE290"
+    },
+    {
+      "property": "Var% negativo",
+      "token": "context.trading.down",
+      "value": "#F34F45"
+    },
+    {
+      "property": "Cell Último bg",
+      "token": "surface.primary",
+      "value": "#4A4A4A"
+    },
+    {
+      "property": "Row alternada",
+      "token": "—",
+      "value": "rgba(255,255,255,0.08)"
+    },
+    {
+      "property": "Row hover",
+      "token": "surface.secondary",
+      "value": "#222222"
+    },
+    {
+      "property": "Header border",
+      "token": "border.default",
+      "value": "#4A4A4A"
+    },
+    {
+      "property": "Header text",
+      "token": "content.tertiary",
+      "value": "#A4A4A4"
+    },
+    {
+      "property": "Cell text",
+      "token": "content.primary",
+      "value": "#FFFFFF"
+    }
+  ],
+  "anatomy": "Tabela (table-layout: fixed, border-collapse: collapse):\n  [thead > tr (32px, border-bottom 1px --border-default)]\n    [th: 14px/400 --content-tertiary | padding: 4px 8px]\n    Colunas: Ativo(65) Último(80) Q Últ(65) Var%(65) Tend(65) Dif(65) Stat(65) QOfc(65) Ofc(65) Ofv(65) QOfv(65) Teórico(65)\n  [tbody > tr (32px, cursor pointer)]\n    [tr:nth-child(even): bg rgba(255,255,255,0.08)]\n    [tr:hover: bg --surface-secondary]\n    [tr.selected: bg --bg-secondary]\n    [td: 14px/400 --content-primary | padding: 4px 8px]\n    [td.col-ultimo: bg --surface-primary #4A4A4A]\n    [td.col-var-up: color --context-trading-up #4FE290]\n    [td.col-var-down: color --context-trading-down #F34F45]\n    [td.col-tend: ícone Material Symbols arrow_drop_up/down]",
+  "code": {
+    "html": "<!-- Tabela de Cotações TRDR (Figma: 77:3681) -->\n<div style=\"width:100%;overflow-x:auto;background:var(--bg-primary)\">\n  <table class=\"trdr-tabela-cotacoes\">\n    <colgroup>\n      <col style=\"width:65px\"> <col style=\"width:80px\"> <col style=\"width:65px\">\n      <col style=\"width:65px\"> <col style=\"width:65px\"> <col style=\"width:65px\">\n      <col style=\"width:65px\"> <col style=\"width:65px\"> <col style=\"width:65px\">\n      <col style=\"width:65px\"> <col style=\"width:65px\"> <col style=\"width:65px\">\n    </colgroup>\n    <thead>\n      <tr>\n        <th>Ativo</th><th>Último</th><th>Q Últ</th><th>Var %</th>\n        <th>Tend</th><th>Dif</th><th>Stat...</th><th>QOfc</th>\n        <th>Ofc</th><th>Ofv</th><th>QOfv</th><th>Teórico</th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr class=\"trdr-tabela-cotacoes-row-selected\">\n        <td>ITUB4</td>\n        <td class=\"col-ultimo\">50.47</td>\n        <td>100</td>\n        <td class=\"col-var-down\">-0.72%</td>\n        <td><span class=\"col-tend-icon col-tend-down\">arrow_drop_down</span></td>\n        <td>0.36</td><td>.</td><td>1.000</td>\n        <td>50.47</td><td>50.49</td><td>1.300</td><td>.</td>\n      </tr>\n      <tr>\n        <td>VALE3</td>\n        <td class=\"col-ultimo\">92,00</td>\n        <td>200</td>\n        <td class=\"col-var-up\">+1.20%</td>\n        <td><span class=\"col-tend-icon col-tend-up\">arrow_drop_up</span></td>\n        <td>0.50</td><td>.</td><td>2.700</td>\n        <td>92,00</td><td>92,10</td><td>4.000</td><td>.</td>\n      </tr>\n    </tbody>\n  </table>\n</div>",
+    "css": "/* Tabela de Cotações — TRDR Design System */\n/* Tokens: --context-trading-up (#4FE290), --context-trading-down (#F34F45) */\n/* Tokens: --surface-primary (#4A4A4A), --surface-secondary (#222222)       */\n/* Tokens: --border-default (#4A4A4A), --content-tertiary (#A4A4A4)          */\n\n.trdr-tabela-cotacoes {\n  width: 100%;\n  border-collapse: collapse;\n  table-layout: fixed;\n  font-family: var(--font-secondary); /* Inter */\n  font-size: 14px;\n  font-weight: 400;\n  color: var(--content-primary);         /* #FFFFFF */\n}\n\n.trdr-tabela-cotacoes thead tr {\n  height: 32px;\n  border-bottom: 1px solid var(--border-default); /* #4A4A4A */\n}\n\n.trdr-tabela-cotacoes th {\n  padding: 4px 8px;\n  text-align: left;\n  color: var(--content-tertiary);   /* #A4A4A4 */\n  font-weight: 400;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  vertical-align: middle;\n}\n\n.trdr-tabela-cotacoes tbody tr {\n  height: 32px;\n  cursor: pointer;\n  transition: background-color 0.1s ease;\n}\n\n.trdr-tabela-cotacoes tbody tr:nth-child(even) {\n  background: rgba(255, 255, 255, 0.08);\n}\n\n.trdr-tabela-cotacoes tbody tr:hover {\n  background: var(--surface-secondary); /* #222222 */\n}\n\n.trdr-tabela-cotacoes tbody tr.trdr-tabela-cotacoes-row-selected {\n  background: var(--bg-secondary); /* #141519 */\n}\n\n.trdr-tabela-cotacoes td {\n  padding: 4px 8px;\n  text-align: left;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  vertical-align: middle;\n}\n\n.trdr-tabela-cotacoes td.col-ultimo {\n  background: var(--surface-primary); /* #4A4A4A */\n}\n\n.trdr-tabela-cotacoes .col-var-up   { color: var(--context-trading-up);   } /* #4FE290 */\n.trdr-tabela-cotacoes .col-var-down { color: var(--context-trading-down); } /* #F34F45 */\n\n.trdr-tabela-cotacoes .col-tend-icon {\n  font-family: 'Material Symbols Outlined';\n  font-size: 20px;\n  font-variation-settings: 'FILL' 1, 'GRAD' 0, 'wght' 400;\n  vertical-align: middle;\n}\n.trdr-tabela-cotacoes .col-tend-up   { color: var(--context-trading-up);   }\n.trdr-tabela-cotacoes .col-tend-down { color: var(--context-trading-down); }",
+    "react": "import TabelaCotacoes, { CotacaoRow } from '@/components/ui/TabelaCotacoes'\n// Badge é importado internamente — a coluna Var% renderiza <Badge> automaticamente\n\nconst rows: CotacaoRow[] = [\n  {\n    ativo: 'ITUB4',\n    ultimo: '50.47',\n    qUlt: 100,\n    varPct: -0.72,\n    tend: 'down',\n    dif: '0.36',\n    qOfc: '1.000',\n    ofc: '50.47',\n    ofv: '50.49',\n    qOfv: '1.300',\n    selected: true,\n  },\n  {\n    ativo: 'VALE3',\n    ultimo: '92,00',\n    qUlt: 200,\n    varPct: 1.20,\n    tend: 'up',\n    dif: '0.50',\n  },\n]\n\nexport default function Example() {\n  return <TabelaCotacoes rows={rows} />\n}",
+    "prompt": "Crie um componente React 'TabelaCotacoes' pixel-perfect baseado no Figma TRDR (node 77:3681).\n\nCOMPOSIÇÃO: A coluna Var% usa o componente Badge (@/components/ui/Badge) com dot.\nVariação positiva → Badge variant=\"success\", negativa → Badge variant=\"warning\".\n\nESTRUTURA:\n- Elemento <table> com table-layout: fixed e border-collapse: collapse\n- Wrapper <div> com overflow-x: auto e background: var(--bg-primary)\n\nHEADER (thead > tr):\n- height: 32px\n- border-bottom: 1px solid var(--border-default) /* #4A4A4A */\n- th: padding 4px 8px, font 14px/400, color var(--content-tertiary) /* #A4A4A4 */\n\nCOLUNAS (colgroup):\nAtivo=65px, Último=80px, Q Últ=65px, Var%=65px, Tend=65px, Dif=65px,\nStat=65px, QOfc=65px, Ofc=65px, Ofv=65px, QOfv=65px, Teórico=65px\n\nDATA ROWS (tbody > tr):\n- height: 32px, cursor: pointer\n- tr:nth-child(even): background rgba(255,255,255,0.08)\n- tr:hover: background var(--surface-secondary) /* #222222 */\n- tr.selected: background var(--bg-secondary) /* #141519 */\n- td: padding 4px 8px, font 14px/400, color var(--content-primary) /* #FFFFFF */\n- td.col-ultimo: background var(--surface-primary) /* #4A4A4A */\n- td variação positiva: color var(--context-trading-up) /* #4FE290 */\n- td variação negativa: color var(--context-trading-down) /* #F34F45 */\n- td tendência: ícone Material Symbols Outlined 'arrow_drop_up'/'arrow_drop_down', 20px, FILL 1\n\nINTERFACE TypeScript:\ninterface CotacaoRow {\n  ativo: string; ultimo: string|number; qUlt?: string|number\n  varPct: number; tend?: 'up'|'down'|null; dif?: string|number\n  status?: string; qOfc?: string|number; ofc?: string|number\n  ofv?: string|number; qOfv?: string|number; teorico?: string|number\n  selected?: boolean\n}\n\nUsar APENAS tokens semânticos TRDR. NUNCA hex direto. NUNCA --scale-spacing-*."
+  },
+  "dependencies": [
+    "badge"
+  ]
+}

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

@@ -0,0 +1,81 @@
+{
+  "slug": "tabela-ordens",
+  "name": "Tabela de Ordens",
+  "figmaId": "336:3114",
+  "category": "trading",
+  "implemented": true,
+  "description": "Tabela de histórico de ordens. Exibe horário, ativo, tipo C/V (colorido), preço, quantidade, status (Aberta/Executada/Cancelada) e origem. Linhas canceladas recebem fundo vermelho translúcido.",
+  "props": [
+    {
+      "name": "rows",
+      "type": "OrdemRow[]",
+      "values": [
+        "array de dados de ordens"
+      ]
+    }
+  ],
+  "dimensions": [
+    {
+      "label": "Largura total",
+      "width": "896px",
+      "height": "—"
+    },
+    {
+      "label": "Altura do header",
+      "width": "—",
+      "height": "32px"
+    },
+    {
+      "label": "Altura da linha",
+      "width": "—",
+      "height": "32px"
+    }
+  ],
+  "tokens": [
+    {
+      "property": "C (Compra) text",
+      "token": "context.trading.long.text",
+      "value": "#6DE7A2"
+    },
+    {
+      "property": "V (Venda) text",
+      "token": "context.trading.short.text",
+      "value": "#F56D64"
+    },
+    {
+      "property": "Row cancelada bg",
+      "token": "context.trading.short.default",
+      "value": "rgba(241,49,38,0.08)"
+    },
+    {
+      "property": "Row hover",
+      "token": "surface.secondary",
+      "value": "#222222"
+    },
+    {
+      "property": "Header border",
+      "token": "border.default",
+      "value": "#4A4A4A"
+    },
+    {
+      "property": "Header text",
+      "token": "content.tertiary",
+      "value": "#A4A4A4"
+    },
+    {
+      "property": "Cell text",
+      "token": "content.primary",
+      "value": "#FFFFFF"
+    }
+  ],
+  "anatomy": "Tabela (table-layout: fixed, border-collapse: collapse):\n  [thead > tr (32px, border-bottom 1px --border-default)]\n    [th: 14px/400 --content-tertiary | padding: 4px 8px]\n    Colunas: Horário(81) Ativo(80) C/V(65) Preço(104) Médio(79)\n             Qtde(65) Disp(65) Aberta(65) Exec(65) Status(86) Validade(79) Origem(65)\n  [tbody > tr (32px, cursor pointer)]\n    [tr:nth-child(even): bg rgba(255,255,255,0.05)]\n    [tr:hover: bg --surface-secondary]\n    [tr.cancelada: bg --context-trading-short-default]\n    [td: 14px/400 --content-primary | padding: 4px 8px | text-overflow: ellipsis]\n    [td.col-cv-c: color --context-trading-long-text #6DE7A2, font-weight 600]\n    [td.col-cv-v: color --context-trading-short-text #F56D64, font-weight 600]",
+  "code": {
+    "html": "<!-- Tabela de Ordens TRDR (Figma: 336:3114) -->\n<div style=\"width:100%;overflow-x:auto;background:var(--bg-primary)\">\n  <table class=\"trdr-tabela-ordens\">\n    <colgroup>\n      <col style=\"width:81px\"> <col style=\"width:80px\"> <col style=\"width:65px\">\n      <col style=\"width:104px\"><col style=\"width:79px\"> <col style=\"width:65px\">\n      <col style=\"width:65px\"> <col style=\"width:65px\"> <col style=\"width:65px\">\n      <col style=\"width:86px\"> <col style=\"width:79px\"> <col style=\"width:65px\">\n    </colgroup>\n    <thead>\n      <tr>\n        <th>Horário</th><th>Ativo</th><th>C/V</th><th>Preço</th>\n        <th>Médio</th><th>Qtde</th><th>Disp</th><th>Aberta</th>\n        <th>Exec</th><th>Status</th><th>Validade</th><th>Origem</th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr>\n        <td>11:32:56</td><td>WDOK18</td>\n        <td class=\"col-cv-c\">C</td>\n        <td>3.425.600</td><td>3.425.600</td>\n        <td>20</td><td>.</td><td>.</td><td>20</td>\n        <td>Aberta</td><td>.</td><td>Loss</td>\n      </tr>\n      <tr>\n        <td>11:35:24</td><td>WDOK18</td>\n        <td class=\"col-cv-v\">V</td>\n        <td>3.425.600</td><td>3.425.600</td>\n        <td>19</td><td>.</td><td>.</td><td>19</td>\n        <td>Aberta</td><td>.</td><td>Criptor</td>\n      </tr>\n      <tr class=\"trdr-tabela-ordens-row-cancelada\">\n        <td>11:36:03</td><td>WDOK18</td>\n        <td class=\"col-cv-c\">C</td>\n        <td>3.425.600</td><td>3.425.600</td>\n        <td>16</td><td>.</td><td>.</td><td>16</td>\n        <td>Cancelada</td><td>.</td><td>Criptor</td>\n      </tr>\n    </tbody>\n  </table>\n</div>",
+    "css": "/* Tabela de Ordens — TRDR Design System */\n/* Tokens: --context-trading-long-text (#6DE7A2) — C (Compra)               */\n/* Tokens: --context-trading-short-text (#F56D64) — V (Venda)               */\n/* Tokens: --context-trading-short-default — fundo linha cancelada           */\n/* Tokens: --border-default (#4A4A4A), --content-tertiary (#A4A4A4)          */\n\n.trdr-tabela-ordens {\n  width: 100%;\n  border-collapse: collapse;\n  table-layout: fixed;\n  font-family: var(--font-secondary); /* Inter */\n  font-size: 14px;\n  font-weight: 400;\n  color: var(--content-primary); /* #FFFFFF */\n}\n\n.trdr-tabela-ordens thead tr {\n  height: 32px;\n  border-bottom: 1px solid var(--border-default); /* #4A4A4A */\n}\n\n.trdr-tabela-ordens th {\n  padding: 4px 8px;\n  text-align: left;\n  color: var(--content-tertiary);  /* #A4A4A4 */\n  font-weight: 400;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  vertical-align: middle;\n}\n\n.trdr-tabela-ordens tbody tr {\n  height: 32px;\n  cursor: pointer;\n  transition: background-color 0.1s ease;\n}\n\n.trdr-tabela-ordens tbody tr:nth-child(even) {\n  background: rgba(255, 255, 255, 0.05);\n}\n\n.trdr-tabela-ordens tbody tr:hover {\n  background: var(--surface-secondary); /* #222222 */\n}\n\n.trdr-tabela-ordens tbody tr.trdr-tabela-ordens-row-cancelada {\n  background: var(--context-trading-short-default); /* rgba(241,49,38,0.08) */\n}\n\n.trdr-tabela-ordens td {\n  padding: 4px 8px;\n  text-align: left;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  vertical-align: middle;\n}\n\n.trdr-tabela-ordens .col-cv-c {\n  color: var(--context-trading-long-text);  /* #6DE7A2 */\n  font-weight: 600;\n}\n\n.trdr-tabela-ordens .col-cv-v {\n  color: var(--context-trading-short-text); /* #F56D64 */\n  font-weight: 600;\n}",
+    "react": "import TabelaOrdens, { OrdemRow } from '@/components/ui/TabelaOrdens'\n// Badge é importado internamente — a coluna Status renderiza <Badge> automaticamente\n\nconst rows: OrdemRow[] = [\n  {\n    horario: '11:32:56',\n    ativo: 'WDOK18',\n    tipo: 'C',\n    preco: '3.425.600',\n    medio: '3.425.600',\n    qtde: 20,\n    exec: 20,\n    status: 'aberta',\n    origem: 'Loss',\n  },\n  {\n    horario: '11:35:24',\n    ativo: 'WDOK18',\n    tipo: 'V',\n    preco: '3.425.600',\n    medio: '3.425.600',\n    qtde: 19,\n    exec: 19,\n    status: 'aberta',\n    origem: 'Criptor',\n  },\n  {\n    horario: '11:36:03',\n    ativo: 'WDOK18',\n    tipo: 'C',\n    preco: '3.425.600',\n    medio: '3.425.600',\n    qtde: 16,\n    exec: 16,\n    status: 'cancelada',\n    origem: 'Criptor',\n  },\n]\n\nexport default function Example() {\n  return <TabelaOrdens rows={rows} />\n}",
+    "prompt": "Crie um componente React 'TabelaOrdens' pixel-perfect baseado no Figma TRDR (node 336:3114).\n\nCOMPOSIÇÃO: A coluna Status usa o componente Badge (@/components/ui/Badge) com dot.\nMapeamento de variantes: aberta→brand, executada→success, cancelada→warning, parcial→neutral.\n\nESTRUTURA:\n- Elemento <table> com table-layout: fixed e border-collapse: collapse\n- Wrapper <div> com overflow-x: auto e background: var(--bg-primary)\n\nHEADER (thead > tr):\n- height: 32px\n- border-bottom: 1px solid var(--border-default) /* #4A4A4A */\n- th: padding 4px 8px, font 14px/400, color var(--content-tertiary) /* #A4A4A4 */\n\nCOLUNAS (colgroup):\nHorário=81px, Ativo=80px, C/V=65px, Preço=104px, Médio=79px,\nQtde=65px, Disp=65px, Aberta=65px, Exec=65px, Status=86px, Validade=79px, Origem=65px\n\nDATA ROWS (tbody > tr):\n- height: 32px, cursor: pointer\n- tr:nth-child(even): background rgba(255,255,255,0.05)\n- tr:hover: background var(--surface-secondary) /* #222222 */\n- tr.cancelada: background var(--context-trading-short-default) /* rgba(241,49,38,0.08) */\n- td: padding 4px 8px, font 14px/400, color var(--content-primary), text-overflow ellipsis\n- td.col-cv-c (Compra): color var(--context-trading-long-text) /* #6DE7A2 */, font-weight 600\n- td.col-cv-v (Venda): color var(--context-trading-short-text) /* #F56D64 */, font-weight 600\n\nINTERFACE TypeScript:\ntype OrdemStatus = 'aberta' | 'executada' | 'cancelada' | 'parcial'\ninterface OrdemRow {\n  horario: string; ativo: string; tipo: 'C'|'V'\n  preco: string|number; medio?: string|number\n  qtde: number; disp?: string|number; aberta?: string|number; exec?: string|number\n  status: OrdemStatus; validade?: string; origem?: string\n}\n\nUsar APENAS tokens semânticos TRDR. NUNCA hex direto. NUNCA --scale-spacing-*."
+  },
+  "dependencies": [
+    "badge"
+  ]
+}

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

@@ -0,0 +1,119 @@
+{
+  "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": []
+}

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

@@ -0,0 +1,159 @@
+{
+  "slug": "text-input",
+  "name": "Text Input",
+  "figmaId": "1327:17000",
+  "category": "formulario",
+  "description": "Campo de texto com 3 variantes (Single Line, Multi Line, Quick Action), estados de validação e 2 tamanhos.",
+  "props": [
+    {
+      "name": "variant",
+      "type": "enum",
+      "values": [
+        "single-line",
+        "multi-line",
+        "quick-action"
+      ]
+    },
+    {
+      "name": "size",
+      "type": "enum",
+      "values": [
+        "default",
+        "large"
+      ]
+    },
+    {
+      "name": "validation",
+      "type": "enum",
+      "values": [
+        "default",
+        "error",
+        "warning",
+        "success"
+      ]
+    },
+    {
+      "name": "iconLeft",
+      "type": "boolean",
+      "values": [
+        "true",
+        "false"
+      ]
+    },
+    {
+      "name": "disabled",
+      "type": "boolean",
+      "values": [
+        "true",
+        "false"
+      ]
+    },
+    {
+      "name": "readOnly",
+      "type": "boolean",
+      "values": [
+        "true",
+        "false"
+      ]
+    },
+    {
+      "name": "placeholder",
+      "type": "string",
+      "values": []
+    },
+    {
+      "name": "onClear",
+      "type": "function",
+      "values": []
+    }
+  ],
+  "dimensions": [
+    {
+      "label": "Default (Single Line)",
+      "height": "24px",
+      "width": "—"
+    },
+    {
+      "label": "Large (Single Line)",
+      "height": "32px",
+      "width": "—"
+    },
+    {
+      "label": "Quick Action",
+      "height": "32px",
+      "width": "—"
+    },
+    {
+      "label": "Multi Line",
+      "height": "auto (min 56px)",
+      "width": "—"
+    },
+    {
+      "label": "Icon slot",
+      "height": "24px",
+      "width": "24px"
+    }
+  ],
+  "tokens": [
+    {
+      "property": "Background",
+      "token": "surface-primary",
+      "value": "#4A4A4A"
+    },
+    {
+      "property": "Border focus",
+      "token": "border-focus",
+      "value": "#00D4FF"
+    },
+    {
+      "property": "Border multi-line/variable/disabled",
+      "token": "border-strong",
+      "value": "#A4A4A4"
+    },
+    {
+      "property": "Texto Single Line",
+      "token": "content-primary",
+      "value": "#FFFFFF"
+    },
+    {
+      "property": "Texto Quick Action",
+      "token": "content-tertiary",
+      "value": "#A4A4A4"
+    },
+    {
+      "property": "Placeholder",
+      "token": "content-tertiary",
+      "value": "#A4A4A4"
+    },
+    {
+      "property": "Texto disabled",
+      "token": "content-disabled",
+      "value": "#4A4A4A"
+    },
+    {
+      "property": "Borda error",
+      "token": "content-error",
+      "value": "#F34F45"
+    },
+    {
+      "property": "Borda warning",
+      "token": "content-warning",
+      "value": "#FFD35A"
+    },
+    {
+      "property": "Borda success",
+      "token": "content-success",
+      "value": "#4FE290"
+    }
+  ],
+  "anatomy": "[div wrapper h=24px border-radius=5px bg=surface-primary border=transparent gap=4px]\n  └── [span icon-slot 24×24px, opcional] → ícone de busca 13px\n  └── [input flex=1 bg=transparent no-border 14px/400]\n  └── [button clear 24×24px, opcional, aparece quando iconLeft + value]\n— Large: h=32px, mesma tipografia (14px/400)\n— Multi Line: [div wrapper padding=4px_8px border=border-strong auto-height]\n  └── [textarea flex=1 resize=none 11px/450]\n— Quick Action: h=32px padding=0_4px gap=8px sempre com icon-slot, texto 11px/450 cor tertiary\n— Variable: padding=0_4px border=border-strong sempre visível, texto 11px/450",
+  "notes": "Quick Action é uma variante compacta para inputs em toolbars — texto em cor tertiary (#A4A4A4), sempre com ícone de busca. Variable é o estado de input de fórmula/variável com borda sempre visível. Border radius fixo: 5px. O botão clear só aparece quando iconLeft=true e há valor digitado.",
+  "implemented": true,
+  "code": {
+    "html": "<!-- Single Line Default (14px) -->\n<div class=\"trdr-text-input\">\n  <input type=\"text\" placeholder=\"Placeholder\" />\n</div>\n\n<!-- Single Line Large (14px, 32px height) -->\n<div class=\"trdr-text-input trdr-text-input-lg\">\n  <input type=\"text\" placeholder=\"Placeholder\" />\n</div>\n\n<!-- Com ícone esquerdo e botão clear -->\n<div class=\"trdr-text-input trdr-text-input-icon\">\n  <span class=\"trdr-text-input-icon-slot\" aria-hidden=\"true\">\n    <svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\n      <circle cx=\"5.5\" cy=\"5.5\" r=\"4.5\" stroke=\"currentColor\" stroke-width=\"1.5\"/>\n      <path d=\"M9 9L12 12\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n    </svg>\n  </span>\n  <input type=\"text\" placeholder=\"Buscar...\" value=\"WINFUT\" />\n  <button class=\"trdr-text-input-clear\" type=\"button\" aria-label=\"Limpar campo\">\n    <svg width=\"11\" height=\"11\" viewBox=\"0 0 11 11\" fill=\"none\" aria-hidden=\"true\">\n      <path d=\"M1 1L10 10M10 1L1 10\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n    </svg>\n  </button>\n</div>\n\n<!-- Quick Action (32px, texto tertiary, gap 8px) -->\n<div class=\"trdr-text-input trdr-text-input-quick\">\n  <span class=\"trdr-text-input-icon-slot\" aria-hidden=\"true\">\n    <svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\n      <circle cx=\"5.5\" cy=\"5.5\" r=\"4.5\" stroke=\"currentColor\" stroke-width=\"1.5\"/>\n      <path d=\"M9 9L12 12\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n    </svg>\n  </span>\n  <input type=\"text\" placeholder=\"Filtrar...\" />\n</div>\n\n<!-- Variable state (borda sempre visível, 11px) -->\n<div class=\"trdr-text-input trdr-text-input-variable\">\n  <input type=\"text\" value=\"WINFUT\" />\n</div>\n\n<!-- Multi Line -->\n<div class=\"trdr-text-input trdr-text-input-multiline\">\n  <textarea rows=\"3\" placeholder=\"Observações...\"></textarea>\n</div>\n\n<!-- Error / Warning / Success -->\n<div class=\"trdr-text-input trdr-text-input-error\">\n  <input type=\"text\" value=\"Valor inválido\" />\n</div>\n\n<!-- Disabled -->\n<div class=\"trdr-text-input trdr-text-input-disabled\">\n  <input type=\"text\" value=\"Indisponível\" disabled />\n</div>",
+    "css": ".trdr-text-input {\n  display: inline-flex;\n  align-items: center;\n  background-color: var(--surface-primary);   /* #4A4A4A */\n  border: 1px solid transparent;\n  border-radius: 5px;                          /* fixo, não token */\n  height: 24px;\n  padding: 0 8px;\n  width: 100%;\n  box-sizing: border-box;\n  transition: border-color 0.15s ease;\n  gap: 4px;\n}\n\n.trdr-text-input:focus-within { border-color: var(--border-focus); /* #00D4FF */ }\n\n.trdr-text-input-lg         { height: 32px; }\n.trdr-text-input-icon       { padding: 0; gap: 0; }\n.trdr-text-input-lg.trdr-text-input-icon { padding: 0 4px; gap: 0; }\n\n.trdr-text-input-quick { height: 32px; padding: 0 4px; gap: 8px; }\n\n.trdr-text-input-variable {\n  padding: 0 4px;\n  border-color: var(--border-strong);          /* #A4A4A4 — sempre visível */\n}\n.trdr-text-input-variable:focus-within { border-color: var(--border-focus); }\n\n.trdr-text-input-multiline {\n  height: auto; min-height: 56px;\n  align-items: flex-start; padding: 4px 8px;\n  border-color: var(--border-strong);          /* #A4A4A4 */\n}\n.trdr-text-input-multiline:focus-within { border-color: var(--border-focus); }\n\n.trdr-text-input-error,   .trdr-text-input-error:focus-within   { border-color: var(--content-error); }\n.trdr-text-input-warning, .trdr-text-input-warning:focus-within { border-color: var(--content-warning); }\n.trdr-text-input-success, .trdr-text-input-success:focus-within { border-color: var(--content-success); }\n\n.trdr-text-input-disabled,\n.trdr-text-input-disabled:focus-within { border-color: var(--border-strong); cursor: not-allowed; }\n\n/* Single Line (Default + Large): 14px / 400 */\n.trdr-text-input input {\n  flex: 1; min-width: 0; background: transparent;\n  border: none; outline: none;\n  color: var(--content-primary);              /* #FFFFFF */\n  font-size: 14px; font-weight: 400; letter-spacing: 0; line-height: 1.2;\n  padding: 0; width: 100%;\n}\n\n/* Textarea (Multi Line): 11px / 450 */\n.trdr-text-input textarea {\n  flex: 1; min-width: 0; background: transparent;\n  border: none; outline: none;\n  color: var(--content-primary);              /* #FFFFFF */\n  font-size: 11px; font-weight: 450; letter-spacing: 0.055px; line-height: 16px;\n  padding: 0; width: 100%; resize: none;\n}\n\n.trdr-text-input input::placeholder,\n.trdr-text-input textarea::placeholder { color: var(--content-tertiary); /* #A4A4A4 */ }\n\n/* Quick Action: 11px / 450 / cor tertiary */\n.trdr-text-input-quick input {\n  font-size: 11px; font-weight: 450; letter-spacing: 0.055px; line-height: 16px;\n  color: var(--content-tertiary);             /* #A4A4A4 */\n}\n\n/* Variable: 11px / 450 */\n.trdr-text-input-variable input {\n  font-size: 11px; font-weight: 450; letter-spacing: 0.055px; line-height: 16px;\n}\n\n.trdr-text-input-disabled input,\n.trdr-text-input-disabled textarea { color: var(--content-disabled); cursor: not-allowed; }",
+    "react": "import TextInput from '@/components/ui/TextInput'\n\n// Single Line Default (14px/400)\n<TextInput placeholder=\"Placeholder\" />\n\n// Single Line Large (14px/400, 32px height)\n<TextInput size=\"large\" placeholder=\"Placeholder\" />\n\n// Com ícone e clear\nconst [val, setVal] = useState('')\n<TextInput\n  iconLeft\n  placeholder=\"Buscar instrumento...\"\n  value={val}\n  onChange={e => setVal(e.target.value)}\n  onClear={() => setVal('')}\n/>\n\n// Quick Action (toolbar) — texto tertiary, 11px\n<TextInput\n  variant=\"quick-action\"\n  placeholder=\"Filtrar...\"\n  value={val}\n  onChange={e => setVal(e.target.value)}\n  onClear={() => setVal('')}\n/>\n\n// Variable state — borda sempre visível, 11px\n<TextInput isVariable value=\"WINFUT\" />\n\n// Multi Line (textarea, 11px/450)\n<TextInput\n  variant=\"multi-line\"\n  rows={4}\n  placeholder=\"Observações...\"\n  value={val}\n  onChange={e => setVal(e.target.value)}\n/>\n\n// Validação\n<TextInput validation=\"error\" value=\"Valor inválido\" />\n<TextInput validation=\"warning\" value=\"Verifique\" />\n<TextInput validation=\"success\" value=\"Confirmado\" />\n\n// Disabled / Read Only\n<TextInput disabled value=\"Indisponível\" />\n<TextInput readOnly value=\"Somente leitura\" />",
+    "prompt": "Implemente o componente TextInput do Design System TRDR.\n\nVARIANTES:\n- single-line (padrão): <input type=\"text\"> dentro de um wrapper div\n- multi-line: <textarea> dentro do wrapper, altura auto (min 56px)\n- quick-action: como single-line mas sempre com icon-left, padding compacto\n- variable (isVariable=true): input de fórmula com borda sempre visível e padding compacto\n\nTIPOGRAFIA (confirmada no Figma node 1327:17000):\n- Single Line Default e Large: font-size 14px, font-weight 400, letter-spacing 0, line-height 1.2\n- Multi Line: font-size 11px, font-weight 450, letter-spacing 0.055px, line-height 16px\n- Quick Action: font-size 11px, font-weight 450, letter-spacing 0.055px, line-height 16px\n- Variable: font-size 11px, font-weight 450, letter-spacing 0.055px, line-height 16px\n\nTAMANHOS:\n- default: height 24px, padding 0 8px, gap 4px\n- large:   height 32px, padding 0 8px (sem icon) / 0 4px (com icon), gap 0\n- Quick Action é sempre large (32px), padding 0 4px, gap 8px\n\nTOKENS OBRIGATÓRIOS:\n- Background: --surface-primary (#4A4A4A)\n- Border focus: --border-focus (#00D4FF) — via :focus-within no wrapper\n- Border multi-line/variable/disabled: --border-strong (#A4A4A4)\n- Texto Single Line: --content-primary (#FFFFFF)\n- Texto Quick Action: --content-tertiary (#A4A4A4) — texto em cor tertiary por design\n- Placeholder: --content-tertiary (#A4A4A4)\n- Texto disabled: --content-disabled (#4A4A4A)\n- Border error: --content-error (#F34F45)\n- Border warning: --content-warning (#FFD35A)\n- Border success: --content-success (#4FE290)\n\nBORDER RADIUS: 5px FIXO (não usar token de radius)\n\nICON LEFT:\n- Container 24×24px, ícone de busca SVG 13px centralizado\n- Quick Action sempre tem icon, Single Line e Large são opcionais\n- Com icon: wrapper sem padding (0) e gap=0 em Default | padding 0 4px, gap=0 em Large\n\nBOTÃO CLEAR (X):\n- Aparece apenas quando iconLeft=true + value não vazio + não disabled + não readOnly\n- Container 24×24px, SVG X 11px, cor content-tertiary, hover: content-primary\n- tabIndex={-1} para não receber foco via tab\n\nVARIABLE STATE:\n- Wrapper padding: 0 4px (reduzido vs 0 8px do default)\n- Border: border-strong (#A4A4A4) sempre visível (mesmo sem foco)\n- Em foco: substitui por border-focus (#00D4FF)\n\nMULTI LINE:\n- Border default sempre visível: var(--border-strong)\n- padding: 4px 8px\n- Textarea com resize: none\n\nESTADOS CSS:\n- :focus-within no wrapper = borda focus (não no input/textarea)\n- disabled: borda strong + cursor not-allowed em wrapper E input/textarea\n- readOnly: sem borda adicional, cursor default\n- Validação: error/warning/success sobrescreve a borda (inclusive no focus)\n\nResultado deve ser pixel-perfect em relação ao Figma node 1327:17000."
+  },
+  "dependencies": []
+}

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

@@ -0,0 +1,88 @@
+{
+  "slug": "tooltip",
+  "name": "Tooltip",
+  "figmaId": "1618:23706",
+  "category": "formulario",
+  "description": "Balão de ajuda contextual com seta direcional. 8 direções. Padding 12×8px, bg-primary, max-width 200px.",
+  "props": [
+    {
+      "name": "Direction",
+      "type": "enum",
+      "values": [
+        "TopCenter",
+        "TopLeft",
+        "TopRight",
+        "BottomCenter",
+        "BottomLeft",
+        "BottomRight",
+        "Right",
+        "Left"
+      ]
+    },
+    {
+      "name": "Hotkey",
+      "type": "boolean",
+      "values": [
+        "true",
+        "false"
+      ]
+    }
+  ],
+  "dimensions": [
+    {
+      "label": "Padding H",
+      "width": "12px",
+      "height": "—"
+    },
+    {
+      "label": "Padding V",
+      "height": "8px"
+    },
+    {
+      "label": "Seta (caret)",
+      "width": "12px",
+      "height": "6px"
+    },
+    {
+      "label": "Max width",
+      "width": "200px",
+      "height": "—"
+    }
+  ],
+  "tokens": [
+    {
+      "property": "Background",
+      "token": "bg-primary",
+      "value": "#0E0E0E"
+    },
+    {
+      "property": "Texto",
+      "token": "content-primary",
+      "value": "#FFFFFF"
+    },
+    {
+      "property": "Hotkey",
+      "token": "content-secondary",
+      "value": "#E8E8E8"
+    },
+    {
+      "property": "Seta",
+      "token": "bg-primary",
+      "value": "#0E0E0E"
+    },
+    {
+      "property": "Shadow",
+      "token": "—",
+      "value": "drop-shadow 0.25px + 1.5px + 6px"
+    }
+  ],
+  "anatomy": "[div role=tooltip position=relative border-radius=5px]\n  └── [Content: flex gap=4px padding=8px/12px]\n        └── [Texto flex=1]\n        └── [Hotkey opcional]\n  └── [Seta 12×6px CSS clip-path absolute]",
+  "implemented": true,
+  "code": {
+    "html": "<!-- TopCenter -->\n<div class=\"trdr-tooltip trdr-tooltip-top-center\" role=\"tooltip\">\n  <div class=\"trdr-tooltip-content\">\n    <span>Tooltip text</span>\n    <span class=\"trdr-tooltip-hotkey\">⌘V</span>\n  </div>\n  <span class=\"trdr-tooltip-arrow trdr-tooltip-arrow-up\" aria-hidden=\"true\"></span>\n</div>\n\n<!-- BottomLeft -->\n<div class=\"trdr-tooltip trdr-tooltip-bottom-left\" role=\"tooltip\">\n  <div class=\"trdr-tooltip-content\">\n    <span>Alinhar à esquerda</span>\n  </div>\n  <span class=\"trdr-tooltip-arrow trdr-tooltip-arrow-down\" aria-hidden=\"true\"></span>\n</div>",
+    "css": ".trdr-tooltip {\n  position: relative;\n  display: inline-flex; flex-direction: column; align-items: center;\n  max-width: 200px;\n  background-color: var(--bg-primary);  /* #0E0E0E */\n  border-radius: 5px;\n  filter: drop-shadow(0px 0px 0.25px rgba(0,0,0,0.15)) drop-shadow(0px 5px 6px rgba(0,0,0,0.13));\n}\n\n.trdr-tooltip-content {\n  display: flex; align-items: center; gap: var(--spacing-xs);\n  padding: var(--spacing-sm) var(--spacing-md);  /* 8px / 12px */\n  font-family: var(--font-secondary); font-size: 12px; font-weight: 500;\n  color: var(--content-primary); white-space: nowrap;\n}\n\n.trdr-tooltip-hotkey { color: var(--content-secondary); }\n\n.trdr-tooltip-arrow {\n  position: absolute;\n  width: 12px; height: 6px;\n  background-color: var(--bg-primary);\n}\n\n.trdr-tooltip-arrow-up    { clip-path: polygon(50% 0%, 0% 100%, 100% 100%); }\n.trdr-tooltip-arrow-down  { clip-path: polygon(0% 0%, 100% 0%, 50% 100%); }\n.trdr-tooltip-arrow-left  { width: 6px; height: 12px; clip-path: polygon(0% 50%, 100% 0%, 100% 100%); }\n.trdr-tooltip-arrow-right { width: 6px; height: 12px; clip-path: polygon(0% 0%, 100% 50%, 0% 100%); }\n\n.trdr-tooltip-top-center    .trdr-tooltip-arrow { top: -6px; left: 50%; transform: translateX(-50%); }\n.trdr-tooltip-top-left      .trdr-tooltip-arrow { top: -6px; left: 8px; }\n.trdr-tooltip-top-right     .trdr-tooltip-arrow { top: -6px; right: 8px; }\n.trdr-tooltip-bottom-center .trdr-tooltip-arrow { bottom: -6px; left: 50%; transform: translateX(-50%); }\n.trdr-tooltip-bottom-left   .trdr-tooltip-arrow { bottom: -6px; left: 8px; }\n.trdr-tooltip-bottom-right  .trdr-tooltip-arrow { bottom: -6px; right: 8px; }\n.trdr-tooltip-right         .trdr-tooltip-arrow { top: 50%; right: -6px; transform: translateY(-50%); }\n.trdr-tooltip-left          .trdr-tooltip-arrow { top: 50%; left: -6px; transform: translateY(-50%); }",
+    "react": "import Tooltip from '@/components/ui/Tooltip'\n\nexport default function Example() {\n  return (\n    <>\n      <Tooltip text=\"Salvar\" hotkey=\"⌘S\" direction=\"top-center\" />\n      <Tooltip text=\"Alinhar à esquerda\" direction=\"bottom-left\" />\n      <Tooltip text=\"Mais opções\" direction=\"right\" />\n      <Tooltip text=\"Voltar\" direction=\"left\" />\n    </>\n  )\n}",
+    "prompt": "Implemente o componente Tooltip do Design System TRDR.\n\nESPECIFICAÇÕES PIXEL-PERFECT:\n- Background: --bg-primary (#0E0E0E)\n- Border-radius: 5px\n- Padding: 8px vertical, 12px horizontal (--spacing-sm / --spacing-md)\n- Max-width: 200px\n- Font: 12px / 500 / --font-secondary\n- Seta (caret): 12×6px via CSS clip-path, bg = --bg-primary\n\nTOKENS OBRIGATÓRIOS:\n- Background + seta: --bg-primary (#0E0E0E)\n- Texto: --content-primary (#FFFFFF)\n- Hotkey: --content-secondary (#E8E8E8)\n- Shadow: filter drop-shadow multicamadas\n\nSETAS CSS POR DIREÇÃO:\n- top-*: seta acima, clip-path polygon(50% 0%, 0% 100%, 100% 100%), top=-6px\n- bottom-*: seta abaixo, clip-path polygon(0% 0%, 100% 0%, 50% 100%), bottom=-6px\n- left/right: seta lateral 6×12px, posicionada em top=50%\n- Alinhamentos: center=50%+translateX, left=8px, right=8px"
+  },
+  "dependencies": []
+}