@vertis-components/components 1.0.0

package/dist/index.d.mts

@@ -0,0 +1,2196 @@
+import { ClassValue } from 'clsx';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+import { SwiperOptions } from 'swiper/types';
+
+/**
+ * Merges Tailwind CSS classes with proper conflict resolution.
+ * Uses clsx for conditional classes and tailwind-merge to handle conflicts.
+ *
+ * @example
+ * cn('px-2 py-1', 'px-4') // => 'py-1 px-4' (px-2 is overridden)
+ * cn('bg-red-500', isActive && 'bg-blue-500') // => conditional
+ * cn('text-sm', className) // => merge with user className
+ */
+declare function cn(...inputs: ClassValue[]): string;
+
+type BaseButtonProps = {
+    /** Button style variant */
+    variant?: 'primary' | 'secondary';
+    /** Button size */
+    size?: 'lg' | 'md' | 'sm';
+    /** Icon to display on the left side */
+    iconLeft?: React.ReactNode;
+    /** Icon to display on the right side */
+    iconRight?: React.ReactNode;
+    /** Render as icon-only button (square) */
+    iconOnly?: boolean;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Custom border radius */
+    radius?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+    /** Button content */
+    children?: React.ReactNode;
+    /** Accessible label for screen readers (required for icon-only buttons) */
+    'aria-label'?: string;
+    /** Custom component to render as (e.g., Next.js Link, React Router Link) */
+    as?: React.ElementType;
+};
+type ButtonOnlyProps = BaseButtonProps & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'disabled' | keyof BaseButtonProps> & {
+    /** Button type - defaults to 'button' to prevent form submission */
+    type?: 'button' | 'submit' | 'reset';
+    href?: never;
+};
+type LinkProps$1 = BaseButtonProps & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, keyof BaseButtonProps> & {
+    /** Render as a link - provide href for native <a> */
+    href?: string;
+    type?: never;
+};
+type ButtonProps = ButtonOnlyProps | LinkProps$1;
+declare const ChevronLeftIcon: ({ className }: {
+    className?: string;
+}) => react_jsx_runtime.JSX.Element;
+declare const ChevronRightIcon: ({ className }: {
+    className?: string;
+}) => react_jsx_runtime.JSX.Element;
+declare const PlusIcon: ({ className }: {
+    className?: string;
+}) => react_jsx_runtime.JSX.Element;
+declare const SearchIcon: ({ className }: {
+    className?: string;
+}) => react_jsx_runtime.JSX.Element;
+/**
+ * Button component with Tailwind dark mode support and full accessibility.
+ *
+ * Supports both button and link rendering. When `href` or `as` prop is provided,
+ * the component renders as a link/anchor element while maintaining all button styling.
+ *
+ * Uses Tailwind's `dark:` variants for dark mode styling.
+ * Customize colors by overriding theme colors in your tailwind.config.js.
+ *
+ * ## Variants
+ * - `primary` - Main action button (filled with brand color)
+ * - `secondary` - Secondary action button (outlined)
+ *
+ * ## Sizes
+ * - `lg` - Large buttons for primary actions
+ * - `md` - Default size
+ * - `sm` - Compact buttons
+ *
+ * ## Border Radius
+ * Customize with `radius` prop: none, sm, md, lg, xl, full
+ *
+ * ## Link Support
+ * - Provide `href` prop to render as native anchor tag
+ * - Provide `as` prop to use custom Link component (Next.js, React Router, etc.)
+ * - Disabled links use `aria-disabled` and prevent navigation
+ *
+ * ## Accessibility
+ * - Full keyboard navigation support (Tab, Enter, Space)
+ * - Focus-visible ring for keyboard users
+ * - Automatic aria-label for icon-only buttons
+ * - Disabled links properly announced to screen readers
+ * - WCAG 2.1 Level AA compliant
+ *
+ * @example
+ * // Basic button
+ * <Button variant="primary">Click me</Button>
+ *
+ * // Native anchor link
+ * <Button href="/about" variant="primary">About Us</Button>
+ *
+ * // Next.js Link
+ * <Button as={Link} href="/about" variant="primary">About Us</Button>
+ *
+ * // With left icon
+ * <Button iconLeft={<ChevronLeftIcon />}>Back</Button>
+ *
+ * // Icon only (aria-label required or auto-generated from children)
+ * <Button iconOnly iconLeft={<PlusIcon />} aria-label="Add item" />
+ *
+ * // Disabled link
+ * <Button href="/about" disabled>Cannot Navigate</Button>
+ *
+ * // Custom radius
+ * <Button radius="full">Pill Button</Button>
+ */
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+
+interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    isActive?: boolean;
+}
+/**
+ * Link component with Tailwind dark mode support.
+ *
+ * Uses palette colors that stay consistent but can be themed.
+ */
+declare const Link: React.FC<LinkProps>;
+
+interface MessageComposerProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'onChange'> {
+    /** Controlled value */
+    value?: string;
+    /** Uncontrolled default value */
+    defaultValue?: string;
+    /** Called when value changes */
+    onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+    /** Called when send button is clicked (receives current value) */
+    onSend?: (value: string) => void;
+    /** Placeholder for the textarea */
+    placeholder?: string;
+    /** Label for the send button (default "Send message") */
+    sendLabel?: string;
+    /** Disable textarea and actions */
+    disabled?: boolean;
+    /** Border radius of the container */
+    radius?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+    /** Custom icon for the emoji button (default: smile icon) */
+    emojiIcon?: React.ReactNode;
+    /** Custom icon for the attach/file button (default: paperclip icon) */
+    attachIcon?: React.ReactNode;
+    /** When provided, clicking emoji opens a dropdown with this content. onSelect(emoji) inserts at cursor; onClose() closes the panel. */
+    renderEmojiPanel?: (props: {
+        onSelect: (emoji: string) => void;
+        onClose: () => void;
+    }) => React.ReactNode;
+    /** Called when emoji button is clicked (use when not using renderEmojiPanel) */
+    onEmojiClick?: () => void;
+    /** Accept attribute for the file input (e.g. "image/*") */
+    accept?: string;
+    /** Allow multiple file selection */
+    multiple?: boolean;
+    /** Controlled list of attached files */
+    files?: File[];
+    /** Uncontrolled default files */
+    defaultFiles?: File[];
+    /** Called when attached files change */
+    onFilesChange?: (files: File[]) => void;
+    /** Called when attach button is clicked (use when not using built-in file picker) */
+    onAttachClick?: () => void;
+    /** Custom className for the outer container */
+    className?: string;
+    /** Custom className for the textarea */
+    textareaClassName?: string;
+    /** Custom className for the action bar */
+    actionBarClassName?: string;
+    /** Custom className for the file list area */
+    fileListClassName?: string;
+    /** Minimum rows for the textarea (default 3) */
+    rows?: number;
+}
+declare const MessageComposer: React.ForwardRefExoticComponent<MessageComposerProps & React.RefAttributes<HTMLTextAreaElement>>;
+
+interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    /** Label above the input */
+    label?: string;
+    /** Error message (shows error state and message below) */
+    error?: string;
+    /** Helper text below the input */
+    helperText?: string;
+    /** Size of the input */
+    size?: 'sm' | 'md' | 'lg';
+    /** Success state (green border/background) */
+    success?: boolean;
+    /** Border radius */
+    radius?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+    /** Show required asterisk after label */
+    required?: boolean;
+    /** Info icon or node to show right of label */
+    labelInfo?: React.ReactNode;
+    /** Icon on the left inside the input */
+    iconLeft?: React.ReactNode;
+    /** Icon on the right inside the input (ignored when clearButton shows) */
+    iconRight?: React.ReactNode;
+    /** Show clear (X) button when input has value */
+    clearButton?: boolean;
+    /** Called when clear button is clicked (optional; default clears value) */
+    onClear?: () => void;
+    /** Addon slot on the left (e.g. Button) */
+    addonLeft?: React.ReactNode;
+    /** Addon slot on the right (e.g. Button) */
+    addonRight?: React.ReactNode;
+    /** Render as textarea (multiline) */
+    multiline?: boolean;
+    /** Custom className for the wrapper */
+    className?: string;
+    /** Custom className for the input/textarea */
+    inputClassName?: string;
+}
+/**
+ * Input component with Tailwind dark mode support.
+ *
+ * Supports sizes (sm/md/lg), states (default, error, success, disabled),
+ * leading/trailing icons, clear button, prepend/append addons, required label,
+ * label info icon, and optional multiline (textarea).
+ *
+ * Uses Tailwind's `dark:` variants for dark mode styling.
+ */
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;
+
+interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'> {
+    /** Label above the textarea */
+    label?: string;
+    /** Error message (shows error state and message below) */
+    error?: string;
+    /** Helper text below */
+    helperText?: string;
+    /** Show required asterisk after label */
+    required?: boolean;
+    /** Size (padding and text) */
+    size?: 'sm' | 'md' | 'lg';
+    /** Border radius */
+    radius?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+    /** Success state (green border/background) */
+    success?: boolean;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Info icon or node next to label */
+    labelInfo?: React.ReactNode;
+    /** Show clear (X) button when value present */
+    clearButton?: boolean;
+    /** Called when clear button is clicked */
+    onClear?: () => void;
+    /** Initial rows (default 3) */
+    rows?: number;
+    /** Resize behavior (default vertical) */
+    resize?: 'none' | 'vertical' | 'horizontal' | 'both';
+    /** Max length (native) */
+    maxLength?: number;
+    /** Show character count when maxLength set (e.g. "0 / 500") */
+    showCount?: boolean;
+    /** Custom className for wrapper */
+    className?: string;
+    /** Custom className for textarea element */
+    inputClassName?: string;
+}
+declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
+
+interface CurrencyOption {
+    /** Currency code (e.g. "SGD", "USD") */
+    code: string;
+    /** Display label (defaults to code) */
+    label?: string;
+    /** Flag or icon to show (optional) */
+    icon?: React.ReactNode;
+}
+interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'size'> {
+    /** Variant: stepper (− | input | +) or currency (selector | prefix + input) */
+    variant?: 'stepper' | 'currency';
+    /** Label above the field */
+    label?: string;
+    /** Tooltip text for the info icon (shows on hover) */
+    tooltip?: string;
+    /** Error message (shows error state and message below) */
+    error?: string;
+    /** Helper text below the field */
+    helperText?: string;
+    /** Border radius */
+    radius?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+    /** Show required asterisk after label */
+    required?: boolean;
+    /** Custom info node (replaces default info icon) */
+    labelInfo?: React.ReactNode;
+    /** Current value (controlled). Use undefined when input is empty. */
+    value?: number | undefined;
+    /** Default value (uncontrolled) */
+    defaultValue?: number;
+    /** Called when value changes (undefined when input is cleared) */
+    onChange?: (value: number | undefined) => void;
+    /** Minimum value */
+    min?: number;
+    /** Maximum value */
+    max?: number;
+    /** Step increment */
+    step?: number;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Prefix shown inside input (e.g. "$" for currency) */
+    prefix?: string;
+    /** Currency options (currency variant only) */
+    currencyOptions?: CurrencyOption[];
+    /** Selected currency code (currency variant, controlled) */
+    currencyValue?: string;
+    /** Called when currency selection changes (currency variant) */
+    onCurrencyChange?: (code: string) => void;
+    /** Custom className for the wrapper */
+    className?: string;
+    /** Custom className for the inner number input */
+    inputClassName?: string;
+    /** Custom className for the input container (border wrapper) */
+    containerClassName?: string;
+    /** Custom className for stepper buttons */
+    buttonClassName?: string;
+    /** Called when increment button is clicked */
+    onIncrement?: () => void;
+    /** Called when decrement button is clicked */
+    onDecrement?: () => void;
+    /** Raw input change event handler (called before value transformation) */
+    onInputChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+declare const NumberInput: React.ForwardRefExoticComponent<NumberInputProps & React.RefAttributes<HTMLInputElement>>;
+
+type OTPCellStatus = 'default' | 'success' | 'error';
+interface OTPInputProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /** Controlled value: string of length \`length\` (space = empty cell), or digits-only (padded for display) */
+    value?: string;
+    /** Uncontrolled initial value (digits-only or position-based with spaces) */
+    defaultValue?: string;
+    /** Fired on any change: padded string of length \`length\` (space = empty). Store this for controlled mode to avoid shift on edit. */
+    onChange?: (value: string) => void;
+    /** Fired when all cells are filled: trimmed digits only (e.g. "123456") */
+    onComplete?: (value: string) => void;
+    /** Number of cells (default 6) */
+    length?: number;
+    /** Label above the group */
+    label?: string;
+    /** Error message and global error state (all cells red) */
+    error?: string;
+    /** Helper text below */
+    helperText?: string;
+    /** Show required asterisk after label */
+    required?: boolean;
+    /** Cell border radius */
+    radius?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+    /** Cell size (width/height); from sm breakpoint (640px) and up */
+    size?: 'sm' | 'md' | 'lg';
+    /** Cell size on mobile (below sm breakpoint). When set, uses this size under 640px and \`size\` above. */
+    sizeOnMobile?: 'sm' | 'md' | 'lg';
+    /** Disable all cells */
+    disabled?: boolean;
+    /** Numeric-only vs alphanumeric */
+    type?: 'numeric' | 'text';
+    /** Custom className for the grid wrapper */
+    containerClassName?: string;
+    /** Custom className applied to each cell input */
+    inputClassName?: string;
+    /** Outermost wrapper (label + grid + helper) */
+    className?: string;
+    /** Global state override (success/error styling when no error message) */
+    status?: 'default' | 'success' | 'error';
+    /** Per-cell state (length = length) for mixed states as in Figma */
+    perCellStatus?: OTPCellStatus[];
+}
+declare const OTPInput: React.ForwardRefExoticComponent<OTPInputProps & React.RefAttributes<HTMLDivElement>>;
+
+interface RadioButtonProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange'> {
+    /** Layout variant */
+    variant?: 'default' | 'card' | 'card-icon-top' | 'card-icon-left';
+    /** Size of the radio button */
+    size?: 'sm' | 'md' | 'lg';
+    /** Checked state (controlled) */
+    checked?: boolean;
+    /** Default checked (uncontrolled) */
+    defaultChecked?: boolean;
+    /** Label text */
+    label?: string;
+    /** Helper/description text */
+    helperText?: string;
+    /** Icon for card variants */
+    icon?: React.ReactNode;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Error state */
+    error?: boolean;
+    /** Custom className for the container */
+    className?: string;
+    /** Custom className for the radio circle */
+    radioClassName?: string;
+    /** Custom className for the label */
+    labelClassName?: string;
+    /** Change handler */
+    onChange?: (checked: boolean, event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+/** Credit card icon */
+declare const CreditCardIcon: ({ className }: {
+    className?: string;
+}) => react_jsx_runtime.JSX.Element;
+/** Truck/Shipping icon */
+declare const TruckIcon: ({ className }: {
+    className?: string;
+}) => react_jsx_runtime.JSX.Element;
+/**
+ * RadioButton component with modern animations and multiple layout variants.
+ *
+ * ## Features
+ * - **4 Variants**: Default (inline), Card, Card with icon top, Card with icon left
+ * - **3 Sizes**: Small, Medium, Large
+ * - **States**: Default, Focus, Disabled, Error
+ * - **Animations**: Smooth inner dot scale, focus ring
+ * - **Dark Mode**: Full support via Tailwind dark: variants
+ *
+ * ## Accessibility
+ * - Native radio input for full a11y support
+ * - Keyboard navigation (Arrow keys within group, Space to select)
+ * - Focus-visible ring for keyboard users
+ * - ARIA attributes for screen readers
+ * - Proper label association
+ *
+ * @example
+ * // Basic radio button
+ * <RadioButton name="options" label="Option 1" />
+ *
+ * // With helper text
+ * <RadioButton name="options" label="Standard" helperText="3-5 business days" />
+ *
+ * // Card variant
+ * <RadioButton variant="card" name="plan" label="Pro Plan" helperText="$29/month" />
+ *
+ * // Card with icon
+ * <RadioButton variant="card-icon-left" name="payment" label="Credit Card" icon={<CreditCardIcon />} />
+ *
+ * // Controlled
+ * <RadioButton checked={selected === 'opt1'} onChange={() => setSelected('opt1')} label="Controlled" />
+ */
+declare const RadioButton: React.ForwardRefExoticComponent<RadioButtonProps & React.RefAttributes<HTMLInputElement>>;
+
+interface CarouselProps {
+    /** Carousel variant matching Figma designs */
+    variant?: 'full-image' | 'with-controls' | 'with-indicators';
+    /** Array of slide contents */
+    items?: React.ReactNode[];
+    /** Number of slides visible at once */
+    slidesPerView?: number | 'auto';
+    /** Space between slides in pixels */
+    spaceBetween?: number;
+    /** Enable infinite loop */
+    loop?: boolean;
+    /** Autoplay configuration */
+    autoplay?: boolean | {
+        delay?: number;
+        disableOnInteraction?: boolean;
+    };
+    /** Show navigation arrows */
+    navigation?: boolean;
+    /** Show pagination dots */
+    pagination?: boolean;
+    /** Responsive breakpoints */
+    breakpoints?: SwiperOptions['breakpoints'];
+    /** Initial slide index */
+    initialSlide?: number;
+    /** Additional classes for the container */
+    className?: string;
+    /** Additional classes for each slide */
+    slideClassName?: string;
+    /** Children as alternative to items prop */
+    children?: React.ReactNode;
+    /** Callback when slide changes */
+    onSlideChange?: (index: number) => void;
+}
+/**
+ * Carousel component built on Swiper.js with full customization support.
+ *
+ * ## Variants
+ * - `full-image` - Full-width hero carousel with overlayed controls
+ * - `with-controls` - Multi-slide carousel with navigation buttons below
+ * - `with-indicators` - Multi-slide carousel with navigation and pagination dots below
+ *
+ * ## Features
+ * - Responsive breakpoints
+ * - Touch/swipe support
+ * - Keyboard navigation
+ * - Autoplay with configurable delay
+ * - Dark mode support via Tailwind
+ */
+declare const Carousel: React.FC<CarouselProps>;
+
+interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /** Badge style variant */
+    variant?: 'white' | 'danger' | 'disabled';
+    /** Badge size */
+    size?: 'sm' | 'lg';
+    /** Icon to display on the left side */
+    iconLeft?: React.ReactNode;
+    /** Icon to display on the right side */
+    iconRight?: React.ReactNode;
+    /** Render as icon-only badge (only left icon) */
+    iconOnly?: boolean;
+    /** Render as text-only badge (no icons) */
+    textOnly?: boolean;
+    /** Custom border radius */
+    radius?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+    /** Badge content */
+    children?: React.ReactNode;
+    /** Optional callback for close icon click */
+    onClose?: () => void;
+    /** Accessible label for screen readers (useful for icon-only badges) */
+    'aria-label'?: string;
+}
+declare const ClockIcon: ({ className }: {
+    className?: string;
+}) => react_jsx_runtime.JSX.Element;
+declare const CloseIcon: ({ className }: {
+    className?: string;
+}) => react_jsx_runtime.JSX.Element;
+/**
+ * Badge component with Tailwind dark mode support and full accessibility.
+ *
+ * Uses Tailwind's `dark:` variants for dark mode styling.
+ * Customize colors by overriding theme colors in your tailwind.config.js.
+ *
+ * ## Variants
+ * - `white` - Default/neutral badge (light grey background)
+ * - `danger` - Danger/warning badge (red styling)
+ * - `disabled` - Disabled badge (muted grey styling)
+ *
+ * ## Sizes
+ * - `lg` - Large badges (default)
+ * - `sm` - Small badges
+ *
+ * ## Border Radius
+ * Customize with `radius` prop: none, sm, md, lg, xl, full
+ *
+ * ## Features
+ * - Optional left icon (e.g., clock icon)
+ * - Optional right icon (e.g., close icon)
+ * - Icon-only mode (only left icon)
+ * - Text-only mode (no icons)
+ * - Interactive close button (if onClose provided)
+ *
+ * ## Accessibility
+ * - Semantic HTML structure
+ * - Support for aria-label
+ * - Close button is keyboard accessible
+ *
+ * @example
+ * // Basic badge
+ * <Badge variant="white">Badge text</Badge>
+ *
+ * // With icons
+ * <Badge iconLeft={<ClockIcon />} iconRight={<CloseIcon />}>Badge text</Badge>
+ *
+ * // Icon only
+ * <Badge iconOnly iconLeft={<ClockIcon />} aria-label="Time indicator" />
+ *
+ * // With close handler
+ * <Badge iconRight={<CloseIcon />} onClose={() => console.log('closed')}>Dismissible</Badge>
+ */
+declare const Badge: React.FC<BadgeProps>;
+
+interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Alert color variant */
+    variant?: 'success' | 'danger' | 'warning' | 'default';
+    /** Alert layout type */
+    type?: 'default' | 'complex' | 'small' | 'border-top';
+    /** Optional heading text */
+    heading?: string;
+    /** Alert content (body text) */
+    children?: React.ReactNode;
+    /** Icon to display on the left side */
+    iconLeft?: React.ReactNode;
+    /** Icon to display on the right side */
+    iconRight?: React.ReactNode;
+    /** Show close icon (X) */
+    showClose?: boolean;
+    /** Optional callback for close icon click */
+    onClose?: () => void;
+    /** Action button text (for complex type) */
+    actionText?: string;
+    /** Action button icon (for complex type) */
+    actionIcon?: React.ReactNode;
+    /** Action button click handler (for complex type) */
+    onAction?: () => void;
+    /** "New" badge label text (for small type) */
+    newLabel?: string;
+    /** Custom border radius */
+    radius?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+}
+declare const InfoCircleIcon: ({ className }: {
+    className?: string;
+}) => react_jsx_runtime.JSX.Element;
+declare const CheckCircleIcon: ({ className }: {
+    className?: string;
+}) => react_jsx_runtime.JSX.Element;
+declare const AlertCircleIcon: ({ className }: {
+    className?: string;
+}) => react_jsx_runtime.JSX.Element;
+declare const BookOpenIcon: ({ className }: {
+    className?: string;
+}) => react_jsx_runtime.JSX.Element;
+/**
+ * Alert component with Tailwind dark mode support and full accessibility.
+ *
+ * This is a Molecule component composed of Button and Badge atoms.
+ * Uses Tailwind's `dark:` variants for dark mode styling.
+ * Customize colors by overriding theme colors in your tailwind.config.js.
+ *
+ * ## Variants
+ * - `success` - Success/info alert (green)
+ * - `danger` - Error/danger alert (red)
+ * - `warning` - Warning alert (yellow)
+ * - `default` - Default/info alert (grey)
+ *
+ * ## Types
+ * - `default` - Simple single-line alert
+ * - `complex` - Multi-line alert with heading and action button
+ * - `small` - Compact alert with badge label
+ * - `border-top` - Alert with top border accent
+ *
+ * ## Features
+ * - Optional left icon (auto-selected based on variant if not provided)
+ * - Optional heading text (for complex type)
+ * - Optional action button (for complex type) - uses Button component
+ * - Optional "New" badge (for small type) - uses Badge component
+ * - Dismissible with close button
+ * - Custom border radius support
+ *
+ * ## Accessibility
+ * - Uses `role="alert"` for screen reader announcements
+ * - Close button is keyboard accessible
+ * - Action button uses Button component (fully accessible)
+ *
+ * @example
+ * // Simple alert
+ * <Alert variant="success">Operation completed successfully</Alert>
+ *
+ * // Complex alert with action
+ * <Alert
+ *   variant="danger"
+ *   type="complex"
+ *   heading="Error occurred"
+ *   actionText="Learn more"
+ *   onAction={() => console.log('action')}
+ * >
+ *   Something went wrong. Please try again.
+ * </Alert>
+ *
+ * // Small alert with badge
+ * <Alert variant="warning" type="small" newLabel="New">
+ *   New feature available
+ * </Alert>
+ */
+declare const Alert: React.FC<AlertProps>;
+
+interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Avatar size */
+    size?: 'sm' | 'base' | 'lg' | 'xl' | '2xl';
+    /** Image source URL */
+    src?: string;
+    /** Image alt text */
+    alt?: string;
+    /** User name (for auto-generating initials) */
+    name?: string;
+    /** Manual text/initials (overrides name if provided) */
+    text?: string;
+    /** Status indicator */
+    status?: 'online' | 'offline' | 'away' | null;
+    /** Position of the status indicator */
+    statusPosition?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+    /** Show remove button */
+    showRemove?: boolean;
+    /** Callback when remove button is clicked */
+    onRemove?: () => void;
+    /** Border for group avatars */
+    border?: boolean;
+}
+/**
+ * Avatar component with Tailwind dark mode support and full accessibility.
+ *
+ * Features a subtle glass shimmer effect on hover for a modern, polished look.
+ *
+ * Uses Tailwind's `dark:` variants for dark mode styling.
+ * Customize colors by overriding theme colors in your tailwind.config.js.
+ *
+ * ## Sizes
+ * - `sm` - 24px
+ * - `base` - 32px (default)
+ * - `lg` - 44px
+ * - `xl` - 56px
+ * - `2xl` - 64px
+ *
+ * ## Types
+ * - **Image Avatar**: Provide `src` prop
+ * - **Text Avatar**: Provide `name` (auto-generates initials) or `text` (manual)
+ * - **With Status**: Provide `status` prop (online, offline, away)
+ * - **With Remove Button**: Set `showRemove={true}` and `onRemove` callback
+ *
+ * ## Status Position
+ * - `bottom-right` (default)
+ * - `bottom-left`
+ * - `top-right`
+ * - `top-left`
+ *
+ * ## Hover Effects
+ * - Subtle glass shimmer animation sweeps across on hover
+ * - Soft ring glow effect
+ *
+ * @example
+ * <Avatar src="/user.jpg" alt="User name" />
+ * <Avatar name="John Doe" />
+ * <Avatar src="/user.jpg" status="online" statusPosition="top-right" />
+ */
+declare const Avatar: React.FC<AvatarProps>;
+
+interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Array of avatar data */
+    avatars: Array<{
+        src?: string;
+        name?: string;
+        text?: string;
+        alt?: string;
+    }>;
+    /** Avatar size */
+    size?: 'sm' | 'base' | 'lg' | 'xl' | '2xl';
+    /** Maximum number of avatars to show before counter */
+    max?: number;
+    /** Show counter badge for remaining avatars */
+    showCounter?: boolean;
+    /** Overlap spacing (negative margin) */
+    overlap?: number;
+}
+/**
+ * AvatarGroup component for displaying multiple overlapping avatars.
+ *
+ * Displays a group of avatars with negative margin overlap. When the number
+ * of avatars exceeds the `max` prop, shows a counter badge with the remaining count.
+ *
+ * Uses Tailwind's `dark:` variants for dark mode styling.
+ *
+ * ## Features
+ * - Multiple avatars with overlap
+ * - Border around each avatar for separation
+ * - Counter badge for remaining avatars
+ * - Configurable max visible count
+ * - Configurable overlap spacing
+ *
+ * @example
+ * // Basic group
+ * <AvatarGroup
+ *   avatars={[
+ *     { src: '/user1.jpg', name: 'User 1' },
+ *     { src: '/user2.jpg', name: 'User 2' },
+ *     { src: '/user3.jpg', name: 'User 3' },
+ *   ]}
+ * />
+ *
+ * // With counter
+ * <AvatarGroup
+ *   avatars={users}
+ *   max={3}
+ *   showCounter
+ * />
+ */
+declare const AvatarGroup: React.FC<AvatarGroupProps>;
+
+interface AvatarLabelProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Avatar props */
+    avatar: {
+        src?: string;
+        name?: string;
+        text?: string;
+        alt?: string;
+        status?: 'online' | 'offline' | 'away' | null;
+        statusPosition?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+    };
+    /** Name text */
+    name: string;
+    /** Subtext (email, role, etc.) */
+    subtext?: string;
+    /** Size */
+    size?: 'sm' | 'base' | 'lg' | 'xl';
+    /** Show subtext */
+    showSubtext?: boolean;
+}
+/**
+ * AvatarLabel component for displaying avatar with name and optional subtext.
+ *
+ * Combines an Avatar component with name and optional subtext (email, role, etc.)
+ * in a horizontal layout. Text sizes are responsive to the avatar size.
+ *
+ * Uses Tailwind's `dark:` variants for dark mode styling.
+ *
+ * ## Sizes
+ * - `sm` - Small avatar with small text
+ * - `base` - Default size
+ * - `lg` - Large avatar with larger text
+ * - `xl` - Extra large avatar with largest text
+ *
+ * @example
+ * // Basic label
+ * <AvatarLabel
+ *   avatar={{ src: '/user.jpg', name: 'John Doe' }}
+ *   name="John Doe"
+ * />
+ *
+ * // With subtext
+ * <AvatarLabel
+ *   avatar={{ src: '/user.jpg', name: 'John Doe' }}
+ *   name="John Doe"
+ *   subtext="john@example.com"
+ * />
+ *
+ * // With status
+ * <AvatarLabel
+ *   avatar={{ src: '/user.jpg', name: 'John Doe', status: 'online' }}
+ *   name="John Doe"
+ *   subtext="Online"
+ * />
+ */
+declare const AvatarLabel: React.FC<AvatarLabelProps>;
+
+interface AccordionItem {
+    /** Unique identifier for the item */
+    id: string;
+    /** Accordion header/title text */
+    title: string;
+    /** Accordion content (can be ReactNode for rich content) */
+    content: React.ReactNode;
+    /** Optional left icon (overrides default) */
+    iconLeft?: React.ReactNode;
+    /** Optional nested accordion items (for multi-level) */
+    children?: AccordionItem[];
+    /** Disable this specific item */
+    disabled?: boolean;
+}
+interface AccordionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /** Array of accordion items */
+    items: AccordionItem[];
+    /** Visual style variant */
+    variant?: 'default' | 'separate' | 'flush' | 'multi-level';
+    /** Allow multiple items to be open simultaneously */
+    allowMultiple?: boolean;
+    /** Default open items (by id) */
+    defaultOpen?: string[];
+    /** Controlled open items (for external state management) */
+    openItems?: string[];
+    /** Callback when items open/close */
+    onChange?: (openIds: string[]) => void;
+    /** Show left icon */
+    showLeftIcon?: boolean;
+    /** Show right chevron icon */
+    showRightIcon?: boolean;
+    /** Default left icon (used if item doesn't have iconLeft) */
+    defaultLeftIcon?: React.ReactNode;
+    /** Custom border radius */
+    radius?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+}
+/** Chevron Down Icon - rotates to indicate open/closed state */
+declare const ChevronDownIcon: ({ className }: {
+    className?: string;
+}) => react_jsx_runtime.JSX.Element;
+/**
+ * Accordion component with full accessibility and keyboard navigation.
+ *
+ * This is a Molecule component that provides collapsible content panels.
+ * Uses Tailwind's `dark:` variants for dark mode styling.
+ * Customize colors by overriding theme colors in your tailwind.config.js.
+ *
+ * ## Variants
+ * - `default` - Connected items with shared borders, rounded corners on first/last
+ * - `separate` - Each item is a separate card with full border radius
+ * - `flush` - Minimal padding, no horizontal padding, flush design
+ * - `multi-level` - Supports nested accordion items with indentation
+ *
+ * ## Features
+ * - Optional left icons (customizable per item or default)
+ * - Animated chevron rotation on open/close
+ * - Smooth height transitions
+ * - Single or multiple items open at once (via `allowMultiple`)
+ * - Controlled or uncontrolled state management
+ * - Rich content support (ReactNode)
+ * - Nested/multi-level accordions
+ *
+ * ## Accessibility
+ * - Full keyboard navigation (Arrow Up/Down, Home, End, Enter, Space)
+ * - ARIA attributes (aria-expanded, aria-controls, aria-labelledby)
+ * - Focus management with visible focus rings
+ * - Screen reader friendly with proper roles
+ *
+ * @example
+ * // Basic usage
+ * <Accordion
+ *   items={[
+ *     { id: '1', title: 'Question 1', content: 'Answer 1' },
+ *     { id: '2', title: 'Question 2', content: 'Answer 2' },
+ *   ]}
+ * />
+ *
+ * // Multiple open with custom variant
+ * <Accordion
+ *   items={items}
+ *   variant="separate"
+ *   allowMultiple
+ *   defaultOpen={['1']}
+ * />
+ */
+declare const Accordion: React.FC<AccordionProps>;
+
+interface BreadcrumbDropdownItem {
+    /** Unique identifier */
+    id: string;
+    /** Display text */
+    label: string;
+    /** Optional href for navigation */
+    href?: string;
+    /** Optional click handler */
+    onClick?: () => void;
+}
+interface BreadcrumbItem {
+    /** Unique identifier */
+    id: string;
+    /** Display text */
+    label: string;
+    /** Optional href for navigation */
+    href?: string;
+    /** Custom icon (overrides default home icon for first item) */
+    icon?: React.ReactNode;
+    /** Render as dropdown button (for "with dropdown" variant) */
+    isDropdown?: boolean;
+    /** Dropdown options (if isDropdown is true) */
+    dropdownItems?: BreadcrumbDropdownItem[];
+    /** Custom component to render as (e.g., Next.js Link) */
+    as?: React.ElementType;
+}
+interface BreadcrumbProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange'> {
+    /** Array of breadcrumb items */
+    items: BreadcrumbItem[];
+    /** Visual style variant */
+    variant?: 'default' | 'background' | 'with-dropdown';
+    /** Show home icon on first item */
+    showHomeIcon?: boolean;
+    /** Custom home icon */
+    homeIcon?: React.ReactNode;
+    /** Separator icon (default: chevron right) */
+    separator?: React.ReactNode;
+    /** Custom border radius (for background variant) */
+    radius?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+    /** Maximum items to show before truncating (responsive) */
+    maxItems?: number;
+    /** Custom component for links (e.g., Next.js Link) */
+    linkComponent?: React.ElementType;
+    /** Callback when dropdown item is selected */
+    onDropdownSelect?: (itemId: string, breadcrumbItemId: string) => void;
+}
+/** Home Icon - House outline icon (16px) */
+declare const HomeIcon: ({ className }: {
+    className?: string;
+}) => react_jsx_runtime.JSX.Element;
+/** Layers Icon - Stacked layers icon for dropdown button (20px) */
+declare const LayersIcon: ({ className }: {
+    className?: string;
+}) => react_jsx_runtime.JSX.Element;
+declare const Breadcrumb: React.FC<BreadcrumbProps>;
+
+interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Card layout variant */
+    variant?: 'text-only' | 'with-image' | 'full-image' | 'horizontal' | 'e-commerce';
+    /** Card heading/title */
+    heading?: React.ReactNode;
+    /** Card description/body text */
+    description?: React.ReactNode;
+    /** Card image */
+    image?: {
+        src: string;
+        alt: string;
+    };
+    /** Badge to display (e.g., "Trending") */
+    badge?: {
+        text: string;
+        icon?: React.ReactNode;
+    };
+    /** Primary action button */
+    action?: {
+        label: string;
+        icon?: React.ReactNode;
+        onClick?: () => void;
+        href?: string;
+        as?: React.ElementType;
+        variant?: 'primary' | 'secondary';
+    };
+    /** Secondary action (e.g., bookmark button) */
+    secondaryAction?: React.ReactNode;
+    /** Rating display (for e-commerce variant) */
+    rating?: {
+        value: number;
+        max?: number;
+        showValue?: boolean;
+    };
+    /** Price display (for e-commerce variant) */
+    price?: string | React.ReactNode;
+    /** Show heading section */
+    showHeading?: boolean;
+    /** Show description section */
+    showDescription?: boolean;
+    /** Custom border radius */
+    radius?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+    /** Shadow variant */
+    shadow?: 'none' | 'sm' | 'md' | 'lg';
+}
+declare const ArrowRightIcon: ({ className }: {
+    className?: string;
+}) => react_jsx_runtime.JSX.Element;
+declare const BookmarkIcon: ({ className }: {
+    className?: string;
+}) => react_jsx_runtime.JSX.Element;
+declare const CartIcon: ({ className }: {
+    className?: string;
+}) => react_jsx_runtime.JSX.Element;
+declare const StarIcon: ({ className, filled }: {
+    className?: string;
+    filled?: boolean;
+}) => react_jsx_runtime.JSX.Element;
+declare const FireIcon: ({ className }: {
+    className?: string;
+}) => react_jsx_runtime.JSX.Element;
+/**
+ * Card component with Tailwind dark mode support and full flexibility.
+ */
+declare const Card: React.FC<CardProps>;
+
+interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange'> {
+    /** Layout variant */
+    variant?: 'default' | 'card' | 'card-icon-top' | 'card-icon-left';
+    /** Size of the checkbox */
+    size?: 'sm' | 'md' | 'lg';
+    /** Checked state (controlled) */
+    checked?: boolean;
+    /** Default checked (uncontrolled) */
+    defaultChecked?: boolean;
+    /** Label text */
+    label?: string;
+    /** Helper/description text */
+    helperText?: string;
+    /** Icon for card variants */
+    icon?: React.ReactNode;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Error state */
+    error?: boolean;
+    /** Indeterminate state (for "select all" patterns) */
+    indeterminate?: boolean;
+    /** Custom className for the container */
+    className?: string;
+    /** Custom className for the checkbox box */
+    checkboxClassName?: string;
+    /** Custom className for the label */
+    labelClassName?: string;
+    /** Change handler */
+    onChange?: (checked: boolean, event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+/** Animated checkmark icon */
+declare const CheckIcon: ({ className }: {
+    className?: string;
+}) => react_jsx_runtime.JSX.Element;
+/** Minus icon for indeterminate state */
+declare const MinusIcon: ({ className }: {
+    className?: string;
+}) => react_jsx_runtime.JSX.Element;
+/** Profile card icon (example for card variants) */
+declare const ProfileCardIcon: ({ className }: {
+    className?: string;
+}) => react_jsx_runtime.JSX.Element;
+/** Settings icon (alternative for card variants) */
+declare const SettingsIcon: ({ className }: {
+    className?: string;
+}) => react_jsx_runtime.JSX.Element;
+/**
+ * Checkbox component with modern animations and multiple layout variants.
+ *
+ * ## Features
+ * - **4 Variants**: Default (inline), Card, Card with icon top, Card with icon left
+ * - **3 Sizes**: Small, Medium, Large
+ * - **States**: Default, Focus, Disabled, Error, Indeterminate
+ * - **Animations**: Smooth checkmark drawing, scale transitions, focus ring
+ * - **Dark Mode**: Full support via Tailwind dark: variants
+ *
+ * ## Accessibility
+ * - Native checkbox input for full a11y support
+ * - Keyboard navigation (Space to toggle, Tab to navigate)
+ * - Focus-visible ring for keyboard users
+ * - ARIA attributes for screen readers
+ * - Proper label association
+ *
+ * @example
+ * // Basic checkbox
+ * <Checkbox label="Accept terms" />
+ *
+ * // With helper text
+ * <Checkbox label="Remember me" helperText="Save credentials for next visit" />
+ *
+ * // Card variant
+ * <Checkbox variant="card" label="Option 1" helperText="Description" />
+ *
+ * // Card with icon
+ * <Checkbox variant="card-icon-left" label="Profile" icon={<ProfileCardIcon />} />
+ *
+ * // Controlled
+ * <Checkbox checked={isChecked} onChange={(checked) => setIsChecked(checked)} label="Controlled" />
+ */
+declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
+
+interface ToggleProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange'> {
+    /** Layout variant */
+    variant?: 'default' | 'card' | 'card-icon-top' | 'card-icon-left';
+    /** Size of the toggle switch (sm | md | lg). Use trackStyle/thumbStyle for custom dimensions. */
+    size?: 'sm' | 'md' | 'lg';
+    /** Checked state (controlled) */
+    checked?: boolean;
+    /** Default checked (uncontrolled) */
+    defaultChecked?: boolean;
+    /** Label text */
+    label?: string;
+    /** Helper/description text */
+    helperText?: string;
+    /** Icon for card variants */
+    icon?: React.ReactNode;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Error state */
+    error?: boolean;
+    /** Custom className for the container (toggle-root) */
+    className?: string;
+    /** Custom className for the toggle track */
+    toggleClassName?: string;
+    /** Custom className for the thumb */
+    thumbClassName?: string;
+    /** Custom className for the label */
+    labelClassName?: string;
+    /** Custom className for the helper text */
+    helperTextClassName?: string;
+    /** Inline styles for the track (e.g. width, height for custom sizing) */
+    trackStyle?: React.CSSProperties;
+    /** Inline styles for the thumb (e.g. width, height for custom sizing; checked position may need custom CSS) */
+    thumbStyle?: React.CSSProperties;
+    /** Called when the checked state changes. (checked, event) => void */
+    onChange?: (checked: boolean, event: React.ChangeEvent<HTMLInputElement>) => void;
+    /** Alias for onChange; called when toggled. (checked) => void */
+    onCheckedChange?: (checked: boolean) => void;
+}
+/**
+ * Toggle (switch) component with pill track and sliding thumb.
+ * API and layout variants mirror Checkbox: default, card, card-icon-top, card-icon-left.
+ *
+ * ## Features
+ * - **4 Variants**: Default (inline), Card, Card with icon top, Card with icon left
+ * - **3 Sizes**: Small, Medium, Large
+ * - **States**: Default, Focus, Disabled, Error
+ * - **Animations**: Smooth thumb slide and track color transition
+ * - **Dark Mode**: Full support via Tailwind dark: variants
+ *
+ * ## Accessibility
+ * - Native checkbox input (sr-only) for form and a11y
+ * - Keyboard navigation (Space to toggle, Tab to navigate)
+ * - Focus-visible ring on track
+ * - ARIA attributes and label association
+ *
+ * ## Class names (for customization)
+ * - toggle-root: container label
+ * - toggle-track: pill track
+ * - toggle-thumb: circular thumb
+ * - toggle-label: primary label text
+ * - toggle-helper-text: helper text
+ * - toggle-icon-wrapper: icon container (card variants)
+ */
+declare const Toggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLInputElement>>;
+
+/**
+ * DatePicker Type Definitions
+ *
+ * Shared types used across all DatePicker components.
+ */
+/** Picker mode variants */
+type DatePickerMode = 'single' | 'range' | 'year' | 'month' | 'dob';
+/** Date range value type */
+type DateRange = [Date | null, Date | null];
+/** Value type based on mode */
+type DatePickerValue = Date | DateRange | null;
+/** Base props shared across DatePicker variants */
+interface DatePickerBaseProps {
+    /** Picker mode */
+    mode?: DatePickerMode;
+    /** Label text */
+    label?: string;
+    /** Helper text below the input */
+    helperText?: string;
+    /** Required field indicator */
+    required?: boolean;
+    /** Error state */
+    error?: boolean;
+    /** Error message */
+    errorMessage?: string;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Minimum selectable date */
+    minDate?: Date;
+    /** Maximum selectable date */
+    maxDate?: Date;
+    /** Specific dates to disable */
+    disabledDates?: Date[];
+    /** Placeholder text for input */
+    placeholder?: string;
+    /** Date format for display (default: 'MM/DD/YYYY') */
+    dateFormat?: string;
+    /** First day of week (0=Sunday, 1=Monday) */
+    firstDayOfWeek?: 0 | 1;
+    /** Show "Today" quick select button */
+    showToday?: boolean;
+    /** Show clear button */
+    showClear?: boolean;
+    /** Locale for month/day names */
+    locale?: string;
+    /** Custom className for container */
+    className?: string;
+    /** Custom className for the input */
+    inputClassName?: string;
+    /** Custom className for the dropdown */
+    dropdownClassName?: string;
+}
+/** Props for single date picker mode */
+interface SingleDatePickerProps extends DatePickerBaseProps {
+    mode?: 'single';
+    /** Selected date (controlled) */
+    value?: Date | null;
+    /** Default date (uncontrolled) */
+    defaultValue?: Date | null;
+    /** Change handler */
+    onChange?: (date: Date | null) => void;
+}
+/** Props for range date picker mode */
+interface RangeDatePickerProps extends DatePickerBaseProps {
+    mode: 'range';
+    /** Selected date range (controlled) */
+    value?: DateRange;
+    /** Default date range (uncontrolled) */
+    defaultValue?: DateRange;
+    /** Change handler */
+    onChange?: (range: DateRange) => void;
+}
+/** Props for year picker mode */
+interface YearPickerProps extends DatePickerBaseProps {
+    mode: 'year';
+    /** Selected year (controlled) */
+    value?: Date | null;
+    /** Default year (uncontrolled) */
+    defaultValue?: Date | null;
+    /** Change handler */
+    onChange?: (date: Date | null) => void;
+}
+/** Props for month picker mode */
+interface MonthPickerProps extends DatePickerBaseProps {
+    mode: 'month';
+    /** Selected month (controlled) */
+    value?: Date | null;
+    /** Default month (uncontrolled) */
+    defaultValue?: Date | null;
+    /** Change handler */
+    onChange?: (date: Date | null) => void;
+}
+/** Props for date of birth picker mode */
+interface DOBPickerProps extends DatePickerBaseProps {
+    mode: 'dob';
+    /** Selected date (controlled) */
+    value?: Date | null;
+    /** Default date (uncontrolled) */
+    defaultValue?: Date | null;
+    /** Change handler */
+    onChange?: (date: Date | null) => void;
+}
+/** Union type for all DatePicker props */
+type DatePickerProps = SingleDatePickerProps | RangeDatePickerProps | YearPickerProps | MonthPickerProps | DOBPickerProps;
+
+/** Calendar Icon - Matches Figma design */
+declare const CalendarIcon: ({ className }: {
+    className?: string;
+}) => react_jsx_runtime.JSX.Element;
+
+/**
+ * DatePicker Component
+ *
+ * A comprehensive date picker supporting single date, date range,
+ * year, month, and date of birth selection modes.
+ * Matches Figma design with proper animations and styling.
+ */
+
+/**
+ * DatePicker - A flexible, accessible date picker component.
+ *
+ * ## Features
+ * - **Multiple Modes**: Single date, date range, year, month, DOB selection
+ * - **Controlled/Uncontrolled**: Works both ways like other form components
+ * - **Accessible**: Full keyboard navigation, ARIA attributes, screen reader support
+ * - **Themeable**: Uses Tailwind dark: variants for automatic dark mode
+ * - **Animated**: Smooth transitions and hover effects
+ *
+ * @example
+ * // Single date
+ * <DatePicker value={date} onChange={setDate} />
+ *
+ * // Date range
+ * <DatePicker mode="range" value={range} onChange={setRange} />
+ */
+declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLButtonElement>>;
+
+/**
+ * Dropdown Type Definitions
+ *
+ * Shared types used across Dropdown components.
+ */
+
+/** Trigger style variant */
+type DropdownTriggerVariant = 'button' | 'input';
+/** Item content variant for DropdownItem */
+type DropdownItemVariant = 'default' | 'withCounter' | 'withDisclosure' | 'withCheckbox' | 'user' | 'withToggle' | 'destructive';
+/** User info for user-type dropdown item */
+interface DropdownItemUser {
+    /** Avatar image URL or undefined for placeholder */
+    avatar?: string;
+    /** Display name */
+    name: string;
+    /** Secondary line (e.g. email) */
+    email?: string;
+}
+/** Item shape for declarative API (items array) */
+interface DropdownItemData {
+    /** Unique identifier */
+    id: string;
+    /** Display label */
+    label: string;
+    /** Optional icon (React node) */
+    icon?: React.ReactNode;
+    /** Optional helper/description text */
+    helperText?: string;
+    /** Optional right-aligned counter (e.g. "456") */
+    counter?: string | number;
+    /** Optional badge content (React node or string) */
+    badge?: React.ReactNode;
+    /** User info for user variant (avatar, name, email) */
+    user?: DropdownItemUser;
+    /** Checked state for checkbox variant */
+    checked?: boolean;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Destructive styling (e.g. Sign Out) */
+    destructive?: boolean;
+    /** Link href – item renders as link when set */
+    href?: string;
+    /** Optional click handler */
+    onClick?: () => void;
+    /** Variant hint for rendering (defaults inferred from props) */
+    variant?: DropdownItemVariant;
+    /** Toggle checked state for withToggle variant */
+    toggleChecked?: boolean;
+    /** Toggle change handler for withToggle variant */
+    onToggleChange?: (checked: boolean) => void;
+    /**
+     * Whether to close the dropdown when this item is selected.
+     * Default true. Set to false for checkbox/toggle items so the menu stays open (e.g. multi-select).
+     */
+    closeOnSelect?: boolean;
+}
+/** Props for Dropdown root (declarative API) */
+interface DropdownProps {
+    /** Label above trigger (like Input) */
+    label?: string;
+    /** Helper text below label */
+    helperText?: string;
+    /** Trigger style: button or input-like */
+    triggerVariant?: DropdownTriggerVariant;
+    /** Placeholder for input-style trigger */
+    placeholder?: string;
+    /** Trigger button label (for button variant) */
+    triggerLabel?: string;
+    /** Button variant when triggerVariant is 'button' */
+    buttonVariant?: 'primary' | 'secondary';
+    /** Button size when triggerVariant is 'button' */
+    buttonSize?: 'lg' | 'md' | 'sm';
+    /** Menu items (declarative) */
+    items?: DropdownItemData[];
+    /** Called when an item is selected (id) */
+    onSelect?: (itemId: string, item: DropdownItemData) => void;
+    /**
+     * Controlled open state. When provided, the dropdown is controlled:
+     * pass \`open={isOpen}\` and \`onOpenChange={setIsOpen}\` to open/close from outside
+     * (e.g. close after async action, or open from a different button).
+     */
+    open?: boolean;
+    /** Called when open state should change (trigger click, item select, Escape, click outside). Use with \`open\` for controlled mode. */
+    onOpenChange?: (open: boolean) => void;
+    /** Disabled state for trigger */
+    disabled?: boolean;
+    /** Custom className for root container */
+    className?: string;
+    /** Custom className for trigger */
+    triggerClassName?: string;
+    /** Custom className for menu panel */
+    menuClassName?: string;
+    /** Minimum width of menu (e.g. "200px") */
+    menuMinWidth?: string;
+    /** Children for compound API (Trigger + Menu + Items) */
+    children?: React.ReactNode;
+}
+/** Props for DropdownTrigger (compound API) */
+interface DropdownTriggerProps {
+    /** Trigger variant: button or input-style */
+    variant?: DropdownTriggerVariant;
+    /** Placeholder for input-style */
+    placeholder?: string;
+    /** Button label for button variant */
+    children?: React.ReactNode;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Custom className */
+    className?: string;
+    /** Button variant when variant is 'button' */
+    buttonVariant?: 'primary' | 'secondary';
+    /** Button size when variant is 'button' */
+    buttonSize?: 'lg' | 'md' | 'sm';
+}
+/** Props for DropdownMenu (compound API) */
+interface DropdownMenuProps {
+    /** Menu content (DropdownItem components) */
+    children?: React.ReactNode;
+    /** Custom className */
+    className?: string;
+    /** Minimum width (e.g. "200px") */
+    minWidth?: string;
+    /** Alignment relative to trigger */
+    align?: 'left' | 'right';
+}
+/** Props for DropdownItem */
+interface DropdownItemProps {
+    /** Visual/content variant */
+    variant?: DropdownItemVariant;
+    /** Unique id (for selection callback) */
+    id?: string;
+    /** Display label (optional when itemData is provided) */
+    label?: string;
+    /** Optional icon (left) */
+    icon?: React.ReactNode;
+    /** Optional helper text (below label) */
+    helperText?: string;
+    /** Optional counter (right-aligned) */
+    counter?: string | number;
+    /** Optional badge (right) */
+    badge?: React.ReactNode;
+    /** User info for user variant */
+    user?: DropdownItemUser;
+    /** Checked state for checkbox variant */
+    checked?: boolean;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Destructive styling */
+    destructive?: boolean;
+    /** Link href – renders as link when set */
+    href?: string;
+    /** Click handler */
+    onSelect?: () => void;
+    /** Custom component for link (e.g. Next.js Link) */
+    as?: React.ElementType;
+    /** Toggle checked for withToggle variant */
+    toggleChecked?: boolean;
+    /** Toggle change for withToggle variant */
+    onToggleChange?: (checked: boolean) => void;
+    /** Custom className */
+    className?: string;
+    /** Override content with custom children */
+    children?: React.ReactNode;
+}
+/** Context value for Dropdown compound usage */
+interface DropdownContextValue {
+    open: boolean;
+    /** True while the menu is playing its close animation (before unmount) */
+    closing: boolean;
+    setOpen: (open: boolean) => void;
+    triggerId: string;
+    menuId: string;
+    triggerRef: React.RefObject<HTMLButtonElement | HTMLDivElement | null>;
+    menuRef: React.RefObject<HTMLDivElement | null>;
+}
+
+/**
+ * Dropdown component with declarative API (items array) and optional compound API (children).
+ * Supports button and input-style triggers, label + helperText, full keyboard and ARIA support.
+ *
+ * **Controlled mode**: Pass `open` and `onOpenChange` to control open/close from outside.
+ *
+ * **Keep menu open on select**: Set \`closeOnSelect: false\` on an item (e.g. checkbox/toggle) so the menu stays open when that item is clicked.
+ */
+declare const Dropdown: React.FC<DropdownProps>;
+
+interface DropdownTriggerInternalProps extends DropdownTriggerProps {
+    /** ID for accessibility (from context when used inside Dropdown) */
+    id?: string;
+    /** Aria label for trigger (e.g. for icon-only or input-style) */
+    ariaLabel?: string;
+}
+declare const DropdownTrigger: React.ForwardRefExoticComponent<DropdownTriggerInternalProps & React.RefAttributes<HTMLButtonElement | HTMLDivElement>>;
+
+interface DropdownMenuInternalProps extends DropdownMenuProps {
+    /** ID for menu (from context when used inside Dropdown) */
+    id?: string;
+    /** ID of trigger for aria-labelledby (from context) */
+    ariaLabelledBy?: string;
+}
+declare const DropdownMenu: React.FC<DropdownMenuInternalProps>;
+
+interface DropdownItemInternalProps extends DropdownItemProps {
+    /** Item data for declarative API (from root) */
+    itemData?: DropdownItemData;
+    /** Select callback for declarative API */
+    onSelect?: () => void;
+}
+declare const DropdownItem: React.FC<DropdownItemInternalProps>;
+
+/**
+ * Pagination Type Definitions
+ *
+ * Shared types for the Pagination component and its variants.
+ */
+
+/** Visual variant of the pagination component (maps to Figma nodes) */
+type PaginationVariant = 'segmented' | 'prev-next-only' | 'compact' | 'with-entries' | 'with-items-per-page' | 'with-go-to' | 'go-to-only';
+interface PaginationProps {
+    /** Current page (1-based) */
+    currentPage: number;
+    /** Total number of pages */
+    totalPages: number;
+    /** Page change event callback: called when the user navigates to a different page (Prev, Next, page number click, or Go). Receives the new page number (1-based). Not called when the clicked page is already the current page. */
+    onPageChange?: (page: number) => void;
+    /** Visual variant */
+    variant?: PaginationVariant;
+    /** Number of page buttons to show on each side of current (for ellipsis variants) */
+    siblingCount?: number;
+    /** Maximum number of page number buttons to show (excluding ellipsis). When set, overrides siblingCount to cap visible items. */
+    maxVisiblePageNumbers?: number;
+    /** Show first and last page in numbered list */
+    showFirstLast?: boolean;
+    /** Hide "Previous"/"Next" text (icon-only for segmented style) */
+    hidePrevNextLabels?: boolean;
+    /** For with-entries: total item count */
+    totalItems?: number;
+    /** For with-entries: items per page */
+    pageSize?: number;
+    /** For with-entries: label e.g. "Entries" */
+    entriesLabel?: string;
+    /** For with-items-per-page: options e.g. [5, 10, 20, 50] */
+    pageSizeOptions?: number[];
+    /** For with-items-per-page: current page size */
+    onPageSizeChange?: (size: number) => void;
+    /** Label for "Go to page" (with-go-to, go-to-only) */
+    goToLabel?: string;
+    /** Label for Go button */
+    goButtonLabel?: string;
+    /** Generate href for a page (enables link rendering when used with as) */
+    getHref?: (page: number) => string;
+    /** Custom component for links (e.g. Next.js Link) */
+    as?: React.ElementType;
+    /** "Previous" button label */
+    previousLabel?: string;
+    /** "Next" button label */
+    nextLabel?: string;
+    /** aria-label for the nav element */
+    ariaLabel?: string;
+    /** Optional aria label for each page button */
+    getPageAriaLabel?: (page: number) => string;
+    /** Custom render for a page number (page, { active, onClick, ... }) */
+    renderPage?: (page: number, props: {
+        active: boolean;
+        onClick: () => void;
+        'aria-current'?: 'page';
+    }) => React.ReactNode;
+    /** Border radius (same as Button, Badge, etc.) */
+    radius?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+    /** Root className */
+    className?: string;
+    /** Children (unused; for future compound API) */
+    children?: React.ReactNode;
+}
+
+declare const Pagination: React.FC<PaginationProps>;
+
+type ProgressBarVariant = 'primary' | 'success' | 'warning' | 'danger';
+type ProgressBarSize = 'sm' | 'md' | 'lg';
+type ProgressBarLabelPosition = 'top' | 'left' | 'right' | 'inside';
+interface ProgressBarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Current value (0 to max) */
+    value?: number;
+    /** Maximum value (default 100) */
+    max?: number;
+    /** Fill color variant */
+    variant?: ProgressBarVariant;
+    /** Track height size */
+    size?: ProgressBarSize;
+    /** Border radius (same as Button, Badge) */
+    radius?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+    /** Show animated loading fill (ignores value) */
+    indeterminate?: boolean;
+    /** Show numeric value (e.g. "75%") */
+    showValue?: boolean;
+    /** Optional label text or node */
+    label?: string | React.ReactNode;
+    /** Where label/value appear */
+    labelPosition?: ProgressBarLabelPosition;
+    /** Accessible label for progressbar role */
+    ariaLabel?: string;
+}
+/**
+ * ProgressBar component with Tailwind dark mode support and accessibility.
+ *
+ * Supports determinate (value/max) and indeterminate (animated loading) modes.
+ * Uses semantic class names: progress-bar, progress-bar-track, progress-bar-fill,
+ * progress-bar-label, progress-bar-value.
+ */
+declare const ProgressBar: React.ForwardRefExoticComponent<ProgressBarProps & React.RefAttributes<HTMLDivElement>>;
+
+type RangeSliderMode = 'single' | 'range';
+type RangeSliderSize = 'sm' | 'md' | 'lg';
+type RangeSliderColor = 'primary' | 'secondary' | 'tertiary' | 'blue' | 'green';
+type RangeSliderTooltipRadius = 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+interface RangeSliderBaseProps {
+    /** Single value (one thumb) or range (two thumbs) */
+    mode?: RangeSliderMode;
+    /** Minimum value */
+    min?: number;
+    /** Maximum value */
+    max?: number;
+    /** Step increment */
+    step?: number;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Track and thumb size */
+    size?: RangeSliderSize;
+    /** Color variant */
+    color?: RangeSliderColor;
+    /** Optional label above the slider */
+    label?: string | React.ReactNode;
+    /** Show current value(s) next to the slider */
+    showValue?: boolean;
+    /** Show tooltip on hover/drag */
+    showTooltip?: boolean;
+    /** Always show tooltip (not just on hover/drag) */
+    tooltipAlways?: boolean;
+    /** Format value for display (value label and fallback when tooltip is not set) */
+    formatValue?: (value: number) => string;
+    /**
+     * Tooltip content. Pass whatever text you want:
+     * - String with placeholder: tooltip="Custom text {value} more text" (replaces {value} with current value)
+     * - Static: tooltip="Volume" or tooltip={<span>Custom</span>}
+     * - Function: tooltip={(value) => `Level ${value}`}
+     */
+    tooltip?: React.ReactNode | ((value: number) => React.ReactNode);
+    /** Tooltip border radius variant */
+    tooltipRadius?: RangeSliderTooltipRadius;
+    /** Label at minimum end of track (e.g. "0") */
+    minLabel?: string | React.ReactNode;
+    /** Label at maximum end of track (e.g. "100") */
+    maxLabel?: string | React.ReactNode;
+    /** Show marks/ticks on the track */
+    marks?: boolean | {
+        value: number;
+        label?: string;
+    }[];
+    /** Root className */
+    className?: string;
+    /** aria-label for single thumb */
+    ariaLabel?: string;
+    /** aria-label for min thumb in range mode */
+    ariaLabelMin?: string;
+    /** aria-label for max thumb in range mode */
+    ariaLabelMax?: string;
+}
+interface RangeSliderSingleProps extends RangeSliderBaseProps {
+    mode?: 'single';
+    /** Current value (controlled) */
+    value?: number;
+    /** Called when value changes */
+    onChange?: (value: number) => void;
+    /** Called when user releases (mouseup/touchend) */
+    onChangeCommitted?: (value: number) => void;
+    valueMin?: never;
+    valueMax?: never;
+}
+interface RangeSliderRangeProps extends RangeSliderBaseProps {
+    mode: 'range';
+    /** Minimum value (controlled) */
+    valueMin?: number;
+    /** Maximum value (controlled) */
+    valueMax?: number;
+    /** Called when min or max changes (min, max) */
+    onChange?: (min: number, max: number) => void;
+    /** Called when user releases */
+    onChangeCommitted?: (min: number, max: number) => void;
+    value?: never;
+}
+type RangeSliderProps = RangeSliderSingleProps | RangeSliderRangeProps;
+/**
+ * Modern, smooth RangeSlider component with single or dual-thumb (range) mode.
+ * Material UI inspired design with fluid animations and reliable pointer-based interaction.
+ */
+declare const RangeSlider: React.ForwardRefExoticComponent<RangeSliderProps & React.RefAttributes<HTMLDivElement>>;
+
+type RatingSize = 'sm' | 'md' | 'lg';
+type RatingVariant = 'primary' | 'secondary' | 'yellow';
+interface RatingProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /** Current rating (0 to max) */
+    value?: number;
+    /** Maximum value (number of stars) */
+    max?: number;
+    /** Icon and gap size */
+    size?: RatingSize;
+    /** Filled star color variant */
+    variant?: RatingVariant;
+    /** Display-only (no click/hover to set) */
+    readOnly?: boolean;
+    /** Allow 0.5 steps (e.g. 3.5) */
+    halfStars?: boolean;
+    /** Show numeric label (e.g. "3.5" or "3.5 / 5") */
+    showValue?: boolean;
+    /** Called when user selects a rating. Pass this with readOnly={false} for interactive mode. */
+    onChange?: (value: number) => void;
+    /** Custom filled icon */
+    iconFilled?: React.ReactNode;
+    /** Custom empty icon */
+    iconEmpty?: React.ReactNode;
+    /** Optional label (e.g. "Quality") */
+    label?: string | React.ReactNode;
+    /** Accessible label for the rating */
+    ariaLabel?: string;
+}
+/**
+ * Rating component with Tailwind dark mode support and accessibility.
+ * Read-only display or interactive (click/hover to set). Supports half stars.
+ * Semantic class names: rating, rating-list, rating-item, rating-icon, rating-icon--filled,
+ * rating-icon--empty, rating-icon--half, rating-label, rating-value.
+ */
+declare const Rating: React.ForwardRefExoticComponent<RatingProps & React.RefAttributes<HTMLDivElement>>;
+
+type SkeletonVariant = 'text' | 'circular' | 'rectangular';
+type SkeletonSize = 'sm' | 'md' | 'lg';
+type SkeletonRadius = 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+type SkeletonAnimation = 'shimmer' | 'pulse' | 'none';
+interface SkeletonProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Shape variant */
+    variant?: SkeletonVariant;
+    /** Height for text/rect, diameter for circular */
+    size?: SkeletonSize;
+    /** Border radius (rectangular/text; circular uses full) */
+    radius?: SkeletonRadius;
+    /** Animation style */
+    animation?: SkeletonAnimation;
+    /** For variant text: number of lines (last line can be shorter) */
+    lines?: number;
+    /** Optional width (e.g. '100%', '4rem') */
+    width?: string | number;
+    /** Optional height override */
+    height?: string | number;
+    /** Accessible label for loading placeholder */
+    ariaLabel?: string;
+}
+interface SkeletonCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Size of the avatar circle */
+    avatarSize?: SkeletonSize;
+    /** Number of text lines in content */
+    lines?: number;
+    /** Show avatar circle */
+    showAvatar?: boolean;
+    /** Animation for all parts */
+    animation?: SkeletonAnimation;
+    /** Accessible label */
+    ariaLabel?: string;
+}
+/**
+ * Skeleton loading placeholder with Tailwind dark mode, shimmer/pulse animation,
+ * and reduced-motion support. Uses semantic class names: skeleton, skeleton--text,
+ * skeleton--circular, skeleton--rectangular, skeleton-line, skeleton-shimmer, skeleton-pulse.
+ */
+declare const Skeleton: React.ForwardRefExoticComponent<SkeletonProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Compound skeleton for card-style placeholders: avatar circle + text lines.
+ * Uses semantic classes: skeleton-card, skeleton-card__avatar, skeleton-card__content.
+ */
+declare const SkeletonCard: React.ForwardRefExoticComponent<SkeletonCardProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Stepper type definitions.
+ */
+
+/** Step state */
+type StepStatus = 'completed' | 'current' | 'upcoming' | 'error';
+/** Single step in the stepper */
+interface StepperStep {
+    /** Unique identifier */
+    id: string;
+    /** Step label (required) */
+    label: string;
+    /** Optional description below label */
+    description?: string;
+    /** Optional icon (React node); overrides default number/check */
+    icon?: React.ReactNode;
+    /** If set, step label renders as Link with this href */
+    href?: string;
+    /** Optional click handler (when no href) */
+    onClick?: () => void;
+    /** Disable this step (non-clickable, muted) */
+    disabled?: boolean;
+    /** Optional: true marks step as error state */
+    error?: boolean;
+    /** Optional: mark step explicitly as completed (overrides activeStepIndex logic) */
+    completed?: boolean;
+    /** When true, only the indicator (icon/circle) is shown; no label or description (e.g. for last step with icon) */
+    iconOnly?: boolean;
+}
+/** Visual style variant */
+type StepperVariant = 'default' | 'alternateLabel' | 'labelsAbove' | 'line' | 'lineDots' | 'vertical' | 'dots' | 'progress';
+/** Step indicator and spacing size */
+type StepperSize = 'sm' | 'md' | 'lg';
+/** Layout direction (legacy, use variant instead for more control) */
+type StepperOrientation = 'horizontal' | 'vertical';
+/** Color scheme for the stepper */
+type StepperColor = 'primary' | 'secondary' | 'success';
+/** Props for the Stepper root */
+interface StepperProps {
+    /** Array of steps */
+    steps: StepperStep[];
+    /** Index of the current (active) step (0-based). Default 0 */
+    activeStepIndex?: number;
+    /** Visual variant */
+    variant?: StepperVariant;
+    /** Size of indicator and spacing */
+    size?: StepperSize;
+    /** Color scheme */
+    color?: StepperColor;
+    /** Show connector lines between steps (default true) */
+    showConnector?: boolean;
+    /** Connector line style (default solid). Use 'dashed' to match Figma wireframe style. */
+    connectorStyle?: 'solid' | 'dashed';
+    /** Make connectors animate/transition when step changes */
+    animatedConnector?: boolean;
+    /** Called when a step is clicked (index, step). Use with clickable steps. */
+    onStepClick?: (index: number, step: StepperStep) => void;
+    /** Allow clicking on completed steps to go back */
+    nonLinear?: boolean;
+    /** Custom component for step links (e.g. Next.js Link). Used when step has href. */
+    linkComponent?: React.ElementType;
+    /** Root container class name */
+    className?: string;
+    /** Accessible label for the stepper (e.g. "Progress" or "Checkout steps") */
+    ariaLabel?: string;
+}
+
+/**
+ * Modern Stepper component with multiple variants and smooth animations.
+ */
+declare const Stepper: React.FC<StepperProps>;
+
+/**
+ * Tabs type definitions.
+ *
+ * Shared types for Tabs, TabsList, Tab, and TabPanel (declarative and compound API).
+ */
+
+/** Visual style variant for the tab list */
+type TabVariant = 'underline' | 'pills' | 'fullWidth';
+/** Layout direction */
+type TabsOrientation = 'horizontal' | 'vertical';
+/** Size of tabs (aligns with Button/Stepper) */
+type TabsSize = 'sm' | 'md' | 'lg';
+/** Item shape for declarative API (items array) */
+interface TabItem {
+    /** Unique identifier (used as value) */
+    id: string;
+    /** Display label */
+    label: string;
+    /** Panel content (for items-based rendering) */
+    content: React.ReactNode;
+    /** Optional icon (React node, e.g. react-icons) */
+    icon?: React.ReactNode;
+    /** Disabled state */
+    disabled?: boolean;
+    /** When set, tab renders as link using linkComponent */
+    href?: string;
+    /** Optional badge (count or React node) */
+    badge?: React.ReactNode;
+}
+/** Props for the Tabs root */
+interface TabsProps {
+    /** Active tab value (controlled) */
+    value?: string | number;
+    /** Initial value when uncontrolled */
+    defaultValue?: string | number;
+    /** Called when active tab changes */
+    onChange?: (value: string | number) => void;
+    /** Declarative list of tabs (when provided, list + panels rendered internally) */
+    items?: TabItem[];
+    /** Visual variant: underline, pills, or fullWidth */
+    variant?: TabVariant;
+    /** horizontal or vertical */
+    orientation?: TabsOrientation;
+    /** Size: sm, md, lg */
+    size?: TabsSize;
+    /** Animate the underline/pill indicator (default true) */
+    indicatorAnimation?: boolean;
+    /** Animate panel change (default true) */
+    panelAnimation?: boolean;
+    /** Custom component for link tabs (e.g. Next.js Link) when item.href is set */
+    linkComponent?: React.ElementType;
+    /** Root container class name */
+    className?: string;
+    /** Accessible label for tablist (e.g. "Section tabs") */
+    ariaLabel?: string;
+    /** Compound API: TabsList + Tab + TabPanel */
+    children?: React.ReactNode;
+}
+/** Props for TabsList (compound API) */
+interface TabsListProps {
+    /** Tab buttons (Tab components) */
+    children?: React.ReactNode;
+    /** Custom class name */
+    className?: string;
+    /** Accessible label for the tab list */
+    'aria-label'?: string;
+}
+/** Props for a single Tab (compound API) */
+interface TabProps {
+    /** Value that identifies this tab (matches TabPanel value) */
+    value: string | number;
+    /** Optional icon (left) */
+    icon?: React.ReactNode;
+    /** Disabled state */
+    disabled?: boolean;
+    /** When set, renders as link using context linkComponent */
+    href?: string;
+    /** Optional badge (count or node) */
+    badge?: React.ReactNode;
+    /** Custom class name */
+    className?: string;
+    /** Tab label content */
+    children?: React.ReactNode;
+}
+/** Props for TabPanel (compound API) */
+interface TabPanelProps {
+    /** Value that identifies this panel (matches Tab value) */
+    value: string | number;
+    /** Panel content */
+    children?: React.ReactNode;
+    /** Custom class name */
+    className?: string;
+    /** When true, force mount and hide with CSS (for animations). Default: unmount when inactive. */
+    keepMounted?: boolean;
+}
+
+interface TabsContextValue {
+    value: string | number;
+    setValue: (v: string | number) => void;
+    variant: TabVariant;
+    orientation: TabsOrientation;
+    size: TabsSize;
+    scrollable: boolean;
+    linkComponent: React.ElementType | undefined;
+    indicatorAnimation: boolean;
+    panelAnimation: boolean;
+    tabIdPrefix: string;
+    panelIdPrefix: string;
+    listRef: React.RefObject<HTMLDivElement | null>;
+    registerTabRef: (value: string | number, el: HTMLButtonElement | HTMLAnchorElement | null) => void;
+    unregisterTabRef: (value: string | number) => void;
+    indicatorStyle: {
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+    } | null;
+}
+declare function useTabsContext(): TabsContextValue;
+declare const Tabs: React.FC<TabsProps>;
+
+declare const TabsList: React.FC<TabsListProps>;
+
+declare const Tab: React.FC<TabProps>;
+
+declare const TabPanel: React.FC<TabPanelProps>;
+
+/**
+ * Toast type definitions.
+ * Shared types for ToastProvider, ToastContainer, ToastItem, and useToast.
+ */
+
+/** Placement of the toast container on the viewport */
+type ToastPosition = 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right';
+/** Semantic variant (drives default icon and colors) */
+type ToastVariant = 'success' | 'warning' | 'error' | 'default';
+/** Layout type: simple (icon + message + close) or rich (avatar + title + message + action) */
+type ToastType = 'simple' | 'rich';
+/** User info for rich toast (avatar + name) */
+interface ToastUser {
+    /** Avatar image URL or undefined for placeholder */
+    avatar?: string;
+    /** Display name */
+    name: string;
+}
+/** Options when adding a toast (omit id; provider assigns it) */
+interface ToastOptions {
+    variant?: ToastVariant;
+    type?: ToastType;
+    /** Optional title (rich type) or used as accessible label */
+    title?: string;
+    message: string;
+    /** Override default variant icon */
+    icon?: React.ReactNode;
+    /** For rich type: user row (avatar + name) */
+    user?: ToastUser;
+    /** For rich type: action button label */
+    actionLabel?: string;
+    /** For rich type: action button icon */
+    actionIcon?: React.ReactNode;
+    /** For rich type: action button click handler */
+    onAction?: () => void;
+    /** Auto-dismiss after this many ms; false to disable */
+    autoClose?: number | false;
+    /** Show close button; default true */
+    dismissible?: boolean;
+    /** Called when toast is closed (dismiss or autoClose) */
+    onClose?: () => void;
+}
+/** Internal toast item (has id and is stored in provider state) */
+interface ToastItemData extends ToastOptions {
+    id: string;
+}
+/** Props for ToastProvider */
+interface ToastProviderProps {
+    /** Where to place the toast container */
+    position?: ToastPosition;
+    /** Maximum number of toasts visible at once (newest shown) */
+    maxToasts?: number;
+    /** Gap between stacked toasts (e.g. 8 = 8px or gap-2) */
+    stackOffset?: number;
+    /** Custom className for the container wrapper */
+    className?: string;
+    children?: React.ReactNode;
+}
+/** Props for ToastItem (presentational; may include animation state) */
+interface ToastItemProps extends ToastItemData {
+    /** Custom className for the toast root */
+    className?: string;
+    /** Optional style for animation */
+    style?: React.CSSProperties;
+    /** Whether the toast is currently playing exit animation */
+    exiting?: boolean;
+    /** Position (for direction-aware animation class) */
+    position?: ToastPosition;
+    /** Called when close/dismiss is clicked */
+    onDismiss?: () => void;
+}
+
+/**
+ * Provider for toast notifications. Wrap your app (or a subtree) to enable useToast().
+ * Renders a fixed ToastContainer at the configured position; toasts stack with offset.
+ */
+declare const ToastProvider: React.FC<ToastProviderProps>;
+
+/**
+ * Presentational toast item. Renders simple (icon + message + close) or rich (avatar + title + message + action + close) layout.
+ * Uses distinctive class names: toast-root, toast-icon-wrapper, toast-message, toast-close, toast-avatar, toast-title, toast-action.
+ */
+declare const ToastItem: React.FC<ToastItemProps>;
+
+/**
+ * Hook to show and dismiss toasts. Must be used within ToastProvider.
+ * Returns toast() for generic options and success/error/warning/info shortcuts.
+ */
+declare function useToast(): {
+    toast: (options: ToastOptions) => string;
+    success: (message: string, opts?: Omit<ToastOptions, "message" | "variant">) => string;
+    error: (message: string, opts?: Omit<ToastOptions, "message" | "variant">) => string;
+    warning: (message: string, opts?: Omit<ToastOptions, "message" | "variant">) => string;
+    info: (message: string, opts?: Omit<ToastOptions, "message" | "variant">) => string;
+    dismiss: (id: string) => void;
+};
+
+/**
+ * Tooltip Type Definitions
+ *
+ * Shared types for the compound Tooltip component (root, trigger, content).
+ */
+
+/** Preferred placement; viewport may override to flip when near edge */
+type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
+/** Border radius variant (aligns with Alert/Button) */
+type TooltipRadius = 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+/** Preset color variant for bubble and arrow; use contentClassName for full custom colors */
+type TooltipVariant = 'default' | 'light' | 'dark' | 'primary';
+/** Props for Tooltip root */
+interface TooltipProps {
+    /** Preferred position (viewport can override when near edge) */
+    position?: TooltipPlacement;
+    /** Controlled open state */
+    open?: boolean;
+    /** Called when open state changes */
+    onOpenChange?: (open: boolean) => void;
+    /** Delay in ms before showing (hover/focus) */
+    delayShow?: number;
+    /** Delay in ms before hiding */
+    delayHide?: number;
+    /** When true, tooltip never opens */
+    disabled?: boolean;
+    /** Gap between trigger and tooltip bubble (px). Overridable per TooltipContent. */
+    sideOffset?: number;
+    /** Arrow alignment offset (px). Overridable per TooltipContent. */
+    alignOffset?: number;
+    /** Root wrapper className */
+    className?: string;
+    /** Must contain TooltipTrigger and TooltipContent */
+    children?: React.ReactNode;
+}
+/** Props for TooltipTrigger */
+interface TooltipTriggerProps {
+    /** If true, merge props into single child (e.g. Button); else wrap in span */
+    asChild?: boolean;
+    /** Trigger wrapper or child className */
+    className?: string;
+    /** Anchor element(s) */
+    children?: React.ReactNode;
+}
+/** Props for TooltipContent */
+interface TooltipContentProps {
+    /** Tooltip body (text or custom ReactNode) */
+    children?: React.ReactNode;
+    /** Preset color: default (grey), light, dark, primary. Override with contentClassName for custom colors. */
+    variant?: TooltipVariant;
+    /** Border radius of the bubble */
+    radius?: TooltipRadius;
+    /** Wrapper className (portal root, fixed positioned) */
+    className?: string;
+    /** Inner bubble className; use to set custom background/text (e.g. bg-blue-600 text-white). Pair with arrowColor so the arrow matches in all placements. */
+    contentClassName?: string;
+    /** Arrow color (CSS value) when using custom contentClassName; ensures the arrow matches when tooltip flips position. E.g. "#2563eb" or "rgb(37,99,235)". */
+    arrowColor?: string;
+    /** Arrow className (legacy); only use if you don't need viewport flip. Prefer arrowColor for custom colors. */
+    arrowClassName?: string;
+    /** Show arrow pointing to trigger (default true) */
+    showArrow?: boolean;
+    /** Gap between trigger and bubble (px) */
+    sideOffset?: number;
+    /** Arrow alignment offset (px) for fine-tuning */
+    alignOffset?: number;
+}
+/** Context value provided by Tooltip root */
+interface TooltipContextValue {
+    open: boolean;
+    /** True while playing close animation before unmount */
+    closing: boolean;
+    setOpen: (open: boolean) => void;
+    triggerId: string;
+    contentId: string;
+    triggerRef: React.RefObject<HTMLElement | null>;
+    contentRef: React.RefObject<HTMLDivElement | null>;
+    /** Effective placement after viewport check (may differ from preferred) */
+    placement: TooltipPlacement;
+    /** Set effective placement (called by TooltipContent after measure) */
+    setPlacement: (placement: TooltipPlacement) => void;
+    /** Preferred position prop */
+    position: TooltipPlacement;
+    disabled: boolean;
+    delayShow: number;
+    delayHide: number;
+    /** Default gap (px) from root; TooltipContent can override with its own sideOffset. */
+    sideOffset: number;
+    /** Default arrow offset (px) from root; TooltipContent can override. */
+    alignOffset: number;
+}
+
+declare function useTooltipContext(): TooltipContextValue;
+declare const Tooltip: React.FC<TooltipProps>;
+
+declare const TooltipTrigger: React.ForwardRefExoticComponent<TooltipTriggerProps & React.RefAttributes<HTMLElement>>;
+
+declare const TooltipContent: React.FC<TooltipContentProps>;
+
+export { Accordion, type AccordionItem, type AccordionProps, Alert, AlertCircleIcon, type AlertProps, ArrowRightIcon, Avatar, AvatarGroup, type AvatarGroupProps, AvatarLabel, type AvatarLabelProps, type AvatarProps, Badge, type BadgeProps, BookOpenIcon, BookmarkIcon, Breadcrumb, type BreadcrumbDropdownItem, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonProps, CalendarIcon, Card, type CardProps, Carousel, type CarouselProps, CartIcon, CheckCircleIcon, CheckIcon, Checkbox, type CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ClockIcon, CloseIcon, CreditCardIcon, type CurrencyOption, type DOBPickerProps, DatePicker, type DatePickerMode, type DatePickerProps, type DatePickerValue, type DateRange, Dropdown, type DropdownContextValue, DropdownItem, type DropdownItemData, type DropdownItemProps, type DropdownItemUser, type DropdownItemVariant, DropdownMenu, type DropdownMenuProps, type DropdownProps, DropdownTrigger, type DropdownTriggerProps, type DropdownTriggerVariant, FireIcon, HomeIcon, InfoCircleIcon, Input, type InputProps, LayersIcon, Link, type LinkProps, MessageComposer, type MessageComposerProps, MinusIcon, type MonthPickerProps, NumberInput, type NumberInputProps, type OTPCellStatus, OTPInput, type OTPInputProps, Pagination, type PaginationProps, type PaginationVariant, PlusIcon, ProfileCardIcon, ProgressBar, type ProgressBarLabelPosition, type ProgressBarProps, type ProgressBarSize, type ProgressBarVariant, RadioButton, type RadioButtonProps, type RangeDatePickerProps, RangeSlider, type RangeSliderColor, type RangeSliderMode, type RangeSliderProps, type RangeSliderRangeProps, type RangeSliderSingleProps, type RangeSliderSize, type RangeSliderTooltipRadius, Rating, type RatingProps, type RatingSize, type RatingVariant, SearchIcon, SettingsIcon, type SingleDatePickerProps, Skeleton, type SkeletonAnimation, SkeletonCard, type SkeletonCardProps, type SkeletonProps, type SkeletonRadius, type SkeletonSize, type SkeletonVariant, StarIcon, type StepStatus, Stepper, type StepperColor, type StepperOrientation, type StepperProps, type StepperSize, type StepperStep, type StepperVariant, Tab, type TabItem, TabPanel, type TabPanelProps, type TabProps, type TabVariant, Tabs, type TabsContextValue, TabsList, type TabsListProps, type TabsOrientation, type TabsProps, type TabsSize, Textarea, type TextareaProps, ToastItem, type ToastItemData, type ToastPosition, ToastProvider, type ToastProviderProps, type ToastType, type ToastVariant, Toggle, type ToggleProps, Tooltip, TooltipContent, type TooltipContentProps, type TooltipContextValue, type TooltipPlacement, type TooltipProps, type TooltipRadius, TooltipTrigger, type TooltipTriggerProps, type TooltipVariant, TruckIcon, type YearPickerProps, cn, useTabsContext, useToast, useTooltipContext };