@bearmenu/ui 0.8.51 → 0.8.53

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/featured-rail-item.tsx

@@ -34,6 +34,8 @@ export type FeaturedRailItemProps = {
   note: string;
   /** Top-left overlay pill. Include its icon. */
   tagLabel?: React.ReactNode;
+  /** Decorative overlay inside the poster box (`relative`, clipping): an absolutely positioned, `aria-hidden` ornament. */
+  posterOverlay?: React.ReactNode;
   posterUrl?: string;
   href?: string;
   /** Defaults to a plain `<a>`. Pass `next/link` in a Next app. */
@@ -49,6 +51,7 @@ export function FeaturedRailItem({
   venue,
   note,
   tagLabel,
+  posterOverlay,
   posterUrl,
   href,
   linkComponent: LinkComponent = DefaultLink,
@@ -84,6 +87,8 @@ export function FeaturedRailItem({
             </span>
           </div>
         )}
+
+        {posterOverlay}
       </div>
 
       <div className="px-0.5 pt-2.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>
+  );
+}