motion-brew 0.0.0-stage → 0.1.0

package/dist/chunk-FFUBTMDC.js

@@ -0,0 +1,303 @@
+"use client";
+import {
+  ShieldCheckIcon
+} from "./chunk-WE7VCUOA.js";
+import {
+  UsersIcon
+} from "./chunk-NB5CB65C.js";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/amount-slider/amount-slider.tsx
+import * as React from "react";
+import {
+  animate,
+  motion,
+  useMotionValue,
+  useMotionValueEvent,
+  useReducedMotion,
+  useTransform
+} from "motion/react";
+import { ArrowRight } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ROLL = {
+  type: "spring",
+  stiffness: 300,
+  damping: 28,
+  mass: 0.7
+};
+var PRESS = { type: "spring", stiffness: 260, damping: 26 };
+var DIGITS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
+function Digit({ digit, still }) {
+  return /* @__PURE__ */ jsx("span", { className: "relative inline-block h-[1em] w-[0.6em] overflow-hidden", children: /* @__PURE__ */ jsx(
+    motion.span,
+    {
+      className: "absolute inset-x-0 top-0 flex flex-col",
+      initial: false,
+      animate: { y: `${-digit * 10}%` },
+      transition: still ? { duration: 0 } : ROLL,
+      children: DIGITS.map((d) => /* @__PURE__ */ jsx("span", { className: "flex h-[1em] items-center justify-center", children: d }, d))
+    }
+  ) });
+}
+function Rolling({ text, still }) {
+  const chars = Array.from(text);
+  return /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "inline-flex leading-none tabular-nums", children: chars.map((ch, i) => {
+    const key = chars.length - i;
+    return /\d/.test(ch) ? /* @__PURE__ */ jsx(Digit, { digit: Number(ch), still }, key) : /* @__PURE__ */ jsx("span", { className: "inline-block h-[1em]", children: ch }, `${key}-${ch}`);
+  }) });
+}
+var AmountSlider = React.forwardRef(
+  function AmountSlider2({
+    label = "How much do you need?",
+    min = 5e3,
+    max = 5e5,
+    step = 1e3,
+    defaultValue = 75e3,
+    currency = "USD",
+    rate = 7.5,
+    months = 60,
+    cta = "Continue",
+    onChange,
+    onSubmit,
+    className
+  }, ref) {
+    const still = !!useReducedMotion();
+    const span = Math.max(1, max - min);
+    const clamp = (v) => Math.min(max, Math.max(min, Math.round((v - min) / step) * step + min));
+    const [value, setValue] = React.useState(() => clamp(defaultValue));
+    const [grab, setGrab] = React.useState(false);
+    const track = React.useRef(null);
+    const pos = useMotionValue((value - min) / span);
+    const stretch = useMotionValue(0);
+    const money = React.useMemo(
+      () => new Intl.NumberFormat("en-US", {
+        style: "currency",
+        currency,
+        maximumFractionDigits: 0
+      }),
+      [currency]
+    );
+    const short = React.useMemo(
+      () => new Intl.NumberFormat("en-US", {
+        style: "currency",
+        currency,
+        notation: "compact",
+        maximumFractionDigits: 1
+      }),
+      [currency]
+    );
+    const commit = (v) => {
+      const next = clamp(v);
+      setValue((cur) => {
+        if (cur !== next) onChange?.(next);
+        return next;
+      });
+    };
+    useMotionValueEvent(
+      pos,
+      "change",
+      (p) => commit(min + Math.min(1, Math.max(0, p)) * span)
+    );
+    const left = useTransform(pos, (p) => {
+      const c = Math.min(1, Math.max(0, p));
+      return `calc(${c * 100}% + ${24 - c * 48}px)`;
+    });
+    const scaleX = useTransform(
+      stretch,
+      (s) => 1 + Math.min(0.35, Math.abs(s) * 4e-3)
+    );
+    const originX = useTransform(stretch, (s) => s < 0 ? 1 : 0);
+    const ratioAt = (clientX) => {
+      const r2 = track.current.getBoundingClientRect();
+      return (clientX - r2.left - 24) / Math.max(1, r2.width - 48);
+    };
+    const glide = (p) => {
+      const to = Math.min(1, Math.max(0, p));
+      animate(pos, to, still ? { duration: 0 } : PRESS);
+    };
+    const onDown = (e) => {
+      if (e.button !== 0) return;
+      e.preventDefault();
+      e.currentTarget.setPointerCapture(e.pointerId);
+      e.currentTarget.focus({
+        focusVisible: false
+      });
+      setGrab(true);
+      pos.stop();
+      glide(ratioAt(e.clientX));
+    };
+    const onMove = (e) => {
+      if (!grab) return;
+      pos.stop();
+      const w = Math.max(1, track.current.getBoundingClientRect().width - 48);
+      const p = ratioAt(e.clientX);
+      pos.set(Math.min(1, Math.max(0, p)));
+      stretch.set(p < 0 ? p * w : p > 1 ? (p - 1) * w : 0);
+    };
+    const onUp = () => {
+      if (!grab) return;
+      setGrab(false);
+      animate(
+        stretch,
+        0,
+        still ? { duration: 0 } : { type: "spring", stiffness: 500, damping: 18 }
+      );
+      glide((value - min) / span);
+    };
+    const onKey = (e) => {
+      const big = Math.max(step, Math.round(span / 10 / step) * step);
+      const by = {
+        ArrowRight: step,
+        ArrowUp: step,
+        ArrowLeft: -step,
+        ArrowDown: -step,
+        PageUp: big,
+        PageDown: -big
+      };
+      let next = null;
+      if (e.key in by) next = clamp(value + by[e.key]);
+      else if (e.key === "Home") next = min;
+      else if (e.key === "End") next = max;
+      if (next === null) return;
+      e.preventDefault();
+      glide((next - min) / span);
+    };
+    const r = rate / 100 / 12;
+    const monthly = r ? value * r / (1 - Math.pow(1 + r, -months)) : value / months;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "w-[380px] max-w-full rounded-3xl bg-white p-6 text-[#242423] 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__ */ jsx("p", { className: "text-sm text-zinc-500 dark:text-zinc-400", children: label }),
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: "mt-2 text-[32px] font-medium leading-none tracking-tight",
+              "aria-hidden": true,
+              children: /* @__PURE__ */ jsx(Rolling, { text: money.format(value), still })
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "mt-8", children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                ref: track,
+                role: "slider",
+                tabIndex: 0,
+                "aria-label": label,
+                "aria-valuemin": min,
+                "aria-valuemax": max,
+                "aria-valuenow": value,
+                "aria-valuetext": money.format(value),
+                onPointerDown: onDown,
+                onPointerMove: onMove,
+                onPointerUp: onUp,
+                onPointerCancel: onUp,
+                onKeyDown: onKey,
+                className: "group/slider relative h-10 cursor-pointer touch-none select-none rounded-full outline-none focus-visible:ring-2 focus-visible:ring-zinc-400 focus-visible:ring-offset-4 dark:focus-visible:ring-offset-zinc-900",
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "absolute inset-x-0 top-1/2 h-2.5 -translate-y-1/2 overflow-hidden rounded-full bg-[#242423]/[0.08] dark:bg-white/10", children: /* @__PURE__ */ jsx(
+                    motion.span,
+                    {
+                      className: "absolute inset-y-0 left-0 rounded-full bg-[#242423] dark:bg-zinc-100",
+                      style: { width: left }
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx(
+                    motion.span,
+                    {
+                      className: "absolute top-1/2 -ml-6 -mt-4 block h-8 w-12",
+                      style: { left },
+                      children: /* @__PURE__ */ jsx(
+                        motion.span,
+                        {
+                          className: "flex size-full items-center justify-center gap-[3px] rounded-full bg-white shadow-[0_1px_2px_rgba(0,0,0,0.12),0_6px_16px_-6px_rgba(0,0,0,0.3)] ring-1 ring-black/5 dark:bg-zinc-100",
+                          style: { scaleX, originX },
+                          animate: { scale: grab && !still ? 1.12 : 1 },
+                          transition: { type: "spring", stiffness: 420, damping: 24 },
+                          children: [0, 1, 2].map((k) => /* @__PURE__ */ jsx(
+                            motion.span,
+                            {
+                              className: "h-3 w-px rounded-full bg-[#242423]/40",
+                              animate: { x: grab && !still ? (k - 1) * 2 : 0 },
+                              transition: { type: "spring", stiffness: 420, damping: 24 }
+                            },
+                            k
+                          ))
+                        }
+                      )
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "mt-2 flex justify-between text-xs font-medium text-zinc-500 tabular-nums dark:text-zinc-400", children: [
+              /* @__PURE__ */ jsx("span", { children: short.format(min) }),
+              /* @__PURE__ */ jsx("span", { children: short.format(max) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "mt-6 flex items-center justify-between rounded-2xl bg-[#242423]/[0.04] px-4 py-3 dark:bg-white/[0.04]", children: [
+            /* @__PURE__ */ jsxs("span", { className: "text-sm text-zinc-500 dark:text-zinc-400", children: [
+              "About, over ",
+              months,
+              " months"
+            ] }),
+            /* @__PURE__ */ jsxs("span", { className: "flex items-baseline text-base font-medium", children: [
+              /* @__PURE__ */ jsx(Rolling, { text: money.format(Math.round(monthly)), still }),
+              /* @__PURE__ */ jsx("span", { className: "ml-1 text-sm font-normal text-zinc-500 dark:text-zinc-400", children: "/mo" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs(
+            motion.button,
+            {
+              type: "button",
+              onClick: () => onSubmit?.(value),
+              whileTap: still ? void 0 : { scale: 0.97 },
+              className: "group/cta mt-6 flex h-12 w-full cursor-pointer items-center justify-center gap-2 overflow-hidden rounded-full bg-[#242423] text-base font-medium text-white outline-none focus-visible:ring-2 focus-visible:ring-zinc-400 focus-visible:ring-offset-2 dark:bg-zinc-100 dark:text-[#242423]",
+              children: [
+                cta,
+                /* @__PURE__ */ jsxs("span", { className: "relative size-4 overflow-hidden", children: [
+                  /* @__PURE__ */ jsx(
+                    ArrowRight,
+                    {
+                      "aria-hidden": true,
+                      className: "absolute inset-0 size-4 transition-transform duration-300 ease-out group-hover/cta:translate-x-5"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    ArrowRight,
+                    {
+                      "aria-hidden": true,
+                      className: "absolute inset-0 size-4 -translate-x-5 transition-transform duration-300 ease-out group-hover/cta:translate-x-0"
+                    }
+                  )
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "mt-4 flex items-center justify-center gap-5 text-xs text-zinc-500 dark:text-zinc-400", children: [
+            /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
+              /* @__PURE__ */ jsx(UsersIcon, { "aria-hidden": true, className: "size-4" }),
+              "50,000+ people"
+            ] }),
+            /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
+              /* @__PURE__ */ jsx(ShieldCheckIcon, { "aria-hidden": true, className: "size-4" }),
+              "No credit impact"
+            ] })
+          ] })
+        ]
+      }
+    );
+  }
+);
+
+export {
+  AmountSlider
+};

package/dist/chunk-FK4TZ5OW.js

@@ -0,0 +1,29 @@
+"use client";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/gradient-text/gradient-text.tsx
+import * as React from "react";
+import { motion, useReducedMotion } from "motion/react";
+import { jsx } from "react/jsx-runtime";
+var GradientText = React.forwardRef(function GradientText2({ text = "Color in motion", as = "h2", colors = ["#8b5cf6", "#d6498f", "#f59e0b"], speed = 6, className }, ref) {
+  const still = useReducedMotion();
+  const Tag = motion[as];
+  const stops = [...colors, colors[0]].join(", ");
+  return /* @__PURE__ */ jsx(
+    Tag,
+    {
+      ref,
+      className: cn("bg-clip-text text-transparent", className),
+      style: { backgroundImage: `linear-gradient(90deg, ${stops})`, backgroundSize: "200% 100%" },
+      animate: still ? void 0 : { backgroundPosition: ["0% 50%", "-200% 50%"] },
+      transition: { duration: speed, ease: "linear", repeat: Infinity },
+      children: text
+    }
+  );
+});
+
+export {
+  GradientText
+};