@juspay/blend-design-system 0.0.1

package/README.md

@@ -0,0 +1,177 @@
+# Blend Design System
+
+A comprehensive React component library and design system by Juspay, built with TypeScript and styled-components.
+
+[![npm version](https://badge.fury.io/js/@juspay%2Fblend-design-system.svg)](https://badge.fury.io/js/@juspay%2Fblend-design-system)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+## 🚀 Features
+
+- **50+ Production-ready Components** - Buttons, Forms, Navigation, Data Display, and more
+- **TypeScript Support** - Full type safety and IntelliSense support
+- **Accessible by Default** - Built with accessibility best practices using Radix UI primitives
+- **Customizable Theming** - Flexible design tokens and theme system
+- **Modern React** - Built for React 19+ with hooks and modern patterns
+- **Tree Shakeable** - Import only what you need
+- **Styled Components** - CSS-in-JS with full theming support
+
+## 📦 Installation
+
+```bash
+npm install @juspay/blend-design-system
+# or
+yarn add @juspay/blend-design-system
+# or
+pnpm add @juspay/blend-design-system
+```
+
+## 🎯 Quick Start
+
+```tsx
+import React from 'react'
+import { Button, Alert, ThemeProvider } from '@juspay/blend-design-system'
+import '@juspay/blend-design-system/style.css'
+
+function App() {
+    return (
+        <ThemeProvider>
+            <div>
+                <Alert variant="success">Welcome to Blend Design System!</Alert>
+                <Button variant="primary" size="medium">
+                    Get Started
+                </Button>
+            </div>
+        </ThemeProvider>
+    )
+}
+
+export default App
+```
+
+## 📚 Components
+
+### Form Components
+
+- **Button** - Primary, secondary, and various button styles
+- **ButtonGroup** - Group related buttons together
+- **Inputs** - Text, number, textarea, and specialized input components
+- **Checkbox** - Accessible checkbox with custom styling
+- **Radio** - Radio button groups
+- **Switch** - Toggle switches
+- **Slider** - Range and value sliders
+- **SingleSelect** - Dropdown selection
+- **MultiSelect** - Multiple option selection
+
+### Navigation
+
+- **Tabs** - Horizontal and vertical tab navigation
+- **Breadcrumb** - Navigation breadcrumbs
+- **Menu** - Dropdown and context menus
+- **Sidebar** - Collapsible sidebar navigation
+
+### Data Display
+
+- **DataTable** - Feature-rich data tables with sorting, filtering
+- **StatCard** - Statistical information cards
+- **Charts** - Data visualization components
+- **Avatar** - User profile pictures
+- **AvatarGroup** - Multiple avatar display
+- **Tags** - Label and category tags
+- **SplitTag** - Tags with actions
+
+### Feedback
+
+- **Alert** - Success, error, warning, and info alerts
+- **Modal** - Dialog and modal windows
+- **Tooltip** - Contextual help tooltips
+- **Snackbar** - Toast notifications
+- **Popover** - Floating content containers
+
+### Layout
+
+- **Accordion** - Collapsible content sections
+- **DateRangePicker** - Date range selection
+
+## 🎨 Design Tokens
+
+Blend includes a comprehensive set of design tokens for consistent styling:
+
+```tsx
+import { foundationToken } from '@juspay/blend-design-system'
+
+// Colors
+foundationToken.colors.primary[500] // #2B7FFF
+foundationToken.colors.gray[100] // #F2F4F8
+
+// Typography
+foundationToken.fontSize.headingLG // 24px
+foundationToken.fontWeight[600] // 600
+
+// Spacing
+foundationToken.spacing[16] // 16px
+foundationToken.borderRadius[8] // 8px
+```
+
+## 🔧 Theming
+
+Customize the design system to match your brand:
+
+```tsx
+import { ThemeProvider, createTheme } from '@juspay/blend-design-system'
+
+const customTheme = createTheme({
+    colors: {
+        primary: {
+            500: '#your-brand-color',
+        },
+    },
+})
+
+function App() {
+    return <ThemeProvider theme={customTheme}>{/* Your app */}</ThemeProvider>
+}
+```
+
+## 📖 Documentation
+
+- **[Component Documentation](https://juspay.design/)** - Complete component API and examples
+- **[Storybook](https://storybook.juspay.design/)** - Interactive component playground
+- **[Design Guidelines](https://juspay.design/guidelines)** - Design principles and usage guidelines
+
+## 🛠️ Development
+
+```bash
+# Clone the repository
+git clone https://github.com/juspay/blend-design-system.git
+
+# Install dependencies
+pnpm install
+
+# Start development
+pnpm dev
+
+# Build the library
+pnpm build
+
+# Run tests
+pnpm test
+```
+
+## 📝 Contributing
+
+We welcome contributions! Please see our [Contributing Guide](https://github.com/juspay/blend-design-system/blob/main/CONTRIBUTING.md) for details.
+
+## 📄 License
+
+MIT © [Juspay Technologies](https://juspay.in)
+
+## 🔗 Links
+
+- **Homepage**: [https://juspay.design/](https://juspay.design/)
+- **Repository**: [https://github.com/juspay/blend-design-system](https://github.com/juspay/blend-design-system)
+- **Issues**: [https://github.com/juspay/blend-design-system/issues](https://github.com/juspay/blend-design-system/issues)
+- **Storybook**: [https://storybook.juspay.design/](https://storybook.juspay.design/)
+
+---
+
+Built with ❤️ by the Juspay Design Team

package/dist/assets/main.css

@@ -0,0 +1 @@
+.gradient-blur{position:absolute;z-index:2;top:0;right:0;bottom:0;left:0}.gradient-blur>div,.gradient-blur:before,.gradient-blur:after{position:absolute;top:0;right:0;bottom:0;left:0}.gradient-blur:before{content:"";z-index:30;-webkit-backdrop-filter:blur(.5px);backdrop-filter:blur(.5px);mask:linear-gradient(to top,rgba(0,0,0,0) 0%,rgba(0,0,0,1) 12.5%,rgba(0,0,0,1) 25%,rgba(0,0,0,0) 37.5%)}.gradient-blur>div:nth-of-type(1){z-index:32;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);mask:linear-gradient(to top,rgba(0,0,0,0) 12.5%,rgba(0,0,0,1) 25%,rgba(0,0,0,1) 37.5%,rgba(0,0,0,0) 50%)}.gradient-blur>div:nth-of-type(2){z-index:33;-webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px);mask:linear-gradient(to top,rgba(0,0,0,0) 25%,rgba(0,0,0,1) 37.5%,rgba(0,0,0,1) 50%,rgba(0,0,0,0) 62.5%)}.gradient-blur>div:nth-of-type(3){z-index:34;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);mask:linear-gradient(to top,rgba(0,0,0,0) 37.5%,rgba(0,0,0,1) 50%,rgba(0,0,0,1) 62.5%,rgba(0,0,0,0) 75%)}.gradient-blur>div:nth-of-type(4){z-index:35;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);mask:linear-gradient(to top,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 62.5%,rgba(0,0,0,1) 75%,rgba(0,0,0,0) 87.5%)}.gradient-blur>div:nth-of-type(5){z-index:36;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);mask:linear-gradient(to top,rgba(0,0,0,0) 62.5%,rgba(0,0,0,1) 75%,rgba(0,0,0,1) 87.5%,rgba(0,0,0,0) 100%)}.gradient-blur>div:nth-of-type(6){z-index:37;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);mask:linear-gradient(to top,rgba(0,0,0,0) 75%,rgba(0,0,0,1) 87.5%,rgba(0,0,0,1) 100%)}.gradient-blur:after{content:"";z-index:38;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);mask:linear-gradient(to top,rgba(0,0,0,0) 87.5%,rgba(0,0,0,1) 100%)}

package/dist/breakpoints/breakPoints.d.ts

@@ -0,0 +1,5 @@
+export type BreakpointType = {
+    sm: number;
+    lg: number;
+};
+export declare const BREAKPOINTS: BreakpointType;

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

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

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

@@ -0,0 +1,6 @@
+import { AccordionItemProps, AccordionType, AccordionChevronPosition } from './types';
+declare const AccordionItem: import('react').ForwardRefExoticComponent<AccordionItemProps & {
+    accordionType?: AccordionType;
+    chevronPosition?: AccordionChevronPosition;
+} & import('react').RefAttributes<HTMLDivElement>>;
+export default AccordionItem;

package/dist/components/Accordion/accordion.tokens.d.ts

@@ -0,0 +1,49 @@
+import { CSSObject } from 'styled-components';
+import { AccordionType } from './types';
+import { FoundationTokenType } from '../../tokens/theme.token';
+export type AccordionState = 'default' | 'hover' | 'active' | 'disabled' | 'open' | 'closed';
+export type AccordionTokenType = {
+    gap: {
+        [key in AccordionType]: CSSObject['gap'];
+    };
+    borderRadius: {
+        [key in AccordionType]: CSSObject['borderRadius'];
+    };
+    item: {
+        trigger: {
+            border: {
+                [key in AccordionType]: {
+                    [key in AccordionState]?: CSSObject['border'];
+                };
+            };
+            padding: {
+                [key in AccordionType]: CSSObject['padding'];
+            };
+            backgroundColor: {
+                [key in AccordionType]: {
+                    [key in AccordionState]?: CSSObject['backgroundColor'];
+                };
+            };
+            title: {
+                fontSize: CSSObject['fontSize'];
+                fontWeight: CSSObject['fontWeight'];
+                color: {
+                    [key in AccordionState]?: CSSObject['color'];
+                };
+            };
+            subtext: {
+                fontSize: CSSObject['fontSize'];
+                gap: CSSObject['gap'];
+                color: {
+                    [key in AccordionState]?: CSSObject['color'];
+                };
+            };
+        };
+        separator: {
+            color: {
+                [key in AccordionType]: CSSObject['color'];
+            };
+        };
+    };
+};
+export declare const getAccordionToken: (foundationToken: FoundationTokenType) => AccordionTokenType;

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

@@ -0,0 +1,3 @@
+export { default as Accordion } from './Accordion';
+export { default as AccordionItem } from './AccordionItem';
+export * from './types';

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

@@ -0,0 +1,29 @@
+import { ReactNode } from 'react';
+export declare enum AccordionType {
+    BORDER = "border",
+    NO_BORDER = "noBorder"
+}
+export declare enum AccordionChevronPosition {
+    LEFT = "left",
+    RIGHT = "right"
+}
+export type AccordionItemProps = {
+    value: string;
+    title: string;
+    subtext?: string;
+    leftSlot?: ReactNode;
+    rightSlot?: ReactNode;
+    subtextSlot?: ReactNode;
+    children: ReactNode;
+    isDisabled?: boolean;
+    className?: string;
+    chevronPosition?: AccordionChevronPosition;
+};
+export type AccordionProps = {
+    children: ReactNode;
+    accordionType?: AccordionType;
+    defaultValue?: string | string[];
+    value?: string | string[];
+    isMultiple?: boolean;
+    onValueChange?: (value: string | string[]) => void;
+};

package/dist/components/Alert/Alert.d.ts

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

package/dist/components/Alert/alert.tokens.d.ts

@@ -0,0 +1,25 @@
+import { CSSObject } from 'styled-components';
+import { AlertStyle, AlertVariant } from './types';
+import { FoundationTokenType } from '../../tokens/theme.token';
+import { BreakpointType } from '../../breakpoints/breakPoints';
+export type AlertTokenType = {
+    padding: CSSObject['padding'];
+    borderRadius: CSSObject['borderRadius'];
+    background: {
+        [key in AlertVariant]: {
+            [key in AlertStyle]: CSSObject['color'];
+        };
+    };
+    border: {
+        [key in AlertVariant]: CSSObject['color'];
+    };
+    button: {
+        [key in AlertVariant]: CSSObject['color'];
+    };
+};
+export type ResponsiveAlertTokens = {
+    [key in keyof BreakpointType]: AlertTokenType;
+};
+declare const alertTokens: AlertTokenType;
+export declare const getAlertTokens: (foundationToken: FoundationTokenType) => ResponsiveAlertTokens;
+export default alertTokens;

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

@@ -0,0 +1,2 @@
+export { default as Alert } from './Alert';
+export * from './types';

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

@@ -0,0 +1,33 @@
+import { ReactNode } from 'react';
+export declare enum AlertVariant {
+    PRIMARY = "primary",
+    SUCCESS = "success",
+    WARNING = "warning",
+    ERROR = "error",
+    PURPLE = "purple",
+    ORANGE = "orange",
+    NEUTRAL = "neutral"
+}
+export declare enum AlertActionPlacement {
+    BOTTOM = "bottom",
+    RIGHT = "right"
+}
+export declare enum AlertStyle {
+    SUBTLE = "subtle",
+    NO_FILL = "noFill"
+}
+export type AlertAction = {
+    label: string;
+    onClick: () => void;
+};
+export type AlertProps = {
+    heading: string;
+    description: string;
+    variant?: AlertVariant;
+    style?: AlertStyle;
+    primaryAction?: AlertAction;
+    secondaryAction?: AlertAction;
+    onClose?: () => void;
+    icon?: ReactNode;
+    actionPlacement?: AlertActionPlacement;
+};

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

@@ -0,0 +1,12 @@
+import { AvatarSize, AvatarShape } from './types';
+declare const Avatar: import('react').ForwardRefExoticComponent<{
+    src?: string;
+    alt?: string;
+    fallback?: React.ReactNode;
+    size?: AvatarSize;
+    shape?: AvatarShape;
+    online?: boolean;
+    leadingSlot?: React.ReactNode;
+    trailingSlot?: React.ReactNode;
+} & Omit<import('react').HTMLAttributes<HTMLDivElement>, "children"> & import('react').RefAttributes<HTMLDivElement>>;
+export default Avatar;

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

@@ -0,0 +1,8 @@
+import { StyledAvatarContainerProps, StyledAvatarIndicatorProps } from './types';
+export declare const StyledAvatarContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledAvatarContainerProps>> & string;
+export declare const StyledAvatarImage: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, never>> & string;
+export declare const StyledAvatarFallback: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledAvatarIndicator: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, StyledAvatarIndicatorProps>> & string;
+export declare const StyledAvatarWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledAvatarLeadingSlot: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledAvatarTrailingSlot: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

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

@@ -0,0 +1,7 @@
+export declare const getInitialsFromText: (text: string) => string;
+export declare const isValidImageUrl: (url: string) => Promise<boolean>;
+export declare const hexToRgb: (hex: string) => {
+    r: number;
+    g: number;
+    b: number;
+} | null;

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

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

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

@@ -0,0 +1,71 @@
+declare const avatarTokens: {
+    container: {
+        background: {
+            default: string;
+        };
+        border: {
+            withImage: string;
+            withoutImage: string;
+        };
+    };
+    text: {
+        color: {
+            default: string;
+        };
+    };
+    indicator: {
+        background: {
+            default: string;
+        };
+        ring: {
+            color: string;
+        };
+    };
+    sizes: {
+        sm: {
+            width: string;
+            height: string;
+            fontSize: string;
+            fontWeight: string;
+            indicatorSize: string;
+            indicatorRingWidth: string;
+            indicatorOffset: string;
+        };
+        md: {
+            width: string;
+            height: string;
+            fontSize: string;
+            fontWeight: string;
+            indicatorSize: string;
+            indicatorRingWidth: string;
+            indicatorOffset: string;
+        };
+        lg: {
+            width: string;
+            height: string;
+            fontSize: string;
+            fontWeight: string;
+            indicatorSize: string;
+            indicatorRingWidth: string;
+            indicatorOffset: string;
+        };
+        xl: {
+            width: string;
+            height: string;
+            fontSize: string;
+            fontWeight: string;
+            indicatorSize: string;
+            indicatorRingWidth: string;
+            indicatorOffset: string;
+        };
+    };
+    shapes: {
+        circular: {
+            borderRadius: string;
+        };
+        rounded: {
+            borderRadius: string;
+        };
+    };
+};
+export default avatarTokens;

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

@@ -0,0 +1,29 @@
+import { HTMLAttributes } from 'react';
+export declare enum AvatarSize {
+    SM = "sm",
+    MD = "md",
+    LG = "lg",
+    XL = "xl"
+}
+export declare enum AvatarShape {
+    CIRCULAR = "circular",
+    ROUNDED = "rounded"
+}
+export type AvatarProps = {
+    src?: string;
+    alt?: string;
+    fallback?: React.ReactNode;
+    size?: AvatarSize;
+    shape?: AvatarShape;
+    online?: boolean;
+    leadingSlot?: React.ReactNode;
+    trailingSlot?: React.ReactNode;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'children'>;
+export type StyledAvatarContainerProps = {
+    $size: AvatarSize;
+    $shape: AvatarShape;
+    $hasImage: boolean;
+};
+export type StyledAvatarIndicatorProps = {
+    $size: AvatarSize;
+};

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

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import { AvatarShape, AvatarSize } from '../Avatar/types';
+declare const AvatarGroup: React.ForwardRefExoticComponent<{
+    avatars: import('./types').AvatarData[];
+    maxCount?: number;
+    size?: AvatarSize;
+    shape?: AvatarShape;
+    selectedAvatarIds?: (string | number)[];
+    onSelectionChange?: (selectedIds: (string | number)[]) => void;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & React.RefAttributes<HTMLDivElement>>;
+export default AvatarGroup;

package/dist/components/AvatarGroup/StyledAvatarGroup.d.ts

@@ -0,0 +1,6 @@
+import { StyledAvatarGroupContainerProps, StyledAvatarWrapperProps, StyledOverflowCounterProps } from './types';
+export declare const StyledAvatarGroupContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledAvatarGroupContainerProps>> & string;
+export declare const StyledAvatarWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledAvatarWrapperProps>> & string;
+export declare const StyledOverflowCounter: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, StyledOverflowCounterProps>> & string;
+export declare const StyledMenuContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const VisuallyHidden: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;

package/dist/components/AvatarGroup/avatarGroupUtils.d.ts

@@ -0,0 +1,24 @@
+import { default as React, RefObject } from 'react';
+import { AvatarData } from './types';
+import { AvatarProps } from '../Avatar/types';
+interface MenuItemProps {
+    id: string;
+    text: string;
+    hasSlotL?: boolean;
+    slotL?: React.ReactNode;
+    onClick?: () => void;
+    data?: Record<string, boolean | string | number>;
+}
+/**
+ * Positions the menu relative to the overflow counter
+ */
+export declare const positionMenu: (menuRef: RefObject<HTMLDivElement>, counterRef: RefObject<HTMLButtonElement>) => void;
+/**
+ * Creates menu items from avatar data array
+ */
+export declare const createMenuItems: (avatars: AvatarData[], selectedIds: (string | number)[], onSelect: (id: string | number) => void, AvatarComponent: React.ComponentType<AvatarProps>) => MenuItemProps[];
+/**
+ * Filters avatars based on search term
+ */
+export declare const filterAvatars: (avatars: AvatarData[], searchTerm: string) => AvatarData[];
+export {};

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

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

package/dist/components/AvatarGroup/token.d.ts

@@ -0,0 +1,89 @@
+declare const avatarGroupTokens: {
+    container: {
+        spacing: {
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+        };
+    };
+    avatar: {
+        stacking: {
+            zIndex: number;
+        };
+        selected: {
+            ringColor: string;
+            ringWidth: string;
+            ringOffset: string;
+        };
+        border: {
+            width: string;
+            color: string;
+        };
+    };
+    overflowCounter: {
+        background: {
+            default: string;
+            hover: string;
+            active: string;
+        };
+        text: {
+            color: string;
+        };
+        border: {
+            width: string;
+            color: string;
+        };
+        sizes: {
+            sm: {
+                width: string;
+                height: string;
+                fontSize: string;
+                fontWeight: string;
+                indicatorSize: string;
+                indicatorRingWidth: string;
+                indicatorOffset: string;
+            };
+            md: {
+                width: string;
+                height: string;
+                fontSize: string;
+                fontWeight: string;
+                indicatorSize: string;
+                indicatorRingWidth: string;
+                indicatorOffset: string;
+            };
+            lg: {
+                width: string;
+                height: string;
+                fontSize: string;
+                fontWeight: string;
+                indicatorSize: string;
+                indicatorRingWidth: string;
+                indicatorOffset: string;
+            };
+            xl: {
+                width: string;
+                height: string;
+                fontSize: string;
+                fontWeight: string;
+                indicatorSize: string;
+                indicatorRingWidth: string;
+                indicatorOffset: string;
+            };
+        };
+        shapes: {
+            circular: {
+                borderRadius: string;
+            };
+            rounded: {
+                borderRadius: string;
+            };
+        };
+    };
+    menu: {
+        spacing: string;
+        zIndex: number;
+    };
+};
+export default avatarGroupTokens;

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

@@ -0,0 +1,29 @@
+import { HTMLAttributes } from 'react';
+import { AvatarProps, AvatarSize, AvatarShape } from '../Avatar/types';
+export interface AvatarData extends Omit<AvatarProps, 'className' | 'id'> {
+    id: string | number;
+    alt?: string;
+    fallback?: string | React.ReactNode;
+}
+export type AvatarGroupProps = {
+    avatars: AvatarData[];
+    maxCount?: number;
+    size?: AvatarSize;
+    shape?: AvatarShape;
+    selectedAvatarIds?: (string | number)[];
+    onSelectionChange?: (selectedIds: (string | number)[]) => void;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'children'>;
+export type StyledAvatarGroupContainerProps = {
+    $spacing?: string;
+};
+export type StyledAvatarWrapperProps = {
+    $index: number;
+    $total: number;
+    $isSelected: boolean;
+    $size: AvatarSize;
+};
+export type StyledOverflowCounterProps = {
+    $size: AvatarSize;
+    $shape: AvatarShape;
+    $isOpen: boolean;
+};