@bearmenu/ui 0.8.4 → 0.8.7

package/dist/chunk-UXWAOISG.js

@@ -0,0 +1,170 @@
+import { textVariants } from './chunk-7BWTYWM3.js';
+import { cn } from './chunk-FEK5XGZW.js';
+import { __objRest, __spreadValues } from './chunk-3GWWZKX7.js';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { jsx } from 'react/jsx-runtime';
+
+var cardVariants = cva(
+  "rounded-3xl text-card-foreground transition-[background-color,border-color] duration-[var(--duration-quick)] ease-[var(--ease-standard)]",
+  {
+    variants: {
+      variant: {
+        surface: "bg-card border border-border",
+        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",
+        default: "[&_[data-slot=card-header]]:p-6 [&_[data-slot=card-content]]:p-6 [&_[data-slot=card-content]]:pt-0 [&_[data-slot=card-footer]]:p-6 [&_[data-slot=card-footer]]:pt-0",
+        lg: "[&_[data-slot=card-header]]:p-8 [&_[data-slot=card-content]]:p-8 [&_[data-slot=card-content]]:pt-0 [&_[data-slot=card-footer]]:p-8 [&_[data-slot=card-footer]]:pt-0"
+      },
+      // 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 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",
+      interactive: false
+    }
+  }
+);
+var Card = React.forwardRef((_a, ref) => {
+  var _b = _a, { className, variant, size, interactive } = _b, props = __objRest(_b, ["className", "variant", "size", "interactive"]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    __spreadValues({
+      ref,
+      "data-slot": "card",
+      className: cn(cardVariants({ variant, size, interactive }), className)
+    }, props)
+  );
+});
+Card.displayName = "Card";
+var CardHeader = React.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+    return /* @__PURE__ */ jsx(
+      "div",
+      __spreadValues({
+        ref,
+        "data-slot": "card-header",
+        className: cn("flex flex-col space-y-1.5 p-6", className)
+      }, props)
+    );
+  }
+);
+CardHeader.displayName = "CardHeader";
+var CardTitle = React.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+    return /* @__PURE__ */ jsx(
+      "div",
+      __spreadValues({
+        ref,
+        "data-slot": "card-title",
+        className: cn(textVariants({ variant: "h4", wrap: "balance" }), className)
+      }, props)
+    );
+  }
+);
+CardTitle.displayName = "CardTitle";
+var CardDescription = React.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+    return /* @__PURE__ */ jsx(
+      "div",
+      __spreadValues({
+        ref,
+        "data-slot": "card-description",
+        className: cn("text-sm", textVariants({ color: "muted", wrap: "pretty" }), className)
+      }, props)
+    );
+  }
+);
+CardDescription.displayName = "CardDescription";
+var CardContent = React.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+    return /* @__PURE__ */ jsx("div", __spreadValues({ ref, "data-slot": "card-content", className: cn("p-6 pt-0", className) }, props));
+  }
+);
+CardContent.displayName = "CardContent";
+var CardAction = React.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+    return /* @__PURE__ */ jsx(
+      "div",
+      __spreadValues({
+        ref,
+        "data-slot": "card-action",
+        className: cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className)
+      }, props)
+    );
+  }
+);
+CardAction.displayName = "CardAction";
+var CardFooter = React.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+    return /* @__PURE__ */ jsx(
+      "div",
+      __spreadValues({
+        ref,
+        "data-slot": "card-footer",
+        className: cn("flex items-center p-6 pt-0", className)
+      }, props)
+    );
+  }
+);
+CardFooter.displayName = "CardFooter";
+
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, cardVariants };

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

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

package/dist/{chunk-VBA45GLP.js → chunk-ZDAHKI3A.js}

@@ -15,10 +15,20 @@ var tagVariants = cva(
         success: "border-success/30 bg-success/10 text-success",
         warning: "border-warning/30 bg-warning/10 text-warning",
         destructive: "border-destructive/30 bg-destructive/10 text-destructive",
-        outline: "border-border bg-transparent text-foreground"
+        outline: "border-border bg-transparent text-foreground",
+        /**
+         * Decorative metadata — a tag the reader scans past, not one that
+         * labels a state. `outline` at full `text-foreground` is too loud
+         * repeated a dozen times down a list, and `default`'s `bg-muted` fill
+         * is reserved: in the event row family a FILLED chip means live.
+         */
+        quiet: "border-border bg-transparent text-muted-foreground"
       },
       size: {
-        sm: "h-5 px-2 text-[10px]",
+        // 22px/11px, matching the event row family's chip. 10px was the
+        // smallest type in the package and below the floor used everywhere
+        // else; there is no surface that wants it.
+        sm: "h-[22px] px-2 text-[11px]",
         default: "h-6 px-2.5",
         lg: "h-7 px-3 text-sm"
       }

package/dist/components/card.d.ts

@@ -3,12 +3,12 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const cardVariants: (props?: ({
-    variant?: "outline" | "glass" | "muted" | "surface" | null | undefined;
+    variant?: "outline" | "glass" | "muted" | "surface" | "elevated" | "elevatedPanel" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
     interactive?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
-    variant?: "outline" | "glass" | "muted" | "surface" | null | undefined;
+    variant?: "outline" | "glass" | "muted" | "surface" | "elevated" | "elevatedPanel" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
     interactive?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/card.js

@@ -1,127 +1,4 @@
-import { textVariants } from '../chunk-7BWTYWM3.js';
-import { cn } from '../chunk-FEK5XGZW.js';
-import { __objRest, __spreadValues } from '../chunk-3GWWZKX7.js';
-import * as React from 'react';
-import { cva } from 'class-variance-authority';
-import { jsx } from 'react/jsx-runtime';
-
-var cardVariants = cva(
-  "rounded-3xl text-card-foreground transition-[background-color,border-color] duration-[var(--duration-quick)] ease-[var(--ease-standard)]",
-  {
-    variants: {
-      variant: {
-        surface: "bg-card border border-border",
-        glass: "glass",
-        outline: "bg-transparent border border-border",
-        muted: "bg-muted border border-transparent"
-      },
-      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",
-        default: "[&_[data-slot=card-header]]:p-6 [&_[data-slot=card-content]]:p-6 [&_[data-slot=card-content]]:pt-0 [&_[data-slot=card-footer]]:p-6 [&_[data-slot=card-footer]]:pt-0",
-        lg: "[&_[data-slot=card-header]]:p-8 [&_[data-slot=card-content]]:p-8 [&_[data-slot=card-content]]:pt-0 [&_[data-slot=card-footer]]:p-8 [&_[data-slot=card-footer]]:pt-0"
-      },
-      // Interactive variant follows v1.0 `press-response` archetype:
-      // hover lift via shadow + translate (200ms), press scale-down (instant).
-      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",
-        false: ""
-      }
-    },
-    defaultVariants: {
-      variant: "surface",
-      size: "default",
-      interactive: false
-    }
-  }
-);
-var Card = React.forwardRef((_a, ref) => {
-  var _b = _a, { className, variant, size, interactive } = _b, props = __objRest(_b, ["className", "variant", "size", "interactive"]);
-  return /* @__PURE__ */ jsx(
-    "div",
-    __spreadValues({
-      ref,
-      "data-slot": "card",
-      className: cn(cardVariants({ variant, size, interactive }), className)
-    }, props)
-  );
-});
-Card.displayName = "Card";
-var CardHeader = React.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-    return /* @__PURE__ */ jsx(
-      "div",
-      __spreadValues({
-        ref,
-        "data-slot": "card-header",
-        className: cn("flex flex-col space-y-1.5 p-6", className)
-      }, props)
-    );
-  }
-);
-CardHeader.displayName = "CardHeader";
-var CardTitle = React.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-    return /* @__PURE__ */ jsx(
-      "div",
-      __spreadValues({
-        ref,
-        "data-slot": "card-title",
-        className: cn(textVariants({ variant: "h4", wrap: "balance" }), className)
-      }, props)
-    );
-  }
-);
-CardTitle.displayName = "CardTitle";
-var CardDescription = React.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-    return /* @__PURE__ */ jsx(
-      "div",
-      __spreadValues({
-        ref,
-        "data-slot": "card-description",
-        className: cn("text-sm", textVariants({ color: "muted", wrap: "pretty" }), className)
-      }, props)
-    );
-  }
-);
-CardDescription.displayName = "CardDescription";
-var CardContent = React.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-    return /* @__PURE__ */ jsx("div", __spreadValues({ ref, "data-slot": "card-content", className: cn("p-6 pt-0", className) }, props));
-  }
-);
-CardContent.displayName = "CardContent";
-var CardAction = React.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-    return /* @__PURE__ */ jsx(
-      "div",
-      __spreadValues({
-        ref,
-        "data-slot": "card-action",
-        className: cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className)
-      }, props)
-    );
-  }
-);
-CardAction.displayName = "CardAction";
-var CardFooter = React.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-    return /* @__PURE__ */ jsx(
-      "div",
-      __spreadValues({
-        ref,
-        "data-slot": "card-footer",
-        className: cn("flex items-center p-6 pt-0", className)
-      }, props)
-    );
-  }
-);
-CardFooter.displayName = "CardFooter";
-
-export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, cardVariants };
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, cardVariants } from '../chunk-UXWAOISG.js';
+import '../chunk-7BWTYWM3.js';
+import '../chunk-FEK5XGZW.js';
+import '../chunk-3GWWZKX7.js';

package/dist/components/category-deck.d.ts

@@ -0,0 +1,50 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+type CategoryDeckPoster = {
+    src?: string;
+    alt?: string;
+    /**
+     * Rendered in the card instead of an `<img>`. Wins over `src`.
+     *
+     * The deck was built for event posters, where every card is a photograph.
+     * The menu hub fans the same deck over dish categories, and that app renders
+     * no menu-item photography on card surfaces — it draws a tinted colour field
+     * carrying the item's name. Without a slot, those decks fanned four empty
+     * `bg-muted` blocks.
+     *
+     * Same escape hatch, and the same name-and-precedence rule, as
+     * `FeaturedRailItemProps.fallback` and `PosterTapeItem.fallback` — except
+     * those two are fallbacks shown when a poster is ABSENT, while this one is a
+     * deliberate replacement. Hence `content`, not `fallback`: a caller passing
+     * it is choosing what the card is, not what it degrades to.
+     */
+    content?: React.ReactNode;
+};
+type CategoryDeckLinkProps = {
+    href: string;
+    className?: string;
+    children: React.ReactNode;
+    onClick?: (mouseEvent: React.MouseEvent) => void;
+};
+type CategoryDeckProps = {
+    name: string;
+    /** Caller-composed, e.g. "32 events · /petreceri". */
+    meta: string;
+    /** Up to four posters, fanned back to front. A poster with neither `content`
+     *  nor `src` renders a placeholder block. */
+    posters: CategoryDeckPoster[];
+    href?: string;
+    /** Defaults to a plain `<a>`. Pass `next/link` in a Next app. */
+    linkComponent?: React.ComponentType<CategoryDeckLinkProps>;
+    onClick?: (mouseEvent: React.MouseEvent) => void;
+    className?: string;
+};
+declare function CategoryDeck({ name, meta, posters, href, linkComponent: LinkComponent, onClick, className, }: CategoryDeckProps): react_jsx_runtime.JSX.Element;
+type CategoryDeckSkeletonProps = {
+    className?: string;
+};
+/** The deck's resting layout — the fan sits at its rest transform, never spread. */
+declare function CategoryDeckSkeleton({ className }: CategoryDeckSkeletonProps): react_jsx_runtime.JSX.Element;
+
+export { CategoryDeck, type CategoryDeckLinkProps, type CategoryDeckPoster, type CategoryDeckProps, CategoryDeckSkeleton, type CategoryDeckSkeletonProps };

package/dist/components/category-deck.js

@@ -0,0 +1,128 @@
+import { Skeleton } from '../chunk-QXHMPJ35.js';
+import { cn } from '../chunk-FEK5XGZW.js';
+import { __objRest, __spreadValues } from '../chunk-3GWWZKX7.js';
+import { ChevronRight } from 'lucide-react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+var DECK_POSTER_COUNT = 4;
+var DECK_TRANSITION = "transition-transform duration-[400ms] ease-[cubic-bezier(0.2,0.8,0.2,1)] motion-reduce:transition-none";
+var DECK_CARD_TRANSFORMS = [
+  {
+    rest: "[transform:translateX(-50%)_rotate(-9deg)_translateX(-26px)]",
+    spread: "group-hover:[transform:translateX(-50%)_rotate(-14deg)_translateX(-64px)_translateY(-6px)] group-focus-visible:[transform:translateX(-50%)_rotate(-14deg)_translateX(-64px)_translateY(-6px)]",
+    z: "z-0"
+  },
+  {
+    rest: "[transform:translateX(-50%)_rotate(-3deg)_translateX(-9px)]",
+    spread: "group-hover:[transform:translateX(-50%)_rotate(-5deg)_translateX(-22px)_translateY(-10px)] group-focus-visible:[transform:translateX(-50%)_rotate(-5deg)_translateX(-22px)_translateY(-10px)]",
+    z: "z-[1]"
+  },
+  {
+    rest: "[transform:translateX(-50%)_rotate(3deg)_translateX(9px)]",
+    spread: "group-hover:[transform:translateX(-50%)_rotate(5deg)_translateX(22px)_translateY(-10px)] group-focus-visible:[transform:translateX(-50%)_rotate(5deg)_translateX(22px)_translateY(-10px)]",
+    z: "z-[1]"
+  },
+  {
+    rest: "[transform:translateX(-50%)_rotate(9deg)_translateX(26px)]",
+    spread: "group-hover:[transform:translateX(-50%)_rotate(14deg)_translateX(64px)_translateY(-6px)] group-focus-visible:[transform:translateX(-50%)_rotate(14deg)_translateX(64px)_translateY(-6px)]",
+    z: "z-[2]"
+  }
+];
+function DefaultLink(_a) {
+  var _b = _a, { href } = _b, props = __objRest(_b, ["href"]);
+  return /* @__PURE__ */ jsx("a", __spreadValues({ href }, props));
+}
+function CategoryDeck({
+  name,
+  meta,
+  posters,
+  href,
+  linkComponent: LinkComponent = DefaultLink,
+  onClick,
+  className
+}) {
+  const slots = Array.from(
+    { length: DECK_POSTER_COUNT },
+    (_, index) => {
+      var _a;
+      return (_a = posters[index]) != null ? _a : {};
+    }
+  );
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "relative h-[150px] sm:h-[186px]", "aria-hidden": true, children: slots.map((poster, index) => {
+      var _a;
+      const transform = DECK_CARD_TRANSFORMS[index];
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "absolute left-1/2 top-0 aspect-[4/5] w-24 overflow-hidden rounded-[10px] bg-muted",
+            "shadow-[0_10px_26px_color-mix(in_oklch,var(--foreground)_18%,transparent)]",
+            "sm:w-[120px]",
+            transform.rest,
+            transform.spread,
+            transform.z,
+            DECK_TRANSITION
+          ),
+          children: poster.content ? poster.content : poster.src ? (
+            // eslint-disable-next-line @next/next/no-img-element
+            /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: poster.src,
+                alt: (_a = poster.alt) != null ? _a : "",
+                loading: "lazy",
+                decoding: "async",
+                className: "h-full w-full object-cover"
+              }
+            )
+          ) : /* @__PURE__ */ jsx("div", { className: "h-full w-full bg-muted" })
+        },
+        index
+      );
+    }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[9px] pt-3.5", children: [
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsx("div", { className: "truncate text-[14.5px] font-extrabold tracking-[-0.015em] sm:text-base", children: name }),
+        /* @__PURE__ */ jsx("div", { className: "truncate font-mono text-[11.5px] text-muted-foreground", children: meta })
+      ] }),
+      /* @__PURE__ */ jsx(ChevronRight, { className: "ml-auto h-4 w-4 shrink-0 text-muted-foreground", "aria-hidden": true })
+    ] })
+  ] });
+  const rootClasses = cn(
+    "group flex min-w-0 flex-col text-left",
+    (href || onClick) && "cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-xl",
+    className
+  );
+  if (href) {
+    return /* @__PURE__ */ jsx(LinkComponent, { href, className: rootClasses, onClick, children: body });
+  }
+  if (onClick) {
+    return /* @__PURE__ */ jsx("button", { type: "button", className: rootClasses, onClick, children: body });
+  }
+  return /* @__PURE__ */ jsx("div", { className: rootClasses, children: body });
+}
+function CategoryDeckSkeleton({ className }) {
+  return /* @__PURE__ */ jsxs("div", { "aria-hidden": "true", className: cn("flex min-w-0 flex-col", className), children: [
+    /* @__PURE__ */ jsx("div", { className: "relative h-[150px] sm:h-[186px]", children: DECK_CARD_TRANSFORMS.map((transform, index) => /* @__PURE__ */ jsx(
+      Skeleton,
+      {
+        className: cn(
+          "absolute left-1/2 top-0 aspect-[4/5] w-24 rounded-[10px] sm:w-[120px]",
+          transform.rest,
+          transform.z
+        )
+      },
+      index
+    )) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[9px] pt-3.5", children: [
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-[14.5px] w-24 sm:h-4 sm:w-28" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "mt-1.5 h-[11.5px] w-32" })
+      ] }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "ml-auto h-4 w-4 shrink-0 rounded-full" })
+    ] })
+  ] });
+}
+
+export { CategoryDeck, CategoryDeckSkeleton };

package/dist/components/concept-card.d.ts

@@ -0,0 +1,43 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React$1 from 'react';
+
+/**
+ * ConceptCard — the recurring-series cover card (e.g. a weekly party
+ * concept), a wide 2:1 image with a bottom scrim carrying a kind pill,
+ * a composed date/venue/count line and the title.
+ *
+ * Same contract as `EventCard`: DS-owned props, plain `<img>`, anchor
+ * whenever `href` is given. Absent `coverUrl` falls back to a flat
+ * `bg-muted` block, same treatment `EventCard` gives a missing poster.
+ */
+type ConceptCardLinkProps = {
+    href: string;
+    className?: string;
+    children: React.ReactNode;
+    onClick?: (mouseEvent: React.MouseEvent) => void;
+};
+type ConceptCardProps = {
+    title: string;
+    /**
+     * The whole date/venue/count line, composed by the caller, e.g. "Every
+     * Saturday · Flying Circus · 4 dates" — clause order is locale-dependent.
+     */
+    meta: string;
+    /** Label plus its icon, e.g. `<><PartyPopper .../> Party</>`. */
+    kind: React.ReactNode;
+    coverUrl?: string;
+    href?: string;
+    /** Defaults to a plain `<a>`. Pass `next/link` in a Next app. */
+    linkComponent?: React.ComponentType<ConceptCardLinkProps>;
+    onClick?: (mouseEvent: React.MouseEvent) => void;
+    className?: string;
+    /** Forwarded to the cover's `loading` attribute (`"eager"` when true). */
+    priority?: boolean;
+};
+declare const ConceptCard: React$1.NamedExoticComponent<ConceptCardProps>;
+type ConceptCardSkeletonProps = {
+    className?: string;
+};
+declare function ConceptCardSkeleton({ className }: ConceptCardSkeletonProps): react_jsx_runtime.JSX.Element;
+
+export { ConceptCard, type ConceptCardLinkProps, type ConceptCardProps, ConceptCardSkeleton, type ConceptCardSkeletonProps };

package/dist/components/concept-card.js

@@ -0,0 +1,81 @@
+import { Skeleton } from '../chunk-QXHMPJ35.js';
+import { cn } from '../chunk-FEK5XGZW.js';
+import { __objRest, __spreadValues } from '../chunk-3GWWZKX7.js';
+import { memo, useState } from 'react';
+import { Calendar } from 'lucide-react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function DefaultLink(_a) {
+  var _b = _a, { href } = _b, props = __objRest(_b, ["href"]);
+  return /* @__PURE__ */ jsx("a", __spreadValues({ href }, props));
+}
+var ConceptCard = memo(function ConceptCard2({
+  title,
+  meta,
+  kind,
+  coverUrl,
+  href,
+  linkComponent: LinkComponent = DefaultLink,
+  onClick,
+  className,
+  priority
+}) {
+  const [imgError, setImgError] = useState(false);
+  const showCover = !!coverUrl && !imgError;
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-muted", children: showCover && // eslint-disable-next-line @next/next/no-img-element
+    /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: coverUrl,
+        alt: title,
+        title,
+        loading: priority ? "eager" : "lazy",
+        decoding: "async",
+        className: "h-full w-full object-cover",
+        onError: () => setImgError(true)
+      }
+    ) }),
+    /* @__PURE__ */ jsx("div", { className: "absolute inset-x-0 bottom-0 z-[1] h-[60%] bg-gradient-to-t from-black/90 via-black/60 to-transparent" }),
+    /* @__PURE__ */ jsx("span", { className: "absolute left-2 top-2 z-[2] inline-flex items-center gap-1 rounded-md bg-black/50 px-2 py-1 text-[11px] font-semibold text-white", children: kind }),
+    /* @__PURE__ */ jsxs("div", { className: "relative z-[2] mt-auto flex w-full flex-col gap-0.5 p-2.5 text-white", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-[11px] font-medium text-white/85", children: [
+        /* @__PURE__ */ jsx(Calendar, { className: "h-3 w-3 shrink-0", "aria-hidden": true }),
+        /* @__PURE__ */ jsx("span", { className: "truncate", children: meta })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "line-clamp-1 text-[14px] font-semibold leading-[1.25]", children: title })
+    ] })
+  ] });
+  const rootClasses = cn(
+    "relative flex aspect-[2/1] flex-col overflow-hidden rounded-xl text-left",
+    (href || onClick) && "cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+    className
+  );
+  if (href) {
+    return /* @__PURE__ */ jsx(LinkComponent, { href, className: rootClasses, onClick, children: body });
+  }
+  if (onClick) {
+    return /* @__PURE__ */ jsx("button", { type: "button", className: rootClasses, onClick, children: body });
+  }
+  return /* @__PURE__ */ jsx("div", { className: rootClasses, children: body });
+});
+function ConceptCardSkeleton({ className }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: cn("relative flex aspect-[2/1] flex-col overflow-hidden rounded-xl", className),
+      children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "absolute inset-0 rounded-none" }),
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-x-0 bottom-0 z-[1] h-[60%] bg-gradient-to-t from-black/90 via-black/60 to-transparent" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "absolute left-2 top-2 z-[2] h-[26px] w-16 rounded-md bg-white/20" }),
+        /* @__PURE__ */ jsxs("div", { className: "relative z-[2] mt-auto flex w-full flex-col gap-1 p-2.5", children: [
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-[11px] w-24 bg-white/15" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-[14px] w-2/3 bg-white/20" })
+        ] })
+      ]
+    }
+  );
+}
+
+export { ConceptCard, ConceptCardSkeleton };