@surrealdb/ui 1.2.10 → 1.2.12

package/dist/ui.d.ts

@@ -152,6 +152,12 @@ export declare const brandDynamiqLight: string;
 
 export declare const brandElixir: string;
 
+export declare const brandEveDark: string;
+
+export declare const brandEveLight: string;
+
+export declare const brandFacebookMessenger: string;
+
 export declare const brandFeastDark: string;
 
 export declare const brandFeastLight: string;
@@ -248,6 +254,8 @@ export declare const brandPolyAIDark: string;
 
 export declare const brandPolyAILight: string;
 
+export declare const brandPydantic: string;
+
 export declare const brandPython: string;
 
 export declare const brandReact: string;
@@ -270,12 +278,16 @@ export declare const brandSlack: string;
 
 export declare const brandSmolAgents: string;
 
+export declare const brandSMS: string;
+
 export declare const brandSnowflake: string;
 
 export declare const brandSolidJS: string;
 
 export declare const brandStackOverflow: string;
 
+export declare const brandStrands: string;
+
 export declare const brandStripe: string;
 
 export declare const brandSurrealDB: string;
@@ -286,6 +298,8 @@ export declare const brandTanStackDark: string;
 
 export declare const brandTanStackLight: string;
 
+export declare const brandTelegram: string;
+
 export declare const brandTencentDark: string;
 
 export declare const brandTencentLight: string;
@@ -312,6 +326,8 @@ export declare const brandVSCode: string;
 
 export declare const brandWebAssembly: string;
 
+export declare const brandWhatsApp: string;
+
 export declare const brandWindows: string;
 
 export declare const brandXDark: string;
@@ -330,6 +346,28 @@ export declare const brandZedLight: string;
 
 export declare const BreadcrumbButton: FC<ButtonProps & ElementProps<"button">>;
 
+/**
+ * Builds the ordered list of rows RichTimeline renders.
+ *
+ * With no active filter (or no `filter` at all) this is just the sorted entries. When a
+ * filter is active AND `getIndex` is supplied, contiguous runs of hidden entries are
+ * collapsed into gap rows so the reader can see that history was skipped. Without
+ * `getIndex` the hidden entries are simply dropped (no gap markers).
+ */
+export declare function buildTimelineDisplayList<T>(options: BuildTimelineDisplayListOptions<T>): RichTimelineDisplayItem<T>[];
+
+/** Inputs to {@link buildTimelineDisplayList}. */
+export declare interface BuildTimelineDisplayListOptions<T> {
+    entries: T[];
+    getKey: (entry: T) => string;
+    filter?: (entry: T) => boolean;
+    /** Stable position within the source sequence. Required to collapse hidden runs into gaps. */
+    getIndex?: (entry: T) => number;
+    order?: RichTimelineOrder;
+    /** Sort value; takes precedence over `getIndex` when both are provided. */
+    getSortKey?: (entry: T) => number;
+}
+
 /**
  * GitHub-flavoured markdown alert kinds (`> [!kind]`, see GitHub docs).
  * Other spellings in source are normalised onto this set.
@@ -471,6 +509,8 @@ export declare const DEFAULT_MARKDOWN_MODE: MarkdownEditMode;
  */
 export declare const DEFAULT_SLASH_COMMANDS: readonly SlashCommand[];
 
+export declare function defaultGapLabel(count: number): string;
+
 export declare type DefaultSort = {
     [key: string]: unknown;
 };
@@ -2643,6 +2683,286 @@ export declare interface ResponsiveTabsProps extends Omit<TabsProps_2, "children
     selectProps?: Omit<SelectProps, "data" | "value" | "defaultValue" | "onChange">;
 }
 
+export declare const RichTimeline: RichTimelineCompound;
+
+export declare const RichTimelineActions: FC<{
+    children: ReactNode;
+}>;
+
+export declare const RichTimelineBadge: FC<RichTimelineBadgeProps>;
+
+declare interface RichTimelineBadgeProps {
+    children: ReactNode;
+    color?: string;
+}
+
+export declare const RichTimelineCard: FC<RichTimelineCardProps>;
+
+/** Card density: `stacked` is a padded multi-line card, `compact` is a single dense row. */
+export declare type RichTimelineCardLayout = "stacked" | "compact";
+
+declare interface RichTimelineCardProps {
+    children: ReactNode;
+    layout?: RichTimelineCardLayout;
+    selected?: boolean;
+    invalid?: boolean;
+    staggerIndex?: number;
+    onClick?: () => void;
+    className?: string;
+    padding?: "sm" | "md" | false;
+}
+
+/**
+ * RichTimeline children is a render-prop: it receives each display item (entry or gap) plus its
+ * context and returns the row to render. Compose the row from the exported slots, or use the
+ * ready-made `RichTimeline.Event`.
+ */
+declare type RichTimelineChildren<T> = (props: RichTimelineRenderProps<T>) => ReactNode;
+
+/**
+ * Public type of the `RichTimeline` compound: callable as a component, with the ready-made
+ * `RichTimeline.Event` and the neutral layout slots attached as static members (`RichTimeline.Card`,
+ * `RichTimeline.Row`, …).
+ */
+export declare interface RichTimelineCompound {
+    <T>(props: RichTimelineProps<T>): ReactNode;
+    Event: typeof RichTimelineEvent;
+    Marker: typeof RichTimelineMarker;
+    StatusMarker: typeof RichTimelineStatusMarker;
+    IndexMarker: typeof RichTimelineIndexMarker;
+    Card: typeof RichTimelineCard;
+    Gap: typeof RichTimelineGap;
+    Row: typeof RichTimelineRow;
+    Header: typeof RichTimelineHeader;
+    Title: typeof RichTimelineTitle;
+    Badge: typeof RichTimelineBadge;
+    Description: typeof RichTimelineDescription;
+    Meta: typeof RichTimelineMeta;
+    Actions: typeof RichTimelineActions;
+    RowPrimary: typeof RichTimelineRowPrimary;
+    Details: typeof RichTimelineDetails;
+    DetailsToggle: typeof RichTimelineDetailsToggle;
+    Summary: typeof RichTimelineSummary;
+}
+
+export declare const RichTimelineDescription: FC<RichTimelineDescriptionProps>;
+
+declare interface RichTimelineDescriptionProps {
+    children: ReactNode;
+    mono?: boolean;
+}
+
+/** Expandable detail region; renders nothing until its row's context is expanded. An inset
+ divider separates it from the card body for manual compositions. */
+export declare const RichTimelineDetails: FC<RichTimelineDetailsProps>;
+
+declare interface RichTimelineDetailsProps {
+    children: ReactNode;
+    label?: ReactNode;
+    ctx: RichTimelineItemContext;
+}
+
+/** Full-width disclosure control for the foot of an event card — an unmistakable target. */
+export declare const RichTimelineDetailsToggle: FC<RichTimelineDetailsToggleProps>;
+
+declare interface RichTimelineDetailsToggleProps {
+    expanded: boolean;
+    onToggle: () => void;
+    /** Label shown while collapsed. */
+    showLabel?: string;
+    /** Label shown while expanded. */
+    hideLabel?: string;
+    className?: string;
+}
+
+/** A real data row in the display list. */
+export declare interface RichTimelineDisplayEntry<T> {
+    kind: "entry";
+    entry: T;
+    key: string;
+    /** Position used to stagger the entrance animation; capped so late rows don't lag. */
+    staggerIndex: number;
+}
+
+/**
+ * A collapsed placeholder standing in for a contiguous run of entries that a filter
+ * hid. Only produced when `getIndex` is supplied (see {@link BuildTimelineDisplayListOptions}).
+ */
+export declare interface RichTimelineDisplayGap {
+    kind: "gap";
+    key: string;
+    hiddenCount: number;
+    /** Inclusive index range the gap covers, when known. */
+    fromIndex?: number;
+    toIndex?: number;
+}
+
+/** A row to render: either a real entry or a gap placeholder. */
+export declare type RichTimelineDisplayItem<T> = RichTimelineDisplayEntry<T> | RichTimelineDisplayGap;
+
+/**
+ * Stacked event card: a square status marker, a title/badge/summary header, and — when the item
+ * carries `details` — a divider-separated details panel revealed by a full-width footer toggle.
+ */
+export declare const RichTimelineEvent: FC<RichTimelineEventProps>;
+
+/** Status badge shown alongside an event's title. */
+export declare interface RichTimelineEventBadge {
+    label: string;
+    color: string;
+}
+
+/** Data model for a {@link RichTimelineEvent} (`RichTimeline.Event`) row. */
+export declare interface RichTimelineEventItem {
+    id: string;
+    variant: StatusVariant;
+    /** Accessible label for the status marker; falls back to the badge label. */
+    markerLabel?: string;
+    title: ReactNode;
+    badge?: RichTimelineEventBadge;
+    summary?: ReactNode;
+    meta?: ReactNode;
+    actions?: ReactNode;
+    body?: ReactNode;
+    /** Expandable detail content; its presence adds the footer disclosure toggle. */
+    details?: ReactNode;
+    detailsLabel?: string;
+    defaultExpanded?: boolean;
+    /** Activates the whole row (e.g. navigate/select); independent of expanding details. */
+    onActivate?: () => void;
+}
+
+export declare interface RichTimelineEventProps {
+    item: RichTimelineEventItem;
+    ctx: RichTimelineItemContext;
+    /** Entrance-animation stagger position; pass `item.staggerIndex` from the RichTimeline render-prop. */
+    staggerIndex?: number;
+}
+
+export declare const RichTimelineGap: FC<RichTimelineGapProps>;
+
+declare interface RichTimelineGapProps {
+    count: number;
+    label?: ReactNode;
+    ariaLabel?: string;
+    hideMarkerOnMobile?: boolean;
+}
+
+export declare const RichTimelineHeader: FC<{
+    children: ReactNode;
+    interactive?: boolean;
+    onClick?: () => void;
+    onKeyDown?: (e: React.KeyboardEvent) => void;
+    role?: string;
+    tabIndex?: number;
+    ariaExpanded?: boolean;
+}>;
+
+export declare const RichTimelineIndexMarker: FC<RichTimelineIndexMarkerProps>;
+
+/** Square, monospaced marker showing an entry's position — used by the explorer-style rows. */
+declare interface RichTimelineIndexMarkerProps {
+    label: ReactNode;
+    selected?: boolean;
+    className?: string;
+}
+
+/** Per-row state handed to render-prop children and slot renderers. */
+export declare interface RichTimelineItemContext {
+    selected: boolean;
+    invalid: boolean;
+    expanded: boolean;
+    toggleExpanded: () => void;
+    cardLayout: RichTimelineCardLayout;
+    /** True when a filter is active anywhere in the list (not whether this row is filtered out). */
+    filtered: boolean;
+}
+
+export declare const RichTimelineMarker: FC<RichTimelineMarkerProps>;
+
+declare interface RichTimelineMarkerProps {
+    children: ReactNode;
+    className?: string;
+    hideOnMobile?: boolean;
+}
+
+export declare const RichTimelineMeta: FC<{
+    children: ReactNode;
+}>;
+
+/** Direction the display list is sorted in: most recent at the top or at the bottom. */
+export declare type RichTimelineOrder = "newest-first" | "oldest-first";
+
+export declare interface RichTimelineProps<T> {
+    /** Source data; sorting, filtering and gap insertion are derived from these. */
+    entries: T[];
+    /** Stable React key for an entry. */
+    getKey: (entry: T) => string;
+    order?: RichTimelineOrder;
+    /** Sort value; takes precedence over `getIndex`. */
+    getSortKey?: (entry: T) => number;
+    /** Returns `true` for entries that should stay visible. */
+    filter?: (entry: T) => boolean;
+    /** Positional index; supplying it lets filtered-out runs collapse into gap rows. */
+    getIndex?: (entry: T) => number;
+    selectedKey?: string;
+    /** Keys to render with the "invalid" treatment. */
+    invalidKeys?: ReadonlySet<string>;
+    /** Keys expanded on first render (expansion is uncontrolled thereafter). */
+    initialExpandedKeys?: ReadonlySet<string>;
+    /** `true`/options forces windowing; omitted, it auto-enables past 100 rows. */
+    virtualize?: boolean | VirtualizeOptions;
+    cardLayout?: RichTimelineCardLayout;
+    hideMarkerOnMobile?: boolean;
+    emptyMessage?: ReactNode;
+    className?: string;
+    /** Render-prop returning the row for each display item (entry or gap). */
+    children: RichTimelineChildren<T>;
+}
+
+/** Arguments to the RichTimeline render-prop. */
+export declare interface RichTimelineRenderProps<T> {
+    item: RichTimelineDisplayItem<T>;
+    ctx: RichTimelineItemContext;
+}
+
+export declare const RichTimelineRow: FC<RichTimelineRowProps>;
+
+export declare const RichTimelineRowPrimary: FC<{
+    children: ReactNode;
+}>;
+
+declare interface RichTimelineRowProps {
+    children: ReactNode;
+    staggerIndex?: number;
+    align?: "start" | "center";
+    hideMarkerOnMobile?: boolean;
+    className?: string;
+}
+
+export declare const RichTimelineStatusMarker: FC<RichTimelineStatusMarkerProps>;
+
+/** Square, opaque status chip (success/warning/error/neutral) — the marker for event rows. */
+declare interface RichTimelineStatusMarkerProps {
+    variant: StatusVariant;
+    /** Accessible name. When omitted the chip is treated as decorative (`aria-hidden`). */
+    label?: string;
+    className?: string;
+}
+
+/** Optional "Showing N of M" / "N entries" caption; hidden when there's nothing useful to say. */
+export declare const RichTimelineSummary: FC<RichTimelineSummaryProps>;
+
+declare interface RichTimelineSummaryProps {
+    filtered: boolean;
+    matchCount: number;
+    totalCount: number;
+}
+
+export declare const RichTimelineTitle: FC<{
+    children: ReactNode;
+}>;
+
 export declare function SectionTitle({ order, kicker, description, kickerProps, titleProps, descriptionProps, children, ...boxProps }: PropsWithChildren<SectionTitle>): ReactElement;
 
 export declare interface SectionTitle extends BoxProps {
@@ -2800,6 +3120,20 @@ export declare type StateFields = {
     [prop: string]: StateField<any>;
 };
 
+/** A circular, tinted status badge — a status glyph (success/warning/error/neutral) on a tone chip. */
+export declare const StatusIcon: FC<StatusIconProps>;
+
+export declare interface StatusIconProps extends Omit<BoxProps, "children"> {
+    variant: StatusVariant;
+    size?: StatusIconSize;
+    /** Accessible name. When omitted the icon is treated as decorative (`aria-hidden`). */
+    label?: string;
+}
+
+export declare type StatusIconSize = "sm" | "md" | "xl";
+
+export declare type StatusVariant = "success" | "warning" | "error" | "neutral";
+
 /**
  * A vertical timeline whose steps expand one at a time. Each step shows a
  * numbered bullet and a clickable title; activating a step collapses the others
@@ -2984,6 +3318,17 @@ export declare interface VideoPlayerProps extends BoxProps {
     videoProps?: Omit<VideoHTMLAttributes<HTMLVideoElement>, "autoPlay" | "loop" | "poster" | "controls" | "src" | "muted">;
 }
 
+/** Tuning passed through to TanStack Virtual when the list is windowed. */
+export declare interface VirtualizeOptions {
+    /** Estimated px height of an entry row. */
+    estimateSize?: number;
+    /** Estimated px height of a gap row. */
+    gapEstimateSize?: number;
+    overscan?: number;
+    /** Height of the scroll viewport. */
+    scrollHeight?: number | string;
+}
+
 /**
  * The default UI Kit editor theme
  */