banhaten 0.1.0 → 0.1.2

package/registry/components/date-picker-state.ts

@@ -0,0 +1,253 @@
+export type DatePickerDirection = "ltr" | "rtl" | "auto"
+export type CalendarView = "days" | "month-year"
+export type CalendarMode = "single" | "range"
+export type RangeCalendarType = "single" | "double" | "double-with-presets"
+
+export type CalendarRange = {
+  from?: Date
+  to?: Date
+}
+
+export type CalendarCell = {
+  date: Date
+  weekday: number
+}
+
+export type CalendarDayStateName =
+  | "default"
+  | "event"
+  | "outside"
+  | "range"
+  | "selected"
+
+export type CalendarDayState = {
+  hasEvent: boolean
+  inRange: boolean
+  outside: boolean
+  rangeEndpoint: boolean
+  selected: boolean
+  state: CalendarDayStateName
+}
+
+export function getCalendarCells(month: Date): CalendarCell[] {
+  const first = startOfMonth(month)
+  const start = addDays(first, -first.getDay())
+  const last = new Date(first.getFullYear(), first.getMonth() + 1, 0)
+  const end = addDays(last, 6 - last.getDay())
+  const dayCount = differenceInCalendarDays(end, start) + 1
+
+  return Array.from({ length: dayCount }, (_, index) => {
+    const date = addDays(start, index)
+    return {
+      date,
+      weekday: date.getDay(),
+    }
+  })
+}
+
+export function getCalendarDayState({
+  date,
+  displayMonth,
+  eventDates,
+  mode,
+  range,
+  selectedDate,
+}: {
+  date: Date
+  displayMonth: Date
+  eventDates?: Date[]
+  mode: CalendarMode
+  range?: CalendarRange
+  selectedDate?: Date
+}): CalendarDayState {
+  const outside = !isSameMonth(date, displayMonth)
+  const hasEvent = eventDates?.some((eventDate) => isSameDay(eventDate, date)) ?? false
+  const selected =
+    mode === "single"
+      ? Boolean(selectedDate && isSameDay(selectedDate, date))
+      : Boolean(
+          range?.from &&
+            (isSameDay(range.from, date) ||
+              (range.to && isSameDay(range.to, date)))
+        )
+  const inRange =
+    mode === "range" &&
+    Boolean(
+      range?.from &&
+        range?.to &&
+        isAfterOrSameDay(date, range.from) &&
+        isBeforeOrSameDay(date, range.to)
+    )
+  const rangeEndpoint =
+    mode === "range" &&
+    Boolean(
+      range?.from &&
+        (isSameDay(range.from, date) ||
+          (range.to && isSameDay(range.to, date)))
+    )
+  const state = selected
+    ? "selected"
+    : inRange
+      ? "range"
+      : outside
+        ? "outside"
+        : hasEvent
+          ? "event"
+          : "default"
+
+  return {
+    hasEvent,
+    inRange,
+    outside,
+    rangeEndpoint,
+    selected,
+    state,
+  }
+}
+
+export function getCalendarKeyboardTarget(date: Date, key: string) {
+  switch (key) {
+    case "ArrowLeft":
+      return addDays(date, -1)
+    case "ArrowRight":
+      return addDays(date, 1)
+    case "ArrowUp":
+      return addDays(date, -7)
+    case "ArrowDown":
+      return addDays(date, 7)
+    case "Home":
+      return addDays(date, -date.getDay())
+    case "End":
+      return addDays(date, 6 - date.getDay())
+    case "PageUp":
+      return addCalendarMonthsPreservingDay(date, -1)
+    case "PageDown":
+      return addCalendarMonthsPreservingDay(date, 1)
+    default:
+      return undefined
+  }
+}
+
+export function getNextRange(currentRange: CalendarRange, date: Date): CalendarRange {
+  const nextDate = startOfDay(date)
+  const from = currentRange.from ? startOfDay(currentRange.from) : undefined
+  const to = currentRange.to ? startOfDay(currentRange.to) : undefined
+
+  if (!from || to) {
+    return { from: nextDate, to: undefined }
+  }
+
+  if (isBeforeDay(nextDate, from)) {
+    return { from: nextDate, to: from }
+  }
+
+  return { from, to: nextDate }
+}
+
+export function normalizeRange(range: CalendarRange): CalendarRange {
+  if (!range.from || !range.to) return range
+
+  return isBeforeDay(range.to, range.from)
+    ? { from: range.to, to: range.from }
+    : range
+}
+
+export function formatCalendarRange(range: CalendarRange) {
+  if (!range.from && !range.to) return undefined
+  if (range.from && !range.to) {
+    return `${formatCalendarDate(range.from, { month: "short" })} -`
+  }
+  if (!range.from && range.to) {
+    return `- ${formatCalendarDate(range.to, { month: "short" })}`
+  }
+
+  return `${formatCalendarDate(range.from, {
+    month: "short",
+  })} - ${formatCalendarDate(range.to, { month: "short" })}`
+}
+
+export function formatCalendarDate(
+  date: Date | undefined,
+  options?: { month?: "short" | "long" }
+) {
+  if (!date) return ""
+  const month = date.toLocaleString("en", { month: options?.month ?? "short" })
+  return `${month} ${date.getDate()}`
+}
+
+export function formatMonthTitle(date: Date) {
+  return `${date.toLocaleString("en", { month: "long" })} ${date.getFullYear()}`
+}
+
+export function toCalendarDateId(date: Date) {
+  const year = date.getFullYear()
+  const month = String(date.getMonth() + 1).padStart(2, "0")
+  const day = String(date.getDate()).padStart(2, "0")
+
+  return `${year}-${month}-${day}`
+}
+
+export function startOfDay(date: Date) {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate())
+}
+
+export function startOfMonth(date: Date) {
+  return new Date(date.getFullYear(), date.getMonth(), 1)
+}
+
+export function addDays(date: Date, amount: number) {
+  const next = new Date(date)
+  next.setDate(next.getDate() + amount)
+  return startOfDay(next)
+}
+
+export function addMonths(date: Date, amount: number) {
+  return new Date(date.getFullYear(), date.getMonth() + amount, 1)
+}
+
+export function isSameMonth(left: Date, right: Date) {
+  return (
+    left.getFullYear() === right.getFullYear() &&
+    left.getMonth() === right.getMonth()
+  )
+}
+
+export function isSameDay(left: Date, right: Date) {
+  return startOfDay(left).getTime() === startOfDay(right).getTime()
+}
+
+export function isBeforeDay(left: Date, right: Date) {
+  return startOfDay(left).getTime() < startOfDay(right).getTime()
+}
+
+export function isAfterOrSameDay(left: Date, right: Date) {
+  return startOfDay(left).getTime() >= startOfDay(right).getTime()
+}
+
+export function isBeforeOrSameDay(left: Date, right: Date) {
+  return startOfDay(left).getTime() <= startOfDay(right).getTime()
+}
+
+function addCalendarMonthsPreservingDay(date: Date, amount: number) {
+  const targetMonth = new Date(date.getFullYear(), date.getMonth() + amount, 1)
+  const lastDay = new Date(
+    targetMonth.getFullYear(),
+    targetMonth.getMonth() + 1,
+    0
+  ).getDate()
+
+  return startOfDay(
+    new Date(
+      targetMonth.getFullYear(),
+      targetMonth.getMonth(),
+      Math.min(date.getDate(), lastDay)
+    )
+  )
+}
+
+function differenceInCalendarDays(left: Date, right: Date) {
+  const dayLength = 24 * 60 * 60 * 1000
+  return Math.round(
+    (startOfDay(left).getTime() - startOfDay(right).getTime()) / dayLength
+  )
+}

package/registry/components/date-picker.tsx

@@ -11,11 +11,28 @@ import {
 import { cva } from "class-variance-authority"
 
 import { cn } from "@/lib/utils"
-
-type DatePickerDirection = "ltr" | "rtl" | "auto"
-type CalendarView = "days" | "month-year"
-type CalendarMode = "single" | "range"
-type RangeCalendarType = "single" | "double" | "double-with-presets"
+import {
+  addMonths,
+  formatCalendarDate,
+  formatCalendarRange,
+  formatMonthTitle,
+  getCalendarCells,
+  getCalendarDayState,
+  getCalendarKeyboardTarget,
+  getNextRange,
+  isSameMonth,
+  normalizeRange,
+  startOfMonth,
+  toCalendarDateId,
+} from "./date-picker-state"
+import type {
+  CalendarCell,
+  CalendarMode,
+  CalendarRange,
+  CalendarView,
+  DatePickerDirection,
+  RangeCalendarType,
+} from "./date-picker-state"
 
 type CalendarTimeValue = {
   hours?: string
@@ -32,11 +49,6 @@ type CalendarMonthYearItem = {
   disabled?: boolean
 }
 
-type CalendarRange = {
-  from?: Date
-  to?: Date
-}
-
 type CalendarPreset = {
   id?: string
   label: React.ReactNode
@@ -502,8 +514,18 @@ function DatePicker({
 }: DatePickerProps) {
   const [internalOpen, setInternalOpen] = React.useState(defaultOpen)
   const [internalValue, setInternalValue] = React.useState(defaultValue)
+  const [internalDisplayMonth, setInternalDisplayMonth] = React.useState(() =>
+    startOfMonth(value ?? defaultValue ?? defaultDisplayMonth)
+  )
   const selected = value ?? internalValue
   const isOpen = open ?? internalOpen
+  const selectedTime = selected?.getTime()
+
+  React.useEffect(() => {
+    if (!isOpen || calendarProps?.displayMonth || !selected) return
+
+    setInternalDisplayMonth(startOfMonth(selected))
+  }, [calendarProps?.displayMonth, isOpen, selectedTime])
 
   function updateOpen(nextOpen: boolean) {
     if (open === undefined) {
@@ -519,6 +541,14 @@ function DatePicker({
     onSelect?.(nextDate)
   }
 
+  function updateDisplayMonth(nextMonth: Date) {
+    const normalized = startOfMonth(nextMonth)
+    if (calendarProps?.displayMonth === undefined) {
+      setInternalDisplayMonth(normalized)
+    }
+    calendarProps?.onDisplayMonthChange?.(normalized)
+  }
+
   return (
     <div
       data-open={isOpen ? "true" : "false"}
@@ -539,16 +569,17 @@ function DatePicker({
 
       {isOpen ? (
         <Calendar
+          {...calendarProps}
           defaultValue={defaultValue ?? defaultSelectedDate}
-          displayMonth={selected ?? defaultValue ?? defaultDisplayMonth}
+          displayMonth={calendarProps?.displayMonth ?? internalDisplayMonth}
           selectedDate={selected}
           surfaceSize="picker"
-          {...calendarProps}
           className={cn(
             "absolute left-1/2 top-[calc(100%+var(--bh-space-md-8))] z-[var(--bh-z-popover)] -translate-x-1/2",
             calendarProps?.className
           )}
           dir={calendarProps?.dir ?? dir}
+          onDisplayMonthChange={updateDisplayMonth}
           onSelect={(nextDate) => {
             selectDate(nextDate)
             calendarProps?.onSelect?.(nextDate)
@@ -580,7 +611,16 @@ function DateRangePicker({
   const [internalValue, setInternalValue] = React.useState(defaultValue)
   const selectedRange = normalizeRange(value ?? internalValue ?? {})
   const isOpen = open ?? internalOpen
-  const displayMonth = selectedRange.from ?? defaultDisplayMonth
+  const [internalDisplayMonth, setInternalDisplayMonth] = React.useState(() =>
+    startOfMonth(selectedRange.from ?? defaultValue?.from ?? defaultDisplayMonth)
+  )
+  const selectedRangeFromTime = selectedRange.from?.getTime()
+
+  React.useEffect(() => {
+    if (!isOpen || calendarProps?.displayMonth || !selectedRange.from) return
+
+    setInternalDisplayMonth(startOfMonth(selectedRange.from))
+  }, [calendarProps?.displayMonth, isOpen, selectedRangeFromTime])
 
   function updateOpen(nextOpen: boolean) {
     if (open === undefined) {
@@ -596,6 +636,14 @@ function DateRangePicker({
     onSelect?.(nextRange)
   }
 
+  function updateDisplayMonth(nextMonth: Date) {
+    const normalized = startOfMonth(nextMonth)
+    if (calendarProps?.displayMonth === undefined) {
+      setInternalDisplayMonth(normalized)
+    }
+    calendarProps?.onDisplayMonthChange?.(normalized)
+  }
+
   return (
     <div
       data-open={isOpen ? "true" : "false"}
@@ -617,16 +665,17 @@ function DateRangePicker({
 
       {isOpen ? (
         <RangeCalendar
+          {...calendarProps}
           defaultValue={defaultValue ?? defaultRange}
-          displayMonth={displayMonth}
+          displayMonth={calendarProps?.displayMonth ?? internalDisplayMonth}
           type={type}
           value={selectedRange}
-          {...calendarProps}
           className={cn(
             "absolute left-1/2 top-[calc(100%+var(--bh-space-md-8))] z-[var(--bh-z-popover)] -translate-x-1/2",
             calendarProps?.className
           )}
           dir={calendarProps?.dir ?? dir}
+          onDisplayMonthChange={updateDisplayMonth}
           onSelect={(nextRange) => {
             selectRange(nextRange)
             calendarProps?.onSelect?.(nextRange)
@@ -727,9 +776,36 @@ function CalendarMonth({
   view?: CalendarView
 }) {
   const cells = React.useMemo(() => getCalendarCells(displayMonth), [displayMonth])
+  const gridRef = React.useRef<HTMLDivElement>(null)
+  const pendingFocusDateRef = React.useRef<Date | undefined>(undefined)
   const monthTitle = title ?? formatMonthTitle(displayMonth)
   const hasMonthToggle = mode === "single"
 
+  React.useLayoutEffect(() => {
+    if (!pendingFocusDateRef.current) return
+
+    focusCalendarDate(pendingFocusDateRef.current)
+    pendingFocusDateRef.current = undefined
+  }, [cells])
+
+  function focusCalendarDate(date: Date) {
+    const target = gridRef.current?.querySelector<HTMLButtonElement>(
+      `[data-calendar-date="${toCalendarDateId(date)}"]`
+    )
+
+    target?.focus()
+  }
+
+  function handleKeyboardNavigateDate(nextDate: Date) {
+    if (isSameMonth(nextDate, displayMonth)) {
+      focusCalendarDate(nextDate)
+      return
+    }
+
+    pendingFocusDateRef.current = nextDate
+    onDisplayMonthChange(startOfMonth(nextDate))
+  }
+
   return (
     <div
       data-slot="calendar-month"
@@ -810,6 +886,7 @@ function CalendarMonth({
           <div
             data-slot="calendar-grid"
             role="grid"
+            ref={gridRef}
             className="grid w-full grid-cols-7"
           >
             {cells.map((cell) => (
@@ -819,6 +896,7 @@ function CalendarMonth({
                 eventDates={eventDates}
                 key={cell.date.toISOString()}
                 mode={mode}
+                onKeyboardNavigateDate={handleKeyboardNavigateDate}
                 onSelectDate={onSelectDate}
                 range={range}
                 selectedDate={selectedDate}
@@ -843,6 +921,7 @@ function CalendarDayCell({
   displayMonth,
   eventDates,
   mode,
+  onKeyboardNavigateDate,
   onSelectDate,
   range,
   selectedDate,
@@ -851,50 +930,35 @@ function CalendarDayCell({
   displayMonth: Date
   eventDates?: Date[]
   mode: CalendarMode
+  onKeyboardNavigateDate: (date: Date) => void
   onSelectDate: (date: Date) => void
   range?: CalendarRange
   selectedDate?: Date
 }) {
-  const outside = cell.date.getMonth() !== displayMonth.getMonth()
-  const hasEvent = eventDates?.some((date) => isSameDay(date, cell.date)) ?? false
-  const selected =
-    mode === "single"
-      ? Boolean(selectedDate && isSameDay(selectedDate, cell.date))
-      : Boolean(
-          range?.from &&
-            (isSameDay(range.from, cell.date) ||
-              (range.to && isSameDay(range.to, cell.date)))
-        )
-  const inRange =
-    mode === "range" &&
-    Boolean(
-      range?.from &&
-        range?.to &&
-        isAfterOrSameDay(cell.date, range.from) &&
-        isBeforeOrSameDay(cell.date, range.to)
-    )
-  const rangeEndpoint =
-    mode === "range" &&
-    Boolean(
-      range?.from &&
-        (isSameDay(range.from, cell.date) ||
-          (range.to && isSameDay(range.to, cell.date)))
-    )
-  const rangeState = selected
-    ? "selected"
-    : inRange
-      ? "range"
-      : outside
-        ? "outside"
-        : hasEvent
-          ? "event"
-          : "default"
+  const { inRange, outside, rangeEndpoint, selected, state } = getCalendarDayState({
+    date: cell.date,
+    displayMonth,
+    eventDates,
+    mode,
+    range,
+    selectedDate,
+  })
+
+  function handleKeyDown(event: React.KeyboardEvent<HTMLButtonElement>) {
+    const nextDate = getCalendarKeyboardTarget(cell.date, event.key)
+
+    if (!nextDate) return
+
+    event.preventDefault()
+    onKeyboardNavigateDate(nextDate)
+  }
 
   return (
     <button
       aria-disabled={outside || undefined}
       aria-label={formatCalendarDate(cell.date, { month: "long" })}
       aria-selected={selected || undefined}
+      data-calendar-date={toCalendarDateId(cell.date)}
       data-outside={outside ? "true" : undefined}
       data-range-endpoint={rangeEndpoint ? "true" : undefined}
       data-slot="calendar-cell"
@@ -902,11 +966,12 @@ function CalendarDayCell({
       role="gridcell"
       type="button"
       className={cn(
-        dayCellButton({ state: rangeState }),
+        dayCellButton({ state }),
         inRange && cell.weekday === 0 && "rounded-s-[var(--bh-control-default)]",
         inRange && cell.weekday === 6 && "rounded-e-[var(--bh-control-default)]"
       )}
       onClick={() => onSelectDate(cell.date)}
+      onKeyDown={handleKeyDown}
     >
       {cell.date.getDate()}
     </button>
@@ -1002,114 +1067,6 @@ function MonthYearList({ items }: { items: CalendarMonthYearItem[] }) {
   )
 }
 
-type CalendarCell = {
-  date: Date
-  weekday: number
-}
-
-function getCalendarCells(month: Date): CalendarCell[] {
-  const first = startOfMonth(month)
-  const start = addDays(first, -first.getDay())
-  const last = new Date(first.getFullYear(), first.getMonth() + 1, 0)
-  const end = addDays(last, 6 - last.getDay())
-  const dayCount = differenceInCalendarDays(end, start) + 1
-
-  return Array.from({ length: dayCount }, (_, index) => {
-    const date = addDays(start, index)
-    return {
-      date,
-      weekday: date.getDay(),
-    }
-  })
-}
-
-function getNextRange(currentRange: CalendarRange, date: Date): CalendarRange {
-  const nextDate = startOfDay(date)
-  const from = currentRange.from ? startOfDay(currentRange.from) : undefined
-  const to = currentRange.to ? startOfDay(currentRange.to) : undefined
-
-  if (!from || to) {
-    return { from: nextDate, to: undefined }
-  }
-
-  if (isBeforeDay(nextDate, from)) {
-    return { from: nextDate, to: from }
-  }
-
-  return { from, to: nextDate }
-}
-
-function normalizeRange(range: CalendarRange): CalendarRange {
-  if (!range.from || !range.to) return range
-
-  return isBeforeDay(range.to, range.from)
-    ? { from: range.to, to: range.from }
-    : range
-}
-
-function formatCalendarRange(range: CalendarRange) {
-  if (!range.from && !range.to) return undefined
-  if (range.from && !range.to) {
-    return `${formatCalendarDate(range.from, { month: "short" })} -`
-  }
-  if (!range.from && range.to) {
-    return `- ${formatCalendarDate(range.to, { month: "short" })}`
-  }
-
-  return `${formatCalendarDate(range.from, {
-    month: "short",
-  })} - ${formatCalendarDate(range.to, { month: "short" })}`
-}
-
-function formatCalendarDate(date: Date | undefined, options?: { month?: "short" | "long" }) {
-  if (!date) return ""
-  const month = date.toLocaleString("en", { month: options?.month ?? "short" })
-  return `${month} ${date.getDate()}`
-}
-
-function formatMonthTitle(date: Date) {
-  return `${date.toLocaleString("en", { month: "long" })} ${date.getFullYear()}`
-}
-
-function startOfDay(date: Date) {
-  return new Date(date.getFullYear(), date.getMonth(), date.getDate())
-}
-
-function startOfMonth(date: Date) {
-  return new Date(date.getFullYear(), date.getMonth(), 1)
-}
-
-function addDays(date: Date, amount: number) {
-  const next = new Date(date)
-  next.setDate(next.getDate() + amount)
-  return startOfDay(next)
-}
-
-function addMonths(date: Date, amount: number) {
-  return new Date(date.getFullYear(), date.getMonth() + amount, 1)
-}
-
-function differenceInCalendarDays(left: Date, right: Date) {
-  const dayLength = 24 * 60 * 60 * 1000
-  return Math.round((startOfDay(left).getTime() - startOfDay(right).getTime()) / dayLength)
-}
-
-function isSameDay(left: Date, right: Date) {
-  return startOfDay(left).getTime() === startOfDay(right).getTime()
-}
-
-function isBeforeDay(left: Date, right: Date) {
-  return startOfDay(left).getTime() < startOfDay(right).getTime()
-}
-
-function isAfterOrSameDay(left: Date, right: Date) {
-  return startOfDay(left).getTime() >= startOfDay(right).getTime()
-}
-
-function isBeforeOrSameDay(left: Date, right: Date) {
-  return startOfDay(left).getTime() <= startOfDay(right).getTime()
-}
-
 function hasRenderableContent(content: React.ReactNode) {
   return (
     content !== undefined &&