motion-brew 0.0.0-stage → 0.1.1

package/dist/chunk-2NRXP4HM.js

@@ -0,0 +1,371 @@
+"use client";
+import {
+  LinkedinIcon
+} from "./chunk-ADXWPWJR.js";
+import {
+  CalendarDaysIcon
+} from "./chunk-JJEWOQYQ.js";
+import {
+  CopyIcon
+} from "./chunk-M22UY764.js";
+import {
+  CheckIcon
+} from "./chunk-JHT6RCGY.js";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/contact-card/contact-card.tsx
+import * as React from "react";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { ArrowRight, ArrowUpRight, Mail } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var GLIDE = [0.22, 1, 0.36, 1];
+var CLOSE_DELAY = 220;
+var STAGGER = {
+  shut: {},
+  open: { transition: { staggerChildren: 0.05, delayChildren: 0.06 } }
+};
+var RISE = {
+  shut: { opacity: 0, y: 8, filter: "blur(4px)" },
+  open: {
+    opacity: 1,
+    y: 0,
+    filter: "blur(0px)",
+    transition: { duration: 0.35, ease: GLIDE }
+  }
+};
+function Through({ still, className }) {
+  const arrow = "absolute inset-0 size-4 transition-transform duration-[420ms] ease-[cubic-bezier(0.22,1,0.36,1)]";
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      "aria-hidden": true,
+      className: cn("relative size-4 shrink-0 overflow-hidden", className),
+      children: [
+        /* @__PURE__ */ jsx(
+          ArrowRight,
+          {
+            className: cn(arrow, !still && "group-hover/row:translate-x-[140%]"),
+            strokeWidth: 2.25
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ArrowRight,
+          {
+            className: cn(
+              arrow,
+              "-translate-x-[140%]",
+              !still && "group-hover/row:translate-x-0 group-hover/row:delay-75"
+            ),
+            strokeWidth: 2.25
+          }
+        )
+      ]
+    }
+  );
+}
+var ContactCard = React.forwardRef(
+  function ContactCard2({
+    label = "Contact",
+    name = "Maya Lindqvist",
+    role = "Design lead",
+    avatar = "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=120&h=120&fit=crop&crop=faces",
+    email = "maya@studio.co",
+    linkedin = "https://www.linkedin.com/",
+    bookHref,
+    onBook,
+    bookLabel = "Book a call",
+    available = true,
+    className
+  }, ref) {
+    const still = !!useReducedMotion();
+    const id = React.useId();
+    const root = React.useRef(null);
+    React.useImperativeHandle(ref, () => root.current);
+    const [open, setOpen] = React.useState(false);
+    const [copied, setCopied] = React.useState(false);
+    const timer = React.useRef(0);
+    const first = React.useRef(null);
+    const fromKeys = React.useRef(false);
+    React.useEffect(() => {
+      if (!open || !fromKeys.current) return;
+      fromKeys.current = false;
+      requestAnimationFrame(() => first.current?.focus());
+    }, [open]);
+    const show = () => {
+      window.clearTimeout(timer.current);
+      setOpen(true);
+    };
+    const hideSoon = () => {
+      window.clearTimeout(timer.current);
+      timer.current = window.setTimeout(() => setOpen(false), CLOSE_DELAY);
+    };
+    React.useEffect(() => {
+      if (!open) return;
+      const away = (e) => {
+        if (!root.current?.contains(e.target)) setOpen(false);
+      };
+      const esc = (e) => e.key === "Escape" && setOpen(false);
+      document.addEventListener("pointerdown", away);
+      document.addEventListener("keydown", esc);
+      return () => {
+        document.removeEventListener("pointerdown", away);
+        document.removeEventListener("keydown", esc);
+      };
+    }, [open]);
+    React.useEffect(() => () => window.clearTimeout(timer.current), []);
+    const copy = async () => {
+      try {
+        await navigator.clipboard?.writeText(email);
+      } catch {
+      }
+      setCopied(true);
+      window.setTimeout(() => setCopied(false), 1600);
+    };
+    const tile = "group/row flex w-full cursor-pointer items-center gap-3 rounded-xl px-3 py-2.5 text-left outline-none transition-colors hover:bg-white/70 focus-visible:ring-2 focus-visible:ring-zinc-400 dark:hover:bg-white/6";
+    const disc = "grid size-9 shrink-0 place-items-center rounded-full bg-white text-zinc-700 shadow-[0_1px_2px_rgba(0,0,0,0.06)] dark:bg-zinc-800 dark:text-zinc-200";
+    const action = "grid size-8 shrink-0 place-items-center rounded-full text-zinc-500 transition-colors group-hover/row:bg-white group-hover/row:text-zinc-900 dark:group-hover/row:bg-zinc-800 dark:group-hover/row:text-zinc-100";
+    const Book = bookHref ? "a" : "button";
+    const dot = (size) => available && /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: cn(
+          "absolute bottom-0 right-0 grid place-items-center rounded-full bg-white dark:bg-zinc-900",
+          size
+        ),
+        children: [
+          !still && /* @__PURE__ */ jsx(
+            motion.span,
+            {
+              className: "absolute size-[70%] rounded-full bg-[#269a5a]",
+              animate: { scale: [1, 2], opacity: [0.5, 0] },
+              transition: { duration: 1.6, repeat: Infinity, ease: "easeOut" }
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "relative size-[70%] rounded-full bg-[#269a5a]" })
+        ]
+      }
+    );
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: root,
+        className: cn("relative inline-flex", className),
+        onPointerEnter: (e) => e.pointerType === "mouse" && show(),
+        onPointerLeave: (e) => e.pointerType === "mouse" && hideSoon(),
+        onBlur: (e) => {
+          const to = e.relatedTarget;
+          if (to && !root.current?.contains(to)) hideSoon();
+        },
+        children: [
+          /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              id: `${id}-card`,
+              role: "dialog",
+              "aria-label": `Contact ${name}`,
+              initial: still ? { opacity: 0 } : { opacity: 0, y: 10, scale: 0.94, filter: "blur(6px)" },
+              animate: { opacity: 1, y: 0, scale: 1, filter: "blur(0px)" },
+              exit: still ? { opacity: 0 } : { opacity: 0, y: 8, scale: 0.97, filter: "blur(4px)" },
+              transition: { type: "spring", stiffness: 420, damping: 32 },
+              style: { transformOrigin: "50% 100%" },
+              className: "absolute bottom-full left-1/2 z-30 w-[340px] -translate-x-1/2 pb-3",
+              children: /* @__PURE__ */ jsxs(
+                motion.div,
+                {
+                  variants: still ? void 0 : STAGGER,
+                  initial: "shut",
+                  animate: "open",
+                  className: "rounded-3xl bg-white p-5 text-left text-base font-normal leading-normal tracking-normal text-zinc-900 shadow-[0_1px_2px_rgba(0,0,0,0.06),0_20px_44px_-16px_rgba(0,0,0,0.3)] ring-1 ring-black/5 dark:bg-zinc-900 dark:text-zinc-100 dark:ring-white/10",
+                  children: [
+                    /* @__PURE__ */ jsxs(
+                      motion.div,
+                      {
+                        variants: still ? void 0 : RISE,
+                        className: "flex items-center gap-3",
+                        children: [
+                          /* @__PURE__ */ jsxs("span", { className: "relative shrink-0", children: [
+                            /* @__PURE__ */ jsx(
+                              "img",
+                              {
+                                src: avatar,
+                                alt: "",
+                                draggable: false,
+                                className: "size-12 rounded-full bg-zinc-200 object-cover"
+                              }
+                            ),
+                            dot("size-3.5")
+                          ] }),
+                          /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+                            /* @__PURE__ */ jsx("span", { className: "block truncate text-lg font-semibold leading-6 tracking-tight", children: name }),
+                            /* @__PURE__ */ jsx("span", { className: "block truncate text-sm text-zinc-500 dark:text-zinc-400", children: role })
+                          ] }),
+                          available && /* @__PURE__ */ jsx("span", { className: "shrink-0 rounded-full bg-[#269a5a]/10 px-2.5 py-1 text-xs font-medium text-[#1f7a48] dark:text-[#5fd394]", children: "Available" })
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs(
+                      motion.div,
+                      {
+                        variants: still ? void 0 : RISE,
+                        className: "mt-4 rounded-2xl bg-zinc-100 p-1 dark:bg-white/6",
+                        children: [
+                          /* @__PURE__ */ jsxs(
+                            "button",
+                            {
+                              ref: first,
+                              type: "button",
+                              onClick: copy,
+                              "aria-label": copied ? "Email copied" : `Copy ${email}`,
+                              className: tile,
+                              children: [
+                                /* @__PURE__ */ jsx("span", { className: disc, children: /* @__PURE__ */ jsx(Mail, { className: "size-4", strokeWidth: 2, "aria-hidden": true }) }),
+                                /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+                                  /* @__PURE__ */ jsx("span", { className: "block text-xs text-zinc-500 dark:text-zinc-400", children: "Email" }),
+                                  /* @__PURE__ */ jsx("span", { className: "relative block h-5 overflow-hidden", children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", initial: false, children: /* @__PURE__ */ jsx(
+                                    motion.span,
+                                    {
+                                      className: "block truncate text-sm font-medium leading-5",
+                                      initial: still ? { opacity: 0 } : { opacity: 0, y: "70%" },
+                                      animate: { opacity: 1, y: 0 },
+                                      exit: still ? { opacity: 0 } : { opacity: 0, y: "-70%" },
+                                      transition: { duration: 0.25, ease: GLIDE },
+                                      children: copied ? "Copied to clipboard" : email
+                                    },
+                                    copied ? "copied" : "email"
+                                  ) }) })
+                                ] }),
+                                /* @__PURE__ */ jsx("span", { className: action, children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", initial: false, children: /* @__PURE__ */ jsx(
+                                  motion.span,
+                                  {
+                                    className: cn("grid", copied && "text-[#269a5a]"),
+                                    initial: still ? { opacity: 0 } : { opacity: 0, scale: 0.4, rotate: -45 },
+                                    animate: { opacity: 1, scale: 1, rotate: 0 },
+                                    exit: still ? { opacity: 0 } : { opacity: 0, scale: 0.4 },
+                                    transition: {
+                                      type: "spring",
+                                      stiffness: 520,
+                                      damping: 24
+                                    },
+                                    children: copied ? /* @__PURE__ */ jsx(CheckIcon, { className: "size-4", strokeWidth: 2.5 }) : /* @__PURE__ */ jsx(CopyIcon, { className: "size-4", strokeWidth: 2 })
+                                  },
+                                  copied ? "ok" : "copy"
+                                ) }) })
+                              ]
+                            }
+                          ),
+                          /* @__PURE__ */ jsx("div", { className: "mx-3 h-px bg-zinc-200/80 dark:bg-white/8" }),
+                          /* @__PURE__ */ jsxs(
+                            "a",
+                            {
+                              href: linkedin,
+                              target: "_blank",
+                              rel: "noreferrer",
+                              className: tile,
+                              children: [
+                                /* @__PURE__ */ jsx("span", { className: disc, children: /* @__PURE__ */ jsx(
+                                  LinkedinIcon,
+                                  {
+                                    className: "size-4",
+                                    strokeWidth: 2,
+                                    "aria-hidden": true
+                                  }
+                                ) }),
+                                /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+                                  /* @__PURE__ */ jsx("span", { className: "block text-xs text-zinc-500 dark:text-zinc-400", children: "LinkedIn" }),
+                                  /* @__PURE__ */ jsx("span", { className: "block truncate text-sm font-medium leading-5", children: linkedin.replace(/^https?:\/\/(www\.)?/, "").replace(/\/$/, "") })
+                                ] }),
+                                /* @__PURE__ */ jsx("span", { className: action, children: /* @__PURE__ */ jsx(
+                                  ArrowUpRight,
+                                  {
+                                    className: "size-4 transition-transform duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] group-hover/row:rotate-45",
+                                    strokeWidth: 2.25,
+                                    "aria-hidden": true
+                                  }
+                                ) })
+                              ]
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      motion.div,
+                      {
+                        variants: still ? void 0 : RISE,
+                        className: "mt-4",
+                        children: /* @__PURE__ */ jsxs(
+                          Book,
+                          {
+                            ...bookHref ? { href: bookHref } : { type: "button", onClick: onBook },
+                            className: "group/row flex h-12 w-full cursor-pointer items-center justify-center gap-2 rounded-full bg-[#242423] text-sm font-medium text-white outline-none transition-transform focus-visible:ring-2 focus-visible:ring-zinc-400 focus-visible:ring-offset-2 active:scale-[0.98] dark:bg-white dark:text-zinc-900 dark:focus-visible:ring-offset-zinc-900",
+                            children: [
+                              /* @__PURE__ */ jsx(
+                                CalendarDaysIcon,
+                                {
+                                  className: "size-4",
+                                  strokeWidth: 2,
+                                  "aria-hidden": true
+                                }
+                              ),
+                              bookLabel,
+                              /* @__PURE__ */ jsx(Through, { still })
+                            ]
+                          }
+                        )
+                      }
+                    )
+                  ]
+                }
+              )
+            }
+          ) }),
+          /* @__PURE__ */ jsxs(
+            motion.button,
+            {
+              type: "button",
+              "aria-expanded": open,
+              "aria-controls": open ? `${id}-card` : void 0,
+              onClick: () => open ? setOpen(false) : show(),
+              onFocus: () => {
+                fromKeys.current = true;
+                show();
+              },
+              whileTap: still ? void 0 : { scale: 0.97 },
+              className: "group relative inline-flex cursor-pointer items-baseline gap-[0.12em] rounded-md text-inherit outline-none [font:inherit] [letter-spacing:inherit] focus-visible:ring-2 focus-visible:ring-zinc-400 focus-visible:ring-offset-4 dark:focus-visible:ring-offset-zinc-900",
+              children: [
+                /* @__PURE__ */ jsxs("span", { className: "relative", children: [
+                  label,
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      "aria-hidden": true,
+                      className: cn(
+                        "absolute inset-x-0 -bottom-[0.06em] h-[0.07em] origin-left rounded-full bg-current transition-transform duration-300 ease-[cubic-bezier(0.22,1,0.36,1)]",
+                        open ? "scale-x-100" : "scale-x-0 group-hover:scale-x-100"
+                      )
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx(
+                  motion.span,
+                  {
+                    className: "grid self-center",
+                    animate: { rotate: open && !still ? -45 : 0 },
+                    transition: { type: "spring", stiffness: 420, damping: 24 },
+                    children: /* @__PURE__ */ jsx(ArrowUpRight, { className: "size-[0.8em]", strokeWidth: 2.5 })
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+
+export {
+  ContactCard
+};

package/dist/chunk-2QCWELWT.js

@@ -0,0 +1,120 @@
+"use client";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/icons/cloud-upload.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 CLOUD_VARIANTS = {
+  initial: { y: -2 },
+  active: { y: 0 }
+};
+var CloudUploadIcon = 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("initial"),
+        stopAnimation: () => controls.start("active")
+      };
+    });
+    const handleMouseEnter = useCallback(
+      (e) => {
+        if (isControlledRef.current) {
+          onMouseEnter?.(e);
+        } else {
+          controls.start("initial");
+        }
+      },
+      [controls, onMouseEnter]
+    );
+    const handleMouseLeave = useCallback(
+      (e) => {
+        if (isControlledRef.current) {
+          onMouseLeave?.(e);
+        } else {
+          controls.start("active");
+        }
+      },
+      [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: "M4.2 15.1A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.2" }),
+              /* @__PURE__ */ jsxs(
+                motion.g,
+                {
+                  animate: controls,
+                  transition: {
+                    duration: 0.3,
+                    ease: [0.68, -0.6, 0.32, 1.6]
+                  },
+                  variants: CLOUD_VARIANTS,
+                  children: [
+                    /* @__PURE__ */ jsx("path", { d: "M12 13v8" }),
+                    /* @__PURE__ */ jsx("path", { d: "m8 17 4-4 4 4" })
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+CloudUploadIcon.displayName = "CloudUploadIcon";
+
+export {
+  CloudUploadIcon
+};

package/dist/chunk-2TQSHVXA.js

@@ -0,0 +1,12 @@
+"use client";
+
+// src/lib/cn.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+export {
+  cn
+};

package/dist/chunk-327TGRS5.js

@@ -0,0 +1,75 @@
+"use client";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/backspace-text/backspace-text.tsx
+import * as React from "react";
+import { motion, useReducedMotion } from "motion/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var BackspaceText = React.forwardRef(function BackspaceText2({
+  before = "We design for",
+  words = ["people.", "speed.", "delight."],
+  typeSpeed = 75,
+  deleteSpeed = 40,
+  pause = 1400,
+  wordClassName = "text-violet-600 dark:text-violet-400",
+  className
+}, ref) {
+  const still = useReducedMotion();
+  const [index, setIndex] = React.useState(0);
+  const [count, setCount] = React.useState(0);
+  const [deleting, setDeleting] = React.useState(false);
+  const word = words[index % words.length] ?? "";
+  React.useEffect(() => {
+    if (still) return;
+    let delay = deleting ? deleteSpeed : typeSpeed;
+    if (!deleting && count === word.length) delay = pause;
+    if (deleting && count === 0) delay = 300;
+    const id = window.setTimeout(() => {
+      if (!deleting && count < word.length) setCount(count + 1);
+      else if (!deleting) setDeleting(true);
+      else if (count > 0) setCount(count - 1);
+      else {
+        setDeleting(false);
+        setIndex((i) => (i + 1) % words.length);
+      }
+    }, delay);
+    return () => window.clearTimeout(id);
+  }, [count, deleting, word, words.length, typeSpeed, deleteSpeed, pause, still]);
+  const shown = still ? word : word.slice(0, count);
+  return /* @__PURE__ */ jsxs("p", { ref, className: cn(className), children: [
+    /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+      before,
+      " ",
+      words.join(" ")
+    ] }),
+    /* @__PURE__ */ jsxs("span", { "aria-hidden": true, children: [
+      before,
+      " ",
+      /* @__PURE__ */ jsx("span", { className: cn("whitespace-pre", wordClassName), children: Array.from(shown).map((ch, i) => /* @__PURE__ */ jsx(
+        motion.span,
+        {
+          className: "inline-block",
+          initial: { opacity: 0, y: "0.15em" },
+          animate: { opacity: 1, y: 0 },
+          transition: { duration: 0.12 },
+          children: ch
+        },
+        `${index}-${i}`
+      )) }),
+      /* @__PURE__ */ jsx(
+        motion.span,
+        {
+          className: "ml-[0.06em] inline-block h-[0.95em] w-[0.08em] translate-y-[0.12em] rounded-full bg-current align-baseline",
+          animate: still ? void 0 : { opacity: [1, 1, 0, 0] },
+          transition: { duration: 1, repeat: Infinity, times: [0, 0.5, 0.5, 1] }
+        }
+      )
+    ] })
+  ] });
+});
+
+export {
+  BackspaceText
+};