trdr-ds-install 1.2.2 → 1.2.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/package.json +1 -1
  2. package/plugins/trdr-design-system/skills/trdr-ds/data/components.json +167 -12
  3. package/plugins/trdr-design-system/skills/trdr-ds/references/tokens.css +2 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "trdr-ds-install",
3
- "version": "1.2.2",
3
+ "version": "1.2.4",
4
4
  "description": "Installs the TRDR Design System skill for Claude Code",
5
5
  "bin": {
6
6
  "trdr-ds-install": "./bin/install.js"
package/plugins/trdr-design-system/skills/trdr-ds/data/components.json CHANGED
@@ -1,8 +1,8 @@
1
1
  {
2
2
  "version": "1.0",
3
- "generatedAt": "2026-05-11T00:35:11.146Z",
4
- "total": 14,
5
- "implemented": 14,
3
+ "generatedAt": "2026-05-11T21:56:00.879Z",
4
+ "total": 15,
5
+ "implemented": 15,
6
6
  "categories": {
7
7
  "formulario": "Formulário / Controles",
8
8
  "modal": "Modais / Overlays",
@@ -287,15 +287,20 @@
287
287
  "value": "#00D4FF"
288
288
  },
289
289
  {
290
- "property": "Border multi-line/disabled",
290
+ "property": "Border multi-line/variable/disabled",
291
291
  "token": "border-strong",
292
292
  "value": "#A4A4A4"
293
293
  },
294
294
  {
295
- "property": "Texto preenchido",
295
+ "property": "Texto Single Line",
296
296
  "token": "content-primary",
297
297
  "value": "#FFFFFF"
298
298
  },
299
+ {
300
+ "property": "Texto Quick Action",
301
+ "token": "content-tertiary",
302
+ "value": "#A4A4A4"
303
+ },
299
304
  {
300
305
  "property": "Placeholder",
301
306
  "token": "content-tertiary",
@@ -314,7 +319,7 @@
314
319
  {
315
320
  "property": "Borda warning",
316
321
  "token": "content-warning",
317
- "value": "#FFCC40"
322
+ "value": "#FFD35A"
318
323
  },
319
324
  {
320
325
  "property": "Borda success",
@@ -322,14 +327,14 @@
322
327
  "value": "#4FE290"
323
328
  }
324
329
  ],
325
- "anatomy": "[div wrapper h=24px border-radius=5px bg=surface-primary border=transparent]\n └── [span icon-slot 24×24px, opcional] → ícone de busca 13px\n └── [input flex=1 bg=transparent no-border]\n └── [button clear 24×24px, opcional, aparece quando iconLeft + value]\n— Multi Line: [div wrapper padding=4px_8px border=border-strong auto-height]\n └── [textarea flex=1 resize=none]\n— Quick Action: padding=0_4px gap=8px sempre com icon-slot",
326
- "notes": "Quick Action é uma variante compacta para inputs em toolbars e painéis de trading. Border radius fixo: 5px (não token). O botão clear só aparece quando iconLeft=true e há valor digitado.",
330
+ "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",
331
+ "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.",
327
332
  "implemented": true,
328
333
  "code": {
329
- "html": "<!-- Single Line Default -->\n<div class=\"trdr-text-input\">\n <input type=\"text\" placeholder=\"Placeholder\" />\n</div>\n\n<!-- Single Line Large -->\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 -->\n<div class=\"trdr-text-input trdr-text-input-quick\">\n <span class=\"trdr-text-input-icon-slot\" aria-hidden=\"true\">...</span>\n <input type=\"text\" placeholder=\"Buscar...\" />\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>",
330
- "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}\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; }\n.trdr-text-input-lg.trdr-text-input-icon { padding: 0 4px; }\n\n.trdr-text-input-quick { height: 32px; padding: 0 4px; gap: 8px; }\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.trdr-text-input input,\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.trdr-text-input-lg input,\n.trdr-text-input-quick input { font-size: 12px; font-weight: 500; letter-spacing: 0.2px; }\n\n.trdr-text-input-disabled input,\n.trdr-text-input-disabled textarea { color: var(--content-disabled); cursor: not-allowed; }",
331
- "react": "import TextInput from '@/components/ui/TextInput'\n\n// Single Line Default\n<TextInput placeholder=\"Placeholder\" />\n\n// Single Line Large\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)\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// Multi Line (textarea)\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\" />",
332
- "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\nTAMANHOS:\n- default: height 24px, padding 0 8px, font 11px/450\n- large: height 32px, padding 0 8px (sem icon) / 0 4px (com icon), font 12px/500\n- Quick Action é sempre large (32px)\n\nTOKENS OBRIGATÓRIOS:\n- Background: --surface-primary (#4A4A4A)\n- Border focus: --border-focus (#00D4FF) — via :focus-within no wrapper\n- Border multi-line/disabled: --border-strong (#A4A4A4)\n- Texto: --content-primary (#FFFFFF)\n- Placeholder: --content-tertiary (#A4A4A4)\n- Texto disabled: --content-disabled (#4A4A4A)\n- Border error: --content-error (#F34F45)\n- Border warning: --content-warning (#FFCC40)\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) em Default | padding 0 4px em Large\n\nBOTÃO CLEAR (X):\n- Aparece apenas quando iconLeft=true + value não vazio + não disabled\n- Container 24×24px, SVG X 11px, cor content-tertiary, hover: content-primary\n- tabIndex={-1} para não receber foco via tab\n\nMULTI LINE:\n- Border default sempre visível: var(--border-strong) — diferente do Single Line\n- padding: 4px 8px (não 0 8px)\n- Altura automática via textarea nativo (não height fixo)\n\nESTADOS CSS:\n- :focus-within no wrapper = borda focus (não no input)\n- disabled: borda strong + cursor not-allowed em wrapper E input\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."
334
+ "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>",
335
+ "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; }",
336
+ "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\" />",
337
+ "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."
333
338
  }
334
339
  },
335
340
  {
@@ -1161,6 +1166,156 @@
1161
1166
  "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?."
1162
1167
  }
1163
1168
  },
1169
+ {
1170
+ "slug": "floating-menu",
1171
+ "name": "Floating Menu",
1172
+ "figmaId": "1921:55380",
1173
+ "category": "floating-menu",
1174
+ "implemented": true,
1175
+ "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.",
1176
+ "props": [
1177
+ {
1178
+ "name": "width",
1179
+ "type": "number | string",
1180
+ "values": [
1181
+ "172",
1182
+ "240",
1183
+ "260",
1184
+ "280",
1185
+ "300",
1186
+ "auto"
1187
+ ]
1188
+ },
1189
+ {
1190
+ "name": "children",
1191
+ "type": "ReactNode",
1192
+ "values": [
1193
+ "FloatingMenu.Item, FloatingMenu.Title, FloatingMenu.Divider, custom content"
1194
+ ]
1195
+ },
1196
+ {
1197
+ "name": "Item.icon",
1198
+ "type": "string",
1199
+ "values": [
1200
+ "nome do Material Symbols (ex: \"close\", \"star\", \"search\")"
1201
+ ]
1202
+ },
1203
+ {
1204
+ "name": "Item.disabled",
1205
+ "type": "boolean",
1206
+ "values": [
1207
+ "true",
1208
+ "false"
1209
+ ]
1210
+ },
1211
+ {
1212
+ "name": "Item.onClick",
1213
+ "type": "function",
1214
+ "values": [
1215
+ "() => void"
1216
+ ]
1217
+ },
1218
+ {
1219
+ "name": "Title.size",
1220
+ "type": "enum",
1221
+ "values": [
1222
+ "\"default\" (14px)",
1223
+ "\"sm\" (10px)"
1224
+ ]
1225
+ }
1226
+ ],
1227
+ "dimensions": [
1228
+ {
1229
+ "label": "Item height",
1230
+ "width": "—",
1231
+ "height": "32px"
1232
+ },
1233
+ {
1234
+ "label": "Menu padding",
1235
+ "width": "8px",
1236
+ "height": "8px"
1237
+ },
1238
+ {
1239
+ "label": "Ações da janela (5 itens)",
1240
+ "width": "172px",
1241
+ "height": "192px"
1242
+ },
1243
+ {
1244
+ "label": "Notificações (4 itens)",
1245
+ "width": "300px",
1246
+ "height": "182px"
1247
+ },
1248
+ {
1249
+ "label": "Configurações (5 itens + dropdown)",
1250
+ "width": "260px",
1251
+ "height": "239px"
1252
+ }
1253
+ ],
1254
+ "tokens": [
1255
+ {
1256
+ "property": "Menu background",
1257
+ "token": "bg.secondary",
1258
+ "value": "#141519"
1259
+ },
1260
+ {
1261
+ "property": "Menu border",
1262
+ "token": "border.subtle",
1263
+ "value": "#222222"
1264
+ },
1265
+ {
1266
+ "property": "Menu border-radius",
1267
+ "token": "radius.md",
1268
+ "value": "8px"
1269
+ },
1270
+ {
1271
+ "property": "Item border-radius",
1272
+ "token": "radius.sm",
1273
+ "value": "4px"
1274
+ },
1275
+ {
1276
+ "property": "Item label color",
1277
+ "token": "content.secondary",
1278
+ "value": "#E8E8E8"
1279
+ },
1280
+ {
1281
+ "property": "Item icon color",
1282
+ "token": "content.tertiary",
1283
+ "value": "#A4A4A4"
1284
+ },
1285
+ {
1286
+ "property": "Item hover background",
1287
+ "token": "surface.secondary",
1288
+ "value": "#222222"
1289
+ },
1290
+ {
1291
+ "property": "Title color",
1292
+ "token": "content.tertiary",
1293
+ "value": "#A4A4A4"
1294
+ },
1295
+ {
1296
+ "property": "Divider color",
1297
+ "token": "border.subtle",
1298
+ "value": "#222222"
1299
+ },
1300
+ {
1301
+ "property": "Menu gap",
1302
+ "token": "spacing.xs",
1303
+ "value": "4px"
1304
+ },
1305
+ {
1306
+ "property": "Item padding",
1307
+ "token": "spacing.sm",
1308
+ "value": "8px"
1309
+ }
1310
+ ],
1311
+ "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",
1312
+ "code": {
1313
+ "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>",
1314
+ "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}",
1315
+ "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>",
1316
+ "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-*."
1317
+ }
1318
+ },
1164
1319
  {
1165
1320
  "slug": "janela",
1166
1321
  "name": "Janela",
package/plugins/trdr-design-system/skills/trdr-ds/references/tokens.css CHANGED
@@ -1,7 +1,7 @@
1
1
  /*
2
2
  * SNAPSHOT — TRDR Design Tokens
3
- * Sincronizado de: C:\Users\mauro\Desktop\trdr-design-hub
4
- * Em: 2026-05-11T00:36:20.679Z
3
+ * Sincronizado de: https://trdr.mrocontent.com.br/tokens.css
4
+ * Em: 2026-05-11T23:32:45.091Z
5
5
  * Não edite manualmente — atualize via "npm run sync-tokens"
6
6
  */
7
7