@bearmenu/ui 0.8.52 → 0.8.53

package/dist/chunk-GIJGVFGC.js

@@ -0,0 +1,177 @@
+import { FilterOptionChip } from './chunk-RKNPPYRU.js';
+import { Separator } from './chunk-NWZGSLPU.js';
+import { Button } from './chunk-GHKTVHQG.js';
+import { Text } from './chunk-ZLMRVBD7.js';
+import { Badge } from './chunk-RYPPN2GZ.js';
+import { cn } from './chunk-FEK5XGZW.js';
+import { useId, useState } from 'react';
+import { ChevronDown } from 'lucide-react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+function FilterOptionGroup({
+  title,
+  options,
+  value,
+  onValueChange,
+  selection = "multiple",
+  name,
+  defaultOpen = false,
+  collapsible = true,
+  visibleLimit = 6,
+  showAllLabel,
+  showLessLabel,
+  children,
+  footer,
+  clearLabel,
+  onClear,
+  summaryValues = value,
+  className,
+  divider = true,
+  disabled
+}) {
+  const id = useId();
+  const [isOpen, setOpen] = useState(defaultOpen);
+  const open = !collapsible || isOpen;
+  const [expanded, setExpanded] = useState([]);
+  const selected = options.filter(
+    (option) => summaryValues.includes(option.value)
+  );
+  const sections = [];
+  for (const option of options) {
+    const last = sections[sections.length - 1];
+    if (!last || last.label !== option.section)
+      sections.push({ label: option.section, options: [option] });
+    else last.options.push(option);
+  }
+  const heading = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsx(
+        Text,
+        {
+          as: "span",
+          id: `${id}-title`,
+          className: "block",
+          variant: "body-sm",
+          weight: "semibold",
+          children: title
+        }
+      ),
+      !open && selected.length > 0 && /* @__PURE__ */ jsx(
+        Text,
+        {
+          as: "span",
+          variant: "caption",
+          color: "muted",
+          className: "mt-1 block leading-relaxed [overflow-wrap:anywhere]",
+          children: selected.map((option) => option.label).join(" \xB7 ")
+        }
+      )
+    ] }),
+    selected.length > 0 && /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "tabular-nums", children: selected.length }),
+    collapsible && /* @__PURE__ */ jsx(
+      ChevronDown,
+      {
+        "aria-hidden": true,
+        className: cn(
+          "size-4 shrink-0 text-muted-foreground transition-transform motion-reduce:transition-none",
+          open && "rotate-180"
+        )
+      }
+    )
+  ] });
+  return /* @__PURE__ */ jsxs("section", { className: cn("min-w-0", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "py-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        collapsible ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => setOpen((previous) => !previous),
+            "aria-expanded": open,
+            "aria-controls": id,
+            className: "flex min-h-11 min-w-0 flex-1 items-center gap-3 rounded-lg py-2 text-left focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring",
+            children: heading
+          }
+        ) : /* @__PURE__ */ jsx("div", { className: "flex min-h-11 min-w-0 flex-1 items-center gap-3 py-2", children: heading }),
+        onClear && clearLabel && summaryValues.length > 0 && /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "ghost",
+            className: "min-h-11 shrink-0 px-2 text-xs",
+            onClick: onClear,
+            children: clearLabel
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { id, hidden: !open, children: [
+        children,
+        sections.map((section, index) => {
+          var _a;
+          const sectionId = `${id}-section-${index}`;
+          const key = (_a = section.label) != null ? _a : "";
+          const isExpanded = expanded.includes(key);
+          const limit = showAllLabel ? visibleLimit : Infinity;
+          const visible = isExpanded ? section.options : section.options.filter(
+            (option, i) => i < limit || value.includes(option.value)
+          );
+          return /* @__PURE__ */ jsxs("div", { children: [
+            section.label && /* @__PURE__ */ jsx(
+              Text,
+              {
+                as: "h4",
+                id: sectionId,
+                variant: "caption",
+                weight: "semibold",
+                color: "muted",
+                className: "mt-3 mb-1",
+                children: section.label
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "fieldset",
+              {
+                "aria-labelledby": `${id}-title${section.label ? ` ${sectionId}` : ""}`,
+                disabled,
+                className: "m-0 flex min-w-0 flex-wrap gap-2 border-0 px-0 pt-2 pb-3",
+                children: visible.map((option) => /* @__PURE__ */ jsx(
+                  FilterOptionChip,
+                  {
+                    label: option.label,
+                    count: option.count,
+                    icon: option.icon,
+                    type: selection === "single" ? "radio" : "checkbox",
+                    name: selection === "single" ? name != null ? name : id : void 0,
+                    value: option.value,
+                    checked: value.includes(option.value),
+                    onChange: (event) => onValueChange(
+                      selection === "single" ? [option.value] : event.target.checked ? [...value, option.value] : value.filter((item) => item !== option.value)
+                    )
+                  },
+                  option.value
+                ))
+              }
+            ),
+            section.options.length > limit && /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                variant: "link",
+                "aria-expanded": isExpanded,
+                onClick: () => setExpanded(
+                  (previous) => isExpanded ? previous.filter((item) => item !== key) : [...previous, key]
+                ),
+                className: "mb-1 min-h-11 px-0",
+                children: isExpanded ? showLessLabel : typeof showAllLabel === "function" ? showAllLabel(section.options.length) : showAllLabel
+              }
+            )
+          ] }, key);
+        }),
+        footer
+      ] })
+    ] }),
+    divider && /* @__PURE__ */ jsx(Separator, {})
+  ] });
+}
+
+export { FilterOptionGroup };

package/dist/chunk-RKNPPYRU.js

@@ -0,0 +1,86 @@
+import { cn } from './chunk-FEK5XGZW.js';
+import { __objRest, __spreadProps, __spreadValues } from './chunk-MMUBH76A.js';
+import { useId } from 'react';
+import { Check } from 'lucide-react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function FilterOptionChip(_a) {
+  var _b = _a, {
+    label,
+    type = "checkbox",
+    count,
+    icon,
+    className,
+    id,
+    disabled
+  } = _b, input = __objRest(_b, [
+    "label",
+    "type",
+    "count",
+    "icon",
+    "className",
+    "id",
+    "disabled"
+  ]);
+  var _a2;
+  const generatedId = useId();
+  const inputId = id != null ? id : generatedId;
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      htmlFor: inputId,
+      className: cn(
+        "relative inline-flex max-w-full min-w-0",
+        disabled && "cursor-not-allowed opacity-50",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          __spreadProps(__spreadValues({}, input), {
+            id: inputId,
+            type,
+            disabled,
+            "aria-label": (_a2 = input["aria-label"]) != null ? _a2 : label,
+            className: "peer sr-only"
+          })
+        ),
+        /* @__PURE__ */ jsxs(
+          "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"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                Check,
+                {
+                  "aria-hidden": true,
+                  className: "filter-check size-4 shrink-0",
+                  strokeWidth: 2.5
+                }
+              ),
+              icon && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "filter-icon shrink-0 [&>svg]:size-4", children: icon }),
+              /* @__PURE__ */ jsx("span", { className: "min-w-0 [overflow-wrap:anywhere]", children: label }),
+              count != null && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": true,
+                  className: "shrink-0 text-xs tabular-nums text-muted-foreground",
+                  children: count
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { FilterOptionChip };

package/dist/components/alert.d.ts

@@ -3,10 +3,10 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const alertVariants: (props?: ({
-    variant?: "default" | "success" | "warning" | "destructive" | null | undefined;
+    variant?: "default" | "destructive" | "warning" | "success" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const Alert: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
-    variant?: "default" | "success" | "warning" | "destructive" | null | undefined;
+    variant?: "default" | "destructive" | "warning" | "success" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & React.RefAttributes<HTMLDivElement>>;
 declare const AlertTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLParagraphElement>>;
 declare const AlertDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;

package/dist/components/badge.d.ts

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const badgeVariants: (props?: ({
-    variant?: "secondary" | "default" | "success" | "warning" | "destructive" | "outline" | "glass" | "overlay" | "brown" | "code" | "onPrimary" | "confirmed" | "pending" | "completed" | "assignee" | "softSuccess" | "softWarning" | "softDestructive" | "softNeutral" | null | undefined;
+    variant?: "code" | "default" | "destructive" | "outline" | "secondary" | "glass" | "overlay" | "brown" | "warning" | "success" | "onPrimary" | "confirmed" | "pending" | "completed" | "assignee" | "softSuccess" | "softWarning" | "softDestructive" | "softNeutral" | null | undefined;
     size?: "status" | "chip" | null | undefined;
     live?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;

package/dist/components/banner.d.ts

@@ -31,7 +31,7 @@ import { VariantProps } from 'class-variance-authority';
  * right edge, centred on the text, and never wraps under it.
  */
 declare const bannerVariants: (props?: ({
-    tone?: "warning" | "destructive" | "info" | null | undefined;
+    tone?: "destructive" | "warning" | "info" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type BannerProps = Omit<React.HTMLAttributes<HTMLDivElement>, "title"> & VariantProps<typeof bannerVariants> & {
     /**

package/dist/components/button.d.ts

@@ -3,8 +3,8 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const buttonVariants: (props?: ({
-    variant?: "secondary" | "default" | "link" | "warning" | "destructive" | "outline" | "ghost" | "glass" | "overlay" | "ink" | "brown" | "cta" | null | undefined;
-    size?: "default" | "icon" | "cta" | "xs" | "sm" | "lg" | "pill" | "cta-sm" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+    variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | "glass" | "overlay" | "ink" | "brown" | "warning" | "cta" | null | undefined;
+    size?: "default" | "cta" | "xs" | "sm" | "lg" | "pill" | "cta-sm" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
     fullWidth?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {

package/dist/components/card.d.ts

@@ -3,12 +3,12 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const cardVariants: (props?: ({
-    variant?: "outline" | "glass" | "section" | "muted" | "surface" | "elevated" | "elevatedPanel" | null | undefined;
+    variant?: "section" | "outline" | "glass" | "muted" | "surface" | "elevated" | "elevatedPanel" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
     interactive?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
-    variant?: "outline" | "glass" | "section" | "muted" | "surface" | "elevated" | "elevatedPanel" | null | undefined;
+    variant?: "section" | "outline" | "glass" | "muted" | "surface" | "elevated" | "elevatedPanel" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
     interactive?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/command.d.ts

@@ -4,11 +4,11 @@ import { DialogProps } from '@radix-ui/react-dialog';
 
 declare const Command: React.ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;
-} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement> | "key"> & {
+} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key"> & {
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
     label?: string;
     shouldFilter?: boolean;
     filter?: (value: string, search: string, keywords?: string[]) => number;
@@ -28,61 +28,61 @@ declare const CommandInput: React.ForwardRefExoticComponent<Omit<Omit<Pick<Pick<
     ref?: React.Ref<HTMLInputElement>;
 } & {
     asChild?: boolean;
-}, "asChild" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "onChange" | "value" | "type"> & {
+}, "key" | "asChild" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "onChange" | "type" | "value"> & {
     value?: string;
     onValueChange?: (search: string) => void;
 } & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
 declare const CommandList: React.ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;
-} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement> | "key"> & {
+} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key"> & {
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
     label?: string;
 } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const CommandEmpty: React.ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;
-} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement> | "key"> & {
+} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const CommandLoading: React.ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;
-} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement> | "key"> & {
+} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key"> & {
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
     progress?: number;
     label?: string;
 } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const CommandGroup: React.ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;
-} & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement> | "key"> & {
+} & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key">, "heading" | "value"> & {
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "heading" | "value"> & {
     heading?: React.ReactNode;
     value?: string;
     forceMount?: boolean;
 } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const CommandSeparator: React.ForwardRefExoticComponent<Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement> | "key"> & {
+declare const CommandSeparator: React.ForwardRefExoticComponent<Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key"> & {
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
     alwaysRender?: boolean;
 } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const CommandItem: React.ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;
-} & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement> | "key"> & {
+} & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key">, "onSelect" | "value" | "disabled"> & {
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "onSelect" | "disabled" | "value"> & {
     disabled?: boolean;
     onSelect?: (value: string) => void;
     value?: string;

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

@@ -53,7 +53,7 @@ interface EmptyStateProps {
  * louder than a load failure the user can retry.
  */
 declare const EmptyState: React.ForwardRefExoticComponent<EmptyStateProps & React.RefAttributes<HTMLDivElement>>;
-declare const SearchEmptyState: React.ForwardRefExoticComponent<Omit<EmptyStateProps, "icon" | "variant"> & React.RefAttributes<HTMLDivElement>>;
-declare const ErrorEmptyState: React.ForwardRefExoticComponent<Omit<EmptyStateProps, "icon" | "variant"> & React.RefAttributes<HTMLDivElement>>;
+declare const SearchEmptyState: React.ForwardRefExoticComponent<Omit<EmptyStateProps, "variant" | "icon"> & React.RefAttributes<HTMLDivElement>>;
+declare const ErrorEmptyState: React.ForwardRefExoticComponent<Omit<EmptyStateProps, "variant" | "icon"> & React.RefAttributes<HTMLDivElement>>;
 
 export { EmptyState, ErrorEmptyState, SearchEmptyState };

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

@@ -58,6 +58,12 @@ type FacetGroupProps = Omit<ComponentPropsWithoutRef<"fieldset">, "title" | "chi
      */
     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.
      *
@@ -84,7 +90,7 @@ type FacetGroupProps = Omit<ComponentPropsWithoutRef<"fieldset">, "title" | "chi
     moreExpanded?: boolean;
     className?: string;
 };
-declare function FacetGroup({ title, icon: Icon, options, selection, name, size, collapsible, defaultOpen, onToggle, moreLabel, onMore, moreExpanded, className, ...rest }: FacetGroupProps): react_jsx_runtime.JSX.Element;
+declare function FacetGroup({ title, icon: Icon, options, selection, name, size, layout, visibleLimit, showAllLabel, showLessLabel, collapsible, defaultOpen, onToggle, moreLabel, onMore, moreExpanded, 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;
@@ -92,9 +98,10 @@ 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;
 };
 /** Mirrors `<FacetGroup>`'s geometry exactly so nothing shifts when data lands. */
-declare function FacetGroupSkeleton({ optionCount, showMore, size, className, }: FacetGroupSkeletonProps): react_jsx_runtime.JSX.Element;
+declare function FacetGroupSkeleton({ optionCount, showMore, size, className, layout, }: FacetGroupSkeletonProps): react_jsx_runtime.JSX.Element;
 
 export { FacetGroup, type FacetGroupProps, type FacetGroupSelection, type FacetGroupSize, FacetGroupSkeleton, type FacetGroupSkeletonProps, type FacetOption };

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" })
     ] })
   );