@bearmenu/ui 0.8.8 → 0.8.10

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 };

package/dist/chunk-MZL7CGCL.js

@@ -0,0 +1,109 @@
+import { stagger, ease, duration, springSnappy } from './chunk-LEAYBICI.js';
+import { cn } from './chunk-FEK5XGZW.js';
+import { __spreadValues, __spreadProps } from './chunk-3GWWZKX7.js';
+import { motion, useReducedMotion } from 'framer-motion';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var LINE_LEAD = 0.15;
+var TARGET_DELAY = 0.38;
+var sourcesContainer = {
+  hidden: {},
+  show: { transition: { delayChildren: 0.06, staggerChildren: stagger.tight } }
+};
+var sourceItem = {
+  hidden: { opacity: 0, x: -8 },
+  show: { opacity: 1, x: 0, transition: { duration: duration.quick, ease: ease.enter } }
+};
+var targetItem = {
+  hidden: { opacity: 0, scale: 0.92 },
+  show: { opacity: 1, scale: 1, transition: __spreadValues({ delay: TARGET_DELAY }, springSnappy) }
+};
+var LINES_WIDTH = 40;
+var LINES_HEIGHT = 100;
+function ConvergeLines({ count, animate = true, className }) {
+  const mid = LINES_HEIGHT / 2;
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      "aria-hidden": true,
+      viewBox: `0 0 ${LINES_WIDTH} ${LINES_HEIGHT}`,
+      preserveAspectRatio: "none",
+      className: cn("h-full w-10 text-border", className),
+      children: Array.from({ length: count }, (_, index) => {
+        const y = (index + 0.5) / count * LINES_HEIGHT;
+        const d = `M0 ${y} C ${LINES_WIDTH / 2} ${y}, ${LINES_WIDTH / 2} ${mid}, ${LINES_WIDTH} ${mid}`;
+        const stroke = {
+          d,
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: 1.5,
+          strokeLinecap: "round",
+          vectorEffect: "non-scaling-stroke"
+        };
+        return animate ? /* @__PURE__ */ jsx(
+          motion.path,
+          __spreadProps(__spreadValues({}, stroke), {
+            initial: { pathLength: 0, opacity: 0 },
+            animate: { pathLength: 1, opacity: 1 },
+            transition: {
+              delay: LINE_LEAD + index * stagger.tight,
+              duration: duration.standard,
+              ease: ease.standard
+            }
+          }),
+          index
+        ) : /* @__PURE__ */ jsx("path", __spreadValues({}, stroke), index);
+      })
+    }
+  );
+}
+function Convergence({
+  sources,
+  target,
+  animate = true,
+  linesClassName,
+  className
+}) {
+  const reduce = useReducedMotion();
+  const run = animate && !reduce;
+  const fadeOnly = animate && reduce;
+  return /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      className: cn("grid grid-cols-[minmax(0,1fr)_auto_auto] items-center", className),
+      initial: fadeOnly ? { opacity: 0 } : false,
+      animate: fadeOnly ? { opacity: 1 } : void 0,
+      transition: { duration: duration.quick, ease: ease.standard },
+      children: [
+        /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            className: cn(
+              "flex min-w-0 flex-col items-start justify-center gap-2 py-1",
+              /* The fan: the middle sources sit a little further right than the
+                 ends, so five chips read as one hand of cards, not as a menu. */
+              "[&>*:nth-child(2)]:translate-x-1.5 [&>*:nth-child(3)]:translate-x-3 [&>*:nth-child(4)]:translate-x-1.5"
+            ),
+            variants: run ? sourcesContainer : void 0,
+            initial: run ? "hidden" : false,
+            animate: run ? "show" : void 0,
+            children: sources.map((node, index) => /* @__PURE__ */ jsx(motion.div, { className: "flex max-w-full", variants: run ? sourceItem : void 0, children: node }, index))
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "self-stretch", children: /* @__PURE__ */ jsx(ConvergeLines, { count: sources.length, animate: run, className: linesClassName }) }),
+        /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            className: "flex items-center",
+            variants: run ? targetItem : void 0,
+            initial: run ? "hidden" : false,
+            animate: run ? "show" : void 0,
+            children: target
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { ConvergeLines, Convergence };

package/dist/chunk-Q6QH52LJ.js

@@ -0,0 +1,38 @@
+import { Badge } from './chunk-UKBNQO6Q.js';
+import { cn } from './chunk-FEK5XGZW.js';
+import { jsx } from 'react/jsx-runtime';
+
+function SignatureChip({
+  label,
+  onEvidence,
+  surface = "canvas",
+  className
+}) {
+  const shared = "h-4 shrink-0 px-1.5 text-[10px] font-medium uppercase tracking-wider";
+  const onImage = surface === "image";
+  if (!onEvidence) {
+    return /* @__PURE__ */ jsx(Badge, { variant: onImage ? "overlay" : "secondary", className: cn(shared, className), children: label });
+  }
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: (event) => {
+        event.stopPropagation();
+        event.preventDefault();
+        onEvidence();
+      },
+      className: cn(
+        shared,
+        "inline-flex items-center rounded-full border border-dashed",
+        onImage ? "border-background/70 bg-foreground/70 text-background backdrop-blur-sm hover:bg-foreground/85" : "border-accent/40 text-accent hover:bg-accent/10",
+        "focus-visible:outline-none focus-visible:ring-2",
+        onImage ? "focus-visible:ring-background/70" : "focus-visible:ring-accent/40",
+        className
+      ),
+      children: label
+    }
+  );
+}
+
+export { SignatureChip };

package/dist/chunk-SY6RV476.js

@@ -0,0 +1,48 @@
+import { cn } from './chunk-FEK5XGZW.js';
+import { __spreadProps, __spreadValues } from './chunk-3GWWZKX7.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var STOPS = [0, 0.25, 0.5, 0.75, 1];
+var EASE = [0, 0.06, 0.25, 0.56, 1];
+var FROST_SOFT = "[mask-image:linear-gradient(var(--glass-dir),transparent_var(--glass-s0),rgba(0,0,0,0.25)_var(--glass-s1),black_var(--glass-s2))] lg:[mask-image:linear-gradient(var(--glass-lg-dir),transparent_var(--glass-lg-s0),rgba(0,0,0,0.25)_var(--glass-lg-s1),black_var(--glass-lg-s2))]";
+var FROST_HEAVY = "[mask-image:linear-gradient(var(--glass-dir),transparent_var(--glass-s1),rgba(0,0,0,0.25)_var(--glass-s2),rgba(0,0,0,0.6)_var(--glass-s3),black_var(--glass-s4))] lg:[mask-image:linear-gradient(var(--glass-lg-dir),transparent_var(--glass-lg-s1),rgba(0,0,0,0.25)_var(--glass-lg-s2),rgba(0,0,0,0.6)_var(--glass-lg-s3),black_var(--glass-lg-s4))]";
+var INK = "bg-[linear-gradient(var(--glass-dir),oklch(0.16_0.012_55_/_0)_var(--glass-s0),oklch(0.16_0.012_55_/_var(--glass-a1))_var(--glass-s1),oklch(0.16_0.012_55_/_var(--glass-a2))_var(--glass-s2),oklch(0.16_0.012_55_/_var(--glass-a3))_var(--glass-s3),oklch(0.16_0.012_55_/_var(--glass-a4))_var(--glass-s4),oklch(0.16_0.012_55_/_var(--glass-a-peak))_100%)] lg:bg-[linear-gradient(var(--glass-lg-dir),oklch(0.16_0.012_55_/_0)_var(--glass-lg-s0),oklch(0.16_0.012_55_/_var(--glass-a1))_var(--glass-lg-s1),oklch(0.16_0.012_55_/_var(--glass-a2))_var(--glass-lg-s2),oklch(0.16_0.012_55_/_var(--glass-a3))_var(--glass-lg-s3),oklch(0.16_0.012_55_/_var(--glass-a4))_var(--glass-lg-s4),oklch(0.16_0.012_55_/_var(--glass-a-peak))_100%)]";
+var BLUR = {
+  sm: ["backdrop-blur-[2px]", "backdrop-blur-sm"],
+  md: ["backdrop-blur-sm", "backdrop-blur-md"],
+  lg: ["backdrop-blur-md", "backdrop-blur-lg"],
+  xl: ["backdrop-blur-lg", "backdrop-blur-xl"]
+};
+function measure(value) {
+  const match = value.trim().match(/^(-?\d*\.?\d+)\s*([a-z%]*)$/i);
+  if (!match) throw new Error(`GlassGround: cannot read stop "${value}"`);
+  return [Number(match[1]), match[2] || "px"];
+}
+function positions(clear, full) {
+  const [from, unit] = measure(clear);
+  const [to] = measure(full);
+  return STOPS.map((fraction) => `${from + (to - from) * fraction}${unit}`);
+}
+function GlassGround({
+  stops,
+  lgStops = stops,
+  peak = 0.96,
+  blur = "xl",
+  className
+}) {
+  const base = positions(stops.clear, stops.full);
+  const lg = positions(lgStops.clear, lgStops.full);
+  const style = __spreadProps(__spreadValues(__spreadValues(__spreadValues({
+    "--glass-dir": stops.direction,
+    "--glass-lg-dir": lgStops.direction
+  }, Object.fromEntries(base.map((position, index) => [`--glass-s${index}`, position]))), Object.fromEntries(lg.map((position, index) => [`--glass-lg-s${index}`, position]))), Object.fromEntries(EASE.slice(1).map((share, index) => [`--glass-a${index + 1}`, String(peak * 0.8 * share)]))), {
+    "--glass-a-peak": String(peak)
+  });
+  return /* @__PURE__ */ jsxs("span", { "aria-hidden": true, className: cn("pointer-events-none absolute inset-0 block", className), style, children: [
+    /* @__PURE__ */ jsx("span", { className: cn("absolute inset-0", BLUR[blur][0], FROST_SOFT) }),
+    /* @__PURE__ */ jsx("span", { className: cn("absolute inset-0", BLUR[blur][1], FROST_HEAVY) }),
+    /* @__PURE__ */ jsx("span", { className: cn("absolute inset-0", INK) })
+  ] });
+}
+
+export { GlassGround };

package/dist/chunk-TH6W2PWG.js

@@ -0,0 +1,213 @@
+import { SignatureChip } from './chunk-Q6QH52LJ.js';
+import { cn } from './chunk-FEK5XGZW.js';
+import { __objRest, __spreadValues } from './chunk-3GWWZKX7.js';
+import { memo } from 'react';
+import { MessageSquareQuote } from 'lucide-react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function DefaultLink(_a) {
+  var _b = _a, { href } = _b, props = __objRest(_b, ["href"]);
+  return /* @__PURE__ */ jsx("a", __spreadValues({ href }, props));
+}
+function MentionSignal({
+  label,
+  count,
+  onMentions,
+  formatCount = String
+}) {
+  const content = /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-0.5", children: [
+    /* @__PURE__ */ jsx(MessageSquareQuote, { className: "h-3.5 w-3.5 opacity-60", "aria-hidden": true }),
+    /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: formatCount(count) })
+  ] });
+  const shared = cn(
+    // `relative z-[2]` keeps this above the row's stretched link overlay.
+    "relative z-[2] inline-flex shrink-0 items-center text-accent",
+    // Same size and weight as the price at the other end of the meta row — keep
+    // these two in step if the price's type changes.
+    "text-[15px] font-bold",
+    // `min-h-6` holds the tap target at the 24px WCAG 2.5.8 floor; `px-1.5
+    // -mx-1.5` buys the horizontal half without moving the pair on screen.
+    "min-h-6 px-1.5 -mx-1.5"
+  );
+  if (!onMentions) {
+    return /* @__PURE__ */ jsx("span", { className: shared, "aria-label": label, children: content });
+  }
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "data-slot": "mentions",
+      "aria-label": label,
+      onClick: (event) => {
+        event.stopPropagation();
+        event.preventDefault();
+        onMentions();
+      },
+      className: cn(
+        shared,
+        "rounded-sm hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+      ),
+      children: content
+    }
+  );
+}
+var MenuItem = memo(function MenuItem2({
+  item,
+  labels,
+  formatPrice,
+  formatCount = String,
+  onOpen,
+  showSignatureBadge = false,
+  signatureTier = "strong",
+  onSignatureEvidence,
+  onMentions,
+  markGradient,
+  venueName,
+  subtitle,
+  href,
+  linkLabel,
+  linkComponent: LinkComponent = DefaultLink,
+  disabled = false,
+  className
+}) {
+  var _a, _b, _c, _d, _e;
+  const firstEntry = (_a = item.sizes_and_prices) == null ? void 0 : _a[0];
+  const quantity = firstEntry == null ? void 0 : firstEntry.size;
+  const hasQuantity = quantity != null && quantity > 0;
+  const allPrices = (_c = (_b = item.sizes_and_prices) == null ? void 0 : _b.map((entry) => entry.price).filter((price) => typeof price === "number" && price > 0)) != null ? _c : [];
+  const minPrice = allPrices.length > 0 ? Math.min(...allPrices) : null;
+  const maxPrice = allPrices.length > 0 ? Math.max(...allPrices) : null;
+  const isPriceRange = minPrice != null && maxPrice != null && minPrice !== maxPrice;
+  const mentionCount = (_e = (_d = item.mentions) != null ? _d : item.review_count) != null ? _e : 0;
+  const isInert = !href && !onOpen;
+  const isActionable = !disabled && !isInert;
+  const handleRowClick = () => {
+    if (disabled) return;
+    onOpen == null ? void 0 : onOpen();
+  };
+  const handleKeyDown = (event) => {
+    if (disabled) return;
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      onOpen == null ? void 0 : onOpen();
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: href || isInert ? void 0 : "button",
+      tabIndex: href || isInert ? void 0 : disabled ? -1 : 0,
+      "aria-disabled": disabled || void 0,
+      onClick: href || isInert ? void 0 : handleRowClick,
+      onKeyDown: href || isInert ? void 0 : handleKeyDown,
+      className: cn(
+        "group relative flex min-h-[72px] items-start gap-3 px-4 py-3",
+        // Radius only where the row is a grid cell. Full-bleed rows run edge to
+        // edge, where a corner radius would round against the viewport.
+        "md:rounded-xl",
+        // 180ms is the EXIT; `hover:duration-*` overrides it to 120ms on the
+        // way in. A hover that leaves as fast as it arrives reads as a flicker
+        // when the pointer crosses a list.
+        !isInert && [
+          "transition-[background-color,box-shadow,transform] duration-[180ms] ease-out motion-reduce:transition-none",
+          "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent"
+        ],
+        isActionable && [
+          "cursor-pointer hover:duration-[120ms]",
+          // Opaque, never alpha: `hover:bg-muted/40` composited to a lightness
+          // delta of 0.004 on the light canvas — a hover state that measured as
+          // nothing.
+          "hover:bg-card dark:hover:bg-surface-2",
+          // Grid cells only. On a full-bleed row the shadow runs off both
+          // viewport edges and reads as a smear; that row widens its tab instead.
+          "md:hover:shadow-[var(--shadow-row-hover)]",
+          // Hover lifts, press sinks — the two must not read as one gesture.
+          "active:scale-[0.985] active:duration-[90ms] active:ease-in active:shadow-none",
+          "active:bg-muted",
+          "motion-reduce:active:scale-100",
+          // The mention count is a button inside a button. While the pointer is
+          // on it the row stops claiming the hover, so only one target is lit.
+          "has-[[data-slot=mentions]:hover]:bg-transparent has-[[data-slot=mentions]:hover]:shadow-none"
+        ],
+        disabled && "cursor-not-allowed opacity-50",
+        className
+      ),
+      children: [
+        href && /* @__PURE__ */ jsx(
+          LinkComponent,
+          {
+            href,
+            "aria-label": linkLabel != null ? linkLabel : item.name,
+            className: "absolute inset-0 z-[1] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent md:rounded-xl"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": true,
+            className: cn(
+              "-ml-4 w-2 shrink-0 self-stretch rounded-r-full bg-muted",
+              // The full-bleed row's hover signal, since it cannot take a shadow.
+              // `-mr-1` absorbs the extra 4px so the text column does not shift as
+              // the mark grows. Grid cells get the shadow instead and hold the mark
+              // still — the tab encodes which section you are in, so the less it
+              // moves, the better it does that job.
+              !isInert && [
+                "transition-[width] duration-[120ms] ease-out motion-reduce:transition-none",
+                "group-hover:-mr-1 group-hover:w-3 md:group-hover:mr-0 md:group-hover:w-2"
+              ]
+            ),
+            style: markGradient ? { backgroundImage: markGradient } : void 0
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-1.5", children: [
+            /* @__PURE__ */ jsx("h3", { className: "text-[15px] font-semibold leading-snug text-foreground", children: item.name }),
+            showSignatureBadge && /* @__PURE__ */ jsx(
+              SignatureChip,
+              {
+                label: signatureTier === "weak" ? labels.mentioned : labels.signature,
+                onEvidence: onSignatureEvidence,
+                className: "mt-0.5"
+              }
+            )
+          ] }),
+          venueName && /* @__PURE__ */ jsx("p", { className: "mt-0.5 truncate text-[12px] font-medium text-foreground/70", children: venueName }),
+          subtitle ? /* @__PURE__ */ jsx("p", { className: "mt-0.5 line-clamp-2 text-xs italic leading-snug text-muted-foreground", children: subtitle }) : item.description && /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: cn(
+                "mt-0.5 text-xs text-muted-foreground",
+                venueName ? "line-clamp-1" : "line-clamp-2"
+              ),
+              children: item.description
+            }
+          ),
+          (minPrice != null || hasQuantity || mentionCount > 0) && /* @__PURE__ */ jsxs("div", { className: "mt-1.5 flex items-baseline justify-between gap-x-2 gap-y-1", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-baseline gap-x-2", children: [
+              minPrice != null && /* @__PURE__ */ jsxs("span", { className: "flex items-baseline gap-1", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-[15px] font-bold tabular-nums text-foreground", children: isPriceRange ? `${formatPrice(minPrice)}\u2013${formatPrice(maxPrice)}` : formatPrice(minPrice) }),
+                /* @__PURE__ */ jsx("span", { className: "text-[11px] text-muted-foreground", children: labels.currency })
+              ] }),
+              hasQuantity && /* @__PURE__ */ jsxs("span", { className: "text-[12px] tabular-nums text-muted-foreground", children: [
+                quantity,
+                item.kind === "dish" ? "g" : "ml"
+              ] })
+            ] }),
+            mentionCount > 0 && /* @__PURE__ */ jsx(
+              MentionSignal,
+              {
+                label: labels.mentions(mentionCount),
+                count: mentionCount,
+                onMentions,
+                formatCount
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+});
+
+export { MentionSignal, MenuItem };

package/dist/chunk-UDN7UHJW.js

@@ -0,0 +1,60 @@
+import { SnapRail, SnapRailDots } from './chunk-DTXNDLSE.js';
+import { PhotoGround } from './chunk-5RWTOT5Y.js';
+import { cn } from './chunk-FEK5XGZW.js';
+import * as React from 'react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+var FOOT_GLASS = cn(
+  "before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:content-[''] before:backdrop-blur-lg",
+  "before:bg-[oklch(0.16_0.012_55_/_0.9)]",
+  "lg:before:[mask-image:linear-gradient(to_top,black_60%,transparent_100%)] lg:before:bg-[linear-gradient(to_top,oklch(0.16_0.012_55_/_0.88)_0%,oklch(0.16_0.012_55_/_0.84)_60%,oklch(0.16_0.012_55_/_0.4)_85%,oklch(0.16_0.012_55_/_0)_100%)]"
+);
+function ConceptCompareRail({
+  backdrops,
+  railClassName,
+  foot,
+  children
+}) {
+  const [active, setActive] = React.useState(0);
+  const count = React.Children.count(children);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      PhotoGround,
+      {
+        className: "-z-10 lg:hidden",
+        mode: "stack",
+        active,
+        photos: backdrops.map((backdrop) => backdrop.src),
+        initials: backdrops.map((backdrop) => backdrop.initial),
+        overlay: true,
+        loading: "eager"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      SnapRail,
+      {
+        itemWidth: "full",
+        gap: "sm",
+        onActiveChange: setActive,
+        className: cn("pb-0 overscroll-x-contain", railClassName),
+        children
+      }
+    ),
+    foot && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "relative isolate flex flex-col gap-3 px-4 pb-4 pt-3",
+          "lg:absolute lg:inset-x-0 lg:bottom-0 lg:z-10 lg:flex-row lg:items-center lg:gap-5 lg:px-5 lg:pb-4 lg:pt-6",
+          FOOT_GLASS
+        ),
+        children: [
+          /* @__PURE__ */ jsx(SnapRailDots, { count, active, className: "lg:hidden" }),
+          foot
+        ]
+      }
+    )
+  ] });
+}
+
+export { ConceptCompareRail };