@zvoove/unity-ui 2.28.0 → 2.29.0

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

@@ -0,0 +1,125 @@
+import { ComponentRef, ForwardedRef, MouseEvent, ReactNode } from 'react';
+import { BackgroundColors, Margin, Overflow, Padding, ResponsiveType } from '../../types';
+type UnionAs = ({
+    /**
+     * Render the card root as a specific HTML element.
+     * @default 'div'
+     */
+    as?: 'a';
+} & Omit<React.ComponentProps<'a'>, 'className'>) | ({
+    as?: 'div';
+} & Omit<React.ComponentProps<'div'>, 'className'>);
+export type CardProps<T extends React.ElementType = 'div'> = UnionAs & {
+    /**
+     * The content of the card.
+     */
+    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;
+    /**
+     * Whether to hide the border-bottom separator in the header area.
+     * @default false
+     */
+    hideHeaderBorder?: boolean;
+    /**
+     * 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.
+     */
+    className?: string;
+    /**
+     * The height of the card.
+     * @default 'auto'
+     */
+    height?: ResponsiveType<number | string>;
+    /**
+     * The width of the card.
+     * @default '100%'
+     */
+    width?: ResponsiveType<number | string>;
+    /**
+     * The min height of the card.
+     * @default 'auto'
+     */
+    minHeight?: ResponsiveType<number | string>;
+    /**
+     * The max height of the card.
+     * @default 'auto'
+     */
+    maxHeight?: ResponsiveType<number | string>;
+    /**
+     * The min width of the card.
+     * @default 'auto'
+     */
+    minWidth?: ResponsiveType<number | string>;
+    /**
+     * The max width of the card.
+     * @default 'auto'
+     */
+    maxWidth?: ResponsiveType<number | string>;
+    /**
+     * The border radius of the card.
+     */
+    borderRadius?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
+    /**
+     * The padding of the card.
+     */
+    padding?: ResponsiveType<Padding>;
+    /**
+     * The margin of the card.
+     */
+    margin?: ResponsiveType<Margin>;
+    /**
+     * The elevation/shadow of the card.
+     */
+    elevation?: 0 | 1 | 2 | 3 | 4 | 5;
+    /**
+     * The variant of the card.
+     */
+    variant?: 'outlined' | 'filled';
+    /**
+     * The overflow of the card.
+     */
+    overflow?: ResponsiveType<Overflow>;
+    /**
+     * The background color of the card.
+     */
+    bgColor?: BackgroundColors;
+    /**
+     * When `true`, the card shows a hover background color at 80% opacity and
+     * a pointer cursor. Automatically enabled when `onClick`, `linkComponent`,
+     * or `as="a"` is set. Pass `false` to opt out.
+     */
+    interactive?: boolean;
+    /**
+     * Handle click events on the card.
+     */
+    onClick?: (event: MouseEvent<HTMLElement>) => void;
+    /**
+     * A custom component to render the card root as. Useful for router link
+     * components (e.g. Next.js `Link` or React Router `Link`).
+     * When provided, the `as` prop is ignored.
+     */
+    linkComponent?: T;
+    /**
+     * Ref forwarded to the root element.
+     */
+    ref?: ForwardedRef<ComponentRef<T>>;
+} & Omit<React.ComponentPropsWithoutRef<T>, 'children' | 'className'>;
+export {};

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

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

package/dist/components/ChatBubble/ChatBubble.d.ts

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

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

@@ -0,0 +1,117 @@
+export declare const messageRowStyles: import('tailwind-variants').TVReturnType<{
+    variant: {
+        sender: string[];
+        receiver: string[];
+    };
+    state: {
+        thinking: string[];
+        default: never[];
+        error: never[];
+    };
+}, undefined, string[], {
+    variant: {
+        sender: string[];
+        receiver: string[];
+    };
+    state: {
+        thinking: string[];
+        default: never[];
+        error: never[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    variant: {
+        sender: string[];
+        receiver: string[];
+    };
+    state: {
+        thinking: string[];
+        default: never[];
+        error: never[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const avatarSlotStyles: 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 contentSlotStyles: 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 thinkingLabelStyles: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const thinkingDotStyles: import('tailwind-variants').TVReturnType<{
+    delay: {
+        0: string[];
+        1: string[];
+        2: string[];
+    };
+}, undefined, string[], {
+    delay: {
+        0: string[];
+        1: string[];
+        2: string[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    delay: {
+        0: string[];
+        1: string[];
+        2: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const bubbleContentStyles: import('tailwind-variants').TVReturnType<{
+    variant: {
+        sender: string[];
+        receiver: string[];
+    };
+    state: {
+        default: string[];
+        error: string[];
+    };
+}, undefined, string[], {
+    variant: {
+        sender: string[];
+        receiver: string[];
+    };
+    state: {
+        default: string[];
+        error: string[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    variant: {
+        sender: string[];
+        receiver: string[];
+    };
+    state: {
+        default: string[];
+        error: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const attachmentStyles: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const chatBubbleMediaStyles: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const chatBubbleMediaContentStyles: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const chatBubbleMediaCaptionStyles: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const bubbleGroupStyles: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const footerStyles: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;

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

@@ -0,0 +1,55 @@
+import { AvatarProps } from '../../index.ts';
+export type ChatBubbleVariant = 'sender' | 'receiver';
+export type ChatBubbleState = 'default' | 'thinking' | 'error';
+export 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 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;
+}

package/dist/components/ChatBubble/ChatBubbleMedia.d.ts

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

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

@@ -0,0 +1,3 @@
+export { default as ChatBubble } from './ChatBubble';
+export { default as ChatBubbleMedia } from './ChatBubbleMedia';
+export type { ChatBubbleProps, ChatBubbleMediaProps, ChatBubbleState, ChatBubbleVariant, } from './ChatBubble.types';

package/dist/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,3 @@
+import { CheckboxProps } from './Checkbox.types';
+declare const Checkbox: ({ checked, name, id, disabled, error, indeterminate, value, label, onChange, }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
+export default Checkbox;

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

@@ -0,0 +1,59 @@
+export declare const wrapperStyles: import('tailwind-variants').TVReturnType<{
+    disabled: {
+        true: string[];
+    };
+}, undefined, string[], {
+    disabled: {
+        true: string[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    disabled: {
+        true: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const checkboxStyles: import('tailwind-variants').TVReturnType<{
+    checked: {
+        true: string[];
+        false: string[];
+    };
+    error: {
+        true: string[];
+        false: string[];
+    };
+    animate: {
+        true: string[];
+    };
+    disabled: {
+        true: string[];
+    };
+}, undefined, string[], {
+    checked: {
+        true: string[];
+        false: string[];
+    };
+    error: {
+        true: string[];
+        false: string[];
+    };
+    animate: {
+        true: string[];
+    };
+    disabled: {
+        true: string[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    checked: {
+        true: string[];
+        false: string[];
+    };
+    error: {
+        true: string[];
+        false: string[];
+    };
+    animate: {
+        true: string[];
+    };
+    disabled: {
+        true: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;

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

@@ -0,0 +1,40 @@
+import { ChangeEventHandler, ReactNode } from 'react';
+export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
+    /**
+     * Handle change events.
+     */
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    /**
+     * Handle the label of the checkbox.
+     */
+    label: ReactNode;
+    /**
+     * Handle the name of the checkbox.
+     */
+    name?: string;
+    /**
+     * Handle the id of the checkbox.
+     * @default auto-generated
+     */
+    id?: string;
+    /**
+     * Handle the value of the checkbox.
+     */
+    value?: string;
+    /**
+     * Handle if the checkbox is checked.
+     */
+    checked?: boolean;
+    /**
+     * Handle if the checkbox is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Handle if the checkbox has an error.
+     */
+    error?: boolean;
+    /**
+     * Handle if the checkbox has an indeterminate state.
+     */
+    indeterminate?: boolean;
+}

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

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

package/dist/components/Chip/Chip.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { ChipProps } from './Chip.types';
+declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLButtonElement>>;
+export default Chip;

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

@@ -0,0 +1,114 @@
+export declare const chipStyles: import('tailwind-variants').TVReturnType<{
+    size: {
+        medium: string[];
+        large: string[];
+    };
+    variant: {
+        primary: never[];
+        secondary: never[];
+        pending: string[];
+        confirmed: string[];
+        rejected: string[];
+        skipped: string[];
+    };
+    type: {
+        input: never[];
+        filter: never[];
+        assistive: never[];
+        suggestion: never[];
+        choice: never[];
+    };
+    elevated: {
+        true: string[];
+    };
+    readonly: {
+        true: never[];
+    };
+    clickable: {
+        true: string[];
+    };
+    disabled: {
+        true: string[];
+    };
+}, undefined, string[], {
+    size: {
+        medium: string[];
+        large: string[];
+    };
+    variant: {
+        primary: never[];
+        secondary: never[];
+        pending: string[];
+        confirmed: string[];
+        rejected: string[];
+        skipped: string[];
+    };
+    type: {
+        input: never[];
+        filter: never[];
+        assistive: never[];
+        suggestion: never[];
+        choice: never[];
+    };
+    elevated: {
+        true: string[];
+    };
+    readonly: {
+        true: never[];
+    };
+    clickable: {
+        true: string[];
+    };
+    disabled: {
+        true: string[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    size: {
+        medium: string[];
+        large: string[];
+    };
+    variant: {
+        primary: never[];
+        secondary: never[];
+        pending: string[];
+        confirmed: string[];
+        rejected: string[];
+        skipped: string[];
+    };
+    type: {
+        input: never[];
+        filter: never[];
+        assistive: never[];
+        suggestion: never[];
+        choice: never[];
+    };
+    elevated: {
+        true: string[];
+    };
+    readonly: {
+        true: never[];
+    };
+    clickable: {
+        true: string[];
+    };
+    disabled: {
+        true: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const chipIconStyles: import('tailwind-variants').TVReturnType<{
+    disabled: {
+        true: string[];
+        false: string[];
+    };
+}, undefined, never[], {
+    disabled: {
+        true: string[];
+        false: string[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    disabled: {
+        true: string[];
+        false: string[];
+    };
+}, undefined, never[], unknown, unknown, undefined>>;
+export declare const pendingCircleStyles: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;

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

@@ -0,0 +1,63 @@
+import { CommonIconNames, TypographyProps } from '../../index.ts';
+type ChipPropsTypeIcon = {
+    /**
+     * The type of the component
+     */
+    type?: 'input' | 'filter' | 'assistive' | 'suggestion';
+    /**
+     * The icon to show on the left side of the button.
+     */
+    icon?: CommonIconNames;
+} | {
+    type?: 'choice';
+    icon?: never;
+};
+export type ChipProps = ChipPropsTypeIcon & {
+    /**
+     * The children of the button.
+     */
+    label: string;
+    /**
+     * The variant of the component
+     */
+    variant?: 'primary' | 'secondary' | 'pending' | 'confirmed' | 'rejected' | 'skipped';
+    /**
+     * The drop shadow of the component
+     */
+    elevated?: boolean;
+    /**
+     * Whether the component is readonly or not. <br />
+     * This is used for `choice` chips.
+     */
+    readonly?: boolean;
+    /**
+     * Whether the component is disabled or not.
+     */
+    disabled?: boolean;
+    /**
+     * The size of the component
+     */
+    size?: 'medium' | 'large';
+    /**
+     * The action to perform when the delete button is clicked.
+     * This is used only for `input` type chips.
+     */
+    onDelete?: () => void;
+    /**
+     * The action to perform when the chip is clicked.
+     * This is used only for `filter` and 'choice' type chips.
+     */
+    onToggleOpen?: () => void;
+    /**
+     * Whether to show the dropdown icon or not.
+     * This is used only for `filter` and 'choice' type chips.
+     * @default true
+     */
+    showDropdownIcon?: boolean;
+    /**
+     * The number of lines to truncate the text.
+     * @default undefined
+     */
+    truncate?: TypographyProps['truncate'];
+};
+export {};

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

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

package/dist/components/CodeBlock/CodeBlock.d.ts

@@ -0,0 +1,6 @@
+import { CodeBlockProps } from './CodeBlock.types';
+declare const CodeBlock: {
+    ({ code, filename, language, variant, ...props }: CodeBlockProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default CodeBlock;

package/dist/components/CodeBlock/CodeBlock.highlighter.d.ts

@@ -0,0 +1,7 @@
+interface HighlightedCodeProps {
+    language: string;
+    className: string;
+    code: string;
+}
+declare const HighlightedCode: ({ language, className, code, }: HighlightedCodeProps) => import("react/jsx-runtime").JSX.Element;
+export default HighlightedCode;