trdr-ds-install 1.9.0 → 2.0.0

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

@@ -0,0 +1,97 @@
+{
+  "slug": "radio-button",
+  "name": "Radio Button",
+  "figmaId": "1916:46361",
+  "category": "formulario",
+  "description": "Seleção única com 2 variantes: Input (círculo 16×16px) e Button (pill 24px). Estados: Default, Active, Focused, Disabled.",
+  "props": [
+    {
+      "name": "Variant",
+      "type": "enum",
+      "values": [
+        "Input",
+        "Button"
+      ]
+    },
+    {
+      "name": "State",
+      "type": "enum",
+      "values": [
+        "Default",
+        "Active",
+        "Focused",
+        "Disabled"
+      ]
+    },
+    {
+      "name": "Label",
+      "type": "boolean",
+      "values": [
+        "true",
+        "false"
+      ]
+    }
+  ],
+  "dimensions": [
+    {
+      "label": "Input circle",
+      "width": "16px",
+      "height": "16px"
+    },
+    {
+      "label": "Button pill",
+      "height": "24px"
+    }
+  ],
+  "tokens": [
+    {
+      "property": "Circle On bg",
+      "token": "action-brand-default",
+      "value": "#00D4FF"
+    },
+    {
+      "property": "Circle Off bg",
+      "token": "surface-secondary",
+      "value": "#222222"
+    },
+    {
+      "property": "Circle border",
+      "token": "border-default",
+      "value": "#4A4A4A"
+    },
+    {
+      "property": "Dot (On)",
+      "token": "—",
+      "value": "#FFFFFF"
+    },
+    {
+      "property": "Focus ring",
+      "token": "border-focus",
+      "value": "#00D4FF"
+    },
+    {
+      "property": "Button border default",
+      "token": "border-subtle",
+      "value": "#222222"
+    },
+    {
+      "property": "Button border active",
+      "token": "border-default",
+      "value": "#4A4A4A"
+    },
+    {
+      "property": "Button bg active",
+      "token": "surface-brand",
+      "value": "#00D4FF29"
+    }
+  ],
+  "anatomy": "[Input] → label > input[type=radio] hidden + círculo 16×16px + label text\n[Button] → button pill 24px height | border varia por estado",
+  "implemented": true,
+  "code": {
+    "html": "<!-- Input On -->\n<label class=\"trdr-radio-input\">\n  <input type=\"radio\" name=\"mercado\" checked />\n  <span class=\"trdr-radio-circle trdr-radio-circle-on\"></span>\n  <span>WINQ25</span>\n</label>\n\n<!-- Input Off -->\n<label class=\"trdr-radio-input\">\n  <input type=\"radio\" name=\"mercado\" />\n  <span class=\"trdr-radio-circle\"></span>\n  <span>WINFUT</span>\n</label>\n\n<!-- Button Default -->\n<button class=\"trdr-radio-button\">Label</button>\n\n<!-- Button Active -->\n<button class=\"trdr-radio-button trdr-radio-button-active\">Label</button>",
+    "css": ".trdr-radio-input {\n  display: inline-flex; align-items: center;\n  gap: var(--spacing-sm); cursor: pointer;\n  font-family: var(--font-secondary); font-size: 12px; font-weight: 500;\n  color: var(--content-primary);\n}\n\n.trdr-radio-circle {\n  flex-shrink: 0; width: 16px; height: 16px;\n  border-radius: var(--radius-full);\n  border: 1px solid var(--border-default);   /* #4A4A4A */\n  background: var(--surface-secondary);       /* #222222 */\n  display: flex; align-items: center; justify-content: center;\n  position: relative;\n  transition: border-color 0.12s ease, background 0.12s ease;\n}\n\n.trdr-radio-circle-on {\n  background: var(--action-brand-default);\n  border-color: var(--action-brand-default);\n}\n\n.trdr-radio-circle-on::after {\n  content: ''; width: 6px; height: 6px;\n  border-radius: var(--radius-full);\n  background: #ffffff;\n}\n\n.trdr-radio-button {\n  display: inline-flex; align-items: center; justify-content: center;\n  height: 24px; padding: 0 var(--spacing-sm); border-radius: 5px;\n  border: 1px solid var(--border-subtle);    /* #222222 */\n  font-family: var(--font-secondary); font-size: 12px; font-weight: 500;\n  color: var(--content-primary); cursor: pointer;\n  transition: border-color 0.12s ease, background 0.12s ease;\n}\n\n.trdr-radio-button-active {\n  background: var(--surface-brand);          /* #00D4FF29 */\n  border-color: var(--border-default);\n}\n\n.trdr-radio-button:focus-visible { outline: none; border-color: var(--border-focus); }",
+    "react": "import RadioButton from '@/components/ui/RadioButton'\nimport { useState } from 'react'\n\nexport default function Example() {\n  const [selected, setSelected] = useState('winq25')\n\n  return (\n    <>\n      {/* Input variant */}\n      <RadioButton\n        variant=\"input\"\n        checked={selected === 'winq25'}\n        label=\"WINQ25\"\n        onChange={() => setSelected('winq25')}\n        name=\"mercado\"\n      />\n      <RadioButton\n        variant=\"input\"\n        checked={selected === 'winfut'}\n        label=\"WINFUT\"\n        onChange={() => setSelected('winfut')}\n        name=\"mercado\"\n      />\n\n      {/* Button variant */}\n      <RadioButton variant=\"button\" label=\"Boleta\" state=\"active\" />\n      <RadioButton variant=\"button\" label=\"Gráfico\" />\n      <RadioButton variant=\"button\" label=\"Desativado\" state=\"disabled\" />\n    </>\n  )\n}",
+    "prompt": "Implemente o componente RadioButton do Design System TRDR com 2 variantes.\n\nVARIANTE INPUT (círculo):\n- Círculo: 16×16px, border-radius: 9999px (radius-full)\n- Off: bg=--surface-secondary (#222222), border=--border-default (#4A4A4A)\n- On: bg=--action-brand-default (#00D4FF), border=action-brand-default\n  → Dot interno: 6×6px branco via ::after\n- Hover Off: border=--border-strong (#A4A4A4)\n- Focus: outline 2px --border-focus (#00D4FF) offset 2px\n\nVARIANTE BUTTON (pill):\n- Height: 24px, border-radius: 5px, padding: 0 8px\n- Default: border=--border-subtle (#222222)\n- Active: bg=--surface-brand (#00D4FF29), border=--border-default\n- Focused: border=--border-focus (#00D4FF)\n- Disabled: opacity 0.6, cursor not-allowed\n\nFONT: 12px / 500 / --font-secondary / --content-primary"
+  },
+  "dependencies": []
+}

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

@@ -0,0 +1,69 @@
+{
+  "slug": "search-input",
+  "name": "SearchInput",
+  "figmaId": "—",
+  "category": "formulario",
+  "description": "Input de busca com ícone lupa à esquerda. Baseado no TextInput (.trdr-input) com wrapper posicional para o ícone. Modo controlado (value/onChange) ou URL-sync (paramName).",
+  "props": [
+    {
+      "name": "Placeholder",
+      "type": "string",
+      "values": [
+        "Buscar..."
+      ]
+    },
+    {
+      "name": "Mode",
+      "type": "enum",
+      "values": [
+        "Controlled",
+        "URL-sync"
+      ]
+    }
+  ],
+  "dimensions": [
+    {
+      "label": "Default",
+      "width": "100% (fill, max 400px)",
+      "height": "24px"
+    }
+  ],
+  "tokens": [
+    {
+      "property": "Icon color",
+      "token": "content-tertiary",
+      "value": "#A4A4A4"
+    },
+    {
+      "property": "Input BG",
+      "token": "surface-primary",
+      "value": "#141519"
+    },
+    {
+      "property": "Input border",
+      "token": "border-default",
+      "value": "#4A4A4A"
+    },
+    {
+      "property": "Input text",
+      "token": "content-primary",
+      "value": "#FFFFFF"
+    },
+    {
+      "property": "Placeholder",
+      "token": "content-disabled",
+      "value": "#4A4A4A"
+    }
+  ],
+  "anatomy": "[div.trdr-search-input]\n  ├── [svg.trdr-search-input-icon 16×16]  ← absolute, left 10px, vertical-center\n  └── [input.trdr-input]  ← padding-left 36px para dar espaço ao ícone\n\nHerda todos os estilos de .trdr-input (TextInput)",
+  "implemented": true,
+  "code": {
+    "html": "<!-- Search Input -->\n<div class=\"trdr-search-input\">\n  <svg class=\"trdr-search-input-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n    <circle cx=\"11\" cy=\"11\" r=\"8\" />\n    <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\" />\n  </svg>\n  <input type=\"text\" class=\"trdr-input\" placeholder=\"Buscar...\" />\n</div>",
+    "css": ".trdr-search-input {\n  position: relative;\n  width: 100%;\n}\n\n.trdr-search-input-icon {\n  position: absolute;\n  left: 10px;\n  top: 50%;\n  transform: translateY(-50%);\n  color: var(--content-tertiary);\n  pointer-events: none;\n}\n\n.trdr-search-input .trdr-input {\n  padding-left: 36px;\n}",
+    "react": "import SearchInput from '@/components/ui/SearchInput'\n\nexport default function Example() {\n  const [query, setQuery] = useState('')\n\n  return (\n    <>\n      {/* Modo controlado */}\n      <SearchInput\n        value={query}\n        onChange={setQuery}\n        placeholder=\"Buscar tokens...\"\n      />\n\n      {/* Modo URL-sync (Next.js) */}\n      <SearchInput paramName=\"q\" placeholder=\"Buscar...\" />\n    </>\n  )\n}",
+    "prompt": "Implemente o componente SearchInput do Design System TRDR.\n\nESPECIFICAÇÕES:\n- Wrapper: position relative, width 100%\n- Ícone: SVG lupa 16×16, position absolute, left 10px, top 50%, transform translateY(-50%), cor --content-tertiary\n- Input: classe .trdr-input (herda do TextInput), padding-left 36px para não sobrepor ícone\n\nTOKENS OBRIGATÓRIOS:\n- --content-tertiary (#A4A4A4) — ícone lupa\n- Herda tokens de .trdr-input: --surface-primary (bg), --border-default (border), --content-primary (text)\n\nDEPENDÊNCIA: TextInput (.trdr-input deve estar disponível no CSS)\n\nNOTAS:\n- Aceita modo controlado (value + onChange) ou URL-sync (paramName para query params Next.js)\n- NUNCA usar hex direto. NUNCA usar --scale-spacing-*."
+  },
+  "dependencies": [
+    "text-input"
+  ]
+}

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

@@ -0,0 +1,60 @@
+{
+  "slug": "segmented-control",
+  "name": "Segmented Control",
+  "figmaId": "1655:25490",
+  "category": "formulario",
+  "description": "Controle de abas compacto. De 2 a 6 tabs. Container arredondado com radius 64px.",
+  "props": [
+    {
+      "name": "Tabs",
+      "type": "enum",
+      "values": [
+        "2",
+        "3",
+        "4",
+        "5",
+        "6"
+      ]
+    },
+    {
+      "name": "State",
+      "type": "enum",
+      "values": [
+        "Default",
+        "Active"
+      ]
+    }
+  ],
+  "dimensions": [
+    {
+      "label": "Default",
+      "height": "28px"
+    }
+  ],
+  "tokens": [
+    {
+      "property": "Container BG",
+      "token": "surface.secondary",
+      "value": "#222222"
+    },
+    {
+      "property": "Tab ativa",
+      "token": "action.secondary.default",
+      "value": "#4A4A4A"
+    },
+    {
+      "property": "Tab inativa text",
+      "token": "content.tertiary",
+      "value": "#A4A4A4"
+    }
+  ],
+  "anatomy": "[Container radius-full bg surface.secondary]\n  └── [Tab 1] [Tab 2] [Tab N...]\n      Padding: 2px no container",
+  "implemented": true,
+  "code": {
+    "html": "<!-- 2 tabs -->\n<div class=\"trdr-segment-control\">\n  <span class=\"trdr-segment trdr-segment-active\">Avançado</span>\n  <span class=\"trdr-segment trdr-segment-inactive\">Simples</span>\n</div>\n\n<!-- 5 tabs -->\n<div class=\"trdr-segment-control\">\n  <span class=\"trdr-segment trdr-segment-active\">Filtro 1</span>\n  <span class=\"trdr-segment trdr-segment-inactive\">Filtro 2</span>\n  <span class=\"trdr-segment trdr-segment-inactive\">Filtro 3</span>\n  <span class=\"trdr-segment trdr-segment-inactive\">Filtro 4</span>\n  <span class=\"trdr-segment trdr-segment-inactive\">Filtro 5</span>\n</div>",
+    "css": ".trdr-segment-control {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--spacing-sm);         /* 8px */\n  flex-wrap: wrap;\n}\n\n.trdr-segment {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--spacing-sm) var(--spacing-md);  /* 8px 12px */\n  border-radius: var(--spacing-lg);              /* 16px — pill */\n  font-family: var(--font-secondary);\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 1.2;\n  white-space: nowrap;\n  cursor: pointer;\n  transition: background-color 0.15s ease, color 0.15s ease;\n}\n\n.trdr-segment-active {\n  background-color: var(--action-secondary-default);  /* #4A4A4A */\n  color: var(--content-primary);                      /* #FFFFFF */\n}\n\n.trdr-segment-inactive {\n  background-color: var(--surface-secondary);  /* #222222 */\n  color: var(--content-tertiary);              /* #A4A4A4 */\n}\n\n.trdr-segment-inactive:hover {\n  color: var(--content-secondary);  /* #E8E8E8 */\n}",
+    "react": "import { useState } from 'react'\n\nexport default function Example() {\n  const [active, setActive] = useState('avancado')\n  const tabs = [\n    { id: 'avancado', label: 'Avançado' },\n    { id: 'simples', label: 'Simples' },\n  ]\n\n  return (\n    <div className=\"trdr-segment-control\">\n      {tabs.map(tab => (\n        <span\n          key={tab.id}\n          className={`trdr-segment ${active === tab.id ? 'trdr-segment-active' : 'trdr-segment-inactive'}`}\n          onClick={() => setActive(tab.id)}\n        >\n          {tab.label}\n        </span>\n      ))}\n    </div>\n  )\n}",
+    "prompt": "Implemente o componente Segmented Control do Design System TRDR.\n\nESPECIFICAÇÕES:\n- Container (.trdr-segment-control): display inline-flex, gap 8px (--spacing-sm), flex-wrap wrap\n- Segment (.trdr-segment): padding 8px 12px (--spacing-sm/--spacing-md), border-radius 16px (pill), font 14px/400 Inter\n- Ativo (.trdr-segment-active): bg --action-secondary-default (#4A4A4A), color --content-primary (#FFFFFF)\n- Inativo (.trdr-segment-inactive): bg --surface-secondary (#222222), color --content-tertiary (#A4A4A4)\n- Hover inativo: color --content-secondary (#E8E8E8)\n- Transição: 0.15s ease em background-color e color\n\nUse classes CSS globais. Gerencie o estado ativo via useState no React."
+  },
+  "dependencies": []
+}

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

@@ -0,0 +1,109 @@
+{
+  "slug": "sidebar",
+  "name": "Sidebar",
+  "figmaId": "—",
+  "category": "navegacao",
+  "description": "Navegação lateral genérica com grupos de itens, ícones Material Symbols, header com logo e footer com versão. Width 240px, sticky top 0, height 100vh.",
+  "props": [
+    {
+      "name": "Width",
+      "type": "enum",
+      "values": [
+        "240px (default)"
+      ]
+    }
+  ],
+  "dimensions": [
+    {
+      "label": "Default",
+      "width": "240px",
+      "height": "100vh"
+    },
+    {
+      "label": "Item",
+      "width": "100%",
+      "height": "32px"
+    },
+    {
+      "label": "Icon",
+      "width": "20px",
+      "height": "20px"
+    }
+  ],
+  "tokens": [
+    {
+      "property": "BG",
+      "token": "bg-secondary",
+      "value": "#0E0E0E"
+    },
+    {
+      "property": "Border",
+      "token": "border-subtle",
+      "value": "#222222"
+    },
+    {
+      "property": "Group label",
+      "token": "content-brand",
+      "value": "#00D4FF"
+    },
+    {
+      "property": "Item text",
+      "token": "content-secondary",
+      "value": "#E8E8E8"
+    },
+    {
+      "property": "Item hover text",
+      "token": "content-primary",
+      "value": "#FFFFFF"
+    },
+    {
+      "property": "Item hover BG",
+      "token": "surface-secondary",
+      "value": "#222222"
+    },
+    {
+      "property": "Item active text",
+      "token": "content-primary",
+      "value": "#FFFFFF"
+    },
+    {
+      "property": "Item active BG",
+      "token": "surface-secondary",
+      "value": "#222222"
+    },
+    {
+      "property": "Icon color",
+      "token": "content-tertiary",
+      "value": "#A4A4A4"
+    },
+    {
+      "property": "Icon active",
+      "token": "content-secondary",
+      "value": "#E8E8E8"
+    },
+    {
+      "property": "Version BG",
+      "token": "surface-brand",
+      "value": "#00D4FF29"
+    },
+    {
+      "property": "Version text",
+      "token": "content-brand",
+      "value": "#00D4FF"
+    },
+    {
+      "property": "Version label",
+      "token": "content-tertiary",
+      "value": "#A4A4A4"
+    }
+  ],
+  "anatomy": "[aside.trdr-sidebar]\n  ├── [div.trdr-sidebar-header]  ← logo, padding 32px, border-bottom\n  ├── [nav.trdr-sidebar-nav]  ← flex-1, padding 32px 24px, gap 32px\n  │     └── [div.trdr-sidebar-group] × N\n  │           ├── [span.trdr-sidebar-group-label]  ← 12px/400, brand, uppercase\n  │           └── [ul.trdr-sidebar-list]\n  │                 └── [li > a.trdr-sidebar-item .trdr-sidebar-item-active?]\n  │                       ├── [span.trdr-sidebar-icon]  ← Material Symbols 20px\n  │                       └── label text\n  └── [div.trdr-sidebar-footer]  ← border-top, flex, gap 8px\n        ├── [span.trdr-sidebar-version]  ← mono 11px, brand bg/text\n        └── [span.trdr-sidebar-version-label]  ← 11px, tertiary\n\nItem: height 32px, padding 0 8px, gap 8px, radius 4px, Inter 14px/400\nHover: text primary, bg surface-secondary\nActive: mesmos estilos de hover + icon secondary",
+  "implemented": true,
+  "code": {
+    "html": "<aside class=\"trdr-sidebar\">\n  <div class=\"trdr-sidebar-header\">\n    <img src=\"/logo.svg\" alt=\"Logo\" width=\"120\" />\n  </div>\n\n  <nav class=\"trdr-sidebar-nav\">\n    <div class=\"trdr-sidebar-group\">\n      <span class=\"trdr-sidebar-group-label\">Visão Geral</span>\n      <ul class=\"trdr-sidebar-list\">\n        <li>\n          <a href=\"/\" class=\"trdr-sidebar-item trdr-sidebar-item-active\">\n            <span class=\"trdr-sidebar-icon\">home</span>\n            Home\n          </a>\n        </li>\n      </ul>\n    </div>\n\n    <div class=\"trdr-sidebar-group\">\n      <span class=\"trdr-sidebar-group-label\">Tokens</span>\n      <ul class=\"trdr-sidebar-list\">\n        <li>\n          <a href=\"/tokens\" class=\"trdr-sidebar-item\">\n            <span class=\"trdr-sidebar-icon\">grain</span>\n            Primitivos\n          </a>\n        </li>\n        <li>\n          <a href=\"/semanticos\" class=\"trdr-sidebar-item\">\n            <span class=\"trdr-sidebar-icon\">join_left</span>\n            Semânticos\n          </a>\n        </li>\n      </ul>\n    </div>\n  </nav>\n\n  <div class=\"trdr-sidebar-footer\">\n    <span class=\"trdr-sidebar-version\">v1.5</span>\n    <span class=\"trdr-sidebar-version-label\">designtokens.md</span>\n  </div>\n</aside>",
+    "css": ".trdr-sidebar {\n  position: sticky;\n  top: 0;\n  height: 100vh;\n  width: 240px;\n  background-color: var(--bg-secondary);\n  border-right: 1px solid var(--border-subtle);\n  display: flex;\n  flex-direction: column;\n  overflow-y: auto;\n  overflow-x: hidden;\n  flex-shrink: 0;\n}\n\n.trdr-sidebar-header {\n  padding: 32px;\n  border-bottom: 1px solid var(--border-subtle);\n  flex-shrink: 0;\n}\n\n.trdr-sidebar-nav {\n  flex: 1;\n  padding: 32px 24px;\n  display: flex;\n  flex-direction: column;\n  gap: 32px;\n  overflow-y: auto;\n}\n\n.trdr-sidebar-group {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.trdr-sidebar-group-label {\n  font-family: var(--font-secondary);\n  font-size: 12px;\n  font-weight: 400;\n  color: var(--content-brand);\n  text-transform: uppercase;\n  letter-spacing: 0.02em;\n}\n\n.trdr-sidebar-list {\n  list-style: none;\n  display: flex;\n  flex-direction: column;\n  gap: 0;\n  margin: 0;\n  padding: 0;\n}\n\n.trdr-sidebar-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  height: 32px;\n  padding: 0 8px;\n  font-family: var(--font-secondary);\n  font-size: 14px;\n  font-weight: 400;\n  color: var(--content-secondary);\n  border-radius: 4px;\n  text-decoration: none;\n  transition: color 0.12s ease, background-color 0.12s ease;\n}\n\n.trdr-sidebar-item:hover {\n  color: var(--content-primary);\n  background-color: var(--surface-secondary);\n}\n\n.trdr-sidebar-item-active {\n  color: var(--content-primary);\n  background-color: var(--surface-secondary);\n}\n\n.trdr-sidebar-icon {\n  font-family: 'Material Symbols Outlined';\n  font-weight: 300;\n  font-style: normal;\n  font-size: 20px;\n  line-height: 20px;\n  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20;\n  color: var(--content-tertiary);\n  flex-shrink: 0;\n  user-select: none;\n}\n\n.trdr-sidebar-item-active .trdr-sidebar-icon {\n  color: var(--content-secondary);\n}\n\n.trdr-sidebar-footer {\n  padding: 16px 24px;\n  border-top: 1px solid var(--border-subtle);\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.trdr-sidebar-version {\n  font-family: var(--font-mono);\n  font-size: 11px;\n  color: var(--content-brand);\n  background-color: var(--surface-brand);\n  padding: 2px 6px;\n  border-radius: 4px;\n}\n\n.trdr-sidebar-version-label {\n  font-size: 11px;\n  color: var(--content-tertiary);\n}",
+    "react": "// A Sidebar do Hub usa a versão com rotas hardcoded.\n// Para uso genérico, passe groups como prop:\n\ninterface SidebarGroup {\n  label: string\n  items: Array<{ href: string; label: string; icon: string; active?: boolean }>\n}\n\nfunction Sidebar({ groups }: { groups: SidebarGroup[] }) {\n  return (\n    <aside className=\"trdr-sidebar\">\n      <div className=\"trdr-sidebar-header\">\n        <img src=\"/logo.svg\" alt=\"Logo\" width={120} />\n      </div>\n      <nav className=\"trdr-sidebar-nav\">\n        {groups.map(group => (\n          <div key={group.label} className=\"trdr-sidebar-group\">\n            <span className=\"trdr-sidebar-group-label\">{group.label}</span>\n            <ul className=\"trdr-sidebar-list\">\n              {group.items.map(item => (\n                <li key={item.href}>\n                  <a\n                    href={item.href}\n                    className={`trdr-sidebar-item ${item.active ? 'trdr-sidebar-item-active' : ''}`}\n                  >\n                    <span className=\"trdr-sidebar-icon\">{item.icon}</span>\n                    {item.label}\n                  </a>\n                </li>\n              ))}\n            </ul>\n          </div>\n        ))}\n      </nav>\n      <div className=\"trdr-sidebar-footer\">\n        <span className=\"trdr-sidebar-version\">v1.0</span>\n        <span className=\"trdr-sidebar-version-label\">app</span>\n      </div>\n    </aside>\n  )\n}",
+    "prompt": "Implemente o componente Sidebar do Design System TRDR.\n\nESPECIFICAÇÕES:\n- Container: sticky top 0, height 100vh, width 240px, bg --bg-secondary, border-right 1px --border-subtle, flex-col, overflow-y auto\n- Header: padding 32px, border-bottom 1px --border-subtle (logo aqui)\n- Nav: flex 1, padding 32px 24px, gap 32px entre grupos\n- Group label: Inter 12px/400, --content-brand, uppercase, letter-spacing 0.02em\n- Item: flex, gap 8px, height 32px, padding 0 8px, Inter 14px/400, --content-secondary, radius 4px\n- Item hover/active: text --content-primary, bg --surface-secondary\n- Icon: Material Symbols 20px, --content-tertiary (active: --content-secondary)\n- Footer: padding 16px 24px, border-top, flex, gap 8px\n- Version badge: mono 11px, --content-brand, bg --surface-brand, padding 2px 6px, radius 4px\n\nTOKENS OBRIGATÓRIOS:\n- --bg-secondary (#0E0E0E), --border-subtle (#222222), --surface-secondary (#222222)\n- --content-brand (#00D4FF), --content-secondary (#E8E8E8), --content-primary (#FFFFFF), --content-tertiary (#A4A4A4)\n- --surface-brand (#00D4FF29)\n- --font-secondary (Inter), --font-mono\n- Font Material Symbols Outlined para ícones\n\nNOTAS:\n- Aceitar groups como prop para ser genérico (não hardcodar nav items)\n- NUNCA usar hex direto. NUNCA usar --scale-spacing-*."
+  },
+  "dependencies": []
+}

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

@@ -0,0 +1,90 @@
+{
+  "slug": "stat-card",
+  "name": "StatCard",
+  "figmaId": "—",
+  "category": "outros",
+  "description": "Card de estatística com valor destaque (36px bold), label e descrição opcional. Variante accent com gradient brand e cor de valor em brand.",
+  "props": [
+    {
+      "name": "Accent",
+      "type": "boolean",
+      "values": [
+        "true",
+        "false"
+      ]
+    }
+  ],
+  "dimensions": [
+    {
+      "label": "Default",
+      "width": "auto (fill)",
+      "height": "auto"
+    }
+  ],
+  "tokens": [
+    {
+      "property": "BG",
+      "token": "bg-secondary",
+      "value": "#0E0E0E"
+    },
+    {
+      "property": "Border",
+      "token": "border-subtle",
+      "value": "#222222"
+    },
+    {
+      "property": "Radius",
+      "token": "radius-md",
+      "value": "8px"
+    },
+    {
+      "property": "Padding",
+      "token": "spacing-2xl",
+      "value": "24px"
+    },
+    {
+      "property": "Gap",
+      "token": "spacing-xs",
+      "value": "4px"
+    },
+    {
+      "property": "Value color",
+      "token": "content-primary",
+      "value": "#FFFFFF"
+    },
+    {
+      "property": "Value font",
+      "token": "font-primary",
+      "value": "JetBrains Mono"
+    },
+    {
+      "property": "Label color",
+      "token": "content-secondary",
+      "value": "#E8E8E8"
+    },
+    {
+      "property": "Desc color",
+      "token": "content-tertiary",
+      "value": "#A4A4A4"
+    },
+    {
+      "property": "Accent border",
+      "token": "action-brand-alpha",
+      "value": "#00D4FF29"
+    },
+    {
+      "property": "Accent value",
+      "token": "action-brand-default",
+      "value": "#00D4FF"
+    }
+  ],
+  "anatomy": "[div.trdr-stat-card .trdr-stat-card-accent?]\n  ├── [div.trdr-stat-value]  ← font-primary 36px/600, primary (accent: brand)\n  ├── [div.trdr-stat-label]  ← 13px/500, secondary\n  └── [div.trdr-stat-desc?]  ← 12px, tertiary, margin-top spacing-xs\n\nDefault: bg-secondary, border 1px subtle, radius-md, padding spacing-2xl, flex-col gap spacing-xs\nAccent: border action-brand-alpha, bg gradient 135deg brand-alpha → bg-secondary",
+  "implemented": true,
+  "code": {
+    "html": "<!-- Default -->\n<div class=\"trdr-stat-card\">\n  <div class=\"trdr-stat-value\">292</div>\n  <div class=\"trdr-stat-label\">Tokens</div>\n  <div class=\"trdr-stat-desc\">Primitivos + semânticos</div>\n</div>\n\n<!-- Accent -->\n<div class=\"trdr-stat-card trdr-stat-card-accent\">\n  <div class=\"trdr-stat-value\">20</div>\n  <div class=\"trdr-stat-label\">Componentes</div>\n  <div class=\"trdr-stat-desc\">Implementados com código</div>\n</div>",
+    "css": ".trdr-stat-card {\n  background-color: var(--bg-secondary);\n  border: 1px solid var(--border-subtle);\n  border-radius: var(--radius-md);\n  padding: var(--spacing-2xl);\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-xs);\n}\n\n.trdr-stat-card-accent {\n  border-color: var(--action-brand-alpha);\n  background: linear-gradient(135deg, var(--action-brand-alpha) 0%, var(--bg-secondary) 100%);\n}\n\n.trdr-stat-value {\n  font-family: var(--font-primary);\n  font-size: 36px;\n  font-weight: 600;\n  color: var(--content-primary);\n  line-height: 1;\n}\n\n.trdr-stat-card-accent .trdr-stat-value {\n  color: var(--action-brand-default);\n}\n\n.trdr-stat-label {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--content-secondary);\n}\n\n.trdr-stat-desc {\n  font-size: 12px;\n  color: var(--content-tertiary);\n  margin-top: var(--spacing-xs);\n}",
+    "react": "import StatCard from '@/components/ui/StatCard'\n\nexport default function Example() {\n  return (\n    <>\n      {/* Default */}\n      <StatCard value={292} label=\"Tokens\" description=\"Primitivos + semânticos\" />\n\n      {/* Accent */}\n      <StatCard value={20} label=\"Componentes\" description=\"Implementados com código\" accent />\n    </>\n  )\n}",
+    "prompt": "Implemente o componente StatCard do Design System TRDR.\n\nESPECIFICAÇÕES:\n- Container: bg --bg-secondary, border 1px --border-subtle, radius --radius-md (8px), padding --spacing-2xl (24px), flex-col, gap --spacing-xs (4px)\n- Value: font --font-primary, 36px/600, cor --content-primary, line-height 1\n- Label: 13px/500, cor --content-secondary\n- Desc: 12px, cor --content-tertiary, margin-top --spacing-xs\n\nVARIANTE ACCENT:\n- border-color: --action-brand-alpha (#00D4FF29)\n- bg: linear-gradient(135deg, --action-brand-alpha 0%, --bg-secondary 100%)\n- Value cor: --action-brand-default (#00D4FF)\n\nTOKENS OBRIGATÓRIOS:\n- --bg-secondary (#0E0E0E), --border-subtle (#222222), --radius-md (8px), --spacing-2xl (24px), --spacing-xs (4px)\n- --content-primary (#FFFFFF), --content-secondary (#E8E8E8), --content-tertiary (#A4A4A4)\n- --action-brand-alpha (#00D4FF29), --action-brand-default (#00D4FF)\n- --font-primary (JetBrains Mono)\n\nNOTAS:\n- NUNCA usar hex direto. NUNCA usar --scale-spacing-*."
+  },
+  "dependencies": []
+}

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

@@ -0,0 +1,45 @@
+{
+  "slug": "sub-menu-item",
+  "name": "Sub-menu Item",
+  "figmaId": "1886:20967",
+  "category": "navegacao",
+  "description": "Item de sub-menu com estados Default, Hover e Pressed.",
+  "props": [
+    {
+      "name": "State",
+      "type": "enum",
+      "values": [
+        "Default",
+        "Hover",
+        "Pressed"
+      ]
+    }
+  ],
+  "dimensions": [
+    {
+      "label": "Default",
+      "width": "236px",
+      "height": "32px"
+    }
+  ],
+  "tokens": [
+    {
+      "property": "BG hover",
+      "token": "surface.secondary",
+      "value": "#222222"
+    },
+    {
+      "property": "Text",
+      "token": "content.secondary",
+      "value": "#E8E8E8"
+    }
+  ],
+  "implemented": true,
+  "code": {
+    "html": "<div class=\"trdr-sub-menu\">\n  <div class=\"trdr-sub-menu-item trdr-sub-menu-item-active\">\n    <span class=\"material-symbols-outlined\" style=\"font-size:20px;color:var(--content-tertiary)\">palette</span>\n    <span>Todos os tokens</span>\n  </div>\n  <div class=\"trdr-sub-menu-item\">\n    <span class=\"material-symbols-outlined\" style=\"font-size:20px;color:var(--content-tertiary)\">widgets</span>\n    <span>Catálogo</span>\n  </div>\n  <div class=\"trdr-sub-menu-item\">\n    <span class=\"material-symbols-outlined\" style=\"font-size:20px;color:var(--content-tertiary)\">smart_toy</span>\n    <span>Guia &amp; Regras</span>\n  </div>\n</div>",
+    "css": ".trdr-sub-menu {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  width: 236px;\n  background-color: var(--bg-secondary);     /* #141519 */\n  border: 1px solid var(--border-subtle);    /* #222222 */\n  border-radius: var(--radius-sm);           /* 4px */\n  padding: 8px;\n}\n\n.trdr-sub-menu-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  height: 32px;\n  padding: 0 8px;\n  border-radius: 4px;\n  cursor: pointer;\n  font-family: var(--font-secondary);\n  font-size: 14px;\n  font-weight: 400;\n  color: var(--content-secondary);           /* #E8E8E8 */\n  transition: background-color 0.1s;\n}\n\n.trdr-sub-menu-item:hover,\n.trdr-sub-menu-item-active {\n  background-color: var(--surface-secondary);  /* #222222 */\n}",
+    "react": "import { useState } from 'react'\n\nconst items = [\n  { icon: 'palette', label: 'Todos os tokens' },\n  { icon: 'widgets', label: 'Catálogo' },\n  { icon: 'smart_toy', label: 'Guia & Regras' },\n]\n\nexport default function Example() {\n  const [active, setActive] = useState(0)\n\n  return (\n    <div className=\"trdr-sub-menu\">\n      {items.map(({ icon, label }, i) => (\n        <div\n          key={label}\n          className={`trdr-sub-menu-item ${i === active ? 'trdr-sub-menu-item-active' : ''}`}\n          onClick={() => setActive(i)}\n        >\n          <span\n            className=\"material-symbols-outlined\"\n            style={{ fontSize: 20, color: 'var(--content-tertiary)' }}\n          >\n            {icon}\n          </span>\n          <span>{label}</span>\n        </div>\n      ))}\n    </div>\n  )\n}",
+    "prompt": "Implemente o componente Sub-menu Item do Design System TRDR.\n\nESPECIFICAÇÕES:\n- Container (.trdr-sub-menu): flex-col, gap 4px, width 236px, bg --bg-secondary (#141519), border 1px --border-subtle (#222222), radius --radius-sm (4px), padding 8px\n- Item (.trdr-sub-menu-item): flex, gap 8px, height 32px, padding 0 8px, radius 4px, font 14px/400 Inter, color --content-secondary (#E8E8E8)\n- Hover / Ativo (.trdr-sub-menu-item-active): bg --surface-secondary (#222222)\n- Ícone: Material Symbols Outlined, font-size 20px, color --content-tertiary (#A4A4A4)\n- Transição: background-color 0.1s\n\nImplemente com estado ativo via useState."
+  },
+  "dependencies": []
+}

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

@@ -0,0 +1,89 @@
+{
+  "slug": "switch",
+  "name": "Switch",
+  "figmaId": "1359:1740",
+  "category": "formulario",
+  "description": "Toggle on/off/mixed. Track de 32×16px com knob de 14px. Suporta estado indeterminado (mixed) com ícone de traço.",
+  "props": [
+    {
+      "name": "Type",
+      "type": "enum",
+      "values": [
+        "On",
+        "Off",
+        "Mixed"
+      ]
+    },
+    {
+      "name": "Disabled",
+      "type": "boolean",
+      "values": [
+        "true",
+        "false"
+      ]
+    }
+  ],
+  "dimensions": [
+    {
+      "label": "Track",
+      "width": "32px",
+      "height": "16px"
+    },
+    {
+      "label": "Knob",
+      "width": "14px",
+      "height": "14px"
+    },
+    {
+      "label": "Componente total",
+      "height": "24px"
+    }
+  ],
+  "tokens": [
+    {
+      "property": "Track On / Mixed",
+      "token": "action-brand-default",
+      "value": "#00D4FF"
+    },
+    {
+      "property": "Track Off",
+      "token": "surface-primary",
+      "value": "#4A4A4A"
+    },
+    {
+      "property": "Track Disabled",
+      "token": "surface-secondary",
+      "value": "#222222"
+    },
+    {
+      "property": "Knob",
+      "token": "—",
+      "value": "#FFFFFF"
+    },
+    {
+      "property": "Focus border",
+      "token": "border-focus",
+      "value": "#00D4FF"
+    },
+    {
+      "property": "Label padrão",
+      "token": "content-primary",
+      "value": "#FFFFFF"
+    },
+    {
+      "property": "Label disabled",
+      "token": "content-tertiary",
+      "value": "#A4A4A4"
+    }
+  ],
+  "anatomy": "[button role=switch height=24px gap=8px]\n  └── [Track 32×16px radius-full bg=action-brand-default|surface-primary]\n        └── [Knob 14×14px radius-full white, esquerda=Off, direita=On]\n        └── [Mixed: traço horizontal 8×1.5px branco centralizado]\n  └── [Label 12px/500 font-secondary]",
+  "notes": "Knob: top=1px, left=1px (Off) ou right=1px (On). Foco via :focus-visible com outline border-focus.",
+  "implemented": true,
+  "code": {
+    "html": "<!-- On -->\n<button class=\"trdr-switch\" role=\"switch\" aria-checked=\"true\">\n  <span class=\"trdr-switch-track trdr-switch-track-on\">\n    <span class=\"trdr-switch-knob\"></span>\n  </span>\n  <span>Ativar notificações</span>\n</button>\n\n<!-- Off -->\n<button class=\"trdr-switch\" role=\"switch\" aria-checked=\"false\">\n  <span class=\"trdr-switch-track\">\n    <span class=\"trdr-switch-knob\"></span>\n  </span>\n  <span>Ativar notificações</span>\n</button>\n\n<!-- Mixed -->\n<button class=\"trdr-switch\" role=\"switch\" aria-checked=\"mixed\">\n  <span class=\"trdr-switch-track trdr-switch-track-mixed\">\n    <span class=\"trdr-switch-mixed-icon\">\n      <span class=\"trdr-switch-mixed-dash\"></span>\n    </span>\n  </span>\n  <span>Ativar notificações</span>\n</button>\n\n<!-- Disabled -->\n<button class=\"trdr-switch\" role=\"switch\" aria-checked=\"false\" disabled>\n  <span class=\"trdr-switch-track\">\n    <span class=\"trdr-switch-knob\"></span>\n  </span>\n  <span>Desativado</span>\n</button>",
+    "css": ".trdr-switch {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--spacing-sm);         /* 8px */\n  height: 24px;\n  cursor: pointer;\n  background: none;\n  border: none;\n  padding: 0;\n  font-family: var(--font-secondary);\n  font-size: 12px;\n  font-weight: 500;\n  color: var(--content-primary);  /* #FFFFFF */\n  letter-spacing: 0.2px;\n  transition: color 0.15s ease;\n}\n\n.trdr-switch:disabled {\n  cursor: not-allowed;\n  color: var(--content-tertiary); /* #A4A4A4 */\n}\n\n.trdr-switch-track {\n  position: relative;\n  width: 32px;\n  height: 16px;\n  border-radius: var(--radius-full); /* 9999px */\n  background-color: var(--surface-primary); /* #4A4A4A — Off */\n  flex-shrink: 0;\n  transition: background-color 0.15s ease;\n}\n\n.trdr-switch-track-on,\n.trdr-switch-track-mixed {\n  background-color: var(--action-brand-default); /* #00D4FF */\n}\n\n.trdr-switch:disabled .trdr-switch-track {\n  background-color: var(--surface-secondary); /* #222222 */\n}\n\n.trdr-switch:focus-visible .trdr-switch-track {\n  outline: 1px solid var(--border-focus); /* #00D4FF */\n  outline-offset: 2px;\n}\n\n.trdr-switch-knob {\n  position: absolute;\n  width: 14px;\n  height: 14px;\n  border-radius: var(--radius-full);\n  background-color: #ffffff;\n  top: 1px;\n  left: 1px;\n  transition: left 0.15s ease, right 0.15s ease;\n}\n\n.trdr-switch-track-on .trdr-switch-knob {\n  left: auto;\n  right: 1px;\n}\n\n.trdr-switch-mixed-icon {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.trdr-switch-mixed-dash {\n  width: 8px;\n  height: 1.5px;\n  background-color: #ffffff;\n  border-radius: 1px;\n}",
+    "react": "import Switch from '@/components/ui/Switch'\nimport { useState } from 'react'\n\nexport default function Example() {\n  const [type, setType] = useState<'on' | 'off' | 'mixed'>('off')\n\n  return (\n    <Switch\n      type={type}\n      label=\"Ativar notificações\"\n      onChange={setType}\n    />\n  )\n}\n\n// Disabled\n<Switch type=\"on\" label=\"Sempre ativo\" disabled />\n\n// Mixed (indeterminado)\n<Switch type=\"mixed\" label=\"Configuração parcial\" onChange={setType} />",
+    "prompt": "Implemente o componente Switch do Design System TRDR.\n\nESPECIFICAÇÕES PIXEL-PERFECT:\n- Track: 32×16px, border-radius: 9999px (--radius-full)\n- Knob: 14×14px, border-radius: 9999px, cor #FFFFFF\n- Knob Off: top=1px, left=1px | Knob On: top=1px, right=1px\n- Gap track→label: 8px (--spacing-sm)\n- Altura total: 24px\n- Label: 12px, weight 500, font-secondary\n\nTOKENS OBRIGATÓRIOS:\n- Track On/Mixed: --action-brand-default (#00D4FF)\n- Track Off: --surface-primary (#4A4A4A)\n- Track Disabled: --surface-secondary (#222222)\n- Knob: #FFFFFF (não tem token, é sempre branco)\n- Focus outline: --border-focus (#00D4FF)\n- Label padrão: --content-primary (#FFFFFF)\n- Label disabled: --content-tertiary (#A4A4A4)\n\nCOMPORTAMENTO:\n- role=\"switch\", aria-checked=\"true\"|\"false\"|\"mixed\"\n- Estado Mixed: traço horizontal 8×1.5px branco centralizado no track\n- Transição suave 0.15s no knob e background do track\n- :focus-visible com outline no track (não no botão inteiro)\n- :disabled: cursor not-allowed, label muted, track escurecido"
+  },
+  "dependencies": []
+}