@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) • 2.5 kB
JavaScript
"use client";
const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
const require_group = require('../group/group.cjs');
const require_use_checkbox_group = require('./use-checkbox-group.cjs');
const require_checkbox = require('./checkbox.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/checkbox-group.tsx
/**
* `CheckboxGroup` is a component that groups `Checkbox` components.
*
* @see https://yamada-ui.com/docs/components/checkbox
*/
const CheckboxGroupRoot = require_checkbox.component((props) => {
const [, { colorScheme, size, variant, checkedIcon, children, disabled, errorBorderColor, focusBorderColor, invalid, items = [], readOnly, shape,...rest }] = require_checkbox.useRootComponentProps(props, "group", { transferProps: [
"variant",
"colorScheme",
"size",
"shape"
] });
const { max, value, getInputProps, getLabelProps, getRootProps, onChange } = require_use_checkbox_group.useCheckboxGroup(rest);
const computedChildren = (0, react.useMemo)(() => {
if (children) return children;
return items.map(({ label, value: value$1,...rest$1 }, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_checkbox.Checkbox, {
value: value$1,
...rest$1,
children: label
}, value$1 ?? index));
}, [items, children]);
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_checkbox.CheckboxPropsContext, {
value: (0, react.useMemo)(() => ({
colorScheme,
size,
variant,
checkedIcon,
disabled,
errorBorderColor,
focusBorderColor,
invalid,
readOnly,
shape
}), [
variant,
size,
colorScheme,
shape,
disabled,
invalid,
readOnly,
errorBorderColor,
focusBorderColor,
checkedIcon
]),
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_use_checkbox_group.CheckboxGroupContext, {
value: (0, react.useMemo)(() => ({
max,
value,
getInputProps,
getLabelProps,
onChange
}), [
max,
value,
getInputProps,
getLabelProps,
onChange
]),
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_group.Group, {
orientation: "vertical",
...getRootProps(),
children: computedChildren
})
})
});
}, "group")();
//#endregion
exports.CheckboxGroupRoot = CheckboxGroupRoot;
//# sourceMappingURL=checkbox-group.cjs.map