@tydavidson/design-system 1.1.18 → 1.1.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.
@@ -1,48 +1,6 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import { ThemeProviderProps } from 'next-themes/dist/types';
3
3
 
4
- /**
5
- * Utility functions for theme handling
6
- */
7
- /**
8
- * Supported color theme values
9
- */
10
- type ThemeColor = 'brand' | 'error' | 'warning' | 'success';
11
- /**
12
- * Supported component variant types
13
- */
14
- type ComponentVariant = 'primary' | 'secondary' | 'tertiary';
15
- /**
16
- * Map design system colors to shadcn variants
17
- *
18
- * @param color - The design system color
19
- * @returns The corresponding shadcn variant
20
- */
21
- declare const mapColorToShadcnVariant: (color: ThemeColor) => "secondary" | "default" | "destructive";
22
- /**
23
- * Map design system variants to shadcn variants
24
- *
25
- * @param variant - The design system variant
26
- * @returns The corresponding shadcn variant
27
- */
28
- declare const mapVariantToShadcnVariant: (variant: ComponentVariant) => "default" | "outline" | "ghost";
29
- /**
30
- * Generate Tailwind classes for color/variant combinations
31
- *
32
- * @param color - The design system color
33
- * @param variant - The design system variant
34
- * @returns String of Tailwind classes
35
- */
36
- declare const getColorVariantClasses: (color: ThemeColor, variant: ComponentVariant) => string;
37
- /**
38
- * Determine if the current theme is dark
39
- *
40
- * @param theme - The current theme
41
- * @param systemTheme - The system theme
42
- * @returns True if the theme is dark
43
- */
44
- declare const isDarkTheme: (theme: string | undefined, systemTheme: string | undefined) => boolean;
45
-
46
4
  /**
47
5
  * ThemeProvider component for handling theme state
48
6
  *
@@ -83,4 +41,4 @@ declare function useThemeServer(): {
83
41
  isDark: boolean;
84
42
  };
85
43
 
86
- export { ClientThemeProvider, ClientThemeToggle, type ComponentVariant, type ThemeColor, ThemeProvider, ThemeProviderNoSSR, getColorVariantClasses, isDarkTheme, mapColorToShadcnVariant, mapVariantToShadcnVariant, useThemeServer };
44
+ export { ClientThemeProvider, ClientThemeToggle, ThemeProvider, ThemeProviderNoSSR, useThemeServer };
@@ -1,48 +1,6 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import { ThemeProviderProps } from 'next-themes/dist/types';
3
3
 
4
- /**
5
- * Utility functions for theme handling
6
- */
7
- /**
8
- * Supported color theme values
9
- */
10
- type ThemeColor = 'brand' | 'error' | 'warning' | 'success';
11
- /**
12
- * Supported component variant types
13
- */
14
- type ComponentVariant = 'primary' | 'secondary' | 'tertiary';
15
- /**
16
- * Map design system colors to shadcn variants
17
- *
18
- * @param color - The design system color
19
- * @returns The corresponding shadcn variant
20
- */
21
- declare const mapColorToShadcnVariant: (color: ThemeColor) => "secondary" | "default" | "destructive";
22
- /**
23
- * Map design system variants to shadcn variants
24
- *
25
- * @param variant - The design system variant
26
- * @returns The corresponding shadcn variant
27
- */
28
- declare const mapVariantToShadcnVariant: (variant: ComponentVariant) => "default" | "outline" | "ghost";
29
- /**
30
- * Generate Tailwind classes for color/variant combinations
31
- *
32
- * @param color - The design system color
33
- * @param variant - The design system variant
34
- * @returns String of Tailwind classes
35
- */
36
- declare const getColorVariantClasses: (color: ThemeColor, variant: ComponentVariant) => string;
37
- /**
38
- * Determine if the current theme is dark
39
- *
40
- * @param theme - The current theme
41
- * @param systemTheme - The system theme
42
- * @returns True if the theme is dark
43
- */
44
- declare const isDarkTheme: (theme: string | undefined, systemTheme: string | undefined) => boolean;
45
-
46
4
  /**
47
5
  * ThemeProvider component for handling theme state
48
6
  *
@@ -83,4 +41,4 @@ declare function useThemeServer(): {
83
41
  isDark: boolean;
84
42
  };
85
43
 
86
- export { ClientThemeProvider, ClientThemeToggle, type ComponentVariant, type ThemeColor, ThemeProvider, ThemeProviderNoSSR, getColorVariantClasses, isDarkTheme, mapColorToShadcnVariant, mapVariantToShadcnVariant, useThemeServer };
44
+ export { ClientThemeProvider, ClientThemeToggle, ThemeProvider, ThemeProviderNoSSR, useThemeServer };
@@ -190,71 +190,10 @@ function useThemeServer() {
190
190
  };
191
191
  }
192
192
 
193
- // src/lib/theme-utils.ts
194
- var mapColorToShadcnVariant = (color) => {
195
- switch (color) {
196
- case "brand":
197
- return "default";
198
- case "error":
199
- return "destructive";
200
- case "warning":
201
- case "success":
202
- return "secondary";
203
- // Will need additional classes
204
- default:
205
- return "default";
206
- }
207
- };
208
- var mapVariantToShadcnVariant = (variant) => {
209
- switch (variant) {
210
- case "primary":
211
- return "default";
212
- case "secondary":
213
- return "outline";
214
- case "tertiary":
215
- return "ghost";
216
- default:
217
- return "default";
218
- }
219
- };
220
- var getColorVariantClasses = (color, variant) => {
221
- const colorVariantMap = {
222
- primary: {
223
- brand: "bg-brand-600 hover:bg-brand-700 text-white focus-visible:ring-brand-500",
224
- error: "bg-error-600 hover:bg-error-700 text-white focus-visible:ring-error-500",
225
- warning: "bg-warning-600 hover:bg-warning-700 text-white focus-visible:ring-warning-500",
226
- success: "bg-success-600 hover:bg-success-700 text-white focus-visible:ring-success-500"
227
- },
228
- secondary: {
229
- brand: "border-brand-300 text-brand-700 hover:bg-brand-50 focus-visible:ring-brand-500",
230
- error: "border-error-300 text-error-700 hover:bg-error-50 focus-visible:ring-error-500",
231
- warning: "border-warning-300 text-warning-700 hover:bg-warning-50 focus-visible:ring-warning-500",
232
- success: "border-success-300 text-success-700 hover:bg-success-50 focus-visible:ring-success-500"
233
- },
234
- tertiary: {
235
- brand: "text-brand-700 hover:bg-brand-50 focus-visible:ring-brand-500",
236
- error: "text-error-700 hover:bg-error-50 focus-visible:ring-error-500",
237
- warning: "text-warning-700 hover:bg-warning-50 focus-visible:ring-warning-500",
238
- success: "text-success-700 hover:bg-success-50 focus-visible:ring-success-500"
239
- }
240
- };
241
- return colorVariantMap[variant]?.[color] || "";
242
- };
243
- var isDarkTheme = (theme, systemTheme) => {
244
- if (theme === "system") {
245
- return systemTheme === "dark";
246
- }
247
- return theme === "dark";
248
- };
249
-
250
193
  exports.ClientThemeProvider = ClientThemeProvider;
251
194
  exports.ClientThemeToggle = ClientThemeToggle;
252
195
  exports.ThemeProvider = ThemeProvider;
253
196
  exports.ThemeProviderNoSSR = ThemeProviderNoSSR;
254
- exports.getColorVariantClasses = getColorVariantClasses;
255
- exports.isDarkTheme = isDarkTheme;
256
- exports.mapColorToShadcnVariant = mapColorToShadcnVariant;
257
- exports.mapVariantToShadcnVariant = mapVariantToShadcnVariant;
258
197
  exports.useThemeServer = useThemeServer;
259
198
  //# sourceMappingURL=index.js.map
260
199
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/themes/theme-provider.tsx","../../src/themes/client-wrapper.tsx","../../src/themes/theme-context.tsx","../../src/lib/theme-utils.ts"],"names":["React","jsx","React2","Fragment","jsxs"],"mappings":"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","file":"index.js","sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport type { ThemeProviderProps } from \"next-themes/dist/types\"\n\n/**\n * ThemeProvider component for handling theme state\n * \n * This wraps the next-themes provider with sensible defaults\n * for handling light/dark themes and system preferences\n * \n * IMPORTANT: This component must be used in a Client Component context.\n * For Server Components, use the NoSSR wrapper or dynamic imports.\n */\nexport function ThemeProvider({ \n children, \n ...props \n}: ThemeProviderProps) {\n const [NextThemesProvider, setNextThemesProvider] = React.useState<any>(undefined);\n const [mounted, setMounted] = React.useState(false);\n\n React.useEffect(() => {\n // Only import next-themes on the client side\n import('next-themes').then(({ ThemeProvider: Provider }) => {\n setNextThemesProvider(() => Provider);\n setMounted(true);\n });\n }, []);\n\n // Return children without theme provider during SSR or before mounting\n if (!mounted || !NextThemesProvider) {\n return <>{children}</>;\n }\n\n return (\n <NextThemesProvider\n attribute=\"class\"\n defaultTheme=\"system\"\n enableSystem\n disableTransitionOnChange\n {...props}\n >\n {children}\n </NextThemesProvider>\n )\n}\n\n/**\n * NoSSR wrapper for theme provider to prevent SSR issues\n * Use this when you need to ensure the theme provider only renders on the client\n */\nexport function ThemeProviderNoSSR({ \n children, \n ...props \n}: ThemeProviderProps) {\n const [mounted, setMounted] = React.useState(false);\n\n React.useEffect(() => {\n setMounted(true);\n }, []);\n\n if (!mounted) {\n return <>{children}</>;\n }\n\n return (\n <ThemeProvider {...props}>\n {children}\n </ThemeProvider>\n );\n}","\"use client\"\n\nimport * as React from \"react\"\nimport { ThemeProvider } from \"./theme-provider\"\nimport type { ThemeProviderProps } from \"next-themes/dist/types\"\n\n/**\n * Client-only theme provider wrapper\n * This component ensures theme functionality only runs on the client side\n * without using next/dynamic which causes Server Component issues\n */\nexport function ClientThemeProvider({ \n children, \n ...props \n}: ThemeProviderProps) {\n const [mounted, setMounted] = React.useState(false);\n\n React.useEffect(() => {\n setMounted(true);\n }, []);\n\n // During SSR or before mounting, render children without theme provider\n if (!mounted) {\n return <>{children}</>;\n }\n\n // Once mounted, render with theme provider\n return (\n <ThemeProvider {...props}>\n {children}\n </ThemeProvider>\n );\n}\n\n/**\n * Client-only theme toggle wrapper\n * This component ensures theme toggle only renders on the client side\n * and provides a safe fallback for Server Components\n */\nexport function ClientThemeToggle(props: any) {\n const [mounted, setMounted] = React.useState(false);\n const [isDark, setIsDark] = React.useState(false);\n\n React.useEffect(() => {\n setMounted(true);\n // Check current theme\n if (typeof window !== 'undefined') {\n const savedTheme = localStorage.getItem('theme');\n const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;\n const currentTheme = savedTheme || (systemPrefersDark ? 'dark' : 'light');\n setIsDark(currentTheme === 'dark');\n }\n }, []);\n\n const toggleTheme = () => {\n if (typeof window !== 'undefined') {\n const newTheme = isDark ? 'light' : 'dark';\n localStorage.setItem('theme', newTheme);\n document.documentElement.classList.toggle('dark', newTheme === 'dark');\n setIsDark(newTheme === 'dark');\n }\n };\n\n // During SSR or before mounting, render a placeholder\n if (!mounted) {\n return (\n <button\n type=\"button\"\n className=\"inline-flex items-center justify-center rounded-md border border-input bg-background h-10 w-10\"\n aria-label=\"Toggle theme\"\n {...props}\n >\n <svg\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <circle cx=\"12\" cy=\"12\" r=\"4\" />\n <path d=\"M12 2v2\" />\n <path d=\"M12 20v2\" />\n <path d=\"m4.93 4.93 1.41 1.41\" />\n <path d=\"m17.66 17.66 1.41 1.41\" />\n <path d=\"M2 12h2\" />\n <path d=\"M20 12h2\" />\n <path d=\"m6.34 17.66-1.41 1.41\" />\n <path d=\"m19.07 4.93-1.41 1.41\" />\n </svg>\n </button>\n );\n }\n\n return (\n <button\n type=\"button\"\n onClick={toggleTheme}\n className=\"inline-flex items-center justify-center rounded-md border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 w-10\"\n aria-label=\"Toggle theme\"\n {...props}\n >\n {isDark ? (\n <svg\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <circle cx=\"12\" cy=\"12\" r=\"4\" />\n <path d=\"M12 2v2\" />\n <path d=\"M12 20v2\" />\n <path d=\"m4.93 4.93 1.41 1.41\" />\n <path d=\"m17.66 17.66 1.41 1.41\" />\n <path d=\"M2 12h2\" />\n <path d=\"M20 12h2\" />\n <path d=\"m6.34 17.66-1.41 1.41\" />\n <path d=\"m19.07 4.93-1.41 1.41\" />\n </svg>\n ) : (\n <svg\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <path d=\"M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z\" />\n </svg>\n )}\n </button>\n );\n} ","\"use client\"\n\nimport * as React from \"react\"\n\n/**\n * Server-safe theme hook that can be used in Server Components\n * Returns default theme values without accessing client-side APIs\n */\nexport function useThemeServer() {\n return {\n theme: \"system\",\n setTheme: (theme: string) => {},\n resolvedTheme: \"light\",\n isDark: false,\n };\n}\n\n/**\n * @deprecated Use ThemeProvider from './theme-provider' instead\n * This component is kept for backward compatibility but is no longer needed\n */\nexport function ThemeContextProvider({ \n children \n}: { \n children: React.ReactNode \n}) {\n // This is now a no-op wrapper for backward compatibility\n return <>{children}</>;\n}\n\n/**\n * @deprecated Use useTheme from next-themes directly or use the ThemeProvider\n * This hook is kept for backward compatibility but is no longer needed\n */\nexport function useTheme() {\n // Import next-themes dynamically to avoid SSR issues\n const [themeData, setThemeData] = React.useState({\n theme: \"system\",\n setTheme: (theme: string) => {},\n resolvedTheme: \"light\",\n isDark: false,\n });\n const [mounted, setMounted] = React.useState(false);\n\n React.useEffect(() => {\n // Only run on client side\n if (typeof window === 'undefined') return;\n\n // Import next-themes and use it properly\n import('next-themes').then((nextThemes) => {\n // Create a simple theme manager that doesn't violate hook rules\n const themeManager = {\n getTheme: () => {\n // Get theme from localStorage or system preference\n if (typeof window !== 'undefined') {\n const savedTheme = localStorage.getItem('theme');\n if (savedTheme) return savedTheme;\n \n // Check system preference\n if (window.matchMedia('(prefers-color-scheme: dark)').matches) {\n return 'dark';\n }\n }\n return 'light';\n },\n setTheme: (theme: string) => {\n if (typeof window !== 'undefined') {\n localStorage.setItem('theme', theme);\n document.documentElement.classList.toggle('dark', theme === 'dark');\n // Trigger a re-render\n setThemeData(prev => ({\n ...prev,\n theme,\n resolvedTheme: theme,\n isDark: theme === 'dark'\n }));\n }\n }\n };\n\n const currentTheme = themeManager.getTheme();\n const isDark = currentTheme === 'dark';\n \n setThemeData({\n theme: currentTheme,\n setTheme: themeManager.setTheme,\n resolvedTheme: currentTheme,\n isDark,\n });\n setMounted(true);\n });\n }, []);\n\n return themeData;\n}","/**\n * Utility functions for theme handling\n */\n\n/**\n * Supported color theme values\n */\nexport type ThemeColor = 'brand' | 'error' | 'warning' | 'success';\n\n/**\n * Supported component variant types\n */\nexport type ComponentVariant = 'primary' | 'secondary' | 'tertiary';\n\n/**\n * Map design system colors to shadcn variants\n * \n * @param color - The design system color\n * @returns The corresponding shadcn variant\n */\nexport const mapColorToShadcnVariant = (color: ThemeColor) => {\n switch (color) {\n case 'brand': return 'default';\n case 'error': return 'destructive';\n case 'warning':\n case 'success':\n return 'secondary'; // Will need additional classes\n default: return 'default';\n }\n};\n\n/**\n * Map design system variants to shadcn variants\n * \n * @param variant - The design system variant\n * @returns The corresponding shadcn variant\n */\nexport const mapVariantToShadcnVariant = (variant: ComponentVariant) => {\n switch (variant) {\n case 'primary': return 'default';\n case 'secondary': return 'outline';\n case 'tertiary': return 'ghost';\n default: return 'default';\n }\n};\n\n/**\n * Generate Tailwind classes for color/variant combinations\n * \n * @param color - The design system color\n * @param variant - The design system variant\n * @returns String of Tailwind classes\n */\nexport const getColorVariantClasses = (\n color: ThemeColor, \n variant: ComponentVariant\n): string => {\n const colorVariantMap: Record<ComponentVariant, Record<ThemeColor, string>> = {\n primary: {\n brand: 'bg-brand-600 hover:bg-brand-700 text-white focus-visible:ring-brand-500',\n error: 'bg-error-600 hover:bg-error-700 text-white focus-visible:ring-error-500',\n warning: 'bg-warning-600 hover:bg-warning-700 text-white focus-visible:ring-warning-500',\n success: 'bg-success-600 hover:bg-success-700 text-white focus-visible:ring-success-500',\n },\n secondary: {\n brand: 'border-brand-300 text-brand-700 hover:bg-brand-50 focus-visible:ring-brand-500',\n error: 'border-error-300 text-error-700 hover:bg-error-50 focus-visible:ring-error-500',\n warning: 'border-warning-300 text-warning-700 hover:bg-warning-50 focus-visible:ring-warning-500',\n success: 'border-success-300 text-success-700 hover:bg-success-50 focus-visible:ring-success-500',\n },\n tertiary: {\n brand: 'text-brand-700 hover:bg-brand-50 focus-visible:ring-brand-500',\n error: 'text-error-700 hover:bg-error-50 focus-visible:ring-error-500',\n warning: 'text-warning-700 hover:bg-warning-50 focus-visible:ring-warning-500',\n success: 'text-success-700 hover:bg-success-50 focus-visible:ring-success-500',\n }\n };\n\n return colorVariantMap[variant]?.[color] || '';\n};\n\n/**\n * Determine if the current theme is dark\n * \n * @param theme - The current theme\n * @param systemTheme - The system theme\n * @returns True if the theme is dark\n */\nexport const isDarkTheme = (theme: string | undefined, systemTheme: string | undefined): boolean => {\n if (theme === 'system') {\n return systemTheme === 'dark';\n }\n return theme === 'dark';\n};"]}
1
+ {"version":3,"sources":["../../src/themes/theme-provider.tsx","../../src/themes/client-wrapper.tsx","../../src/themes/theme-context.tsx"],"names":["React","jsx","React2","Fragment","jsxs"],"mappings":"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","file":"index.js","sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport type { ThemeProviderProps } from \"next-themes/dist/types\"\n\n/**\n * ThemeProvider component for handling theme state\n * \n * This wraps the next-themes provider with sensible defaults\n * for handling light/dark themes and system preferences\n * \n * IMPORTANT: This component must be used in a Client Component context.\n * For Server Components, use the NoSSR wrapper or dynamic imports.\n */\nexport function ThemeProvider({ \n children, \n ...props \n}: ThemeProviderProps) {\n const [NextThemesProvider, setNextThemesProvider] = React.useState<any>(undefined);\n const [mounted, setMounted] = React.useState(false);\n\n React.useEffect(() => {\n // Only import next-themes on the client side\n import('next-themes').then(({ ThemeProvider: Provider }) => {\n setNextThemesProvider(() => Provider);\n setMounted(true);\n });\n }, []);\n\n // Return children without theme provider during SSR or before mounting\n if (!mounted || !NextThemesProvider) {\n return <>{children}</>;\n }\n\n return (\n <NextThemesProvider\n attribute=\"class\"\n defaultTheme=\"system\"\n enableSystem\n disableTransitionOnChange\n {...props}\n >\n {children}\n </NextThemesProvider>\n )\n}\n\n/**\n * NoSSR wrapper for theme provider to prevent SSR issues\n * Use this when you need to ensure the theme provider only renders on the client\n */\nexport function ThemeProviderNoSSR({ \n children, \n ...props \n}: ThemeProviderProps) {\n const [mounted, setMounted] = React.useState(false);\n\n React.useEffect(() => {\n setMounted(true);\n }, []);\n\n if (!mounted) {\n return <>{children}</>;\n }\n\n return (\n <ThemeProvider {...props}>\n {children}\n </ThemeProvider>\n );\n}","\"use client\"\n\nimport * as React from \"react\"\nimport { ThemeProvider } from \"./theme-provider\"\nimport type { ThemeProviderProps } from \"next-themes/dist/types\"\n\n/**\n * Client-only theme provider wrapper\n * This component ensures theme functionality only runs on the client side\n * without using next/dynamic which causes Server Component issues\n */\nexport function ClientThemeProvider({ \n children, \n ...props \n}: ThemeProviderProps) {\n const [mounted, setMounted] = React.useState(false);\n\n React.useEffect(() => {\n setMounted(true);\n }, []);\n\n // During SSR or before mounting, render children without theme provider\n if (!mounted) {\n return <>{children}</>;\n }\n\n // Once mounted, render with theme provider\n return (\n <ThemeProvider {...props}>\n {children}\n </ThemeProvider>\n );\n}\n\n/**\n * Client-only theme toggle wrapper\n * This component ensures theme toggle only renders on the client side\n * and provides a safe fallback for Server Components\n */\nexport function ClientThemeToggle(props: any) {\n const [mounted, setMounted] = React.useState(false);\n const [isDark, setIsDark] = React.useState(false);\n\n React.useEffect(() => {\n setMounted(true);\n // Check current theme\n if (typeof window !== 'undefined') {\n const savedTheme = localStorage.getItem('theme');\n const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;\n const currentTheme = savedTheme || (systemPrefersDark ? 'dark' : 'light');\n setIsDark(currentTheme === 'dark');\n }\n }, []);\n\n const toggleTheme = () => {\n if (typeof window !== 'undefined') {\n const newTheme = isDark ? 'light' : 'dark';\n localStorage.setItem('theme', newTheme);\n document.documentElement.classList.toggle('dark', newTheme === 'dark');\n setIsDark(newTheme === 'dark');\n }\n };\n\n // During SSR or before mounting, render a placeholder\n if (!mounted) {\n return (\n <button\n type=\"button\"\n className=\"inline-flex items-center justify-center rounded-md border border-input bg-background h-10 w-10\"\n aria-label=\"Toggle theme\"\n {...props}\n >\n <svg\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <circle cx=\"12\" cy=\"12\" r=\"4\" />\n <path d=\"M12 2v2\" />\n <path d=\"M12 20v2\" />\n <path d=\"m4.93 4.93 1.41 1.41\" />\n <path d=\"m17.66 17.66 1.41 1.41\" />\n <path d=\"M2 12h2\" />\n <path d=\"M20 12h2\" />\n <path d=\"m6.34 17.66-1.41 1.41\" />\n <path d=\"m19.07 4.93-1.41 1.41\" />\n </svg>\n </button>\n );\n }\n\n return (\n <button\n type=\"button\"\n onClick={toggleTheme}\n className=\"inline-flex items-center justify-center rounded-md border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 w-10\"\n aria-label=\"Toggle theme\"\n {...props}\n >\n {isDark ? (\n <svg\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <circle cx=\"12\" cy=\"12\" r=\"4\" />\n <path d=\"M12 2v2\" />\n <path d=\"M12 20v2\" />\n <path d=\"m4.93 4.93 1.41 1.41\" />\n <path d=\"m17.66 17.66 1.41 1.41\" />\n <path d=\"M2 12h2\" />\n <path d=\"M20 12h2\" />\n <path d=\"m6.34 17.66-1.41 1.41\" />\n <path d=\"m19.07 4.93-1.41 1.41\" />\n </svg>\n ) : (\n <svg\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <path d=\"M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z\" />\n </svg>\n )}\n </button>\n );\n} ","\"use client\"\n\nimport * as React from \"react\"\n\n/**\n * Server-safe theme hook that can be used in Server Components\n * Returns default theme values without accessing client-side APIs\n */\nexport function useThemeServer() {\n return {\n theme: \"system\",\n setTheme: (theme: string) => {},\n resolvedTheme: \"light\",\n isDark: false,\n };\n}\n\n/**\n * @deprecated Use ThemeProvider from './theme-provider' instead\n * This component is kept for backward compatibility but is no longer needed\n */\nexport function ThemeContextProvider({ \n children \n}: { \n children: React.ReactNode \n}) {\n // This is now a no-op wrapper for backward compatibility\n return <>{children}</>;\n}\n\n/**\n * @deprecated Use useTheme from next-themes directly or use the ThemeProvider\n * This hook is kept for backward compatibility but is no longer needed\n */\nexport function useTheme() {\n // Import next-themes dynamically to avoid SSR issues\n const [themeData, setThemeData] = React.useState({\n theme: \"system\",\n setTheme: (theme: string) => {},\n resolvedTheme: \"light\",\n isDark: false,\n });\n const [mounted, setMounted] = React.useState(false);\n\n React.useEffect(() => {\n // Only run on client side\n if (typeof window === 'undefined') return;\n\n // Import next-themes and use it properly\n import('next-themes').then((nextThemes) => {\n // Create a simple theme manager that doesn't violate hook rules\n const themeManager = {\n getTheme: () => {\n // Get theme from localStorage or system preference\n if (typeof window !== 'undefined') {\n const savedTheme = localStorage.getItem('theme');\n if (savedTheme) return savedTheme;\n \n // Check system preference\n if (window.matchMedia('(prefers-color-scheme: dark)').matches) {\n return 'dark';\n }\n }\n return 'light';\n },\n setTheme: (theme: string) => {\n if (typeof window !== 'undefined') {\n localStorage.setItem('theme', theme);\n document.documentElement.classList.toggle('dark', theme === 'dark');\n // Trigger a re-render\n setThemeData(prev => ({\n ...prev,\n theme,\n resolvedTheme: theme,\n isDark: theme === 'dark'\n }));\n }\n }\n };\n\n const currentTheme = themeManager.getTheme();\n const isDark = currentTheme === 'dark';\n \n setThemeData({\n theme: currentTheme,\n setTheme: themeManager.setTheme,\n resolvedTheme: currentTheme,\n isDark,\n });\n setMounted(true);\n });\n }, []);\n\n return themeData;\n}"]}
@@ -168,63 +168,6 @@ function useThemeServer() {
168
168
  };
169
169
  }
170
170
 
171
- // src/lib/theme-utils.ts
172
- var mapColorToShadcnVariant = (color) => {
173
- switch (color) {
174
- case "brand":
175
- return "default";
176
- case "error":
177
- return "destructive";
178
- case "warning":
179
- case "success":
180
- return "secondary";
181
- // Will need additional classes
182
- default:
183
- return "default";
184
- }
185
- };
186
- var mapVariantToShadcnVariant = (variant) => {
187
- switch (variant) {
188
- case "primary":
189
- return "default";
190
- case "secondary":
191
- return "outline";
192
- case "tertiary":
193
- return "ghost";
194
- default:
195
- return "default";
196
- }
197
- };
198
- var getColorVariantClasses = (color, variant) => {
199
- const colorVariantMap = {
200
- primary: {
201
- brand: "bg-brand-600 hover:bg-brand-700 text-white focus-visible:ring-brand-500",
202
- error: "bg-error-600 hover:bg-error-700 text-white focus-visible:ring-error-500",
203
- warning: "bg-warning-600 hover:bg-warning-700 text-white focus-visible:ring-warning-500",
204
- success: "bg-success-600 hover:bg-success-700 text-white focus-visible:ring-success-500"
205
- },
206
- secondary: {
207
- brand: "border-brand-300 text-brand-700 hover:bg-brand-50 focus-visible:ring-brand-500",
208
- error: "border-error-300 text-error-700 hover:bg-error-50 focus-visible:ring-error-500",
209
- warning: "border-warning-300 text-warning-700 hover:bg-warning-50 focus-visible:ring-warning-500",
210
- success: "border-success-300 text-success-700 hover:bg-success-50 focus-visible:ring-success-500"
211
- },
212
- tertiary: {
213
- brand: "text-brand-700 hover:bg-brand-50 focus-visible:ring-brand-500",
214
- error: "text-error-700 hover:bg-error-50 focus-visible:ring-error-500",
215
- warning: "text-warning-700 hover:bg-warning-50 focus-visible:ring-warning-500",
216
- success: "text-success-700 hover:bg-success-50 focus-visible:ring-success-500"
217
- }
218
- };
219
- return colorVariantMap[variant]?.[color] || "";
220
- };
221
- var isDarkTheme = (theme, systemTheme) => {
222
- if (theme === "system") {
223
- return systemTheme === "dark";
224
- }
225
- return theme === "dark";
226
- };
227
-
228
- export { ClientThemeProvider, ClientThemeToggle, ThemeProvider, ThemeProviderNoSSR, getColorVariantClasses, isDarkTheme, mapColorToShadcnVariant, mapVariantToShadcnVariant, useThemeServer };
171
+ export { ClientThemeProvider, ClientThemeToggle, ThemeProvider, ThemeProviderNoSSR, useThemeServer };
229
172
  //# sourceMappingURL=index.mjs.map
230
173
  //# sourceMappingURL=index.mjs.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/themes/theme-provider.tsx","../../src/themes/client-wrapper.tsx","../../src/themes/theme-context.tsx","../../src/lib/theme-utils.ts"],"names":["React2","jsx","Fragment"],"mappings":";;;;AAcO,SAAS,aAAA,CAAc;AAAA,EAC5B,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAuB;AACrB,EAAA,MAAM,CAAC,kBAAA,EAAoB,qBAAqB,CAAA,GAAU,eAAc,MAAS,CAAA;AACjF,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAU,eAAS,KAAK,CAAA;AAElD,EAAM,gBAAU,MAAM;AAEpB,IAAA,OAAO,aAAa,CAAA,CAAE,IAAA,CAAK,CAAC,EAAE,aAAA,EAAe,UAAS,KAAM;AAC1D,MAAA,qBAAA,CAAsB,MAAM,QAAQ,CAAA;AACpC,MAAA,UAAA,CAAW,IAAI,CAAA;AAAA,IACjB,CAAC,CAAA;AAAA,EACH,CAAA,EAAG,EAAE,CAAA;AAGL,EAAA,IAAI,CAAC,OAAA,IAAW,CAAC,kBAAA,EAAoB;AACnC,IAAA,uCAAU,QAAA,EAAS,CAAA;AAAA,EACrB;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,kBAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAU,OAAA;AAAA,MACV,YAAA,EAAa,QAAA;AAAA,MACb,YAAA,EAAY,IAAA;AAAA,MACZ,yBAAA,EAAyB,IAAA;AAAA,MACxB,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ;AAMO,SAAS,kBAAA,CAAmB;AAAA,EACjC,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAuB;AACrB,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAU,eAAS,KAAK,CAAA;AAElD,EAAM,gBAAU,MAAM;AACpB,IAAA,UAAA,CAAW,IAAI,CAAA;AAAA,EACjB,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,IAAI,CAAC,OAAA,EAAS;AACZ,IAAA,uCAAU,QAAA,EAAS,CAAA;AAAA,EACrB;AAEA,EAAA,uBACE,GAAA,CAAC,aAAA,EAAA,EAAe,GAAG,KAAA,EAChB,QAAA,EACH,CAAA;AAEJ;AC3DO,SAAS,mBAAA,CAAoB;AAAA,EAClC,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAuB;AACrB,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAUA,eAAS,KAAK,CAAA;AAElD,EAAMA,gBAAU,MAAM;AACpB,IAAA,UAAA,CAAW,IAAI,CAAA;AAAA,EACjB,CAAA,EAAG,EAAE,CAAA;AAGL,EAAA,IAAI,CAAC,OAAA,EAAS;AACZ,IAAA,uBAAOC,GAAAA,CAAAC,QAAAA,EAAA,EAAG,QAAA,EAAS,CAAA;AAAA,EACrB;AAGA,EAAA,uBACED,GAAAA,CAAC,aAAA,EAAA,EAAe,GAAG,OAChB,QAAA,EACH,CAAA;AAEJ;AAOO,SAAS,kBAAkB,KAAA,EAAY;AAC5C,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAUD,eAAS,KAAK,CAAA;AAClD,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAUA,eAAS,KAAK,CAAA;AAEhD,EAAMA,gBAAU,MAAM;AACpB,IAAA,UAAA,CAAW,IAAI,CAAA;AAEf,IAAA,IAAI,OAAO,WAAW,WAAA,EAAa;AACjC,MAAA,MAAM,UAAA,GAAa,YAAA,CAAa,OAAA,CAAQ,OAAO,CAAA;AAC/C,MAAA,MAAM,iBAAA,GAAoB,MAAA,CAAO,UAAA,CAAW,8BAA8B,CAAA,CAAE,OAAA;AAC5E,MAAA,MAAM,YAAA,GAAe,UAAA,KAAe,iBAAA,GAAoB,MAAA,GAAS,OAAA,CAAA;AACjE,MAAA,SAAA,CAAU,iBAAiB,MAAM,CAAA;AAAA,IACnC;AAAA,EACF,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,cAAc,MAAM;AACxB,IAAA,IAAI,OAAO,WAAW,WAAA,EAAa;AACjC,MAAA,MAAM,QAAA,GAAW,SAAS,OAAA,GAAU,MAAA;AACpC,MAAA,YAAA,CAAa,OAAA,CAAQ,SAAS,QAAQ,CAAA;AACtC,MAAA,QAAA,CAAS,eAAA,CAAgB,SAAA,CAAU,MAAA,CAAO,MAAA,EAAQ,aAAa,MAAM,CAAA;AACrE,MAAA,SAAA,CAAU,aAAa,MAAM,CAAA;AAAA,IAC/B;AAAA,EACF,CAAA;AAGA,EAAA,IAAI,CAAC,OAAA,EAAS;AACZ,IAAA,uBACEC,GAAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAK,QAAA;AAAA,QACL,SAAA,EAAU,gGAAA;AAAA,QACV,YAAA,EAAW,cAAA;AAAA,QACV,GAAG,KAAA;AAAA,QAEJ,QAAA,kBAAA,IAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,KAAA,EAAM,IAAA;AAAA,YACN,MAAA,EAAO,IAAA;AAAA,YACP,OAAA,EAAQ,WAAA;AAAA,YACR,IAAA,EAAK,MAAA;AAAA,YACL,MAAA,EAAO,cAAA;AAAA,YACP,WAAA,EAAY,GAAA;AAAA,YACZ,aAAA,EAAc,OAAA;AAAA,YACd,cAAA,EAAe,OAAA;AAAA,YAEf,QAAA,EAAA;AAAA,8BAAAA,IAAC,QAAA,EAAA,EAAO,EAAA,EAAG,MAAK,EAAA,EAAG,IAAA,EAAK,GAAE,GAAA,EAAI,CAAA;AAAA,8BAC9BA,GAAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,SAAA,EAAU,CAAA;AAAA,8BAClBA,GAAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,UAAA,EAAW,CAAA;AAAA,8BACnBA,GAAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,sBAAA,EAAuB,CAAA;AAAA,8BAC/BA,GAAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,wBAAA,EAAyB,CAAA;AAAA,8BACjCA,GAAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,SAAA,EAAU,CAAA;AAAA,8BAClBA,GAAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,UAAA,EAAW,CAAA;AAAA,8BACnBA,GAAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,uBAAA,EAAwB,CAAA;AAAA,8BAChCA,GAAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,uBAAA,EAAwB;AAAA;AAAA;AAAA;AAClC;AAAA,KACF;AAAA,EAEJ;AAEA,EAAA,uBACEA,GAAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAK,QAAA;AAAA,MACL,OAAA,EAAS,WAAA;AAAA,MACT,SAAA,EAAU,6IAAA;AAAA,MACV,YAAA,EAAW,cAAA;AAAA,MACV,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA,MAAA,mBACC,IAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,KAAA,EAAM,IAAA;AAAA,UACN,MAAA,EAAO,IAAA;AAAA,UACP,OAAA,EAAQ,WAAA;AAAA,UACR,IAAA,EAAK,MAAA;AAAA,UACL,MAAA,EAAO,cAAA;AAAA,UACP,WAAA,EAAY,GAAA;AAAA,UACZ,aAAA,EAAc,OAAA;AAAA,UACd,cAAA,EAAe,OAAA;AAAA,UAEf,QAAA,EAAA;AAAA,4BAAAA,IAAC,QAAA,EAAA,EAAO,EAAA,EAAG,MAAK,EAAA,EAAG,IAAA,EAAK,GAAE,GAAA,EAAI,CAAA;AAAA,4BAC9BA,GAAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,SAAA,EAAU,CAAA;AAAA,4BAClBA,GAAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,UAAA,EAAW,CAAA;AAAA,4BACnBA,GAAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,sBAAA,EAAuB,CAAA;AAAA,4BAC/BA,GAAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,wBAAA,EAAyB,CAAA;AAAA,4BACjCA,GAAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,SAAA,EAAU,CAAA;AAAA,4BAClBA,GAAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,UAAA,EAAW,CAAA;AAAA,4BACnBA,GAAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,uBAAA,EAAwB,CAAA;AAAA,4BAChCA,GAAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,uBAAA,EAAwB;AAAA;AAAA;AAAA,0BAGlCA,GAAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,KAAA,EAAM,IAAA;AAAA,UACN,MAAA,EAAO,IAAA;AAAA,UACP,OAAA,EAAQ,WAAA;AAAA,UACR,IAAA,EAAK,MAAA;AAAA,UACL,MAAA,EAAO,cAAA;AAAA,UACP,WAAA,EAAY,GAAA;AAAA,UACZ,aAAA,EAAc,OAAA;AAAA,UACd,cAAA,EAAe,OAAA;AAAA,UAEf,QAAA,kBAAAA,GAAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,oCAAA,EAAqC;AAAA;AAAA;AAC/C;AAAA,GAEJ;AAEJ;ACrIO,SAAS,cAAA,GAAiB;AAC/B,EAAA,OAAO;AAAA,IACL,KAAA,EAAO,QAAA;AAAA,IACP,QAAA,EAAU,CAAC,KAAA,KAAkB;AAAA,IAAC,CAAA;AAAA,IAC9B,aAAA,EAAe,OAAA;AAAA,IACf,MAAA,EAAQ;AAAA,GACV;AACF;;;ACKO,IAAM,uBAAA,GAA0B,CAAC,KAAA,KAAsB;AAC5D,EAAA,QAAQ,KAAA;AAAO,IACb,KAAK,OAAA;AAAS,MAAA,OAAO,SAAA;AAAA,IACrB,KAAK,OAAA;AAAS,MAAA,OAAO,aAAA;AAAA,IACrB,KAAK,SAAA;AAAA,IACL,KAAK,SAAA;AACH,MAAA,OAAO,WAAA;AAAA;AAAA,IACT;AAAS,MAAA,OAAO,SAAA;AAAA;AAEpB;AAQO,IAAM,yBAAA,GAA4B,CAAC,OAAA,KAA8B;AACtE,EAAA,QAAQ,OAAA;AAAS,IACf,KAAK,SAAA;AAAW,MAAA,OAAO,SAAA;AAAA,IACvB,KAAK,WAAA;AAAa,MAAA,OAAO,SAAA;AAAA,IACzB,KAAK,UAAA;AAAY,MAAA,OAAO,OAAA;AAAA,IACxB;AAAS,MAAA,OAAO,SAAA;AAAA;AAEpB;AASO,IAAM,sBAAA,GAAyB,CACpC,KAAA,EACA,OAAA,KACW;AACX,EAAA,MAAM,eAAA,GAAwE;AAAA,IAC5E,OAAA,EAAS;AAAA,MACP,KAAA,EAAO,yEAAA;AAAA,MACP,KAAA,EAAO,yEAAA;AAAA,MACP,OAAA,EAAS,+EAAA;AAAA,MACT,OAAA,EAAS;AAAA,KACX;AAAA,IACA,SAAA,EAAW;AAAA,MACT,KAAA,EAAO,gFAAA;AAAA,MACP,KAAA,EAAO,gFAAA;AAAA,MACP,OAAA,EAAS,wFAAA;AAAA,MACT,OAAA,EAAS;AAAA,KACX;AAAA,IACA,QAAA,EAAU;AAAA,MACR,KAAA,EAAO,+DAAA;AAAA,MACP,KAAA,EAAO,+DAAA;AAAA,MACP,OAAA,EAAS,qEAAA;AAAA,MACT,OAAA,EAAS;AAAA;AACX,GACF;AAEA,EAAA,OAAO,eAAA,CAAgB,OAAO,CAAA,GAAI,KAAK,CAAA,IAAK,EAAA;AAC9C;AASO,IAAM,WAAA,GAAc,CAAC,KAAA,EAA2B,WAAA,KAA6C;AAClG,EAAA,IAAI,UAAU,QAAA,EAAU;AACtB,IAAA,OAAO,WAAA,KAAgB,MAAA;AAAA,EACzB;AACA,EAAA,OAAO,KAAA,KAAU,MAAA;AACnB","file":"index.mjs","sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport type { ThemeProviderProps } from \"next-themes/dist/types\"\n\n/**\n * ThemeProvider component for handling theme state\n * \n * This wraps the next-themes provider with sensible defaults\n * for handling light/dark themes and system preferences\n * \n * IMPORTANT: This component must be used in a Client Component context.\n * For Server Components, use the NoSSR wrapper or dynamic imports.\n */\nexport function ThemeProvider({ \n children, \n ...props \n}: ThemeProviderProps) {\n const [NextThemesProvider, setNextThemesProvider] = React.useState<any>(undefined);\n const [mounted, setMounted] = React.useState(false);\n\n React.useEffect(() => {\n // Only import next-themes on the client side\n import('next-themes').then(({ ThemeProvider: Provider }) => {\n setNextThemesProvider(() => Provider);\n setMounted(true);\n });\n }, []);\n\n // Return children without theme provider during SSR or before mounting\n if (!mounted || !NextThemesProvider) {\n return <>{children}</>;\n }\n\n return (\n <NextThemesProvider\n attribute=\"class\"\n defaultTheme=\"system\"\n enableSystem\n disableTransitionOnChange\n {...props}\n >\n {children}\n </NextThemesProvider>\n )\n}\n\n/**\n * NoSSR wrapper for theme provider to prevent SSR issues\n * Use this when you need to ensure the theme provider only renders on the client\n */\nexport function ThemeProviderNoSSR({ \n children, \n ...props \n}: ThemeProviderProps) {\n const [mounted, setMounted] = React.useState(false);\n\n React.useEffect(() => {\n setMounted(true);\n }, []);\n\n if (!mounted) {\n return <>{children}</>;\n }\n\n return (\n <ThemeProvider {...props}>\n {children}\n </ThemeProvider>\n );\n}","\"use client\"\n\nimport * as React from \"react\"\nimport { ThemeProvider } from \"./theme-provider\"\nimport type { ThemeProviderProps } from \"next-themes/dist/types\"\n\n/**\n * Client-only theme provider wrapper\n * This component ensures theme functionality only runs on the client side\n * without using next/dynamic which causes Server Component issues\n */\nexport function ClientThemeProvider({ \n children, \n ...props \n}: ThemeProviderProps) {\n const [mounted, setMounted] = React.useState(false);\n\n React.useEffect(() => {\n setMounted(true);\n }, []);\n\n // During SSR or before mounting, render children without theme provider\n if (!mounted) {\n return <>{children}</>;\n }\n\n // Once mounted, render with theme provider\n return (\n <ThemeProvider {...props}>\n {children}\n </ThemeProvider>\n );\n}\n\n/**\n * Client-only theme toggle wrapper\n * This component ensures theme toggle only renders on the client side\n * and provides a safe fallback for Server Components\n */\nexport function ClientThemeToggle(props: any) {\n const [mounted, setMounted] = React.useState(false);\n const [isDark, setIsDark] = React.useState(false);\n\n React.useEffect(() => {\n setMounted(true);\n // Check current theme\n if (typeof window !== 'undefined') {\n const savedTheme = localStorage.getItem('theme');\n const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;\n const currentTheme = savedTheme || (systemPrefersDark ? 'dark' : 'light');\n setIsDark(currentTheme === 'dark');\n }\n }, []);\n\n const toggleTheme = () => {\n if (typeof window !== 'undefined') {\n const newTheme = isDark ? 'light' : 'dark';\n localStorage.setItem('theme', newTheme);\n document.documentElement.classList.toggle('dark', newTheme === 'dark');\n setIsDark(newTheme === 'dark');\n }\n };\n\n // During SSR or before mounting, render a placeholder\n if (!mounted) {\n return (\n <button\n type=\"button\"\n className=\"inline-flex items-center justify-center rounded-md border border-input bg-background h-10 w-10\"\n aria-label=\"Toggle theme\"\n {...props}\n >\n <svg\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <circle cx=\"12\" cy=\"12\" r=\"4\" />\n <path d=\"M12 2v2\" />\n <path d=\"M12 20v2\" />\n <path d=\"m4.93 4.93 1.41 1.41\" />\n <path d=\"m17.66 17.66 1.41 1.41\" />\n <path d=\"M2 12h2\" />\n <path d=\"M20 12h2\" />\n <path d=\"m6.34 17.66-1.41 1.41\" />\n <path d=\"m19.07 4.93-1.41 1.41\" />\n </svg>\n </button>\n );\n }\n\n return (\n <button\n type=\"button\"\n onClick={toggleTheme}\n className=\"inline-flex items-center justify-center rounded-md border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 w-10\"\n aria-label=\"Toggle theme\"\n {...props}\n >\n {isDark ? (\n <svg\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <circle cx=\"12\" cy=\"12\" r=\"4\" />\n <path d=\"M12 2v2\" />\n <path d=\"M12 20v2\" />\n <path d=\"m4.93 4.93 1.41 1.41\" />\n <path d=\"m17.66 17.66 1.41 1.41\" />\n <path d=\"M2 12h2\" />\n <path d=\"M20 12h2\" />\n <path d=\"m6.34 17.66-1.41 1.41\" />\n <path d=\"m19.07 4.93-1.41 1.41\" />\n </svg>\n ) : (\n <svg\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <path d=\"M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z\" />\n </svg>\n )}\n </button>\n );\n} ","\"use client\"\n\nimport * as React from \"react\"\n\n/**\n * Server-safe theme hook that can be used in Server Components\n * Returns default theme values without accessing client-side APIs\n */\nexport function useThemeServer() {\n return {\n theme: \"system\",\n setTheme: (theme: string) => {},\n resolvedTheme: \"light\",\n isDark: false,\n };\n}\n\n/**\n * @deprecated Use ThemeProvider from './theme-provider' instead\n * This component is kept for backward compatibility but is no longer needed\n */\nexport function ThemeContextProvider({ \n children \n}: { \n children: React.ReactNode \n}) {\n // This is now a no-op wrapper for backward compatibility\n return <>{children}</>;\n}\n\n/**\n * @deprecated Use useTheme from next-themes directly or use the ThemeProvider\n * This hook is kept for backward compatibility but is no longer needed\n */\nexport function useTheme() {\n // Import next-themes dynamically to avoid SSR issues\n const [themeData, setThemeData] = React.useState({\n theme: \"system\",\n setTheme: (theme: string) => {},\n resolvedTheme: \"light\",\n isDark: false,\n });\n const [mounted, setMounted] = React.useState(false);\n\n React.useEffect(() => {\n // Only run on client side\n if (typeof window === 'undefined') return;\n\n // Import next-themes and use it properly\n import('next-themes').then((nextThemes) => {\n // Create a simple theme manager that doesn't violate hook rules\n const themeManager = {\n getTheme: () => {\n // Get theme from localStorage or system preference\n if (typeof window !== 'undefined') {\n const savedTheme = localStorage.getItem('theme');\n if (savedTheme) return savedTheme;\n \n // Check system preference\n if (window.matchMedia('(prefers-color-scheme: dark)').matches) {\n return 'dark';\n }\n }\n return 'light';\n },\n setTheme: (theme: string) => {\n if (typeof window !== 'undefined') {\n localStorage.setItem('theme', theme);\n document.documentElement.classList.toggle('dark', theme === 'dark');\n // Trigger a re-render\n setThemeData(prev => ({\n ...prev,\n theme,\n resolvedTheme: theme,\n isDark: theme === 'dark'\n }));\n }\n }\n };\n\n const currentTheme = themeManager.getTheme();\n const isDark = currentTheme === 'dark';\n \n setThemeData({\n theme: currentTheme,\n setTheme: themeManager.setTheme,\n resolvedTheme: currentTheme,\n isDark,\n });\n setMounted(true);\n });\n }, []);\n\n return themeData;\n}","/**\n * Utility functions for theme handling\n */\n\n/**\n * Supported color theme values\n */\nexport type ThemeColor = 'brand' | 'error' | 'warning' | 'success';\n\n/**\n * Supported component variant types\n */\nexport type ComponentVariant = 'primary' | 'secondary' | 'tertiary';\n\n/**\n * Map design system colors to shadcn variants\n * \n * @param color - The design system color\n * @returns The corresponding shadcn variant\n */\nexport const mapColorToShadcnVariant = (color: ThemeColor) => {\n switch (color) {\n case 'brand': return 'default';\n case 'error': return 'destructive';\n case 'warning':\n case 'success':\n return 'secondary'; // Will need additional classes\n default: return 'default';\n }\n};\n\n/**\n * Map design system variants to shadcn variants\n * \n * @param variant - The design system variant\n * @returns The corresponding shadcn variant\n */\nexport const mapVariantToShadcnVariant = (variant: ComponentVariant) => {\n switch (variant) {\n case 'primary': return 'default';\n case 'secondary': return 'outline';\n case 'tertiary': return 'ghost';\n default: return 'default';\n }\n};\n\n/**\n * Generate Tailwind classes for color/variant combinations\n * \n * @param color - The design system color\n * @param variant - The design system variant\n * @returns String of Tailwind classes\n */\nexport const getColorVariantClasses = (\n color: ThemeColor, \n variant: ComponentVariant\n): string => {\n const colorVariantMap: Record<ComponentVariant, Record<ThemeColor, string>> = {\n primary: {\n brand: 'bg-brand-600 hover:bg-brand-700 text-white focus-visible:ring-brand-500',\n error: 'bg-error-600 hover:bg-error-700 text-white focus-visible:ring-error-500',\n warning: 'bg-warning-600 hover:bg-warning-700 text-white focus-visible:ring-warning-500',\n success: 'bg-success-600 hover:bg-success-700 text-white focus-visible:ring-success-500',\n },\n secondary: {\n brand: 'border-brand-300 text-brand-700 hover:bg-brand-50 focus-visible:ring-brand-500',\n error: 'border-error-300 text-error-700 hover:bg-error-50 focus-visible:ring-error-500',\n warning: 'border-warning-300 text-warning-700 hover:bg-warning-50 focus-visible:ring-warning-500',\n success: 'border-success-300 text-success-700 hover:bg-success-50 focus-visible:ring-success-500',\n },\n tertiary: {\n brand: 'text-brand-700 hover:bg-brand-50 focus-visible:ring-brand-500',\n error: 'text-error-700 hover:bg-error-50 focus-visible:ring-error-500',\n warning: 'text-warning-700 hover:bg-warning-50 focus-visible:ring-warning-500',\n success: 'text-success-700 hover:bg-success-50 focus-visible:ring-success-500',\n }\n };\n\n return colorVariantMap[variant]?.[color] || '';\n};\n\n/**\n * Determine if the current theme is dark\n * \n * @param theme - The current theme\n * @param systemTheme - The system theme\n * @returns True if the theme is dark\n */\nexport const isDarkTheme = (theme: string | undefined, systemTheme: string | undefined): boolean => {\n if (theme === 'system') {\n return systemTheme === 'dark';\n }\n return theme === 'dark';\n};"]}
1
+ {"version":3,"sources":["../../src/themes/theme-provider.tsx","../../src/themes/client-wrapper.tsx","../../src/themes/theme-context.tsx"],"names":["React2","jsx","Fragment"],"mappings":";;;;AAcO,SAAS,aAAA,CAAc;AAAA,EAC5B,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAuB;AACrB,EAAA,MAAM,CAAC,kBAAA,EAAoB,qBAAqB,CAAA,GAAU,eAAc,MAAS,CAAA;AACjF,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAU,eAAS,KAAK,CAAA;AAElD,EAAM,gBAAU,MAAM;AAEpB,IAAA,OAAO,aAAa,CAAA,CAAE,IAAA,CAAK,CAAC,EAAE,aAAA,EAAe,UAAS,KAAM;AAC1D,MAAA,qBAAA,CAAsB,MAAM,QAAQ,CAAA;AACpC,MAAA,UAAA,CAAW,IAAI,CAAA;AAAA,IACjB,CAAC,CAAA;AAAA,EACH,CAAA,EAAG,EAAE,CAAA;AAGL,EAAA,IAAI,CAAC,OAAA,IAAW,CAAC,kBAAA,EAAoB;AACnC,IAAA,uCAAU,QAAA,EAAS,CAAA;AAAA,EACrB;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,kBAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAU,OAAA;AAAA,MACV,YAAA,EAAa,QAAA;AAAA,MACb,YAAA,EAAY,IAAA;AAAA,MACZ,yBAAA,EAAyB,IAAA;AAAA,MACxB,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ;AAMO,SAAS,kBAAA,CAAmB;AAAA,EACjC,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAuB;AACrB,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAU,eAAS,KAAK,CAAA;AAElD,EAAM,gBAAU,MAAM;AACpB,IAAA,UAAA,CAAW,IAAI,CAAA;AAAA,EACjB,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,IAAI,CAAC,OAAA,EAAS;AACZ,IAAA,uCAAU,QAAA,EAAS,CAAA;AAAA,EACrB;AAEA,EAAA,uBACE,GAAA,CAAC,aAAA,EAAA,EAAe,GAAG,KAAA,EAChB,QAAA,EACH,CAAA;AAEJ;AC3DO,SAAS,mBAAA,CAAoB;AAAA,EAClC,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAuB;AACrB,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAUA,eAAS,KAAK,CAAA;AAElD,EAAMA,gBAAU,MAAM;AACpB,IAAA,UAAA,CAAW,IAAI,CAAA;AAAA,EACjB,CAAA,EAAG,EAAE,CAAA;AAGL,EAAA,IAAI,CAAC,OAAA,EAAS;AACZ,IAAA,uBAAOC,GAAAA,CAAAC,QAAAA,EAAA,EAAG,QAAA,EAAS,CAAA;AAAA,EACrB;AAGA,EAAA,uBACED,GAAAA,CAAC,aAAA,EAAA,EAAe,GAAG,OAChB,QAAA,EACH,CAAA;AAEJ;AAOO,SAAS,kBAAkB,KAAA,EAAY;AAC5C,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAUD,eAAS,KAAK,CAAA;AAClD,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAUA,eAAS,KAAK,CAAA;AAEhD,EAAMA,gBAAU,MAAM;AACpB,IAAA,UAAA,CAAW,IAAI,CAAA;AAEf,IAAA,IAAI,OAAO,WAAW,WAAA,EAAa;AACjC,MAAA,MAAM,UAAA,GAAa,YAAA,CAAa,OAAA,CAAQ,OAAO,CAAA;AAC/C,MAAA,MAAM,iBAAA,GAAoB,MAAA,CAAO,UAAA,CAAW,8BAA8B,CAAA,CAAE,OAAA;AAC5E,MAAA,MAAM,YAAA,GAAe,UAAA,KAAe,iBAAA,GAAoB,MAAA,GAAS,OAAA,CAAA;AACjE,MAAA,SAAA,CAAU,iBAAiB,MAAM,CAAA;AAAA,IACnC;AAAA,EACF,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,cAAc,MAAM;AACxB,IAAA,IAAI,OAAO,WAAW,WAAA,EAAa;AACjC,MAAA,MAAM,QAAA,GAAW,SAAS,OAAA,GAAU,MAAA;AACpC,MAAA,YAAA,CAAa,OAAA,CAAQ,SAAS,QAAQ,CAAA;AACtC,MAAA,QAAA,CAAS,eAAA,CAAgB,SAAA,CAAU,MAAA,CAAO,MAAA,EAAQ,aAAa,MAAM,CAAA;AACrE,MAAA,SAAA,CAAU,aAAa,MAAM,CAAA;AAAA,IAC/B;AAAA,EACF,CAAA;AAGA,EAAA,IAAI,CAAC,OAAA,EAAS;AACZ,IAAA,uBACEC,GAAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAK,QAAA;AAAA,QACL,SAAA,EAAU,gGAAA;AAAA,QACV,YAAA,EAAW,cAAA;AAAA,QACV,GAAG,KAAA;AAAA,QAEJ,QAAA,kBAAA,IAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,KAAA,EAAM,IAAA;AAAA,YACN,MAAA,EAAO,IAAA;AAAA,YACP,OAAA,EAAQ,WAAA;AAAA,YACR,IAAA,EAAK,MAAA;AAAA,YACL,MAAA,EAAO,cAAA;AAAA,YACP,WAAA,EAAY,GAAA;AAAA,YACZ,aAAA,EAAc,OAAA;AAAA,YACd,cAAA,EAAe,OAAA;AAAA,YAEf,QAAA,EAAA;AAAA,8BAAAA,IAAC,QAAA,EAAA,EAAO,EAAA,EAAG,MAAK,EAAA,EAAG,IAAA,EAAK,GAAE,GAAA,EAAI,CAAA;AAAA,8BAC9BA,GAAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,SAAA,EAAU,CAAA;AAAA,8BAClBA,GAAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,UAAA,EAAW,CAAA;AAAA,8BACnBA,GAAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,sBAAA,EAAuB,CAAA;AAAA,8BAC/BA,GAAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,wBAAA,EAAyB,CAAA;AAAA,8BACjCA,GAAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,SAAA,EAAU,CAAA;AAAA,8BAClBA,GAAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,UAAA,EAAW,CAAA;AAAA,8BACnBA,GAAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,uBAAA,EAAwB,CAAA;AAAA,8BAChCA,GAAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,uBAAA,EAAwB;AAAA;AAAA;AAAA;AAClC;AAAA,KACF;AAAA,EAEJ;AAEA,EAAA,uBACEA,GAAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAK,QAAA;AAAA,MACL,OAAA,EAAS,WAAA;AAAA,MACT,SAAA,EAAU,6IAAA;AAAA,MACV,YAAA,EAAW,cAAA;AAAA,MACV,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA,MAAA,mBACC,IAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,KAAA,EAAM,IAAA;AAAA,UACN,MAAA,EAAO,IAAA;AAAA,UACP,OAAA,EAAQ,WAAA;AAAA,UACR,IAAA,EAAK,MAAA;AAAA,UACL,MAAA,EAAO,cAAA;AAAA,UACP,WAAA,EAAY,GAAA;AAAA,UACZ,aAAA,EAAc,OAAA;AAAA,UACd,cAAA,EAAe,OAAA;AAAA,UAEf,QAAA,EAAA;AAAA,4BAAAA,IAAC,QAAA,EAAA,EAAO,EAAA,EAAG,MAAK,EAAA,EAAG,IAAA,EAAK,GAAE,GAAA,EAAI,CAAA;AAAA,4BAC9BA,GAAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,SAAA,EAAU,CAAA;AAAA,4BAClBA,GAAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,UAAA,EAAW,CAAA;AAAA,4BACnBA,GAAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,sBAAA,EAAuB,CAAA;AAAA,4BAC/BA,GAAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,wBAAA,EAAyB,CAAA;AAAA,4BACjCA,GAAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,SAAA,EAAU,CAAA;AAAA,4BAClBA,GAAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,UAAA,EAAW,CAAA;AAAA,4BACnBA,GAAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,uBAAA,EAAwB,CAAA;AAAA,4BAChCA,GAAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,uBAAA,EAAwB;AAAA;AAAA;AAAA,0BAGlCA,GAAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,KAAA,EAAM,IAAA;AAAA,UACN,MAAA,EAAO,IAAA;AAAA,UACP,OAAA,EAAQ,WAAA;AAAA,UACR,IAAA,EAAK,MAAA;AAAA,UACL,MAAA,EAAO,cAAA;AAAA,UACP,WAAA,EAAY,GAAA;AAAA,UACZ,aAAA,EAAc,OAAA;AAAA,UACd,cAAA,EAAe,OAAA;AAAA,UAEf,QAAA,kBAAAA,GAAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,oCAAA,EAAqC;AAAA;AAAA;AAC/C;AAAA,GAEJ;AAEJ;ACrIO,SAAS,cAAA,GAAiB;AAC/B,EAAA,OAAO;AAAA,IACL,KAAA,EAAO,QAAA;AAAA,IACP,QAAA,EAAU,CAAC,KAAA,KAAkB;AAAA,IAAC,CAAA;AAAA,IAC9B,aAAA,EAAe,OAAA;AAAA,IACf,MAAA,EAAQ;AAAA,GACV;AACF","file":"index.mjs","sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport type { ThemeProviderProps } from \"next-themes/dist/types\"\n\n/**\n * ThemeProvider component for handling theme state\n * \n * This wraps the next-themes provider with sensible defaults\n * for handling light/dark themes and system preferences\n * \n * IMPORTANT: This component must be used in a Client Component context.\n * For Server Components, use the NoSSR wrapper or dynamic imports.\n */\nexport function ThemeProvider({ \n children, \n ...props \n}: ThemeProviderProps) {\n const [NextThemesProvider, setNextThemesProvider] = React.useState<any>(undefined);\n const [mounted, setMounted] = React.useState(false);\n\n React.useEffect(() => {\n // Only import next-themes on the client side\n import('next-themes').then(({ ThemeProvider: Provider }) => {\n setNextThemesProvider(() => Provider);\n setMounted(true);\n });\n }, []);\n\n // Return children without theme provider during SSR or before mounting\n if (!mounted || !NextThemesProvider) {\n return <>{children}</>;\n }\n\n return (\n <NextThemesProvider\n attribute=\"class\"\n defaultTheme=\"system\"\n enableSystem\n disableTransitionOnChange\n {...props}\n >\n {children}\n </NextThemesProvider>\n )\n}\n\n/**\n * NoSSR wrapper for theme provider to prevent SSR issues\n * Use this when you need to ensure the theme provider only renders on the client\n */\nexport function ThemeProviderNoSSR({ \n children, \n ...props \n}: ThemeProviderProps) {\n const [mounted, setMounted] = React.useState(false);\n\n React.useEffect(() => {\n setMounted(true);\n }, []);\n\n if (!mounted) {\n return <>{children}</>;\n }\n\n return (\n <ThemeProvider {...props}>\n {children}\n </ThemeProvider>\n );\n}","\"use client\"\n\nimport * as React from \"react\"\nimport { ThemeProvider } from \"./theme-provider\"\nimport type { ThemeProviderProps } from \"next-themes/dist/types\"\n\n/**\n * Client-only theme provider wrapper\n * This component ensures theme functionality only runs on the client side\n * without using next/dynamic which causes Server Component issues\n */\nexport function ClientThemeProvider({ \n children, \n ...props \n}: ThemeProviderProps) {\n const [mounted, setMounted] = React.useState(false);\n\n React.useEffect(() => {\n setMounted(true);\n }, []);\n\n // During SSR or before mounting, render children without theme provider\n if (!mounted) {\n return <>{children}</>;\n }\n\n // Once mounted, render with theme provider\n return (\n <ThemeProvider {...props}>\n {children}\n </ThemeProvider>\n );\n}\n\n/**\n * Client-only theme toggle wrapper\n * This component ensures theme toggle only renders on the client side\n * and provides a safe fallback for Server Components\n */\nexport function ClientThemeToggle(props: any) {\n const [mounted, setMounted] = React.useState(false);\n const [isDark, setIsDark] = React.useState(false);\n\n React.useEffect(() => {\n setMounted(true);\n // Check current theme\n if (typeof window !== 'undefined') {\n const savedTheme = localStorage.getItem('theme');\n const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;\n const currentTheme = savedTheme || (systemPrefersDark ? 'dark' : 'light');\n setIsDark(currentTheme === 'dark');\n }\n }, []);\n\n const toggleTheme = () => {\n if (typeof window !== 'undefined') {\n const newTheme = isDark ? 'light' : 'dark';\n localStorage.setItem('theme', newTheme);\n document.documentElement.classList.toggle('dark', newTheme === 'dark');\n setIsDark(newTheme === 'dark');\n }\n };\n\n // During SSR or before mounting, render a placeholder\n if (!mounted) {\n return (\n <button\n type=\"button\"\n className=\"inline-flex items-center justify-center rounded-md border border-input bg-background h-10 w-10\"\n aria-label=\"Toggle theme\"\n {...props}\n >\n <svg\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <circle cx=\"12\" cy=\"12\" r=\"4\" />\n <path d=\"M12 2v2\" />\n <path d=\"M12 20v2\" />\n <path d=\"m4.93 4.93 1.41 1.41\" />\n <path d=\"m17.66 17.66 1.41 1.41\" />\n <path d=\"M2 12h2\" />\n <path d=\"M20 12h2\" />\n <path d=\"m6.34 17.66-1.41 1.41\" />\n <path d=\"m19.07 4.93-1.41 1.41\" />\n </svg>\n </button>\n );\n }\n\n return (\n <button\n type=\"button\"\n onClick={toggleTheme}\n className=\"inline-flex items-center justify-center rounded-md border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 w-10\"\n aria-label=\"Toggle theme\"\n {...props}\n >\n {isDark ? (\n <svg\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <circle cx=\"12\" cy=\"12\" r=\"4\" />\n <path d=\"M12 2v2\" />\n <path d=\"M12 20v2\" />\n <path d=\"m4.93 4.93 1.41 1.41\" />\n <path d=\"m17.66 17.66 1.41 1.41\" />\n <path d=\"M2 12h2\" />\n <path d=\"M20 12h2\" />\n <path d=\"m6.34 17.66-1.41 1.41\" />\n <path d=\"m19.07 4.93-1.41 1.41\" />\n </svg>\n ) : (\n <svg\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <path d=\"M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z\" />\n </svg>\n )}\n </button>\n );\n} ","\"use client\"\n\nimport * as React from \"react\"\n\n/**\n * Server-safe theme hook that can be used in Server Components\n * Returns default theme values without accessing client-side APIs\n */\nexport function useThemeServer() {\n return {\n theme: \"system\",\n setTheme: (theme: string) => {},\n resolvedTheme: \"light\",\n isDark: false,\n };\n}\n\n/**\n * @deprecated Use ThemeProvider from './theme-provider' instead\n * This component is kept for backward compatibility but is no longer needed\n */\nexport function ThemeContextProvider({ \n children \n}: { \n children: React.ReactNode \n}) {\n // This is now a no-op wrapper for backward compatibility\n return <>{children}</>;\n}\n\n/**\n * @deprecated Use useTheme from next-themes directly or use the ThemeProvider\n * This hook is kept for backward compatibility but is no longer needed\n */\nexport function useTheme() {\n // Import next-themes dynamically to avoid SSR issues\n const [themeData, setThemeData] = React.useState({\n theme: \"system\",\n setTheme: (theme: string) => {},\n resolvedTheme: \"light\",\n isDark: false,\n });\n const [mounted, setMounted] = React.useState(false);\n\n React.useEffect(() => {\n // Only run on client side\n if (typeof window === 'undefined') return;\n\n // Import next-themes and use it properly\n import('next-themes').then((nextThemes) => {\n // Create a simple theme manager that doesn't violate hook rules\n const themeManager = {\n getTheme: () => {\n // Get theme from localStorage or system preference\n if (typeof window !== 'undefined') {\n const savedTheme = localStorage.getItem('theme');\n if (savedTheme) return savedTheme;\n \n // Check system preference\n if (window.matchMedia('(prefers-color-scheme: dark)').matches) {\n return 'dark';\n }\n }\n return 'light';\n },\n setTheme: (theme: string) => {\n if (typeof window !== 'undefined') {\n localStorage.setItem('theme', theme);\n document.documentElement.classList.toggle('dark', theme === 'dark');\n // Trigger a re-render\n setThemeData(prev => ({\n ...prev,\n theme,\n resolvedTheme: theme,\n isDark: theme === 'dark'\n }));\n }\n }\n };\n\n const currentTheme = themeManager.getTheme();\n const isDark = currentTheme === 'dark';\n \n setThemeData({\n theme: currentTheme,\n setTheme: themeManager.setTheme,\n resolvedTheme: currentTheme,\n isDark,\n });\n setMounted(true);\n });\n }, []);\n\n return themeData;\n}"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tydavidson/design-system",
3
- "version": "1.1.18",
3
+ "version": "1.1.20",
4
4
  "description": "Float Design System with email components and theme system",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.mjs",
@@ -87,7 +87,6 @@
87
87
  "clsx": "^2.0.0",
88
88
  "cmdk": "^1.1.1",
89
89
  "date-fns": "^4.1.0",
90
-
91
90
  "next": "^15.3.1",
92
91
  "next-svgr": "^0.0.2",
93
92
  "next-themes": "^0.2.1",