{"_id":"@edux-design/event-timeline","name":"@edux-design/event-timeline","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.1":{"name":"@edux-design/event-timeline","version":"0.1.1","private":false,"sideEffects":["**/*.css"],"types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"scripts":{"lint":"eslint . --max-warnings 0","build":"tsup src/index.js --format esm,cjs --dts --external react,react-dom","dev":"tsup src/index.js --watch --format esm,cjs --dts --external react,react-dom","check-types":"tsc --noEmit"},"dependencies":{"@edux-design/utils":"*"},"peerDependencies":{"react":">=18","react-dom":">=18"},"devDependencies":{"tsup":"^8.5.0","typescript":"^5.9.2"},"_id":"@edux-design/event-timeline@0.1.1","gitHead":"b12a09b834153ac40cfc62b23e6c76a0f9585f0c","description":"Event-based timeline for timestamped history, status changes, and audit-style activity streams.","_nodeVersion":"22.14.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-nJtmxwg0JI14xeWgFQzjMETu2woNy5gOA4iWJ+jbi1nPpJi+o/qK5TZ6/v9xv+IYxKCaUXbQMgG2edFf2qkMeQ==","shasum":"228d693223dd668cbb5c18d294e43c0d5f71b013","tarball":"https://registry.npmjs.org/@edux-design/event-timeline/-/event-timeline-0.1.1.tgz","fileCount":6,"unpackedSize":35551,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCICPL11/Acl6QLhELNyG65NOEce8KG/ydb7LGUwHr2hKBAiAa2FIIVySAcXHCNQWRCxwg8WfN/GodVe+Qt1Xgdu3GFQ=="}]},"_npmUser":{"name":"vjdalsanto26","email":"viraj.gunawardana@cambridge.org"},"directories":{},"maintainers":[{"name":"vjdalsanto26","email":"viraj.gunawardana@cambridge.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/event-timeline_0.1.1_1780879413843_0.6552082283467695"},"_hasShrinkwrap":false}},"time":{"created":"2026-06-08T00:43:33.659Z","0.1.1":"2026-06-08T00:43:33.985Z","modified":"2026-06-08T00:43:34.221Z"},"maintainers":[{"name":"vjdalsanto26","email":"viraj.gunawardana@cambridge.org"}],"description":"Event-based timeline for timestamped history, status changes, and audit-style activity streams.","readme":"# @edux-design/event-timeline\n\nEvent-based timeline for timestamped history, status changes, and audit-style activity streams.\n\nThe API is modeled after Zendesk Garden's Timeline compound component:\n\n- `Timeline`\n- `Timeline.Item`\n- `Timeline.OppositeContent`\n- `Timeline.Content`\n\nThis package keeps that declarative shape but uses Edux theme tokens and utility classes.\n\n## Install\n\n```bash\nnpm install @edux-design/event-timeline\n```\n\n## Usage\n\n```jsx\nimport { EventTimeline } from \"@edux-design/event-timeline\";\n\nexport function Example() {\n  return (\n    <EventTimeline>\n      <EventTimeline.Item markerTone=\"info\" markerVariant=\"outline\">\n        <EventTimeline.Content>\n          <EventTimeline.Title>Manuscript status changed</EventTimeline.Title>\n          <EventTimeline.Meta>\n            <time dateTime=\"2026-06-07T10:42:00\">Today 10:42 AM</time>\n          </EventTimeline.Meta>\n          <EventTimeline.Description>\n            The manuscript moved from internal review to editorial QA.\n          </EventTimeline.Description>\n        </EventTimeline.Content>\n      </EventTimeline.Item>\n\n      <EventTimeline.Item\n        markerTone=\"success\"\n        markerVariant=\"solid\"\n        markerClassName=\"shadow-sm\"\n        icon={<StatusDot />}\n      >\n        <EventTimeline.Content>\n          <EventTimeline.Title>Approval note added</EventTimeline.Title>\n          <EventTimeline.Meta>\n            <time dateTime=\"2026-06-06T15:18:00\">June 6, 3:18 PM</time>\n          </EventTimeline.Meta>\n          <EventTimeline.Description>\n            Sign-off was recorded with linked review notes.\n          </EventTimeline.Description>\n        </EventTimeline.Content>\n      </EventTimeline.Item>\n    </EventTimeline>\n  );\n}\n```\n\n## API\n\n### `EventTimeline`\n\nExtends `OlHTMLAttributes<HTMLOListElement>`.\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `isAlternate` | `boolean` | `false` | Alternates event content between the left and right columns on desktop layouts. |\n\n### `EventTimeline.Item`\n\nExtends `LiHTMLAttributes<HTMLLIElement>`.\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `icon` | `ReactNode` |  | Replaces the default dot with custom media such as an icon, avatar, or image. |\n| `markerTone` | `\"default\" \\| \"info\" \\| \"success\" \\| \"warning\" \\| \"danger\"` | `\"default\"` | Applies token-based colors to the marker and connecting line. |\n| `markerVariant` | `\"subtle\" \\| \"outline\" \\| \"solid\"` | `\"subtle\"` | Uses predefined token-driven marker treatments instead of ad hoc styling. |\n| `markerClassName` | `string` |  | Escape hatch for consumer-specific marker overrides after token-driven variants are applied. |\n| `markerInnerClassName` | `string` |  | Escape hatch for styling the inner dot or icon wrapper. |\n| `surfaceColor` | `string` |  | Optional last-resort background override for the marker. Prefer `markerTone` + `markerVariant` first. |\n\n### `EventTimeline.OppositeContent`\n\nExtends `HTMLAttributes<HTMLDivElement>`.\n\nUse this slot for timestamps, date labels, or supporting metadata that should sit opposite the main event card.\n\n### `EventTimeline.Content`\n\nExtends `HTMLAttributes<HTMLDivElement>`.\n\nPrimary event surface. By default it renders as plain flow content so the marker rail stays visually dominant.\n\n### `EventTimeline.Title`\n\nExtends `HTMLAttributes<HTMLDivElement>`.\n\nConvenience text wrapper for event titles.\n\n### `EventTimeline.Meta`\n\nExtends `HTMLAttributes<HTMLDivElement>`.\n\nConvenience row for secondary metadata such as actor, category, or channel.\n\n### `EventTimeline.Description`\n\nExtends `HTMLAttributes<HTMLDivElement>`.\n\nConvenience wrapper for longer event copy.\n\n## Notes\n\n- Mobile layouts collapse into a single event column while preserving the opposite timestamp content above each event card.\n- The default layout is a Zendesk-style vertical activity list: marker rail on the left, event content on the right.\n- For event timestamps, prefer semantic `<time dateTime=\"...\">...</time>` content inside `Timeline.Meta` or `Timeline.OppositeContent`.\n- For marker styling, prefer `markerTone` + `markerVariant` and use `markerClassName` only as a consumer override escape hatch.\n- `Timeline` is also exported as an alias if you want the same naming shape as Zendesk Garden inside this package.\n","readmeFilename":"README.md","_rev":"1-3fe0d1c83c33c202921ab297ff16dd6d"}