@bearmenu/ui 0.8.52 → 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/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>
+  );
+}

package/src/components/filter-option-group.stories.tsx

@@ -0,0 +1,250 @@
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { ArrowLeft, X } from "lucide-react";
+import { FilterOptionGroup } from "./filter-option-group";
+import { Button } from "./button";
+import { FilterPanelFooter } from "./filter-panel-footer";
+
+const meta: Meta<typeof FilterOptionGroup> = {
+  title: "Places/Filters redesign",
+  component: FilterOptionGroup,
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        component:
+          "Issue #255 design review. Native wrapping options with immediate selection, persistent reset/results actions and selected summaries. Demo counts are fixtures, not live results. App URL, search flush and map navigation are verified during integration.",
+      },
+    },
+  },
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+function FiltersPreview({
+  width = 390,
+  english = false,
+  pending = false,
+  zero = false,
+  largeText = false,
+  initiallyOpenNow = false,
+}: {
+  width?: number;
+  english?: boolean;
+  pending?: boolean;
+  zero?: boolean;
+  largeText?: boolean;
+  initiallyOpenNow?: boolean;
+}) {
+  const [values, setValues] = useState<Record<string, string[]>>({
+    type: ["Restaurant"],
+    service: [english ? "Table service" : "La masă"],
+    openNow: initiallyOpenNow ? [english ? "Open now" : "Deschis acum"] : [],
+  });
+  const [results, setResults] = useState(false);
+  const groups = [
+    {
+      key: "type",
+      title: english ? "Place type" : "Tipul localului",
+      open: true,
+      options: english
+        ? ["Restaurant", "Bistro", "Café", "Pub", "Bar", "Bakery"]
+        : ["Restaurant", "Bistro", "Cafenea", "Pub", "Bar", "Brutărie"],
+    },
+    {
+      key: "food",
+      title: english ? "Cuisine" : "Bucătărie",
+      open: true,
+      options: english
+        ? [
+            "Romanian",
+            "Italian",
+            "Mediterranean",
+            "Japanese",
+            "International",
+            "French",
+            "Greek",
+            "Turkish",
+            "Mexican",
+          ]
+        : [
+            "Românească",
+            "Italiană",
+            "Mediteraneană",
+            "Japoneză",
+            "Internațională",
+            "Franceză",
+            "Grecească",
+            "Turcească",
+            "Mexicană",
+          ],
+    },
+    {
+      key: "service",
+      title: english ? "Service" : "Servire",
+      options: english
+        ? ["Table service", "Self service", "Takeaway"]
+        : ["La masă", "Autoservire", "La pachet"],
+    },
+    {
+      key: "openNow",
+      title: english ? "Open now" : "Deschis acum",
+      open: true,
+      options: [english ? "Open now" : "Deschis acum"],
+    },
+    {
+      key: "dietary",
+      title: english ? "Dietary preferences" : "Preferințe alimentare",
+      options: english
+        ? [
+            "Vegetarian options",
+            "Vegan options",
+            "Gluten-free options available on request",
+          ]
+        : [
+            "Opțiuni vegetariene",
+            "Opțiuni vegane",
+            "Opțiuni fără gluten disponibile la cerere",
+          ],
+    },
+    {
+      key: "vibe",
+      title: english ? "Atmosphere" : "Atmosferă",
+      options: english
+        ? ["Cozy", "Romantic", "Family friendly", "Lively", "Quiet"]
+        : [
+            "Primitoare",
+            "Romantică",
+            "Potrivit pentru familii",
+            "Animată",
+            "Liniștită",
+          ],
+    },
+    {
+      key: "amenities",
+      title: english ? "Amenities" : "Facilități",
+      options: english
+        ? ["Terrace", "Wi-Fi", "Parking", "Step-free wheelchair access"]
+        : [
+            "Terasă",
+            "Wi-Fi",
+            "Parcare",
+            "Acces fără trepte pentru scaun rulant",
+          ],
+    },
+  ];
+  const canReset = Object.values(values).some((value) => value.length > 0);
+  return (
+    <div
+      style={{ width, maxWidth: "100%" }}
+      className="mx-auto flex h-[760px] max-h-dvh flex-col overflow-hidden rounded-t-3xl border border-border bg-background text-foreground shadow-lg"
+    >
+      {largeText && <style>{"html { font-size: 20px; }"}</style>}
+      <div
+        aria-hidden
+        className="mx-auto mt-3 h-1 w-10 shrink-0 rounded-full bg-muted-foreground/30"
+      />
+      <header className="flex shrink-0 items-center justify-between gap-3 border-b border-border/60 px-4 py-2">
+        <Button
+          variant="ghost"
+          size="icon"
+          aria-label={english ? "Back to results" : "Înapoi la rezultate"}
+          onClick={() => setResults(true)}
+        >
+          <ArrowLeft aria-hidden />
+        </Button>
+        <h1 className="text-lg font-semibold">
+          {english ? "Filters" : "Filtre"}
+        </h1>
+        <Button
+          variant="ghost"
+          size="icon"
+          aria-label={english ? "Close filters" : "Închide filtrele"}
+          onClick={() => setResults(true)}
+        >
+          <X aria-hidden />
+        </Button>
+      </header>
+      {results ? (
+        <div className="flex flex-1 flex-col items-center justify-center gap-4 p-5">
+          <p>
+            {english
+              ? "Your selections are kept."
+              : "Selecțiile tale sunt păstrate."}
+          </p>
+          <Button onClick={() => setResults(false)}>
+            {english ? "Reopen filters" : "Redeschide filtrele"}
+          </Button>
+        </div>
+      ) : (
+        <>
+          <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain px-4 pb-4">
+            {groups.map((group) => (
+              <FilterOptionGroup
+                key={group.key}
+                title={group.title}
+                defaultOpen={group.open}
+                options={group.options.map((label, index) => ({
+                  value: label,
+                  label,
+                  count:
+                    pending || group.key === "openNow"
+                      ? null
+                      : zero
+                        ? 0
+                        : [159, 42, 26, 18, 12, 7, 6, 4, 2][index],
+                }))}
+                value={values[group.key] ?? []}
+                onValueChange={(value) =>
+                  setValues((previous) => ({
+                    ...previous,
+                    [group.key]: value.map(String),
+                  }))
+                }
+                showAllLabel={
+                  english
+                    ? `Show all (${group.options.length})`
+                    : `Arată toate (${group.options.length})`
+                }
+                showLessLabel={english ? "Show fewer" : "Arată mai puține"}
+              />
+            ))}
+          </div>
+          <FilterPanelFooter
+            resetLabel={english ? "Reset" : "Resetează"}
+            resultsLabel={`${english ? "View results" : "Vezi rezultatele"}${pending ? "" : ` (${zero ? 0 : 159})`}`}
+            canReset={canReset}
+            onReset={() => setValues({})}
+            onResults={() => setResults(true)}
+            resetHint={
+              english
+                ? "Reset clears all filters, including place type and service."
+                : "Resetarea șterge toate filtrele, inclusiv tipul localului și servirea."
+            }
+          />
+        </>
+      )}
+    </div>
+  );
+}
+
+export const Mobile390: Story = { render: () => <FiltersPreview /> };
+export const OpenNowSelected: Story = {
+  render: () => <FiltersPreview initiallyOpenNow />,
+};
+export const Narrow360: Story = {
+  render: () => <FiltersPreview width={360} />,
+};
+export const Wide430: Story = { render: () => <FiltersPreview width={430} /> };
+export const English: Story = { render: () => <FiltersPreview english /> };
+export const PendingCounts: Story = {
+  render: () => <FiltersPreview pending />,
+};
+export const ZeroResults: Story = { render: () => <FiltersPreview zero /> };
+export const LargerText: Story = {
+  render: () => <FiltersPreview width={360} largeText />,
+};
+export const Dark: Story = {
+  globals: { theme: "dark" },
+  render: () => <FiltersPreview />,
+};