Mini Calendar

import { MiniCalendar } from '@hanzo/ui'

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

  return <MiniCalendar month={new Date(2026, 8, 1)} selected={date} onSelect={setDate} />
}

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

  return <MiniCalendar month={new Date(2026, 8, 1)} selected={date} onSelect={setDate} />
}

export function ControlledMonth() {
  const [month, setMonth] = useState(new Date(2026, 8, 1))
  const [date, setDate] = useState<Date | undefined>()

  return <MiniCalendar month={month} onMonthChange={setMonth} selected={date} onSelect={setDate} />
}

export function SideBySide() {
  const [a, setA] = useState<Date | undefined>(new Date(2026, 8, 3))
  const [b, setB] = useState<Date | undefined>(new Date(2026, 9, 20))

  return (
    <XStack gap="$4" flexWrap="wrap">
      <MiniCalendar month={new Date(2026, 8, 1)} selected={a} onSelect={setA} />
      <MiniCalendar month={new Date(2026, 9, 1)} selected={b} onSelect={setB} />
    </XStack>
  )
}

Types

export interface MiniCalendarProps extends Omit<YStackProps, 'onSelect'> {
  /** The picked day. */
  selected?: Date
  onSelect?: (date: Date) => void
  /** The month shown, controlled. Uncontrolled starts at today's. */
  month?: Date
  onMonthChange?: (month: Date) => void
}

Exports