BankLifecycleSpine
Four stacked dots encoding imported → categorized → posted → reconciled; green when settled, hollow when excluded.
import { BankLifecycleSpine } from "@cynco-labs/ui";Example
import { BankLifecycleSpine } from "@cynco-labs/ui";
export default function BankLifecycleSpineDemo() {
const labels = {
imported: "Imported: needs a category",
categorized: "Categorized: ready to post",
posted: "Posted to GL: ready to reconcile",
reconciled: "Reconciled",
excluded: "Excluded",
};
return (
<ul className="flex flex-col gap-2.5">
{Object.keys(labels).map((s) => (
<li key={s} className="flex items-center gap-3">
<BankLifecycleSpine status={s} />
<span className="text-[13px] text-foreground">{labels[s]}</span>
</li>
))}
</ul>
);
}Use
At the start of every feed row; its horizontal aggregate is the settled meter in the account rail.
Props
status ('imported' | 'categorized' | 'posted' | 'reconciled' | 'excluded'), className and native props (spread on the root).
Notes
Fixed 4×4px glyph, width-independent.