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

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

"use client";


import { utils_exports } from "../../utils/index.js";
import { styled } from "../../core/system/factory.js";
import { createSlotComponent } from "../../core/components/create-component.js";
import { Float } from "../float/float.js";
import { indicatorStyle } from "./indicator.style.js";
import { useMemo } from "react";
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

//#region src/components/indicator/indicator.tsx
const { PropsContext: IndicatorPropsContext, usePropsContext: useIndicatorPropsContext, withContext, withProvider } = createSlotComponent("indicator", indicatorStyle);
/**
* `Indicator` is a component that displays at the corner of elements such as avatars.
*
* @see https://yamada-ui.com/docs/components/indicator
*/
const Indicator = withProvider(({ children, disabled, label, offset, overflowCount = 99, placement, showZero = true, floatProps, labelProps,...rest }) => {
	const numeric = (0, utils_exports.isNumber)(label);
	disabled ??= numeric && !showZero && label <= 0;
	const computedLabel = useMemo(() => {
		if (numeric && label > overflowCount) return /* @__PURE__ */ jsxs(Fragment$1, { children: [overflowCount, /* @__PURE__ */ jsx(styled.span, { children: "+" })] });
		else return label;
	}, [
		numeric,
		label,
		overflowCount
	]);
	return /* @__PURE__ */ jsxs(styled.div, {
		...rest,
		children: [children, !disabled ? /* @__PURE__ */ jsx(IndicatorFloat, {
			offset,
			placement,
			...floatProps,
			children: /* @__PURE__ */ jsx(IndicatorLabel, {
				"data-numeric": (0, utils_exports.dataAttr)(numeric),
				...labelProps,
				children: computedLabel
			})
		}) : null]
	});
}, "root")(({ ping,...rest }) => {
	if ((0, utils_exports.isObject)(ping)) {
		const { color, duration, iterationCount, scale, timingFunction } = ping;
		return {
			...rest,
			"--animation-scale": scale,
			"--duration": duration ? `durations.${duration}` : void 0,
			"--iteration-count": iterationCount,
			"--ping-color": color ? `colors.${color}` : void 0,
			"--timing-function": timingFunction ? `easings.${timingFunction}` : void 0,
			ping: true
		};
	} else return {
		...rest,
		ping
	};
});
const IndicatorFloat = withContext(Float, "float")();
const IndicatorLabel = withContext("span", "label")();

//#endregion
export { Indicator, IndicatorPropsContext, useIndicatorPropsContext };
//# sourceMappingURL=indicator.js.map