my-animated-components/dist/index.d.ts

A comprehensive React component library with built-in Framer Motion animations, Tailwind CSS styling, and full TypeScript support.

import React$1, { ReactNode } from 'react';
import { Variants, HTMLMotionProps, Transition, MotionProps } from 'framer-motion';

declare const motionVariants: Record<string, Variants>;

interface BaseProps {
    className?: string;
}
interface WithChildren {
    children?: React.ReactNode;
}
type Color$h = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
type Size$3 = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
type Radius = 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
type Variant = 'solid' | 'outline' | 'ghost' | 'glass' | 'gradient' | 'flat' | 'elevated';
interface ColorProps {
    color?: Color$h;
}
interface SizeProps {
    size?: Size$3;
}
interface RadiusProps {
    radius?: Radius;
}
interface VariantProps {
    variant?: Variant;
}

type Color$g = 'primary' | 'secondary' | 'danger' | 'success' | 'info' | 'warning' | string;
type AccordionVariant = 'solid' | 'outline' | 'ghost' | 'glass' | 'elevated' | string;
interface AccordionItem {
    title: string;
    content: React$1.ReactNode;
    disabled?: boolean;
}
interface AccordionProps extends BaseProps, RadiusProps {
    items: AccordionItem[];
    color?: Color$g;
    variant?: AccordionVariant;
    motionVariant?: keyof typeof motionVariants;
    allowMultipleOpen?: boolean;
    defaultOpenIndex?: number[];
    customIcon?: React$1.ReactNode;
    iconPosition?: 'left' | 'right';
    wrapperClassName?: string;
    headerClassName?: string;
    contentClassName?: string;
}
declare const Accordion: React$1.FC<AccordionProps>;

type Color$f = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | string;
type AlertVariant = 'flat' | 'solid' | 'glass' | string;
interface AlertProps extends BaseProps, RadiusProps, Omit<HTMLMotionProps<"div">, "children"> {
    children?: React$1.ReactNode;
    onClose?: () => void;
    motionVariant?: keyof typeof motionVariants;
    color?: Color$f;
    variant?: AlertVariant;
}
declare const Alert: React$1.FC<AlertProps>;

interface AvatarProps extends BaseProps, SizeProps, RadiusProps, Omit<HTMLMotionProps<'div'>, 'children'> {
    src?: string;
    alt?: string;
    initials?: string;
    fallbackIcon?: React$1.ReactNode;
}
declare const Avatar: React$1.FC<AvatarProps>;

type Color$e = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | string;
type Size$2 = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full' | string;
interface BadgeProps extends BaseProps, RadiusProps, VariantProps, Omit<HTMLMotionProps<"span">, "children"> {
    children?: React$1.ReactNode;
    motionVariant?: keyof typeof motionVariants;
    color?: Color$e;
    size?: Size$2;
}
declare const Badge: React$1.FC<BadgeProps>;

type Color$d = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | string;
interface BreadcrumbProps extends BaseProps, Omit<HTMLMotionProps<"nav">, "children"> {
    items: {
        label: string;
        href: string;
    }[];
    motionVariant?: keyof typeof motionVariants;
    color?: Color$d;
}
declare const Breadcrumb: React$1.FC<BreadcrumbProps>;

type Color$c = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | string;
type ButtonVariant = 'solid' | 'outline' | 'ghost' | 'glass' | 'gradient' | string;
type Size$1 = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full' | string;
type MotionVariantKey$5 = keyof typeof motionVariants;
interface ButtonProps extends BaseProps, SizeProps, RadiusProps, Omit<HTMLMotionProps<'button'>, 'children'> {
    /**
     * Button content
     */
    children?: React$1.ReactNode;
    /**
     * Visual style of the button
     * @default 'solid'
     */
    variant?: ButtonVariant;
    /**
     * Border radius
     * @default 'xl'
     */
    radius?: Radius;
    /**
     * Color theme of the button
     * @default 'primary'
     */
    color?: Color$c;
    /**
     * Predefined motion variant from motionVariants for initial animation
     * @default 'fadeIn'
     */
    motionVariant?: MotionVariantKey$5;
    /**
     * Custom animation variants to override default motionVariants
     */
    customVariants?: Variants;
    /**
     * Predefined motion variant for hover animation
     */
    whileHoverAnimation?: MotionVariantKey$5;
    /**
     * Predefined motion variant for tap animation
     */
    whileTapAnimation?: MotionVariantKey$5;
    /**
     * Predefined motion variant for focus animation
     */
    whileFocusAnimation?: MotionVariantKey$5;
    /**
     * Custom transition for initial animation
     */
    customTransition?: Transition;
    /**
     * Custom hover animation properties
     */
    customHoverAnimation?: Record<string, any>;
    /**
     * Custom tap animation properties
     */
    customTapAnimation?: Record<string, any>;
    /**
     * Custom focus animation properties
     */
    customFocusAnimation?: Record<string, any>;
    /**
     * Custom class names for different button states
     */
    stateClasses?: {
        hover?: string;
        focus?: string;
        active?: string;
        disabled?: string;
    };
    /**
     * Custom class names for different variants and colors
     */
    customClasses?: {
        [variant in ButtonVariant]?: {
            [color in Color$c]?: string;
        };
    };
    /**
     * Custom size class mapping
     */
    customSizeClasses?: Record<Size$1, string>;
    /**
     * Whether to use animation on initial render
     * @default true
     */
    useAnimation?: boolean;
    /**
     * Custom base classes to override defaults
     */
    baseClassName?: string;
    /**
     * Option to bypass default styling completely
     * @default false
     */
    unstyled?: boolean;
    /**
     * Button type attribute
     * @default 'button'
     */
    type?: 'button' | 'submit' | 'reset';
    /**
     * Show loading spinner and disable the button
     * @default false
     */
    loading?: boolean;
    /**
     * Icon to display before the button text
     */
    leftIcon?: React$1.ReactNode;
    /**
     * Icon to display after the button text
     */
    rightIcon?: React$1.ReactNode;
    /**
     * Make the button full width
     * @default false
     */
    fullWidth?: boolean;
}
declare const Button: React$1.FC<ButtonProps>;

type Color$b = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | string;
type IconButtonVariant = 'solid' | 'outline' | 'ghost' | 'glass' | 'gradient' | string;
type MotionVariantKey$4 = keyof typeof motionVariants;
interface IconButtonProps extends BaseProps, SizeProps, RadiusProps, Omit<HTMLMotionProps<'button'>, 'children'> {
    icon: React$1.ReactNode;
    variant?: IconButtonVariant;
    color?: Color$b;
    motionVariant?: MotionVariantKey$4;
    whileHoverAnimation?: MotionVariantKey$4;
    whileTapAnimation?: MotionVariantKey$4;
    whileFocusAnimation?: MotionVariantKey$4;
}
declare const IconButton: React$1.FC<IconButtonProps>;

interface CardProps extends BaseProps, RadiusProps, VariantProps, Omit<HTMLMotionProps<"div">, "children"> {
    children?: React$1.ReactNode;
    motionVariant?: keyof typeof motionVariants;
    hoverable?: boolean;
}
declare const Card: React$1.FC<CardProps>;

interface CardBodyProps extends BaseProps, Omit<HTMLMotionProps<"div">, "children"> {
    children?: React$1.ReactNode;
    motionVariant?: keyof typeof motionVariants;
}
declare const CardBody: React$1.FC<CardBodyProps>;

interface CardFooterProps extends BaseProps, Omit<HTMLMotionProps<"div">, "children"> {
    children?: React$1.ReactNode;
    motionVariant?: keyof typeof motionVariants;
}
declare const CardFooter: React$1.FC<CardFooterProps>;

interface CardHeaderProps extends BaseProps, Omit<HTMLMotionProps<"div">, "children"> {
    children?: React$1.ReactNode;
    motionVariant?: keyof typeof motionVariants;
}
declare const CardHeader: React$1.FC<CardHeaderProps>;

interface DropdownProps extends BaseProps, RadiusProps {
    /** The element that triggers the dropdown */
    trigger: React$1.ReactNode;
    /** Dropdown content */
    children?: React$1.ReactNode;
    /** Predefined motion variant name */
    motionVariant?: keyof typeof motionVariants;
    /** Callback when dropdown opens */
    onOpen?: () => void;
    /** Callback when dropdown closes */
    onClose?: () => void;
    /** Whether the dropdown is disabled */
    disabled?: boolean;
}
declare const Dropdown: React$1.FC<DropdownProps>;

interface DropdownItemProps extends BaseProps, WithChildren {
    /** Click handler */
    onClick?: (e: React$1.MouseEvent) => void;
    /** Link destination */
    href?: string;
    /** Whether the item is disabled */
    disabled?: boolean;
    /** Render as a different element */
    as?: 'a' | 'button' | 'div';
}
declare const DropdownItem: React$1.FC<DropdownItemProps>;

type CheckboxColor = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
interface CheckboxProps extends BaseProps {
    /** Label text */
    label: string;
    /** Whether the checkbox is checked */
    checked?: boolean;
    /** Default checked state for uncontrolled usage */
    defaultChecked?: boolean;
    /** Change handler */
    onChange?: (e: React$1.ChangeEvent<HTMLInputElement>) => void;
    /** Color theme */
    color?: CheckboxColor;
    /** Predefined motion variant */
    motionVariant?: keyof typeof motionVariants;
    /** Whether the checkbox is disabled */
    disabled?: boolean;
    /** Checkbox id */
    id?: string;
    /** Checkbox name */
    name?: string;
    /** Error state */
    error?: boolean | string;
    /** Helper text */
    helperText?: string;
    /** Whether to animate on mount */
    useAnimation?: boolean;
}
declare const Checkbox: React$1.ForwardRefExoticComponent<CheckboxProps & React$1.RefAttributes<HTMLInputElement>>;

type ButtonColor = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
interface FileUploadProps extends BaseProps {
    /** File change handler */
    onChange: (file: File | null) => void;
    /** Multiple files change handler */
    onMultipleChange?: (files: FileList | null) => void;
    /** Accepted file types */
    accept?: string;
    /** Allow multiple files */
    multiple?: boolean;
    /** Button color theme */
    buttonColor?: ButtonColor;
    /** Predefined motion variant */
    motionVariant?: keyof typeof motionVariants;
    /** Custom button text */
    buttonText?: string;
    /** Whether the upload is disabled */
    disabled?: boolean;
    /** Whether to animate on mount */
    useAnimation?: boolean;
    /** Max file size in bytes */
    maxSize?: number;
    /** Error callback when file exceeds max size */
    onError?: (error: string) => void;
}
declare const FileUpload: React$1.FC<FileUploadProps>;

type InputColor = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
type TextColor = 'black' | 'gray' | 'white' | 'blue' | 'green' | 'red';
interface InputProps extends BaseProps, SizeProps, RadiusProps {
    /** Input type */
    type?: 'text' | 'password' | 'email' | 'number' | 'tel' | 'url' | 'search';
    /** Placeholder text */
    placeholder?: string;
    /** Current value */
    value?: string;
    /** Default value for uncontrolled usage */
    defaultValue?: string;
    /** Change handler */
    onChange?: (e: React$1.ChangeEvent<HTMLInputElement>) => void;
    /** Color theme */
    color?: InputColor;
    /** Text color */
    textColor?: TextColor;
    /** Predefined motion variant */
    motionVariant?: keyof typeof motionVariants;
    /** Label text */
    label?: string;
    /** Error state - shows red border and error text */
    error?: boolean | string;
    /** Helper text below the input */
    helperText?: string;
    /** Whether the input is disabled */
    disabled?: boolean;
    /** Whether the input is required */
    required?: boolean;
    /** Whether the input is read-only */
    readOnly?: boolean;
    /** Input id */
    id?: string;
    /** Input name */
    name?: string;
    /** Whether to animate on mount */
    useAnimation?: boolean;
}
declare const Input: React$1.ForwardRefExoticComponent<InputProps & React$1.RefAttributes<HTMLInputElement>>;

type Color$a = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
interface RadioProps extends BaseProps, SizeProps {
    /** Label text */
    label: string;
    /** Radio group name */
    name: string;
    /** Radio value */
    value: string;
    /** Whether the radio is checked */
    checked?: boolean;
    /** Default checked state for uncontrolled usage */
    defaultChecked?: boolean;
    /** Change handler */
    onChange?: (e: React$1.ChangeEvent<HTMLInputElement>) => void;
    /** Color theme */
    color?: Color$a;
    /** Predefined motion variant */
    motionVariant?: keyof typeof motionVariants;
    /** Whether the radio is disabled */
    disabled?: boolean;
    /** Radio id */
    id?: string;
    /** Error state */
    error?: boolean | string;
    /** Helper text */
    helperText?: string;
    /** Whether to animate on mount */
    useAnimation?: boolean;
}
declare const Radio: React$1.ForwardRefExoticComponent<RadioProps & React$1.RefAttributes<HTMLInputElement>>;

type Color$9 = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
interface SelectOption {
    value: string;
    label: string;
    disabled?: boolean;
}
interface SelectProps extends BaseProps, SizeProps, RadiusProps {
    /** Options to display */
    options: SelectOption[];
    /** Current value */
    value?: string;
    /** Default value for uncontrolled usage */
    defaultValue?: string;
    /** Change handler */
    onChange?: (e: React$1.ChangeEvent<HTMLSelectElement>) => void;
    /** Color theme */
    color?: Color$9;
    /** Predefined motion variant */
    motionVariant?: keyof typeof motionVariants;
    /** Label text */
    label?: string;
    /** Placeholder option text */
    placeholder?: string;
    /** Error state */
    error?: boolean | string;
    /** Helper text below the select */
    helperText?: string;
    /** Whether the select is disabled */
    disabled?: boolean;
    /** Whether the select is required */
    required?: boolean;
    /** Select id */
    id?: string;
    /** Select name */
    name?: string;
    /** Whether to animate on mount */
    useAnimation?: boolean;
}
declare const Select: React$1.ForwardRefExoticComponent<SelectProps & React$1.RefAttributes<HTMLSelectElement>>;

type Color$8 = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
interface TextareaProps extends BaseProps, SizeProps, RadiusProps {
    /** Placeholder text */
    placeholder?: string;
    /** Current value */
    value?: string;
    /** Default value for uncontrolled usage */
    defaultValue?: string;
    /** Change handler */
    onChange?: (e: React$1.ChangeEvent<HTMLTextAreaElement>) => void;
    /** Number of rows */
    rows?: number;
    /** Color theme */
    color?: Color$8;
    /** Predefined motion variant */
    motionVariant?: keyof typeof motionVariants;
    /** Label text */
    label?: string;
    /** Error state */
    error?: boolean | string;
    /** Helper text below the textarea */
    helperText?: string;
    /** Whether the textarea is disabled */
    disabled?: boolean;
    /** Whether the textarea is required */
    required?: boolean;
    /** Whether the textarea is read-only */
    readOnly?: boolean;
    /** Textarea id */
    id?: string;
    /** Textarea name */
    name?: string;
    /** Whether to animate on mount */
    useAnimation?: boolean;
    /** Allow resize */
    resize?: 'none' | 'vertical' | 'horizontal' | 'both';
    /** Max length */
    maxLength?: number;
    /** Show character count */
    showCharCount?: boolean;
}
declare const Textarea: React$1.ForwardRefExoticComponent<TextareaProps & React$1.RefAttributes<HTMLTextAreaElement>>;

type NavigationStyle = 'arrows' | 'dots' | 'thumbnails' | 'both' | 'arrows-dots' | 'none';
type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full' | string;
type Direction = 'horizontal' | 'vertical';
type MotionVariantKey$3 = keyof typeof motionVariants;
interface CarouselImage {
    src: string;
    alt: string;
    title?: string;
    description?: string;
    thumbnail?: string;
}
interface CustomIcons {
    prevIcon?: React$1.ReactNode;
    nextIcon?: React$1.ReactNode;
    playIcon?: React$1.ReactNode;
    pauseIcon?: React$1.ReactNode;
}
interface CarouselProps extends BaseProps {
    images: CarouselImage[];
    motionVariant?: MotionVariantKey$3;
    navigationStyle?: NavigationStyle;
    size?: Size;
    autoPlay?: number;
    autoPlayDirection?: 'forward' | 'backward';
    showPlayPause?: boolean;
    loop?: boolean;
    enableSwipe?: boolean;
    swipeThreshold?: number;
    direction?: Direction;
    customVariants?: Variants;
    transitionDuration?: number;
    customTransition?: Transition;
    customClasses?: {
        container?: string;
        imageWrapper?: string;
        image?: string;
        navigation?: string;
        arrows?: string;
        dots?: string;
        thumbnails?: string;
        overlay?: string;
        playPause?: string;
    };
    customSizeClasses?: Record<Size, string>;
    aspectRatio?: string;
    showOverlay?: boolean;
    overlayPosition?: 'bottom' | 'top' | 'center';
    onSlideChange?: (index: number) => void;
    initialSlide?: number;
    baseClassName?: string;
    unstyled?: boolean;
    customIcons?: CustomIcons;
    thumbnailSize?: 'sm' | 'md' | 'lg';
    arrowPosition?: 'inside' | 'outside';
    dotStyle?: 'line' | 'circle' | 'square';
    pauseOnHover?: boolean;
    keyboard?: boolean;
    slidesPerView?: number;
    spaceBetween?: number;
    centeredSlides?: boolean;
}
declare const Carousel: React$1.FC<CarouselProps>;

type ImageEditorProps$1 = {
    imageFile: File;
    onSave: (file: File) => void;
    onCancel: () => void;
    className?: string;
};
declare const ImageEditor: ({ imageFile, onSave, onCancel, className }: ImageEditorProps$1) => React$1.ReactPortal;

interface ImageEditorProps {
    imageFile: File;
    onSave: (file: File) => void;
    onCancel: () => void;
    className?: string;
}
declare const Imageeditor: React$1.FC<ImageEditorProps>;

interface ContainerProps extends BaseProps, Omit<HTMLMotionProps<"div">, "children"> {
    children?: React$1.ReactNode;
    fluid?: boolean;
    motionVariant?: keyof typeof motionVariants;
    duration?: number;
    loop?: boolean;
}
declare const Container: React$1.FC<ContainerProps>;

interface FlexProps extends BaseProps, Omit<HTMLMotionProps<"div">, "children" | "direction"> {
    children?: React$1.ReactNode;
    direction?: 'row' | 'col';
    justify?: 'start' | 'center' | 'end' | 'between' | 'around';
    align?: 'start' | 'center' | 'end' | 'stretch';
    wrap?: boolean;
    motionVariant?: keyof typeof motionVariants;
    duration?: number;
    loop?: boolean;
}
declare const Flex: React$1.FC<FlexProps>;

interface GridProps extends BaseProps, Omit<HTMLMotionProps<"div">, "children"> {
    children?: React$1.ReactNode;
    cols?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
    gap?: number | string;
    motionVariant?: keyof typeof motionVariants;
    duration?: number;
    loop?: boolean;
}
declare const Grid: React$1.FC<GridProps>;

type ListVariant = 'flat' | 'elevated' | 'glass' | 'ghost' | string;
interface ListProps extends BaseProps, RadiusProps, Omit<HTMLMotionProps<"ul">, "children" | "variant"> {
    children?: React$1.ReactNode;
    as?: 'ul' | 'ol';
    motionVariant?: keyof typeof motionVariants;
    variant?: ListVariant;
}
declare const List: React$1.FC<ListProps>;

type MotionVariantKey$2 = keyof typeof motionVariants;
interface ListItemProps extends BaseProps, Omit<HTMLMotionProps<"li">, "children"> {
    children?: React$1.ReactNode;
    motionVariant?: MotionVariantKey$2;
}
declare const ListItem: React$1.FC<ListItemProps>;

interface ModalProps extends BaseProps, RadiusProps, Omit<HTMLMotionProps<"div">, "children"> {
    /** Controls visibility of the modal */
    isOpen: boolean;
    /** Callback when modal should close */
    onClose: () => void;
    /** Modal content */
    children?: React$1.ReactNode;
    /** Predefined motion variant name */
    motionVariant?: keyof typeof motionVariants;
    /** Animation duration in seconds */
    duration?: number;
    /** Loop the animation */
    loop?: boolean;
    /** Close modal on Escape key */
    closeOnEscape?: boolean;
    /** Close modal on overlay click */
    closeOnOverlayClick?: boolean;
}
declare const Modal: React$1.FC<ModalProps>;

declare const ModalBody: React$1.FC<BaseProps & WithChildren>;

declare const ModalFooter: React$1.FC<BaseProps & WithChildren>;

declare const ModalHeader: React$1.FC<BaseProps & WithChildren>;

type NavbarVariant = 'flat' | 'solid' | 'glass' | 'elevated' | string;
interface NavbarProps extends BaseProps, RadiusProps, Omit<HTMLMotionProps<"nav">, "children" | "className" | "variant"> {
    /** Brand/logo element */
    brand?: React$1.ReactNode;
    /** Variant of the navbar */
    variant?: NavbarVariant;
    /** Whether the navbar should stick to the top */
    sticky?: boolean;
    /** Container max-width wrapper class */
    containerClassName?: string;
    /** Class for desktop menu wrapper */
    desktopMenuClassName?: string;
    /** Class for mobile menu wrapper */
    mobileMenuWrapperClassName?: string;
    /** Custom hamburger icon */
    menuIcon?: React$1.ReactNode;
    /** Custom close icon */
    closeIcon?: React$1.ReactNode;
    /** Framer Motion props for nav container */
    navMotion?: Partial<MotionProps>;
    /** Framer Motion props for mobile menu */
    mobileMotion?: Partial<MotionProps>;
    /** Optional children */
    children?: React$1.ReactNode;
}
declare const Navbar: React$1.FC<NavbarProps>;

type MotionVariantKey$1 = keyof typeof motionVariants;
interface NavItemProps extends BaseProps, RadiusProps, Omit<HTMLMotionProps<"a">, "children" | "href" | "className"> {
    href: string;
    /** Whether this item is active */
    active?: boolean;
    /** Size key for padding and font size */
    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
    /** Customize size classes */
    sizeClasses?: Partial<Record<'xs' | 'sm' | 'md' | 'lg' | 'xl', string>>;
    motionVariant?: MotionVariantKey$1;
    duration?: number;
    loop?: boolean;
    /** Text color classes when inactive */
    textColorClass?: string;
    /** Text color classes on hover */
    hoverTextColorClass?: string;
    /** Text color classes when active */
    activeTextColorClass?: string;
    /** Scale on hover */
    hoverScale?: number;
    /** Scale on tap */
    tapScale?: number;
    /** Custom children rendering */
    children?: React$1.ReactNode;
}
declare const NavItem: React$1.FC<NavItemProps>;

/**
 * A fully customizable offcanvas panel component.
 */
interface OffcanvasProps extends BaseProps, RadiusProps, Omit<React$1.HTMLAttributes<HTMLDivElement>, "children" | "className"> {
    /** Controls visibility of the panel */
    isOpen: boolean;
    /** Callback when panel should close */
    onClose: () => void;
    /** Which edge the panel should originate from */
    position?: 'left' | 'right' | 'top' | 'bottom';
    /** Panel size utility classes (width/height) */
    panelSizeClass?: string;
    /** Background classes for the overlay layer */
    overlayBgClass?: string;
    /** Background classes for the panel content */
    panelBgClass?: string;
    /** Shadow classes for the panel */
    panelShadowClass?: string;
    /** z-index utility class */
    zIndex?: string;
    /** If true, clicking the overlay closes the panel */
    closeOnOverlayClick?: boolean;
    /** Custom close icon placed inside the panel */
    customCloseIcon?: ReactNode;
    /** Optional children rendering */
    children?: ReactNode;
}
declare const Offcanvas: React$1.FC<OffcanvasProps>;

declare const OffcanvasBody: React$1.FC<BaseProps & WithChildren>;

interface OffcanvasHeaderProps extends BaseProps, WithChildren {
    onClose: () => void;
}
declare const OffcanvasHeader: React$1.FC<OffcanvasHeaderProps>;

type Color$7 = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | string;
type PaginationVariant = 'flat' | 'solid' | 'glass' | string;
interface PaginationProps extends BaseProps, RadiusProps, Omit<HTMLMotionProps<"nav">, "children" | "color" | "className" | "variant"> {
    currentPage: number;
    totalPages: number;
    onPageChange: (page: number) => void;
    color?: Color$7;
    variant?: PaginationVariant;
    motionVariant?: keyof typeof motionVariants;
}
declare const Pagination: React$1.FC<PaginationProps>;

type MotionVariantKey = keyof typeof motionVariants;
type Color$6 = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | string;
type ProgressVariant = 'flat' | 'glow' | 'gradient' | string;
interface ProgressBarProps extends BaseProps, RadiusProps, Omit<HTMLMotionProps<"div">, "children" | "variant"> {
    /** Current value */
    value: number;
    /** Maximum value */
    max?: number;
    /** Semantic color key */
    color?: Color$6;
    /** Variant style */
    variant?: ProgressVariant;
    /** Override height utility class */
    heightClass?: string;
    /** Container background class */
    containerBgClass?: string;
    /** Bar background class override (falls back to color key) */
    barBgClass?: string;
    /** Motion variant key */
    motionVariant?: MotionVariantKey;
    /** Animation duration in seconds */
    duration?: number;
    /** Loop animation */
    loop?: boolean;
    /** Show percentage label */
    showLabel?: boolean;
    /** Label container class */
    labelClassName?: string;
}
declare const ProgressBar: React$1.FC<ProgressBarProps>;

type Color$5 = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'default' | string;
type SkeletonVariant = 'pulse' | 'shimmer' | string;
interface SkeletonProps extends BaseProps, RadiusProps, Omit<HTMLMotionProps<"div">, "children" | "variant"> {
    width?: string;
    height?: string;
    color?: Color$5;
    variant?: SkeletonVariant;
    motionVariant?: keyof typeof motionVariants;
}
declare const Skeleton: React$1.FC<SkeletonProps>;

interface RangeSliderProps extends BaseProps {
    min: number;
    max: number;
    values: [number, number];
    onChange: (values: [number, number]) => void;
    step?: number;
    color?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
    motionVariant?: keyof typeof motionVariants;
}
declare const RangeSlider: React$1.FC<RangeSliderProps>;

type Color$4 = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | string;
type SliderVariant = 'flat' | 'glow' | string;
interface SliderProps extends BaseProps, RadiusProps, Omit<HTMLMotionProps<"div">, "children" | "onChange" | "color" | "variant"> {
    min: number;
    max: number;
    value: number;
    onChange: (value: number) => void;
    step?: number;
    color?: Color$4;
    variant?: SliderVariant;
    motionVariant?: keyof typeof motionVariants;
}
declare const Slider: React$1.FC<SliderProps>;

type Color$3 = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
interface StepperProps extends BaseProps {
    steps: string[];
    currentStep: number;
    color?: {
        active?: Color$3;
        inactive?: Color$3;
        connector?: Color$3;
    };
    size?: 'sm' | 'md' | 'lg' | 'xs' | 'xl';
    orientation?: 'horizontal' | 'vertical';
}
declare const Stepper: React$1.FC<StepperProps>;

type Color$2 = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | string;
type TableVariant = 'flat' | 'elevated' | 'glass' | string;
interface TableProps extends BaseProps, SizeProps, RadiusProps, Omit<HTMLMotionProps<"div">, "children" | "color" | "variant"> {
    children?: React$1.ReactNode;
    /** Predefined motion variant */
    motionVariant?: keyof typeof motionVariants;
    /** Color theme */
    color?: Color$2;
    /** Visual variant */
    variant?: TableVariant;
    /** Striped rows */
    striped?: boolean;
    /** Hoverable rows */
    hoverable?: boolean;
    /** Show borders */
    bordered?: boolean;
    /** Whether to animate on mount */
    useAnimation?: boolean;
}
declare const Table: React$1.FC<TableProps>;

declare const TableBody: React$1.FC<BaseProps & WithChildren>;

interface TableCellProps extends BaseProps, React$1.TdHTMLAttributes<HTMLTableCellElement> {
    as?: 'td' | 'th';
    children?: React$1.ReactNode;
}
declare const TableCell: React$1.FC<TableCellProps>;

declare const TableHead: React$1.FC<BaseProps & WithChildren>;

interface TableRowProps extends BaseProps, Omit<HTMLMotionProps<"tr">, "children"> {
    children?: React$1.ReactNode;
    motionVariant?: keyof typeof motionVariants;
    isHeader?: boolean;
}
declare const TableRow: React$1.FC<TableRowProps>;

type Color$1 = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | string;
type TabsVariant = 'underlined' | 'pills' | 'solid' | string;
interface TabItem {
    label: string;
    content: React$1.ReactNode;
    disabled?: boolean;
}
interface TabsProps extends BaseProps, RadiusProps {
    /** Array of tab items */
    tabs: TabItem[];
    motionVariant?: keyof typeof motionVariants;
    color?: Color$1;
    variant?: TabsVariant;
    fullWidth?: boolean;
    tabClassName?: string;
    panelClassName?: string;
}
declare const Tabs: React$1.FC<TabsProps>;

type TooltipColor = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | string;
type TooltipVariant = 'flat' | 'solid' | 'glass' | string;
interface TooltipProps extends BaseProps, RadiusProps, Omit<HTMLMotionProps<"div">, "children" | "content" | "color" | "className" | "variant"> {
    /** The element the tooltip wraps */
    children: React$1.ReactNode;
    /** Tooltip content text */
    content: string | React$1.ReactNode;
    /** Position of the tooltip */
    position?: 'top' | 'right' | 'bottom' | 'left';
    /** Color theme */
    color?: TooltipColor;
    /** Visual Variant */
    variant?: TooltipVariant;
    /** Predefined motion variant */
    motionVariant?: keyof typeof motionVariants;
    /** Delay before showing tooltip (ms) */
    delay?: number;
    /** Whether the tooltip is disabled */
    disabled?: boolean;
}
declare const Tooltip: React$1.FC<TooltipProps>;

interface HeadingProps extends BaseProps, WithChildren, SizeProps {
    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
}
declare const Heading: React$1.FC<HeadingProps>;

interface TextProps extends BaseProps, WithChildren, SizeProps {
    weight?: 'normal' | 'medium' | 'semibold' | 'bold';
}
declare const Text: React$1.FC<TextProps>;

type Color = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
interface SwitchProps extends BaseProps {
    /** Whether the switch is on */
    checked: boolean;
    /** Change handler */
    onChange: (checked: boolean) => void;
    /** Label text */
    label?: string;
    /** Color theme */
    color?: Color;
    /** Predefined motion variant */
    motionVariant?: keyof typeof motionVariants;
    /** Whether the switch is disabled */
    disabled?: boolean;
    /** Switch id */
    id?: string;
    /** Switch name */
    name?: string;
    /** Size of the switch */
    size?: 'sm' | 'md' | 'lg';
    /** Whether to animate on mount */
    useAnimation?: boolean;
}

export { Accordion, type AccordionItem, type AccordionProps, Alert, type AlertProps, Avatar, type AvatarProps, Badge, type BadgeProps, type BaseProps, Breadcrumb, type BreadcrumbProps, Button, type ButtonProps, Card, CardBody, type CardBodyProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, Carousel, type CarouselImage, type CarouselProps, Checkbox, type CheckboxProps, type Color$h as Color, type ColorProps, Container, type ContainerProps, Dropdown, DropdownItem, type DropdownItemProps, type DropdownProps, FileUpload, type FileUploadProps, Flex, type FlexProps, Grid, type GridProps, Heading, type HeadingProps, IconButton, type IconButtonProps, ImageEditor, Imageeditor, Input, type InputProps, List, ListItem, type ListItemProps, type ListProps, Modal, ModalBody, ModalFooter, ModalHeader, type ModalProps, NavItem, type NavItemProps, Navbar, type NavbarProps, Offcanvas, OffcanvasBody, OffcanvasHeader, type OffcanvasProps, Pagination, type PaginationProps, ProgressBar, type ProgressBarProps, Radio, type RadioProps, type Radius, type RadiusProps, RangeSlider, type RangeSliderProps, Select, type SelectOption, type SelectProps, type Size$3 as Size, type SizeProps, Skeleton, type SkeletonProps, Slider, type SliderProps, Stepper, type StepperProps, type SwitchProps, type TabItem, Table, TableBody, TableCell, type TableCellProps, TableHead, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, Text, type TextProps, Textarea, type TextareaProps, Tooltip, type TooltipProps, type Variant, type VariantProps, type WithChildren, motionVariants };