@yuno-payments/dashboard-design-system 0.0.88 → 0.0.89

package/dist/components/atoms/access-denied-alert/access-denied-alert.d.ts

@@ -1,6 +1,9 @@
 import { HTMLAttributes } from 'react';
 import { IconName } from '../icon';
 import { IconWeight } from '@phosphor-icons/react';
+/**
+ * Props for the AccessDeniedAlert component
+ */
 interface AccessDeniedAlertProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * Icon name to display on the left side.
@@ -18,5 +21,18 @@ interface AccessDeniedAlertProps extends HTMLAttributes<HTMLDivElement> {
      */
     text?: string;
 }
+/**
+ * Alert component for displaying access denied / permission error messages.
+ * Shows an icon and customizable message for unauthorized access scenarios.
+ *
+ * @example
+ * ```tsx
+ * <AccessDeniedAlert />
+ * <AccessDeniedAlert
+ *   iconName="Lock"
+ *   text="You need admin permissions to access this feature"
+ * />
+ * ```
+ */
 declare const AccessDeniedAlert: import('react').ForwardRefExoticComponent<AccessDeniedAlertProps & import('react').RefAttributes<HTMLDivElement>>;
 export { AccessDeniedAlert, type AccessDeniedAlertProps };

package/dist/components/atoms/accordion/accordion.d.ts

@@ -1,26 +1,92 @@
 import { HTMLAttributes, ReactNode } from 'react';
 import type * as AccordionPrimitive from "@radix-ui/react-accordion";
+/**
+ * Props for the Accordion component.
+ * Supports both single and multiple selection modes.
+ */
 type AccordionProps = (AccordionPrimitive.AccordionSingleProps & {
+    /**
+     * Single selection mode - only one item can be expanded at a time
+     */
     type: "single";
+    /**
+     * Accordion items
+     */
     children: ReactNode;
+    /**
+     * Additional CSS classes
+     */
     className?: string;
 }) | (AccordionPrimitive.AccordionMultipleProps & {
+    /**
+     * Multiple selection mode - multiple items can be expanded simultaneously
+     */
     type: "multiple";
+    /**
+     * Accordion items
+     */
     children: ReactNode;
+    /**
+     * Additional CSS classes
+     */
     className?: string;
 });
+/**
+ * Collapsible content sections organized in an accordion pattern.
+ * Supports single or multiple open items at once.
+ *
+ * @example
+ * ```tsx
+ * <Accordion type="single" collapsible>
+ *   <AccordionItem value="item-1">
+ *     <AccordionTrigger>Section 1</AccordionTrigger>
+ *     <AccordionContent>Content 1</AccordionContent>
+ *   </AccordionItem>
+ * </Accordion>
+ * ```
+ */
 declare const Accordion: import('react').ForwardRefExoticComponent<AccordionProps & import('react').RefAttributes<HTMLDivElement>>;
+/**
+ * Props for the AccordionItem component
+ */
 interface AccordionItemProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Content of the accordion item (trigger and content)
+     */
     children: ReactNode;
+    /**
+     * Unique identifier for the accordion item
+     */
     value: string;
 }
+/**
+ * Individual accordion section container
+ */
 declare const AccordionItem: import('react').ForwardRefExoticComponent<AccordionItemProps & import('react').RefAttributes<HTMLDivElement>>;
+/**
+ * Props for the AccordionTrigger component
+ */
 interface AccordionTriggerProps extends HTMLAttributes<HTMLButtonElement> {
+    /**
+     * Text or elements to display in the trigger button
+     */
     children: ReactNode;
 }
+/**
+ * Clickable header that toggles the accordion item
+ */
 declare const AccordionTrigger: import('react').ForwardRefExoticComponent<AccordionTriggerProps & import('react').RefAttributes<HTMLButtonElement>>;
+/**
+ * Props for the AccordionContent component
+ */
 interface AccordionContentProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Content to display when the accordion item is expanded
+     */
     children: ReactNode;
 }
+/**
+ * Collapsible content area of the accordion item
+ */
 declare const AccordionContent: import('react').ForwardRefExoticComponent<AccordionContentProps & import('react').RefAttributes<HTMLDivElement>>;
 export { Accordion, AccordionItem, AccordionTrigger, AccordionContent, type AccordionProps, type AccordionItemProps, type AccordionTriggerProps, type AccordionContentProps, };

package/dist/components/atoms/alert/alert.d.ts

@@ -1,10 +1,31 @@
 import { Alert as ShadcnAlert } from '../../../vendor/shadcn/alert';
 import { ComponentProps } from 'react';
 import { IconName } from '../icon';
+/**
+ * Props for the Alert component
+ */
 interface AlertProps extends Omit<ComponentProps<typeof ShadcnAlert>, "children"> {
+    /**
+     * Optional icon to display at the start of the alert
+     */
     icon?: IconName;
+    /**
+     * Alert title/heading
+     */
     title?: string;
+    /**
+     * Alert description/body text
+     */
     description?: string;
 }
+/**
+ * Alert component for displaying informational, success, warning, or error messages.
+ *
+ * @example
+ * ```tsx
+ * <Alert variant="default" icon="Info" title="Information" description="This is an info alert" />
+ * <Alert variant="destructive" icon="Warning" title="Error" description="Something went wrong" />
+ * ```
+ */
 declare const Alert: import('react').ForwardRefExoticComponent<Omit<AlertProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
 export { Alert, type AlertProps };

package/dist/components/atoms/avatar/avatar-group.d.ts

@@ -1,9 +1,37 @@
 import { AvatarProps } from './avatar';
 import * as React from "react";
+/**
+ * Props for the AvatarGroup component
+ */
 export interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Avatar components to display in the group
+     */
     children: React.ReactNode;
+    /**
+     * Maximum number of avatars to display before showing "+N" badge
+     * @default 3
+     */
     max?: number;
+    /**
+     * Size for all avatars in the group
+     * @default "default"
+     */
     size?: AvatarProps["size"];
 }
+/**
+ * Displays multiple avatars in an overlapping stack.
+ * Shows remaining count when exceeding max.
+ *
+ * @example
+ * ```tsx
+ * <AvatarGroup max={3} size="lg">
+ *   <Avatar name="User 1" />
+ *   <Avatar name="User 2" />
+ *   <Avatar name="User 3" />
+ *   <Avatar name="User 4" />
+ * </AvatarGroup>
+ * ```
+ */
 declare const AvatarGroup: React.ForwardRefExoticComponent<AvatarGroupProps & React.RefAttributes<HTMLDivElement>>;
 export { AvatarGroup };

package/dist/components/atoms/avatar/avatar.d.ts

@@ -4,11 +4,36 @@ import { Avatar as ShadcnAvatar } from '../../../vendor/shadcn/avatar';
 declare const avatarVariants: (props?: ({
     size?: "default" | "xs" | "sm" | "lg" | "xl" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/**
+ * Props for the Avatar component
+ */
 export interface AvatarProps extends ComponentProps<typeof ShadcnAvatar>, VariantProps<typeof avatarVariants> {
+    /**
+     * Image source URL
+     */
     src?: string;
+    /**
+     * Alternative text for the image
+     */
     alt?: string;
+    /**
+     * User name to generate initials from if image fails to load
+     */
     name?: string;
+    /**
+     * Custom fallback content (overrides initials)
+     */
     fallback?: string | ReactNode;
 }
+/**
+ * User avatar component with automatic fallback to initials or icon.
+ *
+ * @example
+ * ```tsx
+ * <Avatar src="/user.jpg" name="John Doe" size="lg" />
+ * <Avatar name="Jane Smith" size="default" />
+ * <Avatar fallback={<CustomIcon />} />
+ * ```
+ */
 declare const Avatar: import('react').ForwardRefExoticComponent<Omit<AvatarProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
 export { Avatar };

package/dist/components/atoms/badge/badge.d.ts

@@ -1,12 +1,40 @@
 import { ComponentProps } from 'react';
 import { Badge as ShadcnBadge } from '../../../vendor/shadcn/badge';
 import { Icon, IconName } from '../icon';
+/**
+ * Props for the Badge component
+ */
 interface BadgeProps extends ComponentProps<typeof ShadcnBadge> {
+    /**
+     * Icon to display at the start (left side) of the badge
+     */
     startIcon?: IconName;
+    /**
+     * Icon to display at the end (right side) of the badge
+     */
     endIcon?: IconName;
+    /**
+     * Additional props to pass to the start icon
+     */
     startIconProps?: Partial<ComponentProps<typeof Icon>>;
+    /**
+     * Additional props to pass to the end icon
+     */
     endIconProps?: Partial<ComponentProps<typeof Icon>>;
+    /**
+     * Text content of the badge
+     */
     children?: string;
 }
+/**
+ * Badge component for displaying labels, statuses, or categories with optional icons.
+ *
+ * @example
+ * ```tsx
+ * <Badge variant="default">Active</Badge>
+ * <Badge variant="secondary" startIcon="CheckCircle">Completed</Badge>
+ * <Badge variant="destructive" endIcon="X">Error</Badge>
+ * ```
+ */
 declare const Badge: import('react').ForwardRefExoticComponent<Omit<BadgeProps, "ref"> & import('react').RefAttributes<HTMLSpanElement>>;
 export { Badge, type BadgeProps };

package/dist/components/atoms/button/button.d.ts

@@ -2,16 +2,60 @@ import { ComponentProps, ReactNode } from 'react';
 import { Icon, IconName } from '../icon';
 type ButtonVariant = "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
 type ButtonSize = "default" | "sm" | "lg" | "icon";
+/**
+ * Props for the Button component
+ */
 interface ButtonProps extends Omit<ComponentProps<"button">, "children"> {
+    /**
+     * Visual style variant of the button
+     * @default "default"
+     */
     variant?: ButtonVariant;
+    /**
+     * Size of the button
+     * @default "default"
+     */
     size?: ButtonSize;
+    /**
+     * When true, button renders as Slot component to pass props to child element
+     * @default false
+     */
     asChild?: boolean;
+    /**
+     * Icon to display at the start (left side) of the button
+     */
     startIcon?: IconName;
+    /**
+     * Icon to display at the end (right side) of the button
+     */
     endIcon?: IconName;
+    /**
+     * Additional props to pass to the start icon
+     */
     startIconProps?: Partial<ComponentProps<typeof Icon>>;
+    /**
+     * Additional props to pass to the end icon
+     */
     endIconProps?: Partial<ComponentProps<typeof Icon>>;
+    /**
+     * Shows loading spinner and disables the button
+     * @default false
+     */
     loading?: boolean;
+    /**
+     * Button content (text, elements, etc.)
+     */
     children?: ReactNode;
 }
+/**
+ * Versatile button component with icon support and loading state.
+ *
+ * @example
+ * ```tsx
+ * <Button variant="default">Click me</Button>
+ * <Button startIcon="Plus" size="sm">Add Item</Button>
+ * <Button loading disabled>Saving...</Button>
+ * ```
+ */
 declare const Button: import('react').ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
 export { Button, type ButtonProps };

package/dist/components/atoms/card/card.d.ts

@@ -1,33 +1,100 @@
 import { HTMLAttributes, ReactNode } from 'react';
 import { CardProps as ShadcnCardProps } from '../../../vendor/shadcn/card';
+/**
+ * Props for the Card component
+ */
 interface CardProps extends ShadcnCardProps {
+    /**
+     * Content to display in the card
+     */
     children: ReactNode;
     /**
      * Visual variant of the card
      * - `default`: Standard gray border
      * - `active`: Blue border for active/selected state
+     * @default "default"
      */
     variant?: "default" | "active";
 }
+/**
+ * Container card component with header, content, and footer sections.
+ *
+ * @example
+ * ```tsx
+ * <Card variant="default">
+ *   <CardHeader>
+ *     <CardTitle>Title</CardTitle>
+ *     <CardDescription>Description</CardDescription>
+ *   </CardHeader>
+ *   <CardContent>Content goes here</CardContent>
+ *   <CardFooter>Footer actions</CardFooter>
+ * </Card>
+ * ```
+ */
 declare const Card: import('react').ForwardRefExoticComponent<CardProps & import('react').RefAttributes<HTMLDivElement>>;
+/**
+ * Props for the CardHeader component
+ */
 interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Content of the card header (typically CardTitle and CardDescription)
+     */
     children: ReactNode;
 }
+/**
+ * Header section of a card
+ */
 declare const CardHeader: import('react').ForwardRefExoticComponent<CardHeaderProps & import('react').RefAttributes<HTMLDivElement>>;
+/**
+ * Props for the CardTitle component
+ */
 interface CardTitleProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Title text or elements
+     */
     children: ReactNode;
 }
+/**
+ * Title element within a card header
+ */
 declare const CardTitle: import('react').ForwardRefExoticComponent<CardTitleProps & import('react').RefAttributes<HTMLDivElement>>;
+/**
+ * Props for the CardDescription component
+ */
 interface CardDescriptionProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Description text or elements
+     */
     children: ReactNode;
 }
+/**
+ * Description element within a card header
+ */
 declare const CardDescription: import('react').ForwardRefExoticComponent<CardDescriptionProps & import('react').RefAttributes<HTMLDivElement>>;
+/**
+ * Props for the CardContent component
+ */
 interface CardContentProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Main content of the card
+     */
     children: ReactNode;
 }
+/**
+ * Main content section of a card
+ */
 declare const CardContent: import('react').ForwardRefExoticComponent<CardContentProps & import('react').RefAttributes<HTMLDivElement>>;
+/**
+ * Props for the CardFooter component
+ */
 interface CardFooterProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Footer content (typically action buttons)
+     */
     children: ReactNode;
 }
+/**
+ * Footer section of a card
+ */
 declare const CardFooter: import('react').ForwardRefExoticComponent<CardFooterProps & import('react').RefAttributes<HTMLDivElement>>;
 export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, type CardProps, type CardHeaderProps, type CardTitleProps, type CardDescriptionProps, type CardContentProps, type CardFooterProps, };

package/dist/components/atoms/checkbox/checkbox.d.ts

@@ -1,9 +1,36 @@
 import { ComponentProps, ChangeEvent } from 'react';
 import { Checkbox as ShadcnCheckbox } from '../../../vendor/shadcn/checkbox';
+/**
+ * Props for the Checkbox component
+ */
 export interface CheckboxProps extends Omit<ComponentProps<typeof ShadcnCheckbox>, "children" | "onCheckedChange"> {
+    /**
+     * Label text displayed next to the checkbox
+     */
     label?: string;
+    /**
+     * Optional description text displayed below the label
+     */
     description?: string;
+    /**
+     * Callback fired when the checkbox state changes
+     * Provides a synthetic ChangeEvent compatible with react-hook-form
+     */
     onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
 }
+/**
+ * Checkbox component with optional label and description.
+ * Compatible with react-hook-form through synthetic ChangeEvent.
+ *
+ * @example
+ * ```tsx
+ * <Checkbox
+ *   label="Accept terms and conditions"
+ *   description="You must agree to continue"
+ *   checked={accepted}
+ *   onChange={(e) => setAccepted(e.target.checked)}
+ * />
+ * ```
+ */
 declare const Checkbox: import('react').ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
 export { Checkbox };

package/dist/components/atoms/combobox/combobox.d.ts

@@ -1,3 +1,21 @@
 import { ComboboxProps } from './types';
+/**
+ * Multi-select combobox component with search and chips display.
+ * Features include searchable options, chip badges for selected items, and "delete all" functionality.
+ *
+ * @example
+ * ```tsx
+ * <Combobox
+ *   label="Select Users"
+ *   value={selectedIds}
+ *   options={[
+ *     { value: '1', label: 'John Doe' },
+ *     { value: '2', label: 'Jane Smith' }
+ *   ]}
+ *   onChange={(newValues) => setSelectedIds(newValues)}
+ *   onCloseChip={(id) => handleRemove(id)}
+ * />
+ * ```
+ */
 declare const ComboboxComponent: import('react').ForwardRefExoticComponent<ComboboxProps & import('react').RefAttributes<HTMLButtonElement>>;
 export { ComboboxComponent as Combobox };

package/dist/components/atoms/combobox/types.d.ts

@@ -1,31 +1,120 @@
 import { ReactNode } from 'react';
+/**
+ * Represents a single option in the combobox
+ */
 export interface ComboboxOption {
+    /**
+     * Unique value for the option
+     */
     value: string | number;
+    /**
+     * Display label for the option
+     */
     label: string;
+    /**
+     * Additional properties can be added
+     */
     [key: string]: string | number;
 }
+/**
+ * Props for the Combobox component
+ */
 export interface ComboboxProps {
+    /**
+     * Array of selected option values
+     */
     value: Array<string | number>;
+    /**
+     * Array of available options
+     */
     options: ComboboxOption[];
+    /**
+     * Placeholder text when no options are selected
+     * @default "Select options..."
+     */
     selectPlaceholder?: string;
+    /**
+     * Placeholder text for the search input
+     * @default "Search..."
+     */
     searchPlaceholder?: string;
+    /**
+     * Callback fired when selection changes
+     */
     onChange: (values: Array<string | number>) => void;
+    /**
+     * Callback fired when a chip/tag is removed
+     */
     onCloseChip?: (value: string | number) => void;
+    /**
+     * Property name to use as the value identifier
+     * @default "value"
+     */
     valueProp?: string;
+    /**
+     * Whether the combobox should take full width
+     * @default false
+     */
     fullWidth?: boolean;
+    /**
+     * Whether the combobox is disabled
+     * @default false
+     */
     disabled?: boolean;
+    /**
+     * Whether to show the search input
+     * @default true
+     */
     withSearch?: boolean;
+    /**
+     * Maximum number of chips to display before showing "+N"
+     * @default 10
+     */
     limitTags?: number;
+    /**
+     * Maximum height of the options list in pixels
+     * @default 320
+     */
     maxHeightList?: number;
+    /**
+     * Custom empty state component when no options match search
+     */
     emptyState?: ReactNode;
+    /**
+     * Label text displayed above the combobox
+     */
     label?: string;
+    /**
+     * Helper text displayed below the combobox
+     */
     description?: string;
+    /**
+     * Error message displayed below the combobox
+     */
     error?: string;
+    /**
+     * Configuration for "Delete All" chip functionality
+     */
     deleteAll?: {
+        /**
+         * Label for the delete all chip
+         */
         label: string;
+        /**
+         * Minimum number of selected items to show delete all
+         */
         length: number;
+        /**
+         * Callback fired when delete all is clicked
+         */
         onClick: () => void;
     };
+    /**
+     * Additional CSS classes
+     */
     className?: string;
+    /**
+     * HTML id attribute
+     */
     id?: string;
 }

package/dist/components/atoms/currency-field/currency-field.d.ts

@@ -3,14 +3,50 @@ declare const currencyFieldVariants: (props?: ({
     size?: "base" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl" | null | undefined;
     fontWeight?: "bold" | "normal" | "medium" | "semibold" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/**
+ * Props for the CurrencyField component
+ */
 export interface CurrencyFieldProps extends VariantProps<typeof currencyFieldVariants> {
+    /**
+     * Numeric value to format as currency
+     */
     value: number;
+    /**
+     * ISO 4217 currency code
+     * @default "USD"
+     */
     currency?: string;
+    /**
+     * Locale(s) for number formatting
+     * @default "en"
+     */
     locales?: string | string[];
+    /**
+     * Additional CSS classes for the container
+     */
     className?: string;
+    /**
+     * Whether to display the currency code
+     * @default true
+     */
     showCurrencyCode?: boolean;
+    /**
+     * Additional CSS classes for the value
+     */
     valueClassName?: string;
+    /**
+     * Additional CSS classes for the currency code
+     */
     codeClassName?: string;
 }
+/**
+ * Displays formatted currency values with optional currency code.
+ *
+ * @example
+ * ```tsx
+ * <CurrencyField value={1234.56} currency="USD" size="lg" />
+ * <CurrencyField value={999} currency="EUR" showCurrencyCode={false} />
+ * ```
+ */
 declare const CurrencyField: import('react').ForwardRefExoticComponent<CurrencyFieldProps & import('react').RefAttributes<HTMLDivElement>>;
 export { CurrencyField };

package/dist/components/atoms/date-picker/date-picker.d.ts

@@ -1,4 +1,19 @@
 import { DatePicker as DatePickerPrimitive, DatePickerProps as DatePickerPrimitiveProps } from '../../../vendor/shadcn/date-picker';
+/**
+ * Props for the DatePicker component
+ */
 export type DatePickerProps = DatePickerPrimitiveProps;
+/**
+ * Calendar-based date picker for selecting a single date.
+ *
+ * @example
+ * ```tsx
+ * <DatePicker
+ *   value={selectedDate}
+ *   onChange={(date) => setSelectedDate(date)}
+ *   placeholder="Pick a date"
+ * />
+ * ```
+ */
 declare const DatePicker: typeof DatePickerPrimitive;
 export { DatePicker };