motion-brew 0.0.0-stage → 0.1.1

package/dist/chunk-O7QYPA6X.js

@@ -0,0 +1,700 @@
+"use client";
+import {
+  UserCheckIcon
+} from "./chunk-JT2EIO5M.js";
+import {
+  ChartLineIcon
+} from "./chunk-XDR4FO6Q.js";
+import {
+  BellIcon
+} from "./chunk-7PS2W7PU.js";
+import {
+  MonitorCheckIcon
+} from "./chunk-NNKC6NEH.js";
+import {
+  SmartphoneNfcIcon
+} from "./chunk-OS6REIBR.js";
+import {
+  ShieldCheckIcon
+} from "./chunk-WE7VCUOA.js";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/liquid-tabs/liquid-tabs.tsx
+import * as React from "react";
+import {
+  AnimatePresence,
+  animate,
+  motion,
+  useInView,
+  useMotionValue,
+  useReducedMotion,
+  useTransform
+} from "motion/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var GLIDE = [0.22, 1, 0.36, 1];
+var ROW = 64;
+var TOP = 4;
+var PAD = 6;
+var PANEL_R = 18;
+var NECK = 18;
+var CAP = 40;
+function edge(lIn, rIn, w, base) {
+  const l = Math.max(0, lIn);
+  const r = Math.min(w, rIn);
+  const width = r - l;
+  const pull = Math.max(0, width - base);
+  const top = TOP + Math.min(10, pull * 0.07);
+  const neck = Math.min(NECK + pull * 0.05, 26);
+  const cap = Math.min(CAP, width / 2, ROW - top - neck);
+  const side = (room) => {
+    const k = Math.max(0, Math.min(1, room / (PANEL_R + neck)));
+    return { corner: PANEL_R * k, neck: neck * k };
+  };
+  const a = side(l);
+  const b = side(w - r);
+  const H = ROW;
+  return [
+    `M0 ${H + PANEL_R}`,
+    `L0 ${H + a.corner}`,
+    `A${a.corner} ${a.corner} 0 0 1 ${a.corner} ${H}`,
+    `L${l - a.neck} ${H}`,
+    `A${a.neck} ${a.neck} 0 0 0 ${l} ${H - a.neck}`,
+    `L${l} ${top + cap}`,
+    `A${cap} ${cap} 0 0 1 ${l + cap} ${top}`,
+    `L${r - cap} ${top}`,
+    `A${cap} ${cap} 0 0 1 ${r} ${top + cap}`,
+    `L${r} ${H - b.neck}`,
+    `A${b.neck} ${b.neck} 0 0 0 ${r + b.neck} ${H}`,
+    `L${w - b.corner} ${H}`,
+    `A${b.corner} ${b.corner} 0 0 1 ${w} ${H + b.corner}`,
+    `L${w} ${H + PANEL_R + 1}`,
+    `L0 ${H + PANEL_R + 1}`,
+    "Z"
+  ].join(" ");
+}
+function Bump({
+  l,
+  r,
+  w,
+  base
+}) {
+  const d = useTransform(
+    [l, r],
+    ([a, b]) => edge(a, b, w, base)
+  );
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      "aria-hidden": true,
+      className: "pointer-events-none absolute left-0 top-0 overflow-visible",
+      width: w,
+      height: ROW + PANEL_R + 1,
+      children: /* @__PURE__ */ jsx(motion.path, { d, fill: "#fff" })
+    }
+  );
+}
+var STATUSES = [
+  { id: "available", label: "Available", dot: "#269a5a" },
+  { id: "focusing", label: "Focusing", dot: "#e8a317" },
+  { id: "away", label: "Away", dot: "#a1a1aa" }
+];
+function ProfileDemo() {
+  const still = !!useReducedMotion();
+  const uid = React.useId();
+  const [status, setStatus] = React.useState("available");
+  const [hover, setHover] = React.useState(false);
+  const dot = STATUSES.find((s) => s.id === status).dot;
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 px-1", children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Change photo",
+          onPointerEnter: () => setHover(true),
+          onPointerLeave: () => setHover(false),
+          onFocus: () => setHover(true),
+          onBlur: () => setHover(false),
+          className: "relative size-16 shrink-0 cursor-pointer rounded-full outline-none focus-visible:ring-2 focus-visible:ring-zinc-400 focus-visible:ring-offset-2",
+          children: [
+            /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=128&h=128&fit=crop&crop=faces",
+                alt: "",
+                draggable: false,
+                className: "size-16 rounded-full object-cover"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              motion.span,
+              {
+                "aria-hidden": true,
+                className: "absolute inset-0 grid place-items-center rounded-full bg-[#242423]/45 text-xs font-medium text-white",
+                animate: { opacity: hover ? 1 : 0 },
+                transition: { duration: 0.2 },
+                children: "Edit"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              motion.span,
+              {
+                className: "absolute bottom-0.5 right-0.5 size-4 rounded-full ring-[3px] ring-white",
+                animate: { backgroundColor: dot },
+                transition: { duration: 0.3 }
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0 leading-tight", children: [
+        /* @__PURE__ */ jsx("p", { className: "truncate text-lg font-semibold tracking-tight", children: "Jordan Lee" }),
+        /* @__PURE__ */ jsx("p", { className: "mt-0.5 truncate text-sm text-zinc-500", children: "jordan@lumen.app" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("p", { className: "mt-5 px-1 text-xs font-medium text-zinc-400", children: "Status" }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "radiogroup",
+        "aria-label": "Status",
+        className: "mt-2 flex rounded-full bg-[#242423]/[0.05] p-1",
+        children: STATUSES.map((s) => {
+          const on = s.id === status;
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              role: "radio",
+              "aria-checked": on,
+              onClick: () => setStatus(s.id),
+              className: cn(
+                "relative flex h-9 flex-1 cursor-pointer items-center justify-center gap-2 rounded-full text-sm font-medium outline-none transition-colors focus-visible:ring-2 focus-visible:ring-zinc-400",
+                on ? "text-[#242423]" : "text-zinc-500 hover:text-[#242423]"
+              ),
+              children: [
+                on && /* @__PURE__ */ jsx(
+                  motion.span,
+                  {
+                    layoutId: `${uid}-status`,
+                    className: "absolute inset-0 rounded-full bg-white shadow-[0_1px_2px_rgba(0,0,0,0.08)]",
+                    transition: still ? { duration: 0 } : { type: "spring", stiffness: 500, damping: 38 }
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "relative size-2 rounded-full",
+                    style: { background: s.dot }
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "relative", children: s.label })
+              ]
+            },
+            s.id
+          );
+        })
+      }
+    )
+  ] });
+}
+var SESSIONS = [
+  {
+    id: "mac",
+    icon: MonitorCheckIcon,
+    title: "MacBook Pro",
+    place: "Lisbon",
+    time: "Active now",
+    current: true
+  },
+  {
+    id: "phone",
+    icon: SmartphoneNfcIcon,
+    title: "iPhone 15",
+    place: "Lisbon",
+    time: "2h ago"
+  },
+  {
+    id: "ipad",
+    icon: MonitorCheckIcon,
+    title: "Chrome on Windows",
+    place: "Porto",
+    time: "3 days ago"
+  }
+];
+function SecurityDemo() {
+  const still = !!useReducedMotion();
+  const uid = React.useId();
+  const [signedOut, setSignedOut] = React.useState(/* @__PURE__ */ new Set());
+  const [hover, setHover] = React.useState(null);
+  const others = SESSIONS.filter(
+    (x) => !x.current && !signedOut.has(x.id)
+  ).length;
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-1 pb-2", children: [
+      /* @__PURE__ */ jsxs("p", { className: "flex items-center gap-2 text-sm font-medium", children: [
+        /* @__PURE__ */ jsx(ShieldCheckIcon, { className: "size-4 text-[#269a5a]", active: true }),
+        "Two step sign in is on"
+      ] }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          disabled: !others,
+          onClick: () => setSignedOut(
+            new Set(SESSIONS.filter((x) => !x.current).map((x) => x.id))
+          ),
+          className: "cursor-pointer rounded-full px-2 py-1 text-xs font-medium text-zinc-500 outline-none transition-colors hover:text-[#242423] disabled:cursor-default disabled:opacity-40 focus-visible:ring-2 focus-visible:ring-zinc-400",
+          children: "Sign out others"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("ul", { onPointerLeave: () => setHover(null), children: /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: SESSIONS.filter((x) => !signedOut.has(x.id)).map((x, i) => {
+      const Icon = x.icon;
+      return /* @__PURE__ */ jsx(
+        motion.li,
+        {
+          layout: true,
+          initial: still ? false : { opacity: 0, x: 12 },
+          animate: { opacity: 1, x: 0 },
+          exit: {
+            opacity: 0,
+            x: -16,
+            filter: "blur(4px)",
+            transition: { duration: 0.25 }
+          },
+          transition: {
+            duration: 0.35,
+            ease: GLIDE,
+            delay: still ? 0 : 0.05 + i * 0.06
+          },
+          children: /* @__PURE__ */ jsxs(
+            "div",
+            {
+              onPointerEnter: () => setHover(x.id),
+              className: "relative flex w-full items-center gap-3 rounded-xl px-2 py-2",
+              children: [
+                hover === x.id && /* @__PURE__ */ jsx(
+                  motion.span,
+                  {
+                    layoutId: `${uid}-session`,
+                    className: "absolute inset-0 rounded-xl bg-[#242423]/[0.04]",
+                    transition: {
+                      type: "spring",
+                      stiffness: 500,
+                      damping: 40
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "relative grid size-8 shrink-0 place-items-center rounded-lg bg-[#242423]/[0.05] text-zinc-600", children: /* @__PURE__ */ jsx(Icon, { className: "size-4", active: hover === x.id }) }),
+                /* @__PURE__ */ jsxs("span", { className: "relative min-w-0 flex-1 leading-tight", children: [
+                  /* @__PURE__ */ jsx("span", { className: "block truncate text-sm font-medium", children: x.title }),
+                  /* @__PURE__ */ jsxs("span", { className: "block truncate text-xs text-zinc-400", children: [
+                    x.place,
+                    ", ",
+                    x.time
+                  ] })
+                ] }),
+                x.current ? /* @__PURE__ */ jsx("span", { className: "relative rounded-full bg-[#269a5a]/10 px-2 py-0.5 text-xs font-medium text-[#269a5a]", children: "This device" }) : /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => setSignedOut((r) => new Set(r).add(x.id)),
+                    className: "relative cursor-pointer rounded-full px-2 py-1 text-xs font-medium text-zinc-500 outline-none transition-colors hover:bg-[#242423]/[0.06] hover:text-[#d64545] focus-visible:ring-2 focus-visible:ring-zinc-400",
+                    children: "Sign out"
+                  }
+                )
+              ]
+            }
+          )
+        },
+        x.id
+      );
+    }) }) })
+  ] });
+}
+var BARS = [32, 48, 41, 66, 58, 82, 74];
+var DAYS = ["M", "T", "W", "T", "F", "S", "S"];
+function UsageDemo() {
+  const still = !!useReducedMotion();
+  const count = useMotionValue(still ? 1284 : 0);
+  const text = useTransform(
+    count,
+    (v) => Math.round(v).toLocaleString("en-US")
+  );
+  const [hover, setHover] = React.useState(null);
+  React.useEffect(() => {
+    if (still) return;
+    const run = animate(count, 1284, { duration: 1.1, ease: GLIDE });
+    return () => run.stop();
+  }, [count, still]);
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("p", { className: "px-1 text-sm text-zinc-500", children: "Credits used this month" }),
+    /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-baseline gap-2 px-1", children: [
+      /* @__PURE__ */ jsx(motion.span, { className: "text-[32px] font-semibold leading-none tracking-tight tabular-nums", children: text }),
+      /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-zinc-400", children: "of 2,000 on Pro" })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "mt-5 flex h-24 items-end gap-2",
+        onPointerLeave: () => setHover(null),
+        children: BARS.map((v, i) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "flex flex-1 flex-col items-center gap-1.5",
+            onPointerEnter: () => setHover(i),
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "relative flex h-20 w-full items-end", children: [
+                /* @__PURE__ */ jsx(AnimatePresence, { children: hover === i && /* @__PURE__ */ jsx(
+                  motion.span,
+                  {
+                    initial: { opacity: 0, y: 4 },
+                    animate: { opacity: 1, y: 0 },
+                    exit: { opacity: 0, y: 2 },
+                    className: "absolute -top-6 left-1/2 -translate-x-1/2 rounded-md bg-[#242423] px-1.5 py-0.5 text-xs font-medium tabular-nums text-white",
+                    children: v * 3
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(
+                  motion.span,
+                  {
+                    className: cn(
+                      "w-full origin-bottom rounded-lg transition-colors",
+                      hover === i ? "bg-[#4f46e5]" : i === BARS.length - 2 ? "bg-[#4f46e5]/80" : "bg-[#4f46e5]/25"
+                    ),
+                    style: { height: `${v}%` },
+                    initial: still ? false : { scaleY: 0 },
+                    animate: { scaleY: 1 },
+                    transition: {
+                      type: "spring",
+                      stiffness: 240,
+                      damping: 22,
+                      delay: still ? 0 : 0.1 + i * 0.05
+                    }
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx("span", { className: "text-xs text-zinc-400", children: DAYS[i] })
+            ]
+          },
+          i
+        ))
+      }
+    )
+  ] });
+}
+function Switch({
+  label,
+  detail,
+  defaultOn
+}) {
+  const [on, setOn] = React.useState(!!defaultOn);
+  const id = React.useId();
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 px-1 py-2.5", children: [
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 leading-tight", children: [
+      /* @__PURE__ */ jsx("p", { id, className: "text-sm font-medium", children: label }),
+      /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-xs text-zinc-500", children: detail })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        role: "switch",
+        "aria-checked": on,
+        "aria-labelledby": id,
+        onClick: () => setOn((v) => !v),
+        className: cn(
+          "relative h-6 w-10 shrink-0 cursor-pointer rounded-full outline-none transition-colors duration-300 focus-visible:ring-2 focus-visible:ring-zinc-400 focus-visible:ring-offset-2",
+          on ? "bg-[#269a5a]" : "bg-[#242423]/15"
+        ),
+        children: /* @__PURE__ */ jsx(
+          motion.span,
+          {
+            className: "absolute left-0.5 top-0.5 size-5 rounded-full bg-white shadow-[0_1px_3px_rgba(0,0,0,0.2)]",
+            animate: { x: on ? 16 : 0 },
+            whileTap: { scaleX: 1.2 },
+            transition: { type: "spring", stiffness: 600, damping: 30 }
+          }
+        )
+      }
+    )
+  ] });
+}
+function NotificationsDemo() {
+  return /* @__PURE__ */ jsxs("div", { className: "divide-y divide-[#242423]/[0.06]", children: [
+    /* @__PURE__ */ jsx(
+      Switch,
+      {
+        label: "Mentions and replies",
+        detail: "When someone tags you or answers you",
+        defaultOn: true
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Switch,
+      {
+        label: "Weekly summary",
+        detail: "A short email every Monday morning",
+        defaultOn: true
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Switch,
+      {
+        label: "Product news",
+        detail: "New features, at most once a month"
+      }
+    )
+  ] });
+}
+var DEFAULT_TABS = [
+  {
+    id: "profile",
+    label: "Profile",
+    icon: UserCheckIcon,
+    content: /* @__PURE__ */ jsx(ProfileDemo, {})
+  },
+  {
+    id: "notifications",
+    label: "Notifications",
+    icon: BellIcon,
+    content: /* @__PURE__ */ jsx(NotificationsDemo, {})
+  },
+  {
+    id: "security",
+    label: "Security",
+    icon: ShieldCheckIcon,
+    content: /* @__PURE__ */ jsx(SecurityDemo, {})
+  },
+  { id: "usage", label: "Usage", icon: ChartLineIcon, content: /* @__PURE__ */ jsx(UsageDemo, {}) }
+];
+var LiquidTabs = React.forwardRef(
+  function LiquidTabs2({
+    tabs = DEFAULT_TABS,
+    defaultValue,
+    value: valueProp,
+    onValueChange,
+    stretch = 0.6,
+    className
+  }, ref) {
+    const still = !!useReducedMotion();
+    const id = React.useId();
+    const root = React.useRef(null);
+    React.useImperativeHandle(ref, () => root.current);
+    const frame = React.useRef(null);
+    const buttons = React.useRef([]);
+    const seen = useInView(root, { once: true, amount: 0.3 });
+    const [own, setOwn] = React.useState(defaultValue ?? tabs[0]?.id ?? "");
+    const value = valueProp ?? own;
+    const index = Math.max(
+      0,
+      tabs.findIndex((t) => t.id === value)
+    );
+    const [dir, setDir] = React.useState(1);
+    const choose = (next) => {
+      const t = tabs[(next + tabs.length) % tabs.length];
+      if (!t || t.id === value) return;
+      setDir(next > index ? 1 : -1);
+      setOwn(t.id);
+      onValueChange?.(t.id);
+    };
+    const l = useMotionValue(0);
+    const r = useMotionValue(0);
+    const [width, setWidth] = React.useState(0);
+    const [base, setBase] = React.useState(60);
+    const placed = React.useRef(false);
+    const measure = React.useCallback(() => {
+      const box = frame.current;
+      const b = buttons.current[index];
+      if (!box || !b) return null;
+      setWidth(box.offsetWidth);
+      setBase(b.offsetWidth + PAD * 2);
+      const row = b.offsetParent;
+      const left = b.offsetLeft + (row && row !== box ? row.offsetLeft : 0);
+      return { l: left - PAD, r: left + b.offsetWidth + PAD };
+    }, [index]);
+    React.useLayoutEffect(() => {
+      const to = measure();
+      if (!to) return;
+      if (!placed.current || still) {
+        l.set(to.l);
+        r.set(to.r);
+        placed.current = true;
+        return;
+      }
+      const forward = to.l > l.get();
+      const lead = { type: "spring", stiffness: 520, damping: 24 };
+      const s = Math.min(1, Math.max(0, stretch));
+      const trail = {
+        type: "spring",
+        stiffness: 520 - 330 * s,
+        damping: 30 - 10 * s,
+        delay: 0.03 + 0.17 * s
+      };
+      const a = animate(l, to.l, forward ? trail : lead);
+      const b = animate(r, to.r, forward ? lead : trail);
+      return () => {
+        a.stop();
+        b.stop();
+      };
+    }, [index, measure, still, stretch, l, r]);
+    React.useEffect(() => {
+      const el = frame.current;
+      if (!el || typeof ResizeObserver === "undefined") return;
+      const ro = new ResizeObserver(() => {
+        const to = measure();
+        if (to) {
+          l.set(to.l);
+          r.set(to.r);
+        }
+      });
+      ro.observe(el);
+      return () => ro.disconnect();
+    }, [measure, l, r]);
+    const inner = React.useRef(null);
+    const [height, setHeight] = React.useState("auto");
+    React.useEffect(() => {
+      const el = inner.current;
+      if (!el || typeof ResizeObserver === "undefined") return;
+      const ro = new ResizeObserver(() => setHeight(el.offsetHeight));
+      ro.observe(el);
+      return () => ro.disconnect();
+    }, []);
+    const onKey = (e) => {
+      const keys = {
+        ArrowRight: index + 1,
+        ArrowLeft: index - 1,
+        Home: 0,
+        End: tabs.length - 1
+      };
+      if (!(e.key in keys)) return;
+      e.preventDefault();
+      const next = (keys[e.key] + tabs.length) % tabs.length;
+      choose(next);
+      buttons.current[next]?.focus();
+    };
+    const current = tabs[index];
+    return /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        ref: root,
+        initial: still ? false : { opacity: 0, y: 16 },
+        animate: seen || still ? { opacity: 1, y: 0 } : void 0,
+        transition: { duration: 0.55, ease: GLIDE },
+        className: cn(
+          "w-[380px] max-w-full rounded-[32px] bg-[#f1f1ef] p-2 text-[#242423]",
+          className
+        ),
+        children: /* @__PURE__ */ jsxs("div", { ref: frame, className: "relative", children: [
+          width > 0 && /* @__PURE__ */ jsx(Bump, { l, r, w: width, base }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              role: "tablist",
+              "aria-label": "Sections",
+              onKeyDown: onKey,
+              className: "relative mx-auto flex h-16 items-center justify-between",
+              style: { maxWidth: tabs.length * 44 + (tabs.length - 1) * 24 },
+              children: tabs.map((t, i) => {
+                const Icon = t.icon;
+                const on = i === index;
+                return /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    ref: (el) => {
+                      buttons.current[i] = el;
+                    },
+                    type: "button",
+                    role: "tab",
+                    id: `${id}-tab-${t.id}`,
+                    "aria-selected": on,
+                    "aria-controls": `${id}-panel`,
+                    "aria-label": t.label,
+                    title: t.label,
+                    tabIndex: on ? 0 : -1,
+                    onClick: () => choose(i),
+                    className: cn(
+                      "group/tab relative grid size-11 shrink-0 cursor-pointer place-items-center rounded-full outline-none transition-colors duration-300 focus-visible:ring-2 focus-visible:ring-zinc-400",
+                      on ? "text-[#242423]" : "text-zinc-500 hover:text-[#242423]"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        motion.span,
+                        {
+                          "aria-hidden": true,
+                          className: "absolute inset-0 rounded-full bg-white/55 transition-colors duration-200 group-hover/tab:bg-white/85",
+                          animate: { opacity: on ? 0 : 1, scale: on ? 0.6 : 1 },
+                          transition: { duration: 0.3, ease: GLIDE }
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        motion.span,
+                        {
+                          className: "relative grid",
+                          animate: { scale: on ? 1.08 : 1, y: on ? -1 : 0 },
+                          transition: {
+                            type: "spring",
+                            stiffness: 500,
+                            damping: 22,
+                            delay: on && !still ? 0.08 : 0
+                          },
+                          children: /* @__PURE__ */ jsx(Icon, { className: "size-5", active: on })
+                        }
+                      )
+                    ]
+                  },
+                  t.id
+                );
+              })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              id: `${id}-panel`,
+              role: "tabpanel",
+              "aria-labelledby": current ? `${id}-tab-${current.id}` : void 0,
+              className: "relative overflow-hidden rounded-b-[24px] bg-white",
+              style: { marginTop: PANEL_R },
+              initial: false,
+              animate: { height },
+              transition: still ? { duration: 0 } : { duration: 0.4, ease: GLIDE },
+              children: /* @__PURE__ */ jsx("div", { ref: inner, className: "px-4 pb-5 pt-0", children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", initial: false, custom: dir, children: /* @__PURE__ */ jsx(
+                motion.div,
+                {
+                  custom: dir,
+                  variants: {
+                    in: (d) => ({
+                      opacity: 0,
+                      x: d * 28,
+                      filter: "blur(6px)"
+                    }),
+                    shown: { opacity: 1, x: 0, filter: "blur(0px)" },
+                    out: (d) => ({
+                      opacity: 0,
+                      x: d * -28,
+                      filter: "blur(6px)"
+                    })
+                  },
+                  initial: still ? false : "in",
+                  animate: "shown",
+                  exit: still ? void 0 : "out",
+                  transition: { duration: 0.38, ease: GLIDE },
+                  children: current?.content
+                },
+                current?.id
+              ) }) })
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+
+export {
+  LiquidTabs
+};