Composition

import { Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from 'ferry-ui'

export default function Parts() {
  return (
    <Card className="w-full max-w-sm">
      <CardHeader>
        <div>
          <CardTitle>Payment method</CardTitle>
          <CardDescription>The charge date is the first day of each month.</CardDescription>
        </div>
        <CardAction>
          <Button size="tiny">Replace</Button>
        </CardAction>
      </CardHeader>
      <CardContent className="text-sm">Card ending in 4242</CardContent>
      <CardFooter className="justify-between text-[13px] text-foreground-light">Next charge on Nov 1</CardFooter>
    </Card>
  )
}

import {
  Button,
  Dialog,
  DialogBody,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
  Kbd,
} from 'ferry-ui'

export default function AsChildTrigger() {
  return (
    <Dialog>
      {/* The trigger adds its behavior to the Button. The page gets one <button>, not two. */}
      <DialogTrigger asChild>
        <Button>Keyboard shortcuts</Button>
      </DialogTrigger>
      <DialogContent size="sm">
        <DialogHeader>
          <DialogTitle>Keyboard shortcuts</DialogTitle>
          <DialogDescription>These keys work on each page.</DialogDescription>
        </DialogHeader>
        <DialogBody>
          <p className="flex items-center justify-between text-[13px] text-foreground-light">
            Close a dialog <Kbd>Esc</Kbd>
          </p>
        </DialogBody>
        <DialogFooter>
          <DialogClose asChild>
            <Button variant="primary">Done</Button>
          </DialogClose>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}

import { Button } from 'ferry-ui'
import { ExternalLink } from 'lucide-react'

export default function AsChildLink() {
  return (
    // The Button gives its look to the link. The page gets an <a>, not a <button>.
    <Button asChild iconRight={<ExternalLink />}>
      <a href="https://github.com/Carter2307/ferry-ui" target="_blank" rel="noreferrer">
        Open the repository
      </a>
    </Button>
  )
}

import { Badge, ResourceCard, StatusLine } from 'ferry-ui'
import { FolderKanban } from 'lucide-react'

export default function Slots() {
  return (
    <ResourceCard
      as="div"
      className="w-full max-w-xs"
      name="Billing portal"
      icon={<FolderKanban />}
      subtitle="Owner: Maya Chen"
      badges={
        <Badge font="mono" shape="square">
          Pro
        </Badge>
      }
      footer={<StatusLine tone="success">The project is active</StatusLine>}
    />
  )
}

import { Tabs, TabsContent, TabsList, TabsTrigger } from 'ferry-ui'

export default function Uncontrolled() {
  return (
    // `defaultValue` gives the first tab. After that, Tabs holds the state.
    <Tabs defaultValue="overview" className="w-full max-w-md">
      <TabsList aria-label="Project sections">
        <TabsTrigger value="overview">Overview</TabsTrigger>
        <TabsTrigger value="invoices">Invoices</TabsTrigger>
        <TabsTrigger value="members">Members</TabsTrigger>
      </TabsList>
      <TabsContent value="overview" className="text-[13px] text-foreground-light">
        Billing portal has 3 open invoices and 6 members.
      </TabsContent>
      <TabsContent value="invoices" className="text-[13px] text-foreground-light">
        INV-2041, INV-2042 and INV-2043 are open.
      </TabsContent>
      <TabsContent value="members" className="text-[13px] text-foreground-light">
        Maya Chen, Sam Lee and 4 more members.
      </TabsContent>
    </Tabs>
  )
}

import * as React from 'react'
import { Button, Tabs, TabsContent, TabsList, TabsTrigger } from 'ferry-ui'

export default function Controlled() {
  // The state is in your code: you read it and you change it.
  const [tab, setTab] = React.useState('overview')

  return (
    <Tabs value={tab} onValueChange={setTab} className="w-full max-w-md">
      <TabsList aria-label="Project sections">
        <TabsTrigger value="overview">Overview</TabsTrigger>
        <TabsTrigger value="invoices">Invoices</TabsTrigger>
      </TabsList>
      <TabsContent value="overview" className="flex items-center justify-between gap-3 text-[13px] text-foreground-light">
        Billing portal has 3 open invoices.
        <Button size="tiny" onClick={() => setTab('invoices')}>
          Show the invoices
        </Button>
      </TabsContent>
      <TabsContent value="invoices" className="text-[13px] text-foreground-light">
        INV-2041, INV-2042 and INV-2043 are open.
      </TabsContent>
    </Tabs>
  )
}

import * as React from 'react'
import { Field, Textarea } from 'ferry-ui'

const LIMIT = 160

export default function DataSlot() {
  const [note, setNote] = React.useState('Send the invoice to the billing contact.')

  return (
    // Field has no class prop for its hint. The selector finds the hint by its data-slot.
    <Field
      label="Note on the invoice"
      hint={`${note.length} / ${LIMIT}`}
      className="w-full max-w-sm [&_[data-slot=field-hint]]:text-right"
    >
      <Textarea maxLength={LIMIT} value={note} onChange={(event) => setNote(event.target.value)} />
    </Field>
  )
}