@umami/react-zen 0.231.0 → 0.233.0

package/README.md

@@ -1,6 +1,6 @@
 # zen
 
-**zen** is a props-driven React component library built for speed. Build polished interfaces without writing HTML, CSS, or thinking about Tailwind classes.
+**Zen** is a props-driven React component library built for speed. Build polished interfaces without writing HTML, CSS, or thinking about Tailwind classes.
 
 - **Props over classes** - Style through component props, not utility classes
 - **Design included** - Complete design system out of the box with dark mode
@@ -43,11 +43,11 @@ export default function Welcome() {
 
 No `className`. No CSS files. Just components and props.
 
-## Why zen?
+## Why Zen?
 
 Building UI is slow. You have to think about markup, CSS organization, responsive breakpoints, accessibility, and design consistency.
 
-zen eliminates that friction:
+Zen eliminates that friction:
 
 | Traditional approach | zen approach |
 |---------------------|--------------|

package/dist/index.d.mts

@@ -117,6 +117,12 @@ type MinWidth = Spacing | Fraction | SizingSpecial | WidthViewport;
 type MaxWidth = Spacing | Fraction | MaxWidthSpecial | WidthViewport;
 type MinHeight = Spacing | Fraction | SizingSpecial | HeightViewport;
 type MaxHeight = Spacing | Fraction | SizingSpecial | HeightViewport;
+interface StateStyles {
+    color?: FontColor;
+    backgroundColor?: BackgroundColor;
+    borderColor?: BorderColor;
+    opacity?: Opacity;
+}
 
 type RenderProp<P = Record<string, unknown>> = ReactElement | ((props: P) => ReactElement);
 /**
@@ -224,6 +230,9 @@ interface BoxProps extends Omit<HTMLAttributes<HTMLElement>, 'color'> {
     order?: number;
     zIndex?: number;
     theme?: string;
+    hover?: StateStyles;
+    focus?: StateStyles;
+    active?: StateStyles;
     as?: string;
     render?: RenderProp<BoxRenderProps>;
 }
@@ -619,7 +628,7 @@ declare function Image({ src, alt, objectFit, isCentered, borderRadius, shadow,
 interface LabelProps extends Omit<TextProps, 'as' | 'render'> {
     htmlFor?: string;
 }
-declare function Label({ size, weight, ...props }: LabelProps): react_jsx_runtime.JSX.Element;
+declare function Label({ size, weight, lineHeight, ...props }: LabelProps): react_jsx_runtime.JSX.Element;
 
 interface LoadingProps extends BoxProps {
     size?: 'sm' | 'md' | 'lg';
@@ -747,6 +756,7 @@ interface SelectProps extends SelectProps$1<HTMLSelectElement> {
     searchValue?: string;
     searchDelay?: number;
     isFullscreen?: boolean;
+    maxHeight?: string | number;
     onSearch?: (value: string) => void;
     onChange?: (e: any) => void;
     buttonProps?: ButtonProps;
@@ -756,7 +766,7 @@ interface SelectProps extends SelectProps$1<HTMLSelectElement> {
         defaultChildren: ReactNode;
     }) => ReactNode);
 }
-declare function Select({ items, value, defaultValue, label, isLoading, allowSearch, searchValue, searchDelay, isFullscreen, onSearch, onChange, buttonProps, listProps, popoverProps, renderValue, className, children, ...props }: SelectProps): react_jsx_runtime.JSX.Element;
+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;
@@ -845,6 +855,12 @@ interface ThemeButtonProps extends ButtonProps {
 }
 declare function ThemeButton({ className, variant, target, onPress, ...props }: ThemeButtonProps): react_jsx_runtime.JSX.Element;
 
+type ThemeMode = 'light' | 'dark' | 'system';
+interface ThemeSwitcherProps {
+    className?: string;
+}
+declare function ThemeSwitcher({ className }: ThemeSwitcherProps): react_jsx_runtime.JSX.Element;
+
 interface ToggleProps extends ToggleButtonProps {
     label?: string;
     value?: string;
@@ -896,4 +912,4 @@ interface ZenProviderProps {
 }
 declare function ZenProvider({ children, theme, colorScheme, 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, 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, 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, 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, removeToast, resolveRender, useBreakpoint, useDebounce, useInitTheme, useNavigationContext, useTheme, useToast };

package/dist/index.d.ts

@@ -117,6 +117,12 @@ type MinWidth = Spacing | Fraction | SizingSpecial | WidthViewport;
 type MaxWidth = Spacing | Fraction | MaxWidthSpecial | WidthViewport;
 type MinHeight = Spacing | Fraction | SizingSpecial | HeightViewport;
 type MaxHeight = Spacing | Fraction | SizingSpecial | HeightViewport;
+interface StateStyles {
+    color?: FontColor;
+    backgroundColor?: BackgroundColor;
+    borderColor?: BorderColor;
+    opacity?: Opacity;
+}
 
 type RenderProp<P = Record<string, unknown>> = ReactElement | ((props: P) => ReactElement);
 /**
@@ -224,6 +230,9 @@ interface BoxProps extends Omit<HTMLAttributes<HTMLElement>, 'color'> {
     order?: number;
     zIndex?: number;
     theme?: string;
+    hover?: StateStyles;
+    focus?: StateStyles;
+    active?: StateStyles;
     as?: string;
     render?: RenderProp<BoxRenderProps>;
 }
@@ -619,7 +628,7 @@ declare function Image({ src, alt, objectFit, isCentered, borderRadius, shadow,
 interface LabelProps extends Omit<TextProps, 'as' | 'render'> {
     htmlFor?: string;
 }
-declare function Label({ size, weight, ...props }: LabelProps): react_jsx_runtime.JSX.Element;
+declare function Label({ size, weight, lineHeight, ...props }: LabelProps): react_jsx_runtime.JSX.Element;
 
 interface LoadingProps extends BoxProps {
     size?: 'sm' | 'md' | 'lg';
@@ -747,6 +756,7 @@ interface SelectProps extends SelectProps$1<HTMLSelectElement> {
     searchValue?: string;
     searchDelay?: number;
     isFullscreen?: boolean;
+    maxHeight?: string | number;
     onSearch?: (value: string) => void;
     onChange?: (e: any) => void;
     buttonProps?: ButtonProps;
@@ -756,7 +766,7 @@ interface SelectProps extends SelectProps$1<HTMLSelectElement> {
         defaultChildren: ReactNode;
     }) => ReactNode);
 }
-declare function Select({ items, value, defaultValue, label, isLoading, allowSearch, searchValue, searchDelay, isFullscreen, onSearch, onChange, buttonProps, listProps, popoverProps, renderValue, className, children, ...props }: SelectProps): react_jsx_runtime.JSX.Element;
+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;
@@ -845,6 +855,12 @@ interface ThemeButtonProps extends ButtonProps {
 }
 declare function ThemeButton({ className, variant, target, onPress, ...props }: ThemeButtonProps): react_jsx_runtime.JSX.Element;
 
+type ThemeMode = 'light' | 'dark' | 'system';
+interface ThemeSwitcherProps {
+    className?: string;
+}
+declare function ThemeSwitcher({ className }: ThemeSwitcherProps): react_jsx_runtime.JSX.Element;
+
 interface ToggleProps extends ToggleButtonProps {
     label?: string;
     value?: string;
@@ -896,4 +912,4 @@ interface ZenProviderProps {
 }
 declare function ZenProvider({ children, theme, colorScheme, 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, 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, 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, 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, removeToast, resolveRender, useBreakpoint, useDebounce, useInitTheme, useNavigationContext, useTheme, useToast };

package/dist/index.js

@@ -215,7 +215,7 @@ tailwindVariants.tv({
 });
 var tooltip = tailwindVariants.tv({
   base: [
-    "bg-surface-inverted text-foreground-inverted text-xs px-2 py-1 rounded",
+    "bg-surface-inverted text-foreground-inverted text-base px-2 py-1 rounded",
     "entering:animate-popover-in",
     "exiting:animate-popover-out"
   ]
@@ -2284,6 +2284,37 @@ function isMinHeightPreset(value) {
 function isMaxHeightPreset(value) {
   return value in maxHeightMap;
 }
+function addStatePrefix(prefix, className) {
+  if (!className) return "";
+  return className.split(" ").filter(Boolean).map((cls) => `${prefix}:${cls}`).join(" ");
+}
+function mapStateStyles(prefix, styles) {
+  if (!styles) return "";
+  const classes = [];
+  if (styles.color !== void 0) {
+    const colorClass = mapTextColor(
+      typeof styles.color === "boolean" ? "true" : String(styles.color)
+    );
+    if (colorClass) classes.push(addStatePrefix(prefix, colorClass));
+  }
+  if (styles.backgroundColor !== void 0) {
+    const bgClass = mapBackgroundColor(
+      typeof styles.backgroundColor === "boolean" ? "true" : String(styles.backgroundColor)
+    );
+    if (bgClass) classes.push(addStatePrefix(prefix, bgClass));
+  }
+  if (styles.borderColor !== void 0) {
+    const borderClass = mapBorderColor(
+      typeof styles.borderColor === "boolean" ? "true" : String(styles.borderColor)
+    );
+    if (borderClass) classes.push(addStatePrefix(prefix, borderClass));
+  }
+  if (styles.opacity !== void 0) {
+    const opacityClass = mapOpacity(styles.opacity);
+    if (opacityClass) classes.push(addStatePrefix(prefix, opacityClass));
+  }
+  return classes.join(" ");
+}
 var sizeMap = {
   xs: "w-3 h-3",
   sm: "w-4 h-4",
@@ -2499,6 +2530,9 @@ var Box = react.forwardRef(function Box2({
   order,
   zIndex,
   theme,
+  hover,
+  focus,
+  active,
   as = "div",
   render,
   className,
@@ -2553,6 +2587,9 @@ var Box = react.forwardRef(function Box2({
     mapPointerEvents(pointerEvents),
     mapAlignSelf(alignSelf),
     theme && `${theme}-theme`,
+    mapStateStyles("hover", hover),
+    mapStateStyles("focus", focus),
+    mapStateStyles("active", active),
     className
   );
   const widthStyle = getSizingStyle(width, isWidthPreset);
@@ -2880,13 +2917,14 @@ function useFieldId(id) {
   const generatedId = react.useId();
   return id ?? generatedId;
 }
-function Label({ size = "sm", weight = "medium", ...props }) {
+function Label({ size = "base", weight = "semibold", lineHeight = "loose", ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     Text,
     {
       ...props,
       size,
       weight,
+      lineHeight,
       render: (renderProps) => /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Label, { ...renderProps })
     }
   );
@@ -4643,6 +4681,7 @@ function Select({
   searchValue,
   searchDelay,
   isFullscreen,
+  maxHeight,
   onSearch,
   onChange,
   buttonProps,
@@ -4713,8 +4752,8 @@ function Select({
                     shouldFocusOnHover: false,
                     autoFocus: "first"
                   },
-                  className: cn("max-h-60 overflow-auto", listProps?.className),
-                  style: { ...listProps?.style, display: isLoading ? "none" : void 0 },
+                  className: cn("overflow-auto", listProps?.className),
+                  style: { ...listProps?.style, maxHeight, display: isLoading ? "none" : void 0 },
                   children
                 }
               )
@@ -4984,6 +5023,70 @@ function ThemeButton({
     }
   );
 }
+var STORAGE_KEY2 = "theme-mode";
+function getSystemTheme() {
+  if (typeof window === "undefined") return "light";
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+function ThemeSwitcher({ className }) {
+  const { setTheme } = useTheme();
+  const [mode, setMode] = react.useState("system");
+  react.useEffect(() => {
+    const stored = localStorage.getItem(STORAGE_KEY2);
+    if (stored && ["light", "dark", "system"].includes(stored)) {
+      setMode(stored);
+    }
+  }, []);
+  react.useEffect(() => {
+    if (mode === "system") {
+      setTheme(getSystemTheme());
+    } else {
+      setTheme(mode);
+    }
+    localStorage.setItem(STORAGE_KEY2, mode);
+  }, [mode, setTheme]);
+  react.useEffect(() => {
+    if (mode !== "system") return;
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const handleChange = () => {
+      setTheme(getSystemTheme());
+    };
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, [mode, setTheme]);
+  const options = [
+    { value: "light", icon: /* @__PURE__ */ jsxRuntime.jsx(icons_exports.Sun, {}), label: "Light" },
+    { value: "dark", icon: /* @__PURE__ */ jsxRuntime.jsx(icons_exports.Moon, {}), label: "Dark" },
+    { value: "system", icon: /* @__PURE__ */ jsxRuntime.jsx(icons_exports.Monitor, {}), label: "System" }
+  ];
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(
+        "inline-flex items-center bg-surface-base border border-edge rounded-md overflow-hidden",
+        className
+      ),
+      children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => setMode(option.value),
+          "aria-label": option.label,
+          "aria-pressed": mode === option.value,
+          className: cn(
+            "size-9 flex items-center justify-center cursor-pointer outline-none transition-colors",
+            "[&: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",
+            mode === option.value ? "bg-interactive text-foreground-primary" : "text-foreground-muted"
+          ),
+          children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: "sm", children: option.icon })
+        },
+        option.value
+      ))
+    }
+  );
+}
 function Toggle({ label, children, className, ...props }) {
   const isSelected = typeof props.value !== "undefined" ? !!props.value : void 0;
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -5190,6 +5293,7 @@ exports.Tabs = Tabs;
 exports.Text = Text;
 exports.TextField = TextField;
 exports.ThemeButton = ThemeButton;
+exports.ThemeSwitcher = ThemeSwitcher;
 exports.Toast = Toast;
 exports.ToastContext = ToastContext;
 exports.ToastProvider = ToastProvider;