@bearmenu/ui 0.8.52 → 0.8.54

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

@@ -19,6 +19,7 @@ import { cn } from "../lib/utils";
 import { GradeAtom, type GradeAtomLabels } from "./grade-atom";
 import type { PlaceGrade } from "./place-types";
 import { Button } from "./button";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover";
 import { EventPosterFallback } from "./event-poster-fallback";
 import { Separator } from "./separator";
 import { Skeleton } from "./skeleton";
@@ -144,8 +145,15 @@ export type EventDetailPanelProps = {
   /** The hype tier, rendered as given (the app's own badge) in the chip row. */
   hype?: React.ReactNode;
   venue?: EventDetailVenue;
-  /** Activity tags, after status, fee and hype. */
-  tags?: string[];
+  /** Activity tags. Pass a destination to make a tag a browse action. */
+  tags?: (string | { label: string; href: string; onClick?: () => void })[];
+  /** Entry information opened by the price/free-entry control. */
+  entryDetails?: {
+    label: string;
+    description: string;
+    action?: React.ReactNode;
+    onOpenChange?: (open: boolean) => void;
+  };
   /** Performer names, in the order the API gave them. */
   performers?: string[];
   /** How many performers to show before the "show all" chip. Default 5. */
@@ -197,6 +205,7 @@ export function EventDetailPanel({
   hype,
   venue,
   tags,
+  entryDetails,
   performers,
   performersPreview = 5,
   showAllPerformersLabel,
@@ -289,6 +298,8 @@ export function EventDetailPanel({
             soonLabel={soonLabel}
             hype={hype}
             tags={tags}
+            entryDetails={entryDetails}
+            linkComponent={LinkComponent}
           />
 
           {venue && (
@@ -675,7 +686,14 @@ export function EventDetailPanelSkeleton({
 
 export type EventDetailChipRowProps = Pick<
   EventDetailPanelProps,
-  "event" | "formatters" | "status" | "soonLabel" | "hype" | "tags"
+  | "event"
+  | "formatters"
+  | "status"
+  | "soonLabel"
+  | "hype"
+  | "tags"
+  | "entryDetails"
+  | "linkComponent"
 > & {
   /** Only the chip strings — a page rendering the row alone need not name the section headings. */
   labels: Pick<EventDetailPanelLabels, "free" | "liveNow" | "ended">;
@@ -683,7 +701,7 @@ export type EventDetailChipRowProps = Pick<
 };
 
 /**
- * One wrapping row, all 24px: status, fee, hype, then activity tags. Exported
+ * One wrapping row: metadata, entry information, then activity links. Exported
  * so the page renders the same row above its title — it is the panel's row,
  * not a second one.
  */
@@ -695,11 +713,25 @@ export function EventDetailChipRow({
   soonLabel,
   hype,
   tags,
+  entryDetails,
+  linkComponent: LinkComponent = DefaultLink,
   className,
 }: EventDetailChipRowProps) {
   const fee = resolveEventEntryFee(event);
+  const priceLabel =
+    fee.kind === "free"
+      ? labels.free
+      : fee.kind === "paid"
+        ? formatters.price(fee.amountRon)
+        : null;
+  const priceIcon =
+    fee.kind === "free" ? (
+      <Gift className="h-3.5 w-3.5" aria-hidden />
+    ) : (
+      <Ticket className="h-3.5 w-3.5" aria-hidden />
+    );
   return (
-    <div className={cn("flex flex-wrap gap-[7px]", className)}>
+    <div className={cn("flex flex-wrap items-center gap-[7px]", className)}>
       {status === "live" && (
         <span
           className={cn(
@@ -732,7 +764,33 @@ export function EventDetailChipRow({
           {labels.ended}
         </span>
       )}
-      {fee.kind === "free" && (
+      {priceLabel && entryDetails ? (
+        <Popover onOpenChange={entryDetails.onOpenChange}>
+          <PopoverTrigger asChild>
+            <Button
+              variant="outline"
+              size="sm"
+              className="min-h-11 rounded-full"
+              aria-label={entryDetails.label}
+            >
+              {priceIcon}
+              {priceLabel}
+              <ChevronRight className="h-3.5 w-3.5" aria-hidden />
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent
+            align="start"
+            aria-label={entryDetails.label}
+            className="flex max-w-[calc(100vw-2rem)] flex-col gap-3"
+          >
+            <p className="text-sm font-semibold">{priceLabel}</p>
+            <p className="text-sm text-muted-foreground">
+              {entryDetails.description}
+            </p>
+            {entryDetails.action}
+          </PopoverContent>
+        </Popover>
+      ) : fee.kind === "free" ? (
         <span
           className={cn(
             CHIP,
@@ -742,19 +800,33 @@ export function EventDetailChipRow({
           <Gift className="h-3 w-3" aria-hidden />
           {labels.free}
         </span>
-      )}
-      {fee.kind === "paid" && (
+      ) : fee.kind === "paid" ? (
         <span className={cn(CHIP, "text-foreground")}>
           <Ticket className="h-3 w-3" aria-hidden />
           {formatters.price(fee.amountRon)}
         </span>
-      )}
+      ) : null}
       {hype}
-      {tags?.map((tag) => (
-        <span key={tag} className={CHIP}>
-          {tag}
-        </span>
-      ))}
+      {tags?.map((tag) =>
+        typeof tag === "string" ? (
+          <span key={tag} className="text-xs text-muted-foreground">
+            {tag}
+          </span>
+        ) : (
+          <Button
+            key={tag.href}
+            asChild
+            variant="outline"
+            size="sm"
+            className="min-h-11 rounded-full"
+          >
+            <LinkComponent href={tag.href} onClick={tag.onClick}>
+              {tag.label}
+              <ChevronRight className="h-3.5 w-3.5" aria-hidden />
+            </LinkComponent>
+          </Button>
+        ),
+      )}
     </div>
   );
 }

package/src/components/facet-group.tsx

@@ -3,6 +3,8 @@
 import { type ComponentPropsWithoutRef, useId, useState } from "react";
 import { Check, ChevronDown, type LucideIcon } from "lucide-react";
 import { cn } from "../lib/utils";
+import { FilterOptionGroup } from "./filter-option-group";
+import { Button } from "./button";
 import { Skeleton } from "./skeleton";
 
 /**
@@ -101,6 +103,12 @@ export type FacetGroupProps = Omit<
    */
   name?: string;
   size?: FacetGroupSize;
+  /** Wrapping native-input chips for filter panels. Rows remain the default. */
+  layout?: "rows" | "chips";
+  /** Optional bounded chip list; selected options always stay visible. */
+  visibleLimit?: number;
+  showAllLabel?: string | ((count: number) => string);
+  showLessLabel?: string;
   /**
    * Turns the legend into a disclosure toggle for this group's options.
    *
@@ -135,6 +143,10 @@ export function FacetGroup({
   selection = "multiple",
   name,
   size = "comfortable",
+  layout = "rows",
+  visibleLimit,
+  showAllLabel,
+  showLessLabel,
   collapsible = false,
   defaultOpen = true,
   onToggle,
@@ -155,6 +167,52 @@ export function FacetGroup({
   const fallbackName = useId();
   const groupName = name ?? fallbackName;
 
+  if (layout === "chips") {
+    const value = options
+      .filter((option) => option.checked)
+      .map((option) => option.id);
+    return (
+      <FilterOptionGroup
+        title={title}
+        options={options.map((option) => ({ ...option, value: option.id }))}
+        value={value}
+        selection={selection}
+        name={groupName}
+        defaultOpen={defaultOpen}
+        collapsible={collapsible}
+        divider={false}
+        visibleLimit={visibleLimit}
+        showAllLabel={showAllLabel}
+        showLessLabel={showLessLabel}
+        disabled={rest.disabled}
+        className={className}
+        onValueChange={(next) => {
+          if (selection === "single") {
+            if (next[0] != null) onToggle?.(String(next[0]), true);
+            return;
+          }
+          for (const option of options) {
+            const checked = next.includes(option.id);
+            if (checked !== !!option.checked) onToggle?.(option.id, checked);
+          }
+        }}
+        footer={
+          moreLabel && (
+            <Button
+              type="button"
+              variant="link"
+              className="min-h-11 px-0"
+              onClick={onMore}
+              aria-expanded={moreExpanded}
+            >
+              {moreLabel}
+            </Button>
+          )
+        }
+      />
+    );
+  }
+
   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
@@ -172,7 +230,7 @@ export function FacetGroup({
       <legend
         className={cn(
           "block w-full p-0 text-[11.5px] font-extrabold tracking-[0.1em] text-muted-foreground uppercase",
-          collapsible ? "mb-0" : "mb-[11px]"
+          collapsible ? "mb-0" : "mb-[11px]",
         )}
       >
         {collapsible ? (
@@ -197,22 +255,34 @@ export function FacetGroup({
               // groups looked like the rules were mis-centred — they were
               // centred, the labels were not. Transitioned alongside the panel
               // so the two move as one gesture rather than the margin snapping.
-              open ? "mb-[11px]" : "mb-0"
+              open ? "mb-[11px]" : "mb-0",
             )}
           >
-            {Icon && <Icon aria-hidden className="size-3.5 shrink-0" strokeWidth={2.25} />}
+            {Icon && (
+              <Icon
+                aria-hidden
+                className="size-3.5 shrink-0"
+                strokeWidth={2.25}
+              />
+            )}
             {title}
             <ChevronDown
               aria-hidden
               className={cn(
                 "ml-auto size-3.5 shrink-0 transition-transform duration-150 motion-reduce:transition-none",
-                open ? "rotate-180" : "rotate-0"
+                open ? "rotate-180" : "rotate-0",
               )}
             />
           </button>
         ) : (
           <span className="flex items-center gap-1.5">
-            {Icon && <Icon aria-hidden className="size-3.5 shrink-0" strokeWidth={2.25} />}
+            {Icon && (
+              <Icon
+                aria-hidden
+                className="size-3.5 shrink-0"
+                strokeWidth={2.25}
+              />
+            )}
             {title}
           </span>
         )}
@@ -244,7 +314,7 @@ export function FacetGroup({
       <div
         className={cn(
           "grid transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none",
-          open ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
+          open ? "grid-rows-[1fr]" : "grid-rows-[0fr]",
         )}
       >
         <div className="overflow-hidden">
@@ -254,54 +324,63 @@ export function FacetGroup({
             aria-hidden={!open || undefined}
             className={cn("flex flex-col", ROW_GAP[size])}
           >
-        {options.map((option) => {
-          const checked = !!option.checked;
+            {options.map((option) => {
+              const checked = !!option.checked;
 
-          return (
-            <label
-              key={option.id}
-              className={cn(
-                "flex cursor-pointer items-center gap-[9px] text-[13.5px] select-none",
-                "transition-colors duration-150 hover:bg-muted/60 motion-reduce:transition-none",
-                ROW_SIZE[size]
-              )}
-            >
-              <input
-                type={isSingle ? "radio" : "checkbox"}
-                name={isSingle ? groupName : undefined}
-                className="peer sr-only"
-                checked={checked}
-                onChange={(event) => onToggle?.(option.id, event.target.checked)}
-              />
-              <span
-                aria-hidden
-                className={cn(
-                  "flex h-4 w-4 shrink-0 items-center justify-center border-[1.5px] transition-colors duration-150 motion-reduce:transition-none",
-                  isSingle ? "rounded-full" : "rounded-[5px]",
-                  "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"
-                )}
-              >
-                {checked &&
-                  (isSingle ? (
-                    <span className="size-[7px] rounded-full bg-primary-foreground" />
-                  ) : (
-                    <Check className="h-[11px] w-[11px] text-primary-foreground" strokeWidth={3} />
-                  ))}
-              </span>
-              <span
-                title={option.label}
-                className={cn(
-                  "min-w-0 truncate",
-                  checked ? "font-bold text-primary" : "font-normal text-foreground"
-                )}
-              >
-                {option.label}
-              </span>
-              <span className="ml-auto shrink-0 font-mono text-[11.5px] tabular-nums text-muted-foreground">
-                {option.count}
-              </span>
-            </label>
+              return (
+                <label
+                  key={option.id}
+                  className={cn(
+                    "flex cursor-pointer items-center gap-[9px] text-[13.5px] select-none",
+                    "transition-colors duration-150 hover:bg-muted/60 motion-reduce:transition-none",
+                    ROW_SIZE[size],
+                  )}
+                >
+                  <input
+                    type={isSingle ? "radio" : "checkbox"}
+                    name={isSingle ? groupName : undefined}
+                    className="peer sr-only"
+                    checked={checked}
+                    onChange={(event) =>
+                      onToggle?.(option.id, event.target.checked)
+                    }
+                  />
+                  <span
+                    aria-hidden
+                    className={cn(
+                      "flex h-4 w-4 shrink-0 items-center justify-center border-[1.5px] transition-colors duration-150 motion-reduce:transition-none",
+                      isSingle ? "rounded-full" : "rounded-[5px]",
+                      "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",
+                    )}
+                  >
+                    {checked &&
+                      (isSingle ? (
+                        <span className="size-[7px] rounded-full bg-primary-foreground" />
+                      ) : (
+                        <Check
+                          className="h-[11px] w-[11px] text-primary-foreground"
+                          strokeWidth={3}
+                        />
+                      ))}
+                  </span>
+                  <span
+                    title={option.label}
+                    className={cn(
+                      "min-w-0 truncate",
+                      checked
+                        ? "font-bold text-primary"
+                        : "font-normal text-foreground",
+                    )}
+                  >
+                    {option.label}
+                  </span>
+                  <span className="ml-auto shrink-0 font-mono text-[11.5px] tabular-nums text-muted-foreground">
+                    {option.count}
+                  </span>
+                </label>
               );
             })}
           </div>
@@ -329,6 +408,7 @@ export type FacetGroupSkeletonProps = {
   showMore?: boolean;
   /** Must match the `<FacetGroup>` it stands in for, or rows shift when data lands. */
   size?: FacetGroupSize;
+  layout?: "rows" | "chips";
   className?: string;
 };
 
@@ -338,7 +418,23 @@ export function FacetGroupSkeleton({
   showMore,
   size = "comfortable",
   className,
+  layout = "rows",
 }: FacetGroupSkeletonProps) {
+  if (layout === "chips")
+    return (
+      <div aria-hidden="true" className={cn("py-3", className)}>
+        <Skeleton className="mb-4 h-4 w-24" />
+        <div className="flex flex-wrap gap-2">
+          {Array.from({ length: optionCount }, (_, index) => (
+            <Skeleton
+              key={index}
+              className={cn("h-11 rounded-2xl", index % 2 ? "w-28" : "w-24")}
+            />
+          ))}
+        </div>
+        {showMore && <Skeleton className="mt-3 h-4 w-20" />}
+      </div>
+    );
   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.
@@ -347,7 +443,10 @@ export function FacetGroupSkeleton({
 
       <div className={cn("flex flex-col", ROW_GAP[size])}>
         {Array.from({ length: optionCount }).map((_, index) => (
-          <div key={index} className={cn("flex items-center gap-[9px]", ROW_SIZE[size])}>
+          <div
+            key={index}
+            className={cn("flex items-center gap-[9px]", ROW_SIZE[size])}
+          >
             <Skeleton className="h-4 w-4 rounded-[5px]" />
             <Skeleton className="h-3.5 w-24" />
             <Skeleton className="ml-auto h-3 w-5" />

package/src/components/filter-option-chip.test.tsx

@@ -0,0 +1,50 @@
+import { useState } from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it } from "vitest";
+import { FilterOptionChip } from "./filter-option-chip";
+
+describe("FilterOptionChip", () => {
+  it("keeps zero-count selections operable by keyboard", async () => {
+    function Example() {
+      const [checked, setChecked] = useState(true);
+      return (
+        <FilterOptionChip
+          label="Italiană"
+          count={0}
+          checked={checked}
+          onChange={(e) => setChecked(e.target.checked)}
+        />
+      );
+    }
+    const user = userEvent.setup();
+    render(<Example />);
+    const checkbox = screen.getByRole("checkbox", { name: "Italiană" });
+    expect(checkbox).toBeChecked();
+    await user.tab();
+    expect(checkbox).toHaveFocus();
+    await user.keyboard(" ");
+    expect(checkbox).not.toBeChecked();
+  });
+
+  it("keeps native single selection for radio groups", async () => {
+    const user = userEvent.setup();
+    render(
+      <fieldset>
+        <legend>Budget</legend>
+        <FilterOptionChip
+          type="radio"
+          name="budget"
+          label="Budget friendly"
+          defaultChecked
+        />
+        <FilterOptionChip type="radio" name="budget" label="Premium" />
+      </fieldset>,
+    );
+    await user.click(screen.getByRole("radio", { name: "Premium" }));
+    expect(screen.getByRole("radio", { name: "Premium" })).toBeChecked();
+    expect(
+      screen.getByRole("radio", { name: "Budget friendly" }),
+    ).not.toBeChecked();
+  });
+});

package/src/components/filter-option-chip.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import { type ComponentPropsWithoutRef, type ReactNode, useId } from "react";
+import { Check } from "lucide-react";
+import { cn } from "../lib/utils";
+
+export 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. */
+export function FilterOptionChip({
+  label,
+  type = "checkbox",
+  count,
+  icon,
+  className,
+  id,
+  disabled,
+  ...input
+}: FilterOptionChipProps) {
+  const generatedId = useId();
+  const inputId = id ?? generatedId;
+  return (
+    <label
+      htmlFor={inputId}
+      className={cn(
+        "relative inline-flex max-w-full min-w-0",
+        disabled && "cursor-not-allowed opacity-50",
+        className,
+      )}
+    >
+      <input
+        {...input}
+        id={inputId}
+        type={type}
+        disabled={disabled}
+        aria-label={input["aria-label"] ?? label}
+        className="peer sr-only"
+      />
+      <span
+        className={cn(
+          "flex min-h-11 min-w-0 max-w-full cursor-pointer items-center gap-2 rounded-2xl border border-border bg-background px-3 py-2 text-sm text-foreground",
+          "transition-colors hover:bg-muted motion-reduce:transition-none",
+          "peer-checked:border-primary peer-checked:bg-primary/10 peer-checked:shadow-[inset_0_0_0_1px_var(--primary)] peer-checked:text-primary",
+          "peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-ring",
+          "peer-disabled:pointer-events-none peer-disabled:cursor-not-allowed",
+          "[&_.filter-check]:hidden peer-checked:[&_.filter-check]:block peer-checked:[&_.filter-icon]:hidden",
+        )}
+      >
+        <Check
+          aria-hidden
+          className="filter-check size-4 shrink-0"
+          strokeWidth={2.5}
+        />
+        {icon && (
+          <span aria-hidden className="filter-icon shrink-0 [&>svg]:size-4">
+            {icon}
+          </span>
+        )}
+        <span className="min-w-0 [overflow-wrap:anywhere]">{label}</span>
+        {count != null && (
+          <span
+            aria-hidden
+            className="shrink-0 text-xs tabular-nums text-muted-foreground"
+          >
+            {count}
+          </span>
+        )}
+      </span>
+    </label>
+  );
+}