trdr-ds-install 1.6.7 → 1.6.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "trdr-ds-install",
-  "version": "1.6.7",
+  "version": "1.6.8",
   "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/SKILL.md

@@ -6,7 +6,7 @@ argument-hint: "[analyze|apply|foundation|violations|components|final|resume|sta
 allowed-tools: [Read, Glob, Grep, Edit, Write, Bash, WebFetch]
 ---
 
-**Skill version:** 1.6.7
+**Skill version:** 1.6.8
 **npm package:** trdr-ds-install
 
 You are implementing the **TRDR Design System** in a developer's project. The Design Hub is the single source of truth and lives at **https://trdr.mrocontent.com.br**.
@@ -59,7 +59,7 @@ Compare the result with the **Skill version** constant at the top of this file (
 - If registry version == local version: skip silently, continue.
 - If registry version > local version:
   ```
-  🔄 Nova versão da skill disponível: trdr-ds-install@[registry-version] (instalada: 1.6.7)
+  🔄 Nova versão da skill disponível: trdr-ds-install@[registry-version] (instalada: 1.6.8)
 
   Responda:
   - `"atualizar"` / `"update"` — instalar a nova versão agora (requer reiniciar /trdr-ds após)

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

@@ -1,8 +1,8 @@
 {
   "version": "1.0",
-  "generatedAt": "2026-05-13T01:45:02.748Z",
-  "total": 19,
-  "implemented": 19,
+  "generatedAt": "2026-05-13T14:09:02.284Z",
+  "total": 20,
+  "implemented": 20,
   "categories": {
     "formulario": "Formulário / Controles",
     "modal": "Modais / Overlays",
@@ -1981,6 +1981,139 @@
         "react": "import Header from '@/components/ui/Header'\n\n// Estado padrão — nav \"Gráfico\" ativo\n<Header activeNav=\"Gráfico\" />\n\n// Com outro item de nav ativo\n<Header activeNav=\"Book e Cotações\" />\n\n// Itens de nav disponíveis:\n// 'Gráfico' | 'Book e Cotações' | 'Operação' | 'Ferramentas' | 'Analistas'",
         "prompt": "Implemente o componente Header Desktop do Design System TRDR — barra de navegação superior 1920×56px, pixel-perfect com o Figma 1921:55292.\n\nESTRUTURA GERAL (flex row, space-between, height 56px, padding 0 16px):\n- background: var(--bg-primary) #0E0E0E\n- border-bottom: 1px solid var(--border-subtle) #222222\n\nLADO ESQUERDO (flex row, gap 8px, align-items center):\n1. LOGO: img logo-trdr.svg, width 107px, height 40px\n2. DIVIDER: 1×18px, background var(--border-subtle), margin 0 8px\n3. NAV (flex row, gap 4px):\n   Cada item: height 40px, padding 0 8px, border-radius var(--radius-sm), font var(--font-secondary) 14px/400\n   - Default: color var(--content-tertiary) #A4A4A4\n   - Hover: color var(--content-primary) + background var(--surface-secondary) #222222\n   - Active: color var(--content-primary)\n   - Ícone Material Symbols Outlined 20px + label (gap 4px)\n4. TEXT INPUT (reutilizar componente TextInput): width 116px, height 32px, iconLeft, placeholder \"Buscar ativo...\"\n5. RESULTADO ROW: cotações em tempo real — por item (flex row, gap 6px, border-left 1px subtle, padding 0 8px):\n   - Symbol: font-mono 11px content.tertiary\n   - Last price: font-mono 13px/500 content.primary\n   - Change: font-mono 12px — positivo: context.trading.up #4FE290, negativo: context.trading.down #F34F45\n\nLADO DIREITO (flex row, gap 8px):\n1. 4× ICON BTN (32×32px, border-radius sm, hover surface.secondary, color content.secondary):\n   - Notificações + badge \"4\", Meu perfil + badge \"1\", Configurações, Layouts\n   - Badge: 14×14px, border-radius full, bg action.brand.default #00D4FF, text content.inverse #1A1A1A, font 9px/600, position absolute top-0 right-0\n2. CONEXÕES BTN (137×32px): border 1px solid border.subtle, font-secondary 13px, gap 6px, \"5/6 Conexões\"\n   - Status dot: 6×6px, border-radius full, connected = context.trading.up, disconnected = context.trading.down\n3. WIN CONTROLS (3× 40×40px): Minimizar, Recolher, Fechar\n   - Fechar: hover bg context.trading.down #F34F45\n\nREUTILIZAÇÃO: TextInput para campo de busca, FloatingMenu para dropdowns dos itens de nav.\nNUNCA usar hex direto. NUNCA usar --scale-spacing-* ou --scale-radius-*."
       }
+    },
+    {
+      "slug": "badge",
+      "name": "Badge",
+      "figmaId": "2316:8953",
+      "category": "outros",
+      "description": "Badge de status com dot opcional. 5 variantes (Neutral, Brand, Success, Warning, Archived) e 2 tamanhos (default 12px, large 14px). Height fixo 16px, border-radius 5px.",
+      "props": [
+        {
+          "name": "Variant",
+          "type": "enum",
+          "values": [
+            "Neutral",
+            "Brand",
+            "Success",
+            "Warning",
+            "Archived"
+          ]
+        },
+        {
+          "name": "Size",
+          "type": "enum",
+          "values": [
+            "Default",
+            "Large"
+          ]
+        },
+        {
+          "name": "Dot",
+          "type": "boolean",
+          "values": [
+            "true",
+            "false"
+          ]
+        }
+      ],
+      "dimensions": [
+        {
+          "label": "Default",
+          "width": "auto (hug)",
+          "height": "16px"
+        },
+        {
+          "label": "Dot icon",
+          "width": "6px",
+          "height": "6px"
+        }
+      ],
+      "tokens": [
+        {
+          "property": "BG Neutral",
+          "token": "surface-secondary",
+          "value": "#222222"
+        },
+        {
+          "property": "BG Brand",
+          "token": "surface-brand",
+          "value": "#00D4FF29"
+        },
+        {
+          "property": "BG Success",
+          "token": "surface-success",
+          "value": "#4FE29014"
+        },
+        {
+          "property": "BG Warning",
+          "token": "surface-warning",
+          "value": "#FFCC4014"
+        },
+        {
+          "property": "BG Archived",
+          "token": "surface-tertiary",
+          "value": "#1A1A1A"
+        },
+        {
+          "property": "Text Neutral",
+          "token": "content-tertiary",
+          "value": "#A4A4A4"
+        },
+        {
+          "property": "Text Brand",
+          "token": "content-brand",
+          "value": "#00D4FF"
+        },
+        {
+          "property": "Text Success",
+          "token": "content-success",
+          "value": "#4FE290"
+        },
+        {
+          "property": "Text Warning",
+          "token": "content-warning",
+          "value": "#FFD35A"
+        },
+        {
+          "property": "Text Archived",
+          "token": "content-disabled",
+          "value": "#4A4A4A"
+        },
+        {
+          "property": "Border Neutral",
+          "token": "border-subtle",
+          "value": "#222222"
+        },
+        {
+          "property": "Border Brand",
+          "token": "content-brand",
+          "value": "#00D4FF"
+        },
+        {
+          "property": "Border Success",
+          "token": "content-success",
+          "value": "#4FE290"
+        },
+        {
+          "property": "Border Warning",
+          "token": "content-warning",
+          "value": "#FFD35A"
+        },
+        {
+          "property": "Border Archived",
+          "token": "border-disabled",
+          "value": "#777777"
+        }
+      ],
+      "anatomy": "[span.trdr-badge .trdr-badge-{variant} .trdr-badge-lg? .trdr-badge-dot?]\n  └── [::before dot 6×6px border-radius full, cor = currentColor] (se .trdr-badge-dot)\n  └── [texto label]\n\nContainer: inline-flex, align-items center, height 16px, padding 0 4px, border-radius 5px, border 1px solid\nDefault: Inter 12px/500, letter-spacing 0.2px\nLarge: Inter 14px/400, letter-spacing 0, line-height 1.2",
+      "implemented": true,
+      "code": {
+        "html": "<!-- Neutral (default) -->\n<span class=\"trdr-badge trdr-badge-neutral\">Badge</span>\n\n<!-- Brand com dot -->\n<span class=\"trdr-badge trdr-badge-brand trdr-badge-dot\">Active</span>\n\n<!-- Success com dot -->\n<span class=\"trdr-badge trdr-badge-success trdr-badge-dot\">Merged</span>\n\n<!-- Warning -->\n<span class=\"trdr-badge trdr-badge-warning\">Atenção</span>\n\n<!-- Archived com dot -->\n<span class=\"trdr-badge trdr-badge-archived trdr-badge-dot\">Archived</span>\n\n<!-- Large -->\n<span class=\"trdr-badge trdr-badge-brand trdr-badge-lg trdr-badge-dot\">Active</span>\n<span class=\"trdr-badge trdr-badge-success trdr-badge-lg trdr-badge-dot\">Merged</span>\n<span class=\"trdr-badge trdr-badge-neutral trdr-badge-lg\">Badge</span>",
+        "css": ".trdr-badge {\n  display: inline-flex;\n  align-items: center;\n  height: 16px;\n  padding: 0 4px;\n  border-radius: 5px;                         /* fixo, não token */\n  font-family: var(--font-secondary);          /* Inter */\n  font-size: 12px;\n  font-weight: 500;\n  letter-spacing: 0.2px;\n  line-height: 1;\n  white-space: nowrap;\n}\n\n/* Tamanho Large (Figma \"Badge large\") */\n.trdr-badge-lg {\n  font-size: 14px;\n  font-weight: 400;\n  letter-spacing: 0;\n  line-height: 1.2;\n}\n\n/* --- Variantes --- */\n.trdr-badge-neutral {\n  background-color: var(--surface-secondary);  /* #222222 */\n  color: var(--content-tertiary);              /* #A4A4A4 */\n  border: 1px solid var(--border-subtle);      /* #222222 */\n}\n\n.trdr-badge-brand {\n  background-color: var(--surface-brand);      /* #00D4FF29 */\n  color: var(--content-brand);                 /* #00D4FF */\n  border: 1px solid var(--content-brand);      /* #00D4FF */\n}\n\n.trdr-badge-success {\n  background-color: var(--surface-success);    /* #4FE29014 */\n  color: var(--content-success);               /* #4FE290 */\n  border: 1px solid var(--content-success);    /* #4FE290 */\n}\n\n.trdr-badge-warning {\n  background-color: var(--surface-warning);    /* #FFCC4014 */\n  color: var(--content-warning);               /* #FFD35A */\n  border: 1px solid var(--content-warning);    /* #FFD35A */\n}\n\n.trdr-badge-archived {\n  background-color: var(--surface-tertiary);   /* #1A1A1A */\n  color: var(--content-disabled);              /* #4A4A4A */\n  border: 1px solid var(--border-disabled);    /* #777777 */\n}\n\n/* Dot indicator (pseudo-element) */\n.trdr-badge-dot::before {\n  content: '';\n  display: inline-block;\n  width: 6px;\n  height: 6px;\n  border-radius: var(--radius-full);           /* 9999px */\n  background-color: currentColor;\n  margin-left: 1px;\n}",
+        "react": "import Badge from '@/components/ui/Badge'\n\nexport default function Example() {\n  return (\n    <>\n      {/* Variantes default (12px) */}\n      <Badge variant=\"neutral\">Badge</Badge>\n      <Badge variant=\"brand\" dot>Active</Badge>\n      <Badge variant=\"success\" dot>Merged</Badge>\n      <Badge variant=\"warning\">Atenção</Badge>\n      <Badge variant=\"archived\" dot>Archived</Badge>\n\n      {/* Variantes large (14px) — match do Figma \"Badge large\" */}\n      <Badge variant=\"brand\" size=\"lg\" dot>Active</Badge>\n      <Badge variant=\"success\" size=\"lg\" dot>Merged</Badge>\n      <Badge variant=\"neutral\" size=\"lg\">Badge</Badge>\n      <Badge variant=\"archived\" size=\"lg\" dot>Archived</Badge>\n    </>\n  )\n}",
+        "prompt": "Implemente o componente Badge do Design System TRDR.\n\nESPECIFICAÇÕES PIXEL-PERFECT:\n- Height: 16px fixo\n- Padding: 0 4px\n- Border-radius: 5px (fixo, não token)\n- Border: 1px solid (cor varia por variante)\n- Font default: Inter 12px/500, letter-spacing 0.2px\n- Font large: Inter 14px/400, letter-spacing 0, line-height 1.2\n- Dot: 6×6px, border-radius full, cor = currentColor, margin-left 1px\n\nVARIANTES E TOKENS OBRIGATÓRIOS:\n- Neutral: bg --surface-secondary (#222222), text --content-tertiary (#A4A4A4), border --border-subtle (#222222)\n- Brand: bg --surface-brand (#00D4FF29), text --content-brand (#00D4FF), border --content-brand\n- Success: bg --surface-success (#4FE29014), text --content-success (#4FE290), border --content-success\n- Warning: bg --surface-warning (#FFCC4014), text --content-warning (#FFD35A), border --content-warning\n- Archived: bg --surface-tertiary (#1A1A1A), text --content-disabled (#4A4A4A), border --border-disabled (#777777)\n\nPROPS:\n- variant: 'neutral' | 'brand' | 'success' | 'warning' | 'archived' (default: 'neutral')\n- size: 'default' | 'lg' (default: 'default')\n- dot: boolean (default: false) — mostra dot 6×6 antes do texto via ::before\n\nNOTAS:\n- O dot usa currentColor para herdar a cor do texto da variante\n- Merged no Figma = variante \"success\" com dot\n- Active no Figma = variante \"brand\" com dot\n- Archived = variante dedicada com dot\n- NUNCA usar hex direto. NUNCA usar --scale-spacing-* ou --scale-radius-*."
+      }
     }
   ]
 }

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

@@ -1,7 +1,7 @@
 /*
  * SNAPSHOT — TRDR Design Tokens
- * Sincronizado de: ../trdr-design-hub
- * Em: 2026-05-13T02:02:58.316Z
+ * Sincronizado de: https://trdr.mrocontent.com.br/tokens.css
+ * Em: 2026-05-13T14:15:00.756Z
  * Não edite manualmente — atualize via "npm run sync-tokens"
  */