@papernote/ui 1.3.1 → 1.6.0

package/dist/index.d.ts

@@ -155,7 +155,7 @@ type ValidationState$1 = 'error' | 'success' | 'warning' | null;
 /**
  * Input component props
  */
-interface InputProps extends React__default.InputHTMLAttributes<HTMLInputElement> {
+interface InputProps extends Omit<React__default.InputHTMLAttributes<HTMLInputElement>, 'size'> {
     /** Input label text */
     label?: string;
     /** Helper text displayed below input */
@@ -186,6 +186,31 @@ interface InputProps extends React__default.InputHTMLAttributes<HTMLInputElement
     onClear?: () => void;
     /** Show loading spinner in input */
     loading?: boolean;
+    /**
+     * Input mode hint for mobile keyboards.
+     * 'none' - No virtual keyboard
+     * 'text' - Standard text keyboard (default)
+     * 'decimal' - Decimal number keyboard
+     * 'numeric' - Numeric keyboard
+     * 'tel' - Telephone keypad
+     * 'search' - Search optimized keyboard
+     * 'email' - Email optimized keyboard
+     * 'url' - URL optimized keyboard
+     */
+    inputMode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
+    /**
+     * Enter key hint for mobile keyboards.
+     * 'enter' - Standard enter key
+     * 'done' - Done action
+     * 'go' - Go/navigate action
+     * 'next' - Move to next field
+     * 'previous' - Move to previous field
+     * 'search' - Search action
+     * 'send' - Send action
+     */
+    enterKeyHint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
+    /** Size variant - 'md' is default, 'lg' provides larger touch target (44px min) */
+    size?: 'sm' | 'md' | 'lg';
 }
 /**
  * Input - Text input component with validation, icons, and prefixes/suffixes
@@ -193,12 +218,19 @@ interface InputProps extends React__default.InputHTMLAttributes<HTMLInputElement
  * A feature-rich text input with support for validation states, character counting,
  * password visibility toggle, prefix/suffix text and icons, and clearable functionality.
  *
+ * Mobile optimizations:
+ * - inputMode prop for appropriate mobile keyboard
+ * - enterKeyHint prop for mobile keyboard action button
+ * - Size variants with touch-friendly targets (44px for 'lg')
+ *
  * @example Basic input with label
  * ```tsx
  * <Input
  *   label="Email"
  *   type="email"
  *   placeholder="Enter your email"
+ *   inputMode="email"
+ *   enterKeyHint="next"
  * />
  * ```
  *
@@ -224,11 +256,23 @@ interface InputProps extends React__default.InputHTMLAttributes<HTMLInputElement
  * />
  * ```
  *
+ * @example Mobile-optimized phone input
+ * ```tsx
+ * <Input
+ *   label="Phone Number"
+ *   type="tel"
+ *   inputMode="tel"
+ *   enterKeyHint="done"
+ *   size="lg"
+ * />
+ * ```
+ *
  * @example With prefix/suffix
  * ```tsx
  * <Input
  *   label="Amount"
  *   type="number"
+ *   inputMode="decimal"
  *   prefixIcon={<DollarSign />}
  *   suffix="USD"
  *   clearable
@@ -310,12 +354,16 @@ interface SelectProps {
     virtualHeight?: string;
     /** Height of each option row in pixels (default: 42) */
     virtualItemHeight?: number;
+    /** Size of the select trigger - 'lg' provides 44px touch-friendly target */
+    size?: 'sm' | 'md' | 'lg';
+    /** Mobile display mode - 'auto' uses BottomSheet on mobile, 'dropdown' always uses dropdown, 'native' uses native select on mobile */
+    mobileMode?: 'auto' | 'dropdown' | 'native';
 }
 /**
- * Select - Dropdown select component with search, groups, and virtual scrolling
+ * Select - Dropdown select component with search, groups, virtual scrolling, and mobile support
  *
  * A feature-rich select component supporting flat or grouped options, search/filter,
- * option creation, virtual scrolling for large lists, and clear functionality.
+ * option creation, virtual scrolling for large lists, and mobile-optimized BottomSheet display.
  *
  * @example Basic select
  * ```tsx
@@ -333,6 +381,16 @@ interface SelectProps {
  * />
  * ```
  *
+ * @example Mobile-optimized with large touch targets
+ * ```tsx
+ * <Select
+ *   options={options}
+ *   size="lg"
+ *   mobileMode="auto"
+ *   placeholder="Select..."
+ * />
+ * ```
+ *
  * @example Searchable with groups
  * ```tsx
  * const groups = [
@@ -413,6 +471,7 @@ interface SwitchProps {
     label?: string;
     description?: string;
     disabled?: boolean;
+    /** Size variant - 'lg' provides better touch targets. On mobile, 'md' auto-upgrades to 'lg'. */
     size?: 'sm' | 'md' | 'lg';
     /** Show loading spinner (disables interaction) */
     loading?: boolean;
@@ -437,6 +496,19 @@ interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement
     resize?: 'none' | 'vertical' | 'horizontal' | 'both';
     /** Show loading spinner (for async operations like auto-save) */
     loading?: boolean;
+    /**
+     * Size variant - 'md' is default, 'lg' provides larger touch-friendly text and padding.
+     * On mobile, 'md' is automatically upgraded to 'lg' for better touch targets.
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Enter key hint for mobile keyboards.
+     * 'enter' - Standard enter key (newline)
+     * 'done' - Done action
+     * 'go' - Go/navigate action
+     * 'send' - Send action
+     */
+    enterKeyHint?: 'enter' | 'done' | 'go' | 'send';
 }
 declare const Textarea: React$1.ForwardRefExoticComponent<TextareaProps & React$1.RefAttributes<HTMLTextAreaElement>>;
 
@@ -452,6 +524,8 @@ interface CheckboxProps {
     name?: string;
     /** Optional icon to display next to label */
     icon?: React.ReactNode;
+    /** Size variant - 'lg' provides 44px touch-friendly targets. On mobile, 'md' auto-upgrades to 'lg'. */
+    size?: 'sm' | 'md' | 'lg';
 }
 declare const Checkbox: React$1.ForwardRefExoticComponent<CheckboxProps & React$1.RefAttributes<HTMLInputElement>>;
 
@@ -1289,8 +1363,85 @@ interface ModalProps {
     showCloseButton?: boolean;
     /** Animation variant for modal entrance (default: 'scale') */
     animation?: 'scale' | 'slide-up' | 'slide-down' | 'fade' | 'none';
+    /** Enable automatic scrolling for content that exceeds viewport height */
+    scrollable?: boolean;
+    /** Maximum height of the modal content area (e.g., '70vh', '500px') */
+    maxHeight?: string;
+    /** Mobile display mode: 'auto' uses BottomSheet on mobile, 'modal' always uses modal, 'sheet' always uses BottomSheet */
+    mobileMode?: 'auto' | 'modal' | 'sheet';
+    /** Height preset for BottomSheet on mobile (default: 'lg') */
+    mobileHeight?: 'sm' | 'md' | 'lg' | 'full';
+    /** Show drag handle on BottomSheet (default: true) */
+    mobileShowHandle?: boolean;
 }
-declare function Modal({ isOpen, onClose, title, children, size, showCloseButton, animation, }: ModalProps): react_jsx_runtime.JSX.Element | null;
+/**
+ * Modal - Adaptive dialog component
+ *
+ * On desktop, renders as a centered modal dialog.
+ * On mobile (when mobileMode='auto'), automatically renders as a BottomSheet
+ * for better touch interaction and visibility.
+ *
+ * @example Basic modal
+ * ```tsx
+ * <Modal isOpen={isOpen} onClose={handleClose} title="Edit User">
+ *   <form>...</form>
+ *   <ModalFooter>
+ *     <Button onClick={handleClose}>Cancel</Button>
+ *     <Button variant="primary" onClick={handleSave}>Save</Button>
+ *   </ModalFooter>
+ * </Modal>
+ * ```
+ *
+ * @example Scrollable modal for long content
+ * ```tsx
+ * <Modal
+ *   isOpen={isOpen}
+ *   onClose={handleClose}
+ *   title="Terms and Conditions"
+ *   scrollable
+ * >
+ *   {longContent}
+ * </Modal>
+ * ```
+ *
+ * @example Modal with custom max height
+ * ```tsx
+ * <Modal
+ *   isOpen={isOpen}
+ *   onClose={handleClose}
+ *   title="Document Preview"
+ *   maxHeight="70vh"
+ * >
+ *   {documentContent}
+ * </Modal>
+ * ```
+ *
+ * @example Force modal on mobile
+ * ```tsx
+ * <Modal
+ *   isOpen={isOpen}
+ *   onClose={handleClose}
+ *   title="Settings"
+ *   mobileMode="modal"
+ * >
+ *   ...
+ * </Modal>
+ * ```
+ *
+ * @example Always use BottomSheet
+ * ```tsx
+ * <Modal
+ *   isOpen={isOpen}
+ *   onClose={handleClose}
+ *   title="Select Option"
+ *   mobileMode="sheet"
+ *   mobileHeight="md"
+ * >
+ *   ...
+ * </Modal>
+ * ```
+ */
+declare function Modal({ isOpen, onClose, title, children, size, showCloseButton, animation, scrollable, maxHeight, mobileMode, mobileHeight, mobileShowHandle, }: ModalProps): react_jsx_runtime.JSX.Element | null;
 declare function ModalFooter({ children }: {
     children: React__default.ReactNode;
 }): react_jsx_runtime.JSX.Element;
@@ -1335,8 +1486,47 @@ interface ConfirmDialogProps {
     variant?: 'danger' | 'warning' | 'info';
     icon?: React__default.ReactNode;
     isLoading?: boolean;
+    /** Mobile display mode (inherited from Modal) */
+    mobileMode?: ModalProps['mobileMode'];
+    /** Height preset for BottomSheet on mobile */
+    mobileHeight?: ModalProps['mobileHeight'];
 }
-declare function ConfirmDialog({ isOpen, onClose, onConfirm, title, message, confirmLabel, cancelLabel, variant, icon, isLoading, }: ConfirmDialogProps): react_jsx_runtime.JSX.Element;
+/**
+ * ConfirmDialog - Confirmation dialog with mobile support
+ *
+ * @example Basic usage
+ * ```tsx
+ * <ConfirmDialog
+ *   isOpen={isOpen}
+ *   onClose={handleClose}
+ *   onConfirm={handleDelete}
+ *   title="Delete Item"
+ *   message="Are you sure you want to delete this item? This action cannot be undone."
+ *   variant="danger"
+ * />
+ * ```
+ *
+ * @example With useConfirmDialog hook
+ * ```tsx
+ * const confirmDialog = useConfirmDialog();
+ *
+ * const handleDelete = () => {
+ *   confirmDialog.show({
+ *     title: 'Delete Item',
+ *     message: 'Are you sure?',
+ *     onConfirm: async () => await deleteItem(),
+ *   });
+ * };
+ *
+ * return (
+ *   <>
+ *     <button onClick={handleDelete}>Delete</button>
+ *     <ConfirmDialog {...confirmDialog.props} />
+ *   </>
+ * );
+ * ```
+ */
+declare function ConfirmDialog({ isOpen, onClose, onConfirm, title, message, confirmLabel, cancelLabel, variant, icon, isLoading, mobileMode, mobileHeight, }: ConfirmDialogProps): react_jsx_runtime.JSX.Element;
 /**
  * Hook for managing ConfirmDialog state
  *
@@ -1966,8 +2156,262 @@ interface ChipProps {
     disabled?: boolean;
     className?: string;
     onClick?: () => void;
+    /** Whether the chip is in a selected state */
+    selected?: boolean;
+    /** Maximum width for text truncation */
+    maxWidth?: string | number;
+    /** Unique key for use in ChipGroup selection */
+    chipKey?: string;
+}
+interface ChipGroupProps {
+    children: ReactNode;
+    /** Layout direction */
+    direction?: 'horizontal' | 'vertical';
+    /** Whether chips should wrap to next line */
+    wrap?: boolean;
+    /** Gap between chips */
+    gap?: 'xs' | 'sm' | 'md' | 'lg';
+    /** Selection mode */
+    selectionMode?: 'none' | 'single' | 'multiple';
+    /** Selected chip keys (controlled) */
+    selectedKeys?: string[];
+    /** Callback when selection changes */
+    onSelectionChange?: (keys: string[]) => void;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * Chip - Compact element for displaying values with optional remove functionality
+ *
+ * @example Basic chip
+ * ```tsx
+ * <Chip>Tag Name</Chip>
+ * ```
+ *
+ * @example Removable chip
+ * ```tsx
+ * <Chip onClose={() => removeTag(tag)}>
+ *   {tag.name}
+ * </Chip>
+ * ```
+ *
+ * @example With icon and selected state
+ * ```tsx
+ * <Chip
+ *   icon={<Star className="h-3 w-3" />}
+ *   selected={isSelected}
+ *   onClick={() => toggleSelection()}
+ * >
+ *   Favorite
+ * </Chip>
+ * ```
+ */
+declare function Chip({ children, variant, size, onClose, icon, disabled, className, onClick, selected, maxWidth, chipKey, }: ChipProps): react_jsx_runtime.JSX.Element;
+/**
+ * ChipGroup - Container for multiple chips with layout and selection support
+ *
+ * @example Basic group
+ * ```tsx
+ * <ChipGroup wrap gap="sm">
+ *   {tags.map(tag => (
+ *     <Chip key={tag.id} onClose={() => removeTag(tag)}>
+ *       {tag.name}
+ *     </Chip>
+ *   ))}
+ * </ChipGroup>
+ * ```
+ *
+ * @example Selectable group (single)
+ * ```tsx
+ * <ChipGroup
+ *   selectionMode="single"
+ *   selectedKeys={[selectedCategory]}
+ *   onSelectionChange={(keys) => setSelectedCategory(keys[0])}
+ * >
+ *   <Chip chipKey="all">All</Chip>
+ *   <Chip chipKey="active">Active</Chip>
+ *   <Chip chipKey="archived">Archived</Chip>
+ * </ChipGroup>
+ * ```
+ *
+ * @example Multi-select group
+ * ```tsx
+ * <ChipGroup
+ *   selectionMode="multiple"
+ *   selectedKeys={selectedTags}
+ *   onSelectionChange={setSelectedTags}
+ *   wrap
+ * >
+ *   {availableTags.map(tag => (
+ *     <Chip key={tag} chipKey={tag}>{tag}</Chip>
+ *   ))}
+ * </ChipGroup>
+ * ```
+ */
+declare function ChipGroup({ children, direction, wrap, gap, selectionMode, selectedKeys, onSelectionChange, className, }: ChipGroupProps): react_jsx_runtime.JSX.Element;
+
+interface CheckboxListItem<T = unknown> {
+    key: string;
+    label: string;
+    description?: string;
+    group?: string;
+    disabled?: boolean;
+    data?: T;
+}
+interface CheckboxListProps<T = unknown> {
+    /** Array of items to display */
+    items: CheckboxListItem<T>[];
+    /** Currently selected item keys */
+    selectedKeys: string[];
+    /** Callback when selection changes */
+    onSelectionChange: (selectedKeys: string[]) => void;
+    /** Labels for groups (key -> display label) */
+    groupLabels?: Record<string, string>;
+    /** Keys of groups that should be expanded (controlled) */
+    expandedGroups?: string[];
+    /** Default expanded groups (uncontrolled) */
+    defaultExpandedGroups?: string[];
+    /** Callback when group expansion changes */
+    onGroupToggle?: (groupKey: string, expanded: boolean) => void;
+    /** Enable search functionality */
+    searchable?: boolean;
+    /** Search input placeholder */
+    searchPlaceholder?: string;
+    /** Custom filter function */
+    filterFn?: (item: CheckboxListItem<T>, searchTerm: string) => boolean;
+    /** Debounce delay for search in ms */
+    debounceMs?: number;
+    /** Maximum height with overflow scroll */
+    maxHeight?: string | number;
+    /** Show select all checkbox */
+    showSelectAll?: boolean;
+    /** Select all label text */
+    selectAllLabel?: string;
+    /** Show count of selected items */
+    showSelectedCount?: boolean;
+    /** Message when no items available */
+    emptyMessage?: string;
+    /** Message when search has no results */
+    noResultsMessage?: string;
+    /** Size variant */
+    size?: 'sm' | 'md' | 'lg';
+    /** Visual variant */
+    variant?: 'default' | 'bordered' | 'card';
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * CheckboxList - Multi-select list with checkboxes, grouping, and search
+ *
+ * @example Basic usage
+ * ```tsx
+ * <CheckboxList
+ *   items={[
+ *     { key: '1', label: 'Option 1' },
+ *     { key: '2', label: 'Option 2' },
+ *   ]}
+ *   selectedKeys={selected}
+ *   onSelectionChange={setSelected}
+ * />
+ * ```
+ *
+ * @example With grouping and search
+ * ```tsx
+ * <CheckboxList
+ *   items={fields}
+ *   selectedKeys={selectedFields}
+ *   onSelectionChange={setSelectedFields}
+ *   groupLabels={{ table1: 'Users', table2: 'Orders' }}
+ *   searchable
+ *   searchPlaceholder="Search fields..."
+ *   showSelectAll
+ *   maxHeight="300px"
+ * />
+ * ```
+ */
+declare function CheckboxList<T = unknown>({ items, selectedKeys, onSelectionChange, groupLabels, expandedGroups: controlledExpandedGroups, defaultExpandedGroups, onGroupToggle, searchable, searchPlaceholder, filterFn, debounceMs, maxHeight, showSelectAll, selectAllLabel, showSelectedCount, emptyMessage, noResultsMessage, size, variant, className, }: CheckboxListProps<T>): react_jsx_runtime.JSX.Element;
+
+interface SearchableListItem<T = unknown> {
+    key: string;
+    data: T;
+}
+interface SearchableListProps<T = unknown> {
+    /** Array of items to display */
+    items: SearchableListItem<T>[];
+    /** Search input placeholder */
+    searchPlaceholder?: string;
+    /** Controlled search value */
+    searchValue?: string;
+    /** Callback when search changes */
+    onSearchChange?: (value: string) => void;
+    /** Custom filter function */
+    filterFn?: (item: SearchableListItem<T>, searchTerm: string) => boolean;
+    /** Debounce delay for search in ms */
+    debounceMs?: number;
+    /** Render function for each item */
+    renderItem: (item: SearchableListItem<T>, index: number, isSelected: boolean, isHighlighted: boolean) => ReactNode;
+    /** Currently selected item key */
+    selectedKey?: string;
+    /** Callback when item is selected */
+    onSelect?: (item: SearchableListItem<T>) => void;
+    /** Maximum height with overflow scroll */
+    maxHeight?: string | number;
+    /** Show result count */
+    showResultCount?: boolean;
+    /** Result count format function */
+    formatResultCount?: (count: number, total: number) => string;
+    /** Message when no items available */
+    emptyMessage?: string | ReactNode;
+    /** Message when search has no results */
+    noResultsMessage?: string | ReactNode;
+    /** Loading state */
+    loading?: boolean;
+    /** Loading message */
+    loadingMessage?: string | ReactNode;
+    /** Size variant */
+    size?: 'sm' | 'md' | 'lg';
+    /** Visual variant */
+    variant?: 'default' | 'bordered' | 'card';
+    /** Additional CSS classes */
+    className?: string;
+    /** Enable keyboard navigation (arrow keys, enter) */
+    enableKeyboardNavigation?: boolean;
+    /** Auto-focus search input */
+    autoFocus?: boolean;
 }
-declare function Chip({ children, variant, size, onClose, icon, disabled, className, onClick, }: ChipProps): react_jsx_runtime.JSX.Element;
+/**
+ * SearchableList - List component with integrated search/filter functionality
+ *
+ * @example Basic usage
+ * ```tsx
+ * <SearchableList
+ *   items={users.map(u => ({ key: u.id, data: u }))}
+ *   renderItem={(item) => <div>{item.data.name}</div>}
+ *   onSelect={(item) => setSelectedUser(item.data)}
+ *   searchable
+ *   searchPlaceholder="Search users..."
+ * />
+ * ```
+ *
+ * @example With custom filter and loading
+ * ```tsx
+ * <SearchableList
+ *   items={products}
+ *   renderItem={(item, index, isSelected) => (
+ *     <div className={isSelected ? 'bg-accent-50' : ''}>
+ *       {item.data.name} - ${item.data.price}
+ *     </div>
+ *   )}
+ *   filterFn={(item, term) =>
+ *     item.data.name.toLowerCase().includes(term.toLowerCase())
+ *   }
+ *   loading={isLoading}
+ *   loadingMessage="Fetching products..."
+ *   maxHeight="400px"
+ * />
+ * ```
+ */
+declare function SearchableList<T = unknown>({ items, searchPlaceholder, searchValue: controlledSearchValue, onSearchChange, filterFn, debounceMs, renderItem, selectedKey, onSelect, maxHeight, showResultCount, formatResultCount, emptyMessage, noResultsMessage, loading, loadingMessage, size, variant, className, enableKeyboardNavigation, autoFocus, }: SearchableListProps<T>): react_jsx_runtime.JSX.Element;
 
 interface NumberInputProps {
     value?: number;
@@ -2082,12 +2526,153 @@ interface CollapsibleProps {
 }
 declare function Collapsible({ trigger, children, defaultOpen, open: controlledOpen, onOpenChange, disabled, showIcon, className, triggerClassName, contentClassName, }: CollapsibleProps): react_jsx_runtime.JSX.Element;
 
-type Breakpoint = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+interface ExpandablePanelProps {
+    /** Content shown in the collapsed header bar */
+    collapsedContent: ReactNode;
+    /** Full content shown when expanded */
+    children: ReactNode;
+    /** Position of the panel */
+    position?: 'bottom' | 'top';
+    /**
+     * Positioning mode:
+     * - 'viewport': Fixed to viewport edges (default, for standalone use)
+     * - 'container': Sticky within parent container (for use inside Page/AppLayout)
+     */
+    mode?: 'viewport' | 'container';
+    /** Whether the panel is expanded (controlled) */
+    expanded?: boolean;
+    /** Default expanded state (uncontrolled) */
+    defaultExpanded?: boolean;
+    /** Callback when expanded state changes */
+    onExpandedChange?: (expanded: boolean) => void;
+    /** Height when expanded */
+    expandedHeight?: string | number;
+    /**
+     * Maximum width of the panel (e.g., '1400px', '80%', 1200)
+     * When set, the panel will be centered horizontally within its container/viewport
+     */
+    maxWidth?: string | number;
+    /** Whether to show the expand/collapse toggle button */
+    showToggle?: boolean;
+    /** Custom toggle button content */
+    toggleContent?: ReactNode;
+    /** Additional actions to show in the header (right side) */
+    headerActions?: ReactNode;
+    /** Close on Escape key */
+    closeOnEscape?: boolean;
+    /** Visual variant */
+    variant?: 'default' | 'elevated' | 'bordered';
+    /** Size variant affecting header height */
+    size?: 'sm' | 'md' | 'lg';
+    /** Additional CSS classes for the container */
+    className?: string;
+    /** Additional CSS classes for the header */
+    headerClassName?: string;
+    /** Additional CSS classes for the content */
+    contentClassName?: string;
+    /** Z-index for the panel (only applies in viewport mode) */
+    zIndex?: number;
+}
+/**
+ * ExpandablePanel - A panel that sticks to the bottom (or top) and can expand/collapse
+ *
+ * For bottom position: expands UPWARD (content appears above header)
+ * For top position: expands DOWNWARD (content appears below header)
+ *
+ * Two modes of operation:
+ * - `viewport`: Fixed to the viewport (for standalone pages, covers StatusBar)
+ * - `container`: Sticky within its parent container (for use inside Page/AppLayout, respects StatusBar)
+ *
+ * @example Basic usage (viewport mode - full page)
+ * ```tsx
+ * <ExpandablePanel
+ *   mode="viewport"
+ *   collapsedContent={<Text>3 items selected</Text>}
+ *   expandedHeight="300px"
+ * >
+ *   {content}
+ * </ExpandablePanel>
+ * ```
+ *
+ * @example Inside Page/AppLayout (container mode - respects StatusBar)
+ * ```tsx
+ * <Page>
+ *   <ExpandablePanelContainer>
+ *     <div className="flex-1 overflow-auto">
+ *       {pageContent}
+ *     </div>
+ *     <ExpandablePanel
+ *       mode="container"
+ *       collapsedContent={<Text>3 items selected</Text>}
+ *       expandedHeight="300px"
+ *     >
+ *       {selectedItemsContent}
+ *     </ExpandablePanel>
+ *   </ExpandablePanelContainer>
+ * </Page>
+ * ```
+ *
+ * @example With maxWidth to match page content
+ * ```tsx
+ * <ExpandablePanel
+ *   mode="container"
+ *   maxWidth="1400px"
+ *   collapsedContent={<Text>Generated SQL</Text>}
+ *   expandedHeight="300px"
+ * >
+ *   {sqlContent}
+ * </ExpandablePanel>
+ * ```
+ */
+declare function ExpandablePanel({ collapsedContent, children, position, mode, expanded: controlledExpanded, defaultExpanded, onExpandedChange, expandedHeight, maxWidth, showToggle, toggleContent, headerActions, closeOnEscape, variant, size, className, headerClassName, contentClassName, zIndex, }: ExpandablePanelProps): react_jsx_runtime.JSX.Element;
+/**
+ * ExpandablePanelSpacer - Adds spacing to prevent content from being hidden behind the panel
+ * Only needed in viewport mode. In container mode, the panel is part of the flex layout.
+ *
+ * @example
+ * ```tsx
+ * <div>
+ *   <MainContent />
+ *   <ExpandablePanelSpacer size="md" />
+ * </div>
+ * <ExpandablePanel mode="viewport" position="bottom" size="md" {...props} />
+ * ```
+ */
+declare function ExpandablePanelSpacer({ size }: {
+    size?: 'sm' | 'md' | 'lg';
+}): react_jsx_runtime.JSX.Element;
+/**
+ * ExpandablePanelContainer - Wrapper that sets up proper layout for container mode
+ * Use this to wrap your page content when using ExpandablePanel with mode="container"
+ *
+ * This creates a relative container with full height so the panel can position absolutely
+ * at the bottom while the content scrolls above it.
+ *
+ * @example
+ * ```tsx
+ * <Page>
+ *   <ExpandablePanelContainer>
+ *     <div className="flex-1 overflow-auto p-4">
+ *       {pageContent}
+ *     </div>
+ *     <ExpandablePanel mode="container" {...props}>
+ *       {panelContent}
+ *     </ExpandablePanel>
+ *   </ExpandablePanelContainer>
+ * </Page>
+ * ```
+ */
+declare function ExpandablePanelContainer({ children, className, }: {
+    children: ReactNode;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+
+type Breakpoint$1 = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 interface ResponsiveProps {
     children: ReactNode;
-    above?: Breakpoint;
-    below?: Breakpoint;
-    only?: Breakpoint;
+    above?: Breakpoint$1;
+    below?: Breakpoint$1;
+    only?: Breakpoint$1;
     className?: string;
 }
 /**
@@ -2130,14 +2715,6 @@ declare function Show({ children, above, below, only, className }: ResponsivePro
  * </Hide>
  */
 declare function Hide({ children, above, below, only, className }: ResponsiveProps): react_jsx_runtime.JSX.Element;
-/**
- * useMediaQuery hook - React hook for responsive logic in components
- *
- * @example
- * const isMobile = useMediaQuery('(max-width: 768px)');
- * const isDesktop = useMediaQuery('(min-width: 1024px)');
- */
-declare function useMediaQuery(query: string): boolean;
 
 interface BreadcrumbItem {
     label: string;
@@ -2380,14 +2957,14 @@ interface FileUploadProps {
 declare function FileUpload({ accept, multiple, maxSize, // 10MB default
 maxFiles, onFilesSelected, onUpload, disabled, }: FileUploadProps): react_jsx_runtime.JSX.Element;
 
-interface Section$1 {
+interface Section$2 {
     id: string;
     label: string;
 }
 interface PageNavigationProps {
     className?: string;
     /** External sections to display (overrides auto-detection) */
-    sections?: Section$1[];
+    sections?: Section$2[];
 }
 declare const PageNavigation: React__default.FC<PageNavigationProps>;
 
@@ -2410,6 +2987,12 @@ interface SidebarProps {
     header?: React__default.ReactNode;
     footer?: React__default.ReactNode;
     currentPath?: string;
+    /** Whether sidebar is open on mobile (drawer mode) */
+    mobileOpen?: boolean;
+    /** Callback when mobile drawer should close */
+    onMobileClose?: () => void;
+    /** Width of the sidebar (default: 256px / w-64) */
+    width?: string;
 }
 interface SidebarGroupProps {
     title?: string;
@@ -2419,34 +3002,444 @@ interface SidebarGroupProps {
     currentPath?: string;
 }
 declare function SidebarGroup({ title, items, onNavigate, defaultExpanded, currentPath }: SidebarGroupProps): react_jsx_runtime.JSX.Element;
-declare function Sidebar({ items, onNavigate, className, header, footer, currentPath }: SidebarProps): react_jsx_runtime.JSX.Element;
-
-interface LogoProps {
-    size?: 'sm' | 'md' | 'lg';
-    showText?: boolean;
-    text?: string;
-    className?: string;
-}
-declare function Logo({ size, showText, text, className, }: LogoProps): react_jsx_runtime.JSX.Element;
-
-interface UserProfileButtonProps {
-    userName: string;
-    userEmail?: string;
-    userTitle?: string;
-    initials: string;
-    isOnline?: boolean;
-    onProfileClick?: () => void;
-    onSettingsClick?: () => void;
-    onLogoutClick?: () => void;
-    dropdownItems?: DropdownItem[];
-    className?: string;
-}
-declare function UserProfileButton({ userName, userEmail, userTitle, initials, isOnline, onProfileClick, onSettingsClick, onLogoutClick, dropdownItems, className, }: UserProfileButtonProps): react_jsx_runtime.JSX.Element;
+/**
+ * Sidebar - Navigation sidebar with mobile drawer support
+ *
+ * On desktop: Renders as a fixed-width sidebar
+ * On mobile: Renders as a drawer overlay when mobileOpen is true
+ *
+ * @example Desktop usage (no mobile props)
+ * ```tsx
+ * <Sidebar
+ *   items={navItems}
+ *   header={<Logo />}
+ *   footer={<UserProfile />}
+ *   currentPath={location.pathname}
+ *   onNavigate={(href) => navigate(href)}
+ * />
+ * ```
+ *
+ * @example With mobile drawer support
+ * ```tsx
+ * const [mobileOpen, setMobileOpen] = useState(false);
+ *
+ * <Sidebar
+ *   items={navItems}
+ *   header={<Logo />}
+ *   mobileOpen={mobileOpen}
+ *   onMobileClose={() => setMobileOpen(false)}
+ *   onNavigate={(href) => {
+ *     navigate(href);
+ *     setMobileOpen(false); // Close drawer on navigation
+ *   }}
+ * />
+ * ```
+ */
+declare function Sidebar({ items, onNavigate, className, header, footer, currentPath, mobileOpen, onMobileClose, width, }: SidebarProps): react_jsx_runtime.JSX.Element | null;
 
-interface Section {
-    /** Unique identifier for the section */
+/**
+ * Bottom navigation item configuration
+ */
+interface BottomNavItem {
+    /** Unique identifier for the nav item */
     id: string;
-    /** Display label for the section in navigation */
+    /** Display label */
+    label: string;
+    /** Icon element (use lucide-react icons) */
+    icon: React__default.ReactNode;
+    /** Navigation URL (optional) */
+    href?: string;
+    /** Badge count for notifications */
+    badge?: number;
+    /** Click handler (alternative to href) */
+    onClick?: () => void;
+    /** Disabled state */
+    disabled?: boolean;
+}
+/**
+ * BottomNavigation component props
+ */
+interface BottomNavigationProps {
+    /** Navigation items (max 5 recommended) */
+    items: BottomNavItem[];
+    /** Currently active item ID */
+    activeId?: string;
+    /** Navigation handler - receives item ID and href */
+    onNavigate?: (id: string, href?: string) => void;
+    /** Show labels below icons */
+    showLabels?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+    /** Safe area handling for notched devices */
+    safeArea?: boolean;
+}
+/**
+ * BottomNavigation - Mobile-style bottom tab bar
+ *
+ * iOS/Android-style fixed bottom navigation with icons, labels, and badges.
+ * Handles safe area insets for notched devices automatically.
+ *
+ * Best practices:
+ * - Use 3-5 items maximum
+ * - Keep labels short (1-2 words)
+ * - Use consistent icon style
+ *
+ * @example Basic usage
+ * ```tsx
+ * import { BottomNavigation } from 'notebook-ui';
+ * import { Home, Search, Bell, User } from 'lucide-react';
+ *
+ * const navItems = [
+ *   { id: 'home', label: 'Home', icon: <Home />, href: '/' },
+ *   { id: 'search', label: 'Search', icon: <Search />, href: '/search' },
+ *   { id: 'notifications', label: 'Alerts', icon: <Bell />, badge: 3 },
+ *   { id: 'profile', label: 'Profile', icon: <User />, href: '/profile' },
+ * ];
+ *
+ * <BottomNavigation
+ *   items={navItems}
+ *   activeId="home"
+ *   onNavigate={(id, href) => navigate(href)}
+ * />
+ * ```
+ *
+ * @example With onClick handlers
+ * ```tsx
+ * const navItems = [
+ *   { id: 'home', label: 'Home', icon: <Home />, onClick: () => setTab('home') },
+ *   { id: 'add', label: 'Add', icon: <Plus />, onClick: openAddModal },
+ * ];
+ *
+ * <BottomNavigation items={navItems} activeId={currentTab} />
+ * ```
+ */
+declare function BottomNavigation({ items, activeId, onNavigate, showLabels, className, safeArea, }: BottomNavigationProps): react_jsx_runtime.JSX.Element;
+/**
+ * BottomNavigationSpacer - Spacer to prevent content from being hidden behind BottomNavigation
+ *
+ * Place this at the bottom of your scrollable content when using BottomNavigation.
+ *
+ * @example
+ * ```tsx
+ * <div className="flex flex-col h-screen">
+ *   <main className="flex-1 overflow-auto">
+ *     {/* Your content *\/}
+ *     <BottomNavigationSpacer />
+ *   </main>
+ *   <BottomNavigation items={navItems} />
+ * </div>
+ * ```
+ */
+declare function BottomNavigationSpacer({ safeArea }: {
+    safeArea?: boolean;
+}): react_jsx_runtime.JSX.Element;
+
+/**
+ * MobileHeader component props
+ */
+interface MobileHeaderProps {
+    /** Page/section title */
+    title: string;
+    /** Subtitle or breadcrumb text */
+    subtitle?: string;
+    /** Handler for menu button click (hamburger) */
+    onMenuClick?: () => void;
+    /** Handler for back button click - shows back arrow instead of menu */
+    onBackClick?: () => void;
+    /** Handler for close button click - shows X instead of menu */
+    onCloseClick?: () => void;
+    /** Right side action element (button, icon, etc.) */
+    rightAction?: React__default.ReactNode;
+    /** Left side action element (overrides menu/back/close buttons) */
+    leftAction?: React__default.ReactNode;
+    /** Make header sticky at top */
+    sticky?: boolean;
+    /** Show border at bottom */
+    bordered?: boolean;
+    /** Background style */
+    variant?: 'solid' | 'transparent' | 'blur';
+    /** Additional CSS classes */
+    className?: string;
+    /** Safe area handling for notched devices */
+    safeArea?: boolean;
+}
+/**
+ * MobileHeader - Mobile app header with navigation controls
+ *
+ * A flexible mobile header component with support for:
+ * - Hamburger menu button (default)
+ * - Back navigation arrow
+ * - Close button (X)
+ * - Custom left/right actions
+ * - Sticky positioning
+ * - Blur/transparent variants
+ *
+ * @example Basic with menu button
+ * ```tsx
+ * <MobileHeader
+ *   title="Dashboard"
+ *   onMenuClick={() => setDrawerOpen(true)}
+ * />
+ * ```
+ *
+ * @example With back button
+ * ```tsx
+ * <MobileHeader
+ *   title="User Details"
+ *   subtitle="Profile"
+ *   onBackClick={() => navigate(-1)}
+ * />
+ * ```
+ *
+ * @example With right action
+ * ```tsx
+ * <MobileHeader
+ *   title="Settings"
+ *   onMenuClick={openMenu}
+ *   rightAction={
+ *     <Button variant="ghost" iconOnly onClick={save}>
+ *       <Check className="w-5 h-5" />
+ *     </Button>
+ *   }
+ * />
+ * ```
+ *
+ * @example Transparent with blur
+ * ```tsx
+ * <MobileHeader
+ *   title="Photo Gallery"
+ *   variant="blur"
+ *   onBackClick={goBack}
+ * />
+ * ```
+ */
+declare function MobileHeader({ title, subtitle, onMenuClick, onBackClick, onCloseClick, rightAction, leftAction, sticky, bordered, variant, className, safeArea, }: MobileHeaderProps): react_jsx_runtime.JSX.Element;
+/**
+ * MobileHeaderSpacer - Spacer to prevent content from being hidden behind sticky MobileHeader
+ *
+ * Place this at the top of your content when NOT using sticky header
+ * to maintain consistent spacing.
+ *
+ * @example
+ * ```tsx
+ * <MobileHeader title="Page" sticky={false} />
+ * <MobileHeaderSpacer />
+ * <main>Content here</main>
+ * ```
+ */
+declare function MobileHeaderSpacer({ safeArea }: {
+    safeArea?: boolean;
+}): react_jsx_runtime.JSX.Element;
+
+/**
+ * Action item for FAB menu
+ */
+interface FABAction {
+    /** Unique identifier */
+    id: string;
+    /** Icon for the action */
+    icon: React__default.ReactNode;
+    /** Label text (shown on hover/long-press) */
+    label: string;
+    /** Click handler */
+    onClick: () => void;
+    /** Disabled state */
+    disabled?: boolean;
+}
+/**
+ * FloatingActionButton component props
+ */
+interface FloatingActionButtonProps {
+    /** Primary action when FAB is clicked (without menu) */
+    onClick?: () => void;
+    /** Icon for the FAB - defaults to Plus */
+    icon?: React__default.ReactNode;
+    /** Secondary actions shown in menu */
+    actions?: FABAction[];
+    /** Position on screen */
+    position?: 'bottom-right' | 'bottom-left' | 'bottom-center';
+    /** Color variant */
+    variant?: 'primary' | 'secondary' | 'accent';
+    /** Size */
+    size?: 'md' | 'lg';
+    /** Accessible label */
+    label?: string;
+    /** Extended FAB with text label */
+    extended?: boolean;
+    /** Text for extended FAB */
+    extendedLabel?: string;
+    /** Hide FAB (useful for scroll-based show/hide) */
+    hidden?: boolean;
+    /** Custom offset from edge (in pixels) */
+    offset?: {
+        x?: number;
+        y?: number;
+    };
+    /** Additional class names */
+    className?: string;
+}
+/**
+ * FloatingActionButton - Material Design style FAB for mobile
+ *
+ * A prominent button for the primary action on a screen.
+ * Supports single action or expandable menu with multiple actions.
+ *
+ * @example Simple FAB
+ * ```tsx
+ * <FloatingActionButton
+ *   onClick={() => openCreateModal()}
+ *   label="Create new item"
+ * />
+ * ```
+ *
+ * @example FAB with action menu
+ * ```tsx
+ * <FloatingActionButton
+ *   actions={[
+ *     { id: 'photo', icon: <Camera />, label: 'Take Photo', onClick: takePhoto },
+ *     { id: 'upload', icon: <Upload />, label: 'Upload File', onClick: uploadFile },
+ *     { id: 'note', icon: <FileText />, label: 'Create Note', onClick: createNote },
+ *   ]}
+ * />
+ * ```
+ *
+ * @example Extended FAB
+ * ```tsx
+ * <FloatingActionButton
+ *   extended
+ *   extendedLabel="New Task"
+ *   icon={<Plus />}
+ *   onClick={createTask}
+ * />
+ * ```
+ */
+declare function FloatingActionButton({ onClick, icon, actions, position, variant, size, label, extended, extendedLabel, hidden, offset, className, }: FloatingActionButtonProps): React__default.ReactPortal;
+/**
+ * Hook for scroll-based FAB visibility
+ *
+ * @example
+ * ```tsx
+ * const { hidden, scrollDirection } = useFABScroll();
+ * <FloatingActionButton hidden={hidden} />
+ * ```
+ */
+declare function useFABScroll(threshold?: number): {
+    hidden: boolean;
+    scrollDirection: 'up' | 'down' | null;
+};
+
+/**
+ * PullToRefresh component props
+ */
+interface PullToRefreshProps {
+    /** Content to wrap */
+    children: React__default.ReactNode;
+    /** Async refresh handler - should return a Promise */
+    onRefresh: () => Promise<void>;
+    /** Disable pull-to-refresh */
+    disabled?: boolean;
+    /** Pull distance required to trigger refresh (default: 80) */
+    pullThreshold?: number;
+    /** Maximum pull distance (default: 120) */
+    maxPull?: number;
+    /** Custom loading indicator */
+    loadingIndicator?: React__default.ReactNode;
+    /** Custom pull indicator */
+    pullIndicator?: React__default.ReactNode;
+    /** Additional class names for container */
+    className?: string;
+}
+/**
+ * PullToRefresh - Mobile pull-to-refresh gesture handler
+ *
+ * Wraps content and provides native-feeling pull-to-refresh functionality.
+ * Only activates when scrolled to top of content.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <PullToRefresh onRefresh={async () => {
+ *   await fetchLatestData();
+ * }}>
+ *   <div className="min-h-screen">
+ *     {content}
+ *   </div>
+ * </PullToRefresh>
+ * ```
+ *
+ * @example With custom threshold
+ * ```tsx
+ * <PullToRefresh
+ *   onRefresh={handleRefresh}
+ *   pullThreshold={100}
+ *   maxPull={150}
+ * >
+ *   {content}
+ * </PullToRefresh>
+ * ```
+ */
+declare function PullToRefresh({ children, onRefresh, disabled, pullThreshold, maxPull, loadingIndicator, pullIndicator, className, }: PullToRefreshProps): react_jsx_runtime.JSX.Element;
+/**
+ * usePullToRefresh - Hook for custom pull-to-refresh implementations
+ *
+ * @example
+ * ```tsx
+ * const { pullDistance, isRefreshing, bind } = usePullToRefresh({
+ *   onRefresh: async () => {
+ *     await fetchData();
+ *   }
+ * });
+ *
+ * return (
+ *   <div {...bind}>
+ *     {isRefreshing && <Spinner />}
+ *     {content}
+ *   </div>
+ * );
+ * ```
+ */
+declare function usePullToRefresh({ onRefresh, pullThreshold, maxPull, disabled, }: {
+    onRefresh: () => Promise<void>;
+    pullThreshold?: number;
+    maxPull?: number;
+    disabled?: boolean;
+}): {
+    pullDistance: number;
+    isRefreshing: boolean;
+    isReady: boolean;
+    progress: number;
+    bind: {
+        onTouchStart: (e: React__default.TouchEvent) => void;
+        onTouchMove: (e: React__default.TouchEvent) => void;
+        onTouchEnd: () => Promise<void>;
+    };
+};
+
+interface LogoProps {
+    size?: 'sm' | 'md' | 'lg';
+    showText?: boolean;
+    text?: string;
+    className?: string;
+}
+declare function Logo({ size, showText, text, className, }: LogoProps): react_jsx_runtime.JSX.Element;
+
+interface UserProfileButtonProps {
+    userName: string;
+    userEmail?: string;
+    userTitle?: string;
+    initials: string;
+    isOnline?: boolean;
+    onProfileClick?: () => void;
+    onSettingsClick?: () => void;
+    onLogoutClick?: () => void;
+    dropdownItems?: DropdownItem[];
+    className?: string;
+}
+declare function UserProfileButton({ userName, userEmail, userTitle, initials, isOnline, onProfileClick, onSettingsClick, onLogoutClick, dropdownItems, className, }: UserProfileButtonProps): react_jsx_runtime.JSX.Element;
+
+interface Section$1 {
+    /** Unique identifier for the section */
+    id: string;
+    /** Display label for the section in navigation */
     label: string;
 }
 interface LayoutProps {
@@ -2459,7 +3452,7 @@ interface LayoutProps {
     /** Additional CSS classes to apply to the layout container */
     className?: string;
     /** Page sections for navigation dots in the gutter (auto-detected from section IDs in content) */
-    sections?: Section[];
+    sections?: Section$1[];
 }
 /**
  * Layout - Complete application layout with sidebar, gutter, and scrollable content
@@ -2514,6 +3507,122 @@ interface LayoutProps {
  */
 declare const Layout: React__default.FC<LayoutProps>;
 
+interface Section {
+    /** Unique identifier for the section */
+    id: string;
+    /** Display label for the section in navigation */
+    label: string;
+}
+interface MobileLayoutProps {
+    /** Main page content */
+    children: React__default.ReactNode;
+    /** Sidebar navigation items (required for both desktop sidebar and mobile drawer) */
+    sidebarItems: SidebarItem[];
+    /** Current active path for highlighting */
+    currentPath?: string;
+    /** Handler for navigation clicks */
+    onNavigate?: (href: string) => void;
+    /** Header component for sidebar (logo, branding, etc.) */
+    header?: React__default.ReactNode;
+    /** User profile button for sidebar footer */
+    userProfile?: React__default.ReactNode;
+    /** Additional sidebar content */
+    sidebarFooter?: React__default.ReactNode;
+    /** Title displayed in mobile header (required for mobile layout) */
+    title: string;
+    /** Subtitle displayed in mobile header */
+    subtitle?: string;
+    /** Right action for mobile header */
+    headerRightAction?: React__default.ReactNode;
+    /** Custom left action for mobile header (overrides menu button) */
+    headerLeftAction?: React__default.ReactNode;
+    /** Mobile header variant */
+    headerVariant?: MobileHeaderProps['variant'];
+    /** Bottom navigation items for mobile (if not provided, uses sidebarItems) */
+    bottomNavItems?: BottomNavItem[];
+    /** Active bottom nav item ID */
+    activeBottomNavId?: string;
+    /** Show labels on bottom nav */
+    showBottomNavLabels?: boolean;
+    /** Optional status bar component displayed at the bottom (desktop only) */
+    statusBar?: React__default.ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+    /** Page sections for navigation dots in desktop gutter */
+    sections?: Section[];
+    /** Force mobile layout even on desktop */
+    forceMobile?: boolean;
+    /** Force desktop layout even on mobile */
+    forceDesktop?: boolean;
+    /** Hide bottom navigation on mobile */
+    hideBottomNav?: boolean;
+    /** Hide mobile header */
+    hideMobileHeader?: boolean;
+    /** Use safe area insets for notched devices */
+    safeArea?: boolean;
+}
+/**
+ * MobileLayout - Auto-responsive layout that switches between desktop and mobile patterns
+ *
+ * This component automatically detects the viewport size and renders the appropriate layout:
+ * - **Desktop** (≥1024px): Standard Layout with sidebar, gutter, and scrollable content
+ * - **Mobile/Tablet** (<1024px): Mobile header, drawer navigation, bottom tab bar
+ *
+ * The mobile layout features:
+ * - Sticky header with hamburger menu to open drawer
+ * - Sidebar rendered as a slide-in drawer
+ * - Bottom navigation bar for primary navigation
+ * - Safe area support for notched devices
+ *
+ * @example Basic usage
+ * ```tsx
+ * <MobileLayout
+ *   sidebarItems={[
+ *     { id: 'home', label: 'Home', icon: <Home />, href: '/' },
+ *     { id: 'tasks', label: 'Tasks', icon: <CheckSquare />, href: '/tasks' },
+ *     { id: 'settings', label: 'Settings', icon: <Settings />, href: '/settings' }
+ *   ]}
+ *   currentPath={location.pathname}
+ *   onNavigate={(href) => navigate(href)}
+ *   title="My App"
+ *   header={<Logo />}
+ *   userProfile={<UserProfileButton user={user} />}
+ * >
+ *   <Page>
+ *     <h1>Dashboard</h1>
+ *   </Page>
+ * </MobileLayout>
+ * ```
+ *
+ * @example With custom bottom nav items
+ * ```tsx
+ * <MobileLayout
+ *   sidebarItems={fullNavItems}
+ *   bottomNavItems={[
+ *     { id: 'home', label: 'Home', icon: <Home />, href: '/' },
+ *     { id: 'search', label: 'Search', icon: <Search />, href: '/search' },
+ *     { id: 'profile', label: 'Profile', icon: <User />, href: '/profile' }
+ *   ]}
+ *   currentPath={location.pathname}
+ *   title="My App"
+ * >
+ *   {children}
+ * </MobileLayout>
+ * ```
+ *
+ * @example Force mobile layout for testing
+ * ```tsx
+ * <MobileLayout
+ *   sidebarItems={items}
+ *   title="Mobile Preview"
+ *   forceMobile
+ * >
+ *   {children}
+ * </MobileLayout>
+ * ```
+ */
+declare const MobileLayout: React__default.FC<MobileLayoutProps>;
+
 interface TwoColumnContentProps {
     /** Content for the left sidebar column */
     sidebar: React__default.ReactNode;
@@ -2701,6 +3810,102 @@ interface NotificationIndicatorProps {
 }
 declare function NotificationIndicator({ count, onClick, className, maxCount, variant, }: NotificationIndicatorProps): react_jsx_runtime.JSX.Element;
 
+/**
+ * Configuration for how data should display in card view
+ */
+interface CardViewConfig<T> {
+    /** Column key to use as the main title */
+    titleKey: keyof T | string;
+    /** Column key to use as subtitle (optional) */
+    subtitleKey?: keyof T | string;
+    /** Column keys to show as metadata rows */
+    metadataKeys?: (keyof T | string)[];
+    /** Column key to use for badge/status display */
+    badgeKey?: keyof T | string;
+    /** Column key for avatar/image (renders circular image) */
+    avatarKey?: keyof T | string;
+    /** Custom render function for entire card content */
+    renderCard?: (item: T, columns: DataTableColumn<T>[]) => React__default.ReactNode;
+    /** Show chevron indicator for clickable cards */
+    showChevron?: boolean;
+}
+interface DataTableCardViewProps<T extends BaseDataItem$1> {
+    /** Data items to display */
+    data: T[];
+    /** Column definitions (used for rendering values and getting column info) */
+    columns: DataTableColumn<T>[];
+    /** Card view configuration */
+    cardConfig?: CardViewConfig<T>;
+    /** Loading state */
+    loading?: boolean;
+    /** Number of skeleton cards to show while loading */
+    loadingRows?: number;
+    /** Empty state message */
+    emptyMessage?: string;
+    /** Click handler for card tap */
+    onCardClick?: (item: T) => void;
+    /** Long press / context menu handler */
+    onCardLongPress?: (item: T, event: React__default.TouchEvent | React__default.MouseEvent) => void;
+    /** Enable selection mode */
+    selectable?: boolean;
+    /** Currently selected row keys */
+    selectedRows?: Set<string>;
+    /** Selection change handler */
+    onSelectionChange?: (selectedRows: string[]) => void;
+    /** Function to extract unique key from row */
+    keyExtractor?: (row: T) => string;
+    /** Row actions (shown in action menu) */
+    actions?: DataTableAction<T>[];
+    /** Built-in edit handler */
+    onEdit?: (item: T) => void;
+    /** Built-in delete handler */
+    onDelete?: (item: T) => void;
+    /** Additional CSS classes */
+    className?: string;
+    /** Custom card class name */
+    cardClassName?: string;
+    /** Gap between cards */
+    gap?: 'sm' | 'md' | 'lg';
+}
+/**
+ * DataTableCardView - Mobile-friendly card view for data tables
+ *
+ * Renders data as cards instead of table rows, optimized for touch interaction.
+ * Automatically uses column render functions for consistent data display.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <DataTableCardView
+ *   data={users}
+ *   columns={columns}
+ *   cardConfig={{
+ *     titleKey: 'name',
+ *     subtitleKey: 'email',
+ *     metadataKeys: ['department', 'role'],
+ *     badgeKey: 'status',
+ *   }}
+ *   onCardClick={(user) => navigate(`/users/${user.id}`)}
+ * />
+ * ```
+ *
+ * @example With selection
+ * ```tsx
+ * <DataTableCardView
+ *   data={orders}
+ *   columns={columns}
+ *   cardConfig={{
+ *     titleKey: 'orderNumber',
+ *     subtitleKey: 'customer',
+ *     badgeKey: 'status',
+ *   }}
+ *   selectable
+ *   selectedRows={selectedOrders}
+ *   onSelectionChange={setSelectedOrders}
+ * />
+ * ```
+ */
+declare function DataTableCardView<T extends BaseDataItem$1>({ data, columns, cardConfig, loading, loadingRows, emptyMessage, onCardClick, onCardLongPress, selectable, selectedRows, onSelectionChange, keyExtractor, actions, onEdit, onDelete, className, cardClassName, gap, }: DataTableCardViewProps<T>): react_jsx_runtime.JSX.Element;
+
 /**
  * Base data item interface - all data items must have an id
  *
@@ -2921,6 +4126,14 @@ interface DataTableProps<T extends BaseDataItem$1 = BaseDataItem$1> {
     onPageSizeChange?: (pageSize: number) => void;
     /** Show page size selector (default: true when paginated) */
     showPageSizeSelector?: boolean;
+    /** Mobile view mode: 'auto' (detect viewport), 'card' (always cards), 'table' (always table) */
+    mobileView?: 'auto' | 'card' | 'table';
+    /** Configuration for card view layout */
+    cardConfig?: CardViewConfig<T>;
+    /** Gap between cards in card view */
+    cardGap?: 'sm' | 'md' | 'lg';
+    /** Custom class name for cards */
+    cardClassName?: string;
 }
 /**
  * DataTable - Feature-rich data table component
@@ -2966,7 +4179,98 @@ interface DataTableProps<T extends BaseDataItem$1 = BaseDataItem$1> {
  * />
  * ```
  */
-declare function DataTable<T extends BaseDataItem$1 = BaseDataItem$1>({ data, columns, loading, error, emptyMessage, loadingRows, className, onSortChange, currentSort, onEdit, onDelete, actions, enableContextMenu, onRowClick, onRowDoubleClick, selectable, selectedRows: externalSelectedRows, onRowSelect, keyExtractor, expandable, expandedRows: externalExpandedRows, renderExpandedRow, expandedRowConfig, showExpandChevron, striped, stripedColor, density, rowClassName, rowHighlight, highlightedRowId, bordered, borderColor, disableHover, hiddenColumns, headerClassName, renderEmptyState: customRenderEmptyState, resizable, onColumnResize, reorderable, onColumnReorder, virtualized, virtualHeight, virtualRowHeight, paginated, currentPage, pageSize, totalItems, onPageChange, pageSizeOptions, onPageSizeChange, showPageSizeSelector, }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
+declare function DataTable<T extends BaseDataItem$1 = BaseDataItem$1>({ data, columns, loading, error, emptyMessage, loadingRows, className, onSortChange, currentSort, onEdit, onDelete, actions, enableContextMenu, onRowClick, onRowDoubleClick, selectable, selectedRows: externalSelectedRows, onRowSelect, keyExtractor, expandable, expandedRows: externalExpandedRows, renderExpandedRow, expandedRowConfig, showExpandChevron, striped, stripedColor, density, rowClassName, rowHighlight, highlightedRowId, bordered, borderColor, disableHover, hiddenColumns, headerClassName, renderEmptyState: customRenderEmptyState, resizable, onColumnResize, reorderable, onColumnReorder, virtualized, virtualHeight, virtualRowHeight, paginated, currentPage, pageSize, totalItems, onPageChange, pageSizeOptions, onPageSizeChange, showPageSizeSelector, mobileView, cardConfig, cardGap, cardClassName, }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
+
+/**
+ * Single swipe action configuration
+ */
+interface SwipeAction {
+    /** Unique identifier */
+    id: string;
+    /** Action label (shown on the button) */
+    label: string;
+    /** Icon to display */
+    icon?: React__default.ReactNode;
+    /** Background color class (Tailwind) */
+    color?: 'primary' | 'success' | 'warning' | 'error' | 'default';
+    /** Click handler */
+    onClick: () => void;
+    /** Whether this is the primary action (full swipe triggers it) */
+    primary?: boolean;
+}
+/**
+ * SwipeActions component props
+ */
+interface SwipeActionsProps {
+    /** Content to wrap with swipe actions */
+    children: React__default.ReactNode;
+    /** Actions shown when swiping left (appears on right side) */
+    leftActions?: SwipeAction[];
+    /** Actions shown when swiping right (appears on left side) */
+    rightActions?: SwipeAction[];
+    /** Swipe threshold in pixels to reveal actions (default: 80) */
+    threshold?: number;
+    /** Full swipe threshold percentage to trigger primary action (default: 0.5) */
+    fullSwipeThreshold?: number;
+    /** Enable full swipe to trigger primary action */
+    fullSwipe?: boolean;
+    /** Disable swipe gestures */
+    disabled?: boolean;
+    /** Callback when actions are revealed/hidden */
+    onSwipeChange?: (direction: 'left' | 'right' | null) => void;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * SwipeActions - Touch-based swipe actions for list items
+ *
+ * Wraps any content with swipe-to-reveal actions, commonly used in mobile
+ * list items for quick actions like delete, archive, edit, etc.
+ *
+ * Features:
+ * - Left and right swipe actions
+ * - Full swipe to trigger primary action
+ * - Spring-back animation
+ * - Touch and mouse support
+ * - Customizable thresholds
+ *
+ * @example Basic delete action
+ * ```tsx
+ * <SwipeActions
+ *   leftActions={[
+ *     {
+ *       id: 'delete',
+ *       label: 'Delete',
+ *       icon: <Trash className="h-5 w-5" />,
+ *       color: 'error',
+ *       onClick: () => handleDelete(item),
+ *       primary: true,
+ *     },
+ *   ]}
+ * >
+ *   <div className="p-4 bg-white">
+ *     List item content
+ *   </div>
+ * </SwipeActions>
+ * ```
+ *
+ * @example Multiple actions on both sides
+ * ```tsx
+ * <SwipeActions
+ *   leftActions={[
+ *     { id: 'delete', label: 'Delete', icon: <Trash />, color: 'error', onClick: handleDelete },
+ *     { id: 'archive', label: 'Archive', icon: <Archive />, color: 'warning', onClick: handleArchive },
+ *   ]}
+ *   rightActions={[
+ *     { id: 'edit', label: 'Edit', icon: <Edit />, color: 'primary', onClick: handleEdit },
+ *   ]}
+ *   fullSwipe
+ * >
+ *   <ListItem />
+ * </SwipeActions>
+ * ```
+ */
+declare function SwipeActions({ children, leftActions, rightActions, threshold, fullSwipeThreshold, fullSwipe, disabled, onSwipeChange, className, }: SwipeActionsProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Enhanced cell type with formula support
@@ -3465,7 +4769,7 @@ interface QueryTransparencyInfo {
     relatedData?: Array<{
         entity: string;
         description: string;
-        type: 'join' | 'include' | 'lookup';
+        type: 'primary' | 'join' | 'include' | 'lookup';
     }>;
     calculations?: Array<{
         field: string;
@@ -3571,6 +4875,201 @@ interface PageLayoutProps {
  */
 declare function PageLayout({ title, description, children, className, headerContent, maxWidth, fixed }: PageLayoutProps): react_jsx_runtime.JSX.Element;
 
+interface PageHeaderAction {
+    /** Unique identifier for the action */
+    id: string;
+    /** Button label text */
+    label: string;
+    /** Icon to display (from lucide-react) */
+    icon?: ReactNode;
+    /** Click handler */
+    onClick: () => void;
+    /** Button variant */
+    variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'outline';
+    /** Disabled state */
+    disabled?: boolean;
+    /** Loading state */
+    loading?: boolean;
+    /** Hide on mobile */
+    hideOnMobile?: boolean;
+}
+interface PageHeaderProps {
+    /** Page title */
+    title: string;
+    /** Optional subtitle/description */
+    subtitle?: string;
+    /** Breadcrumb navigation items */
+    breadcrumbs?: BreadcrumbItem[];
+    /** Show home icon in breadcrumbs (default: true) */
+    showHomeBreadcrumb?: boolean;
+    /** Action buttons to display on the right */
+    actions?: PageHeaderAction[];
+    /** Custom content to render on the right (instead of actions) */
+    rightContent?: ReactNode;
+    /** Custom content to render below title */
+    belowTitle?: ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+    /** Make header sticky at top */
+    sticky?: boolean;
+    /** Back button configuration */
+    backButton?: {
+        label?: string;
+        onClick: () => void;
+    };
+}
+/**
+ * PageHeader - Standard page header with title, breadcrumbs, and actions
+ *
+ * A consistent header component for pages that provides:
+ * - Page title and optional subtitle
+ * - Breadcrumb navigation
+ * - Action buttons (Create, Export, etc.)
+ * - Optional back button
+ * - Sticky positioning option
+ *
+ * @example Basic usage
+ * ```tsx
+ * <PageHeader
+ *   title="Products"
+ *   subtitle="Manage your product catalog"
+ *   breadcrumbs={[{ label: 'Inventory' }, { label: 'Products' }]}
+ *   actions={[
+ *     { id: 'export', label: 'Export', icon: <Download />, onClick: handleExport, variant: 'ghost' },
+ *     { id: 'add', label: 'Add Product', icon: <Plus />, onClick: handleAdd, variant: 'primary' },
+ *   ]}
+ * />
+ * ```
+ *
+ * @example With back button
+ * ```tsx
+ * <PageHeader
+ *   title="Edit Product"
+ *   backButton={{ label: 'Back to Products', onClick: () => navigate('/products') }}
+ * />
+ * ```
+ *
+ * @example With custom right content
+ * ```tsx
+ * <PageHeader
+ *   title="Dashboard"
+ *   rightContent={<DateRangePicker value={range} onChange={setRange} />}
+ * />
+ * ```
+ */
+declare function PageHeader({ title, subtitle, breadcrumbs, showHomeBreadcrumb, actions, rightContent, belowTitle, className, sticky, backButton, }: PageHeaderProps): react_jsx_runtime.JSX.Element;
+
+interface ActionBarAction {
+    /** Unique identifier for the action */
+    id: string;
+    /** Button label text */
+    label: string;
+    /** Icon to display (from lucide-react) */
+    icon?: ReactNode;
+    /** Click handler */
+    onClick: () => void;
+    /** Button variant */
+    variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'outline';
+    /** Disabled state */
+    disabled?: boolean;
+    /** Loading state */
+    loading?: boolean;
+}
+interface ActionBarProps {
+    /** Content to display on the left side (e.g., selection count, status text) */
+    leftContent?: ReactNode;
+    /** Content to display in the center */
+    centerContent?: ReactNode;
+    /** Content to display on the right side (overrides actions) */
+    rightContent?: ReactNode;
+    /** Action buttons to display on the right */
+    actions?: ActionBarAction[];
+    /** Position of the action bar */
+    position?: 'top' | 'bottom';
+    /** Make the bar sticky */
+    sticky?: boolean;
+    /** Show the action bar (useful for conditional display like bulk selection) */
+    visible?: boolean;
+    /** Callback when close/dismiss button is clicked */
+    onDismiss?: () => void;
+    /** Show dismiss button */
+    showDismiss?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+    /** Background variant */
+    variant?: 'default' | 'primary' | 'warning' | 'info';
+    /** Compact mode with less padding */
+    compact?: boolean;
+}
+/**
+ * ActionBar - Flexible toolbar for page-level and contextual actions
+ *
+ * A versatile action container that can be used for:
+ * - Bulk actions when rows are selected
+ * - Page-level actions and controls
+ * - Form action buttons (Save/Cancel)
+ * - Contextual toolbars
+ *
+ * @example Basic bulk actions bar
+ * ```tsx
+ * <ActionBar
+ *   visible={selectedIds.length > 0}
+ *   leftContent={<Text weight="medium">{selectedIds.length} selected</Text>}
+ *   actions={[
+ *     { id: 'export', label: 'Export', icon: <Download />, onClick: handleExport },
+ *     { id: 'delete', label: 'Delete', icon: <Trash />, onClick: handleDelete, variant: 'danger' },
+ *   ]}
+ *   onDismiss={() => setSelectedIds([])}
+ *   showDismiss
+ * />
+ * ```
+ *
+ * @example Sticky bottom form actions
+ * ```tsx
+ * <ActionBar
+ *   position="bottom"
+ *   sticky
+ *   rightContent={
+ *     <>
+ *       <Button variant="ghost" onClick={handleCancel}>Cancel</Button>
+ *       <Button variant="primary" onClick={handleSave} loading={isSaving}>Save Changes</Button>
+ *     </>
+ *   }
+ * />
+ * ```
+ *
+ * @example Info bar with center content
+ * ```tsx
+ * <ActionBar
+ *   variant="info"
+ *   centerContent={
+ *     <Text size="sm">Showing results for "search term" - 42 items found</Text>
+ *   }
+ *   onDismiss={clearSearch}
+ *   showDismiss
+ * />
+ * ```
+ */
+declare function ActionBar({ leftContent, centerContent, rightContent, actions, position, sticky, visible, onDismiss, showDismiss, className, variant, compact, }: ActionBarProps): react_jsx_runtime.JSX.Element | null;
+/**
+ * ActionBar.Left - Semantic wrapper for left content
+ */
+declare function ActionBarLeft({ children }: {
+    children: ReactNode;
+}): react_jsx_runtime.JSX.Element;
+/**
+ * ActionBar.Center - Semantic wrapper for center content
+ */
+declare function ActionBarCenter({ children }: {
+    children: ReactNode;
+}): react_jsx_runtime.JSX.Element;
+/**
+ * ActionBar.Right - Semantic wrapper for right content
+ */
+declare function ActionBarRight({ children }: {
+    children: ReactNode;
+}): react_jsx_runtime.JSX.Element;
+
 interface AdminModalTab {
     id: string;
     label: string;
@@ -3726,6 +5225,7 @@ declare function NotificationBar({ notifications, onDismiss }: NotificationBarPr
 /**
  * Core types for notebook-ui library
  */
+
 /**
  * Base interface for all data items that can be displayed in tables
  */
@@ -3744,6 +5244,7 @@ interface PaginationResponse<T = BaseDataItem> {
     pageSize: number;
     executedQuery?: string;
     executionTimeMs?: number;
+    queryInfo?: QueryTransparencyInfo;
 }
 /**
  * Parameters for fetching paginated data
@@ -4060,5 +5561,324 @@ declare function useColumnReorder<T>(initialColumns: T[], options?: UseColumnReo
     resetOrder: () => void;
 };
 
-export { Accordion, ActionButton, AdminModal, Alert, AlertDialog, AppLayout, Autocomplete, Avatar, Badge, BottomSheet, Box, Breadcrumbs, Button, ButtonGroup, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CardView, Carousel, Checkbox, Chip, Collapsible, ColorPicker, Combobox, ComingSoon, CommandPalette, ConfirmDialog, ContextMenu, ControlBar, CurrencyDisplay, CurrencyInput, Dashboard, DashboardContent, DashboardHeader, DataTable, DateDisplay, DatePicker, DateRangePicker, DateTimePicker, Drawer, DrawerFooter, DropZone, Dropdown, DropdownTrigger, EmptyState, ErrorBoundary, ExpandableRowButton, ExpandableToolbar, ExpandedRowEditForm, ExportButton, FieldArray, FileUpload, FilterBar, FilterControls, FilterStatusBanner, Form, FormContext, FormControl, FormWizard, Grid, GridItem, Hide, HoverCard, InfiniteScroll, Input, KanbanBoard, Layout, Loading, LoadingOverlay, Logo, MarkdownEditor, MaskedInput, Menu, MenuDivider, Modal, ModalFooter, MultiSelect, NotificationBar, NotificationIndicator, NumberInput, Page, PageLayout, PageNavigation, Pagination, PasswordInput, Popover, Progress, QueryTransparency, RadioGroup, Rating, RichTextEditor, SearchBar, Select, Separator, Show, Sidebar, SidebarGroup, Skeleton, SkeletonCard, SkeletonTable, Slider, Spreadsheet, SpreadsheetReport, Stack, StatCard$1 as StatCard, StatItem, StatsCardGrid, StatsGrid, StatusBadge, StatusBar, StepIndicator, Stepper, Switch, Tabs, Text, Textarea, ThemeToggle, TimePicker, Timeline, Toast, ToastContainer, Tooltip, Transfer, TreeView, TwoColumnContent, UserProfileButton, addErrorMessage, addInfoMessage, addSuccessMessage, addWarningMessage, calculateColumnWidth, createActionsSection, createFiltersSection, createMultiSheetExcel, createPageControlsSection, createQueryDetailsSection, exportDataTableToExcel, exportToExcel, formatStatisticValue, formatStatistics, loadColumnOrder, loadColumnWidths, reorderArray, saveColumnOrder, saveColumnWidths, statusManager, useColumnReorder, useColumnResize, useCommandPalette, useConfirmDialog, useFormContext, useMediaQuery };
-export type { AccordionItem, AccordionProps, ActionButtonProps, ActionsSectionProps, AdminModalProps, AdminModalTab, AlertDialogAction, AlertDialogProps, AlertProps, AppLayoutProps, AppliedFilter, AutocompleteHandle, AutocompleteOption, AutocompleteProps, AvatarProps, BadgeProps, BaseDataItem, BottomSheetProps, BoxProps, BreadcrumbItem, BreadcrumbsProps, ButtonGroupOption, ButtonGroupProps, ButtonProps, CalendarEvent, CalendarProps, CardProps, CardViewItem, CarouselItem, CarouselProps, CheckboxFormField, CheckboxProps, ChipProps, CollapsibleProps, ColorPickerProps, ColumnOrder, ColumnResize, ComboboxHandle, ComboboxOption, ComboboxProps, ComingSoonProps, Command, CommandPaletteProps, ConfirmDialogProps, ContextMenuProps, ControlBarProps, ControlBarSection, CurrencyDisplayProps, CurrencyInputProps, DashboardContentProps, DashboardHeaderProps, DashboardProps, DataFetchParams, DataTableAction, DataTableColumn, DataTableExportOptions, DateDisplayProps, DatePickerHandle, DatePickerProps, DateRange, DateRangePickerHandle, DateRangePickerProps, DateTimePickerProps, DrawerProps, DropZoneProps, DropdownItem, DropdownProps, EmptyStateProps, ErrorBoundaryProps, ExcelColumn, ExpandableRowButtonProps, ExpandableToolbarProps, ExpandedRowConfig, ExpandedRowEditFormProps, ExpansionMode, ExportButtonProps, ExportFormat, ExportToExcelOptions, FieldArrayProps, FieldErrors, FileUploadProps, FilterBarProps, FilterConfig, FiltersSectionProps, FormContextValue, FormControlProps, FormField, FormFieldType, FormProps, FormWizardProps, FormattedStatistic, GridItemProps, GridProps, HoverCardProps, InfiniteScrollProps, InputProps, KanbanBoardProps, KanbanCard, KanbanColumn, LayoutProps, LoadingOverlayProps, LoadingProps, LogoProps, MarkdownEditorProps, MaskType, MaskedInputHandle, MaskedInputProps, MenuItem, MenuProps, ModalProps, MultiSelectHandle, MultiSelectOption, MultiSelectProps, MultiSheetExcelOptions, NotificationIndicatorProps, NumberInputProps, PageControlsSectionProps, PageNavigationProps, PageProps, PaginationProps, PaginationResponse, PasswordInputHandle, PasswordInputProps, PasswordStrength, PopoverProps, ProgressProps, QueryDetailsSectionProps, QueryTransparencyInfo, QueryTransparencyProps, RadioGroupProps, RadioOption, RatingProps, RichTextEditorProps, SearchBarProps, SelectFormField, SelectHandle, SelectOption, SelectProps, SeparatorProps, SidebarGroupProps, SidebarItem, SidebarProps, SliderProps, SortConfig, SpreadsheetCell, SpreadsheetProps, StackProps, StatCardProps, StatItemProps, StatisticConfig, StatisticFormat, StatsGridProps, StatusBadgeProps, StatusBarProps, StatusMessage, StatusType, Step, StepConfig, StepIndicatorProps, StepperProps, SwitchFormField, SwitchProps, Tab, TabsProps, TextFormField, TextProps, TextareaFormField, TextareaProps, ThemeToggleProps, TimePickerHandle, TimePickerProps, TimelineItem, TimelineProps, ToastProps, ToastType, ToolbarSection, TooltipProps, TransferItem, TransferProps, TreeNode, TreeViewProps, TwoColumnContentProps, UploadedFile, UseColumnReorderOptions, UseColumnResizeOptions, UseDataTableOptions, UseDataTableReturn, UserProfileButtonProps, ValidationRule, ValidationState$1 as ValidationState, WizardStep };
+/**
+ * Tailwind breakpoint values in pixels
+ */
+declare const BREAKPOINTS: {
+    readonly xs: 0;
+    readonly sm: 640;
+    readonly md: 768;
+    readonly lg: 1024;
+    readonly xl: 1280;
+    readonly '2xl': 1536;
+};
+type Breakpoint = keyof typeof BREAKPOINTS;
+/**
+ * Viewport size state
+ */
+interface ViewportSize {
+    width: number;
+    height: number;
+}
+/**
+ * Orientation type
+ */
+type Orientation = 'portrait' | 'landscape';
+/**
+ * useViewportSize - Returns current viewport dimensions
+ *
+ * Updates on window resize with debouncing for performance.
+ * SSR-safe with sensible defaults.
+ *
+ * @example
+ * const { width, height } = useViewportSize();
+ * console.log(`Viewport: ${width}x${height}`);
+ */
+declare function useViewportSize(): ViewportSize;
+/**
+ * useBreakpoint - Returns the current Tailwind breakpoint
+ *
+ * Automatically updates when viewport crosses breakpoint thresholds.
+ *
+ * @example
+ * const breakpoint = useBreakpoint();
+ * // Returns: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
+ */
+declare function useBreakpoint(): Breakpoint;
+/**
+ * useMediaQuery - React hook for CSS media queries
+ *
+ * SSR-safe implementation that returns false during SSR and
+ * updates reactively when media query match state changes.
+ *
+ * @param query - CSS media query string (e.g., '(max-width: 768px)')
+ * @returns boolean indicating if the media query matches
+ *
+ * @example
+ * const isDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
+ * const isReducedMotion = useMediaQuery('(prefers-reduced-motion: reduce)');
+ * const isPortrait = useMediaQuery('(orientation: portrait)');
+ */
+declare function useMediaQuery(query: string): boolean;
+/**
+ * useIsMobile - Returns true when viewport is mobile-sized (< 768px)
+ *
+ * @example
+ * const isMobile = useIsMobile();
+ * return isMobile ? <MobileNav /> : <DesktopNav />;
+ */
+declare function useIsMobile(): boolean;
+/**
+ * useIsTablet - Returns true when viewport is tablet-sized (768px - 1023px)
+ *
+ * @example
+ * const isTablet = useIsTablet();
+ */
+declare function useIsTablet(): boolean;
+/**
+ * useIsDesktop - Returns true when viewport is desktop-sized (>= 1024px)
+ *
+ * @example
+ * const isDesktop = useIsDesktop();
+ */
+declare function useIsDesktop(): boolean;
+/**
+ * useIsTouchDevice - Detects if the device supports touch input
+ *
+ * Uses multiple detection methods for reliability:
+ * - Touch event support
+ * - Pointer coarse media query
+ * - Max touch points
+ *
+ * @example
+ * const isTouchDevice = useIsTouchDevice();
+ * // Show swipe hints on touch devices
+ */
+declare function useIsTouchDevice(): boolean;
+/**
+ * useOrientation - Returns current screen orientation
+ *
+ * @returns 'portrait' | 'landscape'
+ *
+ * @example
+ * const orientation = useOrientation();
+ * // Adjust layout based on orientation
+ */
+declare function useOrientation(): Orientation;
+/**
+ * useBreakpointValue - Returns different values based on breakpoint
+ *
+ * Mobile-first: Returns the value for the current breakpoint or the
+ * closest smaller breakpoint that has a value defined.
+ *
+ * @param values - Object mapping breakpoints to values
+ * @param defaultValue - Fallback value if no breakpoint matches
+ *
+ * @example
+ * const columns = useBreakpointValue({ xs: 1, sm: 2, lg: 4 }, 1);
+ * // Returns 1 on xs, 2 on sm/md, 4 on lg/xl/2xl
+ *
+ * const padding = useBreakpointValue({ xs: 'p-2', md: 'p-4', xl: 'p-8' });
+ */
+declare function useBreakpointValue<T>(values: Partial<Record<Breakpoint, T>>, defaultValue?: T): T | undefined;
+/**
+ * useResponsiveCallback - Returns a memoized callback that receives responsive info
+ *
+ * Useful for callbacks that need to behave differently based on viewport.
+ *
+ * @example
+ * const handleClick = useResponsiveCallback((isMobile) => {
+ *   if (isMobile) {
+ *     openBottomSheet();
+ *   } else {
+ *     openModal();
+ *   }
+ * });
+ */
+declare function useResponsiveCallback<T extends (...args: any[]) => any>(callback: (isMobile: boolean, isTablet: boolean, isDesktop: boolean) => T): T;
+/**
+ * useSafeAreaInsets - Returns safe area insets for notched devices
+ *
+ * Uses CSS environment variables (env(safe-area-inset-*)) to get
+ * safe area dimensions for devices with notches or home indicators.
+ *
+ * @example
+ * const { top, bottom } = useSafeAreaInsets();
+ * // Add padding-bottom for home indicator
+ */
+declare function useSafeAreaInsets(): {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+};
+/**
+ * usePrefersMobile - Checks if user prefers reduced data/animations (mobile-friendly)
+ *
+ * Combines multiple preferences that might indicate mobile/low-power usage.
+ */
+declare function usePrefersMobile(): boolean;
+
+/**
+ * Mobile context value interface
+ *
+ * Provides comprehensive responsive state for the entire application.
+ */
+interface MobileContextValue {
+    /** True when viewport width < 768px */
+    isMobile: boolean;
+    /** True when viewport width is 768px - 1023px */
+    isTablet: boolean;
+    /** True when viewport width >= 1024px */
+    isDesktop: boolean;
+    /** True when device supports touch input */
+    isTouchDevice: boolean;
+    /** Current Tailwind breakpoint: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' */
+    breakpoint: Breakpoint;
+    /** Current orientation: 'portrait' | 'landscape' */
+    orientation: Orientation;
+    /** Current viewport dimensions */
+    viewport: ViewportSize;
+    /** Safe area insets for notched devices */
+    safeAreaInsets: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    /** True when mobile OR touch device (useful for UI decisions) */
+    useMobileUI: boolean;
+}
+/**
+ * MobileProvider props
+ */
+interface MobileProviderProps {
+    /** Child components that will have access to mobile context */
+    children: ReactNode;
+    /**
+     * Force mobile UI mode regardless of device detection.
+     * Useful for testing or forcing mobile layout on tablets.
+     */
+    forceMobileUI?: boolean;
+    /**
+     * Force desktop UI mode regardless of device detection.
+     * Useful for testing or forcing desktop layout on mobile.
+     */
+    forceDesktopUI?: boolean;
+}
+/**
+ * MobileProvider - Provides responsive state to the entire application
+ *
+ * Wrap your application with MobileProvider to enable auto-responsive
+ * behavior in notebook-ui components.
+ *
+ * @example Basic usage
+ * ```tsx
+ * import { MobileProvider } from 'notebook-ui';
+ *
+ * function App() {
+ *   return (
+ *     <MobileProvider>
+ *       <YourApplication />
+ *     </MobileProvider>
+ *   );
+ * }
+ * ```
+ *
+ * @example Force mobile UI for testing
+ * ```tsx
+ * <MobileProvider forceMobileUI>
+ *   <YourApplication />
+ * </MobileProvider>
+ * ```
+ */
+declare function MobileProvider({ children, forceMobileUI, forceDesktopUI, }: MobileProviderProps): react_jsx_runtime.JSX.Element;
+/**
+ * useMobileContext - Hook to access mobile responsive state
+ *
+ * Must be used within a MobileProvider. Returns comprehensive
+ * responsive state for making UI decisions.
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { isMobile, useMobileUI, breakpoint } = useMobileContext();
+ *
+ *   return useMobileUI ? <MobileView /> : <DesktopView />;
+ * }
+ * ```
+ */
+declare function useMobileContext(): MobileContextValue;
+/**
+ * withMobileContext - HOC to inject mobile context as props
+ *
+ * For class components or when you prefer props over hooks.
+ *
+ * @example
+ * ```tsx
+ * interface Props {
+ *   mobile: MobileContextValue;
+ * }
+ *
+ * class MyComponent extends React.Component<Props> {
+ *   render() {
+ *     const { isMobile } = this.props.mobile;
+ *     return isMobile ? <Mobile /> : <Desktop />;
+ *   }
+ * }
+ *
+ * export default withMobileContext(MyComponent);
+ * ```
+ */
+declare function withMobileContext<P extends {
+    mobile: MobileContextValue;
+}>(Component: React__default.ComponentType<P>): {
+    (props: Omit<P, "mobile">): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+/**
+ * MobileOnly - Renders children only on mobile devices
+ *
+ * @example
+ * ```tsx
+ * <MobileOnly>
+ *   <BottomNavigation items={navItems} />
+ * </MobileOnly>
+ * ```
+ */
+declare function MobileOnly({ children }: {
+    children: ReactNode;
+}): react_jsx_runtime.JSX.Element | null;
+/**
+ * DesktopOnly - Renders children only on desktop devices
+ *
+ * @example
+ * ```tsx
+ * <DesktopOnly>
+ *   <Sidebar items={navItems} />
+ * </DesktopOnly>
+ * ```
+ */
+declare function DesktopOnly({ children }: {
+    children: ReactNode;
+}): react_jsx_runtime.JSX.Element | null;
+/**
+ * Responsive - Renders different content based on device type
+ *
+ * @example
+ * ```tsx
+ * <Responsive
+ *   mobile={<MobileNavigation />}
+ *   tablet={<TabletNavigation />}
+ *   desktop={<DesktopNavigation />}
+ * />
+ * ```
+ */
+declare function Responsive({ mobile, tablet, desktop, }: {
+    mobile?: ReactNode;
+    tablet?: ReactNode;
+    desktop?: ReactNode;
+}): react_jsx_runtime.JSX.Element;
+
+export { Accordion, ActionBar, ActionBarCenter, ActionBarLeft, ActionBarRight, ActionButton, AdminModal, Alert, AlertDialog, AppLayout, Autocomplete, Avatar, BREAKPOINTS, Badge, BottomNavigation, BottomNavigationSpacer, BottomSheet, Box, Breadcrumbs, Button, ButtonGroup, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CardView, Carousel, Checkbox, CheckboxList, Chip, ChipGroup, Collapsible, ColorPicker, Combobox, ComingSoon, CommandPalette, ConfirmDialog, ContextMenu, ControlBar, CurrencyDisplay, CurrencyInput, Dashboard, DashboardContent, DashboardHeader, DataTable, DataTableCardView, DateDisplay, DatePicker, DateRangePicker, DateTimePicker, DesktopOnly, Drawer, DrawerFooter, DropZone, Dropdown, DropdownTrigger, EmptyState, ErrorBoundary, ExpandablePanel, ExpandablePanelContainer, ExpandablePanelSpacer, ExpandableRowButton, ExpandableToolbar, ExpandedRowEditForm, ExportButton, FieldArray, FileUpload, FilterBar, FilterControls, FilterStatusBanner, FloatingActionButton, Form, FormContext, FormControl, FormWizard, Grid, GridItem, Hide, HoverCard, InfiniteScroll, Input, KanbanBoard, Layout, Loading, LoadingOverlay, Logo, MarkdownEditor, MaskedInput, Menu, MenuDivider, MobileHeader, MobileHeaderSpacer, MobileLayout, MobileOnly, MobileProvider, Modal, ModalFooter, MultiSelect, NotificationBar, NotificationIndicator, NumberInput, Page, PageHeader, PageLayout, PageNavigation, Pagination, PasswordInput, Popover, Progress, PullToRefresh, QueryTransparency, RadioGroup, Rating, Responsive, RichTextEditor, SearchBar, SearchableList, Select, Separator, Show, Sidebar, SidebarGroup, Skeleton, SkeletonCard, SkeletonTable, Slider, Spreadsheet, SpreadsheetReport, Stack, StatCard$1 as StatCard, StatItem, StatsCardGrid, StatsGrid, StatusBadge, StatusBar, StepIndicator, Stepper, SwipeActions, Switch, Tabs, Text, Textarea, ThemeToggle, TimePicker, Timeline, Toast, ToastContainer, Tooltip, Transfer, TreeView, TwoColumnContent, UserProfileButton, addErrorMessage, addInfoMessage, addSuccessMessage, addWarningMessage, calculateColumnWidth, createActionsSection, createFiltersSection, createMultiSheetExcel, createPageControlsSection, createQueryDetailsSection, exportDataTableToExcel, exportToExcel, formatStatisticValue, formatStatistics, loadColumnOrder, loadColumnWidths, reorderArray, saveColumnOrder, saveColumnWidths, statusManager, useBreakpoint, useBreakpointValue, useColumnReorder, useColumnResize, useCommandPalette, useConfirmDialog, useFABScroll, useFormContext, useIsDesktop, useIsMobile, useIsTablet, useIsTouchDevice, useMediaQuery, useMobileContext, useOrientation, usePrefersMobile, usePullToRefresh, useResponsiveCallback, useSafeAreaInsets, useViewportSize, withMobileContext };
+export type { AccordionItem, AccordionProps, ActionBarAction, ActionBarProps, ActionButtonProps, ActionsSectionProps, AdminModalProps, AdminModalTab, AlertDialogAction, AlertDialogProps, AlertProps, AppLayoutProps, AppliedFilter, AutocompleteHandle, AutocompleteOption, AutocompleteProps, AvatarProps, BadgeProps, BaseDataItem, BottomNavItem, BottomNavigationProps, BottomSheetProps, BoxProps, BreadcrumbItem, BreadcrumbsProps, Breakpoint, ButtonGroupOption, ButtonGroupProps, ButtonProps, CalendarEvent, CalendarProps, CardProps, CardViewConfig, CardViewItem, CarouselItem, CarouselProps, CheckboxFormField, CheckboxListItem, CheckboxListProps, CheckboxProps, ChipGroupProps, ChipProps, CollapsibleProps, ColorPickerProps, ColumnOrder, ColumnResize, ComboboxHandle, ComboboxOption, ComboboxProps, ComingSoonProps, Command, CommandPaletteProps, ConfirmDialogProps, ContextMenuProps, ControlBarProps, ControlBarSection, CurrencyDisplayProps, CurrencyInputProps, DashboardContentProps, DashboardHeaderProps, DashboardProps, DataFetchParams, DataTableAction, DataTableCardViewProps, DataTableColumn, DataTableExportOptions, DateDisplayProps, DatePickerHandle, DatePickerProps, DateRange, DateRangePickerHandle, DateRangePickerProps, DateTimePickerProps, DrawerProps, DropZoneProps, DropdownItem, DropdownProps, EmptyStateProps, ErrorBoundaryProps, ExcelColumn, ExpandablePanelProps, ExpandableRowButtonProps, ExpandableToolbarProps, ExpandedRowConfig, ExpandedRowEditFormProps, ExpansionMode, ExportButtonProps, ExportFormat, ExportToExcelOptions, FABAction, FieldArrayProps, FieldErrors, FileUploadProps, FilterBarProps, FilterConfig, FiltersSectionProps, FloatingActionButtonProps, FormContextValue, FormControlProps, FormField, FormFieldType, FormProps, FormWizardProps, FormattedStatistic, GridItemProps, GridProps, HoverCardProps, InfiniteScrollProps, InputProps, KanbanBoardProps, KanbanCard, KanbanColumn, LayoutProps, LoadingOverlayProps, LoadingProps, LogoProps, MarkdownEditorProps, MaskType, MaskedInputHandle, MaskedInputProps, MenuItem, MenuProps, MobileContextValue, MobileHeaderProps, MobileLayoutProps, MobileProviderProps, ModalProps, MultiSelectHandle, MultiSelectOption, MultiSelectProps, MultiSheetExcelOptions, NotificationIndicatorProps, NumberInputProps, Orientation, PageControlsSectionProps, PageHeaderAction, PageHeaderProps, PageNavigationProps, PageProps, PaginationProps, PaginationResponse, PasswordInputHandle, PasswordInputProps, PasswordStrength, PopoverProps, ProgressProps, PullToRefreshProps, QueryDetailsSectionProps, QueryTransparencyInfo, QueryTransparencyProps, RadioGroupProps, RadioOption, RatingProps, RichTextEditorProps, SearchBarProps, SearchableListItem, SearchableListProps, SelectFormField, SelectHandle, SelectOption, SelectProps, SeparatorProps, SidebarGroupProps, SidebarItem, SidebarProps, SliderProps, SortConfig, SpreadsheetCell, SpreadsheetProps, StackProps, StatCardProps, StatItemProps, StatisticConfig, StatisticFormat, StatsGridProps, StatusBadgeProps, StatusBarProps, StatusMessage, StatusType, Step, StepConfig, StepIndicatorProps, StepperProps, SwipeAction, SwipeActionsProps, SwitchFormField, SwitchProps, Tab, TabsProps, TextFormField, TextProps, TextareaFormField, TextareaProps, ThemeToggleProps, TimePickerHandle, TimePickerProps, TimelineItem, TimelineProps, ToastProps, ToastType, ToolbarSection, TooltipProps, TransferItem, TransferProps, TreeNode, TreeViewProps, TwoColumnContentProps, UploadedFile, UseColumnReorderOptions, UseColumnResizeOptions, UseDataTableOptions, UseDataTableReturn, UserProfileButtonProps, ValidationRule, ValidationState$1 as ValidationState, ViewportSize, WizardStep };