@zvoove/unity-ui 2.30.0 → 2.32.1

package/dist/llms.txt

@@ -806,6 +806,13 @@ import { List } from '@zvoove/unity-ui';
   ]}
   showDividers={true}           // boolean (default: true) — show dividers between items
   linkComponent="div"           // T | 'div' (default: 'div') — set to 'a' for native links or pass a custom router Link
+  spread="top"                  // 'top' | 'bottom' | 'center' | 'between' | 'evenly' (default: 'top') — vertical distribution; needs a fixed height to be visible
+  height={400}                  // ResponsiveType<number | string> — pixel number or any CSS length, also accepts a responsive object
+  width="100%"                  // ResponsiveType<number | string>
+  minHeight={200}               // ResponsiveType<number | string>
+  maxHeight="80vh"              // ResponsiveType<number | string>
+  minWidth={240}                // ResponsiveType<number | string>
+  maxWidth="100%"               // ResponsiveType<number | string>
 />
 ```
 
@@ -845,6 +852,18 @@ import { Link } from 'react-router-dom';
   ]}
 />
 
+// Distributing items along a fixed height — pair `spread` with `showDividers={false}` for a clean layout
+<List
+  spread="between"
+  showDividers={false}
+  height={320}
+  items={[
+    { id: 'item-1', content: 'Item 1' },
+    { id: 'item-2', content: 'Item 2' },
+    { id: 'item-3', content: 'Item 3' },
+  ]}
+/>
+
 // Inside a Card with header
 <Card padding="none" width={320} variant="outlined">
   <Stack padding="md" direction="row" gap="sm" align="center">

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

@@ -0,0 +1,6 @@
+import { AccordionItem, AccordionProps } from './Accordion.types';
+declare const Accordion: {
+    <T extends readonly AccordionItem[]>({ items, onToggle, openItems, allowMultipleOpenItems, }: AccordionProps<T>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default Accordion;

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

@@ -0,0 +1,46 @@
+export declare const accordionStyles: import('tailwind-variants').TVReturnType<{
+    isOpen: {
+        true: {
+            header: string[];
+            chevron: string[];
+        };
+        false: {
+            chevron: string[];
+        };
+    };
+}, {
+    base: string[];
+    header: string[];
+    chevron: string[];
+    content: string[];
+}, undefined, {
+    isOpen: {
+        true: {
+            header: string[];
+            chevron: string[];
+        };
+        false: {
+            chevron: string[];
+        };
+    };
+}, {
+    base: string[];
+    header: string[];
+    chevron: string[];
+    content: string[];
+}, import('tailwind-variants').TVReturnType<{
+    isOpen: {
+        true: {
+            header: string[];
+            chevron: string[];
+        };
+        false: {
+            chevron: string[];
+        };
+    };
+}, {
+    base: string[];
+    header: string[];
+    chevron: string[];
+    content: string[];
+}, undefined, unknown, unknown, undefined>>;

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

@@ -0,0 +1,33 @@
+import { ReactNode } from 'react';
+export interface AccordionItem {
+    id: string;
+    title: string;
+    supportingText?: string;
+    children: ReactNode;
+    isOpen?: boolean;
+    disabled?: boolean;
+}
+export type AccordionItemId<T extends readonly AccordionItem[]> = T[number]['id'];
+export interface AccordionProps<T extends readonly AccordionItem[] = readonly AccordionItem[]> {
+    /**
+     * The children of the Accordion.
+     */
+    items: AccordionItem[];
+    /**
+     * The open items of the Accordion. By default, all items are closed. <br />
+     * The ids must match the `id` of the item. <br />
+     * When allowMultipleOpenItems is false, this should be a single id or undefined. <br />
+     * When allowMultipleOpenItems is true, this can be an array of ids or undefined.
+     */
+    openItems?: AccordionItemId<T> | AccordionItemId<T>[];
+    /**
+     * Callback when the accordion header is clicked <br />
+     * If provided, this will override the default behavior and you need to manage the open items yourself.
+     */
+    onToggle?: (item: AccordionItem) => void;
+    /**
+     * Whether to allow multiple open items or not.
+     * @default false
+     */
+    allowMultipleOpenItems?: boolean;
+}

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

@@ -0,0 +1,2 @@
+export { default as Accordion } from './Accordion';
+export type { AccordionProps, AccordionItem, AccordionItemId, } from './Accordion.types';

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

@@ -0,0 +1,6 @@
+import { ActionCardProps } from './ActionCard.types';
+declare const ActionCard: {
+    ({ header, children, footer, isOpen, expandable, onExpandToggle, }: ActionCardProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default ActionCard;

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

@@ -0,0 +1,29 @@
+export declare const actionCardHeaderStyles: import('tailwind-variants').TVReturnType<{
+    clickable: {
+        true: string[];
+    };
+}, undefined, never[], {
+    clickable: {
+        true: string[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    clickable: {
+        true: string[];
+    };
+}, undefined, never[], unknown, unknown, undefined>>;
+export declare const actionCardChevronStyles: 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>>;

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

@@ -0,0 +1,32 @@
+import { ReactNode } from 'react';
+export 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;
+    /**
+     * Whether the ActionCard is expandable.
+     * @default false
+     */
+    expandable?: boolean;
+    /**
+     * Whether the ActionCard is open or closed.
+     * @default true
+     */
+    isOpen?: boolean;
+    /**
+     * Called when the header is clicked in expandable mode.
+     * Required when using `isOpen` (controlled) so the parent can update its state.
+     */
+    onExpandToggle?: () => void;
+}

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

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

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

@@ -0,0 +1,3 @@
+import { AvatarProps } from './Avatar.types';
+declare const Avatar: ({ size, type: typeProp, name, image, initialsAmount, variant, }: AvatarProps) => import("react/jsx-runtime").JSX.Element;
+export default Avatar;

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

@@ -0,0 +1,53 @@
+export declare const avatarStyles: import('tailwind-variants').TVReturnType<{
+    size: {
+        sm: string[];
+        md: string[];
+        lg: string[];
+    };
+    type: {
+        initials: never[];
+        check: never[];
+        avatar: string[];
+        image: string[];
+        zvoove: string[];
+    };
+    variant: {
+        round: string[];
+        square: never[];
+    };
+}, undefined, string[], {
+    size: {
+        sm: string[];
+        md: string[];
+        lg: string[];
+    };
+    type: {
+        initials: never[];
+        check: never[];
+        avatar: string[];
+        image: string[];
+        zvoove: string[];
+    };
+    variant: {
+        round: string[];
+        square: never[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    size: {
+        sm: string[];
+        md: string[];
+        lg: string[];
+    };
+    type: {
+        initials: never[];
+        check: never[];
+        avatar: string[];
+        image: string[];
+        zvoove: string[];
+    };
+    variant: {
+        round: string[];
+        square: never[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const imageStyles: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;

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

@@ -0,0 +1,48 @@
+import { ResponsiveType } from '../../../types';
+export declare const AVATAR_SIZES: {
+    readonly SM: "sm";
+    readonly MD: "md";
+    readonly LG: "lg";
+};
+export type AvatarSize = (typeof AVATAR_SIZES)[keyof typeof AVATAR_SIZES];
+/**
+ * @internal Legacy size values, kept for backwards compatibility.
+ * These are mapped at runtime to their `AvatarSize` equivalents and will
+ * be removed in v3.0.0. Do not use in new code — prefer `AvatarSize`.
+ */
+export type AvatarSizeLegacy = 'small' | 'medium' | 'large';
+export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The size of the avatar.
+     *
+     * Accepts a single value or a responsive object keyed by viewport.
+     *
+     * @default 'md'
+     *
+     * @remarks
+     * The values `'small' | 'medium' | 'large'` are **deprecated** and kept for
+     * backwards compatibility. They are mapped to `'sm' | 'md' | 'lg'` and will
+     * be removed in v3.0.0.
+     */
+    size?: ResponsiveType<AvatarSize | AvatarSizeLegacy>;
+    /**
+     * The type of the avatar
+     */
+    type?: 'initials' | 'check' | 'avatar' | 'image' | 'zvoove';
+    /**
+     * The image of the avatar
+     */
+    image?: string;
+    /**
+     * The name of the avatar
+     */
+    name?: string;
+    /**
+     * The amount of initials of the avatar
+     */
+    initialsAmount?: 1 | 2;
+    /**
+     * The variant of the avatar
+     */
+    variant?: 'round' | 'square';
+}

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

@@ -0,0 +1,2 @@
+export { default as Avatar } from './Avatar';
+export type { AvatarProps, AvatarSize } from './Avatar.types';

package/dist/src/components/Avatar/AvatarGroup/AvatarGroup.d.ts

@@ -0,0 +1,3 @@
+import { AvatarGroupProps } from './AvatarGroup.types';
+declare const AvatarGroup: ({ children, maxLength, total }: AvatarGroupProps) => import("react/jsx-runtime").JSX.Element;
+export default AvatarGroup;

package/dist/src/components/Avatar/AvatarGroup/AvatarGroup.styled.d.ts

@@ -0,0 +1,3 @@
+export declare const avatarGroupStyles: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const avatarContainerStyles: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const avatarCounterStyles: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;

package/dist/src/components/Avatar/AvatarGroup/AvatarGroup.types.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+export interface AvatarGroupProps {
+    /**
+     * The children of the button.
+     */
+    children: ReactNode;
+    /**
+     * Maximum number of avatars to display before showing a count
+     */
+    maxLength?: number;
+    /**
+     * Total number of avatars in the group
+     */
+    total?: number;
+}

package/dist/src/components/Avatar/AvatarGroup/index.d.ts

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

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

@@ -0,0 +1,2 @@
+export * from './AvatarGroup';
+export * from './Avatar';

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

@@ -0,0 +1,3 @@
+import { BadgeProps } from './Badge.types';
+declare const Badge: ({ children, variant, content, dot, }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
+export default Badge;

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

@@ -0,0 +1,28 @@
+export declare const badgeStyles: import('tailwind-variants').TVReturnType<{
+    variant: {
+        primary: string[];
+        secondary: string[];
+    };
+    dot: {
+        true: string[];
+        false: string[];
+    };
+}, undefined, string[], {
+    variant: {
+        primary: string[];
+        secondary: string[];
+    };
+    dot: {
+        true: string[];
+        false: string[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    variant: {
+        primary: string[];
+        secondary: string[];
+    };
+    dot: {
+        true: string[];
+        false: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;

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

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+export interface BadgeProps {
+    /**
+     * The children of the button.
+     */
+    children: ReactNode;
+    /**
+     * The variant of the component
+     */
+    variant?: 'primary' | 'secondary';
+    /**
+     * The content of the badge. If undefined, the badge will be hidden.
+     */
+    content?: ReactNode;
+    /**
+     * The dot prop changes a badge into a small dot
+     */
+    dot?: boolean;
+}

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

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

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

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { BreadcrumbsProps } from './Breadcrumbs.types';
+declare const Breadcrumbs: <T extends React.ElementType = "a">({ items, linkComponent: LinkComponent, homeIcon, }: BreadcrumbsProps<T>) => import("react/jsx-runtime").JSX.Element;
+export default Breadcrumbs;

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

@@ -0,0 +1,14 @@
+export declare const breadcrumbsStyles: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const linkStyles: import('tailwind-variants').TVReturnType<{
+    hasHref: {
+        false: string[];
+    };
+}, undefined, never[], {
+    hasHref: {
+        false: string[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    hasHref: {
+        false: string[];
+    };
+}, undefined, never[], unknown, unknown, undefined>>;

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

@@ -0,0 +1,22 @@
+import { CommonIconNames } from '../../index.ts';
+export type BreadcrumbsItem<T extends React.ElementType = 'a'> = {
+    label: string;
+} & Omit<React.ComponentPropsWithoutRef<T>, 'children'>;
+export type BreadcrumbsProps<T extends React.ElementType = 'a'> = {
+    /**
+     * The items of the component. <br />
+     * The items are displayed in the order they are passed. <br />
+     * `type BreadcrumbsItem = { label: string; href: string; onItemClick?: () => void; }`
+     */
+    items: BreadcrumbsItem<T>[];
+    /**
+     * The component to render for the link
+     * @default 'a'
+     */
+    linkComponent?: T | 'a';
+    /**
+     * The icon name for the home (first) breadcrumb item
+     * @default 'home'
+     */
+    homeIcon?: CommonIconNames;
+};

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

@@ -0,0 +1,2 @@
+export { default as Breadcrumbs } from './Breadcrumbs';
+export type { BreadcrumbsProps, BreadcrumbsItem } from './Breadcrumbs.types';

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

@@ -0,0 +1,9 @@
+import { ForwardedRef } from 'react';
+import { ButtonProps } from './Button.types';
+declare const Button: {
+    <T extends React.ElementType = "button">({ children, variant, hideLabel, as, icon, linkComponent, size, isLoading, ...props }: ButtonProps<T> & {
+        ref?: ForwardedRef<T>;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default Button;

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

@@ -0,0 +1,98 @@
+export declare const buttonContentStyles: import('tailwind-variants').TVReturnType<{
+    isLoading: {
+        true: string[];
+    };
+}, undefined, string[], {
+    isLoading: {
+        true: string[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    isLoading: {
+        true: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const buttonStyles: import('tailwind-variants').TVReturnType<{
+    isLoading: {
+        true: string[];
+        false: string[];
+    };
+    size: {
+        sm: string[];
+        md: string[];
+        lg: string[];
+    };
+    hasIconOnly: {
+        false: never[];
+    };
+    hasIcon: {
+        true: never[];
+    };
+    variant: {
+        filled: string[];
+        outlined: string[];
+        text: string[];
+        textSecondary: string[];
+        elevated: string[];
+        tonal: string[];
+        linkPrimary: string[];
+        linkSecondary: string[];
+        positive: string[];
+        negative: string[];
+    };
+}, undefined, string[], {
+    isLoading: {
+        true: string[];
+        false: string[];
+    };
+    size: {
+        sm: string[];
+        md: string[];
+        lg: string[];
+    };
+    hasIconOnly: {
+        false: never[];
+    };
+    hasIcon: {
+        true: never[];
+    };
+    variant: {
+        filled: string[];
+        outlined: string[];
+        text: string[];
+        textSecondary: string[];
+        elevated: string[];
+        tonal: string[];
+        linkPrimary: string[];
+        linkSecondary: string[];
+        positive: string[];
+        negative: string[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    isLoading: {
+        true: string[];
+        false: string[];
+    };
+    size: {
+        sm: string[];
+        md: string[];
+        lg: string[];
+    };
+    hasIconOnly: {
+        false: never[];
+    };
+    hasIcon: {
+        true: never[];
+    };
+    variant: {
+        filled: string[];
+        outlined: string[];
+        text: string[];
+        textSecondary: string[];
+        elevated: string[];
+        tonal: string[];
+        linkPrimary: string[];
+        linkSecondary: string[];
+        positive: string[];
+        negative: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;

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

@@ -0,0 +1,55 @@
+import { ForwardedRef, MouseEvent, ReactNode } from 'react';
+import { CommonIconNames, IconProps, ResponsiveType } from '../../index.ts';
+type UnionAs = ({
+    /**
+     * The component to render the button as.
+     * @default button
+     */
+    as?: 'a';
+} & Omit<React.ComponentProps<'a'>, 'className'>) | ({
+    as?: 'button';
+} & Omit<React.ComponentProps<'button'>, 'className'>) | ({
+    as?: 'span';
+} & Omit<React.ComponentProps<'span'>, 'className'>);
+export type ButtonProps<T extends React.ElementType = 'button'> = UnionAs & {
+    /**
+     * The children of the button.
+     */
+    children?: ReactNode;
+    /**
+     * The size of the button.
+     */
+    size?: ResponsiveType<'sm' | 'md' | 'lg'>;
+    /**
+     * The icon of the button.
+     */
+    icon?: CommonIconNames | Omit<IconProps, 'size' | 'color'>;
+    /**
+     * Hide the label of the button. <br />
+     * Only works if `icon` is provided.
+     */
+    hideLabel?: ResponsiveType<boolean>;
+    /**
+     * Handle click events.
+     */
+    onClick?: (event: MouseEvent<HTMLElement>) => void;
+    /**
+     * The variant is used
+     * to change the visual communication.
+     */
+    variant?: ResponsiveType<'text' | 'textSecondary' | 'filled' | 'outlined' | 'elevated' | 'tonal' | 'linkPrimary' | 'linkSecondary' | 'positive' | 'negative'>;
+    /**
+     * 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**.
+     */
+    linkComponent?: T;
+    /**
+     * The ref of the button.
+     */
+    ref?: ForwardedRef<T>;
+    /**
+     * Whether the button is loading.
+     */
+    isLoading?: boolean;
+} & Omit<React.ComponentPropsWithoutRef<T>, 'children'>;
+export {};

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

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

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

@@ -0,0 +1,10 @@
+import { ComponentRef, ForwardedRef } from 'react';
+import { CardProps } from './Card.types';
+export declare const ERROR_MESSAGE = "@Card: className only accepts tailwindcss classes that defines height or width. \n\nExample: h-[200px], w-[200px], h-full, w-full, size-full, size-[500px]";
+declare const Card: {
+    <T extends React.ElementType = "div">({ children, header, headerBgColor, footer, footerBgColor, hideHeaderBorder, borderRadius, elevation, variant, padding, margin, className, overflow, bgColor, height, width, minHeight, maxHeight, minWidth, maxWidth, borderStyle, interactive, as, linkComponent, ...restProps }: CardProps<T> & {
+        ref?: ForwardedRef<ComponentRef<T>>;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default Card;