npm - @marcoschwartz/lite-ui - Versions diffs - 0.24.9 → 0.24.11 - Mend

@marcoschwartz/lite-ui 0.24.9 → 0.24.11

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

package/dist/index.d.mts CHANGED Viewed

@@ -1300,12 +1300,55 @@ interface ThemeProviderProps {
 }
 declare function ThemeProvider({ children, defaultTheme, defaultColorMode }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
+/**
+ * ColorSchemeScript - Prevents flash of wrong color scheme
+ *
+ * This component renders a blocking script that sets the color scheme
+ * BEFORE React hydration occurs. Must be placed in the document <head>.
+ *
+ * Usage in Next.js App Router (app/layout.tsx):
+ * ```tsx
+ * import { ColorSchemeScript } from '@marcoschwartz/lite-ui';
+ *
+ * export default function RootLayout({ children }) {
+ *   return (
+ *     <html lang="en" suppressHydrationWarning>
+ *       <head>
+ *         <ColorSchemeScript defaultColorMode="system" />
+ *       </head>
+ *       <body>
+ *         <ThemeProvider>{children}</ThemeProvider>
+ *       </body>
+ *     </html>
+ *   );
+ * }
+ * ```
+ */
+interface ColorSchemeScriptProps {
+    /**
+     * Default color mode if no preference is stored
+     * @default 'system'
+     */
+    defaultColorMode?: 'light' | 'dark' | 'system';
+    /**
+     * localStorage key for color mode
+     * @default 'lite-ui-color-mode'
+     */
+    localStorageKey?: string;
+    /**
+     * Nonce for Content Security Policy
+     */
+    nonce?: string;
+}
+declare function ColorSchemeScript({ defaultColorMode, localStorageKey, nonce, }?: ColorSchemeScriptProps): react_jsx_runtime.JSX.Element;
+declare function getColorSchemeScriptString(defaultColorMode?: 'light' | 'dark' | 'system', localStorageKey?: string): string;
 /**
  * Theme initialization script that runs before React hydration
  * This prevents flickering by setting the theme before the page renders
  * Must be inlined in the HTML <head> as a blocking script
  */
-declare const themeScript = "\n(function() {\n  try {\n    // Get stored preferences\n    var storedTheme = localStorage.getItem('lite-ui-theme') || 'default';\n    var storedColorMode = localStorage.getItem('lite-ui-color-mode');\n\n    // Determine color mode (system, light, or dark)\n    var colorMode = storedColorMode;\n    if (!colorMode || colorMode === 'system') {\n      colorMode = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';\n    }\n\n    // Set attributes before render\n    var html = document.documentElement;\n    html.setAttribute('data-theme', storedTheme);\n    html.setAttribute('data-color-mode', colorMode);\n\n    // Set color-scheme for browser UI elements (scrollbars, form controls)\n    html.style.colorScheme = colorMode;\n\n    // Add dark class for Tailwind\n    if (colorMode === 'dark') {\n      html.classList.add('dark');\n      // Set critical inline styles as fallback before CSS loads\n      html.style.backgroundColor = 'hsl(0 0% 3.9%)';\n      html.style.color = 'hsl(0 0% 98%)';\n    } else {\n      html.classList.remove('dark');\n      html.style.backgroundColor = 'hsl(0 0% 100%)';\n      html.style.color = 'hsl(0 0% 3.9%)';\n    }\n  } catch (e) {\n    // Silent fail - will use CSS defaults\n  }\n})();\n";
+declare const themeScript = "\n(function() {\n  try {\n    // Get stored preferences\n    var storedTheme = localStorage.getItem('lite-ui-theme') || 'default';\n    var storedColorMode = localStorage.getItem('lite-ui-color-mode');\n\n    // Determine color mode (system, light, or dark)\n    var colorMode = storedColorMode;\n    if (!colorMode || colorMode === 'system') {\n      colorMode = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';\n    }\n\n    // Set attributes before render\n    var html = document.documentElement;\n    html.setAttribute('data-theme', storedTheme);\n    html.setAttribute('data-color-mode', colorMode);\n\n    // Set color-scheme for browser UI elements (scrollbars, form controls)\n    html.style.colorScheme = colorMode;\n\n    // Add dark class for Tailwind\n    if (colorMode === 'dark') {\n      html.classList.add('dark');\n      // Set critical inline styles as fallback before CSS loads\n      html.style.backgroundColor = 'hsl(0 0% 3.9%)';\n      html.style.color = 'hsl(0 0% 98%)';\n    } else {\n      html.classList.remove('dark');\n      html.style.backgroundColor = 'hsl(0 0% 100%)';\n      html.style.color = 'hsl(0 0% 3.9%)';\n    }\n\n    // Mark as initialized to prevent FOUC\n    html.setAttribute('data-theme-initialized', 'true');\n  } catch (e) {\n    // Ensure page shows even on error\n    document.documentElement.setAttribute('data-theme-initialized', 'true');\n  }\n})();\n";
 declare function getThemeScript(): string;
 interface IconProps {
@@ -1455,4 +1498,4 @@ declare const YouTubeIcon: IconComponent;
 declare const SlackIcon: IconComponent;
-export { ActionMenu, type ActionMenuItem, type ActionMenuProps, Alert, AlertCircleIcon, type AlertProps, AppShell, type AppShellAsideConfig, type AppShellFooterConfig, type AppShellHeaderConfig, type AppShellNavbarConfig, type AppShellProps, AppShellSection, type AppShellSectionProps, AppleIcon, AreaChart, type AreaChartDataPoint, type AreaChartProps, type AreaChartSeries, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, AudioPlayer, type AudioPlayerProps, Avatar, type AvatarProps, Badge, type BadgeProps, BarChart, type BarChartDataPoint, type BarChartProps, type BarChartSeries, BeakerIcon, BellIcon, BookIcon, BrainIcon, Button, type ButtonProps, type ButtonTheme, CHART_DEFAULTS, Calendar, CalendarHeatmap, type CalendarHeatmapProps, CalendarIcon, type CalendarProps, CameraIcon, Card, type CardProps, CartesianGrid, type CartesianGridProps, type Chapter, ChartTooltip, ChatIcon, CheckCircleIcon, CheckIcon, Checkbox, type CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CloseIcon, CloudIcon, Code, CodeIcon, type CodeProps, type ColorMode, type Column, CopyIcon, DatabaseIcon, DatePicker, type DatePickerProps, DateTimePicker, type DateTimePickerProps, Divider, type DividerProps, DownloadIcon, Drawer, type DrawerProps, EditIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FacebookIcon, FileIcon, FileUpload, type FileUploadProps, FolderIcon, FullscreenExitIcon, FullscreenIcon, GitHubIcon, GlobeIcon, GoogleIcon, HeartIcon, Heatmap, type HeatmapDataPoint, type HeatmapProps, HomeIcon, type IconComponent, type IconProps, ImageIcon, InfoCircleIcon, KeyIcon, Legend, type LegendItem, type LegendProps, LineChart, type LineChartDataPoint, type LineChartProps, type LineChartSeries, LinkedInIcon, LockIcon, MailIcon, MenuIcon, Modal, type ModalProps, Navbar, type NavbarProps, NumberInput, type NumberInputProps, Pagination, type PaginationProps, PauseIcon, PieChart, type PieChartDataPoint, type PieChartProps, PlayIcon, PlugIcon, PlusIcon, ProgressBar, type ProgressBarProps, Radio, type RadioOption, type RadioProps, ReferenceArea, type ReferenceAreaProps, ReferenceLine, type ReferenceLineProps, RefreshIcon, ResponsiveContainer, type ResponsiveContainerProps, RichTextEditor, type RichTextEditorProps, SaveIcon, ScatterChart, type ScatterChartDataPoint, type ScatterChartProps, type ScatterChartSeries, SearchIcon, Select, type SelectOption, type SelectProps, type SelectTheme, SettingsIcon, ShieldIcon, Sidebar, type SidebarContextValue, type SidebarProps, SidebarProvider, type SidebarProviderProps, SkipBackIcon, SkipForwardIcon, SlackIcon, Slider, type SliderProps, SparklesIcon, Spinner, type SpinnerProps, StarIcon, type Step, Stepper, type StepperProps, StopIcon, type Tab, Table, type TableProps, Tabs, type TabsProps, TerminalIcon, TextInput, type TextInputProps, Textarea, type TextareaProps, type Theme, type ThemeName, ThemeProvider, TimePicker, type TimePickerProps, type Toast, ToastProvider, type ToastProviderProps, Toggle, type ToggleProps, type TooltipPayloadItem, type TooltipProps, TrashIcon, TwitterIcon, UploadIcon, UserIcon, VideoPlayer, type VideoPlayerProps, VolumeOffIcon, VolumeUpIcon, YouTubeIcon, getThemeScript, themeScript, themes, toast, useAppShell, useSidebar, useTheme, useToast, useTooltip };
+export { ActionMenu, type ActionMenuItem, type ActionMenuProps, Alert, AlertCircleIcon, type AlertProps, AppShell, type AppShellAsideConfig, type AppShellFooterConfig, type AppShellHeaderConfig, type AppShellNavbarConfig, type AppShellProps, AppShellSection, type AppShellSectionProps, AppleIcon, AreaChart, type AreaChartDataPoint, type AreaChartProps, type AreaChartSeries, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, AudioPlayer, type AudioPlayerProps, Avatar, type AvatarProps, Badge, type BadgeProps, BarChart, type BarChartDataPoint, type BarChartProps, type BarChartSeries, BeakerIcon, BellIcon, BookIcon, BrainIcon, Button, type ButtonProps, type ButtonTheme, CHART_DEFAULTS, Calendar, CalendarHeatmap, type CalendarHeatmapProps, CalendarIcon, type CalendarProps, CameraIcon, Card, type CardProps, CartesianGrid, type CartesianGridProps, type Chapter, ChartTooltip, ChatIcon, CheckCircleIcon, CheckIcon, Checkbox, type CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CloseIcon, CloudIcon, Code, CodeIcon, type CodeProps, type ColorMode, ColorSchemeScript, type ColorSchemeScriptProps, type Column, CopyIcon, DatabaseIcon, DatePicker, type DatePickerProps, DateTimePicker, type DateTimePickerProps, Divider, type DividerProps, DownloadIcon, Drawer, type DrawerProps, EditIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FacebookIcon, FileIcon, FileUpload, type FileUploadProps, FolderIcon, FullscreenExitIcon, FullscreenIcon, GitHubIcon, GlobeIcon, GoogleIcon, HeartIcon, Heatmap, type HeatmapDataPoint, type HeatmapProps, HomeIcon, type IconComponent, type IconProps, ImageIcon, InfoCircleIcon, KeyIcon, Legend, type LegendItem, type LegendProps, LineChart, type LineChartDataPoint, type LineChartProps, type LineChartSeries, LinkedInIcon, LockIcon, MailIcon, MenuIcon, Modal, type ModalProps, Navbar, type NavbarProps, NumberInput, type NumberInputProps, Pagination, type PaginationProps, PauseIcon, PieChart, type PieChartDataPoint, type PieChartProps, PlayIcon, PlugIcon, PlusIcon, ProgressBar, type ProgressBarProps, Radio, type RadioOption, type RadioProps, ReferenceArea, type ReferenceAreaProps, ReferenceLine, type ReferenceLineProps, RefreshIcon, ResponsiveContainer, type ResponsiveContainerProps, RichTextEditor, type RichTextEditorProps, SaveIcon, ScatterChart, type ScatterChartDataPoint, type ScatterChartProps, type ScatterChartSeries, SearchIcon, Select, type SelectOption, type SelectProps, type SelectTheme, SettingsIcon, ShieldIcon, Sidebar, type SidebarContextValue, type SidebarProps, SidebarProvider, type SidebarProviderProps, SkipBackIcon, SkipForwardIcon, SlackIcon, Slider, type SliderProps, SparklesIcon, Spinner, type SpinnerProps, StarIcon, type Step, Stepper, type StepperProps, StopIcon, type Tab, Table, type TableProps, Tabs, type TabsProps, TerminalIcon, TextInput, type TextInputProps, Textarea, type TextareaProps, type Theme, type ThemeName, ThemeProvider, TimePicker, type TimePickerProps, type Toast, ToastProvider, type ToastProviderProps, Toggle, type ToggleProps, type TooltipPayloadItem, type TooltipProps, TrashIcon, TwitterIcon, UploadIcon, UserIcon, VideoPlayer, type VideoPlayerProps, VolumeOffIcon, VolumeUpIcon, YouTubeIcon, getColorSchemeScriptString, getThemeScript, themeScript, themes, toast, useAppShell, useSidebar, useTheme, useToast, useTooltip };

package/dist/index.d.ts CHANGED Viewed

@@ -1300,12 +1300,55 @@ interface ThemeProviderProps {
 }
 declare function ThemeProvider({ children, defaultTheme, defaultColorMode }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
+/**
+ * ColorSchemeScript - Prevents flash of wrong color scheme
+ *
+ * This component renders a blocking script that sets the color scheme
+ * BEFORE React hydration occurs. Must be placed in the document <head>.
+ *
+ * Usage in Next.js App Router (app/layout.tsx):
+ * ```tsx
+ * import { ColorSchemeScript } from '@marcoschwartz/lite-ui';
+ *
+ * export default function RootLayout({ children }) {
+ *   return (
+ *     <html lang="en" suppressHydrationWarning>
+ *       <head>
+ *         <ColorSchemeScript defaultColorMode="system" />
+ *       </head>
+ *       <body>
+ *         <ThemeProvider>{children}</ThemeProvider>
+ *       </body>
+ *     </html>
+ *   );
+ * }
+ * ```
+ */
+interface ColorSchemeScriptProps {
+    /**
+     * Default color mode if no preference is stored
+     * @default 'system'
+     */
+    defaultColorMode?: 'light' | 'dark' | 'system';
+    /**
+     * localStorage key for color mode
+     * @default 'lite-ui-color-mode'
+     */
+    localStorageKey?: string;
+    /**
+     * Nonce for Content Security Policy
+     */
+    nonce?: string;
+}
+declare function ColorSchemeScript({ defaultColorMode, localStorageKey, nonce, }?: ColorSchemeScriptProps): react_jsx_runtime.JSX.Element;
+declare function getColorSchemeScriptString(defaultColorMode?: 'light' | 'dark' | 'system', localStorageKey?: string): string;
 /**
  * Theme initialization script that runs before React hydration
  * This prevents flickering by setting the theme before the page renders
  * Must be inlined in the HTML <head> as a blocking script
  */
-declare const themeScript = "\n(function() {\n  try {\n    // Get stored preferences\n    var storedTheme = localStorage.getItem('lite-ui-theme') || 'default';\n    var storedColorMode = localStorage.getItem('lite-ui-color-mode');\n\n    // Determine color mode (system, light, or dark)\n    var colorMode = storedColorMode;\n    if (!colorMode || colorMode === 'system') {\n      colorMode = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';\n    }\n\n    // Set attributes before render\n    var html = document.documentElement;\n    html.setAttribute('data-theme', storedTheme);\n    html.setAttribute('data-color-mode', colorMode);\n\n    // Set color-scheme for browser UI elements (scrollbars, form controls)\n    html.style.colorScheme = colorMode;\n\n    // Add dark class for Tailwind\n    if (colorMode === 'dark') {\n      html.classList.add('dark');\n      // Set critical inline styles as fallback before CSS loads\n      html.style.backgroundColor = 'hsl(0 0% 3.9%)';\n      html.style.color = 'hsl(0 0% 98%)';\n    } else {\n      html.classList.remove('dark');\n      html.style.backgroundColor = 'hsl(0 0% 100%)';\n      html.style.color = 'hsl(0 0% 3.9%)';\n    }\n  } catch (e) {\n    // Silent fail - will use CSS defaults\n  }\n})();\n";
+declare const themeScript = "\n(function() {\n  try {\n    // Get stored preferences\n    var storedTheme = localStorage.getItem('lite-ui-theme') || 'default';\n    var storedColorMode = localStorage.getItem('lite-ui-color-mode');\n\n    // Determine color mode (system, light, or dark)\n    var colorMode = storedColorMode;\n    if (!colorMode || colorMode === 'system') {\n      colorMode = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';\n    }\n\n    // Set attributes before render\n    var html = document.documentElement;\n    html.setAttribute('data-theme', storedTheme);\n    html.setAttribute('data-color-mode', colorMode);\n\n    // Set color-scheme for browser UI elements (scrollbars, form controls)\n    html.style.colorScheme = colorMode;\n\n    // Add dark class for Tailwind\n    if (colorMode === 'dark') {\n      html.classList.add('dark');\n      // Set critical inline styles as fallback before CSS loads\n      html.style.backgroundColor = 'hsl(0 0% 3.9%)';\n      html.style.color = 'hsl(0 0% 98%)';\n    } else {\n      html.classList.remove('dark');\n      html.style.backgroundColor = 'hsl(0 0% 100%)';\n      html.style.color = 'hsl(0 0% 3.9%)';\n    }\n\n    // Mark as initialized to prevent FOUC\n    html.setAttribute('data-theme-initialized', 'true');\n  } catch (e) {\n    // Ensure page shows even on error\n    document.documentElement.setAttribute('data-theme-initialized', 'true');\n  }\n})();\n";
 declare function getThemeScript(): string;
 interface IconProps {
@@ -1455,4 +1498,4 @@ declare const YouTubeIcon: IconComponent;
 declare const SlackIcon: IconComponent;
-export { ActionMenu, type ActionMenuItem, type ActionMenuProps, Alert, AlertCircleIcon, type AlertProps, AppShell, type AppShellAsideConfig, type AppShellFooterConfig, type AppShellHeaderConfig, type AppShellNavbarConfig, type AppShellProps, AppShellSection, type AppShellSectionProps, AppleIcon, AreaChart, type AreaChartDataPoint, type AreaChartProps, type AreaChartSeries, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, AudioPlayer, type AudioPlayerProps, Avatar, type AvatarProps, Badge, type BadgeProps, BarChart, type BarChartDataPoint, type BarChartProps, type BarChartSeries, BeakerIcon, BellIcon, BookIcon, BrainIcon, Button, type ButtonProps, type ButtonTheme, CHART_DEFAULTS, Calendar, CalendarHeatmap, type CalendarHeatmapProps, CalendarIcon, type CalendarProps, CameraIcon, Card, type CardProps, CartesianGrid, type CartesianGridProps, type Chapter, ChartTooltip, ChatIcon, CheckCircleIcon, CheckIcon, Checkbox, type CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CloseIcon, CloudIcon, Code, CodeIcon, type CodeProps, type ColorMode, type Column, CopyIcon, DatabaseIcon, DatePicker, type DatePickerProps, DateTimePicker, type DateTimePickerProps, Divider, type DividerProps, DownloadIcon, Drawer, type DrawerProps, EditIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FacebookIcon, FileIcon, FileUpload, type FileUploadProps, FolderIcon, FullscreenExitIcon, FullscreenIcon, GitHubIcon, GlobeIcon, GoogleIcon, HeartIcon, Heatmap, type HeatmapDataPoint, type HeatmapProps, HomeIcon, type IconComponent, type IconProps, ImageIcon, InfoCircleIcon, KeyIcon, Legend, type LegendItem, type LegendProps, LineChart, type LineChartDataPoint, type LineChartProps, type LineChartSeries, LinkedInIcon, LockIcon, MailIcon, MenuIcon, Modal, type ModalProps, Navbar, type NavbarProps, NumberInput, type NumberInputProps, Pagination, type PaginationProps, PauseIcon, PieChart, type PieChartDataPoint, type PieChartProps, PlayIcon, PlugIcon, PlusIcon, ProgressBar, type ProgressBarProps, Radio, type RadioOption, type RadioProps, ReferenceArea, type ReferenceAreaProps, ReferenceLine, type ReferenceLineProps, RefreshIcon, ResponsiveContainer, type ResponsiveContainerProps, RichTextEditor, type RichTextEditorProps, SaveIcon, ScatterChart, type ScatterChartDataPoint, type ScatterChartProps, type ScatterChartSeries, SearchIcon, Select, type SelectOption, type SelectProps, type SelectTheme, SettingsIcon, ShieldIcon, Sidebar, type SidebarContextValue, type SidebarProps, SidebarProvider, type SidebarProviderProps, SkipBackIcon, SkipForwardIcon, SlackIcon, Slider, type SliderProps, SparklesIcon, Spinner, type SpinnerProps, StarIcon, type Step, Stepper, type StepperProps, StopIcon, type Tab, Table, type TableProps, Tabs, type TabsProps, TerminalIcon, TextInput, type TextInputProps, Textarea, type TextareaProps, type Theme, type ThemeName, ThemeProvider, TimePicker, type TimePickerProps, type Toast, ToastProvider, type ToastProviderProps, Toggle, type ToggleProps, type TooltipPayloadItem, type TooltipProps, TrashIcon, TwitterIcon, UploadIcon, UserIcon, VideoPlayer, type VideoPlayerProps, VolumeOffIcon, VolumeUpIcon, YouTubeIcon, getThemeScript, themeScript, themes, toast, useAppShell, useSidebar, useTheme, useToast, useTooltip };
+export { ActionMenu, type ActionMenuItem, type ActionMenuProps, Alert, AlertCircleIcon, type AlertProps, AppShell, type AppShellAsideConfig, type AppShellFooterConfig, type AppShellHeaderConfig, type AppShellNavbarConfig, type AppShellProps, AppShellSection, type AppShellSectionProps, AppleIcon, AreaChart, type AreaChartDataPoint, type AreaChartProps, type AreaChartSeries, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, AudioPlayer, type AudioPlayerProps, Avatar, type AvatarProps, Badge, type BadgeProps, BarChart, type BarChartDataPoint, type BarChartProps, type BarChartSeries, BeakerIcon, BellIcon, BookIcon, BrainIcon, Button, type ButtonProps, type ButtonTheme, CHART_DEFAULTS, Calendar, CalendarHeatmap, type CalendarHeatmapProps, CalendarIcon, type CalendarProps, CameraIcon, Card, type CardProps, CartesianGrid, type CartesianGridProps, type Chapter, ChartTooltip, ChatIcon, CheckCircleIcon, CheckIcon, Checkbox, type CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CloseIcon, CloudIcon, Code, CodeIcon, type CodeProps, type ColorMode, ColorSchemeScript, type ColorSchemeScriptProps, type Column, CopyIcon, DatabaseIcon, DatePicker, type DatePickerProps, DateTimePicker, type DateTimePickerProps, Divider, type DividerProps, DownloadIcon, Drawer, type DrawerProps, EditIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FacebookIcon, FileIcon, FileUpload, type FileUploadProps, FolderIcon, FullscreenExitIcon, FullscreenIcon, GitHubIcon, GlobeIcon, GoogleIcon, HeartIcon, Heatmap, type HeatmapDataPoint, type HeatmapProps, HomeIcon, type IconComponent, type IconProps, ImageIcon, InfoCircleIcon, KeyIcon, Legend, type LegendItem, type LegendProps, LineChart, type LineChartDataPoint, type LineChartProps, type LineChartSeries, LinkedInIcon, LockIcon, MailIcon, MenuIcon, Modal, type ModalProps, Navbar, type NavbarProps, NumberInput, type NumberInputProps, Pagination, type PaginationProps, PauseIcon, PieChart, type PieChartDataPoint, type PieChartProps, PlayIcon, PlugIcon, PlusIcon, ProgressBar, type ProgressBarProps, Radio, type RadioOption, type RadioProps, ReferenceArea, type ReferenceAreaProps, ReferenceLine, type ReferenceLineProps, RefreshIcon, ResponsiveContainer, type ResponsiveContainerProps, RichTextEditor, type RichTextEditorProps, SaveIcon, ScatterChart, type ScatterChartDataPoint, type ScatterChartProps, type ScatterChartSeries, SearchIcon, Select, type SelectOption, type SelectProps, type SelectTheme, SettingsIcon, ShieldIcon, Sidebar, type SidebarContextValue, type SidebarProps, SidebarProvider, type SidebarProviderProps, SkipBackIcon, SkipForwardIcon, SlackIcon, Slider, type SliderProps, SparklesIcon, Spinner, type SpinnerProps, StarIcon, type Step, Stepper, type StepperProps, StopIcon, type Tab, Table, type TableProps, Tabs, type TabsProps, TerminalIcon, TextInput, type TextInputProps, Textarea, type TextareaProps, type Theme, type ThemeName, ThemeProvider, TimePicker, type TimePickerProps, type Toast, ToastProvider, type ToastProviderProps, Toggle, type ToggleProps, type TooltipPayloadItem, type TooltipProps, TrashIcon, TwitterIcon, UploadIcon, UserIcon, VideoPlayer, type VideoPlayerProps, VolumeOffIcon, VolumeUpIcon, YouTubeIcon, getColorSchemeScriptString, getThemeScript, themeScript, themes, toast, useAppShell, useSidebar, useTheme, useToast, useTooltip };

package/dist/index.js CHANGED Viewed

@@ -71,6 +71,7 @@ __export(index_exports, {
   CloudIcon: () => CloudIcon,
   Code: () => Code,
   CodeIcon: () => CodeIcon,
+  ColorSchemeScript: () => ColorSchemeScript,
   CopyIcon: () => CopyIcon,
   DatabaseIcon: () => DatabaseIcon,
   DatePicker: () => DatePicker,
@@ -153,6 +154,7 @@ __export(index_exports, {
   VolumeOffIcon: () => VolumeOffIcon,
   VolumeUpIcon: () => VolumeUpIcon,
   YouTubeIcon: () => YouTubeIcon,
+  getColorSchemeScriptString: () => getColorSchemeScriptString,
   getThemeScript: () => getThemeScript,
   themeScript: () => themeScript,
   themes: () => themes,
@@ -9104,6 +9106,59 @@ var CalendarHeatmap = ({
   ] });
 };
+// src/theme/ColorSchemeScript.tsx
+var import_jsx_runtime121 = require("react/jsx-runtime");
+function getColorSchemeScript(defaultColorMode, localStorageKey) {
+  return `
+(function(){
+  try {
+    var d = document.documentElement;
+    var stored = localStorage.getItem('${localStorageKey}');
+    var mode = stored || '${defaultColorMode}';
+    var resolved = mode;
+    if (mode === 'system' || !mode) {
+      resolved = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    }
+    d.setAttribute('data-color-mode', resolved);
+    d.style.colorScheme = resolved;
+    if (resolved === 'dark') {
+      d.classList.add('dark');
+      d.style.backgroundColor = 'hsl(0,0%,3.9%)';
+      d.style.color = 'hsl(0,0%,98%)';
+    } else {
+      d.classList.remove('dark');
+      d.style.backgroundColor = 'hsl(0,0%,100%)';
+      d.style.color = 'hsl(0,0%,3.9%)';
+    }
+    // Mark as initialized to prevent FOUC
+    d.setAttribute('data-theme-initialized', 'true');
+  } catch(e) {}
+})();
+`.trim();
+}
+function ColorSchemeScript({
+  defaultColorMode = "system",
+  localStorageKey = "lite-ui-color-mode",
+  nonce
+} = {}) {
+  const scriptContent = getColorSchemeScript(defaultColorMode, localStorageKey);
+  return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+    "script",
+    {
+      nonce,
+      dangerouslySetInnerHTML: { __html: scriptContent },
+      suppressHydrationWarning: true
+    }
+  );
+}
+function getColorSchemeScriptString(defaultColorMode = "system", localStorageKey = "lite-ui-color-mode") {
+  return getColorSchemeScript(defaultColorMode, localStorageKey);
+}
 // src/utils/theme-script.ts
 var themeScript = `
 (function() {
@@ -9137,8 +9192,12 @@ var themeScript = `
       html.style.backgroundColor = 'hsl(0 0% 100%)';
       html.style.color = 'hsl(0 0% 3.9%)';
     }
+    // Mark as initialized to prevent FOUC
+    html.setAttribute('data-theme-initialized', 'true');
   } catch (e) {
-    // Silent fail - will use CSS defaults
+    // Ensure page shows even on error
+    document.documentElement.setAttribute('data-theme-initialized', 'true');
   }
 })();
 `;
@@ -9187,6 +9246,7 @@ function getThemeScript() {
   CloudIcon,
   Code,
   CodeIcon,
+  ColorSchemeScript,
   CopyIcon,
   DatabaseIcon,
   DatePicker,
@@ -9269,6 +9329,7 @@ function getThemeScript() {
   VolumeOffIcon,
   VolumeUpIcon,
   YouTubeIcon,
+  getColorSchemeScriptString,
   getThemeScript,
   themeScript,
   themes,