@bearmenu/ui 0.8.13 → 0.8.14

package/dist/components/place-card.js

@@ -1,145 +1,220 @@
-import { Text } from '../chunk-7BWTYWM3.js';
+import { OVERLAY_PILL } from '../chunk-EZG2NELX.js';
+import { HOVER_IMAGE_MOTION, HOVER_IMAGE_WRAPPER, HOVER_MOTION, HOVER_LIFT_GRID_GROUP } from '../chunk-XCB3F6SF.js';
+import { NEUTRAL_ICON_FILTER } from '../chunk-LQWGZIYA.js';
+import { GradeAtom } from '../chunk-DJD3EMPK.js';
+import { showsGradeAtom } from '../chunk-I5V446BX.js';
+import { Separator } from '../chunk-NWZGSLPU.js';
+import { springSnappy } from '../chunk-OIV7B44M.js';
+import { Skeleton } from '../chunk-XBBEX4SF.js';
+import { Badge } from '../chunk-P43B3ONY.js';
 import { cn } from '../chunk-FEK5XGZW.js';
-import '../chunk-3GWWZKX7.js';
-import { memo, useState } from 'react';
-import { UtensilsCrossed, Star, Wine, MapPin, Clock } from 'lucide-react';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { __objRest, __spreadValues } from '../chunk-MMUBH76A.js';
+import { forwardRef, memo, useState, useMemo } from 'react';
+import { UtensilsCrossed, MapPin, Star } from 'lucide-react';
+import { motion } from 'framer-motion';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
+var DefaultLink = forwardRef(function DefaultLink2(_a, ref) {
+  var _b = _a, { href } = _b, props = __objRest(_b, ["href"]);
+  return /* @__PURE__ */ jsx("a", __spreadValues({ ref, href }, props));
+});
+function DefaultImage({ src, alt, priority, className, onError }) {
+  return (
+    // eslint-disable-next-line @next/next/no-img-element
+    /* @__PURE__ */ jsx(
+      "img",
+      {
+        src,
+        alt,
+        loading: priority ? "eager" : "lazy",
+        decoding: "async",
+        className,
+        onError
+      }
+    )
+  );
+}
 function formatDistance(meters) {
-  return meters ? `${(meters / 1e3).toFixed(1)} km` : "\u2014";
+  if (meters < 1e3) return `${Math.round(meters)} m`;
+  return `${(meters / 1e3).toFixed(1)} km`;
 }
-function formatRating(rating) {
-  return (rating == null ? void 0 : rating.rating) ? rating.rating.toFixed(1) : null;
+function HeadlineRating({ place, labels }) {
+  var _a, _b;
+  const grade = (_a = place.reviews_digest) == null ? void 0 : _a.grade;
+  if (showsGradeAtom(grade, "xs")) return /* @__PURE__ */ jsx(GradeAtom, { grade, labels: labels.grade, size: "xs" });
+  const rating = (_b = place.rating) == null ? void 0 : _b.rating;
+  if (rating === void 0) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-1 text-xs font-medium text-foreground", children: [
+    /* @__PURE__ */ jsx(Star, { className: "h-3 w-3 fill-current", "aria-hidden": true }),
+    /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: rating.toFixed(1) })
+  ] });
 }
+function PriceLevel({ level, label }) {
+  const filled = Math.min(Math.max(Math.round(level), 1), 4);
+  return /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", "aria-label": label, children: [
+    "$".repeat(filled),
+    /* @__PURE__ */ jsx("span", { className: "opacity-30", children: "$".repeat(4 - filled) })
+  ] });
+}
+var STATIC_ROOT_CLASSES = `group relative flex w-full select-none flex-col ${HOVER_MOTION} ${HOVER_LIFT_GRID_GROUP}`;
+var ROOT_CLASSES = `${STATIC_ROOT_CLASSES} cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:rounded-xl`;
+var DEFAULT_SIZES = "(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw";
 var PlaceCard = memo(function PlaceCard2({
   place,
   labels,
-  onClick,
-  className,
-  priority
+  priority = false,
+  imageSizes = DEFAULT_SIZES,
+  href,
+  linkComponent: LinkComponent = DefaultLink,
+  imageComponent: ImageComponent = DefaultImage,
+  onOpen,
+  footer,
+  photoOverlay,
+  className
 }) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
+  var _a, _b, _c, _d, _e, _f, _g, _h;
   const [imgError, setImgError] = useState(false);
-  const ratingDisplay = formatRating(place.rating);
-  const reviewCount = (_b = place.review_count) != null ? _b : (_a = place.rating) == null ? void 0 : _a.count;
-  const showHeader = !!place.thumbnail_url && !imgError;
-  const distanceMeters = (_d = (_c = place.location) == null ? void 0 : _c.distance) == null ? void 0 : _d.meters;
-  const schedule = (_g = (_e = place.today_schedule) == null ? void 0 : _e[0]) != null ? _g : (_f = place.hours) == null ? void 0 : _f[0];
-  const scheduleHour = place.open_now ? schedule == null ? void 0 : schedule.closes_at : schedule == null ? void 0 : schedule.opens_at;
-  const scheduleLabel = place.open_now ? labels.until : labels.opensAt;
-  const sharedClasses = cn(
-    "glass rounded-3xl border border-transparent bg-transparent p-0 text-left text-card-foreground transition-transform duration-300 ease-in-out hover:border-border/20 h-full flex flex-col w-full",
-    onClick && "cursor-pointer [@media(hover:hover)]:hover:-translate-y-1 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-    className
-  );
-  const content = /* @__PURE__ */ jsxs("div", { className: "p-4 flex-1 flex flex-col", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3 mb-3", children: [
-      /* @__PURE__ */ jsx("div", { className: "w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center overflow-hidden flex-shrink-0", children: showHeader ? (
-        // eslint-disable-next-line @next/next/no-img-element
-        /* @__PURE__ */ jsx(
-          "img",
-          {
-            src: place.thumbnail_url,
-            alt: place.name,
-            title: place.name,
-            width: 48,
-            height: 48,
-            loading: priority ? "eager" : "lazy",
-            decoding: "async",
-            className: "w-full h-full object-cover",
-            onError: () => setImgError(true)
-          }
-        )
-      ) : /* @__PURE__ */ jsx(
-        UtensilsCrossed,
-        {
-          className: "w-6 h-6 text-primary/60",
-          "aria-hidden": "true"
-        }
-      ) }),
-      /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
-        /* @__PURE__ */ jsx(Text, { as: "h3", weight: "bold", leading: "tight", color: "default", className: "text-lg mb-2", children: place.name }),
-        ratingDisplay !== null && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-          /* @__PURE__ */ jsx(Star, { className: "w-4 h-4 fill-primary text-primary", "aria-hidden": "true" }),
-          /* @__PURE__ */ jsx("span", { className: "font-semibold text-sm", children: ratingDisplay }),
-          reviewCount !== void 0 && reviewCount !== null && /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
-            "(",
-            reviewCount,
-            ")"
-          ] })
-        ] })
-      ] })
-    ] }),
-    (place.price_dishes || place.price_drinks) && /* @__PURE__ */ jsx("div", { className: "mb-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 text-xs", children: [
-      ((_h = place.price_dishes) == null ? void 0 : _h.price_range_low) != null && ((_i = place.price_dishes) == null ? void 0 : _i.price_range_high) != null && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-primary", children: [
-        /* @__PURE__ */ jsx(UtensilsCrossed, { className: "w-4 h-4", "aria-hidden": "true" }),
-        /* @__PURE__ */ jsxs("span", { children: [
-          place.price_dishes.price_range_low,
-          "-",
-          place.price_dishes.price_range_high,
-          " ",
-          labels.currency
-        ] })
+  const MotionLink = useMemo(() => motion.create(LinkComponent), [LinkComponent]);
+  const coverUrl = imgError ? void 0 : place.cover_url;
+  const cuisine = (_a = place.cuisines) == null ? void 0 : _a[0];
+  const distance = (_c = (_b = place.location) == null ? void 0 : _b.distance) == null ? void 0 : _c.meters;
+  const neighbourhood = (_e = (_d = place.areas) == null ? void 0 : _d[0]) == null ? void 0 : _e.name;
+  const priceLevel = (_h = (_f = place.price_dishes) == null ? void 0 : _f.price_score) != null ? _h : (_g = place.price_drinks) == null ? void 0 : _g.price_score;
+  const showPrice = priceLevel !== void 0 && priceLevel > 0;
+  const ariaLabel = labels.viewDetails(place.name);
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      onOpen == null ? void 0 : onOpen(place);
+    }
+  };
+  const handleAnchorClick = (e) => {
+    if (!onOpen || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.button !== 0) return;
+    e.preventDefault();
+    onOpen(place);
+  };
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "relative aspect-[4/3] w-full overflow-hidden rounded-xl",
+          HOVER_IMAGE_WRAPPER
+        ),
+        children: [
+          coverUrl ? /* @__PURE__ */ jsx(
+            ImageComponent,
+            {
+              src: coverUrl,
+              alt: place.name,
+              sizes: imageSizes,
+              priority,
+              className: `absolute inset-0 h-full w-full object-cover ${HOVER_IMAGE_MOTION} motion-image-enter`,
+              onError: () => setImgError(true)
+            }
+          ) : (
+            /* The neutral grey placeholder every card type shares. The glyph
+               sits at `--accent` (the brand brown) rather than `text-muted-
+               foreground`, so it reads as intentional instead of as a washed-out
+               failed image. */
+            /* @__PURE__ */ jsx("div", { className: "flex h-full w-full items-center justify-center bg-gradient-to-br from-muted to-border", children: /* @__PURE__ */ jsx(
+              UtensilsCrossed,
+              {
+                className: "h-10 w-10 text-[color:var(--accent)]",
+                style: { filter: NEUTRAL_ICON_FILTER },
+                "aria-hidden": true
+              }
+            ) })
+          ),
+          place.open_now === true && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "absolute right-2.5 top-2.5 h-2 w-2 rounded-full bg-green-500 ring-2 ring-white/70",
+              "aria-hidden": true
+            }
+          ),
+          place.open_now === false && /* `Badge variant="overlay"` + the shared cover geometry: this pill and
+             the caller's `photoOverlay` sit on the same photo and must match. */
+          /* @__PURE__ */ jsx(Badge, { variant: "overlay", className: cn(OVERLAY_PILL, "absolute right-2 top-2"), children: labels.closed })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "mt-2.5 flex flex-col", children: [
+      /* @__PURE__ */ jsxs("div", { className: "mb-1 flex items-baseline justify-between gap-2", children: [
+        /* @__PURE__ */ jsx("p", { className: "min-w-0 line-clamp-1 text-sm font-semibold text-foreground", children: place.name }),
+        /* @__PURE__ */ jsx(HeadlineRating, { place, labels })
       ] }),
-      ((_j = place.price_drinks) == null ? void 0 : _j.price_range_low) != null && ((_k = place.price_drinks) == null ? void 0 : _k.price_range_high) != null && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-primary", children: [
-        /* @__PURE__ */ jsx(Wine, { className: "w-4 h-4", "aria-hidden": "true" }),
-        /* @__PURE__ */ jsxs("span", { children: [
-          place.price_drinks.price_range_low,
-          "-",
-          place.price_drinks.price_range_high,
-          " ",
-          labels.currency
-        ] })
-      ] })
-    ] }) }),
-    /* @__PURE__ */ jsx("div", { className: "mb-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm text-primary", children: [
-      distanceMeters !== void 0 && distanceMeters !== null && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-          /* @__PURE__ */ jsx(MapPin, { className: "w-3 h-3", "aria-hidden": "true" }),
-          /* @__PURE__ */ jsx("span", { className: "text-xs", children: formatDistance(distanceMeters) })
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
+        (cuisine || showPrice) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: [
+          cuisine && /* @__PURE__ */ jsx("span", { className: "capitalize", children: cuisine }),
+          cuisine && showPrice && /* @__PURE__ */ jsx("span", { className: "text-border", children: "\xB7" }),
+          showPrice && /* @__PURE__ */ jsx(PriceLevel, { level: priceLevel, label: labels.priceLevel(priceLevel) })
         ] }),
-        /* @__PURE__ */ jsx("span", { children: "\xB7" })
+        distance !== void 0 ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: [
+          /* @__PURE__ */ jsx(MapPin, { className: "h-3 w-3 shrink-0", "aria-hidden": true }),
+          /* @__PURE__ */ jsx("span", { children: formatDistance(distance) })
+        ] }) : neighbourhood ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: [
+          /* @__PURE__ */ jsx(MapPin, { className: "h-3 w-3 shrink-0", "aria-hidden": true }),
+          /* @__PURE__ */ jsx("span", { className: "line-clamp-1", children: neighbourhood })
+        ] }) : null
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ jsx(
-          Clock,
-          {
-            className: cn(
-              "w-3 h-3",
-              place.open_now ? "text-green-500" : "text-muted-foreground"
-            ),
-            "aria-hidden": "true"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: cn(
-              "text-xs",
-              place.open_now ? "text-green-500" : "text-muted-foreground"
-            ),
-            children: place.open_now ? labels.open : labels.closed
-          }
-        ),
-        scheduleHour != null && /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: cn(
-              "text-xs",
-              place.open_now ? "text-green-500" : "text-muted-foreground"
-            ),
-            children: `\xB7 ${scheduleLabel} ${String(scheduleHour).padStart(2, "0")}:00`
-          }
-        )
+      footer && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Separator, { className: "my-2" }),
+        /* @__PURE__ */ jsx("div", { children: footer })
       ] })
-    ] }) }),
-    place.description && /* @__PURE__ */ jsx("div", { className: "mb-4", children: /* @__PURE__ */ jsx(Text, { as: "p", variant: "caption", color: "muted", className: "line-clamp-2", children: place.description }) })
+    ] })
+  ] });
+  return /* @__PURE__ */ jsxs("div", { className: cn("group/card relative w-full", className), children: [
+    href ? /* @__PURE__ */ jsx(
+      MotionLink,
+      {
+        href,
+        "aria-label": ariaLabel,
+        onClick: handleAnchorClick,
+        whileTap: { scale: 0.98 },
+        transition: springSnappy,
+        className: ROOT_CLASSES,
+        children: body
+      }
+    ) : onOpen ? /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        role: "button",
+        tabIndex: 0,
+        "aria-label": ariaLabel,
+        onClick: () => onOpen(place),
+        onKeyDown: handleKeyDown,
+        whileTap: { scale: 0.98 },
+        transition: springSnappy,
+        className: ROOT_CLASSES,
+        children: body
+      }
+    ) : (
+      /* Neither destination nor handler (a fixture in a marketing hero): a
+         plain block, not a focusable control that announces and does nothing. */
+      /* @__PURE__ */ jsx("div", { className: STATIC_ROOT_CLASSES, children: body })
+    ),
+    photoOverlay && /* @__PURE__ */ jsx("div", { className: cn("absolute left-2 top-2 z-10", HOVER_MOTION, HOVER_LIFT_GRID_GROUP), children: photoOverlay })
   ] });
-  if (onClick) {
-    return /* @__PURE__ */ jsx("button", { type: "button", className: sharedClasses, onClick: () => onClick(place), children: content });
-  }
-  return /* @__PURE__ */ jsx("div", { className: sharedClasses, children: content });
 });
-PlaceCard.displayName = "PlaceCard";
+function PlaceCardSkeleton({ footer, className }) {
+  return /* @__PURE__ */ jsxs("div", { "aria-hidden": "true", className: cn("flex w-full flex-col", className), children: [
+    /* @__PURE__ */ jsx(Skeleton, { className: "aspect-[4/3] w-full rounded-xl" }),
+    /* @__PURE__ */ jsxs("div", { className: "mt-2.5 flex flex-col", children: [
+      /* @__PURE__ */ jsxs("div", { className: "mb-1 flex items-center justify-between gap-2", children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-3/5" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-9 rounded-md" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-2/5" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-1/3" })
+      ] }),
+      footer && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Separator, { className: "my-2" }),
+        /* @__PURE__ */ jsx("div", { children: footer })
+      ] })
+    ] })
+  ] });
+}
 
-export { PlaceCard };
+export { PlaceCard, PlaceCardSkeleton };

package/dist/components/place-details-mobile.d.ts

@@ -1,5 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { PlacePreview, PlaceDetailsMobileLabels } from './place-types.js';
+import { P as PlacePreview, e as PlaceDetailsMobileLabels } from '../place-types-BHdeMMiG.js';
+import '../lib/grade.js';
 
 interface PlaceDetailsMobileProps {
     place: PlacePreview;

package/dist/components/place-details-mobile.js

@@ -1,11 +1,11 @@
-import { PlaceAboutTab } from '../chunk-HSIYYA2E.js';
-import '../chunk-VG3PND3D.js';
-import '../chunk-ZDAHKI3A.js';
-import '../chunk-WSRWFA6K.js';
-import { Text } from '../chunk-7BWTYWM3.js';
-import { Badge } from '../chunk-2CXU5WZO.js';
+import { PlaceAboutTab } from '../chunk-HQU6QVAN.js';
+import '../chunk-FMTJGO76.js';
+import '../chunk-MWB7S54O.js';
+import '../chunk-NWZGSLPU.js';
+import { Text } from '../chunk-ZLMRVBD7.js';
+import { Badge } from '../chunk-P43B3ONY.js';
 import { cn } from '../chunk-FEK5XGZW.js';
-import '../chunk-3GWWZKX7.js';
+import '../chunk-MMUBH76A.js';
 import { useState } from 'react';
 import { UtensilsCrossed, Star, DollarSign, Clock, Info, MessageSquare, CalendarDays } from 'lucide-react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';

package/dist/components/place-schedule-week.d.ts

@@ -1,5 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { PlaceSchedule, PlaceScheduleWeekLabels } from './place-types.js';
+import { f as PlaceSchedule, g as PlaceScheduleWeekLabels } from '../place-types-BHdeMMiG.js';
+import '../lib/grade.js';
 
 interface PlaceScheduleWeekProps {
     schedule?: PlaceSchedule;

package/dist/components/place-schedule-week.js

@@ -1,4 +1,4 @@
-export { PlaceScheduleWeek } from '../chunk-VG3PND3D.js';
-import '../chunk-7BWTYWM3.js';
+export { PlaceScheduleWeek } from '../chunk-FMTJGO76.js';
+import '../chunk-ZLMRVBD7.js';
 import '../chunk-FEK5XGZW.js';
-import '../chunk-3GWWZKX7.js';
+import '../chunk-MMUBH76A.js';