trdr-ds-install 1.1.0 → 1.2.1
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.
|
@@ -0,0 +1,1406 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": "1.0",
|
|
3
|
+
"generatedAt": "2026-05-11T00:35:11.146Z",
|
|
4
|
+
"total": 14,
|
|
5
|
+
"implemented": 14,
|
|
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
|
+
"slug": "janela",
|
|
1166
|
+
"name": "Janela",
|
|
1167
|
+
"figmaId": "1909:41600",
|
|
1168
|
+
"category": "trading",
|
|
1169
|
+
"implemented": true,
|
|
1170
|
+
"description": "Janela de ferramenta de trading — componente composto com header (badge AI, abas de ferramentas com underline, dropdown Multi e ações), linha de abas em pill (filtros) e Container central com slot swappable que recebe qualquer conteúdo via children. Inclui floating menu opcional de ações (Fechar, Minimizar, Maximizar, Fixar, Renomear) e scrollbars laterais/inferior visuais.",
|
|
1171
|
+
"props": [
|
|
1172
|
+
{
|
|
1173
|
+
"name": "tools",
|
|
1174
|
+
"type": "JanelaTool[]",
|
|
1175
|
+
"values": [
|
|
1176
|
+
"{ label, icon? }"
|
|
1177
|
+
]
|
|
1178
|
+
},
|
|
1179
|
+
{
|
|
1180
|
+
"name": "activeTool",
|
|
1181
|
+
"type": "number",
|
|
1182
|
+
"values": [
|
|
1183
|
+
"0",
|
|
1184
|
+
"1",
|
|
1185
|
+
"2"
|
|
1186
|
+
]
|
|
1187
|
+
},
|
|
1188
|
+
{
|
|
1189
|
+
"name": "onToolChange",
|
|
1190
|
+
"type": "function",
|
|
1191
|
+
"values": [
|
|
1192
|
+
"(index) => void"
|
|
1193
|
+
]
|
|
1194
|
+
},
|
|
1195
|
+
{
|
|
1196
|
+
"name": "tabs",
|
|
1197
|
+
"type": "string[]",
|
|
1198
|
+
"values": [
|
|
1199
|
+
"[\"Aba 1\", ...]"
|
|
1200
|
+
]
|
|
1201
|
+
},
|
|
1202
|
+
{
|
|
1203
|
+
"name": "activeTab",
|
|
1204
|
+
"type": "number",
|
|
1205
|
+
"values": [
|
|
1206
|
+
"0..N"
|
|
1207
|
+
]
|
|
1208
|
+
},
|
|
1209
|
+
{
|
|
1210
|
+
"name": "onTabChange",
|
|
1211
|
+
"type": "function",
|
|
1212
|
+
"values": [
|
|
1213
|
+
"(index) => void"
|
|
1214
|
+
]
|
|
1215
|
+
},
|
|
1216
|
+
{
|
|
1217
|
+
"name": "multiLabel",
|
|
1218
|
+
"type": "string",
|
|
1219
|
+
"values": [
|
|
1220
|
+
"Multi"
|
|
1221
|
+
]
|
|
1222
|
+
},
|
|
1223
|
+
{
|
|
1224
|
+
"name": "showSideScroll",
|
|
1225
|
+
"type": "boolean",
|
|
1226
|
+
"values": [
|
|
1227
|
+
"true",
|
|
1228
|
+
"false"
|
|
1229
|
+
]
|
|
1230
|
+
},
|
|
1231
|
+
{
|
|
1232
|
+
"name": "showBottomScroll",
|
|
1233
|
+
"type": "boolean",
|
|
1234
|
+
"values": [
|
|
1235
|
+
"true",
|
|
1236
|
+
"false"
|
|
1237
|
+
]
|
|
1238
|
+
},
|
|
1239
|
+
{
|
|
1240
|
+
"name": "showActionsMenu",
|
|
1241
|
+
"type": "boolean",
|
|
1242
|
+
"values": [
|
|
1243
|
+
"true",
|
|
1244
|
+
"false"
|
|
1245
|
+
]
|
|
1246
|
+
},
|
|
1247
|
+
{
|
|
1248
|
+
"name": "actions",
|
|
1249
|
+
"type": "JanelaAction[]",
|
|
1250
|
+
"values": [
|
|
1251
|
+
"{ icon, label, onClick? }"
|
|
1252
|
+
]
|
|
1253
|
+
},
|
|
1254
|
+
{
|
|
1255
|
+
"name": "children",
|
|
1256
|
+
"type": "ReactNode",
|
|
1257
|
+
"values": [
|
|
1258
|
+
"conteúdo do slot central"
|
|
1259
|
+
]
|
|
1260
|
+
}
|
|
1261
|
+
],
|
|
1262
|
+
"dimensions": [
|
|
1263
|
+
{
|
|
1264
|
+
"label": "Janela total",
|
|
1265
|
+
"width": "476px",
|
|
1266
|
+
"height": "312px"
|
|
1267
|
+
},
|
|
1268
|
+
{
|
|
1269
|
+
"label": "Header",
|
|
1270
|
+
"width": "476px",
|
|
1271
|
+
"height": "41px"
|
|
1272
|
+
},
|
|
1273
|
+
{
|
|
1274
|
+
"label": "Pill tabs row",
|
|
1275
|
+
"width": "476px",
|
|
1276
|
+
"height": "45px"
|
|
1277
|
+
},
|
|
1278
|
+
{
|
|
1279
|
+
"label": "Container central",
|
|
1280
|
+
"width": "476px",
|
|
1281
|
+
"height": "226px"
|
|
1282
|
+
},
|
|
1283
|
+
{
|
|
1284
|
+
"label": "Tag AI",
|
|
1285
|
+
"width": "hug",
|
|
1286
|
+
"height": "19px"
|
|
1287
|
+
},
|
|
1288
|
+
{
|
|
1289
|
+
"label": "Pill (filtro)",
|
|
1290
|
+
"width": "hug",
|
|
1291
|
+
"height": "31px"
|
|
1292
|
+
},
|
|
1293
|
+
{
|
|
1294
|
+
"label": "Botão Multi",
|
|
1295
|
+
"width": "65px",
|
|
1296
|
+
"height": "33px"
|
|
1297
|
+
},
|
|
1298
|
+
{
|
|
1299
|
+
"label": "Floating actions menu",
|
|
1300
|
+
"width": "172px",
|
|
1301
|
+
"height": "192px"
|
|
1302
|
+
},
|
|
1303
|
+
{
|
|
1304
|
+
"label": "Scrollbar lateral",
|
|
1305
|
+
"width": "14px",
|
|
1306
|
+
"height": "—"
|
|
1307
|
+
},
|
|
1308
|
+
{
|
|
1309
|
+
"label": "Scrollbar inferior",
|
|
1310
|
+
"width": "—",
|
|
1311
|
+
"height": "14px"
|
|
1312
|
+
}
|
|
1313
|
+
],
|
|
1314
|
+
"tokens": [
|
|
1315
|
+
{
|
|
1316
|
+
"property": "Janela bg / Header bg",
|
|
1317
|
+
"token": "bg.secondary",
|
|
1318
|
+
"value": "#141519"
|
|
1319
|
+
},
|
|
1320
|
+
{
|
|
1321
|
+
"property": "Pill row bg / Container bg",
|
|
1322
|
+
"token": "bg.tertiary",
|
|
1323
|
+
"value": "#1A1A1A"
|
|
1324
|
+
},
|
|
1325
|
+
{
|
|
1326
|
+
"property": "Tag AI bg",
|
|
1327
|
+
"token": "bg.brand",
|
|
1328
|
+
"value": "#00D4FF"
|
|
1329
|
+
},
|
|
1330
|
+
{
|
|
1331
|
+
"property": "Pill ativa bg / Multi bg",
|
|
1332
|
+
"token": "action.secondary.default",
|
|
1333
|
+
"value": "#4A4A4A"
|
|
1334
|
+
},
|
|
1335
|
+
{
|
|
1336
|
+
"property": "Pill inativa bg",
|
|
1337
|
+
"token": "surface.secondary",
|
|
1338
|
+
"value": "#222222"
|
|
1339
|
+
},
|
|
1340
|
+
{
|
|
1341
|
+
"property": "Texto pill ativa / título",
|
|
1342
|
+
"token": "content.primary",
|
|
1343
|
+
"value": "#FFFFFF"
|
|
1344
|
+
},
|
|
1345
|
+
{
|
|
1346
|
+
"property": "Texto item floating",
|
|
1347
|
+
"token": "content.secondary",
|
|
1348
|
+
"value": "#E8E8E8"
|
|
1349
|
+
},
|
|
1350
|
+
{
|
|
1351
|
+
"property": "Texto pill inativa / ícones / aba inativa",
|
|
1352
|
+
"token": "content.tertiary",
|
|
1353
|
+
"value": "#A4A4A4"
|
|
1354
|
+
},
|
|
1355
|
+
{
|
|
1356
|
+
"property": "Ícone link / underline aba ativa",
|
|
1357
|
+
"token": "bg.brand",
|
|
1358
|
+
"value": "#00D4FF"
|
|
1359
|
+
},
|
|
1360
|
+
{
|
|
1361
|
+
"property": "Stroke header / pill row / floating",
|
|
1362
|
+
"token": "border.subtle",
|
|
1363
|
+
"value": "#222222"
|
|
1364
|
+
},
|
|
1365
|
+
{
|
|
1366
|
+
"property": "Radius pill / botão Multi",
|
|
1367
|
+
"token": "radius.lg",
|
|
1368
|
+
"value": "16px"
|
|
1369
|
+
},
|
|
1370
|
+
{
|
|
1371
|
+
"property": "Radius janela / floating menu",
|
|
1372
|
+
"token": "radius.md",
|
|
1373
|
+
"value": "8px"
|
|
1374
|
+
},
|
|
1375
|
+
{
|
|
1376
|
+
"property": "Radius Tag AI / item floating",
|
|
1377
|
+
"token": "radius.sm",
|
|
1378
|
+
"value": "4px"
|
|
1379
|
+
},
|
|
1380
|
+
{
|
|
1381
|
+
"property": "Padding pill / gap header",
|
|
1382
|
+
"token": "spacing.sm",
|
|
1383
|
+
"value": "8px"
|
|
1384
|
+
},
|
|
1385
|
+
{
|
|
1386
|
+
"property": "Padding pill horizontal",
|
|
1387
|
+
"token": "spacing.md",
|
|
1388
|
+
"value": "12px"
|
|
1389
|
+
},
|
|
1390
|
+
{
|
|
1391
|
+
"property": "Padding container interno",
|
|
1392
|
+
"token": "spacing.lg",
|
|
1393
|
+
"value": "16px"
|
|
1394
|
+
}
|
|
1395
|
+
],
|
|
1396
|
+
"anatomy": "Janela 476×312 com border-radius 8px e border subtle, em coluna:\n\n1. HEADER (41px, bg --bg-secondary, border-bottom subtle):\n [Tag AI 19h #00D4FF radius 4] · [Tabs Ferramentas 14/16.8 com underline 2px brand na ativa + chevron 40×40] · [Divider 1×33 · Link cyan 24×24 · Multi 65×33 bg secondary radius 16 · more_horiz 24×24 · close 24×24]\n\n2. PILL TABS (45px, bg --bg-tertiary, padding 8, gap 8, border-bottom subtle):\n 5 pills 31h padding 8/12 radius 16. Ativa: bg --action-secondary-default + texto primary. Inativas: bg --surface-secondary + texto tertiary.\n\n3. CONTAINER (226px, bg --bg-tertiary, padding 16, gap 8):\n Slot via children. Fallback visual: texto \"Componente coringa\". Scrollbars opcionais (lateral 14×, inferior ×14) com setas Material e thumb arredondado radius 16.\n\n4. FLOATING ACTIONS MENU (172×192, opcional, ancorado em more_horiz):\n bg --bg-secondary, border subtle, radius 8, shadow drop. 5 ações (Fechar/Minimizar/Maximizar/Fixar/Renomear) 32h cada com ícone Material 20px tertiary + label Inter 14 secondary. Hover bg --surface-secondary.",
|
|
1397
|
+
"notes": "Slot via React.children: passe qualquer componente (Boleta, Card, gráfico, etc.) como filho. O componente expõe estado controlado e não-controlado para activeTool/activeTab.",
|
|
1398
|
+
"code": {
|
|
1399
|
+
"html": "<!-- Janela TRDR — exemplo estático (Figma 1909:41600) -->\n<div class=\"trdr-janela\">\n\n <!-- HEADER -->\n <div class=\"trdr-janela-header\">\n <span class=\"trdr-janela-tag-ai\">\n <span class=\"material-symbols-outlined\" style=\"font-size:12px\">auto_awesome</span>\n AI\n </span>\n\n <div class=\"trdr-janela-tool-tabs\">\n <button class=\"trdr-janela-tool-tab trdr-janela-tool-tab-active\">Ferramenta 1</button>\n <button class=\"trdr-janela-tool-tab\">Ferramenta 2</button>\n <button class=\"trdr-janela-tool-tab\">Ferramenta 3</button>\n <button class=\"trdr-janela-tool-chevron\">\n <span class=\"material-symbols-outlined\">keyboard_arrow_down</span>\n </button>\n </div>\n\n <div class=\"trdr-janela-header-actions\">\n <span class=\"trdr-janela-divider\"></span>\n <button class=\"trdr-janela-icon-button trdr-janela-icon-link\">\n <span class=\"material-symbols-outlined\">link</span>\n </button>\n <button class=\"trdr-janela-multi\">\n Multi\n <span class=\"material-symbols-outlined\" style=\"font-size:16px\">keyboard_arrow_down</span>\n </button>\n <button class=\"trdr-janela-icon-button\">\n <span class=\"material-symbols-outlined\">more_horiz</span>\n </button>\n <button class=\"trdr-janela-icon-button\">\n <span class=\"material-symbols-outlined\">close</span>\n </button>\n </div>\n </div>\n\n <!-- PILL TABS (filtros) -->\n <div class=\"trdr-janela-pill-row\" role=\"tablist\">\n <button class=\"trdr-janela-pill trdr-janela-pill-active\">Aba 1</button>\n <button class=\"trdr-janela-pill\">Aba 2</button>\n <button class=\"trdr-janela-pill\">Aba 3</button>\n <button class=\"trdr-janela-pill\">Aba 4</button>\n <button class=\"trdr-janela-pill\">Aba 5</button>\n </div>\n\n <!-- CONTAINER (slot) -->\n <div class=\"trdr-janela-container\">\n <div class=\"trdr-janela-container-inner\">\n <!-- Slot: substitua pelo seu componente -->\n <span class=\"trdr-janela-coringa\">Componente coringa</span>\n </div>\n </div>\n\n <!-- FLOATING MENU (opcional — more_horiz) -->\n <div class=\"trdr-janela-actions-menu\" role=\"menu\">\n <button class=\"trdr-janela-action-item\"><span class=\"material-symbols-outlined\">close</span>Fechar</button>\n <button class=\"trdr-janela-action-item\"><span class=\"material-symbols-outlined\">remove</span>Minimizar</button>\n <button class=\"trdr-janela-action-item\"><span class=\"material-symbols-outlined\">arrow_outward</span>Maximizar</button>\n <button class=\"trdr-janela-action-item\"><span class=\"material-symbols-outlined\">keep</span>Fixar</button>\n <button class=\"trdr-janela-action-item\"><span class=\"material-symbols-outlined\">edit</span>Renomear aba</button>\n </div>\n\n</div>",
|
|
1400
|
+
"css": "/* Janela TRDR — Figma 1909:41600 (476×312)\n * Tokens semânticos usados (todos em src/styles/tokens.css):\n * --bg-secondary #141519 --bg-tertiary #1A1A1A --bg-brand #00D4FF\n * --surface-secondary #222222 --action-secondary-default #4A4A4A\n * --content-primary #FFFFFF --content-secondary #E8E8E8 --content-tertiary #A4A4A4\n * --border-subtle #222222\n * --radius-sm 4px --radius-md 8px --radius-lg 16px\n * --spacing-xs 4px --spacing-sm 8px --spacing-md 12px --spacing-lg 16px\n */\n\n.trdr-janela {\n width: 476px;\n height: 312px;\n display: flex;\n flex-direction: column;\n background: var(--bg-secondary);\n border: 1px solid var(--border-subtle);\n border-radius: var(--radius-md);\n position: relative;\n overflow: hidden;\n font-family: var(--font-secondary);\n}\n\n/* HEADER */\n.trdr-janela-header {\n display: flex; align-items: center; gap: 8px;\n height: 41px; padding: 0 8px;\n background: var(--bg-secondary);\n border-bottom: 1px solid var(--border-subtle);\n}\n.trdr-janela-tag-ai {\n display: inline-flex; align-items: center; gap: 2px;\n padding: 2px 4px;\n background: var(--bg-brand);\n border-radius: var(--radius-sm);\n font-size: 11px; font-weight: 600;\n color: var(--content-primary);\n}\n.trdr-janela-tool-tabs {\n display: flex; align-items: stretch; flex: 1; min-width: 0; height: 100%;\n overflow: hidden;\n}\n.trdr-janela-tool-tab {\n padding: 0 12px; height: 100%;\n background: transparent; border: none; cursor: pointer;\n font-size: 14px; line-height: 16.8px;\n color: var(--content-tertiary);\n position: relative; transition: color 0.15s ease;\n white-space: nowrap;\n}\n.trdr-janela-tool-tab:hover:not(.trdr-janela-tool-tab-active) { color: var(--content-secondary); }\n.trdr-janela-tool-tab-active { color: var(--content-primary); }\n.trdr-janela-tool-tab-active::after {\n content: ''; position: absolute; left: 0; right: 0; bottom: 0;\n height: 2px; background: var(--bg-brand);\n}\n.trdr-janela-tool-chevron {\n width: 40px; height: 40px;\n display: inline-flex; align-items: center; justify-content: center;\n background: transparent; border: none; cursor: pointer;\n color: var(--content-tertiary);\n}\n.trdr-janela-header-actions {\n display: flex; align-items: center; gap: 8px; flex-shrink: 0; height: 100%;\n}\n.trdr-janela-divider { width: 1px; height: 33px; background: var(--border-subtle); }\n.trdr-janela-icon-button {\n width: 24px; height: 24px;\n display: inline-flex; align-items: center; justify-content: center;\n background: transparent; border: none; cursor: pointer;\n color: var(--content-tertiary);\n transition: color 0.15s ease;\n}\n.trdr-janela-icon-button:hover { color: var(--content-secondary); }\n.trdr-janela-icon-link { color: var(--bg-brand); }\n.trdr-janela-multi {\n display: inline-flex; align-items: center; gap: 4px;\n height: 33px; padding: 0 8px;\n background: var(--action-secondary-default);\n border: none; border-radius: var(--radius-lg);\n cursor: pointer;\n font-size: 14px; color: var(--content-primary);\n}\n\n/* PILL TABS (filtros) */\n.trdr-janela-pill-row {\n display: flex; align-items: center; gap: 8px;\n height: 45px; padding: 8px;\n background: var(--bg-tertiary);\n border-bottom: 1px solid var(--border-subtle);\n overflow: hidden;\n}\n.trdr-janela-pill {\n height: 31px; padding: 8px 12px;\n background: var(--surface-secondary);\n border: none; border-radius: var(--radius-lg);\n font-size: 14px; line-height: 16.8px;\n color: var(--content-tertiary);\n cursor: pointer; white-space: nowrap;\n transition: background 0.15s ease, color 0.15s ease;\n}\n.trdr-janela-pill-active {\n background: var(--action-secondary-default);\n color: var(--content-primary);\n}\n\n/* CONTAINER (slot) */\n.trdr-janela-container {\n flex: 1; position: relative;\n background: var(--bg-tertiary);\n display: flex; flex-direction: column; overflow: hidden;\n}\n.trdr-janela-container-inner {\n flex: 1; display: flex; align-items: center; justify-content: center;\n padding: 16px; gap: 8px; overflow: auto; min-height: 0;\n}\n.trdr-janela-coringa {\n font-size: 14px; line-height: 16.8px; color: var(--content-primary);\n}\n\n/* FLOATING MENU */\n.trdr-janela-actions-menu {\n position: absolute; top: 45px; right: 40px;\n width: 172px;\n background: var(--bg-secondary);\n border: 1px solid var(--border-subtle);\n border-radius: var(--radius-md);\n box-shadow: 0 4px 12px rgba(0,0,0,0.30);\n padding: 8px; display: flex; flex-direction: column; gap: 4px;\n z-index: 10;\n}\n.trdr-janela-action-item {\n display: flex; align-items: center; gap: 8px;\n height: 32px; padding: 0 8px;\n background: transparent; border: none; cursor: pointer;\n border-radius: var(--radius-sm);\n font-size: 14px; line-height: 16.8px;\n color: var(--content-secondary);\n text-align: left;\n transition: background 0.12s ease;\n}\n.trdr-janela-action-item:hover { background: var(--surface-secondary); }\n.trdr-janela-action-item .material-symbols-outlined { color: var(--content-tertiary); font-size: 20px; }",
|
|
1401
|
+
"react": "import Janela from '@/components/ui/Janela'\nimport Boleta from '@/components/ui/Boleta'\n\n// Versão default — slot vazio mostra \"Componente coringa\"\n<Janela />\n\n// Com tabs/ferramentas customizadas e callback\n<Janela\n tools={[\n { label: 'Book', icon: 'view_list' },\n { label: 'Gráfico', icon: 'show_chart' },\n ]}\n tabs={['Mercado', 'Posições', 'Histórico']}\n activeTab={0}\n onTabChange={(i) => console.log('tab', i)}\n/>\n\n// Com conteúdo customizado no slot\n<Janela activeTab={2} showSideScroll showBottomScroll>\n <Boleta versao=\"simples\" />\n</Janela>\n\n// Com floating menu de ações aberto\n<Janela\n showActionsMenu\n onActionsMenuToggle={() => setMenuOpen(v => !v)}\n actions={[\n { icon: 'close', label: 'Fechar', onClick: handleClose },\n { icon: 'remove', label: 'Minimizar' },\n { icon: 'arrow_outward', label: 'Maximizar' },\n ]}\n/>",
|
|
1402
|
+
"prompt": "Implemente o componente Janela do Design System TRDR — janela de ferramenta de trading composta, pixel-perfect com o Figma 1909:41600.\n\nDIMENSÕES (fixas): 476×312 px, border-radius var(--radius-md) (8px), border 1px solid var(--border-subtle), background var(--bg-secondary), overflow hidden, position relative, font-family var(--font-secondary). Layout em coluna com 3 faixas:\n\n1. HEADER (height 41px, bg var(--bg-secondary), border-bottom 1px var(--border-subtle), padding 0 8px, gap 8px):\n - Tag AI: padding 2px 4px, gap 2px, bg var(--bg-brand) #00D4FF, border-radius var(--radius-sm) 4px, texto \"AI\" Inter 11/600 var(--content-primary). Ícone Material \"auto_awesome\" 12px à esquerda.\n - Abas Ferramentas (flex:1, height 100%, overflow hidden): 3 botões \"Ferramenta N\", padding 0 12px, font Inter 14/16.8 var(--content-tertiary); ativa muda para var(--content-primary) e ganha ::after com height 2px var(--bg-brand) (#00D4FF) no bottom 0 left/right 0. Botão chevron 40×40 com ícone Material \"keyboard_arrow_down\" tertiary.\n - Controles à direita (gap 8px): divider vertical 1×33 var(--border-subtle); botão ícone \"link\" 24×24 cor var(--bg-brand) (cyan); botão \"Multi\" 33h padding 0 8px gap 4 bg var(--action-secondary-default) (#4A4A4A) radius var(--radius-lg) (16px) texto primary + chevron 16px; botões ícone \"more_horiz\" e \"close\" 24×24 tertiary.\n\n2. PILL TABS (height 45px, bg var(--bg-tertiary) #1A1A1A, padding 8px, gap 8px, border-bottom subtle, overflow hidden):\n - 5 pills \"Aba 1..Aba 5\". Cada pill 31h padding 8px 12px radius var(--radius-lg) Inter 14/16.8 whitespace nowrap.\n - Ativa: bg var(--action-secondary-default) #4A4A4A, texto var(--content-primary).\n - Inativa: bg var(--surface-secondary) #222222, texto var(--content-tertiary). Hover muda texto para var(--content-secondary).\n\n3. CONTAINER CENTRAL (flex 1, bg var(--bg-tertiary), padding 16px, gap 8px, position relative, overflow hidden):\n - Slot via children. Quando vazio mostrar fallback \"Componente coringa\" centralizado, Inter 14/16.8 var(--content-primary).\n - Scrollbars opcionais (controlados por props showSideScroll/showBottomScroll):\n • Lateral (right 0, top 0, bottom 6px, width 14px, bg var(--bg-secondary), border-left subtle): seta cima 12×12 Material \"arrow_drop_up\", track 6px com thumb radius 16 bg var(--action-secondary-default) 60% de altura, seta baixo \"arrow_drop_down\".\n • Inferior (left 0, right 14px, height 14px, bg var(--bg-secondary), border-top subtle): seta esquerda \"arrow_left\", track horizontal com thumb radius 16, seta direita \"arrow_right\".\n • Canto: quando ambos ativos, 14×14 no canto inferior direito com bg secondary e borders.\n\n4. FLOATING ACTIONS MENU (opcional, posição absoluta top 45px right 40px, width 172px):\n - bg var(--bg-secondary), border 1px var(--border-subtle), border-radius var(--radius-md) (8px), box-shadow 0 4px 12px rgba(0,0,0,0.30), padding 8px, gap 4px, z-index 10.\n - 5 ações: { close: Fechar, remove: Minimizar, arrow_outward: Maximizar, keep: Fixar, edit: Renomear aba }. Cada item: height 32px, padding 0 8px, gap 8px, border-radius var(--radius-sm), ícone Material 20px var(--content-tertiary), label Inter 14/16.8 var(--content-secondary). Hover bg var(--surface-secondary).\n\nAPI React (TypeScript): props { tools?: JanelaTool[]; activeTool?: number; onToolChange?; tabs?: string[]; activeTab?: number; onTabChange?; multiLabel?: string; onMultiClick?; onLinkClick?; onClose?; showSideScroll?: boolean; showBottomScroll?: boolean; showActionsMenu?: boolean; onActionsMenuToggle?; actions?: JanelaAction[]; children?: ReactNode }. Suporta estado controlado E não-controlado (defaultActiveTool/defaultActiveTab). aria-selected nas pills, aria-expanded no botão de menu, role=\"tab\"/\"tablist\"/\"menu\"/\"menuitem\".\n\nUse APENAS tokens semânticos do TRDR (var(--bg-*), var(--surface-*), var(--content-*), var(--action-*), var(--border-*), var(--radius-*), var(--spacing-*)). NUNCA hex direto. NUNCA --scale-spacing-* ou --scale-radius-* (não existem). O componente deve funcionar nos dois temas (light e dark) sem alterações."
|
|
1403
|
+
}
|
|
1404
|
+
}
|
|
1405
|
+
]
|
|
1406
|
+
}
|