@umituz/atomic-next 1.4.0

package/dist/index.d.ts

@@ -0,0 +1,1444 @@
+import { ClassValue } from 'clsx';
+import * as class_variance_authority_dist_types from 'class-variance-authority/dist/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';
+
+declare const AtomicColors: {
+    readonly primary: "#8B5CF6";
+    readonly primaryLight: "#A78BFA";
+    readonly primaryDark: "#7C3AED";
+    readonly secondary: "#EC4899";
+    readonly secondaryLight: "#F472B6";
+    readonly secondaryDark: "#DB2777";
+    readonly accent: "#F59E0B";
+    readonly accentLight: "#FBBF24";
+    readonly accentDark: "#D97706";
+    readonly gray50: "#FAFAFA";
+    readonly gray100: "#F4F4F5";
+    readonly gray200: "#E4E4E7";
+    readonly gray300: "#D4D4D8";
+    readonly gray400: "#A1A1AA";
+    readonly gray500: "#71717A";
+    readonly gray600: "#52525B";
+    readonly gray700: "#3F3F46";
+    readonly gray800: "#27272A";
+    readonly gray900: "#18181B";
+    readonly success: "#10B981";
+    readonly successLight: "#34D399";
+    readonly successDark: "#059669";
+    readonly warning: "#F59E0B";
+    readonly warningLight: "#FBBF24";
+    readonly warningDark: "#D97706";
+    readonly error: "#EF4444";
+    readonly errorLight: "#F87171";
+    readonly errorDark: "#DC2626";
+    readonly info: "#3B82F6";
+    readonly infoLight: "#60A5FA";
+    readonly infoDark: "#2563EB";
+    readonly background: "#FFFFFF";
+    readonly backgroundSecondary: "#F9FAFB";
+    readonly surface: "#FFFFFF";
+    readonly surfaceSecondary: "#F3F4F6";
+    readonly textPrimary: "#18181B";
+    readonly textSecondary: "#52525B";
+    readonly textTertiary: "#A1A1AA";
+    readonly textDisabled: "#D4D4D8";
+    readonly textInverse: "#FFFFFF";
+    readonly transparent: "transparent";
+    readonly current: "currentColor";
+    readonly black: "#000000";
+    readonly white: "#FFFFFF";
+};
+declare const ColorUtils: {
+    withAlpha: (color: string, alpha: number) => string;
+    hexToRgb: (hex: string) => {
+        r: number;
+        g: number;
+        b: number;
+    } | null;
+    hexToHsl: (hex: string) => {
+        h: number;
+        s: number;
+        l: number;
+    } | null;
+};
+declare const AtomicColorsCss: {
+    readonly '--atomic-primary': "#8B5CF6";
+    readonly '--atomic-primary-light': "#A78BFA";
+    readonly '--atomic-primary-dark': "#7C3AED";
+    readonly '--atomic-secondary': "#EC4899";
+    readonly '--atomic-secondary-light': "#F472B6";
+    readonly '--atomic-secondary-dark': "#DB2777";
+    readonly '--atomic-accent': "#F59E0B";
+    readonly '--atomic-accent-light': "#FBBF24";
+    readonly '--atomic-accent-dark': "#D97706";
+    readonly '--atomic-gray-50': "#FAFAFA";
+    readonly '--atomic-gray-100': "#F4F4F5";
+    readonly '--atomic-gray-200': "#E4E4E7";
+    readonly '--atomic-gray-300': "#D4D4D8";
+    readonly '--atomic-gray-400': "#A1A1AA";
+    readonly '--atomic-gray-500': "#71717A";
+    readonly '--atomic-gray-600': "#52525B";
+    readonly '--atomic-gray-700': "#3F3F46";
+    readonly '--atomic-gray-800': "#27272A";
+    readonly '--atomic-gray-900': "#18181B";
+    readonly '--atomic-success': "#10B981";
+    readonly '--atomic-success-light': "#34D399";
+    readonly '--atomic-success-dark': "#059669";
+    readonly '--atomic-warning': "#F59E0B";
+    readonly '--atomic-warning-light': "#FBBF24";
+    readonly '--atomic-warning-dark': "#D97706";
+    readonly '--atomic-error': "#EF4444";
+    readonly '--atomic-error-light': "#F87171";
+    readonly '--atomic-error-dark': "#DC2626";
+    readonly '--atomic-info': "#3B82F6";
+    readonly '--atomic-info-light': "#60A5FA";
+    readonly '--atomic-info-dark': "#2563EB";
+    readonly '--atomic-background': "#FFFFFF";
+    readonly '--atomic-background-secondary': "#F9FAFB";
+    readonly '--atomic-surface': "#FFFFFF";
+    readonly '--atomic-surface-secondary': "#F3F4F6";
+    readonly '--atomic-text-primary': "#18181B";
+    readonly '--atomic-text-secondary': "#52525B";
+    readonly '--atomic-text-tertiary': "#A1A1AA";
+    readonly '--atomic-text-disabled': "#D4D4D8";
+    readonly '--atomic-text-inverse': "#FFFFFF";
+};
+type AtomicColor = keyof typeof AtomicColors;
+type AtomicColorValue = typeof AtomicColors[AtomicColor];
+
+declare const AtomicSpacing: {
+    readonly unit: 8;
+    readonly xxs: 4;
+    readonly xs: 8;
+    readonly sm: 12;
+    readonly md: 16;
+    readonly lg: 24;
+    readonly xl: 32;
+    readonly xxl: 40;
+    readonly xxxl: 48;
+    readonly huge: 64;
+    readonly buttonPaddingX: 16;
+    readonly buttonPaddingY: 12;
+    readonly cardPadding: 24;
+    readonly cardMargin: 16;
+    readonly listItemPadding: 16;
+    readonly listItemSpacing: 8;
+    readonly inputPaddingX: 16;
+    readonly inputPaddingY: 12;
+    readonly modalPadding: 24;
+    readonly sectionPadding: 32;
+};
+declare const SpacingUtils: {
+    get: (name: keyof typeof AtomicSpacing) => number;
+    rem: (name: keyof typeof AtomicSpacing) => string;
+    px: (name: keyof typeof AtomicSpacing) => string;
+    margin: {
+        all: (value: keyof typeof AtomicSpacing) => {
+            margin: string;
+        };
+        top: (value: keyof typeof AtomicSpacing) => {
+            marginTop: string;
+        };
+        right: (value: keyof typeof AtomicSpacing) => {
+            marginRight: string;
+        };
+        bottom: (value: keyof typeof AtomicSpacing) => {
+            marginBottom: string;
+        };
+        left: (value: keyof typeof AtomicSpacing) => {
+            marginLeft: string;
+        };
+        horizontal: (value: keyof typeof AtomicSpacing) => {
+            marginLeft: string;
+            marginRight: string;
+        };
+        vertical: (value: keyof typeof AtomicSpacing) => {
+            marginTop: string;
+            marginBottom: string;
+        };
+    };
+    padding: {
+        all: (value: keyof typeof AtomicSpacing) => {
+            padding: string;
+        };
+        top: (value: keyof typeof AtomicSpacing) => {
+            paddingTop: string;
+        };
+        right: (value: keyof typeof AtomicSpacing) => {
+            paddingRight: string;
+        };
+        bottom: (value: keyof typeof AtomicSpacing) => {
+            paddingBottom: string;
+        };
+        left: (value: keyof typeof AtomicSpacing) => {
+            paddingLeft: string;
+        };
+        horizontal: (value: keyof typeof AtomicSpacing) => {
+            paddingLeft: string;
+            paddingRight: string;
+        };
+        vertical: (value: keyof typeof AtomicSpacing) => {
+            paddingTop: string;
+            paddingBottom: string;
+        };
+    };
+    gap: (value: keyof typeof AtomicSpacing) => {
+        gap: string;
+    };
+};
+declare const AtomicSpacingCss: {
+    readonly '--atomic-spacing-unit': "8px";
+    readonly '--atomic-spacing-xxs': "4px";
+    readonly '--atomic-spacing-xs': "8px";
+    readonly '--atomic-spacing-sm': "12px";
+    readonly '--atomic-spacing-md': "16px";
+    readonly '--atomic-spacing-lg': "24px";
+    readonly '--atomic-spacing-xl': "32px";
+    readonly '--atomic-spacing-xxl': "40px";
+    readonly '--atomic-spacing-xxxl': "48px";
+    readonly '--atomic-spacing-huge': "64px";
+    readonly '--atomic-button-padding-x': "16px";
+    readonly '--atomic-button-padding-y': "12px";
+    readonly '--atomic-card-padding': "24px";
+    readonly '--atomic-card-margin': "16px";
+    readonly '--atomic-list-item-padding': "16px";
+    readonly '--atomic-list-item-spacing': "8px";
+    readonly '--atomic-input-padding-x': "16px";
+    readonly '--atomic-input-padding-y': "12px";
+    readonly '--atomic-modal-padding': "24px";
+    readonly '--atomic-section-padding': "32px";
+};
+type AtomicSpacingKey = keyof typeof AtomicSpacing;
+type AtomicSpacingValue = typeof AtomicSpacing[AtomicSpacingKey];
+
+declare const AtomicTypography: {
+    readonly fontFamily: {
+        readonly sans: readonly ["Inter", "system-ui", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "sans-serif"];
+        readonly serif: readonly ["Charter", "Georgia", "Cambria", "Times New Roman", "Times", "serif"];
+        readonly mono: readonly ["JetBrains Mono", "Fira Code", "Consolas", "Monaco", "Courier New", "monospace"];
+    };
+    readonly fontWeight: {
+        readonly thin: 100;
+        readonly light: 300;
+        readonly regular: 400;
+        readonly medium: 500;
+        readonly semibold: 600;
+        readonly bold: 700;
+        readonly extrabold: 800;
+        readonly black: 900;
+    };
+    readonly fontSize: {
+        readonly displayLarge: 57;
+        readonly displayMedium: 45;
+        readonly displaySmall: 36;
+        readonly headlineLarge: 32;
+        readonly headlineMedium: 28;
+        readonly headlineSmall: 24;
+        readonly titleLarge: 22;
+        readonly titleMedium: 16;
+        readonly titleSmall: 14;
+        readonly bodyLarge: 16;
+        readonly bodyMedium: 14;
+        readonly bodySmall: 12;
+        readonly labelLarge: 14;
+        readonly labelMedium: 12;
+        readonly labelSmall: 11;
+    };
+    readonly lineHeight: {
+        readonly none: 1;
+        readonly tight: 1.25;
+        readonly snug: 1.375;
+        readonly normal: 1.5;
+        readonly relaxed: 1.625;
+        readonly loose: 2;
+    };
+    readonly letterSpacing: {
+        readonly tighter: "-0.05em";
+        readonly tight: "-0.025em";
+        readonly normal: "0em";
+        readonly wide: "0.025em";
+        readonly wider: "0.05em";
+        readonly widest: "0.1em";
+    };
+};
+declare const TypographyUtils: {
+    style: (config: {
+        fontSize?: keyof typeof AtomicTypography.fontSize;
+        fontWeight?: keyof typeof AtomicTypography.fontWeight;
+        lineHeight?: keyof typeof AtomicTypography.lineHeight;
+        letterSpacing?: keyof typeof AtomicTypography.letterSpacing;
+        fontFamily?: keyof typeof AtomicTypography.fontFamily;
+        color?: string;
+    }) => {
+        fontSize: string | undefined;
+        fontWeight: 100 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | undefined;
+        lineHeight: 1 | 2 | 1.25 | 1.375 | 1.5 | 1.625 | undefined;
+        letterSpacing: "-0.05em" | "-0.025em" | "0em" | "0.025em" | "0.05em" | "0.1em" | undefined;
+        fontFamily: string | undefined;
+        color: string | undefined;
+    };
+    rem: (size: keyof typeof AtomicTypography.fontSize) => string;
+    px: (size: keyof typeof AtomicTypography.fontSize) => string;
+};
+declare const AtomicTextStyles: {
+    readonly displayLarge: {
+        fontSize: string | undefined;
+        fontWeight: 100 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | undefined;
+        lineHeight: 1 | 2 | 1.25 | 1.375 | 1.5 | 1.625 | undefined;
+        letterSpacing: "-0.05em" | "-0.025em" | "0em" | "0.025em" | "0.05em" | "0.1em" | undefined;
+        fontFamily: string | undefined;
+        color: string | undefined;
+    };
+    readonly displayMedium: {
+        fontSize: string | undefined;
+        fontWeight: 100 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | undefined;
+        lineHeight: 1 | 2 | 1.25 | 1.375 | 1.5 | 1.625 | undefined;
+        letterSpacing: "-0.05em" | "-0.025em" | "0em" | "0.025em" | "0.05em" | "0.1em" | undefined;
+        fontFamily: string | undefined;
+        color: string | undefined;
+    };
+    readonly displaySmall: {
+        fontSize: string | undefined;
+        fontWeight: 100 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | undefined;
+        lineHeight: 1 | 2 | 1.25 | 1.375 | 1.5 | 1.625 | undefined;
+        letterSpacing: "-0.05em" | "-0.025em" | "0em" | "0.025em" | "0.05em" | "0.1em" | undefined;
+        fontFamily: string | undefined;
+        color: string | undefined;
+    };
+    readonly headlineLarge: {
+        fontSize: string | undefined;
+        fontWeight: 100 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | undefined;
+        lineHeight: 1 | 2 | 1.25 | 1.375 | 1.5 | 1.625 | undefined;
+        letterSpacing: "-0.05em" | "-0.025em" | "0em" | "0.025em" | "0.05em" | "0.1em" | undefined;
+        fontFamily: string | undefined;
+        color: string | undefined;
+    };
+    readonly headlineMedium: {
+        fontSize: string | undefined;
+        fontWeight: 100 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | undefined;
+        lineHeight: 1 | 2 | 1.25 | 1.375 | 1.5 | 1.625 | undefined;
+        letterSpacing: "-0.05em" | "-0.025em" | "0em" | "0.025em" | "0.05em" | "0.1em" | undefined;
+        fontFamily: string | undefined;
+        color: string | undefined;
+    };
+    readonly headlineSmall: {
+        fontSize: string | undefined;
+        fontWeight: 100 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | undefined;
+        lineHeight: 1 | 2 | 1.25 | 1.375 | 1.5 | 1.625 | undefined;
+        letterSpacing: "-0.05em" | "-0.025em" | "0em" | "0.025em" | "0.05em" | "0.1em" | undefined;
+        fontFamily: string | undefined;
+        color: string | undefined;
+    };
+    readonly titleLarge: {
+        fontSize: string | undefined;
+        fontWeight: 100 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | undefined;
+        lineHeight: 1 | 2 | 1.25 | 1.375 | 1.5 | 1.625 | undefined;
+        letterSpacing: "-0.05em" | "-0.025em" | "0em" | "0.025em" | "0.05em" | "0.1em" | undefined;
+        fontFamily: string | undefined;
+        color: string | undefined;
+    };
+    readonly titleMedium: {
+        fontSize: string | undefined;
+        fontWeight: 100 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | undefined;
+        lineHeight: 1 | 2 | 1.25 | 1.375 | 1.5 | 1.625 | undefined;
+        letterSpacing: "-0.05em" | "-0.025em" | "0em" | "0.025em" | "0.05em" | "0.1em" | undefined;
+        fontFamily: string | undefined;
+        color: string | undefined;
+    };
+    readonly titleSmall: {
+        fontSize: string | undefined;
+        fontWeight: 100 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | undefined;
+        lineHeight: 1 | 2 | 1.25 | 1.375 | 1.5 | 1.625 | undefined;
+        letterSpacing: "-0.05em" | "-0.025em" | "0em" | "0.025em" | "0.05em" | "0.1em" | undefined;
+        fontFamily: string | undefined;
+        color: string | undefined;
+    };
+    readonly bodyLarge: {
+        fontSize: string | undefined;
+        fontWeight: 100 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | undefined;
+        lineHeight: 1 | 2 | 1.25 | 1.375 | 1.5 | 1.625 | undefined;
+        letterSpacing: "-0.05em" | "-0.025em" | "0em" | "0.025em" | "0.05em" | "0.1em" | undefined;
+        fontFamily: string | undefined;
+        color: string | undefined;
+    };
+    readonly bodyMedium: {
+        fontSize: string | undefined;
+        fontWeight: 100 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | undefined;
+        lineHeight: 1 | 2 | 1.25 | 1.375 | 1.5 | 1.625 | undefined;
+        letterSpacing: "-0.05em" | "-0.025em" | "0em" | "0.025em" | "0.05em" | "0.1em" | undefined;
+        fontFamily: string | undefined;
+        color: string | undefined;
+    };
+    readonly bodySmall: {
+        fontSize: string | undefined;
+        fontWeight: 100 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | undefined;
+        lineHeight: 1 | 2 | 1.25 | 1.375 | 1.5 | 1.625 | undefined;
+        letterSpacing: "-0.05em" | "-0.025em" | "0em" | "0.025em" | "0.05em" | "0.1em" | undefined;
+        fontFamily: string | undefined;
+        color: string | undefined;
+    };
+    readonly labelLarge: {
+        fontSize: string | undefined;
+        fontWeight: 100 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | undefined;
+        lineHeight: 1 | 2 | 1.25 | 1.375 | 1.5 | 1.625 | undefined;
+        letterSpacing: "-0.05em" | "-0.025em" | "0em" | "0.025em" | "0.05em" | "0.1em" | undefined;
+        fontFamily: string | undefined;
+        color: string | undefined;
+    };
+    readonly labelMedium: {
+        fontSize: string | undefined;
+        fontWeight: 100 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | undefined;
+        lineHeight: 1 | 2 | 1.25 | 1.375 | 1.5 | 1.625 | undefined;
+        letterSpacing: "-0.05em" | "-0.025em" | "0em" | "0.025em" | "0.05em" | "0.1em" | undefined;
+        fontFamily: string | undefined;
+        color: string | undefined;
+    };
+    readonly labelSmall: {
+        fontSize: string | undefined;
+        fontWeight: 100 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | undefined;
+        lineHeight: 1 | 2 | 1.25 | 1.375 | 1.5 | 1.625 | undefined;
+        letterSpacing: "-0.05em" | "-0.025em" | "0em" | "0.025em" | "0.05em" | "0.1em" | undefined;
+        fontFamily: string | undefined;
+        color: string | undefined;
+    };
+};
+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': "57px";
+    readonly '--atomic-text-display-medium': "45px";
+    readonly '--atomic-text-display-small': "36px";
+    readonly '--atomic-text-headline-large': "32px";
+    readonly '--atomic-text-headline-medium': "28px";
+    readonly '--atomic-text-headline-small': "24px";
+    readonly '--atomic-text-title-large': "22px";
+    readonly '--atomic-text-title-medium': "16px";
+    readonly '--atomic-text-title-small': "14px";
+    readonly '--atomic-text-body-large': "16px";
+    readonly '--atomic-text-body-medium': "14px";
+    readonly '--atomic-text-body-small': "12px";
+    readonly '--atomic-text-label-large': "14px";
+    readonly '--atomic-text-label-medium': "12px";
+    readonly '--atomic-text-label-small': "11px";
+    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': "-0.05em";
+    readonly '--atomic-tracking-tight': "-0.025em";
+    readonly '--atomic-tracking-normal': "0em";
+    readonly '--atomic-tracking-wide': "0.025em";
+    readonly '--atomic-tracking-wider': "0.05em";
+    readonly '--atomic-tracking-widest': "0.1em";
+};
+type AtomicFontSize = keyof typeof AtomicTypography.fontSize;
+type AtomicFontWeight = keyof typeof AtomicTypography.fontWeight;
+type AtomicLineHeight = keyof typeof AtomicTypography.lineHeight;
+type AtomicLetterSpacing = keyof typeof AtomicTypography.letterSpacing;
+type AtomicFontFamily = keyof typeof AtomicTypography.fontFamily;
+type AtomicTextStyle = keyof typeof AtomicTextStyles;
+
+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: "8px" | "4px" | "12px" | "16px" | "24px" | "0px" | "2px" | "6px" | "9999px";
+        };
+        top: (radius: keyof typeof AtomicBorders.radius) => {
+            borderTopLeftRadius: "8px" | "4px" | "12px" | "16px" | "24px" | "0px" | "2px" | "6px" | "9999px";
+            borderTopRightRadius: "8px" | "4px" | "12px" | "16px" | "24px" | "0px" | "2px" | "6px" | "9999px";
+        };
+        right: (radius: keyof typeof AtomicBorders.radius) => {
+            borderTopRightRadius: "8px" | "4px" | "12px" | "16px" | "24px" | "0px" | "2px" | "6px" | "9999px";
+            borderBottomRightRadius: "8px" | "4px" | "12px" | "16px" | "24px" | "0px" | "2px" | "6px" | "9999px";
+        };
+        bottom: (radius: keyof typeof AtomicBorders.radius) => {
+            borderBottomLeftRadius: "8px" | "4px" | "12px" | "16px" | "24px" | "0px" | "2px" | "6px" | "9999px";
+            borderBottomRightRadius: "8px" | "4px" | "12px" | "16px" | "24px" | "0px" | "2px" | "6px" | "9999px";
+        };
+        left: (radius: keyof typeof AtomicBorders.radius) => {
+            borderTopLeftRadius: "8px" | "4px" | "12px" | "16px" | "24px" | "0px" | "2px" | "6px" | "9999px";
+            borderBottomLeftRadius: "8px" | "4px" | "12px" | "16px" | "24px" | "0px" | "2px" | "6px" | "9999px";
+        };
+        topLeft: (radius: keyof typeof AtomicBorders.radius) => {
+            borderTopLeftRadius: "8px" | "4px" | "12px" | "16px" | "24px" | "0px" | "2px" | "6px" | "9999px";
+        };
+        topRight: (radius: keyof typeof AtomicBorders.radius) => {
+            borderTopRightRadius: "8px" | "4px" | "12px" | "16px" | "24px" | "0px" | "2px" | "6px" | "9999px";
+        };
+        bottomRight: (radius: keyof typeof AtomicBorders.radius) => {
+            borderBottomRightRadius: "8px" | "4px" | "12px" | "16px" | "24px" | "0px" | "2px" | "6px" | "9999px";
+        };
+        bottomLeft: (radius: keyof typeof AtomicBorders.radius) => {
+            borderBottomLeftRadius: "8px" | "4px" | "12px" | "16px" | "24px" | "0px" | "2px" | "6px" | "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': "57px";
+    readonly '--atomic-text-display-medium': "45px";
+    readonly '--atomic-text-display-small': "36px";
+    readonly '--atomic-text-headline-large': "32px";
+    readonly '--atomic-text-headline-medium': "28px";
+    readonly '--atomic-text-headline-small': "24px";
+    readonly '--atomic-text-title-large': "22px";
+    readonly '--atomic-text-title-medium': "16px";
+    readonly '--atomic-text-title-small': "14px";
+    readonly '--atomic-text-body-large': "16px";
+    readonly '--atomic-text-body-medium': "14px";
+    readonly '--atomic-text-body-small': "12px";
+    readonly '--atomic-text-label-large': "14px";
+    readonly '--atomic-text-label-medium': "12px";
+    readonly '--atomic-text-label-small': "11px";
+    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': "-0.05em";
+    readonly '--atomic-tracking-tight': "-0.025em";
+    readonly '--atomic-tracking-normal': "0em";
+    readonly '--atomic-tracking-wide': "0.025em";
+    readonly '--atomic-tracking-wider': "0.05em";
+    readonly '--atomic-tracking-widest': "0.1em";
+    readonly '--atomic-spacing-unit': "8px";
+    readonly '--atomic-spacing-xxs': "4px";
+    readonly '--atomic-spacing-xs': "8px";
+    readonly '--atomic-spacing-sm': "12px";
+    readonly '--atomic-spacing-md': "16px";
+    readonly '--atomic-spacing-lg': "24px";
+    readonly '--atomic-spacing-xl': "32px";
+    readonly '--atomic-spacing-xxl': "40px";
+    readonly '--atomic-spacing-xxxl': "48px";
+    readonly '--atomic-spacing-huge': "64px";
+    readonly '--atomic-button-padding-x': "16px";
+    readonly '--atomic-button-padding-y': "12px";
+    readonly '--atomic-card-padding': "24px";
+    readonly '--atomic-card-margin': "16px";
+    readonly '--atomic-list-item-padding': "16px";
+    readonly '--atomic-list-item-spacing': "8px";
+    readonly '--atomic-input-padding-x': "16px";
+    readonly '--atomic-input-padding-y': "12px";
+    readonly '--atomic-modal-padding': "24px";
+    readonly '--atomic-section-padding': "32px";
+    readonly '--atomic-primary': "#8B5CF6";
+    readonly '--atomic-primary-light': "#A78BFA";
+    readonly '--atomic-primary-dark': "#7C3AED";
+    readonly '--atomic-secondary': "#EC4899";
+    readonly '--atomic-secondary-light': "#F472B6";
+    readonly '--atomic-secondary-dark': "#DB2777";
+    readonly '--atomic-accent': "#F59E0B";
+    readonly '--atomic-accent-light': "#FBBF24";
+    readonly '--atomic-accent-dark': "#D97706";
+    readonly '--atomic-gray-50': "#FAFAFA";
+    readonly '--atomic-gray-100': "#F4F4F5";
+    readonly '--atomic-gray-200': "#E4E4E7";
+    readonly '--atomic-gray-300': "#D4D4D8";
+    readonly '--atomic-gray-400': "#A1A1AA";
+    readonly '--atomic-gray-500': "#71717A";
+    readonly '--atomic-gray-600': "#52525B";
+    readonly '--atomic-gray-700': "#3F3F46";
+    readonly '--atomic-gray-800': "#27272A";
+    readonly '--atomic-gray-900': "#18181B";
+    readonly '--atomic-success': "#10B981";
+    readonly '--atomic-success-light': "#34D399";
+    readonly '--atomic-success-dark': "#059669";
+    readonly '--atomic-warning': "#F59E0B";
+    readonly '--atomic-warning-light': "#FBBF24";
+    readonly '--atomic-warning-dark': "#D97706";
+    readonly '--atomic-error': "#EF4444";
+    readonly '--atomic-error-light': "#F87171";
+    readonly '--atomic-error-dark': "#DC2626";
+    readonly '--atomic-info': "#3B82F6";
+    readonly '--atomic-info-light': "#60A5FA";
+    readonly '--atomic-info-dark': "#2563EB";
+    readonly '--atomic-background': "#FFFFFF";
+    readonly '--atomic-background-secondary': "#F9FAFB";
+    readonly '--atomic-surface': "#FFFFFF";
+    readonly '--atomic-surface-secondary': "#F3F4F6";
+    readonly '--atomic-text-primary': "#18181B";
+    readonly '--atomic-text-secondary': "#52525B";
+    readonly '--atomic-text-tertiary': "#A1A1AA";
+    readonly '--atomic-text-disabled': "#D4D4D8";
+    readonly '--atomic-text-inverse': "#FFFFFF";
+};
+
+declare function cn(...inputs: ClassValue[]): string;
+
+declare const buttonVariants: (props?: ({
+    variant?: "primary" | "secondary" | "outline" | "ghost" | "link" | "destructive" | "default" | 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> {
+    /** Render as a different element */
+    asChild?: boolean;
+    /** Show loading spinner */
+    loading?: boolean;
+    /** Icon to display on the left */
+    leftIcon?: React$1.ReactNode;
+    /** Icon to display on the right */
+    rightIcon?: React$1.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" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "body" | "large" | "lead" | "muted" | "caption" | "label" | null | undefined;
+    color?: "primary" | "secondary" | "success" | "warning" | "error" | "info" | "default" | "muted" | null | undefined;
+    align?: "left" | "right" | "center" | "justify" | null | undefined;
+    weight?: "black" | "thin" | "light" | "medium" | "semibold" | "bold" | "extrabold" | "normal" | 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?: "sm" | "md" | "lg" | "xl" | "none" | "full" | null | undefined;
+    aspectRatio?: "video" | "auto" | "square" | "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" | "white" | "default" | "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?: "secondary" | "success" | "warning" | "info" | "outline" | "gray" | "destructive" | "default" | null | undefined;
+    size?: "sm" | "lg" | "default" | null | undefined;
+    shape?: "default" | "rounded" | "square" | 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?: "primary" | "secondary" | "button" | "ghost" | "destructive" | "default" | "muted" | "underline" | null | undefined;
+    size?: "sm" | "lg" | "xl" | "default" | null | undefined;
+    weight?: "medium" | "semibold" | "bold" | "normal" | 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 VERSION = "1.1.0";
+
+export { AnimationUtils, AtomicAlertType, type AtomicAlertTypeType, AtomicAlignment, type AtomicAlignmentType, type AtomicAnimationDuration, type AtomicAnimationEasing, AtomicAnimationPresets, type AtomicAnimationRotate, type AtomicAnimationScale, AtomicAnimationState, type AtomicAnimationStateType, AtomicAnimations, AtomicAnimationsCss, AtomicAvatar, AtomicAvatarFallback, AtomicAvatarImage, type AtomicAvatarProps, AtomicBadge, type AtomicBadgeProps, type AtomicBorderRadius, type AtomicBorderStyle, type AtomicBorderWidth, AtomicBorders, AtomicBordersCss, AtomicBreakpoint, type AtomicBreakpointType, AtomicButton, type AtomicButtonProps, AtomicButtonSpinner, AtomicButtonVariant, type AtomicButtonVariantType, AtomicCardVariant, type AtomicCardVariantType, AtomicCheckbox, type AtomicCheckboxProps, type AtomicColor, type AtomicColorValue, AtomicColorVariant, type AtomicColorVariantType, AtomicColors, AtomicColorsCss, AtomicCountBadge, AtomicDesignTokensCss, AtomicDirection, type AtomicDirectionType, AtomicDiv, type AtomicDivProps, AtomicEnumUtils, type AtomicFontFamily, type AtomicFontSize, type AtomicFontWeight, AtomicFormFieldState, type AtomicFormFieldStateType, AtomicIcon, type AtomicIconProps, AtomicImage, type AtomicImageProps, AtomicInlineSpinner, AtomicInput, type AtomicInputProps, AtomicInputVariant, type AtomicInputVariantType, type AtomicLetterSpacing, type AtomicLineHeight, 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, AtomicSpacing, AtomicSpacingCss, type AtomicSpacingKey, type AtomicSpacingValue, AtomicSpinner, type AtomicSpinnerProps, AtomicStatus, AtomicStatusBadge, type AtomicStatusType, AtomicSwitch, type AtomicSwitchProps, AtomicTag, type AtomicTagProps, AtomicText, type AtomicTextProps, type AtomicTextStyle, AtomicTextStyles, AtomicTextVariant, type AtomicTextVariantType, AtomicThemeMode, type AtomicThemeModeType, AtomicTypography, AtomicTypographyCss, BorderUtils, ColorUtils, ShadowUtils, SpacingUtils, TypographyUtils, VERSION, avatarFallbackVariants, avatarImageVariants, avatarVariants, badgeVariants, buttonVariants, cn, imageVariants, inputVariants, linkVariants, spinnerVariants, textVariants };