Calendar

import { Calendar } from '@hanzo/ui'

export function Default() {
  const [date, setDate] = useState<Date | undefined>(new Date(2026, 8, 15))

  return (
    <YStack self="flex-start" borderWidth={1} borderColor="$borderColor" rounded="$3">
      <Calendar mode="single" selected={date} onSelect={setDate} />
    </YStack>
  )
}

export function Range() {
  const [range, setRange] = useState<CalendarRange | undefined>({
    from: new Date(2026, 8, 5),
    to: new Date(2026, 8, 12),
  })

  return <Calendar mode="range" selected={range} onSelect={setRange} />
}

export function Multiple() {
  const [dates, setDates] = useState<Date[] | undefined>([
    new Date(2026, 8, 3),
    new Date(2026, 8, 10),
  ])

  return <Calendar mode="multiple" selected={dates} onSelect={setDates} />
}

export function TwoMonths() {
  const [range, setRange] = useState<CalendarRange | undefined>({
    from: new Date(2026, 8, 28),
    to: new Date(2026, 9, 4),
  })

  return <Calendar mode="range" numberOfMonths={2} weekStartsOn={1} selected={range} onSelect={setRange} />
}

export function Disabled() {
  const [date, setDate] = useState<Date | undefined>()
  const today = new Date(2026, 8, 15)
  const min = new Date(1900, 0, 1)

  return (
    <XStack justify="center">
      <Calendar
        mode="single"
        selected={date}
        onSelect={setDate}
        disabled={(d) => d > today || d < min}
      />
    </XStack>
  )
}

Types

export type CalendarRange = { from?: Date; to?: Date }

export interface CalendarSingleProps extends CalendarSharedProps {
  mode?: 'single'
  selected?: Date
  onSelect?: (date: Date | undefined) => void
}

export interface CalendarMultipleProps extends CalendarSharedProps {
  mode: 'multiple'
  selected?: Date[]
  onSelect?: (dates: Date[] | undefined) => void
}

export interface CalendarRangeProps extends CalendarSharedProps {
  mode: 'range'
  selected?: CalendarRange
  onSelect?: (range: CalendarRange | undefined) => void
}

export type CalendarProps = CalendarSingleProps | CalendarMultipleProps | CalendarRangeProps

Exports