@zvoove/unity-ui 2.27.0 → 2.29.0

package/dist/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, }: ListProps<T>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default List;

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

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

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

@@ -0,0 +1,32 @@
+import { default as React, ReactNode } from 'react';
+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';
+}

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

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

package/dist/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/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/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/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/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/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/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/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/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';

package/dist/components/MidSectionMenus/MidSectionMenus.d.ts

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

package/dist/components/MidSectionMenus/MidSectionMenus.styled.d.ts

@@ -0,0 +1,98 @@
+export declare const midSectionStyles: import('tailwind-variants').TVReturnType<{
+    open: {
+        true: string[];
+    };
+    variant: {
+        default: never[];
+        compact: string[];
+    };
+    hidden: {
+        true: string[];
+    };
+}, undefined, string[], {
+    open: {
+        true: string[];
+    };
+    variant: {
+        default: never[];
+        compact: string[];
+    };
+    hidden: {
+        true: string[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    open: {
+        true: string[];
+    };
+    variant: {
+        default: never[];
+        compact: string[];
+    };
+    hidden: {
+        true: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const midSectionHighlightStyles: import('tailwind-variants').TVReturnType<{
+    highlight: {
+        true: string[];
+        false: never[];
+    };
+}, undefined, never[], {
+    highlight: {
+        true: string[];
+        false: never[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    highlight: {
+        true: string[];
+        false: never[];
+    };
+}, undefined, never[], unknown, unknown, undefined>>;
+/**
+ * Icon replacements: fade in after content fades out (delayed),
+ * fade out immediately when opening.
+ */
+export declare const midSectionIconStyles: import('tailwind-variants').TVReturnType<{
+    visible: {
+        true: string[];
+        false: string[];
+    };
+    iconsMounted: {
+        true: never[];
+        false: string[];
+    };
+}, undefined, string[], {
+    visible: {
+        true: string[];
+        false: string[];
+    };
+    iconsMounted: {
+        true: never[];
+        false: string[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    visible: {
+        true: string[];
+        false: string[];
+    };
+    iconsMounted: {
+        true: never[];
+        false: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const midSectionContentStyles: import('tailwind-variants').TVReturnType<{
+    visible: {
+        true: string[];
+        false: string[];
+    };
+}, undefined, string[], {
+    visible: {
+        true: string[];
+        false: string[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    visible: {
+        true: string[];
+        false: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;

package/dist/components/MidSectionMenus/MidSectionMenus.types.d.ts

@@ -0,0 +1,67 @@
+import { ElementType } from 'react';
+import { CommonIconNames } from '../../index.ts';
+import { ListMenuItem, ListMenuVariant } from '../ListMenu';
+/**
+ * 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 type MidSection<T extends 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 (desktop only).
+     * On hover, a PopUpMenu opens revealing the section items.
+     */
+    replaceWithIconOnClose?: CommonIconNames;
+} & Omit<React.ComponentPropsWithoutRef<T>, 'children'>;
+export 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;
+};

package/dist/components/MidSectionMenus/index.d.ts

@@ -0,0 +1,2 @@
+export { default as MidSectionMenus } from './MidSectionMenus';
+export type { MidSection, MidSectionMenusProps } from './MidSectionMenus.types';

package/dist/components/Pagination/Pagination.d.ts

@@ -0,0 +1,3 @@
+import { PaginationProps } from './Pagination.types';
+declare const Pagination: ({ currentPage, totalPages, rowsPerPage, onPageChange, onRowsPerPageChange, disabled, rowsPerPageLabel, pageOfPagesLabel, }: PaginationProps) => import("react/jsx-runtime").JSX.Element;
+export default Pagination;