@yamada-ui/checkbox
Version:
Yamada UI checkbox component
151 lines (149 loc) • 4.77 kB
JavaScript
"use client"
import {
CheckboxCardAddon
} from "./chunk-OIX7NA6E.mjs";
import {
CheckboxCardDescription
} from "./chunk-CH46U3J4.mjs";
import {
CheckboxCardLabel
} from "./chunk-7QPJ25CW.mjs";
import {
CheckboxIcon
} from "./chunk-D3OZWWL7.mjs";
import {
useCheckbox
} from "./chunk-AA57K3IT.mjs";
import {
CheckboxCardProvider,
useCheckboxCardGroupContext
} from "./chunk-2VDJDPFI.mjs";
// src/checkbox-card.tsx
import { omitThemeProps, ui, useComponentMultiStyle } from "@yamada-ui/core";
import { useFormControl } from "@yamada-ui/form-control";
import {
cx,
findChild,
funcAll,
getValidChildren,
isEmpty,
omitChildren
} from "@yamada-ui/utils";
import { cloneElement, forwardRef } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
var CheckboxCard = forwardRef(
(props, ref) => {
var _a, _b, _c, _d, _e;
const group = useCheckboxCardGroupContext();
const { value: groupValue, ...groupProps } = { ...group };
const control = useFormControl(props);
const [styles, mergedProps] = useComponentMultiStyle("CheckboxCard", {
...groupProps,
...props
});
const {
className,
addon,
children,
description,
disabled = (_a = groupProps.disabled) != null ? _a : control.disabled,
invalid = (_b = groupProps.invalid) != null ? _b : control.invalid,
label,
readOnly = (_c = groupProps.readOnly) != null ? _c : control.readOnly,
required = (_d = groupProps.required) != null ? _d : control.required,
withIcon = true,
addonProps,
descriptionProps,
iconProps,
inputProps,
labelProps,
...computedProps
} = omitThemeProps(mergedProps);
(_e = computedProps.checked) != null ? _e : computedProps.checked = computedProps.isChecked;
const isCheckedProp = groupValue && computedProps.value ? groupValue.includes(computedProps.value) : computedProps.checked;
const onChange = groupProps.onChange && computedProps.value ? funcAll(groupProps.onChange, computedProps.onChange) : computedProps.onChange;
const {
checked,
props: rest,
getContainerProps,
getIconProps,
getInputProps
} = useCheckbox({
...computedProps,
disabled,
invalid,
isChecked: isCheckedProp,
readOnly,
required,
onChange
});
const { children: customIcon, ...resolvedIconProps } = { ...iconProps };
const icon = cloneElement(customIcon != null ? customIcon : /* @__PURE__ */ jsx(CheckboxIcon, {}), {
checked,
disabled,
invalid,
isChecked: checked,
isDisabled: disabled,
isInvalid: invalid,
isReadOnly: readOnly,
isRequired: required,
readOnly,
required,
__css: {
opacity: checked ? 1 : 0,
transform: checked ? "scale(1)" : "scale(0.95)",
transitionDuration: "normal",
transitionProperty: "transform"
}
});
const validChildren = getValidChildren(children);
const customLabel = findChild(validChildren, CheckboxCardLabel);
const customDescription = findChild(validChildren, CheckboxCardDescription);
const customAddon = findChild(validChildren, CheckboxCardAddon);
const computedChildren = !isEmpty(validChildren) ? omitChildren(
validChildren,
CheckboxCardLabel,
CheckboxCardDescription,
CheckboxCardAddon
) : children;
return /* @__PURE__ */ jsx(
CheckboxCardProvider,
{
value: {
icon,
styles,
withIcon,
getIconProps,
iconProps: resolvedIconProps
},
children: /* @__PURE__ */ jsxs(
ui.label,
{
className: cx("ui-checkbox-card", className),
...getContainerProps(rest),
__css: { ...styles.container },
children: [
/* @__PURE__ */ jsx(
ui.input,
{
className: "ui-checkbox-card__input",
...getInputProps(inputProps, ref)
}
),
customLabel != null ? customLabel : label ? /* @__PURE__ */ jsx(CheckboxCardLabel, { ...labelProps, children: label }) : null,
customDescription != null ? customDescription : description ? /* @__PURE__ */ jsx(CheckboxCardDescription, { ...descriptionProps, children: description }) : null,
customAddon != null ? customAddon : addon ? /* @__PURE__ */ jsx(CheckboxCardAddon, { ...addonProps, children: addon }) : null,
computedChildren
]
}
)
}
);
}
);
CheckboxCard.displayName = "CheckboxCard";
CheckboxCard.__ui__ = "CheckboxCard";
export {
CheckboxCard
};
//# sourceMappingURL=chunk-EYKGMSLM.mjs.map