trdr-ds-install 1.2.3 → 1.2.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": "1.0",
|
|
3
|
-
"generatedAt": "2026-05-
|
|
4
|
-
"total":
|
|
5
|
-
"implemented":
|
|
3
|
+
"generatedAt": "2026-05-11T21:56:00.879Z",
|
|
4
|
+
"total": 15,
|
|
5
|
+
"implemented": 15,
|
|
6
6
|
"categories": {
|
|
7
7
|
"formulario": "Formulário / Controles",
|
|
8
8
|
"modal": "Modais / Overlays",
|
|
@@ -1166,6 +1166,156 @@
|
|
|
1166
1166
|
"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?."
|
|
1167
1167
|
}
|
|
1168
1168
|
},
|
|
1169
|
+
{
|
|
1170
|
+
"slug": "floating-menu",
|
|
1171
|
+
"name": "Floating Menu",
|
|
1172
|
+
"figmaId": "1921:55380",
|
|
1173
|
+
"category": "floating-menu",
|
|
1174
|
+
"implemented": true,
|
|
1175
|
+
"description": "Menu flutuante genérico do TRDR — compound component com Item, Title e Divider. Cobre desde listas simples de ações até menus seccionados com ícones Material Symbols. Usado em Janela, seletor de ativo, configurações, indicadores e notificações.",
|
|
1176
|
+
"props": [
|
|
1177
|
+
{
|
|
1178
|
+
"name": "width",
|
|
1179
|
+
"type": "number | string",
|
|
1180
|
+
"values": [
|
|
1181
|
+
"172",
|
|
1182
|
+
"240",
|
|
1183
|
+
"260",
|
|
1184
|
+
"280",
|
|
1185
|
+
"300",
|
|
1186
|
+
"auto"
|
|
1187
|
+
]
|
|
1188
|
+
},
|
|
1189
|
+
{
|
|
1190
|
+
"name": "children",
|
|
1191
|
+
"type": "ReactNode",
|
|
1192
|
+
"values": [
|
|
1193
|
+
"FloatingMenu.Item, FloatingMenu.Title, FloatingMenu.Divider, custom content"
|
|
1194
|
+
]
|
|
1195
|
+
},
|
|
1196
|
+
{
|
|
1197
|
+
"name": "Item.icon",
|
|
1198
|
+
"type": "string",
|
|
1199
|
+
"values": [
|
|
1200
|
+
"nome do Material Symbols (ex: \"close\", \"star\", \"search\")"
|
|
1201
|
+
]
|
|
1202
|
+
},
|
|
1203
|
+
{
|
|
1204
|
+
"name": "Item.disabled",
|
|
1205
|
+
"type": "boolean",
|
|
1206
|
+
"values": [
|
|
1207
|
+
"true",
|
|
1208
|
+
"false"
|
|
1209
|
+
]
|
|
1210
|
+
},
|
|
1211
|
+
{
|
|
1212
|
+
"name": "Item.onClick",
|
|
1213
|
+
"type": "function",
|
|
1214
|
+
"values": [
|
|
1215
|
+
"() => void"
|
|
1216
|
+
]
|
|
1217
|
+
},
|
|
1218
|
+
{
|
|
1219
|
+
"name": "Title.size",
|
|
1220
|
+
"type": "enum",
|
|
1221
|
+
"values": [
|
|
1222
|
+
"\"default\" (14px)",
|
|
1223
|
+
"\"sm\" (10px)"
|
|
1224
|
+
]
|
|
1225
|
+
}
|
|
1226
|
+
],
|
|
1227
|
+
"dimensions": [
|
|
1228
|
+
{
|
|
1229
|
+
"label": "Item height",
|
|
1230
|
+
"width": "—",
|
|
1231
|
+
"height": "32px"
|
|
1232
|
+
},
|
|
1233
|
+
{
|
|
1234
|
+
"label": "Menu padding",
|
|
1235
|
+
"width": "8px",
|
|
1236
|
+
"height": "8px"
|
|
1237
|
+
},
|
|
1238
|
+
{
|
|
1239
|
+
"label": "Ações da janela (5 itens)",
|
|
1240
|
+
"width": "172px",
|
|
1241
|
+
"height": "192px"
|
|
1242
|
+
},
|
|
1243
|
+
{
|
|
1244
|
+
"label": "Notificações (4 itens)",
|
|
1245
|
+
"width": "300px",
|
|
1246
|
+
"height": "182px"
|
|
1247
|
+
},
|
|
1248
|
+
{
|
|
1249
|
+
"label": "Configurações (5 itens + dropdown)",
|
|
1250
|
+
"width": "260px",
|
|
1251
|
+
"height": "239px"
|
|
1252
|
+
}
|
|
1253
|
+
],
|
|
1254
|
+
"tokens": [
|
|
1255
|
+
{
|
|
1256
|
+
"property": "Menu background",
|
|
1257
|
+
"token": "bg.secondary",
|
|
1258
|
+
"value": "#141519"
|
|
1259
|
+
},
|
|
1260
|
+
{
|
|
1261
|
+
"property": "Menu border",
|
|
1262
|
+
"token": "border.subtle",
|
|
1263
|
+
"value": "#222222"
|
|
1264
|
+
},
|
|
1265
|
+
{
|
|
1266
|
+
"property": "Menu border-radius",
|
|
1267
|
+
"token": "radius.md",
|
|
1268
|
+
"value": "8px"
|
|
1269
|
+
},
|
|
1270
|
+
{
|
|
1271
|
+
"property": "Item border-radius",
|
|
1272
|
+
"token": "radius.sm",
|
|
1273
|
+
"value": "4px"
|
|
1274
|
+
},
|
|
1275
|
+
{
|
|
1276
|
+
"property": "Item label color",
|
|
1277
|
+
"token": "content.secondary",
|
|
1278
|
+
"value": "#E8E8E8"
|
|
1279
|
+
},
|
|
1280
|
+
{
|
|
1281
|
+
"property": "Item icon color",
|
|
1282
|
+
"token": "content.tertiary",
|
|
1283
|
+
"value": "#A4A4A4"
|
|
1284
|
+
},
|
|
1285
|
+
{
|
|
1286
|
+
"property": "Item hover background",
|
|
1287
|
+
"token": "surface.secondary",
|
|
1288
|
+
"value": "#222222"
|
|
1289
|
+
},
|
|
1290
|
+
{
|
|
1291
|
+
"property": "Title color",
|
|
1292
|
+
"token": "content.tertiary",
|
|
1293
|
+
"value": "#A4A4A4"
|
|
1294
|
+
},
|
|
1295
|
+
{
|
|
1296
|
+
"property": "Divider color",
|
|
1297
|
+
"token": "border.subtle",
|
|
1298
|
+
"value": "#222222"
|
|
1299
|
+
},
|
|
1300
|
+
{
|
|
1301
|
+
"property": "Menu gap",
|
|
1302
|
+
"token": "spacing.xs",
|
|
1303
|
+
"value": "4px"
|
|
1304
|
+
},
|
|
1305
|
+
{
|
|
1306
|
+
"property": "Item padding",
|
|
1307
|
+
"token": "spacing.sm",
|
|
1308
|
+
"value": "8px"
|
|
1309
|
+
}
|
|
1310
|
+
],
|
|
1311
|
+
"anatomy": "Container: bg-secondary, border-subtle, radius-md 8px, shadow 0 4px 12px rgba(0,0,0,0.3), padding 8px, gap 4px\n\nFloatingMenu.Title — rótulo de seção: content-tertiary, 14px (padrão) ou 10px (size=\"sm\"), padding-left 8px\nFloatingMenu.Item — botão: 32px height, padding 0 8px, gap 8px, radius-sm 4px\n └ [Icon?: 20px Material Symbols Outlined, content-tertiary] [Label: Inter 14px, content-secondary, flex-1]\n └ :hover → background surface-secondary | :disabled → opacity 0.45, cursor not-allowed\nFloatingMenu.Divider — separador: 1px solid border-subtle, full-width",
|
|
1312
|
+
"code": {
|
|
1313
|
+
"html": "<!-- Floating Menu TRDR — HTML com classes globais -->\n\n<!-- Exemplo 1: ações simples (sem título) -->\n<div class=\"trdr-floating-menu\" style=\"width:172px\" role=\"menu\">\n <button class=\"trdr-floating-menu-item\" role=\"menuitem\">\n <span class=\"material-symbols-outlined\" style=\"font-size:20px;line-height:20px;font-variation-settings:'FILL' 0,'GRAD' 0;color:var(--content-tertiary)\">close</span>\n Fechar\n </button>\n <button class=\"trdr-floating-menu-item\" role=\"menuitem\">\n <span class=\"material-symbols-outlined\" style=\"font-size:20px;line-height:20px;font-variation-settings:'FILL' 0,'GRAD' 0;color:var(--content-tertiary)\">remove</span>\n Minimizar\n </button>\n <button class=\"trdr-floating-menu-item\" role=\"menuitem\">\n <span class=\"material-symbols-outlined\" style=\"font-size:20px;line-height:20px;font-variation-settings:'FILL' 0,'GRAD' 0;color:var(--content-tertiary)\">keep</span>\n Fixar\n </button>\n</div>\n\n<!-- Exemplo 2: com título, divisor e seções -->\n<div class=\"trdr-floating-menu\" style=\"width:240px\" role=\"menu\">\n <p class=\"trdr-floating-menu-title\">Favoritos</p>\n <button class=\"trdr-floating-menu-item\" role=\"menuitem\">\n <span class=\"material-symbols-outlined\" style=\"font-size:20px;line-height:20px;font-variation-settings:'FILL' 0,'GRAD' 0;color:var(--content-tertiary)\">star</span>\n WINFUT (Q19)\n </button>\n <button class=\"trdr-floating-menu-item\" role=\"menuitem\">\n <span class=\"material-symbols-outlined\" style=\"font-size:20px;line-height:20px;font-variation-settings:'FILL' 0,'GRAD' 0;color:var(--content-tertiary)\">star</span>\n PETR4\n </button>\n <div class=\"trdr-floating-menu-divider\" role=\"separator\"></div>\n <p class=\"trdr-floating-menu-title\">Recentes</p>\n <button class=\"trdr-floating-menu-item\" role=\"menuitem\">\n <span class=\"material-symbols-outlined\" style=\"font-size:20px;line-height:20px;font-variation-settings:'FILL' 0,'GRAD' 0;color:var(--content-tertiary)\">history</span>\n BBDC4\n </button>\n <div class=\"trdr-floating-menu-divider\" role=\"separator\"></div>\n <button class=\"trdr-floating-menu-item\" role=\"menuitem\">\n <span class=\"material-symbols-outlined\" style=\"font-size:20px;line-height:20px;font-variation-settings:'FILL' 0,'GRAD' 0;color:var(--content-tertiary)\">search</span>\n Buscar ativo...\n </button>\n</div>",
|
|
1314
|
+
"css": "/* Floating Menu TRDR — classes globais */\n\n/* Container */\n.trdr-floating-menu {\n background: var(--bg-secondary); /* #141519 */\n border: 1px solid var(--border-subtle); /* #222222 */\n border-radius: var(--radius-md); /* 8px */\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.30);\n padding: var(--spacing-sm); /* 8px */\n display: flex;\n flex-direction: column;\n gap: var(--spacing-xs); /* 4px */\n overflow: hidden;\n}\n\n/* Item — botão de ação */\n.trdr-floating-menu-item {\n display: flex;\n align-items: center;\n gap: var(--spacing-sm); /* 8px */\n height: 32px;\n padding: 0 var(--spacing-sm);\n background: transparent;\n border: none;\n border-radius: var(--radius-sm); /* 4px */\n cursor: pointer;\n font-family: var(--font-secondary);\n font-size: 14px;\n font-weight: 400;\n line-height: 1.2;\n color: var(--content-secondary); /* #E8E8E8 */\n text-align: left;\n width: 100%;\n flex-shrink: 0;\n transition: background 0.12s ease;\n}\n\n.trdr-floating-menu-item:not(:disabled):hover {\n background: var(--surface-secondary); /* #222222 */\n}\n\n.trdr-floating-menu-item:disabled {\n cursor: not-allowed;\n opacity: 0.45;\n}\n\n/* Título de seção */\n.trdr-floating-menu-title {\n color: var(--content-tertiary); /* #A4A4A4 */\n font-family: var(--font-secondary);\n font-size: 14px;\n font-weight: 400;\n line-height: 1.2;\n width: 100%;\n flex-shrink: 0;\n padding: 0 var(--spacing-sm);\n}\n\n.trdr-floating-menu-title-sm { /* size=\"sm\" — mercados, color-picker */\n font-size: 10px;\n line-height: 15px;\n padding: 4px var(--spacing-xs) 2px;\n}\n\n/* Divisor */\n.trdr-floating-menu-divider {\n height: 1px;\n background: var(--border-subtle); /* #222222 */\n width: 100%;\n flex-shrink: 0;\n}",
|
|
1315
|
+
"react": "import FloatingMenu from '@/components/ui/FloatingMenu'\n\n// Ações simples (como na Janela)\n<FloatingMenu width={172}>\n <FloatingMenu.Item icon=\"close\" onClick={onClose}>Fechar</FloatingMenu.Item>\n <FloatingMenu.Item icon=\"remove\" onClick={onMinimize}>Minimizar</FloatingMenu.Item>\n <FloatingMenu.Item icon=\"arrow_outward\" onClick={onMaximize}>Maximizar</FloatingMenu.Item>\n <FloatingMenu.Item icon=\"keep\" onClick={onPin}>Fixar</FloatingMenu.Item>\n <FloatingMenu.Item icon=\"edit\" onClick={onRename}>Renomear aba</FloatingMenu.Item>\n</FloatingMenu>\n\n// Com seções e divisores (como seletor de ativo)\n<FloatingMenu width={280}>\n <FloatingMenu.Title>Favoritos</FloatingMenu.Title>\n <FloatingMenu.Item icon=\"star\" onClick={() => selectAtivo('WINFUT')}>WINFUT (Q19)</FloatingMenu.Item>\n <FloatingMenu.Item icon=\"star\" onClick={() => selectAtivo('PETR4')}>PETR4</FloatingMenu.Item>\n <FloatingMenu.Divider />\n <FloatingMenu.Title>Recentes</FloatingMenu.Title>\n <FloatingMenu.Item icon=\"history\" onClick={() => selectAtivo('BBDC4')}>BBDC4</FloatingMenu.Item>\n <FloatingMenu.Item icon=\"history\" onClick={() => selectAtivo('ITUB4')}>ITUB4</FloatingMenu.Item>\n <FloatingMenu.Divider />\n <FloatingMenu.Item icon=\"search\">Buscar ativo...</FloatingMenu.Item>\n</FloatingMenu>\n\n// Item desabilitado\n<FloatingMenu width={240}>\n <FloatingMenu.Item icon=\"bar_chart\">Volume</FloatingMenu.Item>\n <FloatingMenu.Item icon=\"trending_up\">Média Móvel</FloatingMenu.Item>\n <FloatingMenu.Item icon=\"add\" disabled>Indicador premium</FloatingMenu.Item>\n</FloatingMenu>\n\n// Conteúdo customizado (qualquer ReactNode como children)\n<FloatingMenu width={260}>\n <FloatingMenu.Title>Conta</FloatingMenu.Title>\n <div style={{ padding: '4px 8px' }}>\n {/* Dropdown, Checkbox, Slider, etc. */}\n </div>\n <FloatingMenu.Divider />\n <FloatingMenu.Item icon=\"logout\">Sair</FloatingMenu.Item>\n</FloatingMenu>",
|
|
1316
|
+
"prompt": "Implemente o componente FloatingMenu do Design System TRDR — menu flutuante genérico pixel-perfect com Figma 1921:55380.\n\nCOMPOUND COMPONENT — 4 partes:\n1. FloatingMenu (container): bg var(--bg-secondary) #141519, border 1px solid var(--border-subtle) #222, border-radius var(--radius-md) 8px, box-shadow 0 4px 12px rgba(0,0,0,0.30), padding var(--spacing-sm) 8px, gap var(--spacing-xs) 4px, flex-col, overflow hidden. Prop width?: number|string.\n\n2. FloatingMenu.Item (button): height 32px, padding 0 var(--spacing-sm) 8px, gap var(--spacing-sm) 8px, border-radius var(--radius-sm) 4px, background transparent, color var(--content-secondary) #E8E8E8, font Inter 14px/400. :hover (não disabled) → background var(--surface-secondary) #222. :disabled → opacity 0.45, cursor not-allowed. Props: icon?: string (Material Symbols name), disabled?: boolean, onClick, children.\n\n3. FloatingMenu.Title (p): color var(--content-tertiary) #A4A4A4, font Inter 14px/400. Prop size: \"default\" (14px, padding-left 8px) | \"sm\" (10px/15px, padding 4px 4px 2px — usado em mercados/color-picker). children: string.\n\n4. FloatingMenu.Divider (div): height 1px, background var(--border-subtle) #222, width 100%.\n\nICON (Material Symbols Outlined): font-family 'Material Symbols Outlined', font-size 20px, line-height 20px, font-variation-settings: 'FILL' 0 'GRAD' 0, color var(--content-tertiary) #A4A4A4, flex-shrink 0.\n\nLABEL: flex:1, min-width 0, overflow hidden, text-overflow ellipsis, white-space nowrap.\n\nAPI: import FloatingMenu from '@/components/ui/FloatingMenu'\n<FloatingMenu width={172}>\n <FloatingMenu.Item icon=\"close\" onClick={fn}>Fechar</FloatingMenu.Item>\n <FloatingMenu.Title>Seção</FloatingMenu.Title>\n <FloatingMenu.Divider />\n</FloatingMenu>\n\nUse Object.assign(FloatingMenuRoot, { Item, Title, Divider }) para montar o compound component. NUNCA hex direto — apenas tokens var(--*). NUNCA --scale-spacing-* ou --scale-radius-*."
|
|
1317
|
+
}
|
|
1318
|
+
},
|
|
1169
1319
|
{
|
|
1170
1320
|
"slug": "janela",
|
|
1171
1321
|
"name": "Janela",
|