Kit

import { Button } from '@/components/ui/Button/Button'

export function KitButtonDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button className="btn-primary" onClick={() => {}}>
        Save changes
      </Button>
      <Button className="btn-primary" loading onClick={() => {}}>
        Saving
      </Button>
      <Button className="btn-ghost btn-sm" disabled onClick={() => {}}>
        Unavailable
      </Button>
      <Button to="/about" className="btn-secondary">
        A link, same button
      </Button>
    </div>
  )
}

import { Card } from '@/components/ui/Card/Card'

export function KitCardDemo() {
  return (
    <div className="flex flex-col gap-4">
      <Card title="Entitlement">
        <p className="text-base-content/70 text-sm">
          The card surface, its body padding, and the size of that heading, all
          decided once.
        </p>
      </Card>

      <Card className="border-primary">
        <p className="text-sm">No title, and a border colour the caller chose.</p>
      </Card>
    </div>
  )
}

import { Input } from '@/components/ui/Input/Input'

export function KitInputDemo() {
  return (
    <div className="flex max-w-sm flex-col gap-3">
      <Input
        aria-label="Search"
        type="search"
        placeholder="Clerk id, or part of an email"
      />
    </div>
  )
}

import { Field } from '@/components/ui/Field/Field'
import { Input } from '@/components/ui/Input/Input'

export function KitFieldDemo() {
  return (
    <div className="flex max-w-sm flex-col gap-5">
      <Field label="Channel name" hint="How this account shows in your post list.">
        <Input name="channelName" defaultValue="My YouTube" autoComplete="off" />
      </Field>

      <Field
        label="Channel name"
        hint="How this account shows in your post list."
        error="You already have a channel with that name."
      >
        <Input name="channelName" defaultValue="My YouTube" autoComplete="off" />
      </Field>
    </div>
  )
}

import { useState } from 'react'
import { Field } from '@/components/ui/Field/Field'
import { Select } from '@/components/ui/Select/Select'

const ENVIRONMENTS = [
  { value: 'sandbox', label: 'Sandbox' },
  { value: 'staging', label: 'Staging' },
  { value: 'live', label: 'Live' },
] as const

const PLANS = [
  { value: 'pro', label: 'Pro' },
  { value: 'retired', label: 'Retired offer' },
] as const

type Environment = (typeof ENVIRONMENTS)[number]['value']
type Plan = (typeof PLANS)[number]['value']

export function KitSelectDemo() {
  const [environment, setEnvironment] = useState<Environment | null>('sandbox')
  const [plan, setPlan] = useState<Plan | null>('retired')

  return (
    <div className="flex max-w-sm flex-col gap-5">
      <Field
        label="Environment"
        hint="Arrow keys to move, Enter or Space to choose, Escape to close."
      >
        <Select
          options={ENVIRONMENTS}
          value={environment}
          onValueChange={setEnvironment}
          placeholder="Choose an environment"
          statusText={(count) => `${count} environments`}
        />
      </Field>

      <Field
        label="Plan"
        error={plan === 'retired' ? 'That plan is no longer sold.' : undefined}
      >
        <Select
          options={PLANS}
          value={plan}
          onValueChange={setPlan}
          placeholder="Choose a plan"
          statusText={(count) => `${count} plans`}
        />
      </Field>
    </div>
  )
}

import { useState } from 'react'
import { Field } from '@/components/ui/Field/Field'
import { MultiSelect } from '@/components/ui/MultiSelect/MultiSelect'

const COLUMNS = [
  { value: 'name', label: 'Name' },
  { value: 'email', label: 'Email' },
  { value: 'plan', label: 'Plan' },
  { value: 'status', label: 'Status' },
  { value: 'joined', label: 'Joined' },
  { value: 'last-seen', label: 'Last seen' },
] as const

type Column = (typeof COLUMNS)[number]['value']

export function KitMultiSelectDemo() {
  const [columns, setColumns] = useState<readonly Column[]>(['name', 'plan'])

  return (
    <div className="flex max-w-sm flex-col gap-4">
      <Field
        label="Visible columns"
        hint="Enter or Space toggles a row, and the list stays open."
      >
        <MultiSelect
          options={COLUMNS}
          values={columns}
          onValuesChange={setColumns}
          placeholder="Choose columns"
          statusText={(count) => `${count} columns`}
        />
      </Field>

      <p className="text-base-content/60 text-sm">
        Chosen: {columns.length === 0 ? 'nothing yet' : columns.join(', ')}
      </p>
    </div>
  )
}

import { useState } from 'react'
import { Field } from '@/components/ui/Field/Field'
import { SearchSelect } from '@/components/ui/SearchSelect/SearchSelect'

const COUNTRIES = [
  { value: 'au', label: 'Australia' },
  { value: 'at', label: 'Austria' },
  { value: 'be', label: 'Belgium' },
  { value: 'br', label: 'Brazil' },
  { value: 'ca', label: 'Canada' },
  { value: 'dk', label: 'Denmark' },
  { value: 'fi', label: 'Finland' },
  { value: 'fr', label: 'France' },
  { value: 'de', label: 'Germany' },
  { value: 'ie', label: 'Ireland' },
  { value: 'it', label: 'Italy' },
  { value: 'jp', label: 'Japan' },
  { value: 'nl', label: 'Netherlands' },
  { value: 'nz', label: 'New Zealand' },
  { value: 'no', label: 'Norway' },
  { value: 'pl', label: 'Poland' },
  { value: 'pt', label: 'Portugal' },
  { value: 'es', label: 'Spain' },
  { value: 'se', label: 'Sweden' },
  { value: 'ch', label: 'Switzerland' },
  { value: 'gb', label: 'United Kingdom' },
  { value: 'us', label: 'United States' },
] as const

type Country = (typeof COUNTRIES)[number]['value']

export function KitSearchSelectDemo() {
  const [country, setCountry] = useState<Country | null>('dk')

  return (
    <div className="flex max-w-sm flex-col gap-4">
      <Field
        label="Billing country"
        hint="Type to filter, arrow keys to move, Enter to choose, Escape to close."
      >
        <SearchSelect
          options={COUNTRIES}
          value={country}
          onValueChange={setCountry}
          placeholder="Search countries"
          emptyText="No country matches that."
          loadingText="Loading countries"
          clearLabel="Clear the chosen country"
          statusText={(count) =>
            count === 1 ? '1 country matches' : `${count} countries match`
          }
        />
      </Field>

      <p className="text-base-content/60 text-sm">
        Chosen: {country === null ? 'nothing yet' : country.toUpperCase()}
      </p>
    </div>
  )
}

import { useState } from 'react'
import { Field } from '@/components/ui/Field/Field'
import { MultiSearchSelect } from '@/components/ui/MultiSearchSelect/MultiSearchSelect'

const EVENTS = [
  { value: 'purchase.completed', label: 'Purchase completed' },
  { value: 'purchase.refunded', label: 'Purchase refunded' },
  { value: 'subscription.started', label: 'Subscription started' },
  { value: 'subscription.renewed', label: 'Subscription renewed' },
  { value: 'subscription.past_due', label: 'Subscription past due' },
  { value: 'subscription.cancelled', label: 'Subscription cancelled' },
  { value: 'entitlement.granted', label: 'Entitlement granted' },
  { value: 'entitlement.revoked', label: 'Entitlement revoked' },
  { value: 'publication.scheduled', label: 'Publication scheduled' },
  { value: 'publication.published', label: 'Publication published' },
  { value: 'publication.failed', label: 'Publication failed' },
  { value: 'channel.connected', label: 'Channel connected' },
  { value: 'user.signed_up', label: 'User signed up' },
  { value: 'user.promoted', label: 'User promoted to admin' },
] as const

type EventName = (typeof EVENTS)[number]['value']

export function KitMultiSearchSelectDemo() {
  const [events, setEvents] = useState<readonly EventName[]>([
    'purchase.refunded',
    'publication.failed',
  ])

  return (
    <div className="flex max-w-md flex-col gap-4">
      <Field
        label="Email me about"
        hint="Backspace on an empty field removes the last chip."
      >
        <MultiSearchSelect
          options={EVENTS}
          values={events}
          onValuesChange={setEvents}
          placeholder="Search events"
          emptyText="No event matches that."
          loadingText="Loading events"
          removeLabel={(option) => `Stop emailing me about ${option.label}`}
          statusText={(count) =>
            count === 1 ? '1 event matches' : `${count} events match`
          }
        />
      </Field>

      <p className="text-base-content/60 text-sm">
        Chosen: {events.length === 0 ? 'nothing yet' : events.join(', ')}
      </p>
    </div>
  )
}

import { useState } from 'react'
import { Button } from '@/components/ui/Button/Button'
import { Modal } from '@/components/ui/Modal/Modal'

export function KitModalDemo() {
  const [open, setOpen] = useState(false)

  return (
    <>
      <Button className="btn-primary" onClick={() => setOpen(true)}>
        Revoke access
      </Button>

      <Modal
        open={open}
        onClose={() => setOpen(false)}
        title="Revoke access"
        closeLabel="Close"
      >
        <p className="text-base-content/70 text-sm">
          Tab around: focus stays inside this dialog. Press Escape, click outside, or
          use the close button, and focus returns to the button that opened it.
        </p>

        <div className="modal-action">
          <Button className="btn-ghost" onClick={() => setOpen(false)}>
            Cancel
          </Button>
          <Button className="btn-error" onClick={() => setOpen(false)}>
            Revoke
          </Button>
        </div>
      </Modal>
    </>
  )
}

import { useState } from 'react'
import { Button } from '@/components/ui/Button/Button'
import { Drawer } from '@/components/ui/Drawer/Drawer'

export function KitDrawerDemo() {
  const [open, setOpen] = useState(false)

  return (
    <>
      <Button className="btn-primary" onClick={() => setOpen(true)}>
        Open the filters
      </Button>

      <Drawer
        open={open}
        onClose={() => setOpen(false)}
        title="Filters"
        closeLabel="Close"
      >
        <p className="text-base-content/70 text-sm">
          A full-height sheet with the same obligations as the modal: Escape closes
          it, focus is trapped while it is open, and focus returns to the button that
          opened it.
        </p>
      </Drawer>
    </>
  )
}

import { Button } from '@/components/ui/Button/Button'
import { Tooltip } from '@/components/ui/Tooltip/Tooltip'

export function KitTooltipDemo() {
  return (
    <div className="flex flex-wrap items-center gap-4">
      <Tooltip
        className="tooltip-bottom"
        tip="Copied to your clipboard. Nothing is sent anywhere."
      >
        {(props) => (
          <Button {...props} className="btn-ghost" onClick={() => {}}>
            Copy token
          </Button>
        )}
      </Tooltip>

      <Tooltip
        className="tooltip-bottom"
        tip="Escape hides this one, and leaving brings it back."
      >
        {(props) => (
          <Button {...props} className="btn-primary" onClick={() => {}}>
            Tab to me
          </Button>
        )}
      </Tooltip>
    </div>
  )
}

import { Button } from '@/components/ui/Button/Button'
import { useToast } from '@/components/ui/Toast/Toast'

export function KitToastDemo() {
  const { toast } = useToast()

  return (
    <div className="flex flex-wrap gap-3">
      <Button
        className="btn-primary"
        onClick={() =>
          toast({
            message: 'Settings saved.',
            variant: 'success',
            dismissLabel: 'Dismiss',
          })
        }
      >
        Success
      </Button>

      <Button
        onClick={() =>
          toast({
            message: 'Your trial ends in three days.',
            variant: 'warning',
            dismissLabel: 'Dismiss',
          })
        }
      >
        Warning
      </Button>

      <Button
        onClick={() =>
          toast({
            message: 'That invitation could not be sent.',
            variant: 'error',
            dismissLabel: 'Dismiss',
          })
        }
      >
        Error
      </Button>

      <Button
        onClick={() =>
          toast({
            message: 'Invitation sent.',
            dismissLabel: 'Dismiss',
            action: { label: 'Undo', onClick: () => {} },
          })
        }
      >
        With an action
      </Button>
    </div>
  )
}