Clipboard

Usage

import {
  Clipboard,
  ClipboardControl,
  ClipboardIndicator,
  ClipboardInput,
  ClipboardLabel,
  ClipboardTrigger,
  ClipboardValueText,
  useClipboard,
} from "@kanzo-tech/ui";

Clipboard wraps Ark's clipboard machine: you give the root a value, and the trigger writes it to the system clipboard and enters a copied state for timeout milliseconds. The copied-vs-idle icon swap lives in ClipboardIndicator — pass copied for the confirmed icon and children for the idle one; both default to a check and a copy glyph, so the common shape is just an empty <ClipboardTrigger />.

<Clipboard value="https://amberhall.example/board/Q-1041" timeout={1200}>
  <ClipboardControl>
    <ClipboardInput readOnly />
    <ClipboardTrigger />
  </ClipboardControl>
</Clipboard>

Everything below the root reads its state through context; useClipboard (Ark's useClipboardContext) exposes copied and copy() for a bespoke trigger.

Anatomy

<Clipboard value>
  <ClipboardLabel />
  <ClipboardControl>
    <ClipboardInput />            (or ClipboardValueText — one or the other)
    <ClipboardTrigger>
      <ClipboardIndicator copied children />

ClipboardTrigger is styled as a ghost icon Button and defaults its child to a ClipboardIndicator, so a lone trigger already flips on copy.

ClipboardValueText is the read-only half of the pair: it renders the root's value as text in the same field box ClipboardInput draws, for a share link you show rather than let anyone edit.

API Reference

Clipboard

No props of its own — this is the machine's API. Extends React.ComponentProps<typeof ArkClipboard.Root>, so ref and every native div prop pass through.

ClipboardIndicator

Other parts

ClipboardTrigger is styled with buttonVariants as a ghost icon-sm button and defaults its child to a ClipboardIndicator. ClipboardInput is styled with inputVariants at size: "md". ClipboardLabel renders Ark's Clipboard.Label inside a FieldLabel; ClipboardControl takes its Ark part's props. None of the four adds a prop of its own. useClipboard re-exports Ark's useClipboardContext.