@umituz/atomic-next 2.0.3 → 2.1.0

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import { ClassValue } from 'clsx';
 import * as class_variance_authority_types from 'class-variance-authority/types';
-import React$1 from 'react';
+import React, { CSSProperties } from 'react';
 import { VariantProps } from 'class-variance-authority';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import Image from 'next/image';
@@ -9,7 +9,6 @@ import Link from 'next/link';
 
 /**
  * CSS Variables for Web/Next.js usage
- * These are the only color exports needed for atomic-next package
  */
 declare const AtomicColorsCss: {
     readonly '--atomic-primary': string;
@@ -83,7 +82,6 @@ declare const AtomicSpacingCss: {
 
 /**
  * CSS Variables for Web/Next.js usage
- * These are the only typography exports needed for atomic-next package
  */
 declare const AtomicTypographyCss: {
     readonly '--atomic-font-sans': string;
@@ -135,14 +133,14 @@ declare const AtomicShadows: {
     readonly xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)";
     readonly xxl: "0 25px 50px -12px rgb(0 0 0 / 0.25)";
     readonly inner: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)";
-    readonly focusPrimary: "0 0 0 3px rgb(139 92 246 / 0.2)";
-    readonly focusSecondary: "0 0 0 3px rgb(236 72 153 / 0.2)";
+    readonly focusPrimary: "0 0 0 3px rgb(37 99 235 / 0.2)";
+    readonly focusSecondary: "0 0 0 3px rgb(13 148 136 / 0.2)";
     readonly focusSuccess: "0 0 0 3px rgb(16 185 129 / 0.2)";
     readonly focusWarning: "0 0 0 3px rgb(245 158 11 / 0.2)";
     readonly focusError: "0 0 0 3px rgb(239 68 68 / 0.2)";
     readonly focusInfo: "0 0 0 3px rgb(59 130 246 / 0.2)";
-    readonly glowPrimary: "0 0 20px rgb(139 92 246 / 0.3)";
-    readonly glowSecondary: "0 0 20px rgb(236 72 153 / 0.3)";
+    readonly glowPrimary: "0 0 20px rgb(37 99 235 / 0.3)";
+    readonly glowSecondary: "0 0 20px rgb(13 148 136 / 0.3)";
     readonly glowSuccess: "0 0 20px rgb(16 185 129 / 0.3)";
     readonly glowWarning: "0 0 20px rgb(245 158 11 / 0.3)";
     readonly glowError: "0 0 20px rgb(239 68 68 / 0.3)";
@@ -170,14 +168,14 @@ declare const AtomicShadowsCss: {
     readonly '--atomic-shadow-xl': "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)";
     readonly '--atomic-shadow-xxl': "0 25px 50px -12px rgb(0 0 0 / 0.25)";
     readonly '--atomic-shadow-inner': "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)";
-    readonly '--atomic-shadow-focus-primary': "0 0 0 3px rgb(139 92 246 / 0.2)";
-    readonly '--atomic-shadow-focus-secondary': "0 0 0 3px rgb(236 72 153 / 0.2)";
+    readonly '--atomic-shadow-focus-primary': "0 0 0 3px rgb(37 99 235 / 0.2)";
+    readonly '--atomic-shadow-focus-secondary': "0 0 0 3px rgb(13 148 136 / 0.2)";
     readonly '--atomic-shadow-focus-success': "0 0 0 3px rgb(16 185 129 / 0.2)";
     readonly '--atomic-shadow-focus-warning': "0 0 0 3px rgb(245 158 11 / 0.2)";
     readonly '--atomic-shadow-focus-error': "0 0 0 3px rgb(239 68 68 / 0.2)";
     readonly '--atomic-shadow-focus-info': "0 0 0 3px rgb(59 130 246 / 0.2)";
-    readonly '--atomic-shadow-glow-primary': "0 0 20px rgb(139 92 246 / 0.3)";
-    readonly '--atomic-shadow-glow-secondary': "0 0 20px rgb(236 72 153 / 0.3)";
+    readonly '--atomic-shadow-glow-primary': "0 0 20px rgb(37 99 235 / 0.3)";
+    readonly '--atomic-shadow-glow-secondary': "0 0 20px rgb(13 148 136 / 0.3)";
     readonly '--atomic-shadow-glow-success': "0 0 20px rgb(16 185 129 / 0.3)";
     readonly '--atomic-shadow-glow-warning': "0 0 20px rgb(245 158 11 / 0.3)";
     readonly '--atomic-shadow-glow-error': "0 0 20px rgb(239 68 68 / 0.3)";
@@ -190,7 +188,7 @@ declare const AtomicShadowsCss: {
     readonly '--atomic-shadow-tooltip': "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
 };
 type AtomicShadowKey = keyof typeof AtomicShadows;
-type AtomicShadowValue = typeof AtomicShadows[AtomicShadowKey];
+type AtomicShadowValue = (typeof AtomicShadows)[AtomicShadowKey];
 
 declare const AtomicBorders: {
     readonly radius: {
@@ -378,7 +376,7 @@ declare const AnimationUtils: {
     };
     duration: (name: keyof typeof AtomicAnimations.duration) => string;
     easing: (name: keyof typeof AtomicAnimations.easing) => string;
-    keyframes: (name: string, frames: Record<string, React.CSSProperties>) => string;
+    keyframes: (name: string, frames: Record<string, CSSProperties>) => string;
 };
 declare const AtomicAnimationPresets: {
     fadeIn: {
@@ -656,14 +654,14 @@ declare const AtomicDesignTokensCss: {
     readonly '--atomic-shadow-xl': "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)";
     readonly '--atomic-shadow-xxl': "0 25px 50px -12px rgb(0 0 0 / 0.25)";
     readonly '--atomic-shadow-inner': "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)";
-    readonly '--atomic-shadow-focus-primary': "0 0 0 3px rgb(139 92 246 / 0.2)";
-    readonly '--atomic-shadow-focus-secondary': "0 0 0 3px rgb(236 72 153 / 0.2)";
+    readonly '--atomic-shadow-focus-primary': "0 0 0 3px rgb(37 99 235 / 0.2)";
+    readonly '--atomic-shadow-focus-secondary': "0 0 0 3px rgb(13 148 136 / 0.2)";
     readonly '--atomic-shadow-focus-success': "0 0 0 3px rgb(16 185 129 / 0.2)";
     readonly '--atomic-shadow-focus-warning': "0 0 0 3px rgb(245 158 11 / 0.2)";
     readonly '--atomic-shadow-focus-error': "0 0 0 3px rgb(239 68 68 / 0.2)";
     readonly '--atomic-shadow-focus-info': "0 0 0 3px rgb(59 130 246 / 0.2)";
-    readonly '--atomic-shadow-glow-primary': "0 0 20px rgb(139 92 246 / 0.3)";
-    readonly '--atomic-shadow-glow-secondary': "0 0 20px rgb(236 72 153 / 0.3)";
+    readonly '--atomic-shadow-glow-primary': "0 0 20px rgb(37 99 235 / 0.3)";
+    readonly '--atomic-shadow-glow-secondary': "0 0 20px rgb(13 148 136 / 0.3)";
     readonly '--atomic-shadow-glow-success': "0 0 20px rgb(16 185 129 / 0.3)";
     readonly '--atomic-shadow-glow-warning': "0 0 20px rgb(245 158 11 / 0.3)";
     readonly '--atomic-shadow-glow-error': "0 0 20px rgb(239 68 68 / 0.3)";
@@ -784,19 +782,19 @@ declare const buttonVariants: (props?: ({
     variant?: "outline" | "primary" | "secondary" | "ghost" | "link" | "destructive" | "default" | "brand" | null | undefined;
     size?: "sm" | "lg" | "default" | "icon" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-interface AtomicButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+interface AtomicButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
     /** Render as a different element */
     asChild?: boolean;
     /** Show loading spinner */
     loading?: boolean;
     /** Icon to display on the left */
-    leftIcon?: React$1.ReactNode;
+    leftIcon?: React.ReactNode;
     /** Icon to display on the right */
-    rightIcon?: React$1.ReactNode;
+    rightIcon?: React.ReactNode;
     /** Make button full width */
     fullWidth?: boolean;
 }
-declare const AtomicButton: React$1.ForwardRefExoticComponent<AtomicButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
+declare const AtomicButton: React.ForwardRefExoticComponent<AtomicButtonProps & React.RefAttributes<HTMLButtonElement>>;
 
 declare const textVariants: (props?: ({
     variant?: "xs" | "sm" | "lg" | "xl" | "small" | "large" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "body" | "base" | "2xl" | "3xl" | "lead" | "muted" | "label" | null | undefined;
@@ -804,7 +802,7 @@ declare const textVariants: (props?: ({
     align?: "left" | "right" | "center" | "justify" | null | undefined;
     weight?: "thin" | "medium" | "normal" | "light" | "bold" | "black" | "semibold" | "extrabold" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-interface AtomicTextProps extends Omit<React$1.HTMLAttributes<HTMLElement>, 'color'>, VariantProps<typeof textVariants> {
+interface AtomicTextProps extends Omit<React.HTMLAttributes<HTMLElement>, 'color'>, VariantProps<typeof textVariants> {
     /** Render as a different element */
     asChild?: boolean;
     /** HTML element to render */
@@ -814,26 +812,26 @@ interface AtomicTextProps extends Omit<React$1.HTMLAttributes<HTMLElement>, 'col
     /** Allow text selection */
     selectable?: boolean;
 }
-declare const AtomicText: React$1.ForwardRefExoticComponent<AtomicTextProps & React$1.RefAttributes<HTMLElement>>;
+declare const AtomicText: React.ForwardRefExoticComponent<AtomicTextProps & React.RefAttributes<HTMLElement>>;
 
 declare const avatarVariants: (props?: ({
     size?: "xs" | "sm" | "lg" | "xl" | "xxl" | "xxxl" | "default" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const avatarImageVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
-interface AtomicAvatarProps extends React$1.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>, VariantProps<typeof avatarVariants> {
+interface AtomicAvatarProps extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>, VariantProps<typeof avatarVariants> {
     src?: string;
     alt?: string;
     fallback?: string;
-    fallbackElement?: React$1.ReactNode;
+    fallbackElement?: React.ReactNode;
     showStatus?: boolean;
     isOnline?: boolean;
     statusColor?: string;
 }
-declare const AtomicAvatar: React$1.ForwardRefExoticComponent<AtomicAvatarProps & React$1.RefAttributes<HTMLSpanElement>>;
-declare const AtomicAvatarImage: React$1.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & React$1.RefAttributes<HTMLImageElement>, "ref"> & React$1.RefAttributes<HTMLImageElement>>;
-declare const AtomicAvatarFallback: React$1.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarFallbackProps & React$1.RefAttributes<HTMLSpanElement>, "ref"> & VariantProps<(props?: ({
+declare const AtomicAvatar: React.ForwardRefExoticComponent<AtomicAvatarProps & React.RefAttributes<HTMLSpanElement>>;
+declare const AtomicAvatarImage: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & React.RefAttributes<HTMLImageElement>, "ref"> & React.RefAttributes<HTMLImageElement>>;
+declare const AtomicAvatarFallback: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>, "ref"> & VariantProps<(props?: ({
     size?: "xs" | "sm" | "lg" | "xl" | "xxl" | "xxxl" | "default" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string> & React$1.RefAttributes<HTMLSpanElement>>;
+} & class_variance_authority_types.ClassProp) | undefined) => string> & React.RefAttributes<HTMLSpanElement>>;
 
 declare const imageVariants: (props?: ({
     rounded?: "none" | "sm" | "md" | "lg" | "xl" | "full" | null | undefined;
@@ -841,7 +839,7 @@ declare const imageVariants: (props?: ({
     objectFit?: "none" | "contain" | "fill" | "cover" | "scale-down" | null | undefined;
     objectPosition?: "bottom" | "left" | "right" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "center" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-interface AtomicImageProps extends Omit<React$1.ComponentProps<typeof Image>, 'className' | 'objectFit' | 'objectPosition' | 'placeholder'>, VariantProps<typeof imageVariants> {
+interface AtomicImageProps extends Omit<React.ComponentProps<typeof Image>, 'className' | 'objectFit' | 'objectPosition' | 'placeholder'>, VariantProps<typeof imageVariants> {
     className?: string;
     containerClassName?: string;
     /** Enable blur placeholder while loading */
@@ -849,7 +847,7 @@ interface AtomicImageProps extends Omit<React$1.ComponentProps<typeof Image>, 'c
     /** Custom placeholder image source */
     placeholderSrc?: string;
 }
-declare const AtomicImage: React$1.ForwardRefExoticComponent<Omit<AtomicImageProps, "ref"> & React$1.RefAttributes<HTMLImageElement | null>>;
+declare const AtomicImage: React.ForwardRefExoticComponent<Omit<AtomicImageProps, "ref"> & React.RefAttributes<HTMLImageElement | null>>;
 
 declare const cardVariants: (props?: ({
     variant?: "default" | "filled" | "elevated" | "outlined" | null | undefined;
@@ -870,30 +868,30 @@ declare const cardContentVariants: (props?: ({
 declare const cardFooterVariants: (props?: ({
     size?: "sm" | "md" | "lg" | "xl" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-interface AtomicCardProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardVariants> {
+interface AtomicCardProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardVariants> {
     /** Make card interactive with hover effects */
     interactive?: boolean;
     /** Make card full width */
     fullWidth?: boolean;
 }
-interface AtomicCardHeaderProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardHeaderVariants> {
+interface AtomicCardHeaderProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardHeaderVariants> {
 }
-interface AtomicCardTitleProps extends React$1.HTMLAttributes<HTMLHeadingElement>, VariantProps<typeof cardTitleVariants> {
+interface AtomicCardTitleProps extends React.HTMLAttributes<HTMLHeadingElement>, VariantProps<typeof cardTitleVariants> {
     /** Render as a different heading element */
     as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 }
-interface AtomicCardDescriptionProps extends React$1.HTMLAttributes<HTMLParagraphElement>, VariantProps<typeof cardDescriptionVariants> {
+interface AtomicCardDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement>, VariantProps<typeof cardDescriptionVariants> {
 }
-interface AtomicCardContentProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardContentVariants> {
+interface AtomicCardContentProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardContentVariants> {
 }
-interface AtomicCardFooterProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardFooterVariants> {
+interface AtomicCardFooterProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardFooterVariants> {
 }
-declare const AtomicCard: React$1.ForwardRefExoticComponent<AtomicCardProps & React$1.RefAttributes<HTMLDivElement>>;
-declare const AtomicCardHeader: React$1.ForwardRefExoticComponent<AtomicCardHeaderProps & React$1.RefAttributes<HTMLDivElement>>;
-declare const AtomicCardTitle: React$1.ForwardRefExoticComponent<AtomicCardTitleProps & React$1.RefAttributes<HTMLHeadingElement>>;
-declare const AtomicCardDescription: React$1.ForwardRefExoticComponent<AtomicCardDescriptionProps & React$1.RefAttributes<HTMLParagraphElement>>;
-declare const AtomicCardContent: React$1.ForwardRefExoticComponent<AtomicCardContentProps & React$1.RefAttributes<HTMLDivElement>>;
-declare const AtomicCardFooter: React$1.ForwardRefExoticComponent<AtomicCardFooterProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const AtomicCard: React.ForwardRefExoticComponent<AtomicCardProps & React.RefAttributes<HTMLDivElement>>;
+declare const AtomicCardHeader: React.ForwardRefExoticComponent<AtomicCardHeaderProps & React.RefAttributes<HTMLDivElement>>;
+declare const AtomicCardTitle: React.ForwardRefExoticComponent<AtomicCardTitleProps & React.RefAttributes<HTMLHeadingElement>>;
+declare const AtomicCardDescription: React.ForwardRefExoticComponent<AtomicCardDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
+declare const AtomicCardContent: React.ForwardRefExoticComponent<AtomicCardContentProps & React.RefAttributes<HTMLDivElement>>;
+declare const AtomicCardFooter: React.ForwardRefExoticComponent<AtomicCardFooterProps & React.RefAttributes<HTMLDivElement>>;
 
 type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | number | string;
 type Color$4 = 'current' | 'black' | 'white' | 'slate-50' | 'slate-100' | 'slate-200' | 'slate-300' | 'slate-400' | 'slate-500' | 'slate-600' | 'slate-700' | 'slate-800' | 'slate-900' | 'gray-50' | 'gray-100' | 'gray-200' | 'gray-300' | 'gray-400' | 'gray-500' | 'gray-600' | 'gray-700' | 'gray-800' | 'gray-900' | 'zinc-50' | 'zinc-100' | 'zinc-200' | 'zinc-300' | 'zinc-400' | 'zinc-500' | 'zinc-600' | 'zinc-700' | 'zinc-800' | 'zinc-900' | 'red-50' | 'red-100' | 'red-200' | 'red-300' | 'red-400' | 'red-500' | 'red-600' | 'red-700' | 'red-800' | 'red-900' | 'orange-50' | 'orange-100' | 'orange-200' | 'orange-300' | 'orange-400' | 'orange-500' | 'orange-600' | 'orange-700' | 'orange-800' | 'orange-900' | 'yellow-50' | 'yellow-100' | 'yellow-200' | 'yellow-300' | 'yellow-400' | 'yellow-500' | 'yellow-600' | 'yellow-700' | 'yellow-800' | 'yellow-900' | 'green-50' | 'green-100' | 'green-200' | 'green-300' | 'green-400' | 'green-500' | 'green-600' | 'green-700' | 'green-800' | 'green-900' | 'blue-50' | 'blue-100' | 'blue-200' | 'blue-300' | 'blue-400' | 'blue-500' | 'blue-600' | 'blue-700' | 'blue-800' | 'blue-900' | 'indigo-50' | 'indigo-100' | 'indigo-200' | 'indigo-300' | 'indigo-400' | 'indigo-500' | 'indigo-600' | 'indigo-700' | 'indigo-800' | 'indigo-900' | 'purple-50' | 'purple-100' | 'purple-200' | 'purple-300' | 'purple-400' | 'purple-500' | 'purple-600' | 'purple-700' | 'purple-800' | 'purple-900' | 'pink-50' | 'pink-100' | 'pink-200' | 'pink-300' | 'pink-400' | 'pink-500' | 'pink-600' | 'pink-700' | 'pink-800' | 'pink-900';
@@ -921,18 +919,18 @@ interface AtomicIconProps extends Omit<LucideProps, 'size' | 'color'> {
     'aria-label'?: string;
     'aria-hidden'?: boolean;
 }
-declare const AtomicIcon: React$1.ForwardRefExoticComponent<Omit<AtomicIconProps, "ref"> & React$1.RefAttributes<SVGSVGElement>>;
+declare const AtomicIcon: React.ForwardRefExoticComponent<Omit<AtomicIconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
 
 declare const inputVariants: (props?: ({
     variant?: "outline" | "default" | "filled" | "underlined" | null | undefined;
     size?: "sm" | "lg" | "default" | null | undefined;
     state?: "success" | "warning" | "error" | "default" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-interface AtomicInputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, 'size'>, VariantProps<typeof inputVariants> {
+interface AtomicInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>, VariantProps<typeof inputVariants> {
     /** Left icon or element */
-    leftIcon?: React$1.ReactNode;
+    leftIcon?: React.ReactNode;
     /** Right icon or element */
-    rightIcon?: React$1.ReactNode;
+    rightIcon?: React.ReactNode;
     /** Input label */
     label?: string;
     /** Helper text */
@@ -956,7 +954,7 @@ interface AtomicInputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputEle
     /** Helper text class name */
     helperClassName?: string;
 }
-declare const AtomicInput: React$1.ForwardRefExoticComponent<AtomicInputProps & React$1.RefAttributes<HTMLInputElement>>;
+declare const AtomicInput: React.ForwardRefExoticComponent<AtomicInputProps & React.RefAttributes<HTMLInputElement>>;
 
 type CheckboxSize = 'sm' | 'md' | 'lg';
 type Color$3 = 'slate' | 'gray' | 'zinc' | 'red' | 'orange' | 'yellow' | 'green' | 'blue' | 'indigo' | 'purple' | 'pink';
@@ -969,7 +967,7 @@ type SpacingObject$3 = {
     b?: Spacing$3;
     l?: Spacing$3;
 };
-interface AtomicCheckboxProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, 'size' | 'color' | 'onChange'> {
+interface AtomicCheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'color' | 'onChange'> {
     checked?: boolean;
     indeterminate?: boolean;
     disabled?: boolean;
@@ -981,10 +979,10 @@ interface AtomicCheckboxProps extends Omit<React$1.InputHTMLAttributes<HTMLInput
     description?: string;
     error?: boolean;
     errorMessage?: string;
-    onChange?: (checked: boolean, event: React$1.ChangeEvent<HTMLInputElement>) => void;
-    onInputChange?: React$1.ChangeEventHandler<HTMLInputElement>;
+    onChange?: (checked: boolean, event: React.ChangeEvent<HTMLInputElement>) => void;
+    onInputChange?: React.ChangeEventHandler<HTMLInputElement>;
 }
-declare const AtomicCheckbox: React$1.ForwardRefExoticComponent<AtomicCheckboxProps & React$1.RefAttributes<HTMLInputElement>>;
+declare const AtomicCheckbox: React.ForwardRefExoticComponent<AtomicCheckboxProps & React.RefAttributes<HTMLInputElement>>;
 
 type SwitchSize = 'sm' | 'md' | 'lg';
 type Color$2 = 'slate' | 'gray' | 'zinc' | 'red' | 'orange' | 'yellow' | 'green' | 'blue' | 'indigo' | 'purple' | 'pink';
@@ -997,7 +995,7 @@ type SpacingObject$2 = {
     b?: Spacing$2;
     l?: Spacing$2;
 };
-interface AtomicSwitchProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, 'size' | 'color' | 'onChange'> {
+interface AtomicSwitchProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'color' | 'onChange'> {
     checked?: boolean;
     disabled?: boolean;
     size?: SwitchSize;
@@ -1008,38 +1006,38 @@ interface AtomicSwitchProps extends Omit<React$1.InputHTMLAttributes<HTMLInputEl
     description?: string;
     labelPosition?: 'left' | 'right';
     loading?: boolean;
-    onChange?: (checked: boolean, event: React$1.ChangeEvent<HTMLInputElement>) => void;
-    onInputChange?: React$1.ChangeEventHandler<HTMLInputElement>;
+    onChange?: (checked: boolean, event: React.ChangeEvent<HTMLInputElement>) => void;
+    onInputChange?: React.ChangeEventHandler<HTMLInputElement>;
 }
-declare const AtomicSwitch: React$1.ForwardRefExoticComponent<AtomicSwitchProps & React$1.RefAttributes<HTMLInputElement>>;
+declare const AtomicSwitch: React.ForwardRefExoticComponent<AtomicSwitchProps & React.RefAttributes<HTMLInputElement>>;
 
 declare const spinnerVariants: (props?: ({
     size?: "xs" | "sm" | "lg" | "xl" | "xxl" | "default" | null | undefined;
     color?: "primary" | "secondary" | "success" | "warning" | "error" | "default" | "white" | "muted" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-interface AtomicSpinnerProps extends Omit<React$1.SVGProps<SVGSVGElement>, 'color'>, VariantProps<typeof spinnerVariants> {
+interface AtomicSpinnerProps extends Omit<React.SVGProps<SVGSVGElement>, 'color'>, VariantProps<typeof spinnerVariants> {
     /** Loading text to display alongside spinner */
     label?: string;
     /** Show spinner inline with text */
     inline?: boolean;
     /** Custom spinner icon */
-    icon?: React$1.ComponentType<any>;
+    icon?: LucideIcon;
 }
-declare const AtomicSpinner: React$1.ForwardRefExoticComponent<Omit<AtomicSpinnerProps, "ref"> & React$1.RefAttributes<SVGSVGElement>>;
-declare const AtomicButtonSpinner: React$1.ForwardRefExoticComponent<Omit<Omit<AtomicSpinnerProps, "color" | "size">, "ref"> & React$1.RefAttributes<SVGSVGElement>>;
-declare const AtomicPageSpinner: React$1.ForwardRefExoticComponent<Omit<Omit<AtomicSpinnerProps, "size">, "ref"> & React$1.RefAttributes<SVGSVGElement>>;
-declare const AtomicInlineSpinner: React$1.ForwardRefExoticComponent<Omit<Omit<AtomicSpinnerProps, "inline">, "ref"> & React$1.RefAttributes<SVGSVGElement>>;
+declare const AtomicSpinner: React.ForwardRefExoticComponent<Omit<AtomicSpinnerProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
+declare const AtomicButtonSpinner: React.ForwardRefExoticComponent<Omit<Omit<AtomicSpinnerProps, "color" | "size">, "ref"> & React.RefAttributes<SVGSVGElement>>;
+declare const AtomicPageSpinner: React.ForwardRefExoticComponent<Omit<Omit<AtomicSpinnerProps, "size">, "ref"> & React.RefAttributes<SVGSVGElement>>;
+declare const AtomicInlineSpinner: React.ForwardRefExoticComponent<Omit<Omit<AtomicSpinnerProps, "inline">, "ref"> & React.RefAttributes<SVGSVGElement>>;
 
 declare const badgeVariants: (props?: ({
     variant?: "outline" | "secondary" | "success" | "warning" | "info" | "gray" | "destructive" | "default" | null | undefined;
     size?: "sm" | "lg" | "default" | null | undefined;
     shape?: "default" | "square" | "rounded" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-interface AtomicBadgeProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
+interface AtomicBadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
     /** Icon to display on the left */
-    leftIcon?: React$1.ReactNode;
+    leftIcon?: React.ReactNode;
     /** Icon to display on the right */
-    rightIcon?: React$1.ReactNode;
+    rightIcon?: React.ReactNode;
     /** Show a dot indicator */
     dot?: boolean;
     /** Dot color (overrides variant color) */
@@ -1049,16 +1047,16 @@ interface AtomicBadgeProps extends React$1.HTMLAttributes<HTMLDivElement>, Varia
     /** Callback when remove button is clicked */
     onRemove?: () => void;
     /** Custom remove icon */
-    removeIcon?: React$1.ReactNode;
+    removeIcon?: React.ReactNode;
 }
-declare const AtomicBadge: React$1.ForwardRefExoticComponent<AtomicBadgeProps & React$1.RefAttributes<HTMLDivElement>>;
-declare const AtomicStatusBadge: React$1.ForwardRefExoticComponent<Omit<AtomicBadgeProps, "dot"> & {
+declare const AtomicBadge: React.ForwardRefExoticComponent<AtomicBadgeProps & React.RefAttributes<HTMLDivElement>>;
+declare const AtomicStatusBadge: React.ForwardRefExoticComponent<Omit<AtomicBadgeProps, "dot"> & {
     status: "online" | "offline" | "busy" | "away";
-} & React$1.RefAttributes<HTMLDivElement>>;
-declare const AtomicCountBadge: React$1.ForwardRefExoticComponent<Omit<AtomicBadgeProps, "children"> & {
+} & React.RefAttributes<HTMLDivElement>>;
+declare const AtomicCountBadge: React.ForwardRefExoticComponent<Omit<AtomicBadgeProps, "children"> & {
     count: number;
     max?: number;
-} & React$1.RefAttributes<HTMLDivElement>>;
+} & React.RefAttributes<HTMLDivElement>>;
 
 type TagVariant = 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'outline' | 'ghost' | 'solid';
 type TagSize = 'xs' | 'sm' | 'md' | 'lg';
@@ -1072,8 +1070,8 @@ type SpacingObject$1 = {
     b?: Spacing$1;
     l?: Spacing$1;
 };
-interface AtomicTagProps extends React$1.HTMLAttributes<HTMLSpanElement> {
-    children: React$1.ReactNode;
+interface AtomicTagProps extends React.HTMLAttributes<HTMLElement> {
+    children: React.ReactNode;
     variant?: TagVariant;
     size?: TagSize;
     color?: Color$1;
@@ -1087,21 +1085,21 @@ interface AtomicTagProps extends React$1.HTMLAttributes<HTMLSpanElement> {
     disabled?: boolean;
     as?: 'span' | 'div' | 'button';
 }
-declare const AtomicTag: React$1.ForwardRefExoticComponent<AtomicTagProps & React$1.RefAttributes<HTMLElement>>;
+declare const AtomicTag: React.ForwardRefExoticComponent<AtomicTagProps & React.RefAttributes<HTMLElement>>;
 
 declare const linkVariants: (props?: ({
     variant?: "button" | "primary" | "secondary" | "ghost" | "destructive" | "default" | "underline" | "muted" | null | undefined;
     size?: "sm" | "lg" | "xl" | "default" | null | undefined;
     weight?: "medium" | "normal" | "bold" | "semibold" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-interface AtomicLinkProps extends Omit<React$1.ComponentProps<typeof Link>, 'className'>, VariantProps<typeof linkVariants> {
+interface AtomicLinkProps extends Omit<React.ComponentProps<typeof Link>, 'className'>, VariantProps<typeof linkVariants> {
     className?: string;
     external?: boolean;
     showExternalIcon?: boolean;
     prefetch?: boolean;
-    externalIcon?: React$1.ReactNode;
+    externalIcon?: React.ReactNode;
 }
-declare const AtomicLink: React$1.ForwardRefExoticComponent<Omit<AtomicLinkProps, "ref"> & React$1.RefAttributes<HTMLAnchorElement>>;
+declare const AtomicLink: React.ForwardRefExoticComponent<Omit<AtomicLinkProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
 
 type Display = 'block' | 'inline' | 'inline-block' | 'flex' | 'inline-flex' | 'grid' | 'hidden';
 type AlignItems = 'stretch' | 'start' | 'center' | 'end' | 'baseline';
@@ -1122,7 +1120,7 @@ type Color = 'transparent' | 'current' | 'black' | 'white' | 'slate-50' | 'slate
 type BorderRadius = 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full';
 type Shadow = 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'inner';
 type Position = 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky';
-interface AtomicDivProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, 'color'> {
+interface AtomicDivProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'> {
     d?: Display;
     align?: AlignItems;
     justify?: JustifyContent;
@@ -1152,9 +1150,9 @@ interface AtomicDivProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, 'c
     left?: Spacing;
     cursor?: 'auto' | 'default' | 'pointer' | 'wait' | 'text' | 'move' | 'help' | 'not-allowed';
     as?: keyof JSX.IntrinsicElements;
-    children?: React$1.ReactNode;
+    children?: React.ReactNode;
 }
-declare const AtomicDiv: React$1.ForwardRefExoticComponent<AtomicDivProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const AtomicDiv: React.ForwardRefExoticComponent<AtomicDivProps & React.RefAttributes<HTMLDivElement>>;
 
 type Theme = 'light' | 'dark' | 'system';
 interface AtomicThemeProviderContextProps {
@@ -1163,7 +1161,7 @@ interface AtomicThemeProviderContextProps {
     actualTheme: 'light' | 'dark';
 }
 interface AtomicThemeProviderProps {
-    children: React$1.ReactNode;
+    children: React.ReactNode;
     /** Default theme to use */
     defaultTheme?: Theme;
     /** Storage key for theme persistence */
@@ -1175,9 +1173,9 @@ interface AtomicThemeProviderProps {
     /** Disable theme transitions */
     disableTransitionOnChange?: boolean;
 }
-declare const AtomicThemeProvider: React$1.FC<AtomicThemeProviderProps>;
+declare const AtomicThemeProvider: React.FC<AtomicThemeProviderProps>;
 declare const useAtomicTheme: () => AtomicThemeProviderContextProps;
 
-declare const VERSION = "2.0.2";
+declare const VERSION = "2.1.0";
 
-export { AnimationUtils, AtomicAlertType, type AtomicAlertTypeType, AtomicAlignment, type AtomicAlignmentType, type AtomicAnimationDuration, type AtomicAnimationEasing, AtomicAnimationPresets, type AtomicAnimationRotate, type AtomicAnimationScale, AtomicAnimationState, type AtomicAnimationStateType, AtomicAnimations, AtomicAnimationsCss, AtomicAvatar, AtomicAvatarFallback, AtomicAvatarImage, type AtomicAvatarProps, AtomicBadge, type AtomicBadgeProps, type AtomicBorderRadius, type AtomicBorderStyle, type AtomicBorderWidth, AtomicBorders, AtomicBordersCss, AtomicBreakpoint, type AtomicBreakpointType, AtomicButton, type AtomicButtonProps, AtomicButtonSpinner, AtomicButtonVariant, type AtomicButtonVariantType, AtomicCard, AtomicCardContent, type AtomicCardContentProps, AtomicCardDescription, type AtomicCardDescriptionProps, AtomicCardFooter, type AtomicCardFooterProps, AtomicCardHeader, type AtomicCardHeaderProps, type AtomicCardProps, AtomicCardTitle, type AtomicCardTitleProps, AtomicCardVariant, type AtomicCardVariantType, AtomicCheckbox, type AtomicCheckboxProps, AtomicColorVariant, type AtomicColorVariantType, AtomicColorsCss, AtomicCountBadge, AtomicDesignTokensCss, AtomicDirection, type AtomicDirectionType, AtomicDiv, type AtomicDivProps, AtomicEnumUtils, AtomicFormFieldState, type AtomicFormFieldStateType, AtomicIcon, type AtomicIconProps, AtomicImage, type AtomicImageProps, AtomicInlineSpinner, AtomicInput, type AtomicInputProps, AtomicInputVariant, type AtomicInputVariantType, AtomicLink, type AtomicLinkProps, AtomicLoadingState, type AtomicLoadingStateType, AtomicModalSize, type AtomicModalSizeType, AtomicOrientation, type AtomicOrientationType, AtomicPageSpinner, AtomicPosition, type AtomicPositionType, type AtomicShadowKey, type AtomicShadowValue, AtomicShadows, AtomicShadowsCss, AtomicSize, type AtomicSizeType, AtomicSpacingCss, AtomicSpinner, type AtomicSpinnerProps, AtomicStatus, AtomicStatusBadge, type AtomicStatusType, AtomicSwitch, type AtomicSwitchProps, AtomicTag, type AtomicTagProps, AtomicText, type AtomicTextProps, AtomicTextVariant, type AtomicTextVariantType, AtomicThemeMode, type AtomicThemeModeType, AtomicThemeProvider, AtomicTypographyCss, BorderUtils, ShadowUtils, VERSION, avatarImageVariants, avatarVariants, badgeVariants, buttonVariants, cardDescriptionVariants, cardHeaderVariants, cardTitleVariants, cardVariants, cn, inputVariants, linkVariants, spinnerVariants, textVariants, useAtomicTheme };
+export { AnimationUtils, AtomicAlertType, type AtomicAlertTypeType, AtomicAlignment, type AtomicAlignmentType, type AtomicAnimationDuration, type AtomicAnimationEasing, AtomicAnimationPresets, type AtomicAnimationRotate, type AtomicAnimationScale, AtomicAnimationState, type AtomicAnimationStateType, AtomicAnimations, AtomicAnimationsCss, AtomicAvatar, AtomicAvatarFallback, AtomicAvatarImage, type AtomicAvatarProps, AtomicBadge, type AtomicBadgeProps, type AtomicBorderRadius, type AtomicBorderStyle, type AtomicBorderWidth, AtomicBorders, AtomicBordersCss, AtomicBreakpoint, type AtomicBreakpointType, AtomicButton, type AtomicButtonProps, AtomicButtonSpinner, AtomicButtonVariant, type AtomicButtonVariantType, AtomicCard, AtomicCardContent, type AtomicCardContentProps, AtomicCardDescription, type AtomicCardDescriptionProps, AtomicCardFooter, type AtomicCardFooterProps, AtomicCardHeader, type AtomicCardHeaderProps, type AtomicCardProps, AtomicCardTitle, type AtomicCardTitleProps, AtomicCardVariant, type AtomicCardVariantType, AtomicCheckbox, type AtomicCheckboxProps, AtomicColorVariant, type AtomicColorVariantType, AtomicColorsCss, AtomicCountBadge, AtomicDesignTokensCss, AtomicDirection, type AtomicDirectionType, AtomicDiv, type AtomicDivProps, AtomicEnumUtils, AtomicFormFieldState, type AtomicFormFieldStateType, AtomicIcon, type AtomicIconProps, AtomicImage, type AtomicImageProps, AtomicInlineSpinner, AtomicInput, type AtomicInputProps, AtomicInputVariant, type AtomicInputVariantType, AtomicLink, type AtomicLinkProps, AtomicLoadingState, type AtomicLoadingStateType, AtomicModalSize, type AtomicModalSizeType, AtomicOrientation, type AtomicOrientationType, AtomicPageSpinner, AtomicPosition, type AtomicPositionType, type AtomicShadowKey, type AtomicShadowValue, AtomicShadows, AtomicShadowsCss, AtomicSize, type AtomicSizeType, AtomicSpacingCss, AtomicSpinner, type AtomicSpinnerProps, AtomicStatus, AtomicStatusBadge, type AtomicStatusType, AtomicSwitch, type AtomicSwitchProps, AtomicTag, type AtomicTagProps, AtomicText, type AtomicTextProps, AtomicTextVariant, type AtomicTextVariantType, AtomicThemeMode, type AtomicThemeModeType, AtomicThemeProvider, type AtomicThemeProviderContextProps, AtomicTypographyCss, BorderUtils, ShadowUtils, VERSION, avatarImageVariants, avatarVariants, badgeVariants, buttonVariants, cardDescriptionVariants, cardHeaderVariants, cardTitleVariants, cardVariants, cn, inputVariants, linkVariants, spinnerVariants, textVariants, useAtomicTheme };