motion-brew 0.0.0-stage → 0.1.0

package/dist/chunk-WGIT4MMH.js

@@ -0,0 +1,350 @@
+"use client";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/avatar-testimonial/avatar-testimonial.tsx
+import * as React from "react";
+import {
+  animate,
+  AnimatePresence,
+  motion,
+  useMotionValue,
+  useReducedMotion
+} from "motion/react";
+import { Quote, Star } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var GLIDE = [0.22, 1, 0.36, 1];
+var PALETTE = [
+  "#3d66d6",
+  "#d6498f",
+  "#269a5a",
+  "#9150e0",
+  "#cf7a1c",
+  "#2a9fbf"
+];
+var headshot = (id) => `https://images.unsplash.com/${id}?w=96&h=96&fit=crop&crop=faces`;
+var DEFAULT_ITEMS = [
+  {
+    quote: "The motion feels considered, not decorative. Our onboarding finally feels as fast as it actually is.",
+    name: "Maya Lindqvist",
+    role: "Design lead, Halcyon",
+    avatar: headshot("photo-1438761681033-6461ffad8d80")
+  },
+  {
+    quote: "We dropped three components in on a Friday and shipped them Monday. Nobody believed it was that easy.",
+    name: "Daniel Okafor",
+    role: "Founder, Fieldwork",
+    avatar: headshot("photo-1507003211169-0a1dd7228f2d")
+  },
+  {
+    quote: "Every interaction respects reduced motion out of the box. That alone saved us a week of audit work.",
+    name: "Priya Raman",
+    role: "Product engineer, Lumen",
+    avatar: headshot("photo-1534528741775-53994a69daeb")
+  }
+];
+var initials = (name) => name.split(/\s+/).map((p) => p[0]).slice(0, 2).join("").toUpperCase();
+function AutoHeight({
+  children,
+  still
+}) {
+  const inner = React.useRef(null);
+  const [h, setH] = React.useState("auto");
+  React.useLayoutEffect(() => {
+    const el = inner.current;
+    if (!el) return;
+    const ro = new ResizeObserver(() => setH(el.offsetHeight));
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+  return /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      animate: { height: h },
+      initial: false,
+      transition: { duration: still ? 0 : 0.5, ease: GLIDE },
+      className: "overflow-hidden",
+      children: /* @__PURE__ */ jsx("div", { ref: inner, children })
+    }
+  );
+}
+function Roll({
+  children,
+  still,
+  className,
+  delay = 0
+}) {
+  return /* @__PURE__ */ jsx("span", { className: cn("relative grid overflow-hidden", className), children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", initial: false, children: /* @__PURE__ */ jsx(
+    motion.span,
+    {
+      initial: still ? { opacity: 0 } : { y: "100%", opacity: 0, filter: "blur(4px)" },
+      animate: { y: 0, opacity: 1, filter: "blur(0px)" },
+      exit: still ? { opacity: 0 } : { y: "-100%", opacity: 0, filter: "blur(4px)" },
+      transition: {
+        duration: still ? 0 : 0.45,
+        ease: GLIDE,
+        delay: still ? 0 : delay
+      },
+      className: "col-start-1 row-start-1 truncate",
+      children
+    },
+    children
+  ) }) });
+}
+var AvatarTestimonial = React.forwardRef(function AvatarTestimonial2({ items = DEFAULT_ITEMS, interval = 6500, stars = true, onChange, className }, ref) {
+  const still = !!useReducedMotion();
+  const uid = React.useId().replace(/[^a-zA-Z0-9]/g, "");
+  const people = items.map((t, i) => ({
+    ...t,
+    color: t.color ?? PALETTE[i % PALETTE.length],
+    rating: t.rating ?? 5
+  }));
+  const [active, setActive] = React.useState(0);
+  const [paused, setPaused] = React.useState(false);
+  const pausedRef = React.useRef(false);
+  pausedRef.current = paused;
+  const progress = useMotionValue(0);
+  const run = React.useRef(null);
+  const tabs = React.useRef([]);
+  const current = people[active] ?? people[0];
+  const select = React.useCallback(
+    (i) => {
+      const next = (i + people.length) % people.length;
+      setActive(next);
+      onChange?.(next);
+    },
+    [people.length, onChange]
+  );
+  React.useEffect(() => {
+    run.current?.stop();
+    progress.set(0);
+    if (!interval || people.length < 2) return;
+    run.current = animate(progress, 1, {
+      duration: interval / 1e3,
+      ease: "linear",
+      onComplete: () => select(active + 1)
+    });
+    if (pausedRef.current) run.current.pause();
+    return () => run.current?.stop();
+  }, [active, interval, people.length, progress, select]);
+  React.useEffect(() => {
+    if (!run.current) return;
+    if (paused) run.current.pause();
+    else run.current.play();
+  }, [paused]);
+  const words = current.quote.split(" ");
+  return /* @__PURE__ */ jsxs(
+    "figure",
+    {
+      ref,
+      onPointerEnter: () => setPaused(true),
+      onPointerLeave: () => setPaused(false),
+      onFocus: () => setPaused(true),
+      onBlur: () => setPaused(false),
+      className: cn(
+        "w-[440px] max-w-full rounded-3xl bg-white px-6 pb-6 pt-6 text-zinc-900 shadow-[0_1px_2px_rgba(0,0,0,0.04),0_12px_32px_-16px_rgba(0,0,0,0.18)] dark:bg-zinc-900 dark:text-zinc-100",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          stars ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "flex gap-0.5",
+              role: "img",
+              "aria-label": `${current.rating} out of 5 stars`,
+              children: Array.from({ length: 5 }, (_, i) => /* @__PURE__ */ jsx(
+                motion.span,
+                {
+                  initial: still ? false : { scale: 0.3, opacity: 0, rotate: -40 },
+                  animate: { scale: 1, opacity: 1, rotate: 0 },
+                  transition: {
+                    type: "spring",
+                    stiffness: 520,
+                    damping: 18,
+                    delay: still ? 0 : 0.1 + i * 0.05
+                  },
+                  className: "flex",
+                  children: /* @__PURE__ */ jsx(
+                    Star,
+                    {
+                      className: cn(
+                        "size-4",
+                        i < current.rating ? "fill-[#242423] text-[#242423] dark:fill-zinc-100 dark:text-zinc-100" : "fill-zinc-200 text-zinc-200 dark:fill-zinc-700 dark:text-zinc-700"
+                      ),
+                      strokeWidth: 1.5
+                    }
+                  )
+                },
+                `${active}-${i}`
+              ))
+            }
+          ) : /* @__PURE__ */ jsx("span", {}),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "grid size-9 place-items-center rounded-full bg-[#242423]/6 text-[#242423] dark:bg-white/8 dark:text-zinc-100",
+              "aria-hidden": true,
+              children: /* @__PURE__ */ jsx(Quote, { className: "size-4 fill-current", strokeWidth: 0 })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(AutoHeight, { still, children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", initial: false, children: /* @__PURE__ */ jsxs(
+          motion.blockquote,
+          {
+            id: `${uid}-quote`,
+            role: "tabpanel",
+            "aria-labelledby": `${uid}-tab-${active}`,
+            exit: still ? { opacity: 0 } : { opacity: 0, filter: "blur(6px)", y: -4 },
+            transition: { duration: still ? 0.15 : 0.22, ease: "easeIn" },
+            className: "pt-6 text-[24px] font-medium leading-[1.35] tracking-tight",
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "sr-only", children: current.quote }),
+              /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: words.map((w, i) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+                /* @__PURE__ */ jsx(
+                  motion.span,
+                  {
+                    className: "inline-block",
+                    initial: still ? { opacity: 0 } : { opacity: 0, y: "0.35em", filter: "blur(8px)" },
+                    animate: { opacity: 1, y: 0, filter: "blur(0px)" },
+                    transition: {
+                      duration: still ? 0.2 : 0.55,
+                      ease: GLIDE,
+                      delay: still ? 0 : 0.05 + i * 0.035
+                    },
+                    children: w
+                  }
+                ),
+                " "
+              ] }, i)) })
+            ]
+          },
+          active
+        ) }) }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-10 flex items-center justify-between gap-4", children: [
+          /* @__PURE__ */ jsxs("figcaption", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx(
+              Roll,
+              {
+                still,
+                className: "text-[14px] font-semibold tracking-tight",
+                children: current.name
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Roll,
+              {
+                still,
+                delay: 0.05,
+                className: "text-[12px] text-zinc-500 dark:text-zinc-400",
+                children: current.role
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              role: "tablist",
+              "aria-label": "Testimonials",
+              className: "flex shrink-0 items-center gap-2",
+              onKeyDown: (e) => {
+                const step = e.key === "ArrowRight" ? 1 : e.key === "ArrowLeft" ? -1 : 0;
+                if (!step) return;
+                e.preventDefault();
+                const next = (active + step + people.length) % people.length;
+                select(next);
+                tabs.current[next]?.focus();
+              },
+              children: people.map((p, i) => {
+                const on = i === active;
+                return /* @__PURE__ */ jsxs(
+                  motion.button,
+                  {
+                    ref: (el) => void (tabs.current[i] = el),
+                    type: "button",
+                    role: "tab",
+                    id: `${uid}-tab-${i}`,
+                    "aria-selected": on,
+                    "aria-controls": `${uid}-quote`,
+                    "aria-label": p.name,
+                    tabIndex: on ? 0 : -1,
+                    onClick: () => select(i),
+                    initial: false,
+                    animate: {
+                      scale: 1,
+                      opacity: on ? 1 : 0.55,
+                      filter: on ? "grayscale(0)" : "grayscale(1)"
+                    },
+                    whileHover: on || still ? void 0 : { opacity: 1, filter: "grayscale(0)" },
+                    whileTap: still ? void 0 : { scale: 0.94 },
+                    transition: { type: "spring", stiffness: 420, damping: 28 },
+                    className: "relative size-9 shrink-0 cursor-pointer rounded-full outline-none focus-visible:ring-2 focus-visible:ring-zinc-400 focus-visible:ring-offset-4",
+                    children: [
+                      on && interval > 0 && /* @__PURE__ */ jsxs(
+                        "svg",
+                        {
+                          viewBox: "0 0 44 44",
+                          className: "pointer-events-none absolute -inset-1 size-[calc(100%+8px)] -rotate-90",
+                          "aria-hidden": true,
+                          children: [
+                            /* @__PURE__ */ jsx(
+                              "circle",
+                              {
+                                cx: "22",
+                                cy: "22",
+                                r: "20.5",
+                                fill: "none",
+                                stroke: "currentColor",
+                                strokeOpacity: "0.1",
+                                strokeWidth: "2"
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              motion.circle,
+                              {
+                                cx: "22",
+                                cy: "22",
+                                r: "20.5",
+                                fill: "none",
+                                stroke: p.color,
+                                strokeWidth: "2",
+                                strokeLinecap: "round",
+                                style: { pathLength: progress }
+                              }
+                            )
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: "grid size-full place-items-center overflow-hidden rounded-full text-[12px] font-semibold tracking-tight text-white",
+                          style: { background: p.color },
+                          children: p.avatar ? /* @__PURE__ */ jsx(
+                            "img",
+                            {
+                              src: p.avatar,
+                              alt: "",
+                              className: "size-full object-cover",
+                              draggable: false
+                            }
+                          ) : initials(p.name)
+                        }
+                      )
+                    ]
+                  },
+                  p.name
+                );
+              })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+});
+
+export {
+  AvatarTestimonial
+};

package/dist/chunk-WOR2GMMN.js

@@ -0,0 +1,114 @@
+"use client";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/icons/search.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 SearchIcon = 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,
+            stroke: "currentColor",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: strokeWidth ?? 2,
+            transition: {
+              duration: 1,
+              bounce: 0.3
+            },
+            variants: {
+              normal: { x: 0, y: 0 },
+              animate: {
+                x: [0, 0, -3, 0],
+                y: [0, -4, 0, 0]
+              }
+            },
+            viewBox: "0 0 24 24",
+            width: size,
+            xmlns: "http://www.w3.org/2000/svg",
+            children: [
+              /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "8" }),
+              /* @__PURE__ */ jsx("path", { d: "m21 21-4.3-4.3" })
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+SearchIcon.displayName = "SearchIcon";
+
+export {
+  SearchIcon
+};

package/dist/chunk-WTTDB475.js

@@ -0,0 +1,54 @@
+"use client";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/binary-text/binary-text.tsx
+import * as React from "react";
+import { animate, useInView, useReducedMotion } from "motion/react";
+import { jsx } from "react/jsx-runtime";
+var BinaryText = React.forwardRef(function BinaryText2({ text = "Access granted", duration = 1.1, charset = "01", as: Tag = "p", className }, forwardedRef) {
+  const ref = React.useRef(null);
+  React.useImperativeHandle(forwardedRef, () => ref.current);
+  const inView = useInView(ref, { once: true, amount: 0.6 });
+  const still = useReducedMotion();
+  const [shown, setShown] = React.useState(text);
+  const run = React.useRef(null);
+  const play = React.useCallback(() => {
+    if (still) return;
+    run.current?.stop();
+    const chars = Array.from(text);
+    run.current = animate(0, chars.length, {
+      duration,
+      ease: "linear",
+      onUpdate: (p) => {
+        setShown(
+          chars.map(
+            (ch, i) => ch === " " || i < Math.floor(p) ? ch : charset[Math.floor(Math.random() * charset.length)]
+          ).join("")
+        );
+      },
+      onComplete: () => setShown(text)
+    });
+  }, [text, duration, charset, still]);
+  React.useEffect(() => {
+    if (inView) play();
+  }, [inView, play]);
+  React.useEffect(() => () => run.current?.stop(), []);
+  return /* @__PURE__ */ jsx(
+    Tag,
+    {
+      ref,
+      "aria-label": text,
+      tabIndex: 0,
+      onPointerEnter: play,
+      onFocus: play,
+      className: cn("cursor-default whitespace-pre font-mono tabular-nums outline-none", className),
+      children: /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: shown })
+    }
+  );
+});
+
+export {
+  BinaryText
+};

package/dist/chunk-WWWKMU4Y.js

@@ -0,0 +1,184 @@
+"use client";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/icons/layout-grid.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 RECT_1_VARIANTS = {
+  normal: { translateX: 0, translateY: 0 },
+  animate: {
+    translateX: [0, 11, 11, 0],
+    translateY: [0, 0, 0, 0],
+    transition: { duration: 0.8, ease: "easeInOut", times: [0, 0.4, 0.6, 1] }
+  }
+};
+var RECT_2_VARIANTS = {
+  normal: { translateX: 0, translateY: 0 },
+  animate: {
+    translateX: [0, 0, 0, 0],
+    translateY: [0, 11, 11, 0],
+    transition: { duration: 0.8, ease: "easeInOut", times: [0, 0.4, 0.6, 1] }
+  }
+};
+var RECT_3_VARIANTS = {
+  normal: { translateX: 0, translateY: 0 },
+  animate: {
+    translateX: [0, -11, -11, 0],
+    translateY: [0, 0, 0, 0],
+    transition: { duration: 0.8, ease: "easeInOut", times: [0, 0.4, 0.6, 1] }
+  }
+};
+var RECT_4_VARIANTS = {
+  normal: { translateX: 0, translateY: 0 },
+  animate: {
+    translateX: [0, 0, 0, 0],
+    translateY: [0, -11, -11, 0],
+    transition: { duration: 0.8, ease: "easeInOut", times: [0, 0.4, 0.6, 1] }
+  }
+};
+var LayoutGridIcon = 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(
+                motion.rect,
+                {
+                  animate: controls,
+                  height: "7",
+                  initial: "normal",
+                  rx: "1",
+                  variants: RECT_1_VARIANTS,
+                  width: "7",
+                  x: "3",
+                  y: "3"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                motion.rect,
+                {
+                  animate: controls,
+                  height: "7",
+                  initial: "normal",
+                  rx: "1",
+                  variants: RECT_2_VARIANTS,
+                  width: "7",
+                  x: "14",
+                  y: "3"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                motion.rect,
+                {
+                  animate: controls,
+                  height: "7",
+                  initial: "normal",
+                  rx: "1",
+                  variants: RECT_3_VARIANTS,
+                  width: "7",
+                  x: "14",
+                  y: "14"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                motion.rect,
+                {
+                  animate: controls,
+                  height: "7",
+                  initial: "normal",
+                  rx: "1",
+                  variants: RECT_4_VARIANTS,
+                  width: "7",
+                  x: "3",
+                  y: "14"
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+LayoutGridIcon.displayName = "LayoutGridIcon";
+
+export {
+  LayoutGridIcon
+};