motion-brew 0.0.0-stage → 0.1.0

package/dist/chunk-MUDKP3LK.js

@@ -0,0 +1,120 @@
+"use client";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/icons/folder-open.tsx
+import { motion, useAnimation, useReducedMotion } from "motion/react";
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+var VARIANTS = {
+  normal: { rotate: 0 },
+  animate: {
+    rotate: [0, -8, 6, -4, 0],
+    transition: {
+      ease: "easeInOut",
+      rotate: {
+        duration: 0.6
+      }
+    }
+  }
+};
+var FolderOpenIcon = forwardRef(
+  ({ onMouseEnter, onMouseLeave, className, size, active, style, strokeWidth, ...props }, ref) => {
+    const controls = useAnimation();
+    const isControlledRef = useRef(false);
+    useImperativeHandle(ref, () => {
+      isControlledRef.current = true;
+      return {
+        startAnimation: () => controls.start("animate"),
+        stopAnimation: () => controls.start("normal")
+      };
+    });
+    const handleMouseEnter = useCallback(
+      (e) => {
+        if (isControlledRef.current) {
+          onMouseEnter?.(e);
+        } else {
+          controls.start("animate");
+        }
+      },
+      [controls, onMouseEnter]
+    );
+    const handleMouseLeave = useCallback(
+      (e) => {
+        if (isControlledRef.current) {
+          onMouseLeave?.(e);
+        } else {
+          controls.start("normal");
+        }
+      },
+      [controls, onMouseLeave]
+    );
+    const wrap = useRef(null);
+    const reduced = useReducedMotion();
+    const [hosted, setHosted] = useState(false);
+    useEffect(() => {
+      const fake = {};
+      if (reduced) {
+        setHosted(true);
+        return;
+      }
+      if (active !== void 0) {
+        setHosted(true);
+        (active ? handleMouseEnter : handleMouseLeave)(fake);
+        return;
+      }
+      const host = wrap.current?.parentElement?.closest("button, a, [role=button], [role=menuitem], [role=tab], [role=switch], [role=radio], label");
+      setHosted(!!host);
+      if (!host) return;
+      const on = () => handleMouseEnter(fake);
+      const off = () => handleMouseLeave(fake);
+      host.addEventListener("pointerenter", on);
+      host.addEventListener("pointerleave", off);
+      return () => {
+        host.removeEventListener("pointerenter", on);
+        host.removeEventListener("pointerleave", off);
+      };
+    }, [active, reduced, handleMouseEnter, handleMouseLeave]);
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref: wrap,
+        className: cn("inline-grid size-6 shrink-0 place-items-center align-middle [&>svg]:size-full", className),
+        style: size ? { width: size, height: size, ...style } : style,
+        onMouseEnter: hosted ? void 0 : handleMouseEnter,
+        onMouseLeave: hosted ? void 0 : handleMouseLeave,
+        ...props,
+        children: /* @__PURE__ */ jsx(
+          motion.svg,
+          {
+            fill: "none",
+            height: size,
+            stroke: "currentColor",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: strokeWidth ?? 2,
+            viewBox: "0 0 24 24",
+            width: size,
+            xmlns: "http://www.w3.org/2000/svg",
+            children: /* @__PURE__ */ jsx(
+              motion.path,
+              {
+                animate: controls,
+                d: "m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2",
+                initial: "normal",
+                style: { transformOrigin: "12px 12px" },
+                variants: VARIANTS
+              }
+            )
+          }
+        )
+      }
+    );
+  }
+);
+FolderOpenIcon.displayName = "FolderOpenIcon";
+
+export {
+  FolderOpenIcon
+};

package/dist/chunk-N4ZNBWKO.js

@@ -0,0 +1,118 @@
+"use client";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/rolling-stepper/rolling-stepper.tsx
+import * as React from "react";
+import { motion, useAnimate, useReducedMotion } from "motion/react";
+import { Minus, Plus } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ROLL = { stiffness: 280, damping: 26, mass: 0.8 };
+var PRESS = { scale: 0.88 };
+var DIGITS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
+function Digit({ digit, spring }) {
+  return /* @__PURE__ */ jsx("span", { className: "relative inline-block h-[1em] w-[0.62em] overflow-hidden", children: /* @__PURE__ */ jsx(
+    motion.span,
+    {
+      className: "absolute inset-x-0 top-0 flex flex-col",
+      initial: false,
+      animate: { y: `${-digit * 10}%` },
+      transition: { type: "spring", ...spring },
+      children: DIGITS.map((d) => /* @__PURE__ */ jsx("span", { className: "flex h-[1em] items-center justify-center", children: d }, d))
+    }
+  ) });
+}
+function RollingStepper({
+  value: valueProp,
+  defaultValue = 0,
+  onValueChange,
+  min = 0,
+  max = 999,
+  step = 1,
+  spring = ROLL,
+  label = "Quantity",
+  className
+}) {
+  const [inner, setInner] = React.useState(defaultValue);
+  const value = valueProp ?? inner;
+  const [scope, animate] = useAnimate();
+  const reduceMotion = useReducedMotion() ?? false;
+  const change = (direction) => {
+    const next = value + direction * step;
+    if (next < min || next > max) {
+      if (!reduceMotion) animate(scope.current, { x: [0, -5, 5, -3, 3, 0] }, { duration: 0.32 });
+      return;
+    }
+    if (valueProp === void 0) setInner(next);
+    onValueChange?.(next);
+  };
+  const width = String(Math.max(Math.abs(min), Math.abs(max))).length;
+  const digits = String(Math.abs(value)).padStart(width, "0").split("").map(Number);
+  const firstSignificant = digits.findIndex((d) => d !== 0);
+  const lead = firstSignificant === -1 ? digits.length - 1 : firstSignificant;
+  const buttonClass = "grid size-9 cursor-pointer place-items-center rounded-full text-zinc-700 transition-colors hover:bg-zinc-900/5 disabled:opacity-35 dark:text-zinc-300 dark:hover:bg-white/10 outline-none focus-visible:ring-2 focus-visible:ring-zinc-400";
+  return /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      ref: scope,
+      className: cn(
+        "inline-flex items-center gap-1 rounded-full border border-zinc-200 bg-white p-1 shadow-sm dark:border-zinc-800 dark:bg-zinc-900",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          motion.button,
+          {
+            type: "button",
+            "aria-label": `Decrease ${label}`,
+            whileTap: PRESS,
+            onClick: () => change(-1),
+            disabled: value - step < min && reduceMotion,
+            className: buttonClass,
+            children: /* @__PURE__ */ jsx(Minus, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            role: "spinbutton",
+            tabIndex: 0,
+            "aria-label": label,
+            "aria-valuenow": value,
+            "aria-valuemin": min,
+            "aria-valuemax": max,
+            onKeyDown: (e) => {
+              if (e.key === "ArrowUp") e.preventDefault(), change(1);
+              if (e.key === "ArrowDown") e.preventDefault(), change(-1);
+            },
+            className: "flex min-w-14 justify-center rounded-lg px-2 text-2xl font-medium tabular-nums leading-none text-zinc-900 outline-none focus-visible:ring-2 focus-visible:ring-zinc-400 dark:text-zinc-100",
+            children: [
+              value < 0 && /* @__PURE__ */ jsx("span", { children: "-" }),
+              digits.slice(lead).map((d, i) => (
+                // Key from the right so a column keeps its identity as the number grows.
+                /* @__PURE__ */ jsx(Digit, { digit: d, spring }, digits.length - lead - i)
+              ))
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          motion.button,
+          {
+            type: "button",
+            "aria-label": `Increase ${label}`,
+            whileTap: PRESS,
+            onClick: () => change(1),
+            disabled: value + step > max && reduceMotion,
+            className: buttonClass,
+            children: /* @__PURE__ */ jsx(Plus, { className: "size-4" })
+          }
+        )
+      ]
+    }
+  );
+}
+
+export {
+  RollingStepper
+};

package/dist/chunk-NB5CB65C.js

@@ -0,0 +1,137 @@
+"use client";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/icons/users.tsx
+import { motion, useAnimation, useReducedMotion } from "motion/react";
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var PATH_VARIANTS = {
+  normal: {
+    translateX: 0,
+    transition: {
+      type: "spring",
+      stiffness: 200,
+      damping: 13
+    }
+  },
+  animate: {
+    translateX: [-6, 0],
+    transition: {
+      delay: 0.1,
+      type: "spring",
+      stiffness: 200,
+      damping: 13
+    }
+  }
+};
+var UsersIcon = forwardRef(
+  ({ onMouseEnter, onMouseLeave, className, size, active, style, strokeWidth, ...props }, ref) => {
+    const controls = useAnimation();
+    const isControlledRef = useRef(false);
+    useImperativeHandle(ref, () => {
+      isControlledRef.current = true;
+      return {
+        startAnimation: () => controls.start("animate"),
+        stopAnimation: () => controls.start("normal")
+      };
+    });
+    const handleMouseEnter = useCallback(
+      (e) => {
+        if (isControlledRef.current) {
+          onMouseEnter?.(e);
+        } else {
+          controls.start("animate");
+        }
+      },
+      [controls, onMouseEnter]
+    );
+    const handleMouseLeave = useCallback(
+      (e) => {
+        if (isControlledRef.current) {
+          onMouseLeave?.(e);
+        } else {
+          controls.start("normal");
+        }
+      },
+      [controls, onMouseLeave]
+    );
+    const wrap = useRef(null);
+    const reduced = useReducedMotion();
+    const [hosted, setHosted] = useState(false);
+    useEffect(() => {
+      const fake = {};
+      if (reduced) {
+        setHosted(true);
+        return;
+      }
+      if (active !== void 0) {
+        setHosted(true);
+        (active ? handleMouseEnter : handleMouseLeave)(fake);
+        return;
+      }
+      const host = wrap.current?.parentElement?.closest("button, a, [role=button], [role=menuitem], [role=tab], [role=switch], [role=radio], label");
+      setHosted(!!host);
+      if (!host) return;
+      const on = () => handleMouseEnter(fake);
+      const off = () => handleMouseLeave(fake);
+      host.addEventListener("pointerenter", on);
+      host.addEventListener("pointerleave", off);
+      return () => {
+        host.removeEventListener("pointerenter", on);
+        host.removeEventListener("pointerleave", off);
+      };
+    }, [active, reduced, handleMouseEnter, handleMouseLeave]);
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref: wrap,
+        className: cn("inline-grid size-6 shrink-0 place-items-center align-middle [&>svg]:size-full", className),
+        style: size ? { width: size, height: size, ...style } : style,
+        onMouseEnter: hosted ? void 0 : handleMouseEnter,
+        onMouseLeave: hosted ? void 0 : handleMouseLeave,
+        ...props,
+        children: /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            fill: "none",
+            height: size,
+            stroke: "currentColor",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: strokeWidth ?? 2,
+            viewBox: "0 0 24 24",
+            width: size,
+            xmlns: "http://www.w3.org/2000/svg",
+            children: [
+              /* @__PURE__ */ jsx("path", { d: "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" }),
+              /* @__PURE__ */ jsx("circle", { cx: "9", cy: "7", r: "4" }),
+              /* @__PURE__ */ jsx(
+                motion.path,
+                {
+                  animate: controls,
+                  d: "M22 21v-2a4 4 0 0 0-3-3.87",
+                  variants: PATH_VARIANTS
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                motion.path,
+                {
+                  animate: controls,
+                  d: "M16 3.13a4 4 0 0 1 0 7.75",
+                  variants: PATH_VARIANTS
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+UsersIcon.displayName = "UsersIcon";
+
+export {
+  UsersIcon
+};

package/dist/chunk-NCEAUODT.js

@@ -0,0 +1,172 @@
+"use client";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/icons/github.tsx
+import { motion, useAnimation, useReducedMotion } from "motion/react";
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var BODY_VARIANTS = {
+  normal: {
+    opacity: 1,
+    pathLength: 1,
+    scale: 1,
+    transition: {
+      duration: 0.3
+    }
+  },
+  animate: {
+    opacity: [0, 1],
+    pathLength: [0, 1],
+    scale: [0.9, 1],
+    transition: {
+      duration: 0.4
+    }
+  }
+};
+var TAIL_VARIANTS = {
+  normal: {
+    pathLength: 1,
+    rotate: 0,
+    transition: {
+      duration: 0.3
+    }
+  },
+  draw: {
+    pathLength: [0, 1],
+    rotate: 0,
+    transition: {
+      duration: 0.5
+    }
+  },
+  wag: {
+    pathLength: 1,
+    rotate: [0, -15, 15, -10, 10, -5, 5],
+    transition: {
+      duration: 2.5,
+      ease: "easeInOut",
+      repeat: Number.POSITIVE_INFINITY
+    }
+  }
+};
+var GithubIcon = forwardRef(
+  ({ onMouseEnter, onMouseLeave, className, size, active, style, strokeWidth, ...props }, ref) => {
+    const bodyControls = useAnimation();
+    const tailControls = useAnimation();
+    const isControlledRef = useRef(false);
+    useImperativeHandle(ref, () => {
+      isControlledRef.current = true;
+      return {
+        startAnimation: async () => {
+          bodyControls.start("animate");
+          await tailControls.start("draw");
+          tailControls.start("wag");
+        },
+        stopAnimation: () => {
+          bodyControls.start("normal");
+          tailControls.start("normal");
+        }
+      };
+    });
+    const handleMouseEnter = useCallback(
+      async (e) => {
+        if (isControlledRef.current) {
+          onMouseEnter?.(e);
+        } else {
+          bodyControls.start("animate");
+          await tailControls.start("draw");
+          tailControls.start("wag");
+        }
+      },
+      [bodyControls, onMouseEnter, tailControls]
+    );
+    const handleMouseLeave = useCallback(
+      (e) => {
+        if (isControlledRef.current) {
+          onMouseLeave?.(e);
+        } else {
+          bodyControls.start("normal");
+          tailControls.start("normal");
+        }
+      },
+      [bodyControls, tailControls, onMouseLeave]
+    );
+    const wrap = useRef(null);
+    const reduced = useReducedMotion();
+    const [hosted, setHosted] = useState(false);
+    useEffect(() => {
+      const fake = {};
+      if (reduced) {
+        setHosted(true);
+        return;
+      }
+      if (active !== void 0) {
+        setHosted(true);
+        (active ? handleMouseEnter : handleMouseLeave)(fake);
+        return;
+      }
+      const host = wrap.current?.parentElement?.closest("button, a, [role=button], [role=menuitem], [role=tab], [role=switch], [role=radio], label");
+      setHosted(!!host);
+      if (!host) return;
+      const on = () => handleMouseEnter(fake);
+      const off = () => handleMouseLeave(fake);
+      host.addEventListener("pointerenter", on);
+      host.addEventListener("pointerleave", off);
+      return () => {
+        host.removeEventListener("pointerenter", on);
+        host.removeEventListener("pointerleave", off);
+      };
+    }, [active, reduced, handleMouseEnter, handleMouseLeave]);
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref: wrap,
+        className: cn("inline-grid size-6 shrink-0 place-items-center align-middle [&>svg]:size-full", className),
+        style: size ? { width: size, height: size, ...style } : style,
+        onMouseEnter: hosted ? void 0 : handleMouseEnter,
+        onMouseLeave: hosted ? void 0 : handleMouseLeave,
+        ...props,
+        children: /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            fill: "none",
+            height: size,
+            stroke: "currentColor",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: strokeWidth ?? 2,
+            viewBox: "0 0 24 24",
+            width: size,
+            xmlns: "http://www.w3.org/2000/svg",
+            children: [
+              /* @__PURE__ */ jsx(
+                motion.path,
+                {
+                  animate: bodyControls,
+                  d: "M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4",
+                  initial: "normal",
+                  variants: BODY_VARIANTS
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                motion.path,
+                {
+                  animate: tailControls,
+                  d: "M9 18c-4.51 2-5-2-7-2",
+                  initial: "normal",
+                  variants: TAIL_VARIANTS
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+GithubIcon.displayName = "GithubIcon";
+
+export {
+  GithubIcon
+};