@umami/react-zen 0.102.0 → 0.104.0

package/dist/index.css

@@ -3955,24 +3955,24 @@ body a.Button_button__NDYwM {
 }
 
 /* virtual-css:css:0fb02723d81c5960ed149d3d9f58f1ba */
-.List_list__ZDQ2Z {
+.List_list__YjBiO {
   display: grid;
   outline: none;
   overflow: auto;
   gap: var(--spacing-1);
 }
-.List_separator__ZTZiM {
+.List_separator__MjkwN {
   border-bottom: var(--border);
 }
-.List_section__ZTliN:not(:last-child) {
+.List_section__NmQzZ:not(:last-child) {
   margin-bottom: var(--spacing-4);
 }
-.List_header__YWIzN {
+.List_header__MjQ4N {
   font-size: var(--font-size-2);
   font-weight: var(--font-weight-bold);
   padding: var(--padding);
 }
-.List_item__YmJhM {
+.List_item__MWYwM {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -3985,43 +3985,28 @@ body a.Button_button__NDYwM {
   outline: none;
   border-radius: var(--border-radius);
 }
-.List_item__YmJhM[data-disabled] {
+.List_item__MWYwM[data-disabled] {
   color: var(--font-color-disabled);
 }
-.List_item__YmJhM[data-focus],
-.List_item__YmJhM[data-focus-visible] {
+.List_item__MWYwM[data-focus],
+.List_item__MWYwM[data-focus-visible] {
   background: var(--highlight-color);
 }
-.List_item__YmJhM:hover {
+.List_item__MWYwM:hover {
   background: var(--highlight-color);
 }
-.List_item__YmJhM[data-selected] {
+.List_item__MWYwM[data-selected] {
   font-weight: bold;
-  & .List_check__ZTc4Z {
+  & .List_checkmark__YjhhM {
     display: flex;
     justify-content: flex-end;
     flex: 1;
   }
 }
-.List_variant-1__NWM2N {
-  & .List_item__YmJhM:hover,
-  .List_item__YmJhM[data-selected] {
-    background: var(--base-color-2);
-  }
-}
-.List_variant-2__MGZhY {
-  & .List_item__YmJhM:hover,
-  .List_item__YmJhM[data-selected] {
-    background: var(--base-color-3);
-  }
-}
-.List_variant-3__MmJkZ {
-  & .List_item__YmJhM:hover,
-  .List_item__YmJhM[data-selected] {
-    background: var(--base-color-4);
-  }
+.List_checkmark__YjhhM {
+  display: none;
 }
-.List_check__ZTc4Z {
+.List_hideCheckmark__OTEyO .List_checkmark__YjhhM {
   display: none;
 }
 
@@ -4275,6 +4260,30 @@ body a.Button_button__NDYwM {
   color: var(--font-color-muted);
 }
 
+/* virtual-css:css:0c4c35b74d5f22edf919d952c580c0e6 */
+.NavMenu_navmenu__OTA1Y {
+  font-size: var(--font-size);
+  width: 100%;
+  gap: var(--spacing-2);
+}
+.NavMenu_item__MjE3M {
+  color: var(--font-color-muted);
+  gap: var(--gap);
+  padding: var(--padding);
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.NavMenu_item__MjE3M:hover {
+  color: var(--font-color);
+  background: var(--highlight-color);
+}
+.NavMenu_item__MjE3M.NavMenu_selected__YzUwN {
+  color: var(--font-color);
+  background: var(--highlight-color);
+  font-weight: var(--font-weight-bold);
+}
+
 /* virtual-css:css:3547a441584a5024882cb71ab3ccf244 */
 .PasswordField_icon__NTRlM {
   position: absolute;

package/dist/index.d.ts

@@ -55,6 +55,7 @@ declare module '@umami/react-zen' {
     export { Menu, MenuItem, MenuSection, MenuSeparator } from '@umami/react-zen/Menu';
     export { Modal } from '@umami/react-zen/Modal';
     export { Navbar, NavbarItem } from '@umami/react-zen/Navbar';
+    export { NavMenu, NavMenuItem } from '@umami/react-zen/NavMenu';
     export { PasswordField } from '@umami/react-zen/PasswordField';
     export { Popover } from '@umami/react-zen/Popover';
     export { ProgressBar } from '@umami/react-zen/ProgressBar';
@@ -614,9 +615,10 @@ declare module '@umami/react-zen/List' {
         idProperty?: string;
         labelProperty?: string;
         separatorProperty?: string;
-        variant?: '1' | '2' | '3';
+        highlightColor?: string;
+        showCheckmark?: boolean;
     }
-    export function List({ items, idProperty, labelProperty, separatorProperty, variant, className, children, ...props }: ListProps): import("react").JSX.Element;
+    export function List({ items, idProperty, labelProperty, separatorProperty, highlightColor, showCheckmark, className, style, children, ...props }: ListProps): import("react").JSX.Element;
     export interface ListItemProps extends ListBoxItemProps<any> {
         showCheckmark?: boolean;
     }
@@ -699,6 +701,19 @@ export interface NavbarItemProps extends HTMLAttributes<HTMLElement> {
 export declare function NavbarItem({ label, children, className, ...props }: NavbarItemProps): import("react").JSX.Element;
 export {};
 
+declare module '@umami/react-zen/NavMenu' {
+    import { ColumnProps } from '@/components/Column';
+    import { RowProps } from '@/components/Row';
+    export interface NavMenuProps extends ColumnProps {
+        highlightColor?: string;
+    }
+    export function NavMenu({ highlightColor, className, style, children, ...props }: NavMenuProps): import("react").JSX.Element;
+    export interface NavMenuItemProps extends RowProps {
+        isSelected?: boolean;
+    }
+    export function NavMenuItem({ isSelected, className, children, ...props }: NavMenuItemProps): import("react").JSX.Element;
+}
+
 declare module '@umami/react-zen/PasswordField' {
     import { TextFieldProps } from 'react-aria-components';
     interface PasswordFieldProps extends TextFieldProps {