Component

ArrowBias

It turns three keyboard directions into a tiny binding vote. The majority direction moves every child toward that edge and locks the row there; Escape restores the undecided position.

Possible use

It could be used to let a reviewer physically bias a handoff card toward the side they intend to discuss, or to make a presenter settle a small agenda row against the edge of a slide.

Reasonable alternative

A reasonable local alternative is a flex row with one direction class and a keyboard handler. Publishing a three-arrow binding ritual is difficult to defend because a layout should not need a vote to choose its own edge.

01 / Preview

Try it yourself.

Title

Status

Owner

Date

Focus the surface and press three left or right arrows. Escape clears the vote.

Mechanism

1: Start with four ordinary fields centered in one row.
2: Focus the row and press ArrowLeft or ArrowRight.
3: After three presses, the majority direction moves the whole row and locks it there.
4: Press Escape to erase the vote and return the fields to center.

02 / Usage

Put it somewhere.

example.tsxTSX

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

export function DirectionalBrief() {
  return (
    <ArrowBias>
      <span>Title</span>
      <span>Status</span>
      <span>Owner</span>
      <span>Date</span>
    </ArrowBias>
  );
}

03 / API

Small surface area.

PropTypeDescription

childrenReactNodeThe content that drifts toward the majority arrow direction.