@asafarim/react-themes 1.8.5 → 1.8.9

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 (8) hide show
  1. package/dist/index.d.mts +37 -203
  2. package/dist/index.d.ts +37 -203
  3. package/dist/index.js +1 -13
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +1 -13
  6. package/dist/index.mjs.map +1 -1
  7. package/dist/styles.css +6 -166
  8. package/package.json +6 -4
package/dist/index.d.mts CHANGED
@@ -3,120 +3,32 @@ import { ReactNode } from 'react';
3
3
  import { LucideIcon } from 'lucide-react';
4
4
 
5
5
  type ThemeMode = 'light' | 'dark' | 'auto';
6
- interface ThemeColors {
7
- background: string;
8
- backgroundSecondary: string;
9
- backgroundTertiary: string;
10
- text: string;
11
- textSecondary: string;
12
- textMuted: string;
13
- border: string;
14
- borderLight: string;
15
- borderHover: string;
16
- primary: string;
17
- primaryHover: string;
18
- primaryActive: string;
19
- success: string;
20
- warning: string;
21
- error: string;
22
- info: string;
23
- hover: string;
24
- active: string;
25
- focus: string;
26
- shadow: string;
27
- shadowMd: string;
28
- shadowLg: string;
29
- }
30
- interface ThemeSpacing {
31
- xs: string;
32
- sm: string;
33
- md: string;
34
- lg: string;
35
- xl: string;
36
- '2xl': string;
37
- '3xl': string;
38
- '4xl': string;
39
- }
40
- interface ThemeRadius {
41
- none: string;
42
- sm: string;
43
- md: string;
44
- lg: string;
45
- xl: string;
46
- '2xl': string;
47
- full: string;
48
- }
49
- interface ThemeTypography {
50
- fontFamily: {
51
- sans: string;
52
- serif: string;
53
- mono: string;
54
- };
55
- fontSize: {
56
- xs: string;
57
- sm: string;
58
- base: string;
59
- lg: string;
60
- xl: string;
61
- '2xl': string;
62
- '3xl': string;
63
- '4xl': string;
64
- '5xl': string;
65
- };
66
- fontWeight: {
67
- light: string;
68
- normal: string;
69
- medium: string;
70
- semibold: string;
71
- bold: string;
72
- };
73
- lineHeight: {
74
- tight: string;
75
- normal: string;
76
- relaxed: string;
77
- };
78
- }
79
- interface ThemeTransitions {
80
- fast: string;
81
- normal: string;
82
- slow: string;
83
- bounce: string;
84
- }
85
- interface Theme {
86
- name: string;
87
- mode: ThemeMode;
88
- colors: ThemeColors;
89
- spacing: ThemeSpacing;
90
- radius: ThemeRadius;
91
- typography: ThemeTypography;
92
- transitions: ThemeTransitions;
93
- zIndex: {
94
- dropdown: number;
95
- modal: number;
96
- tooltip: number;
97
- overlay: number;
98
- };
99
- }
6
+ type DensityMode = 'compact' | 'comfortable' | 'default';
7
+ type DirectionMode = 'ltr' | 'rtl';
100
8
  interface ThemeContextValue {
101
- theme: Theme;
102
9
  mode: ThemeMode;
103
10
  setMode: (mode: ThemeMode) => void;
104
11
  toggleMode: () => void;
12
+ density: DensityMode;
13
+ setDensity: (density: DensityMode) => void;
14
+ direction: DirectionMode;
15
+ setDirection: (direction: DirectionMode) => void;
105
16
  isDark: boolean;
106
17
  isLight: boolean;
107
18
  isAuto: boolean;
108
19
  systemPrefersDark: boolean;
109
- applyTheme: (customTheme: Partial<Theme>) => void;
110
- resetTheme: () => void;
20
+ resolvedMode: 'light' | 'dark';
111
21
  }
112
- interface ThemeProviderProps$1 {
22
+ interface ThemeProviderProps {
113
23
  children: React.ReactNode;
114
24
  defaultMode?: ThemeMode;
115
- customTheme?: Partial<Theme>;
25
+ defaultDensity?: DensityMode;
26
+ defaultDirection?: DirectionMode;
116
27
  storageKey?: string;
117
28
  enableTransitions?: boolean;
118
- className?: string;
119
- style?: React.CSSProperties;
29
+ persistMode?: boolean;
30
+ persistDensity?: boolean;
31
+ persistDirection?: boolean;
120
32
  }
121
33
  interface UseThemeOptions {
122
34
  defaultMode?: ThemeMode;
@@ -124,76 +36,33 @@ interface UseThemeOptions {
124
36
  }
125
37
  interface ThemeConfig {
126
38
  defaultMode?: ThemeMode;
127
- defaultTheme?: string;
39
+ defaultDensity?: DensityMode;
40
+ defaultDirection?: DirectionMode;
128
41
  persistMode?: boolean;
42
+ persistDensity?: boolean;
43
+ persistDirection?: boolean;
129
44
  storageKey?: string;
130
45
  enableTransitions?: boolean;
131
- customThemes?: Record<string, Theme>;
132
46
  }
133
- interface ThemeVariables {
134
- colors: Record<keyof ThemeColors, string>;
135
- spacing: Record<keyof ThemeSpacing, string>;
136
- radius: Record<keyof ThemeRadius, string>;
47
+ interface Theme {
48
+ name: string;
49
+ mode: ThemeMode;
50
+ colors: Record<string, string>;
51
+ spacing: Record<string, string>;
52
+ radius: Record<string, string>;
137
53
  typography: {
138
- fontFamily: Record<keyof ThemeTypography['fontFamily'], string>;
139
- fontSize: Record<keyof ThemeTypography['fontSize'], string>;
140
- fontWeight: Record<keyof ThemeTypography['fontWeight'], string>;
141
- lineHeight: Record<keyof ThemeTypography['lineHeight'], string>;
54
+ fontFamily: Record<string, string>;
55
+ fontSize: Record<string, string>;
56
+ fontWeight: Record<string, string | number>;
57
+ lineHeight: Record<string, string | number>;
142
58
  };
143
- transitions: Record<keyof ThemeTransitions, string>;
144
- zIndex: Record<keyof Theme['zIndex'], string>;
59
+ transitions: Record<string, string>;
60
+ zIndex: Record<string, number>;
145
61
  }
146
62
 
147
- declare const lightTheme: Theme;
148
- declare const darkTheme: Theme;
149
- declare const defaultTheme: Theme;
150
- declare const themes: {
151
- light: Theme;
152
- dark: Theme;
153
- };
154
- declare const defaultThemes: {
155
- default: Theme;
156
- light: Theme;
157
- dark: Theme;
158
- };
159
- declare function mergeTheme(baseTheme: Theme, customTheme: Partial<Theme>): Theme;
160
-
161
- interface ThemeContextType {
162
- currentTheme: Theme;
163
- mode: ThemeMode;
164
- setMode: (mode: ThemeMode) => void;
165
- setTheme: (theme: Theme) => void;
166
- themes: Record<string, Theme>;
167
- toggleMode: () => void;
168
- }
169
- interface ThemeProviderProps {
170
- children: ReactNode;
171
- config?: ThemeConfig;
172
- defaultMode?: ThemeMode;
173
- defaultTheme?: string;
174
- persistMode?: boolean;
175
- storageKey?: string;
176
- customThemes?: Record<string, Theme>;
177
- }
178
63
  declare const ThemeProvider: React$1.FC<ThemeProviderProps>;
179
64
 
180
- /**
181
- * Hook to access theme context
182
- */
183
- declare function useTheme(): ThemeContextType;
184
-
185
- /**
186
- * Hook that provides theme toggle functionality
187
- */
188
- declare function useThemeToggle(): {
189
- mode: ThemeMode;
190
- setMode: (mode: ThemeMode) => void;
191
- toggleMode: () => void;
192
- isDark: boolean;
193
- isLight: boolean;
194
- isAuto: boolean;
195
- effectiveMode: "light" | "dark";
196
- };
65
+ declare function useTheme(): ThemeContextValue;
197
66
 
198
67
  type ThemeToggleVariant = "default" | "outline" | "ghost" | "link" | "circle" | "icon";
199
68
  interface ThemeToggleProps {
@@ -201,21 +70,9 @@ interface ThemeToggleProps {
201
70
  style?: React$1.CSSProperties;
202
71
  showLabels?: boolean;
203
72
  size?: "sm" | "md" | "lg";
204
- /**
205
- * Custom light icon (default: ☀️)
206
- */
207
73
  lightIcon?: ReactNode | LucideIcon | string;
208
- /**
209
- * Custom dark icon (default: 🌙)
210
- */
211
74
  darkIcon?: ReactNode | LucideIcon | string;
212
- /**
213
- * Button aria-label
214
- */
215
75
  ariaLabel?: string;
216
- /**
217
- * Button variant
218
- */
219
76
  variant?: ThemeToggleVariant;
220
77
  }
221
78
  declare const ThemeToggle: React$1.FC<ThemeToggleProps>;
@@ -223,37 +80,14 @@ declare const ThemeToggle: React$1.FC<ThemeToggleProps>;
223
80
  interface ThemeSelectorProps {
224
81
  className?: string;
225
82
  style?: React$1.CSSProperties;
226
- showLabels?: boolean;
227
- options?: Array<{
228
- mode: ThemeMode;
229
- label: string;
230
- icon?: string;
231
- }>;
83
+ variant?: "buttons" | "dropdown";
232
84
  }
233
85
  declare const ThemeSelector: React$1.FC<ThemeSelectorProps>;
234
86
 
235
- /**
236
- * Creates a new theme by merging a base theme with custom properties
237
- */
238
- declare function createTheme(baseTheme: Theme, customTheme: Partial<Theme>): Theme;
239
-
240
- /**
241
- * Applies theme CSS variables to the document root
242
- */
243
- declare function applyTheme(theme: Theme, mode: ThemeMode): void;
244
-
245
- /**
246
- * Merges multiple themes into a single theme
247
- * Later themes in the array take precedence over earlier ones
248
- */
249
- declare function mergeThemes(...themes: Array<Theme | Partial<Theme>>): Theme;
250
- /**
251
- * Merges theme colors only
252
- */
253
- declare function mergeThemeColors(baseColors: Theme['colors'], ...colorSets: Array<Partial<Theme['colors']>>): Theme['colors'];
254
- /**
255
- * Deep merge utility for complex theme objects
256
- */
257
- declare function deepMergeThemes(target: Theme, ...sources: Array<Partial<Theme>>): Theme;
87
+ interface DensitySelectorProps {
88
+ className?: string;
89
+ style?: React$1.CSSProperties;
90
+ }
91
+ declare const DensitySelector: React$1.FC<DensitySelectorProps>;
258
92
 
259
- export { type Theme, type ThemeColors, type ThemeConfig, type ThemeContextType, type ThemeContextValue, type ThemeMode, ThemeProvider, type ThemeProviderProps$1 as ThemeProviderProps, type ThemeRadius, ThemeSelector, type ThemeSpacing, ThemeToggle, type ThemeTransitions, type ThemeTypography, type ThemeVariables, type UseThemeOptions, applyTheme, createTheme, darkTheme, deepMergeThemes, ThemeProvider as default, defaultTheme, defaultThemes, lightTheme, mergeTheme, mergeThemeColors, mergeThemes, themes, useTheme, useThemeToggle };
93
+ export { type DensityMode, DensitySelector, type DirectionMode, type Theme, type ThemeConfig, type ThemeContextValue, type ThemeMode, ThemeProvider, type ThemeProviderProps, ThemeSelector, ThemeToggle, type UseThemeOptions, ThemeProvider as default, useTheme };
package/dist/index.d.ts CHANGED
@@ -3,120 +3,32 @@ import { ReactNode } from 'react';
3
3
  import { LucideIcon } from 'lucide-react';
4
4
 
5
5
  type ThemeMode = 'light' | 'dark' | 'auto';
6
- interface ThemeColors {
7
- background: string;
8
- backgroundSecondary: string;
9
- backgroundTertiary: string;
10
- text: string;
11
- textSecondary: string;
12
- textMuted: string;
13
- border: string;
14
- borderLight: string;
15
- borderHover: string;
16
- primary: string;
17
- primaryHover: string;
18
- primaryActive: string;
19
- success: string;
20
- warning: string;
21
- error: string;
22
- info: string;
23
- hover: string;
24
- active: string;
25
- focus: string;
26
- shadow: string;
27
- shadowMd: string;
28
- shadowLg: string;
29
- }
30
- interface ThemeSpacing {
31
- xs: string;
32
- sm: string;
33
- md: string;
34
- lg: string;
35
- xl: string;
36
- '2xl': string;
37
- '3xl': string;
38
- '4xl': string;
39
- }
40
- interface ThemeRadius {
41
- none: string;
42
- sm: string;
43
- md: string;
44
- lg: string;
45
- xl: string;
46
- '2xl': string;
47
- full: string;
48
- }
49
- interface ThemeTypography {
50
- fontFamily: {
51
- sans: string;
52
- serif: string;
53
- mono: string;
54
- };
55
- fontSize: {
56
- xs: string;
57
- sm: string;
58
- base: string;
59
- lg: string;
60
- xl: string;
61
- '2xl': string;
62
- '3xl': string;
63
- '4xl': string;
64
- '5xl': string;
65
- };
66
- fontWeight: {
67
- light: string;
68
- normal: string;
69
- medium: string;
70
- semibold: string;
71
- bold: string;
72
- };
73
- lineHeight: {
74
- tight: string;
75
- normal: string;
76
- relaxed: string;
77
- };
78
- }
79
- interface ThemeTransitions {
80
- fast: string;
81
- normal: string;
82
- slow: string;
83
- bounce: string;
84
- }
85
- interface Theme {
86
- name: string;
87
- mode: ThemeMode;
88
- colors: ThemeColors;
89
- spacing: ThemeSpacing;
90
- radius: ThemeRadius;
91
- typography: ThemeTypography;
92
- transitions: ThemeTransitions;
93
- zIndex: {
94
- dropdown: number;
95
- modal: number;
96
- tooltip: number;
97
- overlay: number;
98
- };
99
- }
6
+ type DensityMode = 'compact' | 'comfortable' | 'default';
7
+ type DirectionMode = 'ltr' | 'rtl';
100
8
  interface ThemeContextValue {
101
- theme: Theme;
102
9
  mode: ThemeMode;
103
10
  setMode: (mode: ThemeMode) => void;
104
11
  toggleMode: () => void;
12
+ density: DensityMode;
13
+ setDensity: (density: DensityMode) => void;
14
+ direction: DirectionMode;
15
+ setDirection: (direction: DirectionMode) => void;
105
16
  isDark: boolean;
106
17
  isLight: boolean;
107
18
  isAuto: boolean;
108
19
  systemPrefersDark: boolean;
109
- applyTheme: (customTheme: Partial<Theme>) => void;
110
- resetTheme: () => void;
20
+ resolvedMode: 'light' | 'dark';
111
21
  }
112
- interface ThemeProviderProps$1 {
22
+ interface ThemeProviderProps {
113
23
  children: React.ReactNode;
114
24
  defaultMode?: ThemeMode;
115
- customTheme?: Partial<Theme>;
25
+ defaultDensity?: DensityMode;
26
+ defaultDirection?: DirectionMode;
116
27
  storageKey?: string;
117
28
  enableTransitions?: boolean;
118
- className?: string;
119
- style?: React.CSSProperties;
29
+ persistMode?: boolean;
30
+ persistDensity?: boolean;
31
+ persistDirection?: boolean;
120
32
  }
121
33
  interface UseThemeOptions {
122
34
  defaultMode?: ThemeMode;
@@ -124,76 +36,33 @@ interface UseThemeOptions {
124
36
  }
125
37
  interface ThemeConfig {
126
38
  defaultMode?: ThemeMode;
127
- defaultTheme?: string;
39
+ defaultDensity?: DensityMode;
40
+ defaultDirection?: DirectionMode;
128
41
  persistMode?: boolean;
42
+ persistDensity?: boolean;
43
+ persistDirection?: boolean;
129
44
  storageKey?: string;
130
45
  enableTransitions?: boolean;
131
- customThemes?: Record<string, Theme>;
132
46
  }
133
- interface ThemeVariables {
134
- colors: Record<keyof ThemeColors, string>;
135
- spacing: Record<keyof ThemeSpacing, string>;
136
- radius: Record<keyof ThemeRadius, string>;
47
+ interface Theme {
48
+ name: string;
49
+ mode: ThemeMode;
50
+ colors: Record<string, string>;
51
+ spacing: Record<string, string>;
52
+ radius: Record<string, string>;
137
53
  typography: {
138
- fontFamily: Record<keyof ThemeTypography['fontFamily'], string>;
139
- fontSize: Record<keyof ThemeTypography['fontSize'], string>;
140
- fontWeight: Record<keyof ThemeTypography['fontWeight'], string>;
141
- lineHeight: Record<keyof ThemeTypography['lineHeight'], string>;
54
+ fontFamily: Record<string, string>;
55
+ fontSize: Record<string, string>;
56
+ fontWeight: Record<string, string | number>;
57
+ lineHeight: Record<string, string | number>;
142
58
  };
143
- transitions: Record<keyof ThemeTransitions, string>;
144
- zIndex: Record<keyof Theme['zIndex'], string>;
59
+ transitions: Record<string, string>;
60
+ zIndex: Record<string, number>;
145
61
  }
146
62
 
147
- declare const lightTheme: Theme;
148
- declare const darkTheme: Theme;
149
- declare const defaultTheme: Theme;
150
- declare const themes: {
151
- light: Theme;
152
- dark: Theme;
153
- };
154
- declare const defaultThemes: {
155
- default: Theme;
156
- light: Theme;
157
- dark: Theme;
158
- };
159
- declare function mergeTheme(baseTheme: Theme, customTheme: Partial<Theme>): Theme;
160
-
161
- interface ThemeContextType {
162
- currentTheme: Theme;
163
- mode: ThemeMode;
164
- setMode: (mode: ThemeMode) => void;
165
- setTheme: (theme: Theme) => void;
166
- themes: Record<string, Theme>;
167
- toggleMode: () => void;
168
- }
169
- interface ThemeProviderProps {
170
- children: ReactNode;
171
- config?: ThemeConfig;
172
- defaultMode?: ThemeMode;
173
- defaultTheme?: string;
174
- persistMode?: boolean;
175
- storageKey?: string;
176
- customThemes?: Record<string, Theme>;
177
- }
178
63
  declare const ThemeProvider: React$1.FC<ThemeProviderProps>;
179
64
 
180
- /**
181
- * Hook to access theme context
182
- */
183
- declare function useTheme(): ThemeContextType;
184
-
185
- /**
186
- * Hook that provides theme toggle functionality
187
- */
188
- declare function useThemeToggle(): {
189
- mode: ThemeMode;
190
- setMode: (mode: ThemeMode) => void;
191
- toggleMode: () => void;
192
- isDark: boolean;
193
- isLight: boolean;
194
- isAuto: boolean;
195
- effectiveMode: "light" | "dark";
196
- };
65
+ declare function useTheme(): ThemeContextValue;
197
66
 
198
67
  type ThemeToggleVariant = "default" | "outline" | "ghost" | "link" | "circle" | "icon";
199
68
  interface ThemeToggleProps {
@@ -201,21 +70,9 @@ interface ThemeToggleProps {
201
70
  style?: React$1.CSSProperties;
202
71
  showLabels?: boolean;
203
72
  size?: "sm" | "md" | "lg";
204
- /**
205
- * Custom light icon (default: ☀️)
206
- */
207
73
  lightIcon?: ReactNode | LucideIcon | string;
208
- /**
209
- * Custom dark icon (default: 🌙)
210
- */
211
74
  darkIcon?: ReactNode | LucideIcon | string;
212
- /**
213
- * Button aria-label
214
- */
215
75
  ariaLabel?: string;
216
- /**
217
- * Button variant
218
- */
219
76
  variant?: ThemeToggleVariant;
220
77
  }
221
78
  declare const ThemeToggle: React$1.FC<ThemeToggleProps>;
@@ -223,37 +80,14 @@ declare const ThemeToggle: React$1.FC<ThemeToggleProps>;
223
80
  interface ThemeSelectorProps {
224
81
  className?: string;
225
82
  style?: React$1.CSSProperties;
226
- showLabels?: boolean;
227
- options?: Array<{
228
- mode: ThemeMode;
229
- label: string;
230
- icon?: string;
231
- }>;
83
+ variant?: "buttons" | "dropdown";
232
84
  }
233
85
  declare const ThemeSelector: React$1.FC<ThemeSelectorProps>;
234
86
 
235
- /**
236
- * Creates a new theme by merging a base theme with custom properties
237
- */
238
- declare function createTheme(baseTheme: Theme, customTheme: Partial<Theme>): Theme;
239
-
240
- /**
241
- * Applies theme CSS variables to the document root
242
- */
243
- declare function applyTheme(theme: Theme, mode: ThemeMode): void;
244
-
245
- /**
246
- * Merges multiple themes into a single theme
247
- * Later themes in the array take precedence over earlier ones
248
- */
249
- declare function mergeThemes(...themes: Array<Theme | Partial<Theme>>): Theme;
250
- /**
251
- * Merges theme colors only
252
- */
253
- declare function mergeThemeColors(baseColors: Theme['colors'], ...colorSets: Array<Partial<Theme['colors']>>): Theme['colors'];
254
- /**
255
- * Deep merge utility for complex theme objects
256
- */
257
- declare function deepMergeThemes(target: Theme, ...sources: Array<Partial<Theme>>): Theme;
87
+ interface DensitySelectorProps {
88
+ className?: string;
89
+ style?: React$1.CSSProperties;
90
+ }
91
+ declare const DensitySelector: React$1.FC<DensitySelectorProps>;
258
92
 
259
- export { type Theme, type ThemeColors, type ThemeConfig, type ThemeContextType, type ThemeContextValue, type ThemeMode, ThemeProvider, type ThemeProviderProps$1 as ThemeProviderProps, type ThemeRadius, ThemeSelector, type ThemeSpacing, ThemeToggle, type ThemeTransitions, type ThemeTypography, type ThemeVariables, type UseThemeOptions, applyTheme, createTheme, darkTheme, deepMergeThemes, ThemeProvider as default, defaultTheme, defaultThemes, lightTheme, mergeTheme, mergeThemeColors, mergeThemes, themes, useTheme, useThemeToggle };
93
+ export { type DensityMode, DensitySelector, type DirectionMode, type Theme, type ThemeConfig, type ThemeContextValue, type ThemeMode, ThemeProvider, type ThemeProviderProps, ThemeSelector, ThemeToggle, type UseThemeOptions, ThemeProvider as default, useTheme };