@inui/design-system 0.0.0-stage → 1.22.0

package/dist/components/ui/select.js

@@ -0,0 +1,609 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { getPortalContainer } from "../../lib/scope.js";
+import { Button } from "./button.js";
+import * as React from "react";
+import { Popover, Select as Select$1 } from "radix-ui";
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon, XIcon } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/ui/select.tsx
+/**
+* Select — single-value dropdown over a fixed, bounded option list.
+*
+* Built on the Radix Select primitive with MMDS token-based styling. Size
+* variants (default/sm/xs) are layered on via a `data-size` attribute.
+*/
+function Select({ ...props }) {
+	return /* @__PURE__ */ jsx(Select$1.Root, {
+		"data-slot": "select",
+		...props
+	});
+}
+function SelectGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Select$1.Group, {
+		"data-slot": "select-group",
+		className: cn("scroll-my-1 p-1", className),
+		...props
+	});
+}
+function SelectValue({ inlineLabel, children, ...props }) {
+	return /* @__PURE__ */ jsx(Select$1.Value, {
+		"data-slot": "select-value",
+		...props,
+		children: children != null && inlineLabel ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("span", {
+			className: "text-muted-foreground",
+			children: [inlineLabel, ": "]
+		}), children] }) : children
+	});
+}
+function SelectTrigger({ className, size = "default", children, ...props }) {
+	return /* @__PURE__ */ jsxs(Select$1.Trigger, {
+		"data-slot": "select-trigger",
+		"data-size": size,
+		className: cn("flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md,0.375rem),10px)] data-[size=xs]:h-6 data-[size=xs]:gap-1 data-[size=xs]:rounded-[min(var(--radius-md,0.375rem),8px)] data-[size=xs]:pr-1.5 data-[size=xs]:pl-2 data-[size=xs]:text-xs *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		...props,
+		children: [children, /* @__PURE__ */ jsx(Select$1.Icon, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "pointer-events-none size-4 text-muted-foreground" })
+		})]
+	});
+}
+function SelectContent({ className, children, position = "item-aligned", align = "center", ...props }) {
+	return /* @__PURE__ */ jsx(Select$1.Portal, {
+		container: getPortalContainer(),
+		children: /* @__PURE__ */ jsxs(Select$1.Content, {
+			"data-slot": "select-content",
+			"data-align-trigger": position === "item-aligned",
+			className: cn("relative z-50 max-h-(--radix-select-content-available-height) min-w-36 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-popover ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95", position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className),
+			position,
+			align,
+			...props,
+			children: [
+				/* @__PURE__ */ jsx(SelectScrollUpButton, {}),
+				/* @__PURE__ */ jsx(Select$1.Viewport, {
+					"data-position": position,
+					className: cn("data-[position=popper]:h-(--radix-select-trigger-height) data-[position=popper]:w-full data-[position=popper]:min-w-(--radix-select-trigger-width)", position === "popper" && ""),
+					children
+				}),
+				/* @__PURE__ */ jsx(SelectScrollDownButton, {})
+			]
+		})
+	});
+}
+function SelectLabel({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Select$1.Label, {
+		"data-slot": "select-label",
+		className: cn("px-1.5 py-1 text-xs text-muted-foreground", className),
+		...props
+	});
+}
+function SelectItem({ className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Select$1.Item, {
+		"data-slot": "select-item",
+		className: cn("relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center",
+			children: /* @__PURE__ */ jsx(Select$1.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { className: "pointer-events-none" }) })
+		}), /* @__PURE__ */ jsx(Select$1.ItemText, { children })]
+	});
+}
+function SelectSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Select$1.Separator, {
+		"data-slot": "select-separator",
+		className: cn("pointer-events-none -mx-1 my-1 h-px bg-border", className),
+		...props
+	});
+}
+function SelectScrollUpButton({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Select$1.ScrollUpButton, {
+		"data-slot": "select-scroll-up-button",
+		className: cn("z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4", className),
+		...props,
+		children: /* @__PURE__ */ jsx(ChevronUpIcon, {})
+	});
+}
+function SelectScrollDownButton({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Select$1.ScrollDownButton, {
+		"data-slot": "select-scroll-down-button",
+		className: cn("z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4", className),
+		...props,
+		children: /* @__PURE__ */ jsx(ChevronDownIcon, {})
+	});
+}
+var SelectMultipleContext = React.createContext(null);
+function useSelectMultipleContext(component) {
+	const context = React.useContext(SelectMultipleContext);
+	if (!context) throw new Error(`${component} must be used within <SelectMultiple>.`);
+	return context;
+}
+function SelectMultiple({ value, onValueChange, size = "default", children, open: openProp, onOpenChange, closeOnSelect = false, ...props }) {
+	const labelsRef = React.useRef(/* @__PURE__ */ new Map());
+	const [labelsVersion, forceUpdate] = React.useReducer((n) => n + 1, 0);
+	const triggerRef = React.useRef(null);
+	const contentRef = React.useRef(null);
+	const [internalOpen, setInternalOpen] = React.useState(false);
+	const open = openProp ?? internalOpen;
+	const [triggerWidthOnOpen, setTriggerWidthOnOpen] = React.useState(void 0);
+	const setOpen = React.useCallback((next) => {
+		if (next) setTriggerWidthOnOpen(triggerRef.current?.getBoundingClientRect().width);
+		onOpenChange?.(next);
+		if (openProp === void 0) setInternalOpen(next);
+	}, [onOpenChange, openProp]);
+	React.useEffect(() => {
+		function handlePointerDown(event) {
+			const contentEl = contentRef.current;
+			if (!contentEl || contentEl.getAttribute("data-state") !== "open") return;
+			const target = event.target;
+			if (!(target instanceof Node)) return;
+			if (contentEl.contains(target)) return;
+			if (triggerRef.current?.contains(target)) return;
+			setOpen(false);
+		}
+		document.addEventListener("pointerdown", handlePointerDown);
+		return () => document.removeEventListener("pointerdown", handlePointerDown);
+	}, [setOpen]);
+	const registerLabel = React.useCallback((itemValue, label) => {
+		labelsRef.current.set(itemValue, label);
+		forceUpdate();
+	}, []);
+	const unregisterLabel = React.useCallback((itemValue) => {
+		labelsRef.current.delete(itemValue);
+		forceUpdate();
+	}, []);
+	const onItemSelect = React.useCallback((itemValue) => {
+		onValueChange(value.includes(itemValue) ? value.filter((v) => v !== itemValue) : [...value, itemValue]);
+		if (closeOnSelect) setOpen(false);
+	}, [
+		value,
+		onValueChange,
+		closeOnSelect,
+		setOpen
+	]);
+	const clear = React.useCallback(() => onValueChange([]), [onValueChange]);
+	const context = React.useMemo(() => ({
+		value,
+		onItemSelect,
+		clear,
+		labels: labelsRef.current,
+		registerLabel,
+		unregisterLabel,
+		size,
+		triggerRef,
+		contentRef,
+		closeOnSelect,
+		triggerWidthOnOpen
+	}), [
+		value,
+		onItemSelect,
+		clear,
+		registerLabel,
+		unregisterLabel,
+		labelsVersion,
+		size,
+		closeOnSelect,
+		triggerWidthOnOpen
+	]);
+	return /* @__PURE__ */ jsx(SelectMultipleContext.Provider, {
+		value: context,
+		children: /* @__PURE__ */ jsx(Popover.Root, {
+			"data-slot": "select-multiple",
+			open,
+			onOpenChange: setOpen,
+			...props,
+			children
+		})
+	});
+}
+/** Shows only the first selected label — ellipsis-truncated at a character cap, applied whether or not anything else is selected, since the label alone can be too long to show whole in a `w-fit` trigger with no width of its own to truncate against — plus "+N" for the rest once there's more than one. No cap: the first label in full, still just the first. */
+function buildMultiValueLabel(value, labels, maxChars) {
+	if (value.length === 0) return "";
+	const [first, ...rest] = value.map((v) => String(labels.get(v) ?? v));
+	const shown = maxChars !== void 0 && first.length > maxChars ? `${first.slice(0, maxChars)}…` : first;
+	return rest.length > 0 ? `${shown} +${rest.length}` : shown;
+}
+function SelectMultipleTrigger({ className, placeholder, disabled, maxLabelChars, inlineLabel, ...props }) {
+	const { value, labels, clear, size, triggerRef } = useSelectMultipleContext("SelectMultipleTrigger");
+	const hasValue = value.length > 0;
+	const valueLabel = buildMultiValueLabel(value, labels, maxLabelChars);
+	return /* @__PURE__ */ jsx(Popover.Trigger, {
+		disabled,
+		asChild: true,
+		...props,
+		children: /* @__PURE__ */ jsxs("div", {
+			ref: triggerRef,
+			"data-slot": "select-multiple-trigger",
+			"data-size": size,
+			"data-placeholder": hasValue ? void 0 : "",
+			role: "button",
+			"aria-haspopup": "listbox",
+			tabIndex: disabled ? -1 : 0,
+			"aria-disabled": disabled || void 0,
+			onKeyDown: (event) => {
+				if (disabled) return;
+				if (event.target !== event.currentTarget) return;
+				if (event.key !== "Enter" && event.key !== " ") return;
+				event.preventDefault();
+				event.currentTarget.click();
+			},
+			className: cn("group flex w-fit items-center gap-1.5 rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md,0.375rem),10px)] data-[size=xs]:h-6 data-[size=xs]:gap-1 data-[size=xs]:rounded-[min(var(--radius-md,0.375rem),8px)] data-[size=xs]:pr-1.5 data-[size=xs]:pl-2 data-[size=xs]:text-xs dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer", className),
+			"aria-invalid": props["aria-invalid"],
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "min-w-0 flex-1 truncate text-left",
+					children: hasValue ? /* @__PURE__ */ jsxs(Fragment, { children: [inlineLabel && /* @__PURE__ */ jsxs("span", {
+						className: "text-muted-foreground",
+						children: [inlineLabel, ": "]
+					}), valueLabel] }) : placeholder
+				}),
+				hasValue && !disabled && /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "ghost",
+					size: "xs",
+					iconOnly: true,
+					"aria-label": "Clear selection",
+					onClick: (event) => {
+						event.stopPropagation();
+						clear();
+					},
+					className: "shrink-0 text-muted-foreground",
+					children: /* @__PURE__ */ jsx(XIcon, { className: "pointer-events-none" })
+				}),
+				/* @__PURE__ */ jsx("span", {
+					role: "status",
+					className: "sr-only",
+					children: hasValue ? `${value.length} selected` : "None selected"
+				}),
+				/* @__PURE__ */ jsx(ChevronDownIcon, {
+					"aria-hidden": "true",
+					className: "size-4 shrink-0 text-muted-foreground transition-transform group-data-[state=open]:rotate-180"
+				})
+			]
+		})
+	});
+}
+function SelectMultipleContent({ className, align = "start", sideOffset = 4, children, style, ...props }) {
+	const { size, contentRef, triggerWidthOnOpen } = useSelectMultipleContext("SelectMultipleContent");
+	const childArray = React.Children.toArray(children);
+	const isFooter = (child) => React.isValidElement(child) && child.type === SelectMultipleFooter;
+	const footer = childArray.filter(isFooter);
+	const items = childArray.filter((child) => !isFooter(child));
+	return /* @__PURE__ */ jsx(Popover.Portal, {
+		container: getPortalContainer(),
+		forceMount: true,
+		children: /* @__PURE__ */ jsxs(Popover.Content, {
+			ref: contentRef,
+			"data-slot": "select-multiple-content",
+			"data-size": size,
+			forceMount: true,
+			align,
+			sideOffset,
+			className: cn("z-50 max-h-(--radix-popover-content-available-height) max-w-[min(400px,var(--radix-popover-content-available-width))] min-w-[max(240px,var(--trigger-width-on-open,0px))] origin-(--radix-popover-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-popover ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[size=xs]:p-0.5 data-[state=closed]:hidden data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95", className),
+			style: {
+				...triggerWidthOnOpen !== void 0 && { "--trigger-width-on-open": `${triggerWidthOnOpen}px` },
+				...style
+			},
+			...props,
+			children: [/* @__PURE__ */ jsx("div", {
+				role: "listbox",
+				"aria-multiselectable": "true",
+				className: "contents",
+				onKeyDown: (event) => {
+					if (![
+						"ArrowDown",
+						"ArrowUp",
+						"Home",
+						"End"
+					].includes(event.key)) return;
+					const options = Array.from(event.currentTarget.querySelectorAll("[role=\"option\"]:not([data-disabled])"));
+					if (options.length === 0) return;
+					const currentIndex = options.indexOf(document.activeElement);
+					event.preventDefault();
+					options[event.key === "Home" ? 0 : event.key === "End" ? options.length - 1 : event.key === "ArrowDown" ? currentIndex < 0 ? 0 : (currentIndex + 1) % options.length : currentIndex < 0 ? options.length - 1 : (currentIndex - 1 + options.length) % options.length]?.focus();
+				},
+				children: items
+			}), footer]
+		})
+	});
+}
+/**
+* Optional Cancel/Apply footer for `SelectMultipleContent` — pass a
+* controlled `open` to `SelectMultiple` itself (see its own comment) and
+* feed it a local pending draft instead of the real `value`/`onValueChange`
+* while open, so picks only land for real once Apply commits that draft;
+* Cancel just closes, discarding it. Renders as a sibling of the listbox,
+* never inside it — see `SelectMultipleContent`'s own comment for why.
+*/
+function SelectMultipleFooter({ className, ...props }) {
+	const { size } = useSelectMultipleContext("SelectMultipleFooter");
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "select-multiple-footer",
+		className: cn("mt-1 flex items-center justify-end gap-1 border-t border-border pt-1.5", size === "xs" ? "-mx-0.5 w-[calc(100%+--spacing(1))] px-0.5" : "-mx-1 w-[calc(100%+--spacing(2))] px-1", className),
+		...props
+	});
+}
+function SelectMultipleGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "select-multiple-group",
+		role: "group",
+		className: cn("scroll-my-1 p-1", className),
+		...props
+	});
+}
+function SelectMultipleLabel({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "select-multiple-label",
+		className: cn("px-1.5 py-1 text-xs text-muted-foreground", className),
+		...props
+	});
+}
+function SelectMultipleItem({ className, children, value: itemValue, textValue, disabled, onClick, onKeyDown, ...props }) {
+	const { value, onItemSelect, registerLabel, unregisterLabel, size, closeOnSelect } = useSelectMultipleContext("SelectMultipleItem");
+	const checked = value.includes(itemValue);
+	React.useEffect(() => {
+		registerLabel(itemValue, textValue ?? (typeof children === "string" ? children : itemValue));
+		return () => unregisterLabel(itemValue);
+	}, [
+		itemValue,
+		textValue,
+		children,
+		registerLabel,
+		unregisterLabel
+	]);
+	const select = () => {
+		if (disabled) return;
+		onItemSelect(itemValue);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "select-multiple-item",
+		role: "option",
+		"aria-selected": checked,
+		"aria-disabled": disabled,
+		"data-disabled": disabled ? "" : void 0,
+		"data-size": size,
+		tabIndex: disabled ? -1 : 0,
+		className: cn("relative flex w-full cursor-default items-center gap-2 rounded-md py-1.5 pr-1.5 pl-1.5 text-sm outline-hidden select-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[size=sm]:py-1 data-[size=xs]:gap-1.5 data-[size=xs]:py-0.5 data-[size=xs]:text-xs data-disabled:pointer-events-none data-disabled:opacity-50", className),
+		onClick: (e) => {
+			onClick?.(e);
+			select();
+		},
+		onKeyDown: (e) => {
+			onKeyDown?.(e);
+			if (e.key === "Enter" || e.key === " ") {
+				e.preventDefault();
+				select();
+			}
+		},
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			"data-slot": "select-multiple-item-checkbox",
+			className: cn("relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input transition-colors", closeOnSelect && "rounded-full", checked && (closeOnSelect ? "border-primary" : "border-primary bg-primary text-primary-foreground"), disabled && "opacity-50"),
+			children: checked && (closeOnSelect ? /* @__PURE__ */ jsx("span", { className: "size-2 rounded-full bg-primary" }) : /* @__PURE__ */ jsx(CheckIcon, { className: "size-3.5" }))
+		}), /* @__PURE__ */ jsx("span", {
+			className: "inline-flex min-w-0 flex-1 items-center gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+			children: typeof children === "string" ? /* @__PURE__ */ jsx("span", {
+				className: "min-w-0 flex-1 truncate",
+				children
+			}) : children
+		})]
+	});
+}
+function SelectMultipleSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "select-multiple-separator",
+		className: cn("pointer-events-none -mx-1 my-1 h-px bg-border", className),
+		...props
+	});
+}
+/**
+* WHEN TO USE
+* - Picking one value from a short, known, bounded list (settings, filters, form fields).
+* - Options need grouping (SelectGroup + SelectLabel) or per-item disabling.
+*
+* NOT WHEN
+* - The list is long enough to need type-to-filter — use Combobox instead.
+* - Multiple values from a list that also needs search/filter — use Combobox's multi-select mode.
+* - Native OS picker behavior (better on mobile, zero extra JS) is preferable — use NativeSelect instead.
+*
+* KEY RULES
+* - SelectTrigger's `size` is "default" | "sm" | "xs" (default "default"); controls trigger
+*   height (h-8/h-7/h-6) and text size — same default/sm/xs vocabulary as Button/Item/
+*   Attachment/Tabs, not Select-specific naming.
+* - SelectContent portals its content; `position="item-aligned"` (default) aligns to the trigger like a native select, `position="popper"` behaves like a standard popover.
+* - Every SelectItem needs a `value`; the check indicator renders automatically for the selected item.
+* - Put SelectSeparator between SelectGroups, not inside one.
+* - SelectValue with no `children` auto-fills from the selected Item's own text — that's the
+*   normal, no-`inlineLabel` usage below. For "Label: Value" (e.g. "Assignee: James"), give
+*   SelectValue both `inlineLabel` and the current value's display text as `children` yourself —
+*   the auto-fill only runs with zero children, so a label prefix can't attach to it in place.
+* - An AI-filled value is a plain composition, not a dedicated prop, and the same shape as
+*   Input's and Textarea's: put `AILabel` in the label row as a sibling of FieldLabel — never
+*   beside or inside SelectTrigger, which is itself a `<button>` (a button inside a button is
+*   invalid HTML, and would also open the listbox on every click of the marker) — while the
+*   value still matches what AI picked. Pass AILabel `edited={value !== aiValue}` and an
+*   `onRevert` that restores it, so picking a different value turns the marker into a ghost undo
+*   button (AILabel's own override/undo morph, same as Input/Textarea/Checkbox/RadioGroup). See
+*   Forms/Select.
+*
+* USAGE
+* <Select>
+*   <SelectTrigger className="w-56">
+*     <SelectValue placeholder="Select a spice" />
+*   </SelectTrigger>
+*   <SelectContent>
+*     <SelectItem value="turmeric">Turmeric</SelectItem>
+*     <SelectItem value="cardamom">Cardamom</SelectItem>
+*   </SelectContent>
+* </Select>
+*
+* // Inline-labeled trigger — "Spice: Turmeric" once a value is picked, plain
+* // placeholder ("Select a spice") while nothing is
+* <Select value={value} onValueChange={setValue}>
+*   <SelectTrigger className="w-56">
+*     <SelectValue placeholder="Select a spice" inlineLabel="Spice">
+*       {value || undefined}
+*     </SelectValue>
+*   </SelectTrigger>
+*   <SelectContent>
+*     <SelectItem value="turmeric">Turmeric</SelectItem>
+*     <SelectItem value="cardamom">Cardamom</SelectItem>
+*   </SelectContent>
+* </Select>
+*
+* // Grouped, with a disabled item
+* <Select defaultValue="cumin">
+*   <SelectTrigger className="w-56"><SelectValue placeholder="Select a spice" /></SelectTrigger>
+*   <SelectContent>
+*     <SelectGroup>
+*       <SelectLabel>Whole</SelectLabel>
+*       <SelectItem value="cardamom">Cardamom pod</SelectItem>
+*     </SelectGroup>
+*     <SelectSeparator />
+*     <SelectGroup>
+*       <SelectLabel>Ground</SelectLabel>
+*       <SelectItem value="turmeric">Turmeric</SelectItem>
+*       <SelectItem value="saffron" disabled>Saffron (out of stock)</SelectItem>
+*     </SelectGroup>
+*   </SelectContent>
+* </Select>
+*
+* ---
+*
+* SelectMultiple — checkbox-list multi-select, no search/filter (see the
+* doc block above SelectMultiple's definition for why this is a separate
+* component tree rather than a `multiple` prop on Select).
+*
+* WHEN TO USE (SelectMultiple)
+* - Picking several values from a short, known, bounded list where a search box
+*   would be overkill — settings toggles, tag pickers, filter panels.
+*
+* NOT WHEN (SelectMultiple)
+* - The list is long enough to need type-to-filter — use Combobox's `multiple` mode instead.
+*
+* KEY RULES (SelectMultiple)
+* - `value`/`onValueChange` are required and always an array — there is no uncontrolled mode.
+* - `size` ("default" | "sm" | "xs", default "default") is set ONCE on SelectMultiple itself,
+*   not on Trigger or Content — it flows to both via context (Content is portaled, so it's
+*   never a CSS descendant of Trigger; a `group-data-[size]` selector couldn't reach it, which
+*   is why this is context-driven instead of the group/data-attribute trick Select/Tabs use).
+*   Trigger height/text and Content/Item padding/text/gap all scale together from this one prop.
+* - The trigger shows only the first selected item's label (auto-collected from mounted
+*   SelectMultipleItems; pass `textValue` on an item if its children aren't plain text — e.g.
+*   an item with a leading icon or a secondary description line) plus "+N" once more than one
+*   is selected — never every label listed by name. Falls back to `placeholder` when empty,
+*   plus a clear-all "x" once non-empty. Pass `maxLabelChars` on SelectMultipleTrigger to
+*   ellipsis-truncate that one label past a character cap — applies even with a single value
+*   selected, since one long label can blow out a `w-fit` trigger same as a long list would
+*   (e.g. a narrow toolbar filter trigger). Pass
+*   `inlineLabel` to prefix the non-empty value with "{inlineLabel}: " (e.g. "Assignee: James") —
+*   `placeholder` alone still covers the empty state, no prefix there.
+* - Clicking a SelectMultipleItem toggles it and leaves the popover open — this is the whole
+*   point of the variant; it never auto-closes on select the way Select/Combobox do. Pass
+*   `closeOnSelect` on SelectMultiple to close after any pick instead — for a single-effective-
+*   choice usage (cap `value` at one entry yourself) that still wants this component's non-modal
+*   Popover behavior (label stays visible while open, rest of the page stays interactive/
+*   scrollable) instead of Select's modal one. Don't reach for this as a general Select
+*   replacement — Select's native form participation, typeahead, and modality are worth keeping
+*   for ordinary form fields; this is for the specific case where a filter/action control needs
+*   to coexist non-modally with other controls the user is actively using (see DataTable's
+*   `singleSelect` inline filter for a real example). Also swaps every SelectMultipleItem's
+*   decorative indicator from a checkbox square to a radio dot — a checkbox otherwise visually
+*   promises "pick as many as you want", which is exactly wrong once picking one closes it.
+* - SelectMultipleGroup/SelectMultipleLabel/SelectMultipleSeparator mirror Select's grouping API.
+* - SelectMultiple forwards Radix Popover.Root's own props (`open`/`onOpenChange`/`defaultOpen`
+*   etc.) — useful for the Apply/Cancel pattern below, where something other than a plain click
+*   needs to control when the popover closes.
+* - SelectMultipleContent/Portal use `forceMount` and hide via `data-[state=closed]:hidden` (a plain
+*   `display:none`) instead of letting Radix unmount on close — items must stay mounted while
+*   closed so their labels are already registered for the trigger's very first render, before
+*   the popover has ever been opened. `hidden` (not `invisible`) matters here specifically:
+*   `visibility:hidden` on the inner Content still lets Radix's outer popper-position wrapper
+*   div keep its layout box, which then silently intercepts clicks meant for elements behind
+*   it; `display:none` collapses that wrapper to nothing.
+*
+* USAGE
+* const [value, setValue] = React.useState<string[]>(["cardamom"])
+* <SelectMultiple value={value} onValueChange={setValue}>
+*   <SelectMultipleTrigger className="w-56" placeholder="Select spices" />
+*   <SelectMultipleContent>
+*     <SelectMultipleItem value="turmeric">Turmeric</SelectMultipleItem>
+*     <SelectMultipleItem value="cardamom">Cardamom</SelectMultipleItem>
+*     <SelectMultipleItem value="chili">Chili</SelectMultipleItem>
+*   </SelectMultipleContent>
+* </SelectMultiple>
+*
+* // Dense popover — one prop scales trigger height AND item padding/text together
+* <SelectMultiple value={value} onValueChange={setValue} size="xs">
+*   <SelectMultipleTrigger className="w-48" placeholder="Select spices" />
+*   <SelectMultipleContent>...</SelectMultipleContent>
+* </SelectMultiple>
+*
+* // With an icon or a secondary description line — SelectMultipleItem's children is any
+* // ReactNode; pass `textValue` so the trigger's comma-list still shows plain text
+* <SelectMultipleItem value="cardamom" textValue="Cardamom">
+*   <LeafIcon />
+*   <span className="flex flex-col">
+*     Cardamom
+*     <span className="text-xs text-muted-foreground">Whole pods</span>
+*   </span>
+* </SelectMultipleItem>
+*
+* // With search — filter by hiding non-matches, NOT by unmounting them: an unmounted
+* // SelectMultipleItem unregisters its label, so a selected-but-filtered-out item would
+* // fall back to showing its raw value in the trigger instead of its real label.
+* const [query, setQuery] = React.useState("")
+* <SelectMultipleContent>
+*   <Input value={query} onChange={(e) => setQuery(e.target.value)} placeholder="Search..." className="mb-1" />
+*   {spices.map((spice) => (
+*     <SelectMultipleItem
+*       key={spice}
+*       value={spice}
+*       className={cn(!spice.toLowerCase().includes(query.toLowerCase()) && "hidden")}
+*     >
+*       {spice}
+*     </SelectMultipleItem>
+*   ))}
+* </SelectMultipleContent>
+*
+* // "Add option" (creatable) — the consumer already owns the list of items being mapped
+* // over, so a no-results affordance is just appending to that list, same as any
+* // Combobox-style creatable pattern; SelectMultiple needs no API for this.
+* {query && !spices.some((s) => s.toLowerCase() === query.toLowerCase()) && (
+*   <button onClick={() => { setSpices((prev) => [...prev, query]); setValue((prev) => [...prev, query]) }}>
+*     Add "{query}"
+*   </button>
+* )}
+*
+* // With a footer (Cancel | Apply) — stage picks in a local draft, only commit on Apply;
+* // Cancel just closes without touching the real value. Uses the forwarded `open` prop.
+* const [open, setOpen] = React.useState(false)
+* const [applied, setApplied] = React.useState<string[]>([])
+* const [draft, setDraft] = React.useState<string[]>(applied)
+* <SelectMultiple
+*   value={draft}
+*   onValueChange={setDraft}
+*   open={open}
+*   onOpenChange={(next) => { if (next) setDraft(applied); setOpen(next) }}
+* >
+*   <SelectMultipleTrigger className="w-56" placeholder="Select spices" />
+*   <SelectMultipleContent>
+*     {spices.map((spice) => <SelectMultipleItem key={spice} value={spice}>{spice}</SelectMultipleItem>)}
+*     <SelectMultipleSeparator />
+*     <div className="flex justify-end gap-1 p-1">
+*       <Button size="sm" variant="ghost" onClick={() => { setDraft(applied); setOpen(false) }}>Cancel</Button>
+*       <Button size="sm" onClick={() => { setApplied(draft); setOpen(false) }}>Apply</Button>
+*     </div>
+*   </SelectMultipleContent>
+* </SelectMultiple>
+*
+* // "Select all" — a plain composition using the same Checkbox, no dedicated API:
+* <Checkbox
+*   checked={value.length === 0 ? false : value.length === allValues.length ? true : "indeterminate"}
+*   onCheckedChange={(c) => setValue(c ? allValues : [])}
+* />
+*/
+//#endregion
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectMultiple, SelectMultipleContent, SelectMultipleFooter, SelectMultipleGroup, SelectMultipleItem, SelectMultipleLabel, SelectMultipleSeparator, SelectMultipleTrigger, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue };
+
+//# sourceMappingURL=select.js.map