@particle-academy/react-fancy 2.1.0 → 2.2.0

package/dist/index.d.cts

@@ -10,8 +10,8 @@ type ActionColor = "blue" | "emerald" | "amber" | "red" | "violet" | "indigo" |
 type Placement = "top" | "bottom" | "left" | "right" | "top-start" | "top-end" | "bottom-start" | "bottom-end";
 
 interface ActionProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "color"> {
-    /** Shape variant */
-    variant?: "default" | "circle";
+    /** Shape/fill variant */
+    variant?: "default" | "circle" | "ghost";
     /** Standalone color (overrides state colors) */
     color?: ActionColor;
     size?: Size;

package/dist/index.d.ts

@@ -10,8 +10,8 @@ type ActionColor = "blue" | "emerald" | "amber" | "red" | "violet" | "indigo" |
 type Placement = "top" | "bottom" | "left" | "right" | "top-start" | "top-end" | "bottom-start" | "bottom-end";
 
 interface ActionProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "color"> {
-    /** Shape variant */
-    variant?: "default" | "circle";
+    /** Shape/fill variant */
+    variant?: "default" | "circle" | "ghost";
     /** Standalone color (overrides state colors) */
     color?: ActionColor;
     size?: Size;

package/dist/index.js

@@ -993,6 +993,22 @@ var defaultClasses = "bg-white text-zinc-700 border border-zinc-200 hover:bg-zin
 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";
+var ghostWarnClasses = "bg-transparent text-amber-700 hover:bg-amber-50 dark:text-amber-300 dark:hover:bg-amber-950/50";
 var horizontalSize = {
   xs: "px-2 py-1 text-xs",
   sm: "px-2 py-1 text-xs",
@@ -1031,19 +1047,32 @@ var badgeSize = {
 function isColored(color, active, checked) {
   return !!(color || active || checked);
 }
-function getColorClasses(color, active, checked, warn) {
+function getColorClasses(color, active, checked, warn, ghost) {
+  if (ghost) {
+    if (color) return ghostColorClasses[color];
+    if (checked) return ghostCheckedClasses;
+    if (active) return ghostActiveClasses;
+    if (warn) return ghostWarnClasses;
+    return ghostDefaultClasses;
+  }
   if (color) return colorClasses[color];
   if (checked) return checkedClasses;
   if (active) return activeClasses;
   if (warn) return warnClasses;
   return defaultClasses;
 }
-function getIconColorClasses(color, active, checked, warn) {
+function getIconColorClasses(color, active, checked, warn, ghost) {
+  if (ghost) {
+    return "text-current";
+  }
   if (color || active || checked) return "text-white";
   if (warn) return "text-amber-600 dark:text-amber-400";
   return "text-zinc-500 dark:text-zinc-400";
 }
-function getBadgeClasses(color, active, checked, warn) {
+function getBadgeClasses(color, active, checked, warn, ghost) {
+  if (ghost) {
+    return "bg-current/10 text-current";
+  }
   if (isColored(color, active, checked)) return "bg-white/20 text-white";
   if (warn) return "bg-amber-200 text-amber-800 dark:bg-amber-800 dark:text-amber-200";
   return "bg-zinc-200 text-zinc-700 dark:bg-zinc-600 dark:text-zinc-200";
@@ -1100,13 +1129,14 @@ var Action = forwardRef(
     ...props
   }, ref) => {
     const isCircle = variant === "circle";
+    const isGhost = variant === "ghost";
     const { primary, secondary } = parsePlacement(iconPlace);
     const isVertical = isVerticalPrimary(primary);
     const isCompound = !!secondary;
     const needsWrapper = isVertical || isCompound;
     const isReversed = iconPlace === "right";
     const sizeClass = isCircle ? circleSize[size] : horizontalSize[size];
-    const iconColorCls = getIconColorClasses(color, active, checked, warn);
+    const iconColorCls = getIconColorClasses(color, active, checked, warn, isGhost);
     const buildElement = (key, trailing) => {
       switch (key) {
         case "e": {
@@ -1163,7 +1193,7 @@ var Action = forwardRef(
               className: cn(
                 "inline-flex items-center justify-center font-medium rounded-full",
                 badgeSize[size],
-                getBadgeClasses(color, active, checked, warn)
+                getBadgeClasses(color, active, checked, warn, isGhost)
               ),
               "data-action-badge": true,
               children: badge
@@ -1212,7 +1242,7 @@ var Action = forwardRef(
       "disabled:opacity-50 disabled:cursor-not-allowed",
       isCircle ? "rounded-full" : "rounded-lg",
       sizeClass,
-      getColorClasses(color, active, checked, warn),
+      getColorClasses(color, active, checked, warn, isGhost),
       !isCircle && !needsWrapper && "gap-2",
       !isCircle && needsWrapper && "gap-2",
       isReversed && !needsWrapper && "flex-row-reverse",