@arcfusionz/arc-primitive-ui 0.1.0 → 0.2.0

package/dist/components/Table/Table.js

@@ -0,0 +1,143 @@
+import { cn } from "../../lib/cn.js";
+import { forwardRef } from "react";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/Table/Table.tsx
+const containerClasses = "relative w-full overflow-auto overscroll-x-contain";
+const containerVariantClasses = {
+	plain: "",
+	outline: "rounded-md border border-border bg-background",
+	elevated: "rounded-md border border-border bg-background shadow-md"
+};
+const tableClasses = "w-full min-w-full border-collapse bg-background font-sans text-sm text-foreground";
+const tableSizeClasses = {
+	sm: "[&_th]:h-9 [&_th]:px-3 [&_td]:px-3 [&_td]:py-2",
+	md: "[&_th]:h-11 [&_th]:px-4 [&_td]:px-4 [&_td]:py-3",
+	lg: "[&_th]:h-12 [&_th]:px-5 [&_th]:text-sm [&_td]:px-5 [&_td]:py-4 [&_td]:text-base"
+};
+const tableLayoutClasses = {
+	auto: "table-auto",
+	fixed: "table-fixed"
+};
+const tableHeaderClasses = "bg-surface [&_tr]:border-b [&_tr]:border-border [&_th]:border-b [&_th]:border-border";
+const tableBodyClasses = "[&_tr:last-child]:border-b-0";
+const tableFooterClasses = "border-t border-border bg-surface font-sans font-semibold text-foreground [&>tr]:border-b-0";
+const tableRowClasses = "border-b border-border transition-colors duration-150 data-selected:bg-secondary data-selected:hover:bg-secondary";
+const tableHeadClasses = "whitespace-nowrap text-left align-middle font-sans text-xs font-semibold uppercase tracking-widest text-muted-foreground";
+const tableCellClasses = "align-middle font-sans text-sm text-foreground";
+const tableCaptionClasses = "px-4 py-3 text-left font-sans text-xs text-muted-foreground";
+const captionSideClasses = {
+	top: "caption-top border-b border-border",
+	bottom: "caption-bottom border-t border-border"
+};
+const TableContainer = forwardRef(({ variant = "elevated", render, className, ...rest }, ref) => {
+	return useRender({
+		defaultTagName: "div",
+		render,
+		ref,
+		state: { variant },
+		props: {
+			...rest,
+			className: cn(containerClasses, containerVariantClasses[variant], className)
+		}
+	});
+});
+TableContainer.displayName = "TableContainer";
+const Table = forwardRef(({ size = "md", layout = "auto", striped = false, hoverable = true, stickyHeader = false, showColumnBorders = false, render, className, ...rest }, ref) => {
+	return useRender({
+		defaultTagName: "table",
+		render,
+		ref,
+		state: {
+			size,
+			layout,
+			striped,
+			hoverable,
+			stickyHeader,
+			showColumnBorders
+		},
+		props: {
+			...rest,
+			className: cn(tableClasses, tableSizeClasses[size], tableLayoutClasses[layout], striped && "[&_tbody_tr:nth-child(even)]:bg-surface", hoverable && "[&_tbody_tr]:hover:bg-muted", stickyHeader && "[&_thead_th]:sticky [&_thead_th]:top-0 [&_thead_th]:z-10 [&_thead_th]:bg-surface", showColumnBorders && "[&_tr>*+*]:border-l [&_tr>*+*]:border-border", className)
+		}
+	});
+});
+Table.displayName = "Table";
+const TableHeader = forwardRef(({ render, className, ...rest }, ref) => useRender({
+	defaultTagName: "thead",
+	render,
+	ref,
+	props: {
+		...rest,
+		className: cn(tableHeaderClasses, className)
+	}
+}));
+TableHeader.displayName = "TableHeader";
+const TableBody = forwardRef(({ render, className, ...rest }, ref) => useRender({
+	defaultTagName: "tbody",
+	render,
+	ref,
+	props: {
+		...rest,
+		className: cn(tableBodyClasses, className)
+	}
+}));
+TableBody.displayName = "TableBody";
+const TableFooter = forwardRef(({ render, className, ...rest }, ref) => useRender({
+	defaultTagName: "tfoot",
+	render,
+	ref,
+	props: {
+		...rest,
+		className: cn(tableFooterClasses, className)
+	}
+}));
+TableFooter.displayName = "TableFooter";
+const TableRow = forwardRef(({ selected = false, render, className, ...rest }, ref) => {
+	return useRender({
+		defaultTagName: "tr",
+		render,
+		ref,
+		state: { selected },
+		props: {
+			...rest,
+			className: cn(tableRowClasses, className)
+		}
+	});
+});
+TableRow.displayName = "TableRow";
+const TableHead = forwardRef(({ scope = "col", render, className, ...rest }, ref) => useRender({
+	defaultTagName: "th",
+	render,
+	ref,
+	props: {
+		scope,
+		...rest,
+		className: cn(tableHeadClasses, className)
+	}
+}));
+TableHead.displayName = "TableHead";
+const TableCell = forwardRef(({ render, className, ...rest }, ref) => useRender({
+	defaultTagName: "td",
+	render,
+	ref,
+	props: {
+		...rest,
+		className: cn(tableCellClasses, className)
+	}
+}));
+TableCell.displayName = "TableCell";
+const TableCaption = forwardRef(({ side = "bottom", render, className, ...rest }, ref) => {
+	return useRender({
+		defaultTagName: "caption",
+		render,
+		ref,
+		state: { side },
+		props: {
+			...rest,
+			className: cn(tableCaptionClasses, captionSideClasses[side], className)
+		}
+	});
+});
+TableCaption.displayName = "TableCaption";
+//#endregion
+export { Table, TableBody, TableCaption, TableCell, TableContainer, TableFooter, TableHead, TableHeader, TableRow };

package/dist/components/Table/index.d.ts

@@ -0,0 +1,2 @@
+import { Table, TableBody, TableBodyProps, TableCaption, TableCaptionProps, TableCaptionRenderState, TableCaptionSide, TableCell, TableCellProps, TableContainer, TableContainerProps, TableContainerRenderState, TableContainerVariant, TableFooter, TableFooterProps, TableHead, TableHeadProps, TableHeader, TableHeaderProps, TableLayout, TableProps, TableRenderState, TableRow, TableRowProps, TableRowRenderState, TableSize } from "./Table.js";
+export { Table, TableBody, type TableBodyProps, TableCaption, type TableCaptionProps, type TableCaptionRenderState, type TableCaptionSide, TableCell, type TableCellProps, TableContainer, type TableContainerProps, type TableContainerRenderState, type TableContainerVariant, TableFooter, type TableFooterProps, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, type TableLayout, type TableProps, type TableRenderState, TableRow, type TableRowProps, type TableRowRenderState, type TableSize };

package/dist/components/Table/index.js

@@ -0,0 +1,2 @@
+import { Table, TableBody, TableCaption, TableCell, TableContainer, TableFooter, TableHead, TableHeader, TableRow } from "./Table.js";
+export { Table, TableBody, TableCaption, TableCell, TableContainer, TableFooter, TableHead, TableHeader, TableRow };

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

@@ -0,0 +1,116 @@
+import { ComponentPropsWithoutRef } from "react";
+import { Tabs } from "@base-ui/react/tabs";
+//#region src/components/Tabs/Tabs.d.ts
+type TabsVariant = "underline" | "pills";
+type TabsSize = "sm" | "md" | "lg";
+type TabsIndicatorPosition = "start" | "end";
+interface TabsListVariantsOptions {
+  variant?: TabsVariant;
+  fullWidth?: boolean;
+  /** Show the passive divider behind an underline list. Has no effect on pills. */
+  showDivider?: boolean;
+  /** Edge used by the divider when the styled element is a vertical underline list. */
+  indicatorPosition?: TabsIndicatorPosition;
+  className?: string;
+}
+/**
+ * Class list for an element styled as a TabsList.
+ *
+ * For navigation that only *looks* like tabs (each "tab" is a different
+ * page), keep honest semantics — a `<nav>` of links with `aria-current`, not
+ * `role="tablist"`:
+ *
+ *   <nav aria-label="Settings" className={tabsListVariants()}>
+ *     <a href="/profile" aria-current="page" className={tabsTabVariants({ active: true })}>Profile</a>
+ *     <a href="/billing" className={tabsTabVariants()}>Billing</a>
+ *   </nav>
+ */
+declare function tabsListVariants({ variant, fullWidth, showDivider, indicatorPosition, className }?: TabsListVariantsOptions): string;
+interface TabsTabVariantsOptions {
+  variant?: TabsVariant;
+  size?: TabsSize;
+  /**
+   * Style as the selected item — the static replacement for Base UI's
+   * `data-active` on plain nav elements: underline gains an inset 2px primary
+   * bar, pills the raised card.
+   */
+  active?: boolean;
+  fullWidth?: boolean;
+  className?: string;
+}
+/** Class list for an element styled as a TabsTab (see tabsListVariants). */
+declare function tabsTabVariants({ variant, size, active, fullWidth, className }?: TabsTabVariantsOptions): string;
+interface TabsProps extends Omit<ComponentPropsWithoutRef<typeof Tabs.Root>, "className"> {
+  /**
+   * Visual style shared by every part: `underline` (default) marks the active
+   * tab with a 2px primary bar on the list's divider; `pills` renders a
+   * segmented control — a muted track with a raised card sliding to the
+   * active tab.
+   */
+  variant?: TabsVariant;
+  /**
+   * Control density. Underline tabs are 32/40/48px tall; pill tabs are
+   * 24/32/40px inside the track's padding, so `sm` pills sit exactly on the
+   * WCAG 2.5.8 24px target-size floor — prefer `md`+ for touch-first
+   * surfaces.
+   */
+  size?: TabsSize;
+  /** Stretch tabs to share the full list width equally. Horizontal orientation only. */
+  fullWidth?: boolean;
+  /**
+   * Show the muted divider behind the active indicator in `underline` tabs.
+   * Set to `false` for an indicator-only treatment. The primary active
+   * indicator remains visible; this has no visual effect on `pills`.
+   */
+  showDivider?: boolean;
+  /**
+   * Edge for the active indicator and divider in vertical underline tabs.
+   * `start` is left in LTR and right in RTL; `end` (default) is the opposite.
+   * Has no visual effect on horizontal or pill tabs.
+   */
+  indicatorPosition?: TabsIndicatorPosition;
+  className?: string;
+}
+/**
+ * Groups the tab list and its panels; lays them out in a column, or a row
+ * when `orientation="vertical"`.
+ */
+declare const Tabs$1: import("react").ForwardRefExoticComponent<TabsProps & import("react").RefAttributes<HTMLDivElement>>;
+interface TabsListProps extends Omit<ComponentPropsWithoutRef<typeof Tabs.List>, "className" | "activateOnFocus"> {
+  /**
+   * Whether arrow-key focus immediately activates the focused tab. Defaults
+   * to `true` (automatic activation — the WAI-ARIA APG recommendation when
+   * panels render instantly); Base UI's own default is manual. Set `false`
+   * so Enter/Space activates instead when merely mounting a panel is
+   * expensive, e.g. it fetches on mount.
+   */
+  activateOnFocus?: boolean;
+  className?: string;
+}
+/**
+ * Container for the tab buttons. Renders Base UI's `Tabs.Indicator` after the
+ * tabs automatically, so the sliding active-tab marker comes for free — don't
+ * add one manually. (The indicator positions itself on the client; before
+ * hydration the active tab is still distinguished by its text color.)
+ */
+declare const TabsList: import("react").ForwardRefExoticComponent<TabsListProps & import("react").RefAttributes<HTMLDivElement>>;
+interface TabsTabProps extends Omit<ComponentPropsWithoutRef<typeof Tabs.Tab>, "className"> {
+  className?: string;
+}
+/**
+ * One tab button; its `value` pairs it with a `TabsPanel`. Icons and badges
+ * ride along as children and inherit the icon sizing. For route-driven tabs,
+ * render a real link: `render={<a href="…" />}` plus `nativeButton={false}`.
+ */
+declare const TabsTab: import("react").ForwardRefExoticComponent<TabsTabProps & import("react").RefAttributes<HTMLButtonElement>>;
+interface TabsPanelProps extends Omit<ComponentPropsWithoutRef<typeof Tabs.Panel>, "className"> {
+  className?: string;
+}
+/**
+ * Content shown while its `value` matches the active tab. Hidden panels are
+ * unmounted unless `keepMounted` is set — use it to preserve form state or
+ * scroll position across switches.
+ */
+declare const TabsPanel: import("react").ForwardRefExoticComponent<TabsPanelProps & import("react").RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Tabs$1 as Tabs, TabsIndicatorPosition, TabsList, TabsListProps, TabsListVariantsOptions, TabsPanel, TabsPanelProps, TabsProps, TabsSize, TabsTab, TabsTabProps, TabsTabVariantsOptions, TabsVariant, tabsListVariants, tabsTabVariants };

package/dist/components/Tabs/Tabs.js

@@ -0,0 +1,158 @@
+import { cn } from "../../lib/cn.js";
+import { createContext, forwardRef, useContext, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Tabs } from "@base-ui/react/tabs";
+//#region src/components/Tabs/Tabs.tsx
+const TabsStyleContext = createContext({
+	variant: "underline",
+	size: "md",
+	fullWidth: false,
+	showDivider: true,
+	orientation: "horizontal",
+	indicatorPosition: "end"
+});
+const rootClasses = "flex flex-col gap-4 data-[orientation=vertical]:flex-row";
+const listBaseClasses = "relative isolate flex shrink-0 data-[orientation=vertical]:flex-col";
+const listVariantClasses = {
+	underline: "gap-1",
+	pills: "gap-1 rounded-md bg-muted p-1"
+};
+const listDividerClasses = "border-b border-border data-[orientation=vertical]:border-b-0";
+const listIndicatorPositionClasses = {
+	start: "data-[orientation=vertical]:border-s",
+	end: "data-[orientation=vertical]:border-e"
+};
+const tabBaseClasses = "inline-flex shrink-0 cursor-pointer items-center justify-center whitespace-nowrap select-none rounded-md font-sans font-medium text-slate-600 transition-colors duration-150 hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[orientation=vertical]:justify-start";
+const tabSizeClasses = {
+	underline: {
+		sm: "h-8 gap-1.5 px-2.5 text-sm",
+		md: "h-10 gap-2 px-3 text-sm",
+		lg: "h-12 gap-2 px-4 text-base [&_svg:not([class*='size-'])]:size-5"
+	},
+	pills: {
+		sm: "h-6 gap-1.5 px-2.5 text-sm",
+		md: "h-8 gap-2 px-3 text-sm",
+		lg: "h-10 gap-2 px-4 text-base [&_svg:not([class*='size-'])]:size-5"
+	}
+};
+const tabActiveDataClasses = {
+	underline: "data-active:text-primary",
+	pills: "data-active:text-foreground"
+};
+const tabActiveStaticClasses = {
+	underline: "text-primary shadow-[inset_0_-2px_0_0_var(--color-primary)]",
+	pills: "bg-background text-foreground shadow-sm"
+};
+const indicatorBaseClasses = "absolute -z-1 motion-safe:transition-all motion-safe:duration-200 motion-safe:ease-out";
+const indicatorVariantClasses = {
+	underline: "rounded-full bg-primary data-[orientation=horizontal]:bottom-0 data-[orientation=horizontal]:left-0 data-[orientation=horizontal]:h-0.5 data-[orientation=horizontal]:w-(--active-tab-width) data-[orientation=horizontal]:translate-x-(--active-tab-left) data-[orientation=vertical]:top-0 data-[orientation=vertical]:w-0.5 data-[orientation=vertical]:h-(--active-tab-height) data-[orientation=vertical]:translate-y-(--active-tab-top)",
+	pills: "top-0 left-0 rounded-md bg-background shadow-sm h-(--active-tab-height) w-(--active-tab-width) translate-x-(--active-tab-left) translate-y-(--active-tab-top)"
+};
+const indicatorPositionClasses = {
+	start: "data-[orientation=vertical]:start-0",
+	end: "data-[orientation=vertical]:end-0"
+};
+const panelClasses = "min-w-0 flex-1 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring";
+/**
+* Class list for an element styled as a TabsList.
+*
+* For navigation that only *looks* like tabs (each "tab" is a different
+* page), keep honest semantics — a `<nav>` of links with `aria-current`, not
+* `role="tablist"`:
+*
+*   <nav aria-label="Settings" className={tabsListVariants()}>
+*     <a href="/profile" aria-current="page" className={tabsTabVariants({ active: true })}>Profile</a>
+*     <a href="/billing" className={tabsTabVariants()}>Billing</a>
+*   </nav>
+*/
+function tabsListVariants({ variant = "underline", fullWidth = false, showDivider = true, indicatorPosition = "end", className } = {}) {
+	return cn(listBaseClasses, listVariantClasses[variant], variant === "underline" && showDivider && listDividerClasses, variant === "underline" && showDivider && listIndicatorPositionClasses[indicatorPosition], fullWidth && "w-full", className);
+}
+/** Class list for an element styled as a TabsTab (see tabsListVariants). */
+function tabsTabVariants({ variant = "underline", size = "md", active = false, fullWidth = false, className } = {}) {
+	return cn(tabBaseClasses, tabSizeClasses[variant][size], active && tabActiveStaticClasses[variant], fullWidth && "flex-1", className);
+}
+/**
+* Groups the tab list and its panels; lays them out in a column, or a row
+* when `orientation="vertical"`.
+*/
+const Tabs$1 = forwardRef(({ variant = "underline", size = "md", fullWidth = false, showDivider = true, orientation = "horizontal", indicatorPosition = "end", className, ...rest }, ref) => {
+	const styleContext = useMemo(() => ({
+		variant,
+		size,
+		fullWidth,
+		showDivider,
+		orientation,
+		indicatorPosition
+	}), [
+		variant,
+		size,
+		fullWidth,
+		showDivider,
+		orientation,
+		indicatorPosition
+	]);
+	return /* @__PURE__ */ jsx(TabsStyleContext.Provider, {
+		value: styleContext,
+		children: /* @__PURE__ */ jsx(Tabs.Root, {
+			ref,
+			orientation,
+			className: cn(rootClasses, className),
+			...rest
+		})
+	});
+});
+Tabs$1.displayName = "Tabs";
+/**
+* Container for the tab buttons. Renders Base UI's `Tabs.Indicator` after the
+* tabs automatically, so the sliding active-tab marker comes for free — don't
+* add one manually. (The indicator positions itself on the client; before
+* hydration the active tab is still distinguished by its text color.)
+*/
+const TabsList = forwardRef(({ activateOnFocus = true, className, children, ...rest }, ref) => {
+	const { variant, fullWidth, showDivider, orientation, indicatorPosition } = useContext(TabsStyleContext);
+	return /* @__PURE__ */ jsxs(Tabs.List, {
+		ref,
+		activateOnFocus,
+		className: cn(tabsListVariants({
+			variant,
+			fullWidth: fullWidth && orientation === "horizontal",
+			showDivider,
+			indicatorPosition
+		}), className),
+		...rest,
+		children: [children, /* @__PURE__ */ jsx(Tabs.Indicator, { className: cn(indicatorBaseClasses, indicatorVariantClasses[variant], variant === "underline" && indicatorPositionClasses[indicatorPosition]) })]
+	});
+});
+TabsList.displayName = "TabsList";
+/**
+* One tab button; its `value` pairs it with a `TabsPanel`. Icons and badges
+* ride along as children and inherit the icon sizing. For route-driven tabs,
+* render a real link: `render={<a href="…" />}` plus `nativeButton={false}`.
+*/
+const TabsTab = forwardRef(({ className, ...rest }, ref) => {
+	const { variant, size, fullWidth, orientation } = useContext(TabsStyleContext);
+	return /* @__PURE__ */ jsx(Tabs.Tab, {
+		ref,
+		className: cn(tabsTabVariants({
+			variant,
+			size,
+			fullWidth: fullWidth && orientation === "horizontal"
+		}), tabActiveDataClasses[variant], className),
+		...rest
+	});
+});
+TabsTab.displayName = "TabsTab";
+/**
+* Content shown while its `value` matches the active tab. Hidden panels are
+* unmounted unless `keepMounted` is set — use it to preserve form state or
+* scroll position across switches.
+*/
+const TabsPanel = forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx(Tabs.Panel, {
+	ref,
+	className: cn(panelClasses, className),
+	...rest
+}));
+TabsPanel.displayName = "TabsPanel";
+//#endregion
+export { Tabs$1 as Tabs, TabsList, TabsPanel, TabsTab, tabsListVariants, tabsTabVariants };

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

@@ -0,0 +1,2 @@
+import { Tabs, TabsIndicatorPosition, TabsList, TabsListProps, TabsListVariantsOptions, TabsPanel, TabsPanelProps, TabsProps, TabsSize, TabsTab, TabsTabProps, TabsTabVariantsOptions, TabsVariant, tabsListVariants, tabsTabVariants } from "./Tabs.js";
+export { Tabs, type TabsIndicatorPosition, TabsList, type TabsListProps, type TabsListVariantsOptions, TabsPanel, type TabsPanelProps, type TabsProps, type TabsSize, TabsTab, type TabsTabProps, type TabsTabVariantsOptions, type TabsVariant, tabsListVariants, tabsTabVariants };

package/dist/components/Tabs/index.js

@@ -0,0 +1,2 @@
+import { Tabs, TabsList, TabsPanel, TabsTab, tabsListVariants, tabsTabVariants } from "./Tabs.js";
+export { Tabs, TabsList, TabsPanel, TabsTab, tabsListVariants, tabsTabVariants };

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

@@ -0,0 +1,137 @@
+import { ComponentPropsWithoutRef } from "react";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/Timeline/Timeline.d.ts
+type TimelineSize = "sm" | "md" | "lg";
+type TimelineIndicatorVariant = "neutral" | "primary" | "success" | "warning" | "destructive";
+type TimelineIndicatorAppearance = "solid" | "soft" | "outline";
+type TimelineSeparatorVariant = "solid" | "dashed";
+interface TimelineProps extends Omit<ComponentPropsWithoutRef<"ol">, "className"> {
+  /**
+   * Marker diameter and type scale: `sm` 16px · `md` 20px · `lg` 24px.
+   * Markers are non-interactive, so WCAG target-size floors don't apply —
+   * pick by information density, `sm` for compact logs.
+   */
+  size?: TimelineSize;
+  /** Replace the rendered `ol`. Preserve list semantics — they give screen-reader users the "2 of 5" position for free. */
+  render?: useRender.RenderProp;
+  /** Additional classes merged after the root recipe, e.g. `max-w-md`. */
+  className?: string;
+}
+/**
+ * A chronological list of events, marked up as an ordered list. The timeline
+ * is display-only — it holds no current-step state (progress through a flow
+ * is Stepper's job) and renders whatever order it receives; feeds usually
+ * pass newest-first. Give the list an accessible name (`aria-label` or
+ * `aria-labelledby`, e.g. "Deployment history") when the surrounding context
+ * doesn't already announce one.
+ */
+declare const Timeline: import("react").ForwardRefExoticComponent<TimelineProps & import("react").RefAttributes<HTMLOListElement>>;
+interface TimelineItemProps extends Omit<ComponentPropsWithoutRef<"li">, "className"> {
+  /** Replace the rendered `li`. Preserve list-item semantics. */
+  render?: useRender.RenderProp;
+  /** Additional classes merged after the item recipe. */
+  className?: string;
+}
+/**
+ * One event: a flex row of an optional leading `TimelineContent` (opposite
+ * side), the `TimelineConnector` column, and the trailing `TimelineContent`.
+ */
+declare const TimelineItem: import("react").ForwardRefExoticComponent<TimelineItemProps & import("react").RefAttributes<HTMLLIElement>>;
+interface TimelineConnectorProps extends Omit<ComponentPropsWithoutRef<"div">, "className"> {
+  /** Replace the rendered `div`. */
+  render?: useRender.RenderProp;
+  /** Additional classes merged after the connector recipe. */
+  className?: string;
+}
+/**
+ * The marker column: it stretches to the item's height and stacks the
+ * `TimelineIndicator` above the `TimelineSeparator`, which fills the rest —
+ * so the rail always reaches the next item's marker, however tall the
+ * content grows.
+ */
+declare const TimelineConnector: import("react").ForwardRefExoticComponent<TimelineConnectorProps & import("react").RefAttributes<HTMLDivElement>>;
+interface TimelineIndicatorProps extends Omit<ComponentPropsWithoutRef<"span">, "className"> {
+  /** Status color of the marker, reusing the Badge vocabulary. */
+  variant?: TimelineIndicatorVariant;
+  /**
+   * Fill treatment: `solid` is the classic filled dot, `soft` the tinted
+   * icon circle, `outline` a hollow ring — the upcoming/unreached look in
+   * tracking timelines.
+   */
+  appearance?: TimelineIndicatorAppearance;
+  /** Replace the rendered `span`, e.g. with an `Avatar` for actor feeds. */
+  render?: useRender.RenderProp;
+  /** Additional classes merged after the marker recipe, e.g. `size-8` for an avatar-sized marker. */
+  className?: string;
+}
+/**
+ * The event's marker. Empty it renders as a plain dot; children (an icon, a
+ * spinner, a letter) center inside it. Glyphs are decorative next to the
+ * event's own text — mark them `aria-hidden`; when the marker alone carries
+ * meaning (a bare status dot), pair it with visually-hidden text in the
+ * content instead.
+ */
+declare const TimelineIndicator: import("react").ForwardRefExoticComponent<TimelineIndicatorProps & import("react").RefAttributes<HTMLSpanElement>>;
+interface TimelineSeparatorProps extends Omit<ComponentPropsWithoutRef<"span">, "className"> {
+  /** Line style. `dashed` marks an unfinished stretch — the rail into upcoming or in-progress events. */
+  variant?: TimelineSeparatorVariant;
+  /** Replace the rendered `span`. Keep it hidden from assistive technology — the rail is purely visual. */
+  render?: useRender.RenderProp;
+  /** Additional classes merged after the separator recipe, e.g. `border-primary` for a completed stretch. */
+  className?: string;
+}
+/**
+ * The rail segment below a marker, connecting it to the next event. Omit it
+ * on the last item so the timeline ends at its final marker.
+ */
+declare const TimelineSeparator: import("react").ForwardRefExoticComponent<TimelineSeparatorProps & import("react").RefAttributes<HTMLSpanElement>>;
+interface TimelineContentProps extends Omit<ComponentPropsWithoutRef<"div">, "className"> {
+  /** Replace the rendered `div`. */
+  render?: useRender.RenderProp;
+  /**
+   * Additional classes merged after the content recipe. A leading (opposite
+   * side) copy usually caps its width and right-aligns: `flex-none w-24
+   * text-end`; leave both sides `flex-1` to center the rail for alternating
+   * layouts.
+   */
+  className?: string;
+}
+/**
+ * The event's body, holding `TimelineTitle` / `TimelineTime` /
+ * `TimelineDescription` or any richer blocks. It carries the spacing between
+ * items, so the connector's rail spans the full distance to the next marker.
+ * Place one before the connector for opposite-side content (dates in a
+ * roadmap, alternating layouts).
+ */
+declare const TimelineContent: import("react").ForwardRefExoticComponent<TimelineContentProps & import("react").RefAttributes<HTMLDivElement>>;
+interface TimelineTitleProps extends Omit<ComponentPropsWithoutRef<"span">, "className"> {
+  /** Replace the rendered `span`, e.g. `render={<h3 />}` when changelog entries belong in the document outline. */
+  render?: useRender.RenderProp;
+  /** Additional classes merged after the title recipe. */
+  className?: string;
+}
+/** The event's one-line headline. */
+declare const TimelineTitle: import("react").ForwardRefExoticComponent<TimelineTitleProps & import("react").RefAttributes<HTMLSpanElement>>;
+interface TimelineDescriptionProps extends Omit<ComponentPropsWithoutRef<"span">, "className"> {
+  /** Replace the rendered `span`. */
+  render?: useRender.RenderProp;
+  /** Additional classes merged after the description recipe. */
+  className?: string;
+}
+/** Supporting copy under the title. */
+declare const TimelineDescription: import("react").ForwardRefExoticComponent<TimelineDescriptionProps & import("react").RefAttributes<HTMLSpanElement>>;
+interface TimelineTimeProps extends Omit<ComponentPropsWithoutRef<"time">, "className"> {
+  /** Replace the rendered `time`. */
+  render?: useRender.RenderProp;
+  /** Additional classes merged after the time recipe. */
+  className?: string;
+}
+/**
+ * The event's timestamp as a real `<time>` element. Feeds abbreviate the
+ * visible text ("3h", "May 12") — keep the absolute moment machine-readable
+ * in `dateTime`, and put it in the human-readable `title` when the visible
+ * form is relative.
+ */
+declare const TimelineTime: import("react").ForwardRefExoticComponent<TimelineTimeProps & import("react").RefAttributes<HTMLTimeElement>>;
+//#endregion
+export { Timeline, TimelineConnector, TimelineConnectorProps, TimelineContent, TimelineContentProps, TimelineDescription, TimelineDescriptionProps, TimelineIndicator, TimelineIndicatorAppearance, TimelineIndicatorProps, TimelineIndicatorVariant, TimelineItem, TimelineItemProps, TimelineProps, TimelineSeparator, TimelineSeparatorProps, TimelineSeparatorVariant, TimelineSize, TimelineTime, TimelineTimeProps, TimelineTitle, TimelineTitleProps };