@bearmenu/ui 0.8.3 → 0.8.6

package/dist/components/event-list-row.js

@@ -0,0 +1,173 @@
+import { Separator } from '../chunk-WSRWFA6K.js';
+import { TagGroup } from '../chunk-6XMYEZVR.js';
+import { Tag } from '../chunk-ZDAHKI3A.js';
+import { resolveEventEntryFee } from '../chunk-DNSXMHYX.js';
+import { EventPosterFallback } from '../chunk-FDITZ2VM.js';
+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 { MapPin, Radio } from 'lucide-react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+function DefaultLink(_a) {
+  var _b = _a, { href } = _b, props = __objRest(_b, ["href"]);
+  return /* @__PURE__ */ jsx("a", __spreadValues({ href }, props));
+}
+var EventListRow = memo(function EventListRow2({
+  event,
+  labels,
+  formatters,
+  isLive,
+  isSoldOut,
+  href,
+  linkComponent: LinkComponent = DefaultLink,
+  onClick,
+  className,
+  priority,
+  tags,
+  fallback = /* @__PURE__ */ jsx(EventPosterFallback, {}),
+  hideRule
+}) {
+  var _a;
+  const [imgError, setImgError] = useState(false);
+  const fee = resolveEventEntryFee(event);
+  const showPoster = !!event.poster_url && !imgError;
+  const venue = (_a = event.place_name) != null ? _a : event.location;
+  const priceText = fee.kind === "free" ? labels.free : fee.kind === "paid" ? formatters.price(fee.amountRon) : void 0;
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    !hideRule && /* @__PURE__ */ jsx(Separator, { className: "absolute inset-x-0 top-0" }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn("w-[42px] shrink-0 rounded-[9px] py-1.5 text-center", isLive && "bg-success/10"),
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "text-sm font-semibold leading-none tabular-nums",
+                isLive ? "text-success" : "text-foreground"
+              ),
+              children: formatters.dayNumber(event.starts_at)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "mt-[3px] text-[10px] font-semibold tracking-[0.06em]",
+                isLive ? "text-success" : "text-muted-foreground"
+              ),
+              children: formatters.monthShort(event.starts_at)
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "aspect-square w-[72px] shrink-0 overflow-hidden rounded-[9px] bg-muted", children: showPoster ? (
+      // eslint-disable-next-line @next/next/no-img-element
+      /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: event.poster_url,
+          alt: "",
+          loading: priority ? "eager" : "lazy",
+          decoding: "async",
+          className: "h-full w-full object-cover",
+          onError: () => setImgError(true)
+        }
+      )
+    ) : fallback }),
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsx("div", { className: "text-[15px] font-semibold leading-[1.3] tracking-[-0.01em]", children: event.title }),
+      /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-center gap-2 text-xs text-muted-foreground", children: [
+        /* @__PURE__ */ jsx("span", { className: "shrink-0 tabular-nums text-foreground", children: formatters.time(event.starts_at) }),
+        /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 items-center gap-1", children: [
+          /* @__PURE__ */ jsx(MapPin, { className: "h-3 w-3 shrink-0", "aria-hidden": true }),
+          /* @__PURE__ */ jsx("span", { className: "truncate", children: venue })
+        ] }),
+        isSoldOut ? /* @__PURE__ */ jsx(Tag, { size: "sm", variant: "quiet", className: "shrink-0 whitespace-nowrap", children: labels.soldOut }) : priceText && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "shrink-0 tabular-nums",
+              fee.kind === "free" && "font-semibold text-success"
+            ),
+            children: priceText
+          }
+        )
+      ] }),
+      (isLive || tags && tags.length > 0) && /* @__PURE__ */ jsxs(TagGroup, { className: "mt-1.5 h-[22px] overflow-hidden", children: [
+        isLive && /* @__PURE__ */ jsxs(Tag, { size: "sm", variant: "success", className: "shrink-0 whitespace-nowrap", children: [
+          /* @__PURE__ */ jsx(Radio, { className: "h-2.5 w-2.5", "aria-hidden": true }),
+          labels.liveNow
+        ] }),
+        tags == null ? void 0 : tags.map((tag) => /* @__PURE__ */ jsx(Tag, { size: "sm", variant: "quiet", className: "shrink-0 whitespace-nowrap", children: tag }, tag))
+      ] })
+    ] })
+  ] });
+  const rootClasses = cn(
+    // `py-3`, not `py-3.5`: the chip line adds a third line back, and 8px of
+    // padding pays for most of it. Rows with a one-line title and no chips are
+    // still poster-driven and end up SHORTER than before.
+    "relative flex w-full items-start gap-3 py-3 text-left",
+    isSoldOut && "opacity-60",
+    (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: onClick ? (mouseEvent) => onClick(event, mouseEvent) : void 0,
+        children: body
+      }
+    );
+  }
+  if (onClick) {
+    return /* @__PURE__ */ jsx("button", { type: "button", className: rootClasses, onClick: (e) => onClick(event, e), children: body });
+  }
+  return /* @__PURE__ */ jsx("div", { className: rootClasses, children: body });
+});
+function EventListRowSkeleton({
+  hideRule,
+  showTags = true,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: cn("relative flex w-full items-start gap-3 py-3 text-left", className),
+      children: [
+        !hideRule && /* @__PURE__ */ jsx(Separator, { className: "absolute inset-x-0 top-0" }),
+        /* @__PURE__ */ jsxs("div", { className: "w-[42px] shrink-0 rounded-[9px] py-1.5 text-center", children: [
+          /* @__PURE__ */ jsx(Skeleton, { className: "mx-auto h-4 w-5" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "mx-auto mt-[3px] h-[10px] w-6" })
+        ] }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "aspect-square w-[72px] shrink-0 rounded-[9px]" }),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-[15px] w-full" }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-[15px] w-2/3" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-10" }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-3 shrink-0 rounded-full" }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-24" }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "ml-auto h-3 w-12" })
+          ] }),
+          showTags && /* @__PURE__ */ jsxs("div", { className: "mt-1.5 flex items-center gap-1.5", children: [
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-[22px] w-14 rounded-full" }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-[22px] w-11 rounded-full" })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+export { EventListRow, EventListRowSkeleton };

package/dist/components/event-poster-fallback.d.ts

@@ -0,0 +1,20 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+/**
+ * EventPosterFallback — what every events surface renders in place of a
+ * missing (or failed) poster image.
+ *
+ * Follows the DS image-fallback rule: never a bare icon on a flat background.
+ * `--gradient-primary` is warm in both themes, so the drop-shadowed icon
+ * always sits on a tinted, on-brand surface rather than the cold, zero-chroma
+ * `bg-muted` block a poster box would otherwise show.
+ */
+type EventPosterFallbackProps = {
+    /** Defaults to a calendar glyph. Pass a tag-derived icon (e.g. `getEventFallbackIcon`) for a closer match to the event's category. */
+    icon?: ReactNode;
+    className?: string;
+};
+declare function EventPosterFallback({ icon, className }: EventPosterFallbackProps): react_jsx_runtime.JSX.Element;
+
+export { EventPosterFallback, type EventPosterFallbackProps };

package/dist/components/event-poster-fallback.js

@@ -0,0 +1,3 @@
+export { EventPosterFallback } from '../chunk-FDITZ2VM.js';
+import '../chunk-FEK5XGZW.js';
+import '../chunk-3GWWZKX7.js';

package/dist/components/event-types.d.ts

@@ -0,0 +1,118 @@
+/**
+ * Structural mirror of the openapi `Event` schema, decoupled from any one app's
+ * generated types. Both FE and admin map their domain shapes into this type
+ * before passing data to `<EventCard>` / `<EventListRow>` / `<EventDaySection>`.
+ *
+ * Same contract as `place-types.ts`: no app schemas, no app hooks, no i18n.
+ * Every user-facing string arrives through a `*Labels` object, and every
+ * locale-sensitive format arrives as an injected formatter — the DS never owns
+ * a translation key or an `Intl` locale.
+ */
+type EventPreview = {
+    id: string;
+    title: string;
+    description?: string;
+    /** Short teaser (≤79 chars) for tight surfaces. Absent for events without one. */
+    short_description?: string;
+    /** Free-text venue/location line as returned by the API. */
+    location: string;
+    /** ISO 8601 date-time. */
+    starts_at: string;
+    /** ISO 8601 date-time. Absent for events with no published end. */
+    ends_at?: string;
+    /**
+     * Entry fee in RON. `0` means explicitly free; `undefined` means unknown.
+     * The distinction is load-bearing — see `resolveEventEntryFee`.
+     */
+    entry_fee?: number;
+    place_name?: string;
+    place_slug?: string;
+    /** 0–100 social-buzz score. `0` for events with no engagement signal. */
+    hype_score?: number;
+    performers?: EventPerformerRef[];
+    tags?: EventTagRef[];
+    event_concept_slug?: string;
+    event_concept_title?: string;
+    /** Booking URL, when the host takes bookings through a link. */
+    bookings?: string;
+    /** Ticketing URL, when the event is ticketed. */
+    tickets?: string;
+    /**
+     * Pre-resolved poster URL. Callers compute this themselves — the API returns
+     * a `Photo.key`, and CDN base plus transform differ per app.
+     */
+    poster_url?: string;
+};
+/** A taxonomy tag. `slug` is only unique within its `axis_slug`. */
+type EventTagRef = {
+    slug: string;
+    axis_slug: string;
+};
+type EventPerformerRef = {
+    name: string;
+    kind: "person" | "group";
+};
+/**
+ * Entry-fee state. `unknown` is a real third case, not a missing `paid` — an
+ * event with no published fee must never render as free.
+ */
+type EventEntryFee = {
+    kind: "free";
+} | {
+    kind: "paid";
+    amountRon: number;
+} | {
+    kind: "unknown";
+};
+/** Structural, not editorial — safe to derive inside the DS. */
+declare function resolveEventEntryFee(event: EventPreview): EventEntryFee;
+/**
+ * Locale-sensitive formatters, injected by the caller. The DS holds no `Intl`
+ * locale and no currency of its own.
+ */
+type EventFormatters = {
+    /** e.g. `"20:00"` */
+    time: (isoDateTime: string) => string;
+    /** e.g. `"Sat, Sep 5"` — used when a card appears outside its own day section. */
+    day: (isoDateTime: string) => string;
+    /** e.g. `50 => "50 RON"` */
+    price: (amountRon: number) => string;
+};
+/**
+ * The extra formatters a date badge needs, split out rather than added to
+ * `EventFormatters` so `<EventCard>` keeps asking for only what it uses.
+ * `<EventListRow>` and the timeline's day headers need the parts separately.
+ */
+type EventDateBadgeFormatters = EventFormatters & {
+    /** Day of month as displayed, e.g. `"05"`. */
+    dayNumber: (isoDateTime: string) => string;
+    /** Short month, e.g. `"SEP"`. */
+    monthShort: (isoDateTime: string) => string;
+};
+/**
+ * Labels passed to `<EventCard>`. All translation happens in the caller.
+ *
+ * There is no `priceUnknown` here on purpose. An unknown fee is the commonest
+ * case in this feed, and every surface that used to render a placeholder for
+ * it now renders nothing — see the long note in `event-list-row-wide.tsx`.
+ */
+type EventCardLabels = {
+    free: string;
+    /** Badge shown while the event is currently running. */
+    liveNow: string;
+};
+/**
+ * Labels passed to `<EventListRow>`. Extends the card's with the sold-out
+ * chip; the row's ACTION labels live on `EventListRowWideLabels`, since the
+ * phone row has no action to label.
+ */
+type EventListRowLabels = EventCardLabels & {
+    soldOut: string;
+};
+/** Labels passed to `<DayRailChip>`. */
+type DayRailChipLabels = {
+    /** Screen-reader text for a day with no events, rendered where the count sits. */
+    noEvents: string;
+};
+
+export { type DayRailChipLabels, type EventCardLabels, type EventDateBadgeFormatters, type EventEntryFee, type EventFormatters, type EventListRowLabels, type EventPerformerRef, type EventPreview, type EventTagRef, resolveEventEntryFee };

package/dist/components/event-types.js

@@ -0,0 +1,2 @@
+export { resolveEventEntryFee } from '../chunk-DNSXMHYX.js';
+import '../chunk-3GWWZKX7.js';

package/dist/components/events-empty-state.d.ts

@@ -0,0 +1,44 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+/**
+ * EventsEmptyState — "nothing on in this city".
+ *
+ * BUILT FRESH, NOT COMPOSED FROM `empty-state.tsx`: that component's actions
+ * only take `onClick` (no `href`, no per-action icon, no link-component
+ * injection), and its buttons render through the shared `<Button>` variants,
+ * none of which produce this design's `bg-foreground`/`text-background`
+ * primary chip. Both actions here need to render either an `<a>` (via the
+ * same injected `linkComponent` contract as the rest of `Events/*`) or a
+ * `<button>`, which `empty-state.tsx` has no path for. Reusing it would mean
+ * bolting a second, incompatible action API onto it — the "compose it if it
+ * fits" bar isn't met here.
+ *
+ * Illustration follows the DS image-fallback rule: a real photo when
+ * `illustrationUrl` is given, otherwise a tinted gradient circle with a
+ * drop-shadowed icon — never a bare icon on a flat background.
+ */
+type EventsEmptyStateLinkProps = {
+    href: string;
+    className?: string;
+    children: ReactNode;
+    onClick?: (mouseEvent: React.MouseEvent) => void;
+};
+type EventsEmptyStateAction = {
+    label: string;
+    icon?: ReactNode;
+    href?: string;
+    onClick?: () => void;
+};
+type EventsEmptyStateProps = {
+    title: string;
+    body: string;
+    illustrationUrl?: string;
+    primaryAction?: EventsEmptyStateAction;
+    secondaryAction?: EventsEmptyStateAction;
+    linkComponent?: React.ComponentType<EventsEmptyStateLinkProps>;
+    className?: string;
+};
+declare function EventsEmptyState({ title, body, illustrationUrl, primaryAction, secondaryAction, linkComponent: LinkComponent, className, }: EventsEmptyStateProps): react_jsx_runtime.JSX.Element;
+
+export { EventsEmptyState, type EventsEmptyStateAction, type EventsEmptyStateLinkProps, type EventsEmptyStateProps };

package/dist/components/events-empty-state.js

@@ -0,0 +1,73 @@
+import { cn } from '../chunk-FEK5XGZW.js';
+import { __objRest, __spreadValues } from '../chunk-3GWWZKX7.js';
+import { CalendarOff } from 'lucide-react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function DefaultLink(_a) {
+  var _b = _a, { href } = _b, props = __objRest(_b, ["href"]);
+  return /* @__PURE__ */ jsx("a", __spreadValues({ href }, props));
+}
+var ACTION_BASE = "inline-flex h-11 w-full items-center justify-center gap-2 rounded-xl border px-5 text-sm font-semibold transition-colors duration-150 motion-reduce:transition-none cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 sm:w-auto";
+var PRIMARY_ACTION_CLASSES = cn(
+  ACTION_BASE,
+  "border-foreground bg-foreground text-background hover:bg-foreground/90"
+);
+var SECONDARY_ACTION_CLASSES = cn(
+  ACTION_BASE,
+  "border-border bg-background text-foreground hover:bg-muted"
+);
+function renderAction(action, classes, LinkComponent) {
+  if (!action) return null;
+  if (action.href) {
+    return /* @__PURE__ */ jsxs(
+      LinkComponent,
+      {
+        href: action.href,
+        className: classes,
+        onClick: action.onClick ? () => {
+          var _a;
+          return (_a = action.onClick) == null ? void 0 : _a.call(action);
+        } : void 0,
+        children: [
+          action.icon,
+          action.label
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs("button", { type: "button", className: classes, onClick: action.onClick, children: [
+    action.icon,
+    action.label
+  ] });
+}
+function EventsEmptyState({
+  title,
+  body,
+  illustrationUrl,
+  primaryAction,
+  secondaryAction,
+  linkComponent: LinkComponent = DefaultLink,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "status",
+      className: cn("flex flex-col items-center gap-[14px] pt-[44px] pb-[30px] text-center", className),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "h-24 w-24 shrink-0 overflow-hidden rounded-full sm:h-[120px] sm:w-[120px]", children: illustrationUrl ? (
+          // eslint-disable-next-line @next/next/no-img-element
+          /* @__PURE__ */ jsx("img", { src: illustrationUrl, alt: "", className: "h-full w-full object-cover" })
+        ) : /* @__PURE__ */ jsx("div", { className: "flex h-full w-full items-center justify-center bg-gradient-to-br from-primary/15 to-primary/5", children: /* @__PURE__ */ jsx(CalendarOff, { className: "h-8 w-8 text-primary drop-shadow-sm sm:h-10 sm:w-10", "aria-hidden": true }) }) }),
+        /* @__PURE__ */ jsx("h3", { className: "text-[18px] font-extrabold tracking-[-0.02em] sm:text-[20px]", children: title }),
+        /* @__PURE__ */ jsx("p", { className: "max-w-[460px] text-[13px] leading-[1.6] text-muted-foreground sm:text-[13.5px]", children: body }),
+        (primaryAction || secondaryAction) && /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-[9px] pt-1 sm:w-auto sm:flex-row sm:gap-[10px]", children: [
+          renderAction(primaryAction, PRIMARY_ACTION_CLASSES, LinkComponent),
+          renderAction(secondaryAction, SECONDARY_ACTION_CLASSES, LinkComponent)
+        ] })
+      ]
+    }
+  );
+}
+
+export { EventsEmptyState };

package/dist/components/facet-group.d.ts

@@ -0,0 +1,93 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentPropsWithoutRef } from 'react';
+import { LucideIcon } from 'lucide-react';
+
+/**
+ * FacetGroup — one filter group in the events sidebar or the mobile filter sheet.
+ *
+ * REAL INPUTS, NOT STYLED DIVS: the DS's `<Checkbox>` (`checkbox.tsx`) is
+ * a Radix primitive whose check glyph is fixed at 14px inside a 20px box with
+ * no prop to shrink either — this design's 16px box with an 11px glyph can't
+ * be reached by styling it from the outside, and this file isn't allowed to
+ * edit `checkbox.tsx` itself. So each row is a visually-hidden native
+ * `<input>` — real semantics, real keyboard/Enter/Space/arrow behaviour, a
+ * real accessibility-tree checked state — paired with a decorative box that
+ * carries the visual design. `peer`/`peer-focus-visible` puts a visible focus
+ * ring on the decorative box when the hidden input has focus.
+ *
+ * SELECTION MODE IS PART OF THE CONTRACT: `selection="single"` renders real
+ * radios sharing one `name`, so the browser and the accessibility tree both
+ * know only one value can be live. Rendering checkboxes for a single-valued
+ * facet (the events list's WHEN scope, for one) makes the control lie: ticking
+ * one option silently unticks another, and a screen reader announces N
+ * independent checkboxes one of which is inexplicably always checked.
+ *
+ * The group itself is a `<fieldset>`/`<legend>`, the correct native pairing
+ * for "here is a caption for this set of options" — screen readers announce
+ * the group title once per option instead of the title being lost as a bare
+ * visual label.
+ */
+type FacetOption = {
+    id: string;
+    label: string;
+    count: number;
+    checked?: boolean;
+};
+type FacetGroupSelection = "multiple" | "single";
+/**
+ * Row density. `comfortable` is the default because this component also renders
+ * inside the mobile filter sheet, where a row has to clear the 44px WCAG 2.5.5
+ * target floor. `compact` is opt-in, for a dense pointer-driven sidebar.
+ */
+type FacetGroupSize = "compact" | "comfortable";
+type FacetGroupProps = Omit<ComponentPropsWithoutRef<"fieldset">, "title" | "children" | "onToggle"> & {
+    title: string;
+    /** Decorative glyph in the legend, before the title. The title stays the accessible name. */
+    icon?: LucideIcon;
+    options: FacetOption[];
+    /**
+     * `"multiple"` (default) renders checkboxes. `"single"` renders radios sharing
+     * one `name` — use it for any facet whose model holds exactly one value.
+     */
+    selection?: FacetGroupSelection;
+    /**
+     * The radio group's shared `name` when `selection="single"`. Optional: a
+     * per-instance name is derived from `useId()` when omitted, so radios can
+     * never leak into a neighbouring group. Pass one when the fieldset is
+     * submitted as part of a native form and the name has to be stable.
+     */
+    name?: string;
+    size?: FacetGroupSize;
+    /**
+     * Turns the legend into a disclosure toggle for this group's options.
+     *
+     * Off by default: a sidebar of permanently-open groups is the right default
+     * for a facet panel, because seeing which dimensions exist is most of what
+     * the panel is for. Turn it on where several groups are long enough that
+     * scanning them costs more than opening one — the events list's five, with
+     * venues running to dozens of options.
+     */
+    collapsible?: boolean;
+    /** Only meaningful with `collapsible`. Groups open by default. */
+    defaultOpen?: boolean;
+    /** Fires with `(id, true)` for the newly picked radio under `selection="single"`. */
+    onToggle?: (id: string, checked: boolean) => void;
+    /** e.g. "Show all". Omit to hide the trailing action. */
+    moreLabel?: string;
+    onMore?: () => void;
+    className?: string;
+};
+declare function FacetGroup({ title, icon: Icon, options, selection, name, size, collapsible, defaultOpen, onToggle, moreLabel, onMore, className, ...rest }: FacetGroupProps): react_jsx_runtime.JSX.Element;
+type FacetGroupSkeletonProps = {
+    /** How many option rows to draw — match the expected/last-known option count. */
+    optionCount?: number;
+    /** Shows the trailing "more" placeholder, matching `FacetGroupProps["moreLabel"]`. */
+    showMore?: boolean;
+    /** Must match the `<FacetGroup>` it stands in for, or rows shift when data lands. */
+    size?: FacetGroupSize;
+    className?: string;
+};
+/** Mirrors `<FacetGroup>`'s geometry exactly so nothing shifts when data lands. */
+declare function FacetGroupSkeleton({ optionCount, showMore, size, className, }: FacetGroupSkeletonProps): react_jsx_runtime.JSX.Element;
+
+export { FacetGroup, type FacetGroupProps, type FacetGroupSelection, type FacetGroupSize, FacetGroupSkeleton, type FacetGroupSkeletonProps, type FacetOption };