@yamada-ui/react/dist/cjs/components/checkbox-card/checkbox-card.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_factory = require('../../core/system/factory.cjs');
const require_create_component = require('../../core/components/create-component.cjs');
const require_check_icon = require('../icon/icons/check-icon.cjs');
const require_minus_icon = require('../icon/icons/minus-icon.cjs');
const require_use_input_border = require('../input/use-input-border.cjs');
const require_use_checkbox = require('../checkbox/use-checkbox.cjs');
const require_checkbox_card_style = require('./checkbox-card.style.cjs');
let react = require("react");
react = require_rolldown_runtime.__toESM(react);
let react_jsx_runtime = require("react/jsx-runtime");
react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);

//#region src/components/checkbox-card/checkbox-card.tsx
const { component, PropsContext: CheckboxCardPropsContext, usePropsContext: useCheckboxCardPropsContext, withContext, withProvider, useRootComponentProps } = require_create_component.createSlotComponent("checkbox-card", require_checkbox_card_style.checkboxCardStyle);
/**
* `CheckboxCard` is a component used for allowing users to select multiple values from multiple options.
*
* @see https://yamada-ui.com/docs/components/checkbox-card
*/
const CheckboxCardRoot = withProvider(({ addon, checkedIcon, children, description, errorBorderColor, focusBorderColor, indeterminateIcon, label, withIndicator = true, addonProps, descriptionProps, indicatorProps, inputProps, labelProps, rootProps,...rest }) => {
	const { checked, indeterminate, getIndicatorProps, getInputProps, getRootProps } = require_use_checkbox.useCheckbox(rest);
	const varProps = require_use_input_border.useInputBorder({
		errorBorderColor,
		focusBorderColor
	});
	const icon = (0, react.useMemo)(() => {
		if (indeterminate) return indeterminateIcon || /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_minus_icon.MinusIcon, {});
		else if (checked) return checkedIcon || /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_check_icon.CheckIcon, {});
		else return null;
	}, [
		indeterminate,
		indeterminateIcon,
		checked,
		checkedIcon
	]);
	const computedChildren = (0, react.useMemo)(() => {
		if (children) return children;
		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
			label ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CheckboxCardLabel, {
				...labelProps,
				children: label
			}) : null,
			description ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CheckboxCardDescription, {
				...descriptionProps,
				children: description
			}) : null,
			addon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CheckboxCardAddon, {
				...addonProps,
				children: addon
			}) : null
		] });
	}, [
		addon,
		addonProps,
		children,
		description,
		descriptionProps,
		label,
		labelProps
	]);
	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_factory.styled.label, {
		...getRootProps({
			...varProps,
			...rootProps
		}),
		children: [
			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.input, { ...getInputProps(inputProps) }),
			withIndicator ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CheckboxCardIndicator, {
				...getIndicatorProps(indicatorProps),
				children: icon
			}) : null,
			computedChildren
		]
	});
}, "root")();
const CheckboxCardIndicator = withContext("div", "indicator")({ "data-indicator": "" });
const CheckboxCardLabel = withContext("span", "label")();
const CheckboxCardDescription = withContext("span", "description")();
const CheckboxCardAddon = withContext("span", "addon")();

//#endregion
exports.CheckboxCardAddon = CheckboxCardAddon;
exports.CheckboxCardDescription = CheckboxCardDescription;
exports.CheckboxCardLabel = CheckboxCardLabel;
exports.CheckboxCardPropsContext = CheckboxCardPropsContext;
exports.CheckboxCardRoot = CheckboxCardRoot;
exports.component = component;
exports.useCheckboxCardPropsContext = useCheckboxCardPropsContext;
exports.useRootComponentProps = useRootComponentProps;
//# sourceMappingURL=checkbox-card.cjs.map