@nubitio/ui 0.5.0 → 0.5.2

package/dist/index.cjs

@@ -2353,6 +2353,95 @@ const Drawer = ({ isOpen, onClose, title, width, side = "right", scrim = "subtle
 	}), document.body);
 };
 //#endregion
+//#region packages/ui/Timeline.tsx
+const TimelineVariantContext = (0, react.createContext)("stepper");
+function useTimelineVariant() {
+	return (0, react.useContext)(TimelineVariantContext);
+}
+function TimelineMarker({ status, variant }) {
+	if (variant === "log") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: "nb-timeline__marker nb-timeline__marker--dot",
+		"aria-hidden": "true"
+	});
+	if (status === "complete") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: "nb-timeline__marker nb-timeline__marker--complete",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("i", { className: "ph ph-check" })
+	});
+	if (status === "current") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: "nb-timeline__marker nb-timeline__marker--current",
+		"aria-hidden": "true"
+	});
+	if (status === "error") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: "nb-timeline__marker nb-timeline__marker--error",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("i", { className: "ph ph-x" })
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: "nb-timeline__marker nb-timeline__marker--pending",
+		"aria-hidden": "true"
+	});
+}
+function TimelineItem({ status, title, timestamp, dateTime, tone = "default", children, className }) {
+	const variant = useTimelineVariant();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+		className: [
+			"nb-timeline__item",
+			`nb-timeline__item--${status}`,
+			variant === "log" && `nb-timeline__item--tone-${tone}`,
+			className
+		].filter(Boolean).join(" "),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "nb-timeline__marker-col",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TimelineMarker, {
+				status,
+				variant
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "nb-timeline__content",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "nb-timeline__heading",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "nb-timeline__label",
+					children: title
+				}), timestamp != null && timestamp !== "" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("time", {
+					className: "nb-timeline__timestamp",
+					dateTime,
+					children: timestamp
+				})]
+			}), children]
+		})]
+	});
+}
+function Timeline({ variant = "stepper", title, description, children, className, "aria-label": ariaLabel }) {
+	const panelClasses = [
+		"nb-timeline-panel",
+		(title != null || description != null) && "nb-timeline-panel--card",
+		className
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TimelineVariantContext.Provider, {
+		value: variant,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: panelClasses,
+			children: [(title != null || description != null) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("header", {
+				className: "nb-timeline-panel__header",
+				children: [title != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+					className: "nb-timeline-panel__title",
+					children: title
+				}), description != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "nb-timeline-panel__description",
+					children: description
+				})]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ol", {
+				className: `nb-timeline nb-timeline--${variant}`,
+				role: "list",
+				"aria-label": ariaLabel,
+				children
+			})]
+		})
+	});
+}
+//#endregion
 exports.ACCENT_PRESETS = ACCENT_PRESETS;
 exports.AppDialog = AppDialog;
 exports.AppDropdown = AppDropdown;
@@ -2385,6 +2474,8 @@ exports.TextField = TextField;
 exports.ThemeContext = ThemeContext;
 exports.ThemeProvider = ThemeProvider;
 exports.ThemeSwitcher = ThemeSwitcher;
+exports.Timeline = Timeline;
+exports.TimelineItem = TimelineItem;
 exports.Toggle = Toggle;
 exports.UiStringsProvider = UiStringsProvider;
 exports.getAvatarHue = getAvatarHue;

package/dist/index.d.cts

@@ -716,6 +716,47 @@ interface DrawerProps {
 }
 declare const Drawer: React$1.FC<DrawerProps>;
 //#endregion
+//#region packages/ui/Timeline.d.ts
+type TimelineVariant = 'stepper' | 'log';
+type TimelineItemStatus = 'complete' | 'current' | 'pending' | 'error';
+type TimelineItemTone = 'default' | 'success' | 'info' | 'danger' | 'warning';
+interface TimelineProps {
+  /** `stepper` — workflow stages with checkmarks; `log` — chronological event log. */
+  variant?: TimelineVariant;
+  title?: ReactNode;
+  description?: ReactNode;
+  children: ReactNode;
+  className?: string;
+  'aria-label'?: string;
+}
+interface TimelineItemProps {
+  status: TimelineItemStatus;
+  title: ReactNode;
+  timestamp?: ReactNode;
+  dateTime?: string;
+  /** Marker accent for the `log` variant. */
+  tone?: TimelineItemTone;
+  children?: ReactNode;
+  className?: string;
+}
+declare function TimelineItem({
+  status,
+  title,
+  timestamp,
+  dateTime,
+  tone,
+  children,
+  className
+}: TimelineItemProps): React$1.JSX.Element;
+declare function Timeline({
+  variant,
+  title,
+  description,
+  children,
+  className,
+  'aria-label': ariaLabel
+}: TimelineProps): React$1.JSX.Element;
+//#endregion
 //#region packages/ui/UiStrings.d.ts
 /**
  * Built-in UI strings for @nubitio/ui components (aria-labels, tooltips).
@@ -777,4 +818,4 @@ interface UiStringsProviderProps {
 declare const UiStringsProvider: React$1.FC<UiStringsProviderProps>;
 declare const useUiStrings: () => UiStrings;
 //#endregion
-export { ACCENT_PRESETS, type AccentPreset, AppDialog, type AppDialogProps, AppDropdown, type AppDropdownOption, type AppDropdownProps, type AppDropdownVariant, AppToolbar, type AppToolbarProps, Avatar, type AvatarProps, type AvatarShape, type AvatarSize, Badge, type BadgeProps, type BadgeSize, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardProps, Chip, type ChipProps, CollapsibleSection, type CollapsibleSectionProps, ConfirmDialog, type ConfirmDialogProps, ContextMenu, type ContextMenuItem, type ContextMenuProps, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps, type Density, DensityContext, type DensityContextValue, DensityProvider, Drawer, type DrawerProps, type DrawerSide, EN_UI_STRINGS, ES_UI_STRINGS, EmptyState, type EmptyStateProps, FormField, type FormFieldProps, IconButton, type IconButtonProps, Popover, type PopoverAlign, type PopoverProps, SelectField, type SelectFieldProps, SettingsPanel, type SettingsPanelProps, Skeleton, type SkeletonProps, StatCard, type StatCardProps, TextAreaField, type TextAreaFieldProps, TextField, type TextFieldProps, type Theme, ThemeContext, type ThemeContextValue, type ThemeMode, ThemeProvider, type ThemeProviderProps, ThemeSwitcher, type ThemeSwitcherProps, Toggle, type ToggleProps, type UiStrings, UiStringsProvider, type UiStringsProviderProps, type UseFloatingPanelOptions, type UseFloatingPanelResult, getAvatarHue, getAvatarInitials, useAccentColor, useDensity, useFloatingPanel, useTheme, useUiStrings };
+export { ACCENT_PRESETS, type AccentPreset, AppDialog, type AppDialogProps, AppDropdown, type AppDropdownOption, type AppDropdownProps, type AppDropdownVariant, AppToolbar, type AppToolbarProps, Avatar, type AvatarProps, type AvatarShape, type AvatarSize, Badge, type BadgeProps, type BadgeSize, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardProps, Chip, type ChipProps, CollapsibleSection, type CollapsibleSectionProps, ConfirmDialog, type ConfirmDialogProps, ContextMenu, type ContextMenuItem, type ContextMenuProps, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps, type Density, DensityContext, type DensityContextValue, DensityProvider, Drawer, type DrawerProps, type DrawerSide, EN_UI_STRINGS, ES_UI_STRINGS, EmptyState, type EmptyStateProps, FormField, type FormFieldProps, IconButton, type IconButtonProps, Popover, type PopoverAlign, type PopoverProps, SelectField, type SelectFieldProps, SettingsPanel, type SettingsPanelProps, Skeleton, type SkeletonProps, StatCard, type StatCardProps, TextAreaField, type TextAreaFieldProps, TextField, type TextFieldProps, type Theme, ThemeContext, type ThemeContextValue, type ThemeMode, ThemeProvider, type ThemeProviderProps, ThemeSwitcher, type ThemeSwitcherProps, Timeline, TimelineItem, type TimelineItemProps, type TimelineItemStatus, type TimelineItemTone, type TimelineProps, type TimelineVariant, Toggle, type ToggleProps, type UiStrings, UiStringsProvider, type UiStringsProviderProps, type UseFloatingPanelOptions, type UseFloatingPanelResult, getAvatarHue, getAvatarInitials, useAccentColor, useDensity, useFloatingPanel, useTheme, useUiStrings };

package/dist/index.d.mts

@@ -716,6 +716,47 @@ interface DrawerProps {
 }
 declare const Drawer: React$1.FC<DrawerProps>;
 //#endregion
+//#region packages/ui/Timeline.d.ts
+type TimelineVariant = 'stepper' | 'log';
+type TimelineItemStatus = 'complete' | 'current' | 'pending' | 'error';
+type TimelineItemTone = 'default' | 'success' | 'info' | 'danger' | 'warning';
+interface TimelineProps {
+  /** `stepper` — workflow stages with checkmarks; `log` — chronological event log. */
+  variant?: TimelineVariant;
+  title?: ReactNode;
+  description?: ReactNode;
+  children: ReactNode;
+  className?: string;
+  'aria-label'?: string;
+}
+interface TimelineItemProps {
+  status: TimelineItemStatus;
+  title: ReactNode;
+  timestamp?: ReactNode;
+  dateTime?: string;
+  /** Marker accent for the `log` variant. */
+  tone?: TimelineItemTone;
+  children?: ReactNode;
+  className?: string;
+}
+declare function TimelineItem({
+  status,
+  title,
+  timestamp,
+  dateTime,
+  tone,
+  children,
+  className
+}: TimelineItemProps): React$1.JSX.Element;
+declare function Timeline({
+  variant,
+  title,
+  description,
+  children,
+  className,
+  'aria-label': ariaLabel
+}: TimelineProps): React$1.JSX.Element;
+//#endregion
 //#region packages/ui/UiStrings.d.ts
 /**
  * Built-in UI strings for @nubitio/ui components (aria-labels, tooltips).
@@ -777,4 +818,4 @@ interface UiStringsProviderProps {
 declare const UiStringsProvider: React$1.FC<UiStringsProviderProps>;
 declare const useUiStrings: () => UiStrings;
 //#endregion
-export { ACCENT_PRESETS, type AccentPreset, AppDialog, type AppDialogProps, AppDropdown, type AppDropdownOption, type AppDropdownProps, type AppDropdownVariant, AppToolbar, type AppToolbarProps, Avatar, type AvatarProps, type AvatarShape, type AvatarSize, Badge, type BadgeProps, type BadgeSize, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardProps, Chip, type ChipProps, CollapsibleSection, type CollapsibleSectionProps, ConfirmDialog, type ConfirmDialogProps, ContextMenu, type ContextMenuItem, type ContextMenuProps, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps, type Density, DensityContext, type DensityContextValue, DensityProvider, Drawer, type DrawerProps, type DrawerSide, EN_UI_STRINGS, ES_UI_STRINGS, EmptyState, type EmptyStateProps, FormField, type FormFieldProps, IconButton, type IconButtonProps, Popover, type PopoverAlign, type PopoverProps, SelectField, type SelectFieldProps, SettingsPanel, type SettingsPanelProps, Skeleton, type SkeletonProps, StatCard, type StatCardProps, TextAreaField, type TextAreaFieldProps, TextField, type TextFieldProps, type Theme, ThemeContext, type ThemeContextValue, type ThemeMode, ThemeProvider, type ThemeProviderProps, ThemeSwitcher, type ThemeSwitcherProps, Toggle, type ToggleProps, type UiStrings, UiStringsProvider, type UiStringsProviderProps, type UseFloatingPanelOptions, type UseFloatingPanelResult, getAvatarHue, getAvatarInitials, useAccentColor, useDensity, useFloatingPanel, useTheme, useUiStrings };
+export { ACCENT_PRESETS, type AccentPreset, AppDialog, type AppDialogProps, AppDropdown, type AppDropdownOption, type AppDropdownProps, type AppDropdownVariant, AppToolbar, type AppToolbarProps, Avatar, type AvatarProps, type AvatarShape, type AvatarSize, Badge, type BadgeProps, type BadgeSize, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardProps, Chip, type ChipProps, CollapsibleSection, type CollapsibleSectionProps, ConfirmDialog, type ConfirmDialogProps, ContextMenu, type ContextMenuItem, type ContextMenuProps, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps, type Density, DensityContext, type DensityContextValue, DensityProvider, Drawer, type DrawerProps, type DrawerSide, EN_UI_STRINGS, ES_UI_STRINGS, EmptyState, type EmptyStateProps, FormField, type FormFieldProps, IconButton, type IconButtonProps, Popover, type PopoverAlign, type PopoverProps, SelectField, type SelectFieldProps, SettingsPanel, type SettingsPanelProps, Skeleton, type SkeletonProps, StatCard, type StatCardProps, TextAreaField, type TextAreaFieldProps, TextField, type TextFieldProps, type Theme, ThemeContext, type ThemeContextValue, type ThemeMode, ThemeProvider, type ThemeProviderProps, ThemeSwitcher, type ThemeSwitcherProps, Timeline, TimelineItem, type TimelineItemProps, type TimelineItemStatus, type TimelineItemTone, type TimelineProps, type TimelineVariant, Toggle, type ToggleProps, type UiStrings, UiStringsProvider, type UiStringsProviderProps, type UseFloatingPanelOptions, type UseFloatingPanelResult, getAvatarHue, getAvatarInitials, useAccentColor, useDensity, useFloatingPanel, useTheme, useUiStrings };

package/dist/index.mjs

@@ -2329,4 +2329,93 @@ const Drawer = ({ isOpen, onClose, title, width, side = "right", scrim = "subtle
 	}), document.body);
 };
 //#endregion
-export { ACCENT_PRESETS, AppDialog, AppDropdown, AppToolbar, Avatar, Badge, Button, Card, Chip, CollapsibleSection, ConfirmDialog, ContextMenu, DatePicker, DateRangePicker, DensityContext, DensityProvider, Drawer, EN_UI_STRINGS, ES_UI_STRINGS, EmptyState, FormField, IconButton, Popover, SelectField, SettingsPanel, Skeleton, StatCard, TextAreaField, TextField, ThemeContext, ThemeProvider, ThemeSwitcher, Toggle, UiStringsProvider, getAvatarHue, getAvatarInitials, useAccentColor, useDensity, useFloatingPanel, useTheme, useUiStrings };
+//#region packages/ui/Timeline.tsx
+const TimelineVariantContext = createContext("stepper");
+function useTimelineVariant() {
+	return useContext(TimelineVariantContext);
+}
+function TimelineMarker({ status, variant }) {
+	if (variant === "log") return /* @__PURE__ */ jsx("span", {
+		className: "nb-timeline__marker nb-timeline__marker--dot",
+		"aria-hidden": "true"
+	});
+	if (status === "complete") return /* @__PURE__ */ jsx("span", {
+		className: "nb-timeline__marker nb-timeline__marker--complete",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("i", { className: "ph ph-check" })
+	});
+	if (status === "current") return /* @__PURE__ */ jsx("span", {
+		className: "nb-timeline__marker nb-timeline__marker--current",
+		"aria-hidden": "true"
+	});
+	if (status === "error") return /* @__PURE__ */ jsx("span", {
+		className: "nb-timeline__marker nb-timeline__marker--error",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("i", { className: "ph ph-x" })
+	});
+	return /* @__PURE__ */ jsx("span", {
+		className: "nb-timeline__marker nb-timeline__marker--pending",
+		"aria-hidden": "true"
+	});
+}
+function TimelineItem({ status, title, timestamp, dateTime, tone = "default", children, className }) {
+	const variant = useTimelineVariant();
+	return /* @__PURE__ */ jsxs("li", {
+		className: [
+			"nb-timeline__item",
+			`nb-timeline__item--${status}`,
+			variant === "log" && `nb-timeline__item--tone-${tone}`,
+			className
+		].filter(Boolean).join(" "),
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "nb-timeline__marker-col",
+			children: /* @__PURE__ */ jsx(TimelineMarker, {
+				status,
+				variant
+			})
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "nb-timeline__content",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "nb-timeline__heading",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "nb-timeline__label",
+					children: title
+				}), timestamp != null && timestamp !== "" && /* @__PURE__ */ jsx("time", {
+					className: "nb-timeline__timestamp",
+					dateTime,
+					children: timestamp
+				})]
+			}), children]
+		})]
+	});
+}
+function Timeline({ variant = "stepper", title, description, children, className, "aria-label": ariaLabel }) {
+	const panelClasses = [
+		"nb-timeline-panel",
+		(title != null || description != null) && "nb-timeline-panel--card",
+		className
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(TimelineVariantContext.Provider, {
+		value: variant,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: panelClasses,
+			children: [(title != null || description != null) && /* @__PURE__ */ jsxs("header", {
+				className: "nb-timeline-panel__header",
+				children: [title != null && /* @__PURE__ */ jsx("h3", {
+					className: "nb-timeline-panel__title",
+					children: title
+				}), description != null && /* @__PURE__ */ jsx("p", {
+					className: "nb-timeline-panel__description",
+					children: description
+				})]
+			}), /* @__PURE__ */ jsx("ol", {
+				className: `nb-timeline nb-timeline--${variant}`,
+				role: "list",
+				"aria-label": ariaLabel,
+				children
+			})]
+		})
+	});
+}
+//#endregion
+export { ACCENT_PRESETS, AppDialog, AppDropdown, AppToolbar, Avatar, Badge, Button, Card, Chip, CollapsibleSection, ConfirmDialog, ContextMenu, DatePicker, DateRangePicker, DensityContext, DensityProvider, Drawer, EN_UI_STRINGS, ES_UI_STRINGS, EmptyState, FormField, IconButton, Popover, SelectField, SettingsPanel, Skeleton, StatCard, TextAreaField, TextField, ThemeContext, ThemeProvider, ThemeSwitcher, Timeline, TimelineItem, Toggle, UiStringsProvider, getAvatarHue, getAvatarInitials, useAccentColor, useDensity, useFloatingPanel, useTheme, useUiStrings };

package/dist/style.css

@@ -2667,3 +2667,209 @@ html[data-density=compact] .nb-drawer__footer {
     width: 100vw !important;
   }
 }
+.nb-timeline-panel {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+  min-width: 0;
+}
+
+.nb-timeline-panel--card {
+  background: var(--surface-1);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-sm);
+  padding: var(--space-5);
+}
+
+.nb-timeline-panel__header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+}
+
+.nb-timeline-panel__title {
+  color: var(--text-primary);
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--line-height-tight);
+  margin: 0;
+}
+
+.nb-timeline-panel__description {
+  color: var(--text-secondary);
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-normal);
+  margin: 0;
+}
+
+.nb-timeline {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.nb-timeline__item {
+  display: grid;
+  gap: var(--space-3);
+  grid-template-columns: 24px 1fr;
+  padding-bottom: var(--space-4);
+  position: relative;
+}
+.nb-timeline__item:last-child {
+  padding-bottom: 0;
+}
+.nb-timeline__item:not(:last-child)::before {
+  background: var(--border-color);
+  bottom: 0;
+  content: "";
+  left: 11px;
+  position: absolute;
+  top: 24px;
+  width: 2px;
+}
+.nb-timeline__item--complete:not(:last-child)::before {
+  background: var(--accent-color);
+}
+.nb-timeline__item--current:not(:last-child)::before {
+  background: var(--border-color);
+}
+.nb-timeline__item--pending .nb-timeline__label {
+  color: var(--text-tertiary);
+}
+
+.nb-timeline--log .nb-timeline__item {
+  gap: var(--space-2);
+  grid-template-columns: 16px 1fr;
+  padding: var(--space-3) 0;
+}
+.nb-timeline--log .nb-timeline__item:not(:last-child) {
+  border-bottom: 1px solid var(--border-color);
+  padding-bottom: var(--space-3);
+}
+.nb-timeline--log .nb-timeline__item:not(:last-child)::before {
+  left: 7px;
+  top: 18px;
+}
+.nb-timeline--log .nb-timeline__item:last-child {
+  padding-bottom: 0;
+}
+
+.nb-timeline__marker-col {
+  align-items: flex-start;
+  display: flex;
+  justify-content: center;
+  padding-top: 2px;
+  position: relative;
+  z-index: 1;
+}
+
+.nb-timeline__marker {
+  align-items: center;
+  border-radius: 50%;
+  display: inline-flex;
+  flex: 0 0 auto;
+  justify-content: center;
+}
+
+.nb-timeline__marker--complete {
+  background: var(--accent-color);
+  color: var(--surface-1);
+  font-size: 11px;
+  height: 20px;
+  width: 20px;
+}
+
+.nb-timeline__marker--current {
+  background: var(--surface-1);
+  border: 2px solid var(--accent-color);
+  height: 20px;
+  position: relative;
+  width: 20px;
+}
+.nb-timeline__marker--current::after {
+  background: var(--accent-color);
+  border-radius: 50%;
+  content: "";
+  height: 8px;
+  left: 50%;
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 8px;
+}
+
+.nb-timeline__marker--pending {
+  background: var(--surface-1);
+  border: 2px solid var(--border-color);
+  height: 20px;
+  width: 20px;
+}
+
+.nb-timeline__marker--error {
+  background: var(--danger-color);
+  color: var(--surface-1);
+  font-size: 11px;
+  height: 20px;
+  width: 20px;
+}
+
+.nb-timeline__marker--dot {
+  background: var(--surface-2);
+  border: 2px solid var(--accent-color);
+  height: 12px;
+  width: 12px;
+}
+
+.nb-timeline__item--tone-success .nb-timeline__marker--dot {
+  border-color: var(--success-color);
+}
+
+.nb-timeline__item--tone-info .nb-timeline__marker--dot {
+  border-color: var(--info-color, var(--accent-color));
+}
+
+.nb-timeline__item--tone-danger .nb-timeline__marker--dot {
+  border-color: var(--danger-color);
+}
+
+.nb-timeline__item--tone-warning .nb-timeline__marker--dot {
+  border-color: var(--warning-color);
+}
+
+.nb-timeline__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  min-width: 0;
+}
+
+.nb-timeline__heading {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+}
+
+.nb-timeline--log .nb-timeline__heading {
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+.nb-timeline__label {
+  color: var(--text-primary);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--line-height-tight);
+}
+
+.nb-timeline__timestamp {
+  color: var(--text-secondary);
+  font-size: var(--font-size-xs);
+  font-variant-numeric: tabular-nums;
+  line-height: var(--line-height-normal);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nubitio/ui",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "type": "module",
   "description": "Visual primitives and theme system for the Nubit admin stack (dialogs, cards, toolbar, light/dark theme).",
   "license": "MIT",