"use client"; import * as React from "react"; import { cn } from "@kineticui/core"; export type Version = { id: string; /** e.g. "Today, 14:02". */ time: string; author: string; color?: string; /** Named versions are pinned and shown bold. */ label?: string; changes?: string; current?: boolean; }; export type VersionHistoryProps = { versions: Version[]; selected?: string; onSelect?: (v: Version) => void; onRestore?: (v: Version) => void; /** Called with two version ids when the user picks two to compare. */ onCompare?: (a: string, b: string) => void; className?: string; }; /** Document history panel with named versions, restore and two-way compare. */ export function VersionHistory({ versions, selected, onSelect, onRestore, onCompare, className }: VersionHistoryProps) { const [compare, setCompare] = React.useState([]); const [onlyNamed, setOnlyNamed] = React.useState(false); const list = onlyNamed ? versions.filter((v) => v.label || v.current) : versions; return (

Version history setOnlyNamed(e.target.checked)} className="accent-[var(--kn-accent)]" /> Named only

{list.map((v) => { const isSel = selected === v.id; const inCompare = compare.includes(v.id); return (

{onCompare && !v.current ? ( ) : null} {onRestore && !v.current ? ( ) : null}

); })}

); }

Version History

Installation

Exports