@boostdev/design-system-components 1.0.2 → 1.1.0

package/dist/index.d.cts

@@ -2,43 +2,44 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode, HTMLAttributes, ElementType, ComponentPropsWithoutRef, ReactElement, ButtonHTMLAttributes, MouseEventHandler, InputHTMLAttributes, HTMLInputTypeAttribute, SelectHTMLAttributes, TextareaHTMLAttributes, CSSProperties, JSX } from 'react';
 export { cn } from '@boostdev/design-system-foundation';
 
+/** Allows consumers to pass a CSS class to the component's root element. */
+type WithClassName = {
+    className?: string | undefined;
+};
+
 interface AccordionItem {
     id: string;
     title: ReactNode;
     content: ReactNode;
     disabled?: boolean;
 }
-interface AccordionProps {
+interface AccordionProps extends WithClassName {
     items: AccordionItem[];
     allowMultiple?: boolean;
     defaultOpen?: string[];
-    className?: string;
 }
 declare function Accordion({ items, allowMultiple, defaultOpen, className, }: Readonly<AccordionProps>): react_jsx_runtime.JSX.Element;
 
-interface AlertProps {
+interface AlertProps extends WithClassName {
     variant?: 'info' | 'success' | 'warning' | 'error';
     icon?: ReactNode;
     title?: string;
     children: ReactNode;
     onDismiss?: () => void;
-    className?: string;
 }
 declare function Alert({ variant, icon, title, children, onDismiss, className, }: Readonly<AlertProps>): react_jsx_runtime.JSX.Element;
 
-interface AvatarProps {
+interface AvatarProps extends WithClassName {
     src?: string;
     alt?: string;
     name?: string;
     size?: 'small' | 'medium' | 'large';
-    className?: string;
 }
 declare function Avatar({ src, alt, name, size, className }: Readonly<AvatarProps>): react_jsx_runtime.JSX.Element;
 
-interface BadgeProps {
+interface BadgeProps extends WithClassName {
     children: ReactNode;
     variant?: 'primary' | 'secondary' | 'success' | 'error' | 'warning';
-    className?: string;
 }
 declare function Badge({ children, variant, className }: BadgeProps): react_jsx_runtime.JSX.Element;
 
@@ -46,13 +47,12 @@ interface BreadcrumbItem {
     label: string;
     href?: string;
 }
-interface BreadcrumbProps {
+interface BreadcrumbProps extends WithClassName {
     items: BreadcrumbItem[];
-    className?: string;
 }
 declare function Breadcrumb({ items, className }: Readonly<BreadcrumbProps>): react_jsx_runtime.JSX.Element;
 
-interface CollapsibleProps extends Omit<HTMLAttributes<HTMLDetailsElement>, 'onToggle'> {
+interface CollapsibleProps extends WithClassName, Omit<HTMLAttributes<HTMLDetailsElement>, 'onToggle'> {
     /** The trigger label — always visible */
     summary: ReactNode;
     /** The content revealed when expanded */
@@ -68,24 +68,21 @@ interface CollapsibleProps extends Omit<HTMLAttributes<HTMLDetailsElement>, 'onT
      * (native <details name="…"> behaviour).
      */
     name?: string;
-    className?: string;
 }
 declare function Collapsible({ summary, children, open, defaultOpen, onToggle, name, className, ...rest }: Readonly<CollapsibleProps>): react_jsx_runtime.JSX.Element;
 
-interface CalendarProps {
+interface CalendarProps extends WithClassName {
     value?: Date;
     defaultValue?: Date;
     min?: Date;
     max?: Date;
     onChange?: (date: Date) => void;
-    className?: string;
 }
 declare function Calendar({ value, defaultValue, min, max, onChange, className }: Readonly<CalendarProps>): react_jsx_runtime.JSX.Element;
 
-interface CarouselProps {
+interface CarouselProps extends WithClassName {
     items: ReactNode[];
     label: string;
-    className?: string;
 }
 declare function Carousel({ items, label, className }: Readonly<CarouselProps>): react_jsx_runtime.JSX.Element;
 
@@ -93,83 +90,73 @@ interface DescriptionItem {
     term: ReactNode;
     details: ReactNode | ReactNode[];
 }
-interface DescriptionListProps {
+interface DescriptionListProps extends WithClassName {
     items: DescriptionItem[];
     layout?: 'stacked' | 'inline';
-    className?: string;
 }
 declare function DescriptionList({ items, layout, className }: Readonly<DescriptionListProps>): react_jsx_runtime.JSX.Element;
 
-type LinkOwnProps<T extends ElementType> = {
+type LinkOwnProps<T extends ElementType> = WithClassName & {
     as?: T;
     children: ReactNode;
     variant?: 'default' | 'subtle' | 'standalone';
     external?: boolean;
     externalLabel?: string;
-    className?: string;
 };
 type LinkProps<T extends ElementType = 'a'> = LinkOwnProps<T> & Omit<ComponentPropsWithoutRef<T>, keyof LinkOwnProps<T>>;
 declare function Link<T extends ElementType = 'a'>({ as, children, variant, external, externalLabel, className, ...props }: LinkProps<T>): react_jsx_runtime.JSX.Element;
 
-interface LoadingProps {
+interface LoadingProps extends WithClassName {
     size?: 'small' | 'medium' | 'large';
-    className?: string;
 }
 declare function Loading({ size, className }: LoadingProps): react_jsx_runtime.JSX.Element;
 
-interface NotificationBannerProps {
+interface NotificationBannerProps extends WithClassName {
     variant?: 'info' | 'success' | 'warning' | 'error';
     children: ReactNode;
     action?: ReactNode;
     onDismiss?: () => void;
-    className?: string;
 }
 declare function NotificationBanner({ variant, children, action, onDismiss, className, }: Readonly<NotificationBannerProps>): react_jsx_runtime.JSX.Element;
 
-interface PaginationProps {
+interface PaginationProps extends WithClassName {
     currentPage: number;
     totalPages: number;
     onPageChange: (page: number) => void;
-    className?: string;
 }
 declare function Pagination({ currentPage, totalPages, onPageChange, className, }: Readonly<PaginationProps>): react_jsx_runtime.JSX.Element;
 
-interface ProgressProps {
+interface ProgressProps extends WithClassName {
     value: number;
     max?: number;
     label: string;
     showLabel?: boolean;
     size?: 'small' | 'medium' | 'large';
-    className?: string;
 }
 declare function Progress({ value, max, label, showLabel, size, className, }: Readonly<ProgressProps>): react_jsx_runtime.JSX.Element;
 
-interface ProgressCircleProps {
+interface ProgressCircleProps extends WithClassName {
     value: number;
     max?: number;
     label: string;
     showValue?: boolean;
     size?: 'small' | 'medium' | 'large';
-    className?: string;
 }
 declare function ProgressCircle({ value, max, label, showValue, size, className, }: Readonly<ProgressCircleProps>): react_jsx_runtime.JSX.Element;
 
-interface SeparatorProps {
+interface SeparatorProps extends WithClassName {
     orientation?: 'horizontal' | 'vertical';
-    className?: string;
 }
 declare function Separator({ orientation, className }: Readonly<SeparatorProps>): react_jsx_runtime.JSX.Element;
 
-interface SkeletonProps {
-    className?: string;
-}
+type SkeletonProps = WithClassName;
 declare function Skeleton({ className }: SkeletonProps): react_jsx_runtime.JSX.Element;
 
-interface SkipLinkProps {
+interface SkipLinkProps extends WithClassName {
     href?: string;
     children?: string;
 }
-declare function SkipLink({ href, children }: SkipLinkProps): react_jsx_runtime.JSX.Element;
+declare function SkipLink({ href, children, className }: SkipLinkProps): react_jsx_runtime.JSX.Element;
 
 interface TableColumn<Row> {
     key: string;
@@ -177,14 +164,13 @@ interface TableColumn<Row> {
     sortable?: boolean;
     render?: (row: Row) => ReactNode;
 }
-interface TableProps<Row extends Record<string, unknown>> {
+interface TableProps<Row extends Record<string, unknown>> extends WithClassName {
     columns: TableColumn<Row>[];
     rows: Row[];
     caption?: string;
     sortKey?: string;
     sortDirection?: 'asc' | 'desc';
     onSort?: (key: string, direction: 'asc' | 'desc') => void;
-    className?: string;
 }
 declare function Table<Row extends Record<string, unknown>>({ columns, rows, caption, sortKey, sortDirection, onSort, className, }: Readonly<TableProps<Row>>): react_jsx_runtime.JSX.Element;
 
@@ -194,31 +180,28 @@ interface TabItem {
     content: ReactNode;
     disabled?: boolean;
 }
-interface TabsProps {
+interface TabsProps extends WithClassName {
     tabs: TabItem[];
     defaultTab?: string;
-    className?: string;
 }
 declare function Tabs({ tabs, defaultTab, className }: Readonly<TabsProps>): react_jsx_runtime.JSX.Element;
 
-interface TooltipProps {
+interface TooltipProps extends WithClassName {
     content: ReactNode;
     placement?: 'top' | 'bottom' | 'left' | 'right';
     children: ReactElement;
-    className?: string;
 }
 declare function Tooltip({ content, placement, children, className, }: Readonly<TooltipProps>): react_jsx_runtime.JSX.Element;
 
 type TypographyVariant = 'h1' | 'h2' | 'h3' | 'body' | 'body_s';
-interface TypographyProps {
+interface TypographyProps extends WithClassName {
     variant?: TypographyVariant;
     component?: ElementType;
     children: ReactNode;
-    className?: string;
 }
 declare function Typography({ variant, component, children, className }: TypographyProps): react_jsx_runtime.JSX.Element;
 
-interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement | HTMLAnchorElement> {
+interface ButtonProps extends WithClassName, ButtonHTMLAttributes<HTMLButtonElement | HTMLAnchorElement> {
     href?: string;
     variant?: 'default' | 'ghost';
     type?: 'button' | 'submit' | 'reset';
@@ -226,7 +209,6 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement | HTMLAncho
     iconStart?: ReactNode;
     iconEnd?: ReactNode;
     children?: ReactNode;
-    className?: string;
     disabled?: boolean;
     hasPulse?: boolean;
     onClick?: MouseEventHandler<HTMLElement>;
@@ -245,30 +227,27 @@ interface CommandItem {
     shortcut?: string;
     onSelect: () => void;
 }
-interface CommandProps {
+interface CommandProps extends WithClassName {
     isOpen: boolean;
     onClose: () => void;
     items: CommandItem[];
     placeholder?: string;
-    className?: string;
 }
 declare function Command({ isOpen, onClose, items, placeholder, className, }: Readonly<CommandProps>): react_jsx_runtime.JSX.Element;
 
-interface DialogProps {
+interface DialogProps extends WithClassName {
     children: ReactNode;
-    className?: string;
     isOpen?: boolean;
     onClose?: () => void;
 }
 declare function Dialog({ children, isOpen, className, onClose }: DialogProps): react_jsx_runtime.JSX.Element;
 
-interface DrawerProps {
+interface DrawerProps extends WithClassName {
     isOpen: boolean;
     onClose: () => void;
     title: ReactNode;
     children: ReactNode;
     side?: 'left' | 'right';
-    className?: string;
     ariaLabel?: string;
 }
 declare function Drawer({ isOpen, onClose, title, children, side, ariaLabel, className, }: Readonly<DrawerProps>): react_jsx_runtime.JSX.Element;
@@ -281,27 +260,24 @@ interface DropdownMenuItem {
     icon?: ReactElement;
     separator?: boolean;
 }
-interface DropdownMenuProps {
+interface DropdownMenuProps extends WithClassName {
     trigger: ReactElement;
     items: DropdownMenuItem[];
     placement?: 'bottom-start' | 'bottom-end';
-    className?: string;
 }
 declare function DropdownMenu({ trigger, items, placement, className, }: Readonly<DropdownMenuProps>): react_jsx_runtime.JSX.Element;
 
-interface PopoverProps {
+interface PopoverProps extends WithClassName {
     children: ReactElement;
     content: ReactNode;
     placement?: 'top' | 'bottom' | 'left' | 'right';
-    className?: string;
     'aria-label'?: string;
 }
 declare function Popover({ children, content, placement, className, 'aria-label': ariaLabel, }: Readonly<PopoverProps>): react_jsx_runtime.JSX.Element;
 
-interface RatingProps {
+interface RatingProps extends WithClassName {
     value: number;
     max?: number;
-    className?: string;
 }
 declare function Rating({ value, max, className }: RatingProps): react_jsx_runtime.JSX.Element;
 
@@ -314,23 +290,21 @@ declare function ToastProvider({ children }: {
 }): react_jsx_runtime.JSX.Element;
 declare function useToast(): ToastContextType;
 
-interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+interface CheckboxProps extends WithClassName, Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
     label: ReactNode;
     name: string;
     error?: string;
     hint?: string;
-    className?: string;
 }
 declare function Checkbox({ label, name, error, hint, className, ...props }: CheckboxProps): react_jsx_runtime.JSX.Element;
 
-interface CheckboxGroupProps {
+interface CheckboxGroupProps extends WithClassName {
     legend: string;
     children: ReactNode;
     error?: string;
     hint?: string;
     required?: boolean;
     disabled?: boolean;
-    className?: string;
 }
 declare function CheckboxGroup({ legend, children, error, hint, required, disabled, className, }: Readonly<CheckboxGroupProps>): react_jsx_runtime.JSX.Element;
 
@@ -339,7 +313,7 @@ interface ComboboxOption {
     label: string;
     disabled?: boolean;
 }
-interface ComboboxProps {
+interface ComboboxProps extends WithClassName {
     label: ReactNode;
     name: string;
     options: ComboboxOption[];
@@ -349,11 +323,10 @@ interface ComboboxProps {
     disabled?: boolean;
     error?: string;
     hint?: string;
-    className?: string;
 }
 declare function Combobox({ label, name, options, placeholder, value, onChange, disabled, error, hint, className, }: Readonly<ComboboxProps>): react_jsx_runtime.JSX.Element;
 
-interface FileInputProps {
+interface FileInputProps extends WithClassName {
     label: string;
     name: string;
     accept?: string;
@@ -363,22 +336,20 @@ interface FileInputProps {
     error?: string;
     hint?: string;
     onChange?: (files: FileList | null) => void;
-    className?: string;
 }
 declare function FileInput({ label, name, accept, multiple, disabled, required, error, hint, onChange, className, }: Readonly<FileInputProps>): react_jsx_runtime.JSX.Element;
 
-interface FormInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+interface FormInputProps extends WithClassName, Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
     label: ReactNode;
     name: string;
     type?: Exclude<HTMLInputTypeAttribute, 'checkbox' | 'radio' | 'file'>;
     ariaLabel?: string;
     error?: string;
     hint?: string;
-    className?: string;
 }
 declare function FormInput({ label, name, ariaLabel, error, hint, className, required, ...props }: FormInputProps): react_jsx_runtime.JSX.Element;
 
-interface NumberInputProps {
+interface NumberInputProps extends WithClassName {
     label: string;
     name: string;
     value?: number;
@@ -390,28 +361,25 @@ interface NumberInputProps {
     error?: string;
     hint?: string;
     onChange?: (value: number) => void;
-    className?: string;
 }
 declare function NumberInput({ label, name, value, defaultValue, min, max, step, disabled, error, hint, onChange, className, }: Readonly<NumberInputProps>): react_jsx_runtime.JSX.Element;
 
-interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+interface RadioProps extends WithClassName, Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
     label: ReactNode;
     name: string;
     description?: string;
     error?: string;
     hint?: string;
-    className?: string;
 }
 declare function Radio({ label, name, description, error, hint, className, ...props }: RadioProps): react_jsx_runtime.JSX.Element;
 
-interface RadioGroupProps {
+interface RadioGroupProps extends WithClassName {
     legend: string;
     children: ReactNode;
     error?: string;
     hint?: string;
     required?: boolean;
     disabled?: boolean;
-    className?: string;
 }
 declare function RadioGroup({ legend, children, error, hint, required, disabled, className, }: Readonly<RadioGroupProps>): react_jsx_runtime.JSX.Element;
 
@@ -420,7 +388,7 @@ interface SegmentedControlOption {
     label: ReactNode;
     disabled?: boolean;
 }
-interface SegmentedControlProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'size'> {
+interface SegmentedControlProps extends WithClassName, Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'size'> {
     name: string;
     options: SegmentedControlOption[];
     /** Controlled selected value */
@@ -430,7 +398,6 @@ interface SegmentedControlProps extends Omit<InputHTMLAttributes<HTMLInputElemen
     onChange?: (value: string) => void;
     disabled?: boolean;
     size?: 'small' | 'medium' | 'large';
-    className?: string;
     'aria-label'?: string;
 }
 declare function SegmentedControl({ name, options, value, defaultValue, onChange, disabled, size, className, 'aria-label': ariaLabel, ...rest }: Readonly<SegmentedControlProps>): react_jsx_runtime.JSX.Element;
@@ -440,18 +407,17 @@ interface SelectOption {
     label: string;
     disabled?: boolean;
 }
-interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'children'> {
+interface SelectProps extends WithClassName, Omit<SelectHTMLAttributes<HTMLSelectElement>, 'children'> {
     label: ReactNode;
     name: string;
     options: SelectOption[];
     placeholder?: string;
     error?: string;
     hint?: string;
-    className?: string;
 }
 declare function Select({ label, name, options, placeholder, error, hint, className, required, ...props }: Readonly<SelectProps>): react_jsx_runtime.JSX.Element;
 
-interface SliderProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+interface SliderProps extends WithClassName, Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
     label: string;
     name: string;
     min?: number;
@@ -459,41 +425,36 @@ interface SliderProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'
     showValue?: boolean;
     error?: string;
     hint?: string;
-    className?: string;
 }
 declare function Slider({ label, name, min, max, showValue, error, hint, className, onChange, ...props }: Readonly<SliderProps>): react_jsx_runtime.JSX.Element;
 
-interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size' | 'prefix'> {
+interface SwitchProps extends WithClassName, Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size' | 'prefix'> {
     label: string;
     name: string;
     size?: 'small' | 'medium' | 'large';
     error?: string;
     hint?: string;
-    className?: string;
     prefix?: ReactNode;
 }
 declare function Switch({ label, name, size, error, hint, className, prefix, ...props }: Readonly<SwitchProps>): react_jsx_runtime.JSX.Element;
 
-interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+interface TextareaProps extends WithClassName, TextareaHTMLAttributes<HTMLTextAreaElement> {
     label: ReactNode;
     name: string;
     error?: string;
     hint?: string;
-    className?: string;
 }
 declare function Textarea({ label, name, error, hint, className, required, ...props }: Readonly<TextareaProps>): react_jsx_runtime.JSX.Element;
 
-interface ButtonGroupProps {
+interface ButtonGroupProps extends WithClassName {
     children: ReactNode;
-    className?: string;
     variant?: 'flow' | 'card' | 'modal' | 'content';
     'aria-label'?: string;
 }
 declare function ButtonGroup({ children, className, variant, 'aria-label': ariaLabel }: ButtonGroupProps): react_jsx_runtime.JSX.Element;
 
-interface CardProps {
+interface CardProps extends WithClassName {
     children: ReactNode;
-    className?: string | undefined;
     variant?: 'default' | 'elevated' | 'outlined';
     padding?: 'none' | 'small' | 'medium' | 'large';
     textAlign?: 'start' | 'center' | 'end';
@@ -504,21 +465,19 @@ interface CardProps {
 declare function Card({ children, className, variant, padding, textAlign, style, onClick, 'aria-label': ariaLabel, }: CardProps): react_jsx_runtime.JSX.Element;
 
 type IntrinsicElement = keyof JSX.IntrinsicElements;
-type SectionHeaderProps = {
+type SectionHeaderProps = WithClassName & {
     title: string;
     subtitle?: string;
-    className?: string;
     alignment?: 'start' | 'center' | 'end';
     size?: 'small' | 'medium' | 'large';
     titleAs?: IntrinsicElement;
 };
 declare function SectionHeader({ title, subtitle, className, alignment, size, titleAs }: Readonly<SectionHeaderProps>): react_jsx_runtime.JSX.Element;
 
-interface IconWrapperProps {
+interface IconWrapperProps extends WithClassName {
     children: ReactNode;
-    className?: string;
     'aria-hidden'?: boolean | 'true' | 'false';
 }
 declare function IconWrapper({ children, className, 'aria-hidden': ariaHidden }: IconWrapperProps): react_jsx_runtime.JSX.Element;
 
-export { Accordion, type AccordionItem, Alert, Avatar, Badge, Breadcrumb, type BreadcrumbItem, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, Calendar, Card, Carousel, Checkbox, CheckboxGroup, type CheckboxGroupProps, Collapsible, type CollapsibleProps, Combobox, type ComboboxOption, Command, type CommandItem, type DescriptionItem, DescriptionList, Dialog, Drawer, DropdownMenu, type DropdownMenuItem, FileInput, FormInput, IconWrapper, type IconWrapperProps, Link, Loading, NotificationBanner, NumberInput, Pagination, Popover, Progress, ProgressCircle, Radio, RadioGroup, type RadioGroupProps, Rating, SectionHeader, SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, Select, type SelectOption, Separator, Skeleton, SkipLink, Slider, Switch, type TabItem, Table, type TableColumn, Tabs, Textarea, ToastProvider, Tooltip, Typography, useToast };
+export { Accordion, type AccordionItem, Alert, Avatar, Badge, Breadcrumb, type BreadcrumbItem, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, Calendar, Card, Carousel, Checkbox, CheckboxGroup, type CheckboxGroupProps, Collapsible, type CollapsibleProps, Combobox, type ComboboxOption, Command, type CommandItem, type DescriptionItem, DescriptionList, Dialog, Drawer, DropdownMenu, type DropdownMenuItem, FileInput, FormInput, IconWrapper, type IconWrapperProps, Link, Loading, NotificationBanner, NumberInput, Pagination, Popover, Progress, ProgressCircle, Radio, RadioGroup, type RadioGroupProps, Rating, SectionHeader, SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, Select, type SelectOption, Separator, Skeleton, SkipLink, Slider, Switch, type TabItem, Table, type TableColumn, Tabs, Textarea, ToastProvider, Tooltip, Typography, type WithClassName, useToast };