@ashwa-io/ui 0.0.4 → 0.0.6

package/dist/components/atomic/Button/buttonLook.js

@@ -0,0 +1,18 @@
+import { BUTTON_VARIANT } from "./buttonVariant.js";
+// src/components/atomic/Button/buttonLook.ts
+const TEXT_SIZE = {
+	sm: "sm",
+	md: "default",
+	lg: "lg"
+};
+const ICON_SIZE = {
+	sm: "icon-sm",
+	md: "icon",
+	lg: "icon-lg"
+};
+/** Primitive props for an overlay trigger drawn in the public Button look. */
+const buttonLook = (variant, size, iconOnly) => ({
+	variant: BUTTON_VARIANT[variant],
+	size: (iconOnly ? ICON_SIZE : TEXT_SIZE)[size]
+});
+export { buttonLook };

package/dist/components/atomic/Tooltip/Tooltip.d.ts

@@ -0,0 +1,14 @@
+import { OverlaySide } from "../../../lib/types.js";
+import React from "react";
+export interface TooltipProps {
+  /**
+   * Short plain text, a visual hint only: screen readers don't get it, and it needs a focusable
+   * child to appear for keyboards. Never put essential information only here.
+   */
+  content: string;
+  children: React.ReactNode;
+  side?: OverlaySide;
+  /** Lets a full-width child (e.g. `<Button fullWidth>`) fill its container. */
+  fullWidth?: boolean;
+}
+export declare const Tooltip: React.FC<TooltipProps>;

package/dist/components/atomic/Tooltip/Tooltip.js

@@ -0,0 +1,14 @@
+import { Tooltip as Tooltip$1, TooltipContent, TooltipProvider, TooltipTrigger } from "../../ui/tooltip.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/atomic/Tooltip/Tooltip.tsx
+const Tooltip = (props) => {
+	const { content, children, side = "top", fullWidth = false } = props;
+	return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip$1, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+		render: /* @__PURE__ */ jsx("span", { className: fullWidth ? "flex w-full" : "inline-flex max-w-full min-w-0" }),
+		children
+	}), /* @__PURE__ */ jsx(TooltipContent, {
+		side,
+		children: content
+	})] }) });
+};
+export { Tooltip };

package/dist/components/atomic/Tooltip/index.d.ts

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

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

@@ -0,0 +1,17 @@
+import React from "react";
+export interface ConfirmDialogProps {
+  open: boolean;
+  /** Cancel and Escape. */
+  onClose: () => void;
+  /** Never closes the dialog: the app closes it when its work finishes. */
+  onConfirm: () => void;
+  title: string;
+  description?: string;
+  confirmLabel: string;
+  cancelLabel?: string;
+  destructive?: boolean;
+  /** Confirm shows busy, Cancel is disabled and Escape is ignored. */
+  loading?: boolean;
+  'data-testid'?: string;
+}
+export declare const ConfirmDialog: React.FC<ConfirmDialogProps>;

package/dist/components/molecule/ConfirmDialog/ConfirmDialog.js

@@ -0,0 +1,28 @@
+import { Button } from "../../atomic/Button/Button.js";
+import { AlertDialog, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "../../ui/alert-dialog.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/molecule/ConfirmDialog/ConfirmDialog.tsx
+const ConfirmDialog = (props) => {
+	const { open, onClose, onConfirm, title, description, confirmLabel, cancelLabel = "Cancel", destructive = false, loading = false, "data-testid": testId } = props;
+	return /* @__PURE__ */ jsx(AlertDialog, {
+		open,
+		onOpenChange: (next) => {
+			if (!next && !loading) onClose();
+		},
+		children: /* @__PURE__ */ jsxs(AlertDialogContent, {
+			"data-testid": testId,
+			children: [/* @__PURE__ */ jsxs(AlertDialogHeader, { children: [/* @__PURE__ */ jsx(AlertDialogTitle, { children: title }), description && /* @__PURE__ */ jsx(AlertDialogDescription, { children: description })] }), /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [/* @__PURE__ */ jsx(Button, {
+				variant: "outline",
+				disabled: loading,
+				onClick: onClose,
+				children: cancelLabel
+			}), /* @__PURE__ */ jsx(Button, {
+				variant: destructive ? "destructive" : "primary",
+				loading,
+				onClick: onConfirm,
+				children: confirmLabel
+			})] })]
+		})
+	});
+};
+export { ConfirmDialog };

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

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

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

@@ -0,0 +1,28 @@
+import "../../atomic/Button/index.js";
+import { ButtonVariant } from "../../atomic/Button/buttonVariant.js";
+import { IconComponent, OverlayAlign, Size } from "../../../lib/types.js";
+import React from "react";
+export interface MenuItem {
+  label: string;
+  onSelect: () => void;
+  icon?: IconComponent;
+  /** Second line under the label. */
+  description?: string;
+  disabled?: boolean;
+  destructive?: boolean;
+}
+export interface DropdownMenuProps {
+  /** Trigger text (the trigger's aria-label when iconOnly). */
+  label: string;
+  items: MenuItem[];
+  icon?: IconComponent;
+  iconOnly?: boolean;
+  /** Trigger look. */
+  variant?: ButtonVariant;
+  size?: Size;
+  align?: OverlayAlign;
+  disabled?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  'data-testid'?: string;
+}
+export declare const DropdownMenu: React.FC<DropdownMenuProps>;

package/dist/components/molecule/DropdownMenu/DropdownMenu.js

@@ -0,0 +1,53 @@
+import { buttonLook } from "../../atomic/Button/buttonLook.js";
+import { Button } from "../../ui/button.js";
+import { DropdownMenu as DropdownMenu$1, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../../ui/dropdown-menu.js";
+import { cn } from "../../../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDownIcon } from "lucide-react";
+// src/components/molecule/DropdownMenu/DropdownMenu.tsx
+const DropdownMenu = (props) => {
+	const { label, items, icon: Icon, iconOnly = false, variant = "outline", size = "md", align = "end", disabled = false, onOpenChange, "data-testid": testId } = props;
+	const look = buttonLook(variant, size, iconOnly);
+	return /* @__PURE__ */ jsxs(DropdownMenu$1, {
+		onOpenChange: (open) => onOpenChange?.(open),
+		children: [/* @__PURE__ */ jsxs(DropdownMenuTrigger, {
+			disabled,
+			"aria-label": iconOnly ? label : void 0,
+			"data-testid": testId,
+			render: /* @__PURE__ */ jsx(Button, {
+				variant: look.variant,
+				size: look.size
+			}),
+			children: [
+				Icon && /* @__PURE__ */ jsx(Icon, {
+					"data-icon": iconOnly ? void 0 : "inline-start",
+					"aria-hidden": true
+				}),
+				!iconOnly && label,
+				!iconOnly && /* @__PURE__ */ jsx(ChevronDownIcon, {
+					"data-icon": "inline-end",
+					"aria-hidden": true
+				})
+			]
+		}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+			align,
+			className: "w-auto max-w-80 min-w-48",
+			children: items.map((item) => {
+				const ItemIcon = item.icon;
+				return /* @__PURE__ */ jsxs(DropdownMenuItem, {
+					onClick: item.onSelect,
+					disabled: item.disabled,
+					variant: item.destructive ? "destructive" : "default",
+					children: [ItemIcon && /* @__PURE__ */ jsx(ItemIcon, { "aria-hidden": true }), /* @__PURE__ */ jsxs("span", {
+						className: "flex flex-col",
+						children: [/* @__PURE__ */ jsx("span", { children: item.label }), item.description && /* @__PURE__ */ jsx("span", {
+							className: cn("text-xs", !item.destructive && "text-muted-foreground"),
+							children: item.description
+						})]
+					})]
+				}, item.label);
+			})
+		})]
+	});
+};
+export { DropdownMenu };

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

@@ -0,0 +1,2 @@
+import { DropdownMenu, DropdownMenuProps, MenuItem } from "./DropdownMenu.js";
+export { DropdownMenu, type DropdownMenuProps, type MenuItem };

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>;