@molecule/app-timeline-react 1.0.0

package/LICENSE

@@ -0,0 +1,115 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work.
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship.
+
+      "Contribution" shall mean any work of authorship, including the
+      original version of the Work and any modifications or additions
+      to that Work, that is intentionally submitted to the Licensor for
+      inclusion in the Work by the copyright owner or by an individual or
+      Legal Entity authorized to submit on behalf of the copyright owner.
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by the Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      patent license to make, have made, use, offer to sell, sell, import,
+      and otherwise transfer the Work.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file.
+
+   5. Submission of Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND.
+
+   8. Limitation of Liability. In no event and under no legal theory shall
+      any Contributor be liable to You for damages.
+
+   9. Accepting Warranty or Additional Liability.
+
+   Copyright 2026 Molecule Dev, Inc.
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/README.md

@@ -0,0 +1,221 @@
+<!--
+AUTO-GENERATED — DO NOT EDIT THIS FILE.
+Generated by `mlcl sync-docs` from the package's src/index.ts JSDoc + mlcl/registry.json.
+Edits here are overwritten on the next commit (molecule's pre-commit hook regenerates).
+To change this document, edit the module-level JSDoc in src/index.ts.
+Generated: 2026-08-04T00:41:25.308Z
+-->
+
+# @molecule/app-timeline-react
+
+> **Auto-generated, AI-first package reference** for the [molecule.dev](https://molecule.dev) ecosystem.
+> It is written to be read by coding agents as much as by people, and is generated from this
+> package's source — edit `src/index.ts` JSDoc, not this file.
+
+React chronological timeline primitives.
+
+Exports:
+
+- `<Timeline>` — vertical list of events with optional date separators.
+- `<TimelineEvent>` — one event row with rail (marker + connector) + content.
+- `<TimelineRail>` — standalone rail (marker + connector) for custom rows.
+- `<TimelineDate>` — date separator rendered between groups.
+- `TimelineEventData` type for event records.
+
+Use for activity chronologies, deal timelines, order tracking, audit logs.
+
+## Quick Start
+
+```tsx
+import { Timeline, TimelineDate } from '@molecule/app-timeline-react'
+
+;<Timeline
+  events={[
+    { id: '1', timestamp: '2 hours ago', title: 'Order placed' },
+    { id: '2', timestamp: 'Yesterday', title: 'Payment confirmed', body: 'Visa ending 4242' },
+    { id: '3', timestamp: 'Mar 12', title: 'Item shipped' },
+  ]}
+  renderDateSeparator={(event, prev) =>
+    !prev ? <TimelineDate>{event.timestamp}</TimelineDate> : null
+  }
+  emptyState={<p>No activity yet.</p>}
+/>
+```
+
+## Type
+
+`feature`
+
+## Installation
+
+```bash
+npm install @molecule/app-timeline-react @molecule/app-react @molecule/app-ui @molecule/app-ui-react react
+npm install -D @types/react
+```
+
+## API
+
+### Interfaces
+
+#### `TimelineDateProps`
+
+Props for the {@link TimelineDate} component.
+
+```typescript
+interface TimelineDateProps {
+  /** Date label ("Today", "Yesterday", "March 12, 2025"). */
+  children: ReactNode
+  /** Extra classes. */
+  className?: string
+}
+```
+
+#### `TimelineEventData`
+
+Timeline event types.
+
+```typescript
+interface TimelineEventData {
+  id: string
+  /** Marker icon / dot — defaults to a small dot. */
+  marker?: ReactNode
+  /** Display timestamp (ISO, relative, etc.). */
+  timestamp: ReactNode
+  /** Headline of the event. */
+  title: ReactNode
+  /** Optional body content. */
+  body?: ReactNode
+  /**
+   * Optional accent color hint. Currently INERT — no component consumes it,
+   * so setting it changes nothing; pass a custom `marker` node to color a row.
+   */
+  accent?: 'primary' | 'success' | 'warning' | 'error' | 'info' | 'neutral'
+}
+```
+
+#### `TimelineEventProps`
+
+Props for the {@link TimelineEvent} component.
+
+```typescript
+interface TimelineEventProps {
+  event: TimelineEventData
+  /** Whether this is the last event in the list (suppresses the connector). */
+  isLast?: boolean
+  /** Extra classes. */
+  className?: string
+}
+```
+
+#### `TimelineProps`
+
+Props for the {@link Timeline} component.
+
+```typescript
+interface TimelineProps {
+  events: TimelineEventData[]
+  /** Optional renderer for date separators between consecutive events. */
+  renderDateSeparator?: (event: TimelineEventData, prev?: TimelineEventData) => ReactNode
+  /** Rendered when there are no events. */
+  emptyState?: ReactNode
+  /** Extra classes on the outer wrapper. */
+  className?: string
+}
+```
+
+#### `TimelineRailProps`
+
+Props for the {@link TimelineRail} component.
+
+```typescript
+interface TimelineRailProps {
+  /** Marker for this row — typically a dot or icon. */
+  marker?: ReactNode
+  /** Whether to render the vertical connector below the marker. */
+  connector?: boolean
+  /** Extra classes on the outer wrapper. */
+  className?: string
+}
+```
+
+### Functions
+
+#### `Timeline(props)`
+
+Vertical chronological list of events. Each event renders with a
+marker + connector on the left (`<TimelineEvent>`). Optional date
+separators can be inserted by returning a node from `renderDateSeparator`.
+
+```typescript
+function Timeline({
+  events,
+  renderDateSeparator,
+  emptyState,
+  className,
+}: TimelineProps): ReactElement<unknown, string | JSXElementConstructor<any>>
+```
+
+- `props` — Component props (see {@link TimelineProps}).
+
+#### `TimelineDate(props)`
+
+Date separator rendered between timeline groups.
+
+```typescript
+function TimelineDate({ children, className }: TimelineDateProps): JSX.Element
+```
+
+- `props` — Component props (see {@link TimelineDateProps}).
+
+#### `TimelineEvent(props)`
+
+One row of a `<Timeline>`: [rail (marker + connector)] [timestamp / title / body].
+
+```typescript
+function TimelineEvent({ event, isLast, className }: TimelineEventProps): JSX.Element
+```
+
+- `props` — Component props (see {@link TimelineEventProps}).
+
+#### `TimelineRail(props)`
+
+Left-hand rail of a timeline row — renders the marker and an optional
+vertical connector extending downward.
+
+```typescript
+function TimelineRail({ marker, connector = true, className }: TimelineRailProps): JSX.Element
+```
+
+- `props` — Component props (see {@link TimelineRailProps}).
+
+## Injection Notes
+
+### Requirements
+
+Peer dependencies:
+
+- `@molecule/app-react` ^1.0.0
+- `@molecule/app-ui` ^1.0.0
+- `@molecule/app-ui-react` ^1.0.0
+- `react` ^18.0.0 || ^19.0.0
+
+### Runtime Dependencies
+
+- `@molecule/app-react`
+- `@molecule/app-ui`
+- `@molecule/app-ui-react`
+- `react`
+
+This is NOT the React binding for `@molecule/app-timeline` (the headless
+provider core wired via `setProvider`) — it is standalone presentational
+markup with no provider. For domain-specific rows see the sibling
+`@molecule/app-{activity,order,status,stage,day}-timeline-react` packages.
+
+`TimelineEventData.accent` is currently INERT — no component reads it, so
+setting it changes nothing; color a row by passing a custom `marker` node
+instead. `timestamp` is a display node — format/translate it before
+passing. The prop surface (documented on the exported `TimelineProps`,
+`TimelineEventProps`, `TimelineRailProps` and `TimelineDateProps`
+interfaces): Timeline(events, renderDateSeparator, emptyState, className),
+TimelineEvent(event, isLast, className), TimelineRail(marker, connector,
+className), TimelineDate(children, className).

package/dist/Timeline.d.ts

@@ -0,0 +1,20 @@
+import type { ReactElement, ReactNode } from 'react';
+import type { TimelineEventData } from './types.js';
+/** Props for the {@link Timeline} component. */
+export interface TimelineProps {
+    events: TimelineEventData[];
+    /** Optional renderer for date separators between consecutive events. */
+    renderDateSeparator?: (event: TimelineEventData, prev?: TimelineEventData) => ReactNode;
+    /** Rendered when there are no events. */
+    emptyState?: ReactNode;
+    /** Extra classes on the outer wrapper. */
+    className?: string;
+}
+/**
+ * Vertical chronological list of events. Each event renders with a
+ * marker + connector on the left (`<TimelineEvent>`). Optional date
+ * separators can be inserted by returning a node from `renderDateSeparator`.
+ * @param props - Component props (see {@link TimelineProps}).
+ */
+export declare function Timeline({ events, renderDateSeparator, emptyState, className, }: TimelineProps): ReactElement;
+//# sourceMappingURL=Timeline.d.ts.map

package/dist/Timeline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Timeline.d.ts","sourceRoot":"","sources":["../src/Timeline.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAKpD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAA;AAEnD,gDAAgD;AAChD,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE,iBAAiB,EAAE,CAAA;IAC3B,wEAAwE;IACxE,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,EAAE,IAAI,CAAC,EAAE,iBAAiB,KAAK,SAAS,CAAA;IACvF,yCAAyC;IACzC,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;;GAKG;AACH,wBAAgB,QAAQ,CAAC,EACvB,MAAM,EACN,mBAAmB,EACnB,UAAU,EACV,SAAS,GACV,EAAE,aAAa,GAAG,YAAY,CAiB9B"}

package/dist/Timeline.js

@@ -0,0 +1,19 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getClassMap } from '@molecule/app-ui';
+import { TimelineEvent } from './TimelineEvent.js';
+/**
+ * Vertical chronological list of events. Each event renders with a
+ * marker + connector on the left (`<TimelineEvent>`). Optional date
+ * separators can be inserted by returning a node from `renderDateSeparator`.
+ * @param props - Component props (see {@link TimelineProps}).
+ */
+export function Timeline({ events, renderDateSeparator, emptyState, className, }) {
+    const cm = getClassMap();
+    if (events.length === 0 && emptyState)
+        return _jsx(_Fragment, { children: emptyState });
+    return (_jsx("div", { className: cm.cn(cm.stack(0), className), children: events.map((event, i) => {
+            const prev = i > 0 ? events[i - 1] : undefined;
+            const separator = renderDateSeparator?.(event, prev);
+            return (_jsxs("div", { children: [separator, _jsx(TimelineEvent, { event: event, isLast: i === events.length - 1 })] }, event.id));
+        }) }));
+}

package/dist/TimelineDate.d.ts

@@ -0,0 +1,14 @@
+import type { JSX, ReactNode } from 'react';
+/** Props for the {@link TimelineDate} component. */
+export interface TimelineDateProps {
+    /** Date label ("Today", "Yesterday", "March 12, 2025"). */
+    children: ReactNode;
+    /** Extra classes. */
+    className?: string;
+}
+/**
+ * Date separator rendered between timeline groups.
+ * @param props - Component props (see {@link TimelineDateProps}).
+ */
+export declare function TimelineDate({ children, className }: TimelineDateProps): JSX.Element;
+//# sourceMappingURL=TimelineDate.d.ts.map

package/dist/TimelineDate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimelineDate.d.ts","sourceRoot":"","sources":["../src/TimelineDate.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAI3C,oDAAoD;AACpD,MAAM,WAAW,iBAAiB;IAChC,2DAA2D;IAC3D,QAAQ,EAAE,SAAS,CAAA;IACnB,qBAAqB;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,iBAAiB,GAAG,GAAG,CAAC,OAAO,CAepF"}

package/dist/TimelineDate.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getClassMap } from '@molecule/app-ui';
+/**
+ * Date separator rendered between timeline groups.
+ * @param props - Component props (see {@link TimelineDateProps}).
+ */
+export function TimelineDate({ children, className }) {
+    const cm = getClassMap();
+    return (_jsx("div", { className: cm.cn(cm.flex({ align: 'center', gap: 'sm' }), cm.sp('py', 2), cm.textSize('xs'), cm.fontWeight('semibold'), className), children: _jsx("span", { className: cm.flex1, children: children }) }));
+}

package/dist/TimelineEvent.d.ts

@@ -0,0 +1,16 @@
+import type { JSX } from 'react';
+import type { TimelineEventData } from './types.js';
+/** Props for the {@link TimelineEvent} component. */
+export interface TimelineEventProps {
+    event: TimelineEventData;
+    /** Whether this is the last event in the list (suppresses the connector). */
+    isLast?: boolean;
+    /** Extra classes. */
+    className?: string;
+}
+/**
+ * One row of a `<Timeline>`: [rail (marker + connector)] [timestamp / title / body].
+ * @param props - Component props (see {@link TimelineEventProps}).
+ */
+export declare function TimelineEvent({ event, isLast, className }: TimelineEventProps): JSX.Element;
+//# sourceMappingURL=TimelineEvent.d.ts.map

package/dist/TimelineEvent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimelineEvent.d.ts","sourceRoot":"","sources":["../src/TimelineEvent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAKhC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAA;AAEnD,qDAAqD;AACrD,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,iBAAiB,CAAA;IACxB,6EAA6E;IAC7E,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,qBAAqB;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,kBAAkB,GAAG,GAAG,CAAC,OAAO,CAY3F"}

package/dist/TimelineEvent.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getClassMap } from '@molecule/app-ui';
+import { TimelineRail } from './TimelineRail.js';
+/**
+ * One row of a `<Timeline>`: [rail (marker + connector)] [timestamp / title / body].
+ * @param props - Component props (see {@link TimelineEventProps}).
+ */
+export function TimelineEvent({ event, isLast, className }) {
+    const cm = getClassMap();
+    return (_jsxs("div", { className: cm.cn(cm.flex({ align: 'stretch', gap: 'sm' }), className), children: [_jsx(TimelineRail, { marker: event.marker, connector: !isLast }), _jsxs("div", { className: cm.cn(cm.flex1, cm.stack(1), cm.sp('pb', 4)), children: [_jsx("div", { className: cm.cn(cm.textSize('xs'), cm.fontWeight('medium')), children: event.timestamp }), _jsx("div", { className: cm.cn(cm.textSize('sm'), cm.fontWeight('semibold')), children: event.title }), event.body && _jsx("div", { className: cm.textSize('sm'), children: event.body })] })] }));
+}

package/dist/TimelineRail.d.ts

@@ -0,0 +1,17 @@
+import type { JSX, ReactNode } from 'react';
+/** Props for the {@link TimelineRail} component. */
+export interface TimelineRailProps {
+    /** Marker for this row — typically a dot or icon. */
+    marker?: ReactNode;
+    /** Whether to render the vertical connector below the marker. */
+    connector?: boolean;
+    /** Extra classes on the outer wrapper. */
+    className?: string;
+}
+/**
+ * Left-hand rail of a timeline row — renders the marker and an optional
+ * vertical connector extending downward.
+ * @param props - Component props (see {@link TimelineRailProps}).
+ */
+export declare function TimelineRail({ marker, connector, className, }: TimelineRailProps): JSX.Element;
+//# sourceMappingURL=TimelineRail.d.ts.map

package/dist/TimelineRail.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimelineRail.d.ts","sourceRoot":"","sources":["../src/TimelineRail.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAI3C,oDAAoD;AACpD,MAAM,WAAW,iBAAiB;IAChC,qDAAqD;IACrD,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,iEAAiE;IACjE,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EACN,SAAgB,EAChB,SAAS,GACV,EAAE,iBAAiB,GAAG,GAAG,CAAC,OAAO,CAajC"}

package/dist/TimelineRail.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getClassMap } from '@molecule/app-ui';
+/**
+ * Left-hand rail of a timeline row — renders the marker and an optional
+ * vertical connector extending downward.
+ * @param props - Component props (see {@link TimelineRailProps}).
+ */
+export function TimelineRail({ marker, connector = true, className, }) {
+    const cm = getClassMap();
+    return (_jsxs("div", { className: cm.cn(cm.flex({ direction: 'col', align: 'center' }), cm.shrink0, className), children: [_jsx("div", { children: marker ?? _jsx("span", { "aria-hidden": true, children: "\u2022" }) }), connector && (_jsx("div", { className: cm.cn(cm.w(0), cm.h('full')), style: { borderLeft: '1px solid currentColor', opacity: 0.2, minHeight: 24 } }))] }));
+}

package/dist/index.d.ts

@@ -0,0 +1,52 @@
+/**
+ * React chronological timeline primitives.
+ *
+ * Exports:
+ * - `<Timeline>` — vertical list of events with optional date separators.
+ * - `<TimelineEvent>` — one event row with rail (marker + connector) + content.
+ * - `<TimelineRail>` — standalone rail (marker + connector) for custom rows.
+ * - `<TimelineDate>` — date separator rendered between groups.
+ * - `TimelineEventData` type for event records.
+ *
+ * Use for activity chronologies, deal timelines, order tracking, audit logs.
+ *
+ * @example
+ * ```tsx
+ * import { Timeline, TimelineDate } from '@molecule/app-timeline-react'
+ *
+ * <Timeline
+ *   events={[
+ *     { id: '1', timestamp: '2 hours ago', title: 'Order placed' },
+ *     { id: '2', timestamp: 'Yesterday', title: 'Payment confirmed', body: 'Visa ending 4242' },
+ *     { id: '3', timestamp: 'Mar 12', title: 'Item shipped' },
+ *   ]}
+ *   renderDateSeparator={(event, prev) =>
+ *     !prev ? <TimelineDate>{event.timestamp}</TimelineDate> : null
+ *   }
+ *   emptyState={<p>No activity yet.</p>}
+ * />
+ * ```
+ *
+ * @remarks
+ * This is NOT the React binding for `@molecule/app-timeline` (the headless
+ * provider core wired via `setProvider`) — it is standalone presentational
+ * markup with no provider. For domain-specific rows see the sibling
+ * `@molecule/app-{activity,order,status,stage,day}-timeline-react` packages.
+ *
+ * `TimelineEventData.accent` is currently INERT — no component reads it, so
+ * setting it changes nothing; color a row by passing a custom `marker` node
+ * instead. `timestamp` is a display node — format/translate it before
+ * passing. The prop surface (documented on the exported `TimelineProps`,
+ * `TimelineEventProps`, `TimelineRailProps` and `TimelineDateProps`
+ * interfaces): Timeline(events, renderDateSeparator, emptyState, className),
+ * TimelineEvent(event, isLast, className), TimelineRail(marker, connector,
+ * className), TimelineDate(children, className).
+ *
+ * @module
+ */
+export * from './Timeline.js';
+export * from './TimelineDate.js';
+export * from './TimelineEvent.js';
+export * from './TimelineRail.js';
+export * from './types.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AAEH,cAAc,eAAe,CAAA;AAC7B,cAAc,mBAAmB,CAAA;AACjC,cAAc,oBAAoB,CAAA;AAClC,cAAc,mBAAmB,CAAA;AACjC,cAAc,YAAY,CAAA"}

package/dist/index.js

@@ -0,0 +1,51 @@
+/**
+ * React chronological timeline primitives.
+ *
+ * Exports:
+ * - `<Timeline>` — vertical list of events with optional date separators.
+ * - `<TimelineEvent>` — one event row with rail (marker + connector) + content.
+ * - `<TimelineRail>` — standalone rail (marker + connector) for custom rows.
+ * - `<TimelineDate>` — date separator rendered between groups.
+ * - `TimelineEventData` type for event records.
+ *
+ * Use for activity chronologies, deal timelines, order tracking, audit logs.
+ *
+ * @example
+ * ```tsx
+ * import { Timeline, TimelineDate } from '@molecule/app-timeline-react'
+ *
+ * <Timeline
+ *   events={[
+ *     { id: '1', timestamp: '2 hours ago', title: 'Order placed' },
+ *     { id: '2', timestamp: 'Yesterday', title: 'Payment confirmed', body: 'Visa ending 4242' },
+ *     { id: '3', timestamp: 'Mar 12', title: 'Item shipped' },
+ *   ]}
+ *   renderDateSeparator={(event, prev) =>
+ *     !prev ? <TimelineDate>{event.timestamp}</TimelineDate> : null
+ *   }
+ *   emptyState={<p>No activity yet.</p>}
+ * />
+ * ```
+ *
+ * @remarks
+ * This is NOT the React binding for `@molecule/app-timeline` (the headless
+ * provider core wired via `setProvider`) — it is standalone presentational
+ * markup with no provider. For domain-specific rows see the sibling
+ * `@molecule/app-{activity,order,status,stage,day}-timeline-react` packages.
+ *
+ * `TimelineEventData.accent` is currently INERT — no component reads it, so
+ * setting it changes nothing; color a row by passing a custom `marker` node
+ * instead. `timestamp` is a display node — format/translate it before
+ * passing. The prop surface (documented on the exported `TimelineProps`,
+ * `TimelineEventProps`, `TimelineRailProps` and `TimelineDateProps`
+ * interfaces): Timeline(events, renderDateSeparator, emptyState, className),
+ * TimelineEvent(event, isLast, className), TimelineRail(marker, connector,
+ * className), TimelineDate(children, className).
+ *
+ * @module
+ */
+export * from './Timeline.js';
+export * from './TimelineDate.js';
+export * from './TimelineEvent.js';
+export * from './TimelineRail.js';
+export * from './types.js';

package/dist/types.d.ts

@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react';
+/**
+ * Timeline event types.
+ *
+ * @module
+ */
+export interface TimelineEventData {
+    id: string;
+    /** Marker icon / dot — defaults to a small dot. */
+    marker?: ReactNode;
+    /** Display timestamp (ISO, relative, etc.). */
+    timestamp: ReactNode;
+    /** Headline of the event. */
+    title: ReactNode;
+    /** Optional body content. */
+    body?: ReactNode;
+    /**
+     * Optional accent color hint. Currently INERT — no component consumes it,
+     * so setting it changes nothing; pass a custom `marker` node to color a row.
+     */
+    accent?: 'primary' | 'success' | 'warning' | 'error' | 'info' | 'neutral';
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC;;;;GAIG;AACH,MAAM,WAAW,iBAAiB;IAChC,EAAE,EAAE,MAAM,CAAA;IACV,mDAAmD;IACnD,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,+CAA+C;IAC/C,SAAS,EAAE,SAAS,CAAA;IACpB,6BAA6B;IAC7B,KAAK,EAAE,SAAS,CAAA;IAChB,6BAA6B;IAC7B,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAA;CAC1E"}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@molecule/app-timeline-react",
+  "version": "1.0.0",
+  "description": "React chronological timeline with event rails and date markers",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsc",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "keywords": [
+    "molecule",
+    "timeline-ui",
+    "react"
+  ],
+  "license": "Apache-2.0",
+  "peerDependencies": {
+    "@molecule/app-react": "^1.0.0",
+    "@molecule/app-ui": "^1.0.0",
+    "@molecule/app-ui-react": "^1.0.0",
+    "react": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@molecule/app-react": "1.0.0",
+    "@molecule/app-ui": "1.0.0",
+    "@molecule/app-ui-react": "1.0.0",
+    "@types/node": "26.1.2",
+    "@types/react": "19.2.17",
+    "@types/react-dom": "19.2.3",
+    "react": "19.2.8",
+    "react-dom": "19.2.8",
+    "typescript": "6.0.3",
+    "vitest": "4.1.10"
+  }
+}