@yamada-ui/react
Version:
React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion
84 lines (80 loc) • 3.19 kB
JavaScript
"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 { useCheckbox } from "../checkbox/use-checkbox.js";
import { checkboxCardStyle } from "./checkbox-card.style.js";
import { useMemo } from "react";
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
//#region src/components/checkbox-card/checkbox-card.tsx
const { component, PropsContext: CheckboxCardPropsContext, usePropsContext: useCheckboxCardPropsContext, withContext, withProvider, useRootComponentProps } = createSlotComponent("checkbox-card", 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 } = 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 computedChildren = useMemo(() => {
if (children) return children;
return /* @__PURE__ */ jsxs(Fragment$1, { children: [
label ? /* @__PURE__ */ jsx(CheckboxCardLabel, {
...labelProps,
children: label
}) : null,
description ? /* @__PURE__ */ jsx(CheckboxCardDescription, {
...descriptionProps,
children: description
}) : null,
addon ? /* @__PURE__ */ jsx(CheckboxCardAddon, {
...addonProps,
children: addon
}) : null
] });
}, [
addon,
addonProps,
children,
description,
descriptionProps,
label,
labelProps
]);
return /* @__PURE__ */ jsxs(styled.label, {
...getRootProps({
...varProps,
...rootProps
}),
children: [
/* @__PURE__ */ jsx(styled.input, { ...getInputProps(inputProps) }),
withIndicator ? /* @__PURE__ */ 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
export { CheckboxCardAddon, CheckboxCardDescription, CheckboxCardLabel, CheckboxCardPropsContext, CheckboxCardRoot, component, useCheckboxCardPropsContext, useRootComponentProps };
//# sourceMappingURL=checkbox-card.js.map