@blankjs/react 0.1.0

package/dist/index.mjs

@@ -0,0 +1,1732 @@
+import { FieldContext, useCollection, useControllableState, useFieldContext, useFieldControlProps, useFieldControlProps as useFieldControlProps$1, useFieldRoot } from "@blankjs/core";
+import { Children, cloneElement, createContext, isValidElement, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { autoUpdate, flip, offset, shift, size, useFloating } from "@floating-ui/react";
+import { createPortal } from "react-dom";
+//#region src/slot/merge-props.ts
+const mergeProps = (slotProps, childProps) => {
+	const merged = {
+		...slotProps,
+		...childProps
+	};
+	for (const key in childProps) {
+		const slotValue = slotProps[key];
+		const childValue = childProps[key];
+		if (childValue === void 0) {
+			merged[key] = slotValue;
+			continue;
+		}
+		if (/^on[A-Z]/.test(key)) {
+			if (typeof slotValue === "function" && typeof childValue === "function") merged[key] = (...args) => {
+				childValue(...args);
+				slotValue(...args);
+			};
+		} else if (key === "className") merged[key] = [slotValue, childValue].filter(Boolean).join(" ");
+		else if (key === "style") merged[key] = {
+			...slotValue,
+			...childValue
+		};
+	}
+	return merged;
+};
+//#endregion
+//#region src/slot/compose-refs.ts
+const setRef = (ref, node) => {
+	if (typeof ref === "function") ref(node);
+	else if (ref) ref.current = node;
+};
+const composeRefs = (...refs) => {
+	return (node) => {
+		refs.forEach((ref) => setRef(ref, node));
+	};
+};
+//#endregion
+//#region src/slot/slot.tsx
+const Slot = ({ children, ...slotProps }) => {
+	if (!isValidElement(children)) return Children.count(children) > 1 ? Children.only(null) : null;
+	const childProps = children.props;
+	const childRef = childProps.ref;
+	const slotRef = slotProps.ref;
+	const merged = mergeProps(slotProps, childProps);
+	if (slotRef || childRef) merged.ref = composeRefs(slotRef, childRef);
+	return cloneElement(children, merged);
+};
+//#endregion
+//#region src/form/context.ts
+const FormContext = createContext(null);
+//#endregion
+//#region src/form/form.tsx
+const Form = ({ onSubmit, errors, ref, children, ...rest }) => {
+	const innerRef = useRef(null);
+	const formContextValue = useMemo(() => ({ errors }), [errors]);
+	const handleSubmit = (e) => {
+		if (!onSubmit) return;
+		e.preventDefault();
+		onSubmit(new FormData(e.currentTarget), e);
+	};
+	useEffect(() => {
+		const form = innerRef.current;
+		if (!form) return;
+		let focused = false;
+		const onInvalid = (e) => {
+			if (focused) return;
+			focused = true;
+			queueMicrotask(() => {
+				focused = false;
+			});
+			e.target?.focus?.();
+		};
+		form.addEventListener("invalid", onInvalid, true);
+		return () => form.removeEventListener("invalid", onInvalid, true);
+	}, []);
+	return /* @__PURE__ */ jsx(FormContext, {
+		value: formContextValue,
+		children: /* @__PURE__ */ jsx("form", {
+			ref: composeRefs(innerRef, ref),
+			onSubmit: handleSubmit,
+			...rest,
+			children
+		})
+	});
+};
+Form.displayName = "Form";
+//#endregion
+//#region src/form/serialize.ts
+const serialize = (data) => {
+	const result = {};
+	for (const key of new Set(data.keys())) {
+		const values = data.getAll(key);
+		result[key] = values.length > 1 ? values : values[0] ?? "";
+	}
+	return result;
+};
+//#endregion
+//#region src/field/root.tsx
+const FieldRoot = ({ children, invalid, disabled, required, validationMode, name, ref, validate, ...props }) => {
+	const formContext = useContext(FormContext);
+	const serverError = name ? formContext?.errors?.[name] : void 0;
+	const [dismissed, setDismissed] = useState(false);
+	const activeServerError = dismissed ? void 0 : serverError;
+	const { onBlurCapture, onChangeCapture, onInvalidCapture, resetValidation, validateControl, ...contextValue } = useFieldRoot({
+		invalid: invalid ?? (activeServerError ? true : void 0),
+		disabled,
+		required,
+		validationMode,
+		validate
+	});
+	const innerRef = useRef(null);
+	useEffect(() => {
+		const control = innerRef.current?.querySelector("input:not([type=hidden]), textarea, select");
+		if (control) validateControl(control);
+	}, [validateControl]);
+	useEffect(() => {
+		setDismissed(false);
+	}, [formContext?.errors]);
+	useEffect(() => {
+		const form = innerRef.current?.closest("form");
+		if (!form) return;
+		form.addEventListener("reset", resetValidation);
+		return () => form.removeEventListener("reset", resetValidation);
+	}, [resetValidation]);
+	useEffect(() => {
+		const node = innerRef.current;
+		if (!node || !onChangeCapture) return;
+		const handler = (e) => {
+			onChangeCapture(e);
+			setDismissed(true);
+		};
+		node.addEventListener("change", handler, true);
+		node.addEventListener("input", handler, true);
+		return () => {
+			node.removeEventListener("change", handler, true);
+			node.removeEventListener("input", handler, true);
+		};
+	}, [onChangeCapture]);
+	return /* @__PURE__ */ jsx(FieldContext, {
+		value: useMemo(() => ({
+			...contextValue,
+			serverError: activeServerError
+		}), [activeServerError, contextValue]),
+		children: /* @__PURE__ */ jsx("div", {
+			...props,
+			ref: composeRefs(innerRef, ref),
+			"data-invalid": contextValue.invalid ? "" : void 0,
+			"data-disabled": disabled ? "" : void 0,
+			onBlurCapture,
+			onInvalidCapture,
+			children
+		})
+	});
+};
+FieldRoot.displayName = "Field.Root";
+//#endregion
+//#region src/field/label.tsx
+const FieldLabel = ({ children, ...props }) => {
+	const { controlId, labelId, registerLabel, hasGroupControl } = useFieldContext();
+	useEffect(() => registerLabel(), [registerLabel]);
+	return /* @__PURE__ */ jsx("label", {
+		...props,
+		id: labelId,
+		htmlFor: hasGroupControl ? void 0 : controlId,
+		children
+	});
+};
+FieldLabel.displayName = "Field.Label";
+//#endregion
+//#region src/field/description.tsx
+const FieldDescription = ({ children, ...props }) => {
+	const { descriptionId, registerDescription } = useFieldContext();
+	useEffect(() => registerDescription(), [registerDescription]);
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		id: descriptionId,
+		children
+	});
+};
+FieldDescription.displayName = "Field.Description";
+//#endregion
+//#region src/field/error.tsx
+const FieldError = ({ children, match, ...props }) => {
+	const { errorId, registerError, invalid, validity, validationMessage, serverError } = useFieldContext();
+	const visible = match ? validity?.[match] === true : invalid;
+	useEffect(() => {
+		let cleanup = null;
+		if (visible) cleanup = registerError();
+		return () => cleanup?.();
+	}, [registerError, visible]);
+	if (!visible) return null;
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		id: errorId,
+		children: children ?? serverError ?? validationMessage
+	});
+};
+FieldError.displayName = "Field.Error";
+//#endregion
+//#region src/field/control.tsx
+const FieldControl = ({ children }) => {
+	return /* @__PURE__ */ jsx(Slot, {
+		...useFieldControlProps$1(),
+		children
+	});
+};
+FieldControl.displayName = "Field.Control";
+//#endregion
+//#region src/field/index.ts
+const Field = {
+	Control: FieldControl,
+	Root: FieldRoot,
+	Label: FieldLabel,
+	Description: FieldDescription,
+	Error: FieldError
+};
+//#endregion
+//#region src/text-input/text-input.tsx
+const TextInput = ({ className, size = "md", ...props }) => {
+	return /* @__PURE__ */ jsx("input", {
+		...useFieldControlProps$1(),
+		...props,
+		"data-size": size,
+		className: ["bk-input", className].filter(Boolean).join(" ")
+	});
+};
+TextInput.displayName = "TextInput";
+//#endregion
+//#region src/textarea/textarea.tsx
+const Textarea = ({ className, size = "md", ...props }) => {
+	return /* @__PURE__ */ jsx("textarea", {
+		rows: 3,
+		...useFieldControlProps$1(),
+		...props,
+		"data-size": size,
+		className: ["bk-textarea", className].filter(Boolean).join(" ")
+	});
+};
+Textarea.displayName = "Textarea";
+//#endregion
+//#region src/password-field/password-field.tsx
+const EyeIcon = ({ off }) => /* @__PURE__ */ jsxs("svg", {
+	width: "18",
+	height: "18",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	"aria-hidden": "true",
+	children: [
+		/* @__PURE__ */ jsx("path", { d: "M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z" }),
+		/* @__PURE__ */ jsx("circle", {
+			cx: "12",
+			cy: "12",
+			r: "3"
+		}),
+		off && /* @__PURE__ */ jsx("line", {
+			x1: "3",
+			y1: "3",
+			x2: "21",
+			y2: "21"
+		})
+	]
+});
+const PasswordField = ({ className, disabled, size = "md", ...rest }) => {
+	const fieldProps = useFieldControlProps$1();
+	const [visible, setVisible] = useState(false);
+	const isDisabled = disabled || fieldProps.disabled;
+	const mergedInput = ["bk-input", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsxs("div", {
+		className: "bk-password",
+		"data-size": size,
+		children: [/* @__PURE__ */ jsx("input", {
+			...rest,
+			...fieldProps,
+			type: visible ? "text" : "password",
+			disabled: isDisabled,
+			className: mergedInput
+		}), /* @__PURE__ */ jsx("button", {
+			className: "bk-password-toggle",
+			type: "button",
+			disabled: isDisabled,
+			"aria-label": visible ? "Hide password" : "Show password",
+			onClick: () => setVisible((v) => !v),
+			onMouseDown: (e) => e.preventDefault(),
+			children: /* @__PURE__ */ jsx(EyeIcon, { off: visible })
+		})]
+	});
+};
+//#endregion
+//#region src/select/context.ts
+const SelectContext = createContext(null);
+const useSelectContext = () => {
+	const context = useContext(SelectContext);
+	if (!context) throw new Error("[blankjs] Select.* must be used within Select.Root");
+	return context;
+};
+//#endregion
+//#region src/select/hidden-input.tsx
+const SelectHiddenInput = ({ name, defaultValue, required }) => {
+	const { value, setValue, disabled, triggerElement } = useSelectContext();
+	const ref = useRef(null);
+	const controlProps = useFieldControlProps$1();
+	const isRequired = required ?? controlProps.required ?? false;
+	const mountedRef = useRef(false);
+	useEffect(() => {
+		if (!mountedRef.current) {
+			mountedRef.current = true;
+			return;
+		}
+		ref.current?.dispatchEvent(new Event("change", { bubbles: true }));
+	}, [value]);
+	useEffect(() => {
+		const form = ref.current?.form;
+		if (!form) return;
+		const onReset = () => setValue(defaultValue);
+		form.addEventListener("reset", onReset);
+		return () => form.removeEventListener("reset", onReset);
+	}, [setValue, defaultValue]);
+	return /* @__PURE__ */ jsx("input", {
+		ref,
+		type: "text",
+		name,
+		value: value ?? "",
+		disabled,
+		className: "bk-select-hidden-input",
+		tabIndex: -1,
+		"aria-hidden": "true",
+		autoComplete: "off",
+		onChange: () => {},
+		required: isRequired,
+		onFocus: () => triggerElement?.focus()
+	});
+};
+SelectHiddenInput.displayName = "Select.HiddenInput";
+//#endregion
+//#region src/select/use-select-root.ts
+const useSelectRoot = (options = {}) => {
+	const [value, setValue] = useControllableState({
+		prop: options.value,
+		defaultProp: options.defaultValue,
+		onChange: options.onValueChange
+	});
+	const [open, setOpen] = useControllableState({
+		prop: options.open,
+		defaultProp: options.defaultOpen,
+		onChange: options.onOpenChange
+	});
+	const { getItems, registerItem } = useCollection();
+	const [activeItem, setActiveItem] = useState(void 0);
+	const [triggerElement, setTriggerElement] = useState(null);
+	const triggerId = useId();
+	const listboxId = useId();
+	return useMemo(() => ({
+		open: open ?? false,
+		setOpen,
+		activeItem,
+		setActiveItem,
+		value,
+		setValue,
+		triggerElement,
+		setTriggerElement,
+		listboxId,
+		triggerId,
+		getItems,
+		registerItem,
+		disabled: options.disabled ?? false,
+		size: options.size ?? "md"
+	}), [
+		activeItem,
+		getItems,
+		listboxId,
+		open,
+		options.disabled,
+		options.size,
+		registerItem,
+		setOpen,
+		setValue,
+		triggerElement,
+		triggerId,
+		value
+	]);
+};
+//#endregion
+//#region src/select/root.tsx
+const SelectRoot = ({ children, required, ...options }) => {
+	const contextValue = useSelectRoot(options);
+	return /* @__PURE__ */ jsx(SelectContext, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "bk-select-root",
+			"data-size": contextValue.size,
+			children: [children, options.name && /* @__PURE__ */ jsx(SelectHiddenInput, {
+				name: options.name,
+				defaultValue: options.defaultValue,
+				required
+			})]
+		})
+	});
+};
+SelectRoot.displayName = "Select.Root";
+//#endregion
+//#region src/internal/use-popover.ts
+const matchWidthMap = {
+	exact: "width",
+	min: "minWidth"
+};
+const usePopover = ({ anchor, onDismiss, matchWidth }) => {
+	const { refs, floatingStyles, elements } = useFloating({
+		placement: "bottom-start",
+		middleware: [
+			offset(4),
+			flip(),
+			shift({ padding: 8 }),
+			size({ apply({ elements: floatingState, rects }) {
+				Object.assign(floatingState.floating.style, { [matchWidthMap[matchWidth ?? "exact"]]: `${rects.reference.width}px` });
+			} })
+		],
+		whileElementsMounted: autoUpdate,
+		elements: { reference: anchor }
+	});
+	const { setFloating } = refs;
+	useEffect(() => {
+		const onKeyDown = (e) => {
+			if (e.key !== "Escape" || e.defaultPrevented) return;
+			e.preventDefault();
+			onDismiss("escape");
+		};
+		document.addEventListener("keydown", onKeyDown);
+		return () => document.removeEventListener("keydown", onKeyDown);
+	}, [onDismiss]);
+	useEffect(() => {
+		const onPointerDown = (e) => {
+			const target = e.target;
+			if (elements.floating?.contains(target)) return;
+			if (anchor?.contains(target)) return;
+			onDismiss("outside-press");
+		};
+		document.addEventListener("pointerdown", onPointerDown);
+		return () => document.removeEventListener("pointerdown", onPointerDown);
+	}, [
+		anchor,
+		elements.floating,
+		onDismiss
+	]);
+	return {
+		setFloating,
+		floatingStyles
+	};
+};
+//#endregion
+//#region src/internal/use-initial-active-item.ts
+const useInitialActiveItem = ({ getItems, setActiveItem, isSelected }) => {
+	const [mounted, setMounted] = useState(false);
+	useEffect(() => setMounted(true), []);
+	useEffect(() => {
+		if (!mounted) return;
+		const items = getItems();
+		setActiveItem(items.find(isSelected) ?? items[0]);
+		return () => setActiveItem(void 0);
+	}, [mounted]);
+	return mounted;
+};
+//#endregion
+//#region src/internal/use-listbox-keyboard.ts
+const useListboxKeyboard = ({ open, setOpen, getItems, activeItem, setActiveItem, onCommit }) => {
+	const searchRef = useRef("");
+	const timerRef = useRef(null);
+	const onKeyDown = (e) => {
+		const key = e.key;
+		if (!open) {
+			switch (key) {
+				case "ArrowDown":
+				case "ArrowUp":
+				case "Enter":
+				case " ":
+					e.preventDefault();
+					setOpen(true);
+					break;
+				default: break;
+			}
+			return;
+		}
+		const items = getItems();
+		const index = items.findIndex((item) => item.value === activeItem?.value);
+		const isPrintable = key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey;
+		const isSpaceSelect = key === " " && searchRef.current === "";
+		if (isPrintable && !isSpaceSelect) {
+			e.preventDefault();
+			searchRef.current += key;
+			if (timerRef.current) clearTimeout(timerRef.current);
+			timerRef.current = setTimeout(() => {
+				searchRef.current = "";
+			}, 500);
+			const query = searchRef.current.toLowerCase();
+			for (let offset = 1; offset <= items.length; offset++) {
+				const item = items[(index + offset) % items.length];
+				if (item && item.label.toLowerCase().startsWith(query)) {
+					setActiveItem(item);
+					break;
+				}
+			}
+			return;
+		}
+		switch (key) {
+			case "ArrowDown": {
+				e.preventDefault();
+				const next = items[Math.min(index + 1, items.length - 1)];
+				if (next) setActiveItem(next);
+				break;
+			}
+			case "ArrowUp": {
+				e.preventDefault();
+				const prev = items[Math.max(index - 1, 0)];
+				if (prev) setActiveItem(prev);
+				break;
+			}
+			case "Enter":
+			case " ":
+				e.preventDefault();
+				if (activeItem && searchRef.current === "") onCommit(activeItem);
+				break;
+			case "Tab":
+				setOpen(false);
+				break;
+			case "Home":
+				e.preventDefault();
+				setActiveItem(items[0]);
+				break;
+			case "End":
+				e.preventDefault();
+				setActiveItem(items[items.length - 1]);
+				break;
+			default: break;
+		}
+	};
+	return onKeyDown;
+};
+//#endregion
+//#region src/select/trigger.tsx
+const SelectArrow = () => /* @__PURE__ */ jsx("svg", {
+	className: "bk-select-arrow",
+	width: "16",
+	height: "16",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	"aria-hidden": "true",
+	children: /* @__PURE__ */ jsx("path", { d: "M6 9l6 6 6-6" })
+});
+const SelectTrigger = ({ asChild, children, className, ...props }) => {
+	const { required: _, ...fieldProps } = useFieldControlProps$1();
+	const { open, setOpen, triggerId, listboxId, disabled, activeItem, setTriggerElement, getItems, setActiveItem, setValue } = useSelectContext();
+	const isDisabled = fieldProps.disabled || disabled;
+	const id = fieldProps.id ?? triggerId;
+	const activeDescendant = open ? activeItem?.id : void 0;
+	const onListboxKeyDown = useListboxKeyboard({
+		activeItem,
+		setActiveItem,
+		getItems,
+		open,
+		setOpen,
+		onCommit: (item) => {
+			setValue(item.value);
+			setOpen(false);
+		}
+	});
+	const triggerProps = {
+		type: "button",
+		...props,
+		...fieldProps,
+		className: ["bk-select-trigger", className].filter(Boolean).join(" "),
+		id,
+		role: "combobox",
+		"aria-disabled": isDisabled || void 0,
+		"aria-haspopup": "listbox",
+		"aria-expanded": open,
+		"aria-controls": open ? listboxId : void 0,
+		"aria-activedescendant": activeDescendant,
+		disabled: isDisabled,
+		onKeyDown: (e) => {
+			if (isDisabled) return;
+			props.onKeyDown?.(e);
+			onListboxKeyDown(e);
+		},
+		onClick: (e) => {
+			if (isDisabled) return;
+			props.onClick?.(e);
+			setOpen((o) => !o);
+		}
+	};
+	if (asChild) return /* @__PURE__ */ jsx(Slot, {
+		...triggerProps,
+		ref: composeRefs(setTriggerElement, props.ref),
+		children
+	});
+	return /* @__PURE__ */ jsxs("button", {
+		...triggerProps,
+		ref: composeRefs(setTriggerElement, props.ref),
+		children: [children, /* @__PURE__ */ jsx(SelectArrow, {})]
+	});
+};
+SelectTrigger.displayName = "Select.Trigger";
+//#endregion
+//#region src/select/content.tsx
+const SelectContentInner = ({ children, style, className, container, ...props }) => {
+	const { triggerElement, listboxId, setOpen, getItems, value, setActiveItem, size } = useSelectContext();
+	const { setFloating, floatingStyles } = usePopover({
+		anchor: triggerElement,
+		onDismiss: useCallback(() => setOpen(false), [setOpen]),
+		matchWidth: "exact"
+	});
+	if (!useInitialActiveItem({
+		getItems,
+		setActiveItem,
+		isSelected: (item) => item.value === value
+	})) return null;
+	const target = container ?? document.body;
+	return createPortal(/* @__PURE__ */ jsx("div", {
+		...props,
+		ref: setFloating,
+		style: {
+			...style,
+			...floatingStyles
+		},
+		className: ["bk-select-content", className].filter(Boolean).join(" "),
+		role: "listbox",
+		id: listboxId,
+		"data-size": size,
+		children
+	}), target);
+};
+const SelectContent = ({ children, ...props }) => {
+	const { open } = useSelectContext();
+	if (!open) return null;
+	return /* @__PURE__ */ jsx(SelectContentInner, {
+		...props,
+		children
+	});
+};
+SelectContent.displayName = "Select.Content";
+//#endregion
+//#region src/select/item.tsx
+const SelectCheck = () => /* @__PURE__ */ jsx("svg", {
+	className: "bk-select-check",
+	width: "16",
+	height: "16",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	"aria-hidden": "true",
+	children: /* @__PURE__ */ jsx("path", { d: "M20 6L9 17l-5-5" })
+});
+const SelectItem = ({ value, textValue, children, className, ...props }) => {
+	const ref = useRef(null);
+	const optionId = useId();
+	const { value: selectedValue, activeItem, setValue, setOpen, registerItem, setActiveItem } = useSelectContext();
+	const isSelected = value === selectedValue;
+	const isActive = value === activeItem?.value;
+	useEffect(() => {
+		const node = ref.current;
+		if (!node) return;
+		const unregister = registerItem({
+			node,
+			value,
+			label: textValue ?? node.textContent ?? "",
+			id: optionId
+		});
+		return () => {
+			unregister();
+			setActiveItem((prev) => prev?.value === value ? void 0 : prev);
+		};
+	}, [
+		registerItem,
+		textValue,
+		value,
+		optionId,
+		setActiveItem
+	]);
+	useEffect(() => {
+		if (isActive) ref.current?.scrollIntoView({ block: "nearest" });
+	}, [isActive]);
+	return /* @__PURE__ */ jsxs("div", {
+		...props,
+		ref,
+		className: ["bk-select-item", className].filter(Boolean).join(" "),
+		role: "option",
+		id: optionId,
+		"aria-selected": isSelected,
+		"data-active": isActive ? "" : void 0,
+		onClick: (e) => {
+			props.onClick?.(e);
+			if (e.defaultPrevented) return;
+			setValue(value);
+			setOpen(false);
+		},
+		children: [children, /* @__PURE__ */ jsx(SelectCheck, {})]
+	});
+};
+SelectItem.displayName = "Select.Item";
+//#endregion
+//#region src/select/value.tsx
+const SelectValue = ({ placeholder, children }) => {
+	const { value } = useSelectContext();
+	const getValue = () => {
+		if (value === void 0) return placeholder;
+		if (children) return children(value);
+		return value;
+	};
+	return /* @__PURE__ */ jsx("span", {
+		className: "bk-select-value",
+		"data-placeholder": value === void 0 ? "" : void 0,
+		children: getValue()
+	});
+};
+SelectValue.displayName = "Select.Value";
+//#endregion
+//#region src/select/clear.tsx
+const SelectClearIcon = () => /* @__PURE__ */ jsx("svg", {
+	width: "14",
+	height: "14",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	"aria-hidden": "true",
+	children: /* @__PURE__ */ jsx("path", { d: "M18 6L6 18M6 6l12 12" })
+});
+const SelectClear = ({ className, children, onClick, ...props }) => {
+	const { value, setValue, disabled, triggerElement } = useSelectContext();
+	if (!value || disabled) return null;
+	const handleClick = (e) => {
+		onClick?.(e);
+		if (e.defaultPrevented) return;
+		setValue(void 0);
+		triggerElement?.focus();
+	};
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"aria-label": "Clear",
+		className: ["bk-select-clear", className].filter(Boolean).join(" "),
+		onClick: handleClick,
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(SelectClearIcon, {})
+	});
+};
+SelectClear.displayName = "Select.Clear";
+//#endregion
+//#region src/select/index.ts
+const Select = {
+	Root: SelectRoot,
+	Trigger: SelectTrigger,
+	Content: SelectContent,
+	Item: SelectItem,
+	Value: SelectValue,
+	Clear: SelectClear
+};
+//#endregion
+//#region src/button/button.tsx
+const Button = ({ children, className, asChild, variant = "solid", size = "md", ...props }) => {
+	const buttonProps = {
+		type: "button",
+		...props,
+		className: ["bk-button", className].filter(Boolean).join(" "),
+		"data-variant": variant,
+		"data-size": size
+	};
+	if (asChild) return /* @__PURE__ */ jsx(Slot, {
+		...buttonProps,
+		children
+	});
+	return /* @__PURE__ */ jsx("button", {
+		...buttonProps,
+		children
+	});
+};
+//#endregion
+//#region src/checkbox/checkbox.tsx
+const Checkbox = ({ checked, defaultChecked, onCheckedChange, indeterminate, onChange, disabled, className, size = "md", ...props }) => {
+	const fieldProps = useFieldControlProps$1();
+	const [value, setValue] = useControllableState({
+		prop: checked,
+		defaultProp: defaultChecked,
+		onChange: onCheckedChange
+	});
+	const ref = useRef(null);
+	useEffect(() => {
+		const form = ref.current?.form;
+		if (!form) return;
+		const onReset = () => setValue(defaultChecked ?? false);
+		form.addEventListener("reset", onReset);
+		return () => form.removeEventListener("reset", onReset);
+	}, [setValue, defaultChecked]);
+	useEffect(() => {
+		if (ref.current) ref.current.indeterminate = indeterminate ?? false;
+	}, [indeterminate, value]);
+	const isDisabled = disabled ?? fieldProps.disabled;
+	const handleChange = (e) => {
+		onChange?.(e);
+		if (e.defaultPrevented) return;
+		setValue(e.target.checked);
+	};
+	return /* @__PURE__ */ jsx("input", {
+		...fieldProps,
+		...props,
+		checked: value ?? false,
+		onChange: handleChange,
+		ref: composeRefs(ref, props.ref),
+		disabled: isDisabled,
+		"data-size": size,
+		className: ["bk-checkbox", className].filter(Boolean).join(" "),
+		type: "checkbox"
+	});
+};
+//#endregion
+//#region src/switch/switch.tsx
+const Switch = ({ checked, defaultChecked, onCheckedChange, disabled, className, style, onChange, size = "md", ...props }) => {
+	const fieldProps = useFieldControlProps$1();
+	const [value, setValue] = useControllableState({
+		prop: checked,
+		defaultProp: defaultChecked,
+		onChange: onCheckedChange
+	});
+	const ref = useRef(null);
+	useEffect(() => {
+		const form = ref.current?.form;
+		if (!form) return;
+		const onReset = () => setValue(defaultChecked ?? false);
+		form.addEventListener("reset", onReset);
+		return () => form.removeEventListener("reset", onReset);
+	}, [setValue, defaultChecked]);
+	const isDisabled = disabled ?? fieldProps.disabled;
+	const handleChange = (e) => {
+		onChange?.(e);
+		if (e.defaultPrevented) return;
+		setValue(e.target.checked);
+	};
+	return /* @__PURE__ */ jsxs("span", {
+		className: ["bk-switch", className].filter(Boolean).join(" "),
+		style,
+		"data-size": size,
+		children: [/* @__PURE__ */ jsx("input", {
+			...fieldProps,
+			...props,
+			role: "switch",
+			checked: value ?? false,
+			onChange: handleChange,
+			ref: composeRefs(ref, props.ref),
+			disabled: isDisabled,
+			className: "bk-switch-input",
+			type: "checkbox"
+		}), /* @__PURE__ */ jsx("span", {
+			className: "bk-switch-thumb",
+			"aria-hidden": "true"
+		})]
+	});
+};
+//#endregion
+//#region src/radio/context.ts
+const RadioGroupContext = createContext(null);
+const useRadioGroupContext = () => {
+	const context = useContext(RadioGroupContext);
+	if (!context) throw new Error("[blankjs] RadioGroup.* must be used within RadioGroup.Root");
+	return context;
+};
+//#endregion
+//#region src/radio/use-radio-group-root.ts
+const useRadioGroupRoot = (options = {}) => {
+	const [value, setValue] = useControllableState({
+		prop: options.value,
+		defaultProp: options.defaultValue,
+		onChange: options.onValueChange
+	});
+	const fallbackName = useId();
+	const name = options.name ?? fallbackName;
+	return useMemo(() => ({
+		value,
+		setValue,
+		disabled: options.disabled ?? false,
+		name
+	}), [
+		name,
+		options.disabled,
+		setValue,
+		value
+	]);
+};
+//#endregion
+//#region src/radio/root.tsx
+const RadioGroupRoot = ({ children, value, defaultValue, onValueChange, disabled, name, className, size = "md", ...props }) => {
+	const { disabled: fieldDisabled, ...fieldProps } = useFieldControlProps$1();
+	const fieldContext = useContext(FieldContext);
+	const labelledBy = fieldContext?.hasLabel ? fieldContext.labelId : void 0;
+	const registerGroupControl = fieldContext?.registerGroupControl;
+	useEffect(() => registerGroupControl?.(), [registerGroupControl]);
+	const contextValue = useRadioGroupRoot({
+		value,
+		defaultValue,
+		onValueChange,
+		disabled: disabled ?? fieldDisabled,
+		name
+	});
+	const { setValue } = contextValue;
+	const ref = useRef(null);
+	useEffect(() => {
+		const form = ref.current?.closest("form");
+		if (!form) return;
+		const onReset = () => setValue(defaultValue);
+		form.addEventListener("reset", onReset);
+		return () => form.removeEventListener("reset", onReset);
+	}, [setValue, defaultValue]);
+	return /* @__PURE__ */ jsx(RadioGroupContext, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx("div", {
+			...fieldProps,
+			...props,
+			ref: composeRefs(ref, props.ref),
+			role: "radiogroup",
+			"data-size": size,
+			"aria-labelledby": props["aria-labelledby"] ?? labelledBy,
+			className: ["bk-radio-group", className].filter(Boolean).join(" "),
+			children
+		})
+	});
+};
+RadioGroupRoot.displayName = "RadioGroup.Root";
+//#endregion
+//#region src/radio/item.tsx
+const RadioGroupItem = ({ className, style, onChange, children, ...props }) => {
+	const { name, setValue, value: contextValue, disabled } = useRadioGroupContext();
+	const isDisabled = props.disabled ?? disabled;
+	const handleChange = (e) => {
+		onChange?.(e);
+		if (e.defaultPrevented) return;
+		setValue(e.target.value);
+	};
+	const input = /* @__PURE__ */ jsx("input", {
+		...props,
+		checked: contextValue === props.value,
+		onChange: handleChange,
+		disabled: isDisabled,
+		type: "radio",
+		name,
+		className: children ? "bk-radio-item" : ["bk-radio-item", className].filter(Boolean).join(" "),
+		style: children ? void 0 : style
+	});
+	if (!children) return input;
+	return /* @__PURE__ */ jsxs("label", {
+		className: ["bk-radio-label", className].filter(Boolean).join(" "),
+		style,
+		children: [input, children]
+	});
+};
+RadioGroupItem.displayName = "RadioGroup.Item";
+//#endregion
+//#region src/radio/index.ts
+const RadioGroup = {
+	Root: RadioGroupRoot,
+	Item: RadioGroupItem
+};
+//#endregion
+//#region src/multi-select/use-multi-select-root.ts
+const useMultiSelectRoot = (options = {}) => {
+	const [value, setValue] = useControllableState({
+		prop: options.value,
+		defaultProp: options.defaultValue ?? [],
+		onChange: options.onValueChange
+	});
+	const [open, setOpen] = useControllableState({
+		prop: options.open,
+		defaultProp: options.defaultOpen,
+		onChange: options.onOpenChange
+	});
+	const { getItems, registerItem } = useCollection();
+	const [activeItem, setActiveItem] = useState(void 0);
+	const [triggerElement, setTriggerElement] = useState(null);
+	const triggerId = useId();
+	const listboxId = useId();
+	const toggleValue = useCallback((v) => setValue((prev = []) => prev.includes(v) ? prev.filter((x) => x !== v) : [...prev, v]), [setValue]);
+	return useMemo(() => ({
+		open: open ?? false,
+		setOpen,
+		activeItem,
+		setActiveItem,
+		value: value ?? [],
+		setValue,
+		triggerElement,
+		setTriggerElement,
+		listboxId,
+		triggerId,
+		getItems,
+		registerItem,
+		toggleValue,
+		disabled: options.disabled ?? false,
+		size: options.size ?? "md"
+	}), [
+		activeItem,
+		getItems,
+		listboxId,
+		open,
+		options.disabled,
+		options.size,
+		registerItem,
+		setOpen,
+		setValue,
+		toggleValue,
+		triggerElement,
+		triggerId,
+		value
+	]);
+};
+//#endregion
+//#region src/multi-select/context.ts
+const MultiSelectContext = createContext(null);
+const useMultiSelectContext = () => {
+	const context = useContext(MultiSelectContext);
+	if (!context) throw new Error("[blankjs] MultiSelect.* must be used within MultiSelect.Root");
+	return context;
+};
+//#endregion
+//#region src/multi-select/hidden-input.tsx
+const MultiSelectHiddenInput = ({ name, defaultValue, required }) => {
+	const { value, setValue, disabled, triggerElement } = useMultiSelectContext();
+	const ref = useRef(null);
+	const controlProps = useFieldControlProps$1();
+	const isRequired = required ?? controlProps.required ?? false;
+	const defaultValueRef = useRef(defaultValue);
+	useEffect(() => {
+		defaultValueRef.current = defaultValue;
+	}, [defaultValue]);
+	const mountedRef = useRef(false);
+	useEffect(() => {
+		if (!mountedRef.current) {
+			mountedRef.current = true;
+			return;
+		}
+		ref.current?.dispatchEvent(new Event("change", { bubbles: true }));
+	}, [value]);
+	useEffect(() => {
+		const form = ref.current?.form;
+		if (!form) return;
+		const onReset = () => setValue(defaultValueRef.current ?? []);
+		form.addEventListener("reset", onReset);
+		return () => form.removeEventListener("reset", onReset);
+	}, [setValue]);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("input", {
+		ref,
+		type: "text",
+		value: value.join(","),
+		disabled,
+		className: "bk-multi-select-hidden-input",
+		tabIndex: -1,
+		"aria-hidden": "true",
+		autoComplete: "off",
+		onChange: () => {},
+		required: isRequired,
+		onFocus: () => triggerElement?.focus()
+	}), value.map((v) => /* @__PURE__ */ jsx("input", {
+		type: "hidden",
+		name,
+		value: v,
+		disabled,
+		readOnly: true
+	}, v))] });
+};
+MultiSelectHiddenInput.displayName = "MultiSelect.HiddenInput";
+//#endregion
+//#region src/multi-select/root.tsx
+const MultiSelectRoot = ({ children, required, ...options }) => {
+	const contextValue = useMultiSelectRoot(options);
+	return /* @__PURE__ */ jsx(MultiSelectContext, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "bk-multi-select-root",
+			"data-size": contextValue.size,
+			children: [children, options.name && /* @__PURE__ */ jsx(MultiSelectHiddenInput, {
+				name: options.name,
+				defaultValue: options.defaultValue,
+				required
+			})]
+		})
+	});
+};
+MultiSelectRoot.displayName = "MultiSelect.Root";
+//#endregion
+//#region src/multi-select/trigger.tsx
+const MultiSelectArrow = () => /* @__PURE__ */ jsx("svg", {
+	className: "bk-multi-select-arrow",
+	width: "16",
+	height: "16",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	"aria-hidden": "true",
+	children: /* @__PURE__ */ jsx("path", { d: "M6 9l6 6 6-6" })
+});
+const MultiSelectTrigger = ({ asChild, children, className, ...props }) => {
+	const { required: _required, ...fieldProps } = useFieldControlProps$1();
+	const { open, setOpen, triggerId, listboxId, disabled, activeItem, setTriggerElement, getItems, setActiveItem, toggleValue } = useMultiSelectContext();
+	const isDisabled = fieldProps.disabled || disabled;
+	const id = fieldProps.id ?? triggerId;
+	const activeDescendant = open ? activeItem?.id : void 0;
+	const onListboxKeyDown = useListboxKeyboard({
+		activeItem,
+		setActiveItem,
+		getItems,
+		open,
+		setOpen,
+		onCommit: (item) => toggleValue(item.value)
+	});
+	const triggerProps = {
+		type: "button",
+		...props,
+		...fieldProps,
+		className: ["bk-multi-select-trigger", className].filter(Boolean).join(" "),
+		id,
+		role: "combobox",
+		"aria-disabled": isDisabled || void 0,
+		"aria-haspopup": "listbox",
+		"aria-expanded": open,
+		"aria-controls": open ? listboxId : void 0,
+		"aria-activedescendant": activeDescendant,
+		disabled: isDisabled,
+		onKeyDown: (e) => {
+			if (isDisabled) return;
+			props.onKeyDown?.(e);
+			onListboxKeyDown(e);
+		},
+		onClick: (e) => {
+			if (isDisabled) return;
+			props.onClick?.(e);
+			setOpen((o) => !o);
+		}
+	};
+	if (asChild) return /* @__PURE__ */ jsx(Slot, {
+		...triggerProps,
+		ref: composeRefs(setTriggerElement, props.ref),
+		children
+	});
+	return /* @__PURE__ */ jsxs("button", {
+		...triggerProps,
+		ref: composeRefs(setTriggerElement, props.ref),
+		children: [children, /* @__PURE__ */ jsx(MultiSelectArrow, {})]
+	});
+};
+MultiSelectTrigger.displayName = "MultiSelect.Trigger";
+//#endregion
+//#region src/multi-select/content.tsx
+const MultiSelectContentInner = ({ children, style, className, container, ...props }) => {
+	const { triggerElement, listboxId, setOpen, getItems, value, setActiveItem, size } = useMultiSelectContext();
+	const { setFloating, floatingStyles } = usePopover({
+		anchor: triggerElement,
+		onDismiss: useCallback(() => setOpen(false), [setOpen])
+	});
+	if (!useInitialActiveItem({
+		getItems,
+		setActiveItem,
+		isSelected: (item) => value.includes(item.value)
+	})) return null;
+	const target = container ?? document.body;
+	return createPortal(/* @__PURE__ */ jsx("div", {
+		...props,
+		ref: setFloating,
+		style: {
+			...style,
+			...floatingStyles
+		},
+		className: ["bk-multi-select-content", className].filter(Boolean).join(" "),
+		role: "listbox",
+		"aria-multiselectable": "true",
+		id: listboxId,
+		"data-size": size,
+		children
+	}), target);
+};
+const MultiSelectContent = ({ children, ...props }) => {
+	const { open } = useMultiSelectContext();
+	if (!open) return null;
+	return /* @__PURE__ */ jsx(MultiSelectContentInner, {
+		...props,
+		children
+	});
+};
+MultiSelectContent.displayName = "MultiSelect.Content";
+//#endregion
+//#region src/multi-select/item.tsx
+const MultiSelectCheck = () => /* @__PURE__ */ jsx("svg", {
+	className: "bk-multi-select-check",
+	width: "16",
+	height: "16",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	"aria-hidden": "true",
+	children: /* @__PURE__ */ jsx("path", { d: "M20 6L9 17l-5-5" })
+});
+const MultiSelectItem = ({ value, textValue, children, className, ...props }) => {
+	const ref = useRef(null);
+	const optionId = useId();
+	const { value: selectedValue, activeItem, registerItem, setActiveItem, toggleValue } = useMultiSelectContext();
+	const isSelected = selectedValue.includes(value);
+	const isActive = value === activeItem?.value;
+	useEffect(() => {
+		const node = ref.current;
+		if (!node) return;
+		const unregister = registerItem({
+			node,
+			value,
+			label: textValue ?? node.textContent ?? "",
+			id: optionId
+		});
+		return () => {
+			unregister();
+			setActiveItem((prev) => prev?.value === value ? void 0 : prev);
+		};
+	}, [
+		registerItem,
+		textValue,
+		value,
+		optionId,
+		setActiveItem
+	]);
+	useEffect(() => {
+		if (isActive) ref.current?.scrollIntoView({ block: "nearest" });
+	}, [isActive]);
+	return /* @__PURE__ */ jsxs("div", {
+		...props,
+		ref,
+		className: ["bk-multi-select-item", className].filter(Boolean).join(" "),
+		role: "option",
+		id: optionId,
+		"aria-selected": isSelected,
+		"data-active": isActive ? "" : void 0,
+		onClick: (e) => {
+			props.onClick?.(e);
+			if (e.defaultPrevented) return;
+			toggleValue(value);
+		},
+		children: [children, /* @__PURE__ */ jsx(MultiSelectCheck, {})]
+	});
+};
+MultiSelectItem.displayName = "MultiSelect.Item";
+//#endregion
+//#region src/multi-select/value.tsx
+const MultiSelectValue = ({ placeholder, children }) => {
+	const { value } = useMultiSelectContext();
+	const isValueEmpty = value.length === 0;
+	const getValue = () => {
+		if (isValueEmpty) return placeholder;
+		if (children) return children(value);
+		return value.join(", ");
+	};
+	return /* @__PURE__ */ jsx("span", {
+		className: "bk-multi-select-value",
+		"data-placeholder": isValueEmpty ? "" : void 0,
+		children: getValue()
+	});
+};
+MultiSelectValue.displayName = "MultiSelect.Value";
+//#endregion
+//#region src/multi-select/clear.tsx
+const MultiSelectClearIcon = () => /* @__PURE__ */ jsx("svg", {
+	width: "14",
+	height: "14",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	"aria-hidden": "true",
+	children: /* @__PURE__ */ jsx("path", { d: "M18 6L6 18M6 6l12 12" })
+});
+const MultiSelectClear = ({ className, children, onClick, ...props }) => {
+	const { value, setValue, disabled, triggerElement } = useMultiSelectContext();
+	if (!value.length || disabled) return null;
+	const handleClick = (e) => {
+		onClick?.(e);
+		if (e.defaultPrevented) return;
+		setValue([]);
+		triggerElement?.focus();
+	};
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"aria-label": "Clear",
+		className: ["bk-multi-select-clear", className].filter(Boolean).join(" "),
+		onClick: handleClick,
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(MultiSelectClearIcon, {})
+	});
+};
+MultiSelectClear.displayName = "MultiSelect.Clear";
+//#endregion
+//#region src/multi-select/index.ts
+const MultiSelect = {
+	Root: MultiSelectRoot,
+	Trigger: MultiSelectTrigger,
+	Content: MultiSelectContent,
+	Item: MultiSelectItem,
+	Value: MultiSelectValue,
+	Clear: MultiSelectClear
+};
+//#endregion
+//#region src/combobox/use-combobox-root.ts
+const useComboboxRoot = (options = {}) => {
+	const [value, setValue] = useControllableState({
+		prop: options.value,
+		defaultProp: options.defaultValue,
+		onChange: options.onValueChange
+	});
+	const [open, setOpen] = useControllableState({
+		prop: options.open,
+		defaultProp: options.defaultOpen,
+		onChange: options.onOpenChange
+	});
+	const [inputValue, setInputValue] = useControllableState({
+		prop: options.inputValue,
+		defaultProp: options.defaultInputValue ?? "",
+		onChange: options.onInputValueChange
+	});
+	const committedLabelRef = useRef(options.defaultInputValue ?? "");
+	const { getItems, registerItem } = useCollection();
+	const [activeItem, setActiveItem] = useState();
+	const [inputGroupElement, setInputGroupElement] = useState(null);
+	const inputId = useId();
+	const listboxId = useId();
+	const revertInputValue = useCallback(() => {
+		setInputValue(committedLabelRef.current);
+	}, [setInputValue]);
+	const commitItem = useCallback((item) => {
+		setValue(item.value);
+		setInputValue(item.label);
+		setOpen(false);
+		committedLabelRef.current = item.label;
+	}, [
+		setInputValue,
+		setOpen,
+		setValue
+	]);
+	const resetToDefault = useCallback(() => {
+		const defaultInputValue = options.defaultInputValue ?? "";
+		setInputValue(defaultInputValue);
+		setValue(options.defaultValue);
+		setOpen(false);
+		committedLabelRef.current = defaultInputValue;
+	}, [
+		options.defaultInputValue,
+		options.defaultValue,
+		setInputValue,
+		setOpen,
+		setValue
+	]);
+	const clear = useCallback(() => {
+		setValue(void 0);
+		setInputValue("");
+		committedLabelRef.current = "";
+	}, [setInputValue, setValue]);
+	return useMemo(() => ({
+		open: open ?? false,
+		setOpen,
+		value,
+		setValue,
+		inputValue: inputValue ?? "",
+		setInputValue,
+		activeItem,
+		setActiveItem,
+		commitItem,
+		registerItem,
+		getItems,
+		inputGroupElement,
+		setInputGroupElement,
+		inputId,
+		listboxId,
+		disabled: options.disabled ?? false,
+		revertInputValue,
+		resetToDefault,
+		clear,
+		size: options.size ?? "md"
+	}), [
+		activeItem,
+		clear,
+		options.size,
+		commitItem,
+		getItems,
+		inputGroupElement,
+		inputId,
+		inputValue,
+		listboxId,
+		open,
+		options.disabled,
+		registerItem,
+		resetToDefault,
+		revertInputValue,
+		setInputValue,
+		setOpen,
+		setValue,
+		value
+	]);
+};
+//#endregion
+//#region src/combobox/context.ts
+const ComboboxContext = createContext(null);
+const useComboboxContext = () => {
+	const context = useContext(ComboboxContext);
+	if (!context) throw new Error("[blankjs] Combobox.* must be used within Combobox.Root");
+	return context;
+};
+//#endregion
+//#region src/combobox/hidden-input.tsx
+const ComboboxHiddenInput = ({ name, required }) => {
+	const { value, resetToDefault, disabled, inputGroupElement } = useComboboxContext();
+	const ref = useRef(null);
+	const controlProps = useFieldControlProps$1();
+	const isRequired = required ?? controlProps.required ?? false;
+	const mountedRef = useRef(false);
+	useEffect(() => {
+		if (!mountedRef.current) {
+			mountedRef.current = true;
+			return;
+		}
+		ref.current?.dispatchEvent(new Event("change", { bubbles: true }));
+	}, [value]);
+	useEffect(() => {
+		const form = ref.current?.form;
+		if (!form) return;
+		form.addEventListener("reset", resetToDefault);
+		return () => form.removeEventListener("reset", resetToDefault);
+	}, [resetToDefault]);
+	return /* @__PURE__ */ jsx("input", {
+		ref,
+		type: "text",
+		name,
+		value: value ?? "",
+		disabled,
+		className: "bk-combobox-hidden-input",
+		tabIndex: -1,
+		"aria-hidden": "true",
+		autoComplete: "off",
+		onChange: () => {},
+		required: isRequired,
+		onFocus: () => inputGroupElement?.querySelector("input")?.focus()
+	});
+};
+ComboboxHiddenInput.displayName = "Combobox.HiddenInput";
+//#endregion
+//#region src/combobox/root.tsx
+const ComboboxRoot = ({ children, required, ...options }) => {
+	const contextValue = useComboboxRoot(options);
+	return /* @__PURE__ */ jsx(ComboboxContext, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "bk-combobox-root",
+			"data-size": contextValue.size,
+			children: [children, options.name && /* @__PURE__ */ jsx(ComboboxHiddenInput, {
+				name: options.name,
+				required
+			})]
+		})
+	});
+};
+ComboboxRoot.displayName = "Combobox.Root";
+//#endregion
+//#region src/combobox/input.tsx
+const ComboboxArrow = () => /* @__PURE__ */ jsx("svg", {
+	className: "bk-combobox-arrow",
+	width: "16",
+	height: "16",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	"aria-hidden": "true",
+	children: /* @__PURE__ */ jsx("path", { d: "M6 9l6 6 6-6" })
+});
+const ComboboxInput = ({ className, ...props }) => {
+	const { inputId, disabled, open, activeItem, inputValue, listboxId, setInputValue, setInputGroupElement, getItems, setActiveItem, setOpen, commitItem, revertInputValue } = useComboboxContext();
+	const { required: _required, ...fieldProps } = useFieldControlProps$1();
+	const id = fieldProps.id ?? inputId;
+	const isDisabled = fieldProps.disabled || props.disabled || disabled;
+	const activeDescendant = open ? activeItem?.id : void 0;
+	const onBlur = (e) => {
+		if (isDisabled) return;
+		props.onBlur?.(e);
+		if (e.defaultPrevented) return;
+		revertInputValue();
+		setOpen(false);
+	};
+	const onChange = (e) => {
+		if (isDisabled) return;
+		props.onChange?.(e);
+		if (e.defaultPrevented) return;
+		setInputValue(e.target.value);
+		setOpen(true);
+	};
+	const onKeyDown = (e) => {
+		if (isDisabled) return;
+		props.onKeyDown?.(e);
+		if (e.defaultPrevented) return;
+		const key = e.key;
+		if (!open) {
+			switch (key) {
+				case "ArrowDown":
+				case "ArrowUp":
+					e.preventDefault();
+					setOpen(true);
+					break;
+				default: break;
+			}
+			return;
+		}
+		const items = getItems();
+		const index = items.findIndex((item) => item.value === activeItem?.value);
+		switch (key) {
+			case "ArrowDown": {
+				e.preventDefault();
+				const next = items[Math.min(index + 1, items.length - 1)];
+				if (next) setActiveItem(next);
+				break;
+			}
+			case "ArrowUp": {
+				e.preventDefault();
+				const prev = items[Math.max(index - 1, 0)];
+				if (prev) setActiveItem(prev);
+				break;
+			}
+			case "Enter":
+				e.preventDefault();
+				if (activeItem) commitItem(activeItem);
+				break;
+			case "Tab":
+				setOpen(false);
+				break;
+			default: break;
+		}
+	};
+	const onClick = (e) => {
+		if (isDisabled) return;
+		props.onClick?.(e);
+		if (e.defaultPrevented) return;
+		setOpen(true);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "bk-combobox-group",
+		ref: setInputGroupElement,
+		children: [/* @__PURE__ */ jsx("input", {
+			...props,
+			...fieldProps,
+			value: inputValue,
+			onClick,
+			onKeyDown,
+			onChange,
+			onBlur,
+			className: ["bk-combobox-input", className].filter(Boolean).join(" "),
+			role: "combobox",
+			"aria-autocomplete": "list",
+			"aria-expanded": open,
+			"aria-controls": open ? listboxId : void 0,
+			"aria-activedescendant": activeDescendant,
+			disabled: isDisabled,
+			id
+		}), /* @__PURE__ */ jsx(ComboboxArrow, {})]
+	});
+};
+ComboboxInput.displayName = "Combobox.Input";
+//#endregion
+//#region src/combobox/content.tsx
+const ComboboxContentInner = ({ children, style, className, container, ...props }) => {
+	const { inputGroupElement, listboxId, setOpen, getItems, value, setActiveItem, revertInputValue, size } = useComboboxContext();
+	const { setFloating, floatingStyles } = usePopover({
+		anchor: inputGroupElement,
+		onDismiss: useCallback((reason) => {
+			if (reason === "escape") revertInputValue();
+			setOpen(false);
+		}, [revertInputValue, setOpen]),
+		matchWidth: "min"
+	});
+	const onPointerDown = (e) => {
+		props.onPointerDown?.(e);
+		if (e.defaultPrevented) return;
+		e.preventDefault();
+	};
+	if (!useInitialActiveItem({
+		getItems,
+		setActiveItem,
+		isSelected: (item) => item.value === value
+	})) return null;
+	const target = container ?? document.body;
+	return createPortal(/* @__PURE__ */ jsx("div", {
+		...props,
+		onPointerDown,
+		ref: setFloating,
+		style: {
+			...style,
+			...floatingStyles
+		},
+		className: ["bk-combobox-content", className].filter(Boolean).join(" "),
+		role: "listbox",
+		id: listboxId,
+		"data-size": size,
+		"data-empty": Children.count(children) === 0 ? "" : void 0,
+		children
+	}), target);
+};
+const ComboboxContent = ({ children, ...props }) => {
+	const { open } = useComboboxContext();
+	if (!open) return null;
+	return /* @__PURE__ */ jsx(ComboboxContentInner, {
+		...props,
+		children
+	});
+};
+ComboboxContent.displayName = "Combobox.Content";
+//#endregion
+//#region src/combobox/item.tsx
+const ComboboxCheck = () => /* @__PURE__ */ jsx("svg", {
+	className: "bk-combobox-check",
+	width: "16",
+	height: "16",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	"aria-hidden": "true",
+	children: /* @__PURE__ */ jsx("path", { d: "M20 6L9 17l-5-5" })
+});
+const ComboboxItem = ({ value, textValue, children, className, ...props }) => {
+	const ref = useRef(null);
+	const optionId = useId();
+	const { value: selectedValue, activeItem, registerItem, commitItem, setActiveItem } = useComboboxContext();
+	const isSelected = value === selectedValue;
+	const isActive = value === activeItem?.value;
+	useEffect(() => {
+		const node = ref.current;
+		if (!node) return;
+		const unregister = registerItem({
+			node,
+			value,
+			label: textValue ?? node.textContent ?? "",
+			id: optionId
+		});
+		return () => {
+			unregister();
+			setActiveItem((prev) => prev?.value === value ? void 0 : prev);
+		};
+	}, [
+		registerItem,
+		textValue,
+		value,
+		optionId,
+		setActiveItem
+	]);
+	useEffect(() => {
+		if (isActive) ref.current?.scrollIntoView({ block: "nearest" });
+	}, [isActive]);
+	const onPointerDown = (e) => {
+		props.onPointerDown?.(e);
+		if (e.defaultPrevented) return;
+		e.preventDefault();
+		const node = ref.current;
+		if (!node) return;
+		commitItem({
+			id: optionId,
+			value,
+			label: textValue ?? node.textContent ?? "",
+			node
+		});
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		...props,
+		ref,
+		className: ["bk-combobox-item", className].filter(Boolean).join(" "),
+		role: "option",
+		id: optionId,
+		"aria-selected": isSelected,
+		"data-active": isActive ? "" : void 0,
+		onPointerDown,
+		children: [children, /* @__PURE__ */ jsx(ComboboxCheck, {})]
+	});
+};
+ComboboxItem.displayName = "Combobox.Item";
+//#endregion
+//#region src/combobox/clear.tsx
+const ComboboxClearIcon = () => /* @__PURE__ */ jsx("svg", {
+	width: "14",
+	height: "14",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	"aria-hidden": "true",
+	children: /* @__PURE__ */ jsx("path", { d: "M18 6L6 18M6 6l12 12" })
+});
+const ComboboxClear = ({ children, className, onClick, ...props }) => {
+	const { value, disabled, clear, inputGroupElement } = useComboboxContext();
+	if (!value || disabled) return null;
+	const handleClick = (e) => {
+		onClick?.(e);
+		if (e.defaultPrevented) return;
+		clear();
+		inputGroupElement?.querySelector("input")?.focus();
+	};
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"aria-label": "Clear",
+		className: ["bk-combobox-clear", className].filter(Boolean).join(" "),
+		onClick: handleClick,
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(ComboboxClearIcon, {})
+	});
+};
+ComboboxClear.displayName = "Combobox.Clear";
+//#endregion
+//#region src/combobox/index.ts
+const Combobox = {
+	Root: ComboboxRoot,
+	Input: ComboboxInput,
+	Content: ComboboxContent,
+	Item: ComboboxItem,
+	Clear: ComboboxClear
+};
+//#endregion
+export { Button, Checkbox, Combobox, ComboboxClear, ComboboxContent, ComboboxInput, ComboboxItem, ComboboxRoot, Field, FieldControl, FieldDescription, FieldError, FieldLabel, FieldRoot, Form, FormContext, MultiSelect, MultiSelectClear, MultiSelectContent, MultiSelectItem, MultiSelectRoot, MultiSelectTrigger, MultiSelectValue, PasswordField, RadioGroup, RadioGroupItem, RadioGroupRoot, Select, SelectClear, SelectContent, SelectItem, SelectRoot, SelectTrigger, SelectValue, Switch, TextInput, Textarea, serialize, useFieldControlProps };
+
+//# sourceMappingURL=index.mjs.map