@yamada-ui/react/dist/cjs/components/switch/use-switch.cjs

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

"use client";


const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
const require_dom = require('../../utils/dom.cjs');
const require_ref = require('../../utils/ref.cjs');
const require_utils_index = require('../../utils/index.cjs');
const require_hooks_use_controllable_state_index = require('../../hooks/use-controllable-state/index.cjs');
const require_use_field_props = require('../field/use-field-props.cjs');
let react = require("react");
react = require_rolldown_runtime.__toESM(react);

//#region src/components/switch/use-switch.ts
const useSwitch = (props = {}) => {
	const uuid = (0, react.useId)();
	const { props: { id = uuid, ref, name, checked: checkedProp, checkOnEnter = true, defaultChecked = false, disabled, readOnly, required, value, onChange: onChangeProp,...rest }, ariaProps, dataProps, eventProps } = require_use_field_props.useFieldProps(props);
	const interactive = !(readOnly || disabled);
	const inputRef = (0, react.useRef)(null);
	const [checked, setChecked] = require_hooks_use_controllable_state_index.useControllableState({
		defaultValue: defaultChecked,
		value: checkedProp
	});
	const onChange = (0, react.useCallback)((ev) => {
		if (!interactive) return ev.preventDefault();
		setChecked(ev.target.checked);
		onChangeProp?.(ev);
	}, [
		onChangeProp,
		setChecked,
		interactive
	]);
	const onKeyDown = (0, react.useCallback)((ev) => {
		if (interactive && checkOnEnter && ev.key === "Enter") inputRef.current?.click();
	}, [interactive, checkOnEnter]);
	const getRootProps = (0, react.useCallback)((props$1 = {}) => ({
		...dataProps,
		htmlFor: id,
		"data-checked": (0, require_utils_index.utils_exports.dataAttr)(checked),
		...rest,
		...props$1
	}), [
		checked,
		rest,
		id,
		dataProps
	]);
	const getTrackProps = (0, react.useCallback)((props$1 = {}) => ({
		"data-checked": (0, require_utils_index.utils_exports.dataAttr)(checked),
		...dataProps,
		...props$1
	}), [checked, dataProps]);
	const getThumbProps = (0, react.useCallback)((props$1 = {}) => ({
		"data-checked": (0, require_utils_index.utils_exports.dataAttr)(checked),
		...dataProps,
		...props$1
	}), [checked, dataProps]);
	return {
		checked,
		getInputProps: (0, react.useCallback)((props$1 = {}) => ({
			...ariaProps,
			...dataProps,
			id,
			type: "checkbox",
			name,
			style: require_dom.visuallyHiddenAttributes.style,
			checked,
			disabled,
			readOnly,
			required,
			role: "switch",
			tabIndex: interactive ? 0 : -1,
			value,
			...props$1,
			ref: require_ref.mergeRefs(inputRef, props$1.ref, ref),
			onBlur: (0, require_utils_index.utils_exports.handlerAll)(eventProps.onBlur, props$1.onBlur),
			onChange: (0, require_utils_index.utils_exports.handlerAll)(props$1.onChange, onChange),
			onFocus: (0, require_utils_index.utils_exports.handlerAll)(eventProps.onFocus, props$1.onFocus),
			onKeyDown: (0, require_utils_index.utils_exports.handlerAll)(props$1.onKeyDown, onKeyDown)
		}), [
			ariaProps,
			dataProps,
			id,
			name,
			checked,
			disabled,
			readOnly,
			required,
			interactive,
			value,
			ref,
			eventProps,
			onChange,
			onKeyDown
		]),
		getLabelProps: (0, react.useCallback)((props$1 = {}) => ({
			...dataProps,
			"data-checked": (0, require_utils_index.utils_exports.dataAttr)(checked),
			...props$1
		}), [dataProps, checked]),
		getRootProps,
		getThumbProps,
		getTrackProps
	};
};

//#endregion
exports.useSwitch = useSwitch;
//# sourceMappingURL=use-switch.cjs.map