@umituz/atomic-next 1.8.3 → 2.0.0

package/dist/index.d.mts

@@ -1,11 +1,11 @@
 import { ClassValue } from 'clsx';
-import * as class_variance_authority_dist_types from 'class-variance-authority/dist/types';
+import * as class_variance_authority_types from 'class-variance-authority/types';
 import React$1 from 'react';
 import { VariantProps } from 'class-variance-authority';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import Image from 'next/image';
-import Link from 'next/link';
 import { LucideProps, LucideIcon } from 'lucide-react';
+import Link from 'next/link';
 
 /**
  * CSS Variables for Web/Next.js usage
@@ -783,7 +783,7 @@ declare function cn(...inputs: ClassValue[]): string;
 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_dist_types.ClassProp) | undefined) => string;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
 interface AtomicButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
     /** Render as a different element */
     asChild?: boolean;
@@ -803,7 +803,7 @@ declare const textVariants: (props?: ({
     color?: "primary" | "secondary" | "success" | "warning" | "error" | "info" | "default" | "muted" | null | undefined;
     align?: "left" | "right" | "center" | "justify" | null | undefined;
     weight?: "thin" | "medium" | "normal" | "light" | "bold" | "black" | "semibold" | "extrabold" | null | undefined;
-} & class_variance_authority_dist_types.ClassProp) | undefined) => string;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
 interface AtomicTextProps extends Omit<React$1.HTMLAttributes<HTMLElement>, 'color'>, VariantProps<typeof textVariants> {
     /** Render as a different element */
     asChild?: boolean;
@@ -818,11 +818,8 @@ declare const AtomicText: React$1.ForwardRefExoticComponent<AtomicTextProps & Re
 
 declare const avatarVariants: (props?: ({
     size?: "xs" | "sm" | "lg" | "xl" | "xxl" | "xxxl" | "default" | null | undefined;
-} & class_variance_authority_dist_types.ClassProp) | undefined) => string;
-declare const avatarImageVariants: (props?: class_variance_authority_dist_types.ClassProp | undefined) => string;
-declare const avatarFallbackVariants: (props?: ({
-    size?: "xs" | "sm" | "lg" | "xl" | "xxl" | "xxxl" | "default" | null | undefined;
-} & class_variance_authority_dist_types.ClassProp) | undefined) => string;
+} & 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> {
     src?: string;
     alt?: string;
@@ -836,14 +833,14 @@ declare const AtomicAvatar: React$1.ForwardRefExoticComponent<AtomicAvatarProps
 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?: ({
     size?: "xs" | "sm" | "lg" | "xl" | "xxl" | "xxxl" | "default" | null | undefined;
-} & class_variance_authority_dist_types.ClassProp) | undefined) => string> & React$1.RefAttributes<HTMLSpanElement>>;
+} & class_variance_authority_types.ClassProp) | undefined) => string> & React$1.RefAttributes<HTMLSpanElement>>;
 
 declare const imageVariants: (props?: ({
     rounded?: "none" | "sm" | "md" | "lg" | "xl" | "full" | null | undefined;
     aspectRatio?: "auto" | "square" | "video" | "portrait" | "landscape" | null | undefined;
     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_dist_types.ClassProp) | undefined) => string;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
 interface AtomicImageProps extends Omit<React$1.ComponentProps<typeof Image>, 'className' | 'objectFit' | 'objectPosition' | 'placeholder'>, VariantProps<typeof imageVariants> {
     className?: string;
     containerClassName?: string;
@@ -854,11 +851,83 @@ interface AtomicImageProps extends Omit<React$1.ComponentProps<typeof Image>, 'c
 }
 declare const AtomicImage: React$1.ForwardRefExoticComponent<Omit<AtomicImageProps, "ref"> & React$1.RefAttributes<HTMLImageElement | null>>;
 
+declare const cardVariants: (props?: ({
+    variant?: "default" | "filled" | "elevated" | "outlined" | null | undefined;
+    size?: "sm" | "md" | "lg" | "xl" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const cardHeaderVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | "xl" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const cardTitleVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | "xl" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const cardDescriptionVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | "xl" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const cardContentVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | "xl" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+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> {
+    /** 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 AtomicCardTitleProps extends React$1.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 AtomicCardContentProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardContentVariants> {
+}
+interface AtomicCardFooterProps extends React$1.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>>;
+
+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';
+type Spacing$4 = '0' | 'px' | '0.5' | '1' | '1.5' | '2' | '2.5' | '3' | '3.5' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | '14' | '16' | '20' | '24' | '28' | '32' | '36' | '40' | '44' | '48';
+type SpacingObject$4 = {
+    x?: Spacing$4;
+    y?: Spacing$4;
+    t?: Spacing$4;
+    r?: Spacing$4;
+    b?: Spacing$4;
+    l?: Spacing$4;
+};
+interface AtomicIconProps extends Omit<LucideProps, 'size' | 'color'> {
+    icon: LucideIcon;
+    size?: IconSize;
+    color?: Color$4;
+    hoverColor?: Color$4;
+    p?: Spacing$4 | SpacingObject$4;
+    m?: Spacing$4 | SpacingObject$4;
+    cursor?: 'auto' | 'default' | 'pointer' | 'wait' | 'help' | 'not-allowed';
+    spin?: boolean;
+    pulse?: boolean;
+    bounce?: boolean;
+    rotate?: '0' | '45' | '90' | '180' | '-45' | '-90' | '-180';
+    'aria-label'?: string;
+    'aria-hidden'?: boolean;
+}
+declare const AtomicIcon: React$1.ForwardRefExoticComponent<Omit<AtomicIconProps, "ref"> & React$1.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_dist_types.ClassProp) | undefined) => string;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
 interface AtomicInputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, 'size'>, VariantProps<typeof inputVariants> {
     /** Left icon or element */
     leftIcon?: React$1.ReactNode;
@@ -889,10 +958,65 @@ interface AtomicInputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputEle
 }
 declare const AtomicInput: React$1.ForwardRefExoticComponent<AtomicInputProps & React$1.RefAttributes<HTMLInputElement>>;
 
+type CheckboxSize = 'sm' | 'md' | 'lg';
+type Color$3 = 'slate' | 'gray' | 'zinc' | 'red' | 'orange' | 'yellow' | 'green' | 'blue' | 'indigo' | 'purple' | 'pink';
+type Spacing$3 = '0' | 'px' | '0.5' | '1' | '1.5' | '2' | '2.5' | '3' | '3.5' | '4' | '5' | '6' | '7' | '8';
+type SpacingObject$3 = {
+    x?: Spacing$3;
+    y?: Spacing$3;
+    t?: Spacing$3;
+    r?: Spacing$3;
+    b?: Spacing$3;
+    l?: Spacing$3;
+};
+interface AtomicCheckboxProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, 'size' | 'color' | 'onChange'> {
+    checked?: boolean;
+    indeterminate?: boolean;
+    disabled?: boolean;
+    size?: CheckboxSize;
+    color?: Color$3;
+    p?: Spacing$3 | SpacingObject$3;
+    m?: Spacing$3 | SpacingObject$3;
+    label?: string;
+    description?: string;
+    error?: boolean;
+    errorMessage?: string;
+    onChange?: (checked: boolean, event: React$1.ChangeEvent<HTMLInputElement>) => void;
+    onInputChange?: React$1.ChangeEventHandler<HTMLInputElement>;
+}
+declare const AtomicCheckbox: React$1.ForwardRefExoticComponent<AtomicCheckboxProps & React$1.RefAttributes<HTMLInputElement>>;
+
+type SwitchSize = 'sm' | 'md' | 'lg';
+type Color$2 = 'slate' | 'gray' | 'zinc' | 'red' | 'orange' | 'yellow' | 'green' | 'blue' | 'indigo' | 'purple' | 'pink';
+type Spacing$2 = '0' | 'px' | '0.5' | '1' | '1.5' | '2' | '2.5' | '3' | '3.5' | '4' | '5' | '6' | '7' | '8';
+type SpacingObject$2 = {
+    x?: Spacing$2;
+    y?: Spacing$2;
+    t?: Spacing$2;
+    r?: Spacing$2;
+    b?: Spacing$2;
+    l?: Spacing$2;
+};
+interface AtomicSwitchProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, 'size' | 'color' | 'onChange'> {
+    checked?: boolean;
+    disabled?: boolean;
+    size?: SwitchSize;
+    color?: Color$2;
+    p?: Spacing$2 | SpacingObject$2;
+    m?: Spacing$2 | SpacingObject$2;
+    label?: string;
+    description?: string;
+    labelPosition?: 'left' | 'right';
+    loading?: boolean;
+    onChange?: (checked: boolean, event: React$1.ChangeEvent<HTMLInputElement>) => void;
+    onInputChange?: React$1.ChangeEventHandler<HTMLInputElement>;
+}
+declare const AtomicSwitch: React$1.ForwardRefExoticComponent<AtomicSwitchProps & React$1.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_dist_types.ClassProp) | undefined) => string;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
 interface AtomicSpinnerProps extends Omit<React$1.SVGProps<SVGSVGElement>, 'color'>, VariantProps<typeof spinnerVariants> {
     /** Loading text to display alongside spinner */
     label?: string;
@@ -910,7 +1034,7 @@ 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_dist_types.ClassProp) | undefined) => string;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
 interface AtomicBadgeProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
     /** Icon to display on the left */
     leftIcon?: React$1.ReactNode;
@@ -936,11 +1060,40 @@ declare const AtomicCountBadge: React$1.ForwardRefExoticComponent<Omit<AtomicBad
     max?: number;
 } & React$1.RefAttributes<HTMLDivElement>>;
 
+type TagVariant = 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'outline' | 'ghost' | 'solid';
+type TagSize = 'xs' | 'sm' | 'md' | 'lg';
+type Color$1 = 'slate' | 'gray' | 'zinc' | 'red' | 'orange' | 'yellow' | 'green' | 'blue' | 'indigo' | 'purple' | 'pink';
+type Spacing$1 = '0' | 'px' | '0.5' | '1' | '1.5' | '2' | '2.5' | '3' | '3.5' | '4' | '5' | '6' | '7' | '8';
+type SpacingObject$1 = {
+    x?: Spacing$1;
+    y?: Spacing$1;
+    t?: Spacing$1;
+    r?: Spacing$1;
+    b?: Spacing$1;
+    l?: Spacing$1;
+};
+interface AtomicTagProps extends React$1.HTMLAttributes<HTMLSpanElement> {
+    children: React$1.ReactNode;
+    variant?: TagVariant;
+    size?: TagSize;
+    color?: Color$1;
+    leftIcon?: LucideIcon;
+    rightIcon?: LucideIcon;
+    p?: Spacing$1 | SpacingObject$1;
+    m?: Spacing$1 | SpacingObject$1;
+    clickable?: boolean;
+    removable?: boolean;
+    onRemove?: () => void;
+    disabled?: boolean;
+    as?: 'span' | 'div' | 'button';
+}
+declare const AtomicTag: React$1.ForwardRefExoticComponent<AtomicTagProps & React$1.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_dist_types.ClassProp) | undefined) => string;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
 interface AtomicLinkProps extends Omit<React$1.ComponentProps<typeof Link>, 'className'>, VariantProps<typeof linkVariants> {
     className?: string;
     external?: boolean;
@@ -955,17 +1108,17 @@ type AlignItems = 'stretch' | 'start' | 'center' | 'end' | 'baseline';
 type JustifyContent = 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly';
 type FlexDirection = 'row' | 'row-reverse' | 'col' | 'col-reverse';
 type FlexWrap = 'wrap' | 'wrap-reverse' | 'nowrap';
-type Spacing$4 = '0' | 'px' | '0.5' | '1' | '1.5' | '2' | '2.5' | '3' | '3.5' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | '14' | '16' | '20' | '24' | '28' | '32' | '36' | '40' | '44' | '48' | '52' | '56' | '60' | '64' | '72' | '80' | '96';
-type SpacingObject$4 = {
-    x?: Spacing$4;
-    y?: Spacing$4;
-    t?: Spacing$4;
-    r?: Spacing$4;
-    b?: Spacing$4;
-    l?: Spacing$4;
+type Spacing = '0' | 'px' | '0.5' | '1' | '1.5' | '2' | '2.5' | '3' | '3.5' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | '14' | '16' | '20' | '24' | '28' | '32' | '36' | '40' | '44' | '48' | '52' | '56' | '60' | '64' | '72' | '80' | '96';
+type SpacingObject = {
+    x?: Spacing;
+    y?: Spacing;
+    t?: Spacing;
+    r?: Spacing;
+    b?: Spacing;
+    l?: Spacing;
 };
-type Size = Spacing$4 | 'auto' | 'full' | 'screen' | 'min' | 'max' | 'fit';
-type Color$4 = 'transparent' | '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';
+type Size = Spacing | 'auto' | 'full' | 'screen' | 'min' | 'max' | 'fit';
+type Color = 'transparent' | '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';
 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';
@@ -978,187 +1131,31 @@ interface AtomicDivProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, 'c
     flexGrow?: number;
     flexShrink?: number;
     order?: number;
-    p?: Spacing$4 | SpacingObject$4;
-    m?: Spacing$4 | SpacingObject$4;
+    p?: Spacing | SpacingObject;
+    m?: Spacing | SpacingObject;
     w?: Size;
     h?: Size;
     minW?: Size;
     minH?: Size;
     maxW?: Size;
     maxH?: Size;
-    bg?: Color$4;
+    bg?: Color;
     bgGradient?: string;
     border?: boolean | string;
-    borderColor?: Color$4;
+    borderColor?: Color;
     rounded?: BorderRadius;
     shadow?: Shadow;
     position?: Position;
-    top?: Spacing$4;
-    right?: Spacing$4;
-    bottom?: Spacing$4;
-    left?: Spacing$4;
+    top?: Spacing;
+    right?: Spacing;
+    bottom?: Spacing;
+    left?: Spacing;
     cursor?: 'auto' | 'default' | 'pointer' | 'wait' | 'text' | 'move' | 'help' | 'not-allowed';
     as?: keyof JSX.IntrinsicElements;
     children?: React$1.ReactNode;
 }
 declare const AtomicDiv: React$1.ForwardRefExoticComponent<AtomicDivProps & React$1.RefAttributes<HTMLDivElement>>;
 
-type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | number | string;
-type Color$3 = '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';
-type Spacing$3 = '0' | 'px' | '0.5' | '1' | '1.5' | '2' | '2.5' | '3' | '3.5' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | '14' | '16' | '20' | '24' | '28' | '32' | '36' | '40' | '44' | '48';
-type SpacingObject$3 = {
-    x?: Spacing$3;
-    y?: Spacing$3;
-    t?: Spacing$3;
-    r?: Spacing$3;
-    b?: Spacing$3;
-    l?: Spacing$3;
-};
-interface AtomicIconProps extends Omit<LucideProps, 'size' | 'color'> {
-    icon: LucideIcon;
-    size?: IconSize;
-    color?: Color$3;
-    hoverColor?: Color$3;
-    p?: Spacing$3 | SpacingObject$3;
-    m?: Spacing$3 | SpacingObject$3;
-    cursor?: 'auto' | 'default' | 'pointer' | 'wait' | 'help' | 'not-allowed';
-    spin?: boolean;
-    pulse?: boolean;
-    bounce?: boolean;
-    rotate?: '0' | '45' | '90' | '180' | '-45' | '-90' | '-180';
-    'aria-label'?: string;
-    'aria-hidden'?: boolean;
-}
-declare const AtomicIcon: React$1.ForwardRefExoticComponent<Omit<AtomicIconProps, "ref"> & React$1.RefAttributes<SVGSVGElement>>;
-
-type TagVariant = 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'outline' | 'ghost' | 'solid';
-type TagSize = 'xs' | 'sm' | 'md' | 'lg';
-type Color$2 = 'slate' | 'gray' | 'zinc' | 'red' | 'orange' | 'yellow' | 'green' | 'blue' | 'indigo' | 'purple' | 'pink';
-type Spacing$2 = '0' | 'px' | '0.5' | '1' | '1.5' | '2' | '2.5' | '3' | '3.5' | '4' | '5' | '6' | '7' | '8';
-type SpacingObject$2 = {
-    x?: Spacing$2;
-    y?: Spacing$2;
-    t?: Spacing$2;
-    r?: Spacing$2;
-    b?: Spacing$2;
-    l?: Spacing$2;
-};
-interface AtomicTagProps extends React$1.HTMLAttributes<HTMLSpanElement> {
-    children: React$1.ReactNode;
-    variant?: TagVariant;
-    size?: TagSize;
-    color?: Color$2;
-    leftIcon?: LucideIcon;
-    rightIcon?: LucideIcon;
-    p?: Spacing$2 | SpacingObject$2;
-    m?: Spacing$2 | SpacingObject$2;
-    clickable?: boolean;
-    removable?: boolean;
-    onRemove?: () => void;
-    disabled?: boolean;
-    as?: 'span' | 'div' | 'button';
-}
-declare const AtomicTag: React$1.ForwardRefExoticComponent<AtomicTagProps & React$1.RefAttributes<HTMLElement>>;
-
-type CheckboxSize = 'sm' | 'md' | 'lg';
-type Color$1 = 'slate' | 'gray' | 'zinc' | 'red' | 'orange' | 'yellow' | 'green' | 'blue' | 'indigo' | 'purple' | 'pink';
-type Spacing$1 = '0' | 'px' | '0.5' | '1' | '1.5' | '2' | '2.5' | '3' | '3.5' | '4' | '5' | '6' | '7' | '8';
-type SpacingObject$1 = {
-    x?: Spacing$1;
-    y?: Spacing$1;
-    t?: Spacing$1;
-    r?: Spacing$1;
-    b?: Spacing$1;
-    l?: Spacing$1;
-};
-interface AtomicCheckboxProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, 'size' | 'color' | 'onChange'> {
-    checked?: boolean;
-    indeterminate?: boolean;
-    disabled?: boolean;
-    size?: CheckboxSize;
-    color?: Color$1;
-    p?: Spacing$1 | SpacingObject$1;
-    m?: Spacing$1 | SpacingObject$1;
-    label?: string;
-    description?: string;
-    error?: boolean;
-    errorMessage?: string;
-    onChange?: (checked: boolean, event: React$1.ChangeEvent<HTMLInputElement>) => void;
-    onInputChange?: React$1.ChangeEventHandler<HTMLInputElement>;
-}
-declare const AtomicCheckbox: React$1.ForwardRefExoticComponent<AtomicCheckboxProps & React$1.RefAttributes<HTMLInputElement>>;
-
-type SwitchSize = 'sm' | 'md' | 'lg';
-type Color = 'slate' | 'gray' | 'zinc' | 'red' | 'orange' | 'yellow' | 'green' | 'blue' | 'indigo' | 'purple' | 'pink';
-type Spacing = '0' | 'px' | '0.5' | '1' | '1.5' | '2' | '2.5' | '3' | '3.5' | '4' | '5' | '6' | '7' | '8';
-type SpacingObject = {
-    x?: Spacing;
-    y?: Spacing;
-    t?: Spacing;
-    r?: Spacing;
-    b?: Spacing;
-    l?: Spacing;
-};
-interface AtomicSwitchProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, 'size' | 'color' | 'onChange'> {
-    checked?: boolean;
-    disabled?: boolean;
-    size?: SwitchSize;
-    color?: Color;
-    p?: Spacing | SpacingObject;
-    m?: Spacing | SpacingObject;
-    label?: string;
-    description?: string;
-    labelPosition?: 'left' | 'right';
-    loading?: boolean;
-    onChange?: (checked: boolean, event: React$1.ChangeEvent<HTMLInputElement>) => void;
-    onInputChange?: React$1.ChangeEventHandler<HTMLInputElement>;
-}
-declare const AtomicSwitch: React$1.ForwardRefExoticComponent<AtomicSwitchProps & React$1.RefAttributes<HTMLInputElement>>;
-
-declare const cardVariants: (props?: ({
-    variant?: "default" | "filled" | "elevated" | "outlined" | null | undefined;
-    size?: "sm" | "md" | "lg" | "xl" | null | undefined;
-} & class_variance_authority_dist_types.ClassProp) | undefined) => string;
-declare const cardHeaderVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | "xl" | null | undefined;
-} & class_variance_authority_dist_types.ClassProp) | undefined) => string;
-declare const cardTitleVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | "xl" | null | undefined;
-} & class_variance_authority_dist_types.ClassProp) | undefined) => string;
-declare const cardDescriptionVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | "xl" | null | undefined;
-} & class_variance_authority_dist_types.ClassProp) | undefined) => string;
-declare const cardContentVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | "xl" | null | undefined;
-} & class_variance_authority_dist_types.ClassProp) | undefined) => string;
-declare const cardFooterVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | "xl" | null | undefined;
-} & class_variance_authority_dist_types.ClassProp) | undefined) => string;
-interface AtomicCardProps extends React$1.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 AtomicCardTitleProps extends React$1.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 AtomicCardContentProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardContentVariants> {
-}
-interface AtomicCardFooterProps extends React$1.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>>;
-
 type Theme = 'light' | 'dark' | 'system';
 interface AtomicThemeProviderContextProps {
     theme: Theme;
@@ -1181,6 +1178,6 @@ interface AtomicThemeProviderProps {
 declare const AtomicThemeProvider: React$1.FC<AtomicThemeProviderProps>;
 declare const useAtomicTheme: () => AtomicThemeProviderContextProps;
 
-declare const VERSION = "1.1.0";
+declare const VERSION = "2.0.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, type AtomicThemeProviderContextProps, type AtomicThemeProviderProps, AtomicTypographyCss, BorderUtils, ShadowUtils, VERSION, avatarFallbackVariants, avatarImageVariants, avatarVariants, badgeVariants, buttonVariants, cardContentVariants, cardDescriptionVariants, cardFooterVariants, cardHeaderVariants, cardTitleVariants, cardVariants, cn, imageVariants, 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, AtomicTypographyCss, BorderUtils, ShadowUtils, VERSION, avatarImageVariants, avatarVariants, badgeVariants, buttonVariants, cardDescriptionVariants, cardHeaderVariants, cardTitleVariants, cardVariants, cn, inputVariants, linkVariants, spinnerVariants, textVariants, useAtomicTheme };