@yamada-ui/react
Version:
React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion
79 lines (75 loc) • 3.38 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_use_input_border = require('../input/use-input-border.cjs');
const require_use_radio = require('../radio/use-radio.cjs');
const require_radio_card_style = require('./radio-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/radio-card/radio-card.tsx
const { component, PropsContext: RadioCardPropsContext, usePropsContext: useRadioCardPropsContext, withContext, withProvider, useRootComponentProps } = require_create_component.createSlotComponent("radio-card", require_radio_card_style.radioCardStyle);
/**
* `RadioCard` is a component used for allowing users to select one option from multiple choices.
*
* @see https://yamada-ui.com/docs/components/radio-card
*/
const RadioCardRoot = withProvider(({ addon, children, description, errorBorderColor, focusBorderColor, label, withIndicator = true, addonProps, descriptionProps, indicatorProps, inputProps, labelProps, rootProps,...rest }) => {
const { getIndicatorProps, getInputProps, getRootProps } = require_use_radio.useRadio(rest);
const varProps = require_use_input_border.useInputBorder({
errorBorderColor,
focusBorderColor
});
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)(RadioCardLabel, {
...labelProps,
children: label
}) : null,
description ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RadioCardDescription, {
...descriptionProps,
children: description
}) : null,
addon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RadioCardAddon, {
...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)(RadioCardIndicator, { ...getIndicatorProps(indicatorProps) }) : null,
computedChildren
]
});
}, "root")();
const RadioCardIndicator = withContext("div", "indicator")({ "data-indicator": "" });
const RadioCardLabel = withContext("span", "label")();
const RadioCardDescription = withContext("span", "description")();
const RadioCardAddon = withContext("span", "addon")();
//#endregion
exports.RadioCardAddon = RadioCardAddon;
exports.RadioCardDescription = RadioCardDescription;
exports.RadioCardLabel = RadioCardLabel;
exports.RadioCardPropsContext = RadioCardPropsContext;
exports.RadioCardRoot = RadioCardRoot;
exports.component = component;
exports.useRadioCardPropsContext = useRadioCardPropsContext;
exports.useRootComponentProps = useRootComponentProps;
//# sourceMappingURL=radio-card.cjs.map