@particle-academy/react-fancy 4.1.0 → 4.2.0

package/dist/index.d.cts

@@ -10,7 +10,8 @@ type Size = "xs" | "sm" | "md" | "lg" | "xl";
  */
 type Color = "slate" | "gray" | "zinc" | "neutral" | "stone" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
 type Variant = "solid" | "outline" | "ghost" | "soft";
-type ButtonColor = "blue" | "emerald" | "amber" | "red" | "violet" | "indigo" | "sky" | "rose" | "orange" | "zinc";
+/** Button accepts the full Tailwind v4 palette (alias of {@link Color}). */
+type ButtonColor = Color;
 /**
  * @deprecated Renamed to {@link ButtonColor}. `ActionColor` remains as an alias
  * for backward compatibility and will be removed in a future major version.
@@ -799,7 +800,7 @@ interface ProgressProps {
     max?: number;
     variant?: "bar" | "circular";
     size?: "sm" | "md" | "lg";
-    color?: "blue" | "green" | "amber" | "red" | "violet" | "zinc";
+    color?: Color;
     indeterminate?: boolean;
     showValue?: boolean;
     className?: string;
@@ -849,7 +850,7 @@ declare const Card: react.ForwardRefExoticComponent<CardProps & react.RefAttribu
 
 interface CalloutProps {
     children: ReactNode;
-    color?: "blue" | "green" | "amber" | "red" | "zinc";
+    color?: Color;
     icon?: ReactNode;
     dismissible?: boolean;
     onDismiss?: () => void;

package/dist/index.d.ts

@@ -10,7 +10,8 @@ type Size = "xs" | "sm" | "md" | "lg" | "xl";
  */
 type Color = "slate" | "gray" | "zinc" | "neutral" | "stone" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
 type Variant = "solid" | "outline" | "ghost" | "soft";
-type ButtonColor = "blue" | "emerald" | "amber" | "red" | "violet" | "indigo" | "sky" | "rose" | "orange" | "zinc";
+/** Button accepts the full Tailwind v4 palette (alias of {@link Color}). */
+type ButtonColor = Color;
 /**
  * @deprecated Renamed to {@link ButtonColor}. `ActionColor` remains as an alias
  * for backward compatibility and will be removed in a future major version.
@@ -799,7 +800,7 @@ interface ProgressProps {
     max?: number;
     variant?: "bar" | "circular";
     size?: "sm" | "md" | "lg";
-    color?: "blue" | "green" | "amber" | "red" | "violet" | "zinc";
+    color?: Color;
     indeterminate?: boolean;
     showValue?: boolean;
     className?: string;
@@ -849,7 +850,7 @@ declare const Card: react.ForwardRefExoticComponent<CardProps & react.RefAttribu
 
 interface CalloutProps {
     children: ReactNode;
-    color?: "blue" | "green" | "amber" | "red" | "zinc";
+    color?: Color;
     icon?: ReactNode;
     dismissible?: boolean;
     onDismiss?: () => void;

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,
@@ -6011,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",
@@ -6021,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]",
@@ -6109,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" }
                     }
                   )
@@ -6121,7 +6203,7 @@ var Progress = forwardRef(
               {
                 className: cn(
                   "absolute font-medium",
-                  textColorClasses[color],
+                  progressText[color],
                   textSizeClasses[size]
                 ),
                 children: [
@@ -6157,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}%` }
@@ -6170,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),
@@ -6401,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(
   ({
@@ -6432,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",
@@ -6548,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,
@@ -6627,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
         ),