@proyecto-viviana/solidaria-components 0.3.2 → 0.4.0

package/dist/RadioGroup.js

@@ -0,0 +1,931 @@
+import { Provider, filterDOMProps, useRenderProps } from "./utils.js";
+import { VisuallyHidden } from "./VisuallyHidden.js";
+import { FieldErrorContext } from "./FieldError.js";
+import { TextContext } from "./Text.js";
+import { SelectionIndicatorContext } from "./SelectionIndicator.js";
+import { createComponent, getNextElement, getNextMarker, insert, memo, mergeProps, runHydrationEvents, setAttribute, spread, template, use } from "solid-js/web";
+import { Show, createContext, createMemo, createSignal, createUniqueId, splitProps, useContext } from "solid-js";
+import { createFocusRing, createHover, createRadio, createRadioGroup, mergeProps as mergeProps$2 } from "@proyecto-viviana/solidaria";
+import { VALID_VALIDITY_STATE, createRadioGroupState } from "@proyecto-viviana/solid-stately";
+//#region src/RadioGroup.tsx
+/**
+* RadioGroup and Radio components for solidaria-components
+*
+* Pre-wired headless radio components that combine state + aria hooks.
+* Port of react-aria-components/src/RadioGroup.tsx
+*/
+var _tmpl$ = /*#__PURE__*/ template(`<div>`), _tmpl$2 = /*#__PURE__*/ template(`<input>`), _tmpl$3 = /*#__PURE__*/ template(`<span slot=description>`), _tmpl$4 = /*#__PURE__*/ template(`<span slot=errorMessage>`), _tmpl$5 = /*#__PURE__*/ template(`<label>`), _tmpl$6 = /*#__PURE__*/ template(`<label><!$><!/><!$><!/>`);
+function assignRef(ref, el) {
+	if (!ref) return;
+	if (typeof ref === "function") ref(el);
+	else ref.current = el;
+}
+const validValidation = {
+	isInvalid: false,
+	validationDetails: VALID_VALIDITY_STATE,
+	validationErrors: []
+};
+function getNativeValidation(input) {
+	return {
+		isInvalid: !input.validity.valid,
+		validationDetails: {
+			badInput: input.validity.badInput,
+			customError: input.validity.customError,
+			patternMismatch: input.validity.patternMismatch,
+			rangeOverflow: input.validity.rangeOverflow,
+			rangeUnderflow: input.validity.rangeUnderflow,
+			stepMismatch: input.validity.stepMismatch,
+			tooLong: input.validity.tooLong,
+			tooShort: input.validity.tooShort,
+			typeMismatch: input.validity.typeMismatch,
+			valueMissing: input.validity.valueMissing,
+			valid: input.validity.valid
+		},
+		validationErrors: input.validationMessage ? [input.validationMessage] : []
+	};
+}
+const RadioGroupContext = createContext(null);
+const RadioGroupStateContext = createContext(null);
+const RadioContext = createContext(null);
+/**
+* A radio group allows a user to select a single item from a list of mutually exclusive options.
+*
+* @example
+* ```tsx
+* <RadioGroup>
+*   <Radio value="one">Option 1</Radio>
+*   <Radio value="two">Option 2</Radio>
+* </RadioGroup>
+* ```
+*/
+function RadioGroup(props) {
+	const contextProps = useContext(RadioGroupContext);
+	const contextSlotProps = contextProps?.slots?.[props.slot ?? "default"];
+	const contextBaseProps = createMemo(() => {
+		if (!contextProps) return {};
+		const { slots: _slots, ...rest } = contextProps;
+		return rest;
+	});
+	const mergedProps = contextProps ? mergeProps$2(contextBaseProps(), contextSlotProps ?? {}, props) : props;
+	const [local, ariaProps] = splitProps(mergedProps, [
+		"class",
+		"style",
+		"render",
+		"ref",
+		"slot",
+		"renderHelpText"
+	]);
+	const state = createRadioGroupState(() => ({
+		value: mergedProps.value,
+		defaultValue: mergedProps.defaultValue,
+		onChange: mergedProps.onChange,
+		isDisabled: mergedProps.isDisabled,
+		isReadOnly: mergedProps.isReadOnly,
+		isRequired: mergedProps.isRequired,
+		isInvalid: mergedProps.isInvalid,
+		validationState: mergedProps.validationState,
+		validate: mergedProps.validate,
+		validationBehavior: mergedProps.validationBehavior,
+		name: mergedProps.name,
+		form: mergedProps.form
+	}));
+	const groupAria = createRadioGroup(() => ({
+		...ariaProps,
+		description: mergedProps.description,
+		errorMessage: mergedProps.errorMessage
+	}), state);
+	const isInvalid = createMemo(() => state.isInvalid);
+	const validation = createMemo(() => state.displayValidation());
+	const fallbackErrorMessageId = createUniqueId();
+	const errorMessageId = () => groupAria.errorMessageProps.id ?? fallbackErrorMessageId;
+	const renderValues = createMemo(() => ({
+		orientation: ariaProps.orientation ?? "vertical",
+		isDisabled: state.isDisabled,
+		isReadOnly: state.isReadOnly,
+		isRequired: state.isRequired,
+		isInvalid: isInvalid(),
+		state
+	}));
+	const renderProps = useRenderProps({
+		get children() {
+			return props.children;
+		},
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-RadioGroup"
+	}, renderValues);
+	const domProps = createMemo(() => filterDOMProps(ariaProps, { global: true }));
+	const cleanGroupProps = () => {
+		const { ref: _ref, ...rest } = groupAria.radioGroupProps;
+		return rest;
+	};
+	const handleGroupFocusIn = (event) => {
+		groupAria.radioGroupProps.onFocus?.(event);
+	};
+	const handleGroupFocusOut = (event) => {
+		groupAria.radioGroupProps.onBlur?.(event);
+	};
+	const handleGroupInvalidCapture = (event) => {
+		const target = event.target;
+		if (!(target instanceof HTMLInputElement) || target.type !== "radio") return;
+		state.updateValidation(getNativeValidation(target));
+		state.commitValidation();
+		target.focus();
+		event.preventDefault();
+	};
+	const handleGroupChangeCapture = (event) => {
+		const target = event.target;
+		if (!(target instanceof HTMLInputElement) || target.type !== "radio") return;
+		state.updateValidation(target.validity.valid ? validValidation : getNativeValidation(target));
+		state.commitValidation();
+	};
+	const setGroupRef = (el) => {
+		assignRef(local.ref, el);
+	};
+	const groupDescribedBy = () => {
+		const ids = [
+			cleanGroupProps()["aria-describedby"],
+			mergedProps.description ? groupAria.descriptionProps.id : void 0,
+			isInvalid() && (mergedProps.errorMessage || validation().validationErrors.length > 0) ? errorMessageId() : void 0
+		].filter(Boolean).join(" ").split(" ").filter(Boolean);
+		return ids.length ? Array.from(new Set(ids)).join(" ") : void 0;
+	};
+	const fieldErrorContext = {
+		get validation() {
+			return validation();
+		},
+		get errorMessageProps() {
+			return {
+				...groupAria.errorMessageProps,
+				id: errorMessageId()
+			};
+		}
+	};
+	const GroupChildren = () => {
+		const childRenderValues = {
+			get orientation() {
+				return ariaProps.orientation ?? "vertical";
+			},
+			get isDisabled() {
+				return state.isDisabled;
+			},
+			get isReadOnly() {
+				return state.isReadOnly;
+			},
+			get isRequired() {
+				return state.isRequired;
+			},
+			get isInvalid() {
+				return isInvalid();
+			},
+			get state() {
+				return state;
+			}
+		};
+		return [
+			memo(createMemo(() => {
+				const children = props.children;
+				if (typeof children === "function") return children.length > 0 ? children(childRenderValues) : children();
+				return children;
+			})),
+			createComponent(Show, {
+				get when() {
+					return memo(() => !!(local.renderHelpText ?? true))() && mergedProps.description;
+				},
+				get children() {
+					var _el$ = getNextElement(_tmpl$);
+					spread(_el$, mergeProps(() => groupAria.descriptionProps), false, true);
+					insert(_el$, () => mergedProps.description);
+					runHydrationEvents();
+					return _el$;
+				}
+			}),
+			createComponent(Show, {
+				get when() {
+					return memo(() => !!((local.renderHelpText ?? true) && isInvalid()))() && mergedProps.errorMessage;
+				},
+				get children() {
+					var _el$2 = getNextElement(_tmpl$);
+					spread(_el$2, mergeProps(() => groupAria.errorMessageProps), false, true);
+					insert(_el$2, () => mergedProps.errorMessage);
+					runHydrationEvents();
+					return _el$2;
+				}
+			})
+		];
+	};
+	const groupEventProps = {
+		onInvalidCapture: handleGroupInvalidCapture,
+		onChangeCapture: handleGroupChangeCapture
+	};
+	const customRootProps = () => ({
+		...domProps(),
+		...cleanGroupProps(),
+		...groupEventProps,
+		ref: setGroupRef,
+		onFocusIn: handleGroupFocusIn,
+		onFocusOut: handleGroupFocusOut,
+		"aria-describedby": groupDescribedBy(),
+		class: renderProps.class(),
+		style: renderProps.style(),
+		slot: local.slot,
+		"data-orientation": ariaProps.orientation ?? "vertical",
+		"data-disabled": state.isDisabled || void 0,
+		"data-readonly": state.isReadOnly || void 0,
+		"data-required": state.isRequired || void 0,
+		"data-invalid": isInvalid() || void 0,
+		children: createComponent(GroupChildren, {})
+	});
+	return createComponent(RadioGroupStateContext.Provider, {
+		value: state,
+		get children() {
+			return createComponent(FieldErrorContext.Provider, {
+				value: fieldErrorContext,
+				get children() {
+					return memo(() => !!local.render)() ? local.render(customRootProps(), renderValues()) : (() => {
+						var _el$3 = getNextElement(_tmpl$);
+						use(setGroupRef, _el$3);
+						spread(_el$3, mergeProps(domProps, cleanGroupProps, groupEventProps, {
+							"onFocusIn": handleGroupFocusIn,
+							"onFocusOut": handleGroupFocusOut,
+							get ["aria-describedby"]() {
+								return groupDescribedBy();
+							},
+							get ["class"]() {
+								return renderProps.class();
+							},
+							get style() {
+								return renderProps.style();
+							},
+							get slot() {
+								return local.slot;
+							},
+							get ["data-orientation"]() {
+								return ariaProps.orientation ?? "vertical";
+							},
+							get ["data-disabled"]() {
+								return state.isDisabled || void 0;
+							},
+							get ["data-readonly"]() {
+								return state.isReadOnly || void 0;
+							},
+							get ["data-required"]() {
+								return state.isRequired || void 0;
+							},
+							get ["data-invalid"]() {
+								return isInvalid() || void 0;
+							}
+						}), false, true);
+						insert(_el$3, createComponent(GroupChildren, {}));
+						runHydrationEvents();
+						return _el$3;
+					})();
+				}
+			});
+		}
+	});
+}
+/**
+* Internal Radio implementation that has access to RadioGroupStateContext.
+* This is rendered inside the RadioGroup's context provider.
+*/
+function RadioImpl(props) {
+	const [inputElement, setInputElement] = createSignal(null);
+	const { state } = props;
+	const contextProps = useContext(RadioContext);
+	const contextSlotProps = contextProps?.slots?.[props.radioProps.slot ?? "default"];
+	const contextBaseProps = createMemo(() => {
+		if (!contextProps) return {};
+		const { slots: _slots, ...rest } = contextProps;
+		return rest;
+	});
+	const radioProps = contextProps ? mergeProps$2(contextBaseProps(), contextSlotProps ?? {}, props.radioProps) : props.radioProps;
+	const inputRefs = createMemo(() => [
+		contextBaseProps().inputRef,
+		contextSlotProps?.inputRef,
+		props.radioProps.inputRef
+	].filter(Boolean));
+	const [local, ariaProps] = splitProps(radioProps, [
+		"class",
+		"style",
+		"render",
+		"ref",
+		"inputRef",
+		"slot",
+		"description",
+		"errorMessage",
+		"onHoverStart",
+		"onHoverEnd",
+		"onHoverChange"
+	]);
+	const descriptionId = createUniqueId();
+	const errorMessageId = createUniqueId();
+	const describedBy = () => {
+		const ids = [
+			ariaProps["aria-describedby"],
+			local.description ? descriptionId : void 0,
+			state.isInvalid && local.errorMessage ? errorMessageId : void 0
+		].filter(Boolean);
+		return ids.length ? ids.join(" ") : void 0;
+	};
+	const inputAriaProps = createMemo(() => {
+		const clean = {};
+		for (const key in ariaProps) if (!key.startsWith("data-")) clean[key] = ariaProps[key];
+		return clean;
+	});
+	const radioAria = createRadio(() => ({
+		...inputAriaProps(),
+		"aria-describedby": describedBy(),
+		children: typeof radioProps.children === "function" ? true : radioProps.children
+	}), state, inputElement);
+	const { isFocused, isFocusVisible, focusProps } = createFocusRing();
+	const { isHovered, hoverProps } = createHover({
+		get isDisabled() {
+			return radioAria.isDisabled || state.isReadOnly;
+		},
+		onHoverStart: local.onHoverStart,
+		onHoverEnd: local.onHoverEnd,
+		onHoverChange: local.onHoverChange
+	});
+	const renderValues = createMemo(() => ({
+		isSelected: radioAria.isSelected(),
+		isHovered: isHovered(),
+		isPressed: radioAria.isPressed(),
+		isFocused: isFocused(),
+		isFocusVisible: isFocusVisible(),
+		isDisabled: radioAria.isDisabled,
+		isReadOnly: state.isReadOnly,
+		isInvalid: state.isInvalid,
+		isRequired: state.isRequired
+	}));
+	const renderProps = useRenderProps({
+		children: radioProps.children,
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-Radio"
+	}, renderValues);
+	const selectionIndicatorContext = createMemo(() => ({ isSelected: radioAria.isSelected }));
+	const domProps = createMemo(() => {
+		const filtered = filterDOMProps(ariaProps, { global: true });
+		delete filtered.id;
+		delete filtered.onClick;
+		return filtered;
+	});
+	const cleanLabelProps = () => {
+		const { ref: _ref1, ...rest } = radioAria.labelProps;
+		return rest;
+	};
+	const cleanHoverProps = () => {
+		const { ref: _ref2, ...rest } = hoverProps;
+		return rest;
+	};
+	const cleanInputProps = () => {
+		const { ref: _ref3, onFocus: _onFocus, onBlur: _onBlur, ...rest } = radioAria.inputProps;
+		return rest;
+	};
+	const cleanFocusProps = () => {
+		const { ref: _ref4, onFocus: _onFocus, onBlur: _onBlur, ...rest } = focusProps;
+		return rest;
+	};
+	const handleInputFocus = (event) => {
+		radioAria.inputProps.onFocus?.(event);
+		focusProps.onFocus?.(event);
+	};
+	const handleInputBlur = (event) => {
+		radioAria.inputProps.onBlur?.(event);
+		focusProps.onBlur?.(event);
+	};
+	const handleLabelClick = (event) => {
+		ariaProps.onClickCapture?.(event);
+		radioAria.labelProps.onClick?.(event);
+	};
+	const handleLabelClickCapture = (event) => {
+		ariaProps.onClickCapture?.(event);
+	};
+	const handleInputClick = (event) => {
+		radioAria.inputProps.onClick?.(event);
+	};
+	const handleInputInvalid = (event) => {
+		state.updateValidation(getNativeValidation(event.currentTarget));
+		state.commitValidation();
+		event.currentTarget.focus();
+		event.preventDefault();
+	};
+	const handleInputChange = (event) => {
+		radioAria.inputProps.onChange?.(event);
+		state.updateValidation(event.currentTarget.validity.valid ? validValidation : getNativeValidation(event.currentTarget));
+		state.commitValidation();
+	};
+	const setLabelRef = (el) => {
+		assignRef(local.ref, el);
+	};
+	const setInputRef = (el) => {
+		setInputElement(el);
+		el.addEventListener("invalid", (event) => {
+			state.updateValidation(getNativeValidation(el));
+			state.commitValidation();
+			el.focus();
+			event.preventDefault();
+		});
+		el.addEventListener("change", () => {
+			state.updateValidation(el.validity.valid ? validValidation : getNativeValidation(el));
+			state.commitValidation();
+		});
+		for (const ref of inputRefs()) assignRef(ref, el);
+	};
+	const hiddenInput = createComponent(VisuallyHidden, { get children() {
+		var _el$4 = getNextElement(_tmpl$2);
+		use(setInputRef, _el$4);
+		spread(_el$4, mergeProps(cleanInputProps, cleanFocusProps, {
+			"onFocus": handleInputFocus,
+			"onBlur": handleInputBlur,
+			"onInvalid": handleInputInvalid,
+			"onChange": handleInputChange,
+			"onClick": handleInputClick
+		}), false, false);
+		runHydrationEvents();
+		return _el$4;
+	} });
+	const labelChildren = () => [
+		hiddenInput,
+		memo(() => renderProps.renderChildren()),
+		createComponent(Show, {
+			get when() {
+				return local.description;
+			},
+			get children() {
+				var _el$5 = getNextElement(_tmpl$3);
+				setAttribute(_el$5, "id", descriptionId);
+				insert(_el$5, () => local.description);
+				return _el$5;
+			}
+		}),
+		createComponent(Show, {
+			get when() {
+				return memo(() => !!state.isInvalid)() && local.errorMessage;
+			},
+			get children() {
+				var _el$6 = getNextElement(_tmpl$4);
+				setAttribute(_el$6, "id", errorMessageId);
+				insert(_el$6, () => local.errorMessage);
+				return _el$6;
+			}
+		})
+	];
+	const customLabelProps = () => ({
+		...domProps(),
+		...cleanLabelProps(),
+		...cleanHoverProps(),
+		ref: setLabelRef,
+		class: renderProps.class(),
+		style: renderProps.style(),
+		slot: local.slot,
+		onClick: handleLabelClick,
+		onClickCapture: handleLabelClickCapture,
+		"data-selected": radioAria.isSelected() || void 0,
+		"data-pressed": radioAria.isPressed() || void 0,
+		"data-hovered": isHovered() || void 0,
+		"data-focused": isFocused() || void 0,
+		"data-focus-visible": isFocusVisible() || void 0,
+		"data-disabled": radioAria.isDisabled || void 0,
+		"data-readonly": state.isReadOnly || void 0,
+		"data-invalid": state.isInvalid || void 0,
+		"data-required": state.isRequired || void 0,
+		children: labelChildren()
+	});
+	const labelCaptureProps = { onClickCapture: handleLabelClickCapture };
+	return createComponent(SelectionIndicatorContext.Provider, {
+		get value() {
+			return selectionIndicatorContext();
+		},
+		get children() {
+			return memo(() => !!local.render)() ? local.render(customLabelProps(), renderValues()) : (() => {
+				var _el$7 = getNextElement(_tmpl$5);
+				use(setLabelRef, _el$7);
+				spread(_el$7, mergeProps(domProps, cleanLabelProps, cleanHoverProps, {
+					get ["class"]() {
+						return renderProps.class();
+					},
+					get style() {
+						return renderProps.style();
+					},
+					get slot() {
+						return local.slot;
+					},
+					"onClick": handleLabelClick
+				}, labelCaptureProps, {
+					get ["data-selected"]() {
+						return radioAria.isSelected() || void 0;
+					},
+					get ["data-pressed"]() {
+						return radioAria.isPressed() || void 0;
+					},
+					get ["data-hovered"]() {
+						return isHovered() || void 0;
+					},
+					get ["data-focused"]() {
+						return isFocused() || void 0;
+					},
+					get ["data-focus-visible"]() {
+						return isFocusVisible() || void 0;
+					},
+					get ["data-disabled"]() {
+						return radioAria.isDisabled || void 0;
+					},
+					get ["data-readonly"]() {
+						return state.isReadOnly || void 0;
+					},
+					get ["data-invalid"]() {
+						return state.isInvalid || void 0;
+					},
+					get ["data-required"]() {
+						return state.isRequired || void 0;
+					}
+				}), false, true);
+				insert(_el$7, labelChildren);
+				runHydrationEvents();
+				return _el$7;
+			})();
+		}
+	});
+}
+/**
+* A radio represents an individual option within a radio group.
+*
+* @example
+* ```tsx
+* <Radio value="option1">
+*   {({ isSelected }) => (
+*     <>
+*       <span class={`radio ${isSelected ? 'selected' : ''}`}>
+*         {isSelected && '●'}
+*       </span>
+*       <span>Option 1</span>
+*     </>
+*   )}
+* </Radio>
+* ```
+*/
+function Radio(props) {
+	const getState = createMemo(() => useContext(RadioGroupStateContext));
+	return createComponent(Show, {
+		get when() {
+			return getState();
+		},
+		fallback: null,
+		keyed: true,
+		children: (state) => createComponent(RadioImpl, {
+			radioProps: props,
+			state
+		})
+	});
+}
+const RadioFieldContext = createContext(null);
+const InternalRadioContext = createContext(null);
+/**
+* A RadioField represents an individual option within a radio group, containing a
+* `RadioButton` and optional description. Must be rendered inside a `RadioGroup`.
+* Per-option help text is wired through a TextContext description slot — render it
+* with `<Text slot="description">`. (Radios have no per-option error slot; errors
+* are reported at the group level.)
+*
+* @example
+* ```tsx
+* <RadioGroup>
+*   <RadioField value="a">
+*     <RadioButton>Option A</RadioButton>
+*     <Text slot="description">The first option</Text>
+*   </RadioField>
+* </RadioGroup>
+* ```
+*/
+function RadioField(props) {
+	const getState = createMemo(() => useContext(RadioGroupStateContext));
+	return createComponent(Show, {
+		get when() {
+			return getState();
+		},
+		fallback: null,
+		keyed: true,
+		children: (state) => createComponent(RadioFieldImpl, {
+			fieldProps: props,
+			state
+		})
+	});
+}
+function RadioFieldImpl(props) {
+	const [inputElement, setInputElement] = createSignal(null);
+	const { state } = props;
+	const contextProps = useContext(RadioFieldContext);
+	const contextSlotProps = contextProps?.slots?.[props.fieldProps.slot ?? "default"];
+	const contextBaseProps = createMemo(() => {
+		if (!contextProps) return {};
+		const { slots: _slots, ...rest } = contextProps;
+		return rest;
+	});
+	const fieldProps = contextProps ? mergeProps$2(contextBaseProps(), contextSlotProps ?? {}, props.fieldProps) : props.fieldProps;
+	const inputRefs = createMemo(() => [
+		contextBaseProps().inputRef,
+		contextSlotProps?.inputRef,
+		props.fieldProps.inputRef
+	].filter(Boolean));
+	const [local, ariaProps] = splitProps(fieldProps, [
+		"class",
+		"style",
+		"ref",
+		"inputRef",
+		"slot",
+		"children"
+	]);
+	const inputAriaProps = createMemo(() => {
+		const clean = {};
+		for (const key in ariaProps) if (!key.startsWith("data-")) clean[key] = ariaProps[key];
+		return clean;
+	});
+	const radioAria = createRadio(() => ({
+		...inputAriaProps(),
+		children: true
+	}), state, inputElement);
+	const textSlots = { slots: { get description() {
+		return radioAria.descriptionProps;
+	} } };
+	const setInputRef = (el) => {
+		setInputElement(el);
+		el.addEventListener("invalid", (event) => {
+			state.updateValidation(getNativeValidation(el));
+			state.commitValidation();
+			el.focus();
+			event.preventDefault();
+		});
+		el.addEventListener("change", () => {
+			state.updateValidation(el.validity.valid ? validValidation : getNativeValidation(el));
+			state.commitValidation();
+		});
+		for (const ref of inputRefs()) assignRef(ref, el);
+	};
+	const setFieldRef = (el) => {
+		assignRef(local.ref, el);
+	};
+	const internalContext = {
+		isSelected: () => radioAria.isSelected(),
+		isPressed: () => radioAria.isPressed(),
+		isDisabled: () => radioAria.isDisabled,
+		labelProps: () => radioAria.labelProps,
+		inputProps: () => radioAria.inputProps,
+		setInputRef,
+		defaultClassName: "solidaria-RadioButton"
+	};
+	const selectionIndicatorContext = createMemo(() => ({ isSelected: radioAria.isSelected }));
+	const renderValues = createMemo(() => ({
+		isSelected: radioAria.isSelected(),
+		isDisabled: radioAria.isDisabled,
+		isReadOnly: state.isReadOnly,
+		isInvalid: state.isInvalid,
+		isRequired: state.isRequired
+	}));
+	const renderProps = useRenderProps({
+		children: fieldProps.children,
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-RadioField"
+	}, renderValues);
+	const domProps = createMemo(() => {
+		const filtered = filterDOMProps(ariaProps, { global: true });
+		delete filtered.id;
+		delete filtered.onClick;
+		return filtered;
+	});
+	const FieldChildren = () => {
+		const childRenderValues = {
+			get isSelected() {
+				return radioAria.isSelected();
+			},
+			get isDisabled() {
+				return radioAria.isDisabled;
+			},
+			get isReadOnly() {
+				return state.isReadOnly;
+			},
+			get isInvalid() {
+				return state.isInvalid;
+			},
+			get isRequired() {
+				return state.isRequired;
+			}
+		};
+		return memo(createMemo(() => {
+			const children = fieldProps.children;
+			return typeof children === "function" ? children(childRenderValues) : children;
+		}));
+	};
+	return (() => {
+		var _el$8 = getNextElement(_tmpl$);
+		use(setFieldRef, _el$8);
+		spread(_el$8, mergeProps(domProps, {
+			get ["class"]() {
+				return renderProps.class();
+			},
+			get style() {
+				return renderProps.style();
+			},
+			get slot() {
+				return local.slot;
+			},
+			get ["data-selected"]() {
+				return radioAria.isSelected() || void 0;
+			},
+			get ["data-disabled"]() {
+				return radioAria.isDisabled || void 0;
+			},
+			get ["data-readonly"]() {
+				return state.isReadOnly || void 0;
+			},
+			get ["data-invalid"]() {
+				return state.isInvalid || void 0;
+			},
+			get ["data-required"]() {
+				return state.isRequired || void 0;
+			}
+		}), false, true);
+		insert(_el$8, createComponent(SelectionIndicatorContext.Provider, {
+			get value() {
+				return selectionIndicatorContext();
+			},
+			get children() {
+				return createComponent(InternalRadioContext.Provider, {
+					value: internalContext,
+					get children() {
+						return createComponent(Provider, {
+							values: [[TextContext, textSlots]],
+							get children() {
+								return createComponent(FieldChildren, {});
+							}
+						});
+					}
+				});
+			}
+		}));
+		runHydrationEvents();
+		return _el$8;
+	})();
+}
+/**
+* A RadioButton is the clickable area of a radio, including the indicator and label.
+* Must be rendered inside a `RadioField` (or the legacy `Radio`).
+*/
+function RadioButton(props) {
+	const getCtx = createMemo(() => useContext(InternalRadioContext));
+	const getState = createMemo(() => useContext(RadioGroupStateContext));
+	return createComponent(Show, {
+		get when() {
+			return getCtx();
+		},
+		fallback: null,
+		keyed: true,
+		children: (ctx) => createComponent(Show, {
+			get when() {
+				return getState();
+			},
+			fallback: null,
+			keyed: true,
+			children: (state) => createComponent(RadioButtonImpl, {
+				buttonProps: props,
+				ctx,
+				state
+			})
+		})
+	});
+}
+function RadioButtonImpl(props) {
+	const { ctx, state } = props;
+	const { isFocused, isFocusVisible, focusProps } = createFocusRing();
+	const { isHovered, hoverProps } = createHover({
+		get isDisabled() {
+			return ctx.isDisabled() || state.isReadOnly;
+		},
+		onHoverStart: props.buttonProps.onHoverStart,
+		onHoverEnd: props.buttonProps.onHoverEnd,
+		onHoverChange: props.buttonProps.onHoverChange
+	});
+	const renderValues = createMemo(() => ({
+		isSelected: ctx.isSelected(),
+		isHovered: isHovered(),
+		isPressed: ctx.isPressed(),
+		isFocused: isFocused(),
+		isFocusVisible: isFocusVisible(),
+		isDisabled: ctx.isDisabled(),
+		isReadOnly: state.isReadOnly,
+		isInvalid: state.isInvalid,
+		isRequired: state.isRequired
+	}));
+	const renderProps = useRenderProps({
+		children: props.buttonProps.children,
+		class: props.buttonProps.class,
+		style: props.buttonProps.style,
+		defaultClassName: ctx.defaultClassName
+	}, renderValues);
+	const cleanLabelProps = () => {
+		const { ref: _ref1, ...rest } = ctx.labelProps();
+		return rest;
+	};
+	const cleanHoverProps = () => {
+		const { ref: _ref2, ...rest } = hoverProps;
+		return rest;
+	};
+	const cleanInputProps = () => {
+		const { ref: _ref3, onFocus: _onFocus, onBlur: _onBlur, ...rest } = ctx.inputProps();
+		return rest;
+	};
+	const cleanFocusProps = () => {
+		const { ref: _ref4, onFocus: _onFocus, onBlur: _onBlur, ...rest } = focusProps;
+		return rest;
+	};
+	const handleInputFocus = (event) => {
+		ctx.inputProps().onFocus?.(event);
+		focusProps.onFocus?.(event);
+	};
+	const handleInputBlur = (event) => {
+		ctx.inputProps().onBlur?.(event);
+		focusProps.onBlur?.(event);
+	};
+	const handleInputClick = (event) => {
+		ctx.inputProps().onClick?.(event);
+	};
+	const handleInputInvalid = (event) => {
+		state.updateValidation(getNativeValidation(event.currentTarget));
+		state.commitValidation();
+		event.currentTarget.focus();
+		event.preventDefault();
+	};
+	const handleInputChange = (event) => {
+		ctx.inputProps().onChange?.(event);
+		state.updateValidation(event.currentTarget.validity.valid ? validValidation : getNativeValidation(event.currentTarget));
+		state.commitValidation();
+	};
+	const setButtonRef = (el) => {
+		assignRef(props.buttonProps.ref, el);
+	};
+	return (() => {
+		var _el$9 = getNextElement(_tmpl$6), _el$1 = _el$9.firstChild, [_el$10, _co$] = getNextMarker(_el$1.nextSibling), _el$11 = _el$10.nextSibling, [_el$12, _co$2] = getNextMarker(_el$11.nextSibling);
+		use(setButtonRef, _el$9);
+		spread(_el$9, mergeProps(cleanLabelProps, cleanHoverProps, {
+			get ["class"]() {
+				return renderProps.class();
+			},
+			get style() {
+				return renderProps.style();
+			},
+			get slot() {
+				return props.buttonProps.slot;
+			},
+			get ["data-selected"]() {
+				return ctx.isSelected() || void 0;
+			},
+			get ["data-pressed"]() {
+				return ctx.isPressed() || void 0;
+			},
+			get ["data-hovered"]() {
+				return isHovered() || void 0;
+			},
+			get ["data-focused"]() {
+				return isFocused() || void 0;
+			},
+			get ["data-focus-visible"]() {
+				return isFocusVisible() || void 0;
+			},
+			get ["data-disabled"]() {
+				return ctx.isDisabled() || void 0;
+			},
+			get ["data-readonly"]() {
+				return state.isReadOnly || void 0;
+			},
+			get ["data-invalid"]() {
+				return state.isInvalid || void 0;
+			},
+			get ["data-required"]() {
+				return state.isRequired || void 0;
+			}
+		}), false, true);
+		insert(_el$9, createComponent(VisuallyHidden, { get children() {
+			var _el$0 = getNextElement(_tmpl$2);
+			var _ref$ = ctx.setInputRef;
+			typeof _ref$ === "function" ? use(_ref$, _el$0) : ctx.setInputRef = _el$0;
+			spread(_el$0, mergeProps(cleanInputProps, cleanFocusProps, {
+				"onFocus": handleInputFocus,
+				"onBlur": handleInputBlur,
+				"onInvalid": handleInputInvalid,
+				"onChange": handleInputChange,
+				"onClick": handleInputClick
+			}), false, false);
+			runHydrationEvents();
+			return _el$0;
+		} }), _el$10, _co$);
+		insert(_el$9, () => renderProps.renderChildren(), _el$12, _co$2);
+		runHydrationEvents();
+		return _el$9;
+	})();
+}
+//#endregion
+export { Radio, RadioButton, RadioContext, RadioField, RadioFieldContext, RadioGroup, RadioGroupContext, RadioGroupStateContext };
+
+//# sourceMappingURL=RadioGroup.js.map