@zvoove/unity-ui 2.22.1 → 2.23.0

package/dist/unity-ui.d.ts

@@ -55,7 +55,7 @@ export declare interface AccordionProps<T extends readonly AccordionItem[] = rea
 }
 
 export declare const ActionCard: {
-    ({ header, children, footer }: ActionCardProps): JSX.Element;
+    ({ header, children, footer, isOpen, expandable, onExpandToggle, }: ActionCardProps): JSX.Element;
     displayName: string;
 };
 
@@ -74,6 +74,21 @@ export declare interface ActionCardProps {
      * nodes (typically action buttons).
      */
     footer?: ReactNode;
+    /**
+     * Whether the ActionCard is expandable.
+     * @default false
+     */
+    expandable?: boolean;
+    /**
+     * Whether the ActionCard is open or closed.
+     * @default true
+     */
+    isOpen?: boolean;
+    /**
+     * Called when the header is clicked in expandable mode.
+     * Required when using `isOpen` (controlled) so the parent can update its state.
+     */
+    onExpandToggle?: () => void;
 }
 
 export declare interface ActionConfirmation {
@@ -107,7 +122,7 @@ export declare type AlignItems = 'stretch' | 'flex-start' | 'flex-end' | 'center
  */
 export declare type AnnouncementType = 'added' | 'removed' | 'cleared' | 'component-error' | 'count-changed';
 
-export declare const Avatar: ({ size, type, name, image, initialsAmount, variant, }: AvatarProps) => JSX.Element;
+export declare const Avatar: ({ size, type: typeProp, name, image, initialsAmount, variant, }: AvatarProps) => JSX.Element;
 
 declare const AVATAR_SIZES: {
     readonly SMALL: "small";
@@ -164,7 +179,7 @@ declare type AvatarSize = (typeof AVATAR_SIZES)[keyof typeof AVATAR_SIZES];
 
 declare type AxisVariant = 'X' | 'Y';
 
-export declare type BackgroundColors = 'background' | 'primary' | 'primary-hover' | 'primary-active' | 'secondary' | 'tertiary' | 'primary-container' | 'secondary-container' | 'tertiary-container' | 'tertiary-container-hover' | 'tertiary-container-active' | 'primary-fixed' | 'primary-fixed-dim' | 'secondary-fixed' | 'secondary-fixed-dim' | 'tertiary-fixed' | 'tertiary-fixed-dim' | 'surface' | 'surface-bright' | 'surface-dim' | 'surface-variant' | 'surface-container-lowest' | 'surface-container-low' | 'surface-container' | 'surface-container-high' | 'surface-container-highest' | 'error' | 'error-container' | 'inverse-surface' | 'inverse-on-surface' | 'inverse-primary' | 'scrim' | 'yellow' | 'dark-yellow' | 'yellow-container' | 'green' | 'dark-green' | 'green-container' | 'pink' | 'dark-pink' | 'pink-container' | 'steel-blue' | 'dark-steel-blue' | 'steel-blue-container';
+export declare type BackgroundColors = 'background' | 'outline' | 'outline-variant' | 'outline-low' | 'primary' | 'primary-hover' | 'primary-active' | 'secondary' | 'tertiary' | 'primary-container' | 'secondary-container' | 'tertiary-container' | 'tertiary-container-hover' | 'tertiary-container-active' | 'primary-fixed' | 'primary-fixed-dim' | 'secondary-fixed' | 'secondary-fixed-dim' | 'tertiary-fixed' | 'tertiary-fixed-dim' | 'surface' | 'surface-bright' | 'surface-dim' | 'surface-variant' | 'surface-container-lowest' | 'surface-container-low' | 'surface-container' | 'surface-container-high' | 'surface-container-highest' | 'error' | 'error-container' | 'inverse-surface' | 'inverse-on-surface' | 'inverse-primary' | 'scrim' | 'yellow' | 'dark-yellow' | 'yellow-container' | 'green' | 'dark-green' | 'green-container' | 'pink' | 'dark-pink' | 'pink-container' | 'steel-blue' | 'dark-steel-blue' | 'steel-blue-container';
 
 export declare const Badge: ({ children, variant, content, dot, }: BadgeProps) => JSX.Element;
 
@@ -187,7 +202,7 @@ export declare interface BadgeProps {
     dot?: boolean;
 }
 
-export declare const Breadcrumbs: <T extends default_2.ElementType = "a">({ items, linkComponent: LinkComponent, }: BreadcrumbsProps<T>) => JSX.Element;
+export declare const Breadcrumbs: <T extends default_2.ElementType = "a">({ items, linkComponent: LinkComponent, homeIcon, }: BreadcrumbsProps<T>) => JSX.Element;
 
 export declare type BreadcrumbsItem<T extends React.ElementType = 'a'> = {
     label: string;
@@ -205,6 +220,11 @@ export declare type BreadcrumbsProps<T extends React.ElementType = 'a'> = {
      * @default 'a'
      */
     linkComponent?: T | 'a';
+    /**
+     * The icon name for the home (first) breadcrumb item
+     * @default 'home'
+     */
+    homeIcon?: CommonIconNames;
 };
 
 declare const BREAKPOINTS: {
@@ -287,6 +307,11 @@ export declare interface CardProps extends React.HTMLAttributes<HTMLDivElement>
      * Only used when `header` is provided.
      */
     headerBgColor?: BackgroundColors;
+    /**
+     * Whether to hide the border-bottom separator in the header area.
+     * @default false
+     */
+    hideHeaderBorder?: boolean;
     /**
      * Content rendered below the body.
      * Receives no extra styling — the consumer controls its appearance.
@@ -592,6 +617,7 @@ export declare const commonIconsMap: {
     readonly archive: Icon_2;
     readonly 'arrow-back': Icon_2;
     readonly 'arrow-bend': Icon_2;
+    readonly 'arrow-elbow-down-left': Icon_2;
     readonly 'arrow-down': Icon_2;
     readonly 'arrow-forward': Icon_2;
     readonly 'arrow-left-right': Icon_2;
@@ -616,6 +642,8 @@ export declare const commonIconsMap: {
     readonly 'cash-money': Icon_2;
     readonly certificate: Icon_2;
     readonly 'chat-bubble': Icon_2;
+    readonly 'chat-dots': Icon_2;
+    readonly 'chat-slash': Icon_2;
     readonly chats: Icon_2;
     readonly check: Icon_2;
     readonly 'check-circle': Icon_2;
@@ -634,8 +662,13 @@ export declare const commonIconsMap: {
     readonly 'cloud-upload': Icon_2;
     readonly 'clock-countdown': Icon_2;
     readonly 'clock-person': Icon_2;
+    readonly command: Icon_2;
     readonly columns: Icon_2;
+    readonly control: Icon_2;
     readonly copy: Icon_2;
+    readonly 'currency-dollar': Icon_2;
+    readonly 'currency-dollar-circle': Icon_2;
+    readonly 'currency-gbp': Icon_2;
     readonly 'dark-mode': Icon_2;
     readonly deactivate: Icon_2;
     readonly delete: Icon_2;
@@ -649,12 +682,60 @@ export declare const commonIconsMap: {
     readonly expenses: Icon_2;
     readonly 'face-id': Icon_2;
     readonly file: Icon_2;
+    readonly 'simple-file-archive': Icon_2;
+    readonly 'simple-file-audio': Icon_2;
+    readonly 'simple-file-c': Icon_2;
+    readonly 'simple-file-c-sharp': Icon_2;
+    readonly 'simple-file-code': Icon_2;
+    readonly 'simple-file-cpp': Icon_2;
+    readonly 'simple-file-css': Icon_2;
+    readonly 'simple-file-csv': Icon_2;
+    readonly 'simple-file-doc': Icon_2;
+    readonly 'simple-file-html': Icon_2;
+    readonly 'simple-file-image': Icon_2;
+    readonly 'simple-file-ini': Icon_2;
+    readonly 'simple-file-jpg': Icon_2;
+    readonly 'simple-file-js': Icon_2;
+    readonly 'simple-file-jsx': Icon_2;
+    readonly 'simple-file-md': Icon_2;
+    readonly 'simple-file-pdf': Icon_2;
+    readonly 'simple-file-png': Icon_2;
+    readonly 'simple-file-ppt': Icon_2;
+    readonly 'simple-file-py': Icon_2;
+    readonly 'simple-file-rs': Icon_2;
+    readonly 'simple-file-sql': Icon_2;
+    readonly 'simple-file-svg': Icon_2;
+    readonly 'simple-file-ts': Icon_2;
+    readonly 'simple-file-tsx': Icon_2;
+    readonly 'simple-file-text': Icon_2;
+    readonly 'simple-file-txt': Icon_2;
+    readonly 'simple-file-video': Icon_2;
+    readonly 'simple-file-vue': Icon_2;
+    readonly 'simple-file-xls': Icon_2;
+    readonly 'simple-file-zip': Icon_2;
     readonly filter: Icon_2;
     readonly filters: Icon_2;
     readonly 'first-page': Icon_2;
+    readonly 'flag-de': ({ size }: {
+        size?: number;
+    }) => JSX.Element;
+    readonly 'flag-es': ({ size }: {
+        size?: number;
+    }) => JSX.Element;
+    readonly 'flag-fr': ({ size }: {
+        size?: number;
+    }) => JSX.Element;
+    readonly 'flag-gb': ({ size }: {
+        size?: number;
+    }) => JSX.Element;
+    readonly 'flag-nl': ({ size }: {
+        size?: number;
+    }) => JSX.Element;
     readonly folder: Icon_2;
+    readonly 'folder-open': Icon_2;
     readonly 'grid-view': Icon_2;
     readonly 'hard-hat': Icon_2;
+    readonly 'head-circuit': Icon_2;
     readonly help: Icon_2;
     readonly hide: Icon_2;
     readonly home: Icon_2;
@@ -662,6 +743,7 @@ export declare const commonIconsMap: {
     readonly info: Icon_2;
     readonly invoice: Icon_2;
     readonly job: Icon_2;
+    readonly 'key-return': Icon_2;
     readonly keyboard: Icon_2;
     readonly knowledge: Icon_2;
     readonly language: Icon_2;
@@ -671,6 +753,8 @@ export declare const commonIconsMap: {
     readonly location: Icon_2;
     readonly 'location-pin': Icon_2;
     readonly lock: Icon_2;
+    readonly 'lock-key': Icon_2;
+    readonly 'lock-key-open': Icon_2;
     readonly menu: Icon_2;
     readonly metadata: Icon_2;
     readonly code: Icon_2;
@@ -683,12 +767,17 @@ export declare const commonIconsMap: {
     readonly notifications: Icon_2;
     readonly note: Icon_2;
     readonly numpad: Icon_2;
+    readonly option: Icon_2;
     readonly 'open-in-new-tab': Icon_2;
     readonly order: Icon_2;
     readonly organization: Icon_2;
     readonly pause: Icon_2;
     readonly attachment: Icon_2;
     readonly phone: Icon_2;
+    readonly pin: Icon_2;
+    readonly 'pin-simple': Icon_2;
+    readonly 'pin-simple-slash': Icon_2;
+    readonly 'pin-slash': Icon_2;
     readonly 'piggy-bank': Icon_2;
     readonly plant: Icon_2;
     readonly printer: Icon_2;
@@ -696,6 +785,7 @@ export declare const commonIconsMap: {
     readonly 'qr-code': Icon_2;
     readonly refresh: Icon_2;
     readonly remark: Icon_2;
+    readonly robot: Icon_2;
     readonly save: Icon_2;
     readonly search: Icon_2;
     readonly 'send-message': Icon_2;
@@ -767,6 +857,17 @@ export declare interface ContentBlockProps {
     children: ReactNode;
 }
 
+export declare type CustomCommonIconNames = keyof typeof customCommonIconsMap;
+
+/**
+ * Custom common icons — brand/product icons not from Phosphor.
+ * Unlike Phosphor icons, these accept a `color` prop to switch between
+ * their default duotone brand colors and a single inherited color.
+ */
+export declare const customCommonIconsMap: {
+    readonly zvoove: ({ size, color }: ZvoooveLogoProps) => JSX.Element;
+};
+
 declare interface CustomIconProps {
     /**
      * The type of the icon. <br />
@@ -948,13 +1049,19 @@ declare const direction: {
     readonly NONE: "none";
 };
 
-export declare const Divider: ({ variant }: DividerProps) => JSX.Element;
+export declare const Divider: ({ variant, color, }: DividerProps) => JSX.Element;
 
 export declare interface DividerProps {
     /**
      * The variant to use.
      */
     variant?: 'fullWidth' | 'inset' | 'middle';
+    /**
+     * The color of the divider.
+     * Accepts any background color token name.
+     * @default 'outline-variant'
+     */
+    color?: BackgroundColors;
 }
 
 export declare const Expandable: {
@@ -1176,7 +1283,117 @@ export declare type FlexResponsiveStylesKeys<Attr extends string> = GenerateSimp
 
 export declare type FlexWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
 
-export declare type ForegroundColors = 'primary' | 'secondary' | 'tertiary' | 'yellow' | 'green' | 'pink' | 'steel-blue' | 'dark-yellow' | 'dark-green' | 'dark-pink' | 'dark-steel-blue' | 'inverse-on-surface' | 'on-primary' | 'on-secondary' | 'on-tertiary' | 'on-primary-container' | 'on-secondary-container' | 'on-tertiary-container' | 'on-primary-fixed' | 'on-primary-fixed-variant' | 'on-secondary-fixed' | 'on-secondary-fixed-variant' | 'on-tertiary-fixed' | 'on-tertiary-fixed-variant' | 'on-surface' | 'on-surface-variant' | 'on-error' | 'on-error-container' | 'on-yellow' | 'on-dark-yellow' | 'on-yellow-container' | 'on-green' | 'on-dark-green' | 'on-green-container' | 'on-pink' | 'on-dark-pink' | 'on-pink-container' | 'on-steel-blue' | 'on-dark-steel-blue' | 'on-steel-blue-container' | 'error' | 'on-scrim';
+export declare const FloatSearch: {
+    ({ open, onClose, items, onSearch, onSelect, value, placeholder, translations: translationsProp, zIndex, loading, }: FloatSearchProps): ReactPortal | null;
+    displayName: string;
+};
+
+export declare interface FloatSearchItem {
+    /**
+     * Unique identifier for the item.
+     */
+    id: string;
+    /**
+     * Display label shown in the result row.
+     */
+    label: string;
+    /**
+     * Type of the item — determines the icon rendered on the left.
+     */
+    type: 'chat' | 'project';
+    /**
+     * Secondary metadata shown right-aligned (e.g. "Heute", "24 Chats").
+     */
+    meta?: string;
+}
+
+export declare interface FloatSearchProps {
+    /**
+     * Controls whether the search overlay is visible.
+     */
+    open: boolean;
+    /**
+     * Called when the overlay should close (backdrop click, Esc, or clear button).
+     */
+    onClose: () => void;
+    /**
+     * Items to display in the result list.
+     */
+    items?: FloatSearchItem[];
+    /**
+     * Called whenever the search query changes.
+     */
+    onSearch?: (query: string) => void;
+    /**
+     * Called when the user confirms a result (Enter key or click).
+     */
+    onSelect?: (item: FloatSearchItem) => void;
+    /**
+     * Controlled search query value. When provided, the input becomes controlled.
+     */
+    value?: string;
+    /**
+     * Placeholder text for the search input.
+     * @default 'Chats und Projekte durchsuchen'
+     * @deprecated Use `translations.placeholder` instead.
+     */
+    placeholder?: string;
+    /**
+     * Override translatable UI strings. All keys are optional — missing keys fall back to German defaults.
+     */
+    translations?: FloatSearchTranslations;
+    /**
+     * z-index of the overlay.
+     * @default 20
+     */
+    zIndex?: number;
+    /**
+     * When `true`, displays skeleton placeholders instead of the result list.
+     * Use this while fetching search results asynchronously.
+     * @default false
+     */
+    loading?: boolean;
+}
+
+export declare interface FloatSearchTranslations {
+    /**
+     * Placeholder text for the search input.
+     * @default 'Chats und Projekte durchsuchen'
+     */
+    placeholder?: string;
+    /**
+     * Aria-label for the clear-query button.
+     * @default 'Suche zurücksetzen'
+     */
+    clearAriaLabel?: string;
+    /**
+     * Aria-label for the close button.
+     * @default 'Suche schließen'
+     */
+    closeAriaLabel?: string;
+    /**
+     * Text shown when no results match the query.
+     * @default 'Keine Ergebnisse gefunden'
+     */
+    noResults?: string;
+    /**
+     * Footer hint label for arrow-key navigation.
+     * @default 'navigieren'
+     */
+    navigate?: string;
+    /**
+     * Footer hint label for the Enter key action.
+     * @default 'öffnen'
+     */
+    open?: string;
+    /**
+     * Footer hint label for the Escape key action.
+     * @default 'schließen'
+     */
+    close?: string;
+}
+
+export declare type ForegroundColors = 'primary' | 'secondary' | 'tertiary' | 'yellow' | 'green' | 'pink' | 'steel-blue' | 'dark-yellow' | 'dark-green' | 'dark-pink' | 'dark-steel-blue' | 'inverse-on-surface' | 'on-primary' | 'on-secondary' | 'on-tertiary' | 'on-primary-container' | 'on-secondary-container' | 'on-tertiary-container' | 'on-primary-fixed' | 'on-primary-fixed-variant' | 'on-secondary-fixed' | 'on-secondary-fixed-variant' | 'on-tertiary-fixed' | 'on-tertiary-fixed-variant' | 'on-surface' | 'on-surface-variant' | 'on-surface-variant-lowest' | 'on-error' | 'on-error-container' | 'on-yellow' | 'on-dark-yellow' | 'on-yellow-container' | 'on-green' | 'on-dark-green' | 'on-green-container' | 'on-pink' | 'on-dark-pink' | 'on-pink-container' | 'on-steel-blue' | 'on-dark-steel-blue' | 'on-steel-blue-container' | 'error' | 'on-scrim';
 
 export declare const FormLabel: ({ value, required, htmlFor, ...props }: FormLabelProps) => JSX.Element;
 
@@ -1311,6 +1528,7 @@ export declare interface GridProps extends React.HTMLAttributes<HTMLDivElement>
 export declare const Icon: ({ name, size, weight, color, type, featured, ...props }: IconProps) => JSX.Element;
 
 declare const iconMap: {
+    readonly zvoove: ({ size, color }: ZvoooveLogoProps) => JSX.Element;
     readonly add: Icon_2;
     readonly 'add-circle': Icon_2;
     readonly 'add-file': Icon_2;
@@ -1319,6 +1537,7 @@ declare const iconMap: {
     readonly archive: Icon_2;
     readonly 'arrow-back': Icon_2;
     readonly 'arrow-bend': Icon_2;
+    readonly 'arrow-elbow-down-left': Icon_2;
     readonly 'arrow-down': Icon_2;
     readonly 'arrow-forward': Icon_2;
     readonly 'arrow-left-right': Icon_2;
@@ -1343,6 +1562,8 @@ declare const iconMap: {
     readonly 'cash-money': Icon_2;
     readonly certificate: Icon_2;
     readonly 'chat-bubble': Icon_2;
+    readonly 'chat-dots': Icon_2;
+    readonly 'chat-slash': Icon_2;
     readonly chats: Icon_2;
     readonly check: Icon_2;
     readonly 'check-circle': Icon_2;
@@ -1361,8 +1582,13 @@ declare const iconMap: {
     readonly 'cloud-upload': Icon_2;
     readonly 'clock-countdown': Icon_2;
     readonly 'clock-person': Icon_2;
+    readonly command: Icon_2;
     readonly columns: Icon_2;
+    readonly control: Icon_2;
     readonly copy: Icon_2;
+    readonly 'currency-dollar': Icon_2;
+    readonly 'currency-dollar-circle': Icon_2;
+    readonly 'currency-gbp': Icon_2;
     readonly 'dark-mode': Icon_2;
     readonly deactivate: Icon_2;
     readonly delete: Icon_2;
@@ -1376,12 +1602,60 @@ declare const iconMap: {
     readonly expenses: Icon_2;
     readonly 'face-id': Icon_2;
     readonly file: Icon_2;
+    readonly 'simple-file-archive': Icon_2;
+    readonly 'simple-file-audio': Icon_2;
+    readonly 'simple-file-c': Icon_2;
+    readonly 'simple-file-c-sharp': Icon_2;
+    readonly 'simple-file-code': Icon_2;
+    readonly 'simple-file-cpp': Icon_2;
+    readonly 'simple-file-css': Icon_2;
+    readonly 'simple-file-csv': Icon_2;
+    readonly 'simple-file-doc': Icon_2;
+    readonly 'simple-file-html': Icon_2;
+    readonly 'simple-file-image': Icon_2;
+    readonly 'simple-file-ini': Icon_2;
+    readonly 'simple-file-jpg': Icon_2;
+    readonly 'simple-file-js': Icon_2;
+    readonly 'simple-file-jsx': Icon_2;
+    readonly 'simple-file-md': Icon_2;
+    readonly 'simple-file-pdf': Icon_2;
+    readonly 'simple-file-png': Icon_2;
+    readonly 'simple-file-ppt': Icon_2;
+    readonly 'simple-file-py': Icon_2;
+    readonly 'simple-file-rs': Icon_2;
+    readonly 'simple-file-sql': Icon_2;
+    readonly 'simple-file-svg': Icon_2;
+    readonly 'simple-file-ts': Icon_2;
+    readonly 'simple-file-tsx': Icon_2;
+    readonly 'simple-file-text': Icon_2;
+    readonly 'simple-file-txt': Icon_2;
+    readonly 'simple-file-video': Icon_2;
+    readonly 'simple-file-vue': Icon_2;
+    readonly 'simple-file-xls': Icon_2;
+    readonly 'simple-file-zip': Icon_2;
     readonly filter: Icon_2;
     readonly filters: Icon_2;
     readonly 'first-page': Icon_2;
+    readonly 'flag-de': ({ size }: {
+        size?: number;
+    }) => JSX.Element;
+    readonly 'flag-es': ({ size }: {
+        size?: number;
+    }) => JSX.Element;
+    readonly 'flag-fr': ({ size }: {
+        size?: number;
+    }) => JSX.Element;
+    readonly 'flag-gb': ({ size }: {
+        size?: number;
+    }) => JSX.Element;
+    readonly 'flag-nl': ({ size }: {
+        size?: number;
+    }) => JSX.Element;
     readonly folder: Icon_2;
+    readonly 'folder-open': Icon_2;
     readonly 'grid-view': Icon_2;
     readonly 'hard-hat': Icon_2;
+    readonly 'head-circuit': Icon_2;
     readonly help: Icon_2;
     readonly hide: Icon_2;
     readonly home: Icon_2;
@@ -1389,6 +1663,7 @@ declare const iconMap: {
     readonly info: Icon_2;
     readonly invoice: Icon_2;
     readonly job: Icon_2;
+    readonly 'key-return': Icon_2;
     readonly keyboard: Icon_2;
     readonly knowledge: Icon_2;
     readonly language: Icon_2;
@@ -1398,6 +1673,8 @@ declare const iconMap: {
     readonly location: Icon_2;
     readonly 'location-pin': Icon_2;
     readonly lock: Icon_2;
+    readonly 'lock-key': Icon_2;
+    readonly 'lock-key-open': Icon_2;
     readonly menu: Icon_2;
     readonly metadata: Icon_2;
     readonly code: Icon_2;
@@ -1410,12 +1687,17 @@ declare const iconMap: {
     readonly notifications: Icon_2;
     readonly note: Icon_2;
     readonly numpad: Icon_2;
+    readonly option: Icon_2;
     readonly 'open-in-new-tab': Icon_2;
     readonly order: Icon_2;
     readonly organization: Icon_2;
     readonly pause: Icon_2;
     readonly attachment: Icon_2;
     readonly phone: Icon_2;
+    readonly pin: Icon_2;
+    readonly 'pin-simple': Icon_2;
+    readonly 'pin-simple-slash': Icon_2;
+    readonly 'pin-slash': Icon_2;
     readonly 'piggy-bank': Icon_2;
     readonly plant: Icon_2;
     readonly printer: Icon_2;
@@ -1423,6 +1705,7 @@ declare const iconMap: {
     readonly 'qr-code': Icon_2;
     readonly refresh: Icon_2;
     readonly remark: Icon_2;
+    readonly robot: Icon_2;
     readonly save: Icon_2;
     readonly search: Icon_2;
     readonly 'send-message': Icon_2;
@@ -1605,16 +1888,12 @@ declare type LabelStates = {
     off: string;
 };
 
-export declare type Margin = SpacingKeys | {
-    top?: SpacingKeys;
-    right?: SpacingKeys;
-    bottom?: SpacingKeys;
-    left?: SpacingKeys;
-    x?: SpacingKeys;
-    y?: SpacingKeys;
+export declare const ListMenu: {
+    <T extends default_2.ElementType = "a">({ items, activeItem, open, variant, linkComponent, onItemClick, }: ListMenuProps<T>): JSX.Element;
+    displayName: string;
 };
 
-export declare type MenuItem<T extends React.ElementType = 'a'> = {
+export declare type ListMenuItem<T extends React.ElementType = 'a'> = {
     /**
      * The label of the menu item
      */
@@ -1626,9 +1905,69 @@ export declare type MenuItem<T extends React.ElementType = 'a'> = {
     /**
      * The icon of the menu item
      */
-    icon: CommonIconNames | React.ReactElement;
+    icon?: CommonIconNames | CustomCommonIconNames | React.ReactElement;
+    /**
+     * Extra content rendered at the end of the label area (e.g. a tag, badge, or action button)
+     */
+    endContent?: React.ReactNode;
+    /**
+     * When to show the end content
+     * @default 'always'
+     */
+    endContentVisibility?: 'always' | 'hover';
+    /**
+     * Renders a spacer instead of a menu item.
+     * @default false
+     */
+    isSpacer?: boolean;
 } & Omit<React.ComponentPropsWithoutRef<T>, 'children'>;
 
+export declare type ListMenuProps<T extends React.ElementType = 'a'> = {
+    /**
+     * The list of menu items
+     */
+    items: ListMenuItem<T>[];
+    /**
+     * The active item must match the id of the menu item
+     */
+    activeItem?: string;
+    /**
+     * Whether the menu is expanded (showing labels)
+     * @default true
+     */
+    open?: boolean;
+    /**
+     * The visual variant of the menu
+     * @default 'default'
+     */
+    variant?: ListMenuVariant;
+    /**
+     * The component to render for the link
+     * @default 'a'
+     */
+    linkComponent?: T | 'a';
+    /**
+     * The callback to handle the item click
+     */
+    onItemClick?: (item: ListMenuItem<T>) => void;
+};
+
+export declare type ListMenuVariant = 'default' | 'compact';
+
+export declare type Margin = SpacingKeys | {
+    top?: SpacingKeys;
+    right?: SpacingKeys;
+    bottom?: SpacingKeys;
+    left?: SpacingKeys;
+    x?: SpacingKeys;
+    y?: SpacingKeys;
+};
+
+/**
+ * @deprecated Use `ListMenuItem` instead
+ */
+export declare type MenuItem<T extends React.ElementType = 'a'> = ListMenuItem<T>;
+
 export declare interface MessageAction {
     /**
      * The icon to display for this action.
@@ -1695,6 +2034,37 @@ export declare interface MessageActionsProps {
 
 export declare type MessageActionsVariant = 'sender' | 'receiver';
 
+export declare type MidSection<T extends React.ElementType = 'a'> = {
+    /**
+     * The title of the section
+     */
+    title?: string;
+    /**
+     * Whether to show a divider above the section
+     * @default true
+     */
+    showDivider?: boolean;
+    /**
+     * The list of items in the section
+     */
+    items: ListMenuItem<T>[];
+    /**
+     * Whether to hide the entire section when the menu is closed
+     * @default false
+     */
+    hideOnMenuClosed?: boolean;
+    /**
+     * Highlights the section with a background color and rounded corners.
+     * @default false
+     */
+    highlight?: boolean;
+    /**
+     * When set, the section collapses into this icon when the menu is closed.
+     * On hover, a PopUpMenu opens revealing the section items.
+     */
+    replaceWithIconOnClose?: CommonIconNames;
+};
+
 declare type NonNullable_2<T> = Exclude<T, null | undefined>;
 export { NonNullable_2 as NonNullable }
 
@@ -1760,7 +2130,7 @@ declare type Panel = {
     children: React.ReactNode;
 };
 
-export declare const PopUpMenu: ({ children, placement, disabled, trigger, density, closeOnItemClick, items, onItemClick, selectedItem, selectable, open, onClose, closeOnClickOutside, closeOnEscape, toggleOnClick, queryHighlight, showSearch, searchPlaceholder, allowClearAll, allowSelectAll, selectAllLabel, clearAllLabel, noResultsFoundMessage, onClearAllOrSelectAllClick, searchMode, onSearchChange, isLoading, wrapperWidth, onScrollEnd, isLoadingMore, ...props }: PopUpMenuProps) => JSX.Element;
+export declare const PopUpMenu: ({ children, placement, disabled, trigger, density, closeOnItemClick, items, onItemClick, selectedItem, selectable, open, onClose, closeOnClickOutside, closeOnEscape, toggleOnClick, queryHighlight, showSearch, searchPlaceholder, allowClearAll, allowSelectAll, selectAllLabel, clearAllLabel, noResultsFoundMessage, onClearAllOrSelectAllClick, searchMode, onSearchChange, isLoading, wrapperWidth, onScrollEnd, isLoadingMore, height, minHeight, maxHeight, ...props }: PopUpMenuProps) => JSX.Element;
 
 export declare type PopUpMenuItem<T extends React.ElementType = 'button'> = UnionAs_2 & {
     /**
@@ -1770,9 +2140,29 @@ export declare type PopUpMenuItem<T extends React.ElementType = 'button'> = Unio
     id: string;
     /**
      * The label of the item
-     * @required
+     * @required (ignored when isDivider is true)
      */
     label: string;
+    /**
+     * Whether the item is a visual divider
+     * @default false
+     */
+    isDivider?: boolean;
+    /**
+     * Props passed to the Divider component
+     * Only used when `isDivider` is true
+     */
+    dividerProps?: DividerProps;
+    /**
+     * Custom ReactNode to render instead of the label.
+     * When set, the item becomes non-interactive (not clickable, not focusable).
+     */
+    customContent?: React.ReactNode;
+    /**
+     * Whether the menu should stay open when this item is clicked
+     * @default false
+     */
+    keepOpen?: boolean;
     /**
      * The callback function that is called when the item is clicked
      */
@@ -1787,6 +2177,11 @@ export declare type PopUpMenuItem<T extends React.ElementType = 'button'> = Unio
      * @default false
      */
     disabled?: boolean;
+    /**
+     * Sub-menu items displayed in a nested PopUpMenu when the item is hovered.
+     * Opens to the right of the item (or left if no space).
+     */
+    subMenuItems?: PopUpMenuItem[];
     /**
      * The custom component to be used for the item <br />
      * `as` is ignored when `linkComponent` is set
@@ -1795,7 +2190,7 @@ export declare type PopUpMenuItem<T extends React.ElementType = 'button'> = Unio
     linkComponent?: T;
 } & Omit<React.ComponentProps<T>, 'className' | 'ref' | 'role' | 'tabIndex' | 'onClick' | 'disabled'>;
 
-declare type PopUpMenuPlacement = 'top' | 'bottom' | 'left' | 'right' | 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right' | 'left-top' | 'left-bottom' | 'right-top' | 'right-bottom';
+export declare type PopUpMenuPlacement = 'top' | 'bottom' | 'left' | 'right' | 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right' | 'left-top' | 'left-bottom' | 'right-top' | 'right-bottom';
 
 export declare interface PopUpMenuProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'className'> {
     /**
@@ -1967,11 +2362,23 @@ export declare interface PopUpMenuProps extends Omit<React.HTMLAttributes<HTMLDi
      * @default false
      */
     isLoadingMore?: boolean;
+    /**
+     * The height of the popup menu content
+     */
+    height?: ResponsiveType<number | string>;
+    /**
+     * The min height of the popup menu content
+     */
+    minHeight?: ResponsiveType<number | string>;
+    /**
+     * The max height of the popup menu content
+     */
+    maxHeight?: ResponsiveType<number | string>;
 }
 
 export declare type PopUpMenuSelectionType = string | string[] | undefined;
 
-export declare const ProgressIndicator: ({ value, indeterminate, variant, }: ProgressIndicatorProps) => JSX.Element;
+export declare const ProgressIndicator: ({ value, indeterminate, variant, size, foregroundColor, backgroundColor, }: ProgressIndicatorProps) => JSX.Element;
 
 export declare interface ProgressIndicatorProps {
     /**
@@ -1989,6 +2396,19 @@ export declare interface ProgressIndicatorProps {
      * @default 'linear'
      */
     variant?: 'linear' | 'circular';
+    /**
+     * The size of the circular progress indicator. Only applies to the circular variant.
+     * @default 'md'
+     */
+    size?: 'sm' | 'md';
+    /**
+     * Custom color for the progress fill (foreground). Accepts any valid CSS color value.
+     */
+    foregroundColor?: BackgroundColors;
+    /**
+     * Custom color for the progress track (background).
+     */
+    backgroundColor?: BackgroundColors;
 }
 
 export declare const RadioButton: React.FC<RadioButtonProps>;
@@ -2409,21 +2829,54 @@ export declare type SheetProps = UnionPlacement & {
     showBackArrow?: boolean;
 };
 
-export declare const SideNavigation: <T extends React.ElementType = "a">({ menuItems, utilityItems, open, activeItem, onToggleOpen, onItemClick, linkComponent: LinkComponent, }: SideNavigationProps<T>) => JSX.Element;
+export declare const SideNavigation: <T extends React.ElementType = "a">({ menuItems, utilityItems, midSections, userArea, hideUserAreaInMobile, logo, open, variant, activeItem, onToggleOpen, onItemClick, linkComponent: LinkComponent, }: SideNavigationProps<T>) => JSX.Element;
 
 export declare type SideNavigationProps<T extends React.ElementType = 'a'> = {
     /**
-     * The variant of the component
+     * Whether the navigation is expanded
      */
     open?: boolean;
+    /**
+     * The visual variant of the navigation
+     * @default 'default'
+     */
+    variant?: ListMenuVariant;
+    /**
+     * Logo displayed in the top area (compact variant only).
+     * Shows `icon` when collapsed, `icon + name` when expanded.
+     * Both have zvoove defaults if omitted.
+     */
+    logo?: {
+        /**
+         * Small logo icon shown when the sidebar is collapsed.
+         */
+        icon?: ReactNode;
+        /**
+         * Full logo name shown next to the icon when expanded.
+         */
+        name?: ReactNode;
+    };
     /**
      * The list of menu items
      */
-    menuItems: MenuItem<T>[];
+    menuItems: ListMenuItem<T>[];
     /**
      * The list of utility items to stay at the bottom of the menu
      */
-    utilityItems?: MenuItem<T>[];
+    utilityItems?: ListMenuItem<T>[];
+    /**
+     * Additional sections rendered between menu items and utility items.
+     */
+    midSections?: MidSection<T>[];
+    /**
+     * User area rendered at the bottom of the navigation
+     */
+    userArea?: UserAreaProps;
+    /**
+     * Hide the user area on mobile (useful when it's shown elsewhere, e.g. in a top bar).
+     * @default true
+     */
+    hideUserAreaInMobile?: boolean;
     /**
      * The active item must match the id of the menu item
      */
@@ -2439,9 +2892,14 @@ export declare type SideNavigationProps<T extends React.ElementType = 'a'> = {
     /**
      * The callback to handle the item click
      */
-    onItemClick?: (item: MenuItem) => void;
+    onItemClick?: (item: ListMenuItem) => void;
 };
 
+/**
+ * @deprecated Use `ListMenuVariant` instead
+ */
+export declare type SideNavigationVariant = ListMenuVariant;
+
 declare type SideVariant = 'Top' | 'Bottom' | 'Left' | 'Right';
 
 export declare type SimpleResponsiveStyles<Attr extends string> = {
@@ -2935,6 +3393,16 @@ export declare interface TextareaProps extends Omit<React.TextareaHTMLAttributes
      * The maximum length of the textarea.
      */
     maxLength?: number;
+    /**
+     * The border radius of the textarea.
+     * @default 'sm'
+     */
+    borderRadius?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
+    /**
+     * Content rendered above the textarea input, separated by a subtle border.
+     * Use to display contextual items such as attached files (e.g. `<Chip type="input" />`).
+     */
+    header?: React.ReactNode;
     /**
      * The actions to display below the textarea.
      */
@@ -3719,6 +4187,56 @@ export declare interface UseBreakpointReturn {
 
 export declare const useClickOutside: <T extends Node = HTMLElement>(refs: RefType<T> | RefType<T>[] | RefType<Node>[], callback: () => void, isOpen?: boolean) => void;
 
+export declare const UserArea: ForwardRefExoticComponent<UserAreaProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface UserAreaProps {
+    /**
+     * The user's display name
+     */
+    name: string;
+    /**
+     * Optional subtitle (e.g. role, company)
+     */
+    subtitle?: string;
+    /**
+     * The avatar of the user (see AvatarProps)
+     */
+    avatar: AvatarProps;
+    /**
+     * Whether to display in compact mode (small avatar)
+     * @default false
+     */
+    compact?: boolean;
+    /**
+     * Whether to show the user info text (name and subtitle)
+     * @default true
+     */
+    showInfo?: boolean;
+    /**
+     * Position of the info text relative to the avatar
+     * @default 'right'
+     */
+    infoPosition?: 'left' | 'right';
+    /**
+     * Menu items displayed in a PopUpMenu when the user area is clicked
+     */
+    menuItems?: PopUpMenuItem[];
+    /**
+     * Callback when a menu item is clicked
+     */
+    onItemClick?: (item: PopUpMenuItem) => void;
+    /**
+     * The max height of the popup menu
+     * @default '80dvh'
+     */
+    menuMaxHeight?: ResponsiveType<number | string>;
+    /**
+     * The placement of the popup menu
+     * @default 'top-left'
+     */
+    menuPlacement?: ResponsiveType<PopUpMenuPlacement>;
+}
+
 export declare const useSheetAnimation: (open: boolean) => {
     mounted: boolean;
     show: boolean;
@@ -3882,4 +4400,37 @@ export declare interface ValidationEvent {
 
 export declare type Viewport = keyof typeof BREAKPOINTS;
 
+declare interface ZvoooveLogoProps {
+    size?: number;
+    color?: string;
+}
+
+export declare const ZvooveBrand: {
+    ({ hideIcon, hideName, iconSize, nameHeight, }: ZvooveBrandProps): JSX.Element;
+    displayName: string;
+};
+
+export declare interface ZvooveBrandProps {
+    /**
+     * Hide the icon (logomark).
+     * @default false
+     */
+    hideIcon?: boolean;
+    /**
+     * Hide the name (wordmark).
+     * @default false
+     */
+    hideName?: boolean;
+    /**
+     * Size of the icon in pixels.
+     * @default 22
+     */
+    iconSize?: number;
+    /**
+     * Height of the name in pixels.
+     * @default 12
+     */
+    nameHeight?: number;
+}
+
 export { }