@bearmenu/ui 0.8.8 → 0.8.10

package/src/components/weekday-theme-banner.tsx

@@ -0,0 +1,231 @@
+import { cn } from "../lib/utils";
+
+/**
+ * WeekdayThemeBanner — the day's editorial theme, with the whole week beside it.
+ *
+ * Showing all seven days is the point: a banner that only says "it is Burger
+ * Thursday" is an assertion, while one that shows Wednesday was salads and
+ * Friday is pizza reads as a standing rhythm the reader can come back for. The
+ * other six days are also the only affordance for browsing to one.
+ *
+ * ## The active day is the caller's, not the component's
+ *
+ * `activeDay` is an index into `days`, resolved by the caller from the READER's
+ * clock. Resolving it here would use the server's, and a server in UTC and a
+ * reader in Bucharest disagree about which day it is for two hours out of every
+ * twenty-four.
+ *
+ * No directive: with `dayHref` the week rail is links and renders on the
+ * server; with `onDayChange` it is buttons and needs a client caller.
+ */
+
+export type WeekdayThemeBannerLinkProps = {
+  href: string;
+  className?: string;
+  children: React.ReactNode;
+};
+
+function DefaultLink({ href, ...props }: WeekdayThemeBannerLinkProps) {
+  return <a href={href} {...props} />;
+}
+
+export type WeekdayThemeDay = {
+  /** Short code, e.g. "THU". Already localised. */
+  code: string;
+  /** Theme name, e.g. "Burger Thursday". */
+  name: string;
+  /** Short form for the rail, e.g. "Burger". Falls back to `name`. */
+  shortName?: string;
+  /** Items under the theme. Omit where there is no count to show. */
+  count?: number;
+};
+
+export type WeekdayThemeBannerProps = {
+  days: WeekdayThemeDay[];
+  /** Index into `days` for the reader's own today. */
+  activeDay: number;
+  /** Kicker over the title, e.g. "TODAY IS THURSDAY". Composed by the caller. */
+  kicker?: string;
+  kickerIcon?: React.ReactNode;
+  /** The banner's body copy for the active day. */
+  body?: string;
+  /** Heading over the week rail, e.g. "THE WEEK". */
+  weekLabel?: string;
+  /** The primary action — pass a rendered button or link. */
+  action?: React.ReactNode;
+  /** Note beside the action, e.g. "Bruno picks nine, ranked on mentions". */
+  actionNote?: string;
+  /** Destination per day index. Renders the rail as links. */
+  dayHref?: (day: WeekdayThemeDay, index: number) => string;
+  /** Selects a day in place. Renders the rail as buttons. */
+  onDayChange?: (index: number) => void;
+  /**
+   * The day's photograph.
+   *
+   * This is the one editorial slot on a menu hub that carries a plated dish,
+   * and it can because these are art-directed assets shipped with the app, not
+   * generated item photos pulled off a menu row. Without one the banner falls
+   * back to its flat ground and still reads — but the flat version is the
+   * degraded state, not the design.
+   */
+  imageUrl?: string;
+  linkComponent?: React.ComponentType<WeekdayThemeBannerLinkProps>;
+  className?: string;
+};
+
+export function WeekdayThemeBanner({
+  days,
+  activeDay,
+  kicker,
+  kickerIcon,
+  body,
+  weekLabel,
+  action,
+  actionNote,
+  dayHref,
+  onDayChange,
+  imageUrl,
+  linkComponent: LinkComponent = DefaultLink,
+  className,
+}: WeekdayThemeBannerProps) {
+  const active = days[activeDay];
+  if (!active) return null;
+
+  return (
+    <div
+      className={cn(
+        "relative grid overflow-hidden rounded-[18px] bg-[linear-gradient(120deg,oklch(0.32_0.06_45),oklch(0.24_0.04_40))] text-white lg:grid-cols-[1fr_auto]",
+        className
+      )}
+    >
+      {imageUrl && (
+        <>
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img
+            src={imageUrl}
+            alt=""
+            aria-hidden
+            className="absolute inset-0 h-full w-full object-cover"
+          />
+          {/*
+            The scrim covers the WHOLE banner, not just the text side.
+            It used to fade to near-transparent on the right, which looked
+            better in isolation and made the week rail — seven lines of 12px
+            type — sit directly on whatever the plate happened to be. A photo
+            you can half-read under is worth less than seven labels you can
+            read. Still a gradient rather than a flat wash, so the image keeps
+            some depth on the right.
+          */}
+          <div
+            aria-hidden
+            className="absolute inset-0 bg-[linear-gradient(100deg,oklch(0.18_0.03_45_/_0.94)_0%,oklch(0.18_0.03_45_/_0.82)_45%,oklch(0.18_0.03_45_/_0.66)_100%)]"
+          />
+        </>
+      )}
+
+      {!imageUrl && (
+        <span
+          aria-hidden
+          className="pointer-events-none absolute bottom-0 right-[28%] select-none font-serif text-[140px] font-bold leading-none text-white/[0.06]"
+        >
+          {active.code}
+        </span>
+      )}
+
+      <div className="relative z-[1] flex flex-col gap-2.5 p-4 lg:gap-3 lg:p-6">
+        {kicker && (
+          <span className="inline-flex w-max items-center gap-1.5 rounded-full bg-white/15 px-2.5 py-1 text-[10.5px] font-bold tracking-[0.09em]">
+            {kickerIcon}
+            {kicker}
+          </span>
+        )}
+
+        <h3 className="font-serif text-[24px] font-semibold tracking-[-0.02em] lg:text-[36px]">
+          {active.name}
+        </h3>
+
+        {body && <p className="max-w-[520px] text-[13.5px] leading-[1.5] opacity-90">{body}</p>}
+
+        {(action || actionNote) && (
+          <div className="mt-1 flex flex-wrap items-center gap-3">
+            {action}
+            {actionNote && <span className="text-xs opacity-75">{actionNote}</span>}
+          </div>
+        )}
+      </div>
+
+      <div
+        className={cn(
+          "relative z-[1] hidden border-t border-white/15 p-4 lg:block lg:min-w-[240px] lg:border-l lg:border-t-0 lg:p-5",
+          // Over a photograph the rail needs its own ground, or seven lines of
+          // small type land on whatever the plate happens to be.
+          imageUrl && "bg-black/45 backdrop-blur-[2px]"
+        )}
+      >
+        {weekLabel && (
+          <div className="mb-2 text-[10px] font-bold tracking-[0.12em] opacity-70">
+            {weekLabel}
+          </div>
+        )}
+
+        <ul className="grid grid-cols-2 gap-x-4 sm:grid-cols-4 lg:grid-cols-1">
+          {days.map((day, index) => {
+            const isActive = index === activeDay;
+            const content = (
+              <>
+                <b className="w-8 shrink-0 font-mono text-[11px] font-medium opacity-70">
+                  {day.code}
+                </b>
+                <span className="min-w-0 flex-1 truncate">{day.shortName ?? day.name}</span>
+                {day.count != null && (
+                  <span className="shrink-0 tabular-nums opacity-70">{day.count}</span>
+                )}
+              </>
+            );
+
+            // Today is set BIGGER, not just bolder. Weight alone was doing all
+            // the work at 12.5px against six neighbours, which is not enough
+            // separation to answer "which one is today" at a glance — the
+            // question the rail exists to answer.
+            const rowClasses = cn(
+              "flex w-full items-center gap-2 rounded transition-opacity",
+              isActive
+                ? "-mx-1.5 bg-white/10 px-1.5 py-1.5 text-[14.5px] font-extrabold"
+                : "py-[5px] text-[12.5px] opacity-70 hover:opacity-100"
+            );
+
+            return (
+              <li key={day.code}>
+                {dayHref ? (
+                  <LinkComponent
+                    href={dayHref(day, index)}
+                    className={cn(
+                      rowClasses,
+                      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/60"
+                    )}
+                  >
+                    {content}
+                  </LinkComponent>
+                ) : onDayChange ? (
+                  <button
+                    type="button"
+                    aria-pressed={isActive}
+                    onClick={() => onDayChange(index)}
+                    className={cn(
+                      rowClasses,
+                      "text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/60"
+                    )}
+                  >
+                    {content}
+                  </button>
+                ) : (
+                  <span className={rowClasses}>{content}</span>
+                )}
+              </li>
+            );
+          })}
+        </ul>
+      </div>
+    </div>
+  );
+}

package/dist/{chunk-XWMRABZW.js → chunk-HSIYYA2E.js}

@@ -1,6 +1,6 @@
 import { PlaceScheduleWeek } from './chunk-VG3PND3D.js';
-import { Separator } from './chunk-WSRWFA6K.js';
 import { Tag } from './chunk-ZDAHKI3A.js';
+import { Separator } from './chunk-WSRWFA6K.js';
 import { Text } from './chunk-7BWTYWM3.js';
 import { cn } from './chunk-FEK5XGZW.js';
 import { __spreadProps, __spreadValues } from './chunk-3GWWZKX7.js';