@umituz/atomic-next 1.8.3 → 1.9.0

package/dist/index.d.mts

@@ -1,778 +1,7 @@
 import { ClassValue } from 'clsx';
-import * as class_variance_authority_dist_types from 'class-variance-authority/dist/types';
-import React$1 from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import React 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';
-
-/**
- * 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;
-    readonly '--atomic-primary-light': string;
-    readonly '--atomic-primary-dark': string;
-    readonly '--atomic-secondary': string;
-    readonly '--atomic-secondary-light': string;
-    readonly '--atomic-secondary-dark': string;
-    readonly '--atomic-accent': string;
-    readonly '--atomic-accent-light': string;
-    readonly '--atomic-accent-dark': string;
-    readonly '--atomic-gray-50': string;
-    readonly '--atomic-gray-100': string;
-    readonly '--atomic-gray-200': string;
-    readonly '--atomic-gray-300': string;
-    readonly '--atomic-gray-400': string;
-    readonly '--atomic-gray-500': string;
-    readonly '--atomic-gray-600': string;
-    readonly '--atomic-gray-700': string;
-    readonly '--atomic-gray-800': string;
-    readonly '--atomic-gray-900': string;
-    readonly '--atomic-success': string;
-    readonly '--atomic-success-light': string;
-    readonly '--atomic-success-dark': string;
-    readonly '--atomic-warning': string;
-    readonly '--atomic-warning-light': string;
-    readonly '--atomic-warning-dark': string;
-    readonly '--atomic-error': string;
-    readonly '--atomic-error-light': string;
-    readonly '--atomic-error-dark': string;
-    readonly '--atomic-info': string;
-    readonly '--atomic-info-light': string;
-    readonly '--atomic-info-dark': string;
-    readonly '--atomic-background': string;
-    readonly '--atomic-background-secondary': string;
-    readonly '--atomic-surface': string;
-    readonly '--atomic-surface-secondary': string;
-    readonly '--atomic-text-primary': string;
-    readonly '--atomic-text-secondary': string;
-    readonly '--atomic-text-tertiary': string;
-    readonly '--atomic-text-disabled': string;
-    readonly '--atomic-text-inverse': string;
-};
-
-/**
- * CSS Variables for Web/Next.js usage
- * These are the only spacing exports needed for atomic-next package
- */
-declare const AtomicSpacingCss: {
-    readonly '--atomic-spacing-unit': `${number}px`;
-    readonly '--atomic-spacing-xxs': `${number}px`;
-    readonly '--atomic-spacing-xs': `${number}px`;
-    readonly '--atomic-spacing-sm': `${number}px`;
-    readonly '--atomic-spacing-md': `${number}px`;
-    readonly '--atomic-spacing-lg': `${number}px`;
-    readonly '--atomic-spacing-xl': `${number}px`;
-    readonly '--atomic-spacing-xxl': `${number}px`;
-    readonly '--atomic-spacing-xxxl': `${number}px`;
-    readonly '--atomic-spacing-huge': `${number}px`;
-    readonly '--atomic-button-padding-x': `${number}px`;
-    readonly '--atomic-button-padding-y': `${number}px`;
-    readonly '--atomic-card-padding': `${number}px`;
-    readonly '--atomic-card-margin': `${number}px`;
-    readonly '--atomic-list-item-padding': `${number}px`;
-    readonly '--atomic-list-item-spacing': `${number}px`;
-    readonly '--atomic-input-padding-x': `${number}px`;
-    readonly '--atomic-input-padding-y': `${number}px`;
-    readonly '--atomic-modal-padding': `${number}px`;
-    readonly '--atomic-section-padding': `${number}px`;
-};
-
-/**
- * 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;
-    readonly '--atomic-font-serif': string;
-    readonly '--atomic-font-mono': string;
-    readonly '--atomic-font-thin': string;
-    readonly '--atomic-font-light': string;
-    readonly '--atomic-font-regular': string;
-    readonly '--atomic-font-medium': string;
-    readonly '--atomic-font-semibold': string;
-    readonly '--atomic-font-bold': string;
-    readonly '--atomic-font-extrabold': string;
-    readonly '--atomic-font-black': string;
-    readonly '--atomic-text-display-large': `${number}px`;
-    readonly '--atomic-text-display-medium': `${number}px`;
-    readonly '--atomic-text-display-small': `${number}px`;
-    readonly '--atomic-text-headline-large': `${number}px`;
-    readonly '--atomic-text-headline-medium': `${number}px`;
-    readonly '--atomic-text-headline-small': `${number}px`;
-    readonly '--atomic-text-title-large': `${number}px`;
-    readonly '--atomic-text-title-medium': `${number}px`;
-    readonly '--atomic-text-title-small': `${number}px`;
-    readonly '--atomic-text-body-large': `${number}px`;
-    readonly '--atomic-text-body-medium': `${number}px`;
-    readonly '--atomic-text-body-small': `${number}px`;
-    readonly '--atomic-text-label-large': `${number}px`;
-    readonly '--atomic-text-label-medium': `${number}px`;
-    readonly '--atomic-text-label-small': `${number}px`;
-    readonly '--atomic-leading-none': string;
-    readonly '--atomic-leading-tight': string;
-    readonly '--atomic-leading-snug': string;
-    readonly '--atomic-leading-normal': string;
-    readonly '--atomic-leading-relaxed': string;
-    readonly '--atomic-leading-loose': string;
-    readonly '--atomic-tracking-tighter': string;
-    readonly '--atomic-tracking-tight': string;
-    readonly '--atomic-tracking-normal': string;
-    readonly '--atomic-tracking-wide': string;
-    readonly '--atomic-tracking-wider': string;
-    readonly '--atomic-tracking-widest': string;
-};
-
-declare const AtomicShadows: {
-    readonly none: "none";
-    readonly xs: "0 1px 2px 0 rgb(0 0 0 / 0.05)";
-    readonly sm: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)";
-    readonly md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
-    readonly lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)";
-    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 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 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)";
-    readonly card: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)";
-    readonly cardHover: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
-    readonly button: "0 1px 2px 0 rgb(0 0 0 / 0.05)";
-    readonly buttonHover: "0 2px 4px 0 rgb(0 0 0 / 0.1)";
-    readonly modal: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)";
-    readonly dropdown: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)";
-    readonly tooltip: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
-};
-declare const ShadowUtils: {
-    get: (name: keyof typeof AtomicShadows) => string;
-    custom: (x: number, y: number, blur: number, spread?: number, color?: string, opacity?: number) => string;
-    combine: (...shadows: (keyof typeof AtomicShadows)[]) => string;
-    focus: (color?: string, opacity?: number) => string;
-    glow: (size?: number, color?: string, opacity?: number) => string;
-};
-declare const AtomicShadowsCss: {
-    readonly '--atomic-shadow-none': "none";
-    readonly '--atomic-shadow-xs': "0 1px 2px 0 rgb(0 0 0 / 0.05)";
-    readonly '--atomic-shadow-sm': "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)";
-    readonly '--atomic-shadow-md': "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
-    readonly '--atomic-shadow-lg': "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)";
-    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-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-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)";
-    readonly '--atomic-shadow-card': "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)";
-    readonly '--atomic-shadow-card-hover': "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
-    readonly '--atomic-shadow-button': "0 1px 2px 0 rgb(0 0 0 / 0.05)";
-    readonly '--atomic-shadow-button-hover': "0 2px 4px 0 rgb(0 0 0 / 0.1)";
-    readonly '--atomic-shadow-modal': "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)";
-    readonly '--atomic-shadow-dropdown': "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)";
-    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];
-
-declare const AtomicBorders: {
-    readonly radius: {
-        readonly none: "0px";
-        readonly xs: "2px";
-        readonly sm: "4px";
-        readonly md: "6px";
-        readonly lg: "8px";
-        readonly xl: "12px";
-        readonly xxl: "16px";
-        readonly xxxl: "24px";
-        readonly full: "9999px";
-    };
-    readonly width: {
-        readonly none: "0px";
-        readonly thin: "1px";
-        readonly medium: "2px";
-        readonly thick: "4px";
-        readonly thicker: "8px";
-    };
-    readonly style: {
-        readonly solid: "solid";
-        readonly dashed: "dashed";
-        readonly dotted: "dotted";
-        readonly double: "double";
-        readonly none: "none";
-    };
-};
-declare const BorderUtils: {
-    radius: (name: keyof typeof AtomicBorders.radius) => string;
-    width: (name: keyof typeof AtomicBorders.width) => string;
-    style: (name: keyof typeof AtomicBorders.style) => string;
-    border: (config: {
-        width?: keyof typeof AtomicBorders.width;
-        style?: keyof typeof AtomicBorders.style;
-        color?: string;
-    }) => string;
-    radiusCorners: {
-        all: (radius: keyof typeof AtomicBorders.radius) => {
-            borderRadius: "0px" | "2px" | "4px" | "6px" | "8px" | "12px" | "16px" | "24px" | "9999px";
-        };
-        top: (radius: keyof typeof AtomicBorders.radius) => {
-            borderTopLeftRadius: "0px" | "2px" | "4px" | "6px" | "8px" | "12px" | "16px" | "24px" | "9999px";
-            borderTopRightRadius: "0px" | "2px" | "4px" | "6px" | "8px" | "12px" | "16px" | "24px" | "9999px";
-        };
-        right: (radius: keyof typeof AtomicBorders.radius) => {
-            borderTopRightRadius: "0px" | "2px" | "4px" | "6px" | "8px" | "12px" | "16px" | "24px" | "9999px";
-            borderBottomRightRadius: "0px" | "2px" | "4px" | "6px" | "8px" | "12px" | "16px" | "24px" | "9999px";
-        };
-        bottom: (radius: keyof typeof AtomicBorders.radius) => {
-            borderBottomLeftRadius: "0px" | "2px" | "4px" | "6px" | "8px" | "12px" | "16px" | "24px" | "9999px";
-            borderBottomRightRadius: "0px" | "2px" | "4px" | "6px" | "8px" | "12px" | "16px" | "24px" | "9999px";
-        };
-        left: (radius: keyof typeof AtomicBorders.radius) => {
-            borderTopLeftRadius: "0px" | "2px" | "4px" | "6px" | "8px" | "12px" | "16px" | "24px" | "9999px";
-            borderBottomLeftRadius: "0px" | "2px" | "4px" | "6px" | "8px" | "12px" | "16px" | "24px" | "9999px";
-        };
-        topLeft: (radius: keyof typeof AtomicBorders.radius) => {
-            borderTopLeftRadius: "0px" | "2px" | "4px" | "6px" | "8px" | "12px" | "16px" | "24px" | "9999px";
-        };
-        topRight: (radius: keyof typeof AtomicBorders.radius) => {
-            borderTopRightRadius: "0px" | "2px" | "4px" | "6px" | "8px" | "12px" | "16px" | "24px" | "9999px";
-        };
-        bottomRight: (radius: keyof typeof AtomicBorders.radius) => {
-            borderBottomRightRadius: "0px" | "2px" | "4px" | "6px" | "8px" | "12px" | "16px" | "24px" | "9999px";
-        };
-        bottomLeft: (radius: keyof typeof AtomicBorders.radius) => {
-            borderBottomLeftRadius: "0px" | "2px" | "4px" | "6px" | "8px" | "12px" | "16px" | "24px" | "9999px";
-        };
-    };
-    borderSides: {
-        all: (config: {
-            width?: keyof typeof AtomicBorders.width;
-            style?: keyof typeof AtomicBorders.style;
-            color?: string;
-        }) => {
-            border: string;
-        };
-        top: (config: {
-            width?: keyof typeof AtomicBorders.width;
-            style?: keyof typeof AtomicBorders.style;
-            color?: string;
-        }) => {
-            borderTop: string;
-        };
-        right: (config: {
-            width?: keyof typeof AtomicBorders.width;
-            style?: keyof typeof AtomicBorders.style;
-            color?: string;
-        }) => {
-            borderRight: string;
-        };
-        bottom: (config: {
-            width?: keyof typeof AtomicBorders.width;
-            style?: keyof typeof AtomicBorders.style;
-            color?: string;
-        }) => {
-            borderBottom: string;
-        };
-        left: (config: {
-            width?: keyof typeof AtomicBorders.width;
-            style?: keyof typeof AtomicBorders.style;
-            color?: string;
-        }) => {
-            borderLeft: string;
-        };
-    };
-};
-declare const AtomicBordersCss: {
-    readonly '--atomic-radius-none': "0px";
-    readonly '--atomic-radius-xs': "2px";
-    readonly '--atomic-radius-sm': "4px";
-    readonly '--atomic-radius-md': "6px";
-    readonly '--atomic-radius-lg': "8px";
-    readonly '--atomic-radius-xl': "12px";
-    readonly '--atomic-radius-xxl': "16px";
-    readonly '--atomic-radius-xxxl': "24px";
-    readonly '--atomic-radius-full': "9999px";
-    readonly '--atomic-border-none': "0px";
-    readonly '--atomic-border-thin': "1px";
-    readonly '--atomic-border-medium': "2px";
-    readonly '--atomic-border-thick': "4px";
-    readonly '--atomic-border-thicker': "8px";
-};
-type AtomicBorderRadius = keyof typeof AtomicBorders.radius;
-type AtomicBorderWidth = keyof typeof AtomicBorders.width;
-type AtomicBorderStyle = keyof typeof AtomicBorders.style;
-
-declare const AtomicAnimations: {
-    readonly duration: {
-        readonly instant: "0ms";
-        readonly fast: "150ms";
-        readonly normal: "200ms";
-        readonly slow: "300ms";
-        readonly slower: "500ms";
-        readonly slowest: "700ms";
-    };
-    readonly easing: {
-        readonly linear: "linear";
-        readonly ease: "ease";
-        readonly easeIn: "ease-in";
-        readonly easeOut: "ease-out";
-        readonly easeInOut: "ease-in-out";
-        readonly smooth: "cubic-bezier(0.25, 0.46, 0.45, 0.94)";
-        readonly snappy: "cubic-bezier(0.68, -0.55, 0.265, 1.55)";
-        readonly bounce: "cubic-bezier(0.68, -0.6, 0.32, 1.6)";
-        readonly elastic: "cubic-bezier(0.175, 0.885, 0.32, 1.275)";
-        readonly standard: "cubic-bezier(0.4, 0, 0.2, 1)";
-        readonly decelerate: "cubic-bezier(0, 0, 0.2, 1)";
-        readonly accelerate: "cubic-bezier(0.4, 0, 1, 1)";
-    };
-    readonly scale: {
-        readonly none: "1";
-        readonly xs: "1.025";
-        readonly sm: "1.05";
-        readonly md: "1.1";
-        readonly lg: "1.15";
-        readonly xl: "1.25";
-    };
-    readonly rotate: {
-        readonly none: "0deg";
-        readonly quarter: "90deg";
-        readonly half: "180deg";
-        readonly threeQuarter: "270deg";
-        readonly full: "360deg";
-    };
-};
-declare const AnimationUtils: {
-    transition: (config: {
-        property?: string | string[];
-        duration?: keyof typeof AtomicAnimations.duration;
-        easing?: keyof typeof AtomicAnimations.easing;
-        delay?: keyof typeof AtomicAnimations.duration;
-    }) => {
-        transition: string;
-    };
-    transform: (config: {
-        scale?: keyof typeof AtomicAnimations.scale;
-        rotate?: keyof typeof AtomicAnimations.rotate;
-        translateX?: string;
-        translateY?: string;
-        translateZ?: string;
-    }) => {
-        transform: string;
-    };
-    duration: (name: keyof typeof AtomicAnimations.duration) => string;
-    easing: (name: keyof typeof AtomicAnimations.easing) => string;
-    keyframes: (name: string, frames: Record<string, React.CSSProperties>) => string;
-};
-declare const AtomicAnimationPresets: {
-    fadeIn: {
-        transition: string;
-    };
-    fadeOut: {
-        transition: string;
-    };
-    scaleIn: {
-        transform: string;
-        transition: string;
-    };
-    scaleOut: {
-        transform: string;
-        transition: string;
-    };
-    slideInUp: {
-        transform: string;
-        transition: string;
-    };
-    slideInDown: {
-        transform: string;
-        transition: string;
-    };
-    buttonHover: {
-        transform: string;
-        transition: string;
-    };
-    buttonPress: {
-        transform: string;
-        transition: string;
-    };
-    spin: {
-        animation: string;
-    };
-    pulse: {
-        animation: string;
-    };
-    bounce: {
-        animation: string;
-    };
-};
-declare const AtomicAnimationsCss: {
-    readonly '--atomic-duration-instant': "0ms";
-    readonly '--atomic-duration-fast': "150ms";
-    readonly '--atomic-duration-normal': "200ms";
-    readonly '--atomic-duration-slow': "300ms";
-    readonly '--atomic-duration-slower': "500ms";
-    readonly '--atomic-duration-slowest': "700ms";
-    readonly '--atomic-ease-linear': "linear";
-    readonly '--atomic-ease': "ease";
-    readonly '--atomic-ease-in': "ease-in";
-    readonly '--atomic-ease-out': "ease-out";
-    readonly '--atomic-ease-in-out': "ease-in-out";
-    readonly '--atomic-ease-smooth': "cubic-bezier(0.25, 0.46, 0.45, 0.94)";
-    readonly '--atomic-ease-snappy': "cubic-bezier(0.68, -0.55, 0.265, 1.55)";
-    readonly '--atomic-ease-bounce': "cubic-bezier(0.68, -0.6, 0.32, 1.6)";
-    readonly '--atomic-ease-elastic': "cubic-bezier(0.175, 0.885, 0.32, 1.275)";
-    readonly '--atomic-ease-standard': "cubic-bezier(0.4, 0, 0.2, 1)";
-    readonly '--atomic-ease-decelerate': "cubic-bezier(0, 0, 0.2, 1)";
-    readonly '--atomic-ease-accelerate': "cubic-bezier(0.4, 0, 1, 1)";
-    readonly '--atomic-scale-none': "1";
-    readonly '--atomic-scale-xs': "1.025";
-    readonly '--atomic-scale-sm': "1.05";
-    readonly '--atomic-scale-md': "1.1";
-    readonly '--atomic-scale-lg': "1.15";
-    readonly '--atomic-scale-xl': "1.25";
-};
-type AtomicAnimationDuration = keyof typeof AtomicAnimations.duration;
-type AtomicAnimationEasing = keyof typeof AtomicAnimations.easing;
-type AtomicAnimationScale = keyof typeof AtomicAnimations.scale;
-type AtomicAnimationRotate = keyof typeof AtomicAnimations.rotate;
-
-declare enum AtomicSize {
-    XS = "xs",
-    SM = "sm",
-    MD = "md",
-    LG = "lg",
-    XL = "xl"
-}
-declare enum AtomicColorVariant {
-    PRIMARY = "primary",
-    SECONDARY = "secondary",
-    SUCCESS = "success",
-    WARNING = "warning",
-    ERROR = "error",
-    INFO = "info",
-    GRAY = "gray"
-}
-declare enum AtomicButtonVariant {
-    PRIMARY = "primary",
-    SECONDARY = "secondary",
-    OUTLINE = "outline",
-    GHOST = "ghost",
-    LINK = "link",
-    DESTRUCTIVE = "destructive"
-}
-declare enum AtomicInputVariant {
-    DEFAULT = "default",
-    FILLED = "filled",
-    OUTLINE = "outline",
-    UNDERLINED = "underlined"
-}
-declare enum AtomicCardVariant {
-    DEFAULT = "default",
-    ELEVATED = "elevated",
-    OUTLINED = "outlined",
-    FILLED = "filled"
-}
-declare enum AtomicLoadingState {
-    IDLE = "idle",
-    LOADING = "loading",
-    SUCCESS = "success",
-    ERROR = "error"
-}
-declare enum AtomicStatus {
-    ACTIVE = "active",
-    INACTIVE = "inactive",
-    PENDING = "pending",
-    DISABLED = "disabled",
-    ARCHIVED = "archived"
-}
-declare enum AtomicAlertType {
-    INFO = "info",
-    SUCCESS = "success",
-    WARNING = "warning",
-    ERROR = "error"
-}
-declare enum AtomicModalSize {
-    SM = "sm",
-    MD = "md",
-    LG = "lg",
-    XL = "xl",
-    FULL = "full"
-}
-declare enum AtomicTextVariant {
-    DISPLAY_LARGE = "displayLarge",
-    DISPLAY_MEDIUM = "displayMedium",
-    DISPLAY_SMALL = "displaySmall",
-    HEADLINE_LARGE = "headlineLarge",
-    HEADLINE_MEDIUM = "headlineMedium",
-    HEADLINE_SMALL = "headlineSmall",
-    TITLE_LARGE = "titleLarge",
-    TITLE_MEDIUM = "titleMedium",
-    TITLE_SMALL = "titleSmall",
-    BODY_LARGE = "bodyLarge",
-    BODY_MEDIUM = "bodyMedium",
-    BODY_SMALL = "bodySmall",
-    LABEL_LARGE = "labelLarge",
-    LABEL_MEDIUM = "labelMedium",
-    LABEL_SMALL = "labelSmall"
-}
-declare enum AtomicPosition {
-    TOP = "top",
-    TOP_LEFT = "top-left",
-    TOP_RIGHT = "top-right",
-    BOTTOM = "bottom",
-    BOTTOM_LEFT = "bottom-left",
-    BOTTOM_RIGHT = "bottom-right",
-    LEFT = "left",
-    RIGHT = "right",
-    CENTER = "center"
-}
-declare enum AtomicAlignment {
-    LEFT = "left",
-    CENTER = "center",
-    RIGHT = "right",
-    JUSTIFY = "justify"
-}
-declare enum AtomicOrientation {
-    HORIZONTAL = "horizontal",
-    VERTICAL = "vertical"
-}
-declare enum AtomicDirection {
-    UP = "up",
-    DOWN = "down",
-    LEFT = "left",
-    RIGHT = "right"
-}
-declare enum AtomicAnimationState {
-    ENTER = "enter",
-    EXIT = "exit",
-    IDLE = "idle"
-}
-declare enum AtomicFormFieldState {
-    DEFAULT = "default",
-    FOCUS = "focus",
-    ERROR = "error",
-    SUCCESS = "success",
-    DISABLED = "disabled"
-}
-declare enum AtomicBreakpoint {
-    XS = "xs",
-    SM = "sm",
-    MD = "md",
-    LG = "lg",
-    XL = "xl",
-    XXL = "xxl"
-}
-declare enum AtomicThemeMode {
-    LIGHT = "light",
-    DARK = "dark",
-    SYSTEM = "system"
-}
-type AtomicSizeType = keyof typeof AtomicSize;
-type AtomicColorVariantType = keyof typeof AtomicColorVariant;
-type AtomicButtonVariantType = keyof typeof AtomicButtonVariant;
-type AtomicInputVariantType = keyof typeof AtomicInputVariant;
-type AtomicCardVariantType = keyof typeof AtomicCardVariant;
-type AtomicLoadingStateType = keyof typeof AtomicLoadingState;
-type AtomicStatusType = keyof typeof AtomicStatus;
-type AtomicAlertTypeType = keyof typeof AtomicAlertType;
-type AtomicModalSizeType = keyof typeof AtomicModalSize;
-type AtomicTextVariantType = keyof typeof AtomicTextVariant;
-type AtomicPositionType = keyof typeof AtomicPosition;
-type AtomicAlignmentType = keyof typeof AtomicAlignment;
-type AtomicOrientationType = keyof typeof AtomicOrientation;
-type AtomicDirectionType = keyof typeof AtomicDirection;
-type AtomicAnimationStateType = keyof typeof AtomicAnimationState;
-type AtomicFormFieldStateType = keyof typeof AtomicFormFieldState;
-type AtomicBreakpointType = keyof typeof AtomicBreakpoint;
-type AtomicThemeModeType = keyof typeof AtomicThemeMode;
-declare const AtomicEnumUtils: {
-    getValues: <T extends Record<string, string>>(enumObj: T) => string[];
-    getKeys: <T extends Record<string, string>>(enumObj: T) => string[];
-    hasValue: <T extends Record<string, string>>(enumObj: T, value: string) => value is T[keyof T];
-    hasKey: <T extends Record<string, string>>(enumObj: T, key: string) => key is string;
-    getEntries: <T extends Record<string, string>>(enumObj: T) => [string, string][];
-};
-
-declare const AtomicDesignTokensCss: {
-    readonly '--atomic-duration-instant': "0ms";
-    readonly '--atomic-duration-fast': "150ms";
-    readonly '--atomic-duration-normal': "200ms";
-    readonly '--atomic-duration-slow': "300ms";
-    readonly '--atomic-duration-slower': "500ms";
-    readonly '--atomic-duration-slowest': "700ms";
-    readonly '--atomic-ease-linear': "linear";
-    readonly '--atomic-ease': "ease";
-    readonly '--atomic-ease-in': "ease-in";
-    readonly '--atomic-ease-out': "ease-out";
-    readonly '--atomic-ease-in-out': "ease-in-out";
-    readonly '--atomic-ease-smooth': "cubic-bezier(0.25, 0.46, 0.45, 0.94)";
-    readonly '--atomic-ease-snappy': "cubic-bezier(0.68, -0.55, 0.265, 1.55)";
-    readonly '--atomic-ease-bounce': "cubic-bezier(0.68, -0.6, 0.32, 1.6)";
-    readonly '--atomic-ease-elastic': "cubic-bezier(0.175, 0.885, 0.32, 1.275)";
-    readonly '--atomic-ease-standard': "cubic-bezier(0.4, 0, 0.2, 1)";
-    readonly '--atomic-ease-decelerate': "cubic-bezier(0, 0, 0.2, 1)";
-    readonly '--atomic-ease-accelerate': "cubic-bezier(0.4, 0, 1, 1)";
-    readonly '--atomic-scale-none': "1";
-    readonly '--atomic-scale-xs': "1.025";
-    readonly '--atomic-scale-sm': "1.05";
-    readonly '--atomic-scale-md': "1.1";
-    readonly '--atomic-scale-lg': "1.15";
-    readonly '--atomic-scale-xl': "1.25";
-    readonly '--atomic-radius-none': "0px";
-    readonly '--atomic-radius-xs': "2px";
-    readonly '--atomic-radius-sm': "4px";
-    readonly '--atomic-radius-md': "6px";
-    readonly '--atomic-radius-lg': "8px";
-    readonly '--atomic-radius-xl': "12px";
-    readonly '--atomic-radius-xxl': "16px";
-    readonly '--atomic-radius-xxxl': "24px";
-    readonly '--atomic-radius-full': "9999px";
-    readonly '--atomic-border-none': "0px";
-    readonly '--atomic-border-thin': "1px";
-    readonly '--atomic-border-medium': "2px";
-    readonly '--atomic-border-thick': "4px";
-    readonly '--atomic-border-thicker': "8px";
-    readonly '--atomic-shadow-none': "none";
-    readonly '--atomic-shadow-xs': "0 1px 2px 0 rgb(0 0 0 / 0.05)";
-    readonly '--atomic-shadow-sm': "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)";
-    readonly '--atomic-shadow-md': "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
-    readonly '--atomic-shadow-lg': "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)";
-    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-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-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)";
-    readonly '--atomic-shadow-card': "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)";
-    readonly '--atomic-shadow-card-hover': "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
-    readonly '--atomic-shadow-button': "0 1px 2px 0 rgb(0 0 0 / 0.05)";
-    readonly '--atomic-shadow-button-hover': "0 2px 4px 0 rgb(0 0 0 / 0.1)";
-    readonly '--atomic-shadow-modal': "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)";
-    readonly '--atomic-shadow-dropdown': "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)";
-    readonly '--atomic-shadow-tooltip': "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
-    readonly '--atomic-font-sans': string;
-    readonly '--atomic-font-serif': string;
-    readonly '--atomic-font-mono': string;
-    readonly '--atomic-font-thin': string;
-    readonly '--atomic-font-light': string;
-    readonly '--atomic-font-regular': string;
-    readonly '--atomic-font-medium': string;
-    readonly '--atomic-font-semibold': string;
-    readonly '--atomic-font-bold': string;
-    readonly '--atomic-font-extrabold': string;
-    readonly '--atomic-font-black': string;
-    readonly '--atomic-text-display-large': `${number}px`;
-    readonly '--atomic-text-display-medium': `${number}px`;
-    readonly '--atomic-text-display-small': `${number}px`;
-    readonly '--atomic-text-headline-large': `${number}px`;
-    readonly '--atomic-text-headline-medium': `${number}px`;
-    readonly '--atomic-text-headline-small': `${number}px`;
-    readonly '--atomic-text-title-large': `${number}px`;
-    readonly '--atomic-text-title-medium': `${number}px`;
-    readonly '--atomic-text-title-small': `${number}px`;
-    readonly '--atomic-text-body-large': `${number}px`;
-    readonly '--atomic-text-body-medium': `${number}px`;
-    readonly '--atomic-text-body-small': `${number}px`;
-    readonly '--atomic-text-label-large': `${number}px`;
-    readonly '--atomic-text-label-medium': `${number}px`;
-    readonly '--atomic-text-label-small': `${number}px`;
-    readonly '--atomic-leading-none': string;
-    readonly '--atomic-leading-tight': string;
-    readonly '--atomic-leading-snug': string;
-    readonly '--atomic-leading-normal': string;
-    readonly '--atomic-leading-relaxed': string;
-    readonly '--atomic-leading-loose': string;
-    readonly '--atomic-tracking-tighter': string;
-    readonly '--atomic-tracking-tight': string;
-    readonly '--atomic-tracking-normal': string;
-    readonly '--atomic-tracking-wide': string;
-    readonly '--atomic-tracking-wider': string;
-    readonly '--atomic-tracking-widest': string;
-    readonly '--atomic-spacing-unit': `${number}px`;
-    readonly '--atomic-spacing-xxs': `${number}px`;
-    readonly '--atomic-spacing-xs': `${number}px`;
-    readonly '--atomic-spacing-sm': `${number}px`;
-    readonly '--atomic-spacing-md': `${number}px`;
-    readonly '--atomic-spacing-lg': `${number}px`;
-    readonly '--atomic-spacing-xl': `${number}px`;
-    readonly '--atomic-spacing-xxl': `${number}px`;
-    readonly '--atomic-spacing-xxxl': `${number}px`;
-    readonly '--atomic-spacing-huge': `${number}px`;
-    readonly '--atomic-button-padding-x': `${number}px`;
-    readonly '--atomic-button-padding-y': `${number}px`;
-    readonly '--atomic-card-padding': `${number}px`;
-    readonly '--atomic-card-margin': `${number}px`;
-    readonly '--atomic-list-item-padding': `${number}px`;
-    readonly '--atomic-list-item-spacing': `${number}px`;
-    readonly '--atomic-input-padding-x': `${number}px`;
-    readonly '--atomic-input-padding-y': `${number}px`;
-    readonly '--atomic-modal-padding': `${number}px`;
-    readonly '--atomic-section-padding': `${number}px`;
-    readonly '--atomic-primary': string;
-    readonly '--atomic-primary-light': string;
-    readonly '--atomic-primary-dark': string;
-    readonly '--atomic-secondary': string;
-    readonly '--atomic-secondary-light': string;
-    readonly '--atomic-secondary-dark': string;
-    readonly '--atomic-accent': string;
-    readonly '--atomic-accent-light': string;
-    readonly '--atomic-accent-dark': string;
-    readonly '--atomic-gray-50': string;
-    readonly '--atomic-gray-100': string;
-    readonly '--atomic-gray-200': string;
-    readonly '--atomic-gray-300': string;
-    readonly '--atomic-gray-400': string;
-    readonly '--atomic-gray-500': string;
-    readonly '--atomic-gray-600': string;
-    readonly '--atomic-gray-700': string;
-    readonly '--atomic-gray-800': string;
-    readonly '--atomic-gray-900': string;
-    readonly '--atomic-success': string;
-    readonly '--atomic-success-light': string;
-    readonly '--atomic-success-dark': string;
-    readonly '--atomic-warning': string;
-    readonly '--atomic-warning-light': string;
-    readonly '--atomic-warning-dark': string;
-    readonly '--atomic-error': string;
-    readonly '--atomic-error-light': string;
-    readonly '--atomic-error-dark': string;
-    readonly '--atomic-info': string;
-    readonly '--atomic-info-light': string;
-    readonly '--atomic-info-dark': string;
-    readonly '--atomic-background': string;
-    readonly '--atomic-background-secondary': string;
-    readonly '--atomic-surface': string;
-    readonly '--atomic-surface-secondary': string;
-    readonly '--atomic-text-primary': string;
-    readonly '--atomic-text-secondary': string;
-    readonly '--atomic-text-tertiary': string;
-    readonly '--atomic-text-disabled': string;
-    readonly '--atomic-text-inverse': string;
-};
 
 declare function cn(...inputs: ClassValue[]): string;
 
@@ -781,406 +10,21 @@ declare function cn(...inputs: ClassValue[]): string;
  * For React Native equivalent, see AtomicButton.tsx.template with StyleSheet-based variants
  */
 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;
-interface AtomicButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    variant?: "default" | "primary" | "brand" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+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 textVariants: (props?: ({
-    variant?: "xs" | "small" | "large" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "body" | "lead" | "muted" | "label" | null | undefined;
-    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;
-interface AtomicTextProps extends Omit<React$1.HTMLAttributes<HTMLElement>, 'color'>, VariantProps<typeof textVariants> {
-    /** Render as a different element */
-    asChild?: boolean;
-    /** HTML element to render */
-    as?: 'p' | 'span' | 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'label';
-    /** Truncate text with ellipsis */
-    truncate?: boolean;
-    /** Allow text selection */
-    selectable?: boolean;
-}
-declare const AtomicText: React$1.ForwardRefExoticComponent<AtomicTextProps & React$1.RefAttributes<HTMLElement>>;
-
-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;
-interface AtomicAvatarProps extends React$1.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>, VariantProps<typeof avatarVariants> {
-    src?: string;
-    alt?: string;
-    fallback?: string;
-    fallbackElement?: React$1.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?: ({
-    size?: "xs" | "sm" | "lg" | "xl" | "xxl" | "xxxl" | "default" | null | undefined;
-} & class_variance_authority_dist_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;
-interface AtomicImageProps extends Omit<React$1.ComponentProps<typeof Image>, 'className' | 'objectFit' | 'objectPosition' | 'placeholder'>, VariantProps<typeof imageVariants> {
-    className?: string;
-    containerClassName?: string;
-    /** Enable blur placeholder while loading */
-    enableBlur?: boolean;
-    /** Custom placeholder image source */
-    placeholderSrc?: string;
-}
-declare const AtomicImage: React$1.ForwardRefExoticComponent<Omit<AtomicImageProps, "ref"> & React$1.RefAttributes<HTMLImageElement | null>>;
-
-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;
-interface AtomicInputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, 'size'>, VariantProps<typeof inputVariants> {
-    /** Left icon or element */
-    leftIcon?: React$1.ReactNode;
-    /** Right icon or element */
-    rightIcon?: React$1.ReactNode;
-    /** Input label */
-    label?: string;
-    /** Helper text */
-    helperText?: string;
-    /** Error message */
-    error?: string;
-    /** Success message */
-    success?: string;
-    /** Warning message */
-    warning?: string;
-    /** Show clear button when input has value */
-    clearable?: boolean;
-    /** Callback when clear button is clicked */
-    onClear?: () => void;
-    /** Show password toggle for password inputs */
-    showPasswordToggle?: boolean;
-    /** Container class name */
-    containerClassName?: string;
-    /** Label class name */
-    labelClassName?: string;
-    /** Helper text class name */
-    helperClassName?: string;
-}
-declare const AtomicInput: React$1.ForwardRefExoticComponent<AtomicInputProps & 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;
-interface AtomicSpinnerProps extends Omit<React$1.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>;
-}
-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 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;
-interface AtomicBadgeProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
-    /** Icon to display on the left */
-    leftIcon?: React$1.ReactNode;
-    /** Icon to display on the right */
-    rightIcon?: React$1.ReactNode;
-    /** Show a dot indicator */
-    dot?: boolean;
-    /** Dot color (overrides variant color) */
-    dotColor?: string;
-    /** Make badge removable */
-    removable?: boolean;
-    /** Callback when remove button is clicked */
-    onRemove?: () => void;
-    /** Custom remove icon */
-    removeIcon?: React$1.ReactNode;
-}
-declare const AtomicBadge: React$1.ForwardRefExoticComponent<AtomicBadgeProps & React$1.RefAttributes<HTMLDivElement>>;
-declare const AtomicStatusBadge: React$1.ForwardRefExoticComponent<Omit<AtomicBadgeProps, "dot"> & {
-    status: "online" | "offline" | "busy" | "away";
-} & React$1.RefAttributes<HTMLDivElement>>;
-declare const AtomicCountBadge: React$1.ForwardRefExoticComponent<Omit<AtomicBadgeProps, "children"> & {
-    count: number;
-    max?: number;
-} & React$1.RefAttributes<HTMLDivElement>>;
-
-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;
-interface AtomicLinkProps extends Omit<React$1.ComponentProps<typeof Link>, 'className'>, VariantProps<typeof linkVariants> {
-    className?: string;
-    external?: boolean;
-    showExternalIcon?: boolean;
-    prefetch?: boolean;
-    externalIcon?: React$1.ReactNode;
-}
-declare const AtomicLink: React$1.ForwardRefExoticComponent<Omit<AtomicLinkProps, "ref"> & React$1.RefAttributes<HTMLAnchorElement>>;
-
-type Display = 'block' | 'inline' | 'inline-block' | 'flex' | 'inline-flex' | 'grid' | 'hidden';
-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 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 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'> {
-    d?: Display;
-    align?: AlignItems;
-    justify?: JustifyContent;
-    flexDir?: FlexDirection;
-    flexWrap?: FlexWrap;
-    flexGrow?: number;
-    flexShrink?: number;
-    order?: number;
-    p?: Spacing$4 | SpacingObject$4;
-    m?: Spacing$4 | SpacingObject$4;
-    w?: Size;
-    h?: Size;
-    minW?: Size;
-    minH?: Size;
-    maxW?: Size;
-    maxH?: Size;
-    bg?: Color$4;
-    bgGradient?: string;
-    border?: boolean | string;
-    borderColor?: Color$4;
-    rounded?: BorderRadius;
-    shadow?: Shadow;
-    position?: Position;
-    top?: Spacing$4;
-    right?: Spacing$4;
-    bottom?: Spacing$4;
-    left?: Spacing$4;
-    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;
-    setTheme: (theme: Theme) => void;
-    actualTheme: 'light' | 'dark';
-}
-interface AtomicThemeProviderProps {
-    children: React$1.ReactNode;
-    /** Default theme to use */
-    defaultTheme?: Theme;
-    /** Storage key for theme persistence */
-    storageKey?: string;
-    /** Custom attribute name for theme */
-    attribute?: string;
-    /** Enable system theme detection */
-    enableSystem?: boolean;
-    /** Disable theme transitions */
-    disableTransitionOnChange?: boolean;
-}
-declare const AtomicThemeProvider: React$1.FC<AtomicThemeProviderProps>;
-declare const useAtomicTheme: () => AtomicThemeProviderContextProps;
-
-declare const VERSION = "1.1.0";
+declare const AtomicButton: React.ForwardRefExoticComponent<AtomicButtonProps & React.RefAttributes<HTMLButtonElement>>;
 
-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 { AtomicButton, type AtomicButtonProps, buttonVariants, cn };