motion-brew 0.0.0-stage → 0.1.0

package/dist/chunk-2GXY54MP.js

@@ -0,0 +1,247 @@
+"use client";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/tilt-carousel/tilt-carousel.tsx
+import * as React from "react";
+import {
+  animate,
+  motion,
+  useMotionValue,
+  useMotionValueEvent,
+  useReducedMotion,
+  useTransform
+} from "motion/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var photo = (id) => `https://images.unsplash.com/photo-${id}?w=600&h=750&fit=crop&q=80`;
+var DEFAULT_ITEMS = [
+  { src: photo("1470071459604-3b5ec3a7fe05"), title: "Soft Signal" },
+  { src: photo("1505144808419-1957a94ca61e"), title: "Tide Lines" },
+  { src: photo("1475924156734-496f6cac6ec1"), title: "Afterglow" },
+  { src: photo("1500534314209-a25ddb2bd429"), title: "Paper Dunes" },
+  { src: photo("1494500764479-0c8f2919a3d8"), title: "Night Bloom" },
+  { src: photo("1490750967868-88aa4486c946"), title: "Glass Garden" },
+  { src: photo("1519681393784-d120267933ba"), title: "Low Orbit" },
+  { src: photo("1508739773434-c26b3d09e071"), title: "Velvet Hour" },
+  { src: photo("1504893524553-b855bce32c67"), title: "River Run" },
+  { src: photo("1507525428034-b723cf961d3e"), title: "Open Water" },
+  { src: photo("1454496522488-7a8e488e8606"), title: "First Snow" },
+  { src: photo("1433086966358-54859d0ed716"), title: "Falls" }
+];
+var SETTLE = { type: "spring", stiffness: 260, damping: 30 };
+var offset = (i, p, n) => {
+  let d = i - p;
+  d = ((d + n / 2) % n + n) % n - n / 2;
+  return d;
+};
+function Card({
+  item,
+  index,
+  count,
+  pos,
+  width,
+  tilt,
+  scale,
+  still
+}) {
+  const d = useTransform(pos, (p) => offset(index, p, count));
+  const x = useTransform(d, (v) => {
+    const s2 = Math.sign(v);
+    const a = Math.abs(v);
+    return s2 * (Math.min(a, 1) * width * 0.86 + Math.max(0, a - 1) * width * 0.52);
+  });
+  const rotateY = useTransform(d, (v) => -Math.max(-1, Math.min(1, v)) * tilt);
+  const z = useTransform(d, (v) => -Math.min(3, Math.abs(v)) * 60);
+  const s = useTransform(d, (v) => 1 - (1 - scale) * Math.min(1, Math.abs(v)));
+  const brightness = useTransform(
+    d,
+    (v) => 1 - Math.min(0.28, Math.abs(v) * 0.14)
+  );
+  const blur = useTransform(
+    d,
+    (v) => Math.max(0, Math.min(2.5, (Math.abs(v) - 0.6) * 1.6))
+  );
+  const filter = useTransform(
+    [brightness, blur],
+    ([b, bl]) => still ? "none" : `brightness(${b}) blur(${bl}px)`
+  );
+  const opacity = useTransform(
+    d,
+    (v) => Math.max(0, Math.min(1, 3.4 - Math.abs(v)))
+  );
+  const zIndex = useTransform(d, (v) => 100 - Math.round(Math.abs(v) * 10));
+  return /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      "aria-hidden": true,
+      style: {
+        x,
+        z,
+        rotateY,
+        scale: s,
+        opacity,
+        zIndex,
+        filter,
+        width,
+        height: width * 1.25
+      },
+      className: "absolute left-1/2 top-1/2 -ml-[var(--hw)] -mt-[var(--hh)] overflow-hidden rounded-[22px] bg-zinc-200 shadow-[0_2px_6px_rgba(0,0,0,0.1),0_26px_50px_-24px_rgba(0,0,0,0.45)] outline-none will-change-transform dark:bg-zinc-800",
+      children: /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: item.src,
+          alt: item.title,
+          draggable: false,
+          loading: "lazy",
+          className: "size-full select-none object-cover"
+        }
+      )
+    }
+  );
+}
+var TiltCarousel = React.forwardRef(
+  function TiltCarousel2({
+    items = DEFAULT_ITEMS,
+    cardWidth = 220,
+    tilt = 40,
+    perspective = 900,
+    inactiveScale = 0.86,
+    speed = 1,
+    autoplay = true,
+    delay = 3,
+    label = "Photo carousel",
+    className
+  }, ref) {
+    const still = !!useReducedMotion();
+    const n = items.length;
+    const pos = useMotionValue(0);
+    const [active, setActive] = React.useState(0);
+    const [paused, setPaused] = React.useState(false);
+    const drag = React.useRef(null);
+    const moved = React.useRef(false);
+    const scale = Math.min(1, Math.max(0.5, inactiveScale));
+    useMotionValueEvent(pos, "change", (p) => {
+      const i = (Math.round(p) % n + n) % n;
+      setActive((a) => a === i ? a : i);
+    });
+    const go = React.useCallback(
+      (target) => {
+        const k = Math.max(0.25, speed);
+        animate(
+          pos,
+          target,
+          still ? { duration: 0 } : {
+            ...SETTLE,
+            stiffness: SETTLE.stiffness * k * k,
+            damping: SETTLE.damping * k
+          }
+        );
+      },
+      [pos, still, speed]
+    );
+    const step = (dir) => go(Math.round(pos.get()) + dir);
+    React.useEffect(() => {
+      if (!autoplay || paused || still) return;
+      const t = window.setTimeout(() => step(1), delay * 1e3);
+      return () => window.clearTimeout(t);
+    }, [autoplay, paused, active, delay, still]);
+    const onDown = (e) => {
+      if (e.button !== 0) return;
+      pos.stop();
+      drag.current = { x: e.clientX, p: pos.get(), t: performance.now(), v: 0 };
+      moved.current = false;
+      e.currentTarget.setPointerCapture(e.pointerId);
+    };
+    const onMove = (e) => {
+      const g = drag.current;
+      if (!g) return;
+      const unit = cardWidth * 0.86;
+      const now = performance.now();
+      if (Math.abs(e.clientX - g.x) > 6) moved.current = true;
+      const next = g.p - (e.clientX - g.x) / unit;
+      const dt = Math.max(1, now - g.t);
+      g.v = g.v * 0.6 + (next - pos.get()) / dt * 1e3 * 0.4;
+      g.t = now;
+      pos.set(next);
+    };
+    const onUp = (e) => {
+      const g = drag.current;
+      if (!g) return;
+      drag.current = null;
+      if (!moved.current && e.type !== "pointercancel") {
+        const r = e.currentTarget.getBoundingClientRect();
+        const fromMiddle = e.clientX - (r.left + r.width / 2);
+        if (Math.abs(fromMiddle) > cardWidth / 2) step(Math.sign(fromMiddle));
+        else go(Math.round(pos.get()));
+        return;
+      }
+      const throwTo = pos.get() + Math.max(-3, Math.min(3, g.v * 0.18));
+      go(Math.round(throwTo));
+    };
+    const height = cardWidth * 1.25;
+    const current = items[active];
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        role: "region",
+        "aria-roledescription": "carousel",
+        "aria-label": label,
+        tabIndex: 0,
+        onKeyDown: (e) => {
+          if (e.key === "ArrowRight") {
+            e.preventDefault();
+            step(1);
+          } else if (e.key === "ArrowLeft") {
+            e.preventDefault();
+            step(-1);
+          }
+        },
+        onPointerEnter: () => setPaused(true),
+        onPointerLeave: () => setPaused(false),
+        className: cn(
+          "relative w-full select-none outline-none focus-visible:ring-2 focus-visible:ring-zinc-400 focus-visible:ring-offset-4",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              onPointerDown: onDown,
+              onPointerMove: onMove,
+              onPointerUp: onUp,
+              onPointerCancel: onUp,
+              className: "relative w-full cursor-grab touch-pan-y active:cursor-grabbing",
+              style: {
+                height: height + 48,
+                perspective,
+                "--hw": `${cardWidth / 2}px`,
+                "--hh": `${height / 2}px`
+              },
+              children: items.map((item, i) => /* @__PURE__ */ jsx(
+                Card,
+                {
+                  item,
+                  index: i,
+                  count: n,
+                  pos,
+                  width: cardWidth,
+                  tilt,
+                  scale,
+                  still
+                },
+                item.src + i
+              ))
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { role: "status", "aria-live": "polite", className: "sr-only", children: autoplay ? "" : `${current.title}, ${active + 1} of ${n}` })
+        ]
+      }
+    );
+  }
+);
+
+export {
+  TiltCarousel
+};

package/dist/chunk-2IMPUH4H.js

@@ -0,0 +1,135 @@
+"use client";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/icons/arrow-up.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: { d: "m5 12 7-7 7 7", translateY: 0 },
+  animate: {
+    d: "m5 12 7-7 7 7",
+    translateY: [0, 3, 0],
+    transition: {
+      duration: 0.4
+    }
+  }
+};
+var SECOND_PATH_VARIANTS = {
+  normal: { d: "M12 19V5" },
+  animate: {
+    d: ["M12 19V5", "M12 19V10", "M12 19V5"],
+    transition: {
+      duration: 0.4
+    }
+  }
+};
+var ArrowUpIcon = 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.path,
+                {
+                  animate: controls,
+                  d: "m5 12 7-7 7 7",
+                  variants: PATH_VARIANTS
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                motion.path,
+                {
+                  animate: controls,
+                  d: "M12 19V5",
+                  variants: SECOND_PATH_VARIANTS
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+ArrowUpIcon.displayName = "ArrowUpIcon";
+
+export {
+  ArrowUpIcon
+};