@puzzle-ui/ui 0.0.0-stage → 0.2.0

package/dist/components/forms/select/index.d.cts

@@ -0,0 +1,112 @@
+import { PopoutAlignment, PopoutPosition } from "../../overlays/popout/index.cjs";
+import { ButtonHTMLAttributes, CSSProperties, ReactNode } from "react";
+import { ResponsiveValue } from "@puzzle-ui/core";
+type SelectSize = "sm" | "md" | "lg";
+type SelectOption<T = string> = {
+  /** Stable identifier, useful when options are reordered. */
+  id?: string | number;
+  /** The value returned by onChange. */
+  value: T;
+  /** Plain-text label, also used for typeahead and accessibility. */
+  label: string;
+  /** Optional supporting text. */
+  description?: ReactNode;
+  /** Optional group heading. */
+  group?: string;
+  /** Prevents this option from being selected. */
+  disabled?: boolean;
+};
+type SelectOptionRenderState = {
+  selected: boolean;
+  active: boolean;
+  multiple: boolean;
+};
+type SelectBaseProps<T> = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "value" | "disabled" | "form" | "size" | "type" | "onChange"> & {
+  /** Available options. */
+  options: readonly SelectOption<T>[];
+  /** Optional visible field label. */
+  label?: ReactNode;
+  /** Text shown when no value is selected. */
+  placeholder?: ReactNode;
+  /** Supporting text below the control. */
+  description?: ReactNode;
+  /** Error message. Set to true to use the default message. */
+  error?: ReactNode | boolean;
+  /** Disables the entire control. */
+  disabled?: boolean;
+  /** Makes the field required. */
+  required?: boolean;
+  /** Allows the selected value(s) to be cleared. */
+  clearable?: boolean;
+  /** Accessible name of the clear button. */
+  clearLabel?: string;
+  /** Form field name. Adds a visually hidden native select. */
+  name?: string;
+  /** Form ID for form association. */
+  form?: string;
+  /** Native autocomplete attribute. */
+  autoComplete?: string;
+  /** Serializes generic values for native form submission. */
+  serializeValue?: (value: T) => string;
+  /** Custom comparison for object values. */
+  isOptionEqualToValue?: (option: SelectOption<T>, value: T) => boolean;
+  /** Custom rendering of the selected value(s). */
+  renderValue?: (selected: SelectOption<T> | readonly SelectOption<T>[] | undefined) => ReactNode;
+  /** Custom rendering of an option. */
+  renderOption?: (option: SelectOption<T>, state: SelectOptionRenderState) => ReactNode;
+  /** Responsive control size. */
+  size?: ResponsiveValue<SelectSize>;
+  /** Responsive full-width layout. */
+  fullWidth?: ResponsiveValue<boolean>;
+  /** Controls the dropdown visibility. */
+  open?: boolean;
+  /** Initial dropdown visibility. */
+  defaultOpen?: boolean;
+  /** Called when the dropdown visibility changes. */
+  onOpenChange?: (open: boolean) => void;
+  /** Dropdown placement. */
+  position?: PopoutPosition;
+  /** Dropdown alignment. */
+  align?: PopoutAlignment;
+  /** Distance between the trigger and dropdown. */
+  offset?: number;
+  /** Minimum distance from the viewport edges. */
+  collisionPadding?: number;
+  /** Whether the dropdown closes after selecting an option. */
+  closeOnSelect?: boolean;
+  /** Maximum number of simultaneously selected options. */
+  maxSelected?: number;
+  /** Match the dropdown's minimum width to the trigger. */
+  matchTriggerWidth?: boolean;
+  /** Maximum dropdown height. */
+  menuMaxHeight?: CSSProperties["maxHeight"];
+  /** Content displayed when there are no options. */
+  noOptionsText?: ReactNode;
+  /** Additional class on the outer field. */
+  rootClassName?: string;
+  /** Additional class on the Popout content. */
+  popoverClassName?: string;
+  /** Additional class on the listbox. */
+  menuClassName?: string;
+};
+type SelectSingleProps<T = string> = SelectBaseProps<T> & {
+  multiple?: false;
+  /** Controlled selected value. Undefined represents no selection. */
+  value?: T | undefined;
+  /** Initial selected value. Undefined represents no selection. */
+  defaultValue?: T | undefined;
+  /** Called when the selected value changes. */
+  onChange?: (value: T | undefined) => void;
+};
+type SelectMultipleProps<T = string> = SelectBaseProps<T> & {
+  multiple: true;
+  /** Controlled selected values. */
+  value?: readonly T[];
+  /** Initial selected values. */
+  defaultValue?: readonly T[];
+  /** Called when the selected values change. */
+  onChange?: (value: T[]) => void;
+};
+type SelectProps<T = string> = SelectSingleProps<T> | SelectMultipleProps<T>;
+declare const Select: <T>(props: SelectProps<T>) => import("react").JSX.Element;
+export { Select, type SelectMultipleProps, type SelectOption, type SelectProps, type SelectSingleProps, type SelectSize };

package/dist/components/forms/select/index.d.ts

@@ -0,0 +1,112 @@
+import { PopoutAlignment, PopoutPosition } from "../../overlays/popout/index.js";
+import { ResponsiveValue } from "@puzzle-ui/core";
+import { ButtonHTMLAttributes, CSSProperties, ReactNode } from "react";
+type SelectSize = "sm" | "md" | "lg";
+type SelectOption<T = string> = {
+  /** Stable identifier, useful when options are reordered. */
+  id?: string | number;
+  /** The value returned by onChange. */
+  value: T;
+  /** Plain-text label, also used for typeahead and accessibility. */
+  label: string;
+  /** Optional supporting text. */
+  description?: ReactNode;
+  /** Optional group heading. */
+  group?: string;
+  /** Prevents this option from being selected. */
+  disabled?: boolean;
+};
+type SelectOptionRenderState = {
+  selected: boolean;
+  active: boolean;
+  multiple: boolean;
+};
+type SelectBaseProps<T> = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "value" | "disabled" | "form" | "size" | "type" | "onChange"> & {
+  /** Available options. */
+  options: readonly SelectOption<T>[];
+  /** Optional visible field label. */
+  label?: ReactNode;
+  /** Text shown when no value is selected. */
+  placeholder?: ReactNode;
+  /** Supporting text below the control. */
+  description?: ReactNode;
+  /** Error message. Set to true to use the default message. */
+  error?: ReactNode | boolean;
+  /** Disables the entire control. */
+  disabled?: boolean;
+  /** Makes the field required. */
+  required?: boolean;
+  /** Allows the selected value(s) to be cleared. */
+  clearable?: boolean;
+  /** Accessible name of the clear button. */
+  clearLabel?: string;
+  /** Form field name. Adds a visually hidden native select. */
+  name?: string;
+  /** Form ID for form association. */
+  form?: string;
+  /** Native autocomplete attribute. */
+  autoComplete?: string;
+  /** Serializes generic values for native form submission. */
+  serializeValue?: (value: T) => string;
+  /** Custom comparison for object values. */
+  isOptionEqualToValue?: (option: SelectOption<T>, value: T) => boolean;
+  /** Custom rendering of the selected value(s). */
+  renderValue?: (selected: SelectOption<T> | readonly SelectOption<T>[] | undefined) => ReactNode;
+  /** Custom rendering of an option. */
+  renderOption?: (option: SelectOption<T>, state: SelectOptionRenderState) => ReactNode;
+  /** Responsive control size. */
+  size?: ResponsiveValue<SelectSize>;
+  /** Responsive full-width layout. */
+  fullWidth?: ResponsiveValue<boolean>;
+  /** Controls the dropdown visibility. */
+  open?: boolean;
+  /** Initial dropdown visibility. */
+  defaultOpen?: boolean;
+  /** Called when the dropdown visibility changes. */
+  onOpenChange?: (open: boolean) => void;
+  /** Dropdown placement. */
+  position?: PopoutPosition;
+  /** Dropdown alignment. */
+  align?: PopoutAlignment;
+  /** Distance between the trigger and dropdown. */
+  offset?: number;
+  /** Minimum distance from the viewport edges. */
+  collisionPadding?: number;
+  /** Whether the dropdown closes after selecting an option. */
+  closeOnSelect?: boolean;
+  /** Maximum number of simultaneously selected options. */
+  maxSelected?: number;
+  /** Match the dropdown's minimum width to the trigger. */
+  matchTriggerWidth?: boolean;
+  /** Maximum dropdown height. */
+  menuMaxHeight?: CSSProperties["maxHeight"];
+  /** Content displayed when there are no options. */
+  noOptionsText?: ReactNode;
+  /** Additional class on the outer field. */
+  rootClassName?: string;
+  /** Additional class on the Popout content. */
+  popoverClassName?: string;
+  /** Additional class on the listbox. */
+  menuClassName?: string;
+};
+type SelectSingleProps<T = string> = SelectBaseProps<T> & {
+  multiple?: false;
+  /** Controlled selected value. Undefined represents no selection. */
+  value?: T | undefined;
+  /** Initial selected value. Undefined represents no selection. */
+  defaultValue?: T | undefined;
+  /** Called when the selected value changes. */
+  onChange?: (value: T | undefined) => void;
+};
+type SelectMultipleProps<T = string> = SelectBaseProps<T> & {
+  multiple: true;
+  /** Controlled selected values. */
+  value?: readonly T[];
+  /** Initial selected values. */
+  defaultValue?: readonly T[];
+  /** Called when the selected values change. */
+  onChange?: (value: T[]) => void;
+};
+type SelectProps<T = string> = SelectSingleProps<T> | SelectMultipleProps<T>;
+declare const Select: <T>(props: SelectProps<T>) => import("react").JSX.Element;
+export { Select, type SelectMultipleProps, type SelectOption, type SelectProps, type SelectSingleProps, type SelectSize };

package/dist/components/forms/select/index.js

@@ -0,0 +1,468 @@
+"use client";
+import { Popout } from "../../overlays/popout/index.js";
+import "./select.css";
+import { cn, resolveResponsiveValue } from "@puzzle-ui/core";
+import { useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/forms/select/index.tsx
+const findEnabledIndex = (options, startIndex, direction, wrap = true) => {
+	const length = options.length;
+	for (let step = 1; step <= length; step++) {
+		let index = startIndex + step * direction;
+		if (wrap) index = (index + length) % length;
+		else if (index < 0 || index >= length) break;
+		if (!options[index].disabled) return index;
+	}
+	return -1;
+};
+const groupOptions = (options) => {
+	const groups = /* @__PURE__ */ new Map();
+	options.forEach((option, index) => {
+		const label = option.group ?? null;
+		let group = groups.get(label);
+		if (!group) {
+			group = {
+				label,
+				options: []
+			};
+			groups.set(label, group);
+		}
+		group.options.push({
+			option,
+			index
+		});
+	});
+	return Array.from(groups.values());
+};
+const Select = (props) => {
+	const { options, label, placeholder = "Select an option", description, error, disabled = false, required = false, clearable = false, clearLabel = "Clear selection", name, form, autoComplete, serializeValue, isOptionEqualToValue, renderValue, renderOption, size = "md", fullWidth = false, open, defaultOpen = false, onOpenChange, position = "bottom", align = "start", offset = 8, collisionPadding = 8, closeOnSelect: closeOnSelectProp, maxSelected, matchTriggerWidth = true, menuMaxHeight = "18rem", noOptionsText = "No options", rootClassName, popoverClassName, menuClassName, value, onChange, id, className, onClick, onKeyDown, onKeyUp, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, ...buttonProps } = props;
+	const multiple = props.multiple === true;
+	const controlledValue = Object.prototype.hasOwnProperty.call(props, "value");
+	const controlledOpen = open !== void 0;
+	const baseId = useId();
+	const triggerId = id ?? `${baseId}-trigger`;
+	const labelId = `${baseId}-label`;
+	const descriptionId = `${baseId}-description`;
+	const errorId = `${baseId}-error`;
+	const listboxId = `${baseId}-listbox`;
+	const triggerRef = useRef(null);
+	const listboxRef = useRef(null);
+	const typeaheadRef = useRef({
+		query: "",
+		timestamp: 0
+	});
+	const [internalValue, setInternalValue] = useState(() => multiple ? props.defaultValue ?? [] : props.defaultValue);
+	const [internalOpen, setInternalOpen] = useState(defaultOpen);
+	const [activeIndex, setActiveIndex] = useState(-1);
+	const [triggerWidth, setTriggerWidth] = useState(0);
+	const selectedValue = controlledValue ? value : internalValue;
+	const selectedValues = multiple ? selectedValue ?? [] : selectedValue === void 0 ? [] : [selectedValue];
+	const isOpen = open ?? internalOpen;
+	const hasSelection = selectedValues.length > 0;
+	const hasError = error !== void 0 && error !== null && error !== false;
+	const isInvalid = hasError || ariaInvalid !== void 0 && ariaInvalid !== false && ariaInvalid !== "false";
+	const resolvedAriaInvalid = isInvalid ? hasError || ariaInvalid === true ? true : ariaInvalid : ariaInvalid;
+	const errorContent = error === true ? "Invalid value" : error;
+	const closeOnSelect = closeOnSelectProp ?? !multiple;
+	const responsiveSize = resolveResponsiveValue(size, "md");
+	const responsiveFullWidth = resolveResponsiveValue(fullWidth, false);
+	const groups = useMemo(() => groupOptions(options), [options]);
+	const isEqual = useCallback((option, selected) => isOptionEqualToValue ? isOptionEqualToValue(option, selected) : Object.is(option.value, selected), [isOptionEqualToValue]);
+	const selectedOptions = selectedValues.map((selected) => options.find((option) => isEqual(option, selected))).filter((option) => option !== void 0);
+	const isSelected = (option) => selectedValues.some((selected) => isEqual(option, selected));
+	const initialActiveIndex = useCallback((direction = 1) => {
+		const selectedIndex = options.findIndex((option) => !option.disabled && selectedValues.some((selected) => isEqual(option, selected)));
+		if (selectedIndex !== -1) return selectedIndex;
+		return direction === 1 ? findEnabledIndex(options, -1, 1, false) : findEnabledIndex(options, options.length, -1, false);
+	}, [
+		options,
+		selectedValues,
+		isEqual
+	]);
+	const changeOpenState = useCallback((nextOpen) => {
+		if (!controlledOpen) setInternalOpen(nextOpen);
+		onOpenChange?.(nextOpen);
+	}, [controlledOpen, onOpenChange]);
+	const updateValue = useCallback((nextValue) => {
+		if (!controlledValue) setInternalValue(nextValue);
+		if (multiple) onChange?.([...nextValue]);
+		else onChange?.(nextValue);
+	}, [
+		controlledValue,
+		multiple,
+		onChange
+	]);
+	const getSerializedValue = useCallback((selected) => serializeValue ? serializeValue(selected) : String(selected), [serializeValue]);
+	const findTypeaheadMatch = (character, startIndex) => {
+		if (options.length === 0) return -1;
+		const now = Date.now();
+		const previous = typeaheadRef.current;
+		const query = now - previous.timestamp > 700 ? character : previous.query + character;
+		typeaheadRef.current = {
+			query,
+			timestamp: now
+		};
+		const normalizedSearch = (query.length > 1 && Array.from(query).every((item) => item.toLowerCase() === query[0].toLowerCase()) ? character : query).toLocaleLowerCase();
+		for (let offset = 1; offset <= options.length; offset++) {
+			const index = (startIndex + offset + options.length) % options.length;
+			const option = options[index];
+			if (!option.disabled && option.label.toLocaleLowerCase().startsWith(normalizedSearch)) return index;
+		}
+		return -1;
+	};
+	const focusTrigger = () => {
+		triggerRef.current?.focus({ preventScroll: true });
+	};
+	const handleOptionSelect = (option) => {
+		if (disabled || option.disabled) return;
+		const currentlySelected = isSelected(option);
+		if (multiple) {
+			if (!currentlySelected && maxSelected !== void 0 && selectedValues.length >= maxSelected) return;
+			const nextValues = currentlySelected ? selectedValues.filter((selected) => !isEqual(option, selected)) : [...selectedValues, option.value];
+			updateValue(nextValues);
+		} else updateValue(option.value);
+		if (closeOnSelect) {
+			changeOpenState(false);
+			focusTrigger();
+		}
+	};
+	const handleClear = () => {
+		if (!hasSelection || disabled) return;
+		updateValue(multiple ? [] : void 0);
+		focusTrigger();
+	};
+	const handleTriggerRef = useCallback((node) => {
+		triggerRef.current = node;
+	}, []);
+	const handleListboxRef = useCallback((node) => {
+		listboxRef.current = node;
+	}, []);
+	const handleTriggerClick = (event) => {
+		onClick?.(event);
+		if (event.defaultPrevented || disabled) return;
+		event.preventDefault();
+		if (!isOpen) setActiveIndex(initialActiveIndex());
+		changeOpenState(!isOpen);
+	};
+	const handleTriggerKeyDown = (event) => {
+		onKeyDown?.(event);
+		if (event.defaultPrevented || disabled) return;
+		if (isOpen) {
+			handleComboboxKeyDown(event);
+			return;
+		}
+		if (event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "Enter" || event.key === " ") {
+			event.preventDefault();
+			setActiveIndex(initialActiveIndex(event.key === "ArrowUp" ? -1 : 1));
+			changeOpenState(true);
+			return;
+		}
+		if (event.key.length === 1 && !event.altKey && !event.ctrlKey && !event.metaKey) {
+			const index = findTypeaheadMatch(event.key, activeIndex);
+			if (index !== -1) {
+				event.preventDefault();
+				setActiveIndex(index);
+				if (!isOpen) changeOpenState(true);
+			}
+		}
+	};
+	const handleTriggerKeyUp = (event) => {
+		onKeyUp?.(event);
+		if (event.key === " ") event.preventDefault();
+	};
+	const moveActive = (direction, amount = 1, wrap = true) => {
+		let nextIndex = activeIndex;
+		for (let step = 0; step < amount; step++) {
+			const startIndex = nextIndex === -1 ? direction === 1 ? -1 : options.length : nextIndex;
+			const next = findEnabledIndex(options, startIndex, direction, wrap);
+			if (next === -1) break;
+			nextIndex = next;
+		}
+		if (nextIndex !== -1) setActiveIndex(nextIndex);
+	};
+	const handleComboboxKeyDown = (event) => {
+		switch (event.key) {
+			case "ArrowDown":
+				event.preventDefault();
+				moveActive(1);
+				return;
+			case "ArrowUp":
+				event.preventDefault();
+				moveActive(-1);
+				return;
+			case "Home":
+				event.preventDefault();
+				setActiveIndex(findEnabledIndex(options, -1, 1, false));
+				return;
+			case "End":
+				event.preventDefault();
+				setActiveIndex(findEnabledIndex(options, options.length, -1, false));
+				return;
+			case "PageDown":
+				event.preventDefault();
+				moveActive(1, 10, false);
+				return;
+			case "PageUp":
+				event.preventDefault();
+				moveActive(-1, 10, false);
+				return;
+			case "Enter":
+			case " ":
+				event.preventDefault();
+				if (activeIndex >= 0 && options[activeIndex]) handleOptionSelect(options[activeIndex]);
+				return;
+			case "Escape":
+				event.preventDefault();
+				event.stopPropagation();
+				changeOpenState(false);
+				focusTrigger();
+				return;
+			case "Tab":
+				changeOpenState(false);
+				return;
+		}
+		if (event.key.length === 1 && !event.altKey && !event.ctrlKey && !event.metaKey) {
+			event.preventDefault();
+			const index = findTypeaheadMatch(event.key, activeIndex);
+			if (index !== -1) setActiveIndex(index);
+		}
+	};
+	const handleNativeChange = (event) => {
+		const serializedValues = new Set(Array.from(event.currentTarget.selectedOptions, (option) => option.value));
+		const nextValues = options.filter((option) => serializedValues.has(getSerializedValue(option.value))).map((option) => option.value);
+		updateValue(multiple ? nextValues : nextValues[0]);
+	};
+	useEffect(() => {
+		if (isOpen && (activeIndex < 0 || !options[activeIndex] || options[activeIndex].disabled)) setActiveIndex(initialActiveIndex());
+	}, [
+		isOpen,
+		activeIndex,
+		options,
+		initialActiveIndex
+	]);
+	useEffect(() => {
+		if (!isOpen || activeIndex < 0) return;
+		(listboxRef.current?.ownerDocument.getElementById(`${listboxId}-option-${activeIndex}`))?.scrollIntoView({ block: "nearest" });
+	}, [
+		isOpen,
+		activeIndex,
+		listboxId
+	]);
+	useLayoutEffect(() => {
+		if (!isOpen || !matchTriggerWidth) return;
+		const trigger = triggerRef.current;
+		const ownerWindow = trigger?.ownerDocument.defaultView;
+		if (!trigger || !ownerWindow) return;
+		const updateWidth = () => {
+			setTriggerWidth(trigger.getBoundingClientRect().width);
+		};
+		updateWidth();
+		const observer = new (ownerWindow.ResizeObserver ?? ResizeObserver)(updateWidth);
+		observer.observe(trigger);
+		ownerWindow.addEventListener("resize", updateWidth);
+		return () => {
+			observer.disconnect();
+			ownerWindow.removeEventListener("resize", updateWidth);
+		};
+	}, [isOpen, matchTriggerWidth]);
+	const activeOptionId = activeIndex >= 0 && options[activeIndex] && !options[activeIndex].disabled ? `${listboxId}-option-${activeIndex}` : void 0;
+	const resolvedLabelledBy = ariaLabelledBy ?? (label != null ? labelId : void 0);
+	const resolvedDescribedBy = [
+		ariaDescribedBy,
+		description != null ? descriptionId : void 0,
+		hasError ? errorId : void 0
+	].filter(Boolean).join(" ") || void 0;
+	const displayValue = hasSelection ? renderValue ? renderValue(multiple ? selectedOptions : selectedOptions[0]) : multiple ? selectedOptions.length ? selectedOptions.map((option) => option.label).join(", ") : selectedValues.map(String).join(", ") : selectedOptions[0]?.label ?? String(selectedValues[0]) : placeholder;
+	const listboxStyle = {
+		minWidth: matchTriggerWidth && triggerWidth > 0 ? triggerWidth : void 0,
+		maxHeight: menuMaxHeight
+	};
+	const triggerElement = /* @__PURE__ */ jsxs("button", {
+		...buttonProps,
+		ref: handleTriggerRef,
+		id: triggerId,
+		type: "button",
+		role: "combobox",
+		disabled,
+		className: cn("puzzle-select__trigger", className),
+		onClick: handleTriggerClick,
+		onKeyDown: handleTriggerKeyDown,
+		onKeyUp: handleTriggerKeyUp,
+		"aria-label": ariaLabel,
+		"aria-labelledby": resolvedLabelledBy,
+		"aria-describedby": resolvedDescribedBy,
+		"aria-autocomplete": "none",
+		"aria-haspopup": "listbox",
+		"aria-expanded": isOpen,
+		"aria-controls": isOpen ? listboxId : void 0,
+		"aria-activedescendant": isOpen ? activeOptionId : void 0,
+		"aria-required": required || void 0,
+		"aria-invalid": resolvedAriaInvalid,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: cn("puzzle-select__value", !hasSelection && "puzzle-select__placeholder"),
+			children: displayValue
+		}), /* @__PURE__ */ jsx("span", {
+			className: "puzzle-select__icon",
+			"aria-hidden": "true"
+		})]
+	});
+	const renderOptionElement = ({ option, index }) => {
+		const selected = isSelected(option);
+		const active = activeIndex === index;
+		const content = renderOption ? renderOption(option, {
+			selected,
+			active,
+			multiple
+		}) : option.description != null ? /* @__PURE__ */ jsxs("span", {
+			className: "puzzle-select__option-content",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "puzzle-select__option-label",
+				children: option.label
+			}), /* @__PURE__ */ jsx("span", {
+				id: `${listboxId}-description-${index}`,
+				className: "puzzle-select__option-description",
+				children: option.description
+			})]
+		}) : option.label;
+		return /* @__PURE__ */ jsx("div", {
+			id: `${listboxId}-option-${index}`,
+			className: "puzzle-select__option",
+			role: "option",
+			"aria-label": option.label,
+			"aria-selected": selected,
+			"aria-disabled": option.disabled || void 0,
+			"aria-describedby": !renderOption && option.description != null ? `${listboxId}-description-${index}` : void 0,
+			"data-index": index,
+			"data-active": active ? "true" : void 0,
+			onPointerDown: (event) => event.preventDefault(),
+			onPointerMove: (event) => {
+				if (event.pointerType !== "touch" && !option.disabled) setActiveIndex(index);
+			},
+			onClick: () => handleOptionSelect(option),
+			children: content
+		}, option.id ?? index);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("puzzle-select", rootClassName),
+		"data-open": isOpen ? "true" : "false",
+		"data-disabled": disabled ? "true" : void 0,
+		"data-invalid": isInvalid ? "true" : void 0,
+		"data-multiple": multiple ? "true" : void 0,
+		"data-size-mobile": responsiveSize.mobile,
+		"data-size-tablet": responsiveSize.tablet,
+		"data-size-desktop": responsiveSize.desktop,
+		"data-full-width-mobile": String(responsiveFullWidth.mobile),
+		"data-full-width-tablet": String(responsiveFullWidth.tablet),
+		"data-full-width-desktop": String(responsiveFullWidth.desktop),
+		children: [
+			label != null && /* @__PURE__ */ jsxs("label", {
+				id: labelId,
+				htmlFor: triggerId,
+				className: "puzzle-select__label",
+				children: [label, required && /* @__PURE__ */ jsx("span", {
+					className: "puzzle-select__required",
+					"aria-hidden": "true",
+					children: "*"
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "puzzle-select__control",
+				children: [/* @__PURE__ */ jsx(Popout, {
+					trigger: triggerElement,
+					open: isOpen,
+					onOpenChange: changeOpenState,
+					action: "click",
+					position,
+					align,
+					offset,
+					collisionPadding,
+					contentClassName: cn("puzzle-select__popover", popoverClassName),
+					children: /* @__PURE__ */ jsx("div", {
+						ref: handleListboxRef,
+						id: listboxId,
+						className: cn("puzzle-select__listbox", menuClassName),
+						role: "listbox",
+						"aria-label": label == null && ariaLabelledBy == null ? ariaLabel : void 0,
+						"aria-labelledby": ariaLabelledBy ?? (label != null ? labelId : void 0),
+						"aria-multiselectable": multiple || void 0,
+						style: listboxStyle,
+						children: options.length === 0 ? /* @__PURE__ */ jsx("div", {
+							className: "puzzle-select__empty",
+							role: "presentation",
+							children: noOptionsText
+						}) : groups.map((group) => group.label != null ? /* @__PURE__ */ jsxs("div", {
+							className: "puzzle-select__group",
+							role: "group",
+							"aria-label": group.label,
+							children: [/* @__PURE__ */ jsx("div", {
+								className: "puzzle-select__group-label",
+								"aria-hidden": "true",
+								children: group.label
+							}), group.options.map(renderOptionElement)]
+						}, group.label) : group.options.map(renderOptionElement))
+					})
+				}), clearable && hasSelection && /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "puzzle-select__clear",
+					disabled,
+					"aria-label": clearLabel,
+					onClick: (event) => {
+						event.preventDefault();
+						event.stopPropagation();
+						handleClear();
+					},
+					children: /* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						children: "×"
+					})
+				})]
+			}),
+			description != null && /* @__PURE__ */ jsx("div", {
+				id: descriptionId,
+				className: "puzzle-select__description",
+				children: description
+			}),
+			hasError && /* @__PURE__ */ jsx("div", {
+				id: errorId,
+				className: "puzzle-select__error",
+				role: "alert",
+				children: errorContent
+			}),
+			name != null && /* @__PURE__ */ jsxs("select", {
+				className: "puzzle-select__native",
+				"aria-hidden": "true",
+				tabIndex: -1,
+				name,
+				form,
+				autoComplete,
+				disabled,
+				required,
+				multiple,
+				value: multiple ? selectedValues.map(getSerializedValue) : selectedValues.length ? getSerializedValue(selectedValues[0]) : "",
+				onChange: handleNativeChange,
+				onInvalid: (event) => {
+					event.preventDefault();
+					focusTrigger();
+				},
+				children: [!multiple && /* @__PURE__ */ jsx("option", {
+					value: "",
+					children: " "
+				}), groups.map((group) => group.label != null ? /* @__PURE__ */ jsx("optgroup", {
+					label: group.label,
+					children: group.options.map(({ option, index }) => /* @__PURE__ */ jsx("option", {
+						value: getSerializedValue(option.value),
+						disabled: option.disabled,
+						children: option.label
+					}, option.id ?? index))
+				}, group.label) : group.options.map(({ option, index }) => /* @__PURE__ */ jsx("option", {
+					value: getSerializedValue(option.value),
+					disabled: option.disabled,
+					children: option.label
+				}, option.id ?? index)))]
+			})
+		]
+	});
+};
+export { Select };
+
+//# sourceMappingURL=index.js.map