FeedbackGenerated from the public API
SelectionBeam
A beam that connects a selection to its destination.
@luc/ui/motionLive preview
A rail from a row to its detail; clicking the row toggles whether the packet is travelling.
Detail
<SelectionBeam from={rowRef} to={detailRef} active={active} />Usage
import { SelectionBeam } from "@luc/ui/motion";<SelectionBeam from={rowRef} to={detailRef} active={active} />API
| Export | Kind | Signature |
|---|---|---|
SelectionBeam | 10 documented props | ({ from, to, active, tone, width, speed, bow, revision, label, className, }: SelectionBeamProps) => import("@types/react").JSX.Element | null |
SelectionBeam props
Type: SelectionBeamProps
Values the compiler reads from the declaration.
| Prop | Type | Default | Notes |
|---|---|---|---|
active? | boolean | undefined | — | Whether the link is live. Inactive keeps the rail and drops the packet. |
bow? | number | undefined | — | How far the curve bulges sideways, as a fraction of the run. |
className? | string | undefined | — | |
from | RefObject<Element | null> | — | The element the selection starts from — a table row, a list item, a chip. |
label? | string | undefined | — | Accessible name. Omit it and the beam is decorative to a screen reader. |
revision? | unknown | — | Change this whenever the anchored elements move for a reason the observer cannot see. Selecting a different row is the canonical case: the refs stay the same objects, the two boxe… |
speed? | number | undefined | — | Seconds for the packet to cross the full path. |
to | RefObject<Element | null> | — | The element the selection lands on — a chart marker, a detail panel. |
tone? | "accent" | "muted" | undefined | — | `accent` for the live link, `muted` for a structural hint. |
width? | number | undefined | — | Base stroke width, in px. |
Accessibility
The accessibility contract is the one the primitive underneath the component already honours — the platform element for a control, or the ARIA pattern the component implements — and the Showcase's own pages are scanned for violations with axe.
What happens on the server, and when hydration changes it.
Family
Feedback
A press, a change, a selection — acknowledged without shouting.
Related