@yamada-ui/react/dist/esm/components/timeline/timeline.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 { varAttr } from "../../core/system/var.js";
import { styled } from "../../core/system/factory.js";
import { createSlotComponent } from "../../core/components/create-component.js";
import { timelineStyle } from "./timeline.style.js";
import { useMemo } from "react";
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

//#region src/components/timeline/timeline.tsx
const { ComponentContext, PropsContext: TimelinePropsContext, useComponentContext, usePropsContext: useTimelinePropsContext, withContext, withProvider } = createSlotComponent("timeline", timelineStyle);
/**
* `Timeline` is a component that is used to display a list of events in chronological order.
*
* @see https://yamada-ui.com/docs/components/timeline
*/
const TimelineRoot = withProvider(({ children, index = -1, items = [],...rest }) => {
	const context = useMemo(() => ({ index }), [index]);
	const computedChildren = useMemo(() => {
		if (children) return children;
		return items.map(({ align = "start", content, description, indicator, title, connectorProps, contentProps, descriptionProps, indicatorProps, titleProps,...rest$1 }, index$1) => {
			const children$1 = {
				connector: /* @__PURE__ */ jsx(TimelineConnector, {
					...connectorProps,
					children: /* @__PURE__ */ jsx(TimelineIndicator, {
						...indicatorProps,
						children: indicator
					})
				}),
				content: /* @__PURE__ */ jsx(TimelineContent, {
					...contentProps,
					children: content ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(TimelineTitle, {
						...titleProps,
						children: title
					}), /* @__PURE__ */ jsx(TimelineDescription, {
						...descriptionProps,
						children: description
					})] })
				})
			};
			return /* @__PURE__ */ jsxs(TimelineItem, {
				index: index$1,
				...rest$1,
				children: [align === "start" ? children$1.connector : children$1.content, align === "start" ? children$1.content : children$1.connector]
			}, index$1);
		});
	}, [items, children]);
	return /* @__PURE__ */ jsx(ComponentContext, {
		value: context,
		children: /* @__PURE__ */ jsx(styled.ul, {
			...rest,
			children: computedChildren
		})
	});
}, "root")(void 0, ({ indicatorFill, indicatorSize, indicatorStroke, separatorColor, separatorGap, separatorStyle, separatorWidth,...rest }) => ({
	"--indicator-fill": varAttr(indicatorFill, "colors"),
	"--indicator-size": varAttr(indicatorSize, "sizes"),
	"--indicator-stroke": varAttr(indicatorStroke, "colors"),
	"--separator-color": varAttr(separatorColor, "colors"),
	"--separator-gap": varAttr(separatorGap, "spaces"),
	"--separator-style": varAttr(separatorStyle),
	"--separator-width": varAttr(separatorWidth, "sizes"),
	...rest
}));
const TimelineItem = withContext("li", "item")(void 0, ({ index,...rest }) => {
	const { index: currentIndex } = useComponentContext();
	const active = !(0, utils_exports.isUndefined)(index) && !(0, utils_exports.isUndefined)(currentIndex) && index <= currentIndex;
	return {
		...rest,
		"data-active": (0, utils_exports.dataAttr)(active),
		"data-index": index
	};
});
const TimelineConnector = withContext("div", "connector")({ "data-connector": "" });
const TimelineIcon = styled("div", { base: {
	bg: "{indicator-fill}",
	borderColor: "{indicator-stroke}",
	borderWidth: "{separator-width}",
	boxSize: "full",
	rounded: "{indicator-rounded}"
} });
const TimelineIndicator = withContext("div", "indicator")(void 0, ({ children = /* @__PURE__ */ jsx(TimelineIcon, {}),...rest }) => ({
	children,
	...rest
}));
const TimelineContent = withContext("div", "content")({ "data-content": "" });
const TimelineTitle = withContext("h3", "title")();
const TimelineDescription = withContext("p", "description")();

//#endregion
export { TimelineConnector, TimelineContent, TimelineDescription, TimelineIndicator, TimelineItem, TimelinePropsContext, TimelineRoot, TimelineTitle, useTimelinePropsContext };
//# sourceMappingURL=timeline.js.map