@arcfusionz/arc-primitive-ui 0.3.12 → 0.3.13

package/dist/components/AILoader/AILoader.js

@@ -28,14 +28,16 @@ const textSizeClasses = {
 };
 const textClasses = "inline-block whitespace-nowrap font-sans leading-none text-muted-foreground";
 const textShimmerClasses = "bg-[linear-gradient(90deg,transparent_38%,var(--color-secondary)_50%,transparent_62%),linear-gradient(var(--color-muted-foreground),var(--color-muted-foreground))] bg-[length:250%_100%,100%_100%] bg-clip-text [background-repeat:no-repeat,no-repeat] motion-safe:animate-ai-loader-text-shimmer motion-safe:text-transparent motion-safe:[&_*]:!text-inherit motion-safe:will-change-[background-position]";
-const rotationMotionClasses = "motion-safe:animate-ai-loader-rotate motion-safe:will-change-transform";
+const processingRotationMotionClasses = "motion-safe:animate-ai-loader-processing-spin motion-safe:will-change-transform";
 const processingPulseMotionClasses = "motion-safe:animate-ai-loader-processing-pulse motion-safe:will-change-transform";
 const coreMotionClasses = "motion-safe:animate-ai-loader-core motion-safe:will-change-transform";
 const facetMotionClasses = "motion-safe:animate-ai-loader-facet motion-safe:will-change-transform";
 const firstSparkMotionClasses = "motion-safe:animate-ai-loader-spark motion-safe:will-change-transform";
-const quarterSparkMotionClasses = "motion-safe:animate-ai-loader-spark motion-safe:[animation-delay:0.6s] motion-safe:will-change-transform";
 const secondSparkMotionClasses = "motion-safe:animate-ai-loader-spark motion-safe:[animation-delay:1.2s] motion-safe:will-change-transform";
-const threeQuarterSparkMotionClasses = "motion-safe:animate-ai-loader-spark motion-safe:[animation-delay:1.8s] motion-safe:will-change-transform";
+const firstProcessingSparkMotionClasses = "motion-safe:animate-ai-loader-processing-spark motion-safe:will-change-transform";
+const quarterProcessingSparkMotionClasses = "motion-safe:animate-ai-loader-processing-spark motion-safe:[animation-delay:0.6s] motion-safe:will-change-transform";
+const secondProcessingSparkMotionClasses = "motion-safe:animate-ai-loader-processing-spark motion-safe:[animation-delay:1.2s] motion-safe:will-change-transform";
+const threeQuarterProcessingSparkMotionClasses = "motion-safe:animate-ai-loader-processing-spark motion-safe:[animation-delay:1.8s] motion-safe:will-change-transform";
 const processingSatelliteMotionClasses = "motion-safe:animate-ai-loader-processing-satellite motion-safe:will-change-opacity";
 const AILoader = forwardRef(({ state = "default", size = "md", tone = "brand", text, label, render, className, ...rest }, ref) => {
 	const gradientId = `ai-loader-${useId().replaceAll(":", "")}`;
@@ -85,59 +87,64 @@ const AILoader = forwardRef(({ state = "default", size = "md", tone = "brand", t
 								stopColor: endColor
 							})
 						]
-					}) }), /* @__PURE__ */ jsxs("g", {
-						className: cn("origin-center [transform-box:view-box]", processing && rotationMotionClasses),
-						children: [
-							!processing && /* @__PURE__ */ jsx("g", {
-								className: cn("origin-center rotate-45 scale-75 opacity-15 [transform-box:fill-box]", facetMotionClasses),
-								children: /* @__PURE__ */ jsx("path", {
-									fill: `url(#${gradientId})`,
-									d: SPARKLE_PATH
-								})
-							}),
-							/* @__PURE__ */ jsx("path", {
+					}) }), /* @__PURE__ */ jsxs("g", { children: [
+						!processing && /* @__PURE__ */ jsx("g", {
+							className: cn("origin-center rotate-45 scale-75 opacity-15 [transform-box:fill-box]", facetMotionClasses),
+							children: /* @__PURE__ */ jsx("path", {
+								fill: `url(#${gradientId})`,
+								d: SPARKLE_PATH
+							})
+						}),
+						/* @__PURE__ */ jsx("g", {
+							className: cn("origin-center [transform-box:view-box]", processing && processingRotationMotionClasses),
+							children: /* @__PURE__ */ jsx("path", {
 								fill: `url(#${gradientId})`,
 								d: SPARKLE_PATH,
 								className: cn("origin-center opacity-95 [transform-box:fill-box]", processing ? processingPulseMotionClasses : coreMotionClasses)
-							}),
-							/* @__PURE__ */ jsx("g", {
-								transform: "translate(19 4.75)",
-								className: processing ? processingSatelliteMotionClasses : void 0,
-								children: /* @__PURE__ */ jsx("path", {
-									fill: `url(#${gradientId})`,
-									className: cn("origin-center opacity-45 [transform-box:fill-box]", firstSparkMotionClasses),
-									d: LARGE_SATELLITE_PATH
-								})
-							}),
-							processing && /* @__PURE__ */ jsx("g", {
-								transform: "translate(19 19.25)",
-								className: processingSatelliteMotionClasses,
-								children: /* @__PURE__ */ jsx("path", {
-									fill: `url(#${gradientId})`,
-									className: cn("origin-center opacity-45 [transform-box:fill-box]", quarterSparkMotionClasses),
-									d: SMALL_SATELLITE_PATH
-								})
-							}),
-							/* @__PURE__ */ jsx("g", {
-								transform: processing ? "translate(5 19.25)" : "translate(5 18.25)",
-								className: processing ? processingSatelliteMotionClasses : void 0,
-								children: /* @__PURE__ */ jsx("path", {
-									fill: `url(#${gradientId})`,
-									className: cn("origin-center opacity-45 [transform-box:fill-box]", secondSparkMotionClasses),
-									d: processing ? LARGE_SATELLITE_PATH : SMALL_SATELLITE_PATH
-								})
-							}),
-							processing && /* @__PURE__ */ jsx("g", {
-								transform: "translate(5 4.75)",
-								className: processingSatelliteMotionClasses,
-								children: /* @__PURE__ */ jsx("path", {
-									fill: `url(#${gradientId})`,
-									className: cn("origin-center opacity-45 [transform-box:fill-box]", threeQuarterSparkMotionClasses),
-									d: SMALL_SATELLITE_PATH
-								})
 							})
-						]
-					})]
+						}),
+						/* @__PURE__ */ jsxs("g", {
+							className: cn("origin-center [transform-box:view-box]", processing && processingRotationMotionClasses),
+							children: [
+								/* @__PURE__ */ jsx("g", {
+									transform: "translate(19 4.75)",
+									className: processing ? processingSatelliteMotionClasses : void 0,
+									children: /* @__PURE__ */ jsx("path", {
+										fill: `url(#${gradientId})`,
+										className: cn("origin-center opacity-45 [transform-box:fill-box]", processing ? firstProcessingSparkMotionClasses : firstSparkMotionClasses),
+										d: LARGE_SATELLITE_PATH
+									})
+								}),
+								processing && /* @__PURE__ */ jsx("g", {
+									transform: "translate(19 19.25)",
+									className: processingSatelliteMotionClasses,
+									children: /* @__PURE__ */ jsx("path", {
+										fill: `url(#${gradientId})`,
+										className: cn("origin-center opacity-45 [transform-box:fill-box]", secondProcessingSparkMotionClasses),
+										d: SMALL_SATELLITE_PATH
+									})
+								}),
+								/* @__PURE__ */ jsx("g", {
+									transform: processing ? "translate(5 19.25)" : "translate(5 18.25)",
+									className: processing ? processingSatelliteMotionClasses : void 0,
+									children: /* @__PURE__ */ jsx("path", {
+										fill: `url(#${gradientId})`,
+										className: cn("origin-center opacity-45 [transform-box:fill-box]", processing ? quarterProcessingSparkMotionClasses : secondSparkMotionClasses),
+										d: processing ? LARGE_SATELLITE_PATH : SMALL_SATELLITE_PATH
+									})
+								}),
+								processing && /* @__PURE__ */ jsx("g", {
+									transform: "translate(5 4.75)",
+									className: processingSatelliteMotionClasses,
+									children: /* @__PURE__ */ jsx("path", {
+										fill: `url(#${gradientId})`,
+										className: cn("origin-center opacity-45 [transform-box:fill-box]", threeQuarterProcessingSparkMotionClasses),
+										d: SMALL_SATELLITE_PATH
+									})
+								})
+							]
+						})
+					] })]
 				}),
 				hasText && /* @__PURE__ */ jsx("span", {
 					className: cn(textClasses, textSizeClasses[size], processing && textShimmerClasses),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcfusionz/arc-primitive-ui",
-  "version": "0.3.12",
+  "version": "0.3.13",
   "description": "ArcFusion primitive UI components",
   "license": "MIT",
   "type": "module",

package/src/styles/theme.css

@@ -50,18 +50,22 @@
   /* ---------------------------------------------------------------------
    * Motion
    * AI Loader uses an asymmetric 2.4s ambient rhythm. Processing combines a
-   * variable-speed 3.6s rotation, a strong whole-mark pulse, and a monochrome
-   * currentColor fill. Its satellites fade at peak speed and return as the
-   * rotation eases. The four-point path itself never morphs. Skeleton's wave
+   * four eased quarter-turn beats shared by the core and satellites across a
+   * 4.8s revolution, a strong core pulse, and a monochrome currentColor fill.
+   * The satellites soften at each beat's midpoint and return as the shared
+   * rotation eases; their staggered scale cycles peak at 140% and collapse to
+   * zero. The
+   * four-point path itself never morphs. Skeleton's wave
    * crosses a placeholder in 1.6s and rests off-canvas when motion is reduced.
    * Progress sweeps its indeterminate segment across the track in 1.8s;
    * reduced motion swaps the sweep for Tailwind's opacity pulse so activity
    * still reads without positional movement.
    * `motion-safe` leaves a still frame for reduced-motion users.
    * ------------------------------------------------------------------- */
-  --animate-ai-loader-rotate: ai-loader-rotate 3.6s infinite;
+  --animate-ai-loader-processing-spin: ai-loader-processing-spin 4.8s infinite;
   --animate-ai-loader-processing-pulse: ai-loader-processing-pulse 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
-  --animate-ai-loader-processing-satellite: ai-loader-processing-satellite 3.6s linear infinite;
+  --animate-ai-loader-processing-satellite: ai-loader-processing-satellite 4.8s linear infinite;
+  --animate-ai-loader-processing-spark: ai-loader-processing-spark 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
   --animate-ai-loader-core: ai-loader-core 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
   --animate-ai-loader-facet: ai-loader-facet 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
   --animate-ai-loader-spark: ai-loader-spark 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
@@ -178,28 +182,6 @@
   }
 }
 
-@keyframes ai-loader-rotate {
-  0% {
-    transform: rotate(0deg);
-    animation-timing-function: cubic-bezier(0.45, 0, 0.75, 0.35);
-  }
-  28% {
-    transform: rotate(60deg);
-    animation-timing-function: cubic-bezier(0.15, 0.75, 0.25, 1);
-  }
-  58% {
-    transform: rotate(220deg);
-    animation-timing-function: cubic-bezier(0.55, 0, 0.8, 0.45);
-  }
-  76% {
-    transform: rotate(276deg);
-    animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
 @keyframes ai-loader-processing-pulse {
   0%,
   100% {
@@ -220,18 +202,43 @@
   }
 }
 
+/* Four eased quarter turns create a repeatable visual beat. The fourfold core
+   reaches the same upright brand-mark orientation at every 1.2s boundary. */
+@keyframes ai-loader-processing-spin {
+  0% {
+    transform: rotate(0deg);
+    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  }
+  25% {
+    transform: rotate(90deg);
+    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  }
+  50% {
+    transform: rotate(180deg);
+    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  }
+  75% {
+    transform: rotate(270deg);
+    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
 @keyframes ai-loader-processing-satellite {
   0%,
-  18%,
+  25%,
+  50%,
+  75%,
   100% {
     opacity: 1;
   }
-  28%,
-  38% {
-    opacity: 0;
-  }
-  58% {
-    opacity: 1;
+  12.5%,
+  37.5%,
+  62.5%,
+  87.5% {
+    opacity: 0.35;
   }
 }
 
@@ -284,6 +291,30 @@
   }
 }
 
+@keyframes ai-loader-processing-spark {
+  0%,
+  100% {
+    opacity: 0;
+    transform: scale(0);
+  }
+  18% {
+    opacity: 0.35;
+    transform: scale(0.5);
+  }
+  42% {
+    opacity: 1;
+    transform: scale(1.4);
+  }
+  62% {
+    opacity: 0.75;
+    transform: scale(1.05);
+  }
+  82% {
+    opacity: 0;
+    transform: scale(0);
+  }
+}
+
 @keyframes ai-loader-spark {
   0%,
   100% {