@zvoove/unity-ui 2.29.1 → 2.32.1

package/dist/src/components/ImageVisualizer/ImageVisualizer.types.d.ts

@@ -0,0 +1,46 @@
+import { ResponsiveType } from '../../types';
+export 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';
+}

package/dist/src/components/ImageVisualizer/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ImageVisualizer } from './ImageVisualizer';
+export type { ImageVisualizerProps } from './ImageVisualizer.types';

package/dist/src/components/InfoBox/InfoBox.constants.d.ts

@@ -0,0 +1,5 @@
+import { BackgroundColors, ForegroundColors, IconProps } from '../../index.ts';
+import { InfoBoxVariant } from './InfoBox.types';
+export declare const iconDictionary: Record<InfoBoxVariant, Omit<IconProps, 'size' | 'color'>>;
+export declare const cardColorDictionary: Record<InfoBoxVariant, BackgroundColors>;
+export declare const foregroundColorDictionary: Record<InfoBoxVariant, ForegroundColors>;

package/dist/src/components/InfoBox/InfoBox.d.ts

@@ -0,0 +1,6 @@
+import { InfoBoxProps } from './InfoBox.types';
+declare const InfoBox: {
+    ({ message, variant, icon, elevated, }: InfoBoxProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default InfoBox;

package/dist/src/components/InfoBox/InfoBox.types.d.ts

@@ -0,0 +1,22 @@
+import { CommonIconNames, IconProps } from '../../index.ts';
+export type InfoBoxVariant = 'default' | 'positive' | 'warning' | 'error' | 'subtle' | 'neutral' | 'outlined';
+export interface InfoBoxProps {
+    /**
+     * The message to display in the InfoBox.
+     */
+    message: string;
+    /**
+     * The semantic variant of the InfoBox
+     * @default 'default'
+     */
+    variant?: InfoBoxVariant;
+    /**
+     * Icon to display in the InfoBox. If not provided, uses the default icon for the variant.
+     */
+    icon?: CommonIconNames | Omit<IconProps, 'size' | 'color'>;
+    /**
+     * Whether to elevate the InfoBox.
+     * @default true
+     */
+    elevated?: boolean;
+}

package/dist/src/components/InfoBox/index.d.ts

@@ -0,0 +1,2 @@
+export { default as InfoBox } from './InfoBox';
+export type { InfoBoxProps, InfoBoxVariant } from './InfoBox.types';

package/dist/src/components/List/List.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+import { ListProps } from './List.types';
+declare const List: {
+    <T extends React.ElementType = "div">({ items, activeItemId, showDividers, linkComponent: LinkComponent, spread, height, width, minHeight, maxHeight, minWidth, maxWidth, }: ListProps<T>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default List;

package/dist/src/components/List/List.styled.d.ts

@@ -0,0 +1,103 @@
+export declare const listStyles: import('tailwind-variants').TVReturnType<{
+    active: {
+        true: {
+            itemWrapper: string[];
+        };
+        false: {
+            itemWrapper: string[];
+        };
+    };
+    spread: {
+        top: {
+            list: string[];
+        };
+        bottom: {
+            list: string[];
+        };
+        center: {
+            list: string[];
+        };
+        between: {
+            list: string[];
+            itemWrapper: string[];
+            item: string[];
+        };
+        evenly: {
+            list: string[];
+            itemWrapper: string[];
+            item: string[];
+        };
+    };
+}, {
+    list: string[];
+    itemWrapper: string[];
+    item: string[];
+}, undefined, {
+    active: {
+        true: {
+            itemWrapper: string[];
+        };
+        false: {
+            itemWrapper: string[];
+        };
+    };
+    spread: {
+        top: {
+            list: string[];
+        };
+        bottom: {
+            list: string[];
+        };
+        center: {
+            list: string[];
+        };
+        between: {
+            list: string[];
+            itemWrapper: string[];
+            item: string[];
+        };
+        evenly: {
+            list: string[];
+            itemWrapper: string[];
+            item: string[];
+        };
+    };
+}, {
+    list: string[];
+    itemWrapper: string[];
+    item: string[];
+}, import('tailwind-variants').TVReturnType<{
+    active: {
+        true: {
+            itemWrapper: string[];
+        };
+        false: {
+            itemWrapper: string[];
+        };
+    };
+    spread: {
+        top: {
+            list: string[];
+        };
+        bottom: {
+            list: string[];
+        };
+        center: {
+            list: string[];
+        };
+        between: {
+            list: string[];
+            itemWrapper: string[];
+            item: string[];
+        };
+        evenly: {
+            list: string[];
+            itemWrapper: string[];
+            item: string[];
+        };
+    };
+}, {
+    list: string[];
+    itemWrapper: string[];
+    item: string[];
+}, undefined, unknown, unknown, undefined>>;

package/dist/src/components/List/List.types.d.ts

@@ -0,0 +1,77 @@
+import { default as React, ReactNode } from 'react';
+import { ResponsiveType } from '../../types';
+export type ListSpread = 'top' | 'bottom' | 'center' | 'between' | 'evenly';
+export type ListItem<T extends React.ElementType = 'div'> = {
+    /**
+     * The content of the list item.
+     */
+    content: ReactNode;
+    /**
+     * The id of the list item. This will be use as the key for the list item.
+     */
+    id: string;
+} & Omit<React.ComponentPropsWithoutRef<T>, 'children' | 'className' | 'content' | 'id'>;
+export interface ListProps<T extends React.ElementType = 'div'> {
+    /**
+     * The items of the List.
+     */
+    items: ListItem<T>[];
+    /**
+     * The active item id of the List.
+     * If provided, the item will be highlighted.
+     */
+    activeItemId?: string;
+    /**
+     * Whether to show dividers between items.
+     * @default true
+     */
+    showDividers?: boolean;
+    /**
+     * The component to render for each list item.
+     * @default 'div'
+     */
+    linkComponent?: T | 'div';
+    /**
+     * Vertical distribution of the items inside the List's height.
+     * Requires a height larger than the items' total height to be visible.
+     *
+     * - `top` — items packed at the top (default).
+     * - `bottom` — items packed at the bottom.
+     * - `center` — items centered vertically.
+     * - `between` — equal space between items, none at the edges.
+     * - `evenly` — equal space around and between items.
+     *
+     * @default 'top'
+     */
+    spread?: ResponsiveType<ListSpread>;
+    /**
+     * The height of the list.
+     * @default 'auto'
+     */
+    height?: ResponsiveType<number | string>;
+    /**
+     * The width of the list.
+     * @default '100%'
+     */
+    width?: ResponsiveType<number | string>;
+    /**
+     * The min height of the list.
+     * @default 'auto'
+     */
+    minHeight?: ResponsiveType<number | string>;
+    /**
+     * The max height of the list.
+     * @default 'auto'
+     */
+    maxHeight?: ResponsiveType<number | string>;
+    /**
+     * The min width of the list.
+     * @default 'auto'
+     */
+    minWidth?: ResponsiveType<number | string>;
+    /**
+     * The max width of the list.
+     * @default 'auto'
+     */
+    maxWidth?: ResponsiveType<number | string>;
+}

package/dist/src/components/List/index.d.ts

@@ -0,0 +1,2 @@
+export { default as List } from './List';
+export type { ListItem, ListProps } from './List.types';

package/dist/src/components/ListMenu/ListMenu.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+import { ListMenuProps } from './ListMenu.types';
+declare const ListMenu: {
+    <T extends React.ElementType = "a">({ items, activeItem, open, variant, linkComponent: LinkComponent, onItemClick, }: ListMenuProps<T>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default ListMenu;

package/dist/src/components/ListMenu/ListMenu.styled.d.ts

@@ -0,0 +1,150 @@
+export declare const transition: string[];
+export declare const closedWidth = "w-[56px]";
+export declare const openWidth = "w-[220px]";
+export declare const openWidthMobilePadding = "w-[220px]";
+export declare const compactClosedWidth = "w-[34px]";
+export declare const compactOpenWidth = "w-[220px]";
+export declare const listStyles: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+/** Wraps one section (`title?` + `<ul>`) in sectioned mode; adds vertical gap after the first block. */
+export declare const listMenuSectionWrapStyles: import('tailwind-variants').TVReturnType<{
+    isFirst: {
+        true: never[];
+        false: string[];
+    };
+}, undefined, string[], {
+    isFirst: {
+        true: never[];
+        false: string[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    isFirst: {
+        true: never[];
+        false: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+/** Section header above a `<ul>` when `items` is sectioned; collapses when `open` is false. */
+export declare const listMenuSectionTitleStyles: import('tailwind-variants').TVReturnType<{
+    open: {
+        true: string[];
+        false: string[];
+    };
+}, undefined, string[], {
+    open: {
+        true: string[];
+        false: string[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    open: {
+        true: string[];
+        false: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const linkStyles: import('tailwind-variants').TVReturnType<{
+    active: {
+        true: string[];
+    };
+    open: {
+        true: never[];
+        false: string[];
+    };
+    variant: {
+        default: never[];
+        compact: string[];
+    };
+}, undefined, string[], {
+    active: {
+        true: string[];
+    };
+    open: {
+        true: never[];
+        false: string[];
+    };
+    variant: {
+        default: never[];
+        compact: string[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    active: {
+        true: string[];
+    };
+    open: {
+        true: never[];
+        false: string[];
+    };
+    variant: {
+        default: never[];
+        compact: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const linkLabelStyles: import('tailwind-variants').TVReturnType<{
+    open: {
+        true: string[];
+        false: string[];
+    };
+    variant: {
+        default: never[];
+        compact: never[];
+    };
+    hasIcon: {
+        true: never[];
+        false: string[];
+    };
+}, undefined, string[], {
+    open: {
+        true: string[];
+        false: string[];
+    };
+    variant: {
+        default: never[];
+        compact: never[];
+    };
+    hasIcon: {
+        true: never[];
+        false: string[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    open: {
+        true: string[];
+        false: string[];
+    };
+    variant: {
+        default: never[];
+        compact: never[];
+    };
+    hasIcon: {
+        true: never[];
+        false: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const customIconStyles: import('tailwind-variants').TVReturnType<{
+    variant: {
+        default: string[];
+        compact: string[];
+    };
+}, undefined, string[], {
+    variant: {
+        default: string[];
+        compact: string[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    variant: {
+        default: string[];
+        compact: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const endContentStyles: import('tailwind-variants').TVReturnType<{
+    visibility: {
+        always: string[];
+        hover: string[];
+    };
+}, undefined, string[], {
+    visibility: {
+        always: string[];
+        hover: string[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    visibility: {
+        always: string[];
+        hover: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;

package/dist/src/components/ListMenu/ListMenu.types.d.ts

@@ -0,0 +1,74 @@
+import { CommonIconNames, CustomCommonIconNames } from '../../index.ts';
+export type ListMenuVariant = 'default' | 'compact';
+export type ListMenuItem<T extends React.ElementType = 'a'> = {
+    /**
+     * The label of the menu item
+     */
+    label: string;
+    /**
+     * The id of the menu item
+     */
+    id: string;
+    /**
+     * The icon of the menu item
+     */
+    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'>;
+/**
+ * One titled group of rows inside a sectioned `ListMenu`. Do not mix with flat
+ * `ListMenuItem[]` in the same `items` array.
+ */
+export 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 type ListMenuProps<T extends React.ElementType = 'a'> = {
+    /**
+     * 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>[] | ListMenuSection<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;
+};

package/dist/src/components/ListMenu/ListMenu.utils.d.ts

@@ -0,0 +1,13 @@
+import { ElementType } from 'react';
+import { ListMenuItem, ListMenuSection } from './ListMenu.types';
+/**
+ * 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>[];

package/dist/src/components/ListMenu/index.d.ts

@@ -0,0 +1,3 @@
+export { default as ListMenu } from './ListMenu';
+export { isListMenuSections } from './ListMenu.utils';
+export type { ListMenuProps, ListMenuItem, ListMenuSection, ListMenuVariant, } from './ListMenu.types';

package/dist/src/components/MessageActions/MessageActions.d.ts

@@ -0,0 +1,3 @@
+import { MessageActionsProps } from './MessageActions.types';
+declare const MessageActions: import('react').ForwardRefExoticComponent<MessageActionsProps & import('react').RefAttributes<HTMLDivElement>>;
+export default MessageActions;

package/dist/src/components/MessageActions/MessageActions.styled.d.ts

@@ -0,0 +1,56 @@
+export declare const messageActionsStyles: import('tailwind-variants').TVReturnType<{
+    variant: {
+        sender: string[];
+        receiver: string[];
+    };
+}, undefined, string[], {
+    variant: {
+        sender: string[];
+        receiver: string[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    variant: {
+        sender: string[];
+        receiver: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const messageActionsGroupStyles: import('tailwind-variants').TVReturnType<{
+    variant: {
+        sender: string[];
+        receiver: string[];
+    };
+}, undefined, string[], {
+    variant: {
+        sender: string[];
+        receiver: string[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    variant: {
+        sender: string[];
+        receiver: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const messageActionsButtonStyles: import('tailwind-variants').TVReturnType<{
+    active: {
+        true: string[];
+    };
+    animated: {
+        true: string[];
+    };
+}, undefined, string[], {
+    active: {
+        true: string[];
+    };
+    animated: {
+        true: string[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    active: {
+        true: string[];
+    };
+    animated: {
+        true: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const messageActionsTimestampStyles: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const messageActionsFeedbackStyles: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;

package/dist/src/components/MessageActions/MessageActions.types.d.ts

@@ -0,0 +1,81 @@
+import { MouseEvent } from 'react';
+import { CommonIconNames, PopUpMenuItem } from '../../index.ts';
+export type MessageActionsVariant = 'sender' | 'receiver';
+export type FeedbackType = 'positive' | 'negative' | null;
+export interface ActionConfirmation {
+    /**
+     * Icon to swap to when confirmed (e.g. `'check'` for a copy action).
+     * When omitted, the original icon is kept and shown as filled instead.
+     */
+    icon?: CommonIconNames;
+    /**
+     * Confirmation text shown next to the action group (e.g. "Copied").
+     */
+    text?: string;
+    /**
+     * Duration in ms before the confirmation auto-reverts.
+     * Defaults to `3000`. Set to `0` for toggle actions that stay until toggled off.
+     * @default 3000
+     */
+    duration?: number;
+}
+export interface MessageAction {
+    /**
+     * The icon to display for this action.
+     */
+    icon: CommonIconNames;
+    /**
+     * Accessible label for the action (used as tooltip and aria-label).
+     */
+    label: string;
+    /**
+     * Callback fired when the action button is clicked.
+     */
+    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Whether this action is currently in an active/toggled state.
+     * @default false
+     */
+    active?: boolean;
+    /**
+     * Feedback group for mutual exclusion (e.g. thumbs up/down).
+     * Actions sharing the same group are mutually exclusive — activating one deactivates the other.
+     */
+    feedbackType?: 'positive' | 'negative';
+    /**
+     * Confirmation behavior on click — animation, icon swap, and text.
+     * Provides a consistent pattern for copy ("Copied"), feedback ("Thanks for your feedback"), etc.
+     */
+    confirmation?: ActionConfirmation;
+}
+export interface MessageActionsProps {
+    /**
+     * The layout variant matching the parent ChatBubble alignment.
+     * - `receiver`: actions on the left, timestamp on the right
+     * - `sender`: timestamp on the left, actions on the right
+     * @default 'receiver'
+     */
+    variant?: MessageActionsVariant;
+    /**
+     * The timestamp text to display (e.g. "10:01").
+     */
+    timestamp?: string;
+    /**
+     * The action buttons to display.
+     * Defaults to copy, thumb-up, thumb-down, and more-horizontal.
+     */
+    actions?: MessageAction[];
+    /**
+     * Menu items shown in the "More" action popup menu.
+     * When provided, the last default action (more-horizontal) opens a PopUpMenu.
+     */
+    menuItems?: PopUpMenuItem[];
+    /**
+     * Callback fired when a feedback action (thumbs up/down) is selected.
+     */
+    onFeedback?: (feedback: FeedbackType) => void;
+    /**
+     * Additional CSS class name.
+     */
+    className?: string;
+}

package/dist/src/components/MessageActions/index.d.ts

@@ -0,0 +1,2 @@
+export { default as MessageActions } from './MessageActions';
+export type { ActionConfirmation, FeedbackType, MessageAction, MessageActionsProps, MessageActionsVariant, } from './MessageActions.types';