@zvoove/unity-ui 2.45.1 → 2.47.0

package/dist/unity-ui.d.ts

@@ -206,17 +206,18 @@ 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' | 'warning' | 'dark-warning' | 'warning-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' | 'code-surface' | 'code-surface-variant';
 
-export declare const Badge: ({ children, variant, content, dot, }: BadgeProps) => JSX.Element;
+export declare const Badge: ({ children, variant, content, dot, inline, visible, }: BadgeProps) => JSX.Element;
 
 export declare interface BadgeProps {
     /**
-     * The children of the button.
+     * The element the badge is attached to. Not required when `inline` is
+     * true, since the badge can then render entirely on its own.
      */
-    children: ReactNode;
+    children?: ReactNode;
     /**
      * The variant of the component
      */
-    variant?: 'primary' | 'secondary';
+    variant?: 'primary' | 'secondary' | 'negative';
     /**
      * The content of the badge. If undefined, the badge will be hidden.
      */
@@ -225,6 +226,21 @@ export declare interface BadgeProps {
      * The dot prop changes a badge into a small dot
      */
     dot?: boolean;
+    /**
+     * Render the badge in normal document flow next to `children`, instead of
+     * absolutely positioned over its top-right corner. Use this for a
+     * standalone count that isn't attached to an icon or avatar — for example,
+     * as trailing content next to a navigation item's label.
+     * @default false
+     */
+    inline?: boolean;
+    /**
+     * Whether the badge pill is shown. Unlike omitting `content`, the pill
+     * stays mounted and fades out via opacity instead of disappearing
+     * instantly — use this when toggling visibility should animate.
+     * @default true
+     */
+    visible?: boolean;
 }
 
 export declare const Breadcrumbs: <T extends default_2.ElementType = "a">({ items, linkComponent: LinkComponent, homeIcon, }: BreadcrumbsProps<T>) => JSX.Element;
@@ -263,7 +279,7 @@ declare const BREAKPOINTS: {
 };
 
 export declare const Button: {
-    <T extends React.ElementType = "button">({ children, variant, hideLabel, as, icon, linkComponent, size, isLoading, ...props }: ButtonProps<T> & {
+    <T extends React.ElementType = "button">({ children, variant, hideLabel, as, icon, linkComponent, size, isLoading, contrast, ...props }: ButtonProps<T> & {
         ref?: ForwardedRef<T>;
     }): JSX.Element;
     displayName: string;
@@ -295,7 +311,18 @@ export declare type ButtonProps<T extends React.ElementType = 'button'> = UnionA
      * The variant is used
      * to change the visual communication.
      */
-    variant?: ResponsiveType<'text' | 'textSecondary' | 'filled' | 'outlined' | 'elevated' | 'tonal' | 'linkPrimary' | 'linkSecondary' | 'positive' | 'negative'>;
+    variant?: ResponsiveType<'text' | 'textSecondary' | 'filled' | 'outlined' | 'elevated' | 'tonal' | 'linkPrimary' | 'linkSecondary' | 'positive' | 'negative' | 'warning' | 'neutral' | 'white' | 'subtle' | 'outlinedPositive' | 'outlinedNegative' | 'outlinedWarning' | 'outlinedNeutral' | 'outlinedSubtle' | 'linkPositive' | 'linkNegative' | 'linkWarning' | 'linkWhite' | 'textPositive' | 'textNegative' | 'textWarning' | 'textWhite' | 'textSubtle'>;
+    /**
+     * Uses the container-tier color of the status `variant` instead of the
+     * vivid one — lighter in light mode, darker in dark mode. Use this to keep
+     * the button legible when it sits on a background from the same color
+     * family (e.g. an action button inside a matching colored `InfoBox`). <br />
+     * Only affects the status variants (`positive`, `negative`, `warning`,
+     * `neutral`, `subtle` and their `outlined*`/`link*`/`text*` counterparts) —
+     * ignored otherwise.
+     * @default false
+     */
+    contrast?: boolean;
     /**
      * The component to render the button as. <br />
      * This is useful if you want to use a different component for the button like a `Link` component from **Next.js** or **React Router**.
@@ -1289,6 +1316,65 @@ export declare interface DividerProps {
     color?: BackgroundColors;
 }
 
+export declare const EmptyState: {
+    ({ type, title, supportingText, icon, actions, }: EmptyStateProps): JSX.Element;
+    displayName: string;
+};
+
+export declare interface EmptyStateAction {
+    /**
+     * The label shown in the action button.
+     */
+    label: string;
+    /**
+     * The callback fired when the action button is clicked.
+     */
+    onClick?: () => void;
+    /**
+     * The Button visual variant.
+     * @default 'outlined' for all actions except the last, which defaults to 'filled'
+     */
+    variant?: EmptyStateActionVariant;
+}
+
+export declare type EmptyStateActionVariant = NonNullable<ButtonProps['variant']>;
+
+export declare interface EmptyStateProps {
+    /**
+     * The content preset to display.
+     */
+    type: EmptyStateType;
+    /**
+     * The heading. Pass `false` to hide it, or a custom string/node to
+     * override the preset's default text.
+     * @default true (shows the preset's default title)
+     */
+    title?: ReactNode;
+    /**
+     * The supporting text. Pass `false` to hide it, or a custom string/node to
+     * override the preset's default text.
+     * @default true (shows the preset's default supporting text)
+     */
+    supportingText?: ReactNode;
+    /**
+     * The featured icon. Pass `false` to hide it, a semantic icon name to swap
+     * the glyph while keeping the preset's default color and size, or a
+     * partial `IconProps` object to override any combination of name, color,
+     * size, weight, or featured — any field left out falls back to the
+     * preset's default.
+     * @default true (shows the preset's default icon)
+     */
+    icon?: boolean | CommonIconNames | Partial<IconProps>;
+    /**
+     * The action buttons. Pass `false` to hide them, or an array of actions to
+     * fully replace the preset's default buttons, including click handlers.
+     * @default true (shows the preset's default actions)
+     */
+    actions?: boolean | EmptyStateAction[];
+}
+
+export declare type EmptyStateType = 'noResults' | 'noDataYet' | 'error' | 'noSelection' | 'locked';
+
 export declare const Expandable: {
     <T extends React.ElementType = "div">({ children, isOpen, as: Component, ...props }: ExpandableProps<T>): JSX.Element;
     displayName: string;
@@ -2249,7 +2335,7 @@ export declare interface ImageVisualizerProps {
 }
 
 export declare const InfoBox: {
-    ({ message, title, variant, icon, elevated, borderRadius, actions, showCloseButton, onClose, }: InfoBoxProps): JSX.Element;
+    ({ message, title, variant, icon, elevated, borderRadius, leftBorder, actions, showCloseButton, onClose, }: InfoBoxProps): JSX.Element;
     displayName: string;
 };
 
@@ -2299,9 +2385,15 @@ export declare interface InfoBoxProps {
     elevated?: boolean;
     /**
      * The border radius of the InfoBox.
-     * @default 'sm'
+     * @default 'rounded'
      */
-    borderRadius?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
+    borderRadius?: 'none' | 'rounded';
+    /**
+     * Whether to display a 4px left border. The border color follows the
+     * `variant`.
+     * @default false
+     */
+    leftBorder?: boolean;
     /**
      * Optional action buttons displayed beside the message when they fit in this
      * container, or on the next line when they do not.
@@ -2390,6 +2482,28 @@ export declare type ListMenuItem<T extends React.ElementType = 'a'> = {
      * @default 'always'
      */
     endContentVisibility?: 'always' | 'hover';
+    /**
+     * A count (or other short content) shown as a badge attached to this item.
+     * Renders inline next to the label when the menu is open, and relocates to
+     * overlay the item's icon when the menu is closed (icon-only rail). Has no
+     * effect if the item has no `icon` and the menu is closed.
+     */
+    badge?: React.ReactNode;
+    /**
+     * Background/foreground color of `badge`.
+     * @default 'negative'
+     */
+    badgeVariant?: BadgeProps['variant'];
+    /**
+     * Shows a small release/status tag next to this item's label (e.g.
+     * "Beta", "Alpha", "v1.2", "dev") — freely set its text and color via
+     * `label`/`color`/`variant`, the same options `Tag` itself accepts. When
+     * the menu is closed (icon-only rail), the same tag renders as a small
+     * overlay on the item's icon so its text stays visible instead of
+     * disappearing. If `badge` is also set, `badge` takes the icon-corner
+     * slot and the tag overlay is skipped — its label still shows when open.
+     */
+    tag?: ListMenuItemTag;
     /**
      * Renders a spacer instead of a menu item.
      * @default false
@@ -2397,6 +2511,12 @@ export declare type ListMenuItem<T extends React.ElementType = 'a'> = {
     isSpacer?: boolean;
 } & Omit<React.ComponentPropsWithoutRef<T>, 'children'>;
 
+/**
+ * Freely label and color a release/status tag on an item — same options as
+ * `Tag` itself (e.g. `{ label: 'v1.2', color: 'steel-blue' }`).
+ */
+declare type ListMenuItemTag = Pick<TagProps, 'label' | 'color' | 'variant'>;
+
 export declare type ListMenuProps<T extends React.ElementType = 'a'> = {
     /**
      * Either a flat list of menu items (default) **or** an array of sections
@@ -3231,12 +3351,18 @@ export declare interface ScrollableAreaProps {
     children: ReactNode;
     /**
      * Height of the scrollable area. When omitted, the area fills its parent
-     * (`size-full`, or `h-full` if only `width` is set).
+     * (`size-full`, or `h-full` if only `width` is set). If the parent has no
+     * definite height for that percentage to resolve against (e.g. inside a
+     * flex/grid layout), the rendered parent height is measured and applied
+     * directly instead.
      */
     height?: ResponsiveType<number | string>;
     /**
      * Width of the scrollable area. When omitted, the area fills its parent
-     * (`size-full`, or `w-full` if only `height` is set).
+     * (`size-full`, or `w-full` if only `height` is set). If the parent has no
+     * definite width for that percentage to resolve against (e.g. inside a
+     * flex/grid layout), the rendered parent width is measured and applied
+     * directly instead.
      */
     width?: ResponsiveType<number | string>;
     /**
@@ -4117,8 +4243,9 @@ export declare interface TableProps<T extends readonly TableColumnProps[] = read
      */
     footer?: React.ReactNode;
     /**
-     * The background color of the table header.
-     * @default false
+     * The background color of the table header, matching the background used
+     * by section rows.
+     * @default true
      */
     headerBackgroundColor?: boolean;
     /**
@@ -4273,7 +4400,14 @@ export declare type TabStepperItem<T extends React.ElementType = 'button'> = {
      * @default The item's position in the list
      */
     stepNumber?: number;
-} & Omit<React.ComponentPropsWithoutRef<T>, 'children' | 'id' | 'onClick' | 'title'>;
+    /**
+     * Whether the step is disabled. A disabled step can't be selected by click
+     * or keyboard and is skipped by arrow-key navigation. Use this to block
+     * upcoming steps until earlier ones are complete.
+     * @default false
+     */
+    disabled?: boolean;
+} & Omit<React.ComponentPropsWithoutRef<T>, 'children' | 'id' | 'onClick' | 'title' | 'disabled'>;
 
 export declare type TabStepperItemsAlignment = 'left' | 'center' | 'right' | 'spread';
 
@@ -4421,6 +4555,13 @@ export declare interface TextareaProps extends Omit<React.TextareaHTMLAttributes
      * The actions to display below the textarea.
      */
     actions?: React.ReactNode;
+    /**
+     * Shows a moving multi-color gradient border instead of the plain one, as
+     * an "AI is working" affordance (e.g. while a response is streaming into
+     * the field). Has no effect while `error` is true.
+     * @default false
+     */
+    aiActive?: boolean;
 }
 
 export declare const TextField: ForwardRefExoticComponent<TextFieldProps & RefAttributes<HTMLInputElement>>;
@@ -4502,7 +4643,7 @@ export declare interface TextFieldProps extends React.InputHTMLAttributes<HTMLIn
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
-export declare const Tooltip: ({ children, content, placement, disabled, }: TooltipProps) => JSX.Element;
+export declare const Tooltip: ({ children, content, placement, disabled, fitToContent, isOpen: isOpenProp, }: TooltipProps) => JSX.Element;
 
 export declare interface TooltipProps {
     /**
@@ -4517,12 +4658,23 @@ export declare interface TooltipProps {
      * The position of the tooltip relative to its trigger
      */
     placement?: 'top' | 'bottom' | 'left' | 'right';
+    /**
+     * Shrink the trigger wrapper to fit the trigger's own content, instead of
+     * stretching to fill its container's width. Enable this when the default
+     * full-width wrapper doesn't fit the surrounding layout (for example, a
+     * flex row where it shouldn't claim the whole row).
+     * @default false
+     */
+    fitToContent?: ResponsiveType<boolean>;
     /**
      * Whether the tooltip should be disabled
      */
     disabled?: boolean;
     /**
-     * Whether the tooltip should be open
+     * Controls the tooltip's visibility externally instead of the default
+     * hover behavior. When set (even to `false`), hover/mouse-leave no longer
+     * toggle the tooltip — the caller is fully responsible for its visibility.
+     * `disabled` still takes precedence and forces the tooltip closed.
      */
     isOpen?: boolean;
 }