@bearmenu/ui 0.8.52 → 0.8.54

package/dist/components/facet-group.js

@@ -1,9 +1,17 @@
+import { FilterOptionGroup } from '../chunk-GIJGVFGC.js';
+import '../chunk-RKNPPYRU.js';
+import '../chunk-NWZGSLPU.js';
 import { Skeleton } from '../chunk-XBBEX4SF.js';
+import { Button } from '../chunk-GHKTVHQG.js';
+import '../chunk-RIH2IS7X.js';
+import '../chunk-5YNIQ2BL.js';
+import '../chunk-ZLMRVBD7.js';
+import '../chunk-RYPPN2GZ.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import { __objRest, __spreadProps, __spreadValues } from '../chunk-MMUBH76A.js';
 import { useId, useState } from 'react';
 import { ChevronDown, Check } from 'lucide-react';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 
 var ROW_SIZE = {
   comfortable: "-mx-2 min-h-11 rounded-lg px-2",
@@ -21,6 +29,10 @@ function FacetGroup(_a) {
     selection = "multiple",
     name,
     size = "comfortable",
+    layout = "rows",
+    visibleLimit,
+    showAllLabel,
+    showLessLabel,
     collapsible = false,
     defaultOpen = true,
     onToggle,
@@ -35,6 +47,10 @@ function FacetGroup(_a) {
     "selection",
     "name",
     "size",
+    "layout",
+    "visibleLimit",
+    "showAllLabel",
+    "showLessLabel",
     "collapsible",
     "defaultOpen",
     "onToggle",
@@ -50,6 +66,48 @@ function FacetGroup(_a) {
   const setOpen = setIsOpen;
   const fallbackName = useId();
   const groupName = name != null ? name : fallbackName;
+  if (layout === "chips") {
+    const value = options.filter((option) => option.checked).map((option) => option.id);
+    return /* @__PURE__ */ jsx(
+      FilterOptionGroup,
+      {
+        title,
+        options: options.map((option) => __spreadProps(__spreadValues({}, option), { value: option.id })),
+        value,
+        selection,
+        name: groupName,
+        defaultOpen,
+        collapsible,
+        divider: false,
+        visibleLimit,
+        showAllLabel,
+        showLessLabel,
+        disabled: rest.disabled,
+        className,
+        onValueChange: (next) => {
+          if (selection === "single") {
+            if (next[0] != null) onToggle == null ? void 0 : onToggle(String(next[0]), true);
+            return;
+          }
+          for (const option of options) {
+            const checked = next.includes(option.id);
+            if (checked !== !!option.checked) onToggle == null ? void 0 : onToggle(option.id, checked);
+          }
+        },
+        footer: moreLabel && /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "link",
+            className: "min-h-11 px-0",
+            onClick: onMore,
+            "aria-expanded": moreExpanded,
+            children: moreLabel
+          }
+        )
+      }
+    );
+  }
   return (
     // NO SEPARATOR OF ITS OWN. This drew `<Separator className="absolute
     // inset-x-0 top-0" />`, which looked like a rule above each group and was
@@ -98,7 +156,14 @@ function FacetGroup(_a) {
                   open ? "mb-[11px]" : "mb-0"
                 ),
                 children: [
-                  Icon && /* @__PURE__ */ jsx(Icon, { "aria-hidden": true, className: "size-3.5 shrink-0", strokeWidth: 2.25 }),
+                  Icon && /* @__PURE__ */ jsx(
+                    Icon,
+                    {
+                      "aria-hidden": true,
+                      className: "size-3.5 shrink-0",
+                      strokeWidth: 2.25
+                    }
+                  ),
                   title,
                   /* @__PURE__ */ jsx(
                     ChevronDown,
@@ -114,7 +179,14 @@ function FacetGroup(_a) {
               }
             )
           ) : /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5", children: [
-            Icon && /* @__PURE__ */ jsx(Icon, { "aria-hidden": true, className: "size-3.5 shrink-0", strokeWidth: 2.25 }),
+            Icon && /* @__PURE__ */ jsx(
+              Icon,
+              {
+                "aria-hidden": true,
+                className: "size-3.5 shrink-0",
+                strokeWidth: 2.25
+              }
+            ),
             title
           ] })
         }
@@ -164,7 +236,13 @@ function FacetGroup(_a) {
                             "peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2",
                             checked ? "border-primary bg-primary" : "border-border bg-background"
                           ),
-                          children: checked && (isSingle ? /* @__PURE__ */ jsx("span", { className: "size-[7px] rounded-full bg-primary-foreground" }) : /* @__PURE__ */ jsx(Check, { className: "h-[11px] w-[11px] text-primary-foreground", strokeWidth: 3 }))
+                          children: checked && (isSingle ? /* @__PURE__ */ jsx("span", { className: "size-[7px] rounded-full bg-primary-foreground" }) : /* @__PURE__ */ jsx(
+                            Check,
+                            {
+                              className: "h-[11px] w-[11px] text-primary-foreground",
+                              strokeWidth: 3
+                            }
+                          ))
                         }
                       ),
                       /* @__PURE__ */ jsx(
@@ -205,18 +283,38 @@ function FacetGroupSkeleton({
   optionCount = 4,
   showMore,
   size = "comfortable",
-  className
+  className,
+  layout = "rows"
 }) {
+  if (layout === "chips")
+    return /* @__PURE__ */ jsxs("div", { "aria-hidden": "true", className: cn("py-3", className), children: [
+      /* @__PURE__ */ jsx(Skeleton, { className: "mb-4 h-4 w-24" }),
+      /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: Array.from({ length: optionCount }, (_, index) => /* @__PURE__ */ jsx(
+        Skeleton,
+        {
+          className: cn("h-11 rounded-2xl", index % 2 ? "w-28" : "w-24")
+        },
+        index
+      )) }),
+      showMore && /* @__PURE__ */ jsx(Skeleton, { className: "mt-3 h-4 w-20" })
+    ] });
   return (
     // Matches the live group: no rule of its own, `py-3`, and the row gap keyed
     // to the same density — or the panel shifts on load by the difference.
     /* @__PURE__ */ jsxs("div", { "aria-hidden": "true", className: cn("py-3", className), children: [
       /* @__PURE__ */ jsx(Skeleton, { className: "mb-[11px] h-3 w-20" }),
-      /* @__PURE__ */ jsx("div", { className: cn("flex flex-col", ROW_GAP[size]), children: Array.from({ length: optionCount }).map((_, index) => /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-[9px]", ROW_SIZE[size]), children: [
-        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-4 rounded-[5px]" }),
-        /* @__PURE__ */ jsx(Skeleton, { className: "h-3.5 w-24" }),
-        /* @__PURE__ */ jsx(Skeleton, { className: "ml-auto h-3 w-5" })
-      ] }, index)) }),
+      /* @__PURE__ */ jsx("div", { className: cn("flex flex-col", ROW_GAP[size]), children: Array.from({ length: optionCount }).map((_, index) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn("flex items-center gap-[9px]", ROW_SIZE[size]),
+          children: [
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-4 rounded-[5px]" }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-3.5 w-24" }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "ml-auto h-3 w-5" })
+          ]
+        },
+        index
+      )) }),
       showMore && /* @__PURE__ */ jsx(Skeleton, { className: "mt-[11px] h-3 w-16" })
     ] })
   );

package/dist/components/filter-option-chip.d.ts

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+
+type FilterOptionChipProps = Omit<ComponentPropsWithoutRef<"input">, "type" | "children" | "size"> & {
+    label: string;
+    /** Radios in one group must share a name. */
+    type?: "checkbox" | "radio";
+    /** Omit while counts are unresolved. Zero is a valid, selectable count. */
+    count?: number | null;
+    icon?: ReactNode;
+};
+/** A wrapping filter option with native selection and keyboard semantics. */
+declare function FilterOptionChip({ label, type, count, icon, className, id, disabled, ...input }: FilterOptionChipProps): react_jsx_runtime.JSX.Element;
+
+export { FilterOptionChip, type FilterOptionChipProps };

package/dist/components/filter-option-chip.js

@@ -0,0 +1,3 @@
+export { FilterOptionChip } from '../chunk-RKNPPYRU.js';
+import '../chunk-FEK5XGZW.js';
+import '../chunk-MMUBH76A.js';

package/dist/components/filter-option-group.d.ts

@@ -0,0 +1,37 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+type FilterOptionValue = string | number;
+type FilterOptionGroupProps = {
+    title: string;
+    options: {
+        value: FilterOptionValue;
+        label: string;
+        count?: number | null;
+        icon?: ReactNode;
+        section?: string;
+    }[];
+    value: FilterOptionValue[];
+    onValueChange: (value: FilterOptionValue[]) => void;
+    selection?: "multiple" | "single";
+    name?: string;
+    defaultOpen?: boolean;
+    collapsible?: boolean;
+    visibleLimit?: number;
+    showAllLabel?: string | ((count: number) => string);
+    showLessLabel?: string;
+    /** Extra controls or a selection explanation, before the options. */
+    children?: ReactNode;
+    footer?: ReactNode;
+    clearLabel?: string;
+    onClear?: () => void;
+    /** Omit neutral choices from the active summary without changing radio selection. */
+    summaryValues?: FilterOptionValue[];
+    className?: string;
+    divider?: boolean;
+    disabled?: boolean;
+};
+/** Presentation only: callers own filter rules, URL state, counts and translations. */
+declare function FilterOptionGroup({ title, options, value, onValueChange, selection, name, defaultOpen, collapsible, visibleLimit, showAllLabel, showLessLabel, children, footer, clearLabel, onClear, summaryValues, className, divider, disabled, }: FilterOptionGroupProps): react_jsx_runtime.JSX.Element;
+
+export { FilterOptionGroup, type FilterOptionGroupProps, type FilterOptionValue };

package/dist/components/filter-option-group.js

@@ -0,0 +1,10 @@
+export { FilterOptionGroup } from '../chunk-GIJGVFGC.js';
+import '../chunk-RKNPPYRU.js';
+import '../chunk-NWZGSLPU.js';
+import '../chunk-GHKTVHQG.js';
+import '../chunk-RIH2IS7X.js';
+import '../chunk-5YNIQ2BL.js';
+import '../chunk-ZLMRVBD7.js';
+import '../chunk-RYPPN2GZ.js';
+import '../chunk-FEK5XGZW.js';
+import '../chunk-MMUBH76A.js';

package/dist/components/filter-panel-footer.d.ts

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type FilterPanelFooterProps = {
+    resetLabel: string;
+    resultsLabel: string;
+    onReset: () => void;
+    onResults: () => void;
+    canReset: boolean;
+    pending?: boolean;
+    resetHint?: string;
+};
+/** Persistent actions belong outside the panel's scroll container. */
+declare function FilterPanelFooter({ resetLabel, resultsLabel, onReset, onResults, canReset, pending, resetHint, }: FilterPanelFooterProps): react_jsx_runtime.JSX.Element;
+
+export { FilterPanelFooter, type FilterPanelFooterProps };

package/dist/components/filter-panel-footer.js

@@ -0,0 +1,63 @@
+import { Button } from '../chunk-GHKTVHQG.js';
+import '../chunk-RIH2IS7X.js';
+import '../chunk-5YNIQ2BL.js';
+import { Text } from '../chunk-ZLMRVBD7.js';
+import '../chunk-FEK5XGZW.js';
+import '../chunk-MMUBH76A.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function FilterPanelFooter({
+  resetLabel,
+  resultsLabel,
+  onReset,
+  onResults,
+  canReset,
+  pending,
+  resetHint
+}) {
+  return /* @__PURE__ */ jsxs(
+    "footer",
+    {
+      className: "shrink-0 border-t border-border bg-card px-4 pt-3 pb-[max(1rem,env(safe-area-inset-bottom))]",
+      "data-slot": "filter-panel-footer",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "outline",
+              className: "min-h-11 h-auto flex-1 whitespace-normal py-2",
+              disabled: !canReset,
+              onClick: onReset,
+              children: resetLabel
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              className: "min-h-11 h-auto flex-[2] whitespace-normal py-2",
+              disabled: pending,
+              "aria-busy": pending || void 0,
+              onClick: onResults,
+              children: resultsLabel
+            }
+          )
+        ] }),
+        resetHint && /* @__PURE__ */ jsx(
+          Text,
+          {
+            as: "p",
+            variant: "caption",
+            color: "muted",
+            className: "mt-2 leading-relaxed",
+            children: resetHint
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { FilterPanelFooter };

package/dist/components/menu-item.d.ts

@@ -64,6 +64,18 @@ type MenuItemLabels = {
      */
     externalRating?: (score: string) => string;
 };
+/**
+ * What the count beside the row counts.
+ *
+ * - `"mentions"`: every review that named the item, complaints included. Drawn
+ *   with the quote glyph.
+ * - `"praise"`: only the reviews that praised it. Drawn with a thumbs-up.
+ *
+ * The caller decides, because only the caller knows which number it passed in
+ * `item.mentions`. A thumbs-up must never sit on a count that includes
+ * complaints, so `"mentions"` is the default.
+ */
+type MenuItemCountKind = "praise" | "mentions";
 type MenuItemProps = {
     item: MenuItemPreview;
     labels: MenuItemLabels;
@@ -85,6 +97,12 @@ type MenuItemProps = {
     onSignatureEvidence?: () => void;
     /** Opens the reviews behind the mention count. */
     onMentions?: () => void;
+    /**
+     * Whether the count is praise or every mention. Sets the glyph before the
+     * numeral: a thumbs-up for `"praise"`, the quote glyph for `"mentions"`.
+     * Defaults to `"mentions"`. Keep `labels.mentions` in step with it.
+     */
+    countKind?: MenuItemCountKind;
     /**
      * An outside aggregate score for the item (a wine's Vivino rating, a beer's
      * Untappd one), shown as a star and the score beside the mention count.
@@ -128,17 +146,20 @@ type MenuItemProps = {
     className?: string;
 };
 /**
- * The mention count: a filled quote glyph and the numeral, pinned right.
+ * The mention count: a glyph and the numeral, pinned right. The glyph is the
+ * quote glyph for every mention, or a thumbs-up when the count is praise only
+ * (see `MenuItemCountKind`).
  *
  * Deliberately NOT a badge — a chip would add a filled shape to a row that has
  * none, and would read as a status label the venue was given rather than a
  * count drawn from the same reviews.
  */
-declare function MentionSignal({ label, count, onMentions, formatCount, }: {
+declare function MentionSignal({ label, count, onMentions, formatCount, countKind, }: {
     label: string;
     count: number;
     onMentions?: () => void;
     formatCount?: (value: number) => string;
+    countKind?: MenuItemCountKind;
 }): react_jsx_runtime.JSX.Element;
 /**
  * An external aggregate score: a star and the numeral, in the neutral muted
@@ -152,4 +173,4 @@ declare function ExternalRatingSignal({ label, value }: {
 }): react_jsx_runtime.JSX.Element;
 declare const MenuItem: React.NamedExoticComponent<MenuItemProps>;
 
-export { ExternalRatingSignal, MentionSignal, MenuItem, type MenuItemLabels, type MenuItemLinkProps, type MenuItemProps };
+export { ExternalRatingSignal, MentionSignal, MenuItem, type MenuItemCountKind, type MenuItemLabels, type MenuItemLinkProps, type MenuItemProps };

package/dist/components/menu-item.js

@@ -1,4 +1,4 @@
-export { ExternalRatingSignal, MentionSignal, MenuItem } from '../chunk-4WW3HPIW.js';
+export { ExternalRatingSignal, MentionSignal, MenuItem } from '../chunk-6Z6MBILC.js';
 import '../chunk-6PQINSAA.js';
 import '../chunk-RYPPN2GZ.js';
 import '../chunk-FEK5XGZW.js';

package/dist/components/multi-select-combobox.js

@@ -1,5 +1,5 @@
 import { Checkbox } from '../chunk-L3CDXVEP.js';
-import { Popover, PopoverTrigger, PopoverContent } from '../chunk-2ADCZXZJ.js';
+import { Popover, PopoverTrigger, PopoverContent } from '../chunk-RXXD3UYP.js';
 import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from '../chunk-PGQXVJXW.js';
 import '../chunk-IQIJCMG2.js';
 import { Button } from '../chunk-GHKTVHQG.js';

package/dist/components/place-card.js

@@ -1,6 +1,6 @@
+import { HOVER_IMAGE_MOTION, HOVER_IMAGE_WRAPPER, HOVER_MOTION, HOVER_LIFT_GRID_GROUP } from '../chunk-XCB3F6SF.js';
 import { NEUTRAL_ICON_FILTER } from '../chunk-LQWGZIYA.js';
 import { OVERLAY_PILL } from '../chunk-EZG2NELX.js';
-import { HOVER_IMAGE_MOTION, HOVER_IMAGE_WRAPPER, HOVER_MOTION, HOVER_LIFT_GRID_GROUP } from '../chunk-XCB3F6SF.js';
 import { GradeAtom } from '../chunk-YE4ZQUTI.js';
 import { showsGradeAtom } from '../chunk-I5V446BX.js';
 import { Separator } from '../chunk-NWZGSLPU.js';

package/dist/components/popover.js

@@ -1,3 +1,3 @@
-export { Popover, PopoverAnchor, PopoverArrow, PopoverClose, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger } from '../chunk-2ADCZXZJ.js';
+export { Popover, PopoverAnchor, PopoverArrow, PopoverClose, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger } from '../chunk-RXXD3UYP.js';
 import '../chunk-FEK5XGZW.js';
 import '../chunk-MMUBH76A.js';

package/dist/components/searchable-select.js

@@ -1,4 +1,4 @@
-import { Popover, PopoverTrigger, PopoverContent } from '../chunk-2ADCZXZJ.js';
+import { Popover, PopoverTrigger, PopoverContent } from '../chunk-RXXD3UYP.js';
 import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from '../chunk-PGQXVJXW.js';
 import '../chunk-IQIJCMG2.js';
 import { Button } from '../chunk-GHKTVHQG.js';

package/dist/components/spinner.d.ts

@@ -4,11 +4,11 @@ import { VariantProps } from 'class-variance-authority';
 
 declare const spinnerVariants: (props?: ({
     size?: "default" | "xs" | "sm" | "lg" | "xl" | null | undefined;
-    tone?: "primary" | "default" | "inherit" | "destructive" | null | undefined;
+    tone?: "primary" | "inherit" | "default" | "destructive" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const Spinner: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & VariantProps<(props?: ({
     size?: "default" | "xs" | "sm" | "lg" | "xl" | null | undefined;
-    tone?: "primary" | "default" | "inherit" | "destructive" | null | undefined;
+    tone?: "primary" | "inherit" | "default" | "destructive" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & {
     /** Visually-hidden label for screen readers. Defaults to "Loading". */
     label?: string;

package/dist/components/tag.d.ts

@@ -3,11 +3,11 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const tagVariants: (props?: ({
-    variant?: "primary" | "default" | "success" | "warning" | "destructive" | "outline" | "quiet" | null | undefined;
+    variant?: "primary" | "success" | "warning" | "default" | "destructive" | "outline" | "quiet" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const Tag: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & VariantProps<(props?: ({
-    variant?: "primary" | "default" | "success" | "warning" | "destructive" | "outline" | "quiet" | null | undefined;
+    variant?: "primary" | "success" | "warning" | "default" | "destructive" | "outline" | "quiet" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & {
     onRemove?: () => void;

package/dist/components/text.d.ts

@@ -23,7 +23,7 @@ import { VariantProps } from 'class-variance-authority';
  */
 declare const textVariants: (props?: ({
     variant?: "small" | "body" | "display" | "h2" | "h3" | "label" | "caption" | "h1" | "h4" | "body-lg" | "body-sm" | "overline" | null | undefined;
-    color?: "primary" | "default" | "inherit" | "destructive" | "muted" | "primary-foreground" | null | undefined;
+    color?: "primary" | "inherit" | "default" | "destructive" | "muted" | "primary-foreground" | null | undefined;
     weight?: "bold" | "medium" | "normal" | "semibold" | null | undefined;
     leading?: "none" | "normal" | "tight" | "snug" | "relaxed" | "loose" | null | undefined;
     tracking?: "normal" | "tight" | "wide" | "wider" | null | undefined;

package/dist/components/toggle.d.ts

@@ -11,7 +11,7 @@ import { VariantProps } from 'class-variance-authority';
  * `data-[state=on]:` utilities sort after `hover:` and still win while on.
  */
 declare const toggleVariants: (props?: ({
-    variant?: "default" | "tab" | "outline" | "chip" | "segmented" | null | undefined;
+    variant?: "tab" | "default" | "outline" | "chip" | "segmented" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 /**

package/dist/components/top-ranking-entry.js

@@ -1,4 +1,4 @@
-import { MenuItem } from '../chunk-4WW3HPIW.js';
+import { MenuItem } from '../chunk-6Z6MBILC.js';
 import '../chunk-6PQINSAA.js';
 import { Separator } from '../chunk-NWZGSLPU.js';
 import { Skeleton } from '../chunk-XBBEX4SF.js';

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@bearmenu/ui",
-  "version": "0.8.52",
+  "version": "0.8.54",
   "packageManager": "pnpm@10.28.1",
-  "description": "BearMenu design system — shared UI tokens, primitives, and components",
+  "description": "BearMenu design system \u2014 shared UI tokens, primitives, and components",
   "license": "UNLICENSED",
   "repository": {
     "type": "git",
@@ -204,7 +204,10 @@
     "./lib/icon-registry": "./src/lib/icon-registry.ts",
     "./lib/motion": "./src/lib/motion.ts",
     "./lib/overlay-pill": "./src/lib/overlay-pill.ts",
-    "./lib/utils": "./src/lib/utils.ts"
+    "./lib/utils": "./src/lib/utils.ts",
+    "./components/filter-option-chip": "./src/components/filter-option-chip.tsx",
+    "./components/filter-option-group": "./src/components/filter-option-group.tsx",
+    "./components/filter-panel-footer": "./src/components/filter-panel-footer.tsx"
   },
   "publishConfig": {
     "exports": {
@@ -304,10 +307,10 @@
     "@radix-ui/react-toggle": "^1.1.10",
     "@radix-ui/react-toggle-group": "^1.1.11",
     "@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",
+    "@storybook/addon-a11y": "^10.6.5",
+    "@storybook/addon-docs": "^10.6.5",
+    "@storybook/react": "^10.6.5",
+    "@storybook/react-vite": "^10.6.5",
     "@tailwindcss/postcss": "^4.2.4",
     "@tailwindcss/vite": "^4.2.4",
     "@testing-library/jest-dom": "^6.9.1",
@@ -333,7 +336,7 @@
     "react-markdown": "^10.1.0",
     "remark-gfm": "^4.0.1",
     "sonner": "^2.0.7",
-    "storybook": "^10.3.5",
+    "storybook": "^10.6.5",
     "tailwind-merge": "^3.5.0",
     "tailwindcss": "^4.2.4",
     "tsup": "^8.5.0",

package/src/components/event-detail-panel.stories.tsx

@@ -283,6 +283,22 @@ export const Loading: Story = {
   decorators: SideSheet.decorators,
 };
 
+export const EntryAndBrowseActions: Story = {
+  args: {
+    tags: [{ label: "Party", href: "/events?tags=party" }],
+    entryDetails: {
+      label: "Entry and tickets",
+      description: "Check availability with the organizer.",
+      action: (
+        <Button asChild fullWidth>
+          <a href="https://tickets.example.com">Get tickets</a>
+        </Button>
+      ),
+    },
+  },
+  decorators: SideSheet.decorators,
+};
+
 export const Error: Story = {
   render: () => (
     <EventDetailPanelError

package/src/components/event-detail-panel.test.tsx

@@ -37,6 +37,42 @@ const event: EventPreview = {
 const base = { event, labels, formatters, dateLine: "Tuesday · 17:30" };
 
 describe("EventDetailPanel", () => {
+  it("opens entry information and exposes a separate booking link", () => {
+    render(
+      <EventDetailPanel
+        {...base}
+        entryDetails={{
+          label: "Entry and tickets",
+          description: "Book with the organizer.",
+          action: <a href="https://tickets.example.com">Get tickets</a>,
+        }}
+      />,
+    );
+    expect(
+      screen.queryByRole("link", { name: "Get tickets" }),
+    ).not.toBeInTheDocument();
+    fireEvent.click(screen.getByRole("button", { name: "Entry and tickets" }));
+    expect(screen.getByText("Book with the organizer.")).toBeVisible();
+    expect(screen.getByRole("link", { name: "Get tickets" })).toHaveAttribute(
+      "href",
+      "https://tickets.example.com",
+    );
+  });
+
+  it("gives browse tags destinations while keeping descriptive tags out of the tab order", () => {
+    render(
+      <EventDetailPanel
+        {...base}
+        tags={["Descriptive", { label: "Party", href: "/events?tags=party" }]}
+      />,
+    );
+    expect(screen.getByRole("link", { name: "Party" })).toHaveAttribute(
+      "href",
+      "/events?tags=party",
+    );
+    expect(screen.getByText("Descriptive").tagName).toBe("SPAN");
+  });
+
   it("shows the status chip for live, soon and ended, and none when upcoming", () => {
     const { rerender } = render(<EventDetailPanel {...base} />);
     expect(screen.queryByText("Now")).not.toBeInTheDocument();