Component

DocketSequence

It turns a tiny piece of content into a three-action filing ceremony. Open the docket, type exactly one character as evidence, then file; each ordered step moves the real child through visible stations and an out-of-order step is unavailable.

Possible use

It could be used to make a reviewer open a handoff item, add a one-character evidence mark and file it in a strict order, or to force an agenda label through a miniature approval ritual.

Reasonable alternative

A reasonable local alternative is one button and a local boolean. Publishing a docket sequence is difficult to defend because a trivial filing does not need a key, a gate and three stations.

01 / Preview

Try it yourself.

01Open

02Initial

03File

04Filed

Approve

One-character evidence

Mechanism

1: Click Open docket. The other steps remain unavailable.
2: Type exactly one character into the newly permitted evidence field.
3: Click File with evidence in that order; the content travels to Filed.
4: Clear the docket to repeat the whole ceremony.

02 / Usage

Put it somewhere.

example.tsxTSX

import { DocketSequence } from "gra-ui";
import "gra-ui/styles.css";

export function FiledApproval() {
  return <DocketSequence><span>Approve</span></DocketSequence>;
}

03 / API

Small surface area.

PropTypeDescription

childrenReactNodeThe content moved through the docket stations when the sequence is completed.