my-animated-components 1.5.5 → 2.0.1

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import React$1, { ReactNode } from 'react';
-import { Variants, HTMLMotionProps, Transition, motion, MotionProps } from 'framer-motion';
+import { Variants, HTMLMotionProps, Transition, MotionProps } from 'framer-motion';
 
 declare const motionVariants: Record<string, Variants>;
 
@@ -7,37 +7,116 @@ interface BaseProps {
     className?: string;
 }
 interface WithChildren {
-    children: React.ReactNode;
+    children?: React.ReactNode;
 }
-type Color$e = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
-type Size$2 = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+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$e;
+    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;
-type ButtonVariant = 'solid' | 'outline' | 'ghost' | string;
-type Size$1 = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | string;
-type MotionVariantKey$4 = keyof typeof motionVariants;
-interface ButtonProps extends BaseProps, SizeProps, HTMLMotionProps<'button'> {
+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$d;
+    color?: Color$c;
     /**
      * Predefined motion variant from motionVariants for initial animation
      * @default 'fadeIn'
      */
-    motionVariant?: MotionVariantKey$4;
+    motionVariant?: MotionVariantKey$5;
     /**
      * Custom animation variants to override default motionVariants
      */
@@ -45,15 +124,15 @@ interface ButtonProps extends BaseProps, SizeProps, HTMLMotionProps<'button'> {
     /**
      * Predefined motion variant for hover animation
      */
-    whileHoverAnimation?: MotionVariantKey$4;
+    whileHoverAnimation?: MotionVariantKey$5;
     /**
      * Predefined motion variant for tap animation
      */
-    whileTapAnimation?: MotionVariantKey$4;
+    whileTapAnimation?: MotionVariantKey$5;
     /**
      * Predefined motion variant for focus animation
      */
-    whileFocusAnimation?: MotionVariantKey$4;
+    whileFocusAnimation?: MotionVariantKey$5;
     /**
      * Custom transition for initial animation
      */
@@ -84,7 +163,7 @@ interface ButtonProps extends BaseProps, SizeProps, HTMLMotionProps<'button'> {
      */
     customClasses?: {
         [variant in ButtonVariant]?: {
-            [color in Color$d]?: string;
+            [color in Color$c]?: string;
         };
     };
     /**
@@ -110,184 +189,385 @@ interface ButtonProps extends BaseProps, SizeProps, HTMLMotionProps<'button'> {
      * @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$c = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
-interface IconButtonProps extends BaseProps, SizeProps {
+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;
-    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[];
+    variant?: IconButtonVariant;
     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;
+    motionVariant?: MotionVariantKey$4;
+    whileHoverAnimation?: MotionVariantKey$4;
+    whileTapAnimation?: MotionVariantKey$4;
+    whileFocusAnimation?: MotionVariantKey$4;
 }
-declare const Breadcrumb: React$1.FC<BreadcrumbProps>;
+declare const IconButton: React$1.FC<IconButtonProps>;
 
-interface CardProps extends BaseProps, WithChildren {
+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, WithChildren {
+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, WithChildren {
+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, WithChildren {
+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, WithChildren {
+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>;
 
-declare const DropdownItem: React$1.FC<BaseProps & WithChildren>;
+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.FC<CheckboxProps>;
+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 {
-    type?: 'text' | 'password' | 'email' | 'number';
+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.FC<InputProps>;
+declare const Input: React$1.ForwardRefExoticComponent<InputProps & React$1.RefAttributes<HTMLInputElement>>;
 
-type Color$9 = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
+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?: Color$9;
+    /** 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.FC<RadioProps>;
+declare const Radio: React$1.ForwardRefExoticComponent<RadioProps & React$1.RefAttributes<HTMLInputElement>>;
 
-type Color$8 = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
-interface SelectProps extends BaseProps, SizeProps {
-    options: {
-        value: string;
-        label: string;
-    }[];
+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?: Color$8;
+    /** Color theme */
+    color?: Color$9;
+    /** Predefined motion variant */
     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 text */
     label?: string;
-    color?: Color$7;
-    motionVariant?: keyof typeof motionVariants;
+    /** 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 Switch: React$1.FC<SwitchProps>;
+declare const Select: React$1.ForwardRefExoticComponent<SelectProps & React$1.RefAttributes<HTMLSelectElement>>;
 
-type Color$6 = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
-interface TextareaProps extends BaseProps, SizeProps {
+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?: Color$6;
+    /** 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.FC<TextareaProps>;
+declare const Textarea: React$1.ForwardRefExoticComponent<TextareaProps & React$1.RefAttributes<HTMLTextAreaElement>>;
 
-interface ContainerProps extends BaseProps, WithChildren {
+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;
@@ -295,7 +575,8 @@ interface ContainerProps extends BaseProps, WithChildren {
 }
 declare const Container: React$1.FC<ContainerProps>;
 
-interface FlexProps extends BaseProps, WithChildren {
+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';
@@ -306,37 +587,49 @@ interface FlexProps extends BaseProps, WithChildren {
 }
 declare const Flex: React$1.FC<FlexProps>;
 
-interface GridProps extends BaseProps, WithChildren {
-    cols?: number;
-    gap?: number;
+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>;
 
-interface ListProps extends BaseProps, WithChildren {
+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;
-    duration?: number;
-    loop?: boolean;
+    variant?: ListVariant;
 }
 declare const List: React$1.FC<ListProps>;
 
-type MotionVariantKey$3 = keyof typeof motionVariants;
-interface ListItemProps extends BaseProps, WithChildren {
-    motionVariant?: MotionVariantKey$3;
-    duration?: number;
-    loop?: boolean;
+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, WithChildren {
+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>;
 
@@ -346,12 +639,35 @@ 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$2 = keyof typeof motionVariants;
-interface NavItemProps extends BaseProps, WithChildren {
-    /** Link destination */
+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;
@@ -359,11 +675,8 @@ interface NavItemProps extends BaseProps, WithChildren {
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     /** Customize size classes */
     sizeClasses?: Partial<Record<'xs' | 'sm' | 'md' | 'lg' | 'xl', string>>;
-    /** Motion variant key */
-    motionVariant?: MotionVariantKey$2;
-    /** Animation duration override (seconds) */
+    motionVariant?: MotionVariantKey$1;
     duration?: number;
-    /** Loop the animation */
     loop?: boolean;
     /** Text color classes when inactive */
     textColorClass?: string;
@@ -371,55 +684,19 @@ interface NavItemProps extends BaseProps, WithChildren {
     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;
+    /** Custom children rendering */
+    children?: React$1.ReactNode;
 }
 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 {
+interface OffcanvasProps extends BaseProps, RadiusProps, Omit<React$1.HTMLAttributes<HTMLDivElement>, "children" | "className"> {
     /** Controls visibility of the panel */
     isOpen: boolean;
     /** Callback when panel should close */
@@ -438,15 +715,10 @@ interface OffcanvasProps extends BaseProps, WithChildren {
     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;
+    /** Optional children rendering */
+    children?: ReactNode;
 }
 declare const Offcanvas: React$1.FC<OffcanvasProps>;
 
@@ -457,25 +729,30 @@ interface OffcanvasHeaderProps extends BaseProps, WithChildren {
 }
 declare const OffcanvasHeader: React$1.FC<OffcanvasHeaderProps>;
 
-type Color$5 = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
-interface PaginationProps extends BaseProps {
+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$5;
+    color?: Color$7;
+    variant?: PaginationVariant;
     motionVariant?: keyof typeof motionVariants;
 }
 declare const Pagination: React$1.FC<PaginationProps>;
 
-type MotionVariantKey$1 = keyof typeof motionVariants;
-type Color$4 = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
-interface ProgressBarProps extends BaseProps, ColorProps, MotionProps {
+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$4;
+    color?: Color$6;
+    /** Variant style */
+    variant?: ProgressVariant;
     /** Override height utility class */
     heightClass?: string;
     /** Container background class */
@@ -483,7 +760,7 @@ interface ProgressBarProps extends BaseProps, ColorProps, MotionProps {
     /** Bar background class override (falls back to color key) */
     barBgClass?: string;
     /** Motion variant key */
-    motionVariant?: MotionVariantKey$1;
+    motionVariant?: MotionVariantKey;
     /** Animation duration in seconds */
     duration?: number;
     /** Loop animation */
@@ -495,93 +772,132 @@ interface ProgressBarProps extends BaseProps, ColorProps, MotionProps {
 }
 declare const ProgressBar: React$1.FC<ProgressBarProps>;
 
-type Color$3 = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
-interface SkeletonProps extends BaseProps {
+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$3;
+    color?: Color$5;
+    variant?: SkeletonVariant;
     motionVariant?: keyof typeof motionVariants;
 }
 declare const Skeleton: React$1.FC<SkeletonProps>;
 
-interface SliderProps extends BaseProps {
+interface RangeSliderProps extends BaseProps {
     min: number;
     max: number;
-    value: number;
-    onChange: (value: number) => void;
+    values: [number, number];
+    onChange: (values: [number, number]) => void;
     step?: number;
     color?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
     motionVariant?: keyof typeof motionVariants;
 }
-declare const Slider: React$1.FC<SliderProps>;
+declare const RangeSlider: React$1.FC<RangeSliderProps>;
 
-interface RangeSliderProps extends BaseProps {
+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;
-    values: [number, number];
-    onChange: (values: [number, number]) => void;
+    value: number;
+    onChange: (value: number) => void;
     step?: number;
-    color?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
+    color?: Color$4;
+    variant?: SliderVariant;
     motionVariant?: keyof typeof motionVariants;
 }
-declare const RangeSlider: React$1.FC<RangeSliderProps>;
+declare const Slider: React$1.FC<SliderProps>;
 
-type Color$2 = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
+type Color$3 = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
 interface StepperProps extends BaseProps {
     steps: string[];
     currentStep: number;
     color?: {
-        active?: Color$2;
-        inactive?: Color$2;
-        connector?: Color$2;
+        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$1 = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
-interface TableProps extends BaseProps, WithChildren, SizeProps {
+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?: Color$1;
+    /** 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, 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>;
 
-declare const TableRow: 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 = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
-type Variant = 'solid' | 'outline' | 'ghost';
+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, WithChildren {
+interface TabsProps extends BaseProps, RadiusProps {
+    /** Array of tab items */
     tabs: TabItem[];
     motionVariant?: keyof typeof motionVariants;
-    color?: Color;
-    variant?: Variant;
+    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';
-interface TooltipProps extends BaseProps, WithChildren {
-    content: string;
+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>;
 
@@ -595,83 +911,28 @@ interface TextProps extends BaseProps, WithChildren, SizeProps {
 }
 declare const Text: React$1.FC<TextProps>;
 
-interface ImageEditorProps$1 {
-    imageFile: File;
-    onSave: (file: File) => void;
-    onCancel: () => void;
-    className?: string;
-}
-declare const Imageeditor: React$1.FC<ImageEditorProps$1>;
-
-type ImageEditorProps = {
-    imageFile: File;
-    onSave: (file: File) => void;
-    onCancel: () => void;
-    className?: string;
-};
-declare const ImageEditor: ({ imageFile, onSave, onCancel, className }: ImageEditorProps) => React$1.ReactPortal;
-
-type NavigationStyle = 'arrows' | 'dots' | 'thumbnails' | 'both' | 'arrows-dots' | 'none';
-type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full' | string;
-type Direction = 'horizontal' | 'vertical';
-type MotionVariantKey = 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;
-    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;
+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;
 }
-declare const Carousel: React$1.FC<CarouselProps>;
 
-export { Accordion, Alert, Avatar, Badge, Breadcrumb, Button, Card, CardBody, CardFooter, CardHeader, Carousel, Checkbox, Container, Dropdown, DropdownItem, FileUpload, Flex, Grid, Heading, IconButton, ImageEditor, Imageeditor, 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 };
+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 };