Date picker

import { DatePicker } from 'topclassui/date-picker'

/** A label that points at the trigger by its id: the server prints the day in the provider's locale, and the form
 * input holds it as an ISO date. */
export default function Demo() {
  return (
    <div className="grid justify-items-start gap-1.5">
      <label htmlFor="date-picker-basic" className="text-sm text-body">Check-in</label>
      <DatePicker id="date-picker-basic" defaultValue="2026-09-22" />
    </div>
  )
}

import { Field } from 'topclassui/field'
import { DatePicker } from 'topclassui/date-picker'

/** The card's sample: the Field's control object spreads onto the DatePicker as it is, so the label names the trigger
 * and the hint describes it after the day. */
export default function Demo() {
  return (
    <Field name="checkIn" label="Check-in" hint="Rooms are ready from 15:00">
      {(control) => (
        <DatePicker
          {...control}
          defaultValue="2026-10-02"
          minDate="2026-09-25"
          maxDate="2027-03-31"
        />
      )}
    </Field>
  )
}

import { DatePicker } from 'topclassui/date-picker'

/** The card's dates: a day from 25 September 2026 to 31 March 2027. The days outside are dimmed and cannot be chosen,
 * and the previous button stops at September. */
export default function Demo() {
  return (
    <div className="grid justify-items-start gap-1.5">
      <label htmlFor="date-picker-limits" className="text-sm text-body">Check-in</label>
      <DatePicker id="date-picker-limits" name="checkIn" defaultValue="2026-10-02" minDate="2026-09-25" maxDate="2027-03-31" />
    </div>
  )
}

import { TopClassProvider } from 'topclassui/provider'
import { DatePicker } from 'topclassui/date-picker'

/** The first column: Monday, then Saturday, then left to the locale, which for British English is Monday too. */
export default function Demo() {
  return (
    <div className="grid justify-items-start gap-3">
      <DatePicker aria-label="Monday first" firstDayOfWeek={1} defaultValue="2026-09-22" />
      <DatePicker aria-label="Saturday first" firstDayOfWeek={6} defaultValue="2026-09-22" />
      <TopClassProvider direction="ltr" locale="en-GB">
        <DatePicker aria-label="The locale's first day" defaultValue="2026-09-22" />
      </TopClassProvider>
    </div>
  )
}

import { Button } from 'topclassui/button'
import { DatePicker } from 'topclassui/date-picker'

/** The DatePicker carries the name and the default. It sends checkIn=2026-10-02, before any script runs and after. */
export default function Demo() {
  return (
    <form className="grid justify-items-start gap-3">
      <label htmlFor="date-picker-form" className="text-sm text-body">Check-in</label>
      <DatePicker id="date-picker-form" name="checkIn" defaultValue="2026-10-02" required />
      <Button type="submit">Save</Button>
    </form>
  )
}

import { DatePicker } from 'topclassui/date-picker'

const SIZES = [
  { size: 'xs', label: 'Extra small' },
  { size: 'sm', label: 'Small' },
  { size: 'md', label: 'Medium' },
  { size: 'lg', label: 'Large' },
  { size: 'xl', label: 'Extra large' },
] as const

/** The five sizes of the trigger: the height, the padding and the type step change, and the width follows the type step. */
export default function Demo() {
  return (
    <div className="grid justify-items-start gap-3">
      {SIZES.map(({ size, label }) => (
        <DatePicker key={size} aria-label={label} size={size} defaultValue="2026-09-22" />
      ))}
    </div>
  )
}

import { TopClassProvider } from 'topclassui/provider'
import { DatePicker } from 'topclassui/date-picker'

/** Arabic, inside TopClassProvider as the root layout would mount it: Arabic month names, the week from Saturday,
 * the icon at the right, the calendar lined up with the right edge of the trigger, and ArrowLeft the next day. */
export default function Demo() {
  return (
    <TopClassProvider direction="rtl" locale="ar">
      <div dir="rtl" lang="ar" className="grid justify-items-start gap-1.5">
        <label htmlFor="date-picker-rtl" className="text-sm text-body">تاريخ الوصول</label>
        <DatePicker id="date-picker-rtl" name="checkIn" defaultValue="2026-09-22" />
      </div>
    </TopClassProvider>
  )
}