@boostdev/design-system-components 0.1.1

package/dist/index.d.cts

@@ -0,0 +1,453 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { JSX } from 'react/jsx-runtime';
+import { ReactNode, ElementType, ComponentPropsWithoutRef, ReactElement, MouseEventHandler, InputHTMLAttributes, SelectHTMLAttributes, TextareaHTMLAttributes, CSSProperties } from 'react';
+export { cn } from '@boostdev/design-system-foundation';
+
+interface AccordionItem {
+    id: string;
+    title: ReactNode;
+    content: ReactNode;
+    disabled?: boolean;
+}
+interface AccordionProps {
+    items: AccordionItem[];
+    allowMultiple?: boolean;
+    defaultOpen?: string[];
+    className?: string;
+}
+declare function Accordion({ items, allowMultiple, defaultOpen, className, }: Readonly<AccordionProps>): react_jsx_runtime.JSX.Element;
+
+interface AlertProps {
+    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 {
+    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 {
+    children: ReactNode;
+    variant?: 'primary' | 'secondary' | 'success' | 'error' | 'warning';
+    className?: string;
+}
+declare function Badge({ children, variant, className }: BadgeProps): react_jsx_runtime.JSX.Element;
+
+interface BreadcrumbItem {
+    label: string;
+    href?: string;
+}
+interface BreadcrumbProps {
+    items: BreadcrumbItem[];
+    className?: string;
+}
+declare function Breadcrumb({ items, className }: Readonly<BreadcrumbProps>): react_jsx_runtime.JSX.Element;
+
+interface CalendarProps {
+    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 {
+    items: ReactNode[];
+    label: string;
+    className?: string;
+}
+declare function Carousel({ items, label, className }: Readonly<CarouselProps>): react_jsx_runtime.JSX.Element;
+
+interface DescriptionItem {
+    term: ReactNode;
+    details: ReactNode | ReactNode[];
+}
+interface DescriptionListProps {
+    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> = {
+    as?: T;
+    children: ReactNode;
+    variant?: 'default' | 'subtle' | 'standalone';
+    external?: boolean;
+    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, className, ...props }: LinkProps<T>): react_jsx_runtime.JSX.Element;
+
+interface LoadingProps {
+    size?: 'small' | 'medium' | 'large';
+    className?: string;
+}
+declare function Loading({ size, className }: LoadingProps): react_jsx_runtime.JSX.Element;
+
+interface NotificationBannerProps {
+    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 {
+    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 {
+    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 {
+    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 {
+    orientation?: 'horizontal' | 'vertical';
+    className?: string;
+}
+declare function Separator({ orientation, className }: Readonly<SeparatorProps>): react_jsx_runtime.JSX.Element;
+
+interface SkeletonProps {
+    className?: string;
+}
+declare function Skeleton({ className }: SkeletonProps): react_jsx_runtime.JSX.Element;
+
+interface SkipLinkProps {
+    href?: string;
+    children?: string;
+}
+declare function SkipLink({ href, children }: SkipLinkProps): react_jsx_runtime.JSX.Element;
+
+interface TableColumn<Row> {
+    key: string;
+    header: ReactNode;
+    sortable?: boolean;
+    render?: (row: Row) => ReactNode;
+}
+interface TableProps<Row extends Record<string, unknown>> {
+    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;
+
+interface TabItem {
+    id: string;
+    label: ReactNode;
+    content: ReactNode;
+    disabled?: boolean;
+}
+interface TabsProps {
+    tabs: TabItem[];
+    defaultTab?: string;
+    className?: string;
+}
+declare function Tabs({ tabs, defaultTab, className }: Readonly<TabsProps>): react_jsx_runtime.JSX.Element;
+
+interface TooltipProps {
+    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 {
+    variant?: TypographyVariant;
+    component?: ElementType;
+    children: ReactNode;
+    className?: string;
+}
+declare function Typography({ variant, component, children, className }: TypographyProps): react_jsx_runtime.JSX.Element;
+
+interface ButtonProps {
+    href?: string;
+    variant?: 'primary' | 'secondary';
+    type?: 'button' | 'submit' | 'reset';
+    size?: 'small' | 'medium' | 'large';
+    iconStart?: ReactNode;
+    iconEnd?: ReactNode;
+    children?: ReactNode;
+    className?: string;
+    disabled?: boolean;
+    hasPulse?: boolean;
+    onClick?: MouseEventHandler<HTMLElement>;
+    target?: string;
+    rel?: string;
+    'aria-label'?: string;
+    'aria-describedby'?: string;
+}
+declare function Button({ children, className, variant, type, iconStart, iconEnd, size, hasPulse, href, target, rel, disabled, onClick, ...rest }: Readonly<ButtonProps>): react_jsx_runtime.JSX.Element;
+
+interface CommandItem {
+    id: string;
+    label: string;
+    description?: string;
+    group?: string;
+    shortcut?: string;
+    onSelect: () => void;
+}
+interface CommandProps {
+    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 {
+    children: ReactNode;
+    className?: string;
+    isVisible?: boolean;
+    handleClose?: () => void;
+}
+declare function Dialog({ children, isVisible, className, handleClose }: DialogProps): react_jsx_runtime.JSX.Element;
+
+interface DrawerProps {
+    isOpen: boolean;
+    onClose: () => void;
+    title: string;
+    children: ReactNode;
+    side?: 'left' | 'right';
+    className?: string;
+}
+declare function Drawer({ isOpen, onClose, title, children, side, className, }: Readonly<DrawerProps>): react_jsx_runtime.JSX.Element;
+
+interface DropdownMenuItem {
+    id: string;
+    label: string;
+    onClick?: () => void;
+    disabled?: boolean;
+    icon?: ReactElement;
+    separator?: boolean;
+}
+interface DropdownMenuProps {
+    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 {
+    children: ReactElement;
+    content: ReactNode;
+    placement?: 'top' | 'bottom' | 'left' | 'right';
+    className?: string;
+}
+declare function Popover({ children, content, placement, className, }: Readonly<PopoverProps>): react_jsx_runtime.JSX.Element;
+
+interface RatingProps {
+    value: number;
+    max?: number;
+    className?: string;
+}
+declare function Rating({ value, max, className }: RatingProps): react_jsx_runtime.JSX.Element;
+
+type ToastVariant = 'success' | 'error' | 'info';
+interface ToastContextType {
+    showToast: (message: string, variant: ToastVariant) => void;
+}
+declare function ToastProvider({ children }: {
+    children: ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare function useToast(): ToastContextType;
+
+interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+    label: string;
+    name: string;
+    error?: string;
+    hint?: string;
+    className?: string;
+}
+declare function Checkbox({ label, name, error, hint, className, ...props }: CheckboxProps): react_jsx_runtime.JSX.Element;
+
+interface ComboboxOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+interface ComboboxProps {
+    label: ReactNode;
+    name: string;
+    options: ComboboxOption[];
+    placeholder?: string;
+    value?: string;
+    onChange?: (value: string) => void;
+    error?: string;
+    hint?: string;
+    className?: string;
+}
+declare function Combobox({ label, name, options, placeholder, value, onChange, error, hint, className, }: Readonly<ComboboxProps>): react_jsx_runtime.JSX.Element;
+
+interface FileInputProps {
+    label: string;
+    name: string;
+    accept?: string;
+    multiple?: boolean;
+    disabled?: boolean;
+    error?: string;
+    hint?: string;
+    onChange?: (files: FileList | null) => void;
+    className?: string;
+}
+declare function FileInput({ label, name, accept, multiple, disabled, error, hint, onChange, className, }: Readonly<FileInputProps>): react_jsx_runtime.JSX.Element;
+
+interface FormInputProps extends InputHTMLAttributes<HTMLInputElement> {
+    label: ReactNode;
+    name: string;
+    ariaLabel?: string;
+    error?: string;
+    hint?: string;
+    className?: string;
+}
+declare function FormInput({ label, name, ariaLabel, error, hint, className, ...props }: FormInputProps): react_jsx_runtime.JSX.Element;
+
+interface NumberInputProps {
+    label: string;
+    name: string;
+    value?: number;
+    defaultValue?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    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'> {
+    label: string;
+    name: string;
+    error?: string;
+    hint?: string;
+    className?: string;
+}
+declare function Radio({ label, name, error, hint, className, ...props }: RadioProps): react_jsx_runtime.JSX.Element;
+
+interface SelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+interface SelectProps extends 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, ...props }: Readonly<SelectProps>): react_jsx_runtime.JSX.Element;
+
+interface SliderProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+    label: string;
+    name: string;
+    min?: number;
+    max?: number;
+    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'> {
+    label: string;
+    name: string;
+    size?: 'small' | 'medium' | 'large';
+    error?: string;
+    hint?: string;
+    className?: string;
+}
+declare function Switch({ label, name, size, error, hint, className, ...props }: Readonly<SwitchProps>): react_jsx_runtime.JSX.Element;
+
+interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+    label: ReactNode;
+    name: string;
+    error?: string;
+    hint?: string;
+    className?: string;
+}
+declare function Textarea({ label, name, error, hint, className, ...props }: Readonly<TextareaProps>): react_jsx_runtime.JSX.Element;
+
+interface ButtonGroupProps {
+    children: ReactNode;
+    className?: string;
+    variant?: 'flow' | 'card' | 'modal' | 'content';
+}
+declare function ButtonGroup({ children, className, variant }: ButtonGroupProps): react_jsx_runtime.JSX.Element;
+
+interface CardProps {
+    children: ReactNode;
+    className?: string;
+    variant?: 'default' | 'elevated' | 'outlined';
+    padding?: 'none' | 'small' | 'medium' | 'large';
+    textAlign?: 'start' | 'center' | 'end';
+    style?: CSSProperties;
+    onClick?: () => void;
+}
+declare function Card({ children, className, variant, padding, textAlign, style, onClick, }: CardProps): react_jsx_runtime.JSX.Element;
+
+type IntrinsicElements = JSX.IntrinsicElements;
+type IntrinsicElement = keyof IntrinsicElements;
+type SectionHeaderProps = {
+    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>): JSX.Element;
+
+interface Props {
+    children: ReactNode;
+    className?: string;
+}
+declare function IconWrapper({ children, className }: Props): react_jsx_runtime.JSX.Element;
+
+export { Accordion, Alert, Avatar, Badge, Breadcrumb, Button, ButtonGroup, Calendar, Card, Carousel, Checkbox, Combobox, Command, type CommandItem, DescriptionList, Dialog, Drawer, DropdownMenu, FileInput, FormInput, IconWrapper, Link, Loading, NotificationBanner, NumberInput, Pagination, Popover, Progress, ProgressCircle, Radio, Rating, SectionHeader, Select, Separator, Skeleton, SkipLink, Slider, Switch, Table, Tabs, Textarea, ToastProvider, Tooltip, Typography, useToast };