@yamada-ui/react/dist/esm/components/stat/stat.js

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

"use client";


import { useSplitChildren } from "../../utils/children.js";
import { styled } from "../../core/system/factory.js";
import { createSlotComponent } from "../../core/components/create-component.js";
import { TriangleIcon } from "../icon/icons/triangle-icon.js";
import { useI18n } from "../../providers/i18n-provider/i18n-provider.js";
import { statStyle } from "./stat.style.js";
import { jsx, jsxs } from "react/jsx-runtime";

//#region src/components/stat/stat.tsx
const { PropsContext: StatPropsContext, usePropsContext: useStatPropsContext, withContext, withProvider } = createSlotComponent("stat", 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] = useSplitChildren(children, StatLabel, StatValue, StatHelperMessage);
	return /* @__PURE__ */ jsxs(styled.dl, {
		...rest,
		children: [
			customStatLabel ?? /* @__PURE__ */ jsx(StatLabel, {
				...labelProps,
				children: label
			}),
			customStatValue ?? /* @__PURE__ */ jsx(StatValue, {
				...valueProps,
				children: value
			}),
			customStatHelperMessage ?? /* @__PURE__ */ jsxs(StatHelperMessage, {
				...helperMessageProps,
				children: [icon ? /* @__PURE__ */ jsx(StatIcon, {
					type: icon,
					...iconProps
				}) : null, helperMessage]
			}),
			omittedChildren
		]
	});
}, "root")();
const StatIcon = withContext(({ type = "increase",...rest }) => {
	const { t } = useI18n("stat");
	return /* @__PURE__ */ jsx(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
export { StatHelperMessage, StatIcon, StatLabel, StatPropsContext, StatRoot, StatUnit, StatValue, useStatPropsContext };
//# sourceMappingURL=stat.js.map