@zvoove/unity-ui 2.23.1 → 2.25.0

package/dist/unity-ui.d.ts

@@ -1,6 +1,7 @@
 import { ChangeEventHandler } from 'react';
 import { default as default_2 } from 'react';
 import { Dispatch } from 'react';
+import { ElementType } from 'react';
 import { ForwardedRef } from 'react';
 import { ForwardRefExoticComponent } from 'react';
 import { Icon as Icon_2 } from '@phosphor-icons/react';
@@ -179,7 +180,7 @@ declare type AvatarSize = (typeof AVATAR_SIZES)[keyof typeof AVATAR_SIZES];
 
 declare type AxisVariant = 'X' | 'Y';
 
-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 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' | 'container-neutral' | 'container-neutral-hover';
 
 export declare const Badge: ({ children, variant, content, dot, }: BadgeProps) => JSX.Element;
 
@@ -788,6 +789,7 @@ export declare const commonIconsMap: {
     readonly robot: Icon_2;
     readonly save: Icon_2;
     readonly search: Icon_2;
+    readonly 'search-plus': Icon_2;
     readonly 'send-message': Icon_2;
     readonly settings: Icon_2;
     readonly 'setup-time': Icon_2;
@@ -812,6 +814,7 @@ export declare const commonIconsMap: {
     readonly 'text-align-left': Icon_2;
     readonly 'text-align-right': Icon_2;
     readonly 'text-t': Icon_2;
+    readonly ticket: Icon_2;
     readonly notches: Icon_2;
     readonly time: Icon_2;
     readonly timer: Icon_2;
@@ -1393,7 +1396,7 @@ export declare interface FloatSearchTranslations {
     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 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' | 'on-container-neutral';
 
 export declare const FormLabel: ({ value, required, htmlFor, ...props }: FormLabelProps) => JSX.Element;
 
@@ -1708,6 +1711,7 @@ declare const iconMap: {
     readonly robot: Icon_2;
     readonly save: Icon_2;
     readonly search: Icon_2;
+    readonly 'search-plus': Icon_2;
     readonly 'send-message': Icon_2;
     readonly settings: Icon_2;
     readonly 'setup-time': Icon_2;
@@ -1732,6 +1736,7 @@ declare const iconMap: {
     readonly 'text-align-left': Icon_2;
     readonly 'text-align-right': Icon_2;
     readonly 'text-t': Icon_2;
+    readonly ticket: Icon_2;
     readonly notches: Icon_2;
     readonly time: Icon_2;
     readonly timer: Icon_2;
@@ -1853,6 +1858,57 @@ declare const iconTypes: {
     readonly gray: "gray";
 };
 
+export declare const ImageVisualizer: {
+    ({ src, alt, width, height, maxWidth, maxHeight, minWidth, minHeight, borderRadius, objectFit, }: ImageVisualizerProps): JSX.Element;
+    displayName: string;
+};
+
+export declare interface ImageVisualizerProps {
+    /**
+     * The source URL of the image.
+     */
+    src: string;
+    /**
+     * The alt text of the image.
+     * @default ''
+     */
+    alt?: string;
+    /**
+     * The width of the image container.
+     */
+    width?: ResponsiveType<number | string>;
+    /**
+     * The height of the image container.
+     */
+    height?: ResponsiveType<number | string>;
+    /**
+     * The minimum width of the image container.
+     */
+    minWidth?: ResponsiveType<number | string>;
+    /**
+     * The minimum height of the image container.
+     */
+    minHeight?: ResponsiveType<number | string>;
+    /**
+     * The maximum width of the image container.
+     */
+    maxWidth?: ResponsiveType<number | string>;
+    /**
+     * The maximum height of the image container.
+     */
+    maxHeight?: ResponsiveType<number | string>;
+    /**
+     * The border radius of the image container.
+     * @default 'sm'
+     */
+    borderRadius?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
+    /**
+     * The CSS object-fit of the image inside the container.
+     * @default 'cover'
+     */
+    objectFit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
+}
+
 export declare const InfoBox: {
     ({ message, variant, icon, elevated, }: InfoBoxProps): JSX.Element;
     displayName: string;
@@ -1881,6 +1937,18 @@ export declare interface InfoBoxProps {
 
 export declare type InfoBoxVariant = 'default' | 'positive' | 'warning' | 'error' | 'subtle' | 'neutral' | 'outlined';
 
+/**
+ * Detects **sectioned** `items` passed to `ListMenu`.
+ *
+ * **Sectioned** when the array is non-empty and the first entry looks like
+ * `{ title?, items: ListMenuItem[] }`: it has an `items` array and does **not**
+ * have a top-level `label` (every `ListMenuItem` has `label`). Any section may omit
+ * `title` (e.g. the first group) — no header row is rendered.
+ *
+ * **Flat** when empty `[]` or when entries are normal rows. Do not mix shapes in one array.
+ */
+export declare function isListMenuSections<T extends ElementType = 'a'>(items: ListMenuItem<T>[] | ListMenuSection<T>[]): items is ListMenuSection<T>[];
+
 export declare type JustifyContent = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
 
 declare type LabelStates = {
@@ -1924,9 +1992,10 @@ export declare type ListMenuItem<T extends React.ElementType = 'a'> = {
 
 export declare type ListMenuProps<T extends React.ElementType = 'a'> = {
     /**
-     * The list of menu items
+     * Either a flat list of menu items (default) **or** an array of sections
+     * `{ title?, items }[]`. The two shapes are mutually exclusive — use one or the other.
      */
-    items: ListMenuItem<T>[];
+    items: ListMenuItem<T>[] | ListMenuSection<T>[];
     /**
      * The active item must match the id of the menu item
      */
@@ -1952,6 +2021,21 @@ export declare type ListMenuProps<T extends React.ElementType = 'a'> = {
     onItemClick?: (item: ListMenuItem<T>) => void;
 };
 
+/**
+ * One titled group of rows inside a sectioned `ListMenu`. Do not mix with flat
+ * `ListMenuItem[]` in the same `items` array.
+ */
+export declare type ListMenuSection<T extends React.ElementType = 'a'> = {
+    /**
+     * Optional section header (uppercase label styling; omitted when missing, empty, or whitespace-only).
+     */
+    title?: string;
+    /**
+     * Rows in this section; same shape as flat `ListMenu` items.
+     */
+    items: ListMenuItem<T>[];
+};
+
 export declare type ListMenuVariant = 'default' | 'compact';
 
 export declare type Margin = SpacingKeys | {
@@ -2034,7 +2118,11 @@ export declare interface MessageActionsProps {
 
 export declare type MessageActionsVariant = 'sender' | 'receiver';
 
-export declare type MidSection<T extends React.ElementType = 'a'> = {
+/**
+ * One titled block of mid-section rows. Items are always rendered with **compact** `ListMenu` density;
+ * this type only describes the data shape (same as root `midSections` on `SideNavigation`).
+ */
+export declare type MidSection<T extends ElementType = 'a'> = {
     /**
      * The title of the section
      */
@@ -2059,12 +2147,48 @@ export declare type MidSection<T extends React.ElementType = 'a'> = {
      */
     highlight?: boolean;
     /**
-     * When set, the section collapses into this icon when the menu is closed.
+     * When set, the section collapses into this icon when the menu is closed (desktop only).
      * On hover, a PopUpMenu opens revealing the section items.
      */
     replaceWithIconOnClose?: CommonIconNames;
 };
 
+export declare const MidSectionMenus: {
+    <T extends ElementType = "a">({ sections, open, variant, activeItem, linkComponent: LinkComponent, onItemClick, }: MidSectionMenusProps<T>): JSX.Element | null;
+    displayName: string;
+};
+
+export declare type MidSectionMenusProps<T extends ElementType = 'a'> = {
+    /**
+     * Section definitions (same shape as `SideNavigation` `midSections`).
+     */
+    sections: MidSection<T>[];
+    /**
+     * Whether the parent navigation is expanded (labels visible).
+     * @default true
+     */
+    open?: boolean;
+    /**
+     * Sidebar shell width mode: must match the parent `SideNavigation` `variant` so open/closed width
+     * transitions on the section wrappers stay aligned (`default` vs `compact` rail widths).
+     * Does **not** change list row density — inner `ListMenu` instances are always `compact`.
+     * @default 'default'
+     */
+    variant?: ListMenuVariant;
+    /**
+     * Active item id for `ListMenu` highlighting.
+     */
+    activeItem?: string;
+    /**
+     * Link element for menu rows.
+     */
+    linkComponent?: T | 'a';
+    /**
+     * Called when a row is activated (same contract as `ListMenu` / `SideNavigation` root lists).
+     */
+    onItemClick?: (item: ListMenuItem<T>) => void;
+};
+
 declare type NonNullable_2<T> = Exclude<T, null | undefined>;
 export { NonNullable_2 as NonNullable }
 
@@ -2829,7 +2953,7 @@ export declare type SheetProps = UnionPlacement & {
     showBackArrow?: boolean;
 };
 
-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 const SideNavigation: <T extends ElementType = "a">({ menuItems, utilityItems, midSections, subMenus, userArea, hideUserAreaInMobile, hideToggleButton, addBorderToToggleButton, logo, open, variant, activeItem, onToggleOpen, onActiveItemChange, onItemClick, linkComponent: LinkComponent, }: SideNavigationProps<T>) => JSX.Element;
 
 export declare type SideNavigationProps<T extends React.ElementType = 'a'> = {
     /**
@@ -2865,9 +2989,15 @@ export declare type SideNavigationProps<T extends React.ElementType = 'a'> = {
      */
     utilityItems?: ListMenuItem<T>[];
     /**
-     * Additional sections rendered between menu items and utility items.
+     * Sections between the root main list and utility items, with collapse/expand behavior when the sidebar
+     * closes (see `replaceWithIconOnClose`). Only the **root** column uses this prop; any lists inside a
+     * slide-in panel belong in that layer’s `content`.
      */
     midSections?: MidSection<T>[];
+    /**
+     * Slide-in panels: `parentId` matches a root `menuItems` id; `content` is the custom body (back row is built-in).
+     */
+    subMenus?: SubMenuLayer[];
     /**
      * User area rendered at the bottom of the navigation
      */
@@ -2878,7 +3008,21 @@ export declare type SideNavigationProps<T extends React.ElementType = 'a'> = {
      */
     hideUserAreaInMobile?: boolean;
     /**
-     * The active item must match the id of the menu item
+     * When `true`, the built-in expand/collapse control in the header row is not rendered.
+     * Use a `utilityItems` entry with `onClick` (and controlled `open` / `onToggleOpen`) instead.
+     * @default false
+     */
+    hideToggleButton?: boolean;
+    /**
+     * When `true`, a border top, right and bottom are added to the toggle button. <br />
+     * This is useful when the SideNavigation is used next to a Card with outlined variant as a content container.
+     * @default false
+     */
+    addBorderToToggleButton?: boolean;
+    /**
+     * Active id for **root** `menuItems` / `utilityItems`. To open a sub panel from the shell, pass either the
+     * layer’s `parentId` (e.g. `'zain'`) or an opaque dotted string `'<parentId>.<segment>'` where only the
+     * part before the first `.` is read to choose the panel; the rest is for your app / `content` only.
      */
     activeItem?: string;
     /**
@@ -2889,6 +3033,12 @@ export declare type SideNavigationProps<T extends React.ElementType = 'a'> = {
      * The callback to handle the open/close state
      */
     onToggleOpen?: (open: boolean) => void;
+    /**
+     * Fired after a root `menuItems` / `utilityItems` click with the suggested `activeItem` id, or with the
+     * sub-panel `parentId` when opening a layer. Not called for `__back__` or `target="_blank"`. Clicks inside
+     * `subMenus[].content` are not observed here.
+     */
+    onActiveItemChange?: (activeItem: string) => void;
     /**
      * The callback to handle the item click
      */
@@ -3141,6 +3291,27 @@ export declare interface StackProps extends React.HTMLAttributes<HTMLDivElement>
     maxWidth?: ResponsiveType<number | string>;
 }
 
+/**
+ * Slide-in panel for a root `menuItems` entry. The shell renders only the back row and spacer; pass any
+ * content (e.g. one or more `ListMenu`s from a micro-frontend) as `content`. Selection and `activeItem`
+ * for that UI live outside `SideNavigation`.
+ */
+export declare type SubMenuLayer = {
+    /**
+     * Must match the `id` of the root `menuItems` entry that opens this panel.
+     */
+    parentId: string;
+    /**
+     * Custom body below the back row (often `ListMenu` or composed layout from a remote module).
+     */
+    content: ReactNode;
+    /**
+     * Label for the control that returns to the main menu.
+     * @default 'Hauptmenü'
+     */
+    backLabel?: string;
+};
+
 export declare const Switch: default_2.ForwardRefExoticComponent<SwitchProps & default_2.RefAttributes<HTMLInputElement>>;
 
 export declare interface SwitchProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {