@proyecto-viviana/solidaria 0.3.0 → 0.4.0

package/dist/_chunk/searchfield.jsx

@@ -0,0 +1,209 @@
+import { i as access, o as mergeProps } from "./env.jsx";
+import { t as createTextField } from "./textfield.jsx";
+//#region src/searchfield/createSearchField.ts
+/**
+* Provides the behavior and accessibility implementation for a search field.
+*/
+function createSearchField(props, state, inputRef) {
+	const getProps = () => access(props);
+	const setValue = (value) => {
+		if (state.value() === value) return;
+		state.setValue(value);
+		getProps().onChange?.(value);
+	};
+	const textFieldAria = createTextField({
+		get value() {
+			return state.value();
+		},
+		get isDisabled() {
+			return getProps().isDisabled;
+		},
+		get isReadOnly() {
+			return getProps().isReadOnly;
+		},
+		get isRequired() {
+			return getProps().isRequired;
+		},
+		get isInvalid() {
+			return getProps().isInvalid;
+		},
+		get label() {
+			return getProps().label;
+		},
+		get "aria-label"() {
+			return getProps()["aria-label"];
+		},
+		get "aria-labelledby"() {
+			return getProps()["aria-labelledby"];
+		},
+		get "aria-describedby"() {
+			return getProps()["aria-describedby"];
+		},
+		get description() {
+			return getProps().description;
+		},
+		get errorMessage() {
+			return getProps().errorMessage;
+		},
+		get placeholder() {
+			return getProps().placeholder;
+		},
+		get name() {
+			return getProps().name;
+		},
+		get form() {
+			return getProps().form;
+		},
+		get validationBehavior() {
+			return getProps().validationBehavior ?? "native";
+		},
+		get type() {
+			return getProps().type ?? "search";
+		},
+		get autoFocus() {
+			return getProps().autoFocus;
+		},
+		get excludeFromTabOrder() {
+			return getProps().excludeFromTabOrder;
+		},
+		get autoComplete() {
+			return getProps().autoComplete;
+		},
+		get inputMode() {
+			return getProps().inputMode;
+		},
+		get enterKeyHint() {
+			return getProps().enterKeyHint;
+		},
+		get autoCorrect() {
+			return getProps().autoCorrect;
+		},
+		get autoCapitalize() {
+			return getProps().autoCapitalize;
+		},
+		get spellCheck() {
+			return getProps().spellCheck;
+		},
+		get maxLength() {
+			return getProps().maxLength;
+		},
+		get minLength() {
+			return getProps().minLength;
+		},
+		get pattern() {
+			return getProps().pattern;
+		},
+		get onFocus() {
+			return getProps().onFocus;
+		},
+		get onBlur() {
+			return getProps().onBlur;
+		},
+		get onFocusChange() {
+			return getProps().onFocusChange;
+		},
+		get onKeyDown() {
+			return getProps().onKeyDown;
+		},
+		get onKeyUp() {
+			return getProps().onKeyUp;
+		},
+		get onCopy() {
+			return getProps().onCopy;
+		},
+		get onCut() {
+			return getProps().onCut;
+		},
+		get onPaste() {
+			return getProps().onPaste;
+		},
+		get onCompositionStart() {
+			return getProps().onCompositionStart;
+		},
+		get onCompositionEnd() {
+			return getProps().onCompositionEnd;
+		},
+		get onCompositionUpdate() {
+			return getProps().onCompositionUpdate;
+		},
+		get onSelect() {
+			return getProps().onSelect;
+		},
+		get onBeforeInput() {
+			return getProps().onBeforeInput;
+		},
+		get onInput() {
+			return getProps().onInput;
+		},
+		onChange: setValue
+	});
+	const onKeyDown = (e) => {
+		const p = getProps();
+		if (p.isDisabled || p.isReadOnly) {
+			if (e.key === "Enter") e.preventDefault();
+			return;
+		}
+		if (e.key === "Enter" && p.onSubmit) {
+			e.preventDefault();
+			p.onSubmit(state.value());
+		}
+		if (e.key === "Escape") {
+			const currentValue = state.value();
+			const inputValue = inputRef?.()?.value ?? "";
+			if (currentValue !== "" || inputValue !== "") {
+				e.preventDefault();
+				e.stopPropagation();
+				const input = inputRef?.();
+				if (input) input.value = "";
+				setValue("");
+				p.onClear?.();
+			}
+		}
+	};
+	const onClearButtonClick = () => {
+		const p = getProps();
+		if (p.isDisabled || p.isReadOnly) return;
+		const input = inputRef?.();
+		if (input) input.value = "";
+		setValue("");
+		p.onClear?.();
+		inputRef?.()?.focus();
+	};
+	const onClearButtonMouseDown = (e) => {
+		e.preventDefault();
+	};
+	return {
+		get labelProps() {
+			return textFieldAria.labelProps;
+		},
+		get inputProps() {
+			return mergeProps({
+				onKeyDown,
+				defaultValue: void 0
+			}, textFieldAria.inputProps);
+		},
+		get clearButtonProps() {
+			const p = getProps();
+			return {
+				"aria-label": "Clear search",
+				tabIndex: -1,
+				disabled: p.isDisabled || p.isReadOnly,
+				onMouseDown: onClearButtonMouseDown,
+				onClick: onClearButtonClick
+			};
+		},
+		get descriptionProps() {
+			return textFieldAria.descriptionProps;
+		},
+		get errorMessageProps() {
+			return textFieldAria.errorMessageProps;
+		},
+		get isInvalid() {
+			return textFieldAria.isInvalid;
+		}
+	};
+}
+//#endregion
+export { createSearchField as t };
+
+//# sourceMappingURL=searchfield.jsx.map

package/dist/_chunk/searchfield.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"searchfield.jsx","names":[],"sources":["../../src/searchfield/createSearchField.ts"],"sourcesContent":["/**\n * Provides the behavior and accessibility implementation for a search field.\n * A search field allows a user to enter and clear a search query.\n * Based on @react-aria/searchfield useSearchField.\n */\n\nimport { type JSX } from \"solid-js\";\nimport { createTextField, type AriaTextFieldProps, type TextFieldAria } from \"../textfield\";\nimport { mergeProps } from \"../utils\";\nimport { type MaybeAccessor, access } from \"../utils/reactivity\";\nimport type { SearchFieldState } from \"@proyecto-viviana/solid-stately\";\n\nexport interface AriaSearchFieldProps extends AriaTextFieldProps {\n  /** Handler that is called when the user submits the search (pressing Enter). */\n  onSubmit?: (value: string) => void;\n  /** Handler that is called when the clear button is pressed or Escape clears the field. */\n  onClear?: () => void;\n}\n\nexport interface SearchFieldAria extends Omit<TextFieldAria, \"inputProps\"> {\n  /** Props for the input element. */\n  inputProps: JSX.InputHTMLAttributes<HTMLInputElement>;\n  /** Props for the clear button. */\n  clearButtonProps: {\n    \"aria-label\": string;\n    tabIndex: number;\n    disabled?: boolean;\n    onMouseDown: (e: MouseEvent) => void;\n    onClick: () => void;\n  };\n}\n\n/**\n * Provides the behavior and accessibility implementation for a search field.\n */\nexport function createSearchField(\n  props: MaybeAccessor<AriaSearchFieldProps>,\n  state: SearchFieldState,\n  inputRef?: () => HTMLInputElement | null,\n): SearchFieldAria {\n  const getProps = () => access(props);\n\n  const setValue = (value: string) => {\n    if (state.value() === value) {\n      return;\n    }\n\n    state.setValue(value);\n    getProps().onChange?.(value);\n  };\n\n  // Use createTextField for the base implementation\n  const textFieldAria = createTextField({\n    get value() {\n      return state.value();\n    },\n    get isDisabled() {\n      return getProps().isDisabled;\n    },\n    get isReadOnly() {\n      return getProps().isReadOnly;\n    },\n    get isRequired() {\n      return getProps().isRequired;\n    },\n    get isInvalid() {\n      return getProps().isInvalid;\n    },\n    get label() {\n      return getProps().label;\n    },\n    get \"aria-label\"() {\n      return getProps()[\"aria-label\"];\n    },\n    get \"aria-labelledby\"() {\n      return getProps()[\"aria-labelledby\"];\n    },\n    get \"aria-describedby\"() {\n      return getProps()[\"aria-describedby\"];\n    },\n    get description() {\n      return getProps().description;\n    },\n    get errorMessage() {\n      return getProps().errorMessage;\n    },\n    get placeholder() {\n      return getProps().placeholder;\n    },\n    get name() {\n      return getProps().name;\n    },\n    get form() {\n      return getProps().form;\n    },\n    get validationBehavior() {\n      return getProps().validationBehavior ?? \"native\";\n    },\n    get type() {\n      return getProps().type ?? \"search\";\n    },\n    get autoFocus() {\n      return getProps().autoFocus;\n    },\n    get excludeFromTabOrder() {\n      return getProps().excludeFromTabOrder;\n    },\n    get autoComplete() {\n      return getProps().autoComplete;\n    },\n    get inputMode() {\n      return getProps().inputMode;\n    },\n    get enterKeyHint() {\n      return getProps().enterKeyHint;\n    },\n    get autoCorrect() {\n      return getProps().autoCorrect;\n    },\n    get autoCapitalize() {\n      return getProps().autoCapitalize;\n    },\n    get spellCheck() {\n      return getProps().spellCheck;\n    },\n    get maxLength() {\n      return getProps().maxLength;\n    },\n    get minLength() {\n      return getProps().minLength;\n    },\n    get pattern() {\n      return getProps().pattern;\n    },\n    get onFocus() {\n      return getProps().onFocus;\n    },\n    get onBlur() {\n      return getProps().onBlur;\n    },\n    get onFocusChange() {\n      return getProps().onFocusChange;\n    },\n    get onKeyDown() {\n      return getProps().onKeyDown;\n    },\n    get onKeyUp() {\n      return getProps().onKeyUp;\n    },\n    get onCopy() {\n      return getProps().onCopy;\n    },\n    get onCut() {\n      return getProps().onCut;\n    },\n    get onPaste() {\n      return getProps().onPaste;\n    },\n    get onCompositionStart() {\n      return getProps().onCompositionStart;\n    },\n    get onCompositionEnd() {\n      return getProps().onCompositionEnd;\n    },\n    get onCompositionUpdate() {\n      return getProps().onCompositionUpdate;\n    },\n    get onSelect() {\n      return getProps().onSelect;\n    },\n    get onBeforeInput() {\n      return getProps().onBeforeInput;\n    },\n    get onInput() {\n      return getProps().onInput;\n    },\n    onChange: setValue,\n  });\n\n  // Handle keyboard events for search field\n  const onKeyDown: JSX.EventHandler<HTMLInputElement, KeyboardEvent> = (e) => {\n    const p = getProps();\n\n    if (p.isDisabled || p.isReadOnly) {\n      if (e.key === \"Enter\") {\n        e.preventDefault();\n      }\n      return;\n    }\n\n    if (e.key === \"Enter\" && p.onSubmit) {\n      e.preventDefault();\n      p.onSubmit(state.value());\n    }\n\n    if (e.key === \"Escape\") {\n      const currentValue = state.value();\n      const inputValue = inputRef?.()?.value ?? \"\";\n\n      // Only clear if there's a value\n      if (currentValue !== \"\" || inputValue !== \"\") {\n        e.preventDefault();\n        e.stopPropagation();\n        const input = inputRef?.();\n        if (input) {\n          input.value = \"\";\n        }\n        setValue(\"\");\n        p.onClear?.();\n      }\n    }\n  };\n\n  // Handle clear button click\n  const onClearButtonClick = () => {\n    const p = getProps();\n    if (p.isDisabled || p.isReadOnly) return;\n    const input = inputRef?.();\n    if (input) {\n      input.value = \"\";\n    }\n    setValue(\"\");\n    p.onClear?.();\n    // Focus the input after clearing\n    inputRef?.()?.focus();\n  };\n\n  // Prevent focus from leaving input on mobile when clicking clear button\n  const onClearButtonMouseDown = (e: MouseEvent) => {\n    e.preventDefault();\n  };\n\n  return {\n    get labelProps() {\n      return textFieldAria.labelProps;\n    },\n    get inputProps() {\n      return mergeProps(\n        {\n          onKeyDown,\n          // Clear defaultValue since it's handled by state\n          defaultValue: undefined,\n        } as Record<string, unknown>,\n        textFieldAria.inputProps as Record<string, unknown>,\n      ) as JSX.InputHTMLAttributes<HTMLInputElement>;\n    },\n    get clearButtonProps() {\n      const p = getProps();\n      const isDisabled = p.isDisabled || p.isReadOnly;\n\n      return {\n        \"aria-label\": \"Clear search\",\n        tabIndex: -1, // Exclude from tab order\n        disabled: isDisabled,\n        onMouseDown: onClearButtonMouseDown,\n        onClick: onClearButtonClick,\n      };\n    },\n    get descriptionProps() {\n      return textFieldAria.descriptionProps;\n    },\n    get errorMessageProps() {\n      return textFieldAria.errorMessageProps;\n    },\n    get isInvalid() {\n      return textFieldAria.isInvalid;\n    },\n  };\n}\n"],"mappings":"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"}

package/dist/_chunk/select.js

@@ -0,0 +1,403 @@
+import { t as createPress } from "./createPress.js";
+import { i as access, o as mergeProps } from "./env.js";
+import { t as filterDOMProps } from "./filterDOMProps.js";
+import { t as createFocusRing } from "./createFocusRing.js";
+import { createId } from "../ssr/index.js";
+import { t as createLabel } from "./createLabel.js";
+import { t as createTypeSelect } from "./createTypeSelect.js";
+import { t as createFormValidation } from "./createFormValidation.js";
+import { For, createEffect, onCleanup } from "solid-js";
+import { createComponent, effect, getNextElement, getNextMarker, insert, runHydrationEvents, setProperty, spread, template } from "solid-js/web";
+//#region src/select/createSelect.ts
+/**
+* Provides the behavior and accessibility implementation for a select component.
+* A select displays a collapsible list of options and allows a user to select one of them.
+* Based on @react-aria/select useSelect.
+*/
+const selectData = /* @__PURE__ */ new WeakMap();
+function getSelectData(state) {
+	return selectData.get(state);
+}
+/**
+* Provides the behavior and accessibility implementation for a select component.
+*/
+function createSelect(props, state, _ref) {
+	const getProps = () => access(props);
+	const id = createId(getProps().id);
+	const buttonId = `${id}-button`;
+	const listBoxId = `${id}-listbox`;
+	const valueId = `${id}-value`;
+	const descriptionId = `${id}-description`;
+	const errorMessageId = `${id}-error`;
+	const domProps = () => filterDOMProps(getProps(), { labelable: true });
+	createEffect(() => {
+		selectData.set(state, { id });
+		onCleanup(() => {
+			selectData.delete(state);
+		});
+	});
+	const { labelProps, fieldProps } = createLabel({
+		get id() {
+			return buttonId;
+		},
+		get label() {
+			return getProps().label;
+		},
+		get "aria-label"() {
+			return getProps()["aria-label"];
+		},
+		get "aria-labelledby"() {
+			return getProps()["aria-labelledby"];
+		},
+		labelElementType: "span"
+	});
+	const { isFocusVisible, focusProps } = createFocusRing({ get autoFocus() {
+		return getProps().autoFocus;
+	} });
+	const isFocused = state.isFocused;
+	const canOpen = () => getProps().allowsEmptyCollection || state.collection().getFirstKey() != null;
+	const isKeyDisabled = (key) => {
+		const collection = state.collection();
+		return state.isKeyDisabled?.(key) || collection.getItem(key)?.isDisabled || false;
+	};
+	const findNextKey = (fromKey, direction) => {
+		const collection = state.collection();
+		const getAdjacent = direction === "forward" ? (k) => collection.getKeyAfter(k) : (k) => collection.getKeyBefore(k);
+		let key = fromKey == null ? (direction === "forward" ? () => collection.getFirstKey() : () => collection.getLastKey())() : getAdjacent(fromKey);
+		while (key != null && isKeyDisabled(key)) key = getAdjacent(key);
+		return key;
+	};
+	const focusKeyForOpen = () => {
+		const selectedKey = state.selectedKey();
+		if (selectedKey != null && !isKeyDisabled(selectedKey)) return selectedKey;
+		return findNextKey(null, "forward");
+	};
+	const openWithFocus = () => {
+		if (state.isOpen() || !canOpen()) return;
+		state.open();
+		const focusKey = focusKeyForOpen();
+		if (focusKey != null) state.setFocusedKey(focusKey);
+	};
+	const { pressProps } = createPress({
+		get isDisabled() {
+			return getProps().isDisabled ?? state.isDisabled;
+		},
+		onPress(e) {
+			if (e.pointerType === "keyboard") return;
+			if (state.isOpen()) state.close();
+			else openWithFocus();
+		}
+	});
+	const { typeSelectProps } = createTypeSelect({
+		collection: () => state.collection(),
+		focusedKey: () => state.selectedKey(),
+		onFocusedKeyChange: (key) => {
+			if (!state.isOpen()) state.setSelectedKey(key);
+			else state.setFocusedKey(key);
+		},
+		isKeyDisabled,
+		get isDisabled() {
+			return Boolean((getProps().disallowTypeAhead ?? false) || getProps().isDisabled || state.isDisabled);
+		}
+	});
+	const onKeyDown = (e) => {
+		if (getProps().isDisabled ?? state.isDisabled) return;
+		const currentKey = state.focusedKey() ?? state.selectedKey();
+		switch (e.key) {
+			case "Enter":
+			case " ":
+				e.preventDefault();
+				if (state.isOpen()) state.close();
+				else openWithFocus();
+				break;
+			case "ArrowDown":
+				e.preventDefault();
+				if (!state.isOpen()) {
+					if (!canOpen()) return;
+					state.open();
+					const focusKey = currentKey != null && !isKeyDisabled(currentKey) ? currentKey : findNextKey(currentKey, "forward");
+					if (focusKey) state.setFocusedKey(focusKey);
+				}
+				break;
+			case "ArrowUp":
+				e.preventDefault();
+				if (!state.isOpen()) {
+					if (!canOpen()) return;
+					state.open();
+					const focusKey = currentKey != null && !isKeyDisabled(currentKey) ? currentKey : findNextKey(currentKey, "backward");
+					if (focusKey) state.setFocusedKey(focusKey);
+				}
+				break;
+			case "ArrowRight":
+				if (!state.isOpen()) {
+					e.preventDefault();
+					const nextKey = findNextKey(currentKey, "forward");
+					if (nextKey != null) state.setSelectedKey(nextKey);
+				}
+				break;
+			case "ArrowLeft":
+				if (!state.isOpen()) {
+					e.preventDefault();
+					const prevKey = findNextKey(currentKey, "backward");
+					if (prevKey != null) state.setSelectedKey(prevKey);
+				}
+				break;
+			case "Home":
+				if (!state.isOpen()) {
+					e.preventDefault();
+					const firstKey = findNextKey(null, "forward");
+					if (firstKey != null) state.setSelectedKey(firstKey);
+				}
+				break;
+			case "End":
+				if (!state.isOpen()) {
+					e.preventDefault();
+					const lastKey = findNextKey(null, "backward");
+					if (lastKey != null) state.setSelectedKey(lastKey);
+				}
+				break;
+			case "Escape":
+				if (state.isOpen()) {
+					e.preventDefault();
+					state.close();
+				}
+				break;
+		}
+	};
+	const handleFocus = (e) => {
+		getProps().onFocus?.(e);
+		getProps().onFocusChange?.(true);
+		state.setFocused(true);
+	};
+	const handleBlur = (e) => {
+		if (state.isOpen()) return;
+		getProps().onBlur?.(e);
+		getProps().onFocusChange?.(false);
+		state.setFocused(false);
+	};
+	return {
+		get labelProps() {
+			return labelProps;
+		},
+		get triggerProps() {
+			const p = getProps();
+			const isOpen = state.isOpen();
+			const isDisabled = p.isDisabled ?? state.isDisabled;
+			const baseProps = mergeProps(domProps(), pressProps, focusProps, fieldProps, {
+				id: buttonId,
+				type: "button",
+				tabIndex: isDisabled ? void 0 : 0,
+				"aria-haspopup": "listbox",
+				"aria-expanded": isOpen,
+				"aria-controls": isOpen ? listBoxId : void 0,
+				"aria-disabled": isDisabled || void 0,
+				"aria-required": p.isRequired || void 0,
+				"aria-describedby": p["aria-describedby"] || void 0,
+				onKeyDown,
+				onFocus: handleFocus,
+				onBlur: handleBlur,
+				"data-open": isOpen || void 0,
+				"data-disabled": isDisabled || void 0,
+				"data-focus-visible": isFocusVisible() || void 0
+			});
+			if (!p.disallowTypeAhead) return mergeProps(baseProps, typeSelectProps);
+			return baseProps;
+		},
+		get valueProps() {
+			return { id: valueId };
+		},
+		get menuProps() {
+			return {
+				id: listBoxId,
+				role: "listbox",
+				"aria-labelledby": buttonId,
+				"aria-multiselectable": state.selectionMode() === "multiple" ? true : void 0,
+				tabIndex: -1,
+				onBlur: (e) => {
+					if (e.currentTarget?.contains(e.relatedTarget)) return;
+					getProps().onBlur?.(e);
+					getProps().onFocusChange?.(false);
+					state.setFocused(false);
+				}
+			};
+		},
+		get descriptionProps() {
+			return { id: descriptionId };
+		},
+		get errorMessageProps() {
+			return { id: errorMessageId };
+		},
+		isFocused,
+		isFocusVisible: () => isFocused() && isFocusVisible(),
+		isOpen: state.isOpen,
+		selectedItem: state.selectedItem
+	};
+}
+//#endregion
+//#region src/select/createHiddenSelect.tsx
+/**
+* Provides a hidden native select element for form integration.
+* Based on @react-aria/select useHiddenSelect.
+*/
+var _tmpl$ = /*#__PURE__*/ template(`<div><label><!$><!/><select><option></option><!$><!/>`), _tmpl$2 = /*#__PURE__*/ template(`<option>`);
+/**
+* Provides the accessibility implementation for a hidden select.
+* This is used for native form submission and accessibility on mobile devices.
+*/
+function createHiddenSelect(props) {
+	const getProps = () => access(props);
+	let selectRef;
+	createEffect(() => {
+		const p = getProps();
+		if (!selectRef) return;
+		const form = selectRef.form;
+		if (!form) return;
+		const handleReset = () => {
+			const defaultKey = p.state.collection().getFirstKey();
+			p.state.setSelectedKey(defaultKey);
+		};
+		form.addEventListener("reset", handleReset);
+		onCleanup(() => {
+			form.removeEventListener("reset", handleReset);
+		});
+	});
+	createEffect(() => {
+		const p = getProps();
+		if (!selectRef || p.validationBehavior !== "native" || !p.validationState) return;
+		createFormValidation({
+			validationBehavior: p.validationBehavior,
+			focus: () => p.triggerRef?.()?.focus()
+		}, p.validationState, () => selectRef);
+	});
+	return {
+		get containerProps() {
+			return {
+				"aria-hidden": true,
+				"data-a11y-ignore": "aria-hidden-focus"
+			};
+		},
+		get selectProps() {
+			const p = getProps();
+			const state = p.state;
+			const selectedKey = state.selectedKey();
+			const selectedKeys = typeof state.selectedKeys === "function" ? state.selectedKeys() : selectedKey != null ? new Set([selectedKey]) : /* @__PURE__ */ new Set();
+			const validationBehavior = p.validationBehavior ?? "aria";
+			const isMultiple = typeof state.selectionMode === "function" && state.selectionMode() === "multiple";
+			const multipleValue = selectedKeys === "all" ? Array.from(state.collection()).map((item) => String(item.key)) : Array.from(selectedKeys).map(String);
+			return {
+				ref: (el) => {
+					selectRef = el;
+				},
+				tabIndex: -1,
+				autoComplete: p.autoComplete,
+				disabled: p.isDisabled ?? state.isDisabled,
+				multiple: isMultiple || void 0,
+				name: p.name,
+				form: p.form,
+				required: validationBehavior === "native" && p.isRequired,
+				value: isMultiple ? multipleValue : selectedKey != null ? String(selectedKey) : "",
+				onChange: (e) => {
+					const target = e.target;
+					if (isMultiple) if (typeof state.setSelectedKeys === "function") state.setSelectedKeys(Array.from(target.selectedOptions).map((o) => o.value));
+					else {
+						const first = target.selectedOptions[0]?.value;
+						state.setSelectedKey(first ?? null);
+					}
+					else state.setSelectedKey(target.value);
+				},
+				style: {
+					position: "absolute",
+					top: 0,
+					left: 0,
+					width: "100%",
+					height: "100%",
+					opacity: 0,
+					"font-size": "16px",
+					border: "none",
+					cursor: "default",
+					margin: 0,
+					padding: 0,
+					"pointer-events": "none"
+				}
+			};
+		},
+		get inputProps() {
+			const p = getProps();
+			const state = p.state;
+			const selectedKey = state.selectedKey();
+			const useTextInput = (p.validationBehavior ?? "aria") === "native" && p.isRequired;
+			return {
+				type: useTextInput ? "text" : "hidden",
+				name: p.name,
+				form: p.form,
+				value: selectedKey != null ? String(selectedKey) : "",
+				disabled: p.isDisabled ?? state.isDisabled,
+				required: useTextInput ? p.isRequired : void 0,
+				style: useTextInput ? { display: "none" } : void 0
+			};
+		}
+	};
+}
+/**
+* A component that renders a hidden native select for form submission.
+* This is useful on mobile devices where native select behavior is preferred.
+*/
+function HiddenSelect(props) {
+	const { containerProps, selectProps } = createHiddenSelect({
+		get state() {
+			return props.state;
+		},
+		get name() {
+			return props.name;
+		},
+		get isDisabled() {
+			return props.isDisabled;
+		},
+		get isRequired() {
+			return props.isRequired;
+		},
+		get autoComplete() {
+			return props.autoComplete;
+		},
+		get form() {
+			return props.form;
+		},
+		get validationBehavior() {
+			return props.validationBehavior;
+		},
+		get triggerRef() {
+			return props.triggerRef;
+		},
+		get validationState() {
+			return props.validationState;
+		}
+	});
+	const collection = () => props.state.collection();
+	const selectedKey = () => props.state.selectedKey();
+	const selectedKeys = () => typeof props.state.selectedKeys === "function" ? props.state.selectedKeys() : selectedKey() != null ? new Set([selectedKey()]) : /* @__PURE__ */ new Set();
+	const isMultiple = () => typeof props.state.selectionMode === "function" && props.state.selectionMode() === "multiple";
+	return (() => {
+		var _el$ = getNextElement(_tmpl$), _el$2 = _el$.firstChild, _el$7 = _el$2.firstChild, [_el$8, _co$2] = getNextMarker(_el$7.nextSibling), _el$3 = _el$8.nextSibling, _el$5 = _el$3.firstChild.nextSibling, [_el$6, _co$] = getNextMarker(_el$5.nextSibling);
+		spread(_el$, containerProps, false, true);
+		insert(_el$2, () => props.label, _el$8, _co$2);
+		spread(_el$3, selectProps, false, true);
+		insert(_el$3, createComponent(For, {
+			get each() {
+				return Array.from(collection());
+			},
+			children: (item) => (() => {
+				var _el$9 = getNextElement(_tmpl$2);
+				insert(_el$9, () => item.textValue);
+				effect(() => setProperty(_el$9, "selected", isMultiple() ? selectedKeys() === "all" ? true : selectedKeys().has(item.key) : item.key === selectedKey()));
+				effect(() => setProperty(_el$9, "value", String(item.key)));
+				return _el$9;
+			})()
+		}), _el$6, _co$);
+		runHydrationEvents();
+		return _el$;
+	})();
+}
+//#endregion
+export { getSelectData as i, createHiddenSelect as n, createSelect as r, HiddenSelect as t };
+
+//# sourceMappingURL=select.js.map