@bearmenu/ui 0.8.3 → 0.8.6

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/dist/lib/icon-registry.d.ts

@@ -0,0 +1,58 @@
+import { LucideIcon } from 'lucide-react';
+
+/**
+ * The purpose → glyph registry.
+ *
+ * One place recording which glyph means what. Before this existed, ~10 ad-hoc
+ * glyph maps were scattered across the app and the same purpose ended up drawn
+ * two different ways: back as both an arrow and a chevron, "open filters" as
+ * both a funnel and sliders (one surface used both, chosen by which view you
+ * were in), clear and close sharing a bare X.
+ *
+ * Only GENERIC action vocabulary lives here. Product taxonomy — cuisine
+ * shortcuts, facet dimensions, digest categories — stays in the consuming app.
+ *
+ * ## The rules this encodes
+ *
+ * 1. **Arrow leaves, chevron stays.** `ArrowRight` means "you are going to a new
+ *    destination" (see-all links, banner CTAs). `ChevronRight` means "reveal
+ *    more, in place" and is scoped to exactly two jobs: carousel paging and
+ *    row-contained drill-in. Collapsing these is what produced a glyph with
+ *    four meanings.
+ * 2. **Sliders, not a funnel.** A funnel reads as "narrow a list" and collides
+ *    with search and sort iconography at 24px; three sliders read
+ *    unambiguously as "adjust parameters" and carry a badge count cleanly.
+ * 3. **Containment separates clear from close.** A bare `X` leaves a layer. A
+ *    contained `XCircle` resets a value in place without leaving. In a dense
+ *    filter row, bare Xs beside each other cannot say which layer they close.
+ * 4. **Tappable has a container or a colour state; information is muted and
+ *    bare.** This is what disambiguates the overloaded glyphs (`MapPin`,
+ *    `Star`) rather than picking different glyphs for each sense. An
+ *    interactive instance sits in a chip or button and takes an active colour;
+ *    a decorative one is `text-muted-foreground`, `aria-hidden`, outside any
+ *    button, with no hover or active transition.
+ * 5. **Loved and want-to-try are two actions, not one.** `Heart` is
+ *    retrospective ("I have had this and I love it"), `Bookmark` is prospective
+ *    ("I want to try this"). They feed different lists and are mutually
+ *    exclusive per item.
+ */
+
+type IconPurpose = "back" | "seeAll" | "drillIn" | "carouselPrev" | "carouselNext" | "directions" | "externalLink" | "close" | "clear" | "expand" | "filter" | "sort" | "search" | "share" | "favorite" | "wantToTry" | "confirm" | "add" | "remove" | "refresh" | "call" | "report" | "info";
+declare const iconFor: Record<IconPurpose, LucideIcon>;
+/**
+ * Purposes whose glyph must rotate to show state, and by how much.
+ * `expand` is the disclosure chevron: pointing down at rest, up when open.
+ */
+declare const iconRotation: Partial<Record<IconPurpose, number>>;
+/**
+ * Retired glyphs and what replaced them. Kept so a reviewer can tell a
+ * deliberate choice from a regression, and so lint/codemods have a source.
+ */
+declare const retiredIcons: {
+    readonly Filter: "filter → SlidersHorizontal";
+    readonly ChevronRightAsSeeAll: "seeAll → ArrowRight";
+    readonly ChevronLeftAsBack: "back → ArrowLeft";
+    readonly XAsClear: "clear → XCircle";
+};
+
+export { type IconPurpose, iconFor, iconRotation, retiredIcons };

package/dist/lib/icon-registry.js

@@ -0,0 +1,39 @@
+import '../chunk-3GWWZKX7.js';
+import { Info, Flag, Phone, RefreshCw, Trash2, Plus, Check, Bookmark, Heart, Share2, Search, ArrowUpDown, SlidersHorizontal, ChevronDown, XCircle, X, ExternalLink, Navigation, ChevronRight, ChevronLeft, ArrowRight, ArrowLeft } from 'lucide-react';
+
+var iconFor = {
+  back: ArrowLeft,
+  seeAll: ArrowRight,
+  drillIn: ChevronRight,
+  carouselPrev: ChevronLeft,
+  carouselNext: ChevronRight,
+  directions: Navigation,
+  externalLink: ExternalLink,
+  close: X,
+  clear: XCircle,
+  expand: ChevronDown,
+  filter: SlidersHorizontal,
+  sort: ArrowUpDown,
+  search: Search,
+  share: Share2,
+  favorite: Heart,
+  wantToTry: Bookmark,
+  confirm: Check,
+  add: Plus,
+  remove: Trash2,
+  refresh: RefreshCw,
+  call: Phone,
+  report: Flag,
+  info: Info
+};
+var iconRotation = {
+  expand: 180
+};
+var retiredIcons = {
+  Filter: "filter \u2192 SlidersHorizontal",
+  ChevronRightAsSeeAll: "seeAll \u2192 ArrowRight",
+  ChevronLeftAsBack: "back \u2192 ArrowLeft",
+  XAsClear: "clear \u2192 XCircle"
+};
+
+export { iconFor, iconRotation, retiredIcons };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bearmenu/ui",
-  "version": "0.8.3",
+  "version": "0.8.6",
   "description": "BearMenu design system — shared UI tokens, primitives, and components",
   "license": "UNLICENSED",
   "repository": {
@@ -102,6 +102,7 @@
     "@radix-ui/react-tooltip": "^1.2.8",
     "@storybook/addon-a11y": "^10.3.5",
     "@storybook/addon-docs": "^10.3.5",
+    "@storybook/react": "^10.3.5",
     "@storybook/react-vite": "^10.3.5",
     "@tailwindcss/postcss": "^4.2.4",
     "@tailwindcss/vite": "^4.2.4",

package/src/components/accordion.stories.tsx

@@ -8,7 +8,7 @@ const meta = {
 } satisfies Meta<typeof Accordion>;
 
 export default meta;
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof Accordion>;
 
 export const Default: Story = {
   render: () => (

package/src/components/card.tsx

@@ -12,6 +12,29 @@ const cardVariants = cva(
         glass: "glass",
         outline: "bg-transparent border border-border",
         muted: "bg-muted border border-transparent",
+        // `surface` PLUS elevation. The border is NOT replaced, and that is the
+        // whole design of these two.
+        //
+        // In light mode `--card` is pure white on a 0.986 ground — 1.04:1, a
+        // five-in-255 step — so a plain surface is defined by its 1.32:1
+        // hairline alone. That is proportionate under a pill and invisible under
+        // a panel, which is what "this looks flat" means here: there is no z.
+        //
+        // But dropping the border to go shadow-only breaks both themes. Every
+        // elevation token in this system is downward-offset, so a white
+        // shadow-only box has no defined TOP edge on a near-white page and
+        // reads as half-drawn. And on the 0.155 dark canvas the shadow is
+        // nearly invisible, so `--border` is the only thing left describing the
+        // box. The border IS the dark-mode fallback, which is why neither
+        // variant needs a `dark:` branch.
+        elevated: "bg-card border border-border shadow-[var(--shadow-card)]",
+        // The same recipe at panel scale — see `--shadow-panel` for why a
+        // bigger box does not simply take the card shadow. Resting elevation
+        // only: deliberately absent from `compoundVariants` below, because a
+        // several-hundred-pixel slab that translates under the cursor is a
+        // wobble rather than a lift. A panel that size delegates interaction to
+        // its children.
+        elevatedPanel: "bg-card border border-border shadow-[var(--shadow-panel)]",
       },
       size: {
         sm: "[&_[data-slot=card-header]]:p-4 [&_[data-slot=card-content]]:p-4 [&_[data-slot=card-content]]:pt-0 [&_[data-slot=card-footer]]:p-4 [&_[data-slot=card-footer]]:pt-0",
@@ -21,11 +44,31 @@ const cardVariants = cva(
       },
       // Interactive variant follows v1.0 `press-response` archetype:
       // hover lift via shadow + translate (200ms), press scale-down (instant).
+      //
+      // The hover SHADOW is not here — it lives in `compoundVariants` below, so
+      // it can be expressed relative to the resting elevation. `box-shadow` is
+      // a single property, so a flat `hover:shadow-md` REPLACES a resting
+      // shadow rather than stepping up from it: an `elevated` card would
+      // translate upward while its shadow got tighter, which is physically
+      // backwards and reads as a flicker.
       interactive: {
-        true: "cursor-pointer transition-[transform,border-color,box-shadow] duration-[var(--duration-quick)] ease-[var(--ease-standard)] hover:border-primary/40 hover:-translate-y-0.5 hover:shadow-md active:scale-[0.97] active:duration-[var(--duration-instant)] motion-reduce:hover:translate-y-0 motion-reduce:active:scale-100",
+        true: "cursor-pointer transition-[transform,border-color,box-shadow] duration-[var(--duration-quick)] ease-[var(--ease-standard)] hover:border-primary/40 hover:-translate-y-0.5 active:scale-[0.97] active:duration-[var(--duration-instant)] motion-reduce:hover:translate-y-0 motion-reduce:active:scale-100",
         false: "",
       },
     },
+    // The first four reproduce the previous `hover:shadow-md` exactly; only
+    // `elevated` is new. `elevatedPanel` is absent on purpose — see its note.
+    compoundVariants: [
+      { variant: "surface", interactive: true, class: "hover:shadow-md" },
+      { variant: "glass", interactive: true, class: "hover:shadow-md" },
+      { variant: "outline", interactive: true, class: "hover:shadow-md" },
+      { variant: "muted", interactive: true, class: "hover:shadow-md" },
+      {
+        variant: "elevated",
+        interactive: true,
+        class: "hover:shadow-[var(--shadow-card-hover)]",
+      },
+    ],
   defaultVariants: {
     variant: "surface",
     size: "default",

package/src/components/category-deck.stories.tsx

@@ -0,0 +1,96 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { CategoryDeck, CategoryDeckSkeleton } from "./category-deck";
+
+function poster(color: string, label: string) {
+  return {
+    src:
+      "data:image/svg+xml;utf8," +
+      encodeURIComponent(
+        `<svg xmlns="http://www.w3.org/2000/svg" width="240" height="320"><rect width="240" height="320" fill="${color}"/><text x="50%" y="50%" font-family="monospace" font-size="14" fill="#fff" text-anchor="middle">${label}</text></svg>`
+      ),
+  };
+}
+
+// Explicitly annotated rather than `satisfies`: the meta-level decorator makes
+// the inferred type reference storybook's internal CSF module, which tsc cannot
+// name portably (TS2742).
+const meta: Meta<typeof CategoryDeck> = {
+  title: "Events/CategoryDeck",
+  component: CategoryDeck,
+  tags: ["autodocs"],
+  args: {
+    name: "Petreceri",
+    meta: "32 events · /petreceri",
+    href: "/petreceri",
+    posters: [
+      poster("#7c5a3a", "1"),
+      poster("#5a4a3a", "2"),
+      poster("#8a6a4a", "3"),
+      poster("#3a2a1a", "4"),
+    ],
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[220px] p-8">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "The hub's category doorway — one link, four decorative posters fanned back to front. The fan opens on hover AND keyboard focus (`group-focus-visible`), never on hover alone.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof CategoryDeck>;
+
+export const Default: Story = {};
+
+/** Fewer than four posters supplied — the remaining slots render as placeholders. */
+export const PartialPosters: Story = {
+  args: {
+    posters: [poster("#7c5a3a", "1"), poster("#5a4a3a", "2")],
+  },
+};
+
+/** No posters at all — every slot is a placeholder block. */
+export const NoPosters: Story = {
+  args: { posters: [] },
+};
+
+/**
+ * `content` replaces the `<img>` entirely — for callers whose cards are not
+ * photographs. The menu hub fans dish categories this way, drawing a tinted
+ * colour field per card instead of a photo it is not allowed to show.
+ */
+export const CustomContent: Story = {
+  args: {
+    name: "Pizza",
+    meta: "214 dishes · from 18 lei",
+    posters: ["#8d5524", "#a3663a", "#6f4520", "#b07d4e"].map((background, index) => ({
+      content: (
+        <div
+          className="flex h-full w-full items-end p-2 text-[10px] font-bold text-white/80"
+          style={{ background }}
+        >
+          Pizza {index + 1}
+        </div>
+      ),
+    })),
+  },
+};
+
+/** Rendered as a `<button>` when only `onClick` is given. */
+export const AsButton: Story = {
+  args: { href: undefined, onClick: () => alert("Category selected") },
+};
+
+/** The fan at rest — never spread, since the loading state has nothing to hover. */
+export const Skeleton: Story = {
+  render: () => <CategoryDeckSkeleton />,
+};