@deckdot/struq-icons 0.0.0-stage → 1.0.0

package/dist/draw/index.d.ts

@@ -0,0 +1,14 @@
+import { type ReactElement } from "react";
+import type { StruqIconComponent, StruqIconProps } from "../struq-icon.js";
+/**
+ * Any icon of the set, drawn in once on mount (icons/SPEC.md section 5), for
+ * empty states, onboarding and a hero. Each stroke draws along its length,
+ * one part after the other in DOM order. It never loops and has no hover
+ * motion. The markup is the finished icon, so the server render, no JS and
+ * reduced motion all show it at once. `delay` is in seconds and only the
+ * first value counts. Give it a new `key` to draw it again.
+ */
+export declare function StruqIconDraw({ icon: Icon, delay, ...props }: {
+    icon: StruqIconComponent;
+    delay?: number;
+} & StruqIconProps): ReactElement;

package/dist/draw/index.js

@@ -0,0 +1,49 @@
+"use client";
+
+// components/icons/struq-icon-draw.tsx
+import { useAnimate, useReducedMotion } from "motion/react";
+import { useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
+import { jsx } from "react/jsx-runtime";
+var EASE = [0.65, 0, 0.35, 1];
+var DURATION = 0.5;
+var STAGGER = 0.08;
+var CAP_FADE = 0.12;
+var SHAPES = "path, circle, rect, line, polyline, ellipse";
+var subscribe = () => () => {
+};
+function useSafeReducedMotion() {
+  const reduce = useReducedMotion();
+  const hydrated = useSyncExternalStore(subscribe, () => true, () => false);
+  return hydrated && reduce === true;
+}
+function StruqIconDraw({
+  icon: Icon,
+  delay = 0,
+  ...props
+}) {
+  const [scope, animate] = useAnimate();
+  const reduce = useSafeReducedMotion();
+  const [start] = useState(delay);
+  const settled = useRef(false);
+  useLayoutEffect(() => {
+    if (reduce) settled.current = true;
+    const svg = scope.current?.querySelector("svg");
+    if (settled.current || !svg) return;
+    const parts = Array.from(svg.querySelectorAll(":scope > g[data-part]"));
+    const controls = parts.flatMap((part, index) => {
+      const timing = { duration: DURATION, ease: EASE, delay: start + index * STAGGER };
+      return Array.from(part.querySelectorAll(SHAPES)).flatMap((shape) => {
+        shape.style.opacity = "0";
+        return [
+          animate(shape, { pathLength: [0, 1] }, timing),
+          animate(shape, { opacity: [0, 1] }, { ...timing, duration: CAP_FADE })
+        ];
+      });
+    });
+    return () => controls.forEach((control) => control.complete());
+  }, [reduce, scope, animate, start]);
+  return /* @__PURE__ */ jsx("span", { ref: scope, style: { display: "contents" }, children: /* @__PURE__ */ jsx(Icon, { ...props, animate: "draw" }) });
+}
+export {
+  StruqIconDraw
+};