@apliteni/apliteni-ui 0.44.0 → 0.46.0

package/package.json

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

package/react/README.md

@@ -28,7 +28,7 @@ import '@apliteni/apliteni-ui/react/css';  // React components' shell styles (mo
 import { DataTable, Modal, Button } from '@apliteni/apliteni-ui/react';
 ```
 
-Components: `DataTable`, `Pagination`, `StatBand`, `Modal`, `Drawer`, `CommandPalette`, `Dropdown`, `BackLink`, `Snippet`, `Tabs`, `Button`, `Badge`, `Card`, `Icon`.
+Components: `DataTable`, `Pagination`, `StatBand`, `Modal`, `Confirm`, `Drawer`, `CommandPalette`, `Dropdown`, `BackLink`, `Snippet`, `Tabs`, `Button`, `Badge`, `Card`, `Icon`.
 
 `Snippet` accepts `label`, `code`, `reveal`, and `copyLabel` props. It treats `code`
 as plain text and copies it exactly as provided. After a successful clipboard write,
@@ -338,3 +338,54 @@ import '@apliteni/apliteni-ui/react/css';
 Tabs is controlled through `value` and `onChange`. Pass items with unique values, labels, optional counts, and React panel content. Provide a label for the tablist and a value that matches one item. Inactive panel content is unmounted.
 
 Arrow keys move between tabs and wrap from the last tab to the first. They also activate the selected tab. Home and End select the first and last tabs. Tab moves to the selected panel. New panels use the kit’s fade animation, which is shortened when reduced motion is enabled.
+
+## Confirm
+
+Use `Confirm` before an action that has a cost. Put the object name in `title`. In
+`body`, explain what will change and whether the change can be reversed. Give both
+buttons clear, specific labels. For an undoable action, use a toast with Undo instead.
+
+```tsx
+<Confirm open={open} title="Revoke demo token?"
+  body="This token will stop working immediately. You cannot restore it."
+  confirmLabel="Revoke token" cancelLabel="Keep the token" danger busy={saving}
+  onConfirm={revokeToken} onCancel={() => setOpen(false)} />
+```
+
+The consumer controls `open` and `busy`. `Confirm` does not wait for `onConfirm` or
+close itself. Set `busy` while saving. This keeps focus, prevents repeated presses, and
+announces progress. Without `danger`, the committing button uses the primary tone.
+
+Escape, the scrim, the close button, and the safe action call `onCancel`, even while
+busy. Closing the dialog does not cancel a write that has already started.
+
+`Confirm` uses Modal's focus trap, focus return, and reduced-motion transitions. When it
+opens, focus goes to the safe action. It renders an `alertdialog`, named by its title
+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

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ReactNode, ButtonHTMLAttributes, MouseEvent, ElementType, ComponentPropsWithoutRef } from 'react';
+import { ReactNode, ButtonHTMLAttributes, RefObject, MouseEvent, ElementType, ComponentPropsWithoutRef } from 'react';
 
 declare function Icon({ name }: {
     name: string;
@@ -16,7 +16,17 @@ type ButtonProps = {
     busy?: boolean;
     children?: ReactNode;
 } & ButtonHTMLAttributes<HTMLButtonElement>;
-declare function Button({ variant, size, icon, iconRight, iconOnly, block, busy, children, type, disabled, onClick, onClickCapture, onKeyDown, onKeyDownCapture, onKeyUp, onKeyUpCapture, ...rest }: ButtonProps): react.JSX.Element;
+declare const Button: react.ForwardRefExoticComponent<{
+    variant?: "primary" | "secondary" | "ghost" | "danger";
+    size?: "xs" | "sm" | "md" | "lg";
+    icon?: string;
+    iconRight?: string;
+    iconOnly?: boolean;
+    block?: boolean;
+    /** In flight: keeps focus, blocks activation, announces progress, and shows dots. */
+    busy?: boolean;
+    children?: ReactNode;
+} & ButtonHTMLAttributes<HTMLButtonElement> & react.RefAttributes<HTMLButtonElement>>;
 
 declare function Badge({ variant, children }: {
     variant?: string;
@@ -55,14 +65,29 @@ interface StatBandProps {
 }
 declare function StatBand({ stats, variant, basis, label, id }: StatBandProps): react.JSX.Element;
 
+type ConfirmProps = {
+    open: boolean;
+    title: string;
+    body: ReactNode;
+    confirmLabel: string;
+    cancelLabel: string;
+    danger?: boolean;
+    busy?: boolean;
+    onConfirm: () => void;
+    onCancel: () => void;
+};
+declare function Confirm({ open, title, body, confirmLabel, cancelLabel, danger, busy, onConfirm, onCancel, }: ConfirmProps): react.JSX.Element;
+
 type ModalProps = {
     open: boolean;
     title: string;
     onClose: () => void;
     footer?: ReactNode;
     children?: ReactNode;
+    role?: 'dialog' | 'alertdialog';
+    initialFocusRef?: RefObject<HTMLElement | null>;
 };
-declare function Modal({ open, title, onClose, footer, children }: ModalProps): react.ReactPortal | null;
+declare function Modal({ open, title, onClose, footer, children, initialFocusRef, role }: ModalProps): react.ReactPortal | null;
 
 type DrawerProps = {
     open: boolean;
@@ -464,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, 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 };