@bearmenu/ui 0.8.9 → 0.8.10

package/dist/chunk-24RFI4RQ.js

@@ -0,0 +1,167 @@
+import { Separator } from './chunk-WSRWFA6K.js';
+import { Skeleton } from './chunk-QXHMPJ35.js';
+import { cn } from './chunk-FEK5XGZW.js';
+import { __objRest, __spreadValues } from './chunk-3GWWZKX7.js';
+import { Star, Clock, Check, MessageSquare, ChevronRight } from 'lucide-react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+function DefaultLink(_a) {
+  var _b = _a, { href } = _b, props = __objRest(_b, ["href"]);
+  return /* @__PURE__ */ jsx("a", __spreadValues({ href }, props));
+}
+function MenuKitchenList({
+  kitchens,
+  labels,
+  onShowMore,
+  linkComponent = DefaultLink,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col", className), children: [
+    /* @__PURE__ */ jsx("ol", { children: kitchens.map((kitchen, index) => /* @__PURE__ */ jsxs("li", { className: "[&:first-child>div]:pt-0", children: [
+      index > 0 && /* @__PURE__ */ jsx(Separator, {}),
+      /* @__PURE__ */ jsx(KitchenRow, { kitchen, labels, linkComponent })
+    ] }, kitchen.place.slug)) }),
+    onShowMore && labels.showMore && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: onShowMore,
+        className: "mt-2 self-start rounded-md py-2 text-[13px] font-bold text-accent transition-colors hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none",
+        children: labels.showMore
+      }
+    )
+  ] });
+}
+function KitchenRow({
+  kitchen,
+  labels,
+  linkComponent: LinkComponent
+}) {
+  const { place, dish } = kitchen;
+  const openNow = place.open_now === true;
+  return /* @__PURE__ */ jsxs("div", { className: "relative flex flex-wrap items-center gap-[11px] py-3 transition-colors hover:bg-muted/30 motion-reduce:transition-none lg:flex-nowrap lg:gap-4 lg:py-3.5", children: [
+    /* @__PURE__ */ jsx(
+      LinkComponent,
+      {
+        href: kitchen.href,
+        "aria-label": labels.openVenue(place.name),
+        className: "absolute inset-0 z-[1] rounded-xl focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent"
+      }
+    ),
+    /* @__PURE__ */ jsxs("span", { className: "relative h-[46px] w-[46px] shrink-0 overflow-hidden rounded-[11px] bg-[repeating-linear-gradient(135deg,oklch(0.78_0.018_55)_0_8px,oklch(0.84_0.012_58)_8px_16px)] lg:h-[58px] lg:w-[58px] lg:rounded-[13px]", children: [
+      place.thumbnail_url && // eslint-disable-next-line @next/next/no-img-element
+      /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: place.thumbnail_url,
+          alt: "",
+          loading: "lazy",
+          decoding: "async",
+          className: "h-full w-full object-cover"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          title: openNow ? labels.openNow : void 0,
+          className: cn(
+            "absolute right-[5px] top-[5px] h-[7px] w-[7px] rounded-full ring-2 ring-white/85",
+            openNow ? "bg-[var(--free,oklch(0.55_0.13_155))]" : "bg-[oklch(0.8_0.01_60)]"
+          )
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5 lg:w-[226px] lg:flex-none", children: [
+      /* @__PURE__ */ jsx("span", { className: "truncate text-[14.5px] font-bold tracking-[-0.01em] lg:text-[15.5px]", children: place.name }),
+      /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 truncate text-xs text-muted-foreground", children: [
+        place.rating && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Star, { className: "h-[11px] w-[11px] shrink-0", "aria-hidden": true }),
+          place.rating.rating,
+          kitchen.metaLabel && " \xB7 "
+        ] }),
+        kitchen.metaLabel
+      ] }),
+      kitchen.hoursLabel && /* @__PURE__ */ jsxs(
+        "span",
+        {
+          className: cn(
+            "mt-[3px] inline-flex h-[21px] w-max items-center gap-[5px] rounded-md px-2 text-[10.5px] font-bold",
+            openNow ? "bg-[oklch(0.96_0.02_155)] text-[var(--free,oklch(0.45_0.13_155))]" : "bg-muted text-muted-foreground"
+          ),
+          children: [
+            /* @__PURE__ */ jsx(Clock, { className: "h-2.5 w-2.5 shrink-0", "aria-hidden": true }),
+            kitchen.hoursLabel
+          ]
+        }
+      )
+    ] }),
+    dish && /* DESKTOP ONLY, where it is a column of its own beside the venue.
+               On the phone it wrapped to a third line under the row — kicker, dish,
+               mention count — which turned a four-line venue row into a seven-line
+               block and, ten rows down, buried the venue names the list exists to
+               be scanned for. The dish is not what a reader is choosing here; it is
+               one tap away on the venue's own page, with room to state it.
+    
+               `order-5` puts it last in the visual order without moving it in the
+               DOM, where it belongs to the venue. */
+    /* @__PURE__ */ jsxs("div", { className: "hidden min-w-0 basis-full pl-[57px] lg:order-none lg:block lg:flex-1 lg:basis-auto lg:pl-0", children: [
+      /* @__PURE__ */ jsxs(
+        "span",
+        {
+          className: cn(
+            "flex items-center gap-1.5 text-[9px] font-extrabold uppercase tracking-[0.1em]",
+            dish.matched ? "text-accent" : "text-[oklch(0.72_0.01_60)]"
+          ),
+          children: [
+            dish.kicker,
+            dish.matched && dish.matchLabel && /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 rounded-[5px] bg-accent-subtle px-1.5 py-px text-[10.5px] font-bold normal-case tracking-normal text-accent", children: [
+              /* @__PURE__ */ jsx(Check, { className: "h-2.5 w-2.5 shrink-0", "aria-hidden": true }),
+              dish.matchLabel
+            ] })
+          ]
+        }
+      ),
+      dish.href ? /* @__PURE__ */ jsx(
+        LinkComponent,
+        {
+          href: dish.href,
+          "aria-label": labels.openDish(dish.name),
+          className: "relative z-[2] mt-0.5 block truncate font-serif text-[13.5px] italic underline decoration-[oklch(0.84_0.01_60)] decoration-1 underline-offset-[3px] transition-colors hover:text-accent hover:decoration-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none lg:text-[15px]",
+          children: dish.name
+        }
+      ) : /* @__PURE__ */ jsx("span", { className: "mt-0.5 block truncate font-serif text-[13.5px] italic lg:text-[15px]", children: dish.name }),
+      dish.meta && /* @__PURE__ */ jsxs("span", { className: "mt-[3px] flex items-center gap-1 text-[11.5px] text-muted-foreground", children: [
+        !dish.matched && /* @__PURE__ */ jsx(MessageSquare, { className: "h-2.5 w-2.5 shrink-0", "aria-hidden": true }),
+        dish.meta
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "ml-auto flex shrink-0 items-center gap-[11px] lg:ml-0", children: [
+      kitchen.priceLabel && /* @__PURE__ */ jsx("span", { className: "text-base font-extrabold tabular-nums text-accent", children: kitchen.priceLabel }),
+      /* @__PURE__ */ jsx(ChevronRight, { className: "h-[15px] w-[15px] shrink-0 text-muted-foreground", "aria-hidden": true })
+    ] })
+  ] });
+}
+function MenuKitchenListSkeleton({
+  rows = 10,
+  className
+}) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col", className), "aria-hidden": true, children: Array.from({ length: rows }, (_, index) => /* @__PURE__ */ jsxs("div", { children: [
+    index > 0 && /* @__PURE__ */ jsx(Separator, {}),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-[11px] py-3 lg:flex-nowrap lg:gap-4 lg:py-3.5", children: [
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-[46px] w-[46px] rounded-[11px] lg:h-[58px] lg:w-[58px] lg:rounded-[13px]" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1.5 lg:w-[226px] lg:flex-none", children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-[60%]" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-[45%]" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-[21px] w-[120px] rounded-md" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "hidden min-w-0 basis-full pl-[57px] lg:order-none lg:block lg:flex-1 lg:basis-auto lg:pl-0", children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-2.5 w-[90px]" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "mt-1.5 h-4 w-[70%]" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "mt-1.5 h-3 w-[40%]" })
+      ] }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "ml-auto h-5 w-[56px] lg:ml-0" })
+    ] })
+  ] }, index)) });
+}
+
+export { MenuKitchenList, MenuKitchenListSkeleton };

package/dist/chunk-2XCZJWTV.js

@@ -0,0 +1,121 @@
+import { cn } from './chunk-FEK5XGZW.js';
+import { __objRest, __spreadProps, __spreadValues } from './chunk-3GWWZKX7.js';
+import * as React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var fromMap = {
+  background: "from-background",
+  card: "from-card",
+  muted: "from-muted"
+};
+var sizeMap = {
+  vertical: { sm: "h-6", md: "h-12", lg: "h-20" },
+  horizontal: { sm: "w-8", md: "w-16", lg: "w-28" }
+};
+var ScrollFade = React.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      orientation = "vertical",
+      fadeColor = "background",
+      size = "md",
+      className,
+      scrollClassName,
+      children
+    } = _b, props = __objRest(_b, [
+      "orientation",
+      "fadeColor",
+      "size",
+      "className",
+      "scrollClassName",
+      "children"
+    ]);
+    const innerRef = React.useRef(null);
+    React.useImperativeHandle(ref, () => innerRef.current);
+    const [atStart, setAtStart] = React.useState(true);
+    const [atEnd, setAtEnd] = React.useState(true);
+    const update = React.useCallback(() => {
+      const el = innerRef.current;
+      if (!el) return;
+      if (orientation === "vertical") {
+        const overflow = el.scrollHeight - el.clientHeight;
+        setAtStart(el.scrollTop <= 1);
+        setAtEnd(overflow <= 1 || el.scrollTop >= overflow - 1);
+      } else {
+        const overflow = el.scrollWidth - el.clientWidth;
+        setAtStart(el.scrollLeft <= 1);
+        setAtEnd(overflow <= 1 || el.scrollLeft >= overflow - 1);
+      }
+    }, [orientation]);
+    React.useEffect(() => {
+      const el = innerRef.current;
+      if (!el) return;
+      update();
+      el.addEventListener("scroll", update, { passive: true });
+      const ro = new ResizeObserver(update);
+      ro.observe(el);
+      return () => {
+        el.removeEventListener("scroll", update);
+        ro.disconnect();
+      };
+    }, [update]);
+    const fromClass = fromMap[fadeColor];
+    const fadeSize = sizeMap[orientation][size];
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "relative isolate flex",
+          orientation === "vertical" ? "flex-col" : "flex-row",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            __spreadProps(__spreadValues({
+              ref: innerRef,
+              className: cn(
+                "min-h-0 min-w-0 flex-1",
+                orientation === "vertical" ? "overflow-y-auto" : "overflow-x-auto",
+                scrollClassName
+              )
+            }, props), {
+              children
+            })
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-hidden": true,
+              className: cn(
+                "pointer-events-none absolute z-10 transition-opacity duration-300",
+                // `from-30%` adds a solid plateau before the gradient starts
+                // fading — without it the gradient is a pure linear ramp and only
+                // the very top pixel reads as solid, leaving the cut edge visible.
+                // -4px inset pulls the fade past the container edge so the very
+                // edge of clipped content is covered by the solid plateau.
+                orientation === "vertical" ? `inset-x-0 -top-1 ${fadeSize} bg-gradient-to-b from-30%` : `inset-y-0 -left-1 ${fadeSize} bg-gradient-to-r from-30%`,
+                fromClass,
+                atStart ? "opacity-0" : "opacity-100"
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-hidden": true,
+              className: cn(
+                "pointer-events-none absolute z-10 transition-opacity duration-300",
+                orientation === "vertical" ? `inset-x-0 -bottom-1 ${fadeSize} bg-gradient-to-t from-30%` : `inset-y-0 -right-1 ${fadeSize} bg-gradient-to-l from-30%`,
+                fromClass,
+                atEnd ? "opacity-0" : "opacity-100"
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+ScrollFade.displayName = "ScrollFade";
+
+export { ScrollFade };

package/dist/chunk-5RWTOT5Y.js

@@ -0,0 +1,72 @@
+import { cn } from './chunk-FEK5XGZW.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var PHOTO_GROUND = "bg-[oklch(0.21_0.012_55)]";
+var OVERLAY = "absolute inset-0 bg-[oklch(0.16_0.012_55_/_0.5)]";
+function PhotoGround({
+  photos,
+  initials,
+  mode = "mosaic",
+  active = 0,
+  mosaicClassName,
+  phoneTiles,
+  gradient,
+  overlay,
+  overlayClassName,
+  loading = "lazy",
+  className
+}) {
+  const initialOf = (index) => {
+    var _a, _b;
+    return typeof initials === "string" ? initials : (_b = (_a = initials[index]) != null ? _a : initials[0]) != null ? _b : "";
+  };
+  const hasAnyPhoto = photos.some(Boolean);
+  const slot = (index, extra) => {
+    const src = photos[index];
+    return /* @__PURE__ */ jsx("span", { className: cn("relative block overflow-hidden", extra), children: src ? (
+      // eslint-disable-next-line @next/next/no-img-element
+      /* @__PURE__ */ jsx(
+        "img",
+        {
+          src,
+          alt: "",
+          loading: index === 0 ? loading : "lazy",
+          decoding: "async",
+          className: "absolute inset-0 h-full w-full object-cover"
+        }
+      )
+    ) : (
+      /* Never a grey box: the ground with the venue's initial. A missing
+         photograph is not a broken image, and drawing one as a placeholder
+         makes a real city look unfinished. */
+      /* @__PURE__ */ jsx("span", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "font-serif text-[64px] font-semibold leading-none text-white/15", children: initialOf(index) }) })
+    ) }, index);
+  };
+  return /* @__PURE__ */ jsxs("span", { "aria-hidden": true, className: cn("absolute inset-0 block", PHOTO_GROUND, className), children: [
+    mode === "mosaic" ? /* @__PURE__ */ jsx("span", { className: cn("absolute inset-0 grid gap-px", mosaicClassName), children: photos.map(
+      (_, index) => slot(index, phoneTiles !== void 0 && index >= phoneTiles ? "hidden lg:block" : void 0)
+    ) }) : (
+      /* Stacked, not swapped, so the change is a cross-fade and not a flash
+         of ground between two images. */
+      photos.map(
+        (_, index) => slot(
+          index,
+          cn(
+            "absolute inset-0 transition-opacity duration-500 motion-reduce:transition-none",
+            index === active ? "opacity-100" : "opacity-0"
+          )
+        )
+      )
+    ),
+    gradient && hasAnyPhoto && /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "absolute inset-0 opacity-[0.85] mix-blend-color",
+        style: { backgroundImage: gradient }
+      }
+    ),
+    overlay && /* @__PURE__ */ jsx("span", { className: cn(OVERLAY, overlayClassName) })
+  ] });
+}
+
+export { PHOTO_GROUND, PhotoGround };

package/dist/{chunk-AXV5O2IZ.js → chunk-AKQ57NXY.js}

@@ -1,7 +1,7 @@
 import { cn } from './chunk-FEK5XGZW.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-var DEFAULT_ORDER = [
+var DIMENSION_ORDER = [
   "food",
   "coffee_quality",
   "drinks_quality",
@@ -15,7 +15,7 @@ var DEFAULT_ORDER = [
 function VenueGradeDimensions({
   dimensions,
   labels,
-  order = DEFAULT_ORDER,
+  order = DIMENSION_ORDER,
   formatScore,
   className
 }) {
@@ -55,4 +55,4 @@ function VenueGradeDimensions({
   );
 }
 
-export { VenueGradeDimensions };
+export { DIMENSION_ORDER, VenueGradeDimensions };

package/dist/chunk-CLLY6XB3.js

@@ -0,0 +1,41 @@
+import { cn } from './chunk-FEK5XGZW.js';
+import { jsxs } from 'react/jsx-runtime';
+
+var STRENGTH = {
+  /** A labelled facet: readable at 11.5px, still clearly the family's colour. */
+  chip: 20,
+  /** A quieter wash, for a chip that sits beside a stronger one. */
+  subtle: 12
+};
+function hueTint(hue, tone = "chip", base = "var(--card)") {
+  return `color-mix(in oklab, ${hue} ${STRENGTH[tone]}%, ${base})`;
+}
+function HueChip({
+  hue,
+  tone = "chip",
+  base = "var(--card)",
+  icon,
+  as: Tag = "span",
+  children,
+  className,
+  "aria-label": ariaLabel
+}) {
+  return /* @__PURE__ */ jsxs(
+    Tag,
+    {
+      "aria-label": ariaLabel,
+      className: cn(
+        "inline-flex h-7 items-center gap-1.5 rounded-full px-2.5 text-[11.5px] text-foreground",
+        !hue && "bg-muted",
+        className
+      ),
+      style: hue ? { backgroundColor: hueTint(hue, tone, base) } : void 0,
+      children: [
+        icon,
+        children
+      ]
+    }
+  );
+}
+
+export { HueChip, hueTint };

package/dist/chunk-DTXNDLSE.js

@@ -0,0 +1,125 @@
+import { cn } from './chunk-FEK5XGZW.js';
+import { __objRest, __spreadProps, __spreadValues } from './chunk-3GWWZKX7.js';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var snapRailVariants = cva(
+  cn(
+    "flex snap-x snap-mandatory overflow-x-auto pb-0.5 scrollbar-hide",
+    "[&>*]:shrink-0 [&>*]:snap-start"
+  ),
+  {
+    variants: {
+      itemWidth: {
+        sm: "[&>*]:w-[46%]",
+        md: "[&>*]:w-[60%]",
+        lg: "[&>*]:w-[80%]",
+        /** One card per view — pair with `dots` so the reader knows there is more. */
+        full: "[&>*]:w-full"
+      },
+      gap: {
+        sm: "gap-2",
+        default: "gap-3"
+      },
+      bleed: {
+        none: "",
+        card: "-mx-3.5 px-3.5 scroll-px-3.5",
+        page: "-mx-4 px-4 scroll-px-4"
+      }
+    },
+    defaultVariants: {
+      itemWidth: "sm",
+      gap: "default",
+      bleed: "none"
+    }
+  }
+);
+var SnapRail = React.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className, itemWidth, gap, bleed, dots, dotsClassName, onActiveChange, children } = _b, props = __objRest(_b, ["className", "itemWidth", "gap", "bleed", "dots", "dotsClassName", "onActiveChange", "children"]);
+    const railRef = React.useRef(null);
+    const [active, setActive] = React.useState(0);
+    const count = React.Children.count(children);
+    const tracks = Boolean(dots || onActiveChange);
+    const onActiveChangeRef = React.useRef(onActiveChange);
+    onActiveChangeRef.current = onActiveChange;
+    const setRefs = React.useCallback(
+      (node) => {
+        railRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
+      [ref]
+    );
+    React.useEffect(() => {
+      if (!tracks) return;
+      const rail2 = railRef.current;
+      if (!rail2) return;
+      let frame = 0;
+      let last = -1;
+      const sync = () => {
+        var _a2;
+        frame = 0;
+        const origin = rail2.scrollLeft + (parseFloat(getComputedStyle(rail2).scrollPaddingLeft) || 0);
+        let best = 0;
+        let bestDistance = Number.POSITIVE_INFINITY;
+        Array.from(rail2.children).forEach((child, index) => {
+          const distance = Math.abs(child.offsetLeft - origin);
+          if (distance < bestDistance) {
+            bestDistance = distance;
+            best = index;
+          }
+        });
+        setActive(best);
+        if (best !== last) {
+          last = best;
+          (_a2 = onActiveChangeRef.current) == null ? void 0 : _a2.call(onActiveChangeRef, best);
+        }
+      };
+      const onScroll = () => {
+        if (!frame) frame = requestAnimationFrame(sync);
+      };
+      sync();
+      rail2.addEventListener("scroll", onScroll, { passive: true });
+      return () => {
+        if (frame) cancelAnimationFrame(frame);
+        rail2.removeEventListener("scroll", onScroll);
+      };
+    }, [tracks, count]);
+    const rail = /* @__PURE__ */ jsx(
+      "div",
+      __spreadProps(__spreadValues({
+        ref: setRefs,
+        "data-slot": "snap-rail",
+        className: cn(snapRailVariants({ itemWidth, gap, bleed }), className)
+      }, props), {
+        children
+      })
+    );
+    if (!dots) return rail;
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+      rail,
+      /* @__PURE__ */ jsx(SnapRailDots, { count, active, className: dotsClassName })
+    ] });
+  }
+);
+SnapRail.displayName = "SnapRail";
+function SnapRailDots({
+  count,
+  active,
+  className
+}) {
+  return /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: cn("flex justify-center gap-1.5", className), children: Array.from({ length: count }, (_, index) => /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "h-1.5 rounded-full transition-[width,background-color] duration-200 motion-reduce:transition-none",
+        index === active ? "w-4 bg-foreground" : "w-1.5 bg-foreground/25"
+      )
+    },
+    index
+  )) });
+}
+
+export { SnapRail, SnapRailDots };

package/dist/chunk-F6FMZJDG.js

@@ -0,0 +1,113 @@
+import { cn } from './chunk-FEK5XGZW.js';
+import * as React from 'react';
+import { useInView } from 'framer-motion';
+import { jsx } from 'react/jsx-runtime';
+
+var StoryContext = React.createContext(null);
+function useStory() {
+  const value = React.useContext(StoryContext);
+  if (!value) throw new Error("Story pieces must render inside StoryProvider");
+  return value;
+}
+var TICK_MS = 100;
+function StoryProvider({
+  count,
+  durationMs = 5e3,
+  nextLabel,
+  className,
+  children
+}) {
+  const ref = React.useRef(null);
+  const inView = useInView(ref, { amount: 0.6 });
+  const [active, setActive] = React.useState(0);
+  const [elapsed, setElapsed] = React.useState(0);
+  const [held, setHeld] = React.useState(false);
+  const playing = Boolean(inView && !held && count > 1);
+  const go = React.useCallback(
+    (index) => {
+      setActive((index % count + count) % count);
+      setElapsed(0);
+    },
+    [count]
+  );
+  const next = React.useCallback(() => go(active + 1), [go, active]);
+  React.useEffect(() => {
+    if (!playing) return;
+    const timer = window.setInterval(() => setElapsed((previous) => previous + TICK_MS), TICK_MS);
+    return () => window.clearInterval(timer);
+  }, [playing]);
+  React.useEffect(() => {
+    if (elapsed < durationMs) return;
+    setActive((current) => (current + 1) % count);
+    setElapsed(0);
+  }, [elapsed, durationMs, count]);
+  const value = React.useMemo(
+    () => ({ count, active, progress: Math.min(elapsed / durationMs, 1), playing, go, next }),
+    [count, active, elapsed, durationMs, playing, go, next]
+  );
+  const advance = (event) => {
+    if (count < 2) return;
+    if (event.target.closest("a, button")) return;
+    next();
+  };
+  return /* @__PURE__ */ jsx(StoryContext.Provider, { value, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(count > 1 && "cursor-pointer", className),
+      title: count > 1 ? nextLabel : void 0,
+      onClick: advance,
+      onPointerDown: () => setHeld(true),
+      onPointerUp: () => setHeld(false),
+      onPointerLeave: () => setHeld(false),
+      onPointerCancel: () => setHeld(false),
+      children
+    }
+  ) });
+}
+function StorySegments({ labels, className }) {
+  const { count, active, progress, go } = useStory();
+  if (count < 2) return null;
+  return /* @__PURE__ */ jsx("div", { className: cn("flex gap-1", className), role: "tablist", children: Array.from({ length: count }, (_, index) => {
+    const fill = index < active ? 1 : index === active ? progress : 0;
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        role: "tab",
+        "aria-selected": index === active,
+        "aria-label": labels[index],
+        onClick: () => go(index),
+        className: "group/segment flex h-6 flex-1 items-center focus-visible:outline-none",
+        children: /* @__PURE__ */ jsx("span", { className: "relative block h-[3px] w-full overflow-hidden rounded-full bg-white/25 group-focus-visible/segment:ring-2 group-focus-visible/segment:ring-white/70", children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "absolute inset-y-0 left-0 rounded-full bg-white",
+            style: { width: `${fill * 100}%` }
+          }
+        ) })
+      },
+      index
+    );
+  }) });
+}
+function StoryPanel({ parts, className }) {
+  const { active } = useStory();
+  return /* @__PURE__ */ jsx("div", { className: cn("relative", className), children: /* @__PURE__ */ jsx("div", { className: "grid [&>*]:col-start-1 [&>*]:row-start-1", children: parts.map((part, index) => {
+    const isActive = index === active;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-hidden": !isActive,
+        className: cn(
+          "transition-[opacity,transform] duration-200 ease-out motion-reduce:transition-none",
+          isActive ? "opacity-100" : "pointer-events-none invisible translate-y-1.5 opacity-0"
+        ),
+        children: part
+      },
+      index
+    );
+  }) }) });
+}
+
+export { StoryPanel, StoryProvider, StorySegments };

package/dist/{chunk-2WDJR6K7.js → chunk-G7IFL4Z4.js}

@@ -8,6 +8,9 @@ function beats(times, duration = 0.62) {
   return { duration, times, ease: "easeInOut" };
 }
 var returnTransition = { type: "spring", stiffness: 320, damping: 26 };
+function pivot(x, y) {
+  return { originX: `${x}px`, originY: `${y}px`, transformBox: "view-box" };
+}
 function poses(rest, active, play, transition) {
   return {
     rest: __spreadProps(__spreadValues({}, rest), { transition: returnTransition }),
@@ -73,4 +76,4 @@ function MotionIcon({
   );
 }
 
-export { MotionIcon, beats, poses, returnTransition, useIconGesture };
+export { MotionIcon, beats, pivot, poses, returnTransition, useIconGesture };