@umami/react-zen 0.97.0 → 0.98.0

package/dist/index.css

@@ -3955,23 +3955,25 @@ body a.Button_button__NDYwM {
 }
 
 /* virtual-css:css:0fb02723d81c5960ed149d3d9f58f1ba */
-.List_list__M2YzO {
+.List_list__NzVmN {
+  display: grid;
   min-width: 100px;
   outline: none;
   overflow: auto;
+  gap: var(--spacing-1);
 }
-.List_separator__NzBlZ {
+.List_separator__M2U0O {
   border-bottom: var(--border);
 }
-.List_section__MWM1Y:not(:last-child) {
+.List_section__Y2Q0Z:not(:last-child) {
   margin-bottom: var(--spacing-4);
 }
-.List_header__ZmQyN {
+.List_header__M2ZhY {
   font-size: var(--font-size-2);
   font-weight: var(--font-weight-bold);
   padding: var(--padding);
 }
-.List_item__M2IxN {
+.List_item__YmFjO {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -3984,25 +3986,43 @@ body a.Button_button__NDYwM {
   outline: none;
   border-radius: var(--border-radius);
 }
-.List_item__M2IxN[data-disabled] {
+.List_item__YmFjO[data-disabled] {
   color: var(--font-color-disabled);
 }
-.List_item__M2IxN[data-focus],
-.List_item__M2IxN[data-focus-visible] {
+.List_item__YmFjO[data-focus],
+.List_item__YmFjO[data-focus-visible] {
   background: var(--highlight-color);
 }
-.List_item__M2IxN:hover {
+.List_item__YmFjO:hover {
   background: var(--highlight-color);
 }
-.List_item__M2IxN[data-selected] {
+.List_item__YmFjO[data-selected] {
   font-weight: bold;
+  & .List_check__NjUwZ {
+    display: flex;
+    justify-content: flex-end;
+    flex: 1;
+  }
 }
-.List_item__M2IxN[data-selected] .List_check__OWQxN {
-  display: flex;
-  justify-content: flex-end;
-  flex: 1;
+.List_variant-1__MGY0O {
+  & .List_item__YmFjO:hover,
+  .List_item__YmFjO[data-selected] {
+    background: var(--base-color-2);
+  }
+}
+.List_variant-2__NTJlM {
+  & .List_item__YmFjO:hover,
+  .List_item__YmFjO[data-selected] {
+    background: var(--base-color-3);
+  }
+}
+.List_variant-3__NTEyY {
+  & .List_item__YmFjO:hover,
+  .List_item__YmFjO[data-selected] {
+    background: var(--base-color-4);
+  }
 }
-.List_check__OWQxN {
+.List_check__NjUwZ {
   display: none;
 }
 
@@ -4227,15 +4247,15 @@ body a.Button_button__NDYwM {
   }
 }
 
-/* virtual-css:css:bb343d54051132b757b1faf696c283f2 */
-.NavBar_nav__NDgxZ {
+/* virtual-css:css:4a4829d96e3dd3519c018c8edddc2d35 */
+.Navbar_nav__ZjEwM {
   display: flex;
   align-items: center;
   font-size: var(--font-size);
   color: var(--font-color);
   gap: var(--gap-lg);
 }
-.NavBar_item__OGRlN {
+.Navbar_item__MWVhZ {
   display: flex;
   align-items: center;
   gap: var(--gap);
@@ -4244,15 +4264,15 @@ body a.Button_button__NDYwM {
   font-weight: 700;
   cursor: default;
 }
-.NavBar_item__OGRlN:hover {
+.Navbar_item__MWVhZ:hover {
   background: var(--highlight-color);
 }
-.NavBar_nav__NDgxZ .NavBar_item__OGRlN > a,
-.NavBar_nav__NDgxZ .NavBar_item__OGRlN > a:hover {
+.Navbar_nav__ZjEwM .Navbar_item__MWVhZ > a,
+.Navbar_nav__ZjEwM .Navbar_item__MWVhZ > a:hover {
   color: var(--font-color);
   text-decoration: none;
 }
-.NavBar_icon__NWFiY {
+.Navbar_icon__ZmM1N {
   color: var(--font-color-muted);
 }
 
@@ -4422,8 +4442,8 @@ body a.Button_button__NDYwM {
   background: none;
 }
 
-/* virtual-css:css:12d12fae43d9120371ddbb4f1c814f07 */
-.SideNav_sidenav__M2NlY {
+/* virtual-css:css:844962527a8f0e375161b58db0fc39ed */
+.Sidebar_sidenav__ODc2Z {
   height: 100%;
   font-size: var(--font-size);
   border-right: 1px solid var(--border-color);
@@ -4431,29 +4451,29 @@ body a.Button_button__NDYwM {
   overflow: hidden;
   transition: width 0.1s ease-out;
 }
-.SideNav_header__NGU1Y {
+.Sidebar_header__YWI3N {
   display: flex;
   align-items: center;
   gap: var(--gap);
   padding: var(--padding);
 }
-.SideNav_name__OTM0N {
+.Sidebar_name__NThjO {
   font-weight: var(--font-weight-bold);
 }
-.SideNav_section__MTUxM {
+.Sidebar_section__YzQwN {
   padding: var(--spacing-3);
   overflow: hidden;
 }
-.SideNav_title__YTg5O {
+.Sidebar_title__NDBlN {
   font-weight: var(--font-weight-bold);
 }
-.SideNav_content__MjczM {
+.Sidebar_content__NmUzM {
   display: grid;
   min-height: 40px;
   gap: var(--gap);
   overflow: hidden;
 }
-.SideNav_item__ZTlkN {
+.Sidebar_item__ZjYxZ {
   display: flex;
   align-items: center;
   justify-content: flex-start;
@@ -4467,62 +4487,62 @@ body a.Button_button__NDYwM {
   white-space: nowrap;
   overflow: hidden;
 }
-.SideNav_item__ZTlkN:hover {
+.Sidebar_item__ZjYxZ:hover {
   color: var(--font-color);
 }
-.SideNav_label__NDU1N {
+.Sidebar_label__OTI3N {
   opacity: 1;
   width: 100%;
   transition: all 0.3s;
 }
-.SideNav_collapsed__YzExM .SideNav_label__NDU1N {
+.Sidebar_collapsed__NDY0N .Sidebar_label__OTI3N {
   opacity: 0;
   width: 0;
   transition: all 0.3s;
 }
-.SideNav_collapsed__YzExM {
+.Sidebar_collapsed__NDY0N {
   width: 68px;
   transition: width 0.2s ease-in-out;
 }
-.SideNav_muted__MmRlM .SideNav_item__ZTlkN {
+.Sidebar_muted__NjI0N .Sidebar_item__ZjYxZ {
   color: var(--font-color-muted);
 }
-.SideNav_muted__MmRlM .SideNav_item__ZTlkN:hover {
+.Sidebar_muted__NjI0N .Sidebar_item__ZjYxZ:hover {
   color: var(--font-color);
 }
-.SideNav_muted__MmRlM .SideNav_item__ZTlkN.SideNav_selected__ZjY4N {
+.Sidebar_muted__NjI0N .Sidebar_item__ZjYxZ.Sidebar_selected__N2RhZ {
   color: var(--font-color);
 }
-.SideNav_variant-quiet__OTZlN {
+.Sidebar_variant-quiet__ZjllN {
   background: transparent;
-  & .SideNav_item__ZTlkN:hover,
-  .SideNav_selected__ZjY4N {
+  & .Sidebar_item__ZjYxZ:hover,
+  .Sidebar_selected__N2RhZ {
     border: 1px solid var(--border-color);
     border-radius: var(--border-radius);
   }
 }
-.SideNav_variant-1__NjVmN {
+.Sidebar_variant-1__NmFhM {
   background: var(--base-color-1);
-  & .SideNav_item__ZTlkN:hover,
-  .SideNav_selected__ZjY4N {
+  & .Sidebar_item__ZjYxZ:hover,
+  .Sidebar_selected__N2RhZ {
     background: var(--base-color-2);
   }
 }
-.SideNav_variant-2__NWZjM {
+.Sidebar_variant-2__OWYzZ {
   background: var(--base-color-2);
-  & .SideNav_item__ZTlkN:hover,
-  .SideNav_selected__ZjY4N {
+  & .Sidebar_item__ZjYxZ:hover,
+  .Sidebar_selected__N2RhZ {
     background: var(--base-color-3);
   }
 }
-.SideNav_variant-3__ZDE4O {
+.Sidebar_variant-3__ODk2Y {
   background: var(--base-color-3);
-  & .SideNav_item__ZTlkN:hover,
-  .SideNav_selected__ZjY4N {
+  & .Sidebar_item__ZjYxZ:hover,
+  .Sidebar_selected__N2RhZ {
     background: var(--base-color-4);
   }
 }
-.SideNav_sidenav__M2NlY.SideNav_noborder__YTJjO {
+.Sidebar_sidenav__ODc2Z.Sidebar_noborder__NTJlN {
   border: 0;
 }
 

package/dist/index.d.ts

@@ -54,7 +54,7 @@ declare module '@umami/react-zen' {
     export { LoadingButton } from '@umami/react-zen/LoadingButton';
     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 { Navbar, NavbarItem } from '@umami/react-zen/Navbar';
     export { PasswordField } from '@umami/react-zen/PasswordField';
     export { Popover } from '@umami/react-zen/Popover';
     export { ProgressBar } from '@umami/react-zen/ProgressBar';
@@ -63,7 +63,7 @@ declare module '@umami/react-zen' {
     export { Row } from '@umami/react-zen/Row';
     export { SearchField } from '@umami/react-zen/SearchField';
     export { Select } from '@umami/react-zen/Select';
-    export { SideNav, SideNavHeader, SideNavItem, SideNavSection } from '@umami/react-zen/SideNav';
+    export { Sidebar, SidebarHeader, SidebarItem, SidebarSection } from '@umami/react-zen/Sidebar';
     export { Slider } from '@umami/react-zen/Slider';
     export { Slot } from '@umami/react-zen/Slot';
     export { Spinner } from '@umami/react-zen/Spinner';
@@ -615,8 +615,9 @@ declare module '@umami/react-zen/List' {
         idProperty?: string;
         labelProperty?: string;
         separatorProperty?: string;
+        variant?: '1' | '2' | '3';
     }
-    export function List({ items, idProperty, labelProperty, separatorProperty, className, children, ...props }: ListProps): import("react").JSX.Element;
+    export function List({ items, idProperty, labelProperty, separatorProperty, variant, className, children, ...props }: ListProps): import("react").JSX.Element;
     export function ListItem({ id, children, className, ...props }: ListBoxItemProps<any>): import("react").JSX.Element;
     export function ListSeparator({ className, ...props }: SeparatorProps): import("react").JSX.Element;
     export function ListSection({ title, className, children, ...props }: ListBoxSectionProps<any> & {
@@ -678,24 +679,22 @@ declare module '@umami/react-zen/Modal' {
     export type { ModalProps };
 }
 
-declare module '@umami/react-zen/NavBar' {
-    import { HTMLAttributes, ReactNode, Dispatch, SetStateAction } from 'react';
-    type NavigationContext = {
-        activeMenu: string;
-        setActiveMenu: Dispatch<SetStateAction<string>>;
-    };
-    export const NavBarContext: import("react").Context<NavigationContext | undefined>;
-    export interface NavBarProps extends HTMLAttributes<HTMLElement> {
-        showArrow?: boolean;
-    }
-    export function NavBar({ showArrow, className, children, ...props }: NavBarProps): import("react").JSX.Element;
-    export interface NavBarItemProps extends HTMLAttributes<HTMLElement> {
-        label?: string;
-        children?: ReactNode;
-    }
-    export function NavBarItem({ label, children, className, ...props }: NavBarItemProps): import("react").JSX.Element;
-    export {};
+import { HTMLAttributes, ReactNode, Dispatch, SetStateAction } from 'react';
+type NavigationContext = {
+    activeMenu: string;
+    setActiveMenu: Dispatch<SetStateAction<string>>;
+};
+export declare const NavbarContext: import("react").Context<NavigationContext | undefined>;
+export interface NavbarProps extends HTMLAttributes<HTMLElement> {
+    showArrow?: boolean;
+}
+export declare function Navbar({ showArrow, className, children, ...props }: NavbarProps): import("react").JSX.Element;
+export interface NavbarItemProps extends HTMLAttributes<HTMLElement> {
+    label?: string;
+    children?: ReactNode;
 }
+export declare function NavbarItem({ label, children, className, ...props }: NavbarItemProps): import("react").JSX.Element;
+export {};
 
 declare module '@umami/react-zen/PasswordField' {
     import { TextFieldProps } from 'react-aria-components';
@@ -794,34 +793,34 @@ declare module '@umami/react-zen/Select' {
     export type { SelectProps };
 }
 
-declare module '@umami/react-zen/SideNav' {
+declare module '@umami/react-zen/Sidebar' {
     import { ReactNode } from 'react';
     import { ColumnProps } from '@/components/Column';
     import { RowProps } from '@/components/Row';
-    export interface SideNavProps extends ColumnProps {
+    export interface SidebarProps extends ColumnProps {
         variant?: '1' | '2' | '3' | 'quiet';
         isCollapsed?: boolean;
         muteItems?: boolean;
         showBorder?: boolean;
         children?: ReactNode;
     }
-    export function SideNav({ variant, isCollapsed, muteItems, showBorder, className, children, ...props }: SideNavProps): import("react").JSX.Element;
-    export function SideNavSection({ title, children, }: {
+    export function Sidebar({ variant, isCollapsed, muteItems, showBorder, className, children, ...props }: SidebarProps): import("react").JSX.Element;
+    export function SidebarSection({ title, children, }: {
         title?: string;
         children: ReactNode;
     } & ColumnProps): import("react").JSX.Element;
-    export function SideNavHeader({ label, icon, className, children, ...props }: {
+    export function SidebarHeader({ label, icon, className, children, ...props }: {
         label: string;
         icon?: ReactNode;
         children?: ReactNode;
     } & RowProps): import("react").JSX.Element;
-    export interface SideNavItemProps extends RowProps {
+    export interface SidebarItemProps extends RowProps {
         isSelected?: boolean;
     }
-    export function SideNavItem({ label, icon, isSelected, className, children, ...props }: {
+    export function SidebarItem({ label, icon, isSelected, className, children, ...props }: {
         label?: string;
         icon?: ReactNode;
-    } & SideNavItemProps): import("react").JSX.Element;
+    } & SidebarItemProps): import("react").JSX.Element;
 }
 
 declare module '@umami/react-zen/Slider' {