@zvoove/unity-ui 2.29.1 → 2.32.1

package/dist/llms.txt

@@ -30,7 +30,7 @@ Dark mode: add `data-theme="dark"` to a parent element.
 ## Responsive Props
 
 Many props accept `ResponsiveType<T>`, meaning either a direct value OR a breakpoint object.
-Breakpoints (from smallest to largest): `minimum` (0px), `mobile` (320px), `tablet` (768px), `laptop` (1024px), `desktop` (1440px).
+Breakpoints (from smallest to largest): `minimum` (0px), `mobile` (768px), `tablet` (1024px), `laptop` (1280px), `desktop` (1536px), `wide` (1920px), `ultrawide` (2560px).
 Values cascade upward — setting `mobile` applies to all larger breakpoints until overridden.
 
 ```tsx
@@ -39,7 +39,10 @@ Values cascade upward — setting `mobile` applies to all larger breakpoints unt
 
 // Responsive object — values cascade up from smallest to largest
 <Button size={{ mobile: 'sm', tablet: 'md', desktop: 'lg' }} />
-// mobile: sm → tablet: md → laptop: md (inherited) → desktop: lg
+// mobile: sm → tablet: md → laptop: md (inherited) → desktop: lg → wide: lg → ultrawide: lg
+
+// Use wide / ultrawide to fine-tune large displays beyond `desktop`
+<Grid columns={{ mobile: 1, tablet: 2, desktop: 3, wide: 4, ultrawide: 6 }} />
 
 // Common patterns:
 <Stack direction={{ mobile: 'column', tablet: 'row' }} />           // Stack vertically on mobile, horizontally on tablet+
@@ -65,7 +68,7 @@ import { Stack } from '@zvoove/unity-ui';
 
 <Stack
   direction="column"           // ResponsiveType<'row' | 'row-reverse' | 'column' | 'column-reverse'>
-  gap="md"                     // ResponsiveType<SpacingKeys> - none|xs2|xs|sm|md|lg|xl|xl2|xl3|xl4|xl5|xl6|xl7
+  gap="md"                     // ResponsiveType<Gap> where Gap = SpacingKeys | { row?: SpacingKeys; column?: SpacingKeys }
   align="center"               // ResponsiveType<AlignItems> - default: 'baseline' — set explicitly every time
   justify="space-between"      // ResponsiveType<JustifyContent>
   wrap="wrap"                  // ResponsiveType<FlexWrap>
@@ -84,14 +87,14 @@ Common patterns:
 // Row with icon + label — must set align="center" or they baseline-align
 <Stack direction="row" gap="sm" align="center">
   <Icon name="info" />
-  <Typography variant="body" size="medium">Label</Typography>
+  <Typography variant="body" size="md">Label</Typography>
 </Stack>
 
 // Divider spanning full width — Stack must have width="100%"
 <Stack direction="column" gap="md" width="100%">
-  <Typography variant="title" size="large">Title</Typography>
+  <Typography variant="title" size="lg">Title</Typography>
   <Divider />
-  <Typography variant="body" size="medium">Content</Typography>
+  <Typography variant="body" size="md">Content</Typography>
 </Stack>
 
 // Page layout — stacks vertically on mobile, horizontally on tablet+
@@ -109,7 +112,14 @@ Common patterns:
 // Centered content
 <Stack direction="column" align="center" justify="center" gap="md" height="100%">
   <Icon name="check-circle" size="2xl" />
-  <Typography variant="headline" size="medium">Success!</Typography>
+  <Typography variant="headline" size="md">Success!</Typography>
+</Stack>
+
+// Asymmetric row/column gap — wrap row with different vertical vs horizontal spacing
+<Stack direction="row" wrap="wrap" gap={{ row: 'lg', column: 'sm' }}>
+  <Chip>One</Chip>
+  <Chip>Two</Chip>
+  <Chip>Three</Chip>
 </Stack>
 ```
 
@@ -121,7 +131,7 @@ import { Grid } from '@zvoove/unity-ui';
 <Grid
   columns={3}                  // ResponsiveType<number | string> - default: 1
   rows={1}                     // ResponsiveType<number | string> - default: 1
-  gap="md"                     // ResponsiveType<SpacingKeys>
+  gap="md"                     // ResponsiveType<Gap> where Gap = SpacingKeys | { row?: SpacingKeys; column?: SpacingKeys }
   padding="none"               // ResponsiveType<Padding>
   margin="none"                // ResponsiveType<Margin>
   width="100%"                 // ResponsiveType<number | string>
@@ -132,6 +142,8 @@ import { Grid } from '@zvoove/unity-ui';
 </Grid>
 ```
 
+The `gap` prop accepts either a single `SpacingKeys` (applied to both axes) or an object with `row` / `column` keys to control each axis independently. Both forms are fully responsive — any per-breakpoint value can itself be a `SpacingKeys` or a `{ row, column }` object, so the two shapes can be mixed across breakpoints.
+
 Common patterns:
 ```tsx
 // Responsive card grid — 1 col on mobile, 2 on tablet, 3 on desktop
@@ -152,6 +164,29 @@ Common patterns:
   <Grid.Item colSpan={2}><Card>Main content</Card></Grid.Item>
   <Grid.Item colSpan={1}><Card>Sidebar</Card></Grid.Item>
 </Grid>
+
+// Asymmetric row vs column gap — large vertical breathing room, tight horizontal columns
+<Grid columns={3} gap={{ row: 'xl3', column: 'xs' }}>
+  <Card>1</Card>
+  <Card>2</Card>
+  <Card>3</Card>
+  <Card>4</Card>
+  <Card>5</Card>
+  <Card>6</Card>
+</Grid>
+
+// Responsive object gap — single key on minimum, per-axis on larger breakpoints
+<Grid
+  columns={{ minimum: 1, mobile: 2, tablet: 3, desktop: 4 }}
+  gap={{
+    minimum: 'xs2',
+    mobile: { row: 'md', column: 'xs' },
+    tablet: { row: 'lg', column: 'sm' },
+    desktop: { row: 'xl3', column: 'lg' },
+  }}
+>
+  {items.map((item) => <Card key={item.id}>{item.title}</Card>)}
+</Grid>
 ```
 
 ### Card
@@ -178,8 +213,8 @@ Common patterns:
 // Content card with internal layout using Stack (NOT Card for layout)
 <Card variant="outlined" padding="lg" elevation={1}>
   <Stack direction="column" gap="md">
-    <Typography variant="title" size="large">Profile</Typography>
-    <Typography variant="body" size="medium">User details here.</Typography>
+    <Typography variant="title" size="lg">Profile</Typography>
+    <Typography variant="body" size="md">User details here.</Typography>
   </Stack>
 </Card>
 
@@ -187,8 +222,8 @@ Common patterns:
 <Card variant="outlined" padding="none">
   <img src="/banner.jpg" style={{ width: '100%' }} />
   <Stack padding="md" gap="sm">
-    <Typography variant="title" size="medium">Article title</Typography>
-    <Typography variant="body" size="medium">Article excerpt...</Typography>
+    <Typography variant="title" size="md">Article title</Typography>
+    <Typography variant="body" size="md">Article excerpt...</Typography>
   </Stack>
 </Card>
 
@@ -242,7 +277,7 @@ import { Typography } from '@zvoove/unity-ui';
 
 <Typography
   variant="body"               // 'display' | 'headline' | 'title' | 'body' | 'label'
-  size="medium"                // 'small' | 'medium' | 'large'
+  size="md"                    // 'sm' | 'md' | 'lg' (responsive — accepts breakpoint object). 'small' | 'medium' | 'large' are accepted but deprecated; will be removed in v3.0.0
   as="p"                       // 'p' | 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
   color="on-surface"           // ForegroundColors
   textAlign="left"             // 'left' | 'center' | 'right'
@@ -258,22 +293,22 @@ import { Typography } from '@zvoove/unity-ui';
 Variant guide:
 ```tsx
 // Page heading
-<Typography variant="display" size="large" as="h1">Page Title</Typography>
+<Typography variant="display" size="lg" as="h1">Page Title</Typography>
 
 // Section heading
-<Typography variant="headline" size="medium" as="h2">Section Title</Typography>
+<Typography variant="headline" size="md" as="h2">Section Title</Typography>
 
 // Card/dialog title
-<Typography variant="title" size="large">Card Title</Typography>
+<Typography variant="title" size="lg">Card Title</Typography>
 
 // Body text (default)
-<Typography variant="body" size="medium">Paragraph text goes here.</Typography>
+<Typography variant="body" size="md">Paragraph text goes here.</Typography>
 
 // Small labels, captions
-<Typography variant="label" size="small" color="on-surface-variant">Updated 2 hours ago</Typography>
+<Typography variant="label" size="sm" color="on-surface-variant">Updated 2 hours ago</Typography>
 
 // Truncate long text to 2 lines
-<Typography variant="body" size="medium" truncate={2}>Very long text that will be cut off...</Typography>
+<Typography variant="body" size="md" truncate={2}>Very long text that will be cut off...</Typography>
 ```
 
 ---
@@ -646,7 +681,7 @@ import { Tag } from '@zvoove/unity-ui';
   variant="solid"              // 'solid' | 'outlined' | 'ghost'
   color="green"                // 'green' | 'yellow' | 'pink' | 'steel-blue' | 'error' | 'primary' | 'neutral'
   tone="dark"                  // 'dark' | 'light' (only with variant='solid')
-  size="medium"                // 'large' | 'medium' | 'small'
+  size="md"                    // 'sm' | 'md' | 'lg' (responsive — accepts breakpoint object). 'small' | 'medium' | 'large' are accepted but deprecated; will be removed in v3.0.0
   icon="Check"                 // CommonIconNames
 />
 ```
@@ -677,7 +712,7 @@ User avatar display. When `image` is provided and `type` is omitted, type is aut
 import { Avatar, AvatarGroup } from '@zvoove/unity-ui';
 
 <Avatar
-  size="large"                 // ResponsiveType<'small' | 'medium' | 'large'>
+  size="md"                    // ResponsiveType<'sm' | 'md' | 'lg'>. 'small' | 'medium' | 'large' are accepted but deprecated; will be removed in v3.0.0
   type="initials"              // 'initials' | 'check' | 'avatar' | 'image' | 'zvoove' — auto-inferred as 'image' when image prop is set
   name="Max Mustermann"        // string
   image="/path/to/photo.jpg"   // string — when set, type defaults to 'image'
@@ -771,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>
 />
 ```
 
@@ -784,8 +826,8 @@ Common patterns:
       content: (
         <Stack direction="row" gap="sm" align="center">
           <Icon name="remark" size="xs" />
-          <Typography variant="body" size="medium">Inbox</Typography>
-          <div className="ml-auto"><Tag label="3" color="error" size="small" /></div>
+          <Typography variant="body" size="md">Inbox</Typography>
+          <div className="ml-auto"><Tag label="3" color="error" size="sm" /></div>
         </Stack>
       ),
     },
@@ -810,11 +852,23 @@ 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">
     <Icon name="users" size="md" weight="light" />
-    <Typography variant="label" size="large">Team members</Typography>
+    <Typography variant="label" size="lg">Team members</Typography>
   </Stack>
   <Divider />
   <List items={[{ id: 'anna', content: 'Anna Mueller' }]} />
@@ -1006,7 +1060,7 @@ import { Dialog } from '@zvoove/unity-ui';
   padding="md"                 // CardProps['padding'] — use "none" for edge-to-edge content
   zIndex={20}                  // number
 >
-  <Typography variant="title" size="large">Dialog Title</Typography>
+  <Typography variant="title" size="lg">Dialog Title</Typography>
   <Typography>Dialog content goes here.</Typography>
   <Stack direction="row" gap="sm" justify="flex-end">
     <Button variant="outlined" onClick={handleClose}>Cancel</Button>
@@ -1024,7 +1078,7 @@ Common patterns:
   size={{ mobile: 'fullscreen', tablet: 'md' }}
 >
   <Stack direction="column" gap="lg">
-    <Typography variant="title" size="large">Edit Profile</Typography>
+    <Typography variant="title" size="lg">Edit Profile</Typography>
     <TextField label="Name" name="name" value={name} onChange={setName} />
     <TextField label="Email" name="email" value={email} onChange={setEmail} />
     <Stack direction="row" gap="sm" justify="flex-end">
@@ -1037,8 +1091,8 @@ Common patterns:
 // Confirmation dialog (small)
 <Dialog open={showConfirm} onClose={() => setShowConfirm(false)} size="sm">
   <Stack direction="column" gap="md">
-    <Typography variant="title" size="medium">Delete item?</Typography>
-    <Typography variant="body" size="medium">This action cannot be undone.</Typography>
+    <Typography variant="title" size="md">Delete item?</Typography>
+    <Typography variant="body" size="md">This action cannot be undone.</Typography>
     <Stack direction="row" gap="sm" justify="flex-end">
       <Button variant="outlined" onClick={() => setShowConfirm(false)}>Cancel</Button>
       <Button variant="negative" icon="delete" onClick={handleDelete}>Delete</Button>
@@ -1572,6 +1626,17 @@ file-empty, file-pdf, file-folder, file-image, file-video, file-video-2, file-au
 
 Use `getIconForFileExtension(extension)` to resolve a file extension (e.g., "pdf") to its icon name automatically.
 
+### Logos
+
+Brand and product logos. By default rendered in their duotone brand colors (auto-switching to white in dark mode). Pass a `color` prop to render a flat single-color version using `currentColor`:
+
+zvoove, zvoove-one, zvoove-recruit, zvoove-invoice-monitor, zvoove-go, zvoove-intelligence, zvoove-free, zvoove-work-expert, zvoove-elevate, zvoove-cashlink, zvoove-docs-ai.
+
+```tsx
+<Icon name="zvoove-one" size="xl" />
+<Icon name="zvoove-go" color="on-surface" />
+```
+
 ---
 
 ## EXAMPLE: Contact Form
@@ -1592,7 +1657,7 @@ function ContactForm() {
   return (
     <Card padding="xl" elevation={1} variant="outlined" maxWidth={600}>
       <Stack direction="column" gap="lg">
-        <Typography variant="headline" size="medium" as="h2">
+        <Typography variant="headline" size="md" as="h2">
           Contact Us
         </Typography>
 

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>>;