@furystack/shades-common-components/esm/components/timeline.d.ts

Common UI components for FuryStack Shades

import type { PartialElement } from '@furystack/shades';
import type { Palette } from '../services/theme-provider-service.js';
/**
 * Props for a single timeline item.
 */
export type TimelineItemProps = PartialElement<HTMLElement> & {
    /** Palette color for the dot. Defaults to 'primary'. */
    color?: keyof Palette;
    /** Custom dot content (e.g. an icon). Replaces the default filled circle. */
    dot?: JSX.Element;
    /** Label displayed on the opposite side from the content (used in alternate or right mode). */
    label?: string;
};
/**
 * A single item in a Timeline.
 * Renders a dot, a connector tail, and the item's content (children).
 */
export declare const TimelineItem: (props: Omit<Partial<HTMLElement>, "style"> & {
    style?: Partial<CSSStyleDeclaration>;
} & {
    ref?: import("@furystack/shades").RefObject<Element>;
} & {
    /** Palette color for the dot. Defaults to 'primary'. */
    color?: keyof Palette;
    /** Custom dot content (e.g. an icon). Replaces the default filled circle. */
    dot?: JSX.Element;
    /** Label displayed on the opposite side from the content (used in alternate or right mode). */
    label?: string;
}, children?: import("@furystack/shades").ChildrenList) => JSX.Element;
/**
 * Props for the Timeline container.
 */
export type TimelineProps = PartialElement<HTMLElement> & {
    /** Layout mode. 'left' places content on the right, 'right' on the left, 'alternate' switches sides. Defaults to 'left'. */
    mode?: 'left' | 'right' | 'alternate';
    /** Orientation of the timeline axis. Defaults to 'vertical'. */
    orientation?: 'vertical' | 'horizontal';
    /** Show a pending indicator on the last item. `true` shows a default "Loading..." text, a string/JSX shows custom content. */
    pending?: boolean | string | JSX.Element;
};
/**
 * Timeline displays a list of events in chronological order.
 * Supports left, right, and alternate layout modes with optional pending state.
 */
export declare const Timeline: (props: Omit<Partial<HTMLElement>, "style"> & {
    style?: Partial<CSSStyleDeclaration>;
} & {
    ref?: import("@furystack/shades").RefObject<Element>;
} & {
    /** Layout mode. 'left' places content on the right, 'right' on the left, 'alternate' switches sides. Defaults to 'left'. */
    mode?: "left" | "right" | "alternate";
    /** Orientation of the timeline axis. Defaults to 'vertical'. */
    orientation?: "vertical" | "horizontal";
    /** Show a pending indicator on the last item. `true` shows a default "Loading..." text, a string/JSX shows custom content. */
    pending?: boolean | string | JSX.Element;
}, children?: import("@furystack/shades").ChildrenList) => JSX.Element;
//# sourceMappingURL=timeline.d.ts.map