@a13y/react 0.1.1 → 0.1.3

package/dist/components/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { P as PressEvent } from '../use-accessible-button-B0syf-Az.js';
-import { ReactNode } from 'react';
+import React, { ReactNode, ReactElement } from 'react';
 
 /**
  * Button variants
@@ -371,4 +371,870 @@ interface AccessibleTabsProps {
  */
 declare const AccessibleTabs: (props: AccessibleTabsProps) => react_jsx_runtime.JSX.Element;
 
-export { AccessibleButton, AccessibleDialog, AccessibleMenu, AccessibleModal, AccessibleTabs, type AccessibleButtonProps as ButtonComponentProps, type ButtonVariant, type AccessibleDialogProps as DialogComponentProps, type AccessibleMenuProps as MenuComponentProps, type MenuItem, type AccessibleModalProps as ModalComponentProps, type Tab, type AccessibleTabsProps as TabsComponentProps };
+/**
+ * AccessibleTooltip Component
+ * A fully accessible tooltip with proper ARIA attributes and keyboard support
+ */
+
+interface AccessibleTooltipProps {
+    /** Content to display in the tooltip */
+    content: string;
+    /** Placement of the tooltip relative to the trigger */
+    placement?: 'top' | 'bottom' | 'left' | 'right';
+    /** Delay before showing the tooltip (in milliseconds) */
+    delay?: number;
+    /** Trigger method for showing the tooltip */
+    trigger?: 'hover' | 'focus' | 'both';
+    /** The element that triggers the tooltip */
+    children: ReactElement;
+    /** Optional className for the tooltip container */
+    className?: string;
+    /** Optional styles for the tooltip container */
+    style?: React.CSSProperties;
+}
+/**
+ * Accessible tooltip component that properly announces content to screen readers
+ *
+ * @example
+ * ```tsx
+ * <AccessibleTooltip content="This is helpful information">
+ *   <button>Hover me</button>
+ * </AccessibleTooltip>
+ * ```
+ */
+declare const AccessibleTooltip: React.FC<AccessibleTooltipProps>;
+
+/**
+ * AccessibleToggle Component
+ * A fully accessible toggle/switch component with ARIA support
+ */
+
+interface AccessibleToggleProps {
+    /** Whether the toggle is checked */
+    checked: boolean;
+    /** Callback when the toggle state changes */
+    onChange: (checked: boolean) => void;
+    /** Label for the toggle */
+    label: string;
+    /** Optional description for additional context */
+    description?: string;
+    /** Whether the toggle is disabled */
+    disabled?: boolean;
+    /** Optional className for the container */
+    className?: string;
+    /** Optional className for the switch element */
+    switchClassName?: string;
+    /** Optional styles */
+    style?: React.CSSProperties;
+}
+/**
+ * Accessible toggle/switch component with proper ARIA attributes
+ *
+ * @example
+ * ```tsx
+ * const [enabled, setEnabled] = useState(false);
+ *
+ * <AccessibleToggle
+ *   checked={enabled}
+ *   onChange={setEnabled}
+ *   label="Enable notifications"
+ *   description="Receive email notifications for updates"
+ * />
+ * ```
+ */
+declare const AccessibleToggle: React.FC<AccessibleToggleProps>;
+
+/**
+ * AccessibleToast Component
+ * Accessible toast notifications with proper ARIA live regions
+ */
+
+type ToastType = 'success' | 'error' | 'warning' | 'info';
+type ToastPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center';
+interface ToastAction {
+    /** Label for the action button */
+    label: string;
+    /** Callback when action is clicked */
+    onClick: () => void;
+}
+interface AccessibleToastProps {
+    /** The message to display */
+    message: string;
+    /** Type of toast (affects styling and ARIA role) */
+    type?: ToastType;
+    /** Duration in milliseconds (0 = no auto-dismiss) */
+    duration?: number;
+    /** Position of the toast */
+    position?: ToastPosition;
+    /** Optional action button */
+    action?: ToastAction;
+    /** Whether the toast is visible */
+    isOpen: boolean;
+    /** Callback when toast is dismissed */
+    onClose: () => void;
+    /** Optional className */
+    className?: string;
+    /** Optional styles */
+    style?: React.CSSProperties;
+}
+/**
+ * Accessible toast notification component with ARIA live regions
+ *
+ * @example
+ * ```tsx
+ * const [showToast, setShowToast] = useState(false);
+ *
+ * <AccessibleToast
+ *   message="Item added to cart"
+ *   type="success"
+ *   duration={5000}
+ *   isOpen={showToast}
+ *   onClose={() => setShowToast(false)}
+ *   action={{
+ *     label: 'Undo',
+ *     onClick: () => removeItem()
+ *   }}
+ * />
+ * ```
+ */
+declare const AccessibleToast: React.FC<AccessibleToastProps>;
+/**
+ * ToastContainer component to manage multiple toasts
+ */
+interface Toast {
+    id: string;
+    message: string;
+    type?: ToastType;
+    duration?: number;
+    action?: ToastAction;
+}
+interface ToastContainerProps {
+    /** Array of toasts to display */
+    toasts: Toast[];
+    /** Callback to remove a toast */
+    onRemove: (id: string) => void;
+    /** Position for all toasts */
+    position?: ToastPosition;
+}
+/**
+ * Container component to manage multiple toast notifications
+ *
+ * @example
+ * ```tsx
+ * const [toasts, setToasts] = useState<Toast[]>([]);
+ *
+ * const addToast = (message: string, type: ToastType) => {
+ *   const id = Date.now().toString();
+ *   setToasts(prev => [...prev, { id, message, type }]);
+ * };
+ *
+ * const removeToast = (id: string) => {
+ *   setToasts(prev => prev.filter(t => t.id !== id));
+ * };
+ *
+ * <ToastContainer toasts={toasts} onRemove={removeToast} />
+ * ```
+ */
+declare const ToastContainer: React.FC<ToastContainerProps>;
+
+/**
+ * AccessibleAccordion Component
+ * Fully accessible accordion with ARIA attributes and keyboard navigation
+ */
+
+interface AccordionItem {
+    /** Unique identifier for the item */
+    id: string;
+    /** Title/header for the accordion item */
+    title: string;
+    /** Content to display when expanded */
+    content: ReactNode;
+    /** Whether this item is disabled */
+    disabled?: boolean;
+}
+interface AccessibleAccordionProps {
+    /** Array of accordion items */
+    items: AccordionItem[];
+    /** Allow multiple items to be open at once */
+    allowMultiple?: boolean;
+    /** IDs of items that should be open by default */
+    defaultOpenItems?: string[];
+    /** Callback when item is toggled */
+    onToggle?: (itemId: string, isOpen: boolean) => void;
+    /** Optional className for the container */
+    className?: string;
+    /** Optional className for each item */
+    itemClassName?: string;
+    /** Optional className for headers */
+    headerClassName?: string;
+    /** Optional className for content */
+    contentClassName?: string;
+    /** Optional styles */
+    style?: React.CSSProperties;
+}
+/**
+ * Accessible accordion component with keyboard navigation
+ *
+ * @example
+ * ```tsx
+ * const items = [
+ *   {
+ *     id: '1',
+ *     title: 'What is accessibility?',
+ *     content: 'Accessibility ensures that people with disabilities can use your website.'
+ *   },
+ *   {
+ *     id: '2',
+ *     title: 'Why is it important?',
+ *     content: 'It makes your content available to everyone, regardless of ability.'
+ *   }
+ * ];
+ *
+ * <AccessibleAccordion
+ *   items={items}
+ *   allowMultiple={false}
+ *   defaultOpenItems={['1']}
+ * />
+ * ```
+ */
+declare const AccessibleAccordion: React.FC<AccessibleAccordionProps>;
+
+/**
+ * AccessibleBreadcrumb Component
+ * Accessible breadcrumb navigation with proper ARIA attributes
+ */
+
+interface BreadcrumbItem {
+    /** Label to display */
+    label: string;
+    /** Optional href for link */
+    href?: string;
+    /** Optional click handler (alternative to href) */
+    onClick?: () => void;
+}
+interface AccessibleBreadcrumbProps {
+    /** Array of breadcrumb items */
+    items: BreadcrumbItem[];
+    /** Optional separator between items */
+    separator?: ReactNode;
+    /** Optional aria-label for the navigation */
+    ariaLabel?: string;
+    /** Optional className for the nav element */
+    className?: string;
+    /** Optional className for items */
+    itemClassName?: string;
+    /** Optional styles */
+    style?: React.CSSProperties;
+}
+/**
+ * Accessible breadcrumb navigation component
+ *
+ * @example
+ * ```tsx
+ * const items = [
+ *   { label: 'Home', href: '/' },
+ *   { label: 'Products', href: '/products' },
+ *   { label: 'Electronics', href: '/products/electronics' },
+ *   { label: 'Laptops' }
+ * ];
+ *
+ * <AccessibleBreadcrumb items={items} />
+ * ```
+ */
+declare const AccessibleBreadcrumb: React.FC<AccessibleBreadcrumbProps>;
+
+/**
+ * AccessibleCheckboxGroup Component
+ * Accessible checkbox group with proper fieldset/legend and ARIA attributes
+ */
+
+interface CheckboxOption {
+    /** Unique value for the option */
+    value: string;
+    /** Label to display */
+    label: string;
+    /** Optional description */
+    description?: string;
+    /** Whether this option is disabled */
+    disabled?: boolean;
+}
+interface AccessibleCheckboxGroupProps {
+    /** Array of checkbox options */
+    options: CheckboxOption[];
+    /** Currently selected values */
+    value: string[];
+    /** Callback when selection changes */
+    onChange: (value: string[]) => void;
+    /** Label for the group */
+    label: string;
+    /** Optional description for the group */
+    description?: string;
+    /** Whether the group is required */
+    required?: boolean;
+    /** Whether the group is disabled */
+    disabled?: boolean;
+    /** Error message to display */
+    error?: string;
+    /** Optional className for the fieldset */
+    className?: string;
+    /** Optional styles */
+    style?: React.CSSProperties;
+}
+/**
+ * Accessible checkbox group component with proper ARIA attributes
+ *
+ * @example
+ * ```tsx
+ * const [selected, setSelected] = useState<string[]>(['email']);
+ *
+ * const options = [
+ *   { value: 'email', label: 'Email notifications' },
+ *   { value: 'sms', label: 'SMS notifications' },
+ *   { value: 'push', label: 'Push notifications', description: 'Requires app installation' }
+ * ];
+ *
+ * <AccessibleCheckboxGroup
+ *   options={options}
+ *   value={selected}
+ *   onChange={setSelected}
+ *   label="Notification preferences"
+ *   required
+ * />
+ * ```
+ */
+declare const AccessibleCheckboxGroup: React.FC<AccessibleCheckboxGroupProps>;
+
+/**
+ * AccessibleRadioGroup Component
+ * Accessible radio button group with proper fieldset/legend and ARIA attributes
+ */
+
+interface RadioOption {
+    /** Unique value for the option */
+    value: string;
+    /** Label to display */
+    label: string;
+    /** Optional description */
+    description?: string;
+    /** Whether this option is disabled */
+    disabled?: boolean;
+}
+interface AccessibleRadioGroupProps {
+    /** Array of radio options */
+    options: RadioOption[];
+    /** Currently selected value */
+    value: string | null;
+    /** Callback when selection changes */
+    onChange: (value: string) => void;
+    /** Name attribute for the radio group */
+    name: string;
+    /** Label for the group */
+    label: string;
+    /** Optional description for the group */
+    description?: string;
+    /** Whether the group is required */
+    required?: boolean;
+    /** Whether the group is disabled */
+    disabled?: boolean;
+    /** Error message to display */
+    error?: string;
+    /** Optional className for the fieldset */
+    className?: string;
+    /** Optional styles */
+    style?: React.CSSProperties;
+}
+/**
+ * Accessible radio button group component with proper ARIA attributes
+ *
+ * @example
+ * ```tsx
+ * const [selected, setSelected] = useState<string | null>(null);
+ *
+ * const options = [
+ *   { value: 'small', label: 'Small', description: 'Up to 10 users' },
+ *   { value: 'medium', label: 'Medium', description: 'Up to 50 users' },
+ *   { value: 'large', label: 'Large', description: 'Unlimited users' }
+ * ];
+ *
+ * <AccessibleRadioGroup
+ *   name="plan"
+ *   options={options}
+ *   value={selected}
+ *   onChange={setSelected}
+ *   label="Choose your plan"
+ *   required
+ * />
+ * ```
+ */
+declare const AccessibleRadioGroup: React.FC<AccessibleRadioGroupProps>;
+
+/**
+ * AccessibleProgress Component
+ * Accessible progress bar and spinner with proper ARIA attributes
+ */
+
+type ProgressVariant = 'linear' | 'circular';
+interface AccessibleProgressProps {
+    /** Current progress value (undefined for indeterminate) */
+    value?: number;
+    /** Maximum value */
+    max?: number;
+    /** Minimum value */
+    min?: number;
+    /** Label for the progress indicator */
+    label: string;
+    /** Visual variant */
+    variant?: ProgressVariant;
+    /** Whether to show percentage text */
+    showValue?: boolean;
+    /** Whether to announce progress changes */
+    announceChanges?: boolean;
+    /** Optional className */
+    className?: string;
+    /** Optional styles */
+    style?: React.CSSProperties;
+}
+/**
+ * Accessible progress indicator with ARIA live regions
+ *
+ * @example
+ * ```tsx
+ * // Determinate progress
+ * <AccessibleProgress
+ *   value={75}
+ *   label="Upload progress"
+ *   showValue
+ * />
+ *
+ * // Indeterminate progress
+ * <AccessibleProgress
+ *   label="Loading..."
+ *   variant="circular"
+ * />
+ * ```
+ */
+declare const AccessibleProgress: React.FC<AccessibleProgressProps>;
+
+/**
+ * SkipLinks Component
+ * Accessible skip navigation links for keyboard users
+ */
+
+interface SkipLink {
+    /** Target element ID (without #) */
+    href: string;
+    /** Label for the skip link */
+    label: string;
+}
+interface SkipLinksProps {
+    /** Array of skip links */
+    links: SkipLink[];
+    /** Optional className for the container */
+    className?: string;
+    /** Optional styles for the container */
+    style?: React.CSSProperties;
+    /** Optional styles for individual links */
+    linkStyle?: React.CSSProperties;
+}
+/**
+ * Skip navigation links component, visible only on keyboard focus
+ * Should be the first focusable element on the page
+ *
+ * @example
+ * ```tsx
+ * const links = [
+ *   { href: 'main-content', label: 'Skip to main content' },
+ *   { href: 'navigation', label: 'Skip to navigation' },
+ *   { href: 'footer', label: 'Skip to footer' }
+ * ];
+ *
+ * <SkipLinks links={links} />
+ *
+ * // In your page layout:
+ * <main id="main-content">...</main>
+ * <nav id="navigation">...</nav>
+ * <footer id="footer">...</footer>
+ * ```
+ */
+declare const SkipLinks: React.FC<SkipLinksProps>;
+
+/**
+ * AccessiblePagination Component
+ * Accessible pagination with proper ARIA attributes and keyboard navigation
+ */
+
+interface AccessiblePaginationProps {
+    /** Current active page (1-indexed) */
+    currentPage: number;
+    /** Total number of pages */
+    totalPages: number;
+    /** Callback when page changes */
+    onPageChange: (page: number) => void;
+    /** Number of sibling pages to show on each side */
+    siblingCount?: number;
+    /** Whether to show first/last buttons */
+    showFirstLast?: boolean;
+    /** Optional aria-label for the navigation */
+    ariaLabel?: string;
+    /** Optional className */
+    className?: string;
+    /** Optional styles */
+    style?: React.CSSProperties;
+}
+/**
+ * Accessible pagination component with keyboard navigation
+ *
+ * @example
+ * ```tsx
+ * const [page, setPage] = useState(1);
+ *
+ * <AccessiblePagination
+ *   currentPage={page}
+ *   totalPages={10}
+ *   onPageChange={setPage}
+ *   siblingCount={1}
+ *   showFirstLast
+ * />
+ * ```
+ */
+declare const AccessiblePagination: React.FC<AccessiblePaginationProps>;
+
+/**
+ * AccessibleCombobox Component
+ * Fully accessible combobox/select with autocomplete, keyboard navigation, and ARIA support
+ */
+
+interface ComboboxOption<T = string> {
+    /** Unique value */
+    value: T;
+    /** Display label */
+    label: string;
+    /** Whether this option is disabled */
+    disabled?: boolean;
+}
+interface AccessibleComboboxProps<T = string> {
+    /** Array of options */
+    options: ComboboxOption<T>[];
+    /** Currently selected value */
+    value: T | null;
+    /** Callback when selection changes */
+    onChange: (value: T | null) => void;
+    /** Label for the combobox */
+    label: string;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Whether search is enabled */
+    searchable?: boolean;
+    /** Whether the combobox is required */
+    required?: boolean;
+    /** Whether the combobox is disabled */
+    disabled?: boolean;
+    /** Error message */
+    error?: string;
+    /** Optional className */
+    className?: string;
+    /** Optional styles */
+    style?: React.CSSProperties;
+}
+/**
+ * Accessible combobox/select component with autocomplete
+ *
+ * @example
+ * ```tsx
+ * const countries = [
+ *   { value: 'us', label: 'United States' },
+ *   { value: 'uk', label: 'United Kingdom' },
+ *   { value: 'ca', label: 'Canada' }
+ * ];
+ *
+ * const [country, setCountry] = useState<string | null>(null);
+ *
+ * <AccessibleCombobox
+ *   options={countries}
+ *   value={country}
+ *   onChange={setCountry}
+ *   label="Select country"
+ *   searchable
+ * />
+ * ```
+ */
+declare function AccessibleCombobox<T = string>({ options, value, onChange, label, placeholder, searchable, required, disabled, error, className, style, }: AccessibleComboboxProps<T>): React.ReactElement;
+
+/**
+ * AccessibleDatePicker Component
+ * Fully accessible date picker with calendar grid and keyboard navigation
+ */
+
+interface AccessibleDatePickerProps {
+    /** Currently selected date */
+    value: Date | null;
+    /** Callback when date changes */
+    onChange: (date: Date | null) => void;
+    /** Label for the date picker */
+    label: string;
+    /** Minimum selectable date */
+    minDate?: Date;
+    /** Maximum selectable date */
+    maxDate?: Date;
+    /** Array of disabled dates */
+    disabledDates?: Date[];
+    /** Whether the field is required */
+    required?: boolean;
+    /** Whether the field is disabled */
+    disabled?: boolean;
+    /** Error message */
+    error?: string;
+    /** Date format for display (default: MM/DD/YYYY) */
+    dateFormat?: 'MM/DD/YYYY' | 'DD/MM/YYYY' | 'YYYY-MM-DD';
+    /** Optional className */
+    className?: string;
+    /** Optional styles */
+    style?: React.CSSProperties;
+}
+/**
+ * Accessible date picker with calendar grid
+ *
+ * @example
+ * ```tsx
+ * const [date, setDate] = useState<Date | null>(null);
+ *
+ * <AccessibleDatePicker
+ *   value={date}
+ *   onChange={setDate}
+ *   label="Select date"
+ *   minDate={new Date()}
+ *   required
+ * />
+ * ```
+ */
+declare const AccessibleDatePicker: React.FC<AccessibleDatePickerProps>;
+
+/**
+ * AccessibleTreeView Component
+ * Accessible tree navigation with keyboard support and ARIA
+ */
+
+interface TreeNode<T = unknown> {
+    /** Unique identifier */
+    id: string;
+    /** Display label */
+    label: string;
+    /** Optional data payload */
+    data?: T;
+    /** Child nodes */
+    children?: TreeNode<T>[];
+    /** Whether node is disabled */
+    disabled?: boolean;
+}
+interface AccessibleTreeViewProps<T = unknown> {
+    /** Tree data */
+    data: TreeNode<T>[];
+    /** Callback when node is selected */
+    onSelect?: (node: TreeNode<T>) => void;
+    /** IDs of expanded nodes */
+    expandedNodes?: string[];
+    /** Callback when node is expanded/collapsed */
+    onToggle?: (nodeId: string, isExpanded: boolean) => void;
+    /** Allow multiple selection */
+    multiSelect?: boolean;
+    /** Selected node IDs */
+    selectedNodes?: string[];
+    /** Optional aria-label */
+    ariaLabel?: string;
+    /** Optional className */
+    className?: string;
+    /** Optional styles */
+    style?: React.CSSProperties;
+}
+/**
+ * Accessible tree view component with keyboard navigation
+ *
+ * @example
+ * ```tsx
+ * const treeData = [
+ *   {
+ *     id: '1',
+ *     label: 'Documents',
+ *     children: [
+ *       { id: '1-1', label: 'Reports' },
+ *       { id: '1-2', label: 'Invoices' }
+ *     ]
+ *   },
+ *   { id: '2', label: 'Images' }
+ * ];
+ *
+ * <AccessibleTreeView
+ *   data={treeData}
+ *   onSelect={(node) => console.log(node)}
+ * />
+ * ```
+ */
+declare function AccessibleTreeView<T = unknown>({ data, onSelect, expandedNodes: controlledExpanded, onToggle, multiSelect, selectedNodes: controlledSelected, ariaLabel, className, style, }: AccessibleTreeViewProps<T>): React.ReactElement;
+
+/**
+ * AccessibleTable Component
+ * Fully accessible data table with sorting, selection, and keyboard navigation
+ */
+
+interface TableColumn<T> {
+    /** Unique key for the column */
+    key: string;
+    /** Header label */
+    label: string;
+    /** Render function for cell content */
+    render?: (item: T, index: number) => React.ReactNode;
+    /** Whether column is sortable */
+    sortable?: boolean;
+    /** Width of the column */
+    width?: string;
+}
+type SortDirection = 'asc' | 'desc' | null;
+interface AccessibleTableProps<T> {
+    /** Table data */
+    data: T[];
+    /** Column definitions */
+    columns: TableColumn<T>[];
+    /** Table caption (required for accessibility) */
+    caption: string;
+    /** Whether rows are selectable */
+    selectable?: boolean;
+    /** Selected row indices */
+    selectedRows?: number[];
+    /** Callback when selection changes */
+    onSelectionChange?: (selectedIndices: number[]) => void;
+    /** Row key extractor */
+    getRowKey?: (item: T, index: number) => string;
+    /** Whether table is sortable */
+    sortable?: boolean;
+    /** Current sort column */
+    sortColumn?: string;
+    /** Current sort direction */
+    sortDirection?: SortDirection;
+    /** Callback when sort changes */
+    onSort?: (column: string, direction: SortDirection) => void;
+    /** Optional className */
+    className?: string;
+    /** Optional styles */
+    style?: React.CSSProperties;
+}
+/**
+ * Accessible data table with sorting and selection
+ *
+ * @example
+ * ```tsx
+ * interface User {
+ *   id: number;
+ *   name: string;
+ *   email: string;
+ * }
+ *
+ * const columns: TableColumn<User>[] = [
+ *   { key: 'name', label: 'Name', sortable: true },
+ *   { key: 'email', label: 'Email', sortable: true }
+ * ];
+ *
+ * <AccessibleTable
+ *   data={users}
+ *   columns={columns}
+ *   caption="User list"
+ *   selectable
+ *   sortable
+ * />
+ * ```
+ */
+declare function AccessibleTable<T extends Record<string, unknown>>({ data, columns, caption, selectable, selectedRows: controlledSelected, onSelectionChange, getRowKey, sortable, sortColumn: controlledSortColumn, sortDirection: controlledSortDirection, onSort, className, style, }: AccessibleTableProps<T>): React.ReactElement;
+
+/**
+ * AccessibleCarousel Component
+ * Fully accessible carousel with keyboard navigation and proper ARIA attributes
+ */
+
+interface AccessibleCarouselProps {
+    /** Array of carousel items */
+    items: ReactNode[];
+    /** Whether to auto-play the carousel */
+    autoPlay?: boolean;
+    /** Interval between slides in milliseconds */
+    interval?: number;
+    /** Whether to show navigation controls */
+    controls?: boolean;
+    /** Whether to show slide indicators */
+    indicators?: boolean;
+    /** Whether to loop back to start/end */
+    loop?: boolean;
+    /** Optional aria-label */
+    ariaLabel?: string;
+    /** Optional className */
+    className?: string;
+    /** Optional styles */
+    style?: React.CSSProperties;
+}
+/**
+ * Accessible carousel component with auto-play and keyboard navigation
+ *
+ * @example
+ * ```tsx
+ * const slides = [
+ *   <div>Slide 1</div>,
+ *   <div>Slide 2</div>,
+ *   <div>Slide 3</div>
+ * ];
+ *
+ * <AccessibleCarousel
+ *   items={slides}
+ *   autoPlay
+ *   interval={5000}
+ *   controls
+ *   indicators
+ * />
+ * ```
+ */
+declare const AccessibleCarousel: React.FC<AccessibleCarouselProps>;
+
+/**
+ * AccessibleDrawer Component
+ * Accessible drawer/sidebar with focus trap and proper ARIA attributes
+ */
+
+type DrawerSide = 'left' | 'right' | 'top' | 'bottom';
+interface AccessibleDrawerProps {
+    /** Whether the drawer is open */
+    isOpen: boolean;
+    /** Callback when drawer should close */
+    onClose: () => void;
+    /** Side from which the drawer appears */
+    side?: DrawerSide;
+    /** Whether drawer is modal (blocks interaction with background) */
+    modal?: boolean;
+    /** Drawer title */
+    title?: string;
+    /** Drawer content */
+    children: ReactNode;
+    /** Optional className for the drawer */
+    className?: string;
+    /** Optional className for the backdrop */
+    backdropClassName?: string;
+    /** Optional styles */
+    style?: React.CSSProperties;
+}
+/**
+ * Accessible drawer/sidebar component with focus trap
+ *
+ * @example
+ * ```tsx
+ * const [isOpen, setIsOpen] = useState(false);
+ *
+ * <AccessibleDrawer
+ *   isOpen={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   side="right"
+ *   modal
+ *   title="Settings"
+ * >
+ *   <div>Drawer content here</div>
+ * </AccessibleDrawer>
+ * ```
+ */
+declare const AccessibleDrawer: React.FC<AccessibleDrawerProps>;
+
+export { AccessibleAccordion, type AccessibleAccordionProps, AccessibleBreadcrumb, type AccessibleBreadcrumbProps, AccessibleButton, AccessibleCarousel, type AccessibleCarouselProps, AccessibleCheckboxGroup, type AccessibleCheckboxGroupProps, AccessibleCombobox, type AccessibleComboboxProps, AccessibleDatePicker, type AccessibleDatePickerProps, AccessibleDialog, AccessibleDrawer, type AccessibleDrawerProps, AccessibleMenu, AccessibleModal, AccessiblePagination, type AccessiblePaginationProps, AccessibleProgress, type AccessibleProgressProps, AccessibleRadioGroup, type AccessibleRadioGroupProps, AccessibleTable, type AccessibleTableProps, AccessibleTabs, AccessibleToast, type AccessibleToastProps, AccessibleToggle, type AccessibleToggleProps, AccessibleTooltip, type AccessibleTooltipProps, AccessibleTreeView, type AccessibleTreeViewProps, type AccordionItem, type BreadcrumbItem, type AccessibleButtonProps as ButtonComponentProps, type ButtonVariant, type CheckboxOption, type ComboboxOption, type AccessibleDialogProps as DialogComponentProps, type DrawerSide, type AccessibleMenuProps as MenuComponentProps, type MenuItem, type AccessibleModalProps as ModalComponentProps, type ProgressVariant, type RadioOption, type SkipLink, SkipLinks, type SkipLinksProps, type SortDirection, type Tab, type TableColumn, type AccessibleTabsProps as TabsComponentProps, type Toast, type ToastAction, ToastContainer, type ToastContainerProps, type ToastPosition, type ToastType, type TreeNode };