@papernote/ui/dist/index.d.ts

A modern React component library with a paper notebook aesthetic - minimal, professional, and expressive

import * as React$1 from 'react';
import React__default, { ReactNode, Component, ErrorInfo } from 'react';
import * as react_jsx_runtime from 'react/jsx-runtime';
import { Matrix, CellBase } from 'react-spreadsheet';
export { CellBase, Matrix } from 'react-spreadsheet';
import { LucideIcon } from 'lucide-react';
import { WorkBook } from 'xlsx';

/**
 * Button component props
 */
interface ButtonProps extends React__default.ButtonHTMLAttributes<HTMLButtonElement> {
    /** Visual style variant of the button */
    variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'outline';
    /** Button size */
    size?: 'sm' | 'md' | 'lg';
    /** Show loading spinner and disable interaction */
    loading?: boolean;
    /** Icon to display alongside button text */
    icon?: React__default.ReactNode;
    /** Position of the icon relative to text */
    iconPosition?: 'left' | 'right';
    /** Make button take full width of container */
    fullWidth?: boolean;
    /** Icon-only mode - renders square button with just icon (no text padding) */
    iconOnly?: boolean;
    /** Badge content (number or text) displayed in top-right corner */
    badge?: number | string;
    /** Badge color variant */
    badgeVariant?: 'primary' | 'success' | 'warning' | 'error';
}
/**
 * Button - Interactive button component with variants, sizes, and loading states
 *
 * A versatile button component that supports multiple visual styles, sizes, icons,
 * loading states, and notification badges.
 *
 * Supports ref forwarding for DOM access.
 *
 * @example Basic usage
 * ```tsx
 * <Button variant="primary">Click me</Button>
 * ```
 *
 * @example With icon and loading
 * ```tsx
 * <Button
 *   variant="secondary"
 *   icon={<Save />}
 *   loading={isSaving}
 * >
 *   Save Changes
 * </Button>
 * ```
 *
 * @example Icon-only with badge
 * ```tsx
 * <Button
 *   iconOnly
 *   badge={5}
 *   badgeVariant="error"
 * >
 *   <Bell />
 * </Button>
 * ```
 *
 * @example With ref
 * ```tsx
 * const buttonRef = useRef<HTMLButtonElement>(null);
 * <Button ref={buttonRef}>Focusable</Button>
 * ```
 */
declare const Button: React__default.ForwardRefExoticComponent<ButtonProps & React__default.RefAttributes<HTMLButtonElement>>;

interface ButtonGroupOption {
    /** Option value */
    value: string;
    /** Display label */
    label: string;
    /** Optional icon */
    icon?: React__default.ComponentType<any>;
    /** Disabled state */
    disabled?: boolean;
    /** Tooltip text */
    tooltip?: string;
}
interface ButtonGroupProps {
    /** Available options */
    options: ButtonGroupOption[];
    /** Selected value (single select) */
    value?: string;
    /** Selected values (multi select) */
    values?: string[];
    /** Change handler (single select) */
    onChange?: (value: string) => void;
    /** Change handler (multi select) */
    onChangeMultiple?: (values: string[]) => void;
    /** Allow multiple selection */
    multiple?: boolean;
    /** Input label */
    label?: string;
    /** Size variant */
    size?: 'sm' | 'md' | 'lg';
    /** Full width buttons */
    fullWidth?: boolean;
    /** Disabled state for entire group */
    disabled?: boolean;
    /** Custom className */
    className?: string;
}
/**
 * ButtonGroup component - Toggle button group for single or multiple selection.
 *
 * Features:
 * - Single or multiple selection modes
 * - Icon support
 * - Full width option
 * - Disabled states
 * - Accessible keyboard navigation
 *
 * @example
 * ```tsx
 * // Single select
 * <ButtonGroup
 *   label="Text Alignment"
 *   options={[
 *     { value: 'left', label: 'Left', icon: AlignLeft },
 *     { value: 'center', label: 'Center', icon: AlignCenter },
 *     { value: 'right', label: 'Right', icon: AlignRight },
 *   ]}
 *   value={alignment}
 *   onChange={setAlignment}
 * />
 *
 * // Multi select
 * <ButtonGroup
 *   label="Text Formatting"
 *   options={[
 *     { value: 'bold', label: 'Bold', icon: Bold },
 *     { value: 'italic', label: 'Italic', icon: Italic },
 *     { value: 'underline', label: 'Underline', icon: Underline },
 *   ]}
 *   values={formatting}
 *   onChangeMultiple={setFormatting}
 *   multiple
 * />
 * ```
 */
declare function ButtonGroup({ options, value, values, onChange, onChangeMultiple, multiple, label, size, fullWidth, disabled, className, }: ButtonGroupProps): react_jsx_runtime.JSX.Element;

/**
 * Validation state for input components
 */
type ValidationState$1 = 'error' | 'success' | 'warning' | null;
/**
 * Input component props
 */
interface InputProps extends Omit<React__default.InputHTMLAttributes<HTMLInputElement>, 'size'> {
    /** Input label text */
    label?: string;
    /** Helper text displayed below input */
    helperText?: string;
    /** Visual validation state */
    validationState?: ValidationState$1;
    /** Validation message (overrides helperText when present) */
    validationMessage?: string;
    /** Icon to display in input (legacy - use prefixIcon/suffixIcon) */
    icon?: React__default.ReactNode;
    /** Position of icon (legacy - use prefixIcon/suffixIcon) */
    iconPosition?: 'left' | 'right';
    /** Show character counter (requires maxLength prop) */
    showCount?: boolean;
    /** Text prefix (displayed inside input, before value) */
    prefix?: string;
    /** Text suffix (displayed inside input, after value) */
    suffix?: string;
    /** Icon prefix (displayed inside input, before value) */
    prefixIcon?: React__default.ReactNode;
    /** Icon suffix (displayed inside input, after value) */
    suffixIcon?: React__default.ReactNode;
    /** Show password visibility toggle (only for type="password") */
    showPasswordToggle?: boolean;
    /** Show clearable button to clear input value */
    clearable?: boolean;
    /** Callback when clear button is clicked */
    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
 *
 * 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"
 * />
 * ```
 *
 * @example With validation
 * ```tsx
 * <Input
 *   label="Username"
 *   value={username}
 *   onChange={(e) => setUsername(e.target.value)}
 *   validationState={error ? 'error' : 'success'}
 *   validationMessage={error || 'Username is available'}
 * />
 * ```
 *
 * @example Password with toggle and character count
 * ```tsx
 * <Input
 *   type="password"
 *   label="Password"
 *   showPasswordToggle
 *   showCount
 *   maxLength={50}
 * />
 * ```
 *
 * @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
 * />
 * ```
 */
declare const Input: React__default.ForwardRefExoticComponent<InputProps & React__default.RefAttributes<HTMLInputElement>>;

/**
 * Single option in a select dropdown
 */
interface SelectOption {
    /** Unique value for this option */
    value: string;
    /** Display label for this option */
    label: string;
    /** Disable selection of this option */
    disabled?: boolean;
    /** Optional icon to display before label */
    icon?: React__default.ReactNode;
}
/**
 * Group of options with a section header
 */
interface SelectOptionGroup {
    /** Group header label */
    label: string;
    /** Options in this group */
    options: SelectOption[];
}
/**
 * Imperative handle for Select component (via ref)
 */
interface SelectHandle {
    /** Focus the select button */
    focus: () => void;
    /** Blur the select button */
    blur: () => void;
    /** Open the dropdown */
    open: () => void;
    /** Close the dropdown */
    close: () => void;
}
/**
 * Select component props
 */
interface SelectProps {
    /** Flat list of options */
    options?: SelectOption[];
    /** Grouped options with section headers */
    groups?: SelectOptionGroup[];
    /** Currently selected value */
    value?: string;
    /** Callback when selection changes */
    onChange?: (value: string) => void;
    /** Placeholder text when no option selected */
    placeholder?: string;
    /** Enable search/filter functionality */
    searchable?: boolean;
    /** Disable the select */
    disabled?: boolean;
    /** Label text above select */
    label?: string;
    /** Helper text below select */
    helperText?: string;
    /** Error message (displayed below select in red) */
    error?: string;
    /** Show loading spinner */
    loading?: boolean;
    /** Show clear button to reset selection */
    clearable?: boolean;
    /** Allow creating new options (requires searchable=true) */
    creatable?: boolean;
    /** Callback when new option is created */
    onCreateOption?: (inputValue: string) => void;
    /** Enable virtual scrolling for large option lists (100+ items) */
    virtualized?: boolean;
    /** Height of dropdown when virtualized (default: '300px') */
    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';
    /** Render dropdown via portal (default: true). Set to false when overflow clipping is not an issue */
    usePortal?: boolean;
}
/**
 * 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 mobile-optimized BottomSheet display.
 *
 * @example Basic select
 * ```tsx
 * const options = [
 *   { value: '1', label: 'Option 1' },
 *   { value: '2', label: 'Option 2' },
 *   { value: '3', label: 'Option 3' },
 * ];
 *
 * <Select
 *   label="Choose option"
 *   options={options}
 *   value={selected}
 *   onChange={setSelected}
 * />
 * ```
 *
 * @example Mobile-optimized with large touch targets
 * ```tsx
 * <Select
 *   options={options}
 *   size="lg"
 *   mobileMode="auto"
 *   placeholder="Select..."
 * />
 * ```
 *
 * @example Searchable with groups
 * ```tsx
 * const groups = [
 *   {
 *     label: 'Fruits',
 *     options: [
 *       { value: 'apple', label: 'Apple', icon: <Apple /> },
 *       { value: 'banana', label: 'Banana' },
 *     ]
 *   },
 *   {
 *     label: 'Vegetables',
 *     options: [
 *       { value: 'carrot', label: 'Carrot' },
 *     ]
 *   },
 * ];
 *
 * <Select
 *   groups={groups}
 *   searchable
 *   clearable
 *   placeholder="Search food..."
 * />
 * ```
 *
 * @example Creatable with virtual scrolling
 * ```tsx
 * <Select
 *   options={largeOptionList}
 *   searchable
 *   creatable
 *   onCreateOption={handleCreate}
 *   virtualized
 *   virtualHeight="400px"
 * />
 * ```
 */
declare const Select: React__default.ForwardRefExoticComponent<SelectProps & React__default.RefAttributes<SelectHandle>>;

interface MultiSelectOption {
    value: string;
    label: string;
    disabled?: boolean;
    icon?: React__default.ReactNode;
}
interface MultiSelectProps {
    options: MultiSelectOption[];
    value?: string[];
    onChange?: (value: string[]) => void;
    placeholder?: string;
    searchable?: boolean;
    disabled?: boolean;
    label?: string;
    helperText?: string;
    error?: string;
    maxHeight?: number;
    /** Maximum number of selections allowed */
    maxSelections?: number;
    /** Show loading spinner (for async options loading) */
    loading?: boolean;
    'aria-label'?: string;
}
/** Handle for imperative methods */
interface MultiSelectHandle {
    /** Focus the select trigger button */
    focus: () => void;
    /** Open the dropdown */
    open: () => void;
    /** Close the dropdown */
    close: () => void;
}
declare const MultiSelect: React__default.ForwardRefExoticComponent<MultiSelectProps & React__default.RefAttributes<MultiSelectHandle>>;

interface SwitchProps {
    checked: boolean;
    onChange: (checked: boolean) => void;
    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;
}
declare const Switch: React$1.ForwardRefExoticComponent<SwitchProps & React$1.RefAttributes<HTMLInputElement>>;

type ValidationState = 'error' | 'success' | 'warning' | null;
interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
    label?: string;
    helperText?: string;
    validationState?: ValidationState;
    validationMessage?: string;
    maxLength?: number;
    showCharCount?: boolean;
    /** Auto-expand textarea height based on content */
    autoExpand?: boolean;
    /** Minimum rows when auto-expanding (default: 2) */
    minRows?: number;
    /** Maximum rows when auto-expanding (default: 10) */
    maxRows?: number;
    /** Resize behavior (default: 'vertical') - overridden to 'none' when autoExpand is true */
    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>>;

interface CheckboxProps {
    checked: boolean;
    onChange: (checked: boolean) => void;
    label?: string;
    description?: string;
    disabled?: boolean;
    indeterminate?: boolean;
    className?: string;
    id?: string;
    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>>;

interface RadioOption {
    value: string;
    label: string;
    description?: string;
    disabled?: boolean;
    icon?: React.ReactNode;
}
interface RadioGroupProps {
    name: string;
    value: string;
    onChange: (value: string) => void;
    options: RadioOption[];
    orientation?: 'horizontal' | 'vertical';
    label?: string;
    helperText?: string;
    disabled?: boolean;
    className?: string;
}
declare const RadioGroup: React$1.ForwardRefExoticComponent<RadioGroupProps & React$1.RefAttributes<HTMLDivElement>>;

interface RatingProps {
    /** Current rating value */
    value: number;
    /** Callback when rating changes */
    onChange?: (value: number) => void;
    /** Maximum rating (number of stars) */
    max?: number;
    /** Size variant */
    size?: 'sm' | 'md' | 'lg';
    /** Read-only mode */
    readOnly?: boolean;
    /** Allow half-star ratings */
    allowHalf?: boolean;
    /** Color variant */
    color?: 'primary' | 'warning' | 'error';
    /** Show label with rating value */
    showLabel?: boolean;
    /** Custom label text */
    label?: string;
    /** Disabled state */
    disabled?: boolean;
    /** Class name for container */
    className?: string;
}
declare function Rating({ value, onChange, max, size, readOnly, allowHalf, color, showLabel, label, disabled, className, }: RatingProps): react_jsx_runtime.JSX.Element;

interface DatePickerHandle {
    focus: () => void;
    blur: () => void;
    open: () => void;
    close: () => void;
}
interface DatePickerProps {
    /** Selected date value */
    value?: Date | null;
    /** Change handler */
    onChange?: (date: Date | null) => void;
    /** Input label */
    label?: string;
    /** Placeholder text */
    placeholder?: string;
    /** Minimum selectable date */
    minDate?: Date;
    /** Maximum selectable date */
    maxDate?: Date;
    /** Disabled dates - array or function */
    disabledDates?: Date[] | ((date: Date) => boolean);
    /** Locale for date formatting (default: 'en-US') */
    locale?: string;
    /** Date display format */
    format?: 'short' | 'medium' | 'long';
    /** Validation state */
    validationState?: 'error' | 'success' | 'warning' | null;
    /** Validation message */
    validationMessage?: string;
    /** Helper text */
    helperText?: string;
    /** Required field indicator */
    required?: boolean;
    /** Disabled state */
    disabled?: boolean;
    /** Show today button */
    showTodayButton?: boolean;
    /** Show clear button */
    showClearButton?: boolean;
    /** Custom className */
    className?: string;
    /** Size variant */
    size?: 'sm' | 'md' | 'lg';
}
/**
 * DatePicker component for selecting dates with a calendar dropdown.
 *
 * Features:
 * - Calendar popup with month/year navigation
 * - Min/max date constraints
 * - Disabled dates support
 * - Locale-aware formatting
 * - Keyboard navigation
 * - Today and clear buttons
 * - Validation states
 *
 * @example
 * ```tsx
 * <DatePicker
 *   label="Start Date"
 *   value={startDate}
 *   onChange={setStartDate}
 *   minDate={new Date()}
 *   required
 * />
 * ```
 */
declare const DatePicker: React__default.ForwardRefExoticComponent<DatePickerProps & React__default.RefAttributes<DatePickerHandle>>;

interface TimePickerHandle {
    focus: () => void;
    blur: () => void;
    open: () => void;
    close: () => void;
}
interface TimePickerProps {
    /** Selected time value (24-hour format: "HH:mm" or "HH:mm:ss") */
    value?: string | null;
    /** Change handler */
    onChange?: (time: string | null) => void;
    /** Input label */
    label?: string;
    /** Placeholder text */
    placeholder?: string;
    /** Use 12-hour format */
    use12Hour?: boolean;
    /** Show seconds picker */
    showSeconds?: boolean;
    /** Minute step interval (1, 5, 10, 15, 30) */
    minuteStep?: 1 | 5 | 10 | 15 | 30;
    /** Minimum time (24-hour format: "HH:mm") */
    minTime?: string;
    /** Maximum time (24-hour format: "HH:mm") */
    maxTime?: string;
    /** Validation state */
    validationState?: 'error' | 'success' | 'warning' | null;
    /** Validation message */
    validationMessage?: string;
    /** Helper text */
    helperText?: string;
    /** Required field */
    required?: boolean;
    /** Disabled state */
    disabled?: boolean;
    /** Custom className */
    className?: string;
    /** Size variant */
    size?: 'sm' | 'md' | 'lg';
}
/**
 * TimePicker component - Time selection with dropdown spinners.
 *
 * Features:
 * - 12-hour or 24-hour format
 * - Optional seconds
 * - Minute step intervals
 * - Min/max time constraints
 * - Keyboard navigation
 * - Validation states
 * - Spinner controls
 *
 * @example
 * ```tsx
 * <TimePicker
 *   label="Meeting Time"
 *   value={meetingTime}
 *   onChange={setMeetingTime}
 *   use12Hour
 *   minuteStep={15}
 * />
 * ```
 */
declare const TimePicker: React$1.ForwardRefExoticComponent<TimePickerProps & React$1.RefAttributes<TimePickerHandle>>;

interface DateRange {
    start: Date | null;
    end: Date | null;
}
interface DateRangePickerHandle {
    focus: () => void;
    blur: () => void;
    open: () => void;
    close: () => void;
}
interface DateRangePickerProps {
    /** Selected date range */
    value?: DateRange;
    /** Change handler */
    onChange?: (range: DateRange) => void;
    /** Input label */
    label?: string;
    /** Placeholder text */
    placeholder?: string;
    /** Minimum selectable date */
    minDate?: Date;
    /** Maximum selectable date */
    maxDate?: Date;
    /** Disabled dates function */
    disabledDates?: (date: Date) => boolean;
    /** Locale for date formatting */
    locale?: string;
    /** Date format */
    format?: 'short' | 'medium' | 'long';
    /** Validation state */
    validationState?: 'error' | 'success' | 'warning' | null;
    /** Validation message */
    validationMessage?: string;
    /** Helper text */
    helperText?: string;
    /** Required field */
    required?: boolean;
    /** Disabled state */
    disabled?: boolean;
    /** Show quick preset buttons */
    showPresets?: boolean;
    /** Custom className */
    className?: string;
    /** Size variant */
    size?: 'sm' | 'md' | 'lg';
}
/**
 * DateRangePicker component - Select a date range with calendar UI.
 *
 * Features:
 * - Start and end date selection
 * - Visual range highlighting
 * - Quick preset ranges (Today, Last 7 days, etc.)
 * - Min/max date constraints
 * - Disabled dates
 * - Keyboard navigation
 * - Validation states
 *
 * @example
 * ```tsx
 * <DateRangePicker
 *   label="Report Period"
 *   value={dateRange}
 *   onChange={setDateRange}
 *   showPresets
 * />
 * ```
 */
declare const DateRangePicker: React$1.ForwardRefExoticComponent<DateRangePickerProps & React$1.RefAttributes<DateRangePickerHandle>>;

interface DateTimePickerProps {
    /** Selected date-time value (ISO 8601 string) */
    value?: string | null;
    /** Change handler */
    onChange?: (dateTime: string | null) => void;
    /** Input label */
    label?: string;
    /** Date placeholder */
    datePlaceholder?: string;
    /** Time placeholder */
    timePlaceholder?: string;
    /** Use 12-hour time format */
    use12Hour?: boolean;
    /** Show seconds in time picker */
    showSeconds?: boolean;
    /** Minute step interval */
    minuteStep?: 1 | 5 | 10 | 15 | 30;
    /** Minimum selectable date */
    minDate?: Date;
    /** Maximum selectable date */
    maxDate?: Date;
    /** Disabled dates function */
    disabledDates?: Date[] | ((date: Date) => boolean);
    /** Locale for date formatting */
    locale?: string;
    /** Date format */
    dateFormat?: 'short' | 'medium' | 'long';
    /** Validation state */
    validationState?: 'error' | 'success' | 'warning' | null;
    /** Validation message */
    validationMessage?: string;
    /** Helper text */
    helperText?: string;
    /** Required field */
    required?: boolean;
    /** Disabled state */
    disabled?: boolean;
    /** Layout direction */
    layout?: 'horizontal' | 'vertical';
    /** Custom className */
    className?: string;
    /** Size variant */
    size?: 'sm' | 'md' | 'lg';
}
/**
 * DateTimePicker component - Combined date and time selection.
 *
 * Features:
 * - Combines DatePicker and TimePicker
 * - Supports ISO 8601 date-time strings
 * - Flexible layout (horizontal/vertical)
 * - All DatePicker and TimePicker features
 * - Single onChange with combined value
 *
 * @example
 * ```tsx
 * <DateTimePicker
 *   label="Meeting Date & Time"
 *   value={meetingDateTime}
 *   onChange={setMeetingDateTime}
 *   use12Hour
 *   minuteStep={15}
 * />
 * ```
 */
declare function DateTimePicker({ value, onChange, label, datePlaceholder, timePlaceholder, use12Hour, showSeconds, minuteStep, minDate, maxDate, disabledDates, locale, dateFormat, validationState, validationMessage, helperText, required, disabled, layout, className, size, }: DateTimePickerProps): react_jsx_runtime.JSX.Element;

interface ComboboxHandle {
    focus: () => void;
    blur: () => void;
    open: () => void;
    close: () => void;
}
interface ComboboxOption {
    /** Option value */
    value: string;
    /** Display label */
    label: string;
    /** Optional icon */
    icon?: React__default.ComponentType<any>;
    /** Disabled state */
    disabled?: boolean;
}
interface ComboboxProps {
    /** Selected value */
    value?: string;
    /** Change handler */
    onChange?: (value: string) => void;
    /** Available options */
    options: ComboboxOption[];
    /** Search handler (for async/server-side filtering) */
    onSearch?: (query: string) => void;
    /** Create option handler */
    onCreateOption?: (value: string) => void;
    /** Input label */
    label?: string;
    /** Placeholder text */
    placeholder?: string;
    /** Allow custom value input (typeahead mode) */
    allowCustomValue?: boolean;
    /** Loading state */
    loading?: boolean;
    /** Validation state */
    validationState?: 'error' | 'success' | 'warning' | null;
    /** Validation message */
    validationMessage?: string;
    /** Helper text */
    helperText?: string;
    /** Required field */
    required?: boolean;
    /** Disabled state */
    disabled?: boolean;
    /** Custom className */
    className?: string;
    /** Size variant */
    size?: 'sm' | 'md' | 'lg';
}
/**
 * Combobox component - searchable select with typeahead and custom value support.
 *
 * Features:
 * - Typeahead search with filtering
 * - Create custom options
 * - Async search support
 * - Keyboard navigation
 * - Validation states
 * - Custom value input
 *
 * @example
 * ```tsx
 * <Combobox
 *   label="Country"
 *   value={country}
 *   onChange={setCountry}
 *   options={countryOptions}
 *   allowCustomValue
 *   onCreateOption={handleCreateCountry}
 * />
 * ```
 */
declare const Combobox: React__default.ForwardRefExoticComponent<ComboboxProps & React__default.RefAttributes<ComboboxHandle>>;

interface FormControlProps {
    /** Field label */
    label?: string;
    /** Required field indicator */
    required?: boolean;
    /** Error message */
    error?: string;
    /** Helper text (shown when no error) */
    helperText?: string;
    /** Form input element(s) */
    children: React__default.ReactNode;
    /** Custom className for container */
    className?: string;
    /** HTML id for the input (used for label association) */
    htmlFor?: string;
}
/**
 * FormControl wrapper component for consistent form field layout.
 *
 * Provides:
 * - Label with required indicator
 * - Error message display
 * - Helper text
 * - Consistent spacing
 *
 * @example
 * ```tsx
 * <FormControl label="Email" required error={errors.email} helperText="We'll never share your email">
 *   <Input {...register('email')} />
 * </FormControl>
 * ```
 */
declare function FormControl({ label, required, error, helperText, children, className, htmlFor, }: FormControlProps): react_jsx_runtime.JSX.Element;

interface FilterConfig {
    key: string;
    label: string;
    type: 'text' | 'select' | 'date' | 'number' | 'boolean';
    placeholder?: string;
    options?: Array<{
        label: string;
        value: unknown;
    }>;
}
interface FilterBarProps {
    filters: FilterConfig[];
    values: Record<string, unknown>;
    onChange: (values: Record<string, unknown>) => void;
    className?: string;
    onClear?: () => void;
    showClearButton?: boolean;
}
declare function FilterBar({ filters, values, onChange, className, onClear, showClearButton, }: FilterBarProps): react_jsx_runtime.JSX.Element | null;

interface StatCardProps {
    icon: React.ReactNode;
    label: string;
    value: string | number | React.ReactNode;
    subtitle?: string;
    valueColor?: string;
    iconColor?: string;
    change?: {
        value: number;
        isPositive: boolean;
    };
    onClick?: () => void;
    className?: string;
}
declare function StatCard$1({ icon, label, value, subtitle, valueColor, iconColor, change, onClick, className, }: StatCardProps): react_jsx_runtime.JSX.Element;

interface StatItemProps {
    label: string;
    value: string | number;
    icon?: React__default.ReactNode;
    subtitle?: string;
    className?: string;
}
interface StatsGridProps {
    children: React__default.ReactNode;
    columns?: 2 | 3 | 4;
    className?: string;
}
/**
 * Individual stat display item (for non-card usage)
 */
declare const StatItem: React__default.FC<StatItemProps>;
/**
 * Responsive grid container for displaying statistics cards
 * Uses CSS custom properties for responsive behavior without Tailwind
 */
declare const StatsGrid: React__default.FC<StatsGridProps>;

interface SeparatorProps {
    orientation?: 'horizontal' | 'vertical';
    className?: string;
    spacing?: 'sm' | 'md' | 'lg';
}
declare function Separator({ orientation, className, spacing, }: SeparatorProps): react_jsx_runtime.JSX.Element;

/**
 * Card component props
 */
interface CardProps extends Omit<React__default.HTMLAttributes<HTMLDivElement>, 'onClick'> {
    /** Card content */
    children: React__default.ReactNode;
    /** Visual style variant affecting padding and shadow */
    variant?: 'default' | 'compact' | 'flat';
    /** Predefined width constraint */
    width?: 'sm' | 'md' | 'lg' | 'xl' | 'auto' | 'full';
    /** Additional CSS classes */
    className?: string;
    /** Click handler - makes card interactive */
    onClick?: () => void;
    /** Show hover effect without onClick handler */
    hoverable?: boolean;
    /** Show loading skeleton instead of content */
    loading?: boolean;
}
/**
 * Card - Container component with paper aesthetic and subtle shadow
 *
 * Supports ref forwarding for DOM access.
 *
 * A content container with paper texture, border, and shadow effects. Supports
 * different sizes, variants (padding/shadow levels), and loading states.
 *
 * Compose with CardHeader, CardTitle, CardDescription, CardContent, and CardFooter
 * for consistent internal structure.
 *
 * @example Basic card
 * ```tsx
 * <Card>
 *   <CardHeader>
 *     <CardTitle>User Profile</CardTitle>
 *     <CardDescription>Personal information</CardDescription>
 *   </CardHeader>
 *   <CardContent>
 *     <p>Content here</p>
 *   </CardContent>
 * </Card>
 * ```
 *
 * @example Interactive card with loading
 * ```tsx
 * <Card
 *   variant="compact"
 *   onClick={handleClick}
 *   loading={isLoading}
 * >
 *   <p>Content</p>
 * </Card>
 * ```
 *
 * @example With ref
 * ```tsx
 * const cardRef = useRef<HTMLDivElement>(null);
 * <Card ref={cardRef}>Content</Card>
 * ```
 */
declare const Card: React__default.ForwardRefExoticComponent<CardProps & React__default.RefAttributes<HTMLDivElement>>;

/**
 * CardHeader component props
 */
interface CardHeaderProps {
    /** Header content - typically CardTitle and CardDescription */
    children: React__default.ReactNode;
    /** Additional CSS classes */
    className?: string;
    /** Action element (button, menu, etc.) to display in header */
    action?: React__default.ReactNode;
}
/**
 * CardHeader - Header section for Card component
 *
 * Container for card title, description, and optional action buttons.
 * Automatically handles layout when action element is provided.
 */
declare function CardHeader({ children, className, action, }: CardHeaderProps): react_jsx_runtime.JSX.Element;
declare function CardTitle({ children, className, }: {
    children: React__default.ReactNode;
    className?: string;
}): react_jsx_runtime.JSX.Element;
declare function CardDescription({ children, className, }: {
    children: React__default.ReactNode;
    className?: string;
}): react_jsx_runtime.JSX.Element;
declare function CardContent({ children, className, }: {
    children: React__default.ReactNode;
    className?: string;
}): react_jsx_runtime.JSX.Element;
declare function CardFooter({ children, className, }: {
    children: React__default.ReactNode;
    className?: string;
}): react_jsx_runtime.JSX.Element;

type SpacingValue = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
interface StackProps extends React__default.HTMLAttributes<HTMLDivElement> {
    /** Content to stack */
    children: React__default.ReactNode;
    /** Direction of stack */
    direction?: 'vertical' | 'horizontal';
    /** Spacing between items (alias: gap) */
    spacing?: SpacingValue;
    /** Spacing between items (alias for spacing - for developer convenience) */
    gap?: SpacingValue;
    /** Alignment of items */
    align?: 'start' | 'center' | 'end' | 'stretch';
    /** Justify content */
    justify?: 'start' | 'center' | 'end' | 'between' | 'around';
    /** Enable wrapping (for horizontal stacks) */
    wrap?: boolean;
    /** Custom className */
    className?: string;
}
/**
 * Stack component for arranging children vertically or horizontally with consistent spacing.
 *
 * Supports ref forwarding for DOM access.
 *
 * Spacing scale (use either `spacing` or `gap` prop - they're aliases):
 * - none: 0
 * - xs: 0.5rem (2)
 * - sm: 0.75rem (3)
 * - md: 1.5rem (6)
 * - lg: 2rem (8)
 * - xl: 3rem (12)
 *
 * @example
 * ```tsx
 * // Using spacing prop
 * <Stack spacing="md">
 *   <Card>Item 1</Card>
 *   <Card>Item 2</Card>
 * </Stack>
 *
 * // Using gap prop (alias)
 * <Stack gap="md">
 *   <Card>Item 1</Card>
 *   <Card>Item 2</Card>
 * </Stack>
 * ```
 */
declare const Stack: React__default.ForwardRefExoticComponent<StackProps & React__default.RefAttributes<HTMLDivElement>>;

type ColumnCount = 1 | 2 | 3 | 4 | 6 | 12;
interface GridProps extends React__default.HTMLAttributes<HTMLDivElement> {
    /** Content to arrange in grid */
    children: React__default.ReactNode;
    /** Number of columns (default, or mobile-first base) */
    columns?: ColumnCount;
    /** Columns at sm breakpoint (640px+) */
    sm?: ColumnCount;
    /** Columns at md breakpoint (768px+) */
    md?: ColumnCount;
    /** Columns at lg breakpoint (1024px+) */
    lg?: ColumnCount;
    /** Columns at xl breakpoint (1280px+) */
    xl?: ColumnCount;
    /** Gap between grid items */
    gap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
    /** Custom className */
    className?: string;
}
/**
 * Grid component for arranging children in a CSS grid layout.
 *
 * Supports ref forwarding for DOM access.
 *
 * Column options: 1, 2, 3, 4, 6, 12
 *
 * Responsive breakpoints (mobile-first):
 * - columns: Base (all sizes)
 * - sm: 640px and up
 * - md: 768px and up
 * - lg: 1024px and up
 * - xl: 1280px and up
 *
 * Gap scale:
 * - none: 0
 * - xs: 0.5rem (2)
 * - sm: 0.75rem (3)
 * - md: 1.5rem (6)
 * - lg: 2rem (8)
 * - xl: 3rem (12)
 *
 * @example
 * // Responsive grid: 1 column on mobile, 2 on tablet, 4 on desktop
 * <Grid columns={1} md={2} lg={4} gap="md">
 *   <Card>Item 1</Card>
 *   <Card>Item 2</Card>
 * </Grid>
 */
declare const Grid: React__default.ForwardRefExoticComponent<GridProps & React__default.RefAttributes<HTMLDivElement>>;

interface BoxProps extends React__default.HTMLAttributes<HTMLDivElement> {
    /** Content */
    children: React__default.ReactNode;
    /** Padding */
    padding?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
    /** Padding top */
    paddingTop?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
    /** Padding bottom */
    paddingBottom?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
    /** Padding left */
    paddingLeft?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
    /** Padding right */
    paddingRight?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
    /** Margin */
    margin?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'auto';
    /** Margin top */
    marginTop?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'auto';
    /** Margin bottom */
    marginBottom?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'auto';
    /** Margin left */
    marginLeft?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'auto';
    /** Margin right */
    marginRight?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'auto';
    /** Border */
    border?: 'none' | 'top' | 'bottom' | 'left' | 'right' | 'all';
    /** Border color */
    borderColor?: 'default' | 'primary' | 'accent';
    /** Border radius */
    rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
    /** Width */
    width?: 'auto' | 'full' | 'fit' | 'screen';
    /** Height */
    height?: 'auto' | 'full' | 'screen';
    /** Custom className */
    className?: string;
}
/**
 * Box component for generic containers with design system spacing and borders.
 * Supports ref forwarding for DOM access.
 */
declare const Box: React__default.ForwardRefExoticComponent<BoxProps & React__default.RefAttributes<HTMLDivElement>>;

interface GridItemProps extends Omit<BoxProps, 'colSpan'> {
    /** Grid column span (1-12) */
    colSpan?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
    /** Grid row span (1-6) */
    rowSpan?: 1 | 2 | 3 | 4 | 5 | 6;
}
/**
 * GridItem component for items within a Grid layout.
 * Provides grid-specific props like colSpan and rowSpan.
 */
declare const GridItem: React__default.FC<GridItemProps>;

type TextElement = 'p' | 'span' | 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'label';
interface TextProps extends Omit<React__default.HTMLAttributes<HTMLElement>, 'color'> {
    /** Text content */
    children: React__default.ReactNode;
    /** HTML element to render */
    as?: TextElement;
    /** Size variant */
    size?: 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl';
    /** Weight variant */
    weight?: 'normal' | 'medium' | 'semibold' | 'bold';
    /** Color variant */
    color?: 'primary' | 'secondary' | 'muted' | 'accent' | 'error' | 'success' | 'warning';
    /** Text alignment */
    align?: 'left' | 'center' | 'right';
    /** Truncate text with ellipsis (single line) */
    truncate?: boolean;
    /** Clamp text to specific number of lines (with ellipsis) */
    lineClamp?: 1 | 2 | 3 | 4 | 5 | 6;
    /** Text transform */
    transform?: 'uppercase' | 'lowercase' | 'capitalize' | 'normal';
    /** Custom className */
    className?: string;
}
/**
 * Text component for consistent typography across the application.
 *
 * Supports ref forwarding for DOM access.
 *
 * Size scale:
 * - xs: 0.75rem (12px)
 * - sm: 0.875rem (14px)
 * - base: 1rem (16px)
 * - lg: 1.125rem (18px)
 * - xl: 1.25rem (20px)
 * - 2xl: 1.5rem (24px)
 *
 * @example
 * ```tsx
 * <Text size="lg" weight="semibold" color="primary">
 *   Hello World
 * </Text>
 *
 * <Text color="warning">Warning message</Text>
 *
 * // With ref
 * const textRef = useRef<HTMLParagraphElement>(null);
 * <Text ref={textRef}>Measurable text</Text>
 * ```
 */
declare const Text: React__default.ForwardRefExoticComponent<TextProps & React__default.RefAttributes<HTMLElement>>;

type ToastType = 'success' | 'error' | 'warning' | 'info';
type ToastPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center';
interface ToastProps {
    id: string;
    type: ToastType;
    title: string;
    message: string;
    duration?: number;
    onClose: (id: string) => void;
}
declare function Toast({ id, type, title, message, duration, onClose }: ToastProps): react_jsx_runtime.JSX.Element;
declare function ToastContainer({ toasts, onClose, position }: {
    toasts: ToastProps[];
    onClose: (id: string) => void;
    position?: ToastPosition;
}): react_jsx_runtime.JSX.Element;

interface AlertAction {
    label: string;
    onClick: () => void;
    variant?: 'primary' | 'secondary';
}
interface AlertProps {
    variant?: 'success' | 'error' | 'warning' | 'info';
    title?: string;
    children: React__default.ReactNode;
    onClose?: () => void;
    className?: string;
    /** Action buttons to display at the bottom of the alert */
    actions?: AlertAction[];
}
declare function Alert({ variant, title, children, onClose, className, actions, }: AlertProps): react_jsx_runtime.JSX.Element;

interface ModalProps {
    isOpen: boolean;
    onClose: () => void;
    title: string;
    children: React__default.ReactNode;
    size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
    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;
}
/**
 * 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;

interface DrawerProps {
    isOpen: boolean;
    onClose: () => void;
    title?: string;
    children: React__default.ReactNode;
    /** Placement of drawer */
    placement?: 'left' | 'right' | 'top' | 'bottom';
    /** Size of drawer */
    size?: 'sm' | 'md' | 'lg' | 'full';
    /** Show close button */
    showCloseButton?: boolean;
    /** Show overlay backdrop */
    showOverlay?: boolean;
    /** Close on overlay click */
    closeOnOverlayClick?: boolean;
    /** Close on escape key */
    closeOnEscape?: boolean;
    /** Custom header content (replaces title) */
    header?: React__default.ReactNode;
    /** Footer content */
    footer?: React__default.ReactNode;
    /** Class name for drawer container */
    className?: string;
}
declare function Drawer({ isOpen, onClose, title, children, placement, size, showCloseButton, showOverlay, closeOnOverlayClick, closeOnEscape, header, footer, className, }: DrawerProps): react_jsx_runtime.JSX.Element | null;
declare function DrawerFooter({ children }: {
    children: React__default.ReactNode;
}): react_jsx_runtime.JSX.Element;

interface ConfirmDialogProps {
    isOpen: boolean;
    onClose: () => void;
    onConfirm: () => void | Promise<void>;
    title: string;
    message: string;
    confirmLabel?: string;
    cancelLabel?: string;
    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'];
}
/**
 * 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
 *
 * Usage:
 * ```tsx
 * const confirmDialog = useConfirmDialog();
 *
 * const handleDelete = () => {
 *   confirmDialog.show({
 *     title: 'Delete Item',
 *     message: 'Are you sure you want to delete this item?',
 *     onConfirm: async () => {
 *       await deleteItem();
 *     }
 *   });
 * };
 *
 * return (
 *   <>
 *     <button onClick={handleDelete}>Delete</button>
 *     <ConfirmDialog {...confirmDialog.props} />
 *   </>
 * );
 * ```
 */
declare function useConfirmDialog(): {
    show: (newConfig: Omit<ConfirmDialogProps, "isOpen" | "onClose" | "isLoading">) => void;
    close: () => void;
    props: ConfirmDialogProps;
};

interface TooltipProps {
    children: React__default.ReactNode;
    content: React__default.ReactNode;
    position?: 'top' | 'bottom' | 'left' | 'right';
    delay?: number;
}
declare function Tooltip({ children, content, position, delay, }: TooltipProps): react_jsx_runtime.JSX.Element;

interface PopoverProps {
    /** Trigger element */
    trigger: React__default.ReactNode;
    /** Popover content */
    children: React__default.ReactNode;
    /** Placement of popover relative to trigger */
    placement?: 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end';
    /** Trigger mode */
    triggerMode?: 'click' | 'hover' | 'focus';
    /** Show arrow pointer */
    showArrow?: boolean;
    /** Offset from trigger (px) */
    offset?: number;
    /** Controlled open state */
    open?: boolean;
    /** Callback when open state changes */
    onOpenChange?: (open: boolean) => void;
    /** Close on outside click */
    closeOnClickOutside?: boolean;
    /** Close on escape key */
    closeOnEscape?: boolean;
    /** Delay before showing (ms) - for hover trigger */
    showDelay?: number;
    /** Delay before hiding (ms) - for hover trigger */
    hideDelay?: number;
    /** Class name for popover content */
    className?: string;
    /** Disabled state */
    disabled?: boolean;
}
declare function Popover({ trigger: triggerElement, children, placement, triggerMode, showArrow, offset, open: controlledOpen, onOpenChange, closeOnClickOutside, closeOnEscape, showDelay, hideDelay, className, disabled, }: PopoverProps): react_jsx_runtime.JSX.Element;

interface Command {
    /** Unique identifier */
    id: string;
    /** Display label */
    label: string;
    /** Optional description */
    description?: string;
    /** Icon element */
    icon?: React__default.ReactNode;
    /** Group name for categorization */
    group?: string;
    /** Keyboard shortcut display */
    shortcut?: string;
    /** Handler when command is executed */
    onExecute: () => void;
    /** Optional keywords for better search matching */
    keywords?: string[];
}
interface CommandPaletteProps {
    /** List of available commands */
    commands: Command[];
    /** Open/close state */
    open: boolean;
    /** Callback when state changes */
    onOpenChange: (open: boolean) => void;
    /** Placeholder text */
    placeholder?: string;
    /** Show keyboard shortcut to open (e.g., "Ctrl+K") */
    trigger?: string;
    /** Recent commands to show first */
    recentCommands?: string[];
    /** Callback to update recent commands */
    onRecentCommandsChange?: (commandIds: string[]) => void;
}
declare function CommandPalette({ commands, open, onOpenChange, placeholder, trigger, recentCommands, onRecentCommandsChange, }: CommandPaletteProps): React__default.ReactPortal | null;
declare function useCommandPalette(defaultTrigger?: string): {
    open: boolean;
    setOpen: React__default.Dispatch<React__default.SetStateAction<boolean>>;