@umami/react-zen 0.237.0 → 0.238.0

package/dist/index.d.mts

@@ -563,14 +563,19 @@ declare function useBreakpoint(): BreakpointKey | null;
 declare function useDebounce(value: string, delay: number): string;
 
 type Theme = 'light' | 'dark';
+type Palette = 'neutral' | 'slate' | 'gray' | 'zinc' | 'stone';
+declare const PALETTES: Palette[];
 interface ThemeState {
     theme: Theme;
+    palette: Palette;
     setTheme: (theme: Theme) => void;
+    setPalette: (palette: Palette) => void;
     syncTheme: () => void;
     initTheme: (preferred?: Theme, colorScheme?: 'light' | 'dark' | 'system') => void;
+    initPalette: (preferred?: Palette) => void;
 }
 declare const useTheme: zustand.UseBoundStore<zustand.StoreApi<ThemeState>>;
-declare function useInitTheme(preferred?: Theme, colorScheme?: 'light' | 'dark' | 'system'): void;
+declare function useInitTheme(preferred?: Theme, colorScheme?: 'light' | 'dark' | 'system', preferredPalette?: Palette): void;
 
 type ToastVariant = 'success' | 'error';
 interface ToastOptions {
@@ -767,6 +772,11 @@ interface NavMenuItemProps extends RowProps {
 }
 declare function NavMenuItem({ isSelected, className, children, ...props }: NavMenuItemProps): react_jsx_runtime.JSX.Element;
 
+interface PaletteSwitcherProps {
+    className?: string;
+}
+declare function PaletteSwitcher({ className }: PaletteSwitcherProps): react_jsx_runtime.JSX.Element;
+
 interface PasswordFieldProps extends TextFieldProps$1 {
     label?: string;
 }
@@ -970,9 +980,10 @@ declare function ToastProvider({ children, ...props }: ToastProviderProps): reac
 interface ZenProviderProps {
     theme?: Theme;
     colorScheme?: 'light' | 'dark' | 'system';
+    palette?: Palette;
     toast?: ToasterProps;
     children: ReactNode;
 }
-declare function ZenProvider({ children, theme, colorScheme, toast, }: ZenProviderProps): react_jsx_runtime.JSX.Element;
+declare function ZenProvider({ children, theme, colorScheme, palette, toast, }: ZenProviderProps): react_jsx_runtime.JSX.Element;
 
-export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, AlertBanner, type AlertBannerProps, AlertDialog, type AlertDialogProps, Blockquote, type BlockquoteProps, Box, type BoxProps, type BoxRenderProps, Breadcrumb, Breadcrumbs, type BreakpointKey, Button, type ButtonProps, type ButtonRenderProps, Calendar, type CalendarProps, Checkbox, type CheckboxProps, Code, type CodeProps, Column, type ColumnProps, ComboBox, type ComboBoxProps, ConfirmationDialog, type ConfirmationDialogProps, Container, type ContainerProps, CopyButton, type CopyButtonProps, DataCard, type DataCardProps, DataColumn, type DataColumnProps, DataTable, type DataTableProps, Dialog, type DialogProps, Dots, type DotsProps, Flexbox, type FlexboxProps, FloatingTooltip, type FloatingTooltipProps, Form, FormButtons, type FormButtonsProps, FormController, type FormControllerProps, FormField, FormFieldArray, type FormFieldArrayProps, type FormFieldProps, type FormProps, FormResetButton, type FormResetButtonProps, FormSubmitButton, Grid, type GridProps, Heading, type HeadingProps, type HoverButtonProps, HoverTrigger, Icon, IconLabel, type IconLabelProps, type IconProps, Image, type ImageProps, Label, type LabelProps, List, ListItem, type ListItemProps, type ListProps, ListSection, type ListSectionProps, ListSeparator, Loading, LoadingButton, type LoadingButtonProps, type LoadingProps, Menu, MenuItem, type MenuItemProps, type MenuProps, MenuSection, type MenuSectionProps, MenuSeparator, Modal, type ModalProps, NavMenu, NavMenuGroup, type NavMenuGroupProps, NavMenuItem, type NavMenuItemProps, type NavMenuProps, Navbar, NavbarContext, NavbarItem, type NavbarItemProps, type NavbarProps, type NavigationContext, PasswordField, type PasswordFieldProps, Popover, type PopoverProps, ProgressBar, type ProgressBarProps, ProgressCircle, type ProgressCircleProps, Radio, RadioGroup, type RadioGroupProps, type RenderProp, Row, type RowProps, SearchField, type SearchFieldProps, Select, type SelectProps, Sidebar, SidebarHeader, SidebarItem, type SidebarItemProps, type SidebarProps, SidebarSection, Slider, type SliderProps, Spinner, type SpinnerProps, StatusLight, type StatusLightProps, type StrokeWidth, SubMenuTrigger, type SubmenuTriggerProps, Switch, type SwitchProps, Tab, TabList, TabPanel, Table, TableBody, TableCell, type TableCellProps, TableColumn, type TableColumnProps, TableHeader, TableRow, Tabs, Text, TextField, type TextFieldProps, type TextProps, type TextRenderProps, type Theme, ThemeButton, type ThemeButtonProps, type ThemeMode, ThemeSwitcher, type ThemeSwitcherProps, Toast, ToastContext, type ToastOptions, type ToastPosition, type ToastProps, ToastProvider, type ToastProviderProps, type ToastState, type ToastVariant, Toaster, type ToasterProps, Toggle, ToggleGroup, ToggleGroupItem, type ToggleGroupItemProps, type ToggleGroupProps, type ToggleProps, Tooltip, TooltipBubble, type TooltipBubbleProps, type TooltipProps, ZenProvider, type ZenProviderProps, cn, getCssColorValue, isHeightPreset, isMaxHeightPreset, isMaxWidthPreset, isMinHeightPreset, isMinWidthPreset, isWidthPreset, mapAlignContent, mapAlignItems, mapAlignSelf, mapBackgroundColor, mapBorder, mapBorderColor, mapBorderRadius, mapBorderWidth, mapCursor, mapDisplay, mapFlexDirection, mapFlexWrap, mapFontSize, mapFontWeight, mapGap, mapGridAutoFlow, mapGridColumns, mapGridRows, mapHeadingSize, mapHeight, mapJustifyContent, mapJustifyItems, mapLetterSpacing, mapLineHeight, mapMargin, mapMaxHeight, mapMaxWidth, mapMinHeight, mapMinWidth, mapOpacity, mapOverflow, mapPadding, mapPointerEvents, mapPosition, mapShadow, mapStateStyles, mapTextAlign, mapTextColor, mapTextDecorationStyle, mapTextIndent, mapTextTransform, mapTextWrap, mapVerticalAlign, mapWhitespace, mapWidth, mapWordBreak, removeToast, resolveRender, useBreakpoint, useDebounce, useInitTheme, useNavigationContext, useTheme, useToast };
+export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, AlertBanner, type AlertBannerProps, AlertDialog, type AlertDialogProps, Blockquote, type BlockquoteProps, Box, type BoxProps, type BoxRenderProps, Breadcrumb, Breadcrumbs, type BreakpointKey, Button, type ButtonProps, type ButtonRenderProps, Calendar, type CalendarProps, Checkbox, type CheckboxProps, Code, type CodeProps, Column, type ColumnProps, ComboBox, type ComboBoxProps, ConfirmationDialog, type ConfirmationDialogProps, Container, type ContainerProps, CopyButton, type CopyButtonProps, DataCard, type DataCardProps, DataColumn, type DataColumnProps, DataTable, type DataTableProps, Dialog, type DialogProps, Dots, type DotsProps, Flexbox, type FlexboxProps, FloatingTooltip, type FloatingTooltipProps, Form, FormButtons, type FormButtonsProps, FormController, type FormControllerProps, FormField, FormFieldArray, type FormFieldArrayProps, type FormFieldProps, type FormProps, FormResetButton, type FormResetButtonProps, FormSubmitButton, Grid, type GridProps, Heading, type HeadingProps, type HoverButtonProps, HoverTrigger, Icon, IconLabel, type IconLabelProps, type IconProps, Image, type ImageProps, Label, type LabelProps, List, ListItem, type ListItemProps, type ListProps, ListSection, type ListSectionProps, ListSeparator, Loading, LoadingButton, type LoadingButtonProps, type LoadingProps, Menu, MenuItem, type MenuItemProps, type MenuProps, MenuSection, type MenuSectionProps, MenuSeparator, Modal, type ModalProps, NavMenu, NavMenuGroup, type NavMenuGroupProps, NavMenuItem, type NavMenuItemProps, type NavMenuProps, Navbar, NavbarContext, NavbarItem, type NavbarItemProps, type NavbarProps, type NavigationContext, PALETTES, type Palette, PaletteSwitcher, type PaletteSwitcherProps, PasswordField, type PasswordFieldProps, Popover, type PopoverProps, ProgressBar, type ProgressBarProps, ProgressCircle, type ProgressCircleProps, Radio, RadioGroup, type RadioGroupProps, type RenderProp, Row, type RowProps, SearchField, type SearchFieldProps, Select, type SelectProps, Sidebar, SidebarHeader, SidebarItem, type SidebarItemProps, type SidebarProps, SidebarSection, Slider, type SliderProps, Spinner, type SpinnerProps, StatusLight, type StatusLightProps, type StrokeWidth, SubMenuTrigger, type SubmenuTriggerProps, Switch, type SwitchProps, Tab, TabList, TabPanel, Table, TableBody, TableCell, type TableCellProps, TableColumn, type TableColumnProps, TableHeader, TableRow, Tabs, Text, TextField, type TextFieldProps, type TextProps, type TextRenderProps, type Theme, ThemeButton, type ThemeButtonProps, type ThemeMode, ThemeSwitcher, type ThemeSwitcherProps, Toast, ToastContext, type ToastOptions, type ToastPosition, type ToastProps, ToastProvider, type ToastProviderProps, type ToastState, type ToastVariant, Toaster, type ToasterProps, Toggle, ToggleGroup, ToggleGroupItem, type ToggleGroupItemProps, type ToggleGroupProps, type ToggleProps, Tooltip, TooltipBubble, type TooltipBubbleProps, type TooltipProps, ZenProvider, type ZenProviderProps, cn, getCssColorValue, isHeightPreset, isMaxHeightPreset, isMaxWidthPreset, isMinHeightPreset, isMinWidthPreset, isWidthPreset, mapAlignContent, mapAlignItems, mapAlignSelf, mapBackgroundColor, mapBorder, mapBorderColor, mapBorderRadius, mapBorderWidth, mapCursor, mapDisplay, mapFlexDirection, mapFlexWrap, mapFontSize, mapFontWeight, mapGap, mapGridAutoFlow, mapGridColumns, mapGridRows, mapHeadingSize, mapHeight, mapJustifyContent, mapJustifyItems, mapLetterSpacing, mapLineHeight, mapMargin, mapMaxHeight, mapMaxWidth, mapMinHeight, mapMinWidth, mapOpacity, mapOverflow, mapPadding, mapPointerEvents, mapPosition, mapShadow, mapStateStyles, mapTextAlign, mapTextColor, mapTextDecorationStyle, mapTextIndent, mapTextTransform, mapTextWrap, mapVerticalAlign, mapWhitespace, mapWidth, mapWordBreak, removeToast, resolveRender, useBreakpoint, useDebounce, useInitTheme, useNavigationContext, useTheme, useToast };

package/dist/index.d.ts

@@ -563,14 +563,19 @@ declare function useBreakpoint(): BreakpointKey | null;
 declare function useDebounce(value: string, delay: number): string;
 
 type Theme = 'light' | 'dark';
+type Palette = 'neutral' | 'slate' | 'gray' | 'zinc' | 'stone';
+declare const PALETTES: Palette[];
 interface ThemeState {
     theme: Theme;
+    palette: Palette;
     setTheme: (theme: Theme) => void;
+    setPalette: (palette: Palette) => void;
     syncTheme: () => void;
     initTheme: (preferred?: Theme, colorScheme?: 'light' | 'dark' | 'system') => void;
+    initPalette: (preferred?: Palette) => void;
 }
 declare const useTheme: zustand.UseBoundStore<zustand.StoreApi<ThemeState>>;
-declare function useInitTheme(preferred?: Theme, colorScheme?: 'light' | 'dark' | 'system'): void;
+declare function useInitTheme(preferred?: Theme, colorScheme?: 'light' | 'dark' | 'system', preferredPalette?: Palette): void;
 
 type ToastVariant = 'success' | 'error';
 interface ToastOptions {
@@ -767,6 +772,11 @@ interface NavMenuItemProps extends RowProps {
 }
 declare function NavMenuItem({ isSelected, className, children, ...props }: NavMenuItemProps): react_jsx_runtime.JSX.Element;
 
+interface PaletteSwitcherProps {
+    className?: string;
+}
+declare function PaletteSwitcher({ className }: PaletteSwitcherProps): react_jsx_runtime.JSX.Element;
+
 interface PasswordFieldProps extends TextFieldProps$1 {
     label?: string;
 }
@@ -970,9 +980,10 @@ declare function ToastProvider({ children, ...props }: ToastProviderProps): reac
 interface ZenProviderProps {
     theme?: Theme;
     colorScheme?: 'light' | 'dark' | 'system';
+    palette?: Palette;
     toast?: ToasterProps;
     children: ReactNode;
 }
-declare function ZenProvider({ children, theme, colorScheme, toast, }: ZenProviderProps): react_jsx_runtime.JSX.Element;
+declare function ZenProvider({ children, theme, colorScheme, palette, toast, }: ZenProviderProps): react_jsx_runtime.JSX.Element;
 
-export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, AlertBanner, type AlertBannerProps, AlertDialog, type AlertDialogProps, Blockquote, type BlockquoteProps, Box, type BoxProps, type BoxRenderProps, Breadcrumb, Breadcrumbs, type BreakpointKey, Button, type ButtonProps, type ButtonRenderProps, Calendar, type CalendarProps, Checkbox, type CheckboxProps, Code, type CodeProps, Column, type ColumnProps, ComboBox, type ComboBoxProps, ConfirmationDialog, type ConfirmationDialogProps, Container, type ContainerProps, CopyButton, type CopyButtonProps, DataCard, type DataCardProps, DataColumn, type DataColumnProps, DataTable, type DataTableProps, Dialog, type DialogProps, Dots, type DotsProps, Flexbox, type FlexboxProps, FloatingTooltip, type FloatingTooltipProps, Form, FormButtons, type FormButtonsProps, FormController, type FormControllerProps, FormField, FormFieldArray, type FormFieldArrayProps, type FormFieldProps, type FormProps, FormResetButton, type FormResetButtonProps, FormSubmitButton, Grid, type GridProps, Heading, type HeadingProps, type HoverButtonProps, HoverTrigger, Icon, IconLabel, type IconLabelProps, type IconProps, Image, type ImageProps, Label, type LabelProps, List, ListItem, type ListItemProps, type ListProps, ListSection, type ListSectionProps, ListSeparator, Loading, LoadingButton, type LoadingButtonProps, type LoadingProps, Menu, MenuItem, type MenuItemProps, type MenuProps, MenuSection, type MenuSectionProps, MenuSeparator, Modal, type ModalProps, NavMenu, NavMenuGroup, type NavMenuGroupProps, NavMenuItem, type NavMenuItemProps, type NavMenuProps, Navbar, NavbarContext, NavbarItem, type NavbarItemProps, type NavbarProps, type NavigationContext, PasswordField, type PasswordFieldProps, Popover, type PopoverProps, ProgressBar, type ProgressBarProps, ProgressCircle, type ProgressCircleProps, Radio, RadioGroup, type RadioGroupProps, type RenderProp, Row, type RowProps, SearchField, type SearchFieldProps, Select, type SelectProps, Sidebar, SidebarHeader, SidebarItem, type SidebarItemProps, type SidebarProps, SidebarSection, Slider, type SliderProps, Spinner, type SpinnerProps, StatusLight, type StatusLightProps, type StrokeWidth, SubMenuTrigger, type SubmenuTriggerProps, Switch, type SwitchProps, Tab, TabList, TabPanel, Table, TableBody, TableCell, type TableCellProps, TableColumn, type TableColumnProps, TableHeader, TableRow, Tabs, Text, TextField, type TextFieldProps, type TextProps, type TextRenderProps, type Theme, ThemeButton, type ThemeButtonProps, type ThemeMode, ThemeSwitcher, type ThemeSwitcherProps, Toast, ToastContext, type ToastOptions, type ToastPosition, type ToastProps, ToastProvider, type ToastProviderProps, type ToastState, type ToastVariant, Toaster, type ToasterProps, Toggle, ToggleGroup, ToggleGroupItem, type ToggleGroupItemProps, type ToggleGroupProps, type ToggleProps, Tooltip, TooltipBubble, type TooltipBubbleProps, type TooltipProps, ZenProvider, type ZenProviderProps, cn, getCssColorValue, isHeightPreset, isMaxHeightPreset, isMaxWidthPreset, isMinHeightPreset, isMinWidthPreset, isWidthPreset, mapAlignContent, mapAlignItems, mapAlignSelf, mapBackgroundColor, mapBorder, mapBorderColor, mapBorderRadius, mapBorderWidth, mapCursor, mapDisplay, mapFlexDirection, mapFlexWrap, mapFontSize, mapFontWeight, mapGap, mapGridAutoFlow, mapGridColumns, mapGridRows, mapHeadingSize, mapHeight, mapJustifyContent, mapJustifyItems, mapLetterSpacing, mapLineHeight, mapMargin, mapMaxHeight, mapMaxWidth, mapMinHeight, mapMinWidth, mapOpacity, mapOverflow, mapPadding, mapPointerEvents, mapPosition, mapShadow, mapStateStyles, mapTextAlign, mapTextColor, mapTextDecorationStyle, mapTextIndent, mapTextTransform, mapTextWrap, mapVerticalAlign, mapWhitespace, mapWidth, mapWordBreak, removeToast, resolveRender, useBreakpoint, useDebounce, useInitTheme, useNavigationContext, useTheme, useToast };
+export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, AlertBanner, type AlertBannerProps, AlertDialog, type AlertDialogProps, Blockquote, type BlockquoteProps, Box, type BoxProps, type BoxRenderProps, Breadcrumb, Breadcrumbs, type BreakpointKey, Button, type ButtonProps, type ButtonRenderProps, Calendar, type CalendarProps, Checkbox, type CheckboxProps, Code, type CodeProps, Column, type ColumnProps, ComboBox, type ComboBoxProps, ConfirmationDialog, type ConfirmationDialogProps, Container, type ContainerProps, CopyButton, type CopyButtonProps, DataCard, type DataCardProps, DataColumn, type DataColumnProps, DataTable, type DataTableProps, Dialog, type DialogProps, Dots, type DotsProps, Flexbox, type FlexboxProps, FloatingTooltip, type FloatingTooltipProps, Form, FormButtons, type FormButtonsProps, FormController, type FormControllerProps, FormField, FormFieldArray, type FormFieldArrayProps, type FormFieldProps, type FormProps, FormResetButton, type FormResetButtonProps, FormSubmitButton, Grid, type GridProps, Heading, type HeadingProps, type HoverButtonProps, HoverTrigger, Icon, IconLabel, type IconLabelProps, type IconProps, Image, type ImageProps, Label, type LabelProps, List, ListItem, type ListItemProps, type ListProps, ListSection, type ListSectionProps, ListSeparator, Loading, LoadingButton, type LoadingButtonProps, type LoadingProps, Menu, MenuItem, type MenuItemProps, type MenuProps, MenuSection, type MenuSectionProps, MenuSeparator, Modal, type ModalProps, NavMenu, NavMenuGroup, type NavMenuGroupProps, NavMenuItem, type NavMenuItemProps, type NavMenuProps, Navbar, NavbarContext, NavbarItem, type NavbarItemProps, type NavbarProps, type NavigationContext, PALETTES, type Palette, PaletteSwitcher, type PaletteSwitcherProps, PasswordField, type PasswordFieldProps, Popover, type PopoverProps, ProgressBar, type ProgressBarProps, ProgressCircle, type ProgressCircleProps, Radio, RadioGroup, type RadioGroupProps, type RenderProp, Row, type RowProps, SearchField, type SearchFieldProps, Select, type SelectProps, Sidebar, SidebarHeader, SidebarItem, type SidebarItemProps, type SidebarProps, SidebarSection, Slider, type SliderProps, Spinner, type SpinnerProps, StatusLight, type StatusLightProps, type StrokeWidth, SubMenuTrigger, type SubmenuTriggerProps, Switch, type SwitchProps, Tab, TabList, TabPanel, Table, TableBody, TableCell, type TableCellProps, TableColumn, type TableColumnProps, TableHeader, TableRow, Tabs, Text, TextField, type TextFieldProps, type TextProps, type TextRenderProps, type Theme, ThemeButton, type ThemeButtonProps, type ThemeMode, ThemeSwitcher, type ThemeSwitcherProps, Toast, ToastContext, type ToastOptions, type ToastPosition, type ToastProps, ToastProvider, type ToastProviderProps, type ToastState, type ToastVariant, Toaster, type ToasterProps, Toggle, ToggleGroup, ToggleGroupItem, type ToggleGroupItemProps, type ToggleGroupProps, type ToggleProps, Tooltip, TooltipBubble, type TooltipBubbleProps, type TooltipProps, ZenProvider, type ZenProviderProps, cn, getCssColorValue, isHeightPreset, isMaxHeightPreset, isMaxWidthPreset, isMinHeightPreset, isMinWidthPreset, isWidthPreset, mapAlignContent, mapAlignItems, mapAlignSelf, mapBackgroundColor, mapBorder, mapBorderColor, mapBorderRadius, mapBorderWidth, mapCursor, mapDisplay, mapFlexDirection, mapFlexWrap, mapFontSize, mapFontWeight, mapGap, mapGridAutoFlow, mapGridColumns, mapGridRows, mapHeadingSize, mapHeight, mapJustifyContent, mapJustifyItems, mapLetterSpacing, mapLineHeight, mapMargin, mapMaxHeight, mapMaxWidth, mapMinHeight, mapMinWidth, mapOpacity, mapOverflow, mapPadding, mapPointerEvents, mapPosition, mapShadow, mapStateStyles, mapTextAlign, mapTextColor, mapTextDecorationStyle, mapTextIndent, mapTextTransform, mapTextWrap, mapVerticalAlign, mapWhitespace, mapWidth, mapWordBreak, removeToast, resolveRender, useBreakpoint, useDebounce, useInitTheme, useNavigationContext, useTheme, useToast };

package/dist/index.js

@@ -3924,11 +3924,18 @@ function useDebounce(value, delay) {
   }, [value, delay]);
   return debouncedValue;
 }
-var STORAGE_KEY = "theme";
+var PALETTES = ["neutral", "slate", "gray", "zinc", "stone"];
+var THEME_STORAGE_KEY = "theme";
+var PALETTE_STORAGE_KEY = "zen.palette";
 function getThemeFromDOM() {
   if (typeof window === "undefined") return "light";
   return document.documentElement.classList.contains("dark") ? "dark" : "light";
 }
+function getPaletteFromDOM() {
+  if (typeof window === "undefined") return "neutral";
+  const palette = document.documentElement.getAttribute("data-palette");
+  return palette && PALETTES.includes(palette) ? palette : "neutral";
+}
 function resolveTheme(preferred, colorScheme) {
   if (preferred) {
     return preferred;
@@ -3950,41 +3957,67 @@ function applyTheme(theme) {
     document.documentElement.classList.remove("dark");
   }
 }
+function applyPalette(palette) {
+  if (typeof window === "undefined") return;
+  document.documentElement.setAttribute("data-palette", palette);
+}
 var useTheme = zustand.create((set, get) => ({
   theme: "light",
+  palette: "neutral",
   setTheme: (theme) => {
     set({ theme });
     if (typeof window !== "undefined") {
-      localStorage.setItem(STORAGE_KEY, theme);
+      localStorage.setItem(THEME_STORAGE_KEY, theme);
       applyTheme(theme);
     }
   },
+  setPalette: (palette) => {
+    set({ palette });
+    if (typeof window !== "undefined") {
+      localStorage.setItem(PALETTE_STORAGE_KEY, palette);
+      applyPalette(palette);
+    }
+  },
   syncTheme: () => {
     const theme = getThemeFromDOM();
-    if (theme !== get().theme) {
+    const palette = getPaletteFromDOM();
+    const state = get();
+    if (theme !== state.theme) {
       set({ theme });
       document.documentElement.setAttribute("data-theme", theme);
     }
+    if (palette !== state.palette) {
+      set({ palette });
+    }
   },
   initTheme: (preferred, colorScheme) => {
     if (typeof window === "undefined") return;
-    const stored = localStorage.getItem(STORAGE_KEY);
+    const stored = localStorage.getItem(THEME_STORAGE_KEY);
     const initial = resolveTheme(preferred || stored || void 0, colorScheme);
     set({ theme: initial });
     applyTheme(initial);
+  },
+  initPalette: (preferred) => {
+    if (typeof window === "undefined") return;
+    const stored = localStorage.getItem(PALETTE_STORAGE_KEY);
+    const initial = preferred || (stored && PALETTES.includes(stored) ? stored : null) || "neutral";
+    set({ palette: initial });
+    applyPalette(initial);
   }
 }));
-function useInitTheme(preferred, colorScheme) {
+function useInitTheme(preferred, colorScheme, preferredPalette) {
   const initTheme = useTheme((s) => s.initTheme);
+  const initPalette = useTheme((s) => s.initPalette);
   const syncTheme = useTheme((s) => s.syncTheme);
   react.useLayoutEffect(() => {
     initTheme(preferred, colorScheme);
-  }, [preferred, colorScheme, initTheme]);
+    initPalette(preferredPalette);
+  }, [preferred, colorScheme, preferredPalette, initTheme, initPalette]);
   react.useEffect(() => {
     if (typeof window === "undefined") return;
     const observer = new MutationObserver((mutations) => {
       for (const mutation of mutations) {
-        if (mutation.attributeName === "class") {
+        if (mutation.attributeName === "class" || mutation.attributeName === "data-palette") {
           syncTheme();
         }
       }
@@ -4424,6 +4457,43 @@ function NavMenuItem({ isSelected, className, children, ...props }) {
     }
   );
 }
+var PALETTE_LABELS = {
+  neutral: "Neutral",
+  slate: "Slate",
+  gray: "Gray",
+  zinc: "Zinc",
+  stone: "Stone"
+};
+function PaletteSwitcher({ className }) {
+  const { palette, setPalette } = useTheme();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(
+        "inline-flex items-center bg-surface-base border border-edge rounded-md overflow-hidden",
+        className
+      ),
+      children: PALETTES.map((p) => /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => setPalette(p),
+          "aria-label": PALETTE_LABELS[p],
+          "aria-pressed": palette === p,
+          className: cn(
+            "px-3 h-9 flex items-center justify-center cursor-pointer outline-none transition-colors text-sm",
+            "[&:not(:first-child)]:border-l [&:not(:first-child)]:border-edge",
+            "hover:bg-interactive",
+            "focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-inset",
+            palette === p ? "bg-interactive text-foreground-primary" : "text-foreground-muted"
+          ),
+          children: PALETTE_LABELS[p]
+        },
+        p
+      ))
+    }
+  );
+}
 var SvgEyeSlash = (props) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 256 256", ...props, children: [
   /* @__PURE__ */ jsxRuntime.jsx("path", { fill: "none", d: "M0 0h256v256H0z" }),
   /* @__PURE__ */ jsxRuntime.jsx(
@@ -5018,7 +5088,7 @@ function ThemeButton({
     }
   );
 }
-var STORAGE_KEY2 = "theme-mode";
+var STORAGE_KEY = "theme-mode";
 function getSystemTheme() {
   if (typeof window === "undefined") return "light";
   return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
@@ -5027,7 +5097,7 @@ function ThemeSwitcher({ className }) {
   const { setTheme } = useTheme();
   const [mode, setMode] = react.useState("system");
   react.useEffect(() => {
-    const stored = localStorage.getItem(STORAGE_KEY2);
+    const stored = localStorage.getItem(STORAGE_KEY);
     if (stored && ["light", "dark", "system"].includes(stored)) {
       setMode(stored);
     }
@@ -5038,7 +5108,7 @@ function ThemeSwitcher({ className }) {
     } else {
       setTheme(mode);
     }
-    localStorage.setItem(STORAGE_KEY2, mode);
+    localStorage.setItem(STORAGE_KEY, mode);
   }, [mode, setTheme]);
   react.useEffect(() => {
     if (mode !== "system") return;
@@ -5164,9 +5234,10 @@ function ZenProvider({
   children,
   theme,
   colorScheme,
+  palette,
   toast: toast2 = defaultToastConfig
 }) {
-  useInitTheme(theme, colorScheme);
+  useInitTheme(theme, colorScheme, palette);
   return /* @__PURE__ */ jsxRuntime.jsx(ToastProvider, { ...toast2, children });
 }
 
@@ -5257,6 +5328,8 @@ exports.NavMenuItem = NavMenuItem;
 exports.Navbar = Navbar;
 exports.NavbarContext = NavbarContext;
 exports.NavbarItem = NavbarItem;
+exports.PALETTES = PALETTES;
+exports.PaletteSwitcher = PaletteSwitcher;
 exports.PasswordField = PasswordField;
 exports.Popover = Popover;
 exports.ProgressBar = ProgressBar;