@proyecto-viviana/solidaria-components 0.3.2 → 0.4.0

package/dist/Checkbox.js

@@ -0,0 +1,923 @@
+import { Provider, filterDOMProps, useRenderProps } from "./utils.js";
+import { VisuallyHidden } from "./VisuallyHidden.js";
+import { FieldErrorContext } from "./FieldError.js";
+import { TextContext } from "./Text.js";
+import { FormContext } from "./Form.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 { createCheckbox, createCheckboxGroup, createCheckboxGroupItem, createFocusRing, createHover, mergeProps as mergeProps$2 } 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
+*/
+var _tmpl$ = /*#__PURE__*/ template(`<div>`), _tmpl$2 = /*#__PURE__*/ template(`<div><!$><!/><!$><!/><!$><!/>`), _tmpl$3 = /*#__PURE__*/ template(`<input>`), _tmpl$4 = /*#__PURE__*/ template(`<span slot=description>`), _tmpl$5 = /*#__PURE__*/ template(`<span slot=errorMessage>`), _tmpl$6 = /*#__PURE__*/ template(`<label>`), _tmpl$7 = /*#__PURE__*/ template(`<label><!$><!/><!$><!/>`);
+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;
+			}
+		};
+		return memo(createMemo(() => {
+			const children = local.children;
+			if (typeof children === "function") return children.length > 0 ? children(childRenderValues) : children();
+			return children;
+		}));
+	};
+	return createComponent(CheckboxGroupStateContext.Provider, {
+		value: state,
+		get children() {
+			var _el$ = getNextElement(_tmpl$2), _el$4 = _el$.firstChild, [_el$5, _co$] = getNextMarker(_el$4.nextSibling), _el$6 = _el$5.nextSibling, [_el$7, _co$2] = getNextMarker(_el$6.nextSibling), _el$8 = _el$7.nextSibling, [_el$9, _co$3] = getNextMarker(_el$8.nextSibling);
+			use(setGroupRef, _el$);
+			spread(_el$, mergeProps(domProps, cleanGroupProps, {
+				get ["aria-describedby"]() {
+					return groupDescribedBy();
+				},
+				get ["class"]() {
+					return renderProps.class();
+				},
+				get style() {
+					return renderProps.style();
+				},
+				get ["data-disabled"]() {
+					return state.isDisabled || void 0;
+				},
+				get ["data-readonly"]() {
+					return state.isReadOnly || void 0;
+				},
+				get ["data-required"]() {
+					return ariaProps.isRequired || void 0;
+				},
+				get ["data-invalid"]() {
+					return groupAria.isInvalid || void 0;
+				}
+			}), false, true);
+			insert(_el$, createComponent(GroupChildren, {}), _el$5, _co$);
+			insert(_el$, createComponent(Show, {
+				get when() {
+					return memo(() => !!(local.renderHelpText ?? true))() && local.description;
+				},
+				get children() {
+					var _el$2 = getNextElement(_tmpl$);
+					spread(_el$2, mergeProps(() => groupAria.descriptionProps), false, true);
+					insert(_el$2, () => local.description);
+					runHydrationEvents();
+					return _el$2;
+				}
+			}), _el$7, _co$2);
+			insert(_el$, createComponent(Show, {
+				get when() {
+					return memo(() => !!((local.renderHelpText ?? true) && groupAria.isInvalid))() && local.errorMessage;
+				},
+				get children() {
+					var _el$3 = getNextElement(_tmpl$);
+					spread(_el$3, mergeProps(() => groupAria.errorMessageProps), false, true);
+					insert(_el$3, () => local.errorMessage);
+					runHydrationEvents();
+					return _el$3;
+				}
+			}), _el$9, _co$3);
+			runHydrationEvents();
+			return _el$;
+		}
+	});
+}
+/**
+* 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$2(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 = createComponent(VisuallyHidden, { get children() {
+		var _el$0 = getNextElement(_tmpl$3);
+		use(setInputRef, _el$0);
+		spread(_el$0, mergeProps(cleanInputProps, cleanFocusProps, {
+			"onFocus": handleInputFocus,
+			"onBlur": handleInputBlur,
+			get ["aria-describedby"]() {
+				return describedBy();
+			}
+		}), false, false);
+		runHydrationEvents();
+		return _el$0;
+	} });
+	const labelChildren = () => [
+		hiddenInput,
+		memo(checkboxChildren),
+		createComponent(Show, {
+			get when() {
+				return local.description;
+			},
+			get children() {
+				var _el$1 = getNextElement(_tmpl$4);
+				setAttribute(_el$1, "id", descriptionId);
+				insert(_el$1, () => local.description);
+				return _el$1;
+			}
+		}),
+		createComponent(Show, {
+			get when() {
+				return memo(() => !!isInvalid())() && local.errorMessage;
+			},
+			get children() {
+				var _el$10 = getNextElement(_tmpl$5);
+				setAttribute(_el$10, "id", errorMessageId);
+				insert(_el$10, () => local.errorMessage);
+				return _el$10;
+			}
+		})
+	];
+	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()) : (() => {
+		var _el$11 = getNextElement(_tmpl$6);
+		use(setLabelRef, _el$11);
+		spread(_el$11, mergeProps(domProps, cleanLabelProps, cleanHoverProps, {
+			get ["class"]() {
+				return renderProps.class();
+			},
+			get style() {
+				return renderProps.style();
+			},
+			get slot() {
+				return local.slot;
+			},
+			get ["data-selected"]() {
+				return isSelected() || void 0;
+			},
+			get ["data-indeterminate"]() {
+				return local.isIndeterminate || void 0;
+			},
+			get ["data-pressed"]() {
+				return 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 isDisabled() || void 0;
+			},
+			get ["data-readonly"]() {
+				return isReadOnly() || void 0;
+			},
+			get ["data-invalid"]() {
+				return isInvalid() || void 0;
+			},
+			get ["data-required"]() {
+				return ariaProps.isRequired || void 0;
+			}
+		}), false, true);
+		insert(_el$11, labelChildren);
+		runHydrationEvents();
+		return _el$11;
+	})();
+}
+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$2(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();
+			}
+		};
+		return memo(createMemo(() => {
+			const children = mergedProps.children;
+			return typeof children === "function" ? children(childRenderValues) : children;
+		}));
+	};
+	return (() => {
+		var _el$12 = getNextElement(_tmpl$);
+		use(setFieldRef, _el$12);
+		spread(_el$12, mergeProps(domProps, {
+			get ["class"]() {
+				return renderProps.class();
+			},
+			get style() {
+				return renderProps.style();
+			},
+			get slot() {
+				return local.slot;
+			},
+			get ["data-selected"]() {
+				return isSelected() || void 0;
+			},
+			get ["data-indeterminate"]() {
+				return isIndeterminate() || void 0;
+			},
+			get ["data-disabled"]() {
+				return isDisabled() || void 0;
+			},
+			get ["data-readonly"]() {
+				return isReadOnly() || void 0;
+			},
+			get ["data-invalid"]() {
+				return isInvalid() || void 0;
+			},
+			get ["data-required"]() {
+				return isRequired() || void 0;
+			}
+		}), false, true);
+		insert(_el$12, createComponent(InternalCheckboxContext.Provider, {
+			value: internalContext,
+			get children() {
+				return createComponent(Provider, {
+					values: [[TextContext, textSlots]],
+					get children() {
+						return createComponent(Show, {
+							when: fieldErrorContext,
+							get fallback() {
+								return createComponent(FieldChildren, {});
+							},
+							keyed: true,
+							children: (ctx) => createComponent(FieldErrorContext.Provider, {
+								value: ctx,
+								get children() {
+									return createComponent(FieldChildren, {});
+								}
+							})
+						});
+					}
+				});
+			}
+		}));
+		runHydrationEvents();
+		return _el$12;
+	})();
+}
+/**
+* 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 createComponent(Show, {
+		get when() {
+			return getCtx();
+		},
+		fallback: null,
+		keyed: true,
+		children: (ctx) => createComponent(CheckboxButtonImpl, {
+			buttonProps: props,
+			ctx
+		})
+	});
+}
+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 (() => {
+		var _el$13 = getNextElement(_tmpl$7), _el$15 = _el$13.firstChild, [_el$16, _co$4] = getNextMarker(_el$15.nextSibling), _el$17 = _el$16.nextSibling, [_el$18, _co$5] = getNextMarker(_el$17.nextSibling);
+		use(setButtonRef, _el$13);
+		spread(_el$13, 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-indeterminate"]() {
+				return ctx.isIndeterminate() || 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 ctx.isReadOnly() || void 0;
+			},
+			get ["data-invalid"]() {
+				return ctx.isInvalid() || void 0;
+			},
+			get ["data-required"]() {
+				return ctx.isRequired() || void 0;
+			}
+		}), false, true);
+		insert(_el$13, createComponent(VisuallyHidden, { get children() {
+			var _el$14 = getNextElement(_tmpl$3);
+			var _ref$ = ctx.setInputRef;
+			typeof _ref$ === "function" ? use(_ref$, _el$14) : ctx.setInputRef = _el$14;
+			spread(_el$14, mergeProps(cleanInputProps, cleanFocusProps, {
+				"onFocus": handleInputFocus,
+				"onBlur": handleInputBlur
+			}), false, false);
+			runHydrationEvents();
+			return _el$14;
+		} }), _el$16, _co$4);
+		insert(_el$13, buttonChildren, _el$18, _co$5);
+		runHydrationEvents();
+		return _el$13;
+	})();
+}
+//#endregion
+export { Checkbox, CheckboxButton, CheckboxContext, CheckboxField, CheckboxFieldContext, CheckboxGroup, CheckboxGroupContext, CheckboxGroupStateContext };
+
+//# sourceMappingURL=Checkbox.js.map