@particle-academy/react-fancy 4.0.1 → 4.1.0

package/dist/index.cjs

@@ -5775,52 +5775,114 @@ var Separator = react.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 = react.forwardRef(
   ({
     color = "zinc",
@@ -5849,7 +5911,7 @@ var Badge = react.forwardRef(
             {
               className: cn(
                 "inline-block h-1.5 w-1.5 rounded-full",
-                dotColorClasses[color]
+                badgeDot[color]
               )
             }
           ),
@@ -6612,7 +6674,12 @@ var TimelineContext = react.createContext({
 function useTimeline() {
   return react.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",
@@ -6629,10 +6696,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",
@@ -6649,8 +6720,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";
@@ -6663,7 +6733,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]
         ),
@@ -6676,7 +6746,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]
       )