@seedgrid/fe-theme 2026.4.18 → 2026.4.20
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/dist/ai/seedgrid-theme.manifest.json +857 -0
- package/dist/theme/SeedThemeProvider.meta.d.ts +61 -0
- package/dist/theme/SeedThemeProvider.meta.d.ts.map +1 -0
- package/dist/theme/SeedThemeProvider.meta.js +105 -0
- package/dist/theme/ThemeProvider.meta.d.ts +60 -0
- package/dist/theme/ThemeProvider.meta.d.ts.map +1 -0
- package/dist/theme/ThemeProvider.meta.js +45 -0
- package/dist/theme/buildScaleFromHex.meta.d.ts +60 -0
- package/dist/theme/buildScaleFromHex.meta.d.ts.map +1 -0
- package/dist/theme/buildScaleFromHex.meta.js +41 -0
- package/dist/theme/clamp.meta.d.ts +60 -0
- package/dist/theme/clamp.meta.d.ts.map +1 -0
- package/dist/theme/clamp.meta.js +40 -0
- package/dist/theme/getSystemMode.meta.d.ts +60 -0
- package/dist/theme/getSystemMode.meta.d.ts.map +1 -0
- package/dist/theme/getSystemMode.meta.js +36 -0
- package/dist/theme/useSgTheme.meta.d.ts +61 -0
- package/dist/theme/useSgTheme.meta.d.ts.map +1 -0
- package/dist/theme/useSgTheme.meta.js +109 -0
- package/dist/theme/useTheme.meta.d.ts +60 -0
- package/dist/theme/useTheme.meta.d.ts.map +1 -0
- package/dist/theme/useTheme.meta.js +43 -0
- package/dist/ui/AppShell.meta.d.ts +60 -0
- package/dist/ui/AppShell.meta.d.ts.map +1 -0
- package/dist/ui/AppShell.meta.js +45 -0
- package/package.json +3 -3
|
@@ -0,0 +1,857 @@
|
|
|
1
|
+
{
|
|
2
|
+
"schemaVersion": "0.1",
|
|
3
|
+
"package": "@seedgrid/fe-theme",
|
|
4
|
+
"packageVersion": "0.3.0",
|
|
5
|
+
"components": [
|
|
6
|
+
{
|
|
7
|
+
"componentId": "layout.app-shell",
|
|
8
|
+
"exportName": "AppShell",
|
|
9
|
+
"sgMeta": {
|
|
10
|
+
"version": "0.1",
|
|
11
|
+
"componentId": "layout.app-shell",
|
|
12
|
+
"package": "@seedgrid/fe-theme",
|
|
13
|
+
"exportName": "AppShell",
|
|
14
|
+
"slug": "app-shell",
|
|
15
|
+
"displayName": "AppShell",
|
|
16
|
+
"category": "layout",
|
|
17
|
+
"subcategory": "shell",
|
|
18
|
+
"description": "Shell de aplicacao baseado no tema legado, com area de navegacao lateral, header opcional e superficie principal.",
|
|
19
|
+
"tags": [
|
|
20
|
+
"layout",
|
|
21
|
+
"shell",
|
|
22
|
+
"app",
|
|
23
|
+
"navigation",
|
|
24
|
+
"legacy-theme"
|
|
25
|
+
],
|
|
26
|
+
"capabilities": [
|
|
27
|
+
"sidebar-layout",
|
|
28
|
+
"header-slot",
|
|
29
|
+
"themed-surface",
|
|
30
|
+
"legacy-theme-aware"
|
|
31
|
+
],
|
|
32
|
+
"fieldSemantics": [
|
|
33
|
+
"appShell",
|
|
34
|
+
"navigationLayout",
|
|
35
|
+
"pageFrame"
|
|
36
|
+
],
|
|
37
|
+
"props": [
|
|
38
|
+
{
|
|
39
|
+
"name": "children",
|
|
40
|
+
"type": "ReactNode",
|
|
41
|
+
"required": true,
|
|
42
|
+
"description": "Conteudo principal da aplicacao.",
|
|
43
|
+
"semanticRole": "data",
|
|
44
|
+
"bindable": false
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
"name": "nav",
|
|
48
|
+
"type": "ReactNode",
|
|
49
|
+
"description": "Conteudo da navegacao lateral.",
|
|
50
|
+
"semanticRole": "data",
|
|
51
|
+
"bindable": false
|
|
52
|
+
},
|
|
53
|
+
{
|
|
54
|
+
"name": "header",
|
|
55
|
+
"type": "ReactNode",
|
|
56
|
+
"description": "Conteudo opcional de cabecalho.",
|
|
57
|
+
"semanticRole": "data",
|
|
58
|
+
"bindable": false
|
|
59
|
+
}
|
|
60
|
+
],
|
|
61
|
+
"states": [
|
|
62
|
+
"default",
|
|
63
|
+
"with-nav",
|
|
64
|
+
"with-header"
|
|
65
|
+
],
|
|
66
|
+
"examples": [],
|
|
67
|
+
"showcase": {
|
|
68
|
+
"route": "/packages/fe-theme/app-shell",
|
|
69
|
+
"hasPlayground": false,
|
|
70
|
+
"hasPropsTable": false
|
|
71
|
+
},
|
|
72
|
+
"sdui": {
|
|
73
|
+
"rendererType": "layout.app-shell",
|
|
74
|
+
"acceptsDataBinding": true,
|
|
75
|
+
"defaultProps": {}
|
|
76
|
+
}
|
|
77
|
+
},
|
|
78
|
+
"aiHints": {
|
|
79
|
+
"version": "0.1",
|
|
80
|
+
"preferredUseCases": [
|
|
81
|
+
"Montar um shell simples de aplicacao com menu lateral e area principal.",
|
|
82
|
+
"Demonstrar o tema legado aplicado a uma estrutura de pagina completa."
|
|
83
|
+
],
|
|
84
|
+
"avoidUseCases": [
|
|
85
|
+
"Layouts altamente customizaveis com docking ou zonas complexas.",
|
|
86
|
+
"Novo shell baseado no sistema moderno de componentes, se existir alternativa mais atual."
|
|
87
|
+
],
|
|
88
|
+
"synonyms": [
|
|
89
|
+
"app shell",
|
|
90
|
+
"application shell",
|
|
91
|
+
"page frame",
|
|
92
|
+
"layout shell"
|
|
93
|
+
],
|
|
94
|
+
"relatedEntityFields": [
|
|
95
|
+
"nav",
|
|
96
|
+
"header",
|
|
97
|
+
"layout",
|
|
98
|
+
"shell"
|
|
99
|
+
],
|
|
100
|
+
"compositionHints": [
|
|
101
|
+
"Usar junto de ThemeProvider em contextos legados.",
|
|
102
|
+
"Migrar para estruturas mais modernas quando o shell deixar de depender do tema legado."
|
|
103
|
+
],
|
|
104
|
+
"rankingSignals": {
|
|
105
|
+
"freeText": 0.12,
|
|
106
|
+
"structuredChoice": 0.24,
|
|
107
|
+
"date": 0,
|
|
108
|
+
"number": 0,
|
|
109
|
+
"denseLayout": 0.9
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
},
|
|
113
|
+
{
|
|
114
|
+
"componentId": "provider.seed-theme",
|
|
115
|
+
"exportName": "SeedThemeProvider",
|
|
116
|
+
"sgMeta": {
|
|
117
|
+
"version": "0.1",
|
|
118
|
+
"componentId": "provider.seed-theme",
|
|
119
|
+
"package": "@seedgrid/fe-theme",
|
|
120
|
+
"exportName": "SeedThemeProvider",
|
|
121
|
+
"slug": "seed-theme-provider",
|
|
122
|
+
"displayName": "SeedThemeProvider",
|
|
123
|
+
"category": "provider",
|
|
124
|
+
"subcategory": "theme",
|
|
125
|
+
"description": "Provider de tema SeedGrid com suporte a modo claro/escuro, persistencia, deteccao de modo do sistema e customizacao de cores e raio de borda.",
|
|
126
|
+
"tags": [
|
|
127
|
+
"provider",
|
|
128
|
+
"theme",
|
|
129
|
+
"dark-mode",
|
|
130
|
+
"persistence",
|
|
131
|
+
"design-tokens"
|
|
132
|
+
],
|
|
133
|
+
"capabilities": [
|
|
134
|
+
"light-dark-mode",
|
|
135
|
+
"auto-detect-system",
|
|
136
|
+
"theme-persistence",
|
|
137
|
+
"css-variables",
|
|
138
|
+
"dynamic-theming"
|
|
139
|
+
],
|
|
140
|
+
"fieldSemantics": [
|
|
141
|
+
"themeProvider",
|
|
142
|
+
"designTokens",
|
|
143
|
+
"colorScheme"
|
|
144
|
+
],
|
|
145
|
+
"props": [
|
|
146
|
+
{
|
|
147
|
+
"name": "initialTheme",
|
|
148
|
+
"type": "SeedThemeInput",
|
|
149
|
+
"description": "Configuracao inicial do tema (seed, mode, radius, persistenceStrategy, persistMode).",
|
|
150
|
+
"semanticRole": "data",
|
|
151
|
+
"bindable": true
|
|
152
|
+
},
|
|
153
|
+
{
|
|
154
|
+
"name": "applyTo",
|
|
155
|
+
"type": "\"html\" | \"wrapper\"",
|
|
156
|
+
"default": "html",
|
|
157
|
+
"description": "Onde aplicar as variaveis CSS (html ou div wrapper).",
|
|
158
|
+
"semanticRole": "behavior",
|
|
159
|
+
"bindable": true
|
|
160
|
+
},
|
|
161
|
+
{
|
|
162
|
+
"name": "children",
|
|
163
|
+
"type": "ReactNode",
|
|
164
|
+
"required": true,
|
|
165
|
+
"description": "Arvore de componentes que consome o contexto de tema.",
|
|
166
|
+
"semanticRole": "data",
|
|
167
|
+
"bindable": false
|
|
168
|
+
}
|
|
169
|
+
],
|
|
170
|
+
"states": [
|
|
171
|
+
"light",
|
|
172
|
+
"dark",
|
|
173
|
+
"auto"
|
|
174
|
+
],
|
|
175
|
+
"examples": [
|
|
176
|
+
{
|
|
177
|
+
"id": "basic",
|
|
178
|
+
"title": "Tema basico com modo claro",
|
|
179
|
+
"file": "apps/showcase/src/app/components/providers/seed-theme-provider/samples/basic.tsx.sample",
|
|
180
|
+
"kind": "sample"
|
|
181
|
+
},
|
|
182
|
+
{
|
|
183
|
+
"id": "dark-mode",
|
|
184
|
+
"title": "Com modo escuro customizado",
|
|
185
|
+
"file": "apps/showcase/src/app/components/providers/seed-theme-provider/samples/dark-mode.tsx.sample",
|
|
186
|
+
"kind": "sample"
|
|
187
|
+
},
|
|
188
|
+
{
|
|
189
|
+
"id": "auto-detect",
|
|
190
|
+
"title": "Auto-deteccao do modo do sistema",
|
|
191
|
+
"file": "apps/showcase/src/app/components/providers/seed-theme-provider/samples/auto-detect.tsx.sample",
|
|
192
|
+
"kind": "sample"
|
|
193
|
+
},
|
|
194
|
+
{
|
|
195
|
+
"id": "theme-switcher",
|
|
196
|
+
"title": "Seletor dinamico de tema",
|
|
197
|
+
"file": "apps/showcase/src/app/components/providers/seed-theme-provider/samples/theme-switcher.tsx.sample",
|
|
198
|
+
"kind": "sample"
|
|
199
|
+
}
|
|
200
|
+
],
|
|
201
|
+
"showcase": {
|
|
202
|
+
"route": "/components/providers/seed-theme-provider",
|
|
203
|
+
"hasPlayground": true,
|
|
204
|
+
"hasPropsTable": true
|
|
205
|
+
},
|
|
206
|
+
"sdui": {
|
|
207
|
+
"rendererType": "provider.seed-theme",
|
|
208
|
+
"acceptsDataBinding": true,
|
|
209
|
+
"defaultProps": {
|
|
210
|
+
"applyTo": "html"
|
|
211
|
+
}
|
|
212
|
+
}
|
|
213
|
+
},
|
|
214
|
+
"aiHints": {
|
|
215
|
+
"version": "0.1",
|
|
216
|
+
"preferredUseCases": [
|
|
217
|
+
"Aplicar tema SeedGrid a toda a aplicacao com variaveis CSS.",
|
|
218
|
+
"Suportar modo claro/escuro com persistencia de preferencia.",
|
|
219
|
+
"Auto-detectar preferencia do usuario a partir do sistema operacional.",
|
|
220
|
+
"Customizar cores e raio de borda dinamicamente."
|
|
221
|
+
],
|
|
222
|
+
"avoidUseCases": [
|
|
223
|
+
"Apenas trocar cores de componentes individuais; use CSS direto.",
|
|
224
|
+
"Tema nao-SeedGrid; considere solucoes de terceiros (next-themes, etc)."
|
|
225
|
+
],
|
|
226
|
+
"synonyms": [
|
|
227
|
+
"theme provider",
|
|
228
|
+
"seed theme",
|
|
229
|
+
"design token provider"
|
|
230
|
+
],
|
|
231
|
+
"relatedEntityFields": [
|
|
232
|
+
"theme",
|
|
233
|
+
"mode",
|
|
234
|
+
"colors",
|
|
235
|
+
"darkMode"
|
|
236
|
+
],
|
|
237
|
+
"compositionHints": [
|
|
238
|
+
"Posicionar no topo da arvore React para afetar todos os componentes.",
|
|
239
|
+
"Combinar com useSgTheme() para acessar contexto e alterar tema.",
|
|
240
|
+
"Usar com SgEnvironmentProvider para persistencia coordenada."
|
|
241
|
+
],
|
|
242
|
+
"rankingSignals": {
|
|
243
|
+
"freeText": 0.7,
|
|
244
|
+
"structuredChoice": 0.9,
|
|
245
|
+
"date": 0,
|
|
246
|
+
"number": 0.3,
|
|
247
|
+
"denseLayout": 0.8
|
|
248
|
+
}
|
|
249
|
+
}
|
|
250
|
+
},
|
|
251
|
+
{
|
|
252
|
+
"componentId": "provider.theme-legacy",
|
|
253
|
+
"exportName": "ThemeProvider",
|
|
254
|
+
"sgMeta": {
|
|
255
|
+
"version": "0.1",
|
|
256
|
+
"componentId": "provider.theme-legacy",
|
|
257
|
+
"package": "@seedgrid/fe-theme",
|
|
258
|
+
"exportName": "ThemeProvider",
|
|
259
|
+
"slug": "theme-provider",
|
|
260
|
+
"displayName": "ThemeProvider",
|
|
261
|
+
"category": "provider",
|
|
262
|
+
"subcategory": "theme-legacy",
|
|
263
|
+
"description": "Provider legado de tema para compatibilidade retroativa, aplicando tokens CSS e expondo contexto simplificado de tema.",
|
|
264
|
+
"tags": [
|
|
265
|
+
"provider",
|
|
266
|
+
"theme",
|
|
267
|
+
"legacy",
|
|
268
|
+
"compatibility"
|
|
269
|
+
],
|
|
270
|
+
"capabilities": [
|
|
271
|
+
"legacy-theme-context",
|
|
272
|
+
"css-vars",
|
|
273
|
+
"compat-layer"
|
|
274
|
+
],
|
|
275
|
+
"fieldSemantics": [
|
|
276
|
+
"legacyThemeProvider",
|
|
277
|
+
"themeContext",
|
|
278
|
+
"compatibilityLayer"
|
|
279
|
+
],
|
|
280
|
+
"props": [
|
|
281
|
+
{
|
|
282
|
+
"name": "theme",
|
|
283
|
+
"type": "Partial<SeedGridThemeConfig>",
|
|
284
|
+
"description": "Configuracao parcial do tema legado.",
|
|
285
|
+
"semanticRole": "data",
|
|
286
|
+
"bindable": true
|
|
287
|
+
},
|
|
288
|
+
{
|
|
289
|
+
"name": "children",
|
|
290
|
+
"type": "ReactNode",
|
|
291
|
+
"required": true,
|
|
292
|
+
"description": "Arvore de componentes envolvida pelo provider.",
|
|
293
|
+
"semanticRole": "data",
|
|
294
|
+
"bindable": false
|
|
295
|
+
}
|
|
296
|
+
],
|
|
297
|
+
"states": [
|
|
298
|
+
"default",
|
|
299
|
+
"legacy-theme-applied"
|
|
300
|
+
],
|
|
301
|
+
"examples": [],
|
|
302
|
+
"showcase": {
|
|
303
|
+
"route": "/packages/fe-theme/theme-provider",
|
|
304
|
+
"hasPlayground": false,
|
|
305
|
+
"hasPropsTable": false
|
|
306
|
+
},
|
|
307
|
+
"sdui": {
|
|
308
|
+
"rendererType": "provider.theme-legacy",
|
|
309
|
+
"acceptsDataBinding": true,
|
|
310
|
+
"defaultProps": {
|
|
311
|
+
"theme": {}
|
|
312
|
+
}
|
|
313
|
+
}
|
|
314
|
+
},
|
|
315
|
+
"aiHints": {
|
|
316
|
+
"version": "0.1",
|
|
317
|
+
"preferredUseCases": [
|
|
318
|
+
"Manter compatibilidade com consumidores antigos do sistema de tema.",
|
|
319
|
+
"Aplicar configuracao de tema simplificada em arvores legadas.",
|
|
320
|
+
"Servir como camada de transicao entre ThemeProvider e SeedThemeProvider."
|
|
321
|
+
],
|
|
322
|
+
"avoidUseCases": [
|
|
323
|
+
"Novas implementacoes de tema; nesses casos prefira SeedThemeProvider.",
|
|
324
|
+
"Acesso ao contexto moderno de tokens; nesses casos prefira useSgTheme."
|
|
325
|
+
],
|
|
326
|
+
"synonyms": [
|
|
327
|
+
"legacy theme provider",
|
|
328
|
+
"theme provider compatibility",
|
|
329
|
+
"old theme provider"
|
|
330
|
+
],
|
|
331
|
+
"relatedEntityFields": [
|
|
332
|
+
"theme",
|
|
333
|
+
"legacyTheme",
|
|
334
|
+
"themeConfig"
|
|
335
|
+
],
|
|
336
|
+
"compositionHints": [
|
|
337
|
+
"Usar apenas em fluxos legados ou em migracao.",
|
|
338
|
+
"Planejar migracao gradual para SeedThemeProvider."
|
|
339
|
+
],
|
|
340
|
+
"rankingSignals": {
|
|
341
|
+
"freeText": 0.45,
|
|
342
|
+
"structuredChoice": 0.5,
|
|
343
|
+
"date": 0,
|
|
344
|
+
"number": 0,
|
|
345
|
+
"denseLayout": 0.54
|
|
346
|
+
}
|
|
347
|
+
}
|
|
348
|
+
},
|
|
349
|
+
{
|
|
350
|
+
"componentId": "utility.build-scale-from-hex",
|
|
351
|
+
"exportName": "buildScaleFromHex",
|
|
352
|
+
"sgMeta": {
|
|
353
|
+
"version": "0.1",
|
|
354
|
+
"componentId": "utility.build-scale-from-hex",
|
|
355
|
+
"package": "@seedgrid/fe-theme",
|
|
356
|
+
"exportName": "buildScaleFromHex",
|
|
357
|
+
"slug": "build-scale-from-hex",
|
|
358
|
+
"displayName": "buildScaleFromHex",
|
|
359
|
+
"category": "utility",
|
|
360
|
+
"subcategory": "color-scale",
|
|
361
|
+
"description": "Gera uma escala tonal 50..900 a partir de uma cor base hexadecimal e do modo resolvido.",
|
|
362
|
+
"tags": [
|
|
363
|
+
"utility",
|
|
364
|
+
"color",
|
|
365
|
+
"palette",
|
|
366
|
+
"theme"
|
|
367
|
+
],
|
|
368
|
+
"capabilities": [
|
|
369
|
+
"palette-generation",
|
|
370
|
+
"mode-aware-scale",
|
|
371
|
+
"hsl-harmonization"
|
|
372
|
+
],
|
|
373
|
+
"fieldSemantics": [
|
|
374
|
+
"colorScaleGeneration",
|
|
375
|
+
"themePalette"
|
|
376
|
+
],
|
|
377
|
+
"props": [
|
|
378
|
+
{
|
|
379
|
+
"name": "baseHex",
|
|
380
|
+
"type": "string",
|
|
381
|
+
"required": true,
|
|
382
|
+
"description": "Cor base hexadecimal.",
|
|
383
|
+
"semanticRole": "value",
|
|
384
|
+
"bindable": true
|
|
385
|
+
},
|
|
386
|
+
{
|
|
387
|
+
"name": "resolvedMode",
|
|
388
|
+
"type": "\"light\" | \"dark\"",
|
|
389
|
+
"required": true,
|
|
390
|
+
"description": "Modo usado para calcular a escala.",
|
|
391
|
+
"semanticRole": "behavior",
|
|
392
|
+
"bindable": true
|
|
393
|
+
},
|
|
394
|
+
{
|
|
395
|
+
"name": "opts.boostS",
|
|
396
|
+
"type": "number",
|
|
397
|
+
"description": "Ajuste opcional de saturacao.",
|
|
398
|
+
"semanticRole": "behavior",
|
|
399
|
+
"bindable": true
|
|
400
|
+
},
|
|
401
|
+
{
|
|
402
|
+
"name": "opts.biasL",
|
|
403
|
+
"type": "number",
|
|
404
|
+
"description": "Ajuste opcional de luminosidade.",
|
|
405
|
+
"semanticRole": "behavior",
|
|
406
|
+
"bindable": true
|
|
407
|
+
}
|
|
408
|
+
],
|
|
409
|
+
"states": [
|
|
410
|
+
"light",
|
|
411
|
+
"dark"
|
|
412
|
+
],
|
|
413
|
+
"examples": [],
|
|
414
|
+
"showcase": {
|
|
415
|
+
"route": "/packages/fe-theme/build-scale-from-hex",
|
|
416
|
+
"hasPlayground": false,
|
|
417
|
+
"hasPropsTable": false
|
|
418
|
+
},
|
|
419
|
+
"sdui": {
|
|
420
|
+
"rendererType": "utility.build-scale-from-hex",
|
|
421
|
+
"acceptsDataBinding": false,
|
|
422
|
+
"defaultProps": {
|
|
423
|
+
"opts": {}
|
|
424
|
+
}
|
|
425
|
+
}
|
|
426
|
+
},
|
|
427
|
+
"aiHints": {
|
|
428
|
+
"version": "0.1",
|
|
429
|
+
"preferredUseCases": [
|
|
430
|
+
"Gerar paletas tonais a partir de uma seed color.",
|
|
431
|
+
"Construir escalas harmonizadas para tema claro e escuro."
|
|
432
|
+
],
|
|
433
|
+
"avoidUseCases": [
|
|
434
|
+
"Conversao simples de uma unica cor sem necessidade de escala.",
|
|
435
|
+
"Escolha manual de tokens quando a paleta ja estiver pronta."
|
|
436
|
+
],
|
|
437
|
+
"synonyms": [
|
|
438
|
+
"build color scale",
|
|
439
|
+
"palette generator",
|
|
440
|
+
"hex scale"
|
|
441
|
+
],
|
|
442
|
+
"relatedEntityFields": [
|
|
443
|
+
"seed",
|
|
444
|
+
"palette",
|
|
445
|
+
"colorScale",
|
|
446
|
+
"mode"
|
|
447
|
+
],
|
|
448
|
+
"compositionHints": [
|
|
449
|
+
"Usar com generateThemeVars e outros utilitarios de tokenizacao."
|
|
450
|
+
],
|
|
451
|
+
"rankingSignals": {
|
|
452
|
+
"freeText": 0,
|
|
453
|
+
"structuredChoice": 0.2,
|
|
454
|
+
"date": 0,
|
|
455
|
+
"number": 0.54,
|
|
456
|
+
"denseLayout": 0.32
|
|
457
|
+
}
|
|
458
|
+
}
|
|
459
|
+
},
|
|
460
|
+
{
|
|
461
|
+
"componentId": "utility.clamp",
|
|
462
|
+
"exportName": "clamp",
|
|
463
|
+
"sgMeta": {
|
|
464
|
+
"version": "0.1",
|
|
465
|
+
"componentId": "utility.clamp",
|
|
466
|
+
"package": "@seedgrid/fe-theme",
|
|
467
|
+
"exportName": "clamp",
|
|
468
|
+
"slug": "clamp",
|
|
469
|
+
"displayName": "clamp",
|
|
470
|
+
"category": "utility",
|
|
471
|
+
"subcategory": "math",
|
|
472
|
+
"description": "Funcao utilitaria para limitar um numero entre minimo e maximo.",
|
|
473
|
+
"tags": [
|
|
474
|
+
"utility",
|
|
475
|
+
"math",
|
|
476
|
+
"range"
|
|
477
|
+
],
|
|
478
|
+
"capabilities": [
|
|
479
|
+
"numeric-clamp",
|
|
480
|
+
"value-bounding"
|
|
481
|
+
],
|
|
482
|
+
"fieldSemantics": [
|
|
483
|
+
"rangeConstraint",
|
|
484
|
+
"numericClamp"
|
|
485
|
+
],
|
|
486
|
+
"props": [
|
|
487
|
+
{
|
|
488
|
+
"name": "n",
|
|
489
|
+
"type": "number",
|
|
490
|
+
"required": true,
|
|
491
|
+
"description": "Valor a limitar.",
|
|
492
|
+
"semanticRole": "value",
|
|
493
|
+
"bindable": true
|
|
494
|
+
},
|
|
495
|
+
{
|
|
496
|
+
"name": "a",
|
|
497
|
+
"type": "number",
|
|
498
|
+
"required": true,
|
|
499
|
+
"description": "Limite minimo.",
|
|
500
|
+
"semanticRole": "validation",
|
|
501
|
+
"bindable": true
|
|
502
|
+
},
|
|
503
|
+
{
|
|
504
|
+
"name": "b",
|
|
505
|
+
"type": "number",
|
|
506
|
+
"required": true,
|
|
507
|
+
"description": "Limite maximo.",
|
|
508
|
+
"semanticRole": "validation",
|
|
509
|
+
"bindable": true
|
|
510
|
+
}
|
|
511
|
+
],
|
|
512
|
+
"states": [],
|
|
513
|
+
"examples": [],
|
|
514
|
+
"showcase": {
|
|
515
|
+
"route": "/packages/fe-theme/clamp",
|
|
516
|
+
"hasPlayground": false,
|
|
517
|
+
"hasPropsTable": false
|
|
518
|
+
},
|
|
519
|
+
"sdui": {
|
|
520
|
+
"rendererType": "utility.clamp",
|
|
521
|
+
"acceptsDataBinding": false,
|
|
522
|
+
"defaultProps": {}
|
|
523
|
+
}
|
|
524
|
+
},
|
|
525
|
+
"aiHints": {
|
|
526
|
+
"version": "0.1",
|
|
527
|
+
"preferredUseCases": [
|
|
528
|
+
"Limitar valores numericos em utilitarios de tema e cor.",
|
|
529
|
+
"Garantir que saturacao, luminosidade ou canais RGB fiquem dentro do intervalo valido."
|
|
530
|
+
],
|
|
531
|
+
"avoidUseCases": [
|
|
532
|
+
"Validacao complexa de dominio ou regras de negocio.",
|
|
533
|
+
"Fluxos de interface onde um input especializado seria mais apropriado."
|
|
534
|
+
],
|
|
535
|
+
"synonyms": [
|
|
536
|
+
"clamp",
|
|
537
|
+
"bound number",
|
|
538
|
+
"limit value"
|
|
539
|
+
],
|
|
540
|
+
"relatedEntityFields": [
|
|
541
|
+
"min",
|
|
542
|
+
"max",
|
|
543
|
+
"value"
|
|
544
|
+
],
|
|
545
|
+
"compositionHints": [
|
|
546
|
+
"Usar em helpers de cor e tokenizacao quando for preciso manter valores em faixas validas."
|
|
547
|
+
],
|
|
548
|
+
"rankingSignals": {
|
|
549
|
+
"freeText": 0,
|
|
550
|
+
"structuredChoice": 0,
|
|
551
|
+
"date": 0,
|
|
552
|
+
"number": 0.86,
|
|
553
|
+
"denseLayout": 0.15
|
|
554
|
+
}
|
|
555
|
+
}
|
|
556
|
+
},
|
|
557
|
+
{
|
|
558
|
+
"componentId": "utility.get-system-mode",
|
|
559
|
+
"exportName": "getSystemMode",
|
|
560
|
+
"sgMeta": {
|
|
561
|
+
"version": "0.1",
|
|
562
|
+
"componentId": "utility.get-system-mode",
|
|
563
|
+
"package": "@seedgrid/fe-theme",
|
|
564
|
+
"exportName": "getSystemMode",
|
|
565
|
+
"slug": "get-system-mode",
|
|
566
|
+
"displayName": "getSystemMode",
|
|
567
|
+
"category": "utility",
|
|
568
|
+
"subcategory": "system-mode",
|
|
569
|
+
"description": "Resolve o modo claro ou escuro com base na preferencia do sistema operacional no browser.",
|
|
570
|
+
"tags": [
|
|
571
|
+
"utility",
|
|
572
|
+
"theme",
|
|
573
|
+
"dark-mode",
|
|
574
|
+
"system-preference"
|
|
575
|
+
],
|
|
576
|
+
"capabilities": [
|
|
577
|
+
"prefers-color-scheme",
|
|
578
|
+
"light-dark-resolution",
|
|
579
|
+
"browser-aware"
|
|
580
|
+
],
|
|
581
|
+
"fieldSemantics": [
|
|
582
|
+
"systemModeDetection",
|
|
583
|
+
"preferredColorScheme"
|
|
584
|
+
],
|
|
585
|
+
"props": [],
|
|
586
|
+
"states": [
|
|
587
|
+
"light",
|
|
588
|
+
"dark"
|
|
589
|
+
],
|
|
590
|
+
"examples": [],
|
|
591
|
+
"showcase": {
|
|
592
|
+
"route": "/packages/fe-theme/get-system-mode",
|
|
593
|
+
"hasPlayground": false,
|
|
594
|
+
"hasPropsTable": false
|
|
595
|
+
},
|
|
596
|
+
"sdui": {
|
|
597
|
+
"rendererType": "utility.get-system-mode",
|
|
598
|
+
"acceptsDataBinding": false,
|
|
599
|
+
"defaultProps": {}
|
|
600
|
+
}
|
|
601
|
+
},
|
|
602
|
+
"aiHints": {
|
|
603
|
+
"version": "0.1",
|
|
604
|
+
"preferredUseCases": [
|
|
605
|
+
"Detectar preferencia inicial de claro ou escuro no cliente.",
|
|
606
|
+
"Apoiar modos automaticos de tema baseados em prefers-color-scheme."
|
|
607
|
+
],
|
|
608
|
+
"avoidUseCases": [
|
|
609
|
+
"Persistencia da escolha do usuario; isso deve ser tratado por provider ou storage.",
|
|
610
|
+
"Uso em ambiente puramente server-side como fonte definitiva de tema."
|
|
611
|
+
],
|
|
612
|
+
"synonyms": [
|
|
613
|
+
"system mode",
|
|
614
|
+
"prefers color scheme",
|
|
615
|
+
"detect dark mode"
|
|
616
|
+
],
|
|
617
|
+
"relatedEntityFields": [
|
|
618
|
+
"mode",
|
|
619
|
+
"systemMode",
|
|
620
|
+
"colorScheme"
|
|
621
|
+
],
|
|
622
|
+
"compositionHints": [
|
|
623
|
+
"Usar com SeedThemeProvider quando o modo auto precisar de fallback para o sistema."
|
|
624
|
+
],
|
|
625
|
+
"rankingSignals": {
|
|
626
|
+
"freeText": 0.2,
|
|
627
|
+
"structuredChoice": 0.36,
|
|
628
|
+
"date": 0,
|
|
629
|
+
"number": 0,
|
|
630
|
+
"denseLayout": 0.22
|
|
631
|
+
}
|
|
632
|
+
}
|
|
633
|
+
},
|
|
634
|
+
{
|
|
635
|
+
"componentId": "hook.use-sg-theme",
|
|
636
|
+
"exportName": "useSgTheme",
|
|
637
|
+
"sgMeta": {
|
|
638
|
+
"version": "0.1",
|
|
639
|
+
"componentId": "hook.use-sg-theme",
|
|
640
|
+
"package": "@seedgrid/fe-theme",
|
|
641
|
+
"exportName": "useSgTheme",
|
|
642
|
+
"slug": "use-sg-theme",
|
|
643
|
+
"displayName": "useSgTheme",
|
|
644
|
+
"category": "hook",
|
|
645
|
+
"subcategory": "theme",
|
|
646
|
+
"description": "Hook para acessar contexto de tema. Fornece variaveis CSS, modo atual, funcoes para alternar tema e modo.",
|
|
647
|
+
"tags": [
|
|
648
|
+
"hook",
|
|
649
|
+
"theme",
|
|
650
|
+
"design-tokens",
|
|
651
|
+
"context"
|
|
652
|
+
],
|
|
653
|
+
"capabilities": [
|
|
654
|
+
"theme-access",
|
|
655
|
+
"mode-toggling",
|
|
656
|
+
"css-variables"
|
|
657
|
+
],
|
|
658
|
+
"fieldSemantics": [
|
|
659
|
+
"themeContext",
|
|
660
|
+
"designTokens",
|
|
661
|
+
"colorScheme"
|
|
662
|
+
],
|
|
663
|
+
"props": [
|
|
664
|
+
{
|
|
665
|
+
"name": "returns.vars",
|
|
666
|
+
"type": "Record<string, string>",
|
|
667
|
+
"description": "Dicionario de variaveis CSS atuais (cores, raios, etc).",
|
|
668
|
+
"semanticRole": "data",
|
|
669
|
+
"bindable": false
|
|
670
|
+
},
|
|
671
|
+
{
|
|
672
|
+
"name": "returns.setTheme",
|
|
673
|
+
"type": "(next: Partial<SeedThemeInput>) => void",
|
|
674
|
+
"description": "Funcao para alterar tema (seed, mode, radius).",
|
|
675
|
+
"semanticRole": "event",
|
|
676
|
+
"bindable": false
|
|
677
|
+
},
|
|
678
|
+
{
|
|
679
|
+
"name": "returns.setMode",
|
|
680
|
+
"type": "(m: 'light' | 'dark') => void",
|
|
681
|
+
"description": "Funcao para alternar modo claro/escuro.",
|
|
682
|
+
"semanticRole": "event",
|
|
683
|
+
"bindable": false
|
|
684
|
+
},
|
|
685
|
+
{
|
|
686
|
+
"name": "returns.currentMode",
|
|
687
|
+
"type": "'light' | 'dark'",
|
|
688
|
+
"description": "Modo atual normalizado (sem 'auto').",
|
|
689
|
+
"semanticRole": "data",
|
|
690
|
+
"bindable": true
|
|
691
|
+
},
|
|
692
|
+
{
|
|
693
|
+
"name": "returns.currentTheme",
|
|
694
|
+
"type": "{ seed: string; mode?: Mode; radius?: string }",
|
|
695
|
+
"description": "Tema atual (seed, mode, radius).",
|
|
696
|
+
"semanticRole": "data",
|
|
697
|
+
"bindable": false
|
|
698
|
+
}
|
|
699
|
+
],
|
|
700
|
+
"states": [
|
|
701
|
+
"light",
|
|
702
|
+
"dark"
|
|
703
|
+
],
|
|
704
|
+
"examples": [
|
|
705
|
+
{
|
|
706
|
+
"id": "basic",
|
|
707
|
+
"title": "Acessar tema atual",
|
|
708
|
+
"file": "apps/showcase/src/app/components/hooks/use-sg-theme/samples/basic.tsx.sample",
|
|
709
|
+
"kind": "sample"
|
|
710
|
+
},
|
|
711
|
+
{
|
|
712
|
+
"id": "theme-switcher",
|
|
713
|
+
"title": "Criar seletor de tema",
|
|
714
|
+
"file": "apps/showcase/src/app/components/hooks/use-sg-theme/samples/theme-switcher.tsx.sample",
|
|
715
|
+
"kind": "sample"
|
|
716
|
+
},
|
|
717
|
+
{
|
|
718
|
+
"id": "dark-mode-toggle",
|
|
719
|
+
"title": "Toggle claro/escuro",
|
|
720
|
+
"file": "apps/showcase/src/app/components/hooks/use-sg-theme/samples/dark-mode-toggle.tsx.sample",
|
|
721
|
+
"kind": "sample"
|
|
722
|
+
}
|
|
723
|
+
],
|
|
724
|
+
"showcase": {
|
|
725
|
+
"route": "/components/hooks/use-sg-theme",
|
|
726
|
+
"hasPlayground": true,
|
|
727
|
+
"hasPropsTable": true
|
|
728
|
+
},
|
|
729
|
+
"sdui": {
|
|
730
|
+
"rendererType": "hook.use-sg-theme",
|
|
731
|
+
"acceptsDataBinding": false,
|
|
732
|
+
"defaultProps": {}
|
|
733
|
+
}
|
|
734
|
+
},
|
|
735
|
+
"aiHints": {
|
|
736
|
+
"version": "0.1",
|
|
737
|
+
"preferredUseCases": [
|
|
738
|
+
"Ler variaveis de tema para usar em componentes customizados.",
|
|
739
|
+
"Criar seletor de tema com lista de opcoes.",
|
|
740
|
+
"Implementar toggle de modo claro/escuro.",
|
|
741
|
+
"Reagir a mudancas de tema."
|
|
742
|
+
],
|
|
743
|
+
"avoidUseCases": [
|
|
744
|
+
"Usar fora de SeedThemeProvider; vai lancar erro.",
|
|
745
|
+
"Modificar diretamente o contexto; use setTheme e setMode."
|
|
746
|
+
],
|
|
747
|
+
"synonyms": [
|
|
748
|
+
"theme context",
|
|
749
|
+
"theme hook",
|
|
750
|
+
"design token access"
|
|
751
|
+
],
|
|
752
|
+
"relatedEntityFields": [
|
|
753
|
+
"theme",
|
|
754
|
+
"mode",
|
|
755
|
+
"darkMode",
|
|
756
|
+
"styling"
|
|
757
|
+
],
|
|
758
|
+
"compositionHints": [
|
|
759
|
+
"Usar dentro de SeedThemeProvider.",
|
|
760
|
+
"Combinar com button ou select para UI de mudanca de tema.",
|
|
761
|
+
"Acessar currentMode para renderizacao condicional (light vs dark)."
|
|
762
|
+
],
|
|
763
|
+
"rankingSignals": {
|
|
764
|
+
"freeText": 0.8,
|
|
765
|
+
"structuredChoice": 0.85,
|
|
766
|
+
"date": 0,
|
|
767
|
+
"number": 0.3,
|
|
768
|
+
"denseLayout": 0.7
|
|
769
|
+
}
|
|
770
|
+
}
|
|
771
|
+
},
|
|
772
|
+
{
|
|
773
|
+
"componentId": "hook.use-theme-legacy",
|
|
774
|
+
"exportName": "useTheme",
|
|
775
|
+
"sgMeta": {
|
|
776
|
+
"version": "0.1",
|
|
777
|
+
"componentId": "hook.use-theme-legacy",
|
|
778
|
+
"package": "@seedgrid/fe-theme",
|
|
779
|
+
"exportName": "useTheme",
|
|
780
|
+
"slug": "use-theme",
|
|
781
|
+
"displayName": "useTheme",
|
|
782
|
+
"category": "hook",
|
|
783
|
+
"subcategory": "theme-legacy",
|
|
784
|
+
"description": "Hook legado para consumir o contexto de tema antigo exposto por ThemeProvider.",
|
|
785
|
+
"tags": [
|
|
786
|
+
"hook",
|
|
787
|
+
"theme",
|
|
788
|
+
"legacy",
|
|
789
|
+
"compatibility"
|
|
790
|
+
],
|
|
791
|
+
"capabilities": [
|
|
792
|
+
"legacy-theme-read",
|
|
793
|
+
"theme-access"
|
|
794
|
+
],
|
|
795
|
+
"fieldSemantics": [
|
|
796
|
+
"legacyThemeHook",
|
|
797
|
+
"themeContextAccess"
|
|
798
|
+
],
|
|
799
|
+
"props": [
|
|
800
|
+
{
|
|
801
|
+
"name": "returns",
|
|
802
|
+
"type": "SeedGridThemeConfig",
|
|
803
|
+
"description": "Configuracao de tema legado atual.",
|
|
804
|
+
"semanticRole": "data",
|
|
805
|
+
"bindable": false
|
|
806
|
+
}
|
|
807
|
+
],
|
|
808
|
+
"states": [
|
|
809
|
+
"inside-provider"
|
|
810
|
+
],
|
|
811
|
+
"examples": [],
|
|
812
|
+
"showcase": {
|
|
813
|
+
"route": "/packages/fe-theme/use-theme",
|
|
814
|
+
"hasPlayground": false,
|
|
815
|
+
"hasPropsTable": false
|
|
816
|
+
},
|
|
817
|
+
"sdui": {
|
|
818
|
+
"rendererType": "hook.use-theme-legacy",
|
|
819
|
+
"acceptsDataBinding": false,
|
|
820
|
+
"defaultProps": {}
|
|
821
|
+
}
|
|
822
|
+
},
|
|
823
|
+
"aiHints": {
|
|
824
|
+
"version": "0.1",
|
|
825
|
+
"preferredUseCases": [
|
|
826
|
+
"Ler tema em consumidores antigos baseados em ThemeProvider.",
|
|
827
|
+
"Manter compatibilidade durante migracao do sistema de tema."
|
|
828
|
+
],
|
|
829
|
+
"avoidUseCases": [
|
|
830
|
+
"Novos componentes e fluxos de tema; nesses casos prefira useSgTheme.",
|
|
831
|
+
"Uso fora de ThemeProvider, onde o hook lancara erro."
|
|
832
|
+
],
|
|
833
|
+
"synonyms": [
|
|
834
|
+
"legacy theme hook",
|
|
835
|
+
"use theme",
|
|
836
|
+
"theme compatibility hook"
|
|
837
|
+
],
|
|
838
|
+
"relatedEntityFields": [
|
|
839
|
+
"theme",
|
|
840
|
+
"legacyTheme",
|
|
841
|
+
"colors"
|
|
842
|
+
],
|
|
843
|
+
"compositionHints": [
|
|
844
|
+
"Usar apenas com ThemeProvider.",
|
|
845
|
+
"Migrar gradualmente para useSgTheme quando possivel."
|
|
846
|
+
],
|
|
847
|
+
"rankingSignals": {
|
|
848
|
+
"freeText": 0.42,
|
|
849
|
+
"structuredChoice": 0.46,
|
|
850
|
+
"date": 0,
|
|
851
|
+
"number": 0,
|
|
852
|
+
"denseLayout": 0.45
|
|
853
|
+
}
|
|
854
|
+
}
|
|
855
|
+
}
|
|
856
|
+
]
|
|
857
|
+
}
|