@seedgrid/fe-theme 2026.4.18 → 2026.4.19
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 +271 -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 +98 -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 +104 -0
- package/package.json +3 -3
|
@@ -0,0 +1,271 @@
|
|
|
1
|
+
{
|
|
2
|
+
"schemaVersion": "0.1",
|
|
3
|
+
"package": "@seedgrid/fe-theme",
|
|
4
|
+
"packageVersion": "0.3.0",
|
|
5
|
+
"components": [
|
|
6
|
+
{
|
|
7
|
+
"componentId": "provider.seed-theme",
|
|
8
|
+
"exportName": "SeedThemeProvider",
|
|
9
|
+
"sgMeta": {
|
|
10
|
+
"version": "0.1",
|
|
11
|
+
"componentId": "provider.seed-theme",
|
|
12
|
+
"package": "@seedgrid/fe-theme",
|
|
13
|
+
"exportName": "SeedThemeProvider",
|
|
14
|
+
"slug": "seed-theme-provider",
|
|
15
|
+
"displayName": "SeedThemeProvider",
|
|
16
|
+
"category": "provider",
|
|
17
|
+
"subcategory": "theme",
|
|
18
|
+
"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.",
|
|
19
|
+
"tags": [
|
|
20
|
+
"provider",
|
|
21
|
+
"theme",
|
|
22
|
+
"dark-mode",
|
|
23
|
+
"persistence",
|
|
24
|
+
"design-tokens"
|
|
25
|
+
],
|
|
26
|
+
"capabilities": [
|
|
27
|
+
"light-dark-mode",
|
|
28
|
+
"auto-detect-system",
|
|
29
|
+
"theme-persistence",
|
|
30
|
+
"css-variables",
|
|
31
|
+
"dynamic-theming"
|
|
32
|
+
],
|
|
33
|
+
"fieldSemantics": [
|
|
34
|
+
"themeProvider",
|
|
35
|
+
"designTokens",
|
|
36
|
+
"colorScheme"
|
|
37
|
+
],
|
|
38
|
+
"props": [
|
|
39
|
+
{
|
|
40
|
+
"name": "initialTheme",
|
|
41
|
+
"type": "SeedThemeInput",
|
|
42
|
+
"description": "Configuracao inicial do tema (seed, mode, radius, persistenceStrategy, persistMode).",
|
|
43
|
+
"semanticRole": "data",
|
|
44
|
+
"bindable": true
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
"name": "applyTo",
|
|
48
|
+
"type": "\"html\" | \"wrapper\"",
|
|
49
|
+
"default": "html",
|
|
50
|
+
"description": "Onde aplicar as variaveis CSS (html ou div wrapper).",
|
|
51
|
+
"semanticRole": "behavior",
|
|
52
|
+
"bindable": true
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
"name": "children",
|
|
56
|
+
"type": "ReactNode",
|
|
57
|
+
"required": true,
|
|
58
|
+
"description": "Arvore de componentes que consome o contexto de tema.",
|
|
59
|
+
"semanticRole": "data",
|
|
60
|
+
"bindable": false
|
|
61
|
+
}
|
|
62
|
+
],
|
|
63
|
+
"states": [
|
|
64
|
+
"light",
|
|
65
|
+
"dark",
|
|
66
|
+
"auto"
|
|
67
|
+
],
|
|
68
|
+
"examples": [
|
|
69
|
+
{
|
|
70
|
+
"id": "basic",
|
|
71
|
+
"title": "Tema basico com modo claro",
|
|
72
|
+
"file": "apps/showcase/src/app/components/providers/seed-theme-provider/samples/basic.tsx.sample",
|
|
73
|
+
"kind": "sample"
|
|
74
|
+
},
|
|
75
|
+
{
|
|
76
|
+
"id": "dark-mode",
|
|
77
|
+
"title": "Com modo escuro customizado",
|
|
78
|
+
"file": "apps/showcase/src/app/components/providers/seed-theme-provider/samples/dark-mode.tsx.sample",
|
|
79
|
+
"kind": "sample"
|
|
80
|
+
},
|
|
81
|
+
{
|
|
82
|
+
"id": "auto-detect",
|
|
83
|
+
"title": "Auto-deteccao do modo do sistema",
|
|
84
|
+
"file": "apps/showcase/src/app/components/providers/seed-theme-provider/samples/auto-detect.tsx.sample",
|
|
85
|
+
"kind": "sample"
|
|
86
|
+
},
|
|
87
|
+
{
|
|
88
|
+
"id": "theme-switcher",
|
|
89
|
+
"title": "Seletor dinamico de tema",
|
|
90
|
+
"file": "apps/showcase/src/app/components/providers/seed-theme-provider/samples/theme-switcher.tsx.sample",
|
|
91
|
+
"kind": "sample"
|
|
92
|
+
}
|
|
93
|
+
],
|
|
94
|
+
"showcase": {
|
|
95
|
+
"route": "/components/providers/seed-theme-provider",
|
|
96
|
+
"hasPlayground": true,
|
|
97
|
+
"hasPropsTable": true
|
|
98
|
+
}
|
|
99
|
+
},
|
|
100
|
+
"aiHints": {
|
|
101
|
+
"version": "0.1",
|
|
102
|
+
"preferredUseCases": [
|
|
103
|
+
"Aplicar tema SeedGrid a toda a aplicacao com variaveis CSS.",
|
|
104
|
+
"Suportar modo claro/escuro com persistencia de preferencia.",
|
|
105
|
+
"Auto-detectar preferencia do usuario a partir do sistema operacional.",
|
|
106
|
+
"Customizar cores e raio de borda dinamicamente."
|
|
107
|
+
],
|
|
108
|
+
"avoidUseCases": [
|
|
109
|
+
"Apenas trocar cores de componentes individuais; use CSS direto.",
|
|
110
|
+
"Tema nao-SeedGrid; considere solucoes de terceiros (next-themes, etc)."
|
|
111
|
+
],
|
|
112
|
+
"synonyms": [
|
|
113
|
+
"theme provider",
|
|
114
|
+
"seed theme",
|
|
115
|
+
"design token provider"
|
|
116
|
+
],
|
|
117
|
+
"relatedEntityFields": [
|
|
118
|
+
"theme",
|
|
119
|
+
"mode",
|
|
120
|
+
"colors",
|
|
121
|
+
"darkMode"
|
|
122
|
+
],
|
|
123
|
+
"compositionHints": [
|
|
124
|
+
"Posicionar no topo da arvore React para afetar todos os componentes.",
|
|
125
|
+
"Combinar com useSgTheme() para acessar contexto e alterar tema.",
|
|
126
|
+
"Usar com SgEnvironmentProvider para persistencia coordenada."
|
|
127
|
+
],
|
|
128
|
+
"rankingSignals": {
|
|
129
|
+
"freeText": 0.7,
|
|
130
|
+
"structuredChoice": 0.9,
|
|
131
|
+
"date": 0,
|
|
132
|
+
"number": 0.3,
|
|
133
|
+
"denseLayout": 0.8
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
},
|
|
137
|
+
{
|
|
138
|
+
"componentId": "hook.use-sg-theme",
|
|
139
|
+
"exportName": "useSgTheme",
|
|
140
|
+
"sgMeta": {
|
|
141
|
+
"version": "0.1",
|
|
142
|
+
"componentId": "hook.use-sg-theme",
|
|
143
|
+
"package": "@seedgrid/fe-theme",
|
|
144
|
+
"exportName": "useSgTheme",
|
|
145
|
+
"slug": "use-sg-theme",
|
|
146
|
+
"displayName": "useSgTheme",
|
|
147
|
+
"category": "hook",
|
|
148
|
+
"subcategory": "theme",
|
|
149
|
+
"description": "Hook para acessar contexto de tema. Fornece variaveis CSS, modo atual, funcoes para alternar tema e modo.",
|
|
150
|
+
"tags": [
|
|
151
|
+
"hook",
|
|
152
|
+
"theme",
|
|
153
|
+
"design-tokens",
|
|
154
|
+
"context"
|
|
155
|
+
],
|
|
156
|
+
"capabilities": [
|
|
157
|
+
"theme-access",
|
|
158
|
+
"mode-toggling",
|
|
159
|
+
"css-variables"
|
|
160
|
+
],
|
|
161
|
+
"fieldSemantics": [
|
|
162
|
+
"themeContext",
|
|
163
|
+
"designTokens",
|
|
164
|
+
"colorScheme"
|
|
165
|
+
],
|
|
166
|
+
"props": [
|
|
167
|
+
{
|
|
168
|
+
"name": "returns.vars",
|
|
169
|
+
"type": "Record<string, string>",
|
|
170
|
+
"description": "Dicionario de variaveis CSS atuais (cores, raios, etc).",
|
|
171
|
+
"semanticRole": "data",
|
|
172
|
+
"bindable": false
|
|
173
|
+
},
|
|
174
|
+
{
|
|
175
|
+
"name": "returns.setTheme",
|
|
176
|
+
"type": "(next: Partial<SeedThemeInput>) => void",
|
|
177
|
+
"description": "Funcao para alterar tema (seed, mode, radius).",
|
|
178
|
+
"semanticRole": "event",
|
|
179
|
+
"bindable": false
|
|
180
|
+
},
|
|
181
|
+
{
|
|
182
|
+
"name": "returns.setMode",
|
|
183
|
+
"type": "(m: 'light' | 'dark') => void",
|
|
184
|
+
"description": "Funcao para alternar modo claro/escuro.",
|
|
185
|
+
"semanticRole": "event",
|
|
186
|
+
"bindable": false
|
|
187
|
+
},
|
|
188
|
+
{
|
|
189
|
+
"name": "returns.currentMode",
|
|
190
|
+
"type": "'light' | 'dark'",
|
|
191
|
+
"description": "Modo atual normalizado (sem 'auto').",
|
|
192
|
+
"semanticRole": "data",
|
|
193
|
+
"bindable": true
|
|
194
|
+
},
|
|
195
|
+
{
|
|
196
|
+
"name": "returns.currentTheme",
|
|
197
|
+
"type": "{ seed: string; mode?: Mode; radius?: string }",
|
|
198
|
+
"description": "Tema atual (seed, mode, radius).",
|
|
199
|
+
"semanticRole": "data",
|
|
200
|
+
"bindable": false
|
|
201
|
+
}
|
|
202
|
+
],
|
|
203
|
+
"states": [
|
|
204
|
+
"light",
|
|
205
|
+
"dark"
|
|
206
|
+
],
|
|
207
|
+
"examples": [
|
|
208
|
+
{
|
|
209
|
+
"id": "basic",
|
|
210
|
+
"title": "Acessar tema atual",
|
|
211
|
+
"file": "apps/showcase/src/app/components/hooks/use-sg-theme/samples/basic.tsx.sample",
|
|
212
|
+
"kind": "sample"
|
|
213
|
+
},
|
|
214
|
+
{
|
|
215
|
+
"id": "theme-switcher",
|
|
216
|
+
"title": "Criar seletor de tema",
|
|
217
|
+
"file": "apps/showcase/src/app/components/hooks/use-sg-theme/samples/theme-switcher.tsx.sample",
|
|
218
|
+
"kind": "sample"
|
|
219
|
+
},
|
|
220
|
+
{
|
|
221
|
+
"id": "dark-mode-toggle",
|
|
222
|
+
"title": "Toggle claro/escuro",
|
|
223
|
+
"file": "apps/showcase/src/app/components/hooks/use-sg-theme/samples/dark-mode-toggle.tsx.sample",
|
|
224
|
+
"kind": "sample"
|
|
225
|
+
}
|
|
226
|
+
],
|
|
227
|
+
"showcase": {
|
|
228
|
+
"route": "/components/hooks/use-sg-theme",
|
|
229
|
+
"hasPlayground": true,
|
|
230
|
+
"hasPropsTable": true
|
|
231
|
+
}
|
|
232
|
+
},
|
|
233
|
+
"aiHints": {
|
|
234
|
+
"version": "0.1",
|
|
235
|
+
"preferredUseCases": [
|
|
236
|
+
"Ler variaveis de tema para usar em componentes customizados.",
|
|
237
|
+
"Criar seletor de tema com lista de opcoes.",
|
|
238
|
+
"Implementar toggle de modo claro/escuro.",
|
|
239
|
+
"Reagir a mudancas de tema."
|
|
240
|
+
],
|
|
241
|
+
"avoidUseCases": [
|
|
242
|
+
"Usar fora de SeedThemeProvider; vai lancar erro.",
|
|
243
|
+
"Modificar diretamente o contexto; use setTheme e setMode."
|
|
244
|
+
],
|
|
245
|
+
"synonyms": [
|
|
246
|
+
"theme context",
|
|
247
|
+
"theme hook",
|
|
248
|
+
"design token access"
|
|
249
|
+
],
|
|
250
|
+
"relatedEntityFields": [
|
|
251
|
+
"theme",
|
|
252
|
+
"mode",
|
|
253
|
+
"darkMode",
|
|
254
|
+
"styling"
|
|
255
|
+
],
|
|
256
|
+
"compositionHints": [
|
|
257
|
+
"Usar dentro de SeedThemeProvider.",
|
|
258
|
+
"Combinar com button ou select para UI de mudanca de tema.",
|
|
259
|
+
"Acessar currentMode para renderizacao condicional (light vs dark)."
|
|
260
|
+
],
|
|
261
|
+
"rankingSignals": {
|
|
262
|
+
"freeText": 0.8,
|
|
263
|
+
"structuredChoice": 0.85,
|
|
264
|
+
"date": 0,
|
|
265
|
+
"number": 0.3,
|
|
266
|
+
"denseLayout": 0.7
|
|
267
|
+
}
|
|
268
|
+
}
|
|
269
|
+
}
|
|
270
|
+
]
|
|
271
|
+
}
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
type SgMetaPropV0 = {
|
|
2
|
+
name: string;
|
|
3
|
+
type: string;
|
|
4
|
+
required?: boolean;
|
|
5
|
+
default?: unknown;
|
|
6
|
+
description?: string;
|
|
7
|
+
semanticRole?: "value" | "label" | "validation" | "behavior" | "appearance" | "event" | "data";
|
|
8
|
+
bindable?: boolean;
|
|
9
|
+
};
|
|
10
|
+
type SgMetaExampleV0 = {
|
|
11
|
+
id: string;
|
|
12
|
+
title: string;
|
|
13
|
+
file: string;
|
|
14
|
+
kind: "sample" | "playground";
|
|
15
|
+
};
|
|
16
|
+
type SgMetaV0 = {
|
|
17
|
+
version: "0.1";
|
|
18
|
+
componentId: string;
|
|
19
|
+
package: string;
|
|
20
|
+
exportName: string;
|
|
21
|
+
slug: string;
|
|
22
|
+
displayName: string;
|
|
23
|
+
category: string;
|
|
24
|
+
subcategory?: string;
|
|
25
|
+
description: string;
|
|
26
|
+
tags?: string[];
|
|
27
|
+
capabilities?: string[];
|
|
28
|
+
fieldSemantics?: string[];
|
|
29
|
+
props?: SgMetaPropV0[];
|
|
30
|
+
states?: string[];
|
|
31
|
+
examples?: SgMetaExampleV0[];
|
|
32
|
+
showcase?: {
|
|
33
|
+
route: string;
|
|
34
|
+
hasPlayground: boolean;
|
|
35
|
+
hasPropsTable: boolean;
|
|
36
|
+
};
|
|
37
|
+
sdui?: {
|
|
38
|
+
rendererType: string;
|
|
39
|
+
acceptsDataBinding?: boolean;
|
|
40
|
+
defaultProps?: Record<string, unknown>;
|
|
41
|
+
};
|
|
42
|
+
};
|
|
43
|
+
type SgAiHintsV0 = {
|
|
44
|
+
version: "0.1";
|
|
45
|
+
preferredUseCases: string[];
|
|
46
|
+
avoidUseCases?: string[];
|
|
47
|
+
synonyms?: string[];
|
|
48
|
+
relatedEntityFields?: string[];
|
|
49
|
+
compositionHints?: string[];
|
|
50
|
+
rankingSignals?: {
|
|
51
|
+
freeText?: number;
|
|
52
|
+
structuredChoice?: number;
|
|
53
|
+
date?: number;
|
|
54
|
+
number?: number;
|
|
55
|
+
denseLayout?: number;
|
|
56
|
+
};
|
|
57
|
+
};
|
|
58
|
+
export declare const sgMeta: SgMetaV0;
|
|
59
|
+
export declare const aiHints: SgAiHintsV0;
|
|
60
|
+
export {};
|
|
61
|
+
//# sourceMappingURL=SeedThemeProvider.meta.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SeedThemeProvider.meta.d.ts","sourceRoot":"","sources":["../../src/theme/SeedThemeProvider.meta.ts"],"names":[],"mappings":"AAAA,KAAK,YAAY,GAAG;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,YAAY,GAAG,UAAU,GAAG,YAAY,GAAG,OAAO,GAAG,MAAM,CAAC;IAC/F,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,KAAK,eAAe,GAAG;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,QAAQ,GAAG,YAAY,CAAC;CAC/B,CAAC;AAEF,KAAK,QAAQ,GAAG;IACd,OAAO,EAAE,KAAK,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,KAAK,CAAC,EAAE,YAAY,EAAE,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,QAAQ,CAAC,EAAE,eAAe,EAAE,CAAC;IAC7B,QAAQ,CAAC,EAAE;QACT,KAAK,EAAE,MAAM,CAAC;QACd,aAAa,EAAE,OAAO,CAAC;QACvB,aAAa,EAAE,OAAO,CAAC;KACxB,CAAC;IACF,IAAI,CAAC,EAAE;QACL,YAAY,EAAE,MAAM,CAAC;QACrB,kBAAkB,CAAC,EAAE,OAAO,CAAC;QAC7B,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;KACxC,CAAC;CACH,CAAC;AAEF,KAAK,WAAW,GAAG;IACjB,OAAO,EAAE,KAAK,CAAC;IACf,iBAAiB,EAAE,MAAM,EAAE,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC/B,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC5B,cAAc,CAAC,EAAE;QACf,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,gBAAgB,CAAC,EAAE,MAAM,CAAC;QAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,WAAW,CAAC,EAAE,MAAM,CAAC;KACtB,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,QAuEpB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,WA0BrB,CAAC"}
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
export const sgMeta = {
|
|
2
|
+
version: "0.1",
|
|
3
|
+
componentId: "provider.seed-theme",
|
|
4
|
+
package: "@seedgrid/fe-theme",
|
|
5
|
+
exportName: "SeedThemeProvider",
|
|
6
|
+
slug: "seed-theme-provider",
|
|
7
|
+
displayName: "SeedThemeProvider",
|
|
8
|
+
category: "provider",
|
|
9
|
+
subcategory: "theme",
|
|
10
|
+
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.",
|
|
11
|
+
tags: ["provider", "theme", "dark-mode", "persistence", "design-tokens"],
|
|
12
|
+
capabilities: ["light-dark-mode", "auto-detect-system", "theme-persistence", "css-variables", "dynamic-theming"],
|
|
13
|
+
fieldSemantics: ["themeProvider", "designTokens", "colorScheme"],
|
|
14
|
+
props: [
|
|
15
|
+
{
|
|
16
|
+
name: "initialTheme",
|
|
17
|
+
type: "SeedThemeInput",
|
|
18
|
+
description: "Configuracao inicial do tema (seed, mode, radius, persistenceStrategy, persistMode).",
|
|
19
|
+
semanticRole: "data",
|
|
20
|
+
bindable: true
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
name: "applyTo",
|
|
24
|
+
type: '"html" | "wrapper"',
|
|
25
|
+
default: "html",
|
|
26
|
+
description: "Onde aplicar as variaveis CSS (html ou div wrapper).",
|
|
27
|
+
semanticRole: "behavior",
|
|
28
|
+
bindable: true
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
name: "children",
|
|
32
|
+
type: "ReactNode",
|
|
33
|
+
required: true,
|
|
34
|
+
description: "Arvore de componentes que consome o contexto de tema.",
|
|
35
|
+
semanticRole: "data",
|
|
36
|
+
bindable: false
|
|
37
|
+
}
|
|
38
|
+
],
|
|
39
|
+
states: ["light", "dark", "auto"],
|
|
40
|
+
examples: [
|
|
41
|
+
{
|
|
42
|
+
id: "basic",
|
|
43
|
+
title: "Tema basico com modo claro",
|
|
44
|
+
file: "apps/showcase/src/app/components/providers/seed-theme-provider/samples/basic.tsx.sample",
|
|
45
|
+
kind: "sample"
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
id: "dark-mode",
|
|
49
|
+
title: "Com modo escuro customizado",
|
|
50
|
+
file: "apps/showcase/src/app/components/providers/seed-theme-provider/samples/dark-mode.tsx.sample",
|
|
51
|
+
kind: "sample"
|
|
52
|
+
},
|
|
53
|
+
{
|
|
54
|
+
id: "auto-detect",
|
|
55
|
+
title: "Auto-deteccao do modo do sistema",
|
|
56
|
+
file: "apps/showcase/src/app/components/providers/seed-theme-provider/samples/auto-detect.tsx.sample",
|
|
57
|
+
kind: "sample"
|
|
58
|
+
},
|
|
59
|
+
{
|
|
60
|
+
id: "theme-switcher",
|
|
61
|
+
title: "Seletor dinamico de tema",
|
|
62
|
+
file: "apps/showcase/src/app/components/providers/seed-theme-provider/samples/theme-switcher.tsx.sample",
|
|
63
|
+
kind: "sample"
|
|
64
|
+
}
|
|
65
|
+
],
|
|
66
|
+
showcase: {
|
|
67
|
+
route: "/components/providers/seed-theme-provider",
|
|
68
|
+
hasPlayground: true,
|
|
69
|
+
hasPropsTable: true
|
|
70
|
+
}
|
|
71
|
+
};
|
|
72
|
+
export const aiHints = {
|
|
73
|
+
version: "0.1",
|
|
74
|
+
preferredUseCases: [
|
|
75
|
+
"Aplicar tema SeedGrid a toda a aplicacao com variaveis CSS.",
|
|
76
|
+
"Suportar modo claro/escuro com persistencia de preferencia.",
|
|
77
|
+
"Auto-detectar preferencia do usuario a partir do sistema operacional.",
|
|
78
|
+
"Customizar cores e raio de borda dinamicamente."
|
|
79
|
+
],
|
|
80
|
+
avoidUseCases: [
|
|
81
|
+
"Apenas trocar cores de componentes individuais; use CSS direto.",
|
|
82
|
+
"Tema nao-SeedGrid; considere solucoes de terceiros (next-themes, etc)."
|
|
83
|
+
],
|
|
84
|
+
synonyms: ["theme provider", "seed theme", "design token provider"],
|
|
85
|
+
relatedEntityFields: ["theme", "mode", "colors", "darkMode"],
|
|
86
|
+
compositionHints: [
|
|
87
|
+
"Posicionar no topo da arvore React para afetar todos os componentes.",
|
|
88
|
+
"Combinar com useSgTheme() para acessar contexto e alterar tema.",
|
|
89
|
+
"Usar com SgEnvironmentProvider para persistencia coordenada."
|
|
90
|
+
],
|
|
91
|
+
rankingSignals: {
|
|
92
|
+
freeText: 0.7,
|
|
93
|
+
structuredChoice: 0.9,
|
|
94
|
+
date: 0,
|
|
95
|
+
number: 0.3,
|
|
96
|
+
denseLayout: 0.8
|
|
97
|
+
}
|
|
98
|
+
};
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
type SgMetaPropV0 = {
|
|
2
|
+
name: string;
|
|
3
|
+
type: string;
|
|
4
|
+
required?: boolean;
|
|
5
|
+
default?: unknown;
|
|
6
|
+
description?: string;
|
|
7
|
+
semanticRole?: "value" | "label" | "validation" | "behavior" | "appearance" | "event" | "data";
|
|
8
|
+
bindable?: boolean;
|
|
9
|
+
};
|
|
10
|
+
type SgMetaExampleV0 = {
|
|
11
|
+
id: string;
|
|
12
|
+
title: string;
|
|
13
|
+
file: string;
|
|
14
|
+
kind: "sample" | "playground";
|
|
15
|
+
};
|
|
16
|
+
type SgMetaV0 = {
|
|
17
|
+
version: "0.1";
|
|
18
|
+
componentId: string;
|
|
19
|
+
package: string;
|
|
20
|
+
exportName: string;
|
|
21
|
+
slug: string;
|
|
22
|
+
displayName: string;
|
|
23
|
+
category: string;
|
|
24
|
+
subcategory?: string;
|
|
25
|
+
description: string;
|
|
26
|
+
tags?: string[];
|
|
27
|
+
capabilities?: string[];
|
|
28
|
+
fieldSemantics?: string[];
|
|
29
|
+
props?: SgMetaPropV0[];
|
|
30
|
+
states?: string[];
|
|
31
|
+
examples?: SgMetaExampleV0[];
|
|
32
|
+
showcase?: {
|
|
33
|
+
route: string;
|
|
34
|
+
hasPlayground: boolean;
|
|
35
|
+
hasPropsTable: boolean;
|
|
36
|
+
};
|
|
37
|
+
sdui?: {
|
|
38
|
+
rendererType: string;
|
|
39
|
+
acceptsDataBinding?: boolean;
|
|
40
|
+
defaultProps?: Record<string, unknown>;
|
|
41
|
+
};
|
|
42
|
+
};
|
|
43
|
+
type SgAiHintsV0 = {
|
|
44
|
+
version: "0.1";
|
|
45
|
+
preferredUseCases: string[];
|
|
46
|
+
avoidUseCases?: string[];
|
|
47
|
+
synonyms?: string[];
|
|
48
|
+
relatedEntityFields?: string[];
|
|
49
|
+
compositionHints?: string[];
|
|
50
|
+
rankingSignals?: {
|
|
51
|
+
freeText?: number;
|
|
52
|
+
structuredChoice?: number;
|
|
53
|
+
date?: number;
|
|
54
|
+
number?: number;
|
|
55
|
+
denseLayout?: number;
|
|
56
|
+
};
|
|
57
|
+
};
|
|
58
|
+
export declare const sgMeta: SgMetaV0;
|
|
59
|
+
export declare const aiHints: SgAiHintsV0;
|
|
60
|
+
export {};
|
|
61
|
+
//# sourceMappingURL=useSgTheme.meta.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useSgTheme.meta.d.ts","sourceRoot":"","sources":["../../src/theme/useSgTheme.meta.ts"],"names":[],"mappings":"AAAA,KAAK,YAAY,GAAG;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,YAAY,GAAG,UAAU,GAAG,YAAY,GAAG,OAAO,GAAG,MAAM,CAAC;IAC/F,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,KAAK,eAAe,GAAG;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,QAAQ,GAAG,YAAY,CAAC;CAC/B,CAAC;AAEF,KAAK,QAAQ,GAAG;IACd,OAAO,EAAE,KAAK,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,KAAK,CAAC,EAAE,YAAY,EAAE,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,QAAQ,CAAC,EAAE,eAAe,EAAE,CAAC;IAC7B,QAAQ,CAAC,EAAE;QACT,KAAK,EAAE,MAAM,CAAC;QACd,aAAa,EAAE,OAAO,CAAC;QACvB,aAAa,EAAE,OAAO,CAAC;KACxB,CAAC;IACF,IAAI,CAAC,EAAE;QACL,YAAY,EAAE,MAAM,CAAC;QACrB,kBAAkB,CAAC,EAAE,OAAO,CAAC;QAC7B,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;KACxC,CAAC;CACH,CAAC;AAEF,KAAK,WAAW,GAAG;IACjB,OAAO,EAAE,KAAK,CAAC;IACf,iBAAiB,EAAE,MAAM,EAAE,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC/B,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC5B,cAAc,CAAC,EAAE;QACf,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,gBAAgB,CAAC,EAAE,MAAM,CAAC;QAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,WAAW,CAAC,EAAE,MAAM,CAAC;KACtB,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,QA6EpB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,WA0BrB,CAAC"}
|
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
export const sgMeta = {
|
|
2
|
+
version: "0.1",
|
|
3
|
+
componentId: "hook.use-sg-theme",
|
|
4
|
+
package: "@seedgrid/fe-theme",
|
|
5
|
+
exportName: "useSgTheme",
|
|
6
|
+
slug: "use-sg-theme",
|
|
7
|
+
displayName: "useSgTheme",
|
|
8
|
+
category: "hook",
|
|
9
|
+
subcategory: "theme",
|
|
10
|
+
description: "Hook para acessar contexto de tema. Fornece variaveis CSS, modo atual, funcoes para alternar tema e modo.",
|
|
11
|
+
tags: ["hook", "theme", "design-tokens", "context"],
|
|
12
|
+
capabilities: ["theme-access", "mode-toggling", "css-variables"],
|
|
13
|
+
fieldSemantics: ["themeContext", "designTokens", "colorScheme"],
|
|
14
|
+
props: [
|
|
15
|
+
{
|
|
16
|
+
name: "returns.vars",
|
|
17
|
+
type: "Record<string, string>",
|
|
18
|
+
description: "Dicionario de variaveis CSS atuais (cores, raios, etc).",
|
|
19
|
+
semanticRole: "data",
|
|
20
|
+
bindable: false
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
name: "returns.setTheme",
|
|
24
|
+
type: "(next: Partial<SeedThemeInput>) => void",
|
|
25
|
+
description: "Funcao para alterar tema (seed, mode, radius).",
|
|
26
|
+
semanticRole: "event",
|
|
27
|
+
bindable: false
|
|
28
|
+
},
|
|
29
|
+
{
|
|
30
|
+
name: "returns.setMode",
|
|
31
|
+
type: "(m: 'light' | 'dark') => void",
|
|
32
|
+
description: "Funcao para alternar modo claro/escuro.",
|
|
33
|
+
semanticRole: "event",
|
|
34
|
+
bindable: false
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
name: "returns.currentMode",
|
|
38
|
+
type: "'light' | 'dark'",
|
|
39
|
+
description: "Modo atual normalizado (sem 'auto').",
|
|
40
|
+
semanticRole: "data",
|
|
41
|
+
bindable: true
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
name: "returns.currentTheme",
|
|
45
|
+
type: "{ seed: string; mode?: Mode; radius?: string }",
|
|
46
|
+
description: "Tema atual (seed, mode, radius).",
|
|
47
|
+
semanticRole: "data",
|
|
48
|
+
bindable: false
|
|
49
|
+
}
|
|
50
|
+
],
|
|
51
|
+
states: ["light", "dark"],
|
|
52
|
+
examples: [
|
|
53
|
+
{
|
|
54
|
+
id: "basic",
|
|
55
|
+
title: "Acessar tema atual",
|
|
56
|
+
file: "apps/showcase/src/app/components/hooks/use-sg-theme/samples/basic.tsx.sample",
|
|
57
|
+
kind: "sample"
|
|
58
|
+
},
|
|
59
|
+
{
|
|
60
|
+
id: "theme-switcher",
|
|
61
|
+
title: "Criar seletor de tema",
|
|
62
|
+
file: "apps/showcase/src/app/components/hooks/use-sg-theme/samples/theme-switcher.tsx.sample",
|
|
63
|
+
kind: "sample"
|
|
64
|
+
},
|
|
65
|
+
{
|
|
66
|
+
id: "dark-mode-toggle",
|
|
67
|
+
title: "Toggle claro/escuro",
|
|
68
|
+
file: "apps/showcase/src/app/components/hooks/use-sg-theme/samples/dark-mode-toggle.tsx.sample",
|
|
69
|
+
kind: "sample"
|
|
70
|
+
}
|
|
71
|
+
],
|
|
72
|
+
showcase: {
|
|
73
|
+
route: "/components/hooks/use-sg-theme",
|
|
74
|
+
hasPlayground: true,
|
|
75
|
+
hasPropsTable: true
|
|
76
|
+
}
|
|
77
|
+
};
|
|
78
|
+
export const aiHints = {
|
|
79
|
+
version: "0.1",
|
|
80
|
+
preferredUseCases: [
|
|
81
|
+
"Ler variaveis de tema para usar em componentes customizados.",
|
|
82
|
+
"Criar seletor de tema com lista de opcoes.",
|
|
83
|
+
"Implementar toggle de modo claro/escuro.",
|
|
84
|
+
"Reagir a mudancas de tema."
|
|
85
|
+
],
|
|
86
|
+
avoidUseCases: [
|
|
87
|
+
"Usar fora de SeedThemeProvider; vai lancar erro.",
|
|
88
|
+
"Modificar diretamente o contexto; use setTheme e setMode."
|
|
89
|
+
],
|
|
90
|
+
synonyms: ["theme context", "theme hook", "design token access"],
|
|
91
|
+
relatedEntityFields: ["theme", "mode", "darkMode", "styling"],
|
|
92
|
+
compositionHints: [
|
|
93
|
+
"Usar dentro de SeedThemeProvider.",
|
|
94
|
+
"Combinar com button ou select para UI de mudanca de tema.",
|
|
95
|
+
"Acessar currentMode para renderizacao condicional (light vs dark)."
|
|
96
|
+
],
|
|
97
|
+
rankingSignals: {
|
|
98
|
+
freeText: 0.8,
|
|
99
|
+
structuredChoice: 0.85,
|
|
100
|
+
date: 0,
|
|
101
|
+
number: 0.3,
|
|
102
|
+
denseLayout: 0.7
|
|
103
|
+
}
|
|
104
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@seedgrid/fe-theme",
|
|
3
|
-
"version": "2026.4.
|
|
3
|
+
"version": "2026.4.19",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
"dist"
|
|
23
23
|
],
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"@seedgrid/fe-core": "2026.4.
|
|
25
|
+
"@seedgrid/fe-core": "2026.4.19"
|
|
26
26
|
},
|
|
27
27
|
"peerDependencies": {
|
|
28
28
|
"react": "^18.2.0 || ^19.0.0"
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
"fs-extra": "^11.2.0"
|
|
33
33
|
},
|
|
34
34
|
"scripts": {
|
|
35
|
-
"build": "tsc -p tsconfig.json && node ./scripts/copy-i18n.mjs",
|
|
35
|
+
"build": "tsc -p tsconfig.json && node ./scripts/copy-i18n.mjs && node ./scripts/build-ai-manifest.mjs",
|
|
36
36
|
"typecheck": "tsc -p tsconfig.json --noEmit"
|
|
37
37
|
}
|
|
38
38
|
}
|