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

A comprehensive React component library with built-in animations and customization options.  

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

declare const motionVariants: Record<string, Variants>;

interface BaseProps {
    className?: string;
}
interface WithChildren {
    children: React.ReactNode;
}
type Color$e = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
type Size$1 = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
interface ColorProps {
    color?: Color$e;
}
interface SizeProps {
    size?: Size$1;
}

type Color$d = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | string;
type ButtonVariant = 'solid' | 'outline' | 'ghost' | string;
type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | string;
type MotionVariantKey$3 = keyof typeof motionVariants;
interface ButtonProps extends BaseProps, SizeProps, HTMLMotionProps<'button'> {
    /**
     * Visual style of the button
     * @default 'solid'
     */
    variant?: ButtonVariant;
    /**
     * Color theme of the button
     * @default 'primary'
     */
    color?: Color$d;
    /**
     * Predefined motion variant from motionVariants for initial animation
     * @default 'fadeIn'
     */
    motionVariant?: MotionVariantKey$3;
    /**
     * Custom animation variants to override default motionVariants
     */
    customVariants?: Variants;
    /**
     * Predefined motion variant for hover animation
     */
    whileHoverAnimation?: MotionVariantKey$3;
    /**
     * Predefined motion variant for tap animation
     */
    whileTapAnimation?: MotionVariantKey$3;
    /**
     * Predefined motion variant for focus animation
     */
    whileFocusAnimation?: MotionVariantKey$3;
    /**
     * 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$d]?: string;
        };
    };
    /**
     * Custom size class mapping
     */
    customSizeClasses?: Record<Size, 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';
}
declare const Button: React$1.FC<ButtonProps>;

type Color$c = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
interface IconButtonProps extends BaseProps, SizeProps {
    icon: React$1.ReactNode;
    onClick?: () => void;
    disabled?: boolean;
    variant?: 'solid' | 'outline' | 'ghost';
    color?: Color$c;
    motionVariant?: keyof typeof motionVariants;
    whileHover?: React$1.ComponentProps<typeof motion.button>['whileHover'];
    whileTap?: React$1.ComponentProps<typeof motion.button>['whileTap'];
    whileFocus?: React$1.ComponentProps<typeof motion.button>['whileFocus'];
    whileHoverAnimation?: keyof typeof motionVariants;
    whileTapAnimation?: keyof typeof motionVariants;
    whileFocusAnimation?: keyof typeof motionVariants;
}
declare const IconButton: React$1.FC<IconButtonProps>;

type Color$b = 'primary' | 'secondary' | 'danger' | 'success' | 'info' | 'warning';
type Variant$1 = 'solid' | 'outline' | 'ghost';
interface AccordionItem {
    title: string;
    content: React$1.ReactNode;
    disabled?: boolean;
}
interface AccordionProps extends BaseProps, WithChildren {
    items: AccordionItem[];
    color?: Color$b;
    variant?: Variant$1;
    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>;

interface AlertProps extends BaseProps, WithChildren, ColorProps {
    onClose?: () => void;
    motionVariant?: keyof typeof motionVariants;
}
declare const Alert: React$1.FC<AlertProps>;

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

interface BadgeProps extends BaseProps, WithChildren, ColorProps, SizeProps {
    motionVariant?: keyof typeof motionVariants;
}
declare const Badge: React$1.FC<BadgeProps>;

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

interface CardProps extends BaseProps, WithChildren {
    motionVariant?: keyof typeof motionVariants;
}
declare const Card: React$1.FC<CardProps>;

interface CardBodyProps extends BaseProps, WithChildren {
    motionVariant?: keyof typeof motionVariants;
}
declare const CardBody: React$1.FC<CardBodyProps>;

interface CardFooterProps extends BaseProps, WithChildren {
    motionVariant?: keyof typeof motionVariants;
}
declare const CardFooter: React$1.FC<CardFooterProps>;

interface CardHeaderProps extends BaseProps, WithChildren {
    motionVariant?: keyof typeof motionVariants;
}
declare const CardHeader: React$1.FC<CardHeaderProps>;

interface DropdownProps extends BaseProps, WithChildren {
    trigger: React$1.ReactNode;
    motionVariant?: keyof typeof motionVariants;
}
declare const Dropdown: React$1.FC<DropdownProps>;

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

type CheckboxColor = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
interface CheckboxProps extends BaseProps {
    label: string;
    checked?: boolean;
    onChange?: (e: React$1.ChangeEvent<HTMLInputElement>) => void;
    color?: CheckboxColor;
    motionVariant?: keyof typeof motionVariants;
}
declare const Checkbox: React$1.FC<CheckboxProps>;

type ButtonColor = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
interface FileUploadProps extends BaseProps {
    onChange: (file: File | null) => void;
    accept?: string;
    multiple?: boolean;
    buttonColor?: ButtonColor;
    motionVariant?: keyof typeof motionVariants;
}
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 {
    type?: 'text' | 'password' | 'email' | 'number';
    placeholder?: string;
    value?: string;
    onChange?: (e: React$1.ChangeEvent<HTMLInputElement>) => void;
    color?: InputColor;
    textColor?: TextColor;
}
declare const Input: React$1.FC<InputProps>;

type Color$9 = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
interface RadioProps extends BaseProps, SizeProps {
    label: string;
    name: string;
    value: string;
    checked?: boolean;
    onChange?: (e: React$1.ChangeEvent<HTMLInputElement>) => void;
    color?: Color$9;
    motionVariant?: keyof typeof motionVariants;
}
declare const Radio: React$1.FC<RadioProps>;

type Color$8 = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
interface SelectProps extends BaseProps, SizeProps {
    options: {
        value: string;
        label: string;
    }[];
    value?: string;
    onChange?: (e: React$1.ChangeEvent<HTMLSelectElement>) => void;
    color?: Color$8;
    motionVariant?: keyof typeof motionVariants;
}
declare const Select: React$1.FC<SelectProps>;

type Color$7 = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
interface SwitchProps extends BaseProps {
    checked: boolean;
    onChange: (checked: boolean) => void;
    label?: string;
    color?: Color$7;
    motionVariant?: keyof typeof motionVariants;
}
declare const Switch: React$1.FC<SwitchProps>;

type Color$6 = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
interface TextareaProps extends BaseProps, SizeProps {
    placeholder?: string;
    value?: string;
    onChange?: (e: React$1.ChangeEvent<HTMLTextAreaElement>) => void;
    rows?: number;
    color?: Color$6;
    motionVariant?: keyof typeof motionVariants;
}
declare const Textarea: React$1.FC<TextareaProps>;

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

interface FlexProps extends BaseProps, WithChildren {
    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, WithChildren {
    cols?: number;
    gap?: number;
    motionVariant?: keyof typeof motionVariants;
    duration?: number;
    loop?: boolean;
}
declare const Grid: React$1.FC<GridProps>;

interface ListProps extends BaseProps, WithChildren {
    as?: 'ul' | 'ol';
    motionVariant?: keyof typeof motionVariants;
    duration?: number;
    loop?: boolean;
}
declare const List: React$1.FC<ListProps>;

type MotionVariantKey$2 = keyof typeof motionVariants;
interface ListItemProps extends BaseProps, WithChildren {
    motionVariant?: MotionVariantKey$2;
    duration?: number;
    loop?: boolean;
}
declare const ListItem: React$1.FC<ListItemProps>;

interface ModalProps extends BaseProps, WithChildren {
    isOpen: boolean;
    onClose: () => void;
    motionVariant?: keyof typeof motionVariants;
    duration?: number;
    loop?: 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>;

/**
 * A fully customizable navigation link with motion and style props.
 */
type MotionVariantKey$1 = keyof typeof motionVariants;
interface NavItemProps extends BaseProps, WithChildren {
    /** Link destination */
    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>>;
    /** Motion variant key */
    motionVariant?: MotionVariantKey$1;
    /** Animation duration override (seconds) */
    duration?: number;
    /** Loop the animation */
    loop?: boolean;
    /** Text color classes when inactive */
    textColorClass?: string;
    /** Text color classes on hover */
    hoverTextColorClass?: string;
    /** Text color classes when active */
    activeTextColorClass?: string;
    /** Border classes when active */
    activeBorderClass?: string;
    /** Scale on hover */
    hoverScale?: number;
    /** Scale on tap */
    tapScale?: number;
}
declare const NavItem: React$1.FC<NavItemProps>;

/**
 * Fully customizable, responsive Navbar with mobile menu.
 * All styling and behavior can be overridden via props.
 */
interface NavbarProps extends BaseProps, WithChildren {
    /** Brand/logo element */
    brand?: React$1.ReactNode;
    /** Tailwind class for navbar background */
    bgColorClass?: string;
    /** Tailwind class for navbar text */
    textColorClass?: string;
    /** Tailwind class for hover state on menu items */
    hoverTextColorClass?: string;
    /** Tailwind class for navbar shadow */
    shadowClass?: string;
    /** Container max-width wrapper class */
    containerClassName?: string;
    /** Class for desktop menu wrapper */
    desktopMenuClassName?: string;
    /** Class for mobile menu wrapper */
    mobileMenuWrapperClassName?: string;
    /** Class for individual mobile menu item */
    mobileMenuItemClassName?: 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>;
    duration?: number;
    loop?: boolean;
}
declare const Navbar: React$1.FC<NavbarProps>;

/**
 * A fully customizable offcanvas panel component.
 */
interface OffcanvasProps extends BaseProps, WithChildren {
    /** 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;
    /** Duration of open/close animations in seconds */
    duration?: number;
    /** Custom close icon placed inside the panel */
    customCloseIcon?: ReactNode;
    /** Override motion props on the overlay */
    overlayMotion?: Partial<MotionProps>;
    /** Override motion props on the panel */
    panelMotion?: Partial<MotionProps>;
    loop?: boolean;
}
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$5 = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
interface PaginationProps extends BaseProps {
    currentPage: number;
    totalPages: number;
    onPageChange: (page: number) => void;
    color?: Color$5;
    motionVariant?: keyof typeof motionVariants;
}
declare const Pagination: React$1.FC<PaginationProps>;

type MotionVariantKey = keyof typeof motionVariants;
type Color$4 = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
interface ProgressBarProps extends BaseProps, ColorProps, MotionProps {
    /** Current value */
    value: number;
    /** Maximum value */
    max?: number;
    /** Semantic color key */
    color?: Color$4;
    /** 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$3 = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
interface SkeletonProps extends BaseProps {
    width?: string;
    height?: string;
    color?: Color$3;
    motionVariant?: keyof typeof motionVariants;
}
declare const Skeleton: React$1.FC<SkeletonProps>;

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

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

type Color$1 = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
interface TableProps extends BaseProps, WithChildren, SizeProps {
    motionVariant?: keyof typeof motionVariants;
    color?: Color$1;
}
declare const Table: React$1.FC<TableProps>;

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

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

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

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

type Color = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
type Variant = 'solid' | 'outline' | 'ghost';
interface TabItem {
    label: string;
    content: React$1.ReactNode;
    disabled?: boolean;
}
interface TabsProps extends BaseProps, WithChildren {
    tabs: TabItem[];
    motionVariant?: keyof typeof motionVariants;
    color?: Color;
    variant?: Variant;
    fullWidth?: boolean;
    tabClassName?: string;
    panelClassName?: string;
}
declare const Tabs: React$1.FC<TabsProps>;

type TooltipColor = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
interface TooltipProps extends BaseProps, WithChildren {
    content: string;
    position?: 'top' | 'right' | 'bottom' | 'left';
    color?: TooltipColor;
    motionVariant?: keyof typeof motionVariants;
}
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>;

export { Accordion, Alert, Avatar, Badge, Breadcrumb, Button, Card, CardBody, CardFooter, CardHeader, Checkbox, Container, Dropdown, DropdownItem, FileUpload, Flex, Grid, Heading, IconButton, Input, List, ListItem, Modal, ModalBody, ModalFooter, ModalHeader, NavItem, Navbar, Offcanvas, OffcanvasBody, OffcanvasHeader, Pagination, ProgressBar, Radio, RangeSlider, Select, Skeleton, Slider, Stepper, Switch, Table, TableBody, TableCell, TableHead, TableRow, Tabs, Text, Textarea, Tooltip, motionVariants };