@umami/react-zen 0.147.0 → 0.148.0

package/dist/index.css

@@ -4393,12 +4393,12 @@ body a.Button_button__MDE1O {
 }
 
 /* virtual-css:css:ce310178c027bd5704a97ff6406d1f4f */
-.NavMenu_navmenu__MDVmZ {
+.NavMenu_navmenu__NzU4Y {
   font-size: var(--font-size);
   width: 100%;
   gap: var(--spacing-2);
 }
-.NavMenu_item__OWJiY {
+.NavMenu_item__MzUzO {
   color: var(--font-color-muted);
   gap: var(--gap);
   padding: var(--padding);
@@ -4414,12 +4414,15 @@ body a.Button_button__MDE1O {
     color: var(--font-color);
     background: var(--highlight-color);
   }
-  &.NavMenu_selected__ZDRiM {
+  &.NavMenu_selected__MGM3O {
     color: var(--font-color);
     background: var(--highlight-color);
     font-weight: var(--font-weight-bold);
   }
 }
+.NavMenu_group__NDg1M {
+  gap: var(--gap);
+}
 
 /* virtual-css:css:2684f3f399522c75740ad06c94a6137d */
 .Popover_popover__NDdlY[data-placement=top] {

package/dist/index.d.mts

@@ -512,6 +512,12 @@ interface NavMenuProps extends ColumnProps {
     highlightColor?: string;
 }
 declare function NavMenu({ highlightColor, className, style, children, ...props }: NavMenuProps): react.JSX.Element;
+interface NavMenuGroupProps extends ColumnProps {
+    title?: string;
+    allowMinimize?: boolean;
+    isMinimized?: boolean;
+}
+declare function NavMenuGroup({ title, allowMinimize, isMinimized, className, children, ...props }: NavMenuGroupProps): react.JSX.Element;
 interface NavMenuItemProps extends RowProps {
     isSelected?: boolean;
 }
@@ -705,4 +711,4 @@ interface ZenProviderProps {
 }
 declare function ZenProvider({ children, ...props }: 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, ConfirmationDialog, type ConfirmationDialogProps, Container, type ContainerProps, 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, 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, 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 ToastProps, ToastProvider, type ToastProviderProps, 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, ConfirmationDialog, type ConfirmationDialogProps, Container, type ContainerProps, 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, 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 ToastProps, ToastProvider, type ToastProviderProps, 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

@@ -512,6 +512,12 @@ interface NavMenuProps extends ColumnProps {
     highlightColor?: string;
 }
 declare function NavMenu({ highlightColor, className, style, children, ...props }: NavMenuProps): react.JSX.Element;
+interface NavMenuGroupProps extends ColumnProps {
+    title?: string;
+    allowMinimize?: boolean;
+    isMinimized?: boolean;
+}
+declare function NavMenuGroup({ title, allowMinimize, isMinimized, className, children, ...props }: NavMenuGroupProps): react.JSX.Element;
 interface NavMenuItemProps extends RowProps {
     isSelected?: boolean;
 }
@@ -705,4 +711,4 @@ interface ZenProviderProps {
 }
 declare function ZenProvider({ children, ...props }: 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, ConfirmationDialog, type ConfirmationDialogProps, Container, type ContainerProps, 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, 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, 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 ToastProps, ToastProvider, type ToastProviderProps, 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, ConfirmationDialog, type ConfirmationDialogProps, Container, type ContainerProps, 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, 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 ToastProps, ToastProvider, type ToastProviderProps, 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

@@ -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.0/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.0/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.production.js"(exports) {
-    var import_react189 = __toESM(require("react"));
-    var React5 = import_react189.default;
+    var import_react190 = __toESM(require("react"));
+    var React5 = import_react190.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 useState18 = React5.useState;
+    var useState19 = React5.useState;
     var useEffect13 = React5.useEffect;
     var useLayoutEffect3 = React5.useLayoutEffect;
     var useDebugValue = React5.useDebugValue;
     function useSyncExternalStore$2(subscribe, getSnapshot) {
-      var value = getSnapshot(), _useState = useState18({ inst: { value, getSnapshot } }), inst = _useState[0].inst, forceUpdate = _useState[1];
+      var value = getSnapshot(), _useState = useState19({ inst: { value, getSnapshot } }), inst = _useState[0].inst, forceUpdate = _useState[1];
       useLayoutEffect3(
         function() {
           inst.value = value;
@@ -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.0/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.0/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.development.js"(exports) {
-    var import_react189 = __toESM(require("react"));
+    var import_react190 = __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 = useState18({
+        cachedValue = useState19({
           inst: { value, getSnapshot }
         });
         var inst = cachedValue[0].inst, forceUpdate = cachedValue[1];
@@ -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_react189.default, objectIs = "function" === typeof Object.is ? Object.is : is2, useState18 = 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;
+      var React5 = import_react190.default, objectIs = "function" === typeof Object.is ? Object.is : is2, useState19 = 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());
     })();
@@ -275,6 +275,7 @@ __export(index_exports, {
   MenuTrigger: () => $3674c52c6b3c5bce$export$27d2ad3c5815583e,
   Modal: () => Modal2,
   NavMenu: () => NavMenu,
+  NavMenuGroup: () => NavMenuGroup,
   NavMenuItem: () => NavMenuItem,
   Navbar: () => Navbar,
   NavbarContext: () => NavbarContext,
@@ -31436,10 +31437,11 @@ function NavbarItem({ label, children, className, ...props }) {
 }
 
 // src/components/NavMenu.tsx
+var import_react185 = require("react");
 var import_classnames38 = __toESM(require_classnames());
 
 // css-modules:/Users/mikecao/Development/umami-software/react-zen/src/components/NavMenu.module.css
-var NavMenu_default = { "navmenu": "NavMenu_navmenu__MDVmZ", "item": "NavMenu_item__OWJiY", "selected": "NavMenu_selected__ZDRiM" };
+var NavMenu_default = { "navmenu": "NavMenu_navmenu__NzU4Y", "item": "NavMenu_item__MzUzO", "selected": "NavMenu_selected__MGM3O", "group": "NavMenu_group__NDg1M" };
 
 // src/components/NavMenu.tsx
 var import_jsx_runtime53 = require("react/jsx-runtime");
@@ -31454,16 +31456,49 @@ function NavMenu({ highlightColor, className, style, children, ...props }) {
     }
   );
 }
+function NavMenuGroup({
+  title,
+  allowMinimize,
+  isMinimized,
+  className,
+  children,
+  ...props
+}) {
+  const [minimized, setMinimized] = (0, import_react185.useState)(!!isMinimized);
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
+    Column,
+    {
+      ...props,
+      className: (0, import_classnames38.default)(NavMenu_default.group, className, minimized && NavMenu_default.minimized),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
+          Row,
+          {
+            className: (0, import_classnames38.default)(NavMenu_default.title, NavMenu_default.item),
+            alignItems: "center",
+            justifyContent: "space-between",
+            onClick: () => setMinimized(!minimized),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Text, { transform: "uppercase", size: "1", weight: "bold", color: true, children: title }),
+              /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Icon2, { rotate: minimized ? 0 : 90, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(ChevronRight, {}) })
+            ]
+          }
+        ),
+        !minimized && children
+      ]
+    }
+  );
+}
 function NavMenuItem({ isSelected, className, children, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Row, { ...props, className: (0, import_classnames38.default)(NavMenu_default.item, className, isSelected && NavMenu_default.selected), children });
 }
 
 // src/components/PasswordField.tsx
-var import_react185 = require("react");
+var import_react186 = require("react");
 var import_classnames39 = __toESM(require_classnames());
 var import_jsx_runtime54 = require("react/jsx-runtime");
 function PasswordField({ label, className, ...props }) {
-  const [show, setShow] = (0, import_react185.useState)(false);
+  const [show, setShow] = (0, import_react186.useState)(false);
   const type = show ? "text" : "password";
   const handleShowPassword = () => setShow((state) => !state);
   return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_jsx_runtime54.Fragment, { children: [
@@ -31570,7 +31605,7 @@ function Radio2({ children, className, ...props }) {
 }
 
 // src/components/SearchField.tsx
-var import_react186 = require("react");
+var import_react187 = require("react");
 var import_classnames44 = __toESM(require_classnames());
 var import_jsx_runtime59 = require("react/jsx-runtime");
 function SearchField2({
@@ -31584,7 +31619,7 @@ function SearchField2({
   className,
   ...props
 }) {
-  const [search, setSearch] = (0, import_react186.useState)(defaultValue);
+  const [search, setSearch] = (0, import_react187.useState)(defaultValue);
   const searchValue = useDebounce(search, delay);
   const handleChange = (value2) => {
     setSearch(value2);
@@ -31598,7 +31633,7 @@ function SearchField2({
     onSearch?.("");
     onChange?.("");
   };
-  (0, import_react186.useEffect)(() => {
+  (0, import_react187.useEffect)(() => {
     if (delay > 0) {
       onSearch?.(searchValue);
     }
@@ -31623,7 +31658,7 @@ function SearchField2({
 }
 
 // src/components/Select.tsx
-var import_react187 = require("react");
+var import_react188 = require("react");
 var import_classnames45 = __toESM(require_classnames());
 
 // css-modules:/Users/mikecao/Development/umami-software/react-zen/src/components/Select.module.css
@@ -31651,7 +31686,7 @@ function Select2({
   children,
   ...props
 }) {
-  const [search, setSearch] = (0, import_react187.useState)("");
+  const [search, setSearch] = (0, import_react188.useState)("");
   const handleChange = (e) => {
     onSelectionChange?.(e);
     onChange?.(e);
@@ -31712,7 +31747,7 @@ function Select2({
 }
 
 // src/components/Sidebar.tsx
-var import_react188 = require("react");
+var import_react189 = require("react");
 var import_classnames46 = __toESM(require_classnames());
 
 // css-modules:/Users/mikecao/Development/umami-software/react-zen/src/components/Sidebar.module.css
@@ -31720,7 +31755,7 @@ var Sidebar_default = { "sidenav": "Sidebar_sidenav__OGRiM", "header": "Sidebar_
 
 // src/components/Sidebar.tsx
 var import_jsx_runtime61 = require("react/jsx-runtime");
-var SidebarContext = (0, import_react188.createContext)(null);
+var SidebarContext = (0, import_react189.createContext)(null);
 function Sidebar({
   variant = "1",
   isCollapsed,
@@ -31778,7 +31813,7 @@ function SidebarItem({
   children,
   ...props
 }) {
-  const { isCollapsed } = (0, import_react188.useContext)(SidebarContext);
+  const { isCollapsed } = (0, import_react189.useContext)(SidebarContext);
   return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)($4e3b923658d69c60$export$8c610744efcf8a1d, { delay: 0, closeDelay: 0, isDisabled: !isCollapsed, children: [
     /* @__PURE__ */ (0, import_jsx_runtime61.jsx)($f645667febf57a63$export$35a3bebf7ef2d934, { children: /* @__PURE__ */ (0, import_jsx_runtime61.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 useState18 = React5.useState;
+    var useState19 = React5.useState;
     var useEffect13 = React5.useEffect;
     var useLayoutEffect3 = React5.useLayoutEffect;
     var useDebugValue = React5.useDebugValue;
     function useSyncExternalStore$2(subscribe, getSnapshot) {
-      var value = getSnapshot(), _useState = useState18({ inst: { value, getSnapshot } }), inst = _useState[0].inst, forceUpdate = _useState[1];
+      var value = getSnapshot(), _useState = useState19({ inst: { value, getSnapshot } }), inst = _useState[0].inst, forceUpdate = _useState[1];
       useLayoutEffect3(
         function() {
           inst.value = value;
@@ -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 = useState18({
+        cachedValue = useState19({
           inst: { value, getSnapshot }
         });
         var inst = cachedValue[0].inst, forceUpdate = cachedValue[1];
@@ -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, useState18 = 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;
+      var React5 = __import_react2, objectIs = "function" === typeof Object.is ? Object.is : is2, useState19 = 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());
     })();
@@ -31326,12 +31326,13 @@ function NavbarItem({ label, children, className, ...props }) {
 
 // src/components/NavMenu.tsx
 var import_classnames38 = __toESM(require_classnames());
+import { useState as useState15 } from "react";
 
 // css-modules:/Users/mikecao/Development/umami-software/react-zen/src/components/NavMenu.module.css
-var NavMenu_default = { "navmenu": "NavMenu_navmenu__MDVmZ", "item": "NavMenu_item__OWJiY", "selected": "NavMenu_selected__ZDRiM" };
+var NavMenu_default = { "navmenu": "NavMenu_navmenu__NzU4Y", "item": "NavMenu_item__MzUzO", "selected": "NavMenu_selected__MGM3O", "group": "NavMenu_group__NDg1M" };
 
 // src/components/NavMenu.tsx
-import { jsx as jsx53 } from "react/jsx-runtime";
+import { jsx as jsx53, jsxs as jsxs29 } from "react/jsx-runtime";
 function NavMenu({ highlightColor, className, style, children, ...props }) {
   return /* @__PURE__ */ jsx53(
     Column,
@@ -31343,21 +31344,54 @@ function NavMenu({ highlightColor, className, style, children, ...props }) {
     }
   );
 }
+function NavMenuGroup({
+  title,
+  allowMinimize,
+  isMinimized,
+  className,
+  children,
+  ...props
+}) {
+  const [minimized, setMinimized] = useState15(!!isMinimized);
+  return /* @__PURE__ */ jsxs29(
+    Column,
+    {
+      ...props,
+      className: (0, import_classnames38.default)(NavMenu_default.group, className, minimized && NavMenu_default.minimized),
+      children: [
+        /* @__PURE__ */ jsxs29(
+          Row,
+          {
+            className: (0, import_classnames38.default)(NavMenu_default.title, NavMenu_default.item),
+            alignItems: "center",
+            justifyContent: "space-between",
+            onClick: () => setMinimized(!minimized),
+            children: [
+              /* @__PURE__ */ jsx53(Text, { transform: "uppercase", size: "1", weight: "bold", color: true, children: title }),
+              /* @__PURE__ */ jsx53(Icon2, { rotate: minimized ? 0 : 90, children: /* @__PURE__ */ jsx53(ChevronRight, {}) })
+            ]
+          }
+        ),
+        !minimized && children
+      ]
+    }
+  );
+}
 function NavMenuItem({ isSelected, className, children, ...props }) {
   return /* @__PURE__ */ jsx53(Row, { ...props, className: (0, import_classnames38.default)(NavMenu_default.item, className, isSelected && NavMenu_default.selected), children });
 }
 
 // src/components/PasswordField.tsx
-import { useState as useState15 } from "react";
+import { useState as useState16 } from "react";
 var import_classnames39 = __toESM(require_classnames());
-import { Fragment as Fragment9, jsx as jsx54, jsxs as jsxs29 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx54, jsxs as jsxs30 } from "react/jsx-runtime";
 function PasswordField({ label, className, ...props }) {
-  const [show, setShow] = useState15(false);
+  const [show, setShow] = useState16(false);
   const type = show ? "text" : "password";
   const handleShowPassword = () => setShow((state) => !state);
-  return /* @__PURE__ */ jsxs29(Fragment9, { children: [
+  return /* @__PURE__ */ jsxs30(Fragment9, { children: [
     label && /* @__PURE__ */ jsx54(Label2, { children: label }),
-    /* @__PURE__ */ jsxs29($bcdf0525bf22703d$export$2c73285ae9390cec, { "aria-label": "Password", ...props, className: (0, import_classnames39.default)(TextField_default.field, className), children: [
+    /* @__PURE__ */ jsxs30($bcdf0525bf22703d$export$2c73285ae9390cec, { "aria-label": "Password", ...props, className: (0, import_classnames39.default)(TextField_default.field, className), children: [
       /* @__PURE__ */ jsx54($3985021b0ad6602f$export$f5b8910cec6cf069, { type }),
       /* @__PURE__ */ jsx54(Icon2, { onClick: handleShowPassword, children: show ? /* @__PURE__ */ jsx54(EyeSlash_default, {}) : /* @__PURE__ */ jsx54(Eye_default, {}) })
     ] })
@@ -31383,10 +31417,10 @@ var import_classnames41 = __toESM(require_classnames());
 var ProgressBar_default = { "progressbar": "ProgressBar_progressbar__ODNkN", "track": "ProgressBar_track__OWI0N", "fill": "ProgressBar_fill__NWJiZ", "value": "ProgressBar_value__YTBjM" };
 
 // src/components/ProgressBar.tsx
-import { Fragment as Fragment10, jsx as jsx56, jsxs as jsxs30 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx56, jsxs as jsxs31 } from "react/jsx-runtime";
 function ProgressBar2({ className, showPercentage, ...props }) {
   return /* @__PURE__ */ jsx56($0393f8ab869a0f1a$export$c17561cb55d4db30, { ...props, className: (0, import_classnames41.default)(ProgressBar_default.progressbar, className), children: ({ percentage = 0, valueText }) => {
-    return /* @__PURE__ */ jsxs30(Fragment10, { children: [
+    return /* @__PURE__ */ jsxs31(Fragment10, { children: [
       /* @__PURE__ */ jsx56("div", { className: ProgressBar_default.track, children: /* @__PURE__ */ jsx56("div", { className: ProgressBar_default.fill, style: { width: `${percentage}%` } }) }),
       showPercentage && /* @__PURE__ */ jsx56("div", { className: ProgressBar_default.value, children: valueText })
     ] });
@@ -31400,14 +31434,14 @@ var import_classnames42 = __toESM(require_classnames());
 var ProgressCircle_default = { "progresscircle": "ProgressCircle_progresscircle__NjRiY", "track": "ProgressCircle_track__N2I0M", "fill": "ProgressCircle_fill__NmQyM", "value": "ProgressCircle_value__YjZmY" };
 
 // src/components/ProgressCircle.tsx
-import { Fragment as Fragment11, jsx as jsx57, jsxs as jsxs31 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx57, jsxs as jsxs32 } from "react/jsx-runtime";
 function ProgressCircle({ className, showPercentage, ...props }) {
   return /* @__PURE__ */ jsx57($0393f8ab869a0f1a$export$c17561cb55d4db30, { ...props, className: (0, import_classnames42.default)(ProgressCircle_default.progresscircle, className), children: ({ percentage = 0, valueText }) => {
     const radius = 45;
     const circumference = radius * 2 * Math.PI;
     const offset = circumference - percentage / 100 * circumference;
-    return /* @__PURE__ */ jsxs31(Fragment11, { children: [
-      /* @__PURE__ */ jsxs31("svg", { viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg", children: [
+    return /* @__PURE__ */ jsxs32(Fragment11, { children: [
+      /* @__PURE__ */ jsxs32("svg", { viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg", children: [
         /* @__PURE__ */ jsx57("circle", { className: ProgressCircle_default.track, cx: "50", cy: "50", r: "45" }),
         /* @__PURE__ */ jsx57(
           "circle",
@@ -31433,7 +31467,7 @@ var import_classnames43 = __toESM(require_classnames());
 var RadioGroup_default = { "radiogroup": "RadioGroup_radiogroup__MDk2O", "inputs": "RadioGroup_inputs__MDM5N", "radio": "RadioGroup_radio__ZTcxN", "variant-circle": "RadioGroup_variant-circle__NTAyM", "variant-box": "RadioGroup_variant-box__ZjY4N" };
 
 // src/components/RadioGroup.tsx
-import { jsx as jsx58, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs33 } from "react/jsx-runtime";
 function RadioGroup2({
   variant = "circle",
   label,
@@ -31441,7 +31475,7 @@ function RadioGroup2({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs32(
+  return /* @__PURE__ */ jsxs33(
     $b6c3ddc6086f204d$export$a98f0dcb43a68a25,
     {
       "aria-label": "RadioGroup",
@@ -31459,9 +31493,9 @@ function Radio2({ children, className, ...props }) {
 }
 
 // src/components/SearchField.tsx
-import { useState as useState16, useEffect as useEffect12 } from "react";
+import { useState as useState17, useEffect as useEffect12 } from "react";
 var import_classnames44 = __toESM(require_classnames());
-import { Fragment as Fragment12, jsx as jsx59, jsxs as jsxs33 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx59, jsxs as jsxs34 } from "react/jsx-runtime";
 function SearchField2({
   label,
   placeholder,
@@ -31473,7 +31507,7 @@ function SearchField2({
   className,
   ...props
 }) {
-  const [search, setSearch] = useState16(defaultValue);
+  const [search, setSearch] = useState17(defaultValue);
   const searchValue = useDebounce(search, delay);
   const handleChange = (value2) => {
     setSearch(value2);
@@ -31492,9 +31526,9 @@ function SearchField2({
       onSearch?.(searchValue);
     }
   }, [searchValue, delay]);
-  return /* @__PURE__ */ jsxs33(Fragment12, { children: [
+  return /* @__PURE__ */ jsxs34(Fragment12, { children: [
     label && /* @__PURE__ */ jsx59(Label2, { children: label }),
-    /* @__PURE__ */ jsxs33(
+    /* @__PURE__ */ jsxs34(
       $440f4836bcb56932$export$b94867ecbd698f21,
       {
         "aria-label": "Search",
@@ -31512,14 +31546,14 @@ function SearchField2({
 }
 
 // src/components/Select.tsx
-import { useState as useState17 } from "react";
+import { useState as useState18 } from "react";
 var import_classnames45 = __toESM(require_classnames());
 
 // css-modules:/Users/mikecao/Development/umami-software/react-zen/src/components/Select.module.css
 var Select_default = { "select": "Select_select__ODY1Y", "button": "Select_button__YjA0M", "value": "Select_value__NTlkY", "list": "Select_list__MTc1Z", "search": "Select_search__N2I3N" };
 
 // src/components/Select.tsx
-import { jsx as jsx60, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx60, jsxs as jsxs35 } from "react/jsx-runtime";
 function Select2({
   items = [],
   value,
@@ -31540,7 +31574,7 @@ function Select2({
   children,
   ...props
 }) {
-  const [search, setSearch] = useState17("");
+  const [search, setSearch] = useState18("");
   const handleChange = (e) => {
     onSelectionChange?.(e);
     onChange?.(e);
@@ -31549,7 +31583,7 @@ function Select2({
     setSearch(value2);
     onSearch?.(value2);
   };
-  return /* @__PURE__ */ jsxs34(
+  return /* @__PURE__ */ jsxs35(
     $82d7e5349645de74$export$ef9b1a59e592288f,
     {
       "aria-label": "Select",
@@ -31566,13 +31600,13 @@ function Select2({
             variant: "outline",
             ...buttonProps,
             className: (0, import_classnames45.default)(Select_default.button, buttonProps?.className),
-            children: /* @__PURE__ */ jsxs34("div", { className: Select_default.value, children: [
+            children: /* @__PURE__ */ jsxs35("div", { className: Select_default.value, children: [
               /* @__PURE__ */ jsx60($82d7e5349645de74$export$e288731fd71264f0, { children: renderValue }),
               /* @__PURE__ */ jsx60(Icon2, { "aria-hidden": "true", rotate: 90, size: "sm", children: /* @__PURE__ */ jsx60(ChevronRight, {}) })
             ] })
           }
         ),
-        /* @__PURE__ */ jsx60(Popover2, { ...popoverProps, children: /* @__PURE__ */ jsxs34("div", { className: Select_default.list, children: [
+        /* @__PURE__ */ jsx60(Popover2, { ...popoverProps, children: /* @__PURE__ */ jsxs35("div", { className: Select_default.list, children: [
           allowSearch && /* @__PURE__ */ jsx60(
             SearchField2,
             {
@@ -31608,7 +31642,7 @@ import { createContext as createContext4, useContext as useContext6 } from "reac
 var Sidebar_default = { "sidenav": "Sidebar_sidenav__OGRiM", "header": "Sidebar_header__ZTZhN", "name": "Sidebar_name__YWUwM", "section": "Sidebar_section__NDE3M", "title": "Sidebar_title__Njc2M", "content": "Sidebar_content__YmIwN", "item": "Sidebar_item__ZDVjZ", "label": "Sidebar_label__MWUzO", "collapsed": "Sidebar_collapsed__ZjFkM", "muted": "Sidebar_muted__YjM1M", "selected": "Sidebar_selected__MTdkY", "variant-quiet": "Sidebar_variant-quiet__MzFlN", "variant-1": "Sidebar_variant-1__ZTY2M", "variant-2": "Sidebar_variant-2__YzU0O", "variant-3": "Sidebar_variant-3__YWRmM", "noborder": "Sidebar_noborder__ODBlM" };
 
 // src/components/Sidebar.tsx
-import { jsx as jsx61, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx61, jsxs as jsxs36 } from "react/jsx-runtime";
 var SidebarContext = createContext4(null);
 function Sidebar({
   variant = "1",
@@ -31641,7 +31675,7 @@ function SidebarSection({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs35(Column, { ...props, className: (0, import_classnames46.default)(Sidebar_default.section, className), children: [
+  return /* @__PURE__ */ jsxs36(Column, { ...props, className: (0, import_classnames46.default)(Sidebar_default.section, className), children: [
     title && /* @__PURE__ */ jsx61("div", { className: Sidebar_default.title, children: title }),
     /* @__PURE__ */ jsx61("div", { className: Sidebar_default.content, children })
   ] });
@@ -31653,7 +31687,7 @@ function SidebarHeader({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs35(Row, { ...props, className: (0, import_classnames46.default)(Sidebar_default.header, className), children: [
+  return /* @__PURE__ */ jsxs36(Row, { ...props, className: (0, import_classnames46.default)(Sidebar_default.header, className), children: [
     icon && /* @__PURE__ */ jsx61(Icon2, { size: "sm", children: icon }),
     /* @__PURE__ */ jsx61("div", { className: (0, import_classnames46.default)(Sidebar_default.name, Sidebar_default.label), children: label }),
     children
@@ -31668,8 +31702,8 @@ function SidebarItem({
   ...props
 }) {
   const { isCollapsed } = useContext6(SidebarContext);
-  return /* @__PURE__ */ jsxs35($4e3b923658d69c60$export$8c610744efcf8a1d, { delay: 0, closeDelay: 0, isDisabled: !isCollapsed, children: [
-    /* @__PURE__ */ jsx61($f645667febf57a63$export$35a3bebf7ef2d934, { children: /* @__PURE__ */ jsxs35(
+  return /* @__PURE__ */ jsxs36($4e3b923658d69c60$export$8c610744efcf8a1d, { delay: 0, closeDelay: 0, isDisabled: !isCollapsed, children: [
+    /* @__PURE__ */ jsx61($f645667febf57a63$export$35a3bebf7ef2d934, { children: /* @__PURE__ */ jsxs36(
       Row,
       {
         ...props,
@@ -31692,16 +31726,16 @@ var import_classnames47 = __toESM(require_classnames());
 var Slider_default = { "slider": "Slider_slider__ODQ1M", "header": "Slider_header__NmYzN", "track": "Slider_track__Y2M4O", "fill": "Slider_fill__MWM4N", "thumb": "Slider_thumb__NGU2Z" };
 
 // src/components/Slider.tsx
-import { Fragment as Fragment13, jsx as jsx62, jsxs as jsxs36 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx62, jsxs as jsxs37 } from "react/jsx-runtime";
 function Slider2({ className, showValue = true, label, ...props }) {
-  return /* @__PURE__ */ jsxs36($6f909507e6374d18$export$472062a354075cee, { ...props, className: (0, import_classnames47.default)(Slider_default.slider, className), children: [
-    /* @__PURE__ */ jsxs36("div", { className: Slider_default.header, children: [
+  return /* @__PURE__ */ jsxs37($6f909507e6374d18$export$472062a354075cee, { ...props, className: (0, import_classnames47.default)(Slider_default.slider, className), children: [
+    /* @__PURE__ */ jsxs37("div", { className: Slider_default.header, children: [
       label && /* @__PURE__ */ jsx62(Label2, { className: Slider_default.label, children: label }),
       showValue && /* @__PURE__ */ jsx62($6f909507e6374d18$export$a590f758a961cb5b, { className: Slider_default.output })
     ] }),
     /* @__PURE__ */ jsx62($6f909507e6374d18$export$105594979f116971, { className: Slider_default.track, children: ({ state }) => {
       const isHorizontal = state.orientation === "horizontal";
-      return /* @__PURE__ */ jsxs36(Fragment13, { children: [
+      return /* @__PURE__ */ jsxs37(Fragment13, { children: [
         /* @__PURE__ */ jsx62(
           "div",
           {
@@ -31724,10 +31758,10 @@ var import_classnames48 = __toESM(require_classnames());
 var StatusLight_default = { "statuslight": "StatusLight_statuslight__M2FhZ", "status": "StatusLight_status__MzIxM", "bg": "StatusLight_bg__ZjZlZ", "success": "StatusLight_success__OWM0N", "warning": "StatusLight_warning__MGM1M", "error": "StatusLight_error__NzRmM", "active": "StatusLight_active__MTBiN", "inactive": "StatusLight_inactive__NWJlM" };
 
 // src/components/StatusLight.tsx
-import { jsx as jsx63, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx63, jsxs as jsxs38 } from "react/jsx-runtime";
 function StatusLight(props) {
   const { color, variant = "inactive", children, className, ...domProps } = props;
-  return /* @__PURE__ */ jsxs37("div", { ...domProps, className: (0, import_classnames48.default)(StatusLight_default.statuslight, className), children: [
+  return /* @__PURE__ */ jsxs38("div", { ...domProps, className: (0, import_classnames48.default)(StatusLight_default.statuslight, className), children: [
     /* @__PURE__ */ jsx63("div", { className: StatusLight_default.bg, children: /* @__PURE__ */ jsx63(
       "div",
       {
@@ -31746,11 +31780,11 @@ var import_classnames49 = __toESM(require_classnames());
 var Switch_default = { "switch": "Switch_switch__NTVjN", "track": "Switch_track__MTE2N", "knob": "Switch_knob__OWYwN" };
 
 // src/components/Switch.tsx
-import { jsx as jsx64, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx64, jsxs as jsxs39 } from "react/jsx-runtime";
 function Switch2({ label, children, className, ...props }) {
-  return /* @__PURE__ */ jsxs38(Column, { children: [
+  return /* @__PURE__ */ jsxs39(Column, { children: [
     label && /* @__PURE__ */ jsx64(Label2, { children: label }),
-    /* @__PURE__ */ jsxs38($8e59e948500a8fe1$export$b5d5cf8927ab7262, { ...props, className: (0, import_classnames49.default)(Switch_default.switch, className), children: [
+    /* @__PURE__ */ jsxs39($8e59e948500a8fe1$export$b5d5cf8927ab7262, { ...props, className: (0, import_classnames49.default)(Switch_default.switch, className), children: [
       /* @__PURE__ */ jsx64("div", { className: Switch_default.track, children: /* @__PURE__ */ jsx64("div", { className: Switch_default.knob }) }),
       children
     ] })
@@ -31782,7 +31816,7 @@ var import_classnames50 = __toESM(require_classnames());
 var ThemeButton_default = { "button": "ThemeButton_button__OWVmZ" };
 
 // src/components/ThemeButton.tsx
-import { jsx as jsx66, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx66, jsxs as jsxs40 } from "react/jsx-runtime";
 function ThemeButton({
   className,
   variant = "quiet",
@@ -31807,7 +31841,7 @@ function ThemeButton({
     setTheme2(theme === "light" ? "dark" : "light");
     onPress?.(e);
   }
-  return /* @__PURE__ */ jsxs39(
+  return /* @__PURE__ */ jsxs40(
     Button2,
     {
       ...props,
@@ -31832,10 +31866,10 @@ var import_classnames51 = __toESM(require_classnames());
 var Toggle_default = { "toggle": "Toggle_toggle__NGNlM" };
 
 // src/components/Toggle.tsx
-import { Fragment as Fragment14, jsx as jsx67, jsxs as jsxs40 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx67, jsxs as jsxs41 } from "react/jsx-runtime";
 function Toggle({ label, children, className, ...props }) {
   const isSelected = typeof props.value !== "undefined" ? !!props.value : void 0;
-  return /* @__PURE__ */ jsxs40(Fragment14, { children: [
+  return /* @__PURE__ */ jsxs41(Fragment14, { children: [
     label && /* @__PURE__ */ jsx67(Label2, { children: label }),
     /* @__PURE__ */ jsx67(
       $efde0372d7a700fe$export$d2b052e7b4be1756,
@@ -31856,7 +31890,7 @@ var import_classnames52 = __toESM(require_classnames());
 var ToggleGroup_default = { "group": "ToggleGroup_group__ZWE2N", "list": "ToggleGroup_list__NjRhN", "item": "ToggleGroup_item__MTZiN", "primary": "ToggleGroup_primary__Y2ExN" };
 
 // src/components/ToggleGroup.tsx
-import { jsx as jsx68, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx68, jsxs as jsxs42 } from "react/jsx-runtime";
 function ToggleGroup({
   label,
   value,
@@ -31875,7 +31909,7 @@ function ToggleGroup({
     onSelectionChange?.(keys);
     onChange?.(Array.from(keys).map((k) => k.toString()));
   };
-  return /* @__PURE__ */ jsxs41(
+  return /* @__PURE__ */ jsxs42(
     $eaf9e70818b436db$export$67ea30858aaf75e3,
     {
       ...props,
@@ -31956,6 +31990,7 @@ export {
   $3674c52c6b3c5bce$export$27d2ad3c5815583e as MenuTrigger,
   Modal2 as Modal,
   NavMenu,
+  NavMenuGroup,
   NavMenuItem,
   Navbar,
   NavbarContext,

package/package.json

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

package/styles.css

@@ -4711,12 +4711,12 @@ body a.Button_button__MDE1O {
 }
 
 /* virtual-css:css:ce310178c027bd5704a97ff6406d1f4f */
-.NavMenu_navmenu__MDVmZ {
+.NavMenu_navmenu__NzU4Y {
   font-size: var(--font-size);
   width: 100%;
   gap: var(--spacing-2);
 }
-.NavMenu_item__OWJiY {
+.NavMenu_item__MzUzO {
   color: var(--font-color-muted);
   gap: var(--gap);
   padding: var(--padding);
@@ -4732,12 +4732,15 @@ body a.Button_button__MDE1O {
     color: var(--font-color);
     background: var(--highlight-color);
   }
-  &.NavMenu_selected__ZDRiM {
+  &.NavMenu_selected__MGM3O {
     color: var(--font-color);
     background: var(--highlight-color);
     font-weight: var(--font-weight-bold);
   }
 }
+.NavMenu_group__NDg1M {
+  gap: var(--gap);
+}
 
 /* virtual-css:css:2684f3f399522c75740ad06c94a6137d */
 .Popover_popover__NDdlY[data-placement=top] {