motion-brew 0.0.0-stage → 0.1.0

package/dist/chunk-I45D4XV4.js

@@ -0,0 +1,124 @@
+"use client";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/icons/home.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 DEFAULT_TRANSITION = {
+  duration: 0.6,
+  opacity: { duration: 0.2 }
+};
+var PATH_VARIANTS = {
+  normal: {
+    pathLength: 1,
+    opacity: 1
+  },
+  animate: {
+    opacity: [0, 1],
+    pathLength: [0, 1]
+  }
+};
+var HomeIcon = 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: "M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" }),
+              /* @__PURE__ */ jsx(
+                motion.path,
+                {
+                  animate: controls,
+                  d: "M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8",
+                  transition: DEFAULT_TRANSITION,
+                  variants: PATH_VARIANTS
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+HomeIcon.displayName = "HomeIcon";
+
+export {
+  HomeIcon
+};

package/dist/chunk-I7KTTOOJ.js

@@ -0,0 +1,113 @@
+"use client";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/icons/arrow-up-right.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 ARROW_VARIANTS = {
+  normal: {
+    scale: 1,
+    translateX: 0,
+    translateY: 0
+  },
+  animate: {
+    scale: [1, 0.85, 1],
+    translateX: [0, -4, 0],
+    translateY: [0, 4, 0],
+    originX: 1,
+    originY: 0,
+    transition: {
+      duration: 0.5,
+      ease: "easeInOut"
+    }
+  }
+};
+var ArrowUpRightIcon = 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) controls.start("animate");
+      onMouseEnter?.(e);
+    },
+    [controls, onMouseEnter]
+  );
+  const handleMouseLeave = useCallback(
+    (e) => {
+      if (!isControlledRef.current) controls.start("normal");
+      onMouseLeave?.(e);
+    },
+    [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(
+        "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__ */ jsxs(motion.g, { animate: controls, variants: ARROW_VARIANTS, children: [
+            /* @__PURE__ */ jsx("path", { d: "M7 7H17" }),
+            /* @__PURE__ */ jsx("path", { d: "M17 7V17" }),
+            /* @__PURE__ */ jsx("path", { d: "M7 17L17 7" })
+          ] })
+        }
+      )
+    }
+  );
+});
+ArrowUpRightIcon.displayName = "ArrowUpRightIcon";
+
+export {
+  ArrowUpRightIcon
+};

package/dist/chunk-IDJOKV6S.js

@@ -0,0 +1,67 @@
+"use client";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/flip-words/flip-words.tsx
+import * as React from "react";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var EASE = [0.22, 1, 0.36, 1];
+var FlipWords = React.forwardRef(function FlipWords2({
+  before = "Build",
+  words = ["playful", "precise", "fearless"],
+  after = "interfaces",
+  interval = 2400,
+  wordClassName = "text-violet-600 dark:text-violet-400",
+  className
+}, ref) {
+  const still = useReducedMotion();
+  const [index, setIndex] = React.useState(0);
+  React.useEffect(() => {
+    if (words.length < 2) return;
+    const id = window.setInterval(() => setIndex((i) => (i + 1) % words.length), interval);
+    return () => window.clearInterval(id);
+  }, [words.length, interval]);
+  const word = words[index] ?? "";
+  return /* @__PURE__ */ jsxs("p", { ref, className: cn("text-balance", className), children: [
+    /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+      before,
+      " ",
+      words.join(", "),
+      " ",
+      after
+    ] }),
+    /* @__PURE__ */ jsxs("span", { "aria-hidden": true, children: [
+      before,
+      " ",
+      /* @__PURE__ */ jsx(motion.span, { layout: !still, transition: { duration: 0.4, ease: EASE }, className: "relative inline-flex", style: { perspective: 600 }, children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", initial: false, children: /* @__PURE__ */ jsx(
+        motion.span,
+        {
+          className: cn("inline-flex whitespace-pre", wordClassName),
+          exit: still ? { opacity: 0 } : { opacity: 0, y: "-0.4em", rotateX: 70, filter: "blur(6px)" },
+          transition: { duration: 0.3, ease: EASE },
+          children: Array.from(word).map((ch, i) => /* @__PURE__ */ jsx(
+            motion.span,
+            {
+              className: "inline-block",
+              style: { transformOrigin: "50% 100%" },
+              initial: still ? false : { opacity: 0, y: "0.4em", rotateX: -80, filter: "blur(6px)" },
+              animate: { opacity: 1, y: 0, rotateX: 0, filter: "blur(0px)" },
+              transition: { duration: 0.45, ease: EASE, delay: i * 0.03 },
+              children: ch
+            },
+            i
+          ))
+        },
+        word
+      ) }) }),
+      " ",
+      after
+    ] })
+  ] });
+});
+
+export {
+  FlipWords
+};

package/dist/chunk-IGI6OLRX.js

@@ -0,0 +1,138 @@
+"use client";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/icons/lock-keyhole.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 LockKeyholeIcon = 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(
+          motion.svg,
+          {
+            animate: controls,
+            fill: "none",
+            height: size,
+            initial: "normal",
+            stroke: "currentColor",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: strokeWidth ?? 2,
+            transition: {
+              duration: 1,
+              ease: [0.4, 0, 0.2, 1]
+            },
+            variants: {
+              normal: {
+                rotate: 0,
+                scale: 1
+              },
+              animate: {
+                rotate: [-3, 1, -2, 0],
+                scale: [0.95, 1.05, 0.98, 1]
+              }
+            },
+            viewBox: "0 0 24 24",
+            width: size,
+            xmlns: "http://www.w3.org/2000/svg",
+            children: [
+              /* @__PURE__ */ jsx("circle", { cx: "12", cy: "16", r: "1" }),
+              /* @__PURE__ */ jsx("rect", { height: "12", rx: "2", width: "18", x: "3", y: "10" }),
+              /* @__PURE__ */ jsx(
+                motion.path,
+                {
+                  animate: controls,
+                  d: "M7 10V7a5 5 0 0 1 10 0v3",
+                  initial: "normal",
+                  transition: {
+                    duration: 0.3,
+                    ease: [0.4, 0, 0.2, 1]
+                  },
+                  variants: {
+                    normal: {
+                      pathLength: 1
+                    },
+                    animate: {
+                      pathLength: 0.7
+                    }
+                  }
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+LockKeyholeIcon.displayName = "LockKeyholeIcon";
+
+export {
+  LockKeyholeIcon
+};

package/dist/chunk-IKM7EEYN.js

@@ -0,0 +1,117 @@
+"use client";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/icons/download.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 ARROW_VARIANTS = {
+  normal: { y: 0 },
+  animate: {
+    y: 2,
+    transition: {
+      type: "spring",
+      stiffness: 200,
+      damping: 10,
+      mass: 1
+    }
+  }
+};
+var DownloadIcon = 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: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+              /* @__PURE__ */ jsxs(motion.g, { animate: controls, variants: ARROW_VARIANTS, children: [
+                /* @__PURE__ */ jsx("polyline", { points: "7 10 12 15 17 10" }),
+                /* @__PURE__ */ jsx("line", { x1: "12", x2: "12", y1: "15", y2: "3" })
+              ] })
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+DownloadIcon.displayName = "DownloadIcon";
+
+export {
+  DownloadIcon
+};