@apliteni/apliteni-ui 0.45.0 → 0.46.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apliteni/apliteni-ui",
-  "version": "0.45.0",
+  "version": "0.46.0",
   "workspaces": [
     "react"
   ],

package/react/README.md

@@ -364,3 +364,28 @@ opens, focus goes to the safe action. It renders an `alertdialog`, named by its
 and described by its body. Modal also accepts
 `initialFocusRef` for a mounted, focusable element inside its panel. Without it, Modal
 uses its normal opening focus.
+
+## Timeline
+
+`Timeline` displays a record’s events in the order provided. Pass events from oldest
+to newest, with stable IDs, machine-readable `dateTime` values, and formatted
+`timestamp` text.
+Descriptions should say what changed and to where.
+
+```tsx
+<Timeline aria-label="Record history" events={[
+  {
+    id: 'created', actor: 'Demo operator', dateTime: '2026-09-01T09:00:00Z',
+    timestamp: '1 Sep, 09:00 UTC', description: 'Created the record in Unassigned.',
+    meta: 'Batch DEMO-12',
+  },
+]} />
+```
+
+Omit `undo` for read-only events. For a reversible batch, pass
+`undo: { label: 'Undo batch DEMO-12', onUndo }`. The app checks permissions,
+asks for confirmation when the batch affects finalized records, reverses the
+entire batch, and adds a new event. Timeline only calls `onUndo`; it does not
+modify history.
+Import both the kit CSS and React CSS. The Privileged story shows confirmation
+and a reversing event.

package/react/dist/index.css

@@ -142,3 +142,69 @@
     display: block;
   }
 }
+
+/* src/Timeline.css */
+.ui-timeline {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  color: var(--text);
+  font-size: var(--text-sm);
+  line-height: 1.5;
+}
+.ui-timeline__event {
+  position: relative;
+  padding-inline-start: var(--space-6);
+  padding-block-end: var(--space-6);
+  overflow-wrap: anywhere;
+}
+.ui-timeline__event:last-child {
+  padding-block-end: 0;
+}
+.ui-timeline__event::before {
+  content: "";
+  position: absolute;
+  inset-inline-start: calc(var(--space-2) / 2);
+  inset-block-start: 0.75em;
+  inset-block-end: -0.75em;
+  width: 1px;
+  background: var(--border);
+}
+.ui-timeline__event:last-child::before {
+  display: none;
+}
+.ui-timeline__event::after {
+  content: "";
+  position: absolute;
+  inset-inline-start: 0;
+  inset-block-start: calc(0.75em - var(--space-2) / 2);
+  width: var(--space-2);
+  height: var(--space-2);
+  border-radius: 50%;
+  background: var(--accent);
+}
+.ui-timeline__head,
+.ui-timeline__meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  column-gap: var(--space-3);
+  row-gap: var(--space-1);
+}
+.ui-timeline__actor {
+  font-weight: var(--weight-semibold);
+}
+.ui-timeline__head time,
+.ui-timeline__meta {
+  font-size: var(--text-xs);
+}
+.ui-timeline__description {
+  margin: var(--space-1) 0;
+}
+.ui-timeline__undo {
+  white-space: normal;
+}
+.ui-timeline__undo:hover,
+.ui-timeline__undo:focus-visible {
+  color: var(--pink);
+}

package/react/dist/index.d.ts

@@ -489,7 +489,24 @@ type TabsProps = {
 };
 declare function Tabs({ items, value, onChange, label }: TabsProps): react.JSX.Element;
 
+type TimelineEvent = {
+    id: string;
+    actor: string;
+    dateTime: string;
+    timestamp: string;
+    description: string;
+    meta?: ReactNode;
+    undo?: {
+        label: string;
+        onUndo: () => void;
+    };
+};
+type TimelineProps = Omit<ComponentPropsWithoutRef<'ol'>, 'children' | 'reversed' | 'start'> & {
+    events: readonly TimelineEvent[];
+};
+declare function Timeline({ events, className, ...rest }: TimelineProps): react.JSX.Element;
+
 declare const PAGE_SIZES: readonly number[];
 declare const DEFAULT_PAGE_SIZE: number;
 
-export { BackLink, type BackLinkOwnProps, type BackLinkProps, Badge, BusyRegion, type BusyRegionProps, Button, type ButtonProps, Card, type Column, type CommandGroup, type CommandItem, CommandPalette, type CommandPaletteProps, Confirm, type ConfirmProps, DEFAULT_PAGE_SIZE, DataTable, type DataTableProps, DeltaValue, type DeltaValueProps, Denied, type DeniedProps, Drawer, type DrawerProps, DrawerSection, type DrawerSectionProps, Dropdown, type DropdownBadge, type DropdownEntry, type DropdownItem, type DropdownProps, type DropdownRowProps, type DropdownSearch, type DropdownSection, type DropdownSeparator, type Filter, FilterBar, type FilterBarProps, Icon, KeyValueList, type KeyValueListProps, type KeyValueRow, Modal, type ModalProps, NumericValue, type NumericValueProps, PAGE_SIZES, Pagination, type PaginationProps, RowIdentity, type RowIdentityProps, type SegmentOption, Segmented, type SegmentedProps, Skeleton, type SkeletonProps, SkeletonTable, type SkeletonTableProps, Snippet, type SnippetProps, StatBand, type StatBandProps, type StatDelta, type StatFigure, type StatTone, type StatVariant, type TabItem, type TableSort, Tabs, type TabsProps, sortTableRows };
+export { BackLink, type BackLinkOwnProps, type BackLinkProps, Badge, BusyRegion, type BusyRegionProps, Button, type ButtonProps, Card, type Column, type CommandGroup, type CommandItem, CommandPalette, type CommandPaletteProps, Confirm, type ConfirmProps, DEFAULT_PAGE_SIZE, DataTable, type DataTableProps, DeltaValue, type DeltaValueProps, Denied, type DeniedProps, Drawer, type DrawerProps, DrawerSection, type DrawerSectionProps, Dropdown, type DropdownBadge, type DropdownEntry, type DropdownItem, type DropdownProps, type DropdownRowProps, type DropdownSearch, type DropdownSection, type DropdownSeparator, type Filter, FilterBar, type FilterBarProps, Icon, KeyValueList, type KeyValueListProps, type KeyValueRow, Modal, type ModalProps, NumericValue, type NumericValueProps, PAGE_SIZES, Pagination, type PaginationProps, RowIdentity, type RowIdentityProps, type SegmentOption, Segmented, type SegmentedProps, Skeleton, type SkeletonProps, SkeletonTable, type SkeletonTableProps, Snippet, type SnippetProps, StatBand, type StatBandProps, type StatDelta, type StatFigure, type StatTone, type StatVariant, type TabItem, type TableSort, Tabs, type TabsProps, Timeline, type TimelineEvent, type TimelineProps, sortTableRows };

package/react/dist/index.js

@@ -1876,6 +1876,22 @@ function Tabs({ items, value, onChange, label }) {
   ] });
 }
 
+// src/Timeline.tsx
+import { jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
+function Timeline({ events, className, ...rest }) {
+  return /* @__PURE__ */ jsx21("ol", { ...rest, role: "list", className: ["ui-timeline", className].filter(Boolean).join(" "), children: events.map((event) => /* @__PURE__ */ jsxs17("li", { className: "ui-timeline__event", children: [
+    /* @__PURE__ */ jsxs17("div", { className: "ui-timeline__head", children: [
+      /* @__PURE__ */ jsx21("span", { className: "ui-timeline__actor", children: event.actor }),
+      /* @__PURE__ */ jsx21("time", { dateTime: event.dateTime, children: event.timestamp })
+    ] }),
+    /* @__PURE__ */ jsx21("p", { className: "ui-timeline__description", children: event.description }),
+    (event.meta != null || event.undo) && /* @__PURE__ */ jsxs17("div", { className: "ui-timeline__meta", children: [
+      event.meta != null && /* @__PURE__ */ jsx21("span", { children: event.meta }),
+      event.undo && /* @__PURE__ */ jsx21(Button, { variant: "ghost", size: "xs", className: "ui-btn ui-btn--ghost ui-btn--xs ui-timeline__undo", "aria-label": event.undo.label, onClick: event.undo.onUndo, children: "Undo" })
+    ] })
+  ] }, event.id)) });
+}
+
 // src/index.ts
 var PAGE_SIZES = KIT_PAGE_SIZES;
 var DEFAULT_PAGE_SIZE3 = KIT_DEFAULT_PAGE_SIZE;
@@ -1908,5 +1924,6 @@ export {
   Snippet,
   StatBand,
   Tabs,
+  Timeline,
   sortTableRows
 };