@umami/react-zen 0.237.0 → 0.239.0

package/dist/index.d.mts

@@ -399,7 +399,7 @@ interface ContainerProps extends BoxProps {
 declare function Container({ isCentered, isFluid, className, children, ...props }: ContainerProps): react_jsx_runtime.JSX.Element;
 
 interface CopyButtonProps {
-    value?: string;
+    value?: string | (() => string);
     timeout?: number;
     className?: string;
     children?: ReactNode;
@@ -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 {
@@ -604,16 +609,6 @@ interface IconProps extends Omit<HTMLAttributes<HTMLElement>, 'color' | 'size'>
 }
 declare function Icon({ color, size, variant, rotate, strokeWidth, strokeColor, fillColor, style, className, children, ...props }: IconProps): react_jsx_runtime.JSX.Element;
 
-interface IconLabelProps extends RowProps {
-    children?: ReactNode;
-    icon: ReactNode;
-    label?: ReactNode;
-    iconProps?: IconProps;
-    labelProps?: TextProps;
-    showLabel?: boolean;
-}
-declare function IconLabel({ icon, label, iconProps, labelProps, showLabel, children, ...props }: IconLabelProps): react_jsx_runtime.JSX.Element;
-
 interface ImageProps extends HTMLAttributes<HTMLImageElement> {
     src: string;
     alt?: string;
@@ -751,21 +746,10 @@ interface NavbarItemProps extends HTMLAttributes<HTMLElement> {
 }
 declare function NavbarItem({ label, children, className, color: _color, ...props }: NavbarItemProps): react_jsx_runtime.JSX.Element;
 
-interface NavMenuProps extends ColumnProps {
-    muteItems?: boolean;
-    onItemClick?: () => void;
-}
-declare function NavMenu({ muteItems, onItemClick, className, children, ...props }: NavMenuProps): react_jsx_runtime.JSX.Element;
-interface NavMenuGroupProps extends ColumnProps {
-    title?: string;
-    allowMinimize?: boolean;
-    isMinimized?: boolean;
-}
-declare function NavMenuGroup({ title, allowMinimize, isMinimized, className, children, ...props }: NavMenuGroupProps): react_jsx_runtime.JSX.Element;
-interface NavMenuItemProps extends RowProps {
-    isSelected?: boolean;
+interface PaletteSwitcherProps {
+    className?: string;
 }
-declare function NavMenuItem({ isSelected, className, children, ...props }: NavMenuItemProps): react_jsx_runtime.JSX.Element;
+declare function PaletteSwitcher({ className }: PaletteSwitcherProps): react_jsx_runtime.JSX.Element;
 
 interface PasswordFieldProps extends TextFieldProps$1 {
     label?: string;
@@ -831,29 +815,6 @@ interface SelectProps extends SelectProps$1<HTMLSelectElement> {
 }
 declare function Select({ items, value, defaultValue, label, isLoading, allowSearch, searchValue, searchDelay, isFullscreen, maxHeight, onSearch, onChange, buttonProps, listProps, popoverProps, renderValue, className, children, ...props }: SelectProps): react_jsx_runtime.JSX.Element;
 
-interface SidebarProps extends ColumnProps {
-    isCollapsed?: boolean;
-    muteItems?: boolean;
-    children?: ReactNode;
-}
-declare function Sidebar({ isCollapsed, muteItems, className, children, ...props }: SidebarProps): react_jsx_runtime.JSX.Element;
-declare function SidebarSection({ title, className, children, ...props }: {
-    title?: string;
-    children: ReactNode;
-} & ColumnProps): react_jsx_runtime.JSX.Element;
-declare function SidebarHeader({ label, icon, className, children, ...props }: {
-    label: string;
-    icon?: ReactNode;
-    children?: ReactNode;
-} & RowProps): react_jsx_runtime.JSX.Element;
-interface SidebarItemProps extends RowProps {
-    isSelected?: boolean;
-}
-declare function SidebarItem({ label, icon, isSelected, className, children, ...props }: {
-    label?: string;
-    icon?: ReactNode;
-} & SidebarItemProps): react_jsx_runtime.JSX.Element;
-
 interface SliderProps extends SliderProps$1 {
     label?: ReactNode;
     showValue?: boolean;
@@ -970,9 +931,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, 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, 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, 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

@@ -399,7 +399,7 @@ interface ContainerProps extends BoxProps {
 declare function Container({ isCentered, isFluid, className, children, ...props }: ContainerProps): react_jsx_runtime.JSX.Element;
 
 interface CopyButtonProps {
-    value?: string;
+    value?: string | (() => string);
     timeout?: number;
     className?: string;
     children?: ReactNode;
@@ -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 {
@@ -604,16 +609,6 @@ interface IconProps extends Omit<HTMLAttributes<HTMLElement>, 'color' | 'size'>
 }
 declare function Icon({ color, size, variant, rotate, strokeWidth, strokeColor, fillColor, style, className, children, ...props }: IconProps): react_jsx_runtime.JSX.Element;
 
-interface IconLabelProps extends RowProps {
-    children?: ReactNode;
-    icon: ReactNode;
-    label?: ReactNode;
-    iconProps?: IconProps;
-    labelProps?: TextProps;
-    showLabel?: boolean;
-}
-declare function IconLabel({ icon, label, iconProps, labelProps, showLabel, children, ...props }: IconLabelProps): react_jsx_runtime.JSX.Element;
-
 interface ImageProps extends HTMLAttributes<HTMLImageElement> {
     src: string;
     alt?: string;
@@ -751,21 +746,10 @@ interface NavbarItemProps extends HTMLAttributes<HTMLElement> {
 }
 declare function NavbarItem({ label, children, className, color: _color, ...props }: NavbarItemProps): react_jsx_runtime.JSX.Element;
 
-interface NavMenuProps extends ColumnProps {
-    muteItems?: boolean;
-    onItemClick?: () => void;
-}
-declare function NavMenu({ muteItems, onItemClick, className, children, ...props }: NavMenuProps): react_jsx_runtime.JSX.Element;
-interface NavMenuGroupProps extends ColumnProps {
-    title?: string;
-    allowMinimize?: boolean;
-    isMinimized?: boolean;
-}
-declare function NavMenuGroup({ title, allowMinimize, isMinimized, className, children, ...props }: NavMenuGroupProps): react_jsx_runtime.JSX.Element;
-interface NavMenuItemProps extends RowProps {
-    isSelected?: boolean;
+interface PaletteSwitcherProps {
+    className?: string;
 }
-declare function NavMenuItem({ isSelected, className, children, ...props }: NavMenuItemProps): react_jsx_runtime.JSX.Element;
+declare function PaletteSwitcher({ className }: PaletteSwitcherProps): react_jsx_runtime.JSX.Element;
 
 interface PasswordFieldProps extends TextFieldProps$1 {
     label?: string;
@@ -831,29 +815,6 @@ interface SelectProps extends SelectProps$1<HTMLSelectElement> {
 }
 declare function Select({ items, value, defaultValue, label, isLoading, allowSearch, searchValue, searchDelay, isFullscreen, maxHeight, onSearch, onChange, buttonProps, listProps, popoverProps, renderValue, className, children, ...props }: SelectProps): react_jsx_runtime.JSX.Element;
 
-interface SidebarProps extends ColumnProps {
-    isCollapsed?: boolean;
-    muteItems?: boolean;
-    children?: ReactNode;
-}
-declare function Sidebar({ isCollapsed, muteItems, className, children, ...props }: SidebarProps): react_jsx_runtime.JSX.Element;
-declare function SidebarSection({ title, className, children, ...props }: {
-    title?: string;
-    children: ReactNode;
-} & ColumnProps): react_jsx_runtime.JSX.Element;
-declare function SidebarHeader({ label, icon, className, children, ...props }: {
-    label: string;
-    icon?: ReactNode;
-    children?: ReactNode;
-} & RowProps): react_jsx_runtime.JSX.Element;
-interface SidebarItemProps extends RowProps {
-    isSelected?: boolean;
-}
-declare function SidebarItem({ label, icon, isSelected, className, children, ...props }: {
-    label?: string;
-    icon?: ReactNode;
-} & SidebarItemProps): react_jsx_runtime.JSX.Element;
-
 interface SliderProps extends SliderProps$1 {
     label?: ReactNode;
     showValue?: boolean;
@@ -970,9 +931,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, 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, 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, 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

@@ -3128,8 +3128,9 @@ function CopyButton({ value, timeout = TIMEOUT, className, children, ...props })
   const [copied, setCopied] = react.useState(false);
   const ref = react.useRef(timeout);
   const handleCopy = async () => {
-    if (value) {
-      await navigator.clipboard.writeText(value);
+    const text2 = typeof value === "function" ? value() : value;
+    if (text2) {
+      await navigator.clipboard.writeText(text2);
       setCopied(true);
       clearTimeout(ref.current);
       ref.current = +setTimeout(() => setCopied(false), timeout);
@@ -3924,11 +3925,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 +3958,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();
         }
       }
@@ -4122,21 +4156,6 @@ function useToast() {
   };
   return { toast: toast2, toasts };
 }
-function IconLabel({
-  icon,
-  label,
-  iconProps,
-  labelProps,
-  showLabel = true,
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(Row, { alignItems: "center", gap: true, ...props, children: [
-    icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { ...iconProps, children: icon }),
-    showLabel && label && /* @__PURE__ */ jsxRuntime.jsx(Text, { ...labelProps, children: label }),
-    showLabel && children
-  ] });
-}
 var objectFitMap = {
   fill: "object-fill",
   contain: "object-contain",
@@ -4228,7 +4247,11 @@ function MenuItem({
         className
       ),
       children: ({ isSelected }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(IconLabel, { icon, label, children }),
+        /* @__PURE__ */ jsxRuntime.jsxs(Row, { alignItems: "center", gap: true, children: [
+          icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: icon }),
+          label && /* @__PURE__ */ jsxRuntime.jsx(Text, { children: label }),
+          children
+        ] }),
         showChecked && isSelected && /* @__PURE__ */ jsxRuntime.jsx(Icon, { "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(icons_exports.Check, {}) }),
         showSubMenuIcon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(icons_exports.ChevronRight, {}) })
       ] })
@@ -4357,70 +4380,40 @@ function NavbarItem({
     }
   );
 }
-var NavMenuContext = react.createContext(null);
-function NavMenu({ muteItems, onItemClick, className, children, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(NavMenuContext.Provider, { value: { onItemClick }, children: /* @__PURE__ */ jsxRuntime.jsx(Column, { ...props, color: muteItems ? "muted" : void 0, className, children }) });
-}
-function NavMenuGroup({
-  title,
-  allowMinimize = true,
-  isMinimized,
-  className,
-  children,
-  ...props
-}) {
-  const [minimized, setMinimized] = react.useState(!!isMinimized);
-  const handleClick = () => {
-    if (allowMinimize) {
-      setMinimized((state) => !state);
-    }
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    Column,
-    {
-      ...props,
-      className: cn(
-        className,
-        allowMinimize && "cursor-pointer",
-        allowMinimize && minimized && "[&_.navmenu-children]:hidden"
-      ),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          Row,
-          {
-            paddingY: "2",
-            paddingX: "3",
-            alignItems: "center",
-            justifyContent: "space-between",
-            onClick: handleClick,
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "xs", weight: "semibold", color: "muted", transform: "uppercase", children: title }),
-              allowMinimize && /* @__PURE__ */ jsxRuntime.jsx(Icon, { rotate: minimized ? 0 : 90, color: "muted", children: /* @__PURE__ */ jsxRuntime.jsx(icons_exports.ChevronRight, {}) })
-            ]
-          }
-        ),
-        !minimized && /* @__PURE__ */ jsxRuntime.jsx(Column, { className: "navmenu-children", children })
-      ]
-    }
-  );
-}
-function NavMenuItem({ isSelected, className, children, ...props }) {
-  const { onItemClick } = react.useContext(NavMenuContext);
+var PALETTE_LABELS = {
+  neutral: "Neutral",
+  slate: "Slate",
+  gray: "Gray",
+  zinc: "Zinc",
+  stone: "Stone"
+};
+function PaletteSwitcher({ className }) {
+  const { palette, setPalette } = useTheme();
   return /* @__PURE__ */ jsxRuntime.jsx(
-    Row,
+    "div",
     {
-      ...props,
-      paddingY: "2",
-      paddingX: "3",
-      borderRadius: "md",
-      onClick: onItemClick,
       className: cn(
-        "cursor-pointer",
-        "hover:bg-interactive",
-        isSelected && "bg-interactive font-medium",
+        "inline-flex items-center bg-surface-base border border-edge rounded-md overflow-hidden",
         className
       ),
-      children
+      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
+      ))
     }
   );
 }
@@ -4759,83 +4752,6 @@ function Select({
     }
   );
 }
-var SidebarContext = react.createContext(null);
-function Sidebar({ isCollapsed, muteItems, className, children, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(SidebarContext.Provider, { value: { isCollapsed }, children: /* @__PURE__ */ jsxRuntime.jsx(
-    Column,
-    {
-      border: "right",
-      ...props,
-      className: cn(
-        "text-base",
-        isCollapsed && "w-16",
-        muteItems && "text-foreground-muted",
-        className
-      ),
-      children
-    }
-  ) });
-}
-function SidebarSection({
-  title,
-  className,
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(Column, { ...props, paddingY: "2", className, children: [
-    title && /* @__PURE__ */ jsxRuntime.jsx(Box, { paddingX: "4", paddingY: "2", children: /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "xs", weight: "semibold", transform: "uppercase", color: "muted", children: title }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(Column, { children })
-  ] });
-}
-function SidebarHeader({
-  label,
-  icon,
-  className,
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(Row, { ...props, paddingX: "4", paddingY: "3", gap: "3", alignItems: "center", className, children: [
-    icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: "sm", children: icon }),
-    label && /* @__PURE__ */ jsxRuntime.jsx(Text, { weight: "semibold", children: label }),
-    children
-  ] });
-}
-function SidebarItem({
-  label,
-  icon,
-  isSelected,
-  className,
-  children,
-  ...props
-}) {
-  const { isCollapsed } = react.useContext(SidebarContext);
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactAriaComponents.TooltipTrigger, { delay: 0, closeDelay: 0, isDisabled: !isCollapsed, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Focusable, { children: /* @__PURE__ */ jsxRuntime.jsxs(
-      Row,
-      {
-        ...props,
-        paddingX: isCollapsed ? "0" : "4",
-        paddingY: "2",
-        gap: "3",
-        alignItems: "center",
-        justifyContent: isCollapsed ? "center" : void 0,
-        borderRadius: "md",
-        className: cn(
-          "cursor-pointer",
-          "hover:bg-interactive",
-          isSelected && "bg-interactive font-medium",
-          className
-        ),
-        children: [
-          icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: "sm", children: icon }),
-          label && !isCollapsed && /* @__PURE__ */ jsxRuntime.jsx(Text, { children: label }),
-          children
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ jsxRuntime.jsx(Tooltip, { placement: "right", children: label })
-  ] });
-}
 function Fill2({ percentage }) {
   const width = `calc(10px + ${percentage}% - ${percentage * 0.2}px)`;
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-y-0 left-0 rounded-full bg-primary", style: { width } });
@@ -5018,7 +4934,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 +4943,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 +4954,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 +5080,10 @@ function ZenProvider({
   children,
   theme,
   colorScheme,
+  palette,
   toast: toast2 = defaultToastConfig
 }) {
-  useInitTheme(theme, colorScheme);
+  useInitTheme(theme, colorScheme, palette);
   return /* @__PURE__ */ jsxRuntime.jsx(ToastProvider, { ...toast2, children });
 }
 
@@ -5237,7 +5154,6 @@ exports.Grid = Grid;
 exports.Heading = Heading;
 exports.HoverTrigger = HoverTrigger;
 exports.Icon = Icon;
-exports.IconLabel = IconLabel;
 exports.Image = Image;
 exports.Label = Label;
 exports.List = List;
@@ -5251,12 +5167,11 @@ exports.MenuItem = MenuItem;
 exports.MenuSection = MenuSection;
 exports.MenuSeparator = MenuSeparator;
 exports.Modal = Modal;
-exports.NavMenu = NavMenu;
-exports.NavMenuGroup = NavMenuGroup;
-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;
@@ -5266,10 +5181,6 @@ exports.RadioGroup = RadioGroup;
 exports.Row = Row;
 exports.SearchField = SearchField;
 exports.Select = Select;
-exports.Sidebar = Sidebar;
-exports.SidebarHeader = SidebarHeader;
-exports.SidebarItem = SidebarItem;
-exports.SidebarSection = SidebarSection;
 exports.Slider = Slider;
 exports.Spinner = Spinner;
 exports.StatusLight = StatusLight;