@astra-kit/ui 1.1.0 → 1.2.1

package/dist/components/timeline.d.ts

@@ -0,0 +1,51 @@
+import type { ComponentProps, ReactNode } from "react";
+import type { TimelineHeadingLevel, TimelineMessages, TimelineTone } from "../constants/timeline.js";
+export type { TimelineHeadingLevel, TimelineMessages, TimelineTone };
+export type TimelineEvent = {
+    id: string;
+    /** When it happened, as an ISO string or epoch milliseconds. */
+    at: string | number;
+    /** Who did it, shown first in the foreground colour. */
+    actor?: string;
+    /** What happened, completing the actor: "aprobó la solicitud". */
+    title: string;
+    /** Short context under the title. */
+    meta?: string;
+    /** Revealed in place when the row is expanded. Rows without detail are not interactive. */
+    detail?: ReactNode;
+    /** Portrait URL for an event by a person. */
+    avatar?: string;
+    /** Icon for a system event, used when there is no avatar. */
+    icon?: ReactNode;
+    /** Status of a system event. Always say the outcome in the title too, so it never rests on colour. */
+    tone?: TimelineTone;
+};
+export type TimelineProps = Omit<ComponentProps<"div">, "children" | "role"> & {
+    /** Updates in any order; the newest shows first. Rows with `detail` are expandable. */
+    events: TimelineEvent[];
+    /** Reference time for relative labels and day groups, in epoch milliseconds. Pass a ticking clock to keep labels fresh. */
+    now: number;
+    /** Accessible name of the feed. */
+    label: string;
+    /** Time zone of day groups and clock times. Defaults to `"UTC"`, so server and client agree. */
+    timeZone?: string;
+    /** Locale of day labels and clock times. Defaults to `"es-AR"`. */
+    locale?: string;
+    /** Height of the scrolling area. Without it the feed grows with the page. */
+    maxHeight?: number | string;
+    /** Scrolls back to the top when a new update arrives. Defaults to `true`. */
+    scrollToNew?: boolean;
+    /** Event ids expanded on mount. */
+    defaultExpanded?: string[];
+    /** Heading level of the day labels. Defaults to 3. */
+    headingLevel?: TimelineHeadingLevel;
+    /** Replaces any of the Spanish day labels, relative times, counts and announcements. */
+    messages?: Partial<TimelineMessages>;
+};
+/**
+ * A vertical activity feed grouped by day with pinned day labels and rows that expand in place.
+ * @param props - Events, reference time, accessible name, formatting, scrolling, copy and native div attributes.
+ * @returns The labelled feed region.
+ */
+declare function Timeline({ events, now, label, timeZone, locale, maxHeight, scrollToNew, defaultExpanded, headingLevel, messages, className, ...props }: TimelineProps): import("react").JSX.Element;
+export { Timeline };