@proyecto-viviana/solidaria-components 0.3.2 → 0.4.0

package/dist/RadioGroup.jsx

@@ -0,0 +1,681 @@
+import { Provider, filterDOMProps, useRenderProps } from "./utils.jsx";
+import { VisuallyHidden } from "./VisuallyHidden.jsx";
+import { FieldErrorContext } from "./FieldError.jsx";
+import { TextContext } from "./Text.jsx";
+import { SelectionIndicatorContext } from "./SelectionIndicator.jsx";
+import { Show, createContext, createMemo, createSignal, createUniqueId, splitProps, useContext } from "solid-js";
+import { createFocusRing, createHover, createRadio, createRadioGroup, mergeProps as mergeProps$1 } 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
+*/
+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$1(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;
+			}
+		};
+		const renderedChildren = createMemo(() => {
+			const children = props.children;
+			if (typeof children === "function") return children.length > 0 ? children(childRenderValues) : children();
+			return children;
+		});
+		return <>
+        {renderedChildren()}
+        <Show when={(local.renderHelpText ?? true) && mergedProps.description}>
+          <div {...groupAria.descriptionProps}>
+            {mergedProps.description}
+          </div>
+        </Show>
+        <Show when={(local.renderHelpText ?? true) && isInvalid() && mergedProps.errorMessage}>
+          <div {...groupAria.errorMessageProps}>
+            {mergedProps.errorMessage}
+          </div>
+        </Show>
+      </>;
+	};
+	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: <GroupChildren />
+	});
+	return <RadioGroupStateContext.Provider value={state}>
+      <FieldErrorContext.Provider value={fieldErrorContext}>
+        {local.render ? local.render(customRootProps(), renderValues()) : <div {...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}>
+            <GroupChildren />
+          </div>}
+      </FieldErrorContext.Provider>
+    </RadioGroupStateContext.Provider>;
+}
+/**
+* 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$1(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 = <VisuallyHidden>
+      <input ref={setInputRef} {...cleanInputProps()} {...cleanFocusProps()} onFocus={handleInputFocus} onBlur={handleInputBlur} onInvalid={handleInputInvalid} onChange={handleInputChange} onClick={handleInputClick} />
+    </VisuallyHidden>;
+	const labelChildren = () => <>
+      {hiddenInput}
+      {renderProps.renderChildren()}
+      <Show when={local.description}>
+        <span id={descriptionId} slot="description">
+          {local.description}
+        </span>
+      </Show>
+      <Show when={state.isInvalid && local.errorMessage}>
+        <span id={errorMessageId} slot="errorMessage">
+          {local.errorMessage}
+        </span>
+      </Show>
+    </>;
+	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 <SelectionIndicatorContext.Provider value={selectionIndicatorContext()}>
+      {local.render ? local.render(customLabelProps(), renderValues()) : <label {...domProps()} {...cleanLabelProps()} {...cleanHoverProps()} ref={setLabelRef} class={renderProps.class()} style={renderProps.style()} slot={local.slot} onClick={handleLabelClick} {...labelCaptureProps} 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}>
+          {labelChildren()}
+        </label>}
+    </SelectionIndicatorContext.Provider>;
+}
+/**
+* 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 <Show when={getState()} fallback={null} keyed>
+      {(state) => <RadioImpl radioProps={props} state={state} />}
+    </Show>;
+}
+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 <Show when={getState()} fallback={null} keyed>
+      {(state) => <RadioFieldImpl fieldProps={props} state={state} />}
+    </Show>;
+}
+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$1(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;
+			}
+		};
+		const renderedChildren = createMemo(() => {
+			const children = fieldProps.children;
+			return typeof children === "function" ? children(childRenderValues) : children;
+		});
+		return <>{renderedChildren()}</>;
+	};
+	return <div {...domProps()} ref={setFieldRef} class={renderProps.class()} style={renderProps.style()} slot={local.slot} data-selected={radioAria.isSelected() || 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}>
+      <SelectionIndicatorContext.Provider value={selectionIndicatorContext()}>
+        <InternalRadioContext.Provider value={internalContext}>
+          <Provider values={[[TextContext, textSlots]]}>
+            <FieldChildren />
+          </Provider>
+        </InternalRadioContext.Provider>
+      </SelectionIndicatorContext.Provider>
+    </div>;
+}
+/**
+* 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 <Show when={getCtx()} fallback={null} keyed>
+      {(ctx) => <Show when={getState()} fallback={null} keyed>
+          {(state) => <RadioButtonImpl buttonProps={props} ctx={ctx} state={state} />}
+        </Show>}
+    </Show>;
+}
+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 <label {...cleanLabelProps()} {...cleanHoverProps()} ref={setButtonRef} class={renderProps.class()} style={renderProps.style()} slot={props.buttonProps.slot} data-selected={ctx.isSelected() || void 0} data-pressed={ctx.isPressed() || void 0} data-hovered={isHovered() || void 0} data-focused={isFocused() || void 0} data-focus-visible={isFocusVisible() || void 0} data-disabled={ctx.isDisabled() || void 0} data-readonly={state.isReadOnly || void 0} data-invalid={state.isInvalid || void 0} data-required={state.isRequired || void 0}>
+      <VisuallyHidden>
+        <input ref={ctx.setInputRef} {...cleanInputProps()} {...cleanFocusProps()} onFocus={handleInputFocus} onBlur={handleInputBlur} onInvalid={handleInputInvalid} onChange={handleInputChange} onClick={handleInputClick} />
+      </VisuallyHidden>
+      {renderProps.renderChildren()}
+    </label>;
+}
+//#endregion
+export { Radio, RadioButton, RadioContext, RadioField, RadioFieldContext, RadioGroup, RadioGroupContext, RadioGroupStateContext };
+
+//# sourceMappingURL=RadioGroup.jsx.map