@bearmenu/ui 0.8.4 → 0.8.7

package/dist/components/venue-events-block.d.ts

@@ -0,0 +1,143 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+/**
+ * VenueEventsBlock — "one venue, a whole fortnight": the venue and its
+ * upcoming nights on the left, its menu on the right. Every string arrives
+ * pre-formatted from the caller (ratings, prices, counts) — this component
+ * does no number or currency formatting, same contract as `EventCard`.
+ *
+ * Three independent link surfaces share one `linkComponent`: the venue
+ * header, each night row, and the "all events" chip. Each renders a link only
+ * when its own `href` is given, a plain element otherwise — none of them
+ * assume the others are interactive.
+ *
+ * `venue`/`nights`/`dishes` default to an empty venue / `[]` so a caller using
+ * only `venueContent`/`nightsContent`/`menuContent` never has to fabricate
+ * placeholder data just to satisfy these props.
+ */
+type VenueEventsBlockLinkProps = {
+    href: string;
+    className?: string;
+    children: React.ReactNode;
+};
+type VenueEventsBlockVenue = {
+    name: string;
+    ratingLabel?: string;
+    metaLabel?: string;
+    thumbnailUrl?: string;
+    isOpenNow?: boolean;
+    href?: string;
+};
+type VenueEventsBlockNight = {
+    id: string;
+    dayLabel: string;
+    title: string;
+    timeLabel: string;
+    href?: string;
+};
+type VenueEventsBlockDish = {
+    id: string;
+    name: string;
+    description?: string;
+    priceLabel: string;
+    quantityLabel?: string;
+    mentionsLabel?: string;
+};
+type VenueEventsBlockProps = {
+    /**
+     * Plain venue data this block formats itself into the header card. Fine
+     * for a caller with nothing richer than name/rating/meta — and kept for
+     * the existing stories — but a consuming app that already owns a place
+     * card (real photo, description, cuisine/price meta) should reach for
+     * `venueContent` instead: rebuilding that card here would fork it, and the
+     * fork would drift the moment either copy changes.
+     */
+    venue?: VenueEventsBlockVenue;
+    /**
+     * Plain night data this block formats itself into a row. Fine for a
+     * caller with nothing richer than day/title/time — and kept for the
+     * existing stories — but a consuming app that already owns an event row
+     * component (poster, description, tags) should reach for `nightsContent`
+     * instead, for the same reason.
+     */
+    nights?: VenueEventsBlockNight[];
+    allEventsLabel: string;
+    allEventsHref?: string;
+    menuHeader?: React.ReactNode;
+    /**
+     * Plain dish data this block formats itself into a row. Fine for a caller
+     * with nothing richer than name/price/description — and kept for the
+     * existing stories — but a consuming app that already owns a menu-row
+     * component (signature badges, an evidence/mentions control, category
+     * marks, an ingredient-hue fallback) should reach for `menuContent`
+     * instead: rebuilding that row's markup here would fork it, and the fork
+     * would drift the moment either copy changes.
+     */
+    dishes?: VenueEventsBlockDish[];
+    /**
+     * Replaces the internally-rendered venue header entirely when given —
+     * `venue.name`/`ratingLabel`/`metaLabel`/`thumbnailUrl`/`isOpenNow` are
+     * then ignored (`venue.href` still wraps this slot in a link when given —
+     * a caller whose card is already a link should omit `venue.href` and let
+     * its own card own the anchor). Exists because this block should own the
+     * LAYOUT and nothing about the shape of a venue card: the consuming app
+     * has its own canonical place card (used on its place list, its search
+     * results, its map sheet), and the DS must not maintain a second
+     * implementation of it.
+     */
+    venueContent?: React.ReactNode;
+    /**
+     * Replaces the internally-rendered night rows entirely when given —
+     * `nights` is then ignored. Exists because this block should own the
+     * LAYOUT and nothing about the shape of a night row: the consuming app
+     * has its own canonical event row (used on its timeline, its event
+     * detail's "more from this venue"), and the DS must not maintain a
+     * second implementation of it. Render that row component here, one per
+     * item, with its own key/link/interaction — this slot only provides the
+     * column it sits in.
+     */
+    nightsContent?: React.ReactNode;
+    /**
+     * Replaces the internally-rendered dish rows entirely when given —
+     * `dishes` is then ignored. Exists because this block should own the
+     * LAYOUT (venue, nights, menu column) and nothing about the shape of a
+     * menu row: the consuming app has its own canonical row (used on its menu
+     * page, its place-details sheet, its must-try and pairings lists), and the
+     * DS must not maintain a second implementation of it. Render that row
+     * component here, one per item, with its own key/link/interaction — this
+     * slot only provides the column it sits in.
+     */
+    menuContent?: React.ReactNode;
+    footnote?: string;
+    linkComponent?: React.ComponentType<VenueEventsBlockLinkProps>;
+    className?: string;
+};
+declare function VenueEventsBlock({ venue, nights, allEventsLabel, allEventsHref, menuHeader, dishes, venueContent, nightsContent, menuContent, footnote, linkComponent: LinkComponent, className, }: VenueEventsBlockProps): react_jsx_runtime.JSX.Element;
+type VenueEventsBlockSkeletonProps = {
+    /**
+     * Mirrors `VenueEventsBlockProps.venueContent`: a caller rendering its own
+     * place card through that slot should pass its own card-shaped skeleton
+     * here too, so the loading state matches what actually mounts instead of
+     * the block's built-in thumbnail-and-two-lines placeholder.
+     */
+    venueContent?: React.ReactNode;
+    /**
+     * Mirrors `VenueEventsBlockProps.nightsContent`: a caller rendering its own
+     * row component through that slot should pass its own row-shaped
+     * skeletons here too, so the loading state matches what actually mounts
+     * instead of three generic placeholder rows.
+     */
+    nightsContent?: React.ReactNode;
+    /**
+     * Mirrors `VenueEventsBlockProps.menuContent`: a caller rendering its own
+     * row component through that slot should pass its own row-shaped skeleton
+     * here too, so the loading state matches what actually mounts instead of
+     * three generic placeholder rows.
+     */
+    menuContent?: React.ReactNode;
+    className?: string;
+};
+declare function VenueEventsBlockSkeleton({ venueContent, nightsContent, menuContent, className, }: VenueEventsBlockSkeletonProps): react_jsx_runtime.JSX.Element;
+
+export { VenueEventsBlock, type VenueEventsBlockDish, type VenueEventsBlockLinkProps, type VenueEventsBlockNight, type VenueEventsBlockProps, VenueEventsBlockSkeleton, type VenueEventsBlockSkeletonProps, type VenueEventsBlockVenue };

package/dist/components/venue-events-block.js

@@ -0,0 +1,222 @@
+import { Separator } from '../chunk-WSRWFA6K.js';
+import { Card } from '../chunk-UXWAOISG.js';
+import { Skeleton } from '../chunk-QXHMPJ35.js';
+import '../chunk-7BWTYWM3.js';
+import { cn } from '../chunk-FEK5XGZW.js';
+import { __objRest, __spreadValues } from '../chunk-3GWWZKX7.js';
+import * as React from 'react';
+import { Star, Quote } 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 VenueEventsBlock({
+  venue = { name: "" },
+  nights = [],
+  allEventsLabel,
+  allEventsHref,
+  menuHeader,
+  dishes = [],
+  venueContent,
+  nightsContent,
+  menuContent,
+  footnote,
+  linkComponent: LinkComponent = DefaultLink,
+  className
+}) {
+  const [thumbError, setThumbError] = React.useState(false);
+  const showThumb = !!venue.thumbnailUrl && !thumbError;
+  const venueHeader = /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 rounded-xl border border-border bg-card p-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "relative h-16 w-16 shrink-0 overflow-hidden rounded-lg bg-muted", children: [
+      showThumb && // eslint-disable-next-line @next/next/no-img-element
+      /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: venue.thumbnailUrl,
+          alt: "",
+          loading: "lazy",
+          decoding: "async",
+          className: "h-full w-full object-cover",
+          onError: () => setThumbError(true)
+        }
+      ),
+      venue.isOpenNow && /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "absolute right-1 top-1 h-1.5 w-1.5 rounded-full bg-success ring-2 ring-background",
+          "aria-hidden": true
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-semibold", children: venue.name }),
+        venue.ratingLabel && /* @__PURE__ */ jsxs("span", { className: "ml-auto flex shrink-0 items-center gap-1 text-xs font-medium text-foreground", children: [
+          /* @__PURE__ */ jsx(Star, { className: "h-3 w-3 fill-current text-primary", "aria-hidden": true }),
+          venue.ratingLabel
+        ] })
+      ] }),
+      venue.metaLabel && /* @__PURE__ */ jsx("div", { className: "mt-0.5 truncate text-xs text-muted-foreground", children: venue.metaLabel })
+    ] })
+  ] });
+  return (
+    // `Card variant="elevatedPanel"` rather than a hand-rolled surface. This
+    // root WAS `border border-border bg-card` — a `surface` card reimplemented
+    // inside the DS, which is how it and the skeleton below drifted apart from
+    // the primitive and from each other.
+    //
+    // The elevation is the point: in light mode `--card` on `--background` is
+    // 1.04:1, so a panel this size was defined by a 1.32:1 hairline alone and
+    // read as a drawn rectangle rather than a raised thing.
+    //
+    // `rounded-2xl` is exactly the 18px this used to hardcode
+    // (`--radius` 0.625rem + 8px) and now re-scales with the token like every
+    // other surface. `overflow-hidden` clips descendants, never the element's
+    // own box-shadow, so the right column keeps its radius and the panel keeps
+    // its lift.
+    /* @__PURE__ */ jsxs(
+      Card,
+      {
+        variant: "elevatedPanel",
+        className: cn("grid grid-cols-1 overflow-hidden rounded-2xl md:grid-cols-2", className),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "p-5", children: [
+            venue.href ? /* @__PURE__ */ jsx(
+              LinkComponent,
+              {
+                href: venue.href,
+                className: "block rounded-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+                children: venueContent != null ? venueContent : venueHeader
+              }
+            ) : venueContent != null ? venueContent : venueHeader,
+            /* @__PURE__ */ jsx("div", { children: nightsContent != null ? nightsContent : nights.map((night) => {
+              const row = /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(Separator, { className: "absolute inset-x-0 top-0" }),
+                /* @__PURE__ */ jsx("span", { className: "w-11 shrink-0 font-mono text-xs text-muted-foreground", children: night.dayLabel }),
+                /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 text-[13.5px] font-semibold leading-[1.35]", children: night.title }),
+                /* @__PURE__ */ jsx("span", { className: "shrink-0 font-mono text-xs text-muted-foreground", children: night.timeLabel })
+              ] });
+              const rowClasses = "relative flex items-center gap-[11px] py-[9px]";
+              return night.href ? /* @__PURE__ */ jsx(
+                LinkComponent,
+                {
+                  href: night.href,
+                  className: cn(
+                    rowClasses,
+                    "cursor-pointer transition-colors duration-150 hover:text-primary motion-reduce:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-md"
+                  ),
+                  children: row
+                },
+                night.id
+              ) : /* @__PURE__ */ jsx("div", { className: rowClasses, children: row }, night.id);
+            }) }),
+            allEventsHref ? /* @__PURE__ */ jsxs(
+              LinkComponent,
+              {
+                href: allEventsHref,
+                className: "mt-3 inline-flex h-9 items-center rounded-full border border-border px-3 text-xs font-semibold text-foreground transition-colors duration-150 hover:bg-muted motion-reduce:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+                children: [
+                  allEventsLabel,
+                  " \u203A"
+                ]
+              }
+            ) : /* @__PURE__ */ jsxs("div", { className: "mt-3 inline-flex h-9 items-center rounded-full border border-border px-3 text-xs font-semibold text-foreground", children: [
+              allEventsLabel,
+              " \u203A"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "relative bg-muted/50 px-[18px] pb-5 pt-4", children: [
+            /* @__PURE__ */ jsx(Separator, { className: "absolute inset-x-0 top-0 md:hidden" }),
+            /* @__PURE__ */ jsx(Separator, { orientation: "vertical", className: "absolute inset-y-0 left-0 hidden md:block" }),
+            menuHeader,
+            menuContent != null ? menuContent : dishes.map((dish) => /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "relative flex items-start gap-3 py-3 first:[&>[data-slot=separator]]:hidden",
+                children: [
+                  /* @__PURE__ */ jsx(Separator, { className: "absolute inset-x-0 top-0" }),
+                  /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                    /* @__PURE__ */ jsx("div", { className: "text-[15px] font-medium leading-[1.3]", children: dish.name }),
+                    dish.description && /* @__PURE__ */ jsx("div", { className: "mt-[3px] line-clamp-1 text-xs text-muted-foreground", children: dish.description }),
+                    /* @__PURE__ */ jsxs("div", { className: "mt-1.5 flex items-center gap-2 text-[11px] tabular-nums text-muted-foreground", children: [
+                      dish.quantityLabel && /* @__PURE__ */ jsx("span", { children: dish.quantityLabel }),
+                      dish.mentionsLabel && /* @__PURE__ */ jsxs("span", { className: "ml-auto inline-flex items-center gap-1 text-[11.5px] text-muted-foreground", children: [
+                        /* @__PURE__ */ jsx(Quote, { className: "h-3 w-3", "aria-hidden": true }),
+                        dish.mentionsLabel
+                      ] })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsx("span", { className: "shrink-0 text-sm font-bold text-primary", children: dish.priceLabel })
+                ]
+              },
+              dish.id
+            )),
+            footnote && /* @__PURE__ */ jsx("div", { className: "mt-3 text-xs text-muted-foreground", children: footnote })
+          ] })
+        ]
+      }
+    )
+  );
+}
+function VenueEventsBlockSkeleton({
+  venueContent,
+  nightsContent,
+  menuContent,
+  className
+}) {
+  return (
+    // Identical root to the component above, deliberately — the two drifted
+    // once already by both hand-rolling it, so they now share the variant.
+    /* @__PURE__ */ jsxs(
+      Card,
+      {
+        "aria-hidden": "true",
+        variant: "elevatedPanel",
+        className: cn("grid grid-cols-1 overflow-hidden rounded-2xl md:grid-cols-2", className),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "p-5", children: [
+            venueContent != null ? venueContent : /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 rounded-xl border border-border bg-card p-3", children: [
+              /* @__PURE__ */ jsx(Skeleton, { className: "h-16 w-16 shrink-0 rounded-lg" }),
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-2/5" }),
+                /* @__PURE__ */ jsx(Skeleton, { className: "mt-1.5 h-3 w-1/3" })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx("div", { children: nightsContent != null ? nightsContent : Array.from({ length: 3 }, (_, index) => /* @__PURE__ */ jsxs("div", { className: "relative flex items-center gap-[11px] py-[9px]", children: [
+              /* @__PURE__ */ jsx(Separator, { className: "absolute inset-x-0 top-0" }),
+              /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-11 shrink-0" }),
+              /* @__PURE__ */ jsx(Skeleton, { className: "h-[13.5px] flex-1" }),
+              /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-10 shrink-0" })
+            ] }, index)) }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "mt-3 h-9 w-40 rounded-full" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "relative bg-muted/50 px-[18px] pb-5 pt-4", children: [
+            /* @__PURE__ */ jsx(Separator, { className: "absolute inset-x-0 top-0 md:hidden" }),
+            /* @__PURE__ */ jsx(Separator, { orientation: "vertical", className: "absolute inset-y-0 left-0 hidden md:block" }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "mb-2 h-4 w-32" }),
+            menuContent != null ? menuContent : Array.from({ length: 3 }, (_, index) => /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "relative flex items-start gap-3 py-3 first:[&>[data-slot=separator]]:hidden",
+                children: [
+                  /* @__PURE__ */ jsx(Separator, { className: "absolute inset-x-0 top-0" }),
+                  /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                    /* @__PURE__ */ jsx(Skeleton, { className: "h-[15px] w-3/5" }),
+                    /* @__PURE__ */ jsx(Skeleton, { className: "mt-[3px] h-3 w-4/5" }),
+                    /* @__PURE__ */ jsx(Skeleton, { className: "mt-1.5 h-3 w-1/4" })
+                  ] }),
+                  /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-12 shrink-0" })
+                ]
+              },
+              index
+            ))
+          ] })
+        ]
+      }
+    )
+  );
+}
+
+export { VenueEventsBlock, VenueEventsBlockSkeleton };

package/dist/components/weekend-panel.d.ts

@@ -0,0 +1,44 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+type WeekendPanelLinkProps = {
+    href: string;
+    className?: string;
+    children: React.ReactNode;
+};
+/** Accessible names for the pause/play toggle, injected so the DS owns no copy. */
+type WeekendPanelLabels = {
+    /** Name announced while the carousel is running (the button pauses it). */
+    pause: string;
+    /** Name announced while the carousel is paused (the button resumes it). */
+    play: string;
+};
+type WeekendPanelProps = {
+    dayLabel: string;
+    /** Caller-composed, e.g. "23 events". */
+    countLabel: string;
+    actionLabel: string;
+    actionHref?: string;
+    linkComponent?: React.ComponentType<WeekendPanelLinkProps>;
+    onActionClick?: () => void;
+    isHighlighted?: boolean;
+    /** Loop duration for the slide/dots animation. Default 7 — sibling panels typically stagger at 8.5 and 10. */
+    durationSeconds?: number;
+    /**
+     * Accessible names for the pause/play toggle. Required — the control is
+     * only omitted under `prefers-reduced-motion`, where the labels go unused.
+     */
+    labels: WeekendPanelLabels;
+    /** The event cards. The animation is built around exactly four (two pages of two). */
+    children?: React.ReactNode;
+    className?: string;
+};
+declare function WeekendPanel({ dayLabel, countLabel, actionLabel, actionHref, linkComponent: LinkComponent, onActionClick, isHighlighted, durationSeconds, labels, children, className, }: WeekendPanelProps): react_jsx_runtime.JSX.Element;
+type WeekendPanelSkeletonProps = {
+    isHighlighted?: boolean;
+    className?: string;
+};
+/** The panel at rest: the two visible cards of the two-up carousel, no slide. */
+declare function WeekendPanelSkeleton({ isHighlighted, className }: WeekendPanelSkeletonProps): react_jsx_runtime.JSX.Element;
+
+export { WeekendPanel, type WeekendPanelLabels, type WeekendPanelLinkProps, type WeekendPanelProps, WeekendPanelSkeleton, type WeekendPanelSkeletonProps };

package/dist/components/weekend-panel.js

@@ -0,0 +1,231 @@
+import { MotionPlayPause } from '../chunk-TT3WFS6S.js';
+import '../chunk-2WDJR6K7.js';
+import { Skeleton } from '../chunk-QXHMPJ35.js';
+import { cn } from '../chunk-FEK5XGZW.js';
+import { __objRest, __spreadValues } from '../chunk-3GWWZKX7.js';
+import * as React from 'react';
+import { ChevronRight } from 'lucide-react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var WEEKEND_PANEL_TRACK_GAP_PX = 14;
+var WEEKEND_PANEL_DEFAULT_DURATION_SECONDS = 7;
+var WEEKEND_PANEL_SLIDE_KEYFRAMES_ID = "ds-weekend-panel-slide";
+var WEEKEND_PANEL_DOT_A_KEYFRAMES_ID = "ds-weekend-panel-dot-a";
+var WEEKEND_PANEL_DOT_B_KEYFRAMES_ID = "ds-weekend-panel-dot-b";
+function usePrefersReducedMotion() {
+  const [reduced, setReduced] = React.useState(false);
+  React.useEffect(() => {
+    if (typeof window === "undefined" || !window.matchMedia) return;
+    const query = window.matchMedia("(prefers-reduced-motion: reduce)");
+    setReduced(query.matches);
+    const onChange = () => setReduced(query.matches);
+    query.addEventListener("change", onChange);
+    return () => query.removeEventListener("change", onChange);
+  }, []);
+  return reduced;
+}
+function useInViewport() {
+  const ref = React.useRef(null);
+  const [inView, setInView] = React.useState(true);
+  React.useEffect(() => {
+    const node = ref.current;
+    if (!node || typeof IntersectionObserver === "undefined") return;
+    const observer = new IntersectionObserver(([entry]) => setInView(entry.isIntersecting), {
+      threshold: 0
+    });
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, []);
+  return [ref, inView];
+}
+function DefaultLink(_a) {
+  var _b = _a, { href } = _b, props = __objRest(_b, ["href"]);
+  return /* @__PURE__ */ jsx("a", __spreadValues({ href }, props));
+}
+function WeekendPanel({
+  dayLabel,
+  countLabel,
+  actionLabel,
+  actionHref,
+  linkComponent: LinkComponent = DefaultLink,
+  onActionClick,
+  isHighlighted,
+  durationSeconds = WEEKEND_PANEL_DEFAULT_DURATION_SECONDS,
+  labels,
+  children,
+  className
+}) {
+  const prefersReducedMotion = usePrefersReducedMotion();
+  const [panelRef, inView] = useInViewport();
+  const [isHovered, setIsHovered] = React.useState(false);
+  const [isFocused, setIsFocused] = React.useState(false);
+  const [isManuallyPaused, setIsManuallyPaused] = React.useState(false);
+  const [playPauseReplayToken, setPlayPauseReplayToken] = React.useState(0);
+  const isPaused = isManuallyPaused || isHovered || isFocused || !inView;
+  const action = /* @__PURE__ */ jsxs("span", { className: "ml-auto flex items-center gap-0.5 text-[12.5px] text-muted-foreground", children: [
+    actionLabel,
+    /* @__PURE__ */ jsx(ChevronRight, { className: "h-3.5 w-3.5", "aria-hidden": true })
+  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: panelRef,
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
+      onFocus: () => setIsFocused(true),
+      onBlur: () => setIsFocused(false),
+      className: cn(
+        "relative overflow-hidden rounded-2xl border bg-card py-4",
+        isHighlighted ? "border-primary/40" : "border-border",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("style", { children: `
+        @keyframes ${WEEKEND_PANEL_SLIDE_KEYFRAMES_ID} {
+          0%, 45% { transform: translateX(0); }
+          50%, 95% { transform: translateX(calc(-100% - ${WEEKEND_PANEL_TRACK_GAP_PX}px)); }
+          100% { transform: translateX(0); }
+        }
+        @keyframes ${WEEKEND_PANEL_DOT_A_KEYFRAMES_ID} {
+          0% { background: var(--primary); width: 18px; }
+          45% { background: var(--primary); width: 18px; }
+          50% { background: color-mix(in oklch, var(--muted-foreground) 35%, transparent); width: 6px; }
+          100% { background: color-mix(in oklch, var(--muted-foreground) 35%, transparent); width: 6px; }
+        }
+        @keyframes ${WEEKEND_PANEL_DOT_B_KEYFRAMES_ID} {
+          0% { background: color-mix(in oklch, var(--muted-foreground) 35%, transparent); width: 6px; }
+          50% { background: color-mix(in oklch, var(--muted-foreground) 35%, transparent); width: 6px; }
+          95% { background: var(--primary); width: 18px; }
+          100% { background: var(--primary); width: 18px; }
+        }
+      ` }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-[9px] px-4 pb-3", children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "text-[15.5px] font-extrabold tracking-[-0.02em] sm:text-[17px]",
+                isHighlighted && "text-primary"
+              ),
+              children: dayLabel
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "font-mono text-xs",
+                isHighlighted ? "text-primary" : "text-muted-foreground"
+              ),
+              children: countLabel
+            }
+          ),
+          actionHref ? /* @__PURE__ */ jsx(LinkComponent, { href: actionHref, className: "ml-auto", children: action }) : onActionClick ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onActionClick,
+              className: "ml-auto cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-md",
+              children: action
+            }
+          ) : action
+        ] }),
+        prefersReducedMotion ? /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-3.5 px-4", children }) : /* @__PURE__ */ jsx("div", { className: "overflow-hidden px-4", children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "flex gap-3.5",
+            style: {
+              animationName: WEEKEND_PANEL_SLIDE_KEYFRAMES_ID,
+              animationDuration: `${durationSeconds}s`,
+              animationTimingFunction: "ease-in-out",
+              animationIterationCount: "infinite",
+              animationPlayState: isPaused ? "paused" : "running"
+            },
+            children: React.Children.map(children, (child) => /* @__PURE__ */ jsx("div", { className: "w-[calc((100%-14px)/2)] flex-none", children: child }))
+          }
+        ) }),
+        !prefersReducedMotion && /* @__PURE__ */ jsxs("div", { className: "mt-3.5 grid grid-cols-[1fr_auto_1fr] items-center px-4", children: [
+          /* @__PURE__ */ jsx("span", { "aria-hidden": true }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-1.5", "aria-hidden": true, children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "block h-1.5 w-[18px] rounded-full bg-primary",
+                style: {
+                  animationName: WEEKEND_PANEL_DOT_A_KEYFRAMES_ID,
+                  animationDuration: `${durationSeconds}s`,
+                  animationTimingFunction: "ease-in-out",
+                  animationIterationCount: "infinite",
+                  animationPlayState: isPaused ? "paused" : "running"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "block h-1.5 w-1.5 rounded-full bg-muted-foreground/35",
+                style: {
+                  animationName: WEEKEND_PANEL_DOT_B_KEYFRAMES_ID,
+                  animationDuration: `${durationSeconds}s`,
+                  animationTimingFunction: "ease-in-out",
+                  animationIterationCount: "infinite",
+                  animationPlayState: isPaused ? "paused" : "running"
+                }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => setIsManuallyPaused((current) => !current),
+              onPointerDown: () => setPlayPauseReplayToken((n) => n + 1),
+              "aria-label": isManuallyPaused ? labels.play : labels.pause,
+              "aria-pressed": isManuallyPaused,
+              className: "flex h-11 w-11 shrink-0 cursor-pointer items-center justify-center rounded-full text-muted-foreground transition-colors duration-150 hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 motion-reduce:transition-none",
+              children: /* @__PURE__ */ jsx(
+                MotionPlayPause,
+                {
+                  active: !isManuallyPaused,
+                  replayToken: playPauseReplayToken,
+                  className: "size-4"
+                }
+              )
+            }
+          ) })
+        ] })
+      ]
+    }
+  );
+}
+function WeekendPanelSkeleton({ isHighlighted, className }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: cn(
+        "relative overflow-hidden rounded-2xl border bg-card py-4",
+        isHighlighted ? "border-primary/40" : "border-border",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-[9px] px-4 pb-3", children: [
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-[15.5px] w-16 sm:h-[17px]" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-14" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "ml-auto h-3 w-14" })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-3.5 px-4", children: Array.from({ length: 2 }, (_, index) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+          /* @__PURE__ */ jsx(Skeleton, { className: "aspect-[4/3] w-full" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-[13.5px] w-4/5" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-3/5" })
+        ] }, index)) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-1.5 pt-3.5", children: [
+          /* @__PURE__ */ jsx("span", { className: "block h-1.5 w-[18px] rounded-full bg-muted" }),
+          /* @__PURE__ */ jsx("span", { className: "block h-1.5 w-1.5 rounded-full bg-muted" })
+        ] })
+      ]
+    }
+  );
+}
+
+export { WeekendPanel, WeekendPanelSkeleton };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bearmenu/ui",
-  "version": "0.8.4",
+  "version": "0.8.7",
   "description": "BearMenu design system — shared UI tokens, primitives, and components",
   "license": "UNLICENSED",
   "repository": {