flysoft-react-ui 0.1.2 → 0.1.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/dist/App.d.ts +4 -0
- package/dist/App.d.ts.map +1 -0
- package/dist/App.js +7 -0
- package/dist/components/ThemeSwitcher.d.ts +3 -0
- package/dist/components/ThemeSwitcher.d.ts.map +1 -0
- package/dist/components/ThemeSwitcher.js +12 -0
- package/dist/components/form-controls/Button.d.ts +11 -0
- package/dist/components/form-controls/Button.d.ts.map +1 -0
- package/dist/components/form-controls/Button.js +37 -0
- package/dist/components/form-controls/Input.d.ts +11 -0
- package/dist/components/form-controls/Input.d.ts.map +1 -0
- package/dist/components/form-controls/Input.js +27 -0
- package/dist/components/form-controls/index.d.ts +5 -0
- package/dist/components/form-controls/index.d.ts.map +1 -0
- package/dist/components/form-controls/index.js +2 -0
- package/dist/components/index.d.ts +4 -0
- package/dist/components/index.d.ts.map +1 -0
- package/dist/components/index.js +6 -0
- package/dist/components/layout/Card.d.ts +12 -0
- package/dist/components/layout/Card.d.ts.map +1 -0
- package/dist/components/layout/Card.js +15 -0
- package/dist/components/layout/index.d.ts +3 -0
- package/dist/components/layout/index.d.ts.map +1 -0
- package/dist/components/layout/index.js +1 -0
- package/dist/components/utils/Badge.d.ts +10 -0
- package/dist/components/utils/Badge.d.ts.map +1 -0
- package/dist/components/utils/Badge.js +39 -0
- package/dist/components/utils/index.d.ts +3 -0
- package/dist/components/utils/index.d.ts.map +1 -0
- package/dist/components/utils/index.js +1 -0
- package/dist/contexts/ThemeContext.d.ts +12 -0
- package/dist/contexts/ThemeContext.d.ts.map +1 -0
- package/dist/contexts/ThemeContext.js +124 -0
- package/dist/contexts/index.d.ts +5 -0
- package/dist/contexts/index.d.ts.map +1 -0
- package/dist/contexts/index.js +5 -0
- package/dist/contexts/presets.d.ts +8 -0
- package/dist/contexts/presets.d.ts.map +1 -0
- package/dist/contexts/presets.js +295 -0
- package/dist/contexts/types.d.ts +84 -0
- package/dist/contexts/types.d.ts.map +1 -0
- package/dist/contexts/types.js +1 -0
- package/dist/hooks/useThemeOverride.d.ts +26 -0
- package/dist/hooks/useThemeOverride.d.ts.map +1 -0
- package/dist/hooks/useThemeOverride.js +99 -0
- package/dist/index.d.ts +14 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +14 -673
- package/dist/main.d.ts +2 -0
- package/dist/main.d.ts.map +1 -0
- package/dist/main.js +5 -0
- package/dist/styles.d.ts +2 -0
- package/dist/styles.d.ts.map +1 -0
- package/dist/styles.js +3 -0
- package/package.json +2 -2
|
@@ -0,0 +1,295 @@
|
|
|
1
|
+
export const lightTheme = {
|
|
2
|
+
name: "light",
|
|
3
|
+
colors: {
|
|
4
|
+
primary: "#007aff",
|
|
5
|
+
primaryContrast: "#ffffff",
|
|
6
|
+
primaryDark: "#0064d1",
|
|
7
|
+
primaryLight: "#4da6ff",
|
|
8
|
+
secondary: "#6b7280",
|
|
9
|
+
secondaryContrast: "#ffffff",
|
|
10
|
+
secondaryDark: "#4b5563",
|
|
11
|
+
secondaryLight: "#9ca3af",
|
|
12
|
+
success: "#10b981",
|
|
13
|
+
successContrast: "#ffffff",
|
|
14
|
+
successDark: "#059669",
|
|
15
|
+
successLight: "#34d399",
|
|
16
|
+
warning: "#f59e0b",
|
|
17
|
+
warningContrast: "#ffffff",
|
|
18
|
+
warningDark: "#d97706",
|
|
19
|
+
warningLight: "#fbbf24",
|
|
20
|
+
danger: "#ef4444",
|
|
21
|
+
dangerContrast: "#ffffff",
|
|
22
|
+
dangerDark: "#dc2626",
|
|
23
|
+
dangerLight: "#f87171",
|
|
24
|
+
info: "#06b6d4",
|
|
25
|
+
infoContrast: "#ffffff",
|
|
26
|
+
infoDark: "#0891b2",
|
|
27
|
+
infoLight: "#22d3ee",
|
|
28
|
+
gray50: "#f9fafb",
|
|
29
|
+
gray100: "#f3f4f6",
|
|
30
|
+
gray200: "#e5e7eb",
|
|
31
|
+
gray300: "#d1d5db",
|
|
32
|
+
gray400: "#9ca3af",
|
|
33
|
+
gray500: "#6b7280",
|
|
34
|
+
gray600: "#4b5563",
|
|
35
|
+
gray700: "#374151",
|
|
36
|
+
gray800: "#1f2937",
|
|
37
|
+
gray900: "#111827",
|
|
38
|
+
borderDefault: "#e5e7eb",
|
|
39
|
+
borderFocus: "#007aff",
|
|
40
|
+
borderError: "#ef4444",
|
|
41
|
+
bgDefault: "#ffffff",
|
|
42
|
+
bgSecondary: "#f9fafb",
|
|
43
|
+
bgDisabled: "#f3f4f6",
|
|
44
|
+
textPrimary: "#111827",
|
|
45
|
+
textSecondary: "#374151",
|
|
46
|
+
textMuted: "#6b7280",
|
|
47
|
+
textDisabled: "#9ca3af",
|
|
48
|
+
},
|
|
49
|
+
shadows: {
|
|
50
|
+
sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
|
|
51
|
+
md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
|
|
52
|
+
lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
|
|
53
|
+
},
|
|
54
|
+
radius: {
|
|
55
|
+
sm: "0.375rem",
|
|
56
|
+
md: "0.5rem",
|
|
57
|
+
lg: "0.75rem",
|
|
58
|
+
full: "9999px",
|
|
59
|
+
},
|
|
60
|
+
spacing: {
|
|
61
|
+
xs: "0.25rem",
|
|
62
|
+
sm: "0.5rem",
|
|
63
|
+
md: "1rem",
|
|
64
|
+
lg: "1.5rem",
|
|
65
|
+
xl: "2rem",
|
|
66
|
+
},
|
|
67
|
+
fonts: {
|
|
68
|
+
default: '"Instrument Sans", sans-serif',
|
|
69
|
+
sizeDefault: "16px",
|
|
70
|
+
colorDefault: "#111827",
|
|
71
|
+
},
|
|
72
|
+
};
|
|
73
|
+
export const darkTheme = {
|
|
74
|
+
name: "dark",
|
|
75
|
+
colors: {
|
|
76
|
+
primary: "#3b82f6",
|
|
77
|
+
primaryContrast: "#ffffff",
|
|
78
|
+
primaryDark: "#1d4ed8",
|
|
79
|
+
primaryLight: "#60a5fa",
|
|
80
|
+
secondary: "#9ca3af",
|
|
81
|
+
secondaryContrast: "#ffffff",
|
|
82
|
+
secondaryDark: "#6b7280",
|
|
83
|
+
secondaryLight: "#d1d5db",
|
|
84
|
+
success: "#10b981",
|
|
85
|
+
successContrast: "#ffffff",
|
|
86
|
+
successDark: "#059669",
|
|
87
|
+
successLight: "#34d399",
|
|
88
|
+
warning: "#f59e0b",
|
|
89
|
+
warningContrast: "#ffffff",
|
|
90
|
+
warningDark: "#d97706",
|
|
91
|
+
warningLight: "#fbbf24",
|
|
92
|
+
danger: "#ef4444",
|
|
93
|
+
dangerContrast: "#ffffff",
|
|
94
|
+
dangerDark: "#dc2626",
|
|
95
|
+
dangerLight: "#f87171",
|
|
96
|
+
info: "#06b6d4",
|
|
97
|
+
infoContrast: "#ffffff",
|
|
98
|
+
infoDark: "#0891b2",
|
|
99
|
+
infoLight: "#22d3ee",
|
|
100
|
+
gray50: "#111827",
|
|
101
|
+
gray100: "#1f2937",
|
|
102
|
+
gray200: "#374151",
|
|
103
|
+
gray300: "#4b5563",
|
|
104
|
+
gray400: "#6b7280",
|
|
105
|
+
gray500: "#9ca3af",
|
|
106
|
+
gray600: "#d1d5db",
|
|
107
|
+
gray700: "#e5e7eb",
|
|
108
|
+
gray800: "#f3f4f6",
|
|
109
|
+
gray900: "#f9fafb",
|
|
110
|
+
borderDefault: "#374151",
|
|
111
|
+
borderFocus: "#3b82f6",
|
|
112
|
+
borderError: "#ef4444",
|
|
113
|
+
bgDefault: "#111827",
|
|
114
|
+
bgSecondary: "#1f2937",
|
|
115
|
+
bgDisabled: "#374151",
|
|
116
|
+
textPrimary: "#f9fafb",
|
|
117
|
+
textSecondary: "#e5e7eb",
|
|
118
|
+
textMuted: "#9ca3af",
|
|
119
|
+
textDisabled: "#6b7280",
|
|
120
|
+
},
|
|
121
|
+
shadows: {
|
|
122
|
+
sm: "0 1px 2px 0 rgb(0 0 0 / 0.3)",
|
|
123
|
+
md: "0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4)",
|
|
124
|
+
lg: "0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.4)",
|
|
125
|
+
},
|
|
126
|
+
radius: {
|
|
127
|
+
sm: "0.375rem",
|
|
128
|
+
md: "0.5rem",
|
|
129
|
+
lg: "0.75rem",
|
|
130
|
+
full: "9999px",
|
|
131
|
+
},
|
|
132
|
+
spacing: {
|
|
133
|
+
xs: "0.25rem",
|
|
134
|
+
sm: "0.5rem",
|
|
135
|
+
md: "1rem",
|
|
136
|
+
lg: "1.5rem",
|
|
137
|
+
xl: "2rem",
|
|
138
|
+
},
|
|
139
|
+
fonts: {
|
|
140
|
+
default: '"Instrument Sans", sans-serif',
|
|
141
|
+
sizeDefault: "16px",
|
|
142
|
+
colorDefault: "#f9fafb",
|
|
143
|
+
},
|
|
144
|
+
};
|
|
145
|
+
export const blueTheme = {
|
|
146
|
+
name: "blue",
|
|
147
|
+
colors: {
|
|
148
|
+
primary: "#1e40af",
|
|
149
|
+
primaryContrast: "#ffffff",
|
|
150
|
+
primaryDark: "#1e3a8a",
|
|
151
|
+
primaryLight: "#3b82f6",
|
|
152
|
+
secondary: "#64748b",
|
|
153
|
+
secondaryContrast: "#ffffff",
|
|
154
|
+
secondaryDark: "#475569",
|
|
155
|
+
secondaryLight: "#94a3b8",
|
|
156
|
+
success: "#059669",
|
|
157
|
+
successContrast: "#ffffff",
|
|
158
|
+
successDark: "#047857",
|
|
159
|
+
successLight: "#10b981",
|
|
160
|
+
warning: "#d97706",
|
|
161
|
+
warningContrast: "#ffffff",
|
|
162
|
+
warningDark: "#b45309",
|
|
163
|
+
warningLight: "#f59e0b",
|
|
164
|
+
danger: "#dc2626",
|
|
165
|
+
dangerContrast: "#ffffff",
|
|
166
|
+
dangerDark: "#b91c1c",
|
|
167
|
+
dangerLight: "#ef4444",
|
|
168
|
+
info: "#0891b2",
|
|
169
|
+
infoContrast: "#ffffff",
|
|
170
|
+
infoDark: "#0e7490",
|
|
171
|
+
infoLight: "#06b6d4",
|
|
172
|
+
gray50: "#f8fafc",
|
|
173
|
+
gray100: "#f1f5f9",
|
|
174
|
+
gray200: "#e2e8f0",
|
|
175
|
+
gray300: "#cbd5e1",
|
|
176
|
+
gray400: "#94a3b8",
|
|
177
|
+
gray500: "#64748b",
|
|
178
|
+
gray600: "#475569",
|
|
179
|
+
gray700: "#334155",
|
|
180
|
+
gray800: "#1e293b",
|
|
181
|
+
gray900: "#0f172a",
|
|
182
|
+
borderDefault: "#e2e8f0",
|
|
183
|
+
borderFocus: "#1e40af",
|
|
184
|
+
borderError: "#dc2626",
|
|
185
|
+
bgDefault: "#ffffff",
|
|
186
|
+
bgSecondary: "#f8fafc",
|
|
187
|
+
bgDisabled: "#f1f5f9",
|
|
188
|
+
textPrimary: "#0f172a",
|
|
189
|
+
textSecondary: "#334155",
|
|
190
|
+
textMuted: "#64748b",
|
|
191
|
+
textDisabled: "#94a3b8",
|
|
192
|
+
},
|
|
193
|
+
shadows: {
|
|
194
|
+
sm: "0 1px 2px 0 rgb(30 64 175 / 0.05)",
|
|
195
|
+
md: "0 4px 6px -1px rgb(30 64 175 / 0.1), 0 2px 4px -2px rgb(30 64 175 / 0.1)",
|
|
196
|
+
lg: "0 10px 15px -3px rgb(30 64 175 / 0.1), 0 4px 6px -4px rgb(30 64 175 / 0.1)",
|
|
197
|
+
},
|
|
198
|
+
radius: {
|
|
199
|
+
sm: "0.375rem",
|
|
200
|
+
md: "0.5rem",
|
|
201
|
+
lg: "0.75rem",
|
|
202
|
+
full: "9999px",
|
|
203
|
+
},
|
|
204
|
+
spacing: {
|
|
205
|
+
xs: "0.25rem",
|
|
206
|
+
sm: "0.5rem",
|
|
207
|
+
md: "1rem",
|
|
208
|
+
lg: "1.5rem",
|
|
209
|
+
xl: "2rem",
|
|
210
|
+
},
|
|
211
|
+
fonts: {
|
|
212
|
+
default: '"Instrument Sans", sans-serif',
|
|
213
|
+
sizeDefault: "16px",
|
|
214
|
+
colorDefault: "#0f172a",
|
|
215
|
+
},
|
|
216
|
+
};
|
|
217
|
+
export const greenTheme = {
|
|
218
|
+
name: "green",
|
|
219
|
+
colors: {
|
|
220
|
+
primary: "#059669",
|
|
221
|
+
primaryContrast: "#ffffff",
|
|
222
|
+
primaryDark: "#047857",
|
|
223
|
+
primaryLight: "#10b981",
|
|
224
|
+
secondary: "#6b7280",
|
|
225
|
+
secondaryContrast: "#ffffff",
|
|
226
|
+
secondaryDark: "#4b5563",
|
|
227
|
+
secondaryLight: "#9ca3af",
|
|
228
|
+
success: "#16a34a",
|
|
229
|
+
successContrast: "#ffffff",
|
|
230
|
+
successDark: "#15803d",
|
|
231
|
+
successLight: "#22c55e",
|
|
232
|
+
warning: "#d97706",
|
|
233
|
+
warningContrast: "#ffffff",
|
|
234
|
+
warningDark: "#b45309",
|
|
235
|
+
warningLight: "#f59e0b",
|
|
236
|
+
danger: "#dc2626",
|
|
237
|
+
dangerContrast: "#ffffff",
|
|
238
|
+
dangerDark: "#b91c1c",
|
|
239
|
+
dangerLight: "#ef4444",
|
|
240
|
+
info: "#0891b2",
|
|
241
|
+
infoContrast: "#ffffff",
|
|
242
|
+
infoDark: "#0e7490",
|
|
243
|
+
infoLight: "#06b6d4",
|
|
244
|
+
gray50: "#f9fafb",
|
|
245
|
+
gray100: "#f3f4f6",
|
|
246
|
+
gray200: "#e5e7eb",
|
|
247
|
+
gray300: "#d1d5db",
|
|
248
|
+
gray400: "#9ca3af",
|
|
249
|
+
gray500: "#6b7280",
|
|
250
|
+
gray600: "#4b5563",
|
|
251
|
+
gray700: "#374151",
|
|
252
|
+
gray800: "#1f2937",
|
|
253
|
+
gray900: "#111827",
|
|
254
|
+
borderDefault: "#e5e7eb",
|
|
255
|
+
borderFocus: "#059669",
|
|
256
|
+
borderError: "#dc2626",
|
|
257
|
+
bgDefault: "#ffffff",
|
|
258
|
+
bgSecondary: "#f9fafb",
|
|
259
|
+
bgDisabled: "#f3f4f6",
|
|
260
|
+
textPrimary: "#111827",
|
|
261
|
+
textSecondary: "#374151",
|
|
262
|
+
textMuted: "#6b7280",
|
|
263
|
+
textDisabled: "#9ca3af",
|
|
264
|
+
},
|
|
265
|
+
shadows: {
|
|
266
|
+
sm: "0 1px 2px 0 rgb(5 150 105 / 0.05)",
|
|
267
|
+
md: "0 4px 6px -1px rgb(5 150 105 / 0.1), 0 2px 4px -2px rgb(5 150 105 / 0.1)",
|
|
268
|
+
lg: "0 10px 15px -3px rgb(5 150 105 / 0.1), 0 4px 6px -4px rgb(5 150 105 / 0.1)",
|
|
269
|
+
},
|
|
270
|
+
radius: {
|
|
271
|
+
sm: "0.375rem",
|
|
272
|
+
md: "0.5rem",
|
|
273
|
+
lg: "0.75rem",
|
|
274
|
+
full: "9999px",
|
|
275
|
+
},
|
|
276
|
+
spacing: {
|
|
277
|
+
xs: "0.25rem",
|
|
278
|
+
sm: "0.5rem",
|
|
279
|
+
md: "1rem",
|
|
280
|
+
lg: "1.5rem",
|
|
281
|
+
xl: "2rem",
|
|
282
|
+
},
|
|
283
|
+
fonts: {
|
|
284
|
+
default: '"Instrument Sans", sans-serif',
|
|
285
|
+
sizeDefault: "16px",
|
|
286
|
+
colorDefault: "#111827",
|
|
287
|
+
},
|
|
288
|
+
};
|
|
289
|
+
export const defaultTheme = lightTheme;
|
|
290
|
+
export const themes = {
|
|
291
|
+
light: lightTheme,
|
|
292
|
+
dark: darkTheme,
|
|
293
|
+
blue: blueTheme,
|
|
294
|
+
green: greenTheme,
|
|
295
|
+
};
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
export interface Theme {
|
|
2
|
+
name: string;
|
|
3
|
+
colors: {
|
|
4
|
+
primary: string;
|
|
5
|
+
primaryContrast: string;
|
|
6
|
+
primaryDark: string;
|
|
7
|
+
primaryLight: string;
|
|
8
|
+
secondary: string;
|
|
9
|
+
secondaryContrast: string;
|
|
10
|
+
secondaryDark: string;
|
|
11
|
+
secondaryLight: string;
|
|
12
|
+
success: string;
|
|
13
|
+
successContrast: string;
|
|
14
|
+
successDark: string;
|
|
15
|
+
successLight: string;
|
|
16
|
+
warning: string;
|
|
17
|
+
warningContrast: string;
|
|
18
|
+
warningDark: string;
|
|
19
|
+
warningLight: string;
|
|
20
|
+
danger: string;
|
|
21
|
+
dangerContrast: string;
|
|
22
|
+
dangerDark: string;
|
|
23
|
+
dangerLight: string;
|
|
24
|
+
info: string;
|
|
25
|
+
infoContrast: string;
|
|
26
|
+
infoDark: string;
|
|
27
|
+
infoLight: string;
|
|
28
|
+
gray50: string;
|
|
29
|
+
gray100: string;
|
|
30
|
+
gray200: string;
|
|
31
|
+
gray300: string;
|
|
32
|
+
gray400: string;
|
|
33
|
+
gray500: string;
|
|
34
|
+
gray600: string;
|
|
35
|
+
gray700: string;
|
|
36
|
+
gray800: string;
|
|
37
|
+
gray900: string;
|
|
38
|
+
borderDefault: string;
|
|
39
|
+
borderFocus: string;
|
|
40
|
+
borderError: string;
|
|
41
|
+
bgDefault: string;
|
|
42
|
+
bgSecondary: string;
|
|
43
|
+
bgDisabled: string;
|
|
44
|
+
textPrimary: string;
|
|
45
|
+
textSecondary: string;
|
|
46
|
+
textMuted: string;
|
|
47
|
+
textDisabled: string;
|
|
48
|
+
};
|
|
49
|
+
shadows: {
|
|
50
|
+
sm: string;
|
|
51
|
+
md: string;
|
|
52
|
+
lg: string;
|
|
53
|
+
};
|
|
54
|
+
radius: {
|
|
55
|
+
sm: string;
|
|
56
|
+
md: string;
|
|
57
|
+
lg: string;
|
|
58
|
+
full: string;
|
|
59
|
+
};
|
|
60
|
+
spacing: {
|
|
61
|
+
xs: string;
|
|
62
|
+
sm: string;
|
|
63
|
+
md: string;
|
|
64
|
+
lg: string;
|
|
65
|
+
xl: string;
|
|
66
|
+
};
|
|
67
|
+
fonts: {
|
|
68
|
+
default: string;
|
|
69
|
+
sizeDefault: string;
|
|
70
|
+
colorDefault: string;
|
|
71
|
+
};
|
|
72
|
+
}
|
|
73
|
+
export interface ThemeContextType {
|
|
74
|
+
theme: Theme;
|
|
75
|
+
setTheme: (theme: Theme | string) => void;
|
|
76
|
+
currentThemeName: string;
|
|
77
|
+
availableThemes: string[];
|
|
78
|
+
resetToDefault: () => void;
|
|
79
|
+
isDark: boolean;
|
|
80
|
+
}
|
|
81
|
+
export interface ThemeOverride {
|
|
82
|
+
[key: string]: string | number;
|
|
83
|
+
}
|
|
84
|
+
//# sourceMappingURL=types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/contexts/types.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import type { ThemeOverride } from "../contexts/types";
|
|
2
|
+
interface UseThemeOverrideOptions {
|
|
3
|
+
scope?: "global" | "local";
|
|
4
|
+
element?: HTMLElement | null;
|
|
5
|
+
prefix?: string;
|
|
6
|
+
}
|
|
7
|
+
/**
|
|
8
|
+
* Hook para aplicar overrides directos a variables CSS del tema
|
|
9
|
+
* Permite personalización granular sin cambiar el tema completo
|
|
10
|
+
*/
|
|
11
|
+
export declare const useThemeOverride: (options?: UseThemeOverrideOptions) => {
|
|
12
|
+
applyOverride: (overrides: ThemeOverride) => void;
|
|
13
|
+
revertOverride: (keys: string[]) => void;
|
|
14
|
+
revertAllOverrides: () => void;
|
|
15
|
+
getCSSVariable: (key: string) => string | null;
|
|
16
|
+
isOverrideApplied: (key: string) => boolean;
|
|
17
|
+
appliedOverridesCount: number;
|
|
18
|
+
};
|
|
19
|
+
/**
|
|
20
|
+
* Hook para aplicar overrides temporales que se revierten automáticamente
|
|
21
|
+
*/
|
|
22
|
+
export declare const useTemporaryOverride: (overrides: ThemeOverride, duration?: number, options?: UseThemeOverrideOptions) => {
|
|
23
|
+
applyTemporaryOverride: () => () => void;
|
|
24
|
+
};
|
|
25
|
+
export {};
|
|
26
|
+
//# sourceMappingURL=useThemeOverride.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useThemeOverride.d.ts","sourceRoot":"","sources":["../../src/hooks/useThemeOverride.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAEvD,UAAU,uBAAuB;IAC/B,KAAK,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC3B,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;GAGG;AACH,eAAO,MAAM,gBAAgB,GAAI,UAAS,uBAA4B;+BAOtD,aAAa;2BA0BlB,MAAM,EAAE;;0BAoCT,MAAM,KAAG,MAAM,GAAG,IAAI;6BAkBtB,MAAM,KAAG,OAAO;;CAwBzB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,oBAAoB,GAC/B,WAAW,aAAa,EACxB,WAAU,MAAa,EACvB,UAAS,uBAA4B;;CAkBtC,CAAC"}
|
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
import { useCallback, useEffect, useRef } from "react";
|
|
2
|
+
/**
|
|
3
|
+
* Hook para aplicar overrides directos a variables CSS del tema
|
|
4
|
+
* Permite personalización granular sin cambiar el tema completo
|
|
5
|
+
*/
|
|
6
|
+
export const useThemeOverride = (options = {}) => {
|
|
7
|
+
const { scope = "global", element = null, prefix = "flysoft" } = options;
|
|
8
|
+
const appliedOverrides = useRef(new Set());
|
|
9
|
+
// Función para aplicar override
|
|
10
|
+
const applyOverride = useCallback((overrides) => {
|
|
11
|
+
const targetElement = scope === "global" ? document.documentElement : element;
|
|
12
|
+
if (!targetElement) {
|
|
13
|
+
console.warn("useThemeOverride: No target element available");
|
|
14
|
+
return;
|
|
15
|
+
}
|
|
16
|
+
Object.entries(overrides).forEach(([key, value]) => {
|
|
17
|
+
const cssVarName = `--${prefix}-${key
|
|
18
|
+
.replace(/([A-Z])/g, "-$1")
|
|
19
|
+
.toLowerCase()}`;
|
|
20
|
+
// Aplicar el override
|
|
21
|
+
targetElement.style.setProperty(cssVarName, String(value));
|
|
22
|
+
// Registrar para poder revertir después
|
|
23
|
+
appliedOverrides.current.add(cssVarName);
|
|
24
|
+
});
|
|
25
|
+
}, [scope, element, prefix]);
|
|
26
|
+
// Función para revertir overrides específicos
|
|
27
|
+
const revertOverride = useCallback((keys) => {
|
|
28
|
+
const targetElement = scope === "global" ? document.documentElement : element;
|
|
29
|
+
if (!targetElement)
|
|
30
|
+
return;
|
|
31
|
+
keys.forEach((key) => {
|
|
32
|
+
const cssVarName = `--${prefix}-${key
|
|
33
|
+
.replace(/([A-Z])/g, "-$1")
|
|
34
|
+
.toLowerCase()}`;
|
|
35
|
+
if (appliedOverrides.current.has(cssVarName)) {
|
|
36
|
+
targetElement.style.removeProperty(cssVarName);
|
|
37
|
+
appliedOverrides.current.delete(cssVarName);
|
|
38
|
+
}
|
|
39
|
+
});
|
|
40
|
+
}, [scope, element, prefix]);
|
|
41
|
+
// Función para revertir todos los overrides aplicados
|
|
42
|
+
const revertAllOverrides = useCallback(() => {
|
|
43
|
+
const targetElement = scope === "global" ? document.documentElement : element;
|
|
44
|
+
if (!targetElement)
|
|
45
|
+
return;
|
|
46
|
+
appliedOverrides.current.forEach((cssVarName) => {
|
|
47
|
+
targetElement.style.removeProperty(cssVarName);
|
|
48
|
+
});
|
|
49
|
+
appliedOverrides.current.clear();
|
|
50
|
+
}, [scope, element]);
|
|
51
|
+
// Función para obtener el valor actual de una variable CSS
|
|
52
|
+
const getCSSVariable = useCallback((key) => {
|
|
53
|
+
const targetElement = scope === "global" ? document.documentElement : element;
|
|
54
|
+
if (!targetElement)
|
|
55
|
+
return null;
|
|
56
|
+
const cssVarName = `--${prefix}-${key
|
|
57
|
+
.replace(/([A-Z])/g, "-$1")
|
|
58
|
+
.toLowerCase()}`;
|
|
59
|
+
return (getComputedStyle(targetElement).getPropertyValue(cssVarName) || null);
|
|
60
|
+
}, [scope, element, prefix]);
|
|
61
|
+
// Función para verificar si un override está aplicado
|
|
62
|
+
const isOverrideApplied = useCallback((key) => {
|
|
63
|
+
const cssVarName = `--${prefix}-${key
|
|
64
|
+
.replace(/([A-Z])/g, "-$1")
|
|
65
|
+
.toLowerCase()}`;
|
|
66
|
+
return appliedOverrides.current.has(cssVarName);
|
|
67
|
+
}, [prefix]);
|
|
68
|
+
// Cleanup al desmontar
|
|
69
|
+
useEffect(() => {
|
|
70
|
+
return () => {
|
|
71
|
+
revertAllOverrides();
|
|
72
|
+
};
|
|
73
|
+
}, [revertAllOverrides]);
|
|
74
|
+
return {
|
|
75
|
+
applyOverride,
|
|
76
|
+
revertOverride,
|
|
77
|
+
revertAllOverrides,
|
|
78
|
+
getCSSVariable,
|
|
79
|
+
isOverrideApplied,
|
|
80
|
+
appliedOverridesCount: appliedOverrides.current.size,
|
|
81
|
+
};
|
|
82
|
+
};
|
|
83
|
+
/**
|
|
84
|
+
* Hook para aplicar overrides temporales que se revierten automáticamente
|
|
85
|
+
*/
|
|
86
|
+
export const useTemporaryOverride = (overrides, duration = 3000, options = {}) => {
|
|
87
|
+
const { applyOverride, revertOverride } = useThemeOverride(options);
|
|
88
|
+
const applyTemporaryOverride = useCallback(() => {
|
|
89
|
+
applyOverride(overrides);
|
|
90
|
+
const timeoutId = setTimeout(() => {
|
|
91
|
+
revertOverride(Object.keys(overrides));
|
|
92
|
+
}, duration);
|
|
93
|
+
return () => {
|
|
94
|
+
clearTimeout(timeoutId);
|
|
95
|
+
revertOverride(Object.keys(overrides));
|
|
96
|
+
};
|
|
97
|
+
}, [applyOverride, revertOverride, overrides, duration]);
|
|
98
|
+
return { applyTemporaryOverride };
|
|
99
|
+
};
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import "./styles.css";
|
|
2
|
+
export { Button } from "./components/form-controls/Button";
|
|
3
|
+
export type { ButtonProps } from "./components/form-controls/Button";
|
|
4
|
+
export { Input } from "./components/form-controls/Input";
|
|
5
|
+
export type { InputProps } from "./components/form-controls/Input";
|
|
6
|
+
export { Card } from "./components/layout/Card";
|
|
7
|
+
export type { CardProps } from "./components/layout/Card";
|
|
8
|
+
export { Badge } from "./components/utils/Badge";
|
|
9
|
+
export type { BadgeProps } from "./components/utils/Badge";
|
|
10
|
+
export * from "./contexts";
|
|
11
|
+
export { ThemeSwitcher } from "./components/ThemeSwitcher";
|
|
12
|
+
export { default as React } from "react";
|
|
13
|
+
export type { ReactElement, ReactNode, FC, ComponentProps } from "react";
|
|
14
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,cAAc,CAAC;AAGtB,OAAO,EAAE,MAAM,EAAE,MAAM,mCAAmC,CAAC;AAC3D,YAAY,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAC;AAErE,OAAO,EAAE,KAAK,EAAE,MAAM,kCAAkC,CAAC;AACzD,YAAY,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAC;AAEnE,OAAO,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAC;AAChD,YAAY,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAE1D,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AACjD,YAAY,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAG3D,cAAc,YAAY,CAAC;AAG3B,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAK3D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,OAAO,CAAC;AACzC,YAAY,EAAE,YAAY,EAAE,SAAS,EAAE,EAAE,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC"}
|