@particle-academy/react-fancy 5.10.0 → 5.12.0

package/dist/index.cjs

@@ -6739,6 +6739,7 @@ var circularSizeMap = {
   md: 48,
   lg: 64
 };
+var namedStrokeWidth = { sm: 3, md: 4, lg: 5 };
 var textSizeClasses = {
   sm: "text-[8px]",
   md: "text-[10px]",
@@ -6750,15 +6751,18 @@ var Progress = react.forwardRef(
     max = 100,
     variant = "bar",
     size = "md",
+    strokeWidth: strokeWidthProp,
     color = "blue",
     indeterminate = false,
     showValue = false,
     className
   }, ref) => {
+    const named = typeof size === "number" ? "md" : size;
     const percentage = Math.min(100, Math.max(0, value / max * 100));
     if (variant === "circular") {
-      const diameter = circularSizeMap[size];
-      const strokeWidth = size === "sm" ? 3 : size === "md" ? 4 : 5;
+      const pixelSize = typeof size === "number" ? size : null;
+      const diameter = pixelSize ?? circularSizeMap[named];
+      const strokeWidth = strokeWidthProp ?? (pixelSize === null ? namedStrokeWidth[named] : Math.max(3, Math.round(diameter * 0.075)));
       const radius = (diameter - strokeWidth) / 2;
       const circumference = 2 * Math.PI * radius;
       const offset = indeterminate ? circumference * 0.75 : circumference - percentage / 100 * circumference;
@@ -6771,14 +6775,19 @@ var Progress = react.forwardRef(
           "aria-valuemin": 0,
           "aria-valuemax": max,
           "data-react-fancy-progress": "",
-          className: cn("relative inline-flex items-center justify-center", className),
-          style: { width: diameter, height: diameter },
+          "data-size": pixelSize === null ? named : void 0,
+          className: cn(
+            "relative inline-flex items-center justify-center",
+            className
+          ),
+          style: pixelSize === null ? void 0 : { width: pixelSize, height: pixelSize },
           children: [
             /* @__PURE__ */ jsxRuntime.jsxs(
               "svg",
               {
-                width: diameter,
-                height: diameter,
+                viewBox: `0 0 ${diameter} ${diameter}`,
+                width: "100%",
+                height: "100%",
                 className: cn(indeterminate && "animate-spin"),
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsx(
@@ -6816,7 +6825,7 @@ var Progress = react.forwardRef(
                 className: cn(
                   "absolute font-medium",
                   progressText[color],
-                  textSizeClasses[size]
+                  textSizeClasses[named]
                 ),
                 children: [
                   Math.round(percentage),
@@ -6844,7 +6853,7 @@ var Progress = react.forwardRef(
             {
               className: cn(
                 "w-full overflow-hidden rounded-full bg-zinc-200 dark:bg-zinc-700",
-                barHeightClasses[size]
+                barHeightClasses[named]
               ),
               children: /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
@@ -9171,7 +9180,8 @@ var VARIANT_ICON_COLORS = {
   info: "text-blue-500"
 };
 function ToastItem({ data, onDismiss }) {
-  const { id, title, description, variant = "default", duration = 5e3 } = data;
+  const { id, title, description, variant = "default", action } = data;
+  const duration = data.duration ?? (action ? 0 : 5e3);
   react.useEffect(() => {
     if (duration <= 0) return;
     const timer = setTimeout(() => onDismiss(id), duration);
@@ -9182,6 +9192,9 @@ function ToastItem({ data, onDismiss }) {
     {
       "data-react-fancy-toast-item": "",
       role: "alert",
+      onKeyDown: (e) => {
+        if (e.key === "Escape") onDismiss(id);
+      },
       className: cn(
         "fancy-toast-in pointer-events-auto w-80 rounded-xl border p-4 shadow-lg",
         VARIANT_STYLES[variant]
@@ -9197,6 +9210,18 @@ function ToastItem({ data, onDismiss }) {
           /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-zinc-900 dark:text-zinc-100", children: title }),
           description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-xs text-zinc-500 dark:text-zinc-400", children: description })
         ] }),
+        action && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              action.onClick();
+              onDismiss(id);
+            },
+            className: "shrink-0 self-center rounded-md px-2 py-1 text-xs font-medium text-zinc-700 underline-offset-2 transition-colors hover:bg-zinc-100 hover:underline dark:text-zinc-200 dark:hover:bg-zinc-800",
+            children: action.label
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {