@umami/react-zen 0.182.0 → 0.184.0

package/dist/index.d.mts

@@ -3,6 +3,7 @@ export { BreadcrumbProps, BreadcrumbsProps, DialogTrigger, FileTrigger, Focusabl
 import * as react from 'react';
 import { HTMLAttributes, ReactNode, ReactElement, Dispatch, SetStateAction } from 'react';
 import { UseFormProps, SubmitHandler, UseFormReturn, ControllerProps, ControllerRenderProps, FieldValues, ControllerFieldState, UseFormStateReturn, RegisterOptions } from 'react-hook-form';
+import * as zustand from 'zustand';
 
 interface FormProps extends UseFormProps, Omit<HTMLAttributes<HTMLFormElement>, 'children'> {
     autoComplete?: string;
@@ -171,7 +172,7 @@ interface FormFieldArrayProps extends Omit<HTMLAttributes<HTMLDivElement>, 'chil
     rules?: RegisterOptions<FieldValues, string>;
     children: (props: any) => ReactNode;
 }
-declare function FormFieldArray({ name, description, label, rules, className, children, ...props }: FormFieldArrayProps): react.JSX.Element;
+declare function FormFieldArray({ id, name, description, label, rules, className, children, ...props }: FormFieldArrayProps): react.JSX.Element;
 
 interface ButtonProps extends ButtonProps$1 {
     variant?: 'primary' | 'outline' | 'quiet' | 'danger' | 'zero';
@@ -222,11 +223,13 @@ declare function ToastProvider({ children, ...props }: ToastProviderProps): reac
 
 declare function useDebounce(value: string, delay: number): string;
 
-declare function setTheme(theme: string): void;
-declare function useTheme(defaultTheme?: string): {
-    theme: string;
-    setTheme: typeof setTheme;
-};
+type Theme = 'light' | 'dark';
+interface ThemeState {
+    theme: Theme;
+    setTheme: (theme: Theme) => void;
+    initTheme: (preferred?: Theme, colorScheme?: 'light' | 'dark' | 'system') => void;
+}
+declare const useTheme: zustand.UseBoundStore<zustand.StoreApi<ThemeState>>;
 
 type ToastVariant = 'success' | 'error';
 interface ToastOptions {
@@ -703,10 +706,7 @@ interface TextFieldProps extends TextFieldProps$1 {
 }
 declare function TextField({ value, defaultValue, label, placeholder, allowCopy, asTextArea, resize, onChange, isReadOnly, isDisabled, className, children, ...props }: TextFieldProps): react.JSX.Element;
 
-interface ThemeButtonProps extends ButtonProps {
-    defaultTheme?: string;
-}
-declare function ThemeButton({ className, variant, defaultTheme, onPress, ...props }: ThemeButtonProps): react.JSX.Element;
+declare function ThemeButton({ className, variant, onPress, ...props }: ButtonProps): react.JSX.Element;
 
 interface ToggleProps extends ToggleButtonProps {
     label?: string;
@@ -727,11 +727,11 @@ interface ToggleGroupItemProps extends TagProps {
 declare function ToggleGroupItem({ className, children, ...props }: ToggleGroupItemProps): react.JSX.Element;
 
 interface ZenProviderProps {
-    theme?: string;
+    theme?: Theme;
     colorScheme?: 'light' | 'dark' | 'system';
     toast?: ToasterProps;
     children: ReactNode;
 }
-declare function ZenProvider({ children, ...props }: ZenProviderProps): react.JSX.Element;
+declare function ZenProvider({ children, theme, colorScheme, toast, }: ZenProviderProps): react.JSX.Element;
 
-export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, AlertBanner, type AlertBannerProps, AlertDialog, type AlertDialogProps, Blockquote, type BlockquoteProps, Box, type BoxProps, Breadcrumb, Breadcrumbs, Button, type ButtonProps, Calendar, type CalendarProps, Checkbox, type CheckboxProps, Code, type CodeProps, Column, type ColumnProps, ComboBox, type ComboBoxProps, ConfirmationDialog, type ConfirmationDialogProps, Container, type ContainerProps, CopyButton, 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, InlineEditField, type InlineEditFieldProps, 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, ProgressBar, type ProgressBarProps, ProgressCircle, type ProgressCircleProps, Radio, RadioGroup, type RadioGroupProps, Row, type RowProps, SearchField, type SearchFieldProps, Select, type SelectProps, Sidebar, SidebarHeader, SidebarItem, type SidebarItemProps, type SidebarProps, SidebarSection, Slider, type SliderProps, Slot, Spinner, type SpinnerProps, StatusLight, type StatusLightProps, 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, ThemeButton, type ThemeButtonProps, Toast, type ToastOptions, 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, useDebounce, useNavigationContext, useTheme, useToast };
+export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, AlertBanner, type AlertBannerProps, AlertDialog, type AlertDialogProps, Blockquote, type BlockquoteProps, Box, type BoxProps, Breadcrumb, Breadcrumbs, Button, type ButtonProps, Calendar, type CalendarProps, Checkbox, type CheckboxProps, Code, type CodeProps, Column, type ColumnProps, ComboBox, type ComboBoxProps, ConfirmationDialog, type ConfirmationDialogProps, Container, type ContainerProps, CopyButton, 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, InlineEditField, type InlineEditFieldProps, 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, ProgressBar, type ProgressBarProps, ProgressCircle, type ProgressCircleProps, Radio, RadioGroup, type RadioGroupProps, Row, type RowProps, SearchField, type SearchFieldProps, Select, type SelectProps, Sidebar, SidebarHeader, SidebarItem, type SidebarItemProps, type SidebarProps, SidebarSection, Slider, type SliderProps, Slot, Spinner, type SpinnerProps, StatusLight, type StatusLightProps, 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, ThemeButton, Toast, type ToastOptions, 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, useDebounce, useNavigationContext, useTheme, useToast };

package/dist/index.d.ts

@@ -3,6 +3,7 @@ export { BreadcrumbProps, BreadcrumbsProps, DialogTrigger, FileTrigger, Focusabl
 import * as react from 'react';
 import { HTMLAttributes, ReactNode, ReactElement, Dispatch, SetStateAction } from 'react';
 import { UseFormProps, SubmitHandler, UseFormReturn, ControllerProps, ControllerRenderProps, FieldValues, ControllerFieldState, UseFormStateReturn, RegisterOptions } from 'react-hook-form';
+import * as zustand from 'zustand';
 
 interface FormProps extends UseFormProps, Omit<HTMLAttributes<HTMLFormElement>, 'children'> {
     autoComplete?: string;
@@ -171,7 +172,7 @@ interface FormFieldArrayProps extends Omit<HTMLAttributes<HTMLDivElement>, 'chil
     rules?: RegisterOptions<FieldValues, string>;
     children: (props: any) => ReactNode;
 }
-declare function FormFieldArray({ name, description, label, rules, className, children, ...props }: FormFieldArrayProps): react.JSX.Element;
+declare function FormFieldArray({ id, name, description, label, rules, className, children, ...props }: FormFieldArrayProps): react.JSX.Element;
 
 interface ButtonProps extends ButtonProps$1 {
     variant?: 'primary' | 'outline' | 'quiet' | 'danger' | 'zero';
@@ -222,11 +223,13 @@ declare function ToastProvider({ children, ...props }: ToastProviderProps): reac
 
 declare function useDebounce(value: string, delay: number): string;
 
-declare function setTheme(theme: string): void;
-declare function useTheme(defaultTheme?: string): {
-    theme: string;
-    setTheme: typeof setTheme;
-};
+type Theme = 'light' | 'dark';
+interface ThemeState {
+    theme: Theme;
+    setTheme: (theme: Theme) => void;
+    initTheme: (preferred?: Theme, colorScheme?: 'light' | 'dark' | 'system') => void;
+}
+declare const useTheme: zustand.UseBoundStore<zustand.StoreApi<ThemeState>>;
 
 type ToastVariant = 'success' | 'error';
 interface ToastOptions {
@@ -703,10 +706,7 @@ interface TextFieldProps extends TextFieldProps$1 {
 }
 declare function TextField({ value, defaultValue, label, placeholder, allowCopy, asTextArea, resize, onChange, isReadOnly, isDisabled, className, children, ...props }: TextFieldProps): react.JSX.Element;
 
-interface ThemeButtonProps extends ButtonProps {
-    defaultTheme?: string;
-}
-declare function ThemeButton({ className, variant, defaultTheme, onPress, ...props }: ThemeButtonProps): react.JSX.Element;
+declare function ThemeButton({ className, variant, onPress, ...props }: ButtonProps): react.JSX.Element;
 
 interface ToggleProps extends ToggleButtonProps {
     label?: string;
@@ -727,11 +727,11 @@ interface ToggleGroupItemProps extends TagProps {
 declare function ToggleGroupItem({ className, children, ...props }: ToggleGroupItemProps): react.JSX.Element;
 
 interface ZenProviderProps {
-    theme?: string;
+    theme?: Theme;
     colorScheme?: 'light' | 'dark' | 'system';
     toast?: ToasterProps;
     children: ReactNode;
 }
-declare function ZenProvider({ children, ...props }: ZenProviderProps): react.JSX.Element;
+declare function ZenProvider({ children, theme, colorScheme, toast, }: ZenProviderProps): react.JSX.Element;
 
-export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, AlertBanner, type AlertBannerProps, AlertDialog, type AlertDialogProps, Blockquote, type BlockquoteProps, Box, type BoxProps, Breadcrumb, Breadcrumbs, Button, type ButtonProps, Calendar, type CalendarProps, Checkbox, type CheckboxProps, Code, type CodeProps, Column, type ColumnProps, ComboBox, type ComboBoxProps, ConfirmationDialog, type ConfirmationDialogProps, Container, type ContainerProps, CopyButton, 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, InlineEditField, type InlineEditFieldProps, 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, ProgressBar, type ProgressBarProps, ProgressCircle, type ProgressCircleProps, Radio, RadioGroup, type RadioGroupProps, Row, type RowProps, SearchField, type SearchFieldProps, Select, type SelectProps, Sidebar, SidebarHeader, SidebarItem, type SidebarItemProps, type SidebarProps, SidebarSection, Slider, type SliderProps, Slot, Spinner, type SpinnerProps, StatusLight, type StatusLightProps, 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, ThemeButton, type ThemeButtonProps, Toast, type ToastOptions, 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, useDebounce, useNavigationContext, useTheme, useToast };
+export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, AlertBanner, type AlertBannerProps, AlertDialog, type AlertDialogProps, Blockquote, type BlockquoteProps, Box, type BoxProps, Breadcrumb, Breadcrumbs, Button, type ButtonProps, Calendar, type CalendarProps, Checkbox, type CheckboxProps, Code, type CodeProps, Column, type ColumnProps, ComboBox, type ComboBoxProps, ConfirmationDialog, type ConfirmationDialogProps, Container, type ContainerProps, CopyButton, 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, InlineEditField, type InlineEditFieldProps, 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, ProgressBar, type ProgressBarProps, ProgressCircle, type ProgressCircleProps, Radio, RadioGroup, type RadioGroupProps, Row, type RowProps, SearchField, type SearchFieldProps, Select, type SelectProps, Sidebar, SidebarHeader, SidebarItem, type SidebarItemProps, type SidebarProps, SidebarSection, Slider, type SliderProps, Slot, Spinner, type SpinnerProps, StatusLight, type StatusLightProps, 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, ThemeButton, Toast, type ToastOptions, 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, useDebounce, useNavigationContext, useTheme, useToast };

package/dist/index.js

@@ -41,12 +41,12 @@ var require_use_sync_external_store_shim_production = __commonJS({
     }
     var objectIs = "function" === typeof Object.is ? Object.is : is2;
     var useState19 = React5.useState;
-    var useEffect13 = React5.useEffect;
-    var useLayoutEffect2 = React5.useLayoutEffect;
+    var useEffect12 = React5.useEffect;
+    var useLayoutEffect3 = React5.useLayoutEffect;
     var useDebugValue = React5.useDebugValue;
     function useSyncExternalStore$2(subscribe, getSnapshot) {
       var value = getSnapshot(), _useState = useState19({ inst: { value, getSnapshot } }), inst = _useState[0].inst, forceUpdate = _useState[1];
-      useLayoutEffect2(
+      useLayoutEffect3(
         function() {
           inst.value = value;
           inst.getSnapshot = getSnapshot;
@@ -54,7 +54,7 @@ var require_use_sync_external_store_shim_production = __commonJS({
         },
         [subscribe, value, getSnapshot]
       );
-      useEffect13(
+      useEffect12(
         function() {
           checkIfSnapshotChanged(inst) && forceUpdate({ inst });
           return subscribe(function() {
@@ -107,7 +107,7 @@ var require_use_sync_external_store_shim_development = __commonJS({
           inst: { value, getSnapshot }
         });
         var inst = cachedValue[0].inst, forceUpdate = cachedValue[1];
-        useLayoutEffect2(
+        useLayoutEffect3(
           function() {
             inst.value = value;
             inst.getSnapshot = getSnapshot;
@@ -115,7 +115,7 @@ var require_use_sync_external_store_shim_development = __commonJS({
           },
           [subscribe, value, getSnapshot]
         );
-        useEffect13(
+        useEffect12(
           function() {
             checkIfSnapshotChanged(inst) && forceUpdate({ inst });
             return subscribe(function() {
@@ -141,7 +141,7 @@ var require_use_sync_external_store_shim_development = __commonJS({
         return getSnapshot();
       }
       "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
-      var React5 = import_react198.default, objectIs = "function" === typeof Object.is ? Object.is : is2, useState19 = React5.useState, useEffect13 = React5.useEffect, useLayoutEffect2 = React5.useLayoutEffect, useDebugValue = React5.useDebugValue, didWarnOld18Alpha = false, didWarnUncachedGetSnapshot = false, shim = "undefined" === typeof window || "undefined" === typeof window.document || "undefined" === typeof window.document.createElement ? useSyncExternalStore$1 : useSyncExternalStore$2;
+      var React5 = import_react198.default, objectIs = "function" === typeof Object.is ? Object.is : is2, useState19 = React5.useState, useEffect12 = React5.useEffect, useLayoutEffect3 = React5.useLayoutEffect, useDebugValue = React5.useDebugValue, didWarnOld18Alpha = false, didWarnUncachedGetSnapshot = false, shim = "undefined" === typeof window || "undefined" === typeof window.document || "undefined" === typeof window.document.createElement ? useSyncExternalStore$1 : useSyncExternalStore$2;
       exports.useSyncExternalStore = void 0 !== React5.useSyncExternalStore ? React5.useSyncExternalStore : shim;
       "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
     })();
@@ -1933,8 +1933,8 @@ function $64fa3d84918910a7$export$29f1550f4b0d4415(props, ref, context) {
     mergedRef
   ];
 }
-function $64fa3d84918910a7$export$9d4c57ee4c6ffdd8(initialState3 = true) {
-  let [hasSlot, setHasSlot] = (0, import_react23.useState)(initialState3);
+function $64fa3d84918910a7$export$9d4c57ee4c6ffdd8(initialState2 = true) {
+  let [hasSlot, setHasSlot] = (0, import_react23.useState)(initialState2);
   let hasRun = (0, import_react23.useRef)(false);
   let ref = (0, import_react23.useCallback)((el) => {
     hasRun.current = true;
@@ -28589,6 +28589,7 @@ function FormField({
 var import_classnames8 = __toESM(require_classnames());
 var import_jsx_runtime15 = require("react/jsx-runtime");
 function FormFieldArray({
+  id,
   name,
   description,
   label,
@@ -28597,16 +28598,18 @@ function FormFieldArray({
   children,
   ...props
 }) {
+  const fieldId = useFieldId(id);
   const context = useFormContext();
-  const { formState, control } = context;
+  const { formState, control, register } = context;
   const fieldProps = useFieldArray({
     control,
     name
   });
+  register(name, rules);
   const errors = formState?.errors || {};
   const errorMessage = errors[name]?.message;
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { ...props, className: (0, import_classnames8.default)(FormField_default.input, className), children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Label2, { children: label }),
+    label && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Label2, { htmlFor: fieldId, children: label }),
     description && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: FormField_default.description, children: description }),
     errorMessage && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: FormField_default.error, children: errorMessage }),
     children({ ...context, ...fieldProps })
@@ -32366,13 +32369,13 @@ var createStoreImpl = (createState) => {
     }
   };
   const getState = () => state;
-  const getInitialState = () => initialState3;
+  const getInitialState = () => initialState2;
   const subscribe = (listener) => {
     listeners.add(listener);
     return () => listeners.delete(listener);
   };
   const api = { setState, getState, getInitialState, subscribe };
-  const initialState3 = state = createState(setState, getState, api);
+  const initialState2 = state = createState(setState, getState, api);
   return api;
 };
 var createStore = ((createState) => createState ? createStoreImpl(createState) : createStoreImpl);
@@ -32511,25 +32514,40 @@ function useDebounce(value, delay) {
 
 // src/components/hooks/useTheme.ts
 var import_react181 = require("react");
-function getDefaultTheme() {
-  return typeof window !== "undefined" ? window?.matchMedia("(prefers-color-scheme: dark)")?.matches ? "dark" : "light" : "light";
-}
-var initialState2 = {
-  theme: getDefaultTheme()
-};
-var store2 = create(() => ({ ...initialState2 }));
-function setTheme(theme) {
-  store2.setState({ theme });
-  document.documentElement.setAttribute("data-theme", theme);
+function resolveTheme(preferred, colorScheme) {
+  if (preferred) {
+    return preferred;
+  }
+  if (colorScheme === "light" || colorScheme === "dark") {
+    return colorScheme;
+  }
+  if (typeof window !== "undefined" && window.matchMedia("(prefers-color-scheme: dark)").matches) {
+    return "dark";
+  }
+  return "light";
 }
-function useTheme(defaultTheme) {
-  const { theme } = store2();
-  (0, import_react181.useEffect)(() => {
-    if (defaultTheme) {
-      setTheme(defaultTheme);
+var useTheme = create((set2, get2) => ({
+  theme: "light",
+  setTheme: (theme) => {
+    set2({ theme });
+    if (typeof window !== "undefined") {
+      localStorage.setItem("zen.theme", theme);
+      document.documentElement.setAttribute("data-theme", theme);
     }
-  }, [defaultTheme]);
-  return { theme, setTheme };
+  },
+  initTheme: (preferred, colorScheme) => {
+    if (typeof window === "undefined") return;
+    const stored = localStorage.getItem("zen.theme");
+    const initial = resolveTheme(preferred || stored || void 0, colorScheme);
+    set2({ theme: initial });
+    document.documentElement.setAttribute("data-theme", initial);
+  }
+}));
+function useInitTheme(preferred, colorScheme) {
+  const initTheme = useTheme((s) => s.initTheme);
+  (0, import_react181.useLayoutEffect)(() => {
+    initTheme(preferred, colorScheme);
+  }, [preferred, colorScheme, initTheme]);
 }
 
 // src/components/Accordion.tsx
@@ -34215,14 +34233,8 @@ var ThemeButton_default = { "button": "ThemeButton_button__MDUzN" };
 
 // src/components/ThemeButton.tsx
 var import_jsx_runtime67 = require("react/jsx-runtime");
-function ThemeButton({
-  className,
-  variant = "quiet",
-  defaultTheme,
-  onPress,
-  ...props
-}) {
-  const { theme, setTheme: setTheme2 } = useTheme(defaultTheme);
+function ThemeButton({ className, variant = "quiet", onPress, ...props }) {
+  const { theme, setTheme } = useTheme();
   const transitions = useTransition(theme, {
     initial: { opacity: 1 },
     from: {
@@ -34236,7 +34248,7 @@ function ThemeButton({
     }
   });
   function handleClick(e) {
-    setTheme2(theme === "light" ? "dark" : "light");
+    setTheme(theme === "light" ? "dark" : "light");
     onPress?.(e);
   }
   return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
@@ -34329,11 +34341,16 @@ function ToggleGroupItem({ className, children, ...props }) {
 
 // src/components/ZenProvider.tsx
 var import_jsx_runtime70 = require("react/jsx-runtime");
-var defaultToastCofig = {
+var defaultToastConfig = {
   duration: 3e3
 };
-function ZenProvider({ children, ...props }) {
-  const { toast = defaultToastCofig } = props;
+function ZenProvider({
+  children,
+  theme,
+  colorScheme,
+  toast = defaultToastConfig
+}) {
+  useInitTheme(theme, colorScheme);
   return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(ToastProvider, { ...toast, children });
 }
 /*! Bundled license information:

package/dist/index.mjs

@@ -35,12 +35,12 @@ var require_use_sync_external_store_shim_production = __commonJS({
     }
     var objectIs = "function" === typeof Object.is ? Object.is : is2;
     var useState19 = React5.useState;
-    var useEffect13 = React5.useEffect;
-    var useLayoutEffect2 = React5.useLayoutEffect;
+    var useEffect12 = React5.useEffect;
+    var useLayoutEffect3 = React5.useLayoutEffect;
     var useDebugValue = React5.useDebugValue;
     function useSyncExternalStore$2(subscribe, getSnapshot) {
       var value = getSnapshot(), _useState = useState19({ inst: { value, getSnapshot } }), inst = _useState[0].inst, forceUpdate = _useState[1];
-      useLayoutEffect2(
+      useLayoutEffect3(
         function() {
           inst.value = value;
           inst.getSnapshot = getSnapshot;
@@ -48,7 +48,7 @@ var require_use_sync_external_store_shim_production = __commonJS({
         },
         [subscribe, value, getSnapshot]
       );
-      useEffect13(
+      useEffect12(
         function() {
           checkIfSnapshotChanged(inst) && forceUpdate({ inst });
           return subscribe(function() {
@@ -101,7 +101,7 @@ var require_use_sync_external_store_shim_development = __commonJS({
           inst: { value, getSnapshot }
         });
         var inst = cachedValue[0].inst, forceUpdate = cachedValue[1];
-        useLayoutEffect2(
+        useLayoutEffect3(
           function() {
             inst.value = value;
             inst.getSnapshot = getSnapshot;
@@ -109,7 +109,7 @@ var require_use_sync_external_store_shim_development = __commonJS({
           },
           [subscribe, value, getSnapshot]
         );
-        useEffect13(
+        useEffect12(
           function() {
             checkIfSnapshotChanged(inst) && forceUpdate({ inst });
             return subscribe(function() {
@@ -135,7 +135,7 @@ var require_use_sync_external_store_shim_development = __commonJS({
         return getSnapshot();
       }
       "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
-      var React5 = __import_react2, objectIs = "function" === typeof Object.is ? Object.is : is2, useState19 = React5.useState, useEffect13 = React5.useEffect, useLayoutEffect2 = React5.useLayoutEffect, useDebugValue = React5.useDebugValue, didWarnOld18Alpha = false, didWarnUncachedGetSnapshot = false, shim = "undefined" === typeof window || "undefined" === typeof window.document || "undefined" === typeof window.document.createElement ? useSyncExternalStore$1 : useSyncExternalStore$2;
+      var React5 = __import_react2, objectIs = "function" === typeof Object.is ? Object.is : is2, useState19 = React5.useState, useEffect12 = React5.useEffect, useLayoutEffect3 = React5.useLayoutEffect, useDebugValue = React5.useDebugValue, didWarnOld18Alpha = false, didWarnUncachedGetSnapshot = false, shim = "undefined" === typeof window || "undefined" === typeof window.document || "undefined" === typeof window.document.createElement ? useSyncExternalStore$1 : useSyncExternalStore$2;
       exports.useSyncExternalStore = void 0 !== React5.useSyncExternalStore ? React5.useSyncExternalStore : shim;
       "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
     })();
@@ -1814,8 +1814,8 @@ function $64fa3d84918910a7$export$29f1550f4b0d4415(props, ref, context) {
     mergedRef
   ];
 }
-function $64fa3d84918910a7$export$9d4c57ee4c6ffdd8(initialState3 = true) {
-  let [hasSlot, setHasSlot] = (0, $iETbY$useState)(initialState3);
+function $64fa3d84918910a7$export$9d4c57ee4c6ffdd8(initialState2 = true) {
+  let [hasSlot, setHasSlot] = (0, $iETbY$useState)(initialState2);
   let hasRun = (0, $iETbY$useRef)(false);
   let ref = (0, $iETbY$useCallback)((el) => {
     hasRun.current = true;
@@ -28470,6 +28470,7 @@ function FormField({
 var import_classnames8 = __toESM(require_classnames());
 import { jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
 function FormFieldArray({
+  id,
   name,
   description,
   label,
@@ -28478,16 +28479,18 @@ function FormFieldArray({
   children,
   ...props
 }) {
+  const fieldId = useFieldId(id);
   const context = useFormContext();
-  const { formState, control } = context;
+  const { formState, control, register } = context;
   const fieldProps = useFieldArray({
     control,
     name
   });
+  register(name, rules);
   const errors = formState?.errors || {};
   const errorMessage = errors[name]?.message;
   return /* @__PURE__ */ jsxs7("div", { ...props, className: (0, import_classnames8.default)(FormField_default.input, className), children: [
-    label && /* @__PURE__ */ jsx15(Label2, { children: label }),
+    label && /* @__PURE__ */ jsx15(Label2, { htmlFor: fieldId, children: label }),
     description && /* @__PURE__ */ jsx15("div", { className: FormField_default.description, children: description }),
     errorMessage && /* @__PURE__ */ jsx15("div", { className: FormField_default.error, children: errorMessage }),
     children({ ...context, ...fieldProps })
@@ -32247,13 +32250,13 @@ var createStoreImpl = (createState) => {
     }
   };
   const getState = () => state;
-  const getInitialState = () => initialState3;
+  const getInitialState = () => initialState2;
   const subscribe = (listener) => {
     listeners.add(listener);
     return () => listeners.delete(listener);
   };
   const api = { setState, getState, getInitialState, subscribe };
-  const initialState3 = state = createState(setState, getState, api);
+  const initialState2 = state = createState(setState, getState, api);
   return api;
 };
 var createStore = ((createState) => createState ? createStoreImpl(createState) : createStoreImpl);
@@ -32391,26 +32394,41 @@ function useDebounce(value, delay) {
 }
 
 // src/components/hooks/useTheme.ts
-import { useEffect as useEffect8 } from "react";
-function getDefaultTheme() {
-  return typeof window !== "undefined" ? window?.matchMedia("(prefers-color-scheme: dark)")?.matches ? "dark" : "light" : "light";
-}
-var initialState2 = {
-  theme: getDefaultTheme()
-};
-var store2 = create(() => ({ ...initialState2 }));
-function setTheme(theme) {
-  store2.setState({ theme });
-  document.documentElement.setAttribute("data-theme", theme);
+import { useLayoutEffect as useLayoutEffect2 } from "react";
+function resolveTheme(preferred, colorScheme) {
+  if (preferred) {
+    return preferred;
+  }
+  if (colorScheme === "light" || colorScheme === "dark") {
+    return colorScheme;
+  }
+  if (typeof window !== "undefined" && window.matchMedia("(prefers-color-scheme: dark)").matches) {
+    return "dark";
+  }
+  return "light";
 }
-function useTheme(defaultTheme) {
-  const { theme } = store2();
-  useEffect8(() => {
-    if (defaultTheme) {
-      setTheme(defaultTheme);
+var useTheme = create((set2, get2) => ({
+  theme: "light",
+  setTheme: (theme) => {
+    set2({ theme });
+    if (typeof window !== "undefined") {
+      localStorage.setItem("zen.theme", theme);
+      document.documentElement.setAttribute("data-theme", theme);
     }
-  }, [defaultTheme]);
-  return { theme, setTheme };
+  },
+  initTheme: (preferred, colorScheme) => {
+    if (typeof window === "undefined") return;
+    const stored = localStorage.getItem("zen.theme");
+    const initial = resolveTheme(preferred || stored || void 0, colorScheme);
+    set2({ theme: initial });
+    document.documentElement.setAttribute("data-theme", initial);
+  }
+}));
+function useInitTheme(preferred, colorScheme) {
+  const initTheme = useTheme((s) => s.initTheme);
+  useLayoutEffect2(() => {
+    initTheme(preferred, colorScheme);
+  }, [preferred, colorScheme, initTheme]);
 }
 
 // src/components/Accordion.tsx
@@ -32915,7 +32933,7 @@ var import_classnames25 = __toESM(require_classnames());
 import { useState as useState10 } from "react";
 
 // src/components/TextField.tsx
-import { useEffect as useEffect9, useState as useState9 } from "react";
+import { useEffect as useEffect8, useState as useState9 } from "react";
 var import_classnames24 = __toESM(require_classnames());
 
 // src/components/CopyButton.tsx
@@ -32968,7 +32986,7 @@ function TextField2({
     setInputValue(value2);
     return onChange?.(value2);
   };
-  useEffect9(() => {
+  useEffect8(() => {
     setInputValue(value);
   }, [value]);
   return /* @__PURE__ */ jsxs20(Fragment6, { children: [
@@ -33187,7 +33205,7 @@ function Dots({ size = "md", className, ...props }) {
 
 // src/components/FloatingTooltip.tsx
 var import_classnames31 = __toESM(require_classnames());
-import { useEffect as useEffect10, useState as useState11 } from "react";
+import { useEffect as useEffect9, useState as useState11 } from "react";
 
 // src/components/Tooltip.tsx
 var import_classnames30 = __toESM(require_classnames());
@@ -33214,7 +33232,7 @@ var FloatingTooltip_default = { "floating": "FloatingTooltip_floating__ZjM4N" };
 import { jsx as jsx45 } from "react/jsx-runtime";
 function FloatingTooltip({ className, style, children, ...props }) {
   const [position, setPosition] = useState11({ x: -1e3, y: -1e3 });
-  useEffect10(() => {
+  useEffect9(() => {
     const handler = (e) => {
       setPosition({ x: e.clientX, y: e.clientY });
     };
@@ -33270,7 +33288,7 @@ function Heading2({
 }
 
 // src/components/HoverTrigger.tsx
-import { useRef as useRef8, useState as useState12, useEffect as useEffect11 } from "react";
+import { useRef as useRef8, useState as useState12, useEffect as useEffect10 } from "react";
 
 // css-modules:E:\dev\umami-react-zen\src\components\HoverTrigger.module.css
 var HoverTrigger_default = { "wrapper": "HoverTrigger_wrapper__NGFlN" };
@@ -33291,7 +33309,7 @@ function HoverTrigger({
   const isOverMenu = useRef8(false);
   const isOverButton = useRef8(false);
   const timeout = useRef8(null);
-  useEffect11(() => {
+  useEffect10(() => {
     if (isOpen !== open) {
       setOpen(isOpen);
     }
@@ -33771,7 +33789,7 @@ function Radio2({ children, className, ...props }) {
 }
 
 // src/components/SearchField.tsx
-import { useState as useState17, useEffect as useEffect12 } from "react";
+import { useState as useState17, useEffect as useEffect11 } from "react";
 var import_classnames45 = __toESM(require_classnames());
 import { Fragment as Fragment12, jsx as jsx60, jsxs as jsxs35 } from "react/jsx-runtime";
 function SearchField2({
@@ -33799,7 +33817,7 @@ function SearchField2({
     onSearch?.("");
     onChange?.("");
   };
-  useEffect12(() => {
+  useEffect11(() => {
     if (delay > 0) {
       onSearch?.(searchValue);
     }
@@ -34100,14 +34118,8 @@ var ThemeButton_default = { "button": "ThemeButton_button__MDUzN" };
 
 // src/components/ThemeButton.tsx
 import { jsx as jsx67, jsxs as jsxs41 } from "react/jsx-runtime";
-function ThemeButton({
-  className,
-  variant = "quiet",
-  defaultTheme,
-  onPress,
-  ...props
-}) {
-  const { theme, setTheme: setTheme2 } = useTheme(defaultTheme);
+function ThemeButton({ className, variant = "quiet", onPress, ...props }) {
+  const { theme, setTheme } = useTheme();
   const transitions = useTransition(theme, {
     initial: { opacity: 1 },
     from: {
@@ -34121,7 +34133,7 @@ function ThemeButton({
     }
   });
   function handleClick(e) {
-    setTheme2(theme === "light" ? "dark" : "light");
+    setTheme(theme === "light" ? "dark" : "light");
     onPress?.(e);
   }
   return /* @__PURE__ */ jsxs41(
@@ -34214,11 +34226,16 @@ function ToggleGroupItem({ className, children, ...props }) {
 
 // src/components/ZenProvider.tsx
 import { jsx as jsx70 } from "react/jsx-runtime";
-var defaultToastCofig = {
+var defaultToastConfig = {
   duration: 3e3
 };
-function ZenProvider({ children, ...props }) {
-  const { toast = defaultToastCofig } = props;
+function ZenProvider({
+  children,
+  theme,
+  colorScheme,
+  toast = defaultToastConfig
+}) {
+  useInitTheme(theme, colorScheme);
   return /* @__PURE__ */ jsx70(ToastProvider, { ...toast, children });
 }
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umami/react-zen",
-  "version": "0.182.0",
+  "version": "0.184.0",
   "description": "Modern, minimalist React component library",
   "author": "Umami <hello@umami.is>",
   "license": "MIT",