TypeScript

import { Button, type ButtonProps } from 'ferry-ui'
import { Download } from 'lucide-react'

// Each prop of Button, but this component sets the icon and the text.
type ExportButtonProps = Omit<ButtonProps, 'icon' | 'children'> & {
  format: 'CSV' | 'PDF'
}

function ExportButton({ format, ...props }: ExportButtonProps) {
  return (
    <Button icon={<Download />} {...props}>
      Export {format}
    </Button>
  )
}

export default function PropTypes() {
  return (
    <>
      <ExportButton format="CSV" />
      <ExportButton format="PDF" variant="outline" />
    </>
  )
}

import type { ComponentProps } from 'react'
import { Checkbox, Label } from 'ferry-ui'

// Checkbox exports no prop type: read the props from the component.
type OptionProps = ComponentProps<typeof Checkbox> & {
  label: string
}

function Option({ label, ...props }: OptionProps) {
  return (
    <Label>
      <Checkbox {...props} />
      {label}
    </Label>
  )
}

export default function ComponentPropsType() {
  return (
    <div className="flex flex-col gap-3">
      <Option label="Send me the weekly digest" defaultChecked />
      <Option label="Send me each invoice" />
    </div>
  )
}

import { StatusBadge, type StatusTone } from 'ferry-ui'

type InvoiceStatus = 'paid' | 'open' | 'overdue'

// TypeScript refuses a tone that ferry-ui does not have, and a status with no entry.
const INVOICE_STATUS: Record<InvoiceStatus, { tone: StatusTone; label: string }> = {
  paid: { tone: 'success', label: 'Paid' },
  open: { tone: 'info', label: 'Open' },
  overdue: { tone: 'destructive', label: 'Overdue' },
}

const STATUSES: InvoiceStatus[] = ['paid', 'open', 'overdue']

export default function StatusMap() {
  return (
    <>
      {STATUSES.map((status) => (
        <StatusBadge key={status} {...INVOICE_STATUS[status]} />
      ))}
    </>
  )
}

import * as React from 'react'
import { RadioCardGroup, type RadioCardOption } from 'ferry-ui'
import { Globe, Lock } from 'lucide-react'

type Visibility = 'private' | 'public'

const OPTIONS: RadioCardOption<Visibility>[] = [
  { value: 'private', label: 'Private', description: 'Only invited members can open it.', icon: <Lock /> },
  { value: 'public', label: 'Public', description: 'Anyone with the link can view it.', icon: <Globe /> },
]

export default function GenericValue() {
  // `onValueChange` gives a `Visibility`, not a `string`.
  const [visibility, setVisibility] = React.useState<Visibility>('private')

  return (
    <RadioCardGroup
      aria-label="Visibility"
      className="w-full max-w-lg"
      columns={2}
      options={OPTIONS}
      value={visibility}
      onValueChange={setVisibility}
    />
  )
}

import { buttonVariants, type ButtonProps } from 'ferry-ui'

// The options of the helper have the same types as the props of Button.
type RepositoryLinkProps = Pick<ButtonProps, 'variant' | 'size'>

function RepositoryLink({ variant, size }: RepositoryLinkProps) {
  return (
    <a
      className={buttonVariants({ variant, size })}
      href="https://github.com/Carter2307/ferry-ui"
      target="_blank"
      rel="noreferrer"
    >
      Open the repository
    </a>
  )
}

export default function VariantHelper() {
  return (
    <>
      <RepositoryLink />
      <RepositoryLink variant="outline" size="md" />
    </>
  )
}