@boostdev/design-system-components 1.2.3 → 1.2.4

package/dist/native/index.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ReactNode } from 'react';
+import { ReactNode, ReactElement } from 'react';
 import { colors } from '@boostdev/design-system-foundation/native';
 export { animation, border, colors, font, spacing, zIndex } from '@boostdev/design-system-foundation/native';
 import { StyleProp, TextStyle, ViewStyle } from 'react-native';
@@ -19,8 +19,9 @@ interface ThemeContextValue {
     colors: ThemeColors;
     isDark: boolean;
 }
-declare function ThemeProvider({ children }: {
+declare function ThemeProvider({ children, colorScheme }: {
     children: ReactNode;
+    colorScheme?: 'light' | 'dark';
 }): react_jsx_runtime.JSX.Element;
 declare function useTheme(): ThemeContextValue;
 
@@ -101,6 +102,140 @@ interface NotificationBannerProps {
 }
 declare function NotificationBanner({ variant, children, action, onDismiss, style, }: Readonly<NotificationBannerProps>): react_jsx_runtime.JSX.Element;
 
+interface LinkProps {
+    href?: string;
+    children: ReactNode;
+    accessibilityLabel?: string;
+    style?: StyleProp<TextStyle>;
+    onPress?: () => void;
+}
+declare function Link({ href, children, accessibilityLabel, style, onPress }: Readonly<LinkProps>): react_jsx_runtime.JSX.Element;
+
+interface DescriptionItem {
+    term: string;
+    description: ReactNode;
+}
+interface DescriptionListProps {
+    items: DescriptionItem[];
+    style?: StyleProp<ViewStyle>;
+}
+declare function DescriptionList({ items, style }: Readonly<DescriptionListProps>): react_jsx_runtime.JSX.Element;
+
+interface BreadcrumbItem {
+    label: string;
+    onPress?: () => void;
+}
+interface BreadcrumbProps {
+    items: BreadcrumbItem[];
+    style?: StyleProp<ViewStyle>;
+}
+declare function Breadcrumb({ items, style }: Readonly<BreadcrumbProps>): react_jsx_runtime.JSX.Element;
+
+type ProgressCircleSize = 'small' | 'medium' | 'large';
+interface ProgressCircleProps {
+    value: number;
+    max?: number;
+    size?: ProgressCircleSize;
+    label: string;
+    showValue?: boolean;
+    style?: StyleProp<ViewStyle>;
+}
+declare function ProgressCircle({ value, max, size, label, showValue, style, }: Readonly<ProgressCircleProps>): react_jsx_runtime.JSX.Element;
+
+interface TooltipProps {
+    content: string;
+    children: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+declare function Tooltip({ content, children, style }: Readonly<TooltipProps>): react_jsx_runtime.JSX.Element;
+
+interface PaginationProps {
+    currentPage: number;
+    totalPages: number;
+    onPageChange: (page: number) => void;
+    style?: StyleProp<ViewStyle>;
+}
+declare function Pagination({ currentPage, totalPages, onPageChange, style, }: Readonly<PaginationProps>): react_jsx_runtime.JSX.Element;
+
+interface CollapsibleProps {
+    /** The trigger label -- always visible */
+    summary: string;
+    /** The content revealed when expanded */
+    children: ReactNode;
+    /** Controlled open state */
+    open?: boolean;
+    /** Uncontrolled initial open state */
+    defaultOpen?: boolean;
+    /** Called after each toggle with the new open state */
+    onToggle?: (open: boolean) => void;
+    /** Grouping name (informational in native) */
+    name?: string;
+    style?: StyleProp<ViewStyle>;
+}
+declare function Collapsible({ summary, children, open: controlledOpen, defaultOpen, onToggle, name: _name, // eslint-disable-line @typescript-eslint/no-unused-vars
+style, }: Readonly<CollapsibleProps>): react_jsx_runtime.JSX.Element;
+
+interface AccordionItem {
+    id: string;
+    title: ReactNode;
+    content: ReactNode;
+    disabled?: boolean;
+}
+interface AccordionProps {
+    items: AccordionItem[];
+    allowMultiple?: boolean;
+    defaultOpen?: string[];
+    style?: StyleProp<ViewStyle>;
+}
+declare function Accordion({ items, allowMultiple, defaultOpen, style, }: Readonly<AccordionProps>): react_jsx_runtime.JSX.Element;
+
+interface TabItem {
+    id: string;
+    label: ReactNode;
+    content: ReactNode;
+    disabled?: boolean;
+}
+interface TabsProps {
+    tabs: TabItem[];
+    defaultTab?: string;
+    style?: StyleProp<ViewStyle>;
+}
+declare function Tabs({ tabs, defaultTab, style, }: Readonly<TabsProps>): 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;
+    style?: StyleProp<ViewStyle>;
+}
+declare function Table<Row extends Record<string, unknown>>({ columns, rows, caption, sortKey, sortDirection, onSort, style, }: Readonly<TableProps<Row>>): react_jsx_runtime.JSX.Element;
+
+interface CalendarProps {
+    value?: Date;
+    defaultValue?: Date;
+    min?: Date;
+    max?: Date;
+    onChange?: (date: Date) => void;
+    style?: StyleProp<ViewStyle>;
+}
+declare function Calendar({ value, defaultValue, min, max, onChange, style, }: Readonly<CalendarProps>): react_jsx_runtime.JSX.Element;
+
+interface CarouselProps {
+    items: ReactNode[];
+    label: string;
+    style?: StyleProp<ViewStyle>;
+}
+declare function Carousel({ items, label, style, }: Readonly<CarouselProps>): react_jsx_runtime.JSX.Element;
+
 type CardVariant = 'default' | 'elevated' | 'outlined';
 type CardPadding = 'none' | 'small' | 'medium' | 'large';
 type CardAlign = 'start' | 'center' | 'end';
@@ -156,6 +291,14 @@ interface ButtonProps {
 }
 declare function Button({ children, variant, size, iconStart, iconEnd, disabled, onPress, accessibilityLabel, style, }: Readonly<ButtonProps>): react_jsx_runtime.JSX.Element;
 
+interface RatingProps {
+    value: number;
+    max?: number;
+    style?: StyleProp<ViewStyle>;
+    accessibilityLabel?: string;
+}
+declare function Rating({ value, max, style, accessibilityLabel }: Readonly<RatingProps>): react_jsx_runtime.JSX.Element;
+
 interface SwitchProps {
     label: string;
     name: string;
@@ -180,6 +323,17 @@ interface CheckboxProps {
 }
 declare function Checkbox({ label, name, checked, onChange, disabled, error, hint, style, }: CheckboxProps): react_jsx_runtime.JSX.Element;
 
+interface CheckboxGroupProps {
+    legend: string;
+    children: ReactNode;
+    error?: string;
+    hint?: string;
+    required?: boolean;
+    disabled?: boolean;
+    style?: StyleProp<ViewStyle>;
+}
+declare function CheckboxGroup({ legend, children, error, hint, required, disabled, style, }: Readonly<CheckboxGroupProps>): react_jsx_runtime.JSX.Element;
+
 interface RadioProps {
     label: ReactNode;
     name: string;
@@ -192,6 +346,208 @@ interface RadioProps {
 }
 declare function Radio({ label, name, checked, onChange, disabled, error, hint, style, }: RadioProps): react_jsx_runtime.JSX.Element;
 
+interface RadioGroupProps {
+    legend: string;
+    children: ReactNode;
+    error?: string;
+    hint?: string;
+    required?: boolean;
+    disabled?: boolean;
+    style?: StyleProp<ViewStyle>;
+}
+declare function RadioGroup({ legend, children, error, hint, required, disabled, style, }: Readonly<RadioGroupProps>): react_jsx_runtime.JSX.Element;
+
+interface FileInputProps {
+    label: string;
+    name: string;
+    accept?: string;
+    multiple?: boolean;
+    disabled?: boolean;
+    required?: boolean;
+    error?: string;
+    hint?: string;
+    /** Called when the file area is pressed. Wire up a native file picker (e.g. expo-document-picker). */
+    onSelect?: () => void;
+    /** File names to display (managed externally after picker resolves). */
+    fileNames?: string[];
+    style?: StyleProp<ViewStyle>;
+}
+declare function FileInput({ label, name, accept, disabled, required, error, hint, onSelect, fileNames, style, }: Readonly<FileInputProps>): react_jsx_runtime.JSX.Element;
+
+interface ComboboxOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+interface ComboboxProps {
+    label: string;
+    name: string;
+    options: ComboboxOption[];
+    placeholder?: string;
+    value?: string;
+    onChange?: (value: string) => void;
+    disabled?: boolean;
+    error?: string;
+    hint?: string;
+    style?: StyleProp<ViewStyle>;
+}
+declare function Combobox({ label, name, options, placeholder, value, onChange, disabled, error, hint, style, }: Readonly<ComboboxProps>): react_jsx_runtime.JSX.Element;
+
+type SegmentedControlSize = 'small' | 'medium' | 'large';
+type SegmentedControlVariant = 'outline' | 'filled';
+interface SegmentedControlProps {
+    selectedIndex?: number;
+    disabled?: boolean;
+    size?: SegmentedControlSize;
+    variant?: SegmentedControlVariant;
+    children: ReactNode;
+    accessibilityLabel?: string;
+    onValueChange?: (index: number) => void;
+    style?: StyleProp<ViewStyle>;
+}
+declare function SegmentedControl({ selectedIndex, disabled, size, variant, children, accessibilityLabel, onValueChange, style, }: Readonly<SegmentedControlProps>): react_jsx_runtime.JSX.Element;
+
+type InputType = 'text' | 'email' | 'password' | 'tel' | 'url' | 'number' | 'search';
+interface FormInputProps {
+    label: ReactNode;
+    name: string;
+    type?: InputType;
+    value?: string;
+    defaultValue?: string;
+    placeholder?: string;
+    error?: string;
+    hint?: string;
+    disabled?: boolean;
+    onChange?: (value: string) => void;
+    onBlur?: () => void;
+    onFocus?: () => void;
+    style?: StyleProp<ViewStyle>;
+}
+declare function FormInput({ label, name, type, value, defaultValue, placeholder, error, hint, disabled, onChange, onBlur, onFocus, style, }: Readonly<FormInputProps>): react_jsx_runtime.JSX.Element;
+
+interface TextareaProps {
+    label: ReactNode;
+    name: string;
+    value?: string;
+    defaultValue?: string;
+    placeholder?: string;
+    error?: string;
+    hint?: string;
+    disabled?: boolean;
+    numberOfLines?: number;
+    onChange?: (value: string) => void;
+    onBlur?: () => void;
+    onFocus?: () => void;
+    style?: StyleProp<ViewStyle>;
+}
+declare function Textarea({ label, name, value, defaultValue, placeholder, error, hint, disabled, numberOfLines, onChange, onBlur, onFocus, style, }: Readonly<TextareaProps>): react_jsx_runtime.JSX.Element;
+
+interface SelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+interface SelectProps {
+    label: ReactNode;
+    name: string;
+    options: SelectOption[];
+    placeholder?: string;
+    value?: string;
+    error?: string;
+    hint?: string;
+    disabled?: boolean;
+    onChange?: (value: string) => void;
+    style?: StyleProp<ViewStyle>;
+}
+declare function Select({ label, name, options, placeholder, value, error, hint, disabled, onChange, style, }: Readonly<SelectProps>): react_jsx_runtime.JSX.Element;
+
+interface SliderProps {
+    label: string;
+    name: string;
+    value?: number;
+    defaultValue?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    showValue?: boolean;
+    disabled?: boolean;
+    error?: string;
+    hint?: string;
+    onChange?: (value: number) => void;
+    style?: StyleProp<ViewStyle>;
+}
+declare function Slider({ label, name: _name, // eslint-disable-line @typescript-eslint/no-unused-vars
+value, defaultValue, min, max, step, showValue, disabled, error, hint, onChange, style, }: Readonly<SliderProps>): 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;
+    style?: StyleProp<ViewStyle>;
+}
+declare function NumberInput({ label, name: _name, // eslint-disable-line @typescript-eslint/no-unused-vars
+value, defaultValue, min, max, step, disabled, error, hint, onChange, style, }: Readonly<NumberInputProps>): react_jsx_runtime.JSX.Element;
+
+interface DialogProps {
+    isOpen?: boolean;
+    onClose?: () => void;
+    title?: string;
+    children?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+declare function Dialog({ isOpen, onClose, title, children, style, }: Readonly<DialogProps>): react_jsx_runtime.JSX.Element;
+
+interface DrawerProps {
+    isOpen: boolean;
+    onClose: () => void;
+    title?: ReactNode;
+    children?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+declare function Drawer({ isOpen, onClose, title, children, style, }: Readonly<DrawerProps>): react_jsx_runtime.JSX.Element;
+
+type ToastVariant = 'success' | 'error' | 'info';
+interface ToastContextType {
+    showToast: (message: string, variant: ToastVariant) => void;
+}
+declare function ToastProvider({ children, style, }: {
+    children: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}): react_jsx_runtime.JSX.Element;
+declare function useToast(): ToastContextType;
+
+interface DropdownMenuItem {
+    id: string;
+    label: string;
+    onPress?: () => void;
+    disabled?: boolean;
+    icon?: ReactNode;
+    separator?: boolean;
+}
+interface DropdownMenuProps {
+    trigger: ReactElement;
+    items: DropdownMenuItem[];
+    title?: string;
+    style?: StyleProp<ViewStyle>;
+}
+declare function DropdownMenu({ trigger, items, title, style, }: Readonly<DropdownMenuProps>): react_jsx_runtime.JSX.Element;
+
+interface PopoverProps {
+    children: ReactElement;
+    content: ReactNode;
+    accessibilityLabel?: string;
+    style?: StyleProp<ViewStyle>;
+}
+declare function Popover({ children, content, accessibilityLabel, style, }: Readonly<PopoverProps>): react_jsx_runtime.JSX.Element;
+
 interface LabelProps {
     label: ReactNode;
     style?: StyleProp<TextStyle>;
@@ -205,4 +561,4 @@ interface MessageProps {
 }
 declare function Message({ message, type, style }: MessageProps): react_jsx_runtime.JSX.Element | null;
 
-export { Alert, Avatar, Badge, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, Card, Checkbox, IconWrapper, type IconWrapperProps, Label, Loading, Message, NotificationBanner, Progress, Radio, SectionHeader, Separator, Skeleton, Switch, ThemeProvider, Typography, lineHeight, useTheme };
+export { Accordion, type AccordionItem, Alert, Avatar, Badge, Breadcrumb, type BreadcrumbItem, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, Calendar, Card, Carousel, Checkbox, CheckboxGroup, Collapsible, type CollapsibleProps, Combobox, type ComboboxOption, type DescriptionItem, DescriptionList, Dialog, Drawer, DropdownMenu, type DropdownMenuItem, FileInput, FormInput, IconWrapper, type IconWrapperProps, Label, Link, Loading, Message, NotificationBanner, NumberInput, Pagination, Popover, Progress, ProgressCircle, Radio, RadioGroup, Rating, SectionHeader, SegmentedControl, Select, type SelectOption, Separator, Skeleton, Slider, Switch, type TabItem, Table, type TableColumn, Tabs, Textarea, ThemeProvider, ToastProvider, Tooltip, Typography, lineHeight, useTheme, useToast };