@proyecto-viviana/solidaria-components 0.3.2 → 0.4.0

package/dist/Checkbox.jsx

@@ -0,0 +1,707 @@
+import { Provider, filterDOMProps, useRenderProps } from "./utils.jsx";
+import { VisuallyHidden } from "./VisuallyHidden.jsx";
+import { FieldErrorContext } from "./FieldError.jsx";
+import { TextContext } from "./Text.jsx";
+import { FormContext } from "./Form.jsx";
+import { Show, createContext, createMemo, createSignal, createUniqueId, splitProps, useContext } from "solid-js";
+import { createCheckbox, createCheckboxGroup, createCheckboxGroupItem, createFocusRing, createHover, mergeProps as mergeProps$1 } from "@proyecto-viviana/solidaria";
+import { VALID_VALIDITY_STATE, createCheckboxGroupState, createToggleState } from "@proyecto-viviana/solid-stately";
+//#region src/Checkbox.tsx
+/**
+* Checkbox and CheckboxGroup components for solidaria-components
+*
+* Pre-wired headless checkbox components that combine state + aria hooks.
+* Port of react-aria-components/src/Checkbox.tsx
+*/
+function assignRef(ref, el) {
+	if (!ref) return;
+	if (typeof ref === "function") ref(el);
+	else ref.current = el;
+}
+const CheckboxGroupContext = createContext(null);
+const CheckboxGroupStateContext = createContext(null);
+const CheckboxContext = createContext(null);
+function withFormValidationBehavior(props, formContext) {
+	if (!formContext?.validationBehavior) return props;
+	return new Proxy(props, {
+		get(target, property, receiver) {
+			const localValue = Reflect.get(target, property, receiver);
+			if (property === "validationBehavior" && localValue === void 0) return formContext.validationBehavior;
+			return localValue;
+		},
+		has(target, property) {
+			return Reflect.has(target, property) || property === "validationBehavior" && formContext.validationBehavior !== void 0;
+		},
+		ownKeys(target) {
+			const keys = new Set(Reflect.ownKeys(target));
+			if (formContext.validationBehavior !== void 0) keys.add("validationBehavior");
+			return Array.from(keys);
+		},
+		getOwnPropertyDescriptor(target, property) {
+			const descriptor = Reflect.getOwnPropertyDescriptor(target, property);
+			if (descriptor) return descriptor;
+			if (property === "validationBehavior" && formContext.validationBehavior !== void 0) return {
+				enumerable: true,
+				configurable: true,
+				get: () => formContext.validationBehavior
+			};
+		}
+	});
+}
+/**
+* A checkbox group allows a user to select multiple items from a list of options.
+*
+* @example
+* ```tsx
+* <CheckboxGroup>
+*   <Checkbox value="one">Option 1</Checkbox>
+*   <Checkbox value="two">Option 2</Checkbox>
+* </CheckboxGroup>
+* ```
+*/
+function CheckboxGroup(props) {
+	const [local, ariaProps] = splitProps(withFormValidationBehavior(props, useContext(FormContext)), [
+		"class",
+		"style",
+		"slot",
+		"ref",
+		"description",
+		"errorMessage",
+		"renderHelpText",
+		"children"
+	]);
+	const state = createCheckboxGroupState(() => ({
+		value: ariaProps.value,
+		defaultValue: ariaProps.defaultValue,
+		onChange: ariaProps.onChange,
+		isDisabled: ariaProps.isDisabled,
+		isReadOnly: ariaProps.isReadOnly,
+		isRequired: ariaProps.isRequired,
+		isInvalid: ariaProps.isInvalid,
+		validationState: ariaProps.validationState,
+		validate: ariaProps.validate,
+		validationBehavior: ariaProps.validationBehavior,
+		name: ariaProps.name
+	}));
+	const groupAria = createCheckboxGroup(() => ({
+		...ariaProps,
+		description: local.description,
+		errorMessage: local.errorMessage
+	}), state);
+	const renderValues = createMemo(() => ({
+		isDisabled: state.isDisabled,
+		isReadOnly: state.isReadOnly,
+		isRequired: ariaProps.isRequired ?? false,
+		isInvalid: groupAria.isInvalid,
+		state
+	}));
+	const renderProps = useRenderProps({
+		get children() {
+			return local.children;
+		},
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-CheckboxGroup"
+	}, renderValues);
+	const domProps = createMemo(() => filterDOMProps(ariaProps, { global: true }));
+	const cleanGroupProps = () => {
+		const { ref: _ref, ...rest } = groupAria.groupProps;
+		return rest;
+	};
+	const setGroupRef = (el) => {
+		assignRef(local.ref, el);
+	};
+	const groupDescribedBy = () => {
+		const ids = [
+			cleanGroupProps()["aria-describedby"],
+			local.description ? groupAria.descriptionProps.id : void 0,
+			groupAria.isInvalid && local.errorMessage ? groupAria.errorMessageProps.id : void 0
+		].filter(Boolean).join(" ").split(" ").filter(Boolean);
+		return ids.length ? Array.from(new Set(ids)).join(" ") : void 0;
+	};
+	const GroupChildren = () => {
+		const childRenderValues = {
+			get isDisabled() {
+				return state.isDisabled;
+			},
+			get isReadOnly() {
+				return state.isReadOnly;
+			},
+			get isRequired() {
+				return state.isRequired();
+			},
+			get isInvalid() {
+				return groupAria.isInvalid;
+			},
+			get state() {
+				return state;
+			}
+		};
+		const renderedChildren = createMemo(() => {
+			const children = local.children;
+			if (typeof children === "function") return children.length > 0 ? children(childRenderValues) : children();
+			return children;
+		});
+		return <>{renderedChildren()}</>;
+	};
+	return <CheckboxGroupStateContext.Provider value={state}>
+      <div {...domProps()} {...cleanGroupProps()} ref={setGroupRef} aria-describedby={groupDescribedBy()} class={renderProps.class()} style={renderProps.style()} data-disabled={state.isDisabled || void 0} data-readonly={state.isReadOnly || void 0} data-required={ariaProps.isRequired || void 0} data-invalid={groupAria.isInvalid || void 0}>
+        <GroupChildren />
+        {}
+        <Show when={(local.renderHelpText ?? true) && local.description}>
+          <div {...groupAria.descriptionProps}>
+            {local.description}
+          </div>
+        </Show>
+        <Show when={(local.renderHelpText ?? true) && groupAria.isInvalid && local.errorMessage}>
+          <div {...groupAria.errorMessageProps}>
+            {local.errorMessage}
+          </div>
+        </Show>
+      </div>
+    </CheckboxGroupStateContext.Provider>;
+}
+/**
+* A checkbox allows a user to select multiple items from a list of individual items,
+* or to mark one individual item as selected.
+*
+* @example
+* ```tsx
+* <Checkbox>
+*   {({ isSelected }) => (
+*     <>
+*       <span class={`checkbox ${isSelected ? 'checked' : ''}`}>
+*         {isSelected && '✓'}
+*       </span>
+*       <span>Accept terms</span>
+*     </>
+*   )}
+* </Checkbox>
+* ```
+*/
+function Checkbox(props) {
+	const [inputElement, setInputElement] = createSignal(null);
+	const formContext = useContext(FormContext);
+	const contextProps = useContext(CheckboxContext);
+	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 propsWithFormBehavior = withFormValidationBehavior(mergedProps, formContext);
+	const inputRefs = createMemo(() => [
+		contextBaseProps().inputRef,
+		contextSlotProps?.inputRef,
+		props.inputRef
+	].filter(Boolean));
+	const [local, ariaProps] = splitProps(propsWithFormBehavior, [
+		"class",
+		"style",
+		"render",
+		"ref",
+		"inputRef",
+		"slot",
+		"isIndeterminate",
+		"description",
+		"errorMessage",
+		"onHoverStart",
+		"onHoverEnd",
+		"onHoverChange"
+	]);
+	const descriptionId = createUniqueId();
+	const errorMessageId = createUniqueId();
+	const inputAriaProps = createMemo(() => {
+		const clean = {};
+		for (const key in ariaProps) if (!key.startsWith("data-")) clean[key] = ariaProps[key];
+		return clean;
+	});
+	const groupState = useContext(CheckboxGroupStateContext);
+	let isSelected;
+	let isPressed;
+	let isDisabled;
+	let isReadOnly;
+	let isInvalid;
+	let labelProps;
+	let inputProps;
+	if (groupState) {
+		const itemAria = createCheckboxGroupItem(() => ({
+			...inputAriaProps(),
+			value: inputAriaProps().value ?? "",
+			children: typeof mergedProps.children === "function" ? true : mergedProps.children
+		}), groupState, inputElement);
+		isSelected = itemAria.isSelected;
+		isPressed = itemAria.isPressed;
+		labelProps = itemAria.labelProps;
+		inputProps = () => itemAria.inputProps;
+	} else {
+		const checkboxAria = createCheckbox(() => ({
+			...inputAriaProps(),
+			isIndeterminate: local.isIndeterminate,
+			children: typeof mergedProps.children === "function" ? true : mergedProps.children
+		}), createToggleState(() => ({
+			isSelected: ariaProps.isSelected,
+			defaultSelected: ariaProps.defaultSelected,
+			onChange: ariaProps.onChange,
+			isReadOnly: ariaProps.isReadOnly
+		})), inputElement);
+		isSelected = checkboxAria.isSelected;
+		isPressed = checkboxAria.isPressed;
+		labelProps = checkboxAria.labelProps;
+		inputProps = () => checkboxAria.inputProps;
+	}
+	isDisabled = () => inputProps().disabled === true;
+	isReadOnly = () => inputProps()["aria-readonly"] === true;
+	isInvalid = () => inputProps()["aria-invalid"] === true;
+	const describedBy = () => {
+		const ids = [
+			ariaProps["aria-describedby"],
+			local.description ? descriptionId : void 0,
+			isInvalid() && local.errorMessage ? errorMessageId : void 0
+		].filter(Boolean);
+		return ids.length ? ids.join(" ") : void 0;
+	};
+	const { isFocused, isFocusVisible, focusProps } = createFocusRing();
+	const { isHovered, hoverProps } = createHover({
+		get isDisabled() {
+			return isDisabled() || isReadOnly();
+		},
+		onHoverStart: local.onHoverStart,
+		onHoverEnd: local.onHoverEnd,
+		onHoverChange: local.onHoverChange
+	});
+	const renderValues = createMemo(() => ({
+		isSelected: isSelected(),
+		isIndeterminate: local.isIndeterminate ?? false,
+		isHovered: isHovered(),
+		isPressed: isPressed(),
+		isFocused: isFocused(),
+		isFocusVisible: isFocusVisible(),
+		isDisabled: isDisabled(),
+		isReadOnly: isReadOnly(),
+		isInvalid: isInvalid(),
+		isRequired: ariaProps.isRequired ?? false
+	}));
+	const renderProps = useRenderProps({
+		children: mergedProps.children,
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-Checkbox"
+	}, renderValues);
+	const childRenderValues = {
+		get isSelected() {
+			return isSelected();
+		},
+		get isIndeterminate() {
+			return local.isIndeterminate ?? false;
+		},
+		get isHovered() {
+			return isHovered();
+		},
+		get isPressed() {
+			return isPressed();
+		},
+		get isFocused() {
+			return isFocused();
+		},
+		get isFocusVisible() {
+			return isFocusVisible();
+		},
+		get isDisabled() {
+			return isDisabled();
+		},
+		get isReadOnly() {
+			return isReadOnly();
+		},
+		get isInvalid() {
+			return isInvalid();
+		},
+		get isRequired() {
+			return ariaProps.isRequired ?? false;
+		}
+	};
+	const checkboxChildren = () => {
+		const children = mergedProps.children;
+		return typeof children === "function" ? children(childRenderValues) : children;
+	};
+	const domProps = createMemo(() => {
+		const filtered = filterDOMProps(ariaProps, { global: true });
+		delete filtered.id;
+		delete filtered.onClick;
+		return filtered;
+	});
+	const cleanLabelProps = () => {
+		const { ref: _ref1, ...rest } = labelProps;
+		return rest;
+	};
+	const cleanHoverProps = () => {
+		const { ref: _ref2, ...rest } = hoverProps;
+		return rest;
+	};
+	const cleanInputProps = () => {
+		const { ref: _ref3, onFocus: _onFocus, onBlur: _onBlur, ...rest } = inputProps();
+		return rest;
+	};
+	const cleanFocusProps = () => {
+		const { ref: _ref4, onFocus: _onFocus, onBlur: _onBlur, ...rest } = focusProps;
+		return rest;
+	};
+	const handleInputFocus = (event) => {
+		inputProps().onFocus?.(event);
+		focusProps.onFocus?.(event);
+	};
+	const handleInputBlur = (event) => {
+		inputProps().onBlur?.(event);
+		focusProps.onBlur?.(event);
+	};
+	const setLabelRef = (el) => {
+		assignRef(local.ref, el);
+	};
+	const setInputRef = (el) => {
+		setInputElement(el);
+		for (const ref of inputRefs()) assignRef(ref, el);
+	};
+	const hiddenInput = <VisuallyHidden>
+      <input ref={setInputRef} {...cleanInputProps()} {...cleanFocusProps()} onFocus={handleInputFocus} onBlur={handleInputBlur} aria-describedby={describedBy()} />
+    </VisuallyHidden>;
+	const labelChildren = () => <>
+      {hiddenInput}
+      {checkboxChildren()}
+      <Show when={local.description}>
+        <span id={descriptionId} slot="description">
+          {local.description}
+        </span>
+      </Show>
+      <Show when={isInvalid() && local.errorMessage}>
+        <span id={errorMessageId} slot="errorMessage">
+          {local.errorMessage}
+        </span>
+      </Show>
+    </>;
+	const rootProps = createMemo(() => ({
+		...domProps(),
+		...cleanLabelProps(),
+		...cleanHoverProps(),
+		class: renderProps.class(),
+		style: renderProps.style(),
+		slot: local.slot,
+		"data-selected": isSelected() || void 0,
+		"data-indeterminate": local.isIndeterminate || void 0,
+		"data-pressed": isPressed() || void 0,
+		"data-hovered": isHovered() || void 0,
+		"data-focused": isFocused() || void 0,
+		"data-focus-visible": isFocusVisible() || void 0,
+		"data-disabled": isDisabled() || void 0,
+		"data-readonly": isReadOnly() || void 0,
+		"data-invalid": isInvalid() || void 0,
+		"data-required": ariaProps.isRequired || void 0
+	}));
+	const customRootProps = () => ({
+		...rootProps(),
+		ref: setLabelRef,
+		children: labelChildren()
+	});
+	return local.render ? local.render(customRootProps(), renderValues()) : <label {...domProps()} {...cleanLabelProps()} {...cleanHoverProps()} ref={setLabelRef} class={renderProps.class()} style={renderProps.style()} slot={local.slot} data-selected={isSelected() || void 0} data-indeterminate={local.isIndeterminate || void 0} data-pressed={isPressed() || void 0} data-hovered={isHovered() || void 0} data-focused={isFocused() || void 0} data-focus-visible={isFocusVisible() || void 0} data-disabled={isDisabled() || void 0} data-readonly={isReadOnly() || void 0} data-invalid={isInvalid() || void 0} data-required={ariaProps.isRequired || void 0}>
+      {labelChildren()}
+    </label>;
+}
+const CheckboxFieldContext = createContext(null);
+const InternalCheckboxContext = createContext(null);
+/**
+* A checkbox allows a user to select an item, with support for validation and help text.
+* Wraps a `CheckboxButton` and provides description/error wiring.
+*
+* @example
+* ```tsx
+* <CheckboxField>
+*   <CheckboxButton>Accept terms</CheckboxButton>
+*   <Text slot="description">Required to continue</Text>
+* </CheckboxField>
+* ```
+*/
+function CheckboxField(props) {
+	const [inputElement, setInputElement] = createSignal(null);
+	const formContext = useContext(FormContext);
+	const contextProps = useContext(CheckboxFieldContext);
+	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 propsWithFormBehavior = withFormValidationBehavior(mergedProps, formContext);
+	const inputRefs = createMemo(() => [
+		contextBaseProps().inputRef,
+		contextSlotProps?.inputRef,
+		props.inputRef
+	].filter(Boolean));
+	const [local, ariaProps] = splitProps(propsWithFormBehavior, [
+		"class",
+		"style",
+		"ref",
+		"inputRef",
+		"slot",
+		"isIndeterminate",
+		"children"
+	]);
+	const inputAriaProps = createMemo(() => {
+		const clean = {};
+		for (const key in ariaProps) if (!key.startsWith("data-")) clean[key] = ariaProps[key];
+		return clean;
+	});
+	const groupState = useContext(CheckboxGroupStateContext);
+	let isSelected;
+	let isPressed;
+	let labelProps;
+	let inputProps;
+	let getDescriptionProps;
+	let getErrorMessageProps;
+	if (groupState) {
+		const itemAria = createCheckboxGroupItem(() => ({
+			...inputAriaProps(),
+			value: inputAriaProps().value ?? "",
+			children: true
+		}), groupState, inputElement);
+		isSelected = itemAria.isSelected;
+		isPressed = itemAria.isPressed;
+		labelProps = itemAria.labelProps;
+		inputProps = () => itemAria.inputProps;
+		getDescriptionProps = () => itemAria.descriptionProps;
+		getErrorMessageProps = () => itemAria.errorMessageProps;
+	} else {
+		const checkboxAria = createCheckbox(() => ({
+			...inputAriaProps(),
+			isIndeterminate: local.isIndeterminate,
+			children: true
+		}), createToggleState(() => ({
+			isSelected: ariaProps.isSelected,
+			defaultSelected: ariaProps.defaultSelected,
+			onChange: ariaProps.onChange,
+			isReadOnly: ariaProps.isReadOnly
+		})), inputElement);
+		isSelected = checkboxAria.isSelected;
+		isPressed = checkboxAria.isPressed;
+		labelProps = checkboxAria.labelProps;
+		inputProps = () => checkboxAria.inputProps;
+		getDescriptionProps = () => checkboxAria.descriptionProps;
+		getErrorMessageProps = () => checkboxAria.errorMessageProps;
+	}
+	const isDisabled = () => inputProps().disabled === true;
+	const isReadOnly = () => inputProps()["aria-readonly"] === true;
+	const isInvalid = () => inputProps()["aria-invalid"] === true;
+	const isIndeterminate = () => local.isIndeterminate ?? false;
+	const isRequired = () => ariaProps.isRequired ?? false;
+	const setInputRef = (el) => {
+		setInputElement(el);
+		for (const ref of inputRefs()) assignRef(ref, el);
+	};
+	const setFieldRef = (el) => {
+		assignRef(local.ref, el);
+	};
+	const internalContext = {
+		isSelected,
+		isPressed,
+		isDisabled,
+		isReadOnly,
+		isInvalid,
+		isIndeterminate,
+		isRequired,
+		labelProps: () => labelProps,
+		inputProps,
+		setInputRef,
+		defaultClassName: "solidaria-CheckboxButton"
+	};
+	const textSlots = { slots: {
+		get description() {
+			return getDescriptionProps();
+		},
+		get errorMessage() {
+			return getErrorMessageProps();
+		}
+	} };
+	const renderValues = createMemo(() => ({
+		isSelected: isSelected(),
+		isIndeterminate: isIndeterminate(),
+		isDisabled: isDisabled(),
+		isReadOnly: isReadOnly(),
+		isInvalid: isInvalid(),
+		isRequired: isRequired()
+	}));
+	const renderProps = useRenderProps({
+		children: mergedProps.children,
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-CheckboxField"
+	}, renderValues);
+	const fieldErrorContext = groupState ? null : {
+		get validation() {
+			return {
+				isInvalid: isInvalid(),
+				validationDetails: VALID_VALIDITY_STATE,
+				validationErrors: []
+			};
+		},
+		get errorMessageProps() {
+			return getErrorMessageProps();
+		}
+	};
+	const domProps = createMemo(() => {
+		const filtered = filterDOMProps(ariaProps, { global: true });
+		delete filtered.id;
+		delete filtered.onClick;
+		return filtered;
+	});
+	const FieldChildren = () => {
+		const childRenderValues = {
+			get isSelected() {
+				return isSelected();
+			},
+			get isIndeterminate() {
+				return isIndeterminate();
+			},
+			get isDisabled() {
+				return isDisabled();
+			},
+			get isReadOnly() {
+				return isReadOnly();
+			},
+			get isInvalid() {
+				return isInvalid();
+			},
+			get isRequired() {
+				return isRequired();
+			}
+		};
+		const renderedChildren = createMemo(() => {
+			const children = mergedProps.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={isSelected() || void 0} data-indeterminate={isIndeterminate() || void 0} data-disabled={isDisabled() || void 0} data-readonly={isReadOnly() || void 0} data-invalid={isInvalid() || void 0} data-required={isRequired() || void 0}>
+      <InternalCheckboxContext.Provider value={internalContext}>
+        <Provider values={[[TextContext, textSlots]]}>
+          <Show when={fieldErrorContext} fallback={<FieldChildren />} keyed>
+            {(ctx) => <FieldErrorContext.Provider value={ctx}>
+                <FieldChildren />
+              </FieldErrorContext.Provider>}
+          </Show>
+        </Provider>
+      </InternalCheckboxContext.Provider>
+    </div>;
+}
+/**
+* A checkbox button is the clickable area of a checkbox, including the indicator and label.
+* Must be rendered inside a `CheckboxField` (or the legacy `Checkbox`).
+*/
+function CheckboxButton(props) {
+	const getCtx = createMemo(() => useContext(InternalCheckboxContext));
+	return <Show when={getCtx()} fallback={null} keyed>
+      {(ctx) => <CheckboxButtonImpl buttonProps={props} ctx={ctx} />}
+    </Show>;
+}
+function CheckboxButtonImpl(props) {
+	const { ctx } = props;
+	const { isFocused, isFocusVisible, focusProps } = createFocusRing();
+	const { isHovered, hoverProps } = createHover({
+		get isDisabled() {
+			return ctx.isDisabled() || ctx.isReadOnly();
+		},
+		onHoverStart: props.buttonProps.onHoverStart,
+		onHoverEnd: props.buttonProps.onHoverEnd,
+		onHoverChange: props.buttonProps.onHoverChange
+	});
+	const renderValues = createMemo(() => ({
+		isSelected: ctx.isSelected(),
+		isIndeterminate: ctx.isIndeterminate(),
+		isHovered: isHovered(),
+		isPressed: ctx.isPressed(),
+		isFocused: isFocused(),
+		isFocusVisible: isFocusVisible(),
+		isDisabled: ctx.isDisabled(),
+		isReadOnly: ctx.isReadOnly(),
+		isInvalid: ctx.isInvalid(),
+		isRequired: ctx.isRequired()
+	}));
+	const renderProps = useRenderProps({
+		children: props.buttonProps.children,
+		class: props.buttonProps.class,
+		style: props.buttonProps.style,
+		defaultClassName: ctx.defaultClassName
+	}, renderValues);
+	const childRenderValues = {
+		get isSelected() {
+			return ctx.isSelected();
+		},
+		get isIndeterminate() {
+			return ctx.isIndeterminate();
+		},
+		get isHovered() {
+			return isHovered();
+		},
+		get isPressed() {
+			return ctx.isPressed();
+		},
+		get isFocused() {
+			return isFocused();
+		},
+		get isFocusVisible() {
+			return isFocusVisible();
+		},
+		get isDisabled() {
+			return ctx.isDisabled();
+		},
+		get isReadOnly() {
+			return ctx.isReadOnly();
+		},
+		get isInvalid() {
+			return ctx.isInvalid();
+		},
+		get isRequired() {
+			return ctx.isRequired();
+		}
+	};
+	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 setButtonRef = (el) => {
+		assignRef(props.buttonProps.ref, el);
+	};
+	const buttonChildren = () => {
+		const children = props.buttonProps.children;
+		return typeof children === "function" ? children(childRenderValues) : children;
+	};
+	return <label {...cleanLabelProps()} {...cleanHoverProps()} ref={setButtonRef} class={renderProps.class()} style={renderProps.style()} slot={props.buttonProps.slot} data-selected={ctx.isSelected() || void 0} data-indeterminate={ctx.isIndeterminate() || 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={ctx.isReadOnly() || void 0} data-invalid={ctx.isInvalid() || void 0} data-required={ctx.isRequired() || void 0}>
+      <VisuallyHidden>
+        <input ref={ctx.setInputRef} {...cleanInputProps()} {...cleanFocusProps()} onFocus={handleInputFocus} onBlur={handleInputBlur} />
+      </VisuallyHidden>
+      {buttonChildren()}
+    </label>;
+}
+//#endregion
+export { Checkbox, CheckboxButton, CheckboxContext, CheckboxField, CheckboxFieldContext, CheckboxGroup, CheckboxGroupContext, CheckboxGroupStateContext };
+
+//# sourceMappingURL=Checkbox.jsx.map