Styling

const PROJECTS = [
  { id: 'web', name: 'Web app', owner: 'Maya Chen', invoices: 12 },
  { id: 'billing', name: 'Billing portal', owner: 'Sam Lee', invoices: 4 },
  { id: 'docs', name: 'Help center', owner: 'Maya Chen', invoices: 0 },
]

export default function TokenClasses() {
  return (
    <ul className="w-full max-w-sm divide-y rounded-lg border bg-surface-100">
      {PROJECTS.map((project) => (
        <li key={project.id} className="flex items-center justify-between gap-3 px-4 py-3">
          <div className="min-w-0">
            <p className="truncate text-sm text-foreground">{project.name}</p>
            <p className="truncate text-[13px] text-foreground-light">Owner: {project.owner}</p>
          </div>
          <span className="tabular text-[13px] text-foreground-lighter">{project.invoices} invoices</span>
        </li>
      ))}
    </ul>
  )
}

import { Badge, Button, StatusBadge } from 'ferry-ui'

export default function LookFromProps() {
  return (
    <>
      <Button variant="primary">Save changes</Button>
      <Button variant="destructive">Delete project</Button>
      <Badge variant="outline" font="mono" shape="square">
        v2.4.1
      </Badge>
      <StatusBadge tone="success" label="Paid" />
      <StatusBadge tone="warning" label="Expires soon" />
    </>
  )
}

import { Button, Input } from 'ferry-ui'

const SIZES = [
  { size: 'tiny', height: '26px' },
  { size: 'sm', height: '30px' },
  { size: 'md', height: '34px' },
  { size: 'lg', height: '38px' },
] as const

export default function ControlSizes() {
  return (
    <div className="flex flex-col gap-3">
      {SIZES.map(({ size, height }) => (
        <div key={size} className="flex items-center gap-2">
          <span className="w-20 font-mono text-xs text-foreground-lighter">
            {size}, {height}
          </span>
          <Input size={size} aria-label={`Coupon code, size ${size}`} placeholder="Coupon code" className="w-40" />
          <Button size={size}>Apply</Button>
        </div>
      ))}
    </div>
  )
}

import { Button, Input } from 'ferry-ui'

export default function LayoutClasses() {
  return (
    <div className="flex w-full max-w-md flex-col gap-3">
      <div className="flex items-center gap-2">
        {/* `flex-1`: the field takes the space that the button leaves. */}
        <Input type="email" aria-label="Email of the member" placeholder="maya@example.com" className="flex-1" />
        <Button size="md">Invite</Button>
      </div>
      {/* `max-w-48`: a short field for a short value. */}
      <Input mono aria-label="Project slug" defaultValue="billing-portal" className="max-w-48" />
      {/* `w-full`: the button takes the full width of the column. */}
      <Button size="md" variant="primary" className="w-full">
        Create project
      </Button>
    </div>
  )
}

import { Avatar, AvatarBadge, AvatarFallback, Card, CardContent, CardFooter, CardHeader, CardTitle } from 'ferry-ui'

export default function ContainerClasses() {
  return (
    <Card className="w-full max-w-sm">
      <CardHeader>
        <CardTitle>Workspace</CardTitle>
      </CardHeader>
      <CardContent className="flex items-center gap-3">
        <Avatar className="rounded-md">
          <AvatarFallback>AC</AvatarFallback>
          <AvatarBadge className="bg-success" role="img" aria-label="Active" />
        </Avatar>
        <div className="flex min-w-0 flex-col">
          <span className="truncate text-sm text-foreground">Acme</span>
          <span className="truncate text-[13px] text-foreground-light">12 members, 3 projects</span>
        </div>
      </CardContent>
      <CardFooter className="justify-between text-[13px] text-foreground-light">
        <span>Next invoice</span>
        <span className="tabular text-foreground">Nov 1</span>
      </CardFooter>
    </Card>
  )
}

import * as React from 'react'
import { Checkbox, Label, cn } from 'ferry-ui'

const MEMBERS = [
  { id: 'maya', name: 'Maya Chen', role: 'Admin' },
  { id: 'sam', name: 'Sam Lee', role: 'Member' },
  { id: 'noor', name: 'Noor Haddad', role: 'Viewer' },
]

export default function MergeClasses() {
  const [selected, setSelected] = React.useState(['maya'])

  function toggle(id: string, checked: boolean) {
    setSelected((current) => (checked ? [...current, id] : current.filter((item) => item !== id)))
  }

  return (
    <ul className="w-full max-w-xs divide-y rounded-lg border bg-surface-100">
      {MEMBERS.map((member) => {
        const checked = selected.includes(member.id)
        return (
          <li key={member.id} className={cn('flex items-center justify-between gap-3 px-4 py-3', checked && 'bg-selection')}>
            <Label>
              <Checkbox checked={checked} onCheckedChange={(next) => toggle(member.id, next === true)} />
              {member.name}
            </Label>
            {/* The last class wins: `text-foreground` replaces `text-foreground-lighter`. */}
            <span className={cn('text-[13px] text-foreground-lighter', checked && 'text-foreground')}>{member.role}</span>
          </li>
        )
      })}
    </ul>
  )
}

const REGIONS = ['eu-west', 'eu-central', 'us-east', 'us-west', 'ap-south', 'ap-northeast', 'sa-east']

export default function Utilities() {
  return (
    <div className="grid w-full max-w-lg gap-x-8 gap-y-6 sm:grid-cols-2">
      <div className="flex flex-col gap-2">
        <code className="text-xs text-foreground-lighter">mono-label</code>
        <span className="mono-label">Monthly revenue</span>
      </div>
      <div className="flex flex-col gap-2">
        <code className="text-xs text-foreground-lighter">tabular</code>
        <div className="tabular w-24 text-right text-sm text-foreground">
          <p>1,111.10</p>
          <p>9,876.54</p>
        </div>
      </div>
      <div className="flex flex-col gap-2">
        <code className="text-xs text-foreground-lighter">bg-dot-grid</code>
        <div className="bg-dot-grid h-16 rounded-lg border" />
      </div>
      <div className="flex min-w-0 flex-col gap-2">
        <code className="text-xs text-foreground-lighter">scrollbar-none</code>
        {/* The list scrolls sideways with a trackpad, a touch screen or the arrow keys. */}
        <div
          tabIndex={0}
          role="region"
          aria-label="Regions"
          className="scrollbar-none overflow-x-auto rounded-md outline-none focus-visible:ring-2 focus-visible:ring-ring"
        >
          <ul className="flex gap-2">
            {REGIONS.map((region) => (
              <li key={region} className="shrink-0 rounded-sm border bg-surface-100 px-2 py-1 font-mono text-xs text-foreground-light">
                {region}
              </li>
            ))}
          </ul>
        </div>
      </div>
    </div>
  )
}

import { toast } from 'ferry-ui'
import { ImagePlus } from 'lucide-react'

export default function FocusRing() {
  return (
    <button
      type="button"
      onClick={() => toast('Choose an image for the logo')}
      className="flex w-full max-w-xs cursor-pointer flex-col items-center gap-2 rounded-lg border border-dashed border-border-stronger px-6 py-8 text-[13px] text-foreground-light outline-none hover:bg-surface-200 focus-visible:ring-2 focus-visible:ring-ring"
    >
      <ImagePlus className="size-5 text-foreground-lighter" aria-hidden="true" />
      Add a logo
    </button>
  )
}