@particle-academy/react-fancy 4.0.1 → 4.1.0

package/dist/index.d.cts

@@ -3,7 +3,12 @@ import { ButtonHTMLAttributes, ReactNode, InputHTMLAttributes, TextareaHTMLAttri
 import { ClassValue } from 'clsx';
 
 type Size = "xs" | "sm" | "md" | "lg" | "xl";
-type Color = "zinc" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
+/**
+ * The full Tailwind v4 named color palette — every default hue, including all
+ * five gray families. Components that accept a `color` should type it as this
+ * so the whole palette is available.
+ */
+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";
 /**
@@ -707,8 +712,8 @@ interface SeparatorProps {
 declare const Separator: react.ForwardRefExoticComponent<SeparatorProps & react.RefAttributes<HTMLDivElement>>;
 
 interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
-    /** Badge color */
-    color?: "zinc" | "red" | "blue" | "green" | "amber" | "violet" | "rose";
+    /** Badge color — any color in the Tailwind v4 palette. */
+    color?: Color;
     /** Visual variant */
     variant?: "solid" | "outline" | "soft";
     /** Badge size */

package/dist/index.d.ts

@@ -3,7 +3,12 @@ import { ButtonHTMLAttributes, ReactNode, InputHTMLAttributes, TextareaHTMLAttri
 import { ClassValue } from 'clsx';
 
 type Size = "xs" | "sm" | "md" | "lg" | "xl";
-type Color = "zinc" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
+/**
+ * The full Tailwind v4 named color palette — every default hue, including all
+ * five gray families. Components that accept a `color` should type it as this
+ * so the whole palette is available.
+ */
+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";
 /**
@@ -707,8 +712,8 @@ interface SeparatorProps {
 declare const Separator: react.ForwardRefExoticComponent<SeparatorProps & react.RefAttributes<HTMLDivElement>>;
 
 interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
-    /** Badge color */
-    color?: "zinc" | "red" | "blue" | "green" | "amber" | "violet" | "rose";
+    /** Badge color — any color in the Tailwind v4 palette. */
+    color?: Color;
     /** Visual variant */
     variant?: "solid" | "outline" | "soft";
     /** Badge size */

package/dist/index.js

@@ -5754,52 +5754,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 +5890,7 @@ var Badge = forwardRef(
             {
               className: cn(
                 "inline-block h-1.5 w-1.5 rounded-full",
-                dotColorClasses[color]
+                badgeDot[color]
               )
             }
           ),
@@ -6591,7 +6653,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 +6675,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 +6699,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 +6712,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 +6725,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]
       )