trdr-ds-install 1.2.2 → 1.2.3

package/package.json

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

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

@@ -1,6 +1,6 @@
 {
   "version": "1.0",
-  "generatedAt": "2026-05-11T00:35:11.146Z",
+  "generatedAt": "2026-05-11T01:53:30.438Z",
   "total": 14,
   "implemented": 14,
   "categories": {
@@ -287,15 +287,20 @@
           "value": "#00D4FF"
         },
         {
-          "property": "Border multi-line/disabled",
+          "property": "Border multi-line/variable/disabled",
           "token": "border-strong",
           "value": "#A4A4A4"
         },
         {
-          "property": "Texto preenchido",
+          "property": "Texto Single Line",
           "token": "content-primary",
           "value": "#FFFFFF"
         },
+        {
+          "property": "Texto Quick Action",
+          "token": "content-tertiary",
+          "value": "#A4A4A4"
+        },
         {
           "property": "Placeholder",
           "token": "content-tertiary",
@@ -314,7 +319,7 @@
         {
           "property": "Borda warning",
           "token": "content-warning",
-          "value": "#FFCC40"
+          "value": "#FFD35A"
         },
         {
           "property": "Borda success",
@@ -322,14 +327,14 @@
           "value": "#4FE290"
         }
       ],
-      "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",
-      "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.",
+      "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 -->\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>",
-        "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; }",
-        "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\" />",
-        "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."
+        "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."
       }
     },
     {

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

@@ -1,7 +1,7 @@
 /*
  * SNAPSHOT — TRDR Design Tokens
- * Sincronizado de: C:\Users\mauro\Desktop\trdr-design-hub
- * Em: 2026-05-11T00:36:20.679Z
+ * Sincronizado de: https://trdr.mrocontent.com.br/tokens.css
+ * Em: 2026-05-11T01:56:00.741Z
  * Não edite manualmente — atualize via "npm run sync-tokens"
  */