@umami/react-zen 0.189.0 → 0.191.0

package/dist/index.d.mts

@@ -250,6 +250,16 @@ declare function useToast(): {
     toasts: ToastState[];
 };
 
+declare const breakpoints: {
+    xs: number[];
+    sm: number[];
+    md: number[];
+    lg: number[];
+    xl: number[];
+};
+type BreakpointKey = keyof typeof breakpoints;
+declare function useBreakpoints(): "xs" | "sm" | "md" | "lg" | "xl" | null;
+
 interface AccordionProps extends DisclosureGroupProps {
     type: 'single' | 'multiple';
     className?: string;
@@ -743,4 +753,4 @@ interface ZenProviderProps {
 }
 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, IconLabel, type IconLabelProps, 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 };
+export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, AlertBanner, type AlertBannerProps, AlertDialog, type AlertDialogProps, Blockquote, type BlockquoteProps, Box, type BoxProps, Breadcrumb, Breadcrumbs, type BreakpointKey, 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, IconLabel, type IconLabelProps, 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, useBreakpoints, useDebounce, useNavigationContext, useTheme, useToast };

package/dist/index.d.ts

@@ -250,6 +250,16 @@ declare function useToast(): {
     toasts: ToastState[];
 };
 
+declare const breakpoints: {
+    xs: number[];
+    sm: number[];
+    md: number[];
+    lg: number[];
+    xl: number[];
+};
+type BreakpointKey = keyof typeof breakpoints;
+declare function useBreakpoints(): "xs" | "sm" | "md" | "lg" | "xl" | null;
+
 interface AccordionProps extends DisclosureGroupProps {
     type: 'single' | 'multiple';
     className?: string;
@@ -743,4 +753,4 @@ interface ZenProviderProps {
 }
 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, IconLabel, type IconLabelProps, 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 };
+export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, AlertBanner, type AlertBannerProps, AlertDialog, type AlertDialogProps, Blockquote, type BlockquoteProps, Box, type BoxProps, Breadcrumb, Breadcrumbs, type BreakpointKey, 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, IconLabel, type IconLabelProps, 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, useBreakpoints, useDebounce, useNavigationContext, useTheme, useToast };

package/dist/index.js

@@ -34,18 +34,18 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // node_modules/.pnpm/use-sync-external-store@1.5.0_react@19.1.1/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.production.js
 var require_use_sync_external_store_shim_production = __commonJS({
   "node_modules/.pnpm/use-sync-external-store@1.5.0_react@19.1.1/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.production.js"(exports) {
-    var import_react198 = __toESM(require("react"));
-    var React5 = import_react198.default;
+    var import_react199 = __toESM(require("react"));
+    var React5 = import_react199.default;
     function is2(x, y) {
       return x === y && (0 !== x || 1 / x === 1 / y) || x !== x && y !== y;
     }
     var objectIs = "function" === typeof Object.is ? Object.is : is2;
-    var useState19 = React5.useState;
-    var useEffect12 = React5.useEffect;
+    var useState20 = React5.useState;
+    var useEffect13 = 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];
+      var value = getSnapshot(), _useState = useState20({ inst: { value, getSnapshot } }), inst = _useState[0].inst, forceUpdate = _useState[1];
       useLayoutEffect3(
         function() {
           inst.value = value;
@@ -54,7 +54,7 @@ var require_use_sync_external_store_shim_production = __commonJS({
         },
         [subscribe, value, getSnapshot]
       );
-      useEffect12(
+      useEffect13(
         function() {
           checkIfSnapshotChanged(inst) && forceUpdate({ inst });
           return subscribe(function() {
@@ -87,7 +87,7 @@ var require_use_sync_external_store_shim_production = __commonJS({
 // node_modules/.pnpm/use-sync-external-store@1.5.0_react@19.1.1/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.development.js
 var require_use_sync_external_store_shim_development = __commonJS({
   "node_modules/.pnpm/use-sync-external-store@1.5.0_react@19.1.1/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.development.js"(exports) {
-    var import_react198 = __toESM(require("react"));
+    var import_react199 = __toESM(require("react"));
     (function() {
       function is2(x, y) {
         return x === y && (0 !== x || 1 / x === 1 / y) || x !== x && y !== y;
@@ -103,7 +103,7 @@ var require_use_sync_external_store_shim_development = __commonJS({
             "The result of getSnapshot should be cached to avoid an infinite loop"
           ), didWarnUncachedGetSnapshot = true);
         }
-        cachedValue = useState19({
+        cachedValue = useState20({
           inst: { value, getSnapshot }
         });
         var inst = cachedValue[0].inst, forceUpdate = cachedValue[1];
@@ -115,7 +115,7 @@ var require_use_sync_external_store_shim_development = __commonJS({
           },
           [subscribe, value, getSnapshot]
         );
-        useEffect12(
+        useEffect13(
           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, 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;
+      var React5 = import_react199.default, objectIs = "function" === typeof Object.is ? Object.is : is2, useState20 = React5.useState, useEffect13 = 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());
     })();
@@ -328,6 +328,7 @@ __export(index_exports, {
   TooltipBubble: () => TooltipBubble,
   TooltipTrigger: () => $4e3b923658d69c60$export$8c610744efcf8a1d,
   ZenProvider: () => ZenProvider,
+  useBreakpoints: () => useBreakpoints,
   useDebounce: () => useDebounce,
   useNavigationContext: () => useNavigationContext,
   useTheme: () => useTheme,
@@ -26617,7 +26618,7 @@ function createFormControl(props = {}) {
     state: createSubject()
   };
   const shouldDisplayAllAssociatedErrors = _options.criteriaMode === VALIDATION_MODE.all;
-  const debounce = (callback) => (wait) => {
+  const debounce2 = (callback) => (wait) => {
     clearTimeout(timer);
     timer = setTimeout(callback, wait);
   };
@@ -26730,7 +26731,7 @@ function createFormControl(props = {}) {
     const previousFieldError = get(_formState.errors, name);
     const shouldUpdateValid = (_proxyFormState.isValid || _proxySubscribeFormState.isValid) && isBoolean(isValid) && _formState.isValid !== isValid;
     if (_options.delayError && error) {
-      delayErrorCallback = debounce(() => updateErrors(name, error));
+      delayErrorCallback = debounce2(() => updateErrors(name, error));
       delayErrorCallback(_options.delayError);
     } else {
       clearTimeout(timer);
@@ -32565,8 +32566,55 @@ function useInitTheme(preferred, colorScheme) {
   }, [preferred, colorScheme, initTheme]);
 }
 
-// src/components/Accordion.tsx
+// src/components/hooks/useBreakpoints.ts
 var import_react182 = require("react");
+
+// src/lib/utils.ts
+var debounce = (func, delay) => {
+  let timer;
+  return (...args) => {
+    clearTimeout(timer);
+    timer = window.setTimeout(() => {
+      func(...args);
+    }, delay);
+  };
+};
+
+// src/components/hooks/useBreakpoints.ts
+var breakpoints = {
+  xs: [0, 576],
+  sm: [576, 768],
+  md: [768, 992],
+  lg: [992, 1200],
+  xl: [1200, Infinity]
+};
+var DEBOUNCE_DELAY_MS = 150;
+function useBreakpoints() {
+  const [breakpoint, setBreakpoint] = (0, import_react182.useState)(null);
+  const calculateBreakpoint = (0, import_react182.useCallback)(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
+    const width = window.innerWidth;
+    const currentBreakpointKey = Object.keys(breakpoints).find((key) => {
+      const [min, max] = breakpoints[key];
+      return width >= min && width < max;
+    }) || "xs";
+    setBreakpoint(currentBreakpointKey);
+  }, []);
+  (0, import_react182.useEffect)(() => {
+    calculateBreakpoint();
+    const debouncedResize = debounce(calculateBreakpoint, DEBOUNCE_DELAY_MS);
+    window.addEventListener("resize", debouncedResize);
+    return () => {
+      window.removeEventListener("resize", debouncedResize);
+    };
+  }, [calculateBreakpoint]);
+  return breakpoint;
+}
+
+// src/components/Accordion.tsx
+var import_react183 = require("react");
 var import_classnames14 = __toESM(require_classnames());
 
 // src/components/Text.tsx
@@ -32640,7 +32688,7 @@ function AccordionItem({
   ...props
 }) {
   const [trigger, panel] = children;
-  const [expanded, setExpanded] = (0, import_react182.useState)(defaultExpanded);
+  const [expanded, setExpanded] = (0, import_react183.useState)(defaultExpanded);
   const handleExpandedChange = (isExpanded) => {
     requestAnimationFrame(() => setExpanded(isExpanded));
   };
@@ -32851,7 +32899,7 @@ function Checkbox2({ label, className, children, ...props }) {
 var import_classnames22 = __toESM(require_classnames());
 
 // src/components/List.tsx
-var import_react183 = require("react");
+var import_react184 = require("react");
 var import_classnames20 = __toESM(require_classnames());
 
 // src/lib/constants.ts
@@ -32943,7 +32991,7 @@ function List({
         children: children || items?.map((item) => {
           const id2 = item[idProperty] || item.toString();
           const label2 = item[labelProperty] || item.toString();
-          return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_react183.Fragment, { children: [
+          return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_react184.Fragment, { children: [
             item[separatorProperty] && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)($431f98aba6844401$export$1ff3c3f08ae963c0, { className: List_default.separator }),
             /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ListItem, { id: id2, className: List_default.item, children: label2 })
           ] }, id2);
@@ -33063,15 +33111,15 @@ function Code({ asChild, children }) {
 }
 
 // src/components/ConfirmationDialog.tsx
-var import_react186 = require("react");
+var import_react187 = require("react");
 var import_classnames25 = __toESM(require_classnames());
 
 // src/components/TextField.tsx
-var import_react185 = require("react");
+var import_react186 = require("react");
 var import_classnames24 = __toESM(require_classnames());
 
 // src/components/CopyButton.tsx
-var import_react184 = require("react");
+var import_react185 = require("react");
 var import_classnames23 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\CopyButton.module.css
@@ -33081,8 +33129,8 @@ var CopyButton_default = { "icon": "CopyButton_icon__YTM2Y", "copy-button": "Cop
 var import_jsx_runtime37 = require("react/jsx-runtime");
 var TIMEOUT = 2e3;
 function CopyButton({ value, timeout = TIMEOUT, className, children, ...props }) {
-  const [copied, setCopied] = (0, import_react184.useState)(false);
-  const ref = (0, import_react184.useRef)(timeout);
+  const [copied, setCopied] = (0, import_react185.useState)(false);
+  const ref = (0, import_react185.useRef)(timeout);
   const handleCopy = async () => {
     if (value) {
       await navigator.clipboard.writeText(value);
@@ -33114,13 +33162,13 @@ function TextField2({
   children,
   ...props
 }) {
-  const [inputValue, setInputValue] = (0, import_react185.useState)(defaultValue || value);
+  const [inputValue, setInputValue] = (0, import_react186.useState)(defaultValue || value);
   const Component = asTextArea ? $216918bed6669f72$export$f5c9f3c2c4054eec : $3985021b0ad6602f$export$f5b8910cec6cf069;
   const handleChange = (value2) => {
     setInputValue(value2);
     return onChange?.(value2);
   };
-  (0, import_react185.useEffect)(() => {
+  (0, import_react186.useEffect)(() => {
     setInputValue(value);
   }, [value]);
   return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
@@ -33163,7 +33211,7 @@ function ConfirmationDialog({
   children,
   ...props
 }) {
-  const [canSave, setCanSave] = (0, import_react186.useState)(false);
+  const [canSave, setCanSave] = (0, import_react187.useState)(false);
   const handleChange = (e) => {
     setCanSave(e.target.value === value);
   };
@@ -33220,7 +33268,7 @@ function Container({
 
 // src/components/DataTable.tsx
 var import_classnames28 = __toESM(require_classnames());
-var import_react187 = require("react");
+var import_react188 = require("react");
 
 // src/components/Table.tsx
 var import_classnames27 = __toESM(require_classnames());
@@ -33279,11 +33327,11 @@ var DataTable_default = { "datatable": "DataTable_datatable__MWRkN", "cell": "Da
 
 // src/components/DataTable.tsx
 var import_jsx_runtime42 = require("react/jsx-runtime");
-var import_react188 = require("react");
+var import_react189 = require("react");
 function DataTable({ data = [], className, children, ...props }) {
   const items = data.length && data?.[0]?.id === void 0 ? data.map((row, id) => ({ ...row, id })) : data;
   const widths = [];
-  const columns = import_react187.Children.map(children, (child) => {
+  const columns = import_react188.Children.map(children, (child) => {
     if (child) {
       widths.push(child?.props?.width || "1fr");
       return { ...child?.props };
@@ -33296,7 +33344,7 @@ function DataTable({ data = [], className, children, ...props }) {
       if (hidden) {
         return null;
       }
-      return /* @__PURE__ */ (0, import_react188.createElement)(TableColumn, { ...columnProps, key: id, id }, label);
+      return /* @__PURE__ */ (0, import_react189.createElement)(TableColumn, { ...columnProps, key: id, id }, label);
     }) }),
     /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TableBody, { children: items.map((row, index) => {
       return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TableRow, { style: { gridTemplateColumns: gridTemplateColumns2 }, children: columns?.map(({ id, as, hidden, className: className2, children: children2, ...cellProps }) => {
@@ -33304,14 +33352,14 @@ function DataTable({ data = [], className, children, ...props }) {
           return null;
         }
         const value = typeof children2 === "function" ? children2(row, index) : children2 || row[id];
-        return /* @__PURE__ */ (0, import_react188.createElement)(
+        return /* @__PURE__ */ (0, import_react189.createElement)(
           TableCell,
           {
             ...cellProps,
             key: id,
             className: (0, import_classnames28.default)(DataTable_default.cell, className2)
           },
-          as ? (0, import_react187.createElement)(as, {}, value) : value
+          as ? (0, import_react188.createElement)(as, {}, value) : value
         );
       }) }, index);
     }) })
@@ -33338,7 +33386,7 @@ function Dots({ size = "md", className, ...props }) {
 }
 
 // src/components/FloatingTooltip.tsx
-var import_react189 = require("react");
+var import_react190 = require("react");
 var import_classnames31 = __toESM(require_classnames());
 
 // src/components/Tooltip.tsx
@@ -33365,8 +33413,8 @@ var FloatingTooltip_default = { "floating": "FloatingTooltip_floating__ZjM4N" };
 // src/components/FloatingTooltip.tsx
 var import_jsx_runtime45 = require("react/jsx-runtime");
 function FloatingTooltip({ className, style, children, ...props }) {
-  const [position, setPosition] = (0, import_react189.useState)({ x: -1e3, y: -1e3 });
-  (0, import_react189.useEffect)(() => {
+  const [position, setPosition] = (0, import_react190.useState)({ x: -1e3, y: -1e3 });
+  (0, import_react190.useEffect)(() => {
     const handler = (e) => {
       setPosition({ x: e.clientX, y: e.clientY });
     };
@@ -33422,7 +33470,7 @@ function Heading2({
 }
 
 // src/components/HoverTrigger.tsx
-var import_react190 = require("react");
+var import_react191 = require("react");
 
 // css-modules:E:\dev\umami-react-zen\src\components\HoverTrigger.module.css
 var HoverTrigger_default = { "wrapper": "HoverTrigger_wrapper__NGFlN" };
@@ -33438,12 +33486,12 @@ function HoverTrigger({
   children
 }) {
   const [triggerElement, popupElement] = children;
-  const triggerRef = (0, import_react190.useRef)(null);
-  const [open, setOpen] = (0, import_react190.useState)(isOpen);
-  const isOverMenu = (0, import_react190.useRef)(false);
-  const isOverButton = (0, import_react190.useRef)(false);
-  const timeout = (0, import_react190.useRef)(null);
-  (0, import_react190.useEffect)(() => {
+  const triggerRef = (0, import_react191.useRef)(null);
+  const [open, setOpen] = (0, import_react191.useState)(isOpen);
+  const isOverMenu = (0, import_react191.useRef)(false);
+  const isOverButton = (0, import_react191.useRef)(false);
+  const timeout = (0, import_react191.useRef)(null);
+  (0, import_react191.useEffect)(() => {
     if (isOpen !== open) {
       setOpen(isOpen);
     }
@@ -33551,7 +33599,7 @@ function Image({
 }
 
 // src/components/InlineEditField.tsx
-var import_react191 = require("react");
+var import_react192 = require("react");
 var import_classnames34 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\InlineEditField.module.css
@@ -33570,8 +33618,8 @@ function InlineEditField({
   onCancel,
   ...props
 }) {
-  const [value, setValue] = (0, import_react191.useState)(defaultValue);
-  const [edit, setEdit] = (0, import_react191.useState)(defaultEdit);
+  const [value, setValue] = (0, import_react192.useState)(defaultValue);
+  const [edit, setEdit] = (0, import_react192.useState)(defaultEdit);
   const handleEdit = () => setEdit(true);
   const handleChange = (e) => {
     const val = e.target.value;
@@ -33582,7 +33630,7 @@ function InlineEditField({
     setEdit(false);
     onCommit?.(value);
   };
-  const handleCancel = (0, import_react191.useCallback)(() => {
+  const handleCancel = (0, import_react192.useCallback)(() => {
     setEdit(false);
     setValue(defaultValue);
     onCancel?.();
@@ -33722,7 +33770,7 @@ function Modal2({
 }
 
 // src/components/Navbar.tsx
-var import_react192 = require("react");
+var import_react193 = require("react");
 var import_classnames38 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\Navbar.module.css
@@ -33730,16 +33778,16 @@ var Navbar_default = { "nav": "Navbar_nav__ZjEwM", "item": "Navbar_item__MWVhZ",
 
 // src/components/Navbar.tsx
 var import_jsx_runtime54 = require("react/jsx-runtime");
-var NavbarContext = (0, import_react192.createContext)(void 0);
+var NavbarContext = (0, import_react193.createContext)(void 0);
 var useNavigationContext = () => {
-  const context = (0, import_react192.useContext)(NavbarContext);
+  const context = (0, import_react193.useContext)(NavbarContext);
   if (!context) {
     throw new Error("useNavigationContext must be used within a Navbar");
   }
   return context;
 };
 function Navbar({ showArrow = true, className, children, ...props }) {
-  const [activeMenu, setActiveMenu] = (0, import_react192.useState)("");
+  const [activeMenu, setActiveMenu] = (0, import_react193.useState)("");
   return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(NavbarContext.Provider, { value: { activeMenu, setActiveMenu }, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { ...props, className: (0, import_classnames38.default)(Navbar_default.nav, className), children }) });
 }
 function NavbarItem({ label, children, className, ...props }) {
@@ -33757,7 +33805,7 @@ function NavbarItem({ label, children, className, ...props }) {
 }
 
 // src/components/NavMenu.tsx
-var import_react193 = require("react");
+var import_react194 = require("react");
 var import_classnames39 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\NavMenu.module.css
@@ -33765,7 +33813,7 @@ var NavMenu_default = { "navmenu": "NavMenu_navmenu__MzRmN", "item": "NavMenu_it
 
 // src/components/NavMenu.tsx
 var import_jsx_runtime55 = require("react/jsx-runtime");
-var NavMenuContext = (0, import_react193.createContext)(null);
+var NavMenuContext = (0, import_react194.createContext)(null);
 function NavMenu({
   itemBackgroundColor = "2",
   muteItems,
@@ -33791,7 +33839,7 @@ function NavMenuGroup({
   children,
   ...props
 }) {
-  const [minimized, setMinimized] = (0, import_react193.useState)(!!isMinimized);
+  const [minimized, setMinimized] = (0, import_react194.useState)(!!isMinimized);
   const handleClick = () => {
     if (allowMinimize) {
       setMinimized((state) => !state);
@@ -33827,7 +33875,7 @@ function NavMenuGroup({
   );
 }
 function NavMenuItem({ isSelected, className, children, ...props }) {
-  const { itemBackgroundColor } = (0, import_react193.useContext)(NavMenuContext);
+  const { itemBackgroundColor } = (0, import_react194.useContext)(NavMenuContext);
   return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
     Row,
     {
@@ -33841,11 +33889,11 @@ function NavMenuItem({ isSelected, className, children, ...props }) {
 }
 
 // src/components/PasswordField.tsx
-var import_react194 = require("react");
+var import_react195 = require("react");
 var import_classnames40 = __toESM(require_classnames());
 var import_jsx_runtime56 = require("react/jsx-runtime");
 function PasswordField({ label, className, ...props }) {
-  const [show, setShow] = (0, import_react194.useState)(false);
+  const [show, setShow] = (0, import_react195.useState)(false);
   const type = show ? "text" : "password";
   const handleShowPassword = () => setShow((state) => !state);
   return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_jsx_runtime56.Fragment, { children: [
@@ -33952,7 +34000,7 @@ function Radio2({ children, className, ...props }) {
 }
 
 // src/components/SearchField.tsx
-var import_react195 = require("react");
+var import_react196 = require("react");
 var import_classnames45 = __toESM(require_classnames());
 var import_jsx_runtime61 = require("react/jsx-runtime");
 function SearchField2({
@@ -33966,7 +34014,7 @@ function SearchField2({
   className,
   ...props
 }) {
-  const [search, setSearch] = (0, import_react195.useState)(defaultValue);
+  const [search, setSearch] = (0, import_react196.useState)(defaultValue);
   const searchValue = useDebounce(search, delay);
   const handleChange = (value2) => {
     setSearch(value2);
@@ -33980,7 +34028,7 @@ function SearchField2({
     onSearch?.("");
     onChange?.("");
   };
-  (0, import_react195.useEffect)(() => {
+  (0, import_react196.useEffect)(() => {
     if (delay > 0) {
       onSearch?.(searchValue);
     }
@@ -34005,7 +34053,7 @@ function SearchField2({
 }
 
 // src/components/Select.tsx
-var import_react196 = require("react");
+var import_react197 = require("react");
 var import_classnames46 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\Select.module.css
@@ -34033,7 +34081,7 @@ function Select2({
   children,
   ...props
 }) {
-  const [search, setSearch] = (0, import_react196.useState)("");
+  const [search, setSearch] = (0, import_react197.useState)("");
   const handleChange = (e) => {
     onSelectionChange?.(e);
     onChange?.(e);
@@ -34098,7 +34146,7 @@ function Select2({
 }
 
 // src/components/Sidebar.tsx
-var import_react197 = require("react");
+var import_react198 = require("react");
 var import_classnames47 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\Sidebar.module.css
@@ -34106,7 +34154,7 @@ var Sidebar_default = { "sidebar": "Sidebar_sidebar__NDg2N", "header": "Sidebar_
 
 // src/components/Sidebar.tsx
 var import_jsx_runtime63 = require("react/jsx-runtime");
-var SidebarContext = (0, import_react197.createContext)(null);
+var SidebarContext = (0, import_react198.createContext)(null);
 function Sidebar({
   itemBackgroundColor = "2",
   isCollapsed,
@@ -34162,7 +34210,7 @@ function SidebarItem({
   children,
   ...props
 }) {
-  const { isCollapsed, itemBackgroundColor } = (0, import_react197.useContext)(SidebarContext);
+  const { isCollapsed, itemBackgroundColor } = (0, import_react198.useContext)(SidebarContext);
   return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)($4e3b923658d69c60$export$8c610744efcf8a1d, { delay: 0, closeDelay: 0, isDisabled: !isCollapsed, children: [
     /* @__PURE__ */ (0, import_jsx_runtime63.jsx)($f645667febf57a63$export$35a3bebf7ef2d934, { children: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
       Row,

package/dist/index.mjs

@@ -34,12 +34,12 @@ var require_use_sync_external_store_shim_production = __commonJS({
       return x === y && (0 !== x || 1 / x === 1 / y) || x !== x && y !== y;
     }
     var objectIs = "function" === typeof Object.is ? Object.is : is2;
-    var useState19 = React5.useState;
-    var useEffect12 = React5.useEffect;
+    var useState20 = React5.useState;
+    var useEffect13 = 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];
+      var value = getSnapshot(), _useState = useState20({ inst: { value, getSnapshot } }), inst = _useState[0].inst, forceUpdate = _useState[1];
       useLayoutEffect3(
         function() {
           inst.value = value;
@@ -48,7 +48,7 @@ var require_use_sync_external_store_shim_production = __commonJS({
         },
         [subscribe, value, getSnapshot]
       );
-      useEffect12(
+      useEffect13(
         function() {
           checkIfSnapshotChanged(inst) && forceUpdate({ inst });
           return subscribe(function() {
@@ -97,7 +97,7 @@ var require_use_sync_external_store_shim_development = __commonJS({
             "The result of getSnapshot should be cached to avoid an infinite loop"
           ), didWarnUncachedGetSnapshot = true);
         }
-        cachedValue = useState19({
+        cachedValue = useState20({
           inst: { value, getSnapshot }
         });
         var inst = cachedValue[0].inst, forceUpdate = cachedValue[1];
@@ -109,7 +109,7 @@ var require_use_sync_external_store_shim_development = __commonJS({
           },
           [subscribe, value, getSnapshot]
         );
-        useEffect12(
+        useEffect13(
           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, 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;
+      var React5 = __import_react2, objectIs = "function" === typeof Object.is ? Object.is : is2, useState20 = React5.useState, useEffect13 = 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());
     })();
@@ -26497,7 +26497,7 @@ function createFormControl(props = {}) {
     state: createSubject()
   };
   const shouldDisplayAllAssociatedErrors = _options.criteriaMode === VALIDATION_MODE.all;
-  const debounce = (callback) => (wait) => {
+  const debounce2 = (callback) => (wait) => {
     clearTimeout(timer);
     timer = setTimeout(callback, wait);
   };
@@ -26610,7 +26610,7 @@ function createFormControl(props = {}) {
     const previousFieldError = get(_formState.errors, name);
     const shouldUpdateValid = (_proxyFormState.isValid || _proxySubscribeFormState.isValid) && isBoolean(isValid) && _formState.isValid !== isValid;
     if (_options.delayError && error) {
-      delayErrorCallback = debounce(() => updateErrors(name, error));
+      delayErrorCallback = debounce2(() => updateErrors(name, error));
       delayErrorCallback(_options.delayError);
     } else {
       clearTimeout(timer);
@@ -32445,8 +32445,55 @@ function useInitTheme(preferred, colorScheme) {
   }, [preferred, colorScheme, initTheme]);
 }
 
+// src/components/hooks/useBreakpoints.ts
+import { useState as useState7, useEffect as useEffect8, useCallback as useCallback2 } from "react";
+
+// src/lib/utils.ts
+var debounce = (func, delay) => {
+  let timer;
+  return (...args) => {
+    clearTimeout(timer);
+    timer = window.setTimeout(() => {
+      func(...args);
+    }, delay);
+  };
+};
+
+// src/components/hooks/useBreakpoints.ts
+var breakpoints = {
+  xs: [0, 576],
+  sm: [576, 768],
+  md: [768, 992],
+  lg: [992, 1200],
+  xl: [1200, Infinity]
+};
+var DEBOUNCE_DELAY_MS = 150;
+function useBreakpoints() {
+  const [breakpoint, setBreakpoint] = useState7(null);
+  const calculateBreakpoint = useCallback2(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
+    const width = window.innerWidth;
+    const currentBreakpointKey = Object.keys(breakpoints).find((key) => {
+      const [min, max] = breakpoints[key];
+      return width >= min && width < max;
+    }) || "xs";
+    setBreakpoint(currentBreakpointKey);
+  }, []);
+  useEffect8(() => {
+    calculateBreakpoint();
+    const debouncedResize = debounce(calculateBreakpoint, DEBOUNCE_DELAY_MS);
+    window.addEventListener("resize", debouncedResize);
+    return () => {
+      window.removeEventListener("resize", debouncedResize);
+    };
+  }, [calculateBreakpoint]);
+  return breakpoint;
+}
+
 // src/components/Accordion.tsx
-import { useState as useState7 } from "react";
+import { useState as useState8 } from "react";
 var import_classnames14 = __toESM(require_classnames());
 
 // src/components/Text.tsx
@@ -32520,7 +32567,7 @@ function AccordionItem({
   ...props
 }) {
   const [trigger, panel] = children;
-  const [expanded, setExpanded] = useState7(defaultExpanded);
+  const [expanded, setExpanded] = useState8(defaultExpanded);
   const handleExpandedChange = (isExpanded) => {
     requestAnimationFrame(() => setExpanded(isExpanded));
   };
@@ -32944,15 +32991,15 @@ function Code({ asChild, children }) {
 
 // src/components/ConfirmationDialog.tsx
 var import_classnames25 = __toESM(require_classnames());
-import { useState as useState10 } from "react";
+import { useState as useState11 } from "react";
 
 // src/components/TextField.tsx
-import { useEffect as useEffect8, useState as useState9 } from "react";
+import { useEffect as useEffect9, useState as useState10 } from "react";
 var import_classnames24 = __toESM(require_classnames());
 
 // src/components/CopyButton.tsx
 var import_classnames23 = __toESM(require_classnames());
-import { useState as useState8, useRef as useRef7 } from "react";
+import { useState as useState9, useRef as useRef7 } from "react";
 
 // css-modules:E:\dev\umami-react-zen\src\components\CopyButton.module.css
 var CopyButton_default = { "icon": "CopyButton_icon__YTM2Y", "copy-button": "CopyButton_copy-button__MjY1M" };
@@ -32961,7 +33008,7 @@ var CopyButton_default = { "icon": "CopyButton_icon__YTM2Y", "copy-button": "Cop
 import { jsx as jsx37 } from "react/jsx-runtime";
 var TIMEOUT = 2e3;
 function CopyButton({ value, timeout = TIMEOUT, className, children, ...props }) {
-  const [copied, setCopied] = useState8(false);
+  const [copied, setCopied] = useState9(false);
   const ref = useRef7(timeout);
   const handleCopy = async () => {
     if (value) {
@@ -32994,13 +33041,13 @@ function TextField2({
   children,
   ...props
 }) {
-  const [inputValue, setInputValue] = useState9(defaultValue || value);
+  const [inputValue, setInputValue] = useState10(defaultValue || value);
   const Component = asTextArea ? $216918bed6669f72$export$f5c9f3c2c4054eec : $3985021b0ad6602f$export$f5b8910cec6cf069;
   const handleChange = (value2) => {
     setInputValue(value2);
     return onChange?.(value2);
   };
-  useEffect8(() => {
+  useEffect9(() => {
     setInputValue(value);
   }, [value]);
   return /* @__PURE__ */ jsxs20(Fragment6, { children: [
@@ -33043,7 +33090,7 @@ function ConfirmationDialog({
   children,
   ...props
 }) {
-  const [canSave, setCanSave] = useState10(false);
+  const [canSave, setCanSave] = useState11(false);
   const handleChange = (e) => {
     setCanSave(e.target.value === value);
   };
@@ -33219,7 +33266,7 @@ function Dots({ size = "md", className, ...props }) {
 
 // src/components/FloatingTooltip.tsx
 var import_classnames31 = __toESM(require_classnames());
-import { useEffect as useEffect9, useState as useState11 } from "react";
+import { useEffect as useEffect10, useState as useState12 } from "react";
 
 // src/components/Tooltip.tsx
 var import_classnames30 = __toESM(require_classnames());
@@ -33245,8 +33292,8 @@ var FloatingTooltip_default = { "floating": "FloatingTooltip_floating__ZjM4N" };
 // src/components/FloatingTooltip.tsx
 import { jsx as jsx45 } from "react/jsx-runtime";
 function FloatingTooltip({ className, style, children, ...props }) {
-  const [position, setPosition] = useState11({ x: -1e3, y: -1e3 });
-  useEffect9(() => {
+  const [position, setPosition] = useState12({ x: -1e3, y: -1e3 });
+  useEffect10(() => {
     const handler = (e) => {
       setPosition({ x: e.clientX, y: e.clientY });
     };
@@ -33302,7 +33349,7 @@ function Heading2({
 }
 
 // src/components/HoverTrigger.tsx
-import { useRef as useRef8, useState as useState12, useEffect as useEffect10 } from "react";
+import { useRef as useRef8, useState as useState13, useEffect as useEffect11 } from "react";
 
 // css-modules:E:\dev\umami-react-zen\src\components\HoverTrigger.module.css
 var HoverTrigger_default = { "wrapper": "HoverTrigger_wrapper__NGFlN" };
@@ -33319,11 +33366,11 @@ function HoverTrigger({
 }) {
   const [triggerElement, popupElement] = children;
   const triggerRef = useRef8(null);
-  const [open, setOpen] = useState12(isOpen);
+  const [open, setOpen] = useState13(isOpen);
   const isOverMenu = useRef8(false);
   const isOverButton = useRef8(false);
   const timeout = useRef8(null);
-  useEffect10(() => {
+  useEffect11(() => {
     if (isOpen !== open) {
       setOpen(isOpen);
     }
@@ -33432,7 +33479,7 @@ function Image({
 
 // src/components/InlineEditField.tsx
 var import_classnames34 = __toESM(require_classnames());
-import { useState as useState13, useCallback as useCallback2 } from "react";
+import { useState as useState14, useCallback as useCallback3 } from "react";
 
 // css-modules:E:\dev\umami-react-zen\src\components\InlineEditField.module.css
 var InlineEditField_default = { "edit": "InlineEditField_edit__MDliZ", "icon": "InlineEditField_icon__ZjE1O" };
@@ -33450,8 +33497,8 @@ function InlineEditField({
   onCancel,
   ...props
 }) {
-  const [value, setValue] = useState13(defaultValue);
-  const [edit, setEdit] = useState13(defaultEdit);
+  const [value, setValue] = useState14(defaultValue);
+  const [edit, setEdit] = useState14(defaultEdit);
   const handleEdit = () => setEdit(true);
   const handleChange = (e) => {
     const val = e.target.value;
@@ -33462,7 +33509,7 @@ function InlineEditField({
     setEdit(false);
     onCommit?.(value);
   };
-  const handleCancel = useCallback2(() => {
+  const handleCancel = useCallback3(() => {
     setEdit(false);
     setValue(defaultValue);
     onCancel?.();
@@ -33606,7 +33653,7 @@ var import_classnames38 = __toESM(require_classnames());
 import {
   createContext as createContext3,
   useContext as useContext5,
-  useState as useState14
+  useState as useState15
 } from "react";
 
 // css-modules:E:\dev\umami-react-zen\src\components\Navbar.module.css
@@ -33623,7 +33670,7 @@ var useNavigationContext = () => {
   return context;
 };
 function Navbar({ showArrow = true, className, children, ...props }) {
-  const [activeMenu, setActiveMenu] = useState14("");
+  const [activeMenu, setActiveMenu] = useState15("");
   return /* @__PURE__ */ jsx54(NavbarContext.Provider, { value: { activeMenu, setActiveMenu }, children: /* @__PURE__ */ jsx54("div", { ...props, className: (0, import_classnames38.default)(Navbar_default.nav, className), children }) });
 }
 function NavbarItem({ label, children, className, ...props }) {
@@ -33642,7 +33689,7 @@ function NavbarItem({ label, children, className, ...props }) {
 
 // src/components/NavMenu.tsx
 var import_classnames39 = __toESM(require_classnames());
-import { createContext as createContext4, useContext as useContext6, useState as useState15 } from "react";
+import { createContext as createContext4, useContext as useContext6, useState as useState16 } from "react";
 
 // css-modules:E:\dev\umami-react-zen\src\components\NavMenu.module.css
 var NavMenu_default = { "navmenu": "NavMenu_navmenu__MzRmN", "item": "NavMenu_item__ZWRjZ", "selected": "NavMenu_selected__ZDU1N", "muted": "NavMenu_muted__MTgxN", "title": "NavMenu_title__ZjJhN", "clickable": "NavMenu_clickable__Mjg0O" };
@@ -33675,7 +33722,7 @@ function NavMenuGroup({
   children,
   ...props
 }) {
-  const [minimized, setMinimized] = useState15(!!isMinimized);
+  const [minimized, setMinimized] = useState16(!!isMinimized);
   const handleClick = () => {
     if (allowMinimize) {
       setMinimized((state) => !state);
@@ -33725,11 +33772,11 @@ function NavMenuItem({ isSelected, className, children, ...props }) {
 }
 
 // src/components/PasswordField.tsx
-import { useState as useState16 } from "react";
+import { useState as useState17 } from "react";
 var import_classnames40 = __toESM(require_classnames());
 import { Fragment as Fragment10, jsx as jsx56, jsxs as jsxs32 } from "react/jsx-runtime";
 function PasswordField({ label, className, ...props }) {
-  const [show, setShow] = useState16(false);
+  const [show, setShow] = useState17(false);
   const type = show ? "text" : "password";
   const handleShowPassword = () => setShow((state) => !state);
   return /* @__PURE__ */ jsxs32(Fragment10, { children: [
@@ -33836,7 +33883,7 @@ function Radio2({ children, className, ...props }) {
 }
 
 // src/components/SearchField.tsx
-import { useState as useState17, useEffect as useEffect11 } from "react";
+import { useState as useState18, useEffect as useEffect12 } from "react";
 var import_classnames45 = __toESM(require_classnames());
 import { Fragment as Fragment13, jsx as jsx61, jsxs as jsxs36 } from "react/jsx-runtime";
 function SearchField2({
@@ -33850,7 +33897,7 @@ function SearchField2({
   className,
   ...props
 }) {
-  const [search, setSearch] = useState17(defaultValue);
+  const [search, setSearch] = useState18(defaultValue);
   const searchValue = useDebounce(search, delay);
   const handleChange = (value2) => {
     setSearch(value2);
@@ -33864,7 +33911,7 @@ function SearchField2({
     onSearch?.("");
     onChange?.("");
   };
-  useEffect11(() => {
+  useEffect12(() => {
     if (delay > 0) {
       onSearch?.(searchValue);
     }
@@ -33889,7 +33936,7 @@ function SearchField2({
 }
 
 // src/components/Select.tsx
-import { useState as useState18 } from "react";
+import { useState as useState19 } from "react";
 var import_classnames46 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\Select.module.css
@@ -33917,7 +33964,7 @@ function Select2({
   children,
   ...props
 }) {
-  const [search, setSearch] = useState18("");
+  const [search, setSearch] = useState19("");
   const handleChange = (e) => {
     onSelectionChange?.(e);
     onChange?.(e);
@@ -34389,6 +34436,7 @@ export {
   TooltipBubble,
   $4e3b923658d69c60$export$8c610744efcf8a1d as TooltipTrigger,
   ZenProvider,
+  useBreakpoints,
   useDebounce,
   useNavigationContext,
   useTheme,

package/package.json

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