prime-ui-kit 0.9.0 → 0.9.2

package/dist/components/tabs/Tabs.d.ts

@@ -1,86 +1,113 @@
 import * as React from "react";
-import type { ControlSize, PaletteColor } from "@/internal/states";
-export type TabsRootProps = {
+import { type ControlSize, type PaletteColor } from "@/internal/states";
+export type TabsLabels = {
+    /** Name of the close button of a removable tab; `{label}` is the tab's title. */
+    remove: string;
+};
+type TabsOrientation = "horizontal" | "vertical";
+export type TabsRootProps = Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue"> & {
     value?: string;
     defaultValue?: string;
     onValueChange?: (value: string) => void;
     /** Default `horizontal`. A vertical list stacks above the panel in containers narrower than 600px. */
-    orientation?: "horizontal" | "vertical";
+    orientation?: TabsOrientation;
     size?: ControlSize;
-    children: React.ReactNode;
-    className?: string;
-} & Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue" | "children">;
-declare function TabsRoot({ value, defaultValue, onValueChange, orientation, size, children, className, ...rest }: TabsRootProps): import("react/jsx-runtime").JSX.Element;
+    /** Text and icon colour of the active tab. Default `neutral`: primary text, accent icon. */
+    tone?: "neutral" | "accent";
+    /**
+     * Horizontal tabs fill the list and tend to equal widths, never narrower than their content.
+     * Default `true`; `false` sizes each tab to its content.
+     */
+    fullWidth?: boolean;
+    /** Narrowest a horizontal tab with a label gets (px or a CSS length); never below its content. */
+    minItemWidth?: number | string;
+    /** Widest a horizontal tab gets (px or a CSS length); a longer label ends with an ellipsis. */
+    maxItemWidth?: number | string;
+    labels?: Partial<TabsLabels>;
+    ref?: React.Ref<HTMLDivElement>;
+};
+declare function TabsRoot({ value, defaultValue, onValueChange, orientation, size, tone, fullWidth, minItemWidth, maxItemWidth, labels, children, className, style, ...rest }: TabsRootProps): import("react/jsx-runtime").JSX.Element;
 declare namespace TabsRoot {
     var displayName: string;
 }
-export type TabsListProps = {
-    children: React.ReactNode;
-    className?: string;
-} & Omit<React.HTMLAttributes<HTMLDivElement>, "children">;
-declare function TabsList({ children, className, ...rest }: TabsListProps): import("react/jsx-runtime").JSX.Element;
+export type TabsListProps = React.HTMLAttributes<HTMLDivElement> & {
+    ref?: React.Ref<HTMLDivElement>;
+};
+declare function TabsList({ children, className, ref, ...rest }: TabsListProps): import("react/jsx-runtime").JSX.Element;
 declare namespace TabsList {
     var displayName: string;
 }
-export type TabsTriggerProps = {
+export type TabsItemProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "value" | "type" | "role" | "onClick"> & {
     value: string;
     disabled?: boolean;
+    /**
+     * Makes the tab closable: a close button, `Delete` / `Backspace` on the focused tab and a middle
+     * click. Closing the active tab first selects its neighbour; remove the item in this callback.
+     */
+    onRemove?: () => void;
     /**
      * Plain text, or parts: `Tabs.Icon`, `Tabs.Label`, `Tabs.Count`, `Tabs.Description`.
-     * A `Tabs.Description` makes the trigger two-line and becomes its accessible description.
+     * A `Tabs.Description` makes the item two-line and becomes its accessible description.
      */
     children: React.ReactNode;
-    className?: string;
-} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "value" | "children" | "type" | "role" | "onClick">;
-declare function TabsTrigger({ value, disabled, children, className, ...rest }: TabsTriggerProps): import("react/jsx-runtime").JSX.Element;
-declare namespace TabsTrigger {
+    ref?: React.Ref<HTMLButtonElement>;
+};
+declare function TabsItem({ value, disabled, onRemove, children, className, onKeyDown, onMouseDown, onAuxClick, ref, ...rest }: TabsItemProps): import("react/jsx-runtime").JSX.Element;
+declare namespace TabsItem {
     var displayName: string;
 }
-export type TabsIconProps = {
+export type TabsIconProps = Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> & {
     children: React.ReactNode;
-    className?: string;
-} & Omit<React.HTMLAttributes<HTMLSpanElement>, "children">;
+    ref?: React.Ref<HTMLSpanElement>;
+};
 declare function TabsIcon({ children, className, ...rest }: TabsIconProps): import("react/jsx-runtime").JSX.Element;
 declare namespace TabsIcon {
     var displayName: string;
 }
-export type TabsLabelProps = {
+export type TabsLabelProps = Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> & {
     children: React.ReactNode;
-    className?: string;
-} & Omit<React.HTMLAttributes<HTMLSpanElement>, "children">;
+    ref?: React.Ref<HTMLSpanElement>;
+};
 /**
- * Trigger title; truncates with an ellipsis in a constrained row. Text labels reserve the width of
- * the medium weight, so the row does not shift when a tab becomes active.
+ * Tab title; truncates with an ellipsis in a narrow tab. Text labels reserve the width of the
+ * medium weight, so the row does not shift when a tab becomes active.
  */
 declare function TabsLabel({ children, className, ...rest }: TabsLabelProps): import("react/jsx-runtime").JSX.Element;
 declare namespace TabsLabel {
     var displayName: string;
 }
-export type TabsCountProps = {
+export type TabsCountProps = Omit<React.HTMLAttributes<HTMLSpanElement>, "children" | "color"> & {
     /** Badge hue. Default `gray`. */
     color?: PaletteColor;
     children: React.ReactNode;
-    className?: string;
+    ref?: React.Ref<HTMLSpanElement>;
 };
 /** Counter next to the label: a soft badge one tier below the tabs size. */
-declare function TabsCount({ color, children, className }: TabsCountProps): import("react/jsx-runtime").JSX.Element;
+declare function TabsCount({ color, children, className, ...rest }: TabsCountProps): import("react/jsx-runtime").JSX.Element;
 declare namespace TabsCount {
     var displayName: string;
 }
-export type TabsDescriptionProps = {
+export type TabsDescriptionProps = Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> & {
     /** Muted second line; wrap a key value in `<strong>` to emphasize it. */
     children: React.ReactNode;
-    className?: string;
-} & Omit<React.HTMLAttributes<HTMLSpanElement>, "children">;
+    ref?: React.Ref<HTMLSpanElement>;
+};
 declare function TabsDescription({ children, className, ...rest }: TabsDescriptionProps): import("react/jsx-runtime").JSX.Element;
 declare namespace TabsDescription {
     var displayName: string;
 }
-export type TabsPanelProps = {
+export type TabsSeparatorProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
+    ref?: React.Ref<HTMLDivElement>;
+};
+/** A `Divider` hairline between groups of tabs, across the list; a tablist owns only tabs. */
+declare function TabsSeparator({ className, ...rest }: TabsSeparatorProps): import("react/jsx-runtime").JSX.Element;
+declare namespace TabsSeparator {
+    var displayName: string;
+}
+export type TabsPanelProps = React.HTMLAttributes<HTMLDivElement> & {
     value: string;
-    children: React.ReactNode;
-    className?: string;
-} & Omit<React.HTMLAttributes<HTMLDivElement>, "children">;
+    ref?: React.Ref<HTMLDivElement>;
+};
 declare function TabsPanel({ value, children, className, ...rest }: TabsPanelProps): import("react/jsx-runtime").JSX.Element | null;
 declare namespace TabsPanel {
     var displayName: string;
@@ -88,12 +115,12 @@ declare namespace TabsPanel {
 export declare const Tabs: {
     Root: typeof TabsRoot;
     List: typeof TabsList;
-    Trigger: typeof TabsTrigger;
+    Item: typeof TabsItem;
     Icon: typeof TabsIcon;
     Label: typeof TabsLabel;
     Count: typeof TabsCount;
     Description: typeof TabsDescription;
+    Separator: typeof TabsSeparator;
     Panel: typeof TabsPanel;
 };
 export {};
-//# sourceMappingURL=Tabs.d.ts.map

package/dist/components/tag-select/TagOptionMenu.d.ts

@@ -0,0 +1,29 @@
+import type { PaletteColor } from "@/internal/states";
+export type TagOptionMenuLabels = {
+    edit: string;
+    name: string;
+    delete: string;
+    colors: string;
+    colorNames: Record<PaletteColor, string>;
+};
+type TagOptionMenuProps = {
+    value: string;
+    label: string;
+    color: PaletteColor;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    onUpdate?: (value: string, updates: {
+        label?: string;
+        color?: PaletteColor;
+    }) => void;
+    onDelete?: (value: string) => void;
+    labels: TagOptionMenuLabels;
+    disabled: boolean;
+};
+/**
+ * The «⋯» of a TagSelect row: a Popover to rename, recolor or delete the option. The popover
+ * opens above the list (it is inside a dropdown layer) and is its own topmost layer, so presses in
+ * it never dismiss the list.
+ */
+export declare function TagOptionMenu({ value, label, color, open, onOpenChange, onUpdate, onDelete, labels, disabled, }: TagOptionMenuProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/tag-select/TagSelect.d.ts

@@ -1,11 +1,15 @@
-import { type FieldFrameProps } from "@/internal/FieldFrame";
-import type { ControlSize, PaletteColor } from "@/internal/states";
+import { type FieldFrameProps, type FieldRootDomProps } from "@/internal/FieldFrame";
+import { type ControlSize, type PaletteColor } from "@/internal/states";
 export type TagSelectOption = {
     value: string;
     label: string;
     color?: PaletteColor;
     disabled?: boolean;
 };
+export type TagSelectOptionUpdate = {
+    label?: string;
+    color?: PaletteColor;
+};
 export type TagSelectLabels = {
     /** Line above the list; `""` hides it. */
     panelHint: string;
@@ -13,7 +17,7 @@ export type TagSelectLabels = {
     create: string;
     /** Accessible name of a chip's remove button; `{label}` is the tag text. */
     remove: string;
-    /** Accessible name of the «+N» button; `{count}` is the number of hidden tags. */
+    /** Accessible name of the «+N» chip; `{count}` is the number of hidden tags. */
     more: string;
     /** Screen-reader announcement after a tag is removed; `{label}` is the tag text. */
     removed: string;
@@ -30,11 +34,7 @@ export type TagSelectLabels = {
     /** Muted marker after the label when `optional`. */
     optional: string;
 };
-export type TagSelectOptionUpdate = {
-    label?: string;
-    color?: PaletteColor;
-};
-export type TagSelectRootProps = FieldFrameProps & {
+export type TagSelectProps = FieldRootDomProps & FieldFrameProps & {
     /** Available tags: value, label and chip color. */
     options: TagSelectOption[];
     value?: string[];
@@ -47,7 +47,7 @@ export type TagSelectRootProps = FieldFrameProps & {
     creatable?: boolean;
     /** A new value was created (Create row or Enter), not picked from `options`. */
     onCreate?: (value: string) => void;
-    /** Chip color of values without an option color, including created ones. Default `gray`. */
+    /** Chip color of values without an option color, including created ones. */
     defaultColor?: PaletteColor;
     /** Enables the «⋯» row menu: tag name and color. `value` never changes. */
     onOptionUpdate?: (value: string, updates: TagSelectOptionUpdate) => void;
@@ -66,12 +66,11 @@ export type TagSelectRootProps = FieldFrameProps & {
     "aria-label"?: string;
     "aria-labelledby"?: string;
 };
-declare function TagSelectRoot({ options, value: valueProp, defaultValue, onValueChange, open: openProp, defaultOpen, onOpenChange, creatable, onCreate, defaultColor, onOptionUpdate, onOptionDelete, disabled, placeholder, invalid: invalidProp, focusRing, size, label, required, optional, hint, error, id: idProp, labels: labelsProp, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, }: TagSelectRootProps): import("react/jsx-runtime").JSX.Element;
-declare namespace TagSelectRoot {
+/**
+ * A multi-value field shown as tag chips: pick from a list, type to filter, create new values.
+ * At rest one row (extra chips fold into «+N»); focused or open it shows every chip.
+ */
+export declare function TagSelect({ options, value: valueProp, defaultValue, onValueChange, open: openProp, defaultOpen, onOpenChange, creatable, onCreate, defaultColor, onOptionUpdate, onOptionDelete, disabled, placeholder, invalid: invalidProp, focusRing, size, label, required, optional, hint, error, id: idProp, labels: labelsProp, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...rest }: TagSelectProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace TagSelect {
     var displayName: string;
 }
-export declare const TagSelect: {
-    Root: typeof TagSelectRoot;
-};
-export {};
-//# sourceMappingURL=TagSelect.d.ts.map

package/dist/components/tag-select/useChipOverflow.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+type ChipOverflowOptions = {
+    /** The visible chip row (its width and column gap). */
+    rowRef: React.RefObject<HTMLElement | null>;
+    /** An invisible row of every chip followed by a «+N» sample: the widths to fit. */
+    measureRef: React.RefObject<HTMLElement | null>;
+    /** The text input sharing the row; its min width is reserved unless it is collapsed. */
+    inputRef: React.RefObject<HTMLInputElement | null>;
+    /** The chips (a new array when one is added, removed, renamed or recolored). */
+    chips: readonly unknown[];
+    inputCollapsed: boolean;
+};
+/**
+ * How many chips fit on one row of the field; the rest collapse into a «+N» chip. At least one
+ * chip stays visible (it shrinks with an ellipsis, «+N» never does). Recounts when the chips
+ * change and when the row or the measured chips change size (fonts, a renamed tag).
+ */
+export declare function useChipOverflow({ rowRef, measureRef, inputRef, chips, inputCollapsed, }: ChipOverflowOptions): number;
+export {};

package/dist/components/textarea/Textarea.d.ts

@@ -7,13 +7,14 @@ export type TextareaLabels = {
     counter: string;
 };
 export type TextareaRootProps = Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "size" | "children"> & {
+    /** Tier. Default: the tier of the surrounding control (a form, a panel), else `m`. */
     size?: ControlSize;
     /** Invalid state: danger ring and `aria-invalid`. A non-empty `error` implies it. */
     invalid?: boolean;
     /**
      * Draws the focus ring on the field box (default). `false` hides only the visual ring — focus,
      * keyboard and ARIA are unchanged, the error ring still shows. Turn it off only where focus is
-     * otherwise obvious (a single search field with a caret, e.g. a command palette); WCAG 2.4.7.
+     * otherwise obvious (a single composer field with a caret); WCAG 2.4.7.
      */
     focusRing?: boolean;
     label?: React.ReactNode;
@@ -31,45 +32,29 @@ export type TextareaRootProps = Omit<React.TextareaHTMLAttributes<HTMLTextAreaEl
     /** Called with the new string value; native `onChange` still fires. */
     onValueChange?: (value: string) => void;
     labels?: Partial<TextareaLabels>;
+    /** The native `<textarea>`. */
+    ref?: React.Ref<HTMLTextAreaElement>;
 };
-export type TextareaCounterProps = {
+/**
+ * A multi-line field. `className` goes to the field frame, `id`, `ref` and the native attributes
+ * to the `<textarea>` (it has no `Field` part).
+ */
+declare function TextareaRoot({ id, className, size: sizeProp, invalid, focusRing, label, required, optional, hint, error, counter, reserveSupportRow, autoResize, disabled, readOnly, value, onInput, onChange, onValueChange, labels: labelsProp, "aria-describedby": ariaDescribedBy, ref, ...rest }: TextareaRootProps): import("react/jsx-runtime").JSX.Element;
+declare namespace TextareaRoot {
+    var displayName: string;
+}
+export type TextareaCounterProps = Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> & {
     current: number;
     max: number;
-    className?: string;
+    ref?: React.Ref<HTMLSpanElement>;
 };
 /** Character counter for the `counter` slot; turns danger when `current > max`. */
-declare function TextareaCounter({ current, max, className }: TextareaCounterProps): import("react/jsx-runtime").JSX.Element;
+declare function TextareaCounter(props: TextareaCounterProps): import("react/jsx-runtime").JSX.Element;
 declare namespace TextareaCounter {
     var displayName: string;
 }
 export declare const Textarea: {
-    Root: React.ForwardRefExoticComponent<Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "children" | "size"> & {
-        size?: ControlSize;
-        /** Invalid state: danger ring and `aria-invalid`. A non-empty `error` implies it. */
-        invalid?: boolean;
-        /**
-         * Draws the focus ring on the field box (default). `false` hides only the visual ring — focus,
-         * keyboard and ARIA are unchanged, the error ring still shows. Turn it off only where focus is
-         * otherwise obvious (a single search field with a caret, e.g. a command palette); WCAG 2.4.7.
-         */
-        focusRing?: boolean;
-        label?: React.ReactNode;
-        /** Shows the muted optional marker after the label text (`labels.optional`). */
-        optional?: boolean;
-        hint?: React.ReactNode;
-        /** Error message; replaces the hint in the same slot and implies `invalid`. */
-        error?: React.ReactNode;
-        /** Right-aligned slot of the support row, e.g. `<Textarea.Counter current={n} max={500} />`. */
-        counter?: React.ReactNode;
-        /** Always render the support row so an appearing error does not shift the layout. */
-        reserveSupportRow?: boolean;
-        /** Height follows the content. `false` → fixed height with native vertical resize. */
-        autoResize?: boolean;
-        /** Called with the new string value; native `onChange` still fires. */
-        onValueChange?: (value: string) => void;
-        labels?: Partial<TextareaLabels>;
-    } & React.RefAttributes<HTMLTextAreaElement>>;
+    Root: typeof TextareaRoot;
     Counter: typeof TextareaCounter;
 };
 export {};
-//# sourceMappingURL=Textarea.d.ts.map

package/dist/components/thumbnail/Thumbnail.d.ts

@@ -0,0 +1,41 @@
+import type * as React from "react";
+import { type ImageSlotFallbackProps, type ImageSlotImageProps } from "@/internal/imageSlot";
+import type { ControlSize, PaletteColor } from "@/internal/states";
+/** Width ÷ height. `1:1` square · `4:3` / `3:2` photo · `16:9` wide cover · `3:4` portrait. */
+export type ThumbnailRatio = "1:1" | "4:3" | "3:2" | "16:9" | "3:4";
+export type ThumbnailRootProps = React.HTMLAttributes<HTMLDivElement> & {
+    /** Height tier: 24 · 32 · 40 · 48 · 64; width follows `ratio`. Default `m`. */
+    size?: ControlSize;
+    /** Aspect ratio, width ÷ height. Default `1:1`. */
+    ratio?: ThumbnailRatio;
+    /** Fallback fill and icon color (`--prime-color-palette-<hue>-*`). Default `gray`. */
+    color?: PaletteColor;
+    /** Fallback fill: `soft` tint with a hue icon, or `solid` hue with a contrasting icon. */
+    variant?: "soft" | "solid";
+    /** Fills the container width (cards, galleries); the height follows `ratio`. */
+    fullWidth?: boolean;
+    /** A faint inner ring around the frame, for photos with a white background on a light surface. */
+    ring?: boolean;
+    ref?: React.Ref<HTMLDivElement>;
+};
+/** A preview of an object (product, vehicle, file, cover) at a fixed aspect ratio. People use Avatar. */
+declare function ThumbnailRoot({ size, ratio, color, variant, fullWidth, ring, className, children, ...rest }: ThumbnailRootProps): import("react/jsx-runtime").JSX.Element;
+declare namespace ThumbnailRoot {
+    var displayName: string;
+}
+export type ThumbnailImageProps = ImageSlotImageProps & {
+    /** `cover` (default) crops to fill; `contain` shows the whole image on the fallback fill. */
+    fit?: "cover" | "contain";
+};
+/** The picture; while it loads or after an error the Fallback shows through. */
+declare function ThumbnailImage({ fit, ...rest }: ThumbnailImageProps): import("react/jsx-runtime").JSX.Element;
+declare namespace ThumbnailImage {
+    var displayName: string;
+}
+export type ThumbnailFallbackProps = ImageSlotFallbackProps;
+export declare const Thumbnail: {
+    Root: typeof ThumbnailRoot;
+    Image: typeof ThumbnailImage;
+    Fallback: (props: ImageSlotFallbackProps) => React.ReactElement;
+};
+export {};

package/dist/components/timeline/Timeline.d.ts

@@ -3,31 +3,33 @@ import type { ControlSize, PaletteColor, Tone } from "@/internal/states";
 export type TimelineRootProps = {
     /** Tier of text, dots and row rhythm. Default `m` (rows 64px). */
     size?: ControlSize;
-    /**
-     * Who gets the highlighted look (pill, accent title and dot):
-     * `selected` (default) — the `active` row keeps it; interactive rows get a faint hover wash.
-     * `hover` — the row under the pointer or with keyboard focus, transiently; `active` keeps only
-     * its semantics (`aria-current`), no persistent highlight.
-     */
-    highlight?: "selected" | "hover";
     /** `Timeline.Group` elements. */
     children: React.ReactNode;
     className?: string;
+    ref?: React.Ref<HTMLDivElement>;
 } & Omit<React.HTMLAttributes<HTMLDivElement>, "children">;
+declare function TimelineRoot({ size, children, className, ...rest }: TimelineRootProps): import("react/jsx-runtime").JSX.Element;
+declare namespace TimelineRoot {
+    var displayName: string;
+}
 export type TimelineGroupProps = {
     /** Group heading (e.g. «Недавно»); labels the list via `aria-labelledby`. */
     label?: React.ReactNode;
     /** `Timeline.Item` and `Timeline.Gap` elements. */
     children: React.ReactNode;
     className?: string;
+    ref?: React.Ref<HTMLOListElement>;
 } & Omit<React.OlHTMLAttributes<HTMLOListElement>, "children">;
+/** One labelled `<ol>` of events. The connecting line runs from its first dot to its last. */
+declare function TimelineGroup({ label, children, className, ...rest }: TimelineGroupProps): import("react/jsx-runtime").JSX.Element;
+declare namespace TimelineGroup {
+    var displayName: string;
+}
 export type TimelineItemProps = {
     /** Decorative dot hue (categorization). Default `blue`, shown at reduced emphasis. */
     color?: PaletteColor;
     /** Semantic dot color (status). Wins over `color`; shown at full emphasis. */
     tone?: Tone;
-    /** Highlighted / selected row: soft pill, accent title and dot; `data-state="active"`, `aria-current`. */
-    active?: boolean;
     /** Renders the row as a link. */
     href?: string;
     /** Renders the row as the single child element (router link etc.); the dot is prepended to its children. */
@@ -37,12 +39,19 @@ export type TimelineItemProps = {
     /** `Timeline.Title`, `Timeline.Meta`, `Timeline.Value`. */
     children: React.ReactNode;
     className?: string;
+    /** The row element (`a`, `button`, `div` or the `asChild` element). */
+    ref?: React.Ref<HTMLElement>;
 } & Omit<React.HTMLAttributes<HTMLElement>, "children" | "color" | "onClick"> & Pick<React.AnchorHTMLAttributes<HTMLAnchorElement>, "target" | "rel" | "download">;
+declare function TimelineItem({ color, tone, href, asChild, onClick, children, className, ref, ...rest }: TimelineItemProps): import("react/jsx-runtime").JSX.Element;
+declare namespace TimelineItem {
+    var displayName: string;
+}
 export type TimelineTitleProps = {
     children: React.ReactNode;
     className?: string;
+    ref?: React.Ref<HTMLSpanElement>;
 } & Omit<React.HTMLAttributes<HTMLSpanElement>, "children">;
-/** First line: the event. Medium, primary (accent on the active row); wraps when narrow. */
+/** First line: the event. Medium, primary (accent on the highlighted row); wraps when narrow. */
 declare function TimelineTitle({ children, className, ...rest }: TimelineTitleProps): import("react/jsx-runtime").JSX.Element;
 declare namespace TimelineTitle {
     var displayName: string;
@@ -50,6 +59,7 @@ declare namespace TimelineTitle {
 export type TimelineMetaProps = {
     children: React.ReactNode;
     className?: string;
+    ref?: React.Ref<HTMLSpanElement>;
 } & Omit<React.HTMLAttributes<HTMLSpanElement>, "children">;
 /** Second line: date and relative time, muted, tabular numbers. Emphasize a part with `Timeline.MetaPrimary` or `<strong>`. */
 declare function TimelineMeta({ children, className, ...rest }: TimelineMetaProps): import("react/jsx-runtime").JSX.Element;
@@ -59,6 +69,7 @@ declare namespace TimelineMeta {
 export type TimelineMetaPrimaryProps = {
     children: React.ReactNode;
     className?: string;
+    ref?: React.Ref<HTMLSpanElement>;
 } & Omit<React.HTMLAttributes<HTMLSpanElement>, "children">;
 /** Emphasized part of the meta line (the date): primary, medium. */
 declare function TimelineMetaPrimary({ children, className, ...rest }: TimelineMetaPrimaryProps): import("react/jsx-runtime").JSX.Element;
@@ -70,6 +81,7 @@ export type TimelineValueProps = {
     tone?: Tone;
     children: React.ReactNode;
     className?: string;
+    ref?: React.Ref<HTMLSpanElement>;
 } & Omit<React.HTMLAttributes<HTMLSpanElement>, "children">;
 /**
  * Trailing amount: right-aligned, vertically centered, tabular numbers. Add `Timeline.ValueMeta` for a
@@ -82,74 +94,47 @@ declare namespace TimelineValue {
 export type TimelineValueMetaProps = {
     children: React.ReactNode;
     className?: string;
+    ref?: React.Ref<HTMLSpanElement>;
 } & Omit<React.HTMLAttributes<HTMLSpanElement>, "children">;
 /** Second line inside `Timeline.Value` (category, unit): meta size, muted, right-aligned under the value. */
 declare function TimelineValueMeta({ children, className, ...rest }: TimelineValueMetaProps): import("react/jsx-runtime").JSX.Element;
 declare namespace TimelineValueMeta {
     var displayName: string;
 }
+export type TimelineGapMetaProps = React.HTMLAttributes<HTMLSpanElement> & {
+    ref?: React.Ref<HTMLSpanElement>;
+};
+/** A caption on the right of a gap (e.g. «сейчас»). */
+declare function TimelineGapMeta({ className, ...rest }: TimelineGapMetaProps): import("react/jsx-runtime").JSX.Element;
+declare namespace TimelineGapMeta {
+    var displayName: string;
+}
 export type TimelineGapProps = {
     /** Caption color and hollow dot. Default `neutral` (muted); `warning` / `danger` flag a long interval. */
     tone?: Tone;
-    /** Optional trailing caption on the right (e.g. «сейчас»). */
-    trailing?: React.ReactNode;
-    /** Interval caption, e.g. «40 дней · 2 200 км без обслуживания». */
+    /** Interval caption, e.g. «40 дней · 2 200 км без обслуживания», and an optional `Timeline.GapMeta`. */
     children: React.ReactNode;
     className?: string;
+    ref?: React.Ref<HTMLDivElement>;
 } & Omit<React.HTMLAttributes<HTMLDivElement>, "children">;
+/**
+ * Interval between two events: a shorter row with a small hollow dot on a dashed segment and a
+ * muted caption. Renders an `li`, so it goes inside `Timeline.Group` between items.
+ */
+declare function TimelineGap({ tone, children, className, ...rest }: TimelineGapProps): import("react/jsx-runtime").JSX.Element;
+declare namespace TimelineGap {
+    var displayName: string;
+}
 export declare const Timeline: {
-    Root: React.ForwardRefExoticComponent<{
-        /** Tier of text, dots and row rhythm. Default `m` (rows 64px). */
-        size?: ControlSize;
-        /**
-         * Who gets the highlighted look (pill, accent title and dot):
-         * `selected` (default) — the `active` row keeps it; interactive rows get a faint hover wash.
-         * `hover` — the row under the pointer or with keyboard focus, transiently; `active` keeps only
-         * its semantics (`aria-current`), no persistent highlight.
-         */
-        highlight?: "selected" | "hover";
-        /** `Timeline.Group` elements. */
-        children: React.ReactNode;
-        className?: string;
-    } & Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & React.RefAttributes<HTMLDivElement>>;
-    Group: React.ForwardRefExoticComponent<{
-        /** Group heading (e.g. «Недавно»); labels the list via `aria-labelledby`. */
-        label?: React.ReactNode;
-        /** `Timeline.Item` and `Timeline.Gap` elements. */
-        children: React.ReactNode;
-        className?: string;
-    } & Omit<React.OlHTMLAttributes<HTMLOListElement>, "children"> & React.RefAttributes<HTMLOListElement>>;
-    Item: React.ForwardRefExoticComponent<{
-        /** Decorative dot hue (categorization). Default `blue`, shown at reduced emphasis. */
-        color?: PaletteColor;
-        /** Semantic dot color (status). Wins over `color`; shown at full emphasis. */
-        tone?: Tone;
-        /** Highlighted / selected row: soft pill, accent title and dot; `data-state="active"`, `aria-current`. */
-        active?: boolean;
-        /** Renders the row as a link. */
-        href?: string;
-        /** Renders the row as the single child element (router link etc.); the dot is prepended to its children. */
-        asChild?: boolean;
-        /** Renders the row as a `button` (unless `href` / `asChild`). */
-        onClick?: React.MouseEventHandler<HTMLElement>;
-        /** `Timeline.Title`, `Timeline.Meta`, `Timeline.Value`. */
-        children: React.ReactNode;
-        className?: string;
-    } & Omit<React.HTMLAttributes<HTMLElement>, "children" | "color" | "onClick"> & Pick<React.AnchorHTMLAttributes<HTMLAnchorElement>, "rel" | "target" | "download"> & React.RefAttributes<HTMLElement>>;
+    Root: typeof TimelineRoot;
+    Group: typeof TimelineGroup;
+    Item: typeof TimelineItem;
     Title: typeof TimelineTitle;
     Meta: typeof TimelineMeta;
     MetaPrimary: typeof TimelineMetaPrimary;
     Value: typeof TimelineValue;
     ValueMeta: typeof TimelineValueMeta;
-    Gap: React.ForwardRefExoticComponent<{
-        /** Caption color and hollow dot. Default `neutral` (muted); `warning` / `danger` flag a long interval. */
-        tone?: Tone;
-        /** Optional trailing caption on the right (e.g. «сейчас»). */
-        trailing?: React.ReactNode;
-        /** Interval caption, e.g. «40 дней · 2 200 км без обслуживания». */
-        children: React.ReactNode;
-        className?: string;
-    } & Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & React.RefAttributes<HTMLDivElement>>;
+    Gap: typeof TimelineGap;
+    GapMeta: typeof TimelineGapMeta;
 };
 export {};
-//# sourceMappingURL=Timeline.d.ts.map