@timmbr/ui 1.9.0 → 1.11.0

package/dist/components/Breadcrumb/Breadcrumb.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import type { BreadcrumbProps } from './Breadcrumb.types';
+/**
+ * Where the current page sits (Home › Living › Sofas). The last item is the current page
+ * (`aria-current="page"`, not a link). On small screens a long trail keeps its first and last
+ * two items and collapses the middle behind "…". Server-safe: no client JavaScript.
+ */
+export declare const Breadcrumb: React.ForwardRefExoticComponent<BreadcrumbProps & React.RefAttributes<HTMLElement>>;
+//# sourceMappingURL=Breadcrumb.d.ts.map

package/dist/components/Breadcrumb/Breadcrumb.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumb.d.ts","sourceRoot":"","sources":["../../../src/components/Breadcrumb/Breadcrumb.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,OAAO,KAAK,EAAuB,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAQ/E;;;;GAIG;AACH,eAAO,MAAM,UAAU,qFA6CtB,CAAC"}

package/dist/components/Breadcrumb/Breadcrumb.js

@@ -0,0 +1,32 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import * as React from 'react';
+import { ChevronRight } from '@timmbr/icons';
+import { cn } from '@timmbr/utils';
+import { breadcrumbSeparatorVariants, breadcrumbCurrentVariants, breadcrumbLinkVariants, breadcrumbItemVariants, breadcrumbListVariants } from './Breadcrumb.styles.js';
+
+const PlainLink = ({ href, className, children }) => /* @__PURE__ */ jsx("a", { href, className, children });
+const Breadcrumb = React.forwardRef(
+  ({ items, linkComponent: Link = PlainLink, ariaLabel = "Breadcrumb", collapseAfter = 3, className, ...props }, ref) => {
+    if (items.length === 0) return null;
+    const collapse = items.length > Math.max(collapseAfter, 3);
+    const lastIndex = items.length - 1;
+    return /* @__PURE__ */ jsx("nav", { ref, "aria-label": ariaLabel, "data-slot": "breadcrumb", className, ...props, children: /* @__PURE__ */ jsx("ol", { className: breadcrumbListVariants(), children: items.map((item, index) => {
+      const isLast = index === lastIndex;
+      const hidden = collapse && index > 0 && index < lastIndex - 1;
+      const ItemLink = item.crossZone ? PlainLink : Link;
+      return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+        collapse && index === 1 && /* @__PURE__ */ jsxs("li", { "aria-hidden": "true", className: "inline-flex items-center gap-1.5 sm:hidden", children: [
+          /* @__PURE__ */ jsx("span", { children: "…" }),
+          /* @__PURE__ */ jsx(ChevronRight, { className: breadcrumbSeparatorVariants() })
+        ] }),
+        /* @__PURE__ */ jsxs("li", { className: cn(breadcrumbItemVariants({ collapsible: hidden })), children: [
+          isLast || !item.href ? /* @__PURE__ */ jsx("span", { className: breadcrumbCurrentVariants(), ...isLast && { "aria-current": "page" }, children: item.label }) : /* @__PURE__ */ jsx(ItemLink, { href: item.href, className: breadcrumbLinkVariants(), children: item.label }),
+          !isLast && /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true", className: breadcrumbSeparatorVariants() })
+        ] })
+      ] }, index);
+    }) }) });
+  }
+);
+Breadcrumb.displayName = "Breadcrumb";
+
+export { Breadcrumb };

package/dist/components/Breadcrumb/Breadcrumb.styles.d.ts

@@ -0,0 +1,8 @@
+export declare const breadcrumbListVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const breadcrumbItemVariants: (props?: ({
+    collapsible?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const breadcrumbLinkVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const breadcrumbCurrentVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const breadcrumbSeparatorVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+//# sourceMappingURL=Breadcrumb.styles.d.ts.map

package/dist/components/Breadcrumb/Breadcrumb.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumb.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Breadcrumb/Breadcrumb.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,sBAAsB,oFAAiF,CAAC;AAErH,eAAO,MAAM,sBAAsB;;8EASjC,CAAC;AAEH,eAAO,MAAM,sBAAsB,oFAElC,CAAC;AAEF,eAAO,MAAM,yBAAyB,oFAA4C,CAAC;AAEnF,eAAO,MAAM,2BAA2B,oFAAyC,CAAC"}

package/dist/components/Breadcrumb/Breadcrumb.styles.js

@@ -0,0 +1,20 @@
+import { cva } from 'class-variance-authority';
+
+const breadcrumbListVariants = cva("flex flex-wrap items-center gap-1.5 font-sans text-body-3 text-grey-600");
+const breadcrumbItemVariants = cva("inline-flex min-w-0 items-center gap-1.5", {
+  variants: {
+    /** Middle items hidden on small screens when the trail is long. */
+    collapsible: {
+      true: "hidden sm:inline-flex",
+      false: ""
+    }
+  },
+  defaultVariants: { collapsible: false }
+});
+const breadcrumbLinkVariants = cva(
+  "truncate rounded-sm transition-colors hover:text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+);
+const breadcrumbCurrentVariants = cva("truncate font-medium text-grey-950");
+const breadcrumbSeparatorVariants = cva("size-3.5 shrink-0 text-grey-400");
+
+export { breadcrumbCurrentVariants, breadcrumbItemVariants, breadcrumbLinkVariants, breadcrumbListVariants, breadcrumbSeparatorVariants };

package/dist/components/Breadcrumb/Breadcrumb.types.d.ts

@@ -0,0 +1,27 @@
+import type * as React from 'react';
+export interface BreadcrumbItem {
+    label: React.ReactNode;
+    /** Omit for the current page (the last item). */
+    href?: string;
+    /** Link into another zone (e.g. Home in the shell): a plain anchor, not `linkComponent`. */
+    crossZone?: boolean;
+}
+export interface BreadcrumbLinkProps {
+    href: string;
+    className?: string;
+    children: React.ReactNode;
+}
+export interface BreadcrumbProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {
+    /** Root first; the last item is the current page. */
+    items: BreadcrumbItem[];
+    /** Client-side link (e.g. Next.js Link). Defaults to a plain anchor. */
+    linkComponent?: React.ComponentType<BreadcrumbLinkProps>;
+    /** Accessible name of the navigation landmark. */
+    ariaLabel?: string;
+    /**
+     * On small screens, collapse the middle items behind "…" when there are more than this many.
+     * @default 3
+     */
+    collapseAfter?: number;
+}
+//# sourceMappingURL=Breadcrumb.types.d.ts.map

package/dist/components/Breadcrumb/Breadcrumb.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumb.types.d.ts","sourceRoot":"","sources":["../../../src/components/Breadcrumb/Breadcrumb.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,iDAAiD;IACjD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,4FAA4F;IAC5F,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,CAAC;IAC1F,qDAAqD;IACrD,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,wEAAwE;IACxE,aAAa,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;IACzD,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB"}

package/dist/components/Breadcrumb/index.d.ts

@@ -0,0 +1,4 @@
+export * from './Breadcrumb';
+export * from './Breadcrumb.types';
+export * from './Breadcrumb.styles';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Breadcrumb/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Breadcrumb/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC"}

package/dist/components/Chip/Chip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../../src/components/Chip/Chip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,eAAO,MAAM,IAAI,kFAsEhB,CAAC"}
+{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../../src/components/Chip/Chip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,eAAO,MAAM,IAAI,kFAmFhB,CAAC"}

package/dist/components/Chip/Chip.js

@@ -17,9 +17,11 @@ const Chip = React.forwardRef(
     clickable,
     icon,
     onRemove,
+    removeLabel = "Remove",
     motion,
     onClick,
     children,
+    onKeyDown,
     ...props
   }, ref) => {
     const isInteractive = clickable || !!onClick;
@@ -37,6 +39,14 @@ const Chip = React.forwardRef(
         role: isInteractive ? "button" : void 0,
         tabIndex: isInteractive ? 0 : void 0,
         onClick,
+        onKeyDown: (e) => {
+          onKeyDown?.(e);
+          if (e.defaultPrevented || !isInteractive || !onRemove) return;
+          if (e.key === "Delete" || e.key === "Backspace") {
+            e.preventDefault();
+            onRemove(e);
+          }
+        },
         className: cn(
           chipVariants({
             variant: selected ? "filled" : variant,
@@ -57,10 +67,10 @@ const Chip = React.forwardRef(
             "button",
             {
               type: "button",
-              tabIndex: -1,
+              tabIndex: isInteractive ? -1 : void 0,
               onClick: handleRemove,
-              "aria-label": "Remove",
-              className: "shrink-0 -mr-1 size-4 rounded-full inline-flex items-center justify-center opacity-70 hover:opacity-100 hover:bg-grey-1000/10 dark:hover:bg-grey-50/20 transition-all cursor-pointer",
+              "aria-label": removeLabel,
+              className: "shrink-0 -mr-1 size-4 rounded-full inline-flex items-center justify-center opacity-70 hover:opacity-100 hover:bg-grey-1000/10 dark:hover:bg-grey-50/20 transition-all cursor-pointer focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
               children: /* @__PURE__ */ jsx(X, { className: "size-3" })
             }
           )

package/dist/components/Chip/Chip.types.d.ts

@@ -18,6 +18,11 @@ export interface ChipProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'c
      * Callback fired when the remove button is clicked. If provided, renders an X button.
      */
     onRemove?: (e: React.MouseEvent) => void;
+    /**
+     * Accessible name of the remove button, e.g. "Remove Teak".
+     * @default 'Remove'
+     */
+    removeLabel?: string;
     /**
      * Motion transition control.
      */

package/dist/components/Chip/Chip.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Chip.types.d.ts","sourceRoot":"","sources":["../../../src/components/Chip/Chip.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAClD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAErD,MAAM,WAAW,SACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,EACzD,YAAY;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACzC;;OAEG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB"}
+{"version":3,"file":"Chip.types.d.ts","sourceRoot":"","sources":["../../../src/components/Chip/Chip.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAClD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAErD,MAAM,WAAW,SACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,EACzD,YAAY;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACzC;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB"}

package/dist/components/Drawer/Drawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/Drawer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAc1D,OAAO,KAAK,EACV,WAAW,EACX,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,eAAe,EAChB,MAAM,gBAAgB,CAAC;AAExB,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAAwB,CAAC;AAClE,eAAO,MAAM,aAAa,8GAA0B,CAAC;AACrD,eAAO,MAAM,YAAY,6CAAyB,CAAC;AACnD,eAAO,MAAM,WAAW,4GAAwB,CAAC;AAEjD,eAAO,MAAM,aAAa,8JAUxB,CAAC;AAGH,eAAO,MAAM,aAAa,2FAuCxB,CAAC;AAGH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAEpD,CAAC;AAGF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAEpD,CAAC;AAGF,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAEhD,CAAC;AAGF,eAAO,MAAM,WAAW,oKAUtB,CAAC;AAGH,eAAO,MAAM,iBAAiB,8KAU5B,CAAC"}
+{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/Drawer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAc1D,OAAO,KAAK,EACV,WAAW,EACX,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,eAAe,EAChB,MAAM,gBAAgB,CAAC;AAExB,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAAwB,CAAC;AAClE,eAAO,MAAM,aAAa,8GAA0B,CAAC;AACrD,eAAO,MAAM,YAAY,6CAAyB,CAAC;AACnD,eAAO,MAAM,WAAW,4GAAwB,CAAC;AAEjD,eAAO,MAAM,aAAa,8JAUxB,CAAC;AAGH,eAAO,MAAM,aAAa,2FAyCxB,CAAC;AAGH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAEpD,CAAC;AAGF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAEpD,CAAC;AAGF,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAEhD,CAAC;AAGF,eAAO,MAAM,WAAW,oKAUtB,CAAC;AAGH,eAAO,MAAM,iBAAiB,8KAU5B,CAAC"}

package/dist/components/Drawer/Drawer.js

@@ -22,7 +22,7 @@ const DrawerOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__P
   }
 ));
 DrawerOverlay.displayName = DialogPrimitive.Overlay.displayName;
-const DrawerContent = React.forwardRef(({ className, children, side = "right", motion, ...props }, ref) => {
+const DrawerContent = React.forwardRef(({ className, children, side = "right", size = "default", motion, showClose = true, ...props }, ref) => {
   const globalMotion = useGlobalAnimation();
   const { shouldAnimate, motionClass } = resolveMotion(motion, globalMotion);
   return /* @__PURE__ */ jsxs(DrawerPortal, { children: [
@@ -33,14 +33,14 @@ const DrawerContent = React.forwardRef(({ className, children, side = "right", m
         ref,
         "data-slot": "drawer-content",
         className: cn(
-          drawerContentVariants({ side }),
+          drawerContentVariants({ side, size }),
           !shouldAnimate && "transition-none animate-none",
           motionClass,
           className
         ),
         ...props,
         children: [
-          side === "bottom" && /* @__PURE__ */ jsx(
+          side === "bottom" && size !== "full" && /* @__PURE__ */ jsx(
             "div",
             {
               "aria-hidden": "true",
@@ -49,7 +49,7 @@ const DrawerContent = React.forwardRef(({ className, children, side = "right", m
             }
           ),
           children,
-          /* @__PURE__ */ jsxs(
+          showClose && /* @__PURE__ */ jsxs(
             DialogPrimitive.Close,
             {
               "data-slot": "drawer-close",

package/dist/components/Drawer/Drawer.styles.d.ts

@@ -2,6 +2,7 @@ import { type VariantProps } from 'class-variance-authority';
 export declare const drawerOverlayVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const drawerContentVariants: (props?: ({
     side?: "left" | "right" | "bottom" | "top" | null | undefined;
+    size?: "default" | "full" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const drawerHeaderVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const drawerFooterVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;

package/dist/components/Drawer/Drawer.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/Drawer.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,eAAO,MAAM,qBAAqB,oFAEjC,CAAC;AAEF,eAAO,MAAM,qBAAqB;;8EAejC,CAAC;AAEF,eAAO,MAAM,oBAAoB,oFAEhC,CAAC;AAEF,eAAO,MAAM,oBAAoB,oFAEhC,CAAC;AAEF,gGAAgG;AAChG,eAAO,MAAM,kBAAkB,oFAAsE,CAAC;AAEtG,eAAO,MAAM,mBAAmB,oFAA2E,CAAC;AAE5G,eAAO,MAAM,yBAAyB,oFAA2D,CAAC;AAElG,MAAM,MAAM,qBAAqB,GAAG,YAAY,CAAC,OAAO,qBAAqB,CAAC,CAAC"}
+{"version":3,"file":"Drawer.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/Drawer.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,eAAO,MAAM,qBAAqB,oFAEjC,CAAC;AAEF,eAAO,MAAM,qBAAqB;;;8EAqBjC,CAAC;AAEF,eAAO,MAAM,oBAAoB,oFAEhC,CAAC;AAEF,eAAO,MAAM,oBAAoB,oFAEhC,CAAC;AAEF,gGAAgG;AAChG,eAAO,MAAM,kBAAkB,oFAAsE,CAAC;AAEtG,eAAO,MAAM,mBAAmB,oFAA2E,CAAC;AAE5G,eAAO,MAAM,yBAAyB,oFAA2D,CAAC;AAElG,MAAM,MAAM,qBAAqB,GAAG,YAAY,CAAC,OAAO,qBAAqB,CAAC,CAAC"}

package/dist/components/Drawer/Drawer.styles.js

@@ -12,10 +12,16 @@ const drawerContentVariants = cva(
         bottom: "inset-x-0 bottom-0 border-t rounded-t-2xl max-h-[90dvh] pt-3 pb-[max(1.5rem,env(safe-area-inset-bottom))] data-[state=open]:animate-slide-in-from-bottom data-[state=closed]:animate-slide-out-to-bottom",
         left: "inset-y-0 left-0 h-full w-3/4 max-w-sm border-r data-[state=open]:animate-slide-in-from-left data-[state=closed]:animate-slide-out-to-left",
         right: "inset-y-0 right-0 h-full w-3/4 max-w-md border-l data-[state=open]:animate-slide-in-from-right data-[state=closed]:animate-slide-out-to-right"
+      },
+      /** `full` covers the whole viewport (mobile filter panels, full-screen pickers); the content lays itself out. */
+      size: {
+        default: "",
+        full: "inset-0 h-dvh max-h-none w-full max-w-none gap-0 rounded-none border-0 p-0 pt-0 pb-0"
       }
     },
     defaultVariants: {
-      side: "right"
+      side: "right",
+      size: "default"
     }
   }
 );

package/dist/components/Drawer/Drawer.types.d.ts

@@ -8,6 +8,8 @@ export interface DrawerContentProps extends React.ComponentPropsWithoutRef<typeo
      * Motion transition control.
      */
     motion?: MotionProp;
+    /** Render the corner close button (default true). Hide it when the content has its own. */
+    showClose?: boolean;
 }
 export type DrawerHeaderProps = React.HTMLAttributes<HTMLDivElement>;
 export type DrawerFooterProps = React.HTMLAttributes<HTMLDivElement>;

package/dist/components/Drawer/Drawer.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.types.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/Drawer.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAC/D,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAErD,MAAM,MAAM,WAAW,GAAG,eAAe,CAAC,WAAW,CAAC;AAEtD,MAAM,WAAW,kBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,EACpE,qBAAqB;IACvB;;OAEG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB;AAED,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;AACrE,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;AACrE,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC"}
+{"version":3,"file":"Drawer.types.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/Drawer.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAC/D,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAErD,MAAM,MAAM,WAAW,GAAG,eAAe,CAAC,WAAW,CAAC;AAEtD,MAAM,WAAW,kBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,EACpE,qBAAqB;IACvB;;OAEG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,2FAA2F;IAC3F,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;AACrE,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;AACrE,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC"}

package/dist/components/FilterChips/FilterChips.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import type { FilterChip, FilterChipsProps } from './FilterChips.types';
+/**
+ * The applied filters as removable chips, plus "Clear all". Wraps on large screens and scrolls
+ * sideways on phones so it never takes more than one row there. Renders nothing when empty.
+ */
+export declare function FilterChips<T extends FilterChip = FilterChip>({ chips, onRemove, onClearAll, clearAllLabel, removeLabel, className, }: FilterChipsProps<T>): React.JSX.Element | null;
+//# sourceMappingURL=FilterChips.d.ts.map

package/dist/components/FilterChips/FilterChips.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterChips.d.ts","sourceRoot":"","sources":["../../../src/components/FilterChips/FilterChips.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAExE;;;GAGG;AACH,wBAAgB,WAAW,CAAC,CAAC,SAAS,UAAU,GAAG,UAAU,EAAE,EAC7D,KAAK,EACL,QAAQ,EACR,UAAU,EACV,aAA2B,EAC3B,WAA0C,EAC1C,SAAS,GACV,EAAE,gBAAgB,CAAC,CAAC,CAAC,4BA8BrB"}

package/dist/components/FilterChips/FilterChips.js

@@ -0,0 +1,39 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { cn } from '@timmbr/utils';
+import { Chip } from '../Chip/Chip.js';
+
+function FilterChips({
+  chips,
+  onRemove,
+  onClearAll,
+  clearAllLabel = "Clear all",
+  removeLabel = (label) => `Remove ${label}`,
+  className
+}) {
+  if (chips.length === 0) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "filter-chips",
+      className: cn(
+        "flex items-center gap-2 overflow-x-auto pb-1 [scrollbar-width:none] sm:flex-wrap sm:overflow-visible",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("ul", { className: "flex shrink-0 items-center gap-2 sm:flex-wrap", children: chips.map((chip) => /* @__PURE__ */ jsx("li", { className: "shrink-0", children: /* @__PURE__ */ jsx(Chip, { color: "primary", onRemove: () => onRemove(chip), removeLabel: removeLabel(String(chip.label)), children: chip.label }) }, chip.id)) }),
+        onClearAll && chips.length > 1 && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onClearAll,
+            className: "shrink-0 rounded-sm px-1 font-sans text-body-3 font-semibold text-primary underline-offset-4 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            children: clearAllLabel
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { FilterChips };

package/dist/components/FilterChips/FilterChips.types.d.ts

@@ -0,0 +1,17 @@
+import type * as React from 'react';
+export interface FilterChip {
+    /** Unique per chip, e.g. "material:teak" or "price". */
+    id: string;
+    label: React.ReactNode;
+}
+export interface FilterChipsProps<T extends FilterChip = FilterChip> {
+    chips: T[];
+    onRemove: (chip: T) => void;
+    /** Shown when more than one chip is applied. */
+    onClearAll?: () => void;
+    clearAllLabel?: string;
+    /** Accessible name of a chip's remove button. */
+    removeLabel?: (label: string) => string;
+    className?: string;
+}
+//# sourceMappingURL=FilterChips.types.d.ts.map

package/dist/components/FilterChips/FilterChips.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterChips.types.d.ts","sourceRoot":"","sources":["../../../src/components/FilterChips/FilterChips.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC,MAAM,WAAW,UAAU;IACzB,wDAAwD;IACxD,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB;AAED,MAAM,WAAW,gBAAgB,CAAC,CAAC,SAAS,UAAU,GAAG,UAAU;IACjE,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAC5B,gDAAgD;IAChD,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iDAAiD;IACjD,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

package/dist/components/FilterChips/index.d.ts

@@ -0,0 +1,3 @@
+export * from './FilterChips';
+export * from './FilterChips.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/FilterChips/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FilterChips/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC"}

package/dist/components/FilterDrawer/FilterDrawer.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import type { FilterDrawerLabels, FilterDrawerProps } from './FilterDrawer.types';
+export declare const DEFAULT_FILTER_DRAWER_LABELS: FilterDrawerLabels;
+/**
+ * Full-screen filter panel for phones: groups on the left (with how many options are picked),
+ * the active group's options on the right, and a sticky footer with "Clear all" and
+ * "Show N results". It edits a staged selection — nothing applies until the shopper taps Show,
+ * so the page behind doesn't reload on every tap; the page refreshes `total` as the draft
+ * changes and applies everything at once.
+ */
+export declare function FilterDrawer({ open, onOpenChange, groups, onToggle, price, onPriceChange, onClearAll, onApply, total, loading, labels: labelOverrides, searchThreshold, }: FilterDrawerProps): React.JSX.Element;
+//# sourceMappingURL=FilterDrawer.d.ts.map

package/dist/components/FilterDrawer/FilterDrawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterDrawer.d.ts","sourceRoot":"","sources":["../../../src/components/FilterDrawer/FilterDrawer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAsB/B,OAAO,KAAK,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAIlF,eAAO,MAAM,4BAA4B,EAAE,kBAM1C,CAAC;AAEF;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,EAC3B,IAAI,EACJ,YAAY,EACZ,MAAM,EACN,QAAQ,EACR,KAAK,EACL,aAAa,EACb,UAAU,EACV,OAAO,EACP,KAAK,EACL,OAAe,EACf,MAAM,EAAE,cAAc,EACtB,eAAe,GAChB,EAAE,iBAAiB,qBAkJnB"}

package/dist/components/FilterDrawer/FilterDrawer.js

@@ -0,0 +1,157 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import * as React from 'react';
+import { X } from '@timmbr/icons';
+import { cn } from '@timmbr/utils';
+import { DEFAULT_FILTER_LABELS, FilterToggleRow, FilterPriceSlider, FilterOptionList } from '../FilterPanel/FilterPanel.js';
+import { PRICE_GROUP_KEY } from '../FilterPanel/FilterPanel.types.js';
+import { filterDrawerHeaderVariants, filterDrawerBadgeVariants, filterDrawerNavItemVariants, filterDrawerNavVariants, filterDrawerContentVariants, filterDrawerPanesVariants, filterDrawerFooterVariants } from './FilterDrawer.styles.js';
+import { Drawer, DrawerContent, DrawerTitle, DrawerDescription, DrawerClose } from '../Drawer/Drawer.js';
+import { Button } from '../Button/Button.js';
+import { Spinner } from '../Spinner/Spinner.js';
+
+const QUICK_GROUP_KEY = "__quick";
+const DEFAULT_FILTER_DRAWER_LABELS = {
+  ...DEFAULT_FILTER_LABELS,
+  quickFilters: "Quick filters",
+  clearAll: "Clear all",
+  close: "Close filters",
+  showResults: (total) => total === null ? "Show results" : `Show ${total} result${total === 1 ? "" : "s"}`
+};
+function FilterDrawer({
+  open,
+  onOpenChange,
+  groups,
+  onToggle,
+  price,
+  onPriceChange,
+  onClearAll,
+  onApply,
+  total,
+  loading = false,
+  labels: labelOverrides,
+  searchThreshold
+}) {
+  const labels = { ...DEFAULT_FILTER_DRAWER_LABELS, ...labelOverrides };
+  const toggles = groups.filter((g) => g.display === "toggle");
+  const sections = groups.filter((g) => g.display !== "toggle");
+  const showPrice = !!price && price.step > 0 && price.max - price.min >= price.step;
+  const priceNarrowed = !!price?.value && (price.value[0] > price.min || price.value[1] < price.max);
+  const nav = [
+    ...toggles.length ? [
+      {
+        key: QUICK_GROUP_KEY,
+        label: labels.quickFilters,
+        picked: toggles.filter((g) => g.options[0]?.selected).length
+      }
+    ] : [],
+    ...showPrice ? [{ key: PRICE_GROUP_KEY, label: labels.price, picked: priceNarrowed ? 1 : 0 }] : [],
+    ...sections.map((g) => ({
+      key: g.key,
+      label: g.label,
+      picked: g.options.filter((o) => o.selected).length
+    }))
+  ];
+  const [active, setActive] = React.useState(nav[0]?.key);
+  const activeKey = nav.some((n) => n.key === active) ? active : nav[0]?.key;
+  const activeGroup = sections.find((g) => g.key === activeKey);
+  const anyPicked = nav.some((n) => n.picked > 0);
+  const baseId = React.useId();
+  const tabId = (key) => `${baseId}-tab-${key}`;
+  const panelId = `${baseId}-panel`;
+  const tabRefs = React.useRef(/* @__PURE__ */ new Map());
+  const onTabKeyDown = (event) => {
+    const current = nav.findIndex((n) => n.key === activeKey);
+    let next = null;
+    if (event.key === "ArrowDown") next = (current + 1) % nav.length;
+    else if (event.key === "ArrowUp") next = (current - 1 + nav.length) % nav.length;
+    else if (event.key === "Home") next = 0;
+    else if (event.key === "End") next = nav.length - 1;
+    if (next === null || !nav[next]) return;
+    event.preventDefault();
+    setActive(nav[next].key);
+    tabRefs.current.get(nav[next].key)?.focus();
+  };
+  return /* @__PURE__ */ jsx(Drawer, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DrawerContent, { side: "bottom", size: "full", showClose: false, children: [
+    /* @__PURE__ */ jsxs("div", { className: filterDrawerHeaderVariants(), children: [
+      /* @__PURE__ */ jsx(DrawerTitle, { className: "text-h6", children: labels.title }),
+      /* @__PURE__ */ jsx(DrawerDescription, { className: "sr-only", children: labels.showResults(total) }),
+      /* @__PURE__ */ jsx(DrawerClose, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": labels.close, children: /* @__PURE__ */ jsx(X, { className: "size-5" }) }) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: filterDrawerPanesVariants(), children: [
+      /* @__PURE__ */ jsx("nav", { className: filterDrawerNavVariants(), "aria-label": labels.title, children: /* @__PURE__ */ jsx("ul", { role: "tablist", "aria-orientation": "vertical", children: nav.map((item) => /* @__PURE__ */ jsx("li", { role: "presentation", children: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          ref: (node) => {
+            if (node) tabRefs.current.set(item.key, node);
+            else tabRefs.current.delete(item.key);
+          },
+          type: "button",
+          role: "tab",
+          id: tabId(item.key),
+          "aria-selected": item.key === activeKey,
+          "aria-controls": panelId,
+          tabIndex: item.key === activeKey ? 0 : -1,
+          className: filterDrawerNavItemVariants({ active: item.key === activeKey }),
+          onClick: () => setActive(item.key),
+          onKeyDown: onTabKeyDown,
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "min-w-0 break-words", children: item.label }),
+            item.picked > 0 && /* @__PURE__ */ jsx("span", { className: filterDrawerBadgeVariants(), children: item.picked })
+          ]
+        }
+      ) }, item.key)) }) }),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          id: panelId,
+          role: "tabpanel",
+          "aria-labelledby": activeKey ? tabId(activeKey) : void 0,
+          className: filterDrawerContentVariants(),
+          children: [
+            activeKey === QUICK_GROUP_KEY && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-5", children: toggles.map((group) => /* @__PURE__ */ jsx(FilterToggleRow, { group, onToggle }, group.key)) }),
+            activeKey === PRICE_GROUP_KEY && price && /* @__PURE__ */ jsx("div", { className: "pt-2", children: /* @__PURE__ */ jsx(
+              FilterPriceSlider,
+              {
+                price: { ...price, onApply: () => void 0, onReset: () => void 0 },
+                labels,
+                showActions: false,
+                onValueChange: (min, max) => onPriceChange?.(min, max)
+              }
+            ) }),
+            activeGroup && /* @__PURE__ */ jsx(
+              FilterOptionList,
+              {
+                group: activeGroup,
+                onToggle,
+                limit: Number.POSITIVE_INFINITY,
+                searchThreshold,
+                labels
+              },
+              activeGroup.key
+            )
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: filterDrawerFooterVariants(), children: [
+      /* @__PURE__ */ jsx(Button, { variant: "outline", className: "flex-1", onClick: onClearAll, disabled: !anyPicked, children: labels.clearAll }),
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: "primary",
+          className: cn("flex-[2]"),
+          onClick: onApply,
+          disabled: total === 0,
+          "aria-live": "polite",
+          children: [
+            loading && /* @__PURE__ */ jsx(Spinner, { size: "sm", className: "mr-2", "aria-hidden": "true" }),
+            labels.showResults(total)
+          ]
+        }
+      )
+    ] })
+  ] }) });
+}
+
+export { DEFAULT_FILTER_DRAWER_LABELS, FilterDrawer };

package/dist/components/FilterDrawer/FilterDrawer.styles.d.ts

@@ -0,0 +1,12 @@
+export declare const filterDrawerHeaderVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const filterDrawerPanesVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+/** Left pane: the list of groups. */
+export declare const filterDrawerNavVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const filterDrawerNavItemVariants: (props?: ({
+    active?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const filterDrawerBadgeVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+/** Right pane: the active group's options. */
+export declare const filterDrawerContentVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const filterDrawerFooterVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+//# sourceMappingURL=FilterDrawer.styles.d.ts.map

package/dist/components/FilterDrawer/FilterDrawer.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterDrawer.styles.d.ts","sourceRoot":"","sources":["../../../src/components/FilterDrawer/FilterDrawer.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,0BAA0B,oFAEtC,CAAC;AAEF,eAAO,MAAM,yBAAyB,oFAA6B,CAAC;AAEpE,qCAAqC;AACrC,eAAO,MAAM,uBAAuB,oFAEnC,CAAC;AAEF,eAAO,MAAM,2BAA2B;;8EAWvC,CAAC;AAEF,eAAO,MAAM,yBAAyB,oFAErC,CAAC;AAEF,8CAA8C;AAC9C,eAAO,MAAM,2BAA2B,oFAAqE,CAAC;AAE9G,eAAO,MAAM,0BAA0B,oFAEtC,CAAC"}

package/dist/components/FilterDrawer/FilterDrawer.styles.js

@@ -0,0 +1,30 @@
+import { cva } from 'class-variance-authority';
+
+const filterDrawerHeaderVariants = cva(
+  "flex shrink-0 items-center justify-between gap-2 border-b border-grey-200 px-4 py-3"
+);
+const filterDrawerPanesVariants = cva("flex min-h-0 flex-1");
+const filterDrawerNavVariants = cva(
+  "w-36 shrink-0 overflow-y-auto overscroll-contain border-r border-grey-200 bg-grey-100"
+);
+const filterDrawerNavItemVariants = cva(
+  "flex w-full items-center justify-between gap-2 border-l-4 px-3 py-4 text-left text-body-3 font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+  {
+    variants: {
+      active: {
+        true: "border-primary bg-grey-50 text-grey-950",
+        false: "border-transparent text-grey-700 hover:text-grey-950"
+      }
+    },
+    defaultVariants: { active: false }
+  }
+);
+const filterDrawerBadgeVariants = cva(
+  "inline-flex min-w-5 items-center justify-center rounded-full bg-primary px-1.5 text-caption font-semibold text-primary-foreground"
+);
+const filterDrawerContentVariants = cva("min-w-0 flex-1 overflow-y-auto overscroll-contain px-4 py-4");
+const filterDrawerFooterVariants = cva(
+  "flex shrink-0 items-center gap-3 border-t border-grey-200 bg-grey-50 px-4 pt-3 pb-[max(0.75rem,env(safe-area-inset-bottom))]"
+);
+
+export { filterDrawerBadgeVariants, filterDrawerContentVariants, filterDrawerFooterVariants, filterDrawerHeaderVariants, filterDrawerNavItemVariants, filterDrawerNavVariants, filterDrawerPanesVariants };

package/dist/components/FilterDrawer/FilterDrawer.types.d.ts

@@ -0,0 +1,28 @@
+import type { FilterGroup, FilterPanelLabels, FilterPriceConfig } from '../FilterPanel/FilterPanel.types';
+export interface FilterDrawerLabels extends FilterPanelLabels {
+    /** Left-pane entry holding the yes/no toggles. */
+    quickFilters: string;
+    clearAll: string;
+    close: string;
+    /** Apply button, e.g. (n) => `Show ${n} results`; `null` while the count is unknown. */
+    showResults: (total: number | null) => string;
+}
+export interface FilterDrawerProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /** The staged (not yet applied) selection: the drawer edits a draft, the page applies it. */
+    groups: FilterGroup[];
+    onToggle: (key: string, value: string) => void;
+    /** Staged price; changes arrive through `onPriceChange`, not Apply/Reset. */
+    price?: Omit<FilterPriceConfig, 'onApply' | 'onReset'>;
+    onPriceChange?: (min: number, max: number) => void;
+    onClearAll: () => void;
+    onApply: () => void;
+    /** Results the staged selection would show (null while counting). */
+    total: number | null;
+    /** True while counts are being fetched for the staged selection. */
+    loading?: boolean;
+    labels?: Partial<FilterDrawerLabels>;
+    searchThreshold?: number;
+}
+//# sourceMappingURL=FilterDrawer.types.d.ts.map