Copy

import { CopyField, Field, SecretField } from 'ferry-ui'

export default function CopyHero() {
  return (
    <div className="mx-auto flex w-full max-w-md flex-col gap-5">
      <Field label="Project ID">
        <CopyField value="prj_7Hq2kLx9Vd3mN4" what="project ID" />
      </Field>
      <Field label="Secret key" hint="Keep this key on your server.">
        <SecretField value="sk_demo_4f9a2c7e1b8d3f6a" what="secret key" />
      </Field>
    </div>
  )
}

import { CopyButton } from 'ferry-ui'

const INVOICES = ['INV-2026-0142', 'INV-2026-0143']

export default function CopyButtonIcon() {
  return (
    <ul className="w-full max-w-xs divide-y rounded-lg border bg-surface-100">
      {INVOICES.map((invoice) => (
        <li key={invoice} className="flex items-center justify-between gap-3 px-4 py-2">
          <span className="font-mono text-[13px] text-foreground">{invoice}</span>
          {/* `what` gives the tooltip and the accessible name: "Copy invoice number". */}
          <CopyButton value={invoice} what="invoice number" variant="ghost" />
        </li>
      ))}
    </ul>
  )
}

import { CopyButton } from 'ferry-ui'

const INVITE_LINK = 'https://app.example.com/invite/8f2c41d9'

export default function CopyButtonLabel() {
  return (
    <>
      <CopyButton value={INVITE_LINK} label="Copy invite link" />
      <CopyButton value={INVITE_LINK} label="Copy" what="invite link" variant="ghost" />
      <CopyButton value={INVITE_LINK} label="Copy" what="invite link" size="sm" />
    </>
  )
}

import { CopyField } from 'ferry-ui'

export default function CopyFieldSizes() {
  return (
    <div className="mx-auto flex w-full max-w-md flex-col gap-3">
      <CopyField value="https://api.example.com/v2" what="API URL" aria-label="API URL, medium" />
      <CopyField value="https://api.example.com/v2" what="API URL" size="sm" aria-label="API URL, small" />
      <CopyField value="billing@example.com" what="billing email" mono={false} aria-label="Billing email" />
      <CopyField
        value="https://hooks.example.com/incoming/workspace-acme/channel-announcements/a8f3e21c9b7d4e6f"
        what="webhook URL"
        aria-label="Webhook URL"
      />
    </div>
  )
}

import { Field, SecretField } from 'ferry-ui'

export default function CopySecret() {
  return (
    <div className="mx-auto flex w-full max-w-md flex-col gap-5">
      <Field label="Secret key">
        <SecretField value="sk_demo_4f9a2c7e1b8d3f6a" what="secret key" />
      </Field>
      <Field label="Recovery code" hint="The mask shows the last four characters.">
        <SecretField value="4F7K-9QXM-2B8R-TL6P" what="recovery code" mask="••••-••••-••••-TL6P" />
      </Field>
    </div>
  )
}

import * as React from 'react'
import { Label, SecretField, Switch } from 'ferry-ui'

export default function CopySecretControlled() {
  const [shown, setShown] = React.useState(false)

  return (
    <div className="mx-auto flex w-full max-w-md flex-col gap-3">
      <div className="flex items-center gap-2">
        <Switch id="show-keys" checked={shown} onCheckedChange={setShown} />
        <Label htmlFor="show-keys">Show keys</Label>
      </div>
      <SecretField
        value="sk_demo_primary_7c1e9b4a"
        what="primary key"
        aria-label="Primary key"
        revealed={shown}
        onRevealedChange={setShown}
      />
      <SecretField
        value="sk_demo_secondary_2d8f3a6c"
        what="secondary key"
        aria-label="Secondary key"
        revealed={shown}
        onRevealedChange={setShown}
      />
    </div>
  )
}

import { CopyButton, SecretField, type CopyLabels } from 'ferry-ui'

// Module level: all the copy components of the app use this object. An entry that you leave out keeps its default.
const LABELS: Partial<CopyLabels> = {
  copy: 'Duplicate',
  copied: 'Done',
  copyWhat: (what) => `Duplicate ${what}`,
  reveal: 'Show',
  hide: 'Mask',
  revealWhat: (what) => `Show ${what ?? 'value'}`,
  hideWhat: (what) => `Mask ${what ?? 'value'}`,
}

export default function CopyLabelsDemo() {
  return (
    <div className="mx-auto flex w-full max-w-md flex-col gap-3">
      <div className="flex items-center gap-2">
        <span className="font-mono text-[13px] text-foreground">INV-2026-0142</span>
        <CopyButton value="INV-2026-0142" what="invoice number" variant="ghost" labels={LABELS} />
      </div>
      <SecretField value="sk_demo_4f9a2c7e1b8d3f6a" what="secret key" aria-label="Secret key" labels={LABELS} />
    </div>
  )
}