@umituz/atomic-next 2.0.2 → 2.1.0

package/dist/index.mjs

@@ -1,3 +1,4 @@
+"use client";
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import React5, { createContext, useState, useEffect, useContext } from 'react';
@@ -9,20 +10,14 @@ import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import Image2 from 'next/image';
 import Link from 'next/link';
 
-/**
- * @umituz/atomic-next
- * Atomic design system for Next.js
- * https://umituz.com/opensource/atomic-next
- */
-
 // src/tokens/colors/atomic-colors.ts
 var colors = {
-  primary: "#9333EA",
-  primaryLight: "#A855F7",
-  primaryDark: "#7C3AED",
-  secondary: "#EC4899",
-  secondaryLight: "#F472B6",
-  secondaryDark: "#DB2777",
+  primary: "#2563eb",
+  primaryLight: "#3b82f6",
+  primaryDark: "#1d4ed8",
+  secondary: "#0d9488",
+  secondaryLight: "#14b8a6",
+  secondaryDark: "#0f766e",
   accent: "#F59E0B",
   accentLight: "#FBBF24",
   accentDark: "#D97706",
@@ -150,7 +145,15 @@ var AtomicSpacingCss = {
 // src/tokens/typography/atomic-typography.ts
 var typography = {
   fontFamily: {
-    sans: ["Inter", "system-ui", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "sans-serif"],
+    sans: [
+      "Inter",
+      "system-ui",
+      "-apple-system",
+      "BlinkMacSystemFont",
+      "Segoe UI",
+      "Roboto",
+      "sans-serif"
+    ],
     serif: ["Charter", "Georgia", "Cambria", "Times New Roman", "Times", "serif"],
     mono: ["JetBrains Mono", "Fira Code", "Consolas", "Monaco", "Courier New", "monospace"]
   },
@@ -249,14 +252,14 @@ var AtomicShadows = {
   xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
   xxl: "0 25px 50px -12px rgb(0 0 0 / 0.25)",
   inner: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)",
-  focusPrimary: "0 0 0 3px rgb(139 92 246 / 0.2)",
-  focusSecondary: "0 0 0 3px rgb(236 72 153 / 0.2)",
+  focusPrimary: "0 0 0 3px rgb(37 99 235 / 0.2)",
+  focusSecondary: "0 0 0 3px rgb(13 148 136 / 0.2)",
   focusSuccess: "0 0 0 3px rgb(16 185 129 / 0.2)",
   focusWarning: "0 0 0 3px rgb(245 158 11 / 0.2)",
   focusError: "0 0 0 3px rgb(239 68 68 / 0.2)",
   focusInfo: "0 0 0 3px rgb(59 130 246 / 0.2)",
-  glowPrimary: "0 0 20px rgb(139 92 246 / 0.3)",
-  glowSecondary: "0 0 20px rgb(236 72 153 / 0.3)",
+  glowPrimary: "0 0 20px rgb(37 99 235 / 0.3)",
+  glowSecondary: "0 0 20px rgb(13 148 136 / 0.3)",
   glowSuccess: "0 0 20px rgb(16 185 129 / 0.3)",
   glowWarning: "0 0 20px rgb(245 158 11 / 0.3)",
   glowError: "0 0 20px rgb(239 68 68 / 0.3)",
@@ -278,10 +281,10 @@ var ShadowUtils = {
   combine: (...shadows) => {
     return shadows.map((shadow) => AtomicShadows[shadow]).join(", ");
   },
-  focus: (color = "139 92 246", opacity = 0.2) => {
+  focus: (color = "37 99 235", opacity = 0.2) => {
     return `0 0 0 3px rgb(${color} / ${opacity})`;
   },
-  glow: (size = 20, color = "139 92 246", opacity = 0.3) => {
+  glow: (size = 20, color = "37 99 235", opacity = 0.3) => {
     return `0 0 ${size}px rgb(${color} / ${opacity})`;
   }
 };
@@ -552,7 +555,7 @@ var AtomicAnimationPresets = {
       duration: "normal",
       easing: "smooth"
     }),
-    transform: "translateY(0)"
+    transform: "translateY(-100%)"
   },
   buttonHover: {
     ...AnimationUtils.transition({
@@ -833,11 +836,7 @@ var AtomicButton = React5.forwardRef(
     return /* @__PURE__ */ jsxs(
       Comp,
       {
-        className: cn(
-          buttonVariants({ variant, size }),
-          fullWidth && "w-full",
-          className
-        ),
+        className: cn(buttonVariants({ variant, size }), fullWidth && "w-full", className),
         style: {
           ...variant === "brand" && {
             background: "linear-gradient(to right, var(--atomic-primary), var(--atomic-secondary))"
@@ -858,17 +857,29 @@ var AtomicButton = React5.forwardRef(
               )
             }
           ),
-          !loading && leftIcon && /* @__PURE__ */ jsx("span", { className: cn(
-            "inline-flex items-center",
-            size === "sm" ? "mr-1" : "mr-2",
-            size === "sm" ? "[&>*]:h-3 [&>*]:w-3" : size === "lg" ? "[&>*]:h-5 [&>*]:w-5" : "[&>*]:h-4 [&>*]:w-4"
-          ), children: leftIcon }),
+          !loading && leftIcon && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "inline-flex items-center",
+                size === "sm" ? "mr-1" : "mr-2",
+                size === "sm" ? "[&>*]:h-3 [&>*]:w-3" : size === "lg" ? "[&>*]:h-5 [&>*]:w-5" : "[&>*]:h-4 [&>*]:w-4"
+              ),
+              children: leftIcon
+            }
+          ),
           children,
-          !loading && rightIcon && /* @__PURE__ */ jsx("span", { className: cn(
-            "inline-flex items-center",
-            size === "sm" ? "ml-1" : "ml-2",
-            size === "sm" ? "[&>*]:h-3 [&>*]:w-3" : size === "lg" ? "[&>*]:h-5 [&>*]:w-5" : "[&>*]:h-4 [&>*]:w-4"
-          ), children: rightIcon })
+          !loading && rightIcon && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "inline-flex items-center",
+                size === "sm" ? "ml-1" : "ml-2",
+                size === "sm" ? "[&>*]:h-3 [&>*]:w-3" : size === "lg" ? "[&>*]:h-5 [&>*]:w-5" : "[&>*]:h-4 [&>*]:w-4"
+              ),
+              children: rightIcon
+            }
+          )
         ]
       }
     );
@@ -971,25 +982,22 @@ var AtomicText = React5.forwardRef(
   }
 );
 AtomicText.displayName = "AtomicText";
-var avatarVariants = cva(
-  "relative flex shrink-0 overflow-hidden rounded-full",
-  {
-    variants: {
-      size: {
-        xs: "h-6 w-6",
-        sm: "h-8 w-8",
-        default: "h-10 w-10",
-        lg: "h-12 w-12",
-        xl: "h-16 w-16",
-        xxl: "h-20 w-20",
-        xxxl: "h-24 w-24"
-      }
-    },
-    defaultVariants: {
-      size: "default"
+var avatarVariants = cva("relative flex shrink-0 overflow-hidden rounded-full", {
+  variants: {
+    size: {
+      xs: "h-6 w-6",
+      sm: "h-8 w-8",
+      default: "h-10 w-10",
+      lg: "h-12 w-12",
+      xl: "h-16 w-16",
+      xxl: "h-20 w-20",
+      xxxl: "h-24 w-24"
     }
+  },
+  defaultVariants: {
+    size: "default"
   }
-);
+});
 var avatarImageVariants = cva("aspect-square h-full w-full object-cover");
 var avatarFallbackVariants = cva(
   "flex h-full w-full items-center justify-center rounded-full bg-muted font-medium text-muted-foreground",
@@ -1045,21 +1053,8 @@ var AtomicAvatar = React5.forwardRef(
           className: cn(avatarVariants({ size }), className),
           ...props,
           children: [
-            /* @__PURE__ */ jsx(
-              AvatarPrimitive.Image,
-              {
-                className: avatarImageVariants(),
-                src,
-                alt
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              AvatarPrimitive.Fallback,
-              {
-                className: avatarFallbackVariants({ size }),
-                children: fallbackElement || initials
-              }
-            )
+            /* @__PURE__ */ jsx(AvatarPrimitive.Image, { className: avatarImageVariants(), src, alt }),
+            /* @__PURE__ */ jsx(AvatarPrimitive.Fallback, { className: avatarFallbackVariants({ size }), children: fallbackElement || initials })
           ]
         }
       ),
@@ -1078,14 +1073,7 @@ var AtomicAvatar = React5.forwardRef(
   }
 );
 AtomicAvatar.displayName = "AtomicAvatar";
-var AtomicAvatarImage = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  AvatarPrimitive.Image,
-  {
-    ref,
-    className: cn(avatarImageVariants(), className),
-    ...props
-  }
-));
+var AtomicAvatarImage = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(AvatarPrimitive.Image, { ref, className: cn(avatarImageVariants(), className), ...props }));
 AtomicAvatarImage.displayName = "AtomicAvatarImage";
 var AtomicAvatarFallback = React5.forwardRef(({ className, size, ...props }, ref) => /* @__PURE__ */ jsx(
   AvatarPrimitive.Fallback,
@@ -1139,112 +1127,108 @@ var imageVariants = cva("transition-all duration-200", {
     objectPosition: "center"
   }
 });
-var AtomicImage = React5.forwardRef(({
-  className,
-  containerClassName,
-  rounded,
-  aspectRatio,
-  objectFit,
-  objectPosition,
-  enableBlur = false,
-  placeholderSrc,
-  ...props
-}, ref) => {
-  return /* @__PURE__ */ jsx("div", { className: cn(
-    "relative overflow-hidden",
-    aspectRatio && imageVariants({ aspectRatio }),
-    containerClassName
-  ), children: /* @__PURE__ */ jsx(
-    Image2,
-    {
-      ref,
-      className: cn(
-        imageVariants({
-          rounded,
-          objectFit,
-          objectPosition,
-          aspectRatio: void 0
-        }),
-        className
-      ),
-      placeholder: enableBlur || placeholderSrc ? "blur" : "empty",
-      blurDataURL: placeholderSrc,
-      ...props
-    }
-  ) });
-});
-AtomicImage.displayName = "AtomicImage";
-var cardVariants = cva(
-  "rounded-lg border text-card-foreground",
-  {
-    variants: {
-      variant: {
-        default: "border-border bg-card shadow-sm",
-        elevated: "border-0 bg-card shadow-lg",
-        outlined: "border-2 border-border bg-card shadow-none",
-        filled: "border-0 bg-muted shadow-none"
-      },
-      size: {
-        sm: "p-4",
-        md: "p-6",
-        lg: "p-8",
-        xl: "p-10"
+var AtomicImage = React5.forwardRef(
+  ({
+    className,
+    containerClassName,
+    rounded,
+    aspectRatio,
+    objectFit,
+    objectPosition,
+    enableBlur = false,
+    placeholderSrc,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "relative overflow-hidden",
+          aspectRatio && imageVariants({ aspectRatio }),
+          containerClassName
+        ),
+        children: /* @__PURE__ */ jsx(
+          Image2,
+          {
+            ref,
+            className: cn(
+              imageVariants({
+                rounded,
+                objectFit,
+                objectPosition,
+                aspectRatio: void 0
+              }),
+              className
+            ),
+            placeholder: enableBlur || placeholderSrc ? "blur" : "empty",
+            blurDataURL: placeholderSrc,
+            ...props
+          }
+        )
       }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "md"
-    }
+    );
   }
 );
-var cardHeaderVariants = cva(
-  "flex flex-col space-y-1.5",
-  {
-    variants: {
-      size: {
-        sm: "pb-3",
-        md: "pb-4",
-        lg: "pb-6",
-        xl: "pb-8"
-      }
+AtomicImage.displayName = "AtomicImage";
+var cardVariants = cva("rounded-lg border text-card-foreground", {
+  variants: {
+    variant: {
+      default: "border-border bg-card shadow-sm",
+      elevated: "border-0 bg-card shadow-lg",
+      outlined: "border-2 border-border bg-card shadow-none",
+      filled: "border-0 bg-muted shadow-none"
     },
-    defaultVariants: {
-      size: "md"
+    size: {
+      sm: "p-4",
+      md: "p-6",
+      lg: "p-8",
+      xl: "p-10"
     }
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "md"
   }
-);
-var cardTitleVariants = cva(
-  "font-semibold leading-none tracking-tight",
-  {
-    variants: {
-      size: {
-        sm: "text-lg",
-        md: "text-xl",
-        lg: "text-2xl",
-        xl: "text-3xl"
-      }
-    },
-    defaultVariants: {
-      size: "md"
+});
+var cardHeaderVariants = cva("flex flex-col space-y-1.5", {
+  variants: {
+    size: {
+      sm: "pb-3",
+      md: "pb-4",
+      lg: "pb-6",
+      xl: "pb-8"
     }
+  },
+  defaultVariants: {
+    size: "md"
   }
-);
-var cardDescriptionVariants = cva(
-  "text-muted-foreground",
-  {
-    variants: {
-      size: {
-        sm: "text-sm",
-        md: "text-sm",
-        lg: "text-base",
-        xl: "text-lg"
-      }
-    },
-    defaultVariants: {
-      size: "md"
+});
+var cardTitleVariants = cva("font-semibold leading-none tracking-tight", {
+  variants: {
+    size: {
+      sm: "text-lg",
+      md: "text-xl",
+      lg: "text-2xl",
+      xl: "text-3xl"
     }
+  },
+  defaultVariants: {
+    size: "md"
   }
-);
+});
+var cardDescriptionVariants = cva("text-muted-foreground", {
+  variants: {
+    size: {
+      sm: "text-sm",
+      md: "text-sm",
+      lg: "text-base",
+      xl: "text-lg"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
 var cardContentVariants = cva("", {
   variants: {
     size: {
@@ -1258,22 +1242,19 @@ var cardContentVariants = cva("", {
     size: "md"
   }
 });
-var cardFooterVariants = cva(
-  "flex items-center",
-  {
-    variants: {
-      size: {
-        sm: "pt-3",
-        md: "pt-4",
-        lg: "pt-6",
-        xl: "pt-8"
-      }
-    },
-    defaultVariants: {
-      size: "md"
+var cardFooterVariants = cva("flex items-center", {
+  variants: {
+    size: {
+      sm: "pt-3",
+      md: "pt-4",
+      lg: "pt-6",
+      xl: "pt-8"
     }
+  },
+  defaultVariants: {
+    size: "md"
   }
-);
+});
 var AtomicCard = React5.forwardRef(
   ({ className, variant, size, interactive = false, fullWidth = false, ...props }, ref) => /* @__PURE__ */ jsx(
     "div",
@@ -1291,58 +1272,23 @@ var AtomicCard = React5.forwardRef(
 );
 AtomicCard.displayName = "AtomicCard";
 var AtomicCardHeader = React5.forwardRef(
-  ({ className, size, ...props }, ref) => /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref,
-      className: cn(cardHeaderVariants({ size }), className),
-      ...props
-    }
-  )
+  ({ className, size, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn(cardHeaderVariants({ size }), className), ...props })
 );
 AtomicCardHeader.displayName = "AtomicCardHeader";
 var AtomicCardTitle = React5.forwardRef(
-  ({ className, size, as: Component = "h3", ...props }, ref) => /* @__PURE__ */ jsx(
-    Component,
-    {
-      ref,
-      className: cn(cardTitleVariants({ size }), className),
-      ...props
-    }
-  )
+  ({ className, size, as: Component = "h3", ...props }, ref) => /* @__PURE__ */ jsx(Component, { ref, className: cn(cardTitleVariants({ size }), className), ...props })
 );
 AtomicCardTitle.displayName = "AtomicCardTitle";
 var AtomicCardDescription = React5.forwardRef(
-  ({ className, size, ...props }, ref) => /* @__PURE__ */ jsx(
-    "p",
-    {
-      ref,
-      className: cn(cardDescriptionVariants({ size }), className),
-      ...props
-    }
-  )
+  ({ className, size, ...props }, ref) => /* @__PURE__ */ jsx("p", { ref, className: cn(cardDescriptionVariants({ size }), className), ...props })
 );
 AtomicCardDescription.displayName = "AtomicCardDescription";
 var AtomicCardContent = React5.forwardRef(
-  ({ className, size, ...props }, ref) => /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref,
-      className: cn(cardContentVariants({ size }), className),
-      ...props
-    }
-  )
+  ({ className, size, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn(cardContentVariants({ size }), className), ...props })
 );
 AtomicCardContent.displayName = "AtomicCardContent";
 var AtomicCardFooter = React5.forwardRef(
-  ({ className, size, ...props }, ref) => /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref,
-      className: cn(cardFooterVariants({ size }), className),
-      ...props
-    }
-  )
+  ({ className, size, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn(cardFooterVariants({ size }), className), ...props })
 );
 AtomicCardFooter.displayName = "AtomicCardFooter";
 var getSpacingClass = (spacing2, prefix) => {
@@ -1509,18 +1455,30 @@ var AtomicInput = React5.forwardRef(
     const messageText = error || success || warning || helperText;
     const messageColor = error ? "text-destructive" : success ? "text-green-600 dark:text-green-400" : warning ? "text-amber-600 dark:text-amber-400" : "text-muted-foreground";
     return /* @__PURE__ */ jsxs("div", { className: cn("space-y-2", containerClassName), children: [
-      label && /* @__PURE__ */ jsx("label", { className: cn(
-        "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
-        disabled && "opacity-50",
-        labelClassName
-      ), children: label }),
+      label && /* @__PURE__ */ jsx(
+        "label",
+        {
+          className: cn(
+            "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+            disabled && "opacity-50",
+            labelClassName
+          ),
+          children: label
+        }
+      ),
       /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-        leftIcon && /* @__PURE__ */ jsx("div", { className: cn(
-          "absolute left-0 top-0 h-full flex items-center justify-center",
-          size === "sm" ? "w-8 pl-2" : size === "lg" ? "w-12 pl-4" : "w-10 pl-3",
-          "text-muted-foreground pointer-events-none",
-          "[&>*]:h-4 [&>*]:w-4"
-        ), children: leftIcon }),
+        leftIcon && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "absolute left-0 top-0 h-full flex items-center justify-center",
+              size === "sm" ? "w-8 pl-2" : size === "lg" ? "w-12 pl-4" : "w-10 pl-3",
+              "text-muted-foreground pointer-events-none",
+              "[&>*]:h-4 [&>*]:w-4"
+            ),
+            children: leftIcon
+          }
+        ),
         /* @__PURE__ */ jsx(
           "input",
           {
@@ -1538,38 +1496,40 @@ var AtomicInput = React5.forwardRef(
             ...props
           }
         ),
-        (rightIcon || showClearButton || showPasswordToggleButton) && /* @__PURE__ */ jsxs("div", { className: cn(
-          "absolute right-0 top-0 h-full flex items-center justify-center gap-1",
-          size === "sm" ? "w-8 pr-2" : size === "lg" ? "w-12 pr-4" : "w-10 pr-3"
-        ), children: [
-          rightIcon && !showClearButton && !showPasswordToggleButton && /* @__PURE__ */ jsx("div", { className: "text-muted-foreground [&>*]:h-4 [&>*]:w-4", children: rightIcon }),
-          showClearButton && /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              onClick: handleClear,
-              className: "text-muted-foreground hover:text-foreground transition-colors [&>*]:h-4 [&>*]:w-4",
-              tabIndex: -1,
-              children: /* @__PURE__ */ jsx(X, {})
-            }
-          ),
-          showPasswordToggleButton && /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              onClick: () => setShowPassword(!showPassword),
-              className: "text-muted-foreground hover:text-foreground transition-colors [&>*]:h-4 [&>*]:w-4",
-              tabIndex: -1,
-              children: showPassword ? /* @__PURE__ */ jsx(EyeOff, {}) : /* @__PURE__ */ jsx(Eye, {})
-            }
-          )
-        ] })
+        (rightIcon || showClearButton || showPasswordToggleButton) && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "absolute right-0 top-0 h-full flex items-center justify-center gap-1",
+              size === "sm" ? "w-8 pr-2" : size === "lg" ? "w-12 pr-4" : "w-10 pr-3"
+            ),
+            children: [
+              rightIcon && !showClearButton && !showPasswordToggleButton && /* @__PURE__ */ jsx("div", { className: "text-muted-foreground [&>*]:h-4 [&>*]:w-4", children: rightIcon }),
+              showClearButton && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: handleClear,
+                  className: "text-muted-foreground hover:text-foreground transition-colors [&>*]:h-4 [&>*]:w-4",
+                  tabIndex: -1,
+                  children: /* @__PURE__ */ jsx(X, {})
+                }
+              ),
+              showPasswordToggleButton && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setShowPassword(!showPassword),
+                  className: "text-muted-foreground hover:text-foreground transition-colors [&>*]:h-4 [&>*]:w-4",
+                  tabIndex: -1,
+                  children: showPassword ? /* @__PURE__ */ jsx(EyeOff, {}) : /* @__PURE__ */ jsx(Eye, {})
+                }
+              )
+            ]
+          }
+        )
       ] }),
-      messageText && /* @__PURE__ */ jsx("p", { className: cn(
-        "text-xs",
-        messageColor,
-        helperClassName
-      ), children: messageText })
+      messageText && /* @__PURE__ */ jsx("p", { className: cn("text-xs", messageColor, helperClassName), children: messageText })
     ] });
   }
 );
@@ -1653,7 +1613,8 @@ var AtomicCheckbox = React5.forwardRef(
     id,
     ...rest
   }, ref) => {
-    const checkboxId = id || `checkbox-${React5.useId()}`;
+    const generatedId = React5.useId();
+    const checkboxId = id || `checkbox-${generatedId}`;
     const sizeClasses = getSizeClasses(size);
     const colorClasses = getColorClasses(color, error);
     const handleChange = (event) => {
@@ -1733,10 +1694,7 @@ var AtomicCheckbox = React5.forwardRef(
             children: label
           }
         ),
-        description && /* @__PURE__ */ jsx("p", { className: cn(
-          "text-sm leading-5",
-          error ? "text-red-600" : "text-gray-500"
-        ), children: description }),
+        description && /* @__PURE__ */ jsx("p", { className: cn("text-sm leading-5", error ? "text-red-600" : "text-gray-500"), children: description }),
         error && errorMessage && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-red-600", children: errorMessage })
       ] })
     ] });
@@ -1825,7 +1783,8 @@ var AtomicSwitch = React5.forwardRef(
     id,
     ...rest
   }, ref) => {
-    const switchId = id || `switch-${React5.useId()}`;
+    const generatedId = React5.useId();
+    const switchId = id || `switch-${generatedId}`;
     const sizeClasses = getSizeClasses2(size);
     const colorClasses = getColorClasses2(color, checked);
     const handleChange = (event) => {
@@ -1898,10 +1857,7 @@ var AtomicSwitch = React5.forwardRef(
         }
       ) })
     ] });
-    const labelElement = (label || description) && /* @__PURE__ */ jsxs("div", { className: cn(
-      "flex-1",
-      labelPosition === "left" ? "mr-3" : "ml-3"
-    ), children: [
+    const labelElement = (label || description) && /* @__PURE__ */ jsxs("div", { className: cn("flex-1", labelPosition === "left" ? "mr-3" : "ml-3"), children: [
       label && /* @__PURE__ */ jsx(
         "label",
         {
@@ -1950,71 +1906,34 @@ var spinnerVariants = cva("animate-spin", {
   }
 });
 var AtomicSpinner = React5.forwardRef(
-  ({
-    className,
-    size,
-    color,
-    label,
-    inline = false,
-    icon: Icon = Loader2,
-    ...props
-  }, ref) => {
-    const spinner = /* @__PURE__ */ jsx(
-      Icon,
-      {
-        ref,
-        className: cn(spinnerVariants({ size, color }), className),
-        ...props
-      }
-    );
+  ({ className, size, color, label, inline = false, icon: Icon = Loader2, ...props }, ref) => {
+    const spinner = /* @__PURE__ */ jsx(Icon, { ref, className: cn(spinnerVariants({ size, color }), className), ...props });
     if (!label) {
       return spinner;
     }
-    return /* @__PURE__ */ jsxs("div", { className: cn(
-      "flex items-center gap-2",
-      inline ? "inline-flex" : "flex"
-    ), children: [
+    return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2", inline ? "inline-flex" : "flex"), children: [
       spinner,
-      /* @__PURE__ */ jsx("span", { className: cn(
-        "text-sm",
-        color === "muted" ? "text-muted-foreground" : color === "white" ? "text-white" : color === "primary" ? "text-primary" : "text-foreground"
-      ), children: label })
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "text-sm",
+            color === "muted" ? "text-muted-foreground" : color === "white" ? "text-white" : color === "primary" ? "text-primary" : "text-foreground"
+          ),
+          children: label
+        }
+      )
     ] });
   }
 );
 AtomicSpinner.displayName = "AtomicSpinner";
-var AtomicButtonSpinner = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  AtomicSpinner,
-  {
-    ref,
-    size: "sm",
-    color: "white",
-    className: cn("mr-2", className),
-    ...props
-  }
-));
+var AtomicButtonSpinner = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(AtomicSpinner, { ref, size: "sm", color: "white", className: cn("mr-2", className), ...props }));
 AtomicButtonSpinner.displayName = "AtomicButtonSpinner";
-var AtomicPageSpinner = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center p-8", children: /* @__PURE__ */ jsx(
-  AtomicSpinner,
-  {
-    ref,
-    size: "lg",
-    className,
-    ...props
-  }
-) }));
+var AtomicPageSpinner = React5.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center p-8", children: /* @__PURE__ */ jsx(AtomicSpinner, { ref, size: "lg", className, ...props }) })
+);
 AtomicPageSpinner.displayName = "AtomicPageSpinner";
-var AtomicInlineSpinner = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  AtomicSpinner,
-  {
-    ref,
-    inline: true,
-    size: "sm",
-    color: "muted",
-    className,
-    ...props
-  }
-));
+var AtomicInlineSpinner = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(AtomicSpinner, { ref, inline: true, size: "sm", color: "muted", className, ...props }));
 AtomicInlineSpinner.displayName = "AtomicInlineSpinner";
 var badgeVariants = cva(
   "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
@@ -2065,59 +1984,52 @@ var AtomicBadge = React5.forwardRef(
     ...props
   }, ref) => {
     const iconSize = size === "sm" ? "h-3 w-3" : size === "lg" ? "h-4 w-4" : "h-3.5 w-3.5";
+    const iconClasses = size === "sm" ? "[&>*]:h-3 [&>*]:w-3" : size === "lg" ? "[&>*]:h-4 [&>*]:w-4" : "[&>*]:h-3.5 [&>*]:w-3.5";
     const dotSize = size === "sm" ? "h-1.5 w-1.5" : size === "lg" ? "h-2.5 w-2.5" : "h-2 w-2";
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref,
-        className: cn(badgeVariants({ variant, size, shape }), className),
-        ...props,
-        children: [
-          dot && /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: cn(
-                "mr-1.5 rounded-full",
-                dotSize,
-                !dotColor && (variant === "success" ? "bg-green-600" : variant === "warning" ? "bg-amber-600" : variant === "info" ? "bg-blue-600" : variant === "destructive" ? "bg-red-600" : variant === "gray" ? "bg-gray-600" : "bg-current")
-              ),
-              style: dotColor ? { backgroundColor: dotColor } : void 0
-            }
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn(badgeVariants({ variant, size, shape }), className), ...props, children: [
+      dot && /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "mr-1.5 rounded-full",
+            dotSize,
+            !dotColor && (variant === "success" ? "bg-green-600" : variant === "warning" ? "bg-amber-600" : variant === "info" ? "bg-blue-600" : variant === "destructive" ? "bg-red-600" : variant === "gray" ? "bg-gray-600" : "bg-current")
           ),
-          leftIcon && /* @__PURE__ */ jsx("span", { className: cn("mr-1 flex items-center", `[&>*]:${iconSize}`), children: leftIcon }),
-          children,
-          rightIcon && !removable && /* @__PURE__ */ jsx("span", { className: cn("ml-1 flex items-center", `[&>*]:${iconSize}`), children: rightIcon }),
-          removable && /* @__PURE__ */ jsx(
-            "button",
+          style: dotColor ? { backgroundColor: dotColor } : void 0
+        }
+      ),
+      leftIcon && /* @__PURE__ */ jsx("span", { className: cn("mr-1 flex items-center", iconClasses), children: leftIcon }),
+      children,
+      rightIcon && !removable && /* @__PURE__ */ jsx("span", { className: cn("ml-1 flex items-center", iconClasses), children: rightIcon }),
+      removable && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onRemove,
+          className: cn(
+            "ml-1 flex items-center rounded-full hover:bg-black/10 dark:hover:bg-white/10",
+            "transition-colors focus:outline-none focus:ring-1 focus:ring-current",
+            size === "sm" ? "p-0.5" : "p-1"
+          ),
+          children: removeIcon ? /* @__PURE__ */ jsx("span", { className: cn("flex items-center", iconClasses), children: removeIcon }) : /* @__PURE__ */ jsxs(
+            "svg",
             {
-              type: "button",
-              onClick: onRemove,
-              className: cn(
-                "ml-1 flex items-center rounded-full hover:bg-black/10 dark:hover:bg-white/10",
-                "transition-colors focus:outline-none focus:ring-1 focus:ring-current",
-                size === "sm" ? "p-0.5" : "p-1"
-              ),
-              children: removeIcon ? /* @__PURE__ */ jsx("span", { className: cn("flex items-center", `[&>*]:${iconSize}`), children: removeIcon }) : /* @__PURE__ */ jsxs(
-                "svg",
-                {
-                  className: iconSize,
-                  viewBox: "0 0 24 24",
-                  fill: "none",
-                  stroke: "currentColor",
-                  strokeWidth: "2",
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round",
-                  children: [
-                    /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-                    /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
-                  ]
-                }
-              )
+              className: iconSize,
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              children: [
+                /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+              ]
             }
           )
-        ]
-      }
-    );
+        }
+      )
+    ] });
   }
 );
 AtomicBadge.displayName = "AtomicBadge";
@@ -2129,31 +2041,13 @@ var AtomicStatusBadge = React5.forwardRef(({ status, variant, ...props }, ref) =
     away: { variant: "warning", dot: true, children: "Away" }
   };
   const config = statusConfig[status];
-  return /* @__PURE__ */ jsx(
-    AtomicBadge,
-    {
-      ref,
-      variant: variant || config.variant,
-      dot: config.dot,
-      ...props,
-      children: props.children || config.children
-    }
-  );
+  return /* @__PURE__ */ jsx(AtomicBadge, { ref, variant: variant || config.variant, dot: config.dot, ...props, children: props.children || config.children });
 });
 AtomicStatusBadge.displayName = "AtomicStatusBadge";
 var AtomicCountBadge = React5.forwardRef(({ count, max = 99, ...props }, ref) => {
   const displayCount = count > max ? `${max}+` : count.toString();
   if (count <= 0) return null;
-  return /* @__PURE__ */ jsx(
-    AtomicBadge,
-    {
-      ref,
-      variant: "destructive",
-      size: "sm",
-      ...props,
-      children: displayCount
-    }
-  );
+  return /* @__PURE__ */ jsx(AtomicBadge, { ref, variant: "destructive", size: "sm", ...props, children: displayCount });
 });
 AtomicCountBadge.displayName = "AtomicCountBadge";
 var getSpacingClass4 = (spacing2, prefix) => {
@@ -2259,27 +2153,9 @@ var AtomicTag = React5.forwardRef(
       className
     );
     const content = /* @__PURE__ */ jsxs(Fragment, { children: [
-      LeftIcon && /* @__PURE__ */ jsx(
-        LeftIcon,
-        {
-          size: iconSize,
-          className: cn(
-            "flex-shrink-0",
-            children ? "mr-1.5" : ""
-          )
-        }
-      ),
+      LeftIcon && /* @__PURE__ */ jsx(LeftIcon, { size: iconSize, className: cn("flex-shrink-0", children ? "mr-1.5" : "") }),
       children && /* @__PURE__ */ jsx("span", { className: "truncate", children }),
-      RightIcon && /* @__PURE__ */ jsx(
-        RightIcon,
-        {
-          size: iconSize,
-          className: cn(
-            "flex-shrink-0",
-            children ? "ml-1.5" : ""
-          )
-        }
-      ),
+      RightIcon && /* @__PURE__ */ jsx(RightIcon, { size: iconSize, className: cn("flex-shrink-0", children ? "ml-1.5" : "") }),
       removable && /* @__PURE__ */ jsx(
         "button",
         {
@@ -2296,24 +2172,15 @@ var AtomicTag = React5.forwardRef(
           },
           disabled,
           "aria-label": "Remove",
-          children: /* @__PURE__ */ jsx(
-            "svg",
+          children: /* @__PURE__ */ jsx("svg", { className: "w-3 h-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx(
+            "path",
             {
-              className: "w-3 h-3",
-              fill: "none",
-              stroke: "currentColor",
-              viewBox: "0 0 24 24",
-              children: /* @__PURE__ */ jsx(
-                "path",
-                {
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round",
-                  strokeWidth: 2,
-                  d: "M6 18L18 6M6 6l12 12"
-                }
-              )
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              strokeWidth: 2,
+              d: "M6 18L18 6M6 6l12 12"
             }
-          )
+          ) })
         }
       )
     ] });
@@ -2322,114 +2189,102 @@ var AtomicTag = React5.forwardRef(
         onClick?.(e);
       }
     };
-    return /* @__PURE__ */ jsx(
+    return React5.createElement(
       Component,
       {
         ref,
         className: classes,
         onClick: clickable ? handleClick : void 0,
-        ...rest,
-        children: content
-      }
+        ...rest
+      },
+      content
     );
   }
 );
 AtomicTag.displayName = "AtomicTag";
-var linkVariants = cva("transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", {
-  variants: {
-    variant: {
-      default: "text-foreground hover:text-foreground/80",
-      primary: "text-primary hover:text-primary/80",
-      secondary: "text-secondary-foreground hover:text-secondary-foreground/80",
-      muted: "text-muted-foreground hover:text-foreground",
-      destructive: "text-destructive hover:text-destructive/80",
-      ghost: "text-foreground hover:bg-accent hover:text-accent-foreground",
-      underline: "text-primary underline underline-offset-4 hover:text-primary/80",
-      button: "inline-flex items-center justify-center rounded-md text-sm font-medium h-10 px-4 py-2 bg-primary text-primary-foreground hover:bg-primary/90"
-    },
-    size: {
-      default: "",
-      sm: "text-sm",
-      lg: "text-lg",
-      xl: "text-xl"
+var linkVariants = cva(
+  "transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default: "text-foreground hover:text-foreground/80",
+        primary: "text-primary hover:text-primary/80",
+        secondary: "text-secondary-foreground hover:text-secondary-foreground/80",
+        muted: "text-muted-foreground hover:text-foreground",
+        destructive: "text-destructive hover:text-destructive/80",
+        ghost: "text-foreground hover:bg-accent hover:text-accent-foreground",
+        underline: "text-primary underline underline-offset-4 hover:text-primary/80",
+        button: "inline-flex items-center justify-center rounded-md text-sm font-medium h-10 px-4 py-2 bg-primary text-primary-foreground hover:bg-primary/90"
+      },
+      size: {
+        default: "",
+        sm: "text-sm",
+        lg: "text-lg",
+        xl: "text-xl"
+      },
+      weight: {
+        normal: "font-normal",
+        medium: "font-medium",
+        semibold: "font-semibold",
+        bold: "font-bold"
+      }
     },
-    weight: {
-      normal: "font-normal",
-      medium: "font-medium",
-      semibold: "font-semibold",
-      bold: "font-bold"
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      weight: "normal"
     }
-  },
-  defaultVariants: {
-    variant: "default",
-    size: "default",
-    weight: "normal"
   }
-});
-var AtomicLink = React5.forwardRef(({
-  className,
-  variant,
-  size,
-  weight,
-  external = false,
-  showExternalIcon = false,
-  prefetch = true,
-  externalIcon,
-  children,
-  href,
-  ...props
-}, ref) => {
-  const isExternalUrl = typeof href === "string" && (href.startsWith("http") || href.startsWith("//"));
-  const shouldBeExternal = external || isExternalUrl;
-  const linkProps = {
-    className: cn(linkVariants({ variant, size, weight }), className),
-    ref,
-    ...props
-  };
-  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+);
+var AtomicLink = React5.forwardRef(
+  ({
+    className,
+    variant,
+    size,
+    weight,
+    external = false,
+    showExternalIcon = false,
+    prefetch = true,
+    externalIcon,
     children,
-    shouldBeExternal && showExternalIcon && /* @__PURE__ */ jsx("span", { className: "ml-1 inline-block", children: externalIcon || /* @__PURE__ */ jsx(
-      "svg",
-      {
-        className: "h-3 w-3",
-        fill: "none",
-        stroke: "currentColor",
-        viewBox: "0 0 24 24",
-        xmlns: "http://www.w3.org/2000/svg",
-        children: /* @__PURE__ */ jsx(
-          "path",
-          {
-            strokeLinecap: "round",
-            strokeLinejoin: "round",
-            strokeWidth: 2,
-            d: "M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
-          }
-        )
-      }
-    ) })
-  ] });
-  if (shouldBeExternal) {
-    return /* @__PURE__ */ jsx(
-      "a",
-      {
-        href,
-        target: "_blank",
-        rel: "noopener noreferrer",
-        ...linkProps,
-        children: content
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(
-    Link,
-    {
-      href,
-      prefetch,
-      ...linkProps,
-      children: content
+    href,
+    ...props
+  }, ref) => {
+    const isExternalUrl = typeof href === "string" && (href.startsWith("http") || href.startsWith("//"));
+    const shouldBeExternal = external || isExternalUrl;
+    const linkProps = {
+      className: cn(linkVariants({ variant, size, weight }), className),
+      ref,
+      ...props
+    };
+    const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+      children,
+      shouldBeExternal && showExternalIcon && /* @__PURE__ */ jsx("span", { className: "ml-1 inline-block", children: externalIcon || /* @__PURE__ */ jsx(
+        "svg",
+        {
+          className: "h-3 w-3",
+          fill: "none",
+          stroke: "currentColor",
+          viewBox: "0 0 24 24",
+          xmlns: "http://www.w3.org/2000/svg",
+          children: /* @__PURE__ */ jsx(
+            "path",
+            {
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              strokeWidth: 2,
+              d: "M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+            }
+          )
+        }
+      ) })
+    ] });
+    if (shouldBeExternal) {
+      return /* @__PURE__ */ jsx("a", { href, target: "_blank", rel: "noopener noreferrer", ...linkProps, children: content });
     }
-  );
-});
+    return /* @__PURE__ */ jsx(Link, { href, prefetch, ...linkProps, children: content });
+  }
+);
 AtomicLink.displayName = "AtomicLink";
 var getSpacingClass5 = (spacing2, prefix) => {
   if (!spacing2) return "";
@@ -2481,10 +2336,10 @@ var AtomicDiv = React5.forwardRef(
     ...rest
   }, ref) => {
     const classes = cn(
-      d && `${d === "flex" ? "flex" : d === "inline-flex" ? "inline-flex" : d === "grid" ? "grid" : d === "hidden" ? "hidden" : d === "inline" ? "inline" : d === "inline-block" ? "inline-block" : "block"}`,
-      align && `items-${align === "start" ? "start" : align === "end" ? "end" : align === "center" ? "center" : align === "baseline" ? "baseline" : "stretch"}`,
-      justify && `justify-${justify === "start" ? "start" : justify === "end" ? "end" : justify === "center" ? "center" : justify === "between" ? "between" : justify === "around" ? "around" : "evenly"}`,
-      flexDir && `flex-${flexDir === "col" ? "col" : flexDir === "col-reverse" ? "col-reverse" : flexDir === "row-reverse" ? "row-reverse" : "row"}`,
+      d,
+      align && `items-${align}`,
+      justify && `justify-${justify}`,
+      flexDir && `flex-${flexDir}`,
       flexWrap && `flex-${flexWrap}`,
       flexGrow !== void 0 && `flex-grow-${flexGrow}`,
       flexShrink !== void 0 && `flex-shrink-${flexShrink}`,
@@ -2502,9 +2357,9 @@ var AtomicDiv = React5.forwardRef(
       border === true && "border",
       typeof border === "string" && border,
       borderColor && `border-${borderColor}`,
-      rounded && `rounded${rounded === "none" ? "-none" : rounded === "full" ? "-full" : rounded === "sm" ? "-sm" : rounded === "md" ? "" : `-${rounded}`}`,
-      shadow && `shadow${shadow === "none" ? "-none" : shadow === "sm" ? "-sm" : shadow === "md" ? "" : shadow === "inner" ? "-inner" : `-${shadow}`}`,
-      position && `${position}`,
+      rounded && `rounded-${rounded}`,
+      shadow && `shadow-${shadow}`,
+      position,
       top !== void 0 && `top-${top}`,
       right !== void 0 && `right-${right}`,
       bottom !== void 0 && `bottom-${bottom}`,
@@ -2524,7 +2379,13 @@ var AtomicDiv = React5.forwardRef(
   }
 );
 AtomicDiv.displayName = "AtomicDiv";
-var AtomicThemeProviderContext = createContext(void 0);
+var AtomicThemeProviderContext = createContext(
+  void 0
+);
+var getSystemTheme = () => {
+  if (typeof window === "undefined") return "light";
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+};
 var AtomicThemeProvider = ({
   children,
   defaultTheme = "system",
@@ -2545,10 +2406,6 @@ var AtomicThemeProvider = ({
     return defaultTheme;
   });
   const [actualTheme, setActualTheme] = useState("light");
-  const getSystemTheme = () => {
-    if (typeof window === "undefined") return "light";
-    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-  };
   const setTheme = (newTheme) => {
     try {
       localStorage.setItem(storageKey, newTheme);
@@ -2608,7 +2465,7 @@ var useAtomicTheme = () => {
 };
 
 // src/index.ts
-var VERSION = "2.0.0";
+var VERSION = "2.1.0";
 
 export { AnimationUtils, AtomicAlertType, AtomicAlignment, AtomicAnimationPresets, AtomicAnimationState, AtomicAnimations, AtomicAnimationsCss, AtomicAvatar, AtomicAvatarFallback, AtomicAvatarImage, AtomicBadge, AtomicBorders, AtomicBordersCss, AtomicBreakpoint, AtomicButton, AtomicButtonSpinner, AtomicButtonVariant, AtomicCard, AtomicCardContent, AtomicCardDescription, AtomicCardFooter, AtomicCardHeader, AtomicCardTitle, AtomicCardVariant, AtomicCheckbox, AtomicColorVariant, AtomicColorsCss, AtomicCountBadge, AtomicDesignTokensCss, AtomicDirection, AtomicDiv, AtomicEnumUtils, AtomicFormFieldState, AtomicIcon, AtomicImage, AtomicInlineSpinner, AtomicInput, AtomicInputVariant, AtomicLink, AtomicLoadingState, AtomicModalSize, AtomicOrientation, AtomicPageSpinner, AtomicPosition, AtomicShadows, AtomicShadowsCss, AtomicSize, AtomicSpacingCss, AtomicSpinner, AtomicStatus, AtomicStatusBadge, AtomicSwitch, AtomicTag, AtomicText, AtomicTextVariant, AtomicThemeMode, AtomicThemeProvider, AtomicTypographyCss, BorderUtils, ShadowUtils, VERSION, avatarImageVariants, avatarVariants, badgeVariants, buttonVariants, cardDescriptionVariants, cardHeaderVariants, cardTitleVariants, cardVariants, cn, inputVariants, linkVariants, spinnerVariants, textVariants, useAtomicTheme };
 //# sourceMappingURL=index.mjs.map