@yamada-ui/react
Version:
React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion
244 lines (243 loc) • 6.34 kB
TypeScript
import { ComponentSlotStyle, ThemeProps, WithoutThemeProps } from "../../core/system/index.types.js";
import { CSSModifierObject, CSSProps, CSSSlotObject } from "../../core/css/index.types.js";
import { Component, HTMLStyledProps } from "../../core/components/index.types.js";
import "../../core/index.js";
import { TimelineStyle } from "./timeline.style.js";
import "../../index.js";
import * as react_jsx_runtime12 from "react/jsx-runtime";
import * as react2606 from "react";
import { ReactNode } from "react";
//#region src/components/timeline/timeline.d.ts
interface TimelineItem extends Omit<TimelineItemProps, "content" | "title"> {
align?: "end" | "start";
content?: ReactNode;
description?: ReactNode;
indicator?: ReactNode;
title?: ReactNode;
connectorProps?: TimelineConnectorProps;
contentProps?: TimelineContentProps;
descriptionProps?: TimelineDescriptionProps;
indicatorProps?: TimelineIndicatorProps;
titleProps?: TimelineTitleProps;
}
interface TimelineRootProps extends HTMLStyledProps<"ul">, ThemeProps<TimelineStyle> {
/**
* The index of the active timeline item.
*/
index?: number;
/**
* The fill color of the indicator.
*/
indicatorFill?: CSSProps["bg"];
/**
* The size of the indicator.
*/
indicatorSize?: CSSProps["boxSize"];
/**
* The stroke color of the indicator.
*/
indicatorStroke?: CSSProps["color"];
/**
* If provided, generate timeline components based on items.
*/
items?: TimelineItem[];
/**
* The color of the separator.
*/
separatorColor?: CSSProps["color"];
/**
* The gap of the separator.
*/
separatorGap?: CSSProps["gap"];
/**
* The style of the separator.
*/
separatorStyle?: CSSProps["borderStyle"];
/**
* The width of the separator.
*/
separatorWidth?: CSSProps["width"];
}
declare const TimelinePropsContext: react2606.Context<Partial<TimelineRootProps> | undefined>, useTimelinePropsContext: () => Partial<TimelineRootProps> | undefined;
/**
* `Timeline` is a component that is used to display a list of events in chronological order.
*
* @see https://yamada-ui.com/docs/components/timeline
*/
declare const TimelineRoot: Component<({
children,
index,
items,
...rest
}: WithoutThemeProps<TimelineRootProps, ComponentSlotStyle<"title" | "content" | "root" | "indicator" | "description" | "item" | "connector", {
align: {
center: {
content: {
"&:first-of-type": {
alignItems: "flex-end";
};
flex: "1";
};
item: {
"&:has(> [data-content]:first-of-type)": {
"&:not(:has(> [data-content]:last-of-type))": {
_after: {
display: "block";
flex: "1";
};
};
};
"&:not(:has(> [data-content]:first-of-type))": {
_before: {
display: "block";
flex: "1";
};
};
};
};
end: {
content: {
alignItems: "flex-end";
};
};
start: {
content: {
alignItems: "flex-start";
};
};
};
attached: {
true: {
item: {
"--separator-gap": "0px";
};
};
};
shape: {
circle: {
item: {
"--indicator-rounded": "radii.full";
};
};
rounded: {
item: {
"--indicator-rounded": "radii.l2";
};
};
square: {
item: {
"--indicator-rounded": "radii.0";
};
};
};
}, {
base: {
item: {
_last: {
"& [data-content]": {
pb: number;
};
};
};
};
sm: {
content: {
gap: "1";
pb: "8";
};
description: {
fontSize: "xs";
};
item: {
gap: "3";
};
root: {
"--indicator-size": "sizes.3";
"--separator-gap": "spaces.2";
"--separator-width": "sizes.0.5";
};
title: {
fontSize: "sm";
};
};
md: {
content: {
gap: "2";
pb: "10";
};
description: {
fontSize: "sm";
};
item: {
gap: "4";
};
root: {
"--indicator-size": "sizes.5";
"--separator-gap": "spaces.2";
"--separator-width": "sizes.1";
};
title: {
fontSize: "md";
};
};
lg: {
content: {
gap: "2";
pb: "10";
};
description: {
fontSize: "sm";
};
item: {
gap: "4";
};
root: {
"--indicator-size": "sizes.7";
"--separator-gap": "spaces.2.5";
"--separator-width": "sizes.1";
};
title: {
fontSize: "md";
};
};
xl: {
content: {
gap: "2";
pb: "12";
};
description: {
fontSize: "md";
};
item: {
gap: "5";
};
root: {
"--indicator-size": "sizes.8";
"--separator-gap": "spaces.3";
"--separator-width": "sizes.1.5";
};
title: {
fontSize: "lg";
};
};
}, CSSModifierObject<CSSSlotObject<"title" | "content" | "root" | "indicator" | "description" | "item" | "connector">>>, keyof TimelineRootProps>) => react_jsx_runtime12.JSX.Element, TimelineRootProps>;
interface TimelineItemProps extends HTMLStyledProps<"li"> {
/**
* The index of the timeline item.
*/
index?: number;
}
declare const TimelineItem: Component<"li", TimelineItemProps>;
interface TimelineConnectorProps extends HTMLStyledProps {}
declare const TimelineConnector: Component<"div", TimelineConnectorProps>;
interface TimelineIndicatorProps extends HTMLStyledProps {}
declare const TimelineIndicator: Component<"div", TimelineIndicatorProps>;
interface TimelineContentProps extends HTMLStyledProps {}
declare const TimelineContent: Component<"div", TimelineContentProps>;
interface TimelineTitleProps extends HTMLStyledProps<"h3"> {}
declare const TimelineTitle: Component<"h3", TimelineTitleProps>;
interface TimelineDescriptionProps extends HTMLStyledProps<"p"> {}
declare const TimelineDescription: Component<"p", TimelineDescriptionProps>;
//#endregion
export { TimelineConnector, TimelineConnectorProps, TimelineContent, TimelineContentProps, TimelineDescription, TimelineDescriptionProps, TimelineIndicator, TimelineIndicatorProps, TimelineItem, TimelineItemProps, TimelinePropsContext, TimelineRoot, TimelineRootProps, TimelineTitle, TimelineTitleProps, useTimelinePropsContext };
//# sourceMappingURL=timeline.d.ts.map