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.
Files changed (55) hide show
  1. package/dist/App.d.ts +4 -0
  2. package/dist/App.d.ts.map +1 -0
  3. package/dist/App.js +7 -0
  4. package/dist/components/ThemeSwitcher.d.ts +3 -0
  5. package/dist/components/ThemeSwitcher.d.ts.map +1 -0
  6. package/dist/components/ThemeSwitcher.js +12 -0
  7. package/dist/components/form-controls/Button.d.ts +11 -0
  8. package/dist/components/form-controls/Button.d.ts.map +1 -0
  9. package/dist/components/form-controls/Button.js +37 -0
  10. package/dist/components/form-controls/Input.d.ts +11 -0
  11. package/dist/components/form-controls/Input.d.ts.map +1 -0
  12. package/dist/components/form-controls/Input.js +27 -0
  13. package/dist/components/form-controls/index.d.ts +5 -0
  14. package/dist/components/form-controls/index.d.ts.map +1 -0
  15. package/dist/components/form-controls/index.js +2 -0
  16. package/dist/components/index.d.ts +4 -0
  17. package/dist/components/index.d.ts.map +1 -0
  18. package/dist/components/index.js +6 -0
  19. package/dist/components/layout/Card.d.ts +12 -0
  20. package/dist/components/layout/Card.d.ts.map +1 -0
  21. package/dist/components/layout/Card.js +15 -0
  22. package/dist/components/layout/index.d.ts +3 -0
  23. package/dist/components/layout/index.d.ts.map +1 -0
  24. package/dist/components/layout/index.js +1 -0
  25. package/dist/components/utils/Badge.d.ts +10 -0
  26. package/dist/components/utils/Badge.d.ts.map +1 -0
  27. package/dist/components/utils/Badge.js +39 -0
  28. package/dist/components/utils/index.d.ts +3 -0
  29. package/dist/components/utils/index.d.ts.map +1 -0
  30. package/dist/components/utils/index.js +1 -0
  31. package/dist/contexts/ThemeContext.d.ts +12 -0
  32. package/dist/contexts/ThemeContext.d.ts.map +1 -0
  33. package/dist/contexts/ThemeContext.js +124 -0
  34. package/dist/contexts/index.d.ts +5 -0
  35. package/dist/contexts/index.d.ts.map +1 -0
  36. package/dist/contexts/index.js +5 -0
  37. package/dist/contexts/presets.d.ts +8 -0
  38. package/dist/contexts/presets.d.ts.map +1 -0
  39. package/dist/contexts/presets.js +295 -0
  40. package/dist/contexts/types.d.ts +84 -0
  41. package/dist/contexts/types.d.ts.map +1 -0
  42. package/dist/contexts/types.js +1 -0
  43. package/dist/hooks/useThemeOverride.d.ts +26 -0
  44. package/dist/hooks/useThemeOverride.d.ts.map +1 -0
  45. package/dist/hooks/useThemeOverride.js +99 -0
  46. package/dist/index.d.ts +14 -0
  47. package/dist/index.d.ts.map +1 -0
  48. package/dist/index.js +14 -673
  49. package/dist/main.d.ts +2 -0
  50. package/dist/main.d.ts.map +1 -0
  51. package/dist/main.js +5 -0
  52. package/dist/styles.d.ts +2 -0
  53. package/dist/styles.d.ts.map +1 -0
  54. package/dist/styles.js +3 -0
  55. 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
+ };
@@ -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"}