motion-brew 0.0.0-stage → 0.1.0

package/dist/chunk-UD5OQ2T3.js

@@ -0,0 +1,117 @@
+"use client";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/icons/badge-alert.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 ICON_VARIANTS = {
+  normal: { scale: 1, rotate: 0 },
+  animate: {
+    scale: [1, 1.1, 1.1, 1.1, 1],
+    rotate: [0, -3, 3, -2, 2, 0],
+    transition: {
+      duration: 0.5,
+      times: [0, 0.2, 0.4, 0.6, 1],
+      ease: "easeInOut"
+    }
+  }
+};
+var BadgeAlertIcon = 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,
+            variants: ICON_VARIANTS,
+            viewBox: "0 0 24 24",
+            width: size,
+            xmlns: "http://www.w3.org/2000/svg",
+            children: [
+              /* @__PURE__ */ jsx("path", { d: "M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z" }),
+              /* @__PURE__ */ jsx("line", { x1: "12", x2: "12", y1: "8", y2: "12" }),
+              /* @__PURE__ */ jsx("line", { x1: "12", x2: "12.01", y1: "16", y2: "16" })
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+BadgeAlertIcon.displayName = "BadgeAlertIcon";
+
+export {
+  BadgeAlertIcon
+};

package/dist/chunk-UDFBQWUH.js

@@ -0,0 +1,333 @@
+"use client";
+import {
+  CompassIcon
+} from "./chunk-BS4ZFJKW.js";
+import {
+  HomeIcon
+} from "./chunk-I45D4XV4.js";
+import {
+  MessageCircleIcon
+} from "./chunk-WFWO2EIW.js";
+import {
+  BellIcon
+} from "./chunk-7PS2W7PU.js";
+import {
+  ChartPieIcon
+} from "./chunk-YFLQ4HPJ.js";
+import {
+  SettingsIcon
+} from "./chunk-NY7M42KC.js";
+import {
+  UserIcon
+} from "./chunk-BHUNLG6S.js";
+import {
+  PlusIcon
+} from "./chunk-HK34LPY6.js";
+import {
+  HistoryIcon
+} from "./chunk-BPE43MTT.js";
+import {
+  SearchIcon
+} from "./chunk-WOR2GMMN.js";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/tab-bar/tab-bar.tsx
+import * as React from "react";
+import {
+  AnimatePresence,
+  LayoutGroup,
+  motion,
+  useInView,
+  useReducedMotion
+} from "motion/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ICONS = {
+  home: HomeIcon,
+  search: SearchIcon,
+  analytics: ChartPieIcon,
+  history: HistoryIcon,
+  profile: UserIcon,
+  bell: BellIcon,
+  chat: MessageCircleIcon,
+  explore: CompassIcon,
+  settings: SettingsIcon
+};
+var DEFAULT_TABS = [
+  { id: "home", label: "Home", icon: "home" },
+  { id: "search", label: "Search", icon: "search" },
+  { id: "analytics", label: "Analytics", icon: "analytics" },
+  { id: "history", label: "History", icon: "history", badge: 3 },
+  { id: "profile", label: "Profile", icon: "profile" }
+];
+var GLIDE = [0.22, 1, 0.36, 1];
+var SPRING = { type: "spring", stiffness: 500, damping: 34 };
+var POP = { type: "spring", stiffness: 600, damping: 26 };
+var TabBar = React.forwardRef(
+  function TabBar2({
+    tabs = DEFAULT_TABS,
+    variant = "pill",
+    value,
+    defaultValue,
+    onChange,
+    actionLabel = "Create",
+    onAction,
+    className
+  }, ref) {
+    const still = !!useReducedMotion();
+    const uid = React.useId();
+    const root = React.useRef(null);
+    React.useImperativeHandle(ref, () => root.current);
+    const seen = useInView(root, { once: true, amount: 0.4 });
+    const shown = seen || still;
+    const list = variant === "action" ? tabs.slice(0, 4) : tabs.slice(0, 5);
+    const [own, setOwn] = React.useState(defaultValue ?? list[0]?.id ?? "");
+    const current = value ?? own;
+    const [playing, setPlaying] = React.useState(null);
+    const [taps, setTaps] = React.useState({});
+    const [spins, setSpins] = React.useState(0);
+    const timer = React.useRef(0);
+    React.useEffect(() => () => window.clearTimeout(timer.current), []);
+    const choose = (id) => {
+      setTaps((t) => ({ ...t, [id]: (t[id] ?? 0) + 1 }));
+      setPlaying(id);
+      window.clearTimeout(timer.current);
+      timer.current = window.setTimeout(() => setPlaying(null), 900);
+      if (id === current) return;
+      if (value === void 0) setOwn(id);
+      onChange?.(id);
+    };
+    const onKeyDown = (e) => {
+      if (e.key !== "ArrowRight" && e.key !== "ArrowLeft") return;
+      const buttons = Array.from(
+        root.current?.querySelectorAll("[data-tab]") ?? []
+      );
+      const at = buttons.indexOf(document.activeElement);
+      if (at < 0) return;
+      e.preventDefault();
+      const next = buttons[(at + (e.key === "ArrowRight" ? 1 : buttons.length - 1)) % buttons.length];
+      next?.focus();
+    };
+    const tab = (t, i) => {
+      const on = t.id === current;
+      const Icon = ICONS[t.icon];
+      const ripple = taps[t.id] ?? 0;
+      const pill = variant === "pill";
+      return /* @__PURE__ */ jsxs(
+        motion.button,
+        {
+          type: "button",
+          "data-tab": "",
+          layout: pill && !still ? "position" : false,
+          "aria-label": t.badge ? `${t.label}, ${t.badge} new` : t.label,
+          "aria-current": on ? "page" : void 0,
+          onClick: () => choose(t.id),
+          initial: still ? false : { opacity: 0, y: 12 },
+          animate: shown ? { opacity: 1, y: 0 } : void 0,
+          whileTap: still ? void 0 : { scale: 0.88 },
+          transition: {
+            ...SPRING,
+            opacity: { duration: 0.4, delay: still ? 0 : 0.15 + i * 0.05 },
+            y: { ...SPRING, delay: still ? 0 : 0.15 + i * 0.05 }
+          },
+          className: cn(
+            "group relative flex cursor-pointer select-none items-center justify-center outline-none focus-visible:ring-2 focus-visible:ring-[#242423]/30",
+            pill ? "h-12 rounded-full" : "h-14 flex-1 flex-col gap-1 rounded-2xl",
+            pill && (on ? "gap-2 pl-4 pr-5" : "w-12")
+          ),
+          children: [
+            pill && on && /* @__PURE__ */ jsx(
+              motion.span,
+              {
+                layoutId: `${uid}-pill`,
+                transition: still ? { duration: 0 } : SPRING,
+                className: "absolute inset-0 rounded-full bg-[#242423]/[0.07]"
+              }
+            ),
+            !on && /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": true,
+                className: cn(
+                  "absolute rounded-full bg-[#242423]/[0.05] opacity-0 transition-opacity duration-200 group-hover:opacity-100",
+                  pill ? "inset-0" : "left-1/2 top-1 size-10 -translate-x-1/2"
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxs("span", { className: "relative grid place-items-center", children: [
+              variant !== "pill" && on && /* @__PURE__ */ jsx(
+                motion.span,
+                {
+                  layoutId: `${uid}-disc`,
+                  transition: still ? { duration: 0 } : SPRING,
+                  className: "absolute size-10 rounded-full bg-[#242423]/[0.07]"
+                }
+              ),
+              /* @__PURE__ */ jsx(AnimatePresence, { children: !still && ripple > 0 && /* @__PURE__ */ jsx(
+                motion.span,
+                {
+                  "aria-hidden": true,
+                  initial: { scale: 0.4, opacity: 0.45 },
+                  animate: { scale: 2.2, opacity: 0 },
+                  exit: { opacity: 0 },
+                  transition: { duration: 0.6, ease: GLIDE },
+                  className: cn(
+                    "absolute size-8 rounded-full",
+                    "bg-[#242423]/15"
+                  )
+                },
+                ripple
+              ) }),
+              /* @__PURE__ */ jsx(
+                motion.span,
+                {
+                  className: cn(
+                    "relative grid transition-colors duration-300",
+                    on ? "text-[#242423]" : "text-[#a3a3a0] group-hover:text-[#5c5c59]"
+                  ),
+                  animate: { y: !pill && on && !still ? -1 : 0 },
+                  transition: SPRING,
+                  children: /* @__PURE__ */ jsx(
+                    motion.span,
+                    {
+                      className: "grid",
+                      initial: ripple > 0 && !still ? { scale: 0.7, rotate: -14 } : false,
+                      animate: { scale: 1, rotate: 0 },
+                      transition: { type: "spring", stiffness: 520, damping: 11 },
+                      children: /* @__PURE__ */ jsx(
+                        Icon,
+                        {
+                          className: "size-[22px]",
+                          strokeWidth: on ? 2.25 : 2,
+                          active: playing === t.id
+                        }
+                      )
+                    },
+                    ripple
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(AnimatePresence, { children: !!t.badge && /* @__PURE__ */ jsx(
+                motion.span,
+                {
+                  initial: still ? { opacity: 0 } : { scale: 0, opacity: 0 },
+                  animate: { scale: 1, opacity: 1 },
+                  exit: still ? { opacity: 0 } : { scale: 0, opacity: 0 },
+                  transition: POP,
+                  className: "absolute -right-2 -top-1.5 grid h-4 min-w-4 place-items-center rounded-full bg-[#d64545] px-1 text-[12px] font-semibold leading-none text-white ring-2 ring-white",
+                  children: t.badge
+                },
+                "badge"
+              ) })
+            ] }),
+            pill ? /* @__PURE__ */ jsx(AnimatePresence, { initial: false, mode: "popLayout", children: on && /* @__PURE__ */ jsx(
+              motion.span,
+              {
+                initial: still ? { opacity: 0 } : { opacity: 0, x: -6, filter: "blur(3px)" },
+                animate: { opacity: 1, x: 0, filter: "blur(0px)" },
+                exit: { opacity: 0, transition: { duration: 0.1 } },
+                transition: {
+                  duration: 0.3,
+                  ease: GLIDE,
+                  delay: still ? 0 : 0.06
+                },
+                className: "relative whitespace-nowrap text-[14px] font-medium text-[#242423]",
+                children: t.label
+              },
+              "label"
+            ) }) : /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "relative text-[12px] leading-4 transition-colors duration-300",
+                  on ? "font-semibold text-[#242423]" : "font-medium text-[#242423]/45"
+                ),
+                children: t.label
+              }
+            ),
+            variant === "labels" && on && /* @__PURE__ */ jsx(
+              motion.span,
+              {
+                layoutId: `${uid}-dot`,
+                transition: still ? { duration: 0 } : SPRING,
+                className: "absolute -bottom-1 size-1 rounded-full bg-[#242423]"
+              }
+            )
+          ]
+        },
+        t.id
+      );
+    };
+    const half = Math.ceil(list.length / 2);
+    return /* @__PURE__ */ jsx(
+      motion.nav,
+      {
+        ref: root,
+        "aria-label": "Main",
+        onKeyDown,
+        initial: still ? false : { opacity: 0, y: 24, filter: "blur(6px)" },
+        animate: shown ? { opacity: 1, y: 0, filter: "blur(0px)" } : void 0,
+        transition: { duration: 0.6, ease: GLIDE },
+        className: cn(
+          "relative w-[380px] max-w-full rounded-full bg-white p-2 text-[#242423] shadow-[0_1px_2px_rgba(0,0,0,0.04),0_12px_32px_-16px_rgba(0,0,0,0.18)]",
+          className
+        ),
+        children: /* @__PURE__ */ jsx(LayoutGroup, { id: uid, children: variant === "action" ? /* @__PURE__ */ jsxs("div", { className: "relative flex items-center", children: [
+          list.slice(0, half).map(tab),
+          /* @__PURE__ */ jsx("div", { className: "relative grid w-16 shrink-0 place-items-center", children: /* @__PURE__ */ jsxs(
+            motion.button,
+            {
+              type: "button",
+              "aria-label": actionLabel,
+              onClick: () => {
+                setSpins((s) => s + 1);
+                onAction?.();
+              },
+              initial: still ? false : { scale: 0.5, opacity: 0 },
+              animate: shown ? { scale: 1, opacity: 1, rotate: still ? 0 : spins * 90 } : void 0,
+              whileHover: still ? void 0 : { y: -3 },
+              whileTap: still ? void 0 : { scale: 0.88 },
+              transition: {
+                type: "spring",
+                stiffness: 420,
+                damping: 18,
+                opacity: { duration: 0.3, delay: still ? 0 : 0.3 }
+              },
+              className: "relative -mt-10 grid size-14 cursor-pointer place-items-center rounded-full bg-[#f1f1ef] text-[#242423] shadow-[0_10px_22px_-12px_rgba(36,36,35,0.45)] outline-none ring-4 ring-white transition-colors hover:bg-[#e9e9e6] focus-visible:ring-[#242423]/30",
+              children: [
+                /* @__PURE__ */ jsx(AnimatePresence, { children: !still && spins > 0 && /* @__PURE__ */ jsx(
+                  motion.span,
+                  {
+                    "aria-hidden": true,
+                    initial: { scale: 1, opacity: 0.4 },
+                    animate: { scale: 1.8, opacity: 0 },
+                    exit: { opacity: 0 },
+                    transition: { duration: 0.7, ease: GLIDE },
+                    className: "absolute inset-0 rounded-full bg-[#242423]/20"
+                  },
+                  spins
+                ) }),
+                /* @__PURE__ */ jsx(PlusIcon, { className: "relative size-6", strokeWidth: 2.5 })
+              ]
+            }
+          ) }),
+          list.slice(half).map((t, i) => tab(t, i + half))
+        ] }) : /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "flex items-center",
+              variant === "pill" ? "justify-between px-1" : ""
+            ),
+            children: list.map(tab)
+          }
+        ) })
+      }
+    );
+  }
+);
+
+export {
+  TabBar
+};