components/presence

Import

Import

import * as api from "@fungi.computer/caps/components/presence";

Exports

Kind	Export	Description
Ttype alias	PresenceProps	Props accepted by Presence.
Ttype alias	CollapseProps	Props accepted by Collapse.
Ttype alias	SwapProps	Props accepted by Swap.
constconstant	Presence	Content that arrives and leaves instead of popping: it makes room, fades in while travelling the theme’s --stipe-motion-distance, and on leaving fades out and gives its room back before it unmounts. Reduced motion keeps a short fade only.
constconstant	Collapse	Content that opens and closes its own space: an inserted alert, a field error, a disclosure body. Height and opacity follow the theme’s tempo; under reduced motion the space changes at once and only the fade remains.
constconstant	Swap	One piece of content replaced by another without a hard cut: loading to loaded, “Saving…” to “Saved”. The old content fades out (blurred by the theme’s --stipe-motion-blur) as the new one arrives, and the box eases to the new size. Reduced motion keeps the crossfade and drops the travel.

PresencePropsTtype alias

Signature

type PresenceProps = object & HTMLAttributes<HTMLDivElement>;

Props accepted by Presence.

Type Declaration

Name	Type	Description
show	boolean	Whether the content is present. Leaving content stays mounted until it has left.
appear?	boolean	Animate the first mount too (for content that arrives after the page).
children	ReactNode	-

---

CollapsePropsTtype alias

Signature

type CollapseProps = object & HTMLAttributes<HTMLDivElement>;

Props accepted by Collapse.

Type Declaration

Name	Type	Description
open	boolean	Open: the content takes its height. Closed: no space, and out of the accessibility tree.
children	ReactNode	-

---

SwapPropsTtype alias

Signature

type SwapProps = object & HTMLAttributes<HTMLDivElement>;

Props accepted by Swap.

Type Declaration

Name	Type	Description
swapKey	string	Names the current content. A new key crossfades from the old content to the new.
anchor?	"start" | "end"	Which edge leaving content holds to while the box resizes; end for right-aligned actions.
children	ReactNode	-

Presenceconstconstant

Signature

const Presence: ForwardRefExoticComponent<
  object & HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>
>;

Content that arrives and leaves instead of popping: it makes room, fades in while travelling the theme’s --stipe-motion-distance, and on leaving fades out and gives its room back before it unmounts. Reduced motion keeps a short fade only.

---

Collapseconstconstant

Signature

const Collapse: ForwardRefExoticComponent<
  object & HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>
>;

Content that opens and closes its own space: an inserted alert, a field error, a disclosure body. Height and opacity follow the theme’s tempo; under reduced motion the space changes at once and only the fade remains.

---

Swapconstconstant

Signature

const Swap: ForwardRefExoticComponent<
  object & HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>
>;

One piece of content replaced by another without a hard cut: loading to loaded, “Saving…” to “Saved”. The old content fades out (blurred by the theme’s --stipe-motion-blur) as the new one arrives, and the box eases to the new size. Reduced motion keeps the crossfade and drops the travel.