@yamada-ui/react
Version:
React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion
67 lines (63 loc) • 2.87 kB
JavaScript
"use client";
const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
const require_children = require('../../utils/children.cjs');
const require_factory = require('../../core/system/factory.cjs');
const require_create_component = require('../../core/components/create-component.cjs');
const require_triangle_icon = require('../icon/icons/triangle-icon.cjs');
const require_i18n_provider = require('../../providers/i18n-provider/i18n-provider.cjs');
const require_stat_style = require('./stat.style.cjs');
let react_jsx_runtime = require("react/jsx-runtime");
react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
//#region src/components/stat/stat.tsx
const { PropsContext: StatPropsContext, usePropsContext: useStatPropsContext, withContext, withProvider } = require_create_component.createSlotComponent("stat", require_stat_style.statStyle);
/**
* `Stat` is used to show numbers and data in a box.
*
* @see https://yamada-ui.com/docs/components/stat
*/
const StatRoot = withProvider(({ children, helperMessage, icon, label, value, helperMessageProps, iconProps, labelProps, valueProps,...rest }) => {
const [omittedChildren, customStatLabel, customStatValue, customStatHelperMessage] = require_children.useSplitChildren(children, StatLabel, StatValue, StatHelperMessage);
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_factory.styled.dl, {
...rest,
children: [
customStatLabel ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatLabel, {
...labelProps,
children: label
}),
customStatValue ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatValue, {
...valueProps,
children: value
}),
customStatHelperMessage ?? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StatHelperMessage, {
...helperMessageProps,
children: [icon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatIcon, {
type: icon,
...iconProps
}) : null, helperMessage]
}),
omittedChildren
]
});
}, "root")();
const StatIcon = withContext(({ type = "increase",...rest }) => {
const { t } = require_i18n_provider.useI18n("stat");
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_triangle_icon.TriangleIcon, {
"aria-label": type === "increase" ? t("Increased by") : t("Decreased by"),
"data-type": type,
...rest
});
}, "icon")();
const StatLabel = withContext("dt", "label")();
const StatValue = withContext("dd", "value")();
const StatUnit = withContext("span", "unit")();
const StatHelperMessage = withContext("dd", "helperMessage")();
//#endregion
exports.StatHelperMessage = StatHelperMessage;
exports.StatIcon = StatIcon;
exports.StatLabel = StatLabel;
exports.StatPropsContext = StatPropsContext;
exports.StatRoot = StatRoot;
exports.StatUnit = StatUnit;
exports.StatValue = StatValue;
exports.useStatPropsContext = useStatPropsContext;
//# sourceMappingURL=stat.cjs.map