trdr-ds-install 1.0.2 → 1.2.0
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.
- package/README.md +61 -17
- package/package.json +7 -1
- package/plugins/trdr-design-system/skills/trdr-ds/SKILL.md +247 -571
- package/plugins/trdr-design-system/skills/trdr-ds/data/components.json +1165 -0
- package/plugins/trdr-design-system/skills/trdr-ds/references/rules.md +16 -3
- package/plugins/trdr-design-system/skills/trdr-ds/references/tokens.css +399 -0
|
@@ -0,0 +1,1165 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": "1.0",
|
|
3
|
+
"generatedAt": "2026-05-08T21:43:42.458Z",
|
|
4
|
+
"total": 13,
|
|
5
|
+
"implemented": 13,
|
|
6
|
+
"categories": {
|
|
7
|
+
"formulario": "Formulário / Controles",
|
|
8
|
+
"modal": "Modais / Overlays",
|
|
9
|
+
"navegacao": "Navegação",
|
|
10
|
+
"floating-menu": "Floating Menus",
|
|
11
|
+
"trading": "Trading",
|
|
12
|
+
"configuracao": "Configuração",
|
|
13
|
+
"ia": "Inteligência Artificial",
|
|
14
|
+
"outros": "Outros"
|
|
15
|
+
},
|
|
16
|
+
"components": [
|
|
17
|
+
{
|
|
18
|
+
"slug": "button",
|
|
19
|
+
"name": "Button",
|
|
20
|
+
"figmaId": "1318:749",
|
|
21
|
+
"category": "formulario",
|
|
22
|
+
"description": "Botão principal do sistema com 10 variantes visuais, 2 tamanhos e 4 estados.",
|
|
23
|
+
"props": [
|
|
24
|
+
{
|
|
25
|
+
"name": "Variant",
|
|
26
|
+
"type": "enum",
|
|
27
|
+
"values": [
|
|
28
|
+
"Primary",
|
|
29
|
+
"Secondary",
|
|
30
|
+
"Ghost",
|
|
31
|
+
"Link",
|
|
32
|
+
"Link Danger",
|
|
33
|
+
"Destructive",
|
|
34
|
+
"Inverse",
|
|
35
|
+
"Long",
|
|
36
|
+
"Short",
|
|
37
|
+
"Secondary Destruct"
|
|
38
|
+
]
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
"name": "Size",
|
|
42
|
+
"type": "enum",
|
|
43
|
+
"values": [
|
|
44
|
+
"Default",
|
|
45
|
+
"Large"
|
|
46
|
+
]
|
|
47
|
+
},
|
|
48
|
+
{
|
|
49
|
+
"name": "State",
|
|
50
|
+
"type": "enum",
|
|
51
|
+
"values": [
|
|
52
|
+
"Default",
|
|
53
|
+
"Hover",
|
|
54
|
+
"Pressed",
|
|
55
|
+
"Disabled"
|
|
56
|
+
]
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
"name": "Icon Left",
|
|
60
|
+
"type": "boolean",
|
|
61
|
+
"values": [
|
|
62
|
+
"true",
|
|
63
|
+
"false"
|
|
64
|
+
]
|
|
65
|
+
},
|
|
66
|
+
{
|
|
67
|
+
"name": "Icon Right",
|
|
68
|
+
"type": "boolean",
|
|
69
|
+
"values": [
|
|
70
|
+
"true",
|
|
71
|
+
"false"
|
|
72
|
+
]
|
|
73
|
+
}
|
|
74
|
+
],
|
|
75
|
+
"dimensions": [
|
|
76
|
+
{
|
|
77
|
+
"label": "Default",
|
|
78
|
+
"height": "24px"
|
|
79
|
+
},
|
|
80
|
+
{
|
|
81
|
+
"label": "Large",
|
|
82
|
+
"height": "32px"
|
|
83
|
+
}
|
|
84
|
+
],
|
|
85
|
+
"tokens": [
|
|
86
|
+
{
|
|
87
|
+
"property": "BG Primary",
|
|
88
|
+
"token": "action.brand.default",
|
|
89
|
+
"value": "#00D4FF"
|
|
90
|
+
},
|
|
91
|
+
{
|
|
92
|
+
"property": "BG Primary Hover",
|
|
93
|
+
"token": "action.brand.hover",
|
|
94
|
+
"value": "#00A8CC"
|
|
95
|
+
},
|
|
96
|
+
{
|
|
97
|
+
"property": "BG Primary Active",
|
|
98
|
+
"token": "action.brand.active",
|
|
99
|
+
"value": "#007D99"
|
|
100
|
+
},
|
|
101
|
+
{
|
|
102
|
+
"property": "BG Secondary",
|
|
103
|
+
"token": "action.secondary.default",
|
|
104
|
+
"value": "#4A4A4A"
|
|
105
|
+
},
|
|
106
|
+
{
|
|
107
|
+
"property": "Text sobre Primary",
|
|
108
|
+
"token": "content.inverse",
|
|
109
|
+
"value": "#1A1A1A"
|
|
110
|
+
},
|
|
111
|
+
{
|
|
112
|
+
"property": "Text sobre Secondary",
|
|
113
|
+
"token": "content.primary",
|
|
114
|
+
"value": "#FFFFFF"
|
|
115
|
+
},
|
|
116
|
+
{
|
|
117
|
+
"property": "Text Ghost",
|
|
118
|
+
"token": "content.secondary",
|
|
119
|
+
"value": "#E8E8E8"
|
|
120
|
+
},
|
|
121
|
+
{
|
|
122
|
+
"property": "BG Destructive",
|
|
123
|
+
"token": "action.destructive.default",
|
|
124
|
+
"value": "#EA580C"
|
|
125
|
+
},
|
|
126
|
+
{
|
|
127
|
+
"property": "BG Long (trading)",
|
|
128
|
+
"token": "context.trading.long.default",
|
|
129
|
+
"value": "#4FE29014"
|
|
130
|
+
},
|
|
131
|
+
{
|
|
132
|
+
"property": "Text Long (trading)",
|
|
133
|
+
"token": "context.trading.long.text",
|
|
134
|
+
"value": "#6DE7A2"
|
|
135
|
+
},
|
|
136
|
+
{
|
|
137
|
+
"property": "BG Short (trading)",
|
|
138
|
+
"token": "context.trading.short.default",
|
|
139
|
+
"value": "#F1312614"
|
|
140
|
+
},
|
|
141
|
+
{
|
|
142
|
+
"property": "Text Short (trading)",
|
|
143
|
+
"token": "context.trading.short.text",
|
|
144
|
+
"value": "#F56D64"
|
|
145
|
+
},
|
|
146
|
+
{
|
|
147
|
+
"property": "Border radius",
|
|
148
|
+
"token": "scale.radius.md",
|
|
149
|
+
"value": "8px"
|
|
150
|
+
},
|
|
151
|
+
{
|
|
152
|
+
"property": "Border Ghost",
|
|
153
|
+
"token": "border.default",
|
|
154
|
+
"value": "#4A4A4A"
|
|
155
|
+
},
|
|
156
|
+
{
|
|
157
|
+
"property": "Font family",
|
|
158
|
+
"token": "font.secondary",
|
|
159
|
+
"value": "Inter"
|
|
160
|
+
},
|
|
161
|
+
{
|
|
162
|
+
"property": "Font size Default",
|
|
163
|
+
"token": "font-size-100",
|
|
164
|
+
"value": "14px"
|
|
165
|
+
},
|
|
166
|
+
{
|
|
167
|
+
"property": "Font weight",
|
|
168
|
+
"token": "text.label.sm.weight",
|
|
169
|
+
"value": "600 (SemiBold)"
|
|
170
|
+
}
|
|
171
|
+
],
|
|
172
|
+
"anatomy": "[Icon Left?] [Label] [Icon Right?]\nGap: 4px | Padding: 8px H (Default) / 12px H (Large)\nHeight: 24px (Default) / 32px (Large) | Border-radius: 8px",
|
|
173
|
+
"notes": "Variantes \"Long\" e \"Short\" são botões para contextos de trading (compra/venda). \"Secondary Destruct\" é Ghost com cor destrutiva. \"Inverse\" é usado sobre fundos claros.",
|
|
174
|
+
"implemented": true,
|
|
175
|
+
"code": {
|
|
176
|
+
"html": "<!-- Primary -->\n<button class=\"trdr-btn trdr-btn-primary\">Confirmar</button>\n<button class=\"trdr-btn trdr-btn-primary trdr-btn-lg\">Confirmar (Large)</button>\n<button class=\"trdr-btn trdr-btn-primary\" disabled>Desabilitado</button>\n\n<!-- Secondary -->\n<button class=\"trdr-btn trdr-btn-secondary\">Cancelar</button>\n\n<!-- Ghost -->\n<button class=\"trdr-btn trdr-btn-ghost\">Ghost</button>\n\n<!-- Destructive -->\n<button class=\"trdr-btn trdr-btn-destructive\">Excluir</button>\n\n<!-- Inverse -->\n<button class=\"trdr-btn trdr-btn-inverse\">Inverse</button>\n\n<!-- Link -->\n<button class=\"trdr-btn trdr-btn-link\">Ver mais</button>\n\n<!-- Link Danger -->\n<button class=\"trdr-btn trdr-btn-link-danger\">Remover</button>\n\n<!-- Secondary Destruct -->\n<button class=\"trdr-btn trdr-btn-secondary-destruct\">Cancelar operação</button>\n\n<!-- Long / Short — Trading -->\n<button class=\"trdr-btn trdr-btn-long\">Long</button>\n<button class=\"trdr-btn trdr-btn-short\">Short</button>",
|
|
177
|
+
"css": "/* Button — Design System TRDR | Figma: 1318:749 */\n.trdr-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--spacing-xs); /* 4px */\n height: 24px;\n padding: 0 var(--spacing-sm); /* 0 8px */\n border-radius: var(--radius-md); /* 8px */\n font-family: var(--font-secondary);\n font-size: 14px;\n font-weight: 600;\n line-height: 1;\n white-space: nowrap;\n transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;\n cursor: pointer;\n border: none;\n text-decoration: none;\n}\n\n.trdr-btn-lg {\n height: 32px;\n padding: 0 var(--spacing-md); /* 0 12px */\n}\n\n/* Primary */\n.trdr-btn-primary {\n background-color: var(--action-brand-default); /* #00D4FF */\n color: var(--content-inverse);\n border: 0.5px solid var(--action-brand-default);\n}\n.trdr-btn-primary:hover { background-color: var(--action-brand-hover); border-color: var(--action-brand-hover); }\n.trdr-btn-primary:active { background-color: var(--action-brand-active); border-color: var(--action-brand-active); }\n.trdr-btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }\n\n/* Secondary */\n.trdr-btn-secondary {\n background-color: var(--action-secondary-default); /* #4A4A4A */\n color: var(--content-primary);\n}\n.trdr-btn-secondary:hover { background-color: var(--action-secondary-hover); }\n.trdr-btn-secondary:active { background-color: var(--action-secondary-active); }\n.trdr-btn-secondary:disabled { background-color: var(--action-secondary-disabled); color: var(--content-disabled); cursor: not-allowed; }\n\n/* Ghost */\n.trdr-btn-ghost {\n background-color: transparent;\n color: var(--content-secondary); /* #E8E8E8 */\n border: 1px solid var(--border-default); /* #4A4A4A */\n}\n.trdr-btn-ghost:hover { background-color: var(--surface-secondary); border-color: var(--border-strong); color: var(--content-primary); }\n.trdr-btn-ghost:active { background-color: var(--surface-primary); }\n.trdr-btn-ghost:disabled { color: var(--content-disabled); border-color: var(--border-disabled); opacity: 0.5; cursor: not-allowed; }\n\n/* Destructive */\n.trdr-btn-destructive {\n background-color: var(--action-destructive-default); /* #EA580C */\n color: var(--content-primary);\n}\n.trdr-btn-destructive:hover { background-color: var(--action-destructive-hover); }\n.trdr-btn-destructive:active { background-color: var(--action-destructive-active); }\n\n/* Inverse */\n.trdr-btn-inverse {\n background-color: var(--bg-inverse); /* #FFFFFF */\n color: var(--content-inverse); /* #1A1A1A */\n border: 0.5px solid var(--bg-inverse);\n}\n.trdr-btn-inverse:hover { background-color: var(--color-neutral-100); }\n\n/* Link */\n.trdr-btn-link {\n background-color: transparent;\n color: var(--content-brand); /* #00D4FF */\n padding-left: 0;\n padding-right: 0;\n}\n.trdr-btn-link:hover { color: var(--action-brand-hover); text-decoration: underline; }\n\n/* Link Danger */\n.trdr-btn-link-danger {\n background-color: transparent;\n color: var(--content-error); /* #F34F45 */\n padding-left: 0;\n padding-right: 0;\n}\n.trdr-btn-link-danger:hover { color: var(--action-destructive-hover); text-decoration: underline; }\n\n/* Secondary Destruct */\n.trdr-btn-secondary-destruct {\n background-color: transparent;\n color: var(--action-destructive-default);\n border: 1px solid var(--action-destructive-default);\n}\n.trdr-btn-secondary-destruct:hover { background-color: var(--action-destructive-disabled); }\n\n/* Long — Trading compra (verde) */\n.trdr-btn-long {\n background-color: var(--context-trading-long-default);\n color: var(--context-trading-long-text);\n min-width: 80px;\n}\n.trdr-btn-long:hover { background-color: var(--context-trading-long-hover); }\n\n/* Short — Trading venda (vermelho) */\n.trdr-btn-short {\n background-color: var(--context-trading-short-default);\n color: var(--context-trading-short-text);\n min-width: 80px;\n}\n.trdr-btn-short:hover { background-color: var(--context-trading-short-hover); }",
|
|
178
|
+
"react": "import Button from '@/components/ui/Button'\n\n// Variantes principais\n<Button variant=\"primary\">Confirmar</Button>\n<Button variant=\"secondary\">Cancelar</Button>\n<Button variant=\"ghost\">Ghost</Button>\n<Button variant=\"destructive\">Excluir</Button>\n\n// Tamanho Large\n<Button variant=\"primary\" size=\"lg\">Confirmar (Large)</Button>\n\n// Com ícone (Material Symbols)\n<Button\n variant=\"primary\"\n iconLeft={<span style={{ fontFamily: 'Material Symbols Outlined', fontSize: 16 }}>add</span>}\n>\n Nova posição\n</Button>\n\n// Disabled\n<Button variant=\"primary\" disabled>Processando...</Button>\n\n// Variantes de link\n<Button variant=\"link\">Ver mais</Button>\n<Button variant=\"link-danger\">Remover</Button>\n\n// Inverse (sobre fundo claro)\n<Button variant=\"inverse\">Ação</Button>\n\n// Secondary Destruct\n<Button variant=\"secondary-destruct\">Cancelar operação</Button>\n\n// Trading\n<Button variant=\"long\">Long</Button>\n<Button variant=\"short\">Short</Button>\n\n// Interface de Props:\n// variant?: 'primary' | 'secondary' | 'ghost' | 'destructive' | 'inverse'\n// | 'link' | 'link-danger' | 'secondary-destruct' | 'long' | 'short'\n// size?: 'default' | 'lg'\n// iconLeft?: React.ReactNode\n// iconRight?: React.ReactNode\n// + todos os atributos nativos do <button>",
|
|
179
|
+
"prompt": "Implemente o componente Button do Design System TRDR. Figma ID: 1318:749.\n\nDIMENSÕES:\n- Default: height 24px, padding 0 8px, gap 4px\n- Large: height 32px, padding 0 12px, gap 4px\n- Border-radius: var(--radius-md) — 8px (OBRIGATÓRIO, não usar --radius-sm)\n\nTIPOGRAFIA:\n- font-family: var(--font-secondary) — Inter\n- font-size: 14px (ambos os tamanhos)\n- font-weight: 600 (SemiBold)\n\n10 VARIANTES com tokens obrigatórios:\n\nPrimary:\n BG: var(--action-brand-default) /* #00D4FF */\n Color: var(--content-inverse)\n Border: 0.5px solid var(--action-brand-default)\n Hover: var(--action-brand-hover) | Active: var(--action-brand-active)\n\nSecondary:\n BG: var(--action-secondary-default) /* #4A4A4A */\n Color: var(--content-primary)\n Hover: var(--action-secondary-hover) | Active: var(--action-secondary-active)\n\nGhost:\n BG: transparent | Color: var(--content-secondary) /* #E8E8E8 */\n Border: 1px solid var(--border-default)\n Hover: BG var(--surface-secondary), border var(--border-strong), color var(--content-primary)\n\nDestructive:\n BG: var(--action-destructive-default) /* #EA580C */\n Color: var(--content-primary)\n Hover: var(--action-destructive-hover) | Active: var(--action-destructive-active)\n\nInverse:\n BG: var(--bg-inverse) /* #FFFFFF */\n Color: var(--content-inverse) /* #1A1A1A */\n Border: 0.5px solid var(--bg-inverse)\n\nLink:\n BG: transparent | Color: var(--content-brand) | padding-x: 0\n Hover: color var(--action-brand-hover), text-decoration underline\n\nLink Danger:\n BG: transparent | Color: var(--content-error) | padding-x: 0\n Hover: color var(--action-destructive-hover), text-decoration underline\n\nSecondary Destruct:\n BG: transparent | Color: var(--action-destructive-default)\n Border: 1px solid var(--action-destructive-default)\n Hover: BG var(--action-destructive-disabled)\n\nLong (trading compra):\n BG: var(--context-trading-long-default) | Color: var(--context-trading-long-text)\n min-width: 80px\n Hover: var(--context-trading-long-hover) | Active: var(--context-trading-long-active)\n\nShort (trading venda):\n BG: var(--context-trading-short-default) | Color: var(--context-trading-short-text)\n min-width: 80px\n Hover: var(--context-trading-short-hover) | Active: var(--context-trading-short-active)\n\nDisabled (global): opacity 0.4, cursor not-allowed\n\nImplemente como componente React com CSS Module. Props: variant, size, iconLeft, iconRight + atributos nativos do button. Resultado deve ser pixel-perfect em relação ao Figma."
|
|
180
|
+
}
|
|
181
|
+
},
|
|
182
|
+
{
|
|
183
|
+
"slug": "text-input",
|
|
184
|
+
"name": "Text Input",
|
|
185
|
+
"figmaId": "1327:17000",
|
|
186
|
+
"category": "formulario",
|
|
187
|
+
"description": "Campo de texto com 3 variantes (Single Line, Multi Line, Quick Action), estados de validação e 2 tamanhos.",
|
|
188
|
+
"props": [
|
|
189
|
+
{
|
|
190
|
+
"name": "variant",
|
|
191
|
+
"type": "enum",
|
|
192
|
+
"values": [
|
|
193
|
+
"single-line",
|
|
194
|
+
"multi-line",
|
|
195
|
+
"quick-action"
|
|
196
|
+
]
|
|
197
|
+
},
|
|
198
|
+
{
|
|
199
|
+
"name": "size",
|
|
200
|
+
"type": "enum",
|
|
201
|
+
"values": [
|
|
202
|
+
"default",
|
|
203
|
+
"large"
|
|
204
|
+
]
|
|
205
|
+
},
|
|
206
|
+
{
|
|
207
|
+
"name": "validation",
|
|
208
|
+
"type": "enum",
|
|
209
|
+
"values": [
|
|
210
|
+
"default",
|
|
211
|
+
"error",
|
|
212
|
+
"warning",
|
|
213
|
+
"success"
|
|
214
|
+
]
|
|
215
|
+
},
|
|
216
|
+
{
|
|
217
|
+
"name": "iconLeft",
|
|
218
|
+
"type": "boolean",
|
|
219
|
+
"values": [
|
|
220
|
+
"true",
|
|
221
|
+
"false"
|
|
222
|
+
]
|
|
223
|
+
},
|
|
224
|
+
{
|
|
225
|
+
"name": "disabled",
|
|
226
|
+
"type": "boolean",
|
|
227
|
+
"values": [
|
|
228
|
+
"true",
|
|
229
|
+
"false"
|
|
230
|
+
]
|
|
231
|
+
},
|
|
232
|
+
{
|
|
233
|
+
"name": "readOnly",
|
|
234
|
+
"type": "boolean",
|
|
235
|
+
"values": [
|
|
236
|
+
"true",
|
|
237
|
+
"false"
|
|
238
|
+
]
|
|
239
|
+
},
|
|
240
|
+
{
|
|
241
|
+
"name": "placeholder",
|
|
242
|
+
"type": "string",
|
|
243
|
+
"values": []
|
|
244
|
+
},
|
|
245
|
+
{
|
|
246
|
+
"name": "onClear",
|
|
247
|
+
"type": "function",
|
|
248
|
+
"values": []
|
|
249
|
+
}
|
|
250
|
+
],
|
|
251
|
+
"dimensions": [
|
|
252
|
+
{
|
|
253
|
+
"label": "Default (Single Line)",
|
|
254
|
+
"height": "24px",
|
|
255
|
+
"width": "—"
|
|
256
|
+
},
|
|
257
|
+
{
|
|
258
|
+
"label": "Large (Single Line)",
|
|
259
|
+
"height": "32px",
|
|
260
|
+
"width": "—"
|
|
261
|
+
},
|
|
262
|
+
{
|
|
263
|
+
"label": "Quick Action",
|
|
264
|
+
"height": "32px",
|
|
265
|
+
"width": "—"
|
|
266
|
+
},
|
|
267
|
+
{
|
|
268
|
+
"label": "Multi Line",
|
|
269
|
+
"height": "auto (min 56px)",
|
|
270
|
+
"width": "—"
|
|
271
|
+
},
|
|
272
|
+
{
|
|
273
|
+
"label": "Icon slot",
|
|
274
|
+
"height": "24px",
|
|
275
|
+
"width": "24px"
|
|
276
|
+
}
|
|
277
|
+
],
|
|
278
|
+
"tokens": [
|
|
279
|
+
{
|
|
280
|
+
"property": "Background",
|
|
281
|
+
"token": "surface-primary",
|
|
282
|
+
"value": "#4A4A4A"
|
|
283
|
+
},
|
|
284
|
+
{
|
|
285
|
+
"property": "Border focus",
|
|
286
|
+
"token": "border-focus",
|
|
287
|
+
"value": "#00D4FF"
|
|
288
|
+
},
|
|
289
|
+
{
|
|
290
|
+
"property": "Border multi-line/disabled",
|
|
291
|
+
"token": "border-strong",
|
|
292
|
+
"value": "#A4A4A4"
|
|
293
|
+
},
|
|
294
|
+
{
|
|
295
|
+
"property": "Texto preenchido",
|
|
296
|
+
"token": "content-primary",
|
|
297
|
+
"value": "#FFFFFF"
|
|
298
|
+
},
|
|
299
|
+
{
|
|
300
|
+
"property": "Placeholder",
|
|
301
|
+
"token": "content-tertiary",
|
|
302
|
+
"value": "#A4A4A4"
|
|
303
|
+
},
|
|
304
|
+
{
|
|
305
|
+
"property": "Texto disabled",
|
|
306
|
+
"token": "content-disabled",
|
|
307
|
+
"value": "#4A4A4A"
|
|
308
|
+
},
|
|
309
|
+
{
|
|
310
|
+
"property": "Borda error",
|
|
311
|
+
"token": "content-error",
|
|
312
|
+
"value": "#F34F45"
|
|
313
|
+
},
|
|
314
|
+
{
|
|
315
|
+
"property": "Borda warning",
|
|
316
|
+
"token": "content-warning",
|
|
317
|
+
"value": "#FFCC40"
|
|
318
|
+
},
|
|
319
|
+
{
|
|
320
|
+
"property": "Borda success",
|
|
321
|
+
"token": "content-success",
|
|
322
|
+
"value": "#4FE290"
|
|
323
|
+
}
|
|
324
|
+
],
|
|
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.",
|
|
327
|
+
"implemented": true,
|
|
328
|
+
"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."
|
|
333
|
+
}
|
|
334
|
+
},
|
|
335
|
+
{
|
|
336
|
+
"slug": "dropdown",
|
|
337
|
+
"name": "Dropdown",
|
|
338
|
+
"figmaId": "1462:16743",
|
|
339
|
+
"category": "formulario",
|
|
340
|
+
"description": "Seletor com chevron, 2 tamanhos (Default 24px / Large 32px) e 3 estados. Suporta stroke, sem stroke e icon lead. Abre um floating menu com opções.",
|
|
341
|
+
"props": [
|
|
342
|
+
{
|
|
343
|
+
"name": "Size",
|
|
344
|
+
"type": "enum",
|
|
345
|
+
"values": [
|
|
346
|
+
"Default",
|
|
347
|
+
"Large"
|
|
348
|
+
]
|
|
349
|
+
},
|
|
350
|
+
{
|
|
351
|
+
"name": "State",
|
|
352
|
+
"type": "enum",
|
|
353
|
+
"values": [
|
|
354
|
+
"Default",
|
|
355
|
+
"Focused",
|
|
356
|
+
"Active",
|
|
357
|
+
"Disabled"
|
|
358
|
+
]
|
|
359
|
+
},
|
|
360
|
+
{
|
|
361
|
+
"name": "Stroke",
|
|
362
|
+
"type": "boolean",
|
|
363
|
+
"values": [
|
|
364
|
+
"true",
|
|
365
|
+
"false"
|
|
366
|
+
]
|
|
367
|
+
},
|
|
368
|
+
{
|
|
369
|
+
"name": "Icon Lead",
|
|
370
|
+
"type": "boolean",
|
|
371
|
+
"values": [
|
|
372
|
+
"true",
|
|
373
|
+
"false"
|
|
374
|
+
]
|
|
375
|
+
}
|
|
376
|
+
],
|
|
377
|
+
"dimensions": [
|
|
378
|
+
{
|
|
379
|
+
"label": "Default",
|
|
380
|
+
"height": "24px"
|
|
381
|
+
},
|
|
382
|
+
{
|
|
383
|
+
"label": "Large",
|
|
384
|
+
"height": "32px"
|
|
385
|
+
}
|
|
386
|
+
],
|
|
387
|
+
"tokens": [
|
|
388
|
+
{
|
|
389
|
+
"property": "Background",
|
|
390
|
+
"token": "surface-primary",
|
|
391
|
+
"value": "#4A4A4A"
|
|
392
|
+
},
|
|
393
|
+
{
|
|
394
|
+
"property": "Border padrão",
|
|
395
|
+
"token": "border-strong",
|
|
396
|
+
"value": "#A4A4A4"
|
|
397
|
+
},
|
|
398
|
+
{
|
|
399
|
+
"property": "Border focused/active",
|
|
400
|
+
"token": "border-focus",
|
|
401
|
+
"value": "#00D4FF"
|
|
402
|
+
},
|
|
403
|
+
{
|
|
404
|
+
"property": "Texto",
|
|
405
|
+
"token": "content-primary",
|
|
406
|
+
"value": "#FFFFFF"
|
|
407
|
+
},
|
|
408
|
+
{
|
|
409
|
+
"property": "Texto disabled",
|
|
410
|
+
"token": "content-tertiary",
|
|
411
|
+
"value": "#A4A4A4"
|
|
412
|
+
},
|
|
413
|
+
{
|
|
414
|
+
"property": "Chevron",
|
|
415
|
+
"token": "content-tertiary",
|
|
416
|
+
"value": "#A4A4A4"
|
|
417
|
+
}
|
|
418
|
+
],
|
|
419
|
+
"anatomy": "[button display=inline-flex border-radius=5px]\n └── [Icon Lead 24×24px opcional]\n └── [Label flex=1 overflow=ellipsis]\n └── [Chevron Down 24×24px]",
|
|
420
|
+
"implemented": true,
|
|
421
|
+
"code": {
|
|
422
|
+
"html": "<!-- Default -->\n<button class=\"trdr-dropdown\">\n <span class=\"trdr-dropdown-label\">Mercado</span>\n <span class=\"trdr-dropdown-chevron\">\n <svg width=\"10\" height=\"6\" viewBox=\"0 0 10 6\" fill=\"none\">\n <path d=\"M1 1L5 5L9 1\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n</button>\n\n<!-- Large -->\n<button class=\"trdr-dropdown trdr-dropdown-lg\">\n <span class=\"trdr-dropdown-label\">Instrumento</span>\n <span class=\"trdr-dropdown-chevron\">...</span>\n</button>\n\n<!-- Disabled -->\n<button class=\"trdr-dropdown\" disabled>\n <span class=\"trdr-dropdown-label\">Indisponível</span>\n <span class=\"trdr-dropdown-chevron\">...</span>\n</button>",
|
|
423
|
+
"css": ".trdr-dropdown {\n display: inline-flex;\n align-items: center;\n background-color: var(--surface-primary); /* #4A4A4A */\n border: 1px solid var(--border-strong); /* #A4A4A4 */\n border-radius: 5px;\n height: 24px;\n padding: 0 4px 0 var(--spacing-sm); /* right=4px, left=8px */\n font-family: var(--font-secondary);\n font-size: 12px;\n font-weight: 500;\n color: var(--content-primary); /* #FFFFFF */\n cursor: pointer;\n min-width: 80px;\n transition: border-color 0.15s ease;\n}\n\n.trdr-dropdown-lg { height: 32px; }\n.trdr-dropdown-no-stroke { border-color: transparent; }\n.trdr-dropdown-active { border-color: var(--border-focus); } /* #00D4FF */\n\n.trdr-dropdown:hover:not(:disabled) { border-color: var(--border-focus); }\n.trdr-dropdown:focus-visible { outline: none; border-color: var(--border-focus); }\n.trdr-dropdown:disabled { color: var(--content-tertiary); cursor: not-allowed; }\n\n.trdr-dropdown-label {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.trdr-dropdown-chevron {\n flex-shrink: 0;\n width: 24px; height: 24px;\n display: flex; align-items: center; justify-content: center;\n color: var(--content-tertiary);\n}",
|
|
424
|
+
"react": "import Dropdown from '@/components/ui/Dropdown'\nimport { useState } from 'react'\n\nexport default function Example() {\n const [value, setValue] = useState('WINQ25')\n\n return (\n <>\n {/* Default size */}\n <Dropdown value={value} size=\"default\" />\n\n {/* Large size */}\n <Dropdown value=\"WINFUT\" size=\"lg\" />\n\n {/* Sem borda */}\n <Dropdown value=\"Mercado\" stroke={false} />\n\n {/* Disabled */}\n <Dropdown value=\"Indisponível\" disabled />\n\n {/* Active (aberto) */}\n <Dropdown value={value} state=\"active\" />\n </>\n )\n}",
|
|
425
|
+
"prompt": "Implemente o componente Dropdown do Design System TRDR.\n\nESPECIFICAÇÕES PIXEL-PERFECT:\n- Default: 24px altura | Large: 32px altura\n- Padding: left=8px (--spacing-sm), right=4px\n- Border-radius: 5px (não é --radius-sm, é 5px fixo)\n- Font: 12px / 500 / --font-secondary\n\nTOKENS OBRIGATÓRIOS:\n- Background: --surface-primary (#4A4A4A)\n- Border padrão: --border-strong (#A4A4A4)\n- Border focused/active: --border-focus (#00D4FF)\n- Texto: --content-primary (#FFFFFF)\n- Texto disabled: --content-tertiary (#A4A4A4)\n- Chevron: --content-tertiary (#A4A4A4)\n\nESTRUTURA:\n- Container: button com flex, border, bg\n- Label: flex=1 com text-overflow ellipsis\n- Chevron: 24×24px, SVG path chevron-down\n\nCOMPORTAMENTO:\n- :hover → border-color: --border-focus\n- :focus-visible → outline: none, border-color: --border-focus\n- .trdr-dropdown-active → border-color: --border-focus\n- :disabled → content-tertiary, cursor not-allowed\n- Variante sem-stroke: border-color transparent"
|
|
426
|
+
}
|
|
427
|
+
},
|
|
428
|
+
{
|
|
429
|
+
"slug": "combo-input",
|
|
430
|
+
"name": "Combo Input",
|
|
431
|
+
"figmaId": "1551:11643",
|
|
432
|
+
"category": "formulario",
|
|
433
|
+
"description": "Input numérico split: área de valor (flex-1) + botão chevron (24×24px) separados por 1px gap. Altura 24px.",
|
|
434
|
+
"props": [
|
|
435
|
+
{
|
|
436
|
+
"name": "State",
|
|
437
|
+
"type": "enum",
|
|
438
|
+
"values": [
|
|
439
|
+
"Default",
|
|
440
|
+
"Hover",
|
|
441
|
+
"Selected Input",
|
|
442
|
+
"Selected Chevron"
|
|
443
|
+
]
|
|
444
|
+
},
|
|
445
|
+
{
|
|
446
|
+
"name": "Icon Lead",
|
|
447
|
+
"type": "boolean",
|
|
448
|
+
"values": [
|
|
449
|
+
"true",
|
|
450
|
+
"false"
|
|
451
|
+
]
|
|
452
|
+
}
|
|
453
|
+
],
|
|
454
|
+
"dimensions": [
|
|
455
|
+
{
|
|
456
|
+
"label": "Altura",
|
|
457
|
+
"height": "24px"
|
|
458
|
+
},
|
|
459
|
+
{
|
|
460
|
+
"label": "Chevron",
|
|
461
|
+
"width": "24px",
|
|
462
|
+
"height": "24px"
|
|
463
|
+
}
|
|
464
|
+
],
|
|
465
|
+
"tokens": [
|
|
466
|
+
{
|
|
467
|
+
"property": "BG value",
|
|
468
|
+
"token": "surface-primary",
|
|
469
|
+
"value": "#4A4A4A"
|
|
470
|
+
},
|
|
471
|
+
{
|
|
472
|
+
"property": "BG chevron default",
|
|
473
|
+
"token": "surface-primary",
|
|
474
|
+
"value": "#4A4A4A"
|
|
475
|
+
},
|
|
476
|
+
{
|
|
477
|
+
"property": "Chevron border",
|
|
478
|
+
"token": "border-focus",
|
|
479
|
+
"value": "#00D4FF"
|
|
480
|
+
},
|
|
481
|
+
{
|
|
482
|
+
"property": "Border hover",
|
|
483
|
+
"token": "border-strong",
|
|
484
|
+
"value": "#A4A4A4"
|
|
485
|
+
},
|
|
486
|
+
{
|
|
487
|
+
"property": "Selected chevron bg",
|
|
488
|
+
"token": "surface-brand",
|
|
489
|
+
"value": "#00D4FF29"
|
|
490
|
+
},
|
|
491
|
+
{
|
|
492
|
+
"property": "Texto",
|
|
493
|
+
"token": "content-primary",
|
|
494
|
+
"value": "#FFFFFF"
|
|
495
|
+
}
|
|
496
|
+
],
|
|
497
|
+
"anatomy": "[div display=flex gap=1px height=24px]\n └── [Input Value: flex=1, radius=5px 0 0 5px, bg=surface-primary]\n └── [Icon Lead 24×24px opcional]\n └── [Valor numérico 12px/500]\n └── [Chevron: 24×24px, radius=0 5px 5px 0, border=border-focus]\n └── [ChevronDown SVG]",
|
|
498
|
+
"implemented": true,
|
|
499
|
+
"code": {
|
|
500
|
+
"html": "<!-- Default -->\n<div class=\"trdr-combo-input\">\n <div class=\"trdr-combo-input-value\">16</div>\n <button class=\"trdr-combo-input-chevron\" aria-label=\"Abrir opções\">\n <svg width=\"10\" height=\"6\" viewBox=\"0 0 10 6\" fill=\"none\">\n <path d=\"M1 1L5 5L9 1\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n</div>\n\n<!-- Hover -->\n<div class=\"trdr-combo-input trdr-combo-input-hover\">\n <div class=\"trdr-combo-input-value\">16</div>\n <button class=\"trdr-combo-input-chevron\">...</button>\n</div>\n\n<!-- Selected Input -->\n<div class=\"trdr-combo-input trdr-combo-input-selected-input\">\n <div class=\"trdr-combo-input-value\">16</div>\n <button class=\"trdr-combo-input-chevron\">...</button>\n</div>",
|
|
501
|
+
"css": ".trdr-combo-input {\n display: inline-flex;\n align-items: stretch;\n gap: 1px; /* Split visual */\n height: 24px;\n font-family: var(--font-secondary);\n font-size: 12px; font-weight: 500;\n color: var(--content-primary);\n}\n\n.trdr-combo-input-value {\n flex: 1;\n display: flex; align-items: center;\n background-color: var(--surface-primary); /* #4A4A4A */\n border: 1px solid transparent;\n border-right: none;\n border-radius: 5px 0 0 5px;\n padding: 0 0 0 var(--spacing-sm);\n transition: border-color 0.12s ease;\n}\n\n.trdr-combo-input-chevron {\n width: 24px; height: 24px;\n display: flex; align-items: center; justify-content: center;\n background-color: var(--surface-primary);\n border: 1px solid var(--border-focus); /* Sempre com borda focus */\n border-radius: 0 5px 5px 0;\n cursor: pointer;\n color: var(--content-tertiary);\n}\n\n.trdr-combo-input-hover .trdr-combo-input-value { border-color: var(--border-strong); }\n.trdr-combo-input-selected-input .trdr-combo-input-value { border-color: var(--border-focus); }\n.trdr-combo-input-selected-input .trdr-combo-input-chevron { border-color: transparent; }\n.trdr-combo-input-selected-chevron .trdr-combo-input-chevron { background: var(--surface-brand); }",
|
|
502
|
+
"react": "import ComboInput from '@/components/ui/ComboInput'\nimport { useState } from 'react'\n\nexport default function Example() {\n const [value, setValue] = useState('16')\n\n return (\n <>\n <ComboInput value={value} />\n <ComboInput value=\"32\" state=\"hover\" />\n <ComboInput value=\"8\" state=\"selected-input\" />\n <ComboInput value=\"16\" state=\"selected-chevron\" onChevronClick={() => console.log('abrir menu')} />\n </>\n )\n}",
|
|
503
|
+
"prompt": "Implemente o componente ComboInput do Design System TRDR.\n\nESPECIFICAÇÕES PIXEL-PERFECT:\n- Container: display=flex, gap=1px, height=24px\n- Input Value: flex=1, padding-left=8px, border-radius=5px 0 0 5px\n- Chevron: width=24px, height=24px, border-radius=0 5px 5px 0\n\nTOKENS OBRIGATÓRIOS:\n- BG ambas as seções: --surface-primary (#4A4A4A)\n- Chevron border PADRÃO: --border-focus (#00D4FF) — SEMPRE ciano por padrão\n- Border hover: --border-strong (#A4A4A4) na seção input\n- Selected Input: border-focus na seção input, chevron sem borda\n- Selected Chevron: --surface-brand (#00D4FF29) no chevron\n\nCOMPORTAMENTO:\n- O gap de 1px entre seções cria o \"split\" visual\n- O chevron sempre tem borda focus no estado default (design TRDR)\n- Selecionar o input ativa borda focus na seção esquerda"
|
|
504
|
+
}
|
|
505
|
+
},
|
|
506
|
+
{
|
|
507
|
+
"slug": "checkbox",
|
|
508
|
+
"name": "Checkbox",
|
|
509
|
+
"figmaId": "1462:18059",
|
|
510
|
+
"category": "formulario",
|
|
511
|
+
"description": "Caixa de seleção com 3 estados: Checked, Unchecked e Mixed (indeterminado). 16×16px, border-radius 5px.",
|
|
512
|
+
"props": [
|
|
513
|
+
{
|
|
514
|
+
"name": "Type",
|
|
515
|
+
"type": "enum",
|
|
516
|
+
"values": [
|
|
517
|
+
"Checked",
|
|
518
|
+
"Unchecked",
|
|
519
|
+
"Mixed"
|
|
520
|
+
]
|
|
521
|
+
},
|
|
522
|
+
{
|
|
523
|
+
"name": "State",
|
|
524
|
+
"type": "enum",
|
|
525
|
+
"values": [
|
|
526
|
+
"Default",
|
|
527
|
+
"Focused"
|
|
528
|
+
]
|
|
529
|
+
},
|
|
530
|
+
{
|
|
531
|
+
"name": "Disabled",
|
|
532
|
+
"type": "boolean",
|
|
533
|
+
"values": [
|
|
534
|
+
"true",
|
|
535
|
+
"false"
|
|
536
|
+
]
|
|
537
|
+
}
|
|
538
|
+
],
|
|
539
|
+
"dimensions": [
|
|
540
|
+
{
|
|
541
|
+
"label": "Box",
|
|
542
|
+
"width": "16px",
|
|
543
|
+
"height": "16px"
|
|
544
|
+
}
|
|
545
|
+
],
|
|
546
|
+
"tokens": [
|
|
547
|
+
{
|
|
548
|
+
"property": "BG Checked / Mixed",
|
|
549
|
+
"token": "action-brand-default",
|
|
550
|
+
"value": "#00D4FF"
|
|
551
|
+
},
|
|
552
|
+
{
|
|
553
|
+
"property": "BG Unchecked",
|
|
554
|
+
"token": "surface-secondary",
|
|
555
|
+
"value": "#222222"
|
|
556
|
+
},
|
|
557
|
+
{
|
|
558
|
+
"property": "Border padrão",
|
|
559
|
+
"token": "border-default",
|
|
560
|
+
"value": "#4A4A4A"
|
|
561
|
+
},
|
|
562
|
+
{
|
|
563
|
+
"property": "Border hover",
|
|
564
|
+
"token": "border-strong",
|
|
565
|
+
"value": "#A4A4A4"
|
|
566
|
+
},
|
|
567
|
+
{
|
|
568
|
+
"property": "Focus ring",
|
|
569
|
+
"token": "border-focus",
|
|
570
|
+
"value": "#00D4FF"
|
|
571
|
+
},
|
|
572
|
+
{
|
|
573
|
+
"property": "Check / Dash",
|
|
574
|
+
"token": "—",
|
|
575
|
+
"value": "#FFFFFF"
|
|
576
|
+
}
|
|
577
|
+
],
|
|
578
|
+
"anatomy": "[label cursor=pointer gap=8px]\n └── [input type=checkbox hidden]\n └── [Box 16×16px border-radius=5px]\n └── [Checkmark SVG 8×7px | Dash SVG 8×2px (mixed)]\n └── [Label 12px/500]",
|
|
579
|
+
"implemented": true,
|
|
580
|
+
"code": {
|
|
581
|
+
"html": "<!-- Checked -->\n<label class=\"trdr-checkbox\">\n <input type=\"checkbox\" checked />\n <span class=\"trdr-checkbox-box trdr-checkbox-checked\">\n <svg width=\"8\" height=\"7\" viewBox=\"0 0 8 7\" fill=\"none\">\n <path d=\"M1 3L3 5.5L7 1\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n <span>Aceitar termos</span>\n</label>\n\n<!-- Unchecked -->\n<label class=\"trdr-checkbox\">\n <input type=\"checkbox\" />\n <span class=\"trdr-checkbox-box\"></span>\n <span>Receber atualizações</span>\n</label>\n\n<!-- Mixed (indeterminado) -->\n<label class=\"trdr-checkbox\">\n <input type=\"checkbox\" />\n <span class=\"trdr-checkbox-box trdr-checkbox-checked trdr-checkbox-mixed\">\n <svg width=\"8\" height=\"2\" viewBox=\"0 0 8 2\" fill=\"none\">\n <path d=\"M1 1H7\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n </svg>\n </span>\n <span>Selecionar todos</span>\n</label>",
|
|
582
|
+
"css": ".trdr-checkbox {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n cursor: pointer;\n user-select: none;\n}\n\n.trdr-checkbox-box {\n flex-shrink: 0;\n width: 16px; height: 16px;\n border-radius: 5px; /* Não é --radius-sm */\n border: 1px solid var(--border-default); /* #4A4A4A */\n background: var(--surface-secondary); /* #222222 */\n display: flex; align-items: center; justify-content: center;\n transition: background 0.12s ease, border-color 0.12s ease;\n}\n\n.trdr-checkbox:hover .trdr-checkbox-box { border-color: var(--border-strong); }\n\n.trdr-checkbox-box.trdr-checkbox-checked {\n background: var(--action-brand-default); /* #00D4FF */\n border-color: var(--action-brand-default);\n}\n\n.trdr-checkbox input:focus-visible ~ .trdr-checkbox-box {\n outline: 2px solid var(--border-focus); /* #00D4FF */\n outline-offset: 2px;\n}",
|
|
583
|
+
"react": "import Checkbox from '@/components/ui/Checkbox'\nimport { useState } from 'react'\n\nexport default function Example() {\n const [terms, setTerms] = useState(false)\n const [updates, setUpdates] = useState<boolean | 'mixed'>('mixed')\n\n return (\n <>\n <Checkbox checked={terms} onChange={setTerms} label=\"Aceitar termos\" />\n <Checkbox checked={updates} onChange={(v) => setUpdates(v)} label=\"Selecionar todos\" />\n <Checkbox checked={false} onChange={() => {}} label=\"Desativado\" disabled />\n </>\n )\n}",
|
|
584
|
+
"prompt": "Implemente o componente Checkbox do Design System TRDR.\n\nESPECIFICAÇÕES PIXEL-PERFECT:\n- Box: 16×16px, border-radius: 5px (fixo, não token)\n- Gap label: 8px\n- Checkmark SVG: 8×7px, traço branco (stroke 1.5)\n- Mixed (indeterminado): traço horizontal 8×2px branco\n\nTOKENS OBRIGATÓRIOS:\n- BG Checked/Mixed: --action-brand-default (#00D4FF)\n- BG Unchecked: --surface-secondary (#222222)\n- Border padrão: --border-default (#4A4A4A)\n- Border hover: --border-strong (#A4A4A4)\n- Focus ring: outline 2px --border-focus (#00D4FF) offset 2px\n- Check/Dash: #FFFFFF\n\nESTADOS:\n- checked=true: bg + border = action-brand-default, checkmark SVG visível\n- checked='mixed': mesmo visual de checked + dash horizontal\n- :hover → border-strong\n- :focus-visible → outline border-focus\n- disabled: opacity 0.5, cursor not-allowed"
|
|
585
|
+
}
|
|
586
|
+
},
|
|
587
|
+
{
|
|
588
|
+
"slug": "radio-button",
|
|
589
|
+
"name": "Radio Button",
|
|
590
|
+
"figmaId": "1916:46361",
|
|
591
|
+
"category": "formulario",
|
|
592
|
+
"description": "Seleção única com 2 variantes: Input (círculo 16×16px) e Button (pill 24px). Estados: Default, Active, Focused, Disabled.",
|
|
593
|
+
"props": [
|
|
594
|
+
{
|
|
595
|
+
"name": "Variant",
|
|
596
|
+
"type": "enum",
|
|
597
|
+
"values": [
|
|
598
|
+
"Input",
|
|
599
|
+
"Button"
|
|
600
|
+
]
|
|
601
|
+
},
|
|
602
|
+
{
|
|
603
|
+
"name": "State",
|
|
604
|
+
"type": "enum",
|
|
605
|
+
"values": [
|
|
606
|
+
"Default",
|
|
607
|
+
"Active",
|
|
608
|
+
"Focused",
|
|
609
|
+
"Disabled"
|
|
610
|
+
]
|
|
611
|
+
},
|
|
612
|
+
{
|
|
613
|
+
"name": "Label",
|
|
614
|
+
"type": "boolean",
|
|
615
|
+
"values": [
|
|
616
|
+
"true",
|
|
617
|
+
"false"
|
|
618
|
+
]
|
|
619
|
+
}
|
|
620
|
+
],
|
|
621
|
+
"dimensions": [
|
|
622
|
+
{
|
|
623
|
+
"label": "Input circle",
|
|
624
|
+
"width": "16px",
|
|
625
|
+
"height": "16px"
|
|
626
|
+
},
|
|
627
|
+
{
|
|
628
|
+
"label": "Button pill",
|
|
629
|
+
"height": "24px"
|
|
630
|
+
}
|
|
631
|
+
],
|
|
632
|
+
"tokens": [
|
|
633
|
+
{
|
|
634
|
+
"property": "Circle On bg",
|
|
635
|
+
"token": "action-brand-default",
|
|
636
|
+
"value": "#00D4FF"
|
|
637
|
+
},
|
|
638
|
+
{
|
|
639
|
+
"property": "Circle Off bg",
|
|
640
|
+
"token": "surface-secondary",
|
|
641
|
+
"value": "#222222"
|
|
642
|
+
},
|
|
643
|
+
{
|
|
644
|
+
"property": "Circle border",
|
|
645
|
+
"token": "border-default",
|
|
646
|
+
"value": "#4A4A4A"
|
|
647
|
+
},
|
|
648
|
+
{
|
|
649
|
+
"property": "Dot (On)",
|
|
650
|
+
"token": "—",
|
|
651
|
+
"value": "#FFFFFF"
|
|
652
|
+
},
|
|
653
|
+
{
|
|
654
|
+
"property": "Focus ring",
|
|
655
|
+
"token": "border-focus",
|
|
656
|
+
"value": "#00D4FF"
|
|
657
|
+
},
|
|
658
|
+
{
|
|
659
|
+
"property": "Button border default",
|
|
660
|
+
"token": "border-subtle",
|
|
661
|
+
"value": "#222222"
|
|
662
|
+
},
|
|
663
|
+
{
|
|
664
|
+
"property": "Button border active",
|
|
665
|
+
"token": "border-default",
|
|
666
|
+
"value": "#4A4A4A"
|
|
667
|
+
},
|
|
668
|
+
{
|
|
669
|
+
"property": "Button bg active",
|
|
670
|
+
"token": "surface-brand",
|
|
671
|
+
"value": "#00D4FF29"
|
|
672
|
+
}
|
|
673
|
+
],
|
|
674
|
+
"anatomy": "[Input] → label > input[type=radio] hidden + círculo 16×16px + label text\n[Button] → button pill 24px height | border varia por estado",
|
|
675
|
+
"implemented": true,
|
|
676
|
+
"code": {
|
|
677
|
+
"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>",
|
|
678
|
+
"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); }",
|
|
679
|
+
"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}",
|
|
680
|
+
"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"
|
|
681
|
+
}
|
|
682
|
+
},
|
|
683
|
+
{
|
|
684
|
+
"slug": "switch",
|
|
685
|
+
"name": "Switch",
|
|
686
|
+
"figmaId": "1359:1740",
|
|
687
|
+
"category": "formulario",
|
|
688
|
+
"description": "Toggle on/off/mixed. Track de 32×16px com knob de 14px. Suporta estado indeterminado (mixed) com ícone de traço.",
|
|
689
|
+
"props": [
|
|
690
|
+
{
|
|
691
|
+
"name": "Type",
|
|
692
|
+
"type": "enum",
|
|
693
|
+
"values": [
|
|
694
|
+
"On",
|
|
695
|
+
"Off",
|
|
696
|
+
"Mixed"
|
|
697
|
+
]
|
|
698
|
+
},
|
|
699
|
+
{
|
|
700
|
+
"name": "Disabled",
|
|
701
|
+
"type": "boolean",
|
|
702
|
+
"values": [
|
|
703
|
+
"true",
|
|
704
|
+
"false"
|
|
705
|
+
]
|
|
706
|
+
}
|
|
707
|
+
],
|
|
708
|
+
"dimensions": [
|
|
709
|
+
{
|
|
710
|
+
"label": "Track",
|
|
711
|
+
"width": "32px",
|
|
712
|
+
"height": "16px"
|
|
713
|
+
},
|
|
714
|
+
{
|
|
715
|
+
"label": "Knob",
|
|
716
|
+
"width": "14px",
|
|
717
|
+
"height": "14px"
|
|
718
|
+
},
|
|
719
|
+
{
|
|
720
|
+
"label": "Componente total",
|
|
721
|
+
"height": "24px"
|
|
722
|
+
}
|
|
723
|
+
],
|
|
724
|
+
"tokens": [
|
|
725
|
+
{
|
|
726
|
+
"property": "Track On / Mixed",
|
|
727
|
+
"token": "action-brand-default",
|
|
728
|
+
"value": "#00D4FF"
|
|
729
|
+
},
|
|
730
|
+
{
|
|
731
|
+
"property": "Track Off",
|
|
732
|
+
"token": "surface-primary",
|
|
733
|
+
"value": "#4A4A4A"
|
|
734
|
+
},
|
|
735
|
+
{
|
|
736
|
+
"property": "Track Disabled",
|
|
737
|
+
"token": "surface-secondary",
|
|
738
|
+
"value": "#222222"
|
|
739
|
+
},
|
|
740
|
+
{
|
|
741
|
+
"property": "Knob",
|
|
742
|
+
"token": "—",
|
|
743
|
+
"value": "#FFFFFF"
|
|
744
|
+
},
|
|
745
|
+
{
|
|
746
|
+
"property": "Focus border",
|
|
747
|
+
"token": "border-focus",
|
|
748
|
+
"value": "#00D4FF"
|
|
749
|
+
},
|
|
750
|
+
{
|
|
751
|
+
"property": "Label padrão",
|
|
752
|
+
"token": "content-primary",
|
|
753
|
+
"value": "#FFFFFF"
|
|
754
|
+
},
|
|
755
|
+
{
|
|
756
|
+
"property": "Label disabled",
|
|
757
|
+
"token": "content-tertiary",
|
|
758
|
+
"value": "#A4A4A4"
|
|
759
|
+
}
|
|
760
|
+
],
|
|
761
|
+
"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]",
|
|
762
|
+
"notes": "Knob: top=1px, left=1px (Off) ou right=1px (On). Foco via :focus-visible com outline border-focus.",
|
|
763
|
+
"implemented": true,
|
|
764
|
+
"code": {
|
|
765
|
+
"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>",
|
|
766
|
+
"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}",
|
|
767
|
+
"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} />",
|
|
768
|
+
"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"
|
|
769
|
+
}
|
|
770
|
+
},
|
|
771
|
+
{
|
|
772
|
+
"slug": "segmented-control",
|
|
773
|
+
"name": "Segmented Control",
|
|
774
|
+
"figmaId": "1655:25490",
|
|
775
|
+
"category": "formulario",
|
|
776
|
+
"description": "Controle de abas compacto. De 2 a 6 tabs. Container arredondado com radius 64px.",
|
|
777
|
+
"props": [
|
|
778
|
+
{
|
|
779
|
+
"name": "Tabs",
|
|
780
|
+
"type": "enum",
|
|
781
|
+
"values": [
|
|
782
|
+
"2",
|
|
783
|
+
"3",
|
|
784
|
+
"4",
|
|
785
|
+
"5",
|
|
786
|
+
"6"
|
|
787
|
+
]
|
|
788
|
+
},
|
|
789
|
+
{
|
|
790
|
+
"name": "State",
|
|
791
|
+
"type": "enum",
|
|
792
|
+
"values": [
|
|
793
|
+
"Default",
|
|
794
|
+
"Active"
|
|
795
|
+
]
|
|
796
|
+
}
|
|
797
|
+
],
|
|
798
|
+
"dimensions": [
|
|
799
|
+
{
|
|
800
|
+
"label": "Default",
|
|
801
|
+
"height": "28px"
|
|
802
|
+
}
|
|
803
|
+
],
|
|
804
|
+
"tokens": [
|
|
805
|
+
{
|
|
806
|
+
"property": "Container BG",
|
|
807
|
+
"token": "surface.secondary",
|
|
808
|
+
"value": "#222222"
|
|
809
|
+
},
|
|
810
|
+
{
|
|
811
|
+
"property": "Tab ativa",
|
|
812
|
+
"token": "action.secondary.default",
|
|
813
|
+
"value": "#4A4A4A"
|
|
814
|
+
},
|
|
815
|
+
{
|
|
816
|
+
"property": "Tab inativa text",
|
|
817
|
+
"token": "content.tertiary",
|
|
818
|
+
"value": "#A4A4A4"
|
|
819
|
+
}
|
|
820
|
+
],
|
|
821
|
+
"anatomy": "[Container radius-full bg surface.secondary]\n └── [Tab 1] [Tab 2] [Tab N...]\n Padding: 2px no container",
|
|
822
|
+
"implemented": true,
|
|
823
|
+
"code": {
|
|
824
|
+
"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>",
|
|
825
|
+
"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}",
|
|
826
|
+
"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}",
|
|
827
|
+
"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."
|
|
828
|
+
}
|
|
829
|
+
},
|
|
830
|
+
{
|
|
831
|
+
"slug": "tooltip",
|
|
832
|
+
"name": "Tooltip",
|
|
833
|
+
"figmaId": "1618:23706",
|
|
834
|
+
"category": "formulario",
|
|
835
|
+
"description": "Balão de ajuda contextual com seta direcional. 8 direções. Padding 12×8px, bg-primary, max-width 200px.",
|
|
836
|
+
"props": [
|
|
837
|
+
{
|
|
838
|
+
"name": "Direction",
|
|
839
|
+
"type": "enum",
|
|
840
|
+
"values": [
|
|
841
|
+
"TopCenter",
|
|
842
|
+
"TopLeft",
|
|
843
|
+
"TopRight",
|
|
844
|
+
"BottomCenter",
|
|
845
|
+
"BottomLeft",
|
|
846
|
+
"BottomRight",
|
|
847
|
+
"Right",
|
|
848
|
+
"Left"
|
|
849
|
+
]
|
|
850
|
+
},
|
|
851
|
+
{
|
|
852
|
+
"name": "Hotkey",
|
|
853
|
+
"type": "boolean",
|
|
854
|
+
"values": [
|
|
855
|
+
"true",
|
|
856
|
+
"false"
|
|
857
|
+
]
|
|
858
|
+
}
|
|
859
|
+
],
|
|
860
|
+
"dimensions": [
|
|
861
|
+
{
|
|
862
|
+
"label": "Padding H",
|
|
863
|
+
"width": "12px",
|
|
864
|
+
"height": "—"
|
|
865
|
+
},
|
|
866
|
+
{
|
|
867
|
+
"label": "Padding V",
|
|
868
|
+
"height": "8px"
|
|
869
|
+
},
|
|
870
|
+
{
|
|
871
|
+
"label": "Seta (caret)",
|
|
872
|
+
"width": "12px",
|
|
873
|
+
"height": "6px"
|
|
874
|
+
},
|
|
875
|
+
{
|
|
876
|
+
"label": "Max width",
|
|
877
|
+
"width": "200px",
|
|
878
|
+
"height": "—"
|
|
879
|
+
}
|
|
880
|
+
],
|
|
881
|
+
"tokens": [
|
|
882
|
+
{
|
|
883
|
+
"property": "Background",
|
|
884
|
+
"token": "bg-primary",
|
|
885
|
+
"value": "#0E0E0E"
|
|
886
|
+
},
|
|
887
|
+
{
|
|
888
|
+
"property": "Texto",
|
|
889
|
+
"token": "content-primary",
|
|
890
|
+
"value": "#FFFFFF"
|
|
891
|
+
},
|
|
892
|
+
{
|
|
893
|
+
"property": "Hotkey",
|
|
894
|
+
"token": "content-secondary",
|
|
895
|
+
"value": "#E8E8E8"
|
|
896
|
+
},
|
|
897
|
+
{
|
|
898
|
+
"property": "Seta",
|
|
899
|
+
"token": "bg-primary",
|
|
900
|
+
"value": "#0E0E0E"
|
|
901
|
+
},
|
|
902
|
+
{
|
|
903
|
+
"property": "Shadow",
|
|
904
|
+
"token": "—",
|
|
905
|
+
"value": "drop-shadow 0.25px + 1.5px + 6px"
|
|
906
|
+
}
|
|
907
|
+
],
|
|
908
|
+
"anatomy": "[div role=tooltip position=relative border-radius=5px]\n └── [Content: flex gap=4px padding=8px/12px]\n └── [Texto flex=1]\n └── [Hotkey opcional]\n └── [Seta 12×6px CSS clip-path absolute]",
|
|
909
|
+
"implemented": true,
|
|
910
|
+
"code": {
|
|
911
|
+
"html": "<!-- TopCenter -->\n<div class=\"trdr-tooltip trdr-tooltip-top-center\" role=\"tooltip\">\n <div class=\"trdr-tooltip-content\">\n <span>Tooltip text</span>\n <span class=\"trdr-tooltip-hotkey\">⌘V</span>\n </div>\n <span class=\"trdr-tooltip-arrow trdr-tooltip-arrow-up\" aria-hidden=\"true\"></span>\n</div>\n\n<!-- BottomLeft -->\n<div class=\"trdr-tooltip trdr-tooltip-bottom-left\" role=\"tooltip\">\n <div class=\"trdr-tooltip-content\">\n <span>Alinhar à esquerda</span>\n </div>\n <span class=\"trdr-tooltip-arrow trdr-tooltip-arrow-down\" aria-hidden=\"true\"></span>\n</div>",
|
|
912
|
+
"css": ".trdr-tooltip {\n position: relative;\n display: inline-flex; flex-direction: column; align-items: center;\n max-width: 200px;\n background-color: var(--bg-primary); /* #0E0E0E */\n border-radius: 5px;\n filter: drop-shadow(0px 0px 0.25px rgba(0,0,0,0.15)) drop-shadow(0px 5px 6px rgba(0,0,0,0.13));\n}\n\n.trdr-tooltip-content {\n display: flex; align-items: center; gap: var(--spacing-xs);\n padding: var(--spacing-sm) var(--spacing-md); /* 8px / 12px */\n font-family: var(--font-secondary); font-size: 12px; font-weight: 500;\n color: var(--content-primary); white-space: nowrap;\n}\n\n.trdr-tooltip-hotkey { color: var(--content-secondary); }\n\n.trdr-tooltip-arrow {\n position: absolute;\n width: 12px; height: 6px;\n background-color: var(--bg-primary);\n}\n\n.trdr-tooltip-arrow-up { clip-path: polygon(50% 0%, 0% 100%, 100% 100%); }\n.trdr-tooltip-arrow-down { clip-path: polygon(0% 0%, 100% 0%, 50% 100%); }\n.trdr-tooltip-arrow-left { width: 6px; height: 12px; clip-path: polygon(0% 50%, 100% 0%, 100% 100%); }\n.trdr-tooltip-arrow-right { width: 6px; height: 12px; clip-path: polygon(0% 0%, 100% 50%, 0% 100%); }\n\n.trdr-tooltip-top-center .trdr-tooltip-arrow { top: -6px; left: 50%; transform: translateX(-50%); }\n.trdr-tooltip-top-left .trdr-tooltip-arrow { top: -6px; left: 8px; }\n.trdr-tooltip-top-right .trdr-tooltip-arrow { top: -6px; right: 8px; }\n.trdr-tooltip-bottom-center .trdr-tooltip-arrow { bottom: -6px; left: 50%; transform: translateX(-50%); }\n.trdr-tooltip-bottom-left .trdr-tooltip-arrow { bottom: -6px; left: 8px; }\n.trdr-tooltip-bottom-right .trdr-tooltip-arrow { bottom: -6px; right: 8px; }\n.trdr-tooltip-right .trdr-tooltip-arrow { top: 50%; right: -6px; transform: translateY(-50%); }\n.trdr-tooltip-left .trdr-tooltip-arrow { top: 50%; left: -6px; transform: translateY(-50%); }",
|
|
913
|
+
"react": "import Tooltip from '@/components/ui/Tooltip'\n\nexport default function Example() {\n return (\n <>\n <Tooltip text=\"Salvar\" hotkey=\"⌘S\" direction=\"top-center\" />\n <Tooltip text=\"Alinhar à esquerda\" direction=\"bottom-left\" />\n <Tooltip text=\"Mais opções\" direction=\"right\" />\n <Tooltip text=\"Voltar\" direction=\"left\" />\n </>\n )\n}",
|
|
914
|
+
"prompt": "Implemente o componente Tooltip do Design System TRDR.\n\nESPECIFICAÇÕES PIXEL-PERFECT:\n- Background: --bg-primary (#0E0E0E)\n- Border-radius: 5px\n- Padding: 8px vertical, 12px horizontal (--spacing-sm / --spacing-md)\n- Max-width: 200px\n- Font: 12px / 500 / --font-secondary\n- Seta (caret): 12×6px via CSS clip-path, bg = --bg-primary\n\nTOKENS OBRIGATÓRIOS:\n- Background + seta: --bg-primary (#0E0E0E)\n- Texto: --content-primary (#FFFFFF)\n- Hotkey: --content-secondary (#E8E8E8)\n- Shadow: filter drop-shadow multicamadas\n\nSETAS CSS POR DIREÇÃO:\n- top-*: seta acima, clip-path polygon(50% 0%, 0% 100%, 100% 100%), top=-6px\n- bottom-*: seta abaixo, clip-path polygon(0% 0%, 100% 0%, 50% 100%), bottom=-6px\n- left/right: seta lateral 6×12px, posicionada em top=50%\n- Alinhamentos: center=50%+translateX, left=8px, right=8px"
|
|
915
|
+
}
|
|
916
|
+
},
|
|
917
|
+
{
|
|
918
|
+
"slug": "abas",
|
|
919
|
+
"name": "Abas",
|
|
920
|
+
"figmaId": "253:2861",
|
|
921
|
+
"category": "navegacao",
|
|
922
|
+
"description": "Barra de abas horizontal. Aba ativa com fundo surface.secondary.",
|
|
923
|
+
"props": [],
|
|
924
|
+
"dimensions": [
|
|
925
|
+
{
|
|
926
|
+
"label": "Default",
|
|
927
|
+
"width": "476px",
|
|
928
|
+
"height": "45px"
|
|
929
|
+
}
|
|
930
|
+
],
|
|
931
|
+
"tokens": [
|
|
932
|
+
{
|
|
933
|
+
"property": "Tab ativa BG",
|
|
934
|
+
"token": "action.secondary.default",
|
|
935
|
+
"value": "#4A4A4A"
|
|
936
|
+
},
|
|
937
|
+
{
|
|
938
|
+
"property": "Tab inativa text",
|
|
939
|
+
"token": "content.tertiary",
|
|
940
|
+
"value": "#A4A4A4"
|
|
941
|
+
}
|
|
942
|
+
],
|
|
943
|
+
"notes": "Estilo 2 de abas: fundo na tab ativa. Diferente do header-window (bottom-border) e pill tabs.",
|
|
944
|
+
"implemented": true,
|
|
945
|
+
"code": {
|
|
946
|
+
"html": "<div class=\"trdr-abas\">\n <div class=\"trdr-abas-item trdr-abas-item-active\">\n <span>Todos os tokens</span>\n </div>\n <div class=\"trdr-abas-item\">\n <span>Primitivos</span>\n </div>\n <div class=\"trdr-abas-item\">\n <span>Semânticos</span>\n </div>\n <div class=\"trdr-abas-item\">\n <span>Scale</span>\n </div>\n <div class=\"trdr-abas-item\">\n <span>Tipografia</span>\n </div>\n</div>",
|
|
947
|
+
"css": ".trdr-abas {\n display: flex;\n align-items: stretch;\n border-bottom: 1px solid var(--border-subtle); /* #222222 */\n overflow-x: auto;\n height: 45px;\n}\n\n.trdr-abas-item {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n position: relative;\n padding: 0 12px;\n cursor: pointer;\n font-family: var(--font-secondary);\n font-size: 16px;\n font-weight: 500;\n color: var(--content-tertiary); /* #A4A4A4 */\n white-space: nowrap;\n transition: color 0.15s ease;\n}\n\n.trdr-abas-item:hover { color: var(--content-secondary); }\n\n.trdr-abas-item-active {\n color: var(--content-primary); /* #FFFFFF */\n}\n\n.trdr-abas-item-active::after {\n content: '';\n position: absolute;\n bottom: 0; left: 0; right: 0;\n height: 2px;\n background-color: var(--action-brand-active); /* #007D99 */\n}",
|
|
948
|
+
"react": "import { useState } from 'react'\n\nconst tabs = ['Todos os tokens', 'Primitivos', 'Semânticos', 'Scale', 'Tipografia']\n\nexport default function Example() {\n const [active, setActive] = useState(0)\n\n return (\n <div className=\"trdr-abas\">\n {tabs.map((tab, i) => (\n <div\n key={tab}\n className={`trdr-abas-item ${i === active ? 'trdr-abas-item-active' : ''}`}\n onClick={() => setActive(i)}\n >\n {tab}\n </div>\n ))}\n </div>\n )\n}",
|
|
949
|
+
"prompt": "Implemente o componente Abas do Design System TRDR.\n\nESPECIFICAÇÕES PIXEL-PERFECT:\n- Container (.trdr-abas): flex, align-items stretch, border-bottom 1px --border-subtle (#222222), height 45px, overflow-x auto\n- Item (.trdr-abas-item): position relative, padding 0 12px, flex col centered, font 16px/500 Inter\n- Tab inativa: color --content-tertiary (#A4A4A4), hover: --content-secondary (#E8E8E8)\n- Tab ativa (.trdr-abas-item-active): color --content-primary (#FFFFFF)\n- Indicador ativo: ::after position absolute, bottom 0, left 0, right 0, height 2px, bg --action-brand-active (#007D99)\n- Largura total: 476px | Transição: color 0.15s ease"
|
|
950
|
+
}
|
|
951
|
+
},
|
|
952
|
+
{
|
|
953
|
+
"slug": "sub-menu-item",
|
|
954
|
+
"name": "Sub-menu Item",
|
|
955
|
+
"figmaId": "1886:20967",
|
|
956
|
+
"category": "navegacao",
|
|
957
|
+
"description": "Item de sub-menu com estados Default, Hover e Pressed.",
|
|
958
|
+
"props": [
|
|
959
|
+
{
|
|
960
|
+
"name": "State",
|
|
961
|
+
"type": "enum",
|
|
962
|
+
"values": [
|
|
963
|
+
"Default",
|
|
964
|
+
"Hover",
|
|
965
|
+
"Pressed"
|
|
966
|
+
]
|
|
967
|
+
}
|
|
968
|
+
],
|
|
969
|
+
"dimensions": [
|
|
970
|
+
{
|
|
971
|
+
"label": "Default",
|
|
972
|
+
"width": "236px",
|
|
973
|
+
"height": "32px"
|
|
974
|
+
}
|
|
975
|
+
],
|
|
976
|
+
"tokens": [
|
|
977
|
+
{
|
|
978
|
+
"property": "BG hover",
|
|
979
|
+
"token": "surface.secondary",
|
|
980
|
+
"value": "#222222"
|
|
981
|
+
},
|
|
982
|
+
{
|
|
983
|
+
"property": "Text",
|
|
984
|
+
"token": "content.secondary",
|
|
985
|
+
"value": "#E8E8E8"
|
|
986
|
+
}
|
|
987
|
+
],
|
|
988
|
+
"implemented": true,
|
|
989
|
+
"code": {
|
|
990
|
+
"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 & Regras</span>\n </div>\n</div>",
|
|
991
|
+
"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}",
|
|
992
|
+
"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}",
|
|
993
|
+
"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."
|
|
994
|
+
}
|
|
995
|
+
},
|
|
996
|
+
{
|
|
997
|
+
"slug": "boleta",
|
|
998
|
+
"name": "Painel de Negociações (Boleta)",
|
|
999
|
+
"figmaId": "903:1853",
|
|
1000
|
+
"category": "trading",
|
|
1001
|
+
"implemented": true,
|
|
1002
|
+
"description": "Painel lateral de entrada de ordens. Inclui segmented control Avançado/Simples, campos de estratégia, quantidade e preço, botões de compra/venda por tipo de ordem, ação Zerar e resumo de posição.",
|
|
1003
|
+
"props": [
|
|
1004
|
+
{
|
|
1005
|
+
"name": "versao",
|
|
1006
|
+
"type": "enum",
|
|
1007
|
+
"values": [
|
|
1008
|
+
"avancado",
|
|
1009
|
+
"simples"
|
|
1010
|
+
]
|
|
1011
|
+
}
|
|
1012
|
+
],
|
|
1013
|
+
"dimensions": [
|
|
1014
|
+
{
|
|
1015
|
+
"label": "Largura fixa",
|
|
1016
|
+
"width": "283px",
|
|
1017
|
+
"height": "—"
|
|
1018
|
+
},
|
|
1019
|
+
{
|
|
1020
|
+
"label": "Abas (header)",
|
|
1021
|
+
"width": "100%",
|
|
1022
|
+
"height": "45px"
|
|
1023
|
+
},
|
|
1024
|
+
{
|
|
1025
|
+
"label": "Input de campo",
|
|
1026
|
+
"width": "100%",
|
|
1027
|
+
"height": "32px"
|
|
1028
|
+
},
|
|
1029
|
+
{
|
|
1030
|
+
"label": "Botão de ação",
|
|
1031
|
+
"width": "flex-1",
|
|
1032
|
+
"height": "32–34px"
|
|
1033
|
+
}
|
|
1034
|
+
],
|
|
1035
|
+
"tokens": [
|
|
1036
|
+
{
|
|
1037
|
+
"property": "Comprar BG",
|
|
1038
|
+
"token": "context.trading.long.default",
|
|
1039
|
+
"value": "rgba(79,226,144,0.08)"
|
|
1040
|
+
},
|
|
1041
|
+
{
|
|
1042
|
+
"property": "Comprar hover BG",
|
|
1043
|
+
"token": "context.trading.long.hover",
|
|
1044
|
+
"value": "rgba(79,226,144,0.12)"
|
|
1045
|
+
},
|
|
1046
|
+
{
|
|
1047
|
+
"property": "Comprar texto",
|
|
1048
|
+
"token": "context.trading.long.text",
|
|
1049
|
+
"value": "#4FE290"
|
|
1050
|
+
},
|
|
1051
|
+
{
|
|
1052
|
+
"property": "Vender BG",
|
|
1053
|
+
"token": "context.trading.short.default",
|
|
1054
|
+
"value": "rgba(243,79,69,0.08)"
|
|
1055
|
+
},
|
|
1056
|
+
{
|
|
1057
|
+
"property": "Vender hover BG",
|
|
1058
|
+
"token": "context.trading.short.hover",
|
|
1059
|
+
"value": "rgba(243,79,69,0.12)"
|
|
1060
|
+
},
|
|
1061
|
+
{
|
|
1062
|
+
"property": "Vender texto",
|
|
1063
|
+
"token": "context.trading.short.text",
|
|
1064
|
+
"value": "#F34F45"
|
|
1065
|
+
},
|
|
1066
|
+
{
|
|
1067
|
+
"property": "Zerar borda/texto",
|
|
1068
|
+
"token": "color.orange.500",
|
|
1069
|
+
"value": "#FF6400"
|
|
1070
|
+
},
|
|
1071
|
+
{
|
|
1072
|
+
"property": "Zerar hover BG",
|
|
1073
|
+
"token": "context.trading.stop.alpha",
|
|
1074
|
+
"value": "rgba(255,100,0,0.08)"
|
|
1075
|
+
},
|
|
1076
|
+
{
|
|
1077
|
+
"property": "Segment control BG",
|
|
1078
|
+
"token": "surface.secondary",
|
|
1079
|
+
"value": "#222222"
|
|
1080
|
+
},
|
|
1081
|
+
{
|
|
1082
|
+
"property": "Segment ativo BG",
|
|
1083
|
+
"token": "action.secondary.default",
|
|
1084
|
+
"value": "#4A4A4A"
|
|
1085
|
+
},
|
|
1086
|
+
{
|
|
1087
|
+
"property": "Input BG",
|
|
1088
|
+
"token": "surface.primary",
|
|
1089
|
+
"value": "#4A4A4A"
|
|
1090
|
+
},
|
|
1091
|
+
{
|
|
1092
|
+
"property": "Borda seção",
|
|
1093
|
+
"token": "border.subtle",
|
|
1094
|
+
"value": "#222222"
|
|
1095
|
+
},
|
|
1096
|
+
{
|
|
1097
|
+
"property": "Posição \"Zerado\"",
|
|
1098
|
+
"token": "content.success",
|
|
1099
|
+
"value": "#4FE290"
|
|
1100
|
+
}
|
|
1101
|
+
],
|
|
1102
|
+
"anatomy": "Painel de 283px de largura com border-left sutil. 3 seções: Abas (45px, segmented control pill), Container (padding 8px, gap 16px — linhas de info, inputs 32px, quick buttons e checkbox TP/SL), Botões (padding 8px, gap 8px — rows de Compra+Venda, Zerar, Cancel, grupo Cancelar/Inverter, resumo Posição).",
|
|
1103
|
+
"code": {
|
|
1104
|
+
"html": "<!-- Painel de Negociações (Boleta) -->\n<div class=\"trdr-boleta\">\n\n <!-- Abas -->\n <div class=\"trdr-boleta-abas\">\n <div class=\"trdr-boleta-segment-control\">\n <button class=\"trdr-boleta-segment trdr-boleta-segment-active\">Avançado</button>\n <button class=\"trdr-boleta-segment\">Simples</button>\n </div>\n </div>\n\n <!-- Campos -->\n <div class=\"trdr-boleta-container\">\n <!-- Estratégia -->\n <div style=\"display:flex;align-items:center;justify-content:space-between\">\n <span class=\"trdr-boleta-label\">Estratégia</span>\n <span style=\"color:var(--content-primary);font-size:12px;font-weight:500\">Manejo ▾</span>\n </div>\n\n <!-- Disponível -->\n <div style=\"display:flex;align-items:center;justify-content:space-between\">\n <span class=\"trdr-boleta-label\">Disp.</span>\n <span style=\"color:var(--content-primary);font-size:12px;font-weight:500\">258.010.200,00 USDT</span>\n </div>\n\n <!-- Quantidade -->\n <div style=\"display:flex;flex-direction:column;gap:8px\">\n <span class=\"trdr-boleta-label\">Quantidade</span>\n <input class=\"trdr-boleta-input\" placeholder=\"Inserir\" />\n <div style=\"display:flex;gap:4px\">\n <button class=\"trdr-boleta-quick-btn\">1</button>\n <button class=\"trdr-boleta-quick-btn\">2</button>\n <button class=\"trdr-boleta-quick-btn\">3</button>\n </div>\n </div>\n\n <!-- Preço da Ordem -->\n <div style=\"display:flex;flex-direction:column;gap:8px\">\n <span class=\"trdr-boleta-label\">Preço da Ordem</span>\n <input class=\"trdr-boleta-input\" value=\"0,00\" />\n </div>\n\n <!-- TP/SL -->\n <label style=\"display:flex;align-items:center;gap:8px;cursor:pointer\">\n <input type=\"checkbox\" style=\"display:none\" />\n <span style=\"width:16px;height:16px;border:1px solid var(--border-default);border-radius:5px;background:var(--surface-tertiary);flex-shrink:0;display:block\"></span>\n <span style=\"font-size:12px;font-weight:500;color:var(--content-primary)\">TP/SL</span>\n </label>\n </div>\n\n <!-- Botões -->\n <div class=\"trdr-boleta-botoes\">\n <div style=\"display:flex;gap:8px\">\n <button class=\"trdr-boleta-btn-long\">CP Limite</button>\n <button class=\"trdr-boleta-btn-short\">VD Limite</button>\n </div>\n <div style=\"display:flex;gap:8px\">\n <button class=\"trdr-boleta-btn-long\">CP Mercado</button>\n <button class=\"trdr-boleta-btn-short\">VD Mercado</button>\n </div>\n <div style=\"display:flex;gap:8px\">\n <button class=\"trdr-boleta-btn-long\">Bid</button>\n <button class=\"trdr-boleta-btn-short\">Ask</button>\n </div>\n <button class=\"trdr-boleta-btn-zerar\">Zerar (5)</button>\n <button class=\"trdr-boleta-btn-ghost\">Cancelar ordens (2) + Zerar (5)</button>\n <div style=\"display:flex;gap:8px\">\n <button class=\"trdr-boleta-btn-ghost\" style=\"width:auto;flex-shrink:0\">Cancelar Ordem</button>\n <button class=\"trdr-boleta-btn-ghost\" style=\"flex:1;min-width:100px\">Inverter</button>\n </div>\n </div>\n\n</div>",
|
|
1105
|
+
"css": "/* Boleta — variáveis usadas */\n/* --context-trading-long-default: rgba(79,226,144,0.08) */\n/* --context-trading-long-hover: rgba(79,226,144,0.12) */\n/* --context-trading-long-text: #4FE290 */\n/* --context-trading-short-default: rgba(243,79,69,0.08) */\n/* --context-trading-short-hover: rgba(243,79,69,0.12) */\n/* --context-trading-short-text: #F34F45 */\n/* --color-orange-500: #FF6400 (Zerar) */\n/* --context-trading-stop-alpha: rgba(255,100,0,0.08) */\n/* --surface-secondary: #222222 */\n/* --action-secondary-default: #4A4A4A */\n/* --surface-primary: #4A4A4A */\n/* --border-subtle: #222222 */\n/* --content-success: #4FE290 */\n\n.trdr-boleta { width: 283px; border-left: 1px solid var(--border-subtle); }\n\n.trdr-boleta-btn-long {\n flex: 1;\n background: var(--context-trading-long-default);\n border-radius: var(--radius-md);\n padding: 8px;\n border: none; cursor: pointer;\n font-size: 14px; font-weight: 600;\n color: var(--context-trading-long-text);\n transition: background 0.15s ease;\n}\n.trdr-boleta-btn-long:hover { background: var(--context-trading-long-hover); }\n\n.trdr-boleta-btn-short {\n flex: 1;\n background: var(--context-trading-short-default);\n border-radius: var(--radius-md);\n padding: 8px 12px;\n border: none; cursor: pointer;\n font-size: 14px; font-weight: 600;\n color: var(--context-trading-short-text);\n transition: background 0.15s ease;\n}\n.trdr-boleta-btn-short:hover { background: var(--context-trading-short-hover); }\n\n.trdr-boleta-btn-zerar {\n width: 100%; height: 32px;\n border: 1px solid var(--color-orange-500);\n border-radius: var(--radius-md);\n background: transparent; cursor: pointer;\n font-size: 14px; font-weight: 600;\n color: var(--color-orange-500);\n transition: background 0.15s ease;\n}\n.trdr-boleta-btn-zerar:hover { background: var(--context-trading-stop-alpha); }",
|
|
1106
|
+
"react": "import Boleta from '@/components/ui/Boleta'\n\n// Versão padrão (Avançado)\n<Boleta />\n\n// Versão Simples\n<Boleta versao=\"simples\" />\n\n// Com className customizado\n<Boleta versao=\"avancado\" className=\"meu-override\" />",
|
|
1107
|
+
"prompt": "Implemente o componente Boleta do Design System TRDR — painel lateral de negociações de 283px de largura.\n\nESTRUTURA (3 seções com border-left: 1px solid --border-subtle):\n\n1. ABAS (height: 45px, padding: 8px, border-bottom sutil)\n - Segmented control pill (border-radius: 9999px, bg: --surface-secondary #222)\n - 2 segments: \"Avançado\" (ativo) e \"Simples\" (inativo)\n - Segment ativo: bg --action-secondary-default #4A4A4A, radius 16px, padding 8px 12px\n - Segment inativo: bg transparente, text --content-tertiary\n\n2. CONTAINER — campos do formulário (padding: 8px, gap: 16px, border-bottom sutil)\n - Linha \"Estratégia\": label (tertiary 12px/500) + valor \"Manejo\" + chevron (primary)\n - Linha \"Disp.\": label + valor \"258.010.200,00 USDT\" (primary)\n - Grupo \"Quantidade\": label 12px + input 32px (bg --surface-primary, radius 8px, padding 8px) + 3 quick buttons (border --border-default, radius 8px, padding 8px 12px, font 14px/600 secondary, gap 4px)\n - Grupo \"Preço da Ordem\": label 12px + input 32px\n - Linha \"TP/SL\": checkbox 16x16 (border default, radius 5px, bg --surface-tertiary) + label primary\n\n3. BOTÕES (padding: 8px, gap: 8px)\n - 4 rows de ação (gap 8px cada):\n • Long (flex:1, bg --context-trading-long-default, text --context-trading-long-text #4FE290, radius 8px, padding 8px, font 14px/600)\n • Short (flex:1, bg --context-trading-short-default, text --context-trading-short-text #F34F45, radius 8px, padding 8px 12px, font 14px/600)\n - \"Zerar (5)\": width 100%, height 32px, border 1px sólido --color-orange-500 (#FF6400), text --color-orange-500, radius 8px\n - \"Cancelar ordens (2) + Zerar (5)\": width 100%, border --border-default, text --content-secondary, radius 8px\n - Row \"Cancelar Ordem\" (shrink-0) + \"Inverter\" (flex:1 min-width:100px): ambos border --border-default\n - Resumo Posição: \"Posição\" (14px tertiary) / \"Zerado\" (16px --content-success #4FE290), + 2 linhas meta 12px tertiary\n\nHover states: long-hover rgba(79,226,144,0.12), short-hover rgba(243,79,69,0.12), zerar-hover --context-trading-stop-alpha.\nResultado pixel-perfect com exatamente 283px de largura."
|
|
1108
|
+
}
|
|
1109
|
+
},
|
|
1110
|
+
{
|
|
1111
|
+
"slug": "card",
|
|
1112
|
+
"name": "Card",
|
|
1113
|
+
"figmaId": "—",
|
|
1114
|
+
"category": "outros",
|
|
1115
|
+
"description": "Card de conteúdo — container com borda, padding e hover. Usado como base para cards de navegação e informação no Design Hub.",
|
|
1116
|
+
"props": [
|
|
1117
|
+
{
|
|
1118
|
+
"name": "Variant",
|
|
1119
|
+
"type": "enum",
|
|
1120
|
+
"values": [
|
|
1121
|
+
"Default",
|
|
1122
|
+
"With Icon"
|
|
1123
|
+
]
|
|
1124
|
+
}
|
|
1125
|
+
],
|
|
1126
|
+
"dimensions": [
|
|
1127
|
+
{
|
|
1128
|
+
"label": "Default",
|
|
1129
|
+
"height": "auto"
|
|
1130
|
+
}
|
|
1131
|
+
],
|
|
1132
|
+
"tokens": [
|
|
1133
|
+
{
|
|
1134
|
+
"property": "Background",
|
|
1135
|
+
"token": "surface.tertiary",
|
|
1136
|
+
"value": "#1A1A1A"
|
|
1137
|
+
},
|
|
1138
|
+
{
|
|
1139
|
+
"property": "Border",
|
|
1140
|
+
"token": "border.subtle",
|
|
1141
|
+
"value": "#222222"
|
|
1142
|
+
},
|
|
1143
|
+
{
|
|
1144
|
+
"property": "Radius",
|
|
1145
|
+
"token": "scale.radius.md",
|
|
1146
|
+
"value": "12px"
|
|
1147
|
+
},
|
|
1148
|
+
{
|
|
1149
|
+
"property": "Padding",
|
|
1150
|
+
"token": "scale.spacing.2xl",
|
|
1151
|
+
"value": "24px"
|
|
1152
|
+
}
|
|
1153
|
+
],
|
|
1154
|
+
"anatomy": "Container 1 (borda inferior quando há footer):\n [Header: Icon? 44px brand | Badges direita]\n [Title H-6: Space Grotesk 500, 26px, content/secondary]\n [Desc B-3: Inter 400, 14px, content/tertiary]\nContainer 2 (footer, opcional):\n [Figma ID B-4: Inter 500, 12px, content/tertiary | Badges direita]",
|
|
1155
|
+
"notes": "Hover: border-color passa para border.default, background para surface.secondary. Gap entre containers: scale/spacing/md (12px). Container 1 recebe border-bottom + pb:12px quando há footer.",
|
|
1156
|
+
"implemented": true,
|
|
1157
|
+
"code": {
|
|
1158
|
+
"html": "<!-- Card com footer (variante componente) — Design System TRDR (Figma: 2316:2462) -->\n<a href=\"/destino\" class=\"card\">\n\n <!-- Container 1: conteúdo principal -->\n <div class=\"card-container1 card-has-footer\">\n <div class=\"card-header\">\n <!-- Ícone (opcional) -->\n <span class=\"card-icon material-symbols-outlined\">palette</span>\n <!-- Badges do header (opcional) -->\n <div class=\"card-badges\">\n <span class=\"trdr-badge trdr-badge-neutral\">Tokens</span>\n </div>\n </div>\n <!-- H-6: Space Grotesk 500, 26px -->\n <span class=\"card-title\">Design Tokens</span>\n <!-- B-3: Inter 400, 14px, content/tertiary -->\n <p class=\"card-desc\">Cores, espaçamentos e tokens semânticos do design system.</p>\n </div>\n\n <!-- Container 2: footer (opcional) -->\n <div class=\"card-footer\">\n <code class=\"card-figma-id\">2316:2462</code>\n <div class=\"card-badges\">\n <span class=\"trdr-badge trdr-badge-success\">Implementado</span>\n </div>\n </div>\n\n</a>",
|
|
1159
|
+
"css": "/* Card — Design System TRDR (Figma node: 2316:2462, 380×154) */\n.card {\n display: flex;\n flex-direction: column;\n gap: var(--scale-spacing-md); /* 12px entre container1 e footer */\n min-width: 250px;\n padding: var(--scale-spacing-2xl); /* 24px */\n background: var(--surface-tertiary);\n border: 1px solid var(--border-subtle);\n border-radius: var(--scale-radius-md); /* 12px */\n text-decoration: none;\n overflow: hidden;\n transition: border-color 0.15s ease, background-color 0.15s ease;\n cursor: pointer;\n}\n\n.card:hover {\n border-color: var(--border-default);\n background: var(--surface-secondary);\n}\n\n/* Container 1 — conteúdo principal */\n.card-container1 {\n display: flex;\n flex-direction: column;\n gap: 8px;\n align-items: flex-start;\n width: 100%;\n}\n\n/* Borda inferior quando há footer */\n.card-has-footer {\n border-bottom: 1px solid var(--border-subtle);\n padding-bottom: var(--scale-spacing-md); /* 12px */\n}\n\n.card-header {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n width: 100%;\n}\n\n/* Material Symbols Outlined — ExtraLight (wght 100) */\n.card-icon {\n font-family: 'Material Symbols Outlined';\n font-size: 44px;\n font-style: normal;\n line-height: 1;\n color: var(--content-brand);\n font-variation-settings: 'FILL' 0, 'GRAD' 0, 'wght' 100, 'opsz' 48;\n}\n\n.card-badges {\n display: flex;\n align-items: center;\n gap: 4px;\n flex-shrink: 0;\n}\n\n/* H-6: Space Grotesk Medium 500, 26px */\n.card-title {\n font-family: var(--font-primary); /* Space Grotesk */\n font-size: 26px;\n font-weight: 500;\n line-height: 1.1;\n color: var(--content-secondary);\n}\n\n/* B-3: Inter Regular 400, 14px */\n.card-desc {\n font-family: var(--font-secondary); /* Inter */\n font-size: 14px;\n font-weight: 400;\n line-height: 1.2;\n color: var(--content-tertiary);\n margin: 0;\n}\n\n/* Container 2 — footer */\n.card-footer {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n}\n\n/* B-4: Inter Medium 500, 12px, 0.2px tracking */\n.card-figma-id {\n font-family: var(--font-secondary);\n font-size: 12px;\n font-weight: 500;\n letter-spacing: 0.2px;\n color: var(--content-tertiary);\n font-style: normal;\n}",
|
|
1160
|
+
"react": "'use client'\nimport Link from 'next/link'\nimport styles from './Card.module.css'\n\ninterface CardBadge {\n label: string\n variant?: 'neutral' | 'brand' | 'success'\n}\n\ninterface CardProps {\n href: string\n icon?: string // Material Symbols Outlined name (ex: 'palette')\n title: string\n description: string\n headerBadges?: CardBadge[] // badges no header (topo direito)\n footerLeft?: string // texto do footer (ex: Figma ID '2316:2462')\n footerBadges?: CardBadge[] // badges do footer\n className?: string\n}\n\nexport default function Card({\n href, icon, title, description,\n headerBadges, footerLeft, footerBadges, className = '',\n}: CardProps) {\n const hasFooter = footerLeft || (footerBadges && footerBadges.length > 0)\n\n return (\n <Link href={href} className={`${styles.card} ${className}`}>\n\n {/* Container 1 — conteúdo principal */}\n <div className={`${styles.container1} ${hasFooter ? styles.hasBorder : ''}`}>\n <div className={styles.header}>\n {icon && (\n <span\n className={styles.icon}\n style={{ fontVariationSettings: \"'FILL' 0, 'GRAD' 0, 'wght' 100, 'opsz' 48\" }}\n >\n {icon}\n </span>\n )}\n {headerBadges && headerBadges.length > 0 && (\n <div className={styles.badges}>\n {headerBadges.map(b => (\n <span key={b.label} className={`trdr-badge trdr-badge-${b.variant ?? 'neutral'}`}>\n {b.label}\n </span>\n ))}\n </div>\n )}\n </div>\n <span className={styles.title}>{title}</span>\n <p className={styles.desc}>{description}</p>\n </div>\n\n {/* Container 2 — footer (opcional) */}\n {hasFooter && (\n <div className={styles.container2}>\n {footerLeft && <code className={styles.footerLeft}>{footerLeft}</code>}\n {footerBadges && footerBadges.length > 0 && (\n <div className={styles.badges}>\n {footerBadges.map(b => (\n <span key={b.label} className={`trdr-badge trdr-badge-${b.variant ?? 'neutral'}`}>\n {b.label}\n </span>\n ))}\n </div>\n )}\n </div>\n )}\n\n </Link>\n )\n}\n\n/* Card.module.css — estrutura dois containers */\n/*\n.card {\n display: flex; flex-direction: column;\n gap: var(--scale-spacing-md);\n padding: var(--scale-spacing-2xl);\n background: var(--surface-tertiary);\n border: 1px solid var(--border-subtle);\n border-radius: var(--scale-radius-md);\n text-decoration: none; cursor: pointer;\n transition: border-color 0.15s ease, background-color 0.15s ease;\n}\n.card:hover { border-color: var(--border-default); background: var(--surface-secondary); }\n.container1 { display: flex; flex-direction: column; gap: 8px; width: 100%; }\n.hasBorder { border-bottom: 1px solid var(--border-subtle); padding-bottom: var(--scale-spacing-md); }\n.header { display: flex; align-items: flex-start; justify-content: space-between; width: 100%; }\n.icon { font-family: 'Material Symbols Outlined'; font-size: 44px; color: var(--content-brand); }\n.badges { display: flex; align-items: center; gap: 4px; }\n.title { font-family: var(--font-primary); font-size: 26px; font-weight: 500; color: var(--content-secondary); }\n.desc { font-family: var(--font-secondary); font-size: 14px; font-weight: 400; color: var(--content-tertiary); margin: 0; }\n.container2 { display: flex; align-items: center; justify-content: space-between; width: 100%; }\n.footerLeft { font-family: var(--font-secondary); font-size: 12px; font-weight: 500; letter-spacing: 0.2px; color: var(--content-tertiary); }\n*/",
|
|
1161
|
+
"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
|
+
}
|
|
1163
|
+
}
|
|
1164
|
+
]
|
|
1165
|
+
}
|