@umami/react-zen 0.231.0 → 0.232.0

package/dist/index.d.mts

@@ -619,7 +619,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 +747,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 +757,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 +846,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 +903,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

@@ -619,7 +619,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 +747,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 +757,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 +846,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 +903,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"
   ]
@@ -2880,13 +2880,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 +4644,7 @@ function Select({
   searchValue,
   searchDelay,
   isFullscreen,
+  maxHeight,
   onSearch,
   onChange,
   buttonProps,
@@ -4713,8 +4715,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 +4986,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 +5256,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;