@bearmenu/ui 0.8.8 → 0.8.9

package/dist/components/event-detail-panel.js

@@ -2,250 +2,547 @@ import { Separator } from '../chunk-WSRWFA6K.js';
 import { resolveEventEntryFee } from '../chunk-DNSXMHYX.js';
 import { EventPosterFallback } from '../chunk-FDITZ2VM.js';
 import { Skeleton } from '../chunk-QXHMPJ35.js';
+import { Button } from '../chunk-H3BV4VAG.js';
+import '../chunk-R47NEOSI.js';
 import { cn } from '../chunk-FEK5XGZW.js';
-import { __objRest, __spreadValues } from '../chunk-3GWWZKX7.js';
-import { Star, ChevronRight, Calendar, Radio } from 'lucide-react';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { __spreadProps, __spreadValues, __objRest } from '../chunk-3GWWZKX7.js';
+import * as React from 'react';
+import { Calendar, User, CalendarX, Unplug, RefreshCw, Timer, Gift, Ticket, MapPin, Star, ChevronRight } 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));
 }
-var CHIP = "inline-flex items-center gap-1 rounded-full border border-border px-2.5 text-xs";
+var DESCRIPTION_CLAMP_CHARS = 220;
+var CHIP = "inline-flex h-6 items-center gap-1 whitespace-nowrap rounded-full border border-border bg-card px-2.5 text-[11.5px] font-semibold text-muted-foreground";
+var SECTION_HEADING = "text-[13px] font-extrabold tracking-[-0.01em] text-foreground";
+function heroHeightStyle(heroHeight) {
+  return heroHeight === "aspect" ? void 0 : { height: heroHeight };
+}
 function EventDetailPanel({
   event,
   labels,
   formatters,
   dateLine,
+  dateTime,
+  status = "upcoming",
+  soonLabel,
+  hype,
   venue,
   tags,
-  isLive,
+  performers,
+  performersPreview = 5,
+  showAllPerformersLabel,
   headerActions,
   footer,
   externalLink,
+  heroHeight,
   size = "default",
   linkComponent: LinkComponent = DefaultLink,
   className,
   fallback = /* @__PURE__ */ jsx(EventPosterFallback, {})
 }) {
+  var _a, _b, _c;
   const compact = size === "compact";
-  const fee = resolveEventEntryFee(event);
-  const venueCard = venue && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 rounded-[13px] border border-border p-2.5", children: [
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: cn(
-          "shrink-0 overflow-hidden rounded-[10px] bg-muted",
-          compact ? "h-12 w-12" : "h-[52px] w-[52px]"
-        ),
-        children: venue.thumbnailUrl && // eslint-disable-next-line @next/next/no-img-element
-        /* @__PURE__ */ jsx(
-          "img",
-          {
-            src: venue.thumbnailUrl,
-            alt: "",
-            className: "h-full w-full object-cover",
-            loading: "lazy",
-            decoding: "async"
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-      /* @__PURE__ */ jsx("div", { className: cn("font-bold", compact ? "text-[13.5px]" : "text-sm"), children: venue.name }),
-      venue.meta && /* @__PURE__ */ jsx("div", { className: cn("text-muted-foreground", compact ? "text-[11.5px]" : "text-xs"), children: venue.meta }),
-      venue.ratingLabel && /* @__PURE__ */ jsxs("div", { className: "mt-0.5 flex items-center gap-1 text-xs font-bold", children: [
-        /* @__PURE__ */ jsx(Star, { className: "h-3 w-3", "aria-hidden": true }),
-        venue.ratingLabel
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4 shrink-0 text-muted-foreground", "aria-hidden": true })
-  ] });
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex h-full flex-col overflow-hidden bg-card", className), children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto", children: [
-      /* @__PURE__ */ jsxs("div", { className: "relative aspect-[4/5] shrink-0 overflow-hidden bg-muted", children: [
-        event.poster_url ? (
-          // eslint-disable-next-line @next/next/no-img-element
-          /* @__PURE__ */ jsx(
-            "img",
+  const cap = heroHeight != null ? heroHeight : compact ? 318 : 300;
+  resolveEventEntryFee(event);
+  const isEnded = status === "ended";
+  const [descriptionExpanded, setDescriptionExpanded] = React.useState(false);
+  const [performersExpanded, setPerformersExpanded] = React.useState(false);
+  const description = (_b = (_a = event.description) == null ? void 0 : _a.trim()) != null ? _b : "";
+  const clampDescription = description.length > DESCRIPTION_CLAMP_CHARS && !descriptionExpanded;
+  const shownPerformers = performers && !performersExpanded ? performers.slice(0, performersPreview) : performers != null ? performers : [];
+  const hiddenPerformers = ((_c = performers == null ? void 0 : performers.length) != null ? _c : 0) - shownPerformers.length;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("flex h-full flex-col overflow-hidden bg-card", className),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto", children: [
+          /* @__PURE__ */ jsxs(
+            "div",
             {
-              src: event.poster_url,
-              alt: event.title,
-              className: "h-full w-full object-cover",
-              loading: "eager",
-              decoding: "async"
+              className: cn(
+                "relative shrink-0 overflow-hidden bg-muted",
+                cap === "aspect" && "aspect-[4/5]",
+                !event.poster_url && "bg-[image:var(--gradient-primary)]",
+                isEnded && "saturate-[.35] brightness-[.82]"
+              ),
+              style: heroHeightStyle(cap),
+              children: [
+                event.poster_url ? (
+                  // eslint-disable-next-line @next/next/no-img-element
+                  /* @__PURE__ */ jsx(
+                    "img",
+                    {
+                      src: event.poster_url,
+                      alt: event.title,
+                      className: "h-full w-full object-cover",
+                      loading: "eager",
+                      decoding: "async"
+                    }
+                  )
+                ) : fallback,
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    "aria-hidden": true,
+                    className: "pointer-events-none absolute inset-x-0 bottom-0 h-[34%] bg-gradient-to-t from-card via-card/50 to-transparent"
+                  }
+                ),
+                headerActions && /* @__PURE__ */ jsx("div", { className: "absolute inset-x-3 top-3 z-[2] flex items-center gap-2", children: headerActions })
+              ]
             }
-          )
-        ) : fallback,
-        headerActions
-      ] }),
-      /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: cn(
-            "flex flex-col gap-3.5",
-            compact ? "px-4 pt-4" : "px-[22px] pt-5"
           ),
-          children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[13px] px-[18px] pt-3.5", children: [
             /* @__PURE__ */ jsx(
               "h2",
               {
                 className: cn(
-                  "font-extrabold leading-[1.25] tracking-[-0.02em]",
-                  compact ? "text-xl" : "text-[21px]"
+                  "line-clamp-2 text-[21px] font-extrabold leading-[1.25] tracking-[-0.025em]",
+                  isEnded ? "text-muted-foreground" : "text-foreground"
                 ),
                 children: event.title
               }
             ),
-            /* @__PURE__ */ jsxs(
-              "div",
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-1.5 text-[13px] text-muted-foreground", children: [
+              /* @__PURE__ */ jsx(Calendar, { className: "h-3.5 w-3.5 shrink-0", "aria-hidden": true }),
+              dateTime ? /* @__PURE__ */ jsx("time", { dateTime, children: dateLine }) : dateLine
+            ] }),
+            /* @__PURE__ */ jsx(
+              EventDetailChipRow,
               {
-                className: cn(
-                  "flex items-center gap-1.5 text-muted-foreground",
-                  compact ? "text-[12.5px]" : "text-[13px]"
-                ),
-                children: [
-                  /* @__PURE__ */ jsx(Calendar, { className: compact ? "h-3.5 w-3.5" : "h-4 w-4", "aria-hidden": true }),
-                  dateLine
-                ]
+                event,
+                labels,
+                formatters,
+                status,
+                soonLabel,
+                hype,
+                tags
               }
             ),
-            /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-1.5", children: [
-              isLive && /* @__PURE__ */ jsxs(
-                "span",
-                {
-                  className: cn(
-                    CHIP,
-                    "h-7 border-success/30 bg-success/10 font-semibold text-success"
-                  ),
-                  children: [
-                    /* @__PURE__ */ jsx(Radio, { className: "h-3 w-3", "aria-hidden": true }),
-                    labels.liveNow
-                  ]
-                }
-              ),
-              tags == null ? void 0 : tags.map((tag) => /* @__PURE__ */ jsx("span", { className: cn(CHIP, "h-7"), children: tag }, tag)),
-              fee.kind === "free" && /* @__PURE__ */ jsx("span", { className: cn(CHIP, "h-7 border-success/40 font-semibold text-success"), children: labels.free }),
-              fee.kind === "paid" && /* @__PURE__ */ jsx("span", { className: cn(CHIP, "h-7"), children: formatters.price(fee.amountRon) })
-            ] }),
             venue && /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsx("div", { className: "pb-2 text-[13px] font-extrabold", children: labels.venueHeading }),
-              venue.href ? /* @__PURE__ */ jsx(LinkComponent, { href: venue.href, className: "block", children: venueCard }) : venueCard
-            ] }),
-            event.description && /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsx("div", { className: "pb-1.5 text-[13px] font-extrabold", children: labels.aboutHeading }),
+              /* @__PURE__ */ jsx("div", { className: cn(SECTION_HEADING, "pb-2"), children: labels.venueHeading }),
               /* @__PURE__ */ jsx(
-                "p",
+                EventDetailVenueCard,
                 {
-                  className: cn(
-                    "leading-[1.6] text-muted-foreground",
-                    compact ? "text-[13px]" : "text-[13.5px]"
-                  ),
-                  children: event.description
+                  venue,
+                  labels,
+                  linkComponent: LinkComponent
                 }
               )
             ] }),
+            performers && performers.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("div", { className: cn(SECTION_HEADING, "pb-2"), children: labels.lineupHeading }),
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-[7px]", children: [
+                shownPerformers.map((name) => /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    className: "inline-flex h-[26px] items-center gap-1.5 rounded-full bg-muted px-2.5 text-xs font-semibold text-foreground",
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        User,
+                        {
+                          className: "h-3 w-3 text-muted-foreground",
+                          "aria-hidden": true
+                        }
+                      ),
+                      name
+                    ]
+                  },
+                  name
+                )),
+                hiddenPerformers > 0 && showAllPerformersLabel && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => setPerformersExpanded(true),
+                    className: "inline-flex h-[26px] cursor-pointer items-center rounded-full border border-dashed border-border px-2.5 text-xs font-medium text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                    children: showAllPerformersLabel
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("div", { className: cn(SECTION_HEADING, "pb-1.5"), children: labels.aboutHeading }),
+              description ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    className: cn(
+                      "whitespace-pre-line text-[13.5px] leading-[1.6] text-foreground/85",
+                      clampDescription && "line-clamp-4"
+                    ),
+                    children: description
+                  }
+                ),
+                description.length > DESCRIPTION_CLAMP_CHARS && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => setDescriptionExpanded((current) => !current),
+                    "aria-expanded": descriptionExpanded,
+                    className: "mt-1.5 cursor-pointer text-[13px] font-bold text-accent hover:underline focus-visible:outline-none focus-visible:underline",
+                    children: descriptionExpanded ? labels.readLess : labels.readMore
+                  }
+                )
+              ] }) : /* @__PURE__ */ jsx("p", { className: "text-[13.5px] italic leading-[1.6] text-muted-foreground", children: labels.noDescription })
+            ] }),
             externalLink,
-            /* @__PURE__ */ jsx("div", { className: "h-2", "aria-hidden": true })
-          ]
+            /* @__PURE__ */ jsx("div", { className: "h-1.5", "aria-hidden": true })
+          ] })
+        ] }),
+        footer
+      ]
+    }
+  );
+}
+function EventDetailFooter({
+  primary,
+  ghosts = [],
+  className
+}) {
+  const visible = ghosts.filter(Boolean);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "relative flex shrink-0 flex-col gap-0.5 bg-card/95 px-3 pt-3 pb-[max(0.875rem,env(safe-area-inset-bottom))] backdrop-blur-sm",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(Separator, { className: "absolute inset-x-0 top-0" }),
+        visible.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex items-stretch", children: visible.map((ghost, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+          index > 0 && /* @__PURE__ */ jsx(Separator, { orientation: "vertical", className: "my-2 h-auto" }),
+          ghost
+        ] }, index)) }),
+        primary
+      ]
+    }
+  );
+}
+var GHOST_CLASS = "flex h-10 min-w-0 flex-1 cursor-pointer items-center justify-center gap-[7px] rounded-[10px] text-[13px] font-semibold 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 motion-reduce:transition-none";
+function EventDetailGhostAction({
+  icon,
+  children,
+  href,
+  linkComponent: LinkComponent = DefaultLink,
+  onClick,
+  target,
+  rel,
+  className
+}) {
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    icon,
+    /* @__PURE__ */ jsx("span", { className: "truncate", children })
+  ] });
+  if (href) {
+    if (target) {
+      return /* @__PURE__ */ jsx(
+        "a",
+        {
+          href,
+          target,
+          rel,
+          onClick,
+          className: cn(GHOST_CLASS, className),
+          children: body
         }
-      )
-    ] }),
-    footer && /* @__PURE__ */ jsxs(
-      "div",
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      LinkComponent,
       {
-        className: cn(
-          "sticky bottom-0 flex shrink-0 gap-2.5 bg-card",
-          compact ? "px-4 pt-3 pb-[max(1.375rem,env(safe-area-inset-bottom))]" : "px-[22px] pt-4 pb-[max(1.25rem,env(safe-area-inset-bottom))]"
-        ),
-        children: [
-          /* @__PURE__ */ jsx(Separator, { className: "absolute inset-x-0 top-0" }),
-          footer
-        ]
+        href,
+        onClick,
+        className: cn(GHOST_CLASS, className),
+        children: body
       }
-    )
-  ] });
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: cn(GHOST_CLASS, className),
+      children: body
+    }
+  );
+}
+function EventDetailPanelError({
+  title,
+  description,
+  retryLabel,
+  onRetry,
+  secondaryLabel,
+  secondaryHref,
+  onSecondary,
+  linkComponent: LinkComponent = DefaultLink,
+  headerActions,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("flex h-full flex-col overflow-hidden bg-card", className),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative flex aspect-video shrink-0 items-center justify-center bg-[image:var(--gradient-primary)] text-primary-foreground/90", children: [
+          /* @__PURE__ */ jsx(CalendarX, { className: "h-12 w-12", "aria-hidden": true }),
+          headerActions && /* @__PURE__ */ jsx("div", { className: "absolute inset-x-3 top-3 z-[2] flex items-center gap-2", children: headerActions })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            role: "alert",
+            className: "flex flex-1 flex-col items-center justify-center gap-3 px-6 py-8 text-center",
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "flex h-[62px] w-[62px] items-center justify-center rounded-full bg-muted text-muted-foreground", children: /* @__PURE__ */ jsx(Unplug, { className: "h-[26px] w-[26px]", "aria-hidden": true }) }),
+              /* @__PURE__ */ jsx("h2", { className: "text-[17px] font-extrabold tracking-[-0.02em]", children: title }),
+              /* @__PURE__ */ jsx("p", { className: "text-[13.5px] leading-[1.6] text-muted-foreground", children: description }),
+              /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-[9px] pt-1", children: [
+                /* @__PURE__ */ jsxs(Button, { onClick: onRetry, fullWidth: true, children: [
+                  /* @__PURE__ */ jsx(RefreshCw, { "aria-hidden": true }),
+                  retryLabel
+                ] }),
+                secondaryLabel && (secondaryHref ? /* @__PURE__ */ jsx(Button, { asChild: true, variant: "outline", fullWidth: true, children: /* @__PURE__ */ jsx(LinkComponent, { href: secondaryHref, children: secondaryLabel }) }) : /* @__PURE__ */ jsx(Button, { variant: "outline", fullWidth: true, onClick: onSecondary, children: secondaryLabel }))
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
 }
 function EventDetailPanelSkeleton({
   size = "default",
+  heroHeight,
   headerActions,
+  label,
   className
 }) {
-  const compact = size === "compact";
+  const cap = heroHeight != null ? heroHeight : size === "compact" ? 318 : 300;
   return /* @__PURE__ */ jsxs(
     "div",
-    {
-      "aria-hidden": "true",
+    __spreadProps(__spreadValues({}, label ? { role: "status", "aria-busy": true, "aria-label": label } : { "aria-hidden": true }), {
       className: cn("flex h-full flex-col overflow-hidden bg-card", className),
       children: [
         /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto", children: [
-          /* @__PURE__ */ jsx("div", { className: "relative aspect-[4/5] shrink-0 overflow-hidden bg-muted", children: headerActions }),
-          /* @__PURE__ */ jsxs(
+          /* @__PURE__ */ jsx(
             "div",
             {
               className: cn(
-                "flex flex-col gap-3.5",
-                compact ? "px-4 pt-4" : "px-[22px] pt-5"
+                "relative shrink-0 bg-muted",
+                cap === "aspect" && "aspect-[4/5]"
               ),
-              children: [
-                /* @__PURE__ */ jsx(Skeleton, { className: cn("w-3/4", compact ? "h-5" : "h-[21px]") }),
-                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
-                  /* @__PURE__ */ jsx(Skeleton, { className: cn("shrink-0 rounded-full", compact ? "h-3.5 w-3.5" : "h-4 w-4") }),
-                  /* @__PURE__ */ jsx(Skeleton, { className: cn("w-48", compact ? "h-[12.5px]" : "h-[13px]") })
-                ] }),
-                /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-1.5", children: [
-                  /* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-20 rounded-full" }),
-                  /* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-16 rounded-full" })
-                ] }),
-                /* @__PURE__ */ jsxs("div", { children: [
-                  /* @__PURE__ */ jsx(Skeleton, { className: "mb-2 h-[13px] w-28" }),
-                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 rounded-[13px] border border-border p-2.5", children: [
-                    /* @__PURE__ */ jsx(
-                      Skeleton,
-                      {
-                        className: cn(
-                          "shrink-0 rounded-[10px]",
-                          compact ? "h-12 w-12" : "h-[52px] w-[52px]"
-                        )
-                      }
-                    ),
-                    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-                      /* @__PURE__ */ jsx(Skeleton, { className: cn("w-1/2", compact ? "h-[13.5px]" : "h-3.5") }),
-                      /* @__PURE__ */ jsx(Skeleton, { className: cn("mt-1 w-3/4", compact ? "h-[11.5px]" : "h-3") })
-                    ] }),
-                    /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-4 shrink-0 rounded-full" })
-                  ] })
-                ] }),
-                /* @__PURE__ */ jsxs("div", { children: [
-                  /* @__PURE__ */ jsx(Skeleton, { className: "mb-1.5 h-[13px] w-32" }),
-                  /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
-                    /* @__PURE__ */ jsx(Skeleton, { className: cn("w-full", compact ? "h-[13px]" : "h-[13.5px]") }),
-                    /* @__PURE__ */ jsx(Skeleton, { className: cn("w-full", compact ? "h-[13px]" : "h-[13.5px]") }),
-                    /* @__PURE__ */ jsx(Skeleton, { className: cn("w-2/3", compact ? "h-[13px]" : "h-[13.5px]") })
-                  ] })
-                ] }),
-                /* @__PURE__ */ jsx("div", { className: "h-2", "aria-hidden": true })
-              ]
+              style: heroHeightStyle(cap),
+              children: headerActions && /* @__PURE__ */ jsx("div", { className: "absolute inset-x-3 top-3 z-[2] flex items-center gap-2", children: headerActions })
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[13px] px-[18px] pt-3.5", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+              /* @__PURE__ */ jsx(Skeleton, { className: "h-[22px] w-[86%]" }),
+              /* @__PURE__ */ jsx(Skeleton, { className: "h-[22px] w-[58%]" })
+            ] }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-3.5 w-[54%]" }),
+            /* @__PURE__ */ jsxs("div", { className: "flex gap-[7px]", children: [
+              /* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-[74px] rounded-full" }),
+              /* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-[88px] rounded-full" }),
+              /* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-[66px] rounded-full" })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx(Skeleton, { className: "mb-2 h-3.5 w-24" }),
+              /* @__PURE__ */ jsx(Skeleton, { className: "h-[74px] w-full rounded-[13px]" })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx(Skeleton, { className: "mb-2 h-3.5 w-[70px]" }),
+              /* @__PURE__ */ jsxs("div", { className: "flex gap-[7px]", children: [
+                /* @__PURE__ */ jsx(Skeleton, { className: "h-[26px] w-[92px] rounded-full" }),
+                /* @__PURE__ */ jsx(Skeleton, { className: "h-[26px] w-[104px] rounded-full" })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx(Skeleton, { className: "mb-1.5 h-3.5 w-[120px]" }),
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+                /* @__PURE__ */ jsx(Skeleton, { className: "h-[13px] w-full" }),
+                /* @__PURE__ */ jsx(Skeleton, { className: "h-[13px] w-full" }),
+                /* @__PURE__ */ jsx(Skeleton, { className: "h-[13px] w-[72%]" })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "h-1.5", "aria-hidden": true })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "relative flex shrink-0 flex-col gap-0.5 bg-card/95 px-3 pt-3 pb-[max(0.875rem,env(safe-area-inset-bottom))]", children: [
+          /* @__PURE__ */ jsx(Separator, { className: "absolute inset-x-0 top-0" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-stretch gap-2 py-0.5", children: [
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-9 flex-1 rounded-[10px]" }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-9 flex-1 rounded-[10px]" })
+          ] }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-11 w-full rounded-xl" })
+        ] })
+      ]
+    })
+  );
+}
+function EventDetailChipRow({
+  event,
+  labels,
+  formatters,
+  status = "upcoming",
+  soonLabel,
+  hype,
+  tags,
+  className
+}) {
+  const fee = resolveEventEntryFee(event);
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-wrap gap-[7px]", className), children: [
+    status === "live" && /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: cn(
+          CHIP,
+          "border-success/30 bg-success/10 font-bold text-success"
+        ),
+        children: [
+          /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "h-1.5 w-1.5 rounded-full bg-success" }),
+          labels.liveNow
+        ]
+      }
+    ),
+    status === "soon" && soonLabel && /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: cn(
+          CHIP,
+          "border-accent/30 bg-accent-subtle font-bold text-accent"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(Timer, { className: "h-3 w-3", "aria-hidden": true }),
+          soonLabel
+        ]
+      }
+    ),
+    status === "ended" && /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          CHIP,
+          "border-transparent bg-muted font-bold text-muted-foreground"
+        ),
+        children: labels.ended
+      }
+    ),
+    fee.kind === "free" && /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: cn(
+          CHIP,
+          "border-success/30 bg-success/10 font-bold text-success"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(Gift, { className: "h-3 w-3", "aria-hidden": true }),
+          labels.free
+        ]
+      }
+    ),
+    fee.kind === "paid" && /* @__PURE__ */ jsxs("span", { className: cn(CHIP, "text-foreground"), children: [
+      /* @__PURE__ */ jsx(Ticket, { className: "h-3 w-3", "aria-hidden": true }),
+      formatters.price(fee.amountRon)
+    ] }),
+    hype,
+    tags == null ? void 0 : tags.map((tag) => /* @__PURE__ */ jsx("span", { className: CHIP, children: tag }, tag))
+  ] });
+}
+function EventDetailVenueCard({
+  venue,
+  labels,
+  linkComponent: LinkComponent = DefaultLink,
+  thumbnailSize = 52,
+  action,
+  className
+}) {
+  const meta = venue.href && (venue.address || venue.ratingLabel || venue.openLabel);
+  const main = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "relative shrink-0 overflow-hidden rounded-[11px] bg-muted",
+          thumbnailSize === 64 ? "h-16 w-16" : "h-[52px] w-[52px]",
+          !venue.thumbnailUrl && "flex items-center justify-center text-muted-foreground"
+        ),
+        children: [
+          venue.thumbnailUrl ? (
+            // eslint-disable-next-line @next/next/no-img-element
+            /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: venue.thumbnailUrl,
+                alt: "",
+                className: "h-full w-full object-cover",
+                loading: "lazy",
+                decoding: "async"
+              }
+            )
+          ) : /* @__PURE__ */ jsx(MapPin, { className: "h-5 w-5", "aria-hidden": true }),
+          venue.isOpenNow && /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": true,
+              className: "absolute right-1 top-1 h-[7px] w-[7px] rounded-full bg-success ring-2 ring-card"
             }
           )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsx("div", { className: "truncate text-sm font-bold", children: venue.name }),
+      venue.href ? meta && /* @__PURE__ */ jsxs("div", { className: "mt-0.5 flex flex-wrap items-center gap-x-1.5 text-xs text-muted-foreground", children: [
+        venue.address && /* @__PURE__ */ jsx("span", { className: "truncate", children: venue.address }),
+        venue.address && venue.ratingLabel && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "text-border", children: "\xB7" }),
+        venue.ratingLabel && /* @__PURE__ */ jsxs("span", { className: "inline-flex shrink-0 items-center gap-1", children: [
+          /* @__PURE__ */ jsx(Star, { className: "h-[11px] w-[11px]", "aria-hidden": true }),
+          venue.ratingLabel
         ] }),
-        /* @__PURE__ */ jsxs(
-          "div",
+        venue.openLabel && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "text-border", children: "\xB7" }),
+          /* @__PURE__ */ jsx("span", { className: "shrink-0", children: venue.openLabel })
+        ] })
+      ] }) : /* @__PURE__ */ jsx("div", { className: "mt-0.5 text-xs text-muted-foreground", children: labels.venueNoPage })
+    ] }),
+    venue.href && /* @__PURE__ */ jsx(
+      ChevronRight,
+      {
+        className: "h-[17px] w-[17px] shrink-0 text-muted-foreground",
+        "aria-hidden": true
+      }
+    )
+  ] });
+  const MAIN_CLASS = "flex min-w-0 flex-1 items-center gap-3";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center gap-3 rounded-[13px] border border-border bg-card p-2.5",
+        className
+      ),
+      children: [
+        venue.href ? /* @__PURE__ */ jsx(
+          LinkComponent,
           {
+            href: venue.href,
             className: cn(
-              "sticky bottom-0 flex shrink-0 gap-2.5 bg-card",
-              compact ? "px-4 pt-3 pb-[max(1.375rem,env(safe-area-inset-bottom))]" : "px-[22px] pt-4 pb-[max(1.25rem,env(safe-area-inset-bottom))]"
+              MAIN_CLASS,
+              "-m-1 rounded-[11px] p-1 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
             ),
-            children: [
-              /* @__PURE__ */ jsx(Separator, { className: "absolute inset-x-0 top-0" }),
-              /* @__PURE__ */ jsx(Skeleton, { className: "h-[46px] flex-1 rounded-xl" }),
-              /* @__PURE__ */ jsx(Skeleton, { className: "h-[46px] w-24 rounded-xl" })
-            ]
+            children: main
           }
-        )
+        ) : /* @__PURE__ */ jsx("div", { className: MAIN_CLASS, children: main }),
+        action
       ]
     }
   );
 }
 
-export { EventDetailPanel, EventDetailPanelSkeleton };
+export { EventDetailChipRow, EventDetailFooter, EventDetailGhostAction, EventDetailPanel, EventDetailPanelError, EventDetailPanelSkeleton, EventDetailVenueCard };