@yamada-ui/react/dist/esm/components/checkbox/checkbox.js

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

"use client";


import { styled } from "../../core/system/factory.js";
import { createSlotComponent } from "../../core/components/create-component.js";
import { CheckIcon } from "../icon/icons/check-icon.js";
import { MinusIcon } from "../icon/icons/minus-icon.js";
import { useInputBorder } from "../input/use-input-border.js";
import { checkboxStyle } from "./checkbox.style.js";
import { useCheckbox } from "./use-checkbox.js";
import { useMemo } from "react";
import { jsx, jsxs } from "react/jsx-runtime";

//#region src/components/checkbox/checkbox.tsx
const { component, PropsContext: CheckboxPropsContext, usePropsContext: useCheckboxPropsContext, withContext, withProvider, useRootComponentProps } = createSlotComponent("checkbox", checkboxStyle);
/**
* `Checkbox` is a component used for allowing users to select multiple values from multiple options.
*
* @see https://yamada-ui.com/docs/components/checkbox
*/
const Checkbox = withProvider(({ checkedIcon, children, errorBorderColor, focusBorderColor, indeterminateIcon, indicatorProps, inputProps, labelProps, rootProps,...rest }) => {
	const { checked, indeterminate, getIndicatorProps, getInputProps, getRootProps } = useCheckbox(rest);
	const varProps = useInputBorder({
		errorBorderColor,
		focusBorderColor
	});
	const icon = useMemo(() => {
		if (indeterminate) return indeterminateIcon || /* @__PURE__ */ jsx(MinusIcon, {});
		else if (checked) return checkedIcon || /* @__PURE__ */ jsx(CheckIcon, {});
		else return null;
	}, [
		indeterminate,
		indeterminateIcon,
		checked,
		checkedIcon
	]);
	const input = useMemo(() => {
		return /* @__PURE__ */ jsx(styled.input, { ...getInputProps(inputProps) });
	}, [getInputProps, inputProps]);
	const indicator = useMemo(() => {
		return /* @__PURE__ */ jsx(CheckboxIndicator, {
			...getIndicatorProps(indicatorProps),
			children: icon
		});
	}, [
		getIndicatorProps,
		indicatorProps,
		icon
	]);
	return /* @__PURE__ */ jsxs(styled.label, {
		...getRootProps({
			...varProps,
			...rootProps
		}),
		children: [
			input,
			indicator,
			children ? /* @__PURE__ */ jsx(CheckboxLabel, {
				...labelProps,
				children
			}) : null
		]
	});
}, "root")();
const CheckboxIndicator = withContext("div", "indicator")();
const CheckboxLabel = withContext("span", "label")();

//#endregion
export { Checkbox, CheckboxPropsContext, component, useCheckboxPropsContext, useRootComponentProps };
//# sourceMappingURL=checkbox.js.map