@particle-academy/react-fancy 4.0.1 → 4.2.0

package/dist/index.js

@@ -2186,6 +2186,56 @@ var Icon = forwardRef(
   }
 );
 Icon.displayName = "Icon";
+
+// src/components/Button/Button.colors.ts
+var buttonColorClasses = {
+  slate: "bg-slate-500 text-white border border-slate-600 hover:bg-slate-600 dark:bg-slate-600 dark:border-slate-500 dark:hover:bg-slate-500",
+  gray: "bg-gray-500 text-white border border-gray-600 hover:bg-gray-600 dark:bg-gray-600 dark:border-gray-500 dark:hover:bg-gray-500",
+  zinc: "bg-zinc-500 text-white border border-zinc-600 hover:bg-zinc-600 dark:bg-zinc-600 dark:border-zinc-500 dark:hover:bg-zinc-500",
+  neutral: "bg-neutral-500 text-white border border-neutral-600 hover:bg-neutral-600 dark:bg-neutral-600 dark:border-neutral-500 dark:hover:bg-neutral-500",
+  stone: "bg-stone-500 text-white border border-stone-600 hover:bg-stone-600 dark:bg-stone-600 dark:border-stone-500 dark:hover:bg-stone-500",
+  red: "bg-red-500 text-white border border-red-600 hover:bg-red-600 dark:bg-red-600 dark:border-red-500 dark:hover:bg-red-500",
+  orange: "bg-orange-500 text-white border border-orange-600 hover:bg-orange-600 dark:bg-orange-600 dark:border-orange-500 dark:hover:bg-orange-500",
+  amber: "bg-amber-400 text-amber-950 border border-amber-500 hover:bg-amber-500 dark:bg-amber-300 dark:text-amber-950 dark:border-amber-400 dark:hover:bg-amber-400",
+  yellow: "bg-yellow-400 text-yellow-950 border border-yellow-500 hover:bg-yellow-500 dark:bg-yellow-300 dark:text-yellow-950 dark:border-yellow-400 dark:hover:bg-yellow-400",
+  lime: "bg-lime-400 text-lime-950 border border-lime-500 hover:bg-lime-500 dark:bg-lime-300 dark:text-lime-950 dark:border-lime-400 dark:hover:bg-lime-400",
+  green: "bg-green-500 text-white border border-green-600 hover:bg-green-600 dark:bg-green-600 dark:border-green-500 dark:hover:bg-green-500",
+  emerald: "bg-emerald-500 text-white border border-emerald-600 hover:bg-emerald-600 dark:bg-emerald-600 dark:border-emerald-500 dark:hover:bg-emerald-500",
+  teal: "bg-teal-500 text-white border border-teal-600 hover:bg-teal-600 dark:bg-teal-600 dark:border-teal-500 dark:hover:bg-teal-500",
+  cyan: "bg-cyan-500 text-white border border-cyan-600 hover:bg-cyan-600 dark:bg-cyan-600 dark:border-cyan-500 dark:hover:bg-cyan-500",
+  sky: "bg-sky-500 text-white border border-sky-600 hover:bg-sky-600 dark:bg-sky-600 dark:border-sky-500 dark:hover:bg-sky-500",
+  blue: "bg-blue-500 text-white border border-blue-600 hover:bg-blue-600 dark:bg-blue-600 dark:border-blue-500 dark:hover:bg-blue-500",
+  indigo: "bg-indigo-500 text-white border border-indigo-600 hover:bg-indigo-600 dark:bg-indigo-600 dark:border-indigo-500 dark:hover:bg-indigo-500",
+  violet: "bg-violet-500 text-white border border-violet-600 hover:bg-violet-600 dark:bg-violet-600 dark:border-violet-500 dark:hover:bg-violet-500",
+  purple: "bg-purple-500 text-white border border-purple-600 hover:bg-purple-600 dark:bg-purple-600 dark:border-purple-500 dark:hover:bg-purple-500",
+  fuchsia: "bg-fuchsia-500 text-white border border-fuchsia-600 hover:bg-fuchsia-600 dark:bg-fuchsia-600 dark:border-fuchsia-500 dark:hover:bg-fuchsia-500",
+  pink: "bg-pink-500 text-white border border-pink-600 hover:bg-pink-600 dark:bg-pink-600 dark:border-pink-500 dark:hover:bg-pink-500",
+  rose: "bg-rose-500 text-white border border-rose-600 hover:bg-rose-600 dark:bg-rose-600 dark:border-rose-500 dark:hover:bg-rose-500"
+};
+var buttonGhostClasses = {
+  slate: "bg-transparent text-slate-600 hover:bg-slate-50 dark:text-slate-400 dark:hover:bg-slate-950/50",
+  gray: "bg-transparent text-gray-600 hover:bg-gray-50 dark:text-gray-400 dark:hover:bg-gray-950/50",
+  zinc: "bg-transparent text-zinc-600 hover:bg-zinc-50 dark:text-zinc-400 dark:hover:bg-zinc-950/50",
+  neutral: "bg-transparent text-neutral-600 hover:bg-neutral-50 dark:text-neutral-400 dark:hover:bg-neutral-950/50",
+  stone: "bg-transparent text-stone-600 hover:bg-stone-50 dark:text-stone-400 dark:hover:bg-stone-950/50",
+  red: "bg-transparent text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-950/50",
+  orange: "bg-transparent text-orange-600 hover:bg-orange-50 dark:text-orange-400 dark:hover:bg-orange-950/50",
+  amber: "bg-transparent text-amber-600 hover:bg-amber-50 dark:text-amber-400 dark:hover:bg-amber-950/50",
+  yellow: "bg-transparent text-yellow-600 hover:bg-yellow-50 dark:text-yellow-400 dark:hover:bg-yellow-950/50",
+  lime: "bg-transparent text-lime-600 hover:bg-lime-50 dark:text-lime-400 dark:hover:bg-lime-950/50",
+  green: "bg-transparent text-green-600 hover:bg-green-50 dark:text-green-400 dark:hover:bg-green-950/50",
+  emerald: "bg-transparent text-emerald-600 hover:bg-emerald-50 dark:text-emerald-400 dark:hover:bg-emerald-950/50",
+  teal: "bg-transparent text-teal-600 hover:bg-teal-50 dark:text-teal-400 dark:hover:bg-teal-950/50",
+  cyan: "bg-transparent text-cyan-600 hover:bg-cyan-50 dark:text-cyan-400 dark:hover:bg-cyan-950/50",
+  sky: "bg-transparent text-sky-600 hover:bg-sky-50 dark:text-sky-400 dark:hover:bg-sky-950/50",
+  blue: "bg-transparent text-blue-600 hover:bg-blue-50 dark:text-blue-400 dark:hover:bg-blue-950/50",
+  indigo: "bg-transparent text-indigo-600 hover:bg-indigo-50 dark:text-indigo-400 dark:hover:bg-indigo-950/50",
+  violet: "bg-transparent text-violet-600 hover:bg-violet-50 dark:text-violet-400 dark:hover:bg-violet-950/50",
+  purple: "bg-transparent text-purple-600 hover:bg-purple-50 dark:text-purple-400 dark:hover:bg-purple-950/50",
+  fuchsia: "bg-transparent text-fuchsia-600 hover:bg-fuchsia-50 dark:text-fuchsia-400 dark:hover:bg-fuchsia-950/50",
+  pink: "bg-transparent text-pink-600 hover:bg-pink-50 dark:text-pink-400 dark:hover:bg-pink-950/50",
+  rose: "bg-transparent text-rose-600 hover:bg-rose-50 dark:text-rose-400 dark:hover:bg-rose-950/50"
+};
 var iconSizeMap = {
   xs: "xs",
   sm: "xs",
@@ -2200,34 +2250,10 @@ var alertIconSizeMap = {
   lg: "sm",
   xl: "sm"
 };
-var colorClasses = {
-  blue: "bg-blue-500 text-white border border-blue-600 hover:bg-blue-600 dark:bg-blue-600 dark:border-blue-500 dark:hover:bg-blue-500",
-  emerald: "bg-emerald-500 text-white border border-emerald-600 hover:bg-emerald-600 dark:bg-emerald-600 dark:border-emerald-500 dark:hover:bg-emerald-500",
-  amber: "bg-amber-500 text-white border border-amber-600 hover:bg-amber-600 dark:bg-amber-600 dark:border-amber-500 dark:hover:bg-amber-500",
-  red: "bg-red-500 text-white border border-red-600 hover:bg-red-600 dark:bg-red-600 dark:border-red-500 dark:hover:bg-red-500",
-  violet: "bg-violet-500 text-white border border-violet-600 hover:bg-violet-600 dark:bg-violet-600 dark:border-violet-500 dark:hover:bg-violet-500",
-  indigo: "bg-indigo-500 text-white border border-indigo-600 hover:bg-indigo-600 dark:bg-indigo-600 dark:border-indigo-500 dark:hover:bg-indigo-500",
-  sky: "bg-sky-500 text-white border border-sky-600 hover:bg-sky-600 dark:bg-sky-600 dark:border-sky-500 dark:hover:bg-sky-500",
-  rose: "bg-rose-500 text-white border border-rose-600 hover:bg-rose-600 dark:bg-rose-600 dark:border-rose-500 dark:hover:bg-rose-500",
-  orange: "bg-orange-500 text-white border border-orange-600 hover:bg-orange-600 dark:bg-orange-600 dark:border-orange-500 dark:hover:bg-orange-500",
-  zinc: "bg-zinc-500 text-white border border-zinc-600 hover:bg-zinc-600 dark:bg-zinc-600 dark:border-zinc-500 dark:hover:bg-zinc-500"
-};
 var defaultClasses = "bg-white text-zinc-700 border border-zinc-200 hover:bg-zinc-50 hover:border-zinc-300 dark:bg-zinc-800 dark:text-zinc-300 dark:border-zinc-700 dark:hover:bg-zinc-700";
 var activeClasses = "bg-blue-500 text-white border border-blue-600 hover:bg-blue-600 dark:bg-blue-600 dark:border-blue-500 dark:hover:bg-blue-500";
 var checkedClasses = "bg-emerald-500 text-white border border-emerald-600 hover:bg-emerald-600 dark:bg-emerald-600 dark:border-emerald-500 dark:hover:bg-emerald-500";
 var warnClasses = "bg-amber-50 text-amber-700 border border-amber-200 hover:bg-amber-100 dark:bg-amber-900/30 dark:text-amber-300 dark:border-amber-700 dark:hover:bg-amber-900/50";
-var ghostColorClasses = {
-  blue: "bg-transparent text-blue-600 hover:bg-blue-50 dark:text-blue-400 dark:hover:bg-blue-950/50",
-  emerald: "bg-transparent text-emerald-600 hover:bg-emerald-50 dark:text-emerald-400 dark:hover:bg-emerald-950/50",
-  amber: "bg-transparent text-amber-600 hover:bg-amber-50 dark:text-amber-400 dark:hover:bg-amber-950/50",
-  red: "bg-transparent text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-950/50",
-  violet: "bg-transparent text-violet-600 hover:bg-violet-50 dark:text-violet-400 dark:hover:bg-violet-950/50",
-  indigo: "bg-transparent text-indigo-600 hover:bg-indigo-50 dark:text-indigo-400 dark:hover:bg-indigo-950/50",
-  sky: "bg-transparent text-sky-600 hover:bg-sky-50 dark:text-sky-400 dark:hover:bg-sky-950/50",
-  rose: "bg-transparent text-rose-600 hover:bg-rose-50 dark:text-rose-400 dark:hover:bg-rose-950/50",
-  orange: "bg-transparent text-orange-600 hover:bg-orange-50 dark:text-orange-400 dark:hover:bg-orange-950/50",
-  zinc: "bg-transparent text-zinc-600 hover:bg-zinc-100 dark:text-zinc-400 dark:hover:bg-zinc-800"
-};
 var ghostDefaultClasses = "bg-transparent text-zinc-700 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-800";
 var ghostActiveClasses = "bg-blue-50 text-blue-700 hover:bg-blue-100 dark:bg-blue-950/50 dark:text-blue-300 dark:hover:bg-blue-950";
 var ghostCheckedClasses = "bg-emerald-50 text-emerald-700 hover:bg-emerald-100 dark:bg-emerald-950/50 dark:text-emerald-300 dark:hover:bg-emerald-950";
@@ -2272,13 +2298,13 @@ function isColored(color, active, checked) {
 }
 function getColorClasses(color, active, checked, warn, ghost) {
   if (ghost) {
-    if (color) return ghostColorClasses[color];
+    if (color) return buttonGhostClasses[color];
     if (checked) return ghostCheckedClasses;
     if (active) return ghostActiveClasses;
     if (warn) return ghostWarnClasses;
     return ghostDefaultClasses;
   }
-  if (color) return colorClasses[color];
+  if (color) return buttonColorClasses[color];
   if (checked) return checkedClasses;
   if (active) return activeClasses;
   if (warn) return warnClasses;
@@ -4014,8 +4040,14 @@ function RadioGroup({
   return content;
 }
 RadioGroup.displayName = "RadioGroup";
-var trackColorMap = {
+
+// src/components/inputs/Switch/Switch.colors.ts
+var switchTrack = {
+  slate: "bg-slate-500",
+  gray: "bg-gray-500",
   zinc: "bg-zinc-500",
+  neutral: "bg-neutral-500",
+  stone: "bg-stone-500",
   red: "bg-red-500",
   orange: "bg-orange-500",
   amber: "bg-amber-500",
@@ -4093,7 +4125,7 @@ var Switch = forwardRef(
           className: cn(
             "relative inline-flex shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/40 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
             trackSizes,
-            checked ? trackColorMap[color] : "bg-zinc-200 dark:bg-zinc-600",
+            checked ? switchTrack[color] : "bg-zinc-200 dark:bg-zinc-600",
             dirtyRingClasses(dirty),
             error && "ring-2 ring-red-500/50"
           ),
@@ -5671,7 +5703,7 @@ var weightClasses2 = {
   semibold: "font-semibold",
   bold: "font-bold"
 };
-var colorClasses2 = {
+var colorClasses = {
   default: "text-zinc-900 dark:text-zinc-100",
   muted: "text-zinc-500 dark:text-zinc-400",
   accent: "text-blue-600 dark:text-blue-400",
@@ -5696,7 +5728,7 @@ var Text = forwardRef(
         className: cn(
           sizeClasses4[size],
           weightClasses2[weight],
-          colorClasses2[color],
+          colorClasses[color],
           className
         ),
         ...props,
@@ -5754,52 +5786,114 @@ var Separator = forwardRef(
   }
 );
 Separator.displayName = "Separator";
-var solidClasses = {
+
+// src/components/Badge/Badge.colors.ts
+var badgeSolid = {
+  slate: "bg-slate-600 text-white dark:bg-slate-500",
+  gray: "bg-gray-600 text-white dark:bg-gray-500",
   zinc: "bg-zinc-600 text-white dark:bg-zinc-500",
+  neutral: "bg-neutral-600 text-white dark:bg-neutral-500",
+  stone: "bg-stone-600 text-white dark:bg-stone-500",
   red: "bg-red-600 text-white dark:bg-red-500",
-  blue: "bg-blue-600 text-white dark:bg-blue-500",
+  orange: "bg-orange-600 text-white dark:bg-orange-500",
+  amber: "bg-amber-400 text-amber-950 dark:bg-amber-300 dark:text-amber-950",
+  yellow: "bg-yellow-400 text-yellow-950 dark:bg-yellow-300 dark:text-yellow-950",
+  lime: "bg-lime-400 text-lime-950 dark:bg-lime-300 dark:text-lime-950",
   green: "bg-green-600 text-white dark:bg-green-500",
-  amber: "bg-amber-500 text-white dark:bg-amber-400 dark:text-amber-950",
+  emerald: "bg-emerald-600 text-white dark:bg-emerald-500",
+  teal: "bg-teal-600 text-white dark:bg-teal-500",
+  cyan: "bg-cyan-600 text-white dark:bg-cyan-500",
+  sky: "bg-sky-600 text-white dark:bg-sky-500",
+  blue: "bg-blue-600 text-white dark:bg-blue-500",
+  indigo: "bg-indigo-600 text-white dark:bg-indigo-500",
   violet: "bg-violet-600 text-white dark:bg-violet-500",
+  purple: "bg-purple-600 text-white dark:bg-purple-500",
+  fuchsia: "bg-fuchsia-600 text-white dark:bg-fuchsia-500",
+  pink: "bg-pink-600 text-white dark:bg-pink-500",
   rose: "bg-rose-600 text-white dark:bg-rose-500"
 };
-var outlineClasses = {
+var badgeOutline = {
+  slate: "border border-slate-300 text-slate-700 dark:border-slate-600 dark:text-slate-300",
+  gray: "border border-gray-300 text-gray-700 dark:border-gray-600 dark:text-gray-300",
   zinc: "border border-zinc-300 text-zinc-700 dark:border-zinc-600 dark:text-zinc-300",
+  neutral: "border border-neutral-300 text-neutral-700 dark:border-neutral-600 dark:text-neutral-300",
+  stone: "border border-stone-300 text-stone-700 dark:border-stone-600 dark:text-stone-300",
   red: "border border-red-300 text-red-700 dark:border-red-600 dark:text-red-300",
-  blue: "border border-blue-300 text-blue-700 dark:border-blue-600 dark:text-blue-300",
-  green: "border border-green-300 text-green-700 dark:border-green-600 dark:text-green-300",
+  orange: "border border-orange-300 text-orange-700 dark:border-orange-600 dark:text-orange-300",
   amber: "border border-amber-300 text-amber-700 dark:border-amber-600 dark:text-amber-300",
+  yellow: "border border-yellow-300 text-yellow-700 dark:border-yellow-600 dark:text-yellow-300",
+  lime: "border border-lime-300 text-lime-700 dark:border-lime-600 dark:text-lime-300",
+  green: "border border-green-300 text-green-700 dark:border-green-600 dark:text-green-300",
+  emerald: "border border-emerald-300 text-emerald-700 dark:border-emerald-600 dark:text-emerald-300",
+  teal: "border border-teal-300 text-teal-700 dark:border-teal-600 dark:text-teal-300",
+  cyan: "border border-cyan-300 text-cyan-700 dark:border-cyan-600 dark:text-cyan-300",
+  sky: "border border-sky-300 text-sky-700 dark:border-sky-600 dark:text-sky-300",
+  blue: "border border-blue-300 text-blue-700 dark:border-blue-600 dark:text-blue-300",
+  indigo: "border border-indigo-300 text-indigo-700 dark:border-indigo-600 dark:text-indigo-300",
   violet: "border border-violet-300 text-violet-700 dark:border-violet-600 dark:text-violet-300",
+  purple: "border border-purple-300 text-purple-700 dark:border-purple-600 dark:text-purple-300",
+  fuchsia: "border border-fuchsia-300 text-fuchsia-700 dark:border-fuchsia-600 dark:text-fuchsia-300",
+  pink: "border border-pink-300 text-pink-700 dark:border-pink-600 dark:text-pink-300",
   rose: "border border-rose-300 text-rose-700 dark:border-rose-600 dark:text-rose-300"
 };
-var softClasses = {
-  zinc: "bg-zinc-100 text-zinc-700 dark:bg-zinc-800 dark:text-zinc-300",
+var badgeSoft = {
+  slate: "bg-slate-100 text-slate-700 dark:bg-slate-900/30 dark:text-slate-300",
+  gray: "bg-gray-100 text-gray-700 dark:bg-gray-900/30 dark:text-gray-300",
+  zinc: "bg-zinc-100 text-zinc-700 dark:bg-zinc-900/30 dark:text-zinc-300",
+  neutral: "bg-neutral-100 text-neutral-700 dark:bg-neutral-900/30 dark:text-neutral-300",
+  stone: "bg-stone-100 text-stone-700 dark:bg-stone-900/30 dark:text-stone-300",
   red: "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300",
-  blue: "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300",
-  green: "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300",
+  orange: "bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-300",
   amber: "bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300",
+  yellow: "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-300",
+  lime: "bg-lime-100 text-lime-700 dark:bg-lime-900/30 dark:text-lime-300",
+  green: "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300",
+  emerald: "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300",
+  teal: "bg-teal-100 text-teal-700 dark:bg-teal-900/30 dark:text-teal-300",
+  cyan: "bg-cyan-100 text-cyan-700 dark:bg-cyan-900/30 dark:text-cyan-300",
+  sky: "bg-sky-100 text-sky-700 dark:bg-sky-900/30 dark:text-sky-300",
+  blue: "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300",
+  indigo: "bg-indigo-100 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-300",
   violet: "bg-violet-100 text-violet-700 dark:bg-violet-900/30 dark:text-violet-300",
+  purple: "bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-300",
+  fuchsia: "bg-fuchsia-100 text-fuchsia-700 dark:bg-fuchsia-900/30 dark:text-fuchsia-300",
+  pink: "bg-pink-100 text-pink-700 dark:bg-pink-900/30 dark:text-pink-300",
   rose: "bg-rose-100 text-rose-700 dark:bg-rose-900/30 dark:text-rose-300"
 };
+var badgeDot = {
+  slate: "bg-slate-500",
+  gray: "bg-gray-500",
+  zinc: "bg-zinc-500",
+  neutral: "bg-neutral-500",
+  stone: "bg-stone-500",
+  red: "bg-red-500",
+  orange: "bg-orange-500",
+  amber: "bg-amber-500",
+  yellow: "bg-yellow-500",
+  lime: "bg-lime-500",
+  green: "bg-green-500",
+  emerald: "bg-emerald-500",
+  teal: "bg-teal-500",
+  cyan: "bg-cyan-500",
+  sky: "bg-sky-500",
+  blue: "bg-blue-500",
+  indigo: "bg-indigo-500",
+  violet: "bg-violet-500",
+  purple: "bg-purple-500",
+  fuchsia: "bg-fuchsia-500",
+  pink: "bg-pink-500",
+  rose: "bg-rose-500"
+};
 var variantMap = {
-  solid: solidClasses,
-  outline: outlineClasses,
-  soft: softClasses
+  solid: badgeSolid,
+  outline: badgeOutline,
+  soft: badgeSoft
 };
 var sizeClasses5 = {
   sm: "text-xs px-1.5 py-0.5",
   md: "text-sm px-2 py-0.5",
   lg: "text-base px-2.5 py-1"
 };
-var dotColorClasses = {
-  zinc: "bg-zinc-500",
-  red: "bg-red-500",
-  blue: "bg-blue-500",
-  green: "bg-green-500",
-  amber: "bg-amber-500",
-  violet: "bg-violet-500",
-  rose: "bg-rose-500"
-};
 var Badge = forwardRef(
   ({
     color = "zinc",
@@ -5828,7 +5922,7 @@ var Badge = forwardRef(
             {
               className: cn(
                 "inline-block h-1.5 w-1.5 rounded-full",
-                dotColorClasses[color]
+                badgeDot[color]
               )
             }
           ),
@@ -5949,6 +6043,80 @@ var Skeleton = forwardRef(
   }
 );
 Skeleton.displayName = "Skeleton";
+
+// src/components/Progress/Progress.colors.ts
+var progressFill = {
+  slate: "bg-slate-500 dark:bg-slate-400",
+  gray: "bg-gray-500 dark:bg-gray-400",
+  zinc: "bg-zinc-500 dark:bg-zinc-400",
+  neutral: "bg-neutral-500 dark:bg-neutral-400",
+  stone: "bg-stone-500 dark:bg-stone-400",
+  red: "bg-red-500 dark:bg-red-400",
+  orange: "bg-orange-500 dark:bg-orange-400",
+  amber: "bg-amber-500 dark:bg-amber-400",
+  yellow: "bg-yellow-500 dark:bg-yellow-400",
+  lime: "bg-lime-500 dark:bg-lime-400",
+  green: "bg-green-500 dark:bg-green-400",
+  emerald: "bg-emerald-500 dark:bg-emerald-400",
+  teal: "bg-teal-500 dark:bg-teal-400",
+  cyan: "bg-cyan-500 dark:bg-cyan-400",
+  sky: "bg-sky-500 dark:bg-sky-400",
+  blue: "bg-blue-500 dark:bg-blue-400",
+  indigo: "bg-indigo-500 dark:bg-indigo-400",
+  violet: "bg-violet-500 dark:bg-violet-400",
+  purple: "bg-purple-500 dark:bg-purple-400",
+  fuchsia: "bg-fuchsia-500 dark:bg-fuchsia-400",
+  pink: "bg-pink-500 dark:bg-pink-400",
+  rose: "bg-rose-500 dark:bg-rose-400"
+};
+var progressStroke = {
+  slate: "stroke-slate-500 dark:stroke-slate-400",
+  gray: "stroke-gray-500 dark:stroke-gray-400",
+  zinc: "stroke-zinc-500 dark:stroke-zinc-400",
+  neutral: "stroke-neutral-500 dark:stroke-neutral-400",
+  stone: "stroke-stone-500 dark:stroke-stone-400",
+  red: "stroke-red-500 dark:stroke-red-400",
+  orange: "stroke-orange-500 dark:stroke-orange-400",
+  amber: "stroke-amber-500 dark:stroke-amber-400",
+  yellow: "stroke-yellow-500 dark:stroke-yellow-400",
+  lime: "stroke-lime-500 dark:stroke-lime-400",
+  green: "stroke-green-500 dark:stroke-green-400",
+  emerald: "stroke-emerald-500 dark:stroke-emerald-400",
+  teal: "stroke-teal-500 dark:stroke-teal-400",
+  cyan: "stroke-cyan-500 dark:stroke-cyan-400",
+  sky: "stroke-sky-500 dark:stroke-sky-400",
+  blue: "stroke-blue-500 dark:stroke-blue-400",
+  indigo: "stroke-indigo-500 dark:stroke-indigo-400",
+  violet: "stroke-violet-500 dark:stroke-violet-400",
+  purple: "stroke-purple-500 dark:stroke-purple-400",
+  fuchsia: "stroke-fuchsia-500 dark:stroke-fuchsia-400",
+  pink: "stroke-pink-500 dark:stroke-pink-400",
+  rose: "stroke-rose-500 dark:stroke-rose-400"
+};
+var progressText = {
+  slate: "text-slate-600 dark:text-slate-400",
+  gray: "text-gray-600 dark:text-gray-400",
+  zinc: "text-zinc-600 dark:text-zinc-400",
+  neutral: "text-neutral-600 dark:text-neutral-400",
+  stone: "text-stone-600 dark:text-stone-400",
+  red: "text-red-600 dark:text-red-400",
+  orange: "text-orange-600 dark:text-orange-400",
+  amber: "text-amber-600 dark:text-amber-400",
+  yellow: "text-yellow-600 dark:text-yellow-400",
+  lime: "text-lime-600 dark:text-lime-400",
+  green: "text-green-600 dark:text-green-400",
+  emerald: "text-emerald-600 dark:text-emerald-400",
+  teal: "text-teal-600 dark:text-teal-400",
+  cyan: "text-cyan-600 dark:text-cyan-400",
+  sky: "text-sky-600 dark:text-sky-400",
+  blue: "text-blue-600 dark:text-blue-400",
+  indigo: "text-indigo-600 dark:text-indigo-400",
+  violet: "text-violet-600 dark:text-violet-400",
+  purple: "text-purple-600 dark:text-purple-400",
+  fuchsia: "text-fuchsia-600 dark:text-fuchsia-400",
+  pink: "text-pink-600 dark:text-pink-400",
+  rose: "text-rose-600 dark:text-rose-400"
+};
 var barHeightClasses = {
   sm: "h-1.5",
   md: "h-2.5",
@@ -5959,30 +6127,6 @@ var circularSizeMap = {
   md: 48,
   lg: 64
 };
-var colorClasses3 = {
-  blue: "bg-blue-500 dark:bg-blue-400",
-  green: "bg-green-500 dark:bg-green-400",
-  amber: "bg-amber-500 dark:bg-amber-400",
-  red: "bg-red-500 dark:bg-red-400",
-  violet: "bg-violet-500 dark:bg-violet-400",
-  zinc: "bg-zinc-500 dark:bg-zinc-400"
-};
-var strokeColorClasses = {
-  blue: "stroke-blue-500 dark:stroke-blue-400",
-  green: "stroke-green-500 dark:stroke-green-400",
-  amber: "stroke-amber-500 dark:stroke-amber-400",
-  red: "stroke-red-500 dark:stroke-red-400",
-  violet: "stroke-violet-500 dark:stroke-violet-400",
-  zinc: "stroke-zinc-500 dark:stroke-zinc-400"
-};
-var textColorClasses = {
-  blue: "text-blue-600 dark:text-blue-400",
-  green: "text-green-600 dark:text-green-400",
-  amber: "text-amber-600 dark:text-amber-400",
-  red: "text-red-600 dark:text-red-400",
-  violet: "text-violet-600 dark:text-violet-400",
-  zinc: "text-zinc-600 dark:text-zinc-400"
-};
 var textSizeClasses = {
   sm: "text-[8px]",
   md: "text-[10px]",
@@ -6047,7 +6191,7 @@ var Progress = forwardRef(
                       strokeLinecap: "round",
                       strokeDasharray: circumference,
                       strokeDashoffset: offset,
-                      className: cn(strokeColorClasses[color], "transition-[stroke-dashoffset] duration-300"),
+                      className: cn(progressStroke[color], "transition-[stroke-dashoffset] duration-300"),
                       style: { transform: "rotate(-90deg)", transformOrigin: "center" }
                     }
                   )
@@ -6059,7 +6203,7 @@ var Progress = forwardRef(
               {
                 className: cn(
                   "absolute font-medium",
-                  textColorClasses[color],
+                  progressText[color],
                   textSizeClasses[size]
                 ),
                 children: [
@@ -6095,7 +6239,7 @@ var Progress = forwardRef(
                 {
                   className: cn(
                     "h-full rounded-full transition-[width] duration-300",
-                    colorClasses3[color],
+                    progressFill[color],
                     indeterminate && "animate-pulse w-full"
                   ),
                   style: indeterminate ? void 0 : { width: `${percentage}%` }
@@ -6108,7 +6252,7 @@ var Progress = forwardRef(
             {
               className: cn(
                 "mt-1 block text-right text-xs font-medium",
-                textColorClasses[color]
+                progressText[color]
               ),
               children: [
                 Math.round(percentage),
@@ -6339,19 +6483,55 @@ var Card = Object.assign(CardRoot, {
   Body: CardBody,
   Footer: CardFooter
 });
-var colorClasses4 = {
-  blue: "border-blue-500 bg-blue-50 text-blue-900 dark:border-blue-400 dark:bg-blue-950/50 dark:text-blue-100",
-  green: "border-green-500 bg-green-50 text-green-900 dark:border-green-400 dark:bg-green-950/50 dark:text-green-100",
-  amber: "border-amber-500 bg-amber-50 text-amber-900 dark:border-amber-400 dark:bg-amber-950/50 dark:text-amber-100",
+
+// src/components/Callout/Callout.colors.ts
+var calloutContainer = {
+  slate: "border-slate-500 bg-slate-50 text-slate-900 dark:border-slate-400 dark:bg-slate-950/50 dark:text-slate-100",
+  gray: "border-gray-500 bg-gray-50 text-gray-900 dark:border-gray-400 dark:bg-gray-950/50 dark:text-gray-100",
+  zinc: "border-zinc-500 bg-zinc-50 text-zinc-900 dark:border-zinc-400 dark:bg-zinc-950/50 dark:text-zinc-100",
+  neutral: "border-neutral-500 bg-neutral-50 text-neutral-900 dark:border-neutral-400 dark:bg-neutral-950/50 dark:text-neutral-100",
+  stone: "border-stone-500 bg-stone-50 text-stone-900 dark:border-stone-400 dark:bg-stone-950/50 dark:text-stone-100",
   red: "border-red-500 bg-red-50 text-red-900 dark:border-red-400 dark:bg-red-950/50 dark:text-red-100",
-  zinc: "border-zinc-500 bg-zinc-50 text-zinc-900 dark:border-zinc-400 dark:bg-zinc-800/50 dark:text-zinc-100"
+  orange: "border-orange-500 bg-orange-50 text-orange-900 dark:border-orange-400 dark:bg-orange-950/50 dark:text-orange-100",
+  amber: "border-amber-500 bg-amber-50 text-amber-900 dark:border-amber-400 dark:bg-amber-950/50 dark:text-amber-100",
+  yellow: "border-yellow-500 bg-yellow-50 text-yellow-900 dark:border-yellow-400 dark:bg-yellow-950/50 dark:text-yellow-100",
+  lime: "border-lime-500 bg-lime-50 text-lime-900 dark:border-lime-400 dark:bg-lime-950/50 dark:text-lime-100",
+  green: "border-green-500 bg-green-50 text-green-900 dark:border-green-400 dark:bg-green-950/50 dark:text-green-100",
+  emerald: "border-emerald-500 bg-emerald-50 text-emerald-900 dark:border-emerald-400 dark:bg-emerald-950/50 dark:text-emerald-100",
+  teal: "border-teal-500 bg-teal-50 text-teal-900 dark:border-teal-400 dark:bg-teal-950/50 dark:text-teal-100",
+  cyan: "border-cyan-500 bg-cyan-50 text-cyan-900 dark:border-cyan-400 dark:bg-cyan-950/50 dark:text-cyan-100",
+  sky: "border-sky-500 bg-sky-50 text-sky-900 dark:border-sky-400 dark:bg-sky-950/50 dark:text-sky-100",
+  blue: "border-blue-500 bg-blue-50 text-blue-900 dark:border-blue-400 dark:bg-blue-950/50 dark:text-blue-100",
+  indigo: "border-indigo-500 bg-indigo-50 text-indigo-900 dark:border-indigo-400 dark:bg-indigo-950/50 dark:text-indigo-100",
+  violet: "border-violet-500 bg-violet-50 text-violet-900 dark:border-violet-400 dark:bg-violet-950/50 dark:text-violet-100",
+  purple: "border-purple-500 bg-purple-50 text-purple-900 dark:border-purple-400 dark:bg-purple-950/50 dark:text-purple-100",
+  fuchsia: "border-fuchsia-500 bg-fuchsia-50 text-fuchsia-900 dark:border-fuchsia-400 dark:bg-fuchsia-950/50 dark:text-fuchsia-100",
+  pink: "border-pink-500 bg-pink-50 text-pink-900 dark:border-pink-400 dark:bg-pink-950/50 dark:text-pink-100",
+  rose: "border-rose-500 bg-rose-50 text-rose-900 dark:border-rose-400 dark:bg-rose-950/50 dark:text-rose-100"
 };
-var iconColorClasses = {
-  blue: "text-blue-500 dark:text-blue-400",
-  green: "text-green-500 dark:text-green-400",
-  amber: "text-amber-500 dark:text-amber-400",
+var calloutIcon = {
+  slate: "text-slate-500 dark:text-slate-400",
+  gray: "text-gray-500 dark:text-gray-400",
+  zinc: "text-zinc-500 dark:text-zinc-400",
+  neutral: "text-neutral-500 dark:text-neutral-400",
+  stone: "text-stone-500 dark:text-stone-400",
   red: "text-red-500 dark:text-red-400",
-  zinc: "text-zinc-500 dark:text-zinc-400"
+  orange: "text-orange-500 dark:text-orange-400",
+  amber: "text-amber-500 dark:text-amber-400",
+  yellow: "text-yellow-500 dark:text-yellow-400",
+  lime: "text-lime-500 dark:text-lime-400",
+  green: "text-green-500 dark:text-green-400",
+  emerald: "text-emerald-500 dark:text-emerald-400",
+  teal: "text-teal-500 dark:text-teal-400",
+  cyan: "text-cyan-500 dark:text-cyan-400",
+  sky: "text-sky-500 dark:text-sky-400",
+  blue: "text-blue-500 dark:text-blue-400",
+  indigo: "text-indigo-500 dark:text-indigo-400",
+  violet: "text-violet-500 dark:text-violet-400",
+  purple: "text-purple-500 dark:text-purple-400",
+  fuchsia: "text-fuchsia-500 dark:text-fuchsia-400",
+  pink: "text-pink-500 dark:text-pink-400",
+  rose: "text-rose-500 dark:text-rose-400"
 };
 var Callout = forwardRef(
   ({
@@ -6370,11 +6550,11 @@ var Callout = forwardRef(
         "data-react-fancy-callout": "",
         className: cn(
           "flex items-start gap-3 rounded-lg border-l-4 p-4",
-          colorClasses4[color],
+          calloutContainer[color],
           className
         ),
         children: [
-          icon && /* @__PURE__ */ jsx("span", { className: cn("mt-0.5 shrink-0", iconColorClasses[color]), children: icon }),
+          icon && /* @__PURE__ */ jsx("span", { className: cn("mt-0.5 shrink-0", calloutIcon[color]), children: icon }),
           /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children }),
           dismissible && /* @__PURE__ */ jsx(
             "button",
@@ -6486,14 +6666,14 @@ var FauxClient = forwardRef(
   }
 );
 FauxClient.displayName = "FauxClient";
-var colorClasses5 = {
+var colorClasses2 = {
   yellow: "bg-amber-100 text-amber-950 dark:bg-amber-200 dark:text-amber-950",
   blue: "bg-sky-100 text-sky-950 dark:bg-sky-200 dark:text-sky-950",
   green: "bg-emerald-100 text-emerald-950 dark:bg-emerald-200 dark:text-emerald-950",
   pink: "bg-pink-100 text-pink-950 dark:bg-pink-200 dark:text-pink-950",
   violet: "bg-violet-100 text-violet-950 dark:bg-violet-200 dark:text-violet-950"
 };
-var isPreset = (c) => c in colorClasses5;
+var isPreset = (c) => c in colorClasses2;
 var StickyNote = forwardRef(
   ({
     value,
@@ -6565,7 +6745,7 @@ var StickyNote = forwardRef(
         "data-react-fancy-sticky": "",
         className: cn(
           "rounded-sm p-3.5 text-sm leading-relaxed shadow-[0_2px_8px_rgba(0,0,0,0.12),0_1px_2px_rgba(0,0,0,0.08)]",
-          preset ? colorClasses5[color] : "text-zinc-900",
+          preset ? colorClasses2[color] : "text-zinc-900",
           selected && "ring-2 ring-blue-500 ring-offset-1",
           className
         ),
@@ -6591,7 +6771,12 @@ var TimelineContext = createContext({
 function useTimeline() {
   return useContext(TimelineContext);
 }
-var dotColorClasses2 = {
+var dotColorClasses = {
+  slate: "bg-slate-400 dark:bg-slate-600",
+  gray: "bg-gray-400 dark:bg-gray-600",
+  zinc: "bg-zinc-300 dark:bg-zinc-600",
+  neutral: "bg-neutral-400 dark:bg-neutral-600",
+  stone: "bg-stone-400 dark:bg-stone-600",
   red: "bg-red-500",
   orange: "bg-orange-500",
   amber: "bg-amber-500",
@@ -6608,10 +6793,14 @@ var dotColorClasses2 = {
   purple: "bg-purple-500",
   fuchsia: "bg-fuchsia-500",
   pink: "bg-pink-500",
-  rose: "bg-rose-500",
-  zinc: "bg-zinc-300 dark:bg-zinc-600"
+  rose: "bg-rose-500"
 };
 var ringColorClasses = {
+  slate: "ring-slate-400/30",
+  gray: "ring-gray-400/30",
+  zinc: "ring-zinc-400/30 dark:ring-zinc-500/30",
+  neutral: "ring-neutral-400/30",
+  stone: "ring-stone-400/30",
   red: "ring-red-500/30",
   orange: "ring-orange-500/30",
   amber: "ring-amber-500/30",
@@ -6628,8 +6817,7 @@ var ringColorClasses = {
   purple: "ring-purple-500/30",
   fuchsia: "ring-fuchsia-500/30",
   pink: "ring-pink-500/30",
-  rose: "ring-rose-500/30",
-  zinc: "ring-zinc-400/30 dark:ring-zinc-500/30"
+  rose: "ring-rose-500/30"
 };
 function Dot({ icon, emoji, color, active }) {
   const c = color ?? "zinc";
@@ -6642,7 +6830,7 @@ function Dot({ icon, emoji, color, active }) {
       {
         className: cn(
           "flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-white",
-          dotColorClasses2[c],
+          dotColorClasses[c],
           active && "ring-4",
           active && ringColorClasses[c]
         ),
@@ -6655,7 +6843,7 @@ function Dot({ icon, emoji, color, active }) {
     {
       className: cn(
         "h-3 w-3 shrink-0 rounded-full",
-        dotColorClasses2[c],
+        dotColorClasses[c],
         active && "ring-4",
         active && ringColorClasses[c]
       )