@ashwa-io/ui 0.0.5 → 0.0.6

package/dist/components/molecule/FacetFilter/FacetFilter.d.ts

@@ -0,0 +1,14 @@
+import { FacetOption } from "./FacetList.js";
+import { FacetSize } from "./FacetTrigger.js";
+import React from "react";
+export interface FacetFilterProps {
+  title: string;
+  options: FacetOption[];
+  /** Selected option values. */
+  value: string[];
+  onChange: (value: string[]) => void;
+  size?: FacetSize;
+  disabled?: boolean;
+  'data-testid'?: string;
+}
+export declare const FacetFilter: React.FC<FacetFilterProps>;

package/dist/components/molecule/FacetFilter/FacetFilter.js

@@ -0,0 +1,30 @@
+import { Popover, PopoverContent } from "../../ui/popover.js";
+import { FacetList } from "./FacetList.js";
+import { FacetTrigger } from "./FacetTrigger.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/molecule/FacetFilter/FacetFilter.tsx
+const FacetFilter = (props) => {
+	const { title, options, value, onChange, size, disabled, "data-testid": testId } = props;
+	const selected = options.filter((option) => value.includes(option.value)).length;
+	const active = selected > 0 && selected < options.length;
+	return /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsx(FacetTrigger, {
+		title,
+		summary: active ? String(selected) : "All",
+		active,
+		size,
+		disabled,
+		"data-testid": testId
+	}), /* @__PURE__ */ jsx(PopoverContent, {
+		align: "start",
+		"aria-label": title,
+		className: "w-60 gap-0 p-0",
+		children: /* @__PURE__ */ jsx(FacetList, {
+			label: title,
+			options,
+			value,
+			onChange,
+			showSelectAll: true
+		})
+	})] });
+};
+export { FacetFilter };

package/dist/components/molecule/FacetFilter/FacetList.d.ts

@@ -0,0 +1,10 @@
+import { IconComponent } from "../../../lib/types.js";
+import "react";
+export interface FacetOption {
+  value: string;
+  label: string;
+  icon?: IconComponent;
+  /** Result count shown at the end of the row. */
+  count?: number;
+  disabled?: boolean;
+}

package/dist/components/molecule/FacetFilter/FacetList.js

@@ -0,0 +1,103 @@
+import { Button } from "../../atomic/Button/Button.js";
+import { Combobox, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList } from "../../ui/combobox.js";
+import { cn } from "../../../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon } from "lucide-react";
+import { useState } from "react";
+// src/components/molecule/FacetFilter/FacetList.tsx
+const CheckBox = (props) => /* @__PURE__ */ jsx("span", {
+	"aria-hidden": true,
+	className: cn("border-input flex size-4 shrink-0 items-center justify-center rounded-[4px] border", props.checked && "border-primary bg-primary"),
+	children: props.checked && /* @__PURE__ */ jsx(CheckIcon, { className: "text-primary-foreground! size-3.5" })
+});
+/** Internal: search box + arrow-key list, shared by the facet filters and FilterMenu. */
+const FacetList = (props) => {
+	const { label, options, value, onChange, multiple = true, showSelectAll = false, clearable = true } = props;
+	const [query, setQuery] = useState("");
+	const byValue = new Map(options.map((option) => [option.value, option]));
+	const enabled = options.filter((option) => !option.disabled).map((option) => option.value);
+	const allSelected = enabled.length > 0 && enabled.every((item) => value.includes(item));
+	const locked = value.filter((item) => byValue.get(item)?.disabled);
+	const handleChange = (next) => {
+		if (multiple) {
+			onChange(next);
+			return;
+		}
+		onChange(next.filter((item) => !value.includes(item)).slice(-1));
+	};
+	return /* @__PURE__ */ jsxs(Combobox, {
+		inline: true,
+		open: true,
+		multiple: true,
+		items: options.map((option) => option.value),
+		itemToStringLabel: (item) => byValue.get(item)?.label ?? item,
+		value,
+		onValueChange: handleChange,
+		inputValue: query,
+		onInputValueChange: (next, details) => {
+			if (!details.isItemPress) setQuery(next);
+		},
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "border-b p-1",
+				children: /* @__PURE__ */ jsx(ComboboxInput, {
+					showTrigger: false,
+					placeholder: "Search",
+					"aria-label": label
+				})
+			}),
+			showSelectAll && query === "" && /* @__PURE__ */ jsx("div", {
+				className: "px-1 pt-1",
+				children: /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					"aria-pressed": allSelected,
+					onClick: () => onChange(allSelected ? locked : [...locked, ...enabled]),
+					className: "hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground flex w-full cursor-default items-center gap-2 rounded-md py-1 pl-1.5 text-sm font-medium outline-none",
+					children: [/* @__PURE__ */ jsx(CheckBox, { checked: allSelected }), "Select all"]
+				})
+			}),
+			/* @__PURE__ */ jsx(ComboboxEmpty, {
+				className: "flex empty:hidden",
+				children: "No results"
+			}),
+			/* @__PURE__ */ jsx(ComboboxList, {
+				className: "max-h-60",
+				"aria-multiselectable": multiple,
+				children: (item) => {
+					const option = byValue.get(item);
+					if (!option) return null;
+					const Icon = option.icon;
+					const selected = value.includes(item);
+					return /* @__PURE__ */ jsxs(ComboboxItem, {
+						value: item,
+						disabled: option.disabled,
+						className: cn(selected && "bg-brand-tint text-brand-tint-foreground", multiple && "pr-1.5 [&>.absolute]:hidden"),
+						children: [
+							multiple && /* @__PURE__ */ jsx(CheckBox, { checked: selected }),
+							Icon && /* @__PURE__ */ jsx(Icon, { "aria-hidden": true }),
+							/* @__PURE__ */ jsx("span", {
+								className: "min-w-0 flex-1 truncate",
+								children: option.label
+							}),
+							option.count !== void 0 && /* @__PURE__ */ jsx("span", {
+								className: cn("text-xs tabular-nums", !selected && "text-muted-foreground"),
+								children: option.count
+							})
+						]
+					}, item);
+				}
+			}),
+			clearable && value.length > 0 && /* @__PURE__ */ jsx("div", {
+				className: "border-t p-1",
+				children: /* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					size: "sm",
+					fullWidth: true,
+					onClick: () => onChange([]),
+					children: "Clear filters"
+				})
+			})
+		]
+	});
+};
+export { FacetList };

package/dist/components/molecule/FacetFilter/FacetTrigger.d.ts

@@ -0,0 +1,2 @@
+import "react";
+export type FacetSize = 'sm' | 'md';

package/dist/components/molecule/FacetFilter/FacetTrigger.js

@@ -0,0 +1,35 @@
+import { Button } from "../../ui/button.js";
+import { PopoverTrigger } from "../../ui/popover.js";
+import { cn } from "../../../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDownIcon } from "lucide-react";
+// src/components/molecule/FacetFilter/FacetTrigger.tsx
+/** Internal: the dashed filter button; must be rendered inside a popover root. */
+const FacetTrigger = (props) => {
+	const { title, summary, active, size = "sm", disabled = false, "data-testid": testId } = props;
+	return /* @__PURE__ */ jsxs(PopoverTrigger, {
+		disabled,
+		"data-testid": testId,
+		render: /* @__PURE__ */ jsx(Button, {
+			variant: "outline",
+			size: size === "sm" ? "sm" : "default",
+			className: cn("font-normal", !active && "border-dashed")
+		}),
+		children: [
+			/* @__PURE__ */ jsx("span", { children: title }),
+			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: "bg-border h-4 w-px"
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: cn("max-w-40 truncate font-medium", active && "bg-brand-tint text-brand-tint-foreground rounded-sm px-1"),
+				children: summary
+			}),
+			/* @__PURE__ */ jsx(ChevronDownIcon, {
+				"data-icon": "inline-end",
+				"aria-hidden": true
+			})
+		]
+	});
+};
+export { FacetTrigger };

package/dist/components/molecule/FacetFilter/index.d.ts

@@ -0,0 +1,3 @@
+import { FacetFilter, FacetFilterProps } from "./FacetFilter.js";
+import { FacetOption } from "./FacetList.js";
+export { FacetFilter, type FacetFilterProps, type FacetOption };

package/dist/components/molecule/FacetFilterNumber/FacetFilterNumber.d.ts

@@ -0,0 +1,29 @@
+import { FacetSize } from "../FacetFilter/FacetTrigger.js";
+import React from "react";
+export interface NumberCondition {
+  /** e.g. 'gt', 'between'. */
+  value: string;
+  /** e.g. 'Greater than'. */
+  label: string;
+  /** Takes two values: from and to. */
+  range?: boolean;
+}
+export interface NumberFilterValue {
+  condition: string;
+  /** As typed; '' when empty. */
+  from: string;
+  /** Only used by range conditions. */
+  to: string;
+}
+export interface FacetFilterNumberProps {
+  title: string;
+  conditions: NumberCondition[];
+  value: NumberFilterValue | null;
+  onChange: (value: NumberFilterValue | null) => void;
+  /** Formats values in the trigger, e.g. value => `${value} km/h`. */
+  format?: (value: string) => string;
+  size?: FacetSize;
+  disabled?: boolean;
+  'data-testid'?: string;
+}
+export declare const FacetFilterNumber: React.FC<FacetFilterNumberProps>;

package/dist/components/molecule/FacetFilterNumber/FacetFilterNumber.js

@@ -0,0 +1,93 @@
+import { Button } from "../../atomic/Button/Button.js";
+import { Select } from "../../atomic/Select/Select.js";
+import { FacetTrigger } from "../FacetFilter/FacetTrigger.js";
+import { FormField } from "../FormField/FormField.js";
+import { Input } from "../../ui/input.js";
+import { Popover, PopoverContent } from "../../ui/popover.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/molecule/FacetFilterNumber/FacetFilterNumber.tsx
+const NumberField = (props) => /* @__PURE__ */ jsx(FormField, {
+	label: props.label,
+	children: (control) => /* @__PURE__ */ jsx(Input, {
+		id: control.id,
+		type: "number",
+		value: props.value,
+		onChange: (event) => props.onChange(event.target.value)
+	})
+});
+const summarize = (value, condition, format) => {
+	if (value.from === "") return condition.label;
+	const from = `${condition.label} ${format(value.from)}`;
+	return condition.range && value.to !== "" ? `${from} and ${format(value.to)}` : from;
+};
+const FacetFilterNumber = (props) => {
+	const { title, conditions, value, onChange, format = (text) => text, size, disabled, "data-testid": testId } = props;
+	const condition = conditions.find((item) => item.value === value?.condition);
+	const from = value?.from ?? "";
+	const to = value?.to ?? "";
+	return /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsx(FacetTrigger, {
+		title,
+		summary: value && condition ? summarize(value, condition, format) : "All",
+		active: condition !== void 0,
+		size,
+		disabled,
+		"data-testid": testId
+	}), /* @__PURE__ */ jsxs(PopoverContent, {
+		align: "start",
+		"aria-label": title,
+		className: "w-64",
+		children: [
+			/* @__PURE__ */ jsx(Select, {
+				label: "Condition",
+				options: conditions.map((item) => ({
+					value: item.value,
+					label: item.label
+				})),
+				value: condition?.value ?? null,
+				onChange: (next) => onChange({
+					condition: next,
+					from,
+					to: ""
+				}),
+				placeholder: "Select condition"
+			}),
+			value && condition && !condition.range && /* @__PURE__ */ jsx(NumberField, {
+				label: "Value",
+				value: from,
+				onChange: (next) => onChange({
+					condition: value.condition,
+					from: next,
+					to: ""
+				})
+			}),
+			value && condition?.range && /* @__PURE__ */ jsxs("div", {
+				className: "grid grid-cols-2 gap-2",
+				children: [/* @__PURE__ */ jsx(NumberField, {
+					label: "From",
+					value: from,
+					onChange: (next) => onChange({
+						condition: value.condition,
+						from: next,
+						to
+					})
+				}), /* @__PURE__ */ jsx(NumberField, {
+					label: "To",
+					value: to,
+					onChange: (next) => onChange({
+						condition: value.condition,
+						from,
+						to: next
+					})
+				})]
+			}),
+			value && /* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				size: "sm",
+				fullWidth: true,
+				onClick: () => onChange(null),
+				children: "Clear filter"
+			})
+		]
+	})] });
+};
+export { FacetFilterNumber };

package/dist/components/molecule/FacetFilterNumber/index.d.ts

@@ -0,0 +1,2 @@
+import { FacetFilterNumber, FacetFilterNumberProps, NumberCondition, NumberFilterValue } from "./FacetFilterNumber.js";
+export { FacetFilterNumber, type FacetFilterNumberProps, type NumberCondition, type NumberFilterValue };

package/dist/components/molecule/FacetFilterSelect/FacetFilterSelect.d.ts

@@ -0,0 +1,15 @@
+import { FacetOption } from "../FacetFilter/FacetList.js";
+import { FacetSize } from "../FacetFilter/FacetTrigger.js";
+import React from "react";
+export interface FacetFilterSelectProps {
+  title: string;
+  options: FacetOption[];
+  value: string | null;
+  onChange: (value: string | null) => void;
+  /** Always holds a value: no clear option, and onChange never gets null. */
+  required?: boolean;
+  size?: FacetSize;
+  disabled?: boolean;
+  'data-testid'?: string;
+}
+export declare const FacetFilterSelect: React.FC<FacetFilterSelectProps>;

package/dist/components/molecule/FacetFilterSelect/FacetFilterSelect.js

@@ -0,0 +1,41 @@
+import { FacetList } from "../FacetFilter/FacetList.js";
+import { FacetTrigger } from "../FacetFilter/FacetTrigger.js";
+import { Popover, PopoverContent } from "../../ui/popover.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+// src/components/molecule/FacetFilterSelect/FacetFilterSelect.tsx
+const FacetFilterSelect = (props) => {
+	const { title, options, value, onChange, required = false, size, disabled, "data-testid": testId } = props;
+	const [open, setOpen] = useState(false);
+	const selected = options.find((option) => option.value === value);
+	const handleChange = (next) => {
+		setOpen(false);
+		if (next.length > 0) onChange(next[0]);
+		else if (!required) onChange(null);
+	};
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: setOpen,
+		children: [/* @__PURE__ */ jsx(FacetTrigger, {
+			title,
+			summary: selected?.label ?? "All",
+			active: selected !== void 0,
+			size,
+			disabled,
+			"data-testid": testId
+		}), /* @__PURE__ */ jsx(PopoverContent, {
+			align: "start",
+			"aria-label": title,
+			className: "w-60 gap-0 p-0",
+			children: /* @__PURE__ */ jsx(FacetList, {
+				label: title,
+				options,
+				value: value === null ? [] : [value],
+				onChange: handleChange,
+				multiple: false,
+				clearable: !required
+			})
+		})]
+	});
+};
+export { FacetFilterSelect };

package/dist/components/molecule/FacetFilterSelect/index.d.ts

@@ -0,0 +1,2 @@
+import { FacetFilterSelect, FacetFilterSelectProps } from "./FacetFilterSelect.js";
+export { FacetFilterSelect, type FacetFilterSelectProps };

package/dist/components/molecule/FilterMenu/FilterMenu.d.ts

@@ -0,0 +1,23 @@
+import { FacetOption } from "../FacetFilter/FacetList.js";
+import { Size } from "../../../lib/types.js";
+import React from "react";
+export interface FilterCategory {
+  id: string;
+  label: string;
+  options: FacetOption[];
+  /** false: one choice in this category. */
+  multiple?: boolean;
+}
+/** Selected option values by category id. */
+export type FilterMenuValue = Record<string, string[]>;
+export interface FilterMenuProps {
+  categories: FilterCategory[];
+  value: FilterMenuValue;
+  /** Always the whole object; keys that aren't categories are kept. */
+  onChange: (value: FilterMenuValue) => void;
+  label?: string;
+  size?: Size;
+  disabled?: boolean;
+  'data-testid'?: string;
+}
+export declare const FilterMenu: React.FC<FilterMenuProps>;

package/dist/components/molecule/FilterMenu/FilterMenu.js

@@ -0,0 +1,131 @@
+import { Badge } from "../../atomic/Badge/Badge.js";
+import { Button } from "../../atomic/Button/Button.js";
+import { buttonLook } from "../../atomic/Button/buttonLook.js";
+import { FacetList } from "../FacetFilter/FacetList.js";
+import { Button as Button$1 } from "../../ui/button.js";
+import { Input } from "../../ui/input.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../../ui/popover.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ChevronRightIcon, FilterIcon } from "lucide-react";
+import { useState } from "react";
+// src/components/molecule/FilterMenu/FilterMenu.tsx
+const FilterMenu = (props) => {
+	const { categories, value, onChange, label = "Filter", size = "sm", disabled = false, "data-testid": testId } = props;
+	const [query, setQuery] = useState("");
+	const [openId, setOpenId] = useState(null);
+	const selectedCount = (category) => category.options.filter((option) => value[category.id]?.includes(option.value)).length;
+	const activeCount = categories.filter((category) => selectedCount(category) > 0).length;
+	const look = buttonLook("outline", size, false);
+	const needle = query.trim().toLowerCase();
+	const visible = categories.filter((category) => category.label.toLowerCase().includes(needle));
+	const clearAll = () => onChange({
+		...value,
+		...Object.fromEntries(categories.map(({ id }) => [id, []]))
+	});
+	return /* @__PURE__ */ jsxs(Popover, {
+		onOpenChange: (open) => {
+			if (open) return;
+			setQuery("");
+			setOpenId(null);
+		},
+		children: [/* @__PURE__ */ jsxs(PopoverTrigger, {
+			disabled,
+			"data-testid": testId,
+			render: /* @__PURE__ */ jsx(Button$1, {
+				variant: look.variant,
+				size: look.size
+			}),
+			children: [
+				/* @__PURE__ */ jsx(FilterIcon, {
+					"data-icon": "inline-start",
+					"aria-hidden": true
+				}),
+				label,
+				" ",
+				activeCount > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Badge, {
+					tone: "brand",
+					children: activeCount
+				}), /* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: " active"
+				})] })
+			]
+		}), /* @__PURE__ */ jsxs(PopoverContent, {
+			align: "start",
+			"aria-label": label,
+			className: "w-60 gap-0 p-0",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "border-b p-1",
+					children: /* @__PURE__ */ jsx(Input, {
+						"aria-label": "Search filters",
+						placeholder: "Search",
+						value: query,
+						onChange: (event) => setQuery(event.target.value)
+					})
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "max-h-60 overflow-y-auto p-1",
+					children: [visible.length === 0 && /* @__PURE__ */ jsx("p", {
+						className: "text-muted-foreground py-2 text-center text-sm",
+						children: "No results"
+					}), visible.map((category) => {
+						const count = selectedCount(category);
+						const multiple = category.multiple !== false;
+						return /* @__PURE__ */ jsxs(Popover, {
+							open: openId === category.id,
+							onOpenChange: (open) => setOpenId(open ? category.id : null),
+							children: [/* @__PURE__ */ jsxs(PopoverTrigger, {
+								render: /* @__PURE__ */ jsx("button", {
+									type: "button",
+									className: "hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent data-popup-open:bg-accent data-popup-open:text-accent-foreground flex w-full cursor-default items-center gap-2 rounded-md px-1.5 py-1 text-sm outline-none"
+								}),
+								children: [
+									/* @__PURE__ */ jsx("span", {
+										className: "min-w-0 flex-1 truncate text-left",
+										children: category.label
+									}),
+									count > 0 && /* @__PURE__ */ jsx("span", {
+										className: "text-xs tabular-nums",
+										children: count
+									}),
+									/* @__PURE__ */ jsx(ChevronRightIcon, {
+										"aria-hidden": true,
+										className: "size-4 shrink-0"
+									})
+								]
+							}), /* @__PURE__ */ jsx(PopoverContent, {
+								side: "right",
+								align: "start",
+								"aria-label": category.label,
+								className: "w-60 gap-0 p-0",
+								children: /* @__PURE__ */ jsx(FacetList, {
+									label: category.label,
+									options: category.options,
+									value: value[category.id] ?? [],
+									onChange: (next) => onChange({
+										...value,
+										[category.id]: next
+									}),
+									multiple,
+									showSelectAll: multiple
+								})
+							})]
+						}, category.id);
+					})]
+				}),
+				activeCount > 0 && /* @__PURE__ */ jsx("div", {
+					className: "border-t p-1",
+					children: /* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						size: "sm",
+						fullWidth: true,
+						onClick: clearAll,
+						children: "Clear all"
+					})
+				})
+			]
+		})]
+	});
+};
+export { FilterMenu };

package/dist/components/molecule/FilterMenu/index.d.ts

@@ -0,0 +1,2 @@
+import { FilterCategory, FilterMenu, FilterMenuProps, FilterMenuValue } from "./FilterMenu.js";
+export { type FilterCategory, FilterMenu, type FilterMenuProps, type FilterMenuValue };

package/dist/components/ui/combobox.js

@@ -0,0 +1,78 @@
+"use client";
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "./input-group.js";
+import { cn } from "cn";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon, ChevronDownIcon, XIcon } from "lucide-react";
+import "react";
+import { Combobox } from "@base-ui/react";
+// src/components/ui/combobox.tsx
+const Combobox$1 = Combobox.Root;
+const ComboboxTrigger = ({ className, children, ...props }) => {
+	return /* @__PURE__ */ jsxs(Combobox.Trigger, {
+		"data-slot": "combobox-trigger",
+		className: cn("[&_svg:not([class*='size-'])]:size-4", className),
+		...props,
+		children: [children, /* @__PURE__ */ jsx(ChevronDownIcon, { className: "text-muted-foreground pointer-events-none size-4" })]
+	});
+};
+const ComboboxClear = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Combobox.Clear, {
+		"data-slot": "combobox-clear",
+		render: /* @__PURE__ */ jsx(InputGroupButton, {
+			variant: "ghost",
+			size: "icon-xs"
+		}),
+		className: cn(className),
+		...props,
+		children: /* @__PURE__ */ jsx(XIcon, { className: "pointer-events-none" })
+	});
+};
+const ComboboxInput = ({ className, children, disabled = false, showTrigger = true, showClear = false, ...props }) => {
+	return /* @__PURE__ */ jsxs(InputGroup, {
+		className: cn("w-auto", className),
+		children: [
+			/* @__PURE__ */ jsx(Combobox.Input, {
+				render: /* @__PURE__ */ jsx(InputGroupInput, { disabled }),
+				...props
+			}),
+			/* @__PURE__ */ jsxs(InputGroupAddon, {
+				align: "inline-end",
+				children: [showTrigger && /* @__PURE__ */ jsx(InputGroupButton, {
+					size: "icon-xs",
+					variant: "ghost",
+					render: /* @__PURE__ */ jsx(ComboboxTrigger, {}),
+					"data-slot": "input-group-button",
+					className: "group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent",
+					disabled
+				}), showClear && /* @__PURE__ */ jsx(ComboboxClear, { disabled })]
+			}),
+			children
+		]
+	});
+};
+const ComboboxList = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Combobox.List, {
+		"data-slot": "combobox-list",
+		className: cn("no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain p-1 data-empty:p-0", className),
+		...props
+	});
+};
+const ComboboxItem = ({ className, children, ...props }) => {
+	return /* @__PURE__ */ jsxs(Combobox.Item, {
+		"data-slot": "combobox-item",
+		className: cn("data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground relative flex w-full cursor-default items-center gap-2 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		...props,
+		children: [children, /* @__PURE__ */ jsx(Combobox.ItemIndicator, {
+			render: /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center" }),
+			children: /* @__PURE__ */ jsx(CheckIcon, { className: "pointer-events-none" })
+		})]
+	});
+};
+const ComboboxEmpty = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Combobox.Empty, {
+		"data-slot": "combobox-empty",
+		className: cn("text-muted-foreground hidden w-full justify-center py-2 text-center text-sm group-data-empty/combobox-content:flex", className),
+		...props
+	});
+};
+export { Combobox$1 as Combobox, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList, ComboboxTrigger };

package/dist/components/ui/input-group.js

@@ -0,0 +1,63 @@
+import { Button } from "./button.js";
+import { Input } from "./input.js";
+import { cva } from "class-variance-authority";
+import { cn } from "cn";
+import { jsx } from "react/jsx-runtime";
+import "react";
+// src/components/ui/input-group.tsx
+const InputGroup = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "input-group",
+		role: "group",
+		className: cn("group/input-group border-input has-disabled:bg-input/50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-destructive/20 dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 relative flex h-8 w-full min-w-0 items-center rounded-lg border transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-3 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5", className),
+		...props
+	});
+};
+const inputGroupAddonVariants = cva("flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4", {
+	variants: { align: {
+		"inline-start": "order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]",
+		"inline-end": "order-last pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]",
+		"block-start": "order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2",
+		"block-end": "order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2"
+	} },
+	defaultVariants: { align: "inline-start" }
+});
+const InputGroupAddon = ({ className, align = "inline-start", ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		role: "group",
+		"data-slot": "input-group-addon",
+		"data-align": align,
+		className: cn(inputGroupAddonVariants({ align }), className),
+		onClick: (e) => {
+			if (e.target.closest("button")) return;
+			e.currentTarget.parentElement?.querySelector("input")?.focus();
+		},
+		...props
+	});
+};
+const inputGroupButtonVariants = cva("flex items-center gap-2 text-sm shadow-none", {
+	variants: { size: {
+		xs: "h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
+		sm: "",
+		"icon-xs": "size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0",
+		"icon-sm": "size-8 p-0 has-[>svg]:p-0"
+	} },
+	defaultVariants: { size: "xs" }
+});
+const InputGroupButton = ({ className, type = "button", variant = "ghost", size = "xs", ...props }) => {
+	return /* @__PURE__ */ jsx(Button, {
+		type,
+		"data-size": size,
+		variant,
+		className: cn(inputGroupButtonVariants({ size }), className),
+		...props
+	});
+};
+const InputGroupInput = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Input, {
+		"data-slot": "input-group-control",
+		className: cn("flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent", className),
+		...props
+	});
+};
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput };

package/dist/index.d.ts

@@ -35,6 +35,15 @@ import "./components/molecule/ConfirmDialog/index.js";
 import { ConfirmDialog, ConfirmDialogProps } from "./components/molecule/ConfirmDialog/ConfirmDialog.js";
 import "./components/molecule/DropdownMenu/index.js";
 import { DropdownMenu, DropdownMenuProps, MenuItem } from "./components/molecule/DropdownMenu/DropdownMenu.js";
+import "./components/molecule/FacetFilter/index.js";
+import { FacetOption } from "./components/molecule/FacetFilter/FacetList.js";
+import { FacetFilter, FacetFilterProps } from "./components/molecule/FacetFilter/FacetFilter.js";
+import "./components/molecule/FacetFilterSelect/index.js";
+import { FacetFilterSelect, FacetFilterSelectProps } from "./components/molecule/FacetFilterSelect/FacetFilterSelect.js";
+import "./components/molecule/FacetFilterNumber/index.js";
+import { FacetFilterNumber, FacetFilterNumberProps, NumberCondition, NumberFilterValue } from "./components/molecule/FacetFilterNumber/FacetFilterNumber.js";
+import "./components/molecule/FilterMenu/index.js";
+import { FilterCategory, FilterMenu, FilterMenuProps, FilterMenuValue } from "./components/molecule/FilterMenu/FilterMenu.js";
 import "./components/molecule/FormField/index.js";
 import { FormField, FormFieldControlProps, FormFieldProps } from "./components/molecule/FormField/FormField.js";
 import "./components/molecule/Modal/index.js";
@@ -47,4 +56,4 @@ import { Toaster } from "./components/molecule/Toaster/Toaster.js";
 import "./components/layout/Stack/index.js";
 import { HStack, HStackProps, Stack, StackAlign, StackGap, StackJustify, StackProps, VStack, VStackProps } from "./components/layout/Stack/Stack.js";
 import { FieldBaseProps, IconComponent, OverlayAlign, OverlaySide, Size, Tone } from "./lib/types.js";
-export { Badge, type BadgeProps, Button, type ButtonProps, type ButtonVariant, Checkbox, type CheckboxProps, ColorInput, type ColorInputProps, ConfirmDialog, type ConfirmDialogProps, Divider, type DividerProps, DropdownMenu, type DropdownMenuProps, type FieldBaseProps, FormField, type FormFieldControlProps, type FormFieldProps, FormLayout, type FormLayoutDirection, type FormLayoutProps, HStack, type HStackProps, Heading, type HeadingLevel, type HeadingProps, IconButton, type IconButtonProps, type IconButtonVariant, type IconComponent, type MenuItem, Modal, type ModalProps, type ModalSize, type OverlayAlign, type OverlaySide, Popover, type PopoverProps, type PopoverWidth, Select, type SelectOption, type SelectProps, type Size, Skeleton, type SkeletonProps, type SkeletonShape, Spinner, type SpinnerProps, Stack, type StackAlign, type StackGap, type StackJustify, type StackProps, Switch, type SwitchProps, Text, TextArea, type TextAreaProps, TextInput, type TextInputProps, type TextInputType, type TextProps, type TextSize, type TextTone, type TextWeight, type ToastOptions, Toaster, type Tone, Tooltip, type TooltipProps, VStack, type VStackProps, toast };
+export { Badge, type BadgeProps, Button, type ButtonProps, type ButtonVariant, Checkbox, type CheckboxProps, ColorInput, type ColorInputProps, ConfirmDialog, type ConfirmDialogProps, Divider, type DividerProps, DropdownMenu, type DropdownMenuProps, FacetFilter, FacetFilterNumber, type FacetFilterNumberProps, type FacetFilterProps, FacetFilterSelect, type FacetFilterSelectProps, type FacetOption, type FieldBaseProps, type FilterCategory, FilterMenu, type FilterMenuProps, type FilterMenuValue, FormField, type FormFieldControlProps, type FormFieldProps, FormLayout, type FormLayoutDirection, type FormLayoutProps, HStack, type HStackProps, Heading, type HeadingLevel, type HeadingProps, IconButton, type IconButtonProps, type IconButtonVariant, type IconComponent, type MenuItem, Modal, type ModalProps, type ModalSize, type NumberCondition, type NumberFilterValue, type OverlayAlign, type OverlaySide, Popover, type PopoverProps, type PopoverWidth, Select, type SelectOption, type SelectProps, type Size, Skeleton, type SkeletonProps, type SkeletonShape, Spinner, type SpinnerProps, Stack, type StackAlign, type StackGap, type StackJustify, type StackProps, Switch, type SwitchProps, Text, TextArea, type TextAreaProps, TextInput, type TextInputProps, type TextInputType, type TextProps, type TextSize, type TextTone, type TextWeight, type ToastOptions, Toaster, type Tone, Tooltip, type TooltipProps, VStack, type VStackProps, toast };

package/dist/index.js

@@ -16,10 +16,14 @@ import { Spinner } from "./components/atomic/Spinner/Spinner.js";
 import { FormLayout } from "./components/layout/FormLayout/FormLayout.js";
 import { ConfirmDialog } from "./components/molecule/ConfirmDialog/ConfirmDialog.js";
 import { DropdownMenu } from "./components/molecule/DropdownMenu/DropdownMenu.js";
+import { FacetFilter } from "./components/molecule/FacetFilter/FacetFilter.js";
+import { FacetFilterSelect } from "./components/molecule/FacetFilterSelect/FacetFilterSelect.js";
+import { FacetFilterNumber } from "./components/molecule/FacetFilterNumber/FacetFilterNumber.js";
+import { FilterMenu } from "./components/molecule/FilterMenu/FilterMenu.js";
 import { FormField } from "./components/molecule/FormField/FormField.js";
 import { Modal } from "./components/molecule/Modal/Modal.js";
 import { Popover } from "./components/molecule/Popover/Popover.js";
 import { toast } from "./components/molecule/Toaster/toast.js";
 import { Toaster } from "./components/molecule/Toaster/Toaster.js";
 import { HStack, Stack, VStack } from "./components/layout/Stack/Stack.js";
-export { Badge, Button, Checkbox, ColorInput, ConfirmDialog, Divider, DropdownMenu, FormField, FormLayout, HStack, Heading, IconButton, Modal, Popover, Select, Skeleton, Spinner, Stack, Switch, Text, TextArea, TextInput, Toaster, Tooltip, VStack, toast };
+export { Badge, Button, Checkbox, ColorInput, ConfirmDialog, Divider, DropdownMenu, FacetFilter, FacetFilterNumber, FacetFilterSelect, FilterMenu, FormField, FormLayout, HStack, Heading, IconButton, Modal, Popover, Select, Skeleton, Spinner, Stack, Switch, Text, TextArea, TextInput, Toaster, Tooltip, VStack, toast };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ashwa-io/ui",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "Ashwa design system: locked React components on shadcn/ui (Base UI) and Tailwind v4, with per-org brand theming.",
   "license": "MIT",
   "type": "module",