@zvoove/unity-ui 2.19.1 → 2.20.1

package/dist/unity-ui.d.ts

@@ -54,6 +54,46 @@ export declare interface AccordionProps<T extends readonly AccordionItem[] = rea
     allowMultipleOpenItems?: boolean;
 }
 
+export declare const ActionCard: {
+    ({ header, children, footer }: ActionCardProps): JSX.Element;
+    displayName: string;
+};
+
+export declare interface ActionCardProps {
+    /**
+     * Content rendered inside the card header area with a
+     * `surface-container-lowest` background. Wrapped in a horizontal Stack
+     * with standardised padding so the consumer only provides the inner nodes.
+     */
+    header?: ReactNode;
+    /** Card body content. */
+    children: ReactNode;
+    /**
+     * Content rendered inside the card footer area. Wrapped in a horizontal
+     * Stack with standardised padding so the consumer only provides the inner
+     * nodes (typically action buttons).
+     */
+    footer?: ReactNode;
+}
+
+export declare 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;
+}
+
 declare const align: {
     readonly LEFT: "left";
     readonly CENTER: "center";
@@ -101,7 +141,7 @@ export declare interface AvatarProps extends React.HTMLAttributes<HTMLDivElement
     /**
      * The type of the avatar
      */
-    type?: 'initials' | 'check' | 'avatar' | 'image';
+    type?: 'initials' | 'check' | 'avatar' | 'image' | 'zvoove';
     /**
      * The image of the avatar
      */
@@ -236,7 +276,27 @@ export declare interface CardProps extends React.HTMLAttributes<HTMLDivElement>
     /**
      * The content of the card.
      */
-    children: ReactNode;
+    children?: ReactNode;
+    /**
+     * Content rendered in the header area.
+     * When provided, a border-bottom separator is added automatically.
+     */
+    header?: ReactNode;
+    /**
+     * Background color applied to the header area.
+     * Only used when `header` is provided.
+     */
+    headerBgColor?: BackgroundColors;
+    /**
+     * Content rendered below the body.
+     * Receives no extra styling — the consumer controls its appearance.
+     */
+    footer?: ReactNode;
+    /**
+     * Background color applied to the footer area.
+     * Only used when `footer` is provided.
+     */
+    footerBgColor?: BackgroundColors;
     /**
      * @deprecated Use the `height`, `width`, `minHeight`, `maxHeight`, `minWidth`, `maxWidth` props instead.
      */
@@ -332,6 +392,68 @@ export declare interface ChangeEvent {
     };
 }
 
+export declare const ChatBubble: ForwardRefExoticComponent<ChatBubbleProps & RefAttributes<HTMLDivElement>>;
+
+export declare const ChatBubbleMedia: ForwardRefExoticComponent<ChatBubbleMediaProps & RefAttributes<HTMLElement>>;
+
+export declare interface ChatBubbleMediaProps extends React.HTMLAttributes<HTMLElement> {
+    /** The media element (img, video, or iframe) to render. */
+    children: React.ReactNode;
+    /** Optional caption displayed below the media. */
+    caption?: string;
+}
+
+export declare interface ChatBubbleProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The variant determines alignment and styling of the bubble.
+     * - sender: right-aligned, primary blue background
+     * - receiver: left-aligned, light surface background
+     */
+    variant?: ChatBubbleVariant;
+    /**
+     * Visual state of the bubble.
+     * - default: renders children inside a styled bubble
+     * - thinking: receiver-only, shows italic label with animated dots
+     * - error: reserved for error state styling
+     * @default 'default'
+     */
+    state?: ChatBubbleState;
+    /**
+     * The message content to display in the bubble. Accepts any ReactNode —
+     * plain text, HTML via ContentBlock, custom components, media, tables, etc.
+     */
+    children?: React.ReactNode;
+    /**
+     * Phrases to cycle through while in the "thinking" state.
+     * Each phrase is shown with animated dots appended.
+     * @default ['Einen Moment bitte', 'Ich denke nach', 'Wird verarbeitet']
+     */
+    thinkingPhrases?: string[];
+    /**
+     * Props forwarded to the Avatar component.
+     * When not provided, defaults to `{ type: 'zvoove' }` for receiver
+     * and auto-detects type based on `image`/`name` for sender.
+     */
+    avatar?: AvatarProps;
+    /**
+     * Rich content rendered below the bubble without bubble styling — cards,
+     * tables, or structured data. When both `children` and `attachment` are set,
+     * the text appears inside a styled bubble and the attachment renders directly
+     * below, aligned with the bubble. When only `attachment` is set, it renders
+     * next to the avatar without a surrounding bubble.
+     */
+    attachment?: React.ReactNode;
+    /**
+     * Footer content rendered at the bottom of the ContentSlot, below the bubble
+     * and attachment. Typically used for `MessageActions`.
+     */
+    footer?: React.ReactNode;
+}
+
+export declare type ChatBubbleState = 'default' | 'thinking' | 'error';
+
+export declare type ChatBubbleVariant = 'sender' | 'receiver';
+
 export declare const Checkbox: ({ checked, name, id, disabled, error, indeterminate, value, label, onChange, }: CheckboxProps) => JSX.Element;
 
 export declare interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
@@ -551,6 +673,7 @@ export declare const commonIconsMap: {
     readonly lock: Icon_2;
     readonly menu: Icon_2;
     readonly metadata: Icon_2;
+    readonly code: Icon_2;
     readonly microphone: Icon_2;
     readonly minus: Icon_2;
     readonly 'more-horizontal': Icon_2;
@@ -591,6 +714,8 @@ export declare const commonIconsMap: {
     readonly stop: Icon_2;
     readonly sick: Icon_2;
     readonly table: Icon_2;
+    readonly 'thumb-up': Icon_2;
+    readonly 'thumb-down': Icon_2;
     readonly taxi: Icon_2;
     readonly 'text-align-center': Icon_2;
     readonly 'text-align-justify': Icon_2;
@@ -630,72 +755,6 @@ export declare enum COMPONENT_ERROR {
     DUPLICATE_FILE = "duplicate-file"
 }
 
-export declare const ConfirmationCard: {
-    ({ title, children, variant, icon, actions, status, statusLabel, }: ConfirmationCardProps): JSX.Element;
-    displayName: string;
-};
-
-export declare interface ConfirmationCardAction {
-    /**
-     * The label of the action button.
-     */
-    label: string;
-    /**
-     * Callback fired when the action button is clicked.
-     */
-    onClick?: (event: MouseEvent_2<HTMLElement>) => void;
-    /**
-     * The visual variant of the button.
-     * @default 'outlined'
-     */
-    variant?: ConfirmationCardActionVariant;
-    /**
-     * Icon to display in the action button.
-     */
-    icon?: CommonIconNames | Omit<IconProps, 'size' | 'color'>;
-}
-
-export declare type ConfirmationCardActionVariant = 'text' | 'textSecondary' | 'filled' | 'outlined' | 'elevated' | 'tonal' | 'positive' | 'negative';
-
-export declare interface ConfirmationCardProps {
-    /**
-     * The title displayed next to the icon.
-     */
-    title: string;
-    /**
-     * The content of the ConfirmationCard. Accepts any valid ReactNode.
-     */
-    children?: ReactNode;
-    /**
-     * The semantic variant of the ConfirmationCard.
-     * @default 'info'
-     */
-    variant?: ConfirmationCardVariant;
-    /**
-     * Icon to display in the ConfirmationCard. If not provided, uses the default icon for the variant.
-     */
-    icon?: CommonIconNames | Omit<IconProps, 'size' | 'color'>;
-    /**
-     * Action buttons displayed below the card.
-     * Hidden when `status` is set.
-     */
-    actions?: ConfirmationCardAction[];
-    /**
-     * The resolved status of the card. When set, action buttons are replaced
-     * by a readonly Chip indicating the outcome.
-     */
-    status?: ConfirmationCardStatus;
-    /**
-     * Custom label for the status chip. Use this to provide translated labels.
-     * @default 'Confirmed', 'Rejected', or 'Skipped' based on `status`
-     */
-    statusLabel?: string;
-}
-
-export declare type ConfirmationCardStatus = 'confirmed' | 'rejected' | 'skipped';
-
-export declare type ConfirmationCardVariant = 'info' | 'success' | 'warning' | 'error';
-
 export declare const ContentBlock: {
     ({ children }: ContentBlockProps): JSX.Element;
     displayName: string;
@@ -926,6 +985,8 @@ declare interface ExpandableRowConfig {
  */
 export declare function extractText(node: ReactNode): string;
 
+export declare type FeedbackType = 'positive' | 'negative' | null;
+
 /**
  * Error types that can occur for individual files during validation.
  */
@@ -1339,6 +1400,7 @@ declare const iconMap: {
     readonly lock: Icon_2;
     readonly menu: Icon_2;
     readonly metadata: Icon_2;
+    readonly code: Icon_2;
     readonly microphone: Icon_2;
     readonly minus: Icon_2;
     readonly 'more-horizontal': Icon_2;
@@ -1379,6 +1441,8 @@ declare const iconMap: {
     readonly stop: Icon_2;
     readonly sick: Icon_2;
     readonly table: Icon_2;
+    readonly 'thumb-up': Icon_2;
+    readonly 'thumb-down': Icon_2;
     readonly taxi: Icon_2;
     readonly 'text-align-center': Icon_2;
     readonly 'text-align-justify': Icon_2;
@@ -1565,6 +1629,72 @@ export declare type MenuItem<T extends React.ElementType = 'a'> = {
     icon: CommonIconNames | React.ReactElement;
 } & Omit<React.ComponentPropsWithoutRef<T>, 'children'>;
 
+export declare 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_2<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 declare const MessageActions: ForwardRefExoticComponent<MessageActionsProps & RefAttributes<HTMLDivElement>>;
+
+export declare 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;
+}
+
+export declare type MessageActionsVariant = 'sender' | 'receiver';
+
 declare type NonNullable_2<T> = Exclude<T, null | undefined>;
 export { NonNullable_2 as NonNullable }
 
@@ -1972,6 +2102,51 @@ export declare type ResponsiveTypeFixed<T> = {
 
 export declare type RowsPerPage = 10 | 20 | 50 | 100 | 200;
 
+export declare const ScoreCard: ForwardRefExoticComponent<ScoreCardProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface ScoreCardProps {
+    /**
+     * Main KPI value displayed prominently (e.g. "0,00", "156", "92,3%").
+     */
+    value: string | number;
+    /**
+     * Secondary label below the value (e.g. "Parameter", "davon 12 in kritischem Status").
+     */
+    parameter?: string;
+    /**
+     * Icon shown to the left of the parameter text.
+     */
+    parameterIcon?: CommonIconNames;
+    /**
+     * Whether to show the parameter icon.
+     * @default true
+     */
+    showIcon?: boolean;
+    /**
+     * Color variant controlling background and text colors.
+     * @default 'neutral'
+     */
+    variant?: ScoreCardVariant;
+    /**
+     * Size variant controlling padding and typography scale.
+     * @default 'large'
+     */
+    size?: ScoreCardSize;
+    /**
+     * Locale for number formatting (e.g. 'de-DE', 'en-US').
+     * When omitted, uses the browser's default locale.
+     */
+    locale?: string;
+    /**
+     * Fully custom content — replaces the default value/parameter layout.
+     */
+    children?: ReactNode;
+}
+
+export declare type ScoreCardSize = 'large' | 'medium' | 'small';
+
+export declare type ScoreCardVariant = 'negative' | 'active' | 'positive' | 'neutral' | 'ghost';
+
 export declare const SegmentButton: <T extends React.ElementType = "button", V = string>({ label, active, matchSiblings, icon, value, as, linkComponent, ...props }: SegmentButtonProps<T, V>) => JSX.Element;
 
 export declare type SegmentButtonProps<T extends React.ElementType, V = string> = React.ComponentPropsWithoutRef<T> & {
@@ -2565,7 +2740,7 @@ declare type TabItem<T extends React.ElementType = 'button'> = {
 } & Omit<React.ComponentPropsWithoutRef<T>, 'children'>;
 
 export declare const Table: {
-    <T extends readonly TableColumnProps[]>({ data, columns, title, subtitle, actions, filters, footer, orderBy, onOrderByChange, emptyState, hiddenColumns, loading, expandedRows, }: TableProps<T>): JSX.Element;
+    <T extends readonly TableColumnProps[]>({ data, columns, title, subtitle, actions, filters, footer, orderBy, onOrderByChange, emptyState, hiddenColumns, loading, expandedRows, headerBackgroundColor, }: TableProps<T>): JSX.Element;
     displayName: string;
 };
 
@@ -2658,6 +2833,11 @@ export declare interface TableProps<T extends readonly TableColumnProps[] = read
      * The footer of the Table.
      */
     footer?: React.ReactNode;
+    /**
+     * The background color of the table header.
+     * @default false
+     */
+    headerBackgroundColor?: boolean;
 }
 
 export declare type TableRowData<T extends readonly TableColumnProps[]> = {