@solid2-aria/components 0.0.0-stage → 0.0.1

package/dist/browser/search-field.js

@@ -0,0 +1,156 @@
+/*
+ * Copyright 2022 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+/*
+ * Derived from Adobe React Spectrum: packages/react-aria-components/src/SearchField.tsx.
+ * Modified for Solid Aria: adapted components, contexts, refs, and reactive properties for Solid 2; uses Solid class props.
+ * Licensed under Apache-2.0. See LICENSES/Apache-2.0.txt and NOTICE.txt at the repository root.
+ */
+import { createContextProps, createRenderProps, createSlot, createSlottedContext, dom } from "./utils.js";
+import { FieldInputContext } from "./autocomplete.js";
+import { LabelContext } from "./label.js";
+import { ButtonContext } from "./button.js";
+import { TextContext } from "./text.js";
+import { FieldErrorContext } from "./field-error.js";
+import { FormContext } from "./form.js";
+import { GroupContext } from "./group.js";
+import { InputContext } from "./input.js";
+import { createComponent, mergeProps } from "@solidjs/web";
+import { mergeProps as mergeProps$1 } from "@solid2-aria/core/utils/merge-props";
+import { createContext, createSignal, merge, omit, untrack } from "solid-js";
+import { filterDOMProps } from "@solid2-aria/core/utils/filter-dom-props";
+import { isTruthy } from "@solid2-aria/core/utils/truthy";
+import { createIsHidden } from "@solid2-aria/core/collections/hidden";
+import { createSearchField } from "@solid2-aria/core/searchfield/create-search-field";
+import { createSearchFieldState } from "@solid2-aria/stately/searchfield/create-search-field-state";
+// src/search-field.tsx
+const SearchFieldContext = createContext(null);
+function SearchField(input) {
+	if (createIsHidden()) return null;
+	const [ownProps, , setRef] = createContextProps(input, untrack(() => input.ref), SearchFieldContext);
+	const fieldInput = createSlottedContext(FieldInputContext);
+	const props = mergeProps$1(fieldInput ? omit(fieldInput, "ref") : {}, ownProps);
+	const form = createSlottedContext(FormContext);
+	const [inputRef, setInputRef] = createSignal(null, { ownedWrite: true });
+	const [registerLabel, label] = createSlot(() => !isTruthy(props["aria-label"]) && !isTruthy(props["aria-labelledby"]));
+	const options = mergeProps$1(props, {
+		get label() {
+			return label();
+		},
+		get validationBehavior() {
+			return props.validationBehavior ?? form?.validationBehavior ?? "native";
+		}
+	});
+	const state = createSearchFieldState(options);
+	const aria = createSearchField(options, state, inputRef);
+	const values = {
+		get isDisabled() {
+			return props.isDisabled === true;
+		},
+		get isEmpty() {
+			return state.value === "";
+		},
+		get isInvalid() {
+			return aria.isInvalid;
+		},
+		get isReadOnly() {
+			return props.isReadOnly === true;
+		},
+		get isRequired() {
+			return props.isRequired === true;
+		},
+		state
+	};
+	const labelProps = mergeProps$1(merge(() => aria.labelProps), { registerSlot: registerLabel });
+	const inputProps = mergeProps$1(merge(() => aria.inputProps), { ref: (element) => {
+		setInputRef(element);
+	} });
+	const clearProps = merge(() => aria.clearButtonProps);
+	const render = createRenderProps(mergeProps$1(props, {
+		defaultClass: "solid2-aria-SearchField",
+		values
+	}));
+	return createComponent(dom.div, mergeProps(() => {
+		return omit(filterDOMProps(props, { global: true }), "id");
+	}, render, {
+		ref: (element) => {
+			setRef(element);
+		},
+		get slot() {
+			return props.slot ?? void 0;
+		},
+		get "data-empty"() {
+			return values.isEmpty || void 0;
+		},
+		get "data-disabled"() {
+			return props.isDisabled ?? void 0;
+		},
+		get "data-invalid"() {
+			return aria.isInvalid || void 0;
+		},
+		get "data-readonly"() {
+			return props.isReadOnly ?? void 0;
+		},
+		get "data-required"() {
+			return props.isRequired ?? void 0;
+		},
+		get children() {
+			return createComponent(LabelContext, {
+				value: labelProps,
+				get children() {
+					return createComponent(InputContext, {
+						value: inputProps,
+						get children() {
+							return createComponent(ButtonContext, {
+								value: clearProps,
+								get children() {
+									return createComponent(GroupContext, {
+										value: {
+											get isDisabled() {
+												return props.isDisabled === true;
+											},
+											get isInvalid() {
+												return aria.isInvalid;
+											}
+										},
+										get children() {
+											return createComponent(TextContext, {
+												value: { slots: {
+													get description() {
+														return aria.descriptionProps;
+													},
+													get errorMessage() {
+														return aria.errorMessageProps;
+													}
+												} },
+												get children() {
+													return createComponent(FieldErrorContext, {
+														value: aria,
+														get children() {
+															return render.children;
+														}
+													});
+												}
+											});
+										}
+									});
+								}
+							});
+						}
+					});
+				}
+			});
+		}
+	}));
+}
+export { SearchField, SearchFieldContext };
+
+//# sourceMappingURL=search-field.js.map

package/dist/browser/search-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"search-field.js","names":["<dom.div\n      {\n        // oxlint-disable solid/reactivity -- Keep prop filtering in the renderer's lazy evaluation.\n        ...omit(filterDOMProps(props, { global: true }), \"id\")\n        // oxlint-enable solid/reactivity\n      }\n      {...render}\n      ref={(element: HTMLDivElement) => {\n        setRef(element);\n      }}\n      slot={props.slot ?? undefined}\n      data-empty={values.isEmpty || undefined}\n      data-disabled={props.isDisabled ?? undefined}\n      data-invalid={aria.isInvalid || undefined}\n      data-readonly={props.isReadOnly ?? undefined}\n      data-required={props.isRequired ?? undefined}\n    >\n      <LabelContext value={labelProps}>\n        <InputContext value={inputProps}>\n          <ButtonContext value={clearProps}>\n            <GroupContext\n              value={{\n                get isDisabled() {\n                  return props.isDisabled === true;\n                },\n                get isInvalid() {\n                  return aria.isInvalid;\n                },\n              }}\n            >\n              <TextContext\n                value={{\n                  slots: {\n                    get description() {\n                      return aria.descriptionProps;\n                    },\n                    get errorMessage() {\n                      return aria.errorMessageProps;\n                    },\n                  },\n                }}\n              >\n                <FieldErrorContext value={aria}>\n                  {render.children}\n                </FieldErrorContext>\n              </TextContext>\n            </GroupContext>\n          </ButtonContext>\n        </InputContext>\n      </LabelContext>\n    </dom.div>","dom.div","ref={(element: HTMLDivElement) => {\n        setRef(element);\n      }}","<LabelContext value={labelProps}>\n        <InputContext value={inputProps}>\n          <ButtonContext value={clearProps}>\n            <GroupContext\n              value={{\n                get isDisabled() {\n                  return props.isDisabled === true;\n                },\n                get isInvalid() {\n                  return aria.isInvalid;\n                },\n              }}\n            >\n              <TextContext\n                value={{\n                  slots: {\n                    get description() {\n                      return aria.descriptionProps;\n                    },\n                    get errorMessage() {\n                      return aria.errorMessageProps;\n                    },\n                  },\n                }}\n              >\n                <FieldErrorContext value={aria}>\n                  {render.children}\n                </FieldErrorContext>\n              </TextContext>\n            </GroupContext>\n          </ButtonContext>\n        </InputContext>\n      </LabelContext>","value={labelProps}","<InputContext value={inputProps}>\n          <ButtonContext value={clearProps}>\n            <GroupContext\n              value={{\n                get isDisabled() {\n                  return props.isDisabled === true;\n                },\n                get isInvalid() {\n                  return aria.isInvalid;\n                },\n              }}\n            >\n              <TextContext\n                value={{\n                  slots: {\n                    get description() {\n                      return aria.descriptionProps;\n                    },\n                    get errorMessage() {\n                      return aria.errorMessageProps;\n                    },\n                  },\n                }}\n              >\n                <FieldErrorContext value={aria}>\n                  {render.children}\n                </FieldErrorContext>\n              </TextContext>\n            </GroupContext>\n          </ButtonContext>\n        </InputContext>","value={inputProps}","<ButtonContext value={clearProps}>\n            <GroupContext\n              value={{\n                get isDisabled() {\n                  return props.isDisabled === true;\n                },\n                get isInvalid() {\n                  return aria.isInvalid;\n                },\n              }}\n            >\n              <TextContext\n                value={{\n                  slots: {\n                    get description() {\n                      return aria.descriptionProps;\n                    },\n                    get errorMessage() {\n                      return aria.errorMessageProps;\n                    },\n                  },\n                }}\n              >\n                <FieldErrorContext value={aria}>\n                  {render.children}\n                </FieldErrorContext>\n              </TextContext>\n            </GroupContext>\n          </ButtonContext>","value={clearProps}","<GroupContext\n              value={{\n                get isDisabled() {\n                  return props.isDisabled === true;\n                },\n                get isInvalid() {\n                  return aria.isInvalid;\n                },\n              }}\n            >\n              <TextContext\n                value={{\n                  slots: {\n                    get description() {\n                      return aria.descriptionProps;\n                    },\n                    get errorMessage() {\n                      return aria.errorMessageProps;\n                    },\n                  },\n                }}\n              >\n                <FieldErrorContext value={aria}>\n                  {render.children}\n                </FieldErrorContext>\n              </TextContext>\n            </GroupContext>","value={{\n                get isDisabled() {\n                  return props.isDisabled === true;\n                },\n                get isInvalid() {\n                  return aria.isInvalid;\n                },\n              }}","<TextContext\n                value={{\n                  slots: {\n                    get description() {\n                      return aria.descriptionProps;\n                    },\n                    get errorMessage() {\n                      return aria.errorMessageProps;\n                    },\n                  },\n                }}\n              >\n                <FieldErrorContext value={aria}>\n                  {render.children}\n                </FieldErrorContext>\n              </TextContext>","value={{\n                  slots: {\n                    get description() {\n                      return aria.descriptionProps;\n                    },\n                    get errorMessage() {\n                      return aria.errorMessageProps;\n                    },\n                  },\n                }}","<FieldErrorContext value={aria}>\n                  {render.children}\n                </FieldErrorContext>","value={aria}","mergeProps","_$createComponent","_$mergeProps"],"sources":["../../src/search-field.tsx"],"sourcesContent":["/*\n * Copyright 2022 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n/*\n * Derived from Adobe React Spectrum: packages/react-aria-components/src/SearchField.tsx.\n * Modified for Solid Aria: adapted components, contexts, refs, and reactive properties for Solid 2; uses Solid class props.\n * Licensed under Apache-2.0. See LICENSES/Apache-2.0.txt and NOTICE.txt at the repository root.\n */\n\nimport { createIsHidden } from \"@solid2-aria/core/collections/hidden\";\nimport { createSearchField } from \"@solid2-aria/core/searchfield/create-search-field\";\nimport type { AriaSearchFieldProps } from \"@solid2-aria/core/searchfield/create-search-field\";\nimport { filterDOMProps } from \"@solid2-aria/core/utils/filter-dom-props\";\nimport { mergeProps } from \"@solid2-aria/core/utils/merge-props\";\nimport { isTruthy } from \"@solid2-aria/core/utils/truthy\";\nimport { createSearchFieldState } from \"@solid2-aria/stately/searchfield/create-search-field-state\";\nimport type { SearchFieldState } from \"@solid2-aria/stately/searchfield/create-search-field-state\";\nimport type { JSX } from \"@solidjs/web\";\nimport { untrack, createSignal, merge, createContext, omit } from \"solid-js\";\n\nimport { FieldInputContext } from \"./autocomplete\";\nimport { ButtonContext } from \"./button\";\nimport { FieldErrorContext } from \"./field-error\";\nimport { FormContext } from \"./form\";\nimport { GroupContext } from \"./group\";\nimport { InputContext } from \"./input\";\nimport { LabelContext } from \"./label\";\nimport { TextContext } from \"./text\";\nimport {\n  dom,\n  createContextProps,\n  createRenderProps,\n  createSlot,\n  createSlottedContext,\n} from \"./utils\";\nimport type { Ref, ContextValue, SlotProps, RenderProps } from \"./utils\";\n\nexport interface SearchFieldRenderProps {\n  isEmpty: boolean;\n  isDisabled: boolean;\n  isInvalid: boolean;\n  isReadOnly: boolean;\n  isRequired: boolean;\n  state: SearchFieldState;\n}\n\nexport interface SearchFieldProps\n  extends\n    Omit<\n      AriaSearchFieldProps,\n      \"label\" | \"description\" | \"errorMessage\" | \"children\"\n    >,\n    SlotProps,\n    RenderProps<SearchFieldRenderProps> {\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const SearchFieldContext =\n  createContext<ContextValue<SearchFieldProps, HTMLDivElement>>(null);\n\nexport function SearchField(input: SearchFieldProps): JSX.Element {\n  if (createIsHidden()) {\n    // oxlint-disable-next-line solid/components-return-once -- Static collection traversal and context registration are fixed when the owner is created.\n    return null;\n  }\n\n  const [ownProps, , setRef] = createContextProps(\n    input,\n    untrack(() => input.ref),\n    SearchFieldContext\n  );\n\n  const fieldInput = createSlottedContext(FieldInputContext);\n\n  const props = mergeProps(\n    fieldInput\n      ? // oxlint-disable solid/reactivity -- Keep prop filtering in the renderer's lazy evaluation.\n        omit(fieldInput, \"ref\")\n      : // oxlint-enable solid/reactivity\n        {},\n    ownProps\n  );\n\n  const form = createSlottedContext(FormContext);\n\n  const [inputRef, setInputRef] = createSignal<HTMLInputElement | null>(null, {\n    ownedWrite: true,\n  });\n\n  const [registerLabel, label] = createSlot(\n    () => !isTruthy(props[\"aria-label\"]) && !isTruthy(props[\"aria-labelledby\"])\n  );\n\n  const options = mergeProps(props, {\n    get label() {\n      return label();\n    },\n    get validationBehavior() {\n      return props.validationBehavior ?? form?.validationBehavior ?? \"native\";\n    },\n  });\n\n  const state = createSearchFieldState(options);\n  const aria = createSearchField(options, state, inputRef);\n\n  const values: SearchFieldRenderProps = {\n    get isDisabled() {\n      return props.isDisabled === true;\n    },\n    get isEmpty() {\n      return state.value === \"\";\n    },\n    get isInvalid() {\n      return aria.isInvalid;\n    },\n    get isReadOnly() {\n      return props.isReadOnly === true;\n    },\n    get isRequired() {\n      return props.isRequired === true;\n    },\n    state,\n  };\n\n  const labelProps = mergeProps(\n    merge(() => aria.labelProps),\n    { registerSlot: registerLabel }\n  );\n\n  const inputProps = mergeProps(\n    merge(() => aria.inputProps),\n    {\n      ref: (element: HTMLInputElement) => {\n        setInputRef(element);\n      },\n    }\n  );\n\n  const clearProps = merge(() => aria.clearButtonProps);\n\n  const render = createRenderProps(\n    mergeProps(props, { defaultClass: \"solid2-aria-SearchField\", values })\n  );\n\n  return (\n    <dom.div\n      {\n        // oxlint-disable solid/reactivity -- Keep prop filtering in the renderer's lazy evaluation.\n        ...omit(filterDOMProps(props, { global: true }), \"id\")\n        // oxlint-enable solid/reactivity\n      }\n      {...render}\n      ref={(element: HTMLDivElement) => {\n        setRef(element);\n      }}\n      slot={props.slot ?? undefined}\n      data-empty={values.isEmpty || undefined}\n      data-disabled={props.isDisabled ?? undefined}\n      data-invalid={aria.isInvalid || undefined}\n      data-readonly={props.isReadOnly ?? undefined}\n      data-required={props.isRequired ?? undefined}\n    >\n      <LabelContext value={labelProps}>\n        <InputContext value={inputProps}>\n          <ButtonContext value={clearProps}>\n            <GroupContext\n              value={{\n                get isDisabled() {\n                  return props.isDisabled === true;\n                },\n                get isInvalid() {\n                  return aria.isInvalid;\n                },\n              }}\n            >\n              <TextContext\n                value={{\n                  slots: {\n                    get description() {\n                      return aria.descriptionProps;\n                    },\n                    get errorMessage() {\n                      return aria.errorMessageProps;\n                    },\n                  },\n                }}\n              >\n                <FieldErrorContext value={aria}>\n                  {render.children}\n                </FieldErrorContext>\n              </TextContext>\n            </GroupContext>\n          </ButtonContext>\n        </InputContext>\n      </LabelContext>\n    </dom.div>\n  );\n}\n"],"mappings":"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"}

package/dist/browser/select.d.ts

@@ -0,0 +1,115 @@
+/*
+ * Copyright 2022 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+/*
+ * Derived from Adobe React Spectrum: packages/react-aria-components/src/Select.tsx.
+ * Modified for Solid Aria: adapted collection ownership, contexts, accessibility primitives, and reactive properties for Solid 2; uses Solid class props.
+ * Licensed under Apache-2.0. See LICENSES/Apache-2.0.txt and NOTICE.txt at the repository root.
+ */
+import { ClassOrFunction, ContextValue, RACValidation, Ref, RenderProps, SlotProps } from "./utils.js";
+import { JSX } from "@solidjs/web";
+import { AriaSelectProps } from "@solid2-aria/core/select/create-select";
+import { SelectState } from "@solid2-aria/stately/select/create-select-state";
+import { GlobalDOMAttributes } from "@solid2-aria/types-shared-web";
+export declare const SelectContext: import("solid-js").Context<ContextValue<Omit<SelectProps<any, SelectionMode>, "onChange" | "validate">, HTMLDivElement>>;
+export declare const SelectStateContext: import("solid-js").Context<SelectState<unknown, SelectionMode> | null>;
+export declare const SelectValueContext: import("solid-js").Context<ContextValue<SelectValueProps<any>, HTMLSpanElement>>;
+type SelectionMode = "single" | "multiple";
+export interface SelectRenderProps {
+  /**
+   * Whether the select is focused, either via a mouse or keyboard.
+   *
+   * @selector [data-focused]
+   */
+  isFocused: boolean;
+  /**
+   * Whether the select is keyboard focused.
+   *
+   * @selector [data-focus-visible]
+   */
+  isFocusVisible: boolean;
+  /**
+   * Whether the select is disabled.
+   *
+   * @selector [data-disabled]
+   */
+  isDisabled: boolean;
+  /**
+   * Whether the select is currently open.
+   *
+   * @selector [data-open]
+   */
+  isOpen: boolean;
+  /**
+   * Whether the select is invalid.
+   *
+   * @selector [data-invalid]
+   */
+  isInvalid: boolean;
+  /**
+   * Whether the select is required.
+   *
+   * @selector [data-required]
+   */
+  isRequired: boolean;
+}
+export interface SelectProps<T = object, M extends SelectionMode = "single"> extends Omit<AriaSelectProps<T, M>, "children" | "label" | "description" | "errorMessage" | "validationState" | "validationBehavior" | "items">, RACValidation, RenderProps<SelectRenderProps>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {
+  /**
+   * The CSS [class](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class) for the
+   * element. A function may be provided to compute the class based on component state.
+   *
+   * @default 'react-aria-Select'
+   */
+  class?: ClassOrFunction<SelectRenderProps>;
+  /**
+   * Temporary text that occupies the select when it is empty.
+   *
+   * @default 'Select an item' (localized)
+   */
+  placeholder?: string;
+}
+export interface SelectValueRenderProps<T> {
+  /**
+   * Whether the value is a placeholder.
+   *
+   * @selector [data-placeholder]
+   */
+  isPlaceholder: boolean;
+  /**
+   * The object value of the first selected item.
+   *
+   * @deprecated
+   */
+  selectedItem: T | null;
+  /** The object values of the currently selected items. */
+  selectedItems: (T | null)[];
+  /** The textValue of the currently selected items. */
+  selectedText: string;
+  /** The state of the select. */
+  state: SelectState<T, "single" | "multiple">;
+}
+export interface SelectValueProps<T> extends Omit<JSX.HTMLAttributes<HTMLElement>, keyof RenderProps<unknown>>, RenderProps<SelectValueRenderProps<T>, "span"> {
+  /**
+   * The CSS [class](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class) for the
+   * element. A function may be provided to compute the class based on component state.
+   *
+   * @default 'react-aria-SelectValue'
+   */
+  class?: ClassOrFunction<SelectValueRenderProps<T>>;
+}
+export declare function Select<T extends object, M extends SelectionMode = "single">(input: SelectProps<T, M> & {
+  ref?: Ref<HTMLDivElement>;
+}): JSX.Element;
+export declare function SelectValue<T>(input: SelectValueProps<T> & {
+  ref?: Ref<HTMLSpanElement>;
+}): JSX.Element;
+export {};
+//# sourceMappingURL=select.d.ts.map

package/dist/browser/select.js

@@ -0,0 +1,351 @@
+/*
+ * Copyright 2022 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+/*
+ * Derived from Adobe React Spectrum: packages/react-aria-components/src/Select.tsx.
+ * Modified for Solid Aria: adapted collection ownership, contexts, accessibility primitives, and reactive properties for Solid 2; uses Solid class props.
+ * Licensed under Apache-2.0. See LICENSES/Apache-2.0.txt and NOTICE.txt at the repository root.
+ */
+import { createContextProps, createRenderProps, createSlot, createSlottedContext, dom } from "./utils.js";
+import { LabelContext } from "./label.js";
+import { ButtonContext } from "./button.js";
+import { TextContext } from "./text.js";
+import { FieldErrorContext } from "./field-error.js";
+import { FormContext } from "./form.js";
+import intl_default from "./intl/index.js";
+import { ListBoxContext, ListStateContext } from "./list-box.js";
+import { OverlayTriggerStateContext } from "./overlay-contexts.js";
+import { PopoverContext } from "./popover.js";
+import { applyRef, createComponent, memo, mergeProps } from "@solidjs/web";
+import { mergeProps as mergeProps$1 } from "@solid2-aria/core/utils/merge-props";
+import { createContext, createMemo, createSignal, merge, omit, untrack, useContext } from "solid-js";
+import { BaseCollection } from "@solid2-aria/core/collections/base-collection";
+import { CollectionBuilder } from "@solid2-aria/core/collections/collection-builder";
+import { filterDOMProps } from "@solid2-aria/core/utils/filter-dom-props";
+import { createFocusRing } from "@solid2-aria/core/focus/create-focus-ring";
+import { isTruthy } from "@solid2-aria/core/utils/truthy";
+import { createIsHidden } from "@solid2-aria/core/collections/hidden";
+import { createLocalizedStringFormatter } from "@solid2-aria/core/i18n/create-localized-string-formatter";
+import { createListFormatter } from "@solid2-aria/core/i18n/create-list-formatter";
+import { createSelect } from "@solid2-aria/core/select/create-select";
+import { HiddenSelect } from "@solid2-aria/core/select/hidden-select";
+import { createSelectState } from "@solid2-aria/stately/select/create-select-state";
+// src/select.tsx
+const SelectContext = createContext(null);
+const SelectStateContext = createContext(null);
+const SelectValueContext = createContext(null);
+function Select(input) {
+	if (createIsHidden()) return null;
+	const [props, , setRef] = createContextProps(input, untrack(() => input.ref), SelectContext);
+	const contentValues = {
+		get isDisabled() {
+			return props.isDisabled === true;
+		},
+		isFocusVisible: false,
+		isFocused: false,
+		get isInvalid() {
+			return props.isInvalid === true;
+		},
+		isOpen: false,
+		get isRequired() {
+			return props.isRequired === true;
+		}
+	};
+	const content = () => {
+		const child = props.children;
+		return typeof child === "function" ? child({
+			...contentValues,
+			defaultChildren: void 0
+		}) : child;
+	};
+	return createComponent(ListStateContext, {
+		value: null,
+		get children() {
+			return createComponent(CollectionBuilder, {
+				createCollection: () => new BaseCollection(),
+				get content() {
+					return content();
+				},
+				children: (collection) => createComponent(SelectInner, {
+					props,
+					collection,
+					selectRef: setRef
+				})
+			});
+		}
+	});
+}
+function SelectInner(input) {
+	const [scrollRef, setScrollRef] = createSignal(null, { ownedWrite: true });
+	const { props } = untrack(() => input);
+	const form = createSlottedContext(FormContext);
+	const validationBehavior = () => props.validationBehavior ?? form?.validationBehavior ?? "native";
+	const state = createSelectState(mergeProps$1(props, {
+		children: void 0,
+		get collection() {
+			return input.collection;
+		},
+		get validationBehavior() {
+			return validationBehavior();
+		}
+	}));
+	const focus = createFocusRing({ within: true });
+	const [buttonRef, setButtonRef] = createSignal(null, { ownedWrite: true });
+	const [registerLabel, label] = createSlot(() => !isTruthy(props["aria-label"]) && !isTruthy(props["aria-labelledby"]));
+	const aria = createSelect(mergeProps$1(props, {
+		get label() {
+			return label();
+		},
+		get validationBehavior() {
+			return validationBehavior();
+		}
+	}), state, buttonRef);
+	const render = createRenderProps(mergeProps$1(props, {
+		defaultClass: "solid2-aria-Select",
+		values: {
+			get isDisabled() {
+				return props.isDisabled === true;
+			},
+			get isFocusVisible() {
+				return focus.isFocusVisible;
+			},
+			get isFocused() {
+				return state.isFocused;
+			},
+			get isInvalid() {
+				return aria.isInvalid;
+			},
+			get isOpen() {
+				return state.isOpen;
+			},
+			get isRequired() {
+				return props.isRequired === true;
+			}
+		}
+	}));
+	return createComponent(SelectContext, {
+		value: props,
+		get children() {
+			return createComponent(SelectStateContext, {
+				value: state,
+				get children() {
+					return createComponent(SelectValueContext, {
+						get value() {
+							return aria.valueProps;
+						},
+						get children() {
+							return createComponent(LabelContext, {
+								get value() {
+									return mergeProps$1(merge(() => aria.labelProps ?? {}), {
+										get elementType() {
+											return "span";
+										},
+										registerSlot: registerLabel
+									});
+								},
+								get children() {
+									return createComponent(ButtonContext, {
+										get value() {
+											return mergeProps$1(merge(() => aria.triggerProps ?? {}), {
+												get autoFocus() {
+													return props.autoFocus;
+												},
+												get isPressed() {
+													return state.isOpen;
+												},
+												ref: (element) => {
+													setButtonRef(element);
+												}
+											});
+										},
+										get children() {
+											return createComponent(OverlayTriggerStateContext, {
+												value: state,
+												get children() {
+													return createComponent(PopoverContext, {
+														get value() {
+															return mergeProps$1({
+																clearContexts: [
+																	LabelContext,
+																	ButtonContext,
+																	TextContext
+																],
+																get placement() {
+																	return "bottom start";
+																},
+																scrollRef,
+																trigger: "Select",
+																triggerRef: buttonRef
+															}, { get "aria-labelledby"() {
+																return aria.menuProps["aria-labelledby"];
+															} });
+														},
+														get children() {
+															return createComponent(ListBoxContext, {
+																get value() {
+																	return mergeProps$1(merge(() => aria.menuProps ?? {}), { ref: (element) => {
+																		setScrollRef(element);
+																	} });
+																},
+																get children() {
+																	return createComponent(ListStateContext, {
+																		value: state,
+																		get children() {
+																			return createComponent(TextContext, {
+																				value: { slots: {
+																					get description() {
+																						return aria.descriptionProps;
+																					},
+																					get errorMessage() {
+																						return aria.errorMessageProps;
+																					}
+																				} },
+																				get children() {
+																					return createComponent(FieldErrorContext, {
+																						value: aria,
+																						get children() {
+																							return createComponent(dom.div, mergeProps(() => {
+																								return mergeProps$1(omit(filterDOMProps(props, { global: true }), "id"), render, merge(() => focus.focusProps ?? {}));
+																							}, {
+																								ref(r$) {
+																									var _ref$ = input.selectRef;
+																									typeof _ref$ === "function" || Array.isArray(_ref$) ? applyRef(_ref$, r$) : input.selectRef = r$;
+																								},
+																								get slot() {
+																									return props.slot ?? void 0;
+																								},
+																								get "data-focused"() {
+																									return state.isFocused || void 0;
+																								},
+																								get "data-focus-visible"() {
+																									return focus.isFocusVisible || void 0;
+																								},
+																								get "data-open"() {
+																									return state.isOpen || void 0;
+																								},
+																								get "data-disabled"() {
+																									return props.isDisabled ?? void 0;
+																								},
+																								get "data-invalid"() {
+																									return aria.isInvalid || void 0;
+																								},
+																								get "data-required"() {
+																									return props.isRequired ?? void 0;
+																								},
+																								get children() {
+																									return [memo(() => {
+																										return render.children;
+																									}), createComponent(HiddenSelect, mergeProps(() => {
+																										return aria.hiddenSelectProps;
+																									}, { get autoComplete() {
+																										return props.autoComplete;
+																									} }))];
+																								}
+																							}));
+																						}
+																					});
+																				}
+																			});
+																		}
+																	});
+																}
+															});
+														}
+													});
+												}
+											});
+										}
+									});
+								}
+							});
+						}
+					});
+				}
+			});
+		}
+	});
+}
+function SelectValue(input) {
+	if (createIsHidden()) return null;
+	const [props, , setRef] = createContextProps(input, untrack(() => input.ref), SelectValueContext);
+	const current = useContext(SelectStateContext);
+	if (!current) throw new Error("SelectValue must be rendered in a Select.");
+	const state = current;
+	const context = createSlottedContext(SelectContext);
+	const formatter = createListFormatter();
+	const strings = createLocalizedStringFormatter(intl_default, "@solid2-aria/components");
+	const text = createMemo(() => state.selectedItems.map((item) => item.textValue));
+	const selectedText = createMemo(() => state.selectionManager.selectionMode === "single" ? text()[0] ?? "" : formatter.format(text()));
+	const defaults = createMemo(() => {
+		const rendered = state.selectedItems.map((item) => {
+			const content = item.rendered;
+			if (typeof content === "function") return content({
+				defaultChildren: void 0,
+				isDisabled: false,
+				isFocusVisible: false,
+				isFocused: false,
+				isHovered: false,
+				isPressed: false,
+				isSelected: false,
+				selectionBehavior: "toggle",
+				selectionMode: "single"
+			});
+			return item.rendered;
+		});
+		if (!rendered.length) return context?.placeholder ?? strings.format("selectPlaceholder");
+		if (state.selectionManager.selectionMode === "single") return rendered[0];
+		let index = 0;
+		return formatter.formatToParts(text()).map((part) => part.type === "element" ? rendered[index += 1] : part.value);
+	});
+	const values = {
+		get isPlaceholder() {
+			return state.selectedItems.length === 0;
+		},
+		get selectedItem() {
+			return state.selectedItems[0]?.value ?? null;
+		},
+		get selectedItems() {
+			return state.selectedItems.map((item) => item.value);
+		},
+		get selectedText() {
+			return selectedText();
+		},
+		state
+	};
+	const render = createRenderProps(mergeProps$1(props, {
+		get defaultChildren() {
+			return defaults();
+		},
+		defaultClass: "solid2-aria-SelectValue",
+		values
+	}));
+	return createComponent(dom.span, mergeProps(() => {
+		return filterDOMProps(props, { global: true });
+	}, render, {
+		ref: (element) => {
+			setRef(element);
+		},
+		get "data-placeholder"() {
+			return values.isPlaceholder || void 0;
+		},
+		get children() {
+			return createComponent(TextContext, {
+				value: null,
+				get children() {
+					return render.children;
+				}
+			});
+		}
+	}));
+}
+export { Select, SelectContext, SelectStateContext, SelectValue, SelectValueContext };
+
+//# sourceMappingURL=select.js.map