@maanlamp/react-web-ui 0.0.0-stage → 0.1.0

package/dist/components/segmented-control-field/segmented-control.js

@@ -0,0 +1,199 @@
+import { Field } from "../field/field.js";
+import { fieldStateAttributes } from "../field/field-state.js";
+import { useFieldFocus } from "../field/use-field-focus.js";
+import { FieldsetLegend, FieldsetRoot } from "../field/fieldset.js";
+import { useSlidingIndicator } from "../../lib/sliding-indicator/use-sliding-indicator.js";
+import segmented_control_module_default from "./segmented-control.module.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { Toggle } from "@base-ui/react/toggle";
+import { ToggleGroup } from "@base-ui/react/toggle-group";
+// src/components/segmented-control-field/segmented-control.tsx
+var SegmentedControlGroup = (t0) => {
+	const $ = c(18);
+	let children;
+	let className;
+	let invalid;
+	let onValueChange;
+	let props;
+	let readOnly;
+	if ($[0] !== t0) {
+		({className, readOnly, invalid, onValueChange, children, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = invalid;
+		$[4] = onValueChange;
+		$[5] = props;
+		$[6] = readOnly;
+	} else {
+		children = $[1];
+		className = $[2];
+		invalid = $[3];
+		onValueChange = $[4];
+		props = $[5];
+		readOnly = $[6];
+	}
+	let t1;
+	if ($[7] !== className) {
+		t1 = clsx(segmented_control_module_default.group, className);
+		$[7] = className;
+		$[8] = t1;
+	} else t1 = $[8];
+	const t2 = readOnly === true ? void 0 : onValueChange;
+	let t3;
+	if ($[9] !== invalid || $[10] !== readOnly) {
+		t3 = fieldStateAttributes({
+			readonly: readOnly,
+			invalid
+		});
+		$[9] = invalid;
+		$[10] = readOnly;
+		$[11] = t3;
+	} else t3 = $[11];
+	let t4;
+	if ($[12] !== children || $[13] !== props || $[14] !== t1 || $[15] !== t2 || $[16] !== t3) {
+		t4 = /* @__PURE__ */ jsx(ToggleGroup, {
+			className: t1,
+			onValueChange: t2,
+			...t3,
+			...props,
+			children
+		});
+		$[12] = children;
+		$[13] = props;
+		$[14] = t1;
+		$[15] = t2;
+		$[16] = t3;
+		$[17] = t4;
+	} else t4 = $[17];
+	return t4;
+};
+var SegmentedControlOption = (t0) => {
+	const $ = c(14);
+	let children;
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, children, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = props;
+	} else {
+		children = $[1];
+		className = $[2];
+		props = $[3];
+	}
+	const focus = useFieldFocus(props);
+	let t1;
+	if ($[4] !== className) {
+		t1 = clsx(segmented_control_module_default.option, className);
+		$[4] = className;
+		$[5] = t1;
+	} else t1 = $[5];
+	let t2;
+	if ($[6] !== focus) {
+		t2 = fieldStateAttributes(focus);
+		$[6] = focus;
+		$[7] = t2;
+	} else t2 = $[7];
+	let t3;
+	if ($[8] !== children || $[9] !== focus.props || $[10] !== props || $[11] !== t1 || $[12] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Toggle, {
+			className: t1,
+			...t2,
+			...props,
+			...focus.props,
+			children
+		});
+		$[8] = children;
+		$[9] = focus.props;
+		$[10] = props;
+		$[11] = t1;
+		$[12] = t2;
+		$[13] = t3;
+	} else t3 = $[13];
+	return t3;
+};
+/**
+* The pill that slides to the pressed option. It holds a second copy of every
+* label, offset so that only the pressed one falls inside the pill, so the ink
+* changes colour as the pill arrives rather than the instant the value does.
+* Arriving from an empty group it lands in place and pops.
+*
+* @example
+* <SegmentedControl.Indicator options={options} />
+*/
+var SegmentedControlIndicator = (t0) => {
+	const $ = c(8);
+	const { options } = t0;
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = { active: "[data-pressed]" };
+		$[0] = t1;
+	} else t1 = $[0];
+	const ref = useSlidingIndicator(t1);
+	let t2;
+	if ($[1] !== options) {
+		t2 = options.map(_temp);
+		$[1] = options;
+		$[2] = t2;
+	} else t2 = $[2];
+	let t3;
+	if ($[3] !== t2) {
+		t3 = /* @__PURE__ */ jsx("span", {
+			className: segmented_control_module_default.indicatorLabels,
+			children: t2
+		});
+		$[3] = t2;
+		$[4] = t3;
+	} else t3 = $[4];
+	let t4;
+	if ($[5] !== ref || $[6] !== t3) {
+		t4 = /* @__PURE__ */ jsx("span", {
+			ref,
+			"aria-hidden": "true",
+			className: segmented_control_module_default.indicator,
+			children: t3
+		});
+		$[5] = ref;
+		$[6] = t3;
+		$[7] = t4;
+	} else t4 = $[7];
+	return t4;
+};
+/**
+* The styled parts of a single-choice base-ui ToggleGroup: a track of options,
+* one pressed at a time, with a pill that slides to it. The `Root` is a
+* fieldset named by its `Legend`. For the ordinary case, use
+* `SegmentedControlField`.
+*
+* @example
+* <SegmentedControl.Root filled={view !== null}>
+* 	<SegmentedControl.Legend optionalLabel="optional">View</SegmentedControl.Legend>
+* 	<SegmentedControl.Group value={view === null ? [] : [view]} onValueChange={next => setView(next[0] ?? null)}>
+* 		<SegmentedControl.Option value="list">List</SegmentedControl.Option>
+* 		<SegmentedControl.Option value="board">Board</SegmentedControl.Option>
+* 		<SegmentedControl.Indicator options={views} />
+* 	</SegmentedControl.Group>
+* </SegmentedControl.Root>
+*/
+var SegmentedControl = {
+	Root: FieldsetRoot,
+	Legend: FieldsetLegend,
+	Group: SegmentedControlGroup,
+	Option: SegmentedControlOption,
+	Indicator: SegmentedControlIndicator,
+	Description: Field.Description,
+	Error: Field.Error,
+	useIds: Field.useIds
+};
+function _temp(option) {
+	return /* @__PURE__ */ jsx("span", {
+		className: segmented_control_module_default.option,
+		children: option.label
+	}, option.value);
+}
+export { SegmentedControl };

package/dist/components/segmented-control-field/segmented-control.module.js

@@ -0,0 +1,12 @@
+import './segmented-control.css';// src/components/segmented-control-field/segmented-control.module.scss
+var group = "_group_1umzz_3";
+var option = "_option_1umzz_60";
+var indicator = "_indicator_1umzz_120";
+var indicatorLabels = "_indicatorLabels_1umzz_165";
+var segmented_control_module_default = {
+	group,
+	option,
+	indicator,
+	indicatorLabels
+};
+export { segmented_control_module_default as default, group, indicator, indicatorLabels, option };

package/dist/components/segmented-control-field/tsf-segmented-control-field.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from "react";
+import { type ConnectedFieldProps } from "../../lib/forms/use-connected-field.ts";
+import { type SegmentedControlFieldProps } from "./segmented-control-field.tsx";
+export type TSFSegmentedControlFieldProps = Omit<SegmentedControlFieldProps, keyof ConnectedFieldProps | "value" | "onValueChange">;
+/**
+ * `SegmentedControlField` bound to the TanStack Form field it renders in, whose
+ * value is the chosen option's value or `null`. Reach it as
+ * `field.SegmentedControlField` inside `form.AppField`.
+ *
+ * @example
+ * <form.AppField name="view">
+ * 	{field => <field.SegmentedControlField label="View" optionalLabel="optional" options={views} />}
+ * </form.AppField>
+ */
+export declare const TSFSegmentedControlField: (props: TSFSegmentedControlFieldProps) => ReactNode;
+//# sourceMappingURL=tsf-segmented-control-field.d.ts.map

package/dist/components/segmented-control-field/tsf-segmented-control-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tsf-segmented-control-field.d.ts","sourceRoot":"","sources":["../../../src/components/segmented-control-field/tsf-segmented-control-field.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EACN,KAAK,mBAAmB,EAExB,MAAM,wCAAwC,CAAC;AAChD,OAAO,EAEN,KAAK,0BAA0B,EAC/B,MAAM,+BAA+B,CAAC;AAEvC,MAAM,MAAM,6BAA6B,GAAG,IAAI,CAC/C,0BAA0B,EAC1B,MAAM,mBAAmB,GAAG,OAAO,GAAG,eAAe,CACrD,CAAC;AAEF;;;;;;;;;GASG;AACH,eAAO,MAAM,wBAAwB,UAC7B,6BAA6B,KAClC,SAaF,CAAC"}

package/dist/components/segmented-control-field/tsf-segmented-control-field.js

@@ -0,0 +1,41 @@
+import { useConnectedField } from "../../lib/forms/use-connected-field.js";
+import { SegmentedControlField } from "./segmented-control-field.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+// src/components/segmented-control-field/tsf-segmented-control-field.tsx
+/**
+* `SegmentedControlField` bound to the TanStack Form field it renders in, whose
+* value is the chosen option's value or `null`. Reach it as
+* `field.SegmentedControlField` inside `form.AppField`.
+*
+* @example
+* <form.AppField name="view">
+* 	{field => <field.SegmentedControlField label="View" optionalLabel="optional" options={views} />}
+* </form.AppField>
+*/
+var TSFSegmentedControlField = (props) => {
+	const $ = c(7);
+	const { field, props: connected } = useConnectedField();
+	let t0;
+	if ($[0] !== field) {
+		t0 = (value) => field.handleChange(value);
+		$[0] = field;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== connected || $[3] !== field.state.value || $[4] !== props || $[5] !== t0) {
+		t1 = /* @__PURE__ */ jsx(SegmentedControlField, {
+			...props,
+			...connected,
+			value: field.state.value,
+			onValueChange: t0
+		});
+		$[2] = connected;
+		$[3] = field.state.value;
+		$[4] = props;
+		$[5] = t0;
+		$[6] = t1;
+	} else t1 = $[6];
+	return t1;
+};
+export { TSFSegmentedControlField };

package/dist/components/select-field/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./select.tsx";
+export * from "./select-field.tsx";
+export * from "./tsf-select-field.tsx";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/select-field/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/select-field/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC"}

package/dist/components/select-field/index.js

@@ -0,0 +1,4 @@
+import { Select } from "./select.js";
+import { SelectField } from "./select-field.js";
+import { TSFSelectField } from "./tsf-select-field.js";
+export { Select, SelectField, TSFSelectField };

package/dist/components/select-field/select-context.d.ts

@@ -0,0 +1,21 @@
+import { type Context } from "react";
+/** One choice of a select: what it shows and the value it stands for. */
+export type SelectOption<T extends string> = Readonly<{
+    label: string;
+    value: T;
+    /** A second, muted line under the label. */
+    detail?: string;
+}>;
+export type SelectContextValue = Readonly<{
+    options: readonly SelectOption<string>[];
+}>;
+export declare const SelectContext: Context<SelectContextValue | null>;
+/**
+ * The options the enclosing `Select.Root` was given, so the parts below it need
+ * not be handed the same list a second time.
+ *
+ * @example
+ * const { options } = useSelectContext();
+ */
+export declare const useSelectContext: () => SelectContextValue;
+//# sourceMappingURL=select-context.d.ts.map

package/dist/components/select-field/select-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-context.d.ts","sourceRoot":"","sources":["../../../src/components/select-field/select-context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,OAAO,EAAiB,MAAM,OAAO,CAAC;AAGpD,yEAAyE;AACzE,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,MAAM,IAAI,QAAQ,CAAC;IACrD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,CAAC,CAAC;IACT,4CAA4C;IAC5C,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC,CAAC;AAEH,MAAM,MAAM,kBAAkB,GAAG,QAAQ,CAAC;IACzC,OAAO,EAAE,SAAS,YAAY,CAAC,MAAM,CAAC,EAAE,CAAC;CACzC,CAAC,CAAC;AAEH,eAAO,MAAM,aAAa,EAAE,OAAO,CAAC,kBAAkB,GAAG,IAAI,CACd,CAAC;AAEhD;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB,QAAO,kBAIlC,CAAC"}

package/dist/components/select-field/select-context.js

@@ -0,0 +1,15 @@
+import { useRequiredContext } from "../../lib/use-required-context.js";
+import { createContext } from "react";
+// src/components/select-field/select-context.ts
+var SelectContext = createContext(null);
+/**
+* The options the enclosing `Select.Root` was given, so the parts below it need
+* not be handed the same list a second time.
+*
+* @example
+* const { options } = useSelectContext();
+*/
+var useSelectContext = () => {
+	return useRequiredContext(SelectContext, "The Select parts must be used within a <Select.Root>.");
+};
+export { SelectContext, useSelectContext };

package/dist/components/select-field/select-field.d.ts

@@ -0,0 +1,33 @@
+import { type ReactNode } from "react";
+import { type FieldProps, type OptionsLoad, type OptionsLoadLabels } from "../field/index.ts";
+import { type SelectRootProps } from "./select.tsx";
+export type SelectFieldProps<T extends string> = FieldProps & OptionsLoadLabels & Omit<SelectRootProps<T>, "children" | "required"> & Readonly<{
+    /** Shown on the trigger while nothing is selected. */
+    placeholder?: string;
+    /** How far the options have loaded, when they come from a query. */
+    load?: OptionsLoad;
+    /** Called once focus has left the field, its popup included. */
+    onBlur?: () => void;
+    /** Applied to the trigger, so callers can size the control. */
+    className?: string;
+}>;
+/**
+ * The assembled select: a labelled trigger over the shared popup surface, then
+ * the description and the error.
+ *
+ * @example
+ * <SelectField
+ * 	label="Status"
+ * 	optionalLabel="optional"
+ * 	options={statusOptions}
+ * 	value={status}
+ * 	onValueChange={setStatus}
+ * 	loadingLabel="Loading options…"
+ * 	loadFailedLabel="Options could not be loaded."
+ * 	loadBrokenLabel="Options could not be loaded, and trying again won't help."
+ * 	retryLabel="Try again"
+ * 	noOptionsLabel="No options available."
+ * />
+ */
+export declare const SelectField: <T extends string>({ label, description, errors, requiredness, optionalLabel, dirty, touched, pending, placeholder, load, loadingLabel, loadFailedLabel, loadBrokenLabel, retryLabel, noOptionsLabel, onBlur, className, onOpenChange, onOpenChangeComplete, ...rootProps }: SelectFieldProps<T>) => ReactNode;
+//# sourceMappingURL=select-field.d.ts.map

package/dist/components/select-field/select-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-field.d.ts","sourceRoot":"","sources":["../../../src/components/select-field/select-field.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAU,MAAM,OAAO,CAAC;AAG/C,OAAO,EAGN,KAAK,UAAU,EAGf,KAAK,WAAW,EAChB,KAAK,iBAAiB,EACtB,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAU,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC;AAG5D,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,MAAM,IAC5C,UAAU,GACT,iBAAiB,GACjB,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC,GACjD,QAAQ,CAAC;IACR,sDAAsD;IACtD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oEAAoE;IACpE,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,gEAAgE;IAChE,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,+DAA+D;IAC/D,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC,CAAC;AAEL;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,WAAW,GAAI,CAAC,SAAS,MAAM,4PAqBzC,gBAAgB,CAAC,CAAC,CAAC,KAAG,SA6FxB,CAAC"}

package/dist/components/select-field/select-field.js

@@ -0,0 +1,307 @@
+import { useBusyPhase } from "../../lib/hooks/use-busy-phase.js";
+import { normalizeFieldErrors } from "../../lib/forms/errors.js";
+import { detachHiddenInput } from "../field/hidden-input.js";
+import { Field } from "../field/field.js";
+import { OPTIONS_LOADED } from "../field/options-load.js";
+import { useFormDisabled } from "../form/form-context.js";
+import { Select } from "./select.js";
+import select_module_default from "./select.module.js";
+import { c } from "react/compiler-runtime";
+import { useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/select-field/select-field.tsx
+/**
+* The assembled select: a labelled trigger over the shared popup surface, then
+* the description and the error.
+*
+* @example
+* <SelectField
+* 	label="Status"
+* 	optionalLabel="optional"
+* 	options={statusOptions}
+* 	value={status}
+* 	onValueChange={setStatus}
+* 	loadingLabel="Loading options…"
+* 	loadFailedLabel="Options could not be loaded."
+* 	loadBrokenLabel="Options could not be loaded, and trying again won't help."
+* 	retryLabel="Try again"
+* 	noOptionsLabel="No options available."
+* />
+*/
+var SelectField = (t0) => {
+	const $ = c(86);
+	let className;
+	let description;
+	let dirty;
+	let errors;
+	let label;
+	let loadBrokenLabel;
+	let loadFailedLabel;
+	let loadingLabel;
+	let noOptionsLabel;
+	let onBlur;
+	let onOpenChange;
+	let onOpenChangeComplete;
+	let optionalLabel;
+	let placeholder;
+	let requiredness;
+	let retryLabel;
+	let rootProps;
+	let t1;
+	let t2;
+	let touched;
+	if ($[0] !== t0) {
+		({label, description, errors, requiredness, optionalLabel, dirty, touched, pending: t1, placeholder, load: t2, loadingLabel, loadFailedLabel, loadBrokenLabel, retryLabel, noOptionsLabel, onBlur, className, onOpenChange, onOpenChangeComplete, ...rootProps} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = description;
+		$[3] = dirty;
+		$[4] = errors;
+		$[5] = label;
+		$[6] = loadBrokenLabel;
+		$[7] = loadFailedLabel;
+		$[8] = loadingLabel;
+		$[9] = noOptionsLabel;
+		$[10] = onBlur;
+		$[11] = onOpenChange;
+		$[12] = onOpenChangeComplete;
+		$[13] = optionalLabel;
+		$[14] = placeholder;
+		$[15] = requiredness;
+		$[16] = retryLabel;
+		$[17] = rootProps;
+		$[18] = t1;
+		$[19] = t2;
+		$[20] = touched;
+	} else {
+		className = $[1];
+		description = $[2];
+		dirty = $[3];
+		errors = $[4];
+		label = $[5];
+		loadBrokenLabel = $[6];
+		loadFailedLabel = $[7];
+		loadingLabel = $[8];
+		noOptionsLabel = $[9];
+		onBlur = $[10];
+		onOpenChange = $[11];
+		onOpenChangeComplete = $[12];
+		optionalLabel = $[13];
+		placeholder = $[14];
+		requiredness = $[15];
+		retryLabel = $[16];
+		rootProps = $[17];
+		t1 = $[18];
+		t2 = $[19];
+		touched = $[20];
+	}
+	const pending = t1 === void 0 ? false : t1;
+	const load = t2 === void 0 ? OPTIONS_LOADED : t2;
+	const ids = Select.useIds();
+	let t3;
+	if ($[21] !== errors) {
+		t3 = normalizeFieldErrors(errors);
+		$[21] = errors;
+		$[22] = t3;
+	} else t3 = $[22];
+	const messages = t3;
+	const invalid = messages.length > 0;
+	const formDisabled = useFormDisabled();
+	let t4;
+	if ($[23] !== pending) {
+		t4 = { busy: pending };
+		$[23] = pending;
+		$[24] = t4;
+	} else t4 = $[24];
+	const phase = useBusyPhase(t4);
+	const open = useRef(false);
+	const focused = useRef(false);
+	const disabled = rootProps.disabled === true || formDisabled;
+	const t5 = phase !== "fresh" || load.status === "pending";
+	const t6 = rootProps.value !== void 0 && rootProps.value !== null && rootProps.value !== "";
+	let t7;
+	if ($[25] !== dirty || $[26] !== disabled || $[27] !== invalid || $[28] !== requiredness || $[29] !== rootProps.readOnly || $[30] !== t5 || $[31] !== t6 || $[32] !== touched) {
+		t7 = {
+			disabled,
+			readonly: rootProps.readOnly,
+			requiredness,
+			invalid,
+			dirty,
+			touched,
+			pending: t5,
+			filled: t6
+		};
+		$[25] = dirty;
+		$[26] = disabled;
+		$[27] = invalid;
+		$[28] = requiredness;
+		$[29] = rootProps.readOnly;
+		$[30] = t5;
+		$[31] = t6;
+		$[32] = touched;
+		$[33] = t7;
+	} else t7 = $[33];
+	const fieldState = t7;
+	let t8;
+	if ($[34] !== description || $[35] !== ids || $[36] !== invalid) {
+		t8 = ids.describedBy(description !== void 0, invalid);
+		$[34] = description;
+		$[35] = ids;
+		$[36] = invalid;
+		$[37] = t8;
+	} else t8 = $[37];
+	const describedBy = t8;
+	const t9 = requiredness === "required";
+	let t10;
+	if ($[38] !== onOpenChange) {
+		t10 = (next, details) => {
+			open.current = next;
+			onOpenChange?.(next, details);
+		};
+		$[38] = onOpenChange;
+		$[39] = t10;
+	} else t10 = $[39];
+	let t11;
+	if ($[40] !== onBlur || $[41] !== onOpenChangeComplete) {
+		t11 = (next_0) => {
+			onOpenChangeComplete?.(next_0);
+			if (!next_0) requestAnimationFrame(() => {
+				if (!open.current && !focused.current) onBlur?.();
+			});
+		};
+		$[40] = onBlur;
+		$[41] = onOpenChangeComplete;
+		$[42] = t11;
+	} else t11 = $[42];
+	let t12;
+	if ($[43] !== optionalLabel || $[44] !== requiredness) {
+		t12 = /* @__PURE__ */ jsx(Field.Requiredness, {
+			requiredness,
+			optionalLabel
+		});
+		$[43] = optionalLabel;
+		$[44] = requiredness;
+		$[45] = t12;
+	} else t12 = $[45];
+	let t13;
+	if ($[46] !== label || $[47] !== t12) {
+		t13 = /* @__PURE__ */ jsxs(Select.Label, { children: [
+			label,
+			" ",
+			t12
+		] });
+		$[46] = label;
+		$[47] = t12;
+		$[48] = t13;
+	} else t13 = $[48];
+	let t14;
+	if ($[49] === Symbol.for("react.memo_cache_sentinel")) {
+		t14 = () => {
+			focused.current = true;
+		};
+		$[49] = t14;
+	} else t14 = $[49];
+	let t15;
+	if ($[50] !== onBlur) {
+		t15 = () => {
+			focused.current = false;
+			if (!open.current) onBlur?.();
+		};
+		$[50] = onBlur;
+		$[51] = t15;
+	} else t15 = $[51];
+	let t16;
+	if ($[52] !== className || $[53] !== describedBy || $[54] !== fieldState || $[55] !== load || $[56] !== loadBrokenLabel || $[57] !== loadFailedLabel || $[58] !== loadingLabel || $[59] !== noOptionsLabel || $[60] !== placeholder || $[61] !== retryLabel || $[62] !== t15) {
+		t16 = /* @__PURE__ */ jsx(Select.Control, {
+			placeholder,
+			load,
+			loadingLabel,
+			loadFailedLabel,
+			loadBrokenLabel,
+			retryLabel,
+			noOptionsLabel,
+			state: fieldState,
+			className,
+			"aria-describedby": describedBy,
+			onFocus: t14,
+			onBlur: t15
+		});
+		$[52] = className;
+		$[53] = describedBy;
+		$[54] = fieldState;
+		$[55] = load;
+		$[56] = loadBrokenLabel;
+		$[57] = loadFailedLabel;
+		$[58] = loadingLabel;
+		$[59] = noOptionsLabel;
+		$[60] = placeholder;
+		$[61] = retryLabel;
+		$[62] = t15;
+		$[63] = t16;
+	} else t16 = $[63];
+	let t17;
+	if ($[64] !== disabled || $[65] !== ids.controlId || $[66] !== rootProps || $[67] !== t10 || $[68] !== t11 || $[69] !== t13 || $[70] !== t16 || $[71] !== t9) {
+		t17 = /* @__PURE__ */ jsxs(Select.Root, {
+			name: ids.controlId,
+			inputRef: detachHiddenInput,
+			...rootProps,
+			disabled,
+			required: t9,
+			onOpenChange: t10,
+			onOpenChangeComplete: t11,
+			children: [t13, t16]
+		});
+		$[64] = disabled;
+		$[65] = ids.controlId;
+		$[66] = rootProps;
+		$[67] = t10;
+		$[68] = t11;
+		$[69] = t13;
+		$[70] = t16;
+		$[71] = t9;
+		$[72] = t17;
+	} else t17 = $[72];
+	let t18;
+	if ($[73] !== description || $[74] !== ids.descriptionId) {
+		t18 = /* @__PURE__ */ jsx(Select.Description, {
+			id: ids.descriptionId,
+			children: description
+		});
+		$[73] = description;
+		$[74] = ids.descriptionId;
+		$[75] = t18;
+	} else t18 = $[75];
+	let t19;
+	if ($[76] !== ids.errorId || $[77] !== messages) {
+		t19 = /* @__PURE__ */ jsx(Select.Error, {
+			id: ids.errorId,
+			children: messages
+		});
+		$[76] = ids.errorId;
+		$[77] = messages;
+		$[78] = t19;
+	} else t19 = $[78];
+	let t20;
+	if ($[79] !== dirty || $[80] !== invalid || $[81] !== t17 || $[82] !== t18 || $[83] !== t19 || $[84] !== touched) {
+		t20 = /* @__PURE__ */ jsxs(Field.Root, {
+			className: select_module_default.field,
+			invalid,
+			dirty,
+			touched,
+			children: [
+				t17,
+				t18,
+				t19
+			]
+		});
+		$[79] = dirty;
+		$[80] = invalid;
+		$[81] = t17;
+		$[82] = t18;
+		$[83] = t19;
+		$[84] = touched;
+		$[85] = t20;
+	} else t20 = $[85];
+	return t20;
+};
+export { SelectField };