@yamada-ui/react
Version:
React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion
77 lines (73 loc) • 3.19 kB
JavaScript
"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_checkbox_style = require('./checkbox.style.cjs');
const require_use_checkbox = require('./use-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.tsx
const { component, PropsContext: CheckboxPropsContext, usePropsContext: useCheckboxPropsContext, withContext, withProvider, useRootComponentProps } = require_create_component.createSlotComponent("checkbox", require_checkbox_style.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 } = 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 input = (0, react.useMemo)(() => {
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.input, { ...getInputProps(inputProps) });
}, [getInputProps, inputProps]);
const indicator = (0, react.useMemo)(() => {
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CheckboxIndicator, {
...getIndicatorProps(indicatorProps),
children: icon
});
}, [
getIndicatorProps,
indicatorProps,
icon
]);
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_factory.styled.label, {
...getRootProps({
...varProps,
...rootProps
}),
children: [
input,
indicator,
children ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CheckboxLabel, {
...labelProps,
children
}) : null
]
});
}, "root")();
const CheckboxIndicator = withContext("div", "indicator")();
const CheckboxLabel = withContext("span", "label")();
//#endregion
exports.Checkbox = Checkbox;
exports.CheckboxPropsContext = CheckboxPropsContext;
exports.component = component;
exports.useCheckboxPropsContext = useCheckboxPropsContext;
exports.useRootComponentProps = useRootComponentProps;
//# sourceMappingURL=checkbox.cjs.map