motion-brew 0.0.0-stage → 0.1.0

package/dist/chunk-FXI6NHNR.js

@@ -0,0 +1,1033 @@
+"use client";
+import {
+  ChevronDownIcon
+} from "./chunk-NIQFSLPC.js";
+import {
+  RotateCCWIcon
+} from "./chunk-YURGXJSP.js";
+import {
+  CheckIcon
+} from "./chunk-JHT6RCGY.js";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/booking-card/booking-card.tsx
+import * as React from "react";
+import {
+  AnimatePresence,
+  LayoutGroup,
+  motion,
+  useReducedMotion
+} from "motion/react";
+import gsap from "gsap";
+import { useGSAP } from "@gsap/react";
+import { ArrowRight, CalendarPlus } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+gsap.registerPlugin(useGSAP);
+var PILL = { type: "spring", stiffness: 420, damping: 34 };
+var GLIDE = [0.22, 1, 0.36, 1];
+var DEFAULT_TIMES = ["09:00", "10:30", "13:00", "15:30", "18:00"];
+var SUCCESS = "#269a5a";
+var sameDay = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+var fmt = (d, opts) => d.toLocaleDateString("en-US", opts);
+function defaultTaken(date, times) {
+  const seed = date.getDate() * 7 + date.getMonth() * 3;
+  return times.filter(
+    (_, i) => (seed + i * 5) % 7 === 0 || (seed + i) % 5 === 0
+  );
+}
+function Rolling({ text, still }) {
+  return /* @__PURE__ */ jsx("span", { className: "relative inline-grid overflow-hidden", children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", initial: false, children: /* @__PURE__ */ jsx(
+    motion.span,
+    {
+      className: "whitespace-nowrap",
+      initial: still ? { opacity: 0 } : { opacity: 0, y: "70%", filter: "blur(4px)" },
+      animate: { opacity: 1, y: 0, filter: "blur(0px)" },
+      exit: still ? { opacity: 0 } : { opacity: 0, y: "-70%", filter: "blur(4px)" },
+      transition: { duration: 0.32, ease: GLIDE },
+      children: text
+    },
+    text
+  ) }) });
+}
+function roving(e, list, current, enabled, pick) {
+  const step = e.key === "ArrowRight" || e.key === "ArrowDown" ? 1 : e.key === "ArrowLeft" || e.key === "ArrowUp" ? -1 : 0;
+  if (!step) return;
+  e.preventDefault();
+  for (let i = current + step; i >= 0 && i < list.length; i += step)
+    if (enabled(list[i])) return pick(i);
+}
+function MonthMenu({
+  months,
+  current,
+  onPick,
+  still
+}) {
+  const [open, setOpen] = React.useState(false);
+  const [hover, setHover] = React.useState(current);
+  const root = React.useRef(null);
+  const button = React.useRef(null);
+  const options = React.useRef([]);
+  const id = React.useId();
+  React.useEffect(() => {
+    if (!open) return;
+    setHover(current);
+    requestAnimationFrame(() => options.current[current]?.focus());
+    const away = (e) => {
+      if (!root.current?.contains(e.target)) setOpen(false);
+    };
+    document.addEventListener("pointerdown", away);
+    return () => document.removeEventListener("pointerdown", away);
+  }, [open, current]);
+  const choose = (i, keyboard) => {
+    onPick(i);
+    setOpen(false);
+    if (keyboard) button.current?.focus();
+  };
+  const onKey = (e) => {
+    if (e.key === "Escape") {
+      e.preventDefault();
+      setOpen(false);
+      button.current?.focus();
+      return;
+    }
+    const step = e.key === "ArrowDown" ? 1 : e.key === "ArrowUp" ? -1 : 0;
+    if (!step) return;
+    e.preventDefault();
+    const next = Math.max(0, Math.min(months.length - 1, hover + step));
+    setHover(next);
+    options.current[next]?.focus();
+  };
+  return /* @__PURE__ */ jsxs("div", { ref: root, className: "relative shrink-0", onKeyDown: onKey, children: [
+    /* @__PURE__ */ jsxs(
+      motion.button,
+      {
+        ref: button,
+        type: "button",
+        "aria-haspopup": "listbox",
+        "aria-expanded": open,
+        "aria-controls": `${id}-list`,
+        "aria-label": `Month, ${months[current]?.label}`,
+        onClick: () => setOpen((o) => !o),
+        whileTap: still ? void 0 : { scale: 0.96 },
+        className: "flex h-8 cursor-pointer items-center gap-1 rounded-full bg-zinc-100 pl-3 pr-2 text-xs font-medium outline-none transition-colors hover:bg-zinc-200/80 focus-visible:ring-2 focus-visible:ring-zinc-400 dark:bg-white/6 dark:hover:bg-white/10",
+        children: [
+          /* @__PURE__ */ jsx(Rolling, { text: months[current]?.label ?? "", still }),
+          /* @__PURE__ */ jsx(
+            motion.span,
+            {
+              "aria-hidden": true,
+              animate: { rotate: open ? 180 : 0 },
+              transition: still ? { duration: 0 } : PILL,
+              className: "grid",
+              children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4 text-zinc-500", strokeWidth: 2.25 })
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        id: `${id}-list`,
+        role: "listbox",
+        "aria-label": "Month",
+        initial: still ? { opacity: 0 } : { opacity: 0, scale: 0.92, y: -4, filter: "blur(4px)" },
+        animate: { opacity: 1, scale: 1, y: 0, filter: "blur(0px)" },
+        exit: still ? { opacity: 0 } : { opacity: 0, scale: 0.96, y: -4, filter: "blur(4px)" },
+        transition: { duration: 0.22, ease: GLIDE },
+        style: { transformOrigin: "top right" },
+        className: "absolute right-0 top-full z-20 mt-2 w-44 rounded-2xl bg-white p-1 shadow-[0_1px_2px_rgba(0,0,0,0.06),0_16px_40px_-12px_rgba(0,0,0,0.28)] ring-1 ring-black/5 dark:bg-zinc-800 dark:ring-white/10",
+        onPointerLeave: () => setHover(current),
+        children: months.map((m, i) => /* @__PURE__ */ jsxs(
+          "button",
+          {
+            ref: (el) => void (options.current[i] = el),
+            type: "button",
+            role: "option",
+            "aria-selected": i === current,
+            tabIndex: i === hover ? 0 : -1,
+            onPointerEnter: () => setHover(i),
+            onFocus: () => setHover(i),
+            onClick: (e) => choose(i, e.detail === 0),
+            className: "relative flex h-9 w-full cursor-pointer items-center justify-between rounded-xl px-3 text-left text-sm outline-none",
+            children: [
+              i === hover && /* @__PURE__ */ jsx(
+                motion.span,
+                {
+                  layoutId: `${id}-hover`,
+                  className: "absolute inset-0 rounded-xl bg-zinc-100 dark:bg-white/8",
+                  transition: still ? { duration: 0 } : PILL
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "relative", children: m.label }),
+              i === current && /* @__PURE__ */ jsx(
+                CheckIcon,
+                {
+                  className: "relative size-4",
+                  strokeWidth: 2.25,
+                  "aria-hidden": true
+                }
+              )
+            ]
+          },
+          m.key
+        ))
+      }
+    ) })
+  ] });
+}
+function sealPath(bumps = 9, depth = 0.085, r = 42) {
+  const pts = [];
+  for (let i = 0; i <= 180; i++) {
+    const t = i / 180 * Math.PI * 2;
+    const rr = r * (1 + depth * Math.cos(bumps * t));
+    pts.push(
+      `${(50 + Math.cos(t) * rr).toFixed(2)} ${(50 + Math.sin(t) * rr).toFixed(2)}`
+    );
+  }
+  return `M${pts.join(" L")}Z`;
+}
+var SEAL = sealPath();
+function SuccessSeal({ accent, still }) {
+  const ref = React.useRef(null);
+  useGSAP(
+    () => {
+      const q = (sel) => ref.current.querySelectorAll(sel);
+      if (still) {
+        gsap.set(q(".seal-tick"), { strokeDashoffset: 0 });
+        return;
+      }
+      gsap.timeline({ delay: 0.6 }).from(q(".seal"), {
+        scale: 0,
+        rotation: -60,
+        svgOrigin: "60 60",
+        duration: 0.7,
+        ease: "back.out(1.9)"
+      }).to(
+        q(".seal-tick"),
+        { strokeDashoffset: 0, duration: 0.35, ease: "power2.out" },
+        0.32
+      ).fromTo(
+        q(".spark"),
+        {
+          autoAlpha: 1,
+          attr: { "stroke-dashoffset": 1 },
+          scale: 0.6,
+          svgOrigin: "60 60"
+        },
+        {
+          attr: { "stroke-dashoffset": 0 },
+          scale: 1,
+          duration: 0.35,
+          ease: "power3.out",
+          stagger: 0.02
+        },
+        0.28
+      ).to(
+        q(".spark"),
+        {
+          autoAlpha: 0,
+          scale: 1.18,
+          svgOrigin: "60 60",
+          duration: 0.45,
+          ease: "power2.in",
+          stagger: 0.02
+        },
+        0.62
+      ).fromTo(
+        q(".dot"),
+        { autoAlpha: 1, scale: 0.3, svgOrigin: "60 60" },
+        {
+          scale: 1.35,
+          autoAlpha: 0,
+          duration: 0.9,
+          ease: "power2.out",
+          stagger: 0.03
+        },
+        0.3
+      ).to(
+        q(".seal-wrap"),
+        { y: -3, duration: 1.6, ease: "sine.inOut", repeat: -1, yoyo: true },
+        1.1
+      );
+    },
+    { scope: ref }
+  );
+  const sparks = Array.from({ length: 8 }, (_, i) => {
+    const a = i / 8 * Math.PI * 2 - Math.PI / 2 + 0.2;
+    return {
+      x1: 60 + Math.cos(a) * 48,
+      y1: 60 + Math.sin(a) * 48,
+      x2: 60 + Math.cos(a) * 58,
+      y2: 60 + Math.sin(a) * 58
+    };
+  });
+  const dots = Array.from({ length: 6 }, (_, i) => {
+    const a = i / 6 * Math.PI * 2 + 0.5;
+    return { cx: 60 + Math.cos(a) * 54, cy: 60 + Math.sin(a) * 54 };
+  });
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      ref,
+      viewBox: "0 0 120 120",
+      className: "size-[104px] overflow-visible",
+      "aria-hidden": true,
+      children: [
+        sparks.map((p, i) => /* @__PURE__ */ jsx(
+          "line",
+          {
+            className: "spark",
+            ...p,
+            stroke: accent,
+            strokeWidth: "3",
+            strokeLinecap: "round",
+            pathLength: 1,
+            strokeDasharray: "1",
+            style: { visibility: "hidden" }
+          },
+          i
+        )),
+        dots.map((p, i) => /* @__PURE__ */ jsx(
+          "circle",
+          {
+            className: "dot",
+            ...p,
+            r: "2.4",
+            fill: i % 2 ? "#f5c542" : accent,
+            style: { visibility: "hidden" }
+          },
+          i
+        )),
+        /* @__PURE__ */ jsx("g", { className: "seal-wrap", children: /* @__PURE__ */ jsxs("g", { className: "seal", children: [
+          /* @__PURE__ */ jsx("path", { d: SEAL, transform: "translate(10 10)", fill: accent }),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              className: "seal-tick",
+              d: "M44 61l11 11 22-23",
+              fill: "none",
+              stroke: "#fff",
+              strokeWidth: "7",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              pathLength: 1,
+              strokeDasharray: "1",
+              strokeDashoffset: "1"
+            }
+          )
+        ] }) })
+      ]
+    }
+  );
+}
+function MiniClock({ time, still }) {
+  const root = React.useRef(null);
+  const [h, m] = time.split(":").map(Number);
+  useGSAP(
+    () => {
+      const hour = (h % 12 + (m || 0) / 60) * 30;
+      const minute = (m || 0) * 6;
+      const o = {
+        svgOrigin: "12 12",
+        ease: "power3.out",
+        duration: still ? 0 : 1.2,
+        delay: still ? 0 : 1.2
+      };
+      gsap.fromTo("[data-hour]", { rotation: 0 }, { rotation: hour, ...o });
+      gsap.fromTo(
+        "[data-minute]",
+        { rotation: 0 },
+        { rotation: minute + (still ? 0 : 360), ...o }
+      );
+    },
+    { scope: root, dependencies: [time] }
+  );
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      ref: root,
+      viewBox: "0 0 24 24",
+      className: "size-5",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      "aria-hidden": true,
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "9" }),
+        /* @__PURE__ */ jsx("line", { "data-hour": true, x1: "12", y1: "12", x2: "12", y2: "7.5" }),
+        /* @__PURE__ */ jsx("line", { "data-minute": true, x1: "12", y1: "12", x2: "12", y2: "5.5" })
+      ]
+    }
+  );
+}
+function MiniCalendar({ still }) {
+  const root = React.useRef(null);
+  useGSAP(
+    () => {
+      if (still) return;
+      gsap.from("[data-page]", {
+        scaleY: 0,
+        svgOrigin: "12 5",
+        duration: 0.45,
+        delay: 1.1,
+        ease: "back.out(2)"
+      });
+      gsap.from("[data-dot]", {
+        scale: 0,
+        svgOrigin: "12 15",
+        duration: 0.35,
+        delay: 1.45,
+        ease: "back.out(4)"
+      });
+    },
+    { scope: root }
+  );
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      ref: root,
+      viewBox: "0 0 24 24",
+      className: "size-5",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": true,
+      children: [
+        /* @__PURE__ */ jsxs("g", { "data-page": true, children: [
+          /* @__PURE__ */ jsx("rect", { x: "3.5", y: "5", width: "17", height: "15.5", rx: "3" }),
+          /* @__PURE__ */ jsx("line", { x1: "3.5", y1: "10", x2: "20.5", y2: "10" })
+        ] }),
+        /* @__PURE__ */ jsx("line", { x1: "8.5", y1: "3", x2: "8.5", y2: "6.5" }),
+        /* @__PURE__ */ jsx("line", { x1: "15.5", y1: "3", x2: "15.5", y2: "6.5" }),
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            "data-dot": true,
+            cx: "12",
+            cy: "15",
+            r: "1.75",
+            fill: "currentColor",
+            stroke: "none"
+          }
+        )
+      ]
+    }
+  );
+}
+var STAGGER = {
+  hidden: {},
+  shown: { transition: { staggerChildren: 0.07, delayChildren: 0.75 } }
+};
+var RISE = {
+  hidden: { opacity: 0, y: 12, filter: "blur(4px)" },
+  shown: {
+    opacity: 1,
+    y: 0,
+    filter: "blur(0px)",
+    transition: { duration: 0.45, ease: GLIDE }
+  }
+};
+function Confirmation({
+  date,
+  time,
+  title,
+  text,
+  onChange,
+  onAdd,
+  still
+}) {
+  const [added, setAdded] = React.useState(false);
+  const focus = React.useRef(null);
+  React.useEffect(() => focus.current?.focus(), []);
+  return /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      className: "absolute inset-0 flex flex-col p-6",
+      initial: { opacity: 0 },
+      animate: { opacity: 1 },
+      exit: { opacity: 0, transition: { duration: 0.2 } },
+      transition: { duration: 0.3, delay: still ? 0 : 0.45 },
+      children: [
+        /* @__PURE__ */ jsxs(
+          motion.div,
+          {
+            variants: still ? void 0 : STAGGER,
+            initial: "hidden",
+            animate: "shown",
+            className: "flex flex-1 flex-col items-center justify-center text-center",
+            children: [
+              /* @__PURE__ */ jsx(SuccessSeal, { accent: SUCCESS, still }),
+              /* @__PURE__ */ jsx(
+                motion.h3,
+                {
+                  ref: focus,
+                  tabIndex: -1,
+                  variants: still ? void 0 : RISE,
+                  className: "mt-2 text-lg font-semibold tracking-tight outline-none",
+                  children: title
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                motion.p,
+                {
+                  variants: still ? void 0 : RISE,
+                  className: "mt-1 text-sm text-zinc-500 dark:text-zinc-400",
+                  children: text
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                motion.div,
+                {
+                  variants: still ? void 0 : RISE,
+                  className: "mt-5 grid w-full grid-cols-2 gap-2 text-left",
+                  children: [
+                    {
+                      icon: /* @__PURE__ */ jsx(MiniCalendar, { still }),
+                      label: "Date",
+                      value: fmt(date, {
+                        weekday: "short",
+                        month: "short",
+                        day: "numeric"
+                      })
+                    },
+                    {
+                      icon: /* @__PURE__ */ jsx(MiniClock, { time, still }),
+                      label: "Time",
+                      value: time
+                    }
+                  ].map((d) => /* @__PURE__ */ jsxs(
+                    motion.div,
+                    {
+                      whileHover: still ? void 0 : { y: -2 },
+                      transition: PILL,
+                      className: "flex items-center gap-3 rounded-2xl bg-zinc-100 p-3 dark:bg-white/6",
+                      children: [
+                        /* @__PURE__ */ jsx("span", { className: "grid size-10 shrink-0 place-items-center rounded-full bg-white text-[#242423] shadow-[0_1px_2px_rgba(0,0,0,0.06)] dark:bg-zinc-800 dark:text-zinc-100", children: d.icon }),
+                        /* @__PURE__ */ jsxs("span", { className: "min-w-0", children: [
+                          /* @__PURE__ */ jsx("span", { className: "block text-xs text-zinc-500 dark:text-zinc-400", children: d.label }),
+                          /* @__PURE__ */ jsx("span", { className: "block truncate text-sm font-medium tabular-nums", children: d.value })
+                        ] })
+                      ]
+                    },
+                    d.label
+                  ))
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          motion.div,
+          {
+            initial: still ? false : { opacity: 0, y: 12 },
+            animate: { opacity: 1, y: 0 },
+            transition: { duration: 0.45, ease: GLIDE, delay: still ? 0 : 1.05 },
+            className: "mt-5 flex gap-2",
+            children: [
+              /* @__PURE__ */ jsxs(
+                motion.button,
+                {
+                  type: "button",
+                  onClick: onChange,
+                  whileTap: still ? void 0 : { scale: 0.96 },
+                  className: "group flex h-12 cursor-pointer items-center gap-2 rounded-full bg-zinc-100 px-5 text-sm font-medium outline-none transition-colors hover:bg-zinc-200/80 focus-visible:ring-2 focus-visible:ring-zinc-400 dark:bg-white/6 dark:hover:bg-white/10",
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      RotateCCWIcon,
+                      {
+                        className: "size-4 transition-transform duration-500 ease-[cubic-bezier(0.22,1,0.36,1)] group-hover:-rotate-[200deg]",
+                        strokeWidth: 2.25,
+                        "aria-hidden": true
+                      }
+                    ),
+                    "Change"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                motion.button,
+                {
+                  type: "button",
+                  onClick: () => {
+                    if (added) return;
+                    setAdded(true);
+                    onAdd?.();
+                  },
+                  whileTap: still || added ? void 0 : { scale: 0.98 },
+                  animate: { backgroundColor: added ? SUCCESS : "#242423" },
+                  transition: { duration: still ? 0 : 0.3, ease: GLIDE },
+                  className: "flex h-12 flex-1 cursor-pointer items-center justify-center gap-2 rounded-full text-sm font-medium text-white outline-none focus-visible:ring-2 focus-visible:ring-zinc-400 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-zinc-900",
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: "relative grid size-4 place-items-center", children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", initial: false, children: /* @__PURE__ */ jsx(
+                      motion.span,
+                      {
+                        className: "grid",
+                        initial: still ? { opacity: 0 } : { opacity: 0, scale: 0.4, rotate: -90 },
+                        animate: { opacity: 1, scale: 1, rotate: 0 },
+                        exit: still ? { opacity: 0 } : { opacity: 0, scale: 0.4, rotate: 90 },
+                        transition: { type: "spring", stiffness: 500, damping: 24 },
+                        children: added ? /* @__PURE__ */ jsx(CheckIcon, { className: "size-4", strokeWidth: 2.5, "aria-hidden": true }) : /* @__PURE__ */ jsx(
+                          CalendarPlus,
+                          {
+                            className: "size-4",
+                            strokeWidth: 2.25,
+                            "aria-hidden": true
+                          }
+                        )
+                      },
+                      added ? "check" : "plus"
+                    ) }) }),
+                    /* @__PURE__ */ jsx(
+                      Rolling,
+                      {
+                        text: added ? "Added to calendar" : "Add to calendar",
+                        still
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+var BookingCard = React.forwardRef(
+  function BookingCard2({
+    title = "Book a free trial",
+    subtitle = "Every new member gets one class on us. Pick a date below to get started.",
+    start,
+    days = 45,
+    times = DEFAULT_TIMES,
+    isUnavailable = (d) => d.getDay() === 0,
+    takenTimes,
+    cta = "Book a trial",
+    doneTitle = "You're booked",
+    doneText = "We sent the details to your inbox. See you soon.",
+    onAddToCalendar,
+    onBook,
+    className
+  }, ref) {
+    const still = !!useReducedMotion();
+    const id = React.useId();
+    const strip = React.useRef(null);
+    const dayRefs = React.useRef([]);
+    const timeRefs = React.useRef([]);
+    const dates = React.useMemo(() => {
+      const first = start ? new Date(start) : /* @__PURE__ */ new Date();
+      first.setHours(0, 0, 0, 0);
+      return Array.from({ length: Math.max(1, days) }, (_, i) => {
+        const d = new Date(first);
+        d.setDate(first.getDate() + i);
+        return d;
+      });
+    }, [start?.getTime(), days]);
+    const months = React.useMemo(() => {
+      const list = [];
+      dates.forEach((d, i) => {
+        const key = `${d.getFullYear()}-${d.getMonth()}`;
+        if (list[list.length - 1]?.key !== key)
+          list.push({
+            key,
+            label: fmt(d, { month: "long", year: "numeric" }),
+            first: i
+          });
+      });
+      return list;
+    }, [dates]);
+    const [view, setView] = React.useState(0);
+    const onStripScroll = () => {
+      const box = strip.current;
+      if (!box) return;
+      const edge = box.scrollLeft + 24;
+      let i = dayRefs.current.findIndex(
+        (el) => el && el.offsetLeft + el.offsetWidth / 2 >= edge
+      );
+      if (i < 0) i = dates.length - 1;
+      const key = `${dates[i].getFullYear()}-${dates[i].getMonth()}`;
+      const m = months.findIndex((x) => x.key === key);
+      if (m >= 0 && m !== view) setView(m);
+    };
+    const showMonth = (m) => {
+      setView(m);
+      const box = strip.current;
+      const el = dayRefs.current[months[m].first];
+      if (box && el)
+        box.scrollTo({
+          left: el.offsetLeft - 24,
+          behavior: still ? "auto" : "smooth"
+        });
+    };
+    const [day, setDay] = React.useState(null);
+    const [time, setTime] = React.useState(null);
+    const [phase, setPhase] = React.useState("idle");
+    const taken = React.useMemo(
+      () => day ? takenTimes?.(day) ?? defaultTaken(day, times) : [],
+      [day, takenTimes, times]
+    );
+    const ready = !!day && !!time;
+    const locked = phase !== "idle";
+    const pickDay = (i, focus = false) => {
+      const d = dates[i];
+      if (locked || isUnavailable(d)) return;
+      setDay(d);
+      setTime(null);
+      const el = dayRefs.current[i];
+      if (focus) el?.focus();
+      const box = strip.current;
+      if (el && box)
+        box.scrollTo({
+          left: el.offsetLeft - (box.clientWidth - el.offsetWidth) / 2,
+          behavior: still ? "auto" : "smooth"
+        });
+    };
+    const pickTime = (i, focus = false) => {
+      const t = times[i];
+      if (locked || taken.includes(t)) return;
+      setTime(t);
+      if (focus) timeRefs.current[i]?.focus();
+    };
+    const book = async () => {
+      if (!ready || locked) return;
+      setPhase("loading");
+      try {
+        await Promise.all([
+          onBook?.({ date: day, time }),
+          new Promise((r) => setTimeout(r, still ? 200 : 900))
+        ]);
+        setPhase("done");
+      } catch {
+        setPhase("idle");
+      }
+    };
+    const reset = () => setPhase("idle");
+    const picker = React.useRef(null);
+    React.useEffect(() => {
+      if (picker.current) picker.current.inert = phase === "done";
+    }, [phase]);
+    const slot = day ? `${fmt(day, { weekday: "short", month: "short", day: "numeric" })}${time ? `, ${time}` : ""}` : "";
+    const label = phase === "loading" ? "Booking" : phase === "done" ? "Booked" : ready ? `${cta} for ${slot}` : day ? "Pick a time" : cta;
+    const status = phase === "done" ? `Booked for ${slot}.` : phase === "loading" ? "Booking." : time ? `${slot} selected.` : day ? `${fmt(day, { weekday: "long", month: "long", day: "numeric" })} selected. Pick a time.` : "";
+    const dayIndex = day ? dates.findIndex((d) => sameDay(d, day)) : -1;
+    const timeIndex = time ? times.indexOf(time) : -1;
+    const firstOpenDay = dates.findIndex((d) => !isUnavailable(d));
+    const firstOpenTime = times.findIndex((t) => !taken.includes(t));
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "relative w-[400px] max-w-full overflow-hidden rounded-3xl bg-white text-zinc-900 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__ */ jsxs(
+            motion.div,
+            {
+              ref: picker,
+              "aria-hidden": phase === "done",
+              animate: phase === "done" ? {
+                opacity: 0,
+                scale: still ? 1 : 0.97,
+                filter: still ? "blur(0px)" : "blur(6px)"
+              } : { opacity: 1, scale: 1, filter: "blur(0px)" },
+              transition: {
+                duration: still ? 0 : 0.35,
+                ease: GLIDE,
+                delay: phase === "done" && !still ? 0.35 : 0
+              },
+              className: "p-6",
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4", children: [
+                  /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold tracking-tight", children: title }),
+                  months.length > 0 && /* @__PURE__ */ jsx(
+                    MonthMenu,
+                    {
+                      months,
+                      current: Math.min(view, months.length - 1),
+                      onPick: showMonth,
+                      still
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-zinc-500 dark:text-zinc-400", children: subtitle }),
+                /* @__PURE__ */ jsxs(LayoutGroup, { id, children: [
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      ref: strip,
+                      role: "radiogroup",
+                      "aria-label": "Date",
+                      onScroll: onStripScroll,
+                      className: "relative -mx-6 mt-5 flex snap-x scroll-px-6 gap-2 overflow-x-auto px-6 py-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+                      style: {
+                        maskImage: "linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent)",
+                        WebkitMaskImage: "linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent)"
+                      },
+                      children: dates.map((d, i) => {
+                        const off = isUnavailable(d);
+                        const on = i === dayIndex;
+                        return /* @__PURE__ */ jsxs(
+                          motion.button,
+                          {
+                            ref: (el) => void (dayRefs.current[i] = el),
+                            type: "button",
+                            role: "radio",
+                            "aria-checked": on,
+                            "aria-disabled": off || locked,
+                            "aria-label": `${fmt(d, { weekday: "long", month: "long", day: "numeric" })}${off ? ", unavailable" : ""}`,
+                            tabIndex: on || dayIndex < 0 && i === firstOpenDay ? 0 : -1,
+                            onClick: () => pickDay(i),
+                            onKeyDown: (e) => roving(
+                              e,
+                              dates,
+                              dayIndex < 0 ? i : dayIndex,
+                              (x) => !isUnavailable(x),
+                              (j) => pickDay(j, true)
+                            ),
+                            whileTap: off || locked || still ? void 0 : { scale: 0.94 },
+                            className: cn(
+                              "relative flex h-[72px] w-14 shrink-0 snap-start flex-col items-center justify-center rounded-2xl outline-none focus-visible:ring-2 focus-visible:ring-zinc-400",
+                              off ? "cursor-not-allowed text-zinc-300 dark:text-zinc-600" : "cursor-pointer",
+                              !off && !on && "bg-zinc-100 transition-colors hover:bg-zinc-200/80 dark:bg-white/6 dark:hover:bg-white/10",
+                              off && "bg-zinc-50 dark:bg-white/[0.03]"
+                            ),
+                            children: [
+                              on && /* @__PURE__ */ jsx(
+                                motion.span,
+                                {
+                                  layoutId: "day-pill",
+                                  className: "absolute inset-0 rounded-2xl bg-[#242423] dark:bg-white",
+                                  transition: still ? { duration: 0 } : PILL
+                                }
+                              ),
+                              /* @__PURE__ */ jsx(
+                                "span",
+                                {
+                                  className: cn(
+                                    "relative text-xs font-medium transition-colors duration-200",
+                                    on ? "text-white/70 dark:text-zinc-500" : !off && "text-zinc-500 dark:text-zinc-400"
+                                  ),
+                                  children: fmt(d, { weekday: "short" })
+                                }
+                              ),
+                              /* @__PURE__ */ jsx(
+                                "span",
+                                {
+                                  className: cn(
+                                    "relative mt-0.5 text-xl font-semibold tabular-nums transition-colors duration-200",
+                                    on && "text-white dark:text-zinc-900",
+                                    off && "line-through decoration-1"
+                                  ),
+                                  children: d.getDate()
+                                }
+                              )
+                            ]
+                          },
+                          d.toISOString()
+                        );
+                      })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: day && /* @__PURE__ */ jsxs(
+                    motion.div,
+                    {
+                      initial: { height: 0, opacity: 0 },
+                      animate: { height: "auto", opacity: 1 },
+                      exit: { height: 0, opacity: 0 },
+                      transition: still ? { duration: 0 } : { duration: 0.4, ease: GLIDE },
+                      className: "overflow-hidden",
+                      children: [
+                        /* @__PURE__ */ jsx("p", { id: `${id}-times`, className: "mt-5 text-sm font-medium", children: "Select a time" }),
+                        /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            role: "radiogroup",
+                            "aria-labelledby": `${id}-times`,
+                            className: "mt-3 grid grid-cols-5 gap-2 pb-1",
+                            children: times.map((t, i) => {
+                              const off = taken.includes(t);
+                              const on = t === time;
+                              return /* @__PURE__ */ jsxs(
+                                motion.button,
+                                {
+                                  ref: (el) => void (timeRefs.current[i] = el),
+                                  type: "button",
+                                  role: "radio",
+                                  "aria-checked": on,
+                                  "aria-disabled": off || locked,
+                                  "aria-label": `${t}${off ? ", taken" : ""}`,
+                                  tabIndex: on || timeIndex < 0 && i === firstOpenTime ? 0 : -1,
+                                  onClick: () => pickTime(i),
+                                  onKeyDown: (e) => roving(
+                                    e,
+                                    times,
+                                    timeIndex < 0 ? i : timeIndex,
+                                    (x) => !taken.includes(x),
+                                    (j) => pickTime(j, true)
+                                  ),
+                                  initial: still ? false : { opacity: 0, y: 8 },
+                                  animate: { opacity: 1, y: 0 },
+                                  transition: {
+                                    duration: 0.3,
+                                    ease: GLIDE,
+                                    delay: still ? 0 : 0.06 + i * 0.035
+                                  },
+                                  whileTap: off || locked || still ? void 0 : { scale: 0.94 },
+                                  className: cn(
+                                    "relative h-10 rounded-full text-sm font-medium tabular-nums outline-none focus-visible:ring-2 focus-visible:ring-zinc-400",
+                                    off ? "cursor-not-allowed bg-zinc-50 text-zinc-300 line-through decoration-1 dark:bg-white/[0.03] dark:text-zinc-600" : "cursor-pointer",
+                                    !off && !on && "bg-zinc-100 transition-colors hover:bg-zinc-200/80 dark:bg-white/6 dark:hover:bg-white/10"
+                                  ),
+                                  children: [
+                                    on && /* @__PURE__ */ jsx(
+                                      motion.span,
+                                      {
+                                        layoutId: "time-pill",
+                                        className: "absolute inset-0 rounded-full bg-[#242423] dark:bg-white",
+                                        transition: still ? { duration: 0 } : PILL
+                                      }
+                                    ),
+                                    /* @__PURE__ */ jsx(
+                                      "span",
+                                      {
+                                        className: cn(
+                                          "relative transition-colors duration-200",
+                                          on && "text-white dark:text-zinc-900"
+                                        ),
+                                        children: t
+                                      }
+                                    )
+                                  ]
+                                },
+                                `${day.toDateString()}-${t}`
+                              );
+                            })
+                          }
+                        )
+                      ]
+                    },
+                    "times"
+                  ) })
+                ] }),
+                /* @__PURE__ */ jsxs(
+                  motion.button,
+                  {
+                    type: "button",
+                    onClick: book,
+                    "aria-disabled": !ready && phase === "idle",
+                    whileTap: ready && !still && phase === "idle" ? { scale: 0.98 } : void 0,
+                    animate: {
+                      backgroundColor: phase === "done" ? SUCCESS : ready || locked ? "#242423" : "#f4f4f5",
+                      color: ready || locked ? "#ffffff" : "#a1a1aa"
+                    },
+                    transition: { duration: still ? 0 : 0.3, ease: GLIDE },
+                    className: cn(
+                      "group mt-6 flex h-12 w-full items-center justify-center gap-2 rounded-full text-sm font-medium outline-none focus-visible:ring-2 focus-visible:ring-zinc-400 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-zinc-900",
+                      ready || phase === "done" ? "cursor-pointer" : "cursor-default"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsxs(AnimatePresence, { mode: "popLayout", initial: false, children: [
+                        phase === "loading" && /* @__PURE__ */ jsx(
+                          motion.span,
+                          {
+                            "aria-hidden": true,
+                            initial: { opacity: 0, scale: 0.6 },
+                            animate: { opacity: 1, scale: 1, rotate: still ? 0 : 360 },
+                            exit: { opacity: 0, scale: 0.6 },
+                            transition: {
+                              rotate: { duration: 0.8, ease: "linear", repeat: Infinity },
+                              default: { duration: 0.2 }
+                            },
+                            className: "size-4 rounded-full border-2 border-white/30 border-t-white"
+                          },
+                          "spin"
+                        ),
+                        phase === "done" && /* @__PURE__ */ jsx(
+                          motion.svg,
+                          {
+                            "aria-hidden": true,
+                            viewBox: "0 0 16 16",
+                            className: "size-4",
+                            initial: { opacity: 0, scale: 0.6 },
+                            animate: { opacity: 1, scale: 1 },
+                            exit: { opacity: 0 },
+                            transition: { type: "spring", stiffness: 500, damping: 22 },
+                            children: /* @__PURE__ */ jsx(
+                              motion.path,
+                              {
+                                d: "M3.5 8.5 6.5 11.5 12.5 4.5",
+                                fill: "none",
+                                stroke: "currentColor",
+                                strokeWidth: 2.25,
+                                strokeLinecap: "round",
+                                strokeLinejoin: "round",
+                                initial: { pathLength: still ? 1 : 0 },
+                                animate: { pathLength: 1 },
+                                transition: { duration: 0.35, ease: GLIDE, delay: 0.08 }
+                              }
+                            )
+                          },
+                          "check"
+                        )
+                      ] }),
+                      /* @__PURE__ */ jsx(Rolling, { text: label, still }),
+                      phase === "idle" && /* @__PURE__ */ jsxs("span", { "aria-hidden": true, className: "relative size-4 overflow-hidden", children: [
+                        /* @__PURE__ */ jsx(
+                          ArrowRight,
+                          {
+                            strokeWidth: 2.25,
+                            className: cn(
+                              "absolute inset-0 size-4 transition-transform duration-[420ms] ease-[cubic-bezier(0.22,1,0.36,1)]",
+                              ready && !still && "group-hover:translate-x-[140%]"
+                            )
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          ArrowRight,
+                          {
+                            strokeWidth: 2.25,
+                            className: cn(
+                              "absolute inset-0 size-4 -translate-x-[140%] transition-transform duration-[420ms] ease-[cubic-bezier(0.22,1,0.36,1)]",
+                              ready && !still && "group-hover:translate-x-0 group-hover:delay-75"
+                            )
+                          }
+                        )
+                      ] })
+                    ]
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(AnimatePresence, { children: phase === "done" && day && time && /* @__PURE__ */ jsx(
+            Confirmation,
+            {
+              date: day,
+              time,
+              title: doneTitle,
+              text: doneText,
+              onChange: reset,
+              onAdd: () => onAddToCalendar?.({ date: day, time }),
+              still
+            },
+            "done"
+          ) }),
+          /* @__PURE__ */ jsx("span", { role: "status", "aria-live": "polite", className: "sr-only", children: status })
+        ]
+      }
+    );
+  }
+);
+
+export {
+  BookingCard
+};