trdr-ds-install 1.11.0 → 2.0.0

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

@@ -0,0 +1,82 @@
+{
+  "slug": "checkbox",
+  "name": "Checkbox",
+  "figmaId": "1462:18059",
+  "category": "formulario",
+  "description": "Caixa de seleção com 3 estados: Checked, Unchecked e Mixed (indeterminado). 16×16px, border-radius 5px.",
+  "props": [
+    {
+      "name": "Type",
+      "type": "enum",
+      "values": [
+        "Checked",
+        "Unchecked",
+        "Mixed"
+      ]
+    },
+    {
+      "name": "State",
+      "type": "enum",
+      "values": [
+        "Default",
+        "Focused"
+      ]
+    },
+    {
+      "name": "Disabled",
+      "type": "boolean",
+      "values": [
+        "true",
+        "false"
+      ]
+    }
+  ],
+  "dimensions": [
+    {
+      "label": "Box",
+      "width": "16px",
+      "height": "16px"
+    }
+  ],
+  "tokens": [
+    {
+      "property": "BG Checked / Mixed",
+      "token": "action-brand-default",
+      "value": "#00D4FF"
+    },
+    {
+      "property": "BG Unchecked",
+      "token": "surface-secondary",
+      "value": "#222222"
+    },
+    {
+      "property": "Border padrão",
+      "token": "border-default",
+      "value": "#4A4A4A"
+    },
+    {
+      "property": "Border hover",
+      "token": "border-strong",
+      "value": "#A4A4A4"
+    },
+    {
+      "property": "Focus ring",
+      "token": "border-focus",
+      "value": "#00D4FF"
+    },
+    {
+      "property": "Check / Dash",
+      "token": "—",
+      "value": "#FFFFFF"
+    }
+  ],
+  "anatomy": "[label cursor=pointer gap=8px]\n  └── [input type=checkbox hidden]\n  └── [Box 16×16px border-radius=5px]\n        └── [Checkmark SVG 8×7px | Dash SVG 8×2px (mixed)]\n  └── [Label 12px/500]",
+  "implemented": true,
+  "code": {
+    "html": "<!-- Checked -->\n<label class=\"trdr-checkbox\">\n  <input type=\"checkbox\" checked />\n  <span class=\"trdr-checkbox-box trdr-checkbox-checked\">\n    <svg width=\"8\" height=\"7\" viewBox=\"0 0 8 7\" fill=\"none\">\n      <path d=\"M1 3L3 5.5L7 1\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  </span>\n  <span>Aceitar termos</span>\n</label>\n\n<!-- Unchecked -->\n<label class=\"trdr-checkbox\">\n  <input type=\"checkbox\" />\n  <span class=\"trdr-checkbox-box\"></span>\n  <span>Receber atualizações</span>\n</label>\n\n<!-- Mixed (indeterminado) -->\n<label class=\"trdr-checkbox\">\n  <input type=\"checkbox\" />\n  <span class=\"trdr-checkbox-box trdr-checkbox-checked trdr-checkbox-mixed\">\n    <svg width=\"8\" height=\"2\" viewBox=\"0 0 8 2\" fill=\"none\">\n      <path d=\"M1 1H7\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n    </svg>\n  </span>\n  <span>Selecionar todos</span>\n</label>",
+    "css": ".trdr-checkbox {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  cursor: pointer;\n  user-select: none;\n}\n\n.trdr-checkbox-box {\n  flex-shrink: 0;\n  width: 16px; height: 16px;\n  border-radius: 5px;                        /* Não é --radius-sm */\n  border: 1px solid var(--border-default);   /* #4A4A4A */\n  background: var(--surface-secondary);      /* #222222 */\n  display: flex; align-items: center; justify-content: center;\n  transition: background 0.12s ease, border-color 0.12s ease;\n}\n\n.trdr-checkbox:hover .trdr-checkbox-box { border-color: var(--border-strong); }\n\n.trdr-checkbox-box.trdr-checkbox-checked {\n  background: var(--action-brand-default);   /* #00D4FF */\n  border-color: var(--action-brand-default);\n}\n\n.trdr-checkbox input:focus-visible ~ .trdr-checkbox-box {\n  outline: 2px solid var(--border-focus);    /* #00D4FF */\n  outline-offset: 2px;\n}",
+    "react": "import Checkbox from '@/components/ui/Checkbox'\nimport { useState } from 'react'\n\nexport default function Example() {\n  const [terms, setTerms] = useState(false)\n  const [updates, setUpdates] = useState<boolean | 'mixed'>('mixed')\n\n  return (\n    <>\n      <Checkbox checked={terms} onChange={setTerms} label=\"Aceitar termos\" />\n      <Checkbox checked={updates} onChange={(v) => setUpdates(v)} label=\"Selecionar todos\" />\n      <Checkbox checked={false} onChange={() => {}} label=\"Desativado\" disabled />\n    </>\n  )\n}",
+    "prompt": "Implemente o componente Checkbox do Design System TRDR.\n\nESPECIFICAÇÕES PIXEL-PERFECT:\n- Box: 16×16px, border-radius: 5px (fixo, não token)\n- Gap label: 8px\n- Checkmark SVG: 8×7px, traço branco (stroke 1.5)\n- Mixed (indeterminado): traço horizontal 8×2px branco\n\nTOKENS OBRIGATÓRIOS:\n- BG Checked/Mixed: --action-brand-default (#00D4FF)\n- BG Unchecked: --surface-secondary (#222222)\n- Border padrão: --border-default (#4A4A4A)\n- Border hover: --border-strong (#A4A4A4)\n- Focus ring: outline 2px --border-focus (#00D4FF) offset 2px\n- Check/Dash: #FFFFFF\n\nESTADOS:\n- checked=true: bg + border = action-brand-default, checkmark SVG visível\n- checked='mixed': mesmo visual de checked + dash horizontal\n- :hover → border-strong\n- :focus-visible → outline border-focus\n- disabled: opacity 0.5, cursor not-allowed"
+  },
+  "dependencies": []
+}

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

@@ -0,0 +1,79 @@
+{
+  "slug": "combo-input",
+  "name": "Combo Input",
+  "figmaId": "1551:11643",
+  "category": "formulario",
+  "description": "Input numérico split: área de valor (flex-1) + botão chevron (24×24px) separados por 1px gap. Altura 24px.",
+  "props": [
+    {
+      "name": "State",
+      "type": "enum",
+      "values": [
+        "Default",
+        "Hover",
+        "Selected Input",
+        "Selected Chevron"
+      ]
+    },
+    {
+      "name": "Icon Lead",
+      "type": "boolean",
+      "values": [
+        "true",
+        "false"
+      ]
+    }
+  ],
+  "dimensions": [
+    {
+      "label": "Altura",
+      "height": "24px"
+    },
+    {
+      "label": "Chevron",
+      "width": "24px",
+      "height": "24px"
+    }
+  ],
+  "tokens": [
+    {
+      "property": "BG value",
+      "token": "surface-primary",
+      "value": "#4A4A4A"
+    },
+    {
+      "property": "BG chevron default",
+      "token": "surface-primary",
+      "value": "#4A4A4A"
+    },
+    {
+      "property": "Chevron border",
+      "token": "border-focus",
+      "value": "#00D4FF"
+    },
+    {
+      "property": "Border hover",
+      "token": "border-strong",
+      "value": "#A4A4A4"
+    },
+    {
+      "property": "Selected chevron bg",
+      "token": "surface-brand",
+      "value": "#00D4FF29"
+    },
+    {
+      "property": "Texto",
+      "token": "content-primary",
+      "value": "#FFFFFF"
+    }
+  ],
+  "anatomy": "[div display=flex gap=1px height=24px]\n  └── [Input Value: flex=1, radius=5px 0 0 5px, bg=surface-primary]\n        └── [Icon Lead 24×24px opcional]\n        └── [Valor numérico 12px/500]\n  └── [Chevron: 24×24px, radius=0 5px 5px 0, border=border-focus]\n        └── [ChevronDown SVG]",
+  "implemented": true,
+  "code": {
+    "html": "<!-- Default -->\n<div class=\"trdr-combo-input\">\n  <div class=\"trdr-combo-input-value\">16</div>\n  <button class=\"trdr-combo-input-chevron\" aria-label=\"Abrir opções\">\n    <svg width=\"10\" height=\"6\" viewBox=\"0 0 10 6\" fill=\"none\">\n      <path d=\"M1 1L5 5L9 1\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  </button>\n</div>\n\n<!-- Hover -->\n<div class=\"trdr-combo-input trdr-combo-input-hover\">\n  <div class=\"trdr-combo-input-value\">16</div>\n  <button class=\"trdr-combo-input-chevron\">...</button>\n</div>\n\n<!-- Selected Input -->\n<div class=\"trdr-combo-input trdr-combo-input-selected-input\">\n  <div class=\"trdr-combo-input-value\">16</div>\n  <button class=\"trdr-combo-input-chevron\">...</button>\n</div>",
+    "css": ".trdr-combo-input {\n  display: inline-flex;\n  align-items: stretch;\n  gap: 1px;                        /* Split visual */\n  height: 24px;\n  font-family: var(--font-secondary);\n  font-size: 12px; font-weight: 500;\n  color: var(--content-primary);\n}\n\n.trdr-combo-input-value {\n  flex: 1;\n  display: flex; align-items: center;\n  background-color: var(--surface-primary);  /* #4A4A4A */\n  border: 1px solid transparent;\n  border-right: none;\n  border-radius: 5px 0 0 5px;\n  padding: 0 0 0 var(--spacing-sm);\n  transition: border-color 0.12s ease;\n}\n\n.trdr-combo-input-chevron {\n  width: 24px; height: 24px;\n  display: flex; align-items: center; justify-content: center;\n  background-color: var(--surface-primary);\n  border: 1px solid var(--border-focus);   /* Sempre com borda focus */\n  border-radius: 0 5px 5px 0;\n  cursor: pointer;\n  color: var(--content-tertiary);\n}\n\n.trdr-combo-input-hover .trdr-combo-input-value { border-color: var(--border-strong); }\n.trdr-combo-input-selected-input .trdr-combo-input-value { border-color: var(--border-focus); }\n.trdr-combo-input-selected-input .trdr-combo-input-chevron { border-color: transparent; }\n.trdr-combo-input-selected-chevron .trdr-combo-input-chevron { background: var(--surface-brand); }",
+    "react": "import ComboInput from '@/components/ui/ComboInput'\nimport { useState } from 'react'\n\nexport default function Example() {\n  const [value, setValue] = useState('16')\n\n  return (\n    <>\n      <ComboInput value={value} />\n      <ComboInput value=\"32\" state=\"hover\" />\n      <ComboInput value=\"8\" state=\"selected-input\" />\n      <ComboInput value=\"16\" state=\"selected-chevron\" onChevronClick={() => console.log('abrir menu')} />\n    </>\n  )\n}",
+    "prompt": "Implemente o componente ComboInput do Design System TRDR.\n\nESPECIFICAÇÕES PIXEL-PERFECT:\n- Container: display=flex, gap=1px, height=24px\n- Input Value: flex=1, padding-left=8px, border-radius=5px 0 0 5px\n- Chevron: width=24px, height=24px, border-radius=0 5px 5px 0\n\nTOKENS OBRIGATÓRIOS:\n- BG ambas as seções: --surface-primary (#4A4A4A)\n- Chevron border PADRÃO: --border-focus (#00D4FF) — SEMPRE ciano por padrão\n- Border hover: --border-strong (#A4A4A4) na seção input\n- Selected Input: border-focus na seção input, chevron sem borda\n- Selected Chevron: --surface-brand (#00D4FF29) no chevron\n\nCOMPORTAMENTO:\n- O gap de 1px entre seções cria o \"split\" visual\n- O chevron sempre tem borda focus no estado default (design TRDR)\n- Selecionar o input ativa borda focus na seção esquerda"
+  },
+  "dependencies": []
+}

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

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

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

@@ -0,0 +1,94 @@
+{
+  "slug": "dropdown",
+  "name": "Dropdown",
+  "figmaId": "1462:16743",
+  "category": "formulario",
+  "description": "Seletor com chevron, 2 tamanhos (Default 24px / Large 32px) e 3 estados. Suporta stroke, sem stroke e icon lead. Abre um floating menu com opções.",
+  "props": [
+    {
+      "name": "Size",
+      "type": "enum",
+      "values": [
+        "Default",
+        "Large"
+      ]
+    },
+    {
+      "name": "State",
+      "type": "enum",
+      "values": [
+        "Default",
+        "Focused",
+        "Active",
+        "Disabled"
+      ]
+    },
+    {
+      "name": "Stroke",
+      "type": "boolean",
+      "values": [
+        "true",
+        "false"
+      ]
+    },
+    {
+      "name": "Icon Lead",
+      "type": "boolean",
+      "values": [
+        "true",
+        "false"
+      ]
+    }
+  ],
+  "dimensions": [
+    {
+      "label": "Default",
+      "height": "24px"
+    },
+    {
+      "label": "Large",
+      "height": "32px"
+    }
+  ],
+  "tokens": [
+    {
+      "property": "Background",
+      "token": "surface-primary",
+      "value": "#4A4A4A"
+    },
+    {
+      "property": "Border padrão",
+      "token": "border-strong",
+      "value": "#A4A4A4"
+    },
+    {
+      "property": "Border focused/active",
+      "token": "border-focus",
+      "value": "#00D4FF"
+    },
+    {
+      "property": "Texto",
+      "token": "content-primary",
+      "value": "#FFFFFF"
+    },
+    {
+      "property": "Texto disabled",
+      "token": "content-tertiary",
+      "value": "#A4A4A4"
+    },
+    {
+      "property": "Chevron",
+      "token": "content-tertiary",
+      "value": "#A4A4A4"
+    }
+  ],
+  "anatomy": "[button display=inline-flex border-radius=5px]\n  └── [Icon Lead 24×24px opcional]\n  └── [Label flex=1 overflow=ellipsis]\n  └── [Chevron Down 24×24px]",
+  "implemented": true,
+  "code": {
+    "html": "<!-- Default -->\n<button class=\"trdr-dropdown\">\n  <span class=\"trdr-dropdown-label\">Mercado</span>\n  <span class=\"trdr-dropdown-chevron\">\n    <svg width=\"10\" height=\"6\" viewBox=\"0 0 10 6\" fill=\"none\">\n      <path d=\"M1 1L5 5L9 1\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  </span>\n</button>\n\n<!-- Large -->\n<button class=\"trdr-dropdown trdr-dropdown-lg\">\n  <span class=\"trdr-dropdown-label\">Instrumento</span>\n  <span class=\"trdr-dropdown-chevron\">...</span>\n</button>\n\n<!-- Disabled -->\n<button class=\"trdr-dropdown\" disabled>\n  <span class=\"trdr-dropdown-label\">Indisponível</span>\n  <span class=\"trdr-dropdown-chevron\">...</span>\n</button>",
+    "css": ".trdr-dropdown {\n  display: inline-flex;\n  align-items: center;\n  background-color: var(--surface-primary);   /* #4A4A4A */\n  border: 1px solid var(--border-strong);      /* #A4A4A4 */\n  border-radius: 5px;\n  height: 24px;\n  padding: 0 4px 0 var(--spacing-sm);         /* right=4px, left=8px */\n  font-family: var(--font-secondary);\n  font-size: 12px;\n  font-weight: 500;\n  color: var(--content-primary);              /* #FFFFFF */\n  cursor: pointer;\n  min-width: 80px;\n  transition: border-color 0.15s ease;\n}\n\n.trdr-dropdown-lg       { height: 32px; }\n.trdr-dropdown-no-stroke { border-color: transparent; }\n.trdr-dropdown-active   { border-color: var(--border-focus); } /* #00D4FF */\n\n.trdr-dropdown:hover:not(:disabled) { border-color: var(--border-focus); }\n.trdr-dropdown:focus-visible        { outline: none; border-color: var(--border-focus); }\n.trdr-dropdown:disabled             { color: var(--content-tertiary); cursor: not-allowed; }\n\n.trdr-dropdown-label {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.trdr-dropdown-chevron {\n  flex-shrink: 0;\n  width: 24px; height: 24px;\n  display: flex; align-items: center; justify-content: center;\n  color: var(--content-tertiary);\n}",
+    "react": "import Dropdown from '@/components/ui/Dropdown'\nimport { useState } from 'react'\n\nexport default function Example() {\n  const [value, setValue] = useState('WINQ25')\n\n  return (\n    <>\n      {/* Default size */}\n      <Dropdown value={value} size=\"default\" />\n\n      {/* Large size */}\n      <Dropdown value=\"WINFUT\" size=\"lg\" />\n\n      {/* Sem borda */}\n      <Dropdown value=\"Mercado\" stroke={false} />\n\n      {/* Disabled */}\n      <Dropdown value=\"Indisponível\" disabled />\n\n      {/* Active (aberto) */}\n      <Dropdown value={value} state=\"active\" />\n    </>\n  )\n}",
+    "prompt": "Implemente o componente Dropdown do Design System TRDR.\n\nESPECIFICAÇÕES PIXEL-PERFECT:\n- Default: 24px altura | Large: 32px altura\n- Padding: left=8px (--spacing-sm), right=4px\n- Border-radius: 5px (não é --radius-sm, é 5px fixo)\n- Font: 12px / 500 / --font-secondary\n\nTOKENS OBRIGATÓRIOS:\n- Background: --surface-primary (#4A4A4A)\n- Border padrão: --border-strong (#A4A4A4)\n- Border focused/active: --border-focus (#00D4FF)\n- Texto: --content-primary (#FFFFFF)\n- Texto disabled: --content-tertiary (#A4A4A4)\n- Chevron: --content-tertiary (#A4A4A4)\n\nESTRUTURA:\n- Container: button com flex, border, bg\n- Label: flex=1 com text-overflow ellipsis\n- Chevron: 24×24px, SVG path chevron-down\n\nCOMPORTAMENTO:\n- :hover → border-color: --border-focus\n- :focus-visible → outline: none, border-color: --border-focus\n- .trdr-dropdown-active → border-color: --border-focus\n- :disabled → content-tertiary, cursor not-allowed\n- Variante sem-stroke: border-color transparent"
+  },
+  "dependencies": []
+}

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

@@ -0,0 +1,151 @@
+{
+  "slug": "floating-menu",
+  "name": "Floating Menu",
+  "figmaId": "1921:55380",
+  "category": "floating-menu",
+  "implemented": true,
+  "description": "Menu flutuante genérico do TRDR — compound component com Item, Title e Divider. Cobre desde listas simples de ações até menus seccionados com ícones Material Symbols. Usado em Janela, seletor de ativo, configurações, indicadores e notificações.",
+  "props": [
+    {
+      "name": "width",
+      "type": "number | string",
+      "values": [
+        "172",
+        "240",
+        "260",
+        "280",
+        "300",
+        "auto"
+      ]
+    },
+    {
+      "name": "children",
+      "type": "ReactNode",
+      "values": [
+        "FloatingMenu.Item, FloatingMenu.Title, FloatingMenu.Divider, custom content"
+      ]
+    },
+    {
+      "name": "Item.icon",
+      "type": "string",
+      "values": [
+        "nome do Material Symbols (ex: \"close\", \"star\", \"search\")"
+      ]
+    },
+    {
+      "name": "Item.disabled",
+      "type": "boolean",
+      "values": [
+        "true",
+        "false"
+      ]
+    },
+    {
+      "name": "Item.onClick",
+      "type": "function",
+      "values": [
+        "() => void"
+      ]
+    },
+    {
+      "name": "Title.size",
+      "type": "enum",
+      "values": [
+        "\"default\" (14px)",
+        "\"sm\" (10px)"
+      ]
+    }
+  ],
+  "dimensions": [
+    {
+      "label": "Item height",
+      "width": "—",
+      "height": "32px"
+    },
+    {
+      "label": "Menu padding",
+      "width": "8px",
+      "height": "8px"
+    },
+    {
+      "label": "Ações da janela (5 itens)",
+      "width": "172px",
+      "height": "192px"
+    },
+    {
+      "label": "Notificações (4 itens)",
+      "width": "300px",
+      "height": "182px"
+    },
+    {
+      "label": "Configurações (5 itens + dropdown)",
+      "width": "260px",
+      "height": "239px"
+    }
+  ],
+  "tokens": [
+    {
+      "property": "Menu background",
+      "token": "bg.secondary",
+      "value": "#141519"
+    },
+    {
+      "property": "Menu border",
+      "token": "border.subtle",
+      "value": "#222222"
+    },
+    {
+      "property": "Menu border-radius",
+      "token": "radius.md",
+      "value": "8px"
+    },
+    {
+      "property": "Item border-radius",
+      "token": "radius.sm",
+      "value": "4px"
+    },
+    {
+      "property": "Item label color",
+      "token": "content.secondary",
+      "value": "#E8E8E8"
+    },
+    {
+      "property": "Item icon color",
+      "token": "content.tertiary",
+      "value": "#A4A4A4"
+    },
+    {
+      "property": "Item hover background",
+      "token": "surface.secondary",
+      "value": "#222222"
+    },
+    {
+      "property": "Title color",
+      "token": "content.tertiary",
+      "value": "#A4A4A4"
+    },
+    {
+      "property": "Divider color",
+      "token": "border.subtle",
+      "value": "#222222"
+    },
+    {
+      "property": "Menu gap",
+      "token": "spacing.xs",
+      "value": "4px"
+    },
+    {
+      "property": "Item padding",
+      "token": "spacing.sm",
+      "value": "8px"
+    }
+  ],
+  "anatomy": "Container: bg-secondary, border-subtle, radius-md 8px, shadow 0 4px 12px rgba(0,0,0,0.3), padding 8px, gap 4px\n\nFloatingMenu.Title — rótulo de seção: content-tertiary, 14px (padrão) ou 10px (size=\"sm\"), padding-left 8px\nFloatingMenu.Item — botão: 32px height, padding 0 8px, gap 8px, radius-sm 4px\n  └ [Icon?: 20px Material Symbols Outlined, content-tertiary] [Label: Inter 14px, content-secondary, flex-1]\n  └ :hover → background surface-secondary | :disabled → opacity 0.45, cursor not-allowed\nFloatingMenu.Divider — separador: 1px solid border-subtle, full-width",
+  "code": {
+    "html": "<!-- Floating Menu TRDR — HTML com classes globais -->\n\n<!-- Exemplo 1: ações simples (sem título) -->\n<div class=\"trdr-floating-menu\" style=\"width:172px\" role=\"menu\">\n  <button class=\"trdr-floating-menu-item\" role=\"menuitem\">\n    <span class=\"material-symbols-outlined\" style=\"font-size:20px;line-height:20px;font-variation-settings:'FILL' 0,'GRAD' 0;color:var(--content-tertiary)\">close</span>\n    Fechar\n  </button>\n  <button class=\"trdr-floating-menu-item\" role=\"menuitem\">\n    <span class=\"material-symbols-outlined\" style=\"font-size:20px;line-height:20px;font-variation-settings:'FILL' 0,'GRAD' 0;color:var(--content-tertiary)\">remove</span>\n    Minimizar\n  </button>\n  <button class=\"trdr-floating-menu-item\" role=\"menuitem\">\n    <span class=\"material-symbols-outlined\" style=\"font-size:20px;line-height:20px;font-variation-settings:'FILL' 0,'GRAD' 0;color:var(--content-tertiary)\">keep</span>\n    Fixar\n  </button>\n</div>\n\n<!-- Exemplo 2: com título, divisor e seções -->\n<div class=\"trdr-floating-menu\" style=\"width:240px\" role=\"menu\">\n  <p class=\"trdr-floating-menu-title\">Favoritos</p>\n  <button class=\"trdr-floating-menu-item\" role=\"menuitem\">\n    <span class=\"material-symbols-outlined\" style=\"font-size:20px;line-height:20px;font-variation-settings:'FILL' 0,'GRAD' 0;color:var(--content-tertiary)\">star</span>\n    WINFUT (Q19)\n  </button>\n  <button class=\"trdr-floating-menu-item\" role=\"menuitem\">\n    <span class=\"material-symbols-outlined\" style=\"font-size:20px;line-height:20px;font-variation-settings:'FILL' 0,'GRAD' 0;color:var(--content-tertiary)\">star</span>\n    PETR4\n  </button>\n  <div class=\"trdr-floating-menu-divider\" role=\"separator\"></div>\n  <p class=\"trdr-floating-menu-title\">Recentes</p>\n  <button class=\"trdr-floating-menu-item\" role=\"menuitem\">\n    <span class=\"material-symbols-outlined\" style=\"font-size:20px;line-height:20px;font-variation-settings:'FILL' 0,'GRAD' 0;color:var(--content-tertiary)\">history</span>\n    BBDC4\n  </button>\n  <div class=\"trdr-floating-menu-divider\" role=\"separator\"></div>\n  <button class=\"trdr-floating-menu-item\" role=\"menuitem\">\n    <span class=\"material-symbols-outlined\" style=\"font-size:20px;line-height:20px;font-variation-settings:'FILL' 0,'GRAD' 0;color:var(--content-tertiary)\">search</span>\n    Buscar ativo...\n  </button>\n</div>",
+    "css": "/* Floating Menu TRDR — classes globais */\n\n/* Container */\n.trdr-floating-menu {\n  background: var(--bg-secondary);          /* #141519 */\n  border: 1px solid var(--border-subtle);   /* #222222 */\n  border-radius: var(--radius-md);          /* 8px */\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.30);\n  padding: var(--spacing-sm);               /* 8px */\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-xs);                   /* 4px */\n  overflow: hidden;\n}\n\n/* Item — botão de ação */\n.trdr-floating-menu-item {\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-sm);                   /* 8px */\n  height: 32px;\n  padding: 0 var(--spacing-sm);\n  background: transparent;\n  border: none;\n  border-radius: var(--radius-sm);          /* 4px */\n  cursor: pointer;\n  font-family: var(--font-secondary);\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 1.2;\n  color: var(--content-secondary);          /* #E8E8E8 */\n  text-align: left;\n  width: 100%;\n  flex-shrink: 0;\n  transition: background 0.12s ease;\n}\n\n.trdr-floating-menu-item:not(:disabled):hover {\n  background: var(--surface-secondary);     /* #222222 */\n}\n\n.trdr-floating-menu-item:disabled {\n  cursor: not-allowed;\n  opacity: 0.45;\n}\n\n/* Título de seção */\n.trdr-floating-menu-title {\n  color: var(--content-tertiary);           /* #A4A4A4 */\n  font-family: var(--font-secondary);\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 1.2;\n  width: 100%;\n  flex-shrink: 0;\n  padding: 0 var(--spacing-sm);\n}\n\n.trdr-floating-menu-title-sm {             /* size=\"sm\" — mercados, color-picker */\n  font-size: 10px;\n  line-height: 15px;\n  padding: 4px var(--spacing-xs) 2px;\n}\n\n/* Divisor */\n.trdr-floating-menu-divider {\n  height: 1px;\n  background: var(--border-subtle);        /* #222222 */\n  width: 100%;\n  flex-shrink: 0;\n}",
+    "react": "import FloatingMenu from '@/components/ui/FloatingMenu'\n\n// Ações simples (como na Janela)\n<FloatingMenu width={172}>\n  <FloatingMenu.Item icon=\"close\" onClick={onClose}>Fechar</FloatingMenu.Item>\n  <FloatingMenu.Item icon=\"remove\" onClick={onMinimize}>Minimizar</FloatingMenu.Item>\n  <FloatingMenu.Item icon=\"arrow_outward\" onClick={onMaximize}>Maximizar</FloatingMenu.Item>\n  <FloatingMenu.Item icon=\"keep\" onClick={onPin}>Fixar</FloatingMenu.Item>\n  <FloatingMenu.Item icon=\"edit\" onClick={onRename}>Renomear aba</FloatingMenu.Item>\n</FloatingMenu>\n\n// Com seções e divisores (como seletor de ativo)\n<FloatingMenu width={280}>\n  <FloatingMenu.Title>Favoritos</FloatingMenu.Title>\n  <FloatingMenu.Item icon=\"star\" onClick={() => selectAtivo('WINFUT')}>WINFUT (Q19)</FloatingMenu.Item>\n  <FloatingMenu.Item icon=\"star\" onClick={() => selectAtivo('PETR4')}>PETR4</FloatingMenu.Item>\n  <FloatingMenu.Divider />\n  <FloatingMenu.Title>Recentes</FloatingMenu.Title>\n  <FloatingMenu.Item icon=\"history\" onClick={() => selectAtivo('BBDC4')}>BBDC4</FloatingMenu.Item>\n  <FloatingMenu.Item icon=\"history\" onClick={() => selectAtivo('ITUB4')}>ITUB4</FloatingMenu.Item>\n  <FloatingMenu.Divider />\n  <FloatingMenu.Item icon=\"search\">Buscar ativo...</FloatingMenu.Item>\n</FloatingMenu>\n\n// Item desabilitado\n<FloatingMenu width={240}>\n  <FloatingMenu.Item icon=\"bar_chart\">Volume</FloatingMenu.Item>\n  <FloatingMenu.Item icon=\"trending_up\">Média Móvel</FloatingMenu.Item>\n  <FloatingMenu.Item icon=\"add\" disabled>Indicador premium</FloatingMenu.Item>\n</FloatingMenu>\n\n// Conteúdo customizado (qualquer ReactNode como children)\n<FloatingMenu width={260}>\n  <FloatingMenu.Title>Conta</FloatingMenu.Title>\n  <div style={{ padding: '4px 8px' }}>\n    {/* Dropdown, Checkbox, Slider, etc. */}\n  </div>\n  <FloatingMenu.Divider />\n  <FloatingMenu.Item icon=\"logout\">Sair</FloatingMenu.Item>\n</FloatingMenu>",
+    "prompt": "Implemente o componente FloatingMenu do Design System TRDR — menu flutuante genérico pixel-perfect com Figma 1921:55380.\n\nCOMPOUND COMPONENT — 4 partes:\n1. FloatingMenu (container): bg var(--bg-secondary) #141519, border 1px solid var(--border-subtle) #222, border-radius var(--radius-md) 8px, box-shadow 0 4px 12px rgba(0,0,0,0.30), padding var(--spacing-sm) 8px, gap var(--spacing-xs) 4px, flex-col, overflow hidden. Prop width?: number|string.\n\n2. FloatingMenu.Item (button): height 32px, padding 0 var(--spacing-sm) 8px, gap var(--spacing-sm) 8px, border-radius var(--radius-sm) 4px, background transparent, color var(--content-secondary) #E8E8E8, font Inter 14px/400. :hover (não disabled) → background var(--surface-secondary) #222. :disabled → opacity 0.45, cursor not-allowed. Props: icon?: string (Material Symbols name), disabled?: boolean, onClick, children.\n\n3. FloatingMenu.Title (p): color var(--content-tertiary) #A4A4A4, font Inter 14px/400. Prop size: \"default\" (14px, padding-left 8px) | \"sm\" (10px/15px, padding 4px 4px 2px — usado em mercados/color-picker). children: string.\n\n4. FloatingMenu.Divider (div): height 1px, background var(--border-subtle) #222, width 100%.\n\nICON (Material Symbols Outlined): font-family 'Material Symbols Outlined', font-size 20px, line-height 20px, font-variation-settings: 'FILL' 0 'GRAD' 0, color var(--content-tertiary) #A4A4A4, flex-shrink 0.\n\nLABEL: flex:1, min-width 0, overflow hidden, text-overflow ellipsis, white-space nowrap.\n\nAPI: import FloatingMenu from '@/components/ui/FloatingMenu'\n<FloatingMenu width={172}>\n  <FloatingMenu.Item icon=\"close\" onClick={fn}>Fechar</FloatingMenu.Item>\n  <FloatingMenu.Title>Seção</FloatingMenu.Title>\n  <FloatingMenu.Divider />\n</FloatingMenu>\n\nUse Object.assign(FloatingMenuRoot, { Item, Title, Divider }) para montar o compound component. NUNCA hex direto — apenas tokens var(--*). NUNCA --scale-spacing-* ou --scale-radius-*."
+  },
+  "dependencies": []
+}