banhaten 0.3.0 → 0.5.0

package/registry/components/date-picker.tsx

@@ -1,1277 +1,1289 @@
-"use client"
-
-import * as React from "react"
-import {
-  CalendarDaysIcon,
-  ChevronDownIcon,
-  ChevronLeftIcon,
-  ChevronRightIcon,
-  ChevronUpIcon,
-} from "lucide-react"
-import { cva } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-import { Popover, PopoverContent, PopoverTrigger } from "./popover"
-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 ControlDensity = "compact" | "default" | "comfortable"
-
-type CalendarTimeValue = {
-  hours?: string
-  minutes?: string
-  period?: string
-  zone?: string
-}
-
-type CalendarMonthYearItem = {
-  id?: string
-  month: React.ReactNode
-  year: React.ReactNode
-  value?: Date
-  selected?: boolean
-  disabled?: boolean
-}
-
-type CalendarPreset = {
-  id?: string
-  label: React.ReactNode
-  range?: CalendarRange
-  disabled?: boolean
-}
-
-type CalendarProps = Omit<
-  React.ComponentProps<"div">,
-  "defaultValue" | "dir" | "onSelect"
-> & {
-  defaultValue?: Date
-  dir?: DatePickerDirection
-  displayMonth?: Date
-  events?: Date[]
-  monthYearItems?: CalendarMonthYearItem[]
-  nextLabel?: string
-  onDisplayMonthChange?: (month: Date) => void
-  onSelect?: (date: Date) => void
-  onViewChange?: (view: CalendarView) => void
-  previousLabel?: string
-  selectedDate?: Date
-  showTime?: boolean
-  surfaceSize?: "calendar" | "picker"
-  timeLabel?: React.ReactNode
-  timeValue?: CalendarTimeValue
-  title?: React.ReactNode
-  value?: Date
-  view?: CalendarView
-}
-
-type RangeCalendarProps = Omit<
-  React.ComponentProps<"div">,
-  "defaultValue" | "dir" | "onSelect"
-> & {
-  defaultValue?: CalendarRange
-  dir?: DatePickerDirection
-  displayMonth?: Date
-  nextLabel?: string
-  onDisplayMonthChange?: (month: Date) => void
-  onPresetSelect?: (preset: CalendarPreset) => void
-  onSelect?: (range: CalendarRange) => void
-  presets?: CalendarPreset[]
-  previousLabel?: string
-  showPresets?: boolean
-  showTime?: boolean
-  timeLabel?: React.ReactNode
-  timeValue?: CalendarTimeValue
-  type?: RangeCalendarType
-  value?: CalendarRange
-}
-
-type DatePickerProps = Omit<
-  React.ComponentProps<"div">,
-  "defaultValue" | "dir" | "onSelect"
-> & {
-  calendarProps?: Omit<
-    CalendarProps,
-    "defaultValue" | "selectedDate" | "value"
-  >
-  defaultOpen?: boolean
-  defaultValue?: Date
-  density?: ControlDensity
-  dir?: DatePickerDirection
-  disabled?: boolean
-  icon?: React.ReactNode
-  onOpenChange?: (open: boolean) => void
-  onSelect?: (date: Date) => void
-  open?: boolean
-  placeholder?: React.ReactNode
-  triggerClassName?: string
-  triggerProps?: Omit<
-    DatePickerTriggerProps,
-    "density" | "icon" | "open" | "placeholder" | "value"
-  >
-  value?: Date
-}
-
-type DateRangePickerProps = Omit<
-  React.ComponentProps<"div">,
-  "defaultValue" | "dir" | "onSelect"
-> & {
-  calendarProps?: Omit<
-    RangeCalendarProps,
-    "defaultValue" | "type" | "value"
-  >
-  defaultOpen?: boolean
-  defaultValue?: CalendarRange
-  density?: ControlDensity
-  dir?: DatePickerDirection
-  disabled?: boolean
-  icon?: React.ReactNode
-  onOpenChange?: (open: boolean) => void
-  onSelect?: (range: CalendarRange) => void
-  open?: boolean
-  placeholder?: React.ReactNode
-  triggerClassName?: string
-  triggerProps?: Omit<
-    DatePickerTriggerProps,
-    "density" | "icon" | "open" | "placeholder" | "value"
-  >
-  type?: RangeCalendarType
-  value?: CalendarRange
-}
-
-const defaultTimeValue = getCurrentTimeValue()
-const defaultDayLabels = [
-  { full: "Sunday", short: "S" },
-  { full: "Monday", short: "M" },
-  { full: "Tuesday", short: "T" },
-  { full: "Wednesday", short: "W" },
-  { full: "Thursday", short: "T" },
-  { full: "Friday", short: "F" },
-  { full: "Saturday", short: "S" },
-] as const
-
-const calendarSurface = cva(
-  [
-    "relative bg-[var(--bh-bg-raised)]",
-    "[--bh-date-surface-border:var(--bh-border-subtle)]",
-    "shadow-[var(--shadow-date-surface)]",
-  ],
-  {
-    variants: {
-      layout: {
-        single:
-          "flex flex-col items-start rounded-[var(--bh-radius-2xl-12)] p-[var(--bh-space-md-8)]",
-        range:
-          "inline-flex max-w-[var(--bh-date-range-surface-max-width)] items-start gap-[var(--bh-space-3xl-16)] overflow-auto rounded-[var(--bh-radius-2xl-12)] p-[var(--bh-space-3xl-16)]",
-      },
-      surfaceSize: {
-        calendar: "w-[var(--bh-date-surface-width-calendar)]",
-        picker: "w-[var(--bh-date-surface-width-picker)]",
-      },
-    },
-    defaultVariants: {
-      layout: "single",
-      surfaceSize: "calendar",
-    },
-  }
-)
-
-const pickerTrigger = cva(
-  [
-    "group/date-trigger relative flex w-[var(--bh-date-trigger-width)] max-w-full items-center gap-[var(--bh-space-md-8)] rounded-[var(--bh-radius-lg-8)]",
-    "bg-[var(--bh-interactive-input-default)] text-start outline-none",
-    "[--bh-date-trigger-border:var(--bh-border-input)] [--bh-date-trigger-shadow:inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-date-trigger-border),var(--shadow-component-default)]",
-    "text-[length:var(--bh-text-body-md-regular-font-size)] font-[var(--bh-text-body-md-regular-font-weight)] leading-[var(--bh-text-body-md-regular-line-height)] tracking-[var(--bh-text-body-md-regular-letter-spacing)]",
-    "text-[var(--bh-content-default)] shadow-[var(--bh-date-trigger-shadow)] transition-[background-color,box-shadow]",
-    "hover:bg-[var(--bh-bg-default-hover)] focus-visible:shadow-[var(--shadow-input-focus-ring)]",
-    "disabled:pointer-events-none disabled:bg-[var(--bh-interactive-input-disabled)] disabled:text-[var(--bh-content-disabled)] disabled:shadow-[inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-border-disabled)]",
-  ],
-  {
-    variants: {
-      density: {
-        compact: "h-[var(--bh-button-xs-height)] px-[var(--bh-space-md-8)]",
-        default: "h-[var(--bh-button-sm-height)] px-[var(--bh-space-lg-10)]",
-        comfortable: "h-[var(--bh-date-trigger-height)] px-[var(--bh-space-xl-12)]",
-      },
-    },
-    defaultVariants: {
-      density: "comfortable",
-    },
-  }
-)
-
-const monthButton = cva(
-  [
-    "flex size-[var(--bh-date-nav-button-size)] shrink-0 items-center justify-center rounded-[var(--bh-control-default)]",
-    "bg-[var(--bh-interactive-soft-default)] text-[var(--bh-content-default)] outline-none transition-[background-color,box-shadow,color]",
-    "hover:bg-[var(--bh-interactive-soft-hover)] focus-visible:shadow-[var(--shadow-button-focus)] disabled:opacity-[var(--bh-opacity-0)]",
-    "[&_svg]:size-[var(--bh-date-nav-icon-size)]",
-  ]
-)
-
-const calendarTitleButton = cva(
-  [
-    "flex h-[var(--bh-date-title-height)] min-w-0 flex-1 items-center justify-center gap-[var(--bh-space-xs-4)] rounded-[var(--bh-radius-lg-8)]",
-    "px-[var(--bh-space-md-8)] text-center outline-none transition-[background-color,box-shadow]",
-    "text-[length:var(--bh-text-body-md-medium-font-size)] font-[var(--bh-text-body-md-medium-font-weight)] leading-[var(--bh-text-body-md-medium-line-height)] tracking-[var(--bh-text-body-md-medium-letter-spacing)] text-[var(--bh-content-default)]",
-    "hover:bg-[var(--bh-interactive-ghost-hover)] focus-visible:shadow-[var(--shadow-button-focus)]",
-  ],
-  {
-    variants: {
-      framed: {
-        true:
-          "shadow-[inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-border-subtle)]",
-        false: "",
-      },
-      active: {
-        true: "bg-[var(--bh-interactive-ghost-hover)]",
-        false: "",
-      },
-    },
-    defaultVariants: {
-      active: false,
-      framed: false,
-    },
-  }
-)
-
-const dayCellButton = cva(
-  [
-    "relative flex h-[var(--bh-date-day-cell-height)] min-w-0 flex-1 items-center justify-center text-center outline-none",
-    "text-[length:var(--bh-text-body-md-regular-font-size)] font-[var(--bh-text-body-md-regular-font-weight)] leading-[var(--bh-text-body-md-regular-line-height)] tracking-[var(--bh-text-body-md-regular-letter-spacing)]",
-    "transition-[background-color,color,box-shadow] focus-visible:z-[var(--bh-z-raised)] focus-visible:shadow-[var(--shadow-button-focus)]",
-  ],
-  {
-    variants: {
-      state: {
-        default:
-          "rounded-[var(--bh-control-default)] text-[var(--bh-content-default)] hover:bg-[var(--bh-interactive-ghost-hover)]",
-        outside:
-          "rounded-[var(--bh-control-default)] text-[var(--bh-content-disabled)]",
-        event:
-          "rounded-[var(--bh-control-default)] text-[var(--bh-content-brand-default)] after:absolute after:bottom-[var(--bh-date-event-dot-offset-bottom)] after:left-1/2 after:size-[var(--bh-date-event-dot-size)] after:-translate-x-1/2 after:rounded-[var(--bh-radius-full)] after:bg-[var(--bh-content-brand-default)] rtl:after:translate-x-1/2",
-        selected:
-          "rounded-[var(--bh-control-default)] bg-[var(--bh-bg-brand-bold)] text-[var(--bh-content-on-brand)] hover:bg-[var(--bh-bg-brand-bold)] hover:shadow-[inset_0_0_0_var(--bh-border-width-default)_var(--bh-border-focus)]",
-        range:
-          "rounded-none bg-[var(--bh-bg-brand-subtle)] text-[var(--bh-content-brand-strong)] hover:bg-[var(--bh-bg-brand-subtle)]",
-      },
-    },
-    defaultVariants: {
-      state: "default",
-    },
-  }
-)
-
-const dateListItem = cva(
-  [
-    "flex h-[var(--bh-date-list-item-height)] w-full items-center rounded-[var(--bh-radius-lg-8)] px-[var(--bh-space-md-8)] py-[var(--bh-space-sm-6)] text-start outline-none",
-    "text-[length:var(--bh-text-body-md-medium-font-size)] font-[var(--bh-text-body-md-medium-font-weight)] leading-[var(--bh-text-body-md-medium-line-height)] tracking-[var(--bh-text-body-md-medium-letter-spacing)]",
-    "text-[var(--bh-content-default)] transition-colors hover:bg-[var(--bh-interactive-ghost-hover)] focus-visible:bg-[var(--bh-interactive-ghost-hover)] disabled:pointer-events-none disabled:text-[var(--bh-content-disabled)]",
-  ]
-)
-
-function Calendar({
-  className,
-  defaultValue,
-  dir,
-  displayMonth,
-  events,
-  monthYearItems,
-  nextLabel = "Next month",
-  onDisplayMonthChange,
-  onSelect,
-  onViewChange,
-  previousLabel = "Previous month",
-  selectedDate,
-  showTime = false,
-  surfaceSize = "calendar",
-  timeLabel = "Time",
-  timeValue = defaultTimeValue,
-  title,
-  value,
-  view,
-  ...props
-}: CalendarProps) {
-  const controlledValue = value ?? selectedDate
-  const [internalValue, setInternalValue] = React.useState(defaultValue)
-  const [internalDisplayMonth, setInternalDisplayMonth] = React.useState(() =>
-    startOfMonth(displayMonth ?? controlledValue ?? defaultValue ?? new Date())
-  )
-  const [internalView, setInternalView] = React.useState<CalendarView>("days")
-  const selected = controlledValue ?? internalValue
-  const activeDisplayMonth = startOfMonth(displayMonth ?? internalDisplayMonth)
-  const activeView = view ?? internalView
-  const eventDates = events ?? []
-  const resolvedMonthYearItems =
-    monthYearItems ?? createMonthYearItems(activeDisplayMonth)
-
-  function updateDisplayMonth(nextMonth: Date) {
-    const normalized = startOfMonth(nextMonth)
-    if (displayMonth === undefined) {
-      setInternalDisplayMonth(normalized)
-    }
-    onDisplayMonthChange?.(normalized)
-  }
-
-  function updateView(nextView: CalendarView) {
-    if (view === undefined) {
-      setInternalView(nextView)
-    }
-    onViewChange?.(nextView)
-  }
-
-  function selectDate(nextDate: Date) {
-    if (value === undefined && selectedDate === undefined) {
-      setInternalValue(nextDate)
-    }
-    onSelect?.(nextDate)
-  }
-
-  return (
-    <div
-      data-slot="calendar"
-      data-view={activeView}
-      dir={dir}
-      className={cn(calendarSurface({ layout: "single", surfaceSize }), className)}
-      {...props}
-    >
-      <CalendarMonth
-        displayMonth={activeDisplayMonth}
-        eventDates={eventDates}
-        mode="single"
-        className="w-full"
-        nextLabel={nextLabel}
-        onDisplayMonthChange={updateDisplayMonth}
-        onSelectDate={selectDate}
-        onToggleView={() =>
-          updateView(activeView === "days" ? "month-year" : "days")
-        }
-        previousLabel={previousLabel}
-        selectedDate={selected}
-        showTime={showTime && activeView === "days"}
-        timeLabel={timeLabel}
-        timeValue={timeValue}
-        title={title}
-        view={activeView}
-      />
-
-      {activeView === "month-year" ? (
-        <>
-          <div aria-hidden="true" className="h-[var(--bh-date-month-year-spacer-height)] w-full" />
-          <MonthYearList
-            items={resolvedMonthYearItems}
-            onSelect={(item) => {
-              if (!item.value) return
-              updateDisplayMonth(item.value)
-              updateView("days")
-            }}
-          />
-        </>
-      ) : null}
-    </div>
-  )
-}
-
-function RangeCalendar({
-  className,
-  defaultValue = {},
-  dir,
-  displayMonth,
-  nextLabel = "Next month",
-  onDisplayMonthChange,
-  onPresetSelect,
-  onSelect,
-  presets,
-  previousLabel = "Previous month",
-  showPresets,
-  showTime = false,
-  timeLabel = "Time",
-  timeValue = defaultTimeValue,
-  type = "double",
-  value,
-  ...props
-}: RangeCalendarProps) {
-  const [internalRange, setInternalRange] = React.useState(defaultValue)
-  const [internalDisplayMonth, setInternalDisplayMonth] = React.useState(() =>
-    startOfMonth(displayMonth ?? defaultValue.from ?? new Date())
-  )
-  const [presetReferenceDate] = React.useState(() => startOfDay(new Date()))
-  const selectedRange = normalizeRange(value ?? internalRange)
-  const activeDisplayMonth = startOfMonth(displayMonth ?? internalDisplayMonth)
-  const monthsToRender = type === "single" ? 1 : 2
-  const shouldShowPresets = showPresets ?? type === "double-with-presets"
-  const presetItems = presets ?? createDefaultPresets(presetReferenceDate)
-  const monthNodes = Array.from({ length: monthsToRender }, (_, index) =>
-    addMonths(activeDisplayMonth, index)
-  )
-
-  function updateDisplayMonth(nextMonth: Date) {
-    const normalized = startOfMonth(nextMonth)
-    if (displayMonth === undefined) {
-      setInternalDisplayMonth(normalized)
-    }
-    onDisplayMonthChange?.(normalized)
-  }
-
-  function selectRangeDate(nextDate: Date) {
-    const nextRange = getNextRange(selectedRange, nextDate)
-    if (value === undefined) {
-      setInternalRange(nextRange)
-    }
-    onSelect?.(nextRange)
-  }
-
-  function selectPreset(preset: CalendarPreset) {
-    if (preset.disabled) return
-    if (preset.range) {
-      const nextRange = normalizeRange(preset.range)
-      if (value === undefined) {
-        setInternalRange(nextRange)
-      }
-      onSelect?.(nextRange)
-    }
-    onPresetSelect?.(preset)
-  }
-
-  return (
-    <div
-      data-slot="range-calendar"
-      data-type={type}
-      dir={dir}
-      className={cn(calendarSurface({ layout: "range" }), className)}
-      {...props}
-    >
-      {shouldShowPresets ? (
-        <div
-          data-slot="range-calendar-presets"
-          className="grid w-[var(--bh-date-presets-width)] shrink-0 border-e border-[var(--bh-border-subtle)] pe-[var(--bh-space-md-8)]"
-        >
-          {presetItems.map((preset, index) => {
-            const disabled =
-              Boolean(preset.disabled) ||
-              (!preset.range && onPresetSelect === undefined)
-
-            return (
-            <button
-              aria-disabled={disabled || undefined}
-              className={dateListItem()}
-              data-slot="range-calendar-preset"
-              disabled={disabled}
-              key={preset.id || index}
-              type="button"
-              onClick={() => selectPreset(preset)}
-            >
-              <span dir="auto" className="min-w-0 truncate">
-                {preset.label}
-              </span>
-            </button>
-            )
-          })}
-        </div>
-      ) : null}
-
-      <div
-        data-slot="range-calendar-months"
-        className="flex min-w-max gap-[var(--bh-space-3xl-16)]"
-      >
-        {monthNodes.map((month, index) => (
-          <CalendarMonth
-            displayMonth={month}
-            key={month.toISOString()}
-            mode="range"
-            className="w-[var(--bh-date-range-month-width)]"
-            nextLabel={nextLabel}
-            onDisplayMonthChange={updateDisplayMonth}
-            onSelectDate={selectRangeDate}
-            previousLabel={previousLabel}
-            range={selectedRange}
-            showNextButton={index === monthNodes.length - 1}
-            showPreviousButton={index === 0}
-            showTime={showTime}
-            timeLabel={timeLabel}
-            timeValue={timeValue}
-          />
-        ))}
-      </div>
-    </div>
-  )
-}
-
-function DatePicker({
-  calendarProps,
-  className,
-  defaultOpen = false,
-  defaultValue,
-  density,
-  dir,
-  disabled,
-  icon,
-  onOpenChange,
-  onSelect,
-  open,
-  placeholder = "Select date",
-  triggerClassName,
-  triggerProps,
-  value,
-  ...props
-}: DatePickerProps) {
-  const [internalOpen, setInternalOpen] = React.useState(defaultOpen)
-  const [internalValue, setInternalValue] = React.useState(defaultValue)
-  const [internalDisplayMonth, setInternalDisplayMonth] = React.useState(() =>
-    startOfMonth(value ?? defaultValue ?? new Date())
-  )
-  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) {
-      setInternalOpen(nextOpen)
-    }
-    onOpenChange?.(nextOpen)
-  }
-
-  function selectDate(nextDate: Date) {
-    if (value === undefined) {
-      setInternalValue(nextDate)
-    }
-    onSelect?.(nextDate)
-  }
-
-  function updateDisplayMonth(nextMonth: Date) {
-    const normalized = startOfMonth(nextMonth)
-    if (calendarProps?.displayMonth === undefined) {
-      setInternalDisplayMonth(normalized)
-    }
-    calendarProps?.onDisplayMonthChange?.(normalized)
-  }
-
-  return (
-    <Popover
-      open={isOpen}
-      onOpenChange={updateOpen}
-      data-open={isOpen ? "true" : "false"}
-      data-slot="date-picker"
-      dir={dir}
-      className={cn("relative w-[var(--bh-date-picker-width)] max-w-full", className)}
-      {...props}
-    >
-      <PopoverTrigger asChild>
-        <DatePickerTrigger
-          {...triggerProps}
-          disabled={disabled ?? triggerProps?.disabled}
-          density={density}
-          icon={icon}
-          open={isOpen}
-          placeholder={placeholder}
-          value={selected ? formatCalendarDate(selected, { month: "long" }) : undefined}
-          className={cn(triggerClassName, triggerProps?.className)}
-        />
-      </PopoverTrigger>
-
-      <PopoverContent
-        align="center"
-        showArrow={false}
-        size="auto"
-        className="w-auto bg-transparent p-0 shadow-none"
-      >
-        <Calendar
-          {...calendarProps}
-          defaultValue={defaultValue}
-          displayMonth={calendarProps?.displayMonth ?? internalDisplayMonth}
-          selectedDate={selected}
-          surfaceSize="picker"
-          className={calendarProps?.className}
-          dir={calendarProps?.dir ?? dir}
-          onDisplayMonthChange={updateDisplayMonth}
-          onSelect={(nextDate) => {
-            selectDate(nextDate)
-            calendarProps?.onSelect?.(nextDate)
-          }}
-        />
-      </PopoverContent>
-    </Popover>
-  )
-}
-
-function DateRangePicker({
-  calendarProps,
-  className,
-  defaultOpen = false,
-  defaultValue,
-  density,
-  dir,
-  disabled,
-  icon,
-  onOpenChange,
-  onSelect,
-  open,
-  placeholder = "Select date range",
-  triggerClassName,
-  triggerProps,
-  type = "double",
-  value,
-  ...props
-}: DateRangePickerProps) {
-  const [internalOpen, setInternalOpen] = React.useState(defaultOpen)
-  const [internalValue, setInternalValue] = React.useState(defaultValue)
-  const selectedRange = normalizeRange(value ?? internalValue ?? {})
-  const isOpen = open ?? internalOpen
-  const [internalDisplayMonth, setInternalDisplayMonth] = React.useState(() =>
-    startOfMonth(selectedRange.from ?? defaultValue?.from ?? new Date())
-  )
-  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) {
-      setInternalOpen(nextOpen)
-    }
-    onOpenChange?.(nextOpen)
-  }
-
-  function selectRange(nextRange: CalendarRange) {
-    if (value === undefined) {
-      setInternalValue(nextRange)
-    }
-    onSelect?.(nextRange)
-  }
-
-  function updateDisplayMonth(nextMonth: Date) {
-    const normalized = startOfMonth(nextMonth)
-    if (calendarProps?.displayMonth === undefined) {
-      setInternalDisplayMonth(normalized)
-    }
-    calendarProps?.onDisplayMonthChange?.(normalized)
-  }
-
-  return (
-    <Popover
-      open={isOpen}
-      onOpenChange={updateOpen}
-      data-open={isOpen ? "true" : "false"}
-      data-slot="date-range-picker"
-      data-type={type}
-      dir={dir}
-      className={cn("relative w-[var(--bh-date-picker-width)] max-w-full", className)}
-      {...props}
-    >
-      <PopoverTrigger asChild>
-        <DatePickerTrigger
-          {...triggerProps}
-          disabled={disabled ?? triggerProps?.disabled}
-          density={density}
-          icon={icon}
-          open={isOpen}
-          placeholder={placeholder}
-          value={formatCalendarRange(selectedRange)}
-          className={cn(triggerClassName, triggerProps?.className)}
-        />
-      </PopoverTrigger>
-
-      <PopoverContent
-        align="center"
-        showArrow={false}
-        size="auto"
-        className="w-auto bg-transparent p-0 shadow-none"
-      >
-        <RangeCalendar
-          {...calendarProps}
-          defaultValue={defaultValue ?? {}}
-          displayMonth={calendarProps?.displayMonth ?? internalDisplayMonth}
-          type={type}
-          value={selectedRange}
-          className={calendarProps?.className}
-          dir={calendarProps?.dir ?? dir}
-          onDisplayMonthChange={updateDisplayMonth}
-          onSelect={(nextRange) => {
-            selectRange(nextRange)
-            calendarProps?.onSelect?.(nextRange)
-          }}
-        />
-      </PopoverContent>
-    </Popover>
-  )
-}
-
-type DatePickerTriggerProps = Omit<
-  React.ComponentProps<"button">,
-  "children" | "value"
-> & {
-  density?: ControlDensity
-  icon?: React.ReactNode
-  open?: boolean
-  placeholder: React.ReactNode
-  value?: React.ReactNode
-}
-
-function DatePickerTrigger({
-  className,
-  density,
-  disabled,
-  icon,
-  onClick,
-  open,
-  placeholder,
-  type = "button",
-  value,
-  ...props
-}: DatePickerTriggerProps) {
-  const hasValue = hasRenderableContent(value)
-
-  return (
-    <button
-      aria-expanded={open || undefined}
-      data-date-picker-trigger=""
-      data-density={density ?? "comfortable"}
-      data-slot="date-picker-trigger"
-      disabled={disabled}
-      type={type}
-      className={cn(pickerTrigger({ density }), className)}
-      onClick={onClick}
-      {...props}
-    >
-      <span
-        aria-hidden="true"
-        data-slot="date-picker-trigger-icon"
-        className="flex size-[var(--bh-date-trigger-icon-size)] shrink-0 items-center justify-center text-[var(--bh-content-muted)] group-disabled/date-trigger:text-[var(--bh-content-disabled)] [&_svg:not([class*='size-'])]:size-[var(--bh-date-trigger-icon-size)]"
-      >
-        {icon ?? <CalendarDaysIcon strokeWidth="var(--bh-icon-stroke-180)" />}
-      </span>
-      <span
-        data-slot="date-picker-trigger-value"
-        dir="auto"
-        className={cn(
-          "min-w-0 flex-1 truncate text-start",
-          hasValue ? "text-[var(--bh-content-default)]" : "text-[var(--bh-content-muted)]",
-          disabled && "text-[var(--bh-content-disabled)]"
-        )}
-      >
-        {hasValue ? value : placeholder}
-      </span>
-    </button>
-  )
-}
-
-function CalendarMonth({
-  className,
-  displayMonth,
-  eventDates,
-  mode,
-  nextLabel,
-  onDisplayMonthChange,
-  onSelectDate,
-  onToggleView,
-  previousLabel,
-  range,
-  selectedDate,
-  showNextButton = true,
-  showPreviousButton = true,
-  showTime,
-  timeLabel,
-  timeValue,
-  title,
-  view = "days",
-}: {
-  className?: string
-  displayMonth: Date
-  eventDates?: Date[]
-  mode: CalendarMode
-  nextLabel: string
-  onDisplayMonthChange: (month: Date) => void
-  onSelectDate: (date: Date) => void
-  onToggleView?: () => void
-  previousLabel: string
-  range?: CalendarRange
-  selectedDate?: Date
-  showNextButton?: boolean
-  showPreviousButton?: boolean
-  showTime?: boolean
-  timeLabel: React.ReactNode
-  timeValue: CalendarTimeValue
-  title?: React.ReactNode
-  view?: CalendarView
-}) {
-  const cells = React.useMemo(() => getCalendarCells(displayMonth), [displayMonth])
-  const gridRef = React.useRef<HTMLDivElement>(null)
-  const titleId = React.useId()
-  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"
-      className={cn(
-        "flex shrink-0 flex-col items-start gap-[var(--bh-space-md-8)]",
-        className
-      )}
-    >
-      <div
-        data-slot="calendar-header"
-        className="flex w-full items-center gap-[var(--bh-space-md-8)]"
-      >
-        <button
-          aria-label={previousLabel}
-          disabled={!showPreviousButton || view === "month-year"}
-          type="button"
-          className={monthButton()}
-          onClick={() => onDisplayMonthChange(addMonths(displayMonth, -1))}
-        >
-          <ChevronLeftIcon aria-hidden="true" data-rtl-flip="true" />
-        </button>
-
-        {hasMonthToggle ? (
-          <button
-            aria-expanded={view === "month-year"}
-            data-slot="calendar-title"
-            id={titleId}
-            type="button"
-            className={calendarTitleButton({
-              active: view === "month-year",
-              framed: true,
-            })}
-            onClick={onToggleView}
-          >
-            <span className="min-w-0 truncate">{monthTitle}</span>
-            {view === "month-year" ? (
-              <ChevronUpIcon aria-hidden="true" className="size-[var(--bh-date-title-chevron-size)]" />
-            ) : (
-              <ChevronDownIcon aria-hidden="true" className="size-[var(--bh-date-title-chevron-size)]" />
-            )}
-          </button>
-        ) : (
-          <div
-            data-slot="calendar-title"
-            id={titleId}
-            className={calendarTitleButton({ framed: false })}
-          >
-            <span className="min-w-0 truncate">{monthTitle}</span>
-          </div>
-        )}
-
-        <button
-          aria-label={nextLabel}
-          disabled={!showNextButton || view === "month-year"}
-          type="button"
-          className={monthButton()}
-          onClick={() => onDisplayMonthChange(addMonths(displayMonth, 1))}
-        >
-          <ChevronRightIcon aria-hidden="true" data-rtl-flip="true" />
-        </button>
-      </div>
-
-      {view === "days" ? (
-        <>
-          <div
-            aria-colcount={7}
-            aria-labelledby={titleId}
-            aria-rowcount={Math.ceil(cells.length / 7) + 1}
-            data-slot="calendar-grid"
-            role="grid"
-            ref={gridRef}
-            className="grid w-full gap-[var(--bh-space-md-8)]"
-          >
-            <div
-              data-slot="calendar-weekdays"
-              role="row"
-              className="grid w-full grid-cols-7"
-            >
-              {defaultDayLabels.map((day) => (
-                <div
-                  aria-label={day.full}
-                  className="flex h-[var(--bh-date-day-cell-height)] min-w-0 items-center justify-center rounded-[var(--bh-radius-lg-8)] text-center text-[length:var(--bh-text-body-md-regular-font-size)] font-[var(--bh-text-body-md-regular-font-weight)] leading-[var(--bh-text-body-md-regular-line-height)] tracking-[var(--bh-text-body-md-regular-letter-spacing)] text-[var(--bh-content-subtle)]"
-                  key={day.full}
-                  role="columnheader"
-                >
-                  {day.short}
-                </div>
-              ))}
-            </div>
-
-            <div role="rowgroup" className="grid w-full">
-              {chunkCalendarRows(cells).map((row, rowIndex) => (
-                <div
-                  className="grid w-full grid-cols-7"
-                  key={row[0]?.date.toISOString() ?? rowIndex}
-                  role="row"
-                >
-                  {row.map((cell) => (
-                    <CalendarDayCell
-                      cell={cell}
-                      displayMonth={displayMonth}
-                      eventDates={eventDates}
-                      key={cell.date.toISOString()}
-                      mode={mode}
-                      onKeyboardNavigateDate={handleKeyboardNavigateDate}
-                      onSelectDate={onSelectDate}
-                      range={range}
-                      selectedDate={selectedDate}
-                    />
-                  ))}
-                </div>
-              ))}
-            </div>
-          </div>
-
-          {showTime ? (
-            <CalendarTime
-              label={timeLabel}
-              value={timeValue}
-            />
-          ) : null}
-        </>
-      ) : null}
-    </div>
-  )
-}
-
-function chunkCalendarRows(cells: CalendarCell[]) {
-  const rows: CalendarCell[][] = []
-
-  for (let index = 0; index < cells.length; index += 7) {
-    rows.push(cells.slice(index, index + 7))
-  }
-
-  return rows
-}
-
-function CalendarDayCell({
-  cell,
-  displayMonth,
-  eventDates,
-  mode,
-  onKeyboardNavigateDate,
-  onSelectDate,
-  range,
-  selectedDate,
-}: {
-  cell: CalendarCell
-  displayMonth: Date
-  eventDates?: Date[]
-  mode: CalendarMode
-  onKeyboardNavigateDate: (date: Date) => void
-  onSelectDate: (date: Date) => void
-  range?: CalendarRange
-  selectedDate?: Date
-}) {
-  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"
-      disabled={outside}
-      role="gridcell"
-      type="button"
-      className={cn(
-        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>
-  )
-}
-
-function CalendarTime({
-  label,
-  value,
-}: {
-  label: React.ReactNode
-  value: CalendarTimeValue
-}) {
-  const resolved = {
-    ...defaultTimeValue,
-    ...value,
-  }
-
-  return (
-    <div
-      data-slot="calendar-time"
-      className="flex w-full items-center gap-[var(--bh-space-5xl-24)] ps-[var(--bh-space-md-8)]"
-    >
-      <span
-        data-slot="calendar-time-label"
-        dir="auto"
-        className="shrink-0 text-[length:var(--bh-text-body-2xs-regular-font-size)] font-[var(--bh-text-body-2xs-regular-font-weight)] leading-[var(--bh-text-body-2xs-regular-line-height)] tracking-[var(--bh-text-body-2xs-regular-letter-spacing)] text-[var(--bh-content-subtle)]"
-      >
-        {label}
-      </span>
-      <span
-        data-slot="calendar-time-value"
-        className="flex min-h-[var(--bh-date-time-input-min-height)] min-w-0 flex-1 items-center gap-[var(--bh-space-xs-4)] rounded-[var(--bh-radius-lg-8)] bg-[var(--bh-interactive-input-default)] px-[var(--bh-space-md-8)] py-[var(--bh-space-sm-6)] shadow-[var(--shadow-date-time-input)]"
-      >
-        <CalendarTimeSegment active>{resolved.hours}</CalendarTimeSegment>
-        <span className="text-[var(--bh-content-subtle)]">:</span>
-        <CalendarTimeSegment>{resolved.minutes}</CalendarTimeSegment>
-        <CalendarTimeSegment>{resolved.period}</CalendarTimeSegment>
-        <CalendarTimeSegment subtle>{resolved.zone}</CalendarTimeSegment>
-      </span>
-    </div>
-  )
-}
-
-function CalendarTimeSegment({
-  active,
-  children,
-  subtle,
-}: {
-  active?: boolean
-  children: React.ReactNode
-  subtle?: boolean
-}) {
-  return (
-    <span
-      data-active={active ? "true" : undefined}
-      className={cn(
-        "inline-flex min-w-0 items-center justify-center rounded-[var(--bh-radius-sm-4)] px-[var(--bh-space-xxs-2)] text-[length:var(--bh-text-body-2xs-medium-font-size)] font-[var(--bh-text-body-2xs-medium-font-weight)] leading-[var(--bh-text-body-2xs-medium-line-height)] tracking-[var(--bh-text-body-2xs-medium-letter-spacing)]",
-        active && "bg-[var(--bh-interactive-ghost-hover)]",
-        subtle ? "text-[var(--bh-content-subtle)]" : "text-[var(--bh-content-default)]"
-      )}
-    >
-      {children}
-    </span>
-  )
-}
-
-function MonthYearList({
-  items,
-  onSelect,
-}: {
-  items: CalendarMonthYearItem[]
-  onSelect: (item: CalendarMonthYearItem) => void
-}) {
-  return (
-    <div
-      data-slot="calendar-month-year-list"
-      className="absolute bottom-[var(--bh-space-md-8)] left-1/2 top-[var(--bh-date-month-year-list-top)] flex w-[var(--bh-date-month-year-list-width)] -translate-x-1/2 flex-col justify-center overflow-hidden rounded-[var(--bh-radius-md-6)] bg-[var(--bh-bg-default)] p-[var(--bh-space-md-8)] shadow-[var(--shadow-date-month-year-list)] rtl:translate-x-1/2"
-    >
-      {items.map((item, index) => (
-        <button
-          className={cn(
-            "grid h-[var(--bh-date-month-year-item-height)] grid-cols-2 items-center rounded-[var(--bh-radius-md-6)] px-[var(--bh-space-md-8)] py-[var(--bh-space-xs-4)] text-center outline-none transition-colors",
-            "text-[length:var(--bh-text-body-md-regular-font-size)] font-[var(--bh-text-body-md-regular-font-weight)] leading-[var(--bh-text-body-md-regular-line-height)] tracking-[var(--bh-text-body-md-regular-letter-spacing)] text-[var(--bh-content-default)]",
-            "hover:bg-[var(--bh-interactive-ghost-hover)] focus-visible:bg-[var(--bh-interactive-ghost-hover)] disabled:text-[var(--bh-content-disabled)]",
-            item.selected && "bg-[var(--bh-interactive-ghost-hover)]"
-          )}
-          data-selected={item.selected ? "true" : undefined}
-          data-slot="calendar-month-year-item"
-          disabled={item.disabled || !item.value}
-          key={item.id || index}
-          onClick={() => onSelect(item)}
-          type="button"
-        >
-          <span className="truncate">{item.month}</span>
-          <span className="truncate">{item.year}</span>
-        </button>
-      ))}
-    </div>
-  )
-}
-
-function startOfDay(date: Date) {
-  return new Date(date.getFullYear(), date.getMonth(), date.getDate())
-}
-
-function addDays(date: Date, amount: number) {
-  const next = startOfDay(date)
-  next.setDate(next.getDate() + amount)
-  return next
-}
-
-function createDefaultPresets(today: Date): CalendarPreset[] {
-  const quarterStartMonth = Math.floor(today.getMonth() / 3) * 3
-
-  return [
-    { id: "today", label: "Today", range: { from: today, to: today } },
-    {
-      id: "last-7-days",
-      label: "Last 7 days",
-      range: { from: addDays(today, -6), to: today },
-    },
-    {
-      id: "last-14-days",
-      label: "Last 14 days",
-      range: { from: addDays(today, -13), to: today },
-    },
-    {
-      id: "last-30-days",
-      label: "Last 30 days",
-      range: { from: addDays(today, -29), to: today },
-    },
-    {
-      id: "last-3-months",
-      label: "Last 3 months",
-      range: { from: addMonths(today, -3), to: today },
-    },
-    {
-      id: "last-12-months",
-      label: "Last 12 months",
-      range: { from: addMonths(today, -12), to: today },
-    },
-    {
-      id: "quarter-to-date",
-      label: "Quarter to date",
-      range: {
-        from: new Date(today.getFullYear(), quarterStartMonth, 1),
-        to: today,
-      },
-    },
-    {
-      id: "year-to-date",
-      label: "Year to date",
-      range: { from: new Date(today.getFullYear(), 0, 1), to: today },
-    },
-  ]
-}
-
-function createMonthYearItems(
-  displayMonth: Date
-): CalendarMonthYearItem[] {
-  return Array.from({ length: 7 }, (_, index) => {
-    const value = addMonths(displayMonth, index - 3)
-
-    return {
-      id: `${value.getFullYear()}-${value.getMonth()}`,
-      month: new Intl.DateTimeFormat(undefined, { month: "long" }).format(value),
-      selected: index === 3,
-      value,
-      year: String(value.getFullYear()),
-    }
-  })
-}
-
-function getCurrentTimeValue(): Required<CalendarTimeValue> {
-  const now = new Date()
-  const timeParts = new Intl.DateTimeFormat("en-US", {
-    hour: "2-digit",
-    hour12: true,
-    minute: "2-digit",
-  }).formatToParts(now)
-  const zoneParts = new Intl.DateTimeFormat("en-US", {
-    timeZoneName: "short",
-  }).formatToParts(now)
-  const getPart = (parts: Intl.DateTimeFormatPart[], type: string) =>
-    parts.find((part) => part.type === type)?.value ?? ""
-
-  return {
-    hours: getPart(timeParts, "hour"),
-    minutes: getPart(timeParts, "minute"),
-    period: getPart(timeParts, "dayPeriod"),
-    zone: getPart(zoneParts, "timeZoneName") || "UTC",
-  }
-}
-
-function hasRenderableContent(content: React.ReactNode) {
-  return (
-    content !== undefined &&
-    content !== null &&
-    content !== false &&
-    content !== ""
-  )
-}
-
-export {
-  Calendar,
-  DatePicker,
-  DatePickerTrigger,
-  DateRangePicker,
-  RangeCalendar,
-  calendarSurface,
-  pickerTrigger,
-}
-export type {
-  CalendarMonthYearItem,
-  CalendarPreset,
-  CalendarProps,
-  CalendarRange,
-  CalendarTimeValue,
-  CalendarView,
-  DatePickerDirection,
-  DatePickerProps,
-  DatePickerTriggerProps,
-  DateRangePickerProps,
-  ControlDensity,
-  RangeCalendarProps,
-  RangeCalendarType,
-}
+"use client"
+
+import * as React from "react"
+import {
+  CalendarDaysIcon,
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  ChevronUpIcon,
+} from "lucide-react"
+import { cva } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+import { Popover, PopoverContent, PopoverTrigger } from "./popover"
+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 ControlDensity = "compact" | "default" | "comfortable"
+
+type CalendarTimeValue = {
+  hours?: string
+  minutes?: string
+  period?: string
+  zone?: string
+}
+
+type CalendarMonthYearItem = {
+  id?: string
+  month: React.ReactNode
+  year: React.ReactNode
+  value?: Date
+  selected?: boolean
+  disabled?: boolean
+}
+
+type CalendarPreset = {
+  id?: string
+  label: React.ReactNode
+  range?: CalendarRange
+  disabled?: boolean
+}
+
+type CalendarProps = Omit<
+  React.ComponentProps<"div">,
+  "defaultValue" | "dir" | "onSelect"
+> & {
+  defaultValue?: Date
+  dir?: DatePickerDirection
+  displayMonth?: Date
+  events?: Date[]
+  monthYearItems?: CalendarMonthYearItem[]
+  nextLabel?: string
+  onDisplayMonthChange?: (month: Date) => void
+  onSelect?: (date: Date) => void
+  onViewChange?: (view: CalendarView) => void
+  previousLabel?: string
+  selectedDate?: Date
+  showTime?: boolean
+  surfaceSize?: "calendar" | "picker"
+  timeLabel?: React.ReactNode
+  timeValue?: CalendarTimeValue
+  title?: React.ReactNode
+  value?: Date
+  view?: CalendarView
+}
+
+type RangeCalendarProps = Omit<
+  React.ComponentProps<"div">,
+  "defaultValue" | "dir" | "onSelect"
+> & {
+  defaultValue?: CalendarRange
+  dir?: DatePickerDirection
+  displayMonth?: Date
+  nextLabel?: string
+  onDisplayMonthChange?: (month: Date) => void
+  onPresetSelect?: (preset: CalendarPreset) => void
+  onSelect?: (range: CalendarRange) => void
+  presets?: CalendarPreset[]
+  previousLabel?: string
+  showPresets?: boolean
+  showTime?: boolean
+  timeLabel?: React.ReactNode
+  timeValue?: CalendarTimeValue
+  type?: RangeCalendarType
+  value?: CalendarRange
+}
+
+type DatePickerProps = Omit<
+  React.ComponentProps<"div">,
+  "defaultValue" | "dir" | "onSelect"
+> & {
+  calendarProps?: Omit<
+    CalendarProps,
+    "defaultValue" | "selectedDate" | "value"
+  >
+  defaultOpen?: boolean
+  defaultValue?: Date
+  density?: ControlDensity
+  dir?: DatePickerDirection
+  disabled?: boolean
+  icon?: React.ReactNode
+  onOpenChange?: (open: boolean) => void
+  onSelect?: (date: Date) => void
+  open?: boolean
+  placeholder?: React.ReactNode
+  triggerClassName?: string
+  triggerProps?: Omit<
+    DatePickerTriggerProps,
+    "density" | "icon" | "open" | "placeholder" | "value"
+  >
+  value?: Date
+}
+
+type DateRangePickerProps = Omit<
+  React.ComponentProps<"div">,
+  "defaultValue" | "dir" | "onSelect"
+> & {
+  calendarProps?: Omit<
+    RangeCalendarProps,
+    "defaultValue" | "type" | "value"
+  >
+  defaultOpen?: boolean
+  defaultValue?: CalendarRange
+  density?: ControlDensity
+  dir?: DatePickerDirection
+  disabled?: boolean
+  icon?: React.ReactNode
+  onOpenChange?: (open: boolean) => void
+  onSelect?: (range: CalendarRange) => void
+  open?: boolean
+  placeholder?: React.ReactNode
+  triggerClassName?: string
+  triggerProps?: Omit<
+    DatePickerTriggerProps,
+    "density" | "icon" | "open" | "placeholder" | "value"
+  >
+  type?: RangeCalendarType
+  value?: CalendarRange
+}
+
+const defaultTimeValue = getCurrentTimeValue()
+const defaultDayLabels = [
+  { full: "Sunday", short: "S" },
+  { full: "Monday", short: "M" },
+  { full: "Tuesday", short: "T" },
+  { full: "Wednesday", short: "W" },
+  { full: "Thursday", short: "T" },
+  { full: "Friday", short: "F" },
+  { full: "Saturday", short: "S" },
+] as const
+
+const calendarSurface = cva(
+  [
+    "relative bg-[var(--bh-bg-raised)]",
+    "[--bh-date-surface-border:var(--bh-border-subtle)]",
+    "shadow-[var(--elevation-date-surface)]",
+  ],
+  {
+    variants: {
+      layout: {
+        single:
+          "flex flex-col items-start rounded-[var(--bh-radius-2xl-12)] p-[var(--bh-space-md-8)]",
+        range:
+          "inline-flex max-w-[var(--bh-date-range-surface-max-width)] items-start gap-[var(--bh-space-3xl-16)] overflow-auto rounded-[var(--bh-radius-2xl-12)] p-[var(--bh-space-3xl-16)]",
+      },
+      surfaceSize: {
+        calendar: "w-[var(--bh-date-surface-width-calendar)]",
+        picker: "w-[var(--bh-date-surface-width-picker)]",
+      },
+    },
+    defaultVariants: {
+      layout: "single",
+      surfaceSize: "calendar",
+    },
+  }
+)
+
+const pickerTrigger = cva(
+  [
+    "group/date-trigger relative flex w-[var(--bh-date-trigger-width)] max-w-full items-center gap-[var(--bh-space-md-8)] rounded-[var(--bh-radius-lg-8)]",
+    "bg-[var(--bh-interactive-input-default)] text-start outline-none",
+    "[--bh-date-trigger-border:var(--bh-border-input)] [--bh-date-trigger-elevation:inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-date-trigger-border),var(--elevation-component-default)]",
+    "text-[length:var(--bh-text-body-md-regular-font-size)] font-[var(--bh-text-body-md-regular-font-weight)] leading-[var(--bh-text-body-md-regular-line-height)] tracking-[var(--bh-text-body-md-regular-letter-spacing)]",
+    "text-[var(--bh-content-default)] shadow-[var(--bh-date-trigger-elevation)] transition-[background-color,box-shadow]",
+    "hover:bg-[var(--bh-bg-default-hover)] focus-visible:shadow-[var(--elevation-input-focus-ring)]",
+    "disabled:pointer-events-none disabled:bg-[var(--bh-interactive-input-disabled)] disabled:text-[var(--bh-content-disabled)] disabled:shadow-[inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-border-disabled)]",
+  ],
+  {
+    variants: {
+      density: {
+        compact: "h-[var(--bh-button-xs-height)] px-[var(--bh-space-md-8)]",
+        default: "h-[var(--bh-button-sm-height)] px-[var(--bh-space-lg-10)]",
+        comfortable: "h-[var(--bh-date-trigger-height)] px-[var(--bh-space-xl-12)]",
+      },
+    },
+    defaultVariants: {
+      density: "comfortable",
+    },
+  }
+)
+
+const monthButton = cva(
+  [
+    "flex size-[var(--bh-date-nav-button-size)] shrink-0 items-center justify-center rounded-[var(--bh-control-default)]",
+    "bg-[var(--bh-interactive-soft-default)] text-[var(--bh-content-default)] outline-none transition-[background-color,box-shadow,color]",
+    "hover:bg-[var(--bh-interactive-soft-hover)] focus-visible:shadow-[var(--elevation-button-focus)] disabled:opacity-[var(--bh-opacity-0)]",
+    "[&_[data-slot=date-picker-nav-icon]>svg]:size-[var(--bh-date-nav-icon-size)]",
+  ]
+)
+
+const calendarTitleButton = cva(
+  [
+    "flex h-[var(--bh-date-title-height)] min-w-0 flex-1 items-center justify-center gap-[var(--bh-space-xs-4)] rounded-[var(--bh-radius-lg-8)]",
+    "px-[var(--bh-space-md-8)] text-center outline-none transition-[background-color,box-shadow]",
+    "text-[length:var(--bh-text-body-md-medium-font-size)] font-[var(--bh-text-body-md-medium-font-weight)] leading-[var(--bh-text-body-md-medium-line-height)] tracking-[var(--bh-text-body-md-medium-letter-spacing)] text-[var(--bh-content-default)]",
+    "hover:bg-[var(--bh-interactive-ghost-hover)] focus-visible:shadow-[var(--elevation-button-focus)]",
+  ],
+  {
+    variants: {
+      framed: {
+        true:
+          "shadow-[inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-border-subtle)]",
+        false: "",
+      },
+      active: {
+        true: "bg-[var(--bh-interactive-ghost-hover)]",
+        false: "",
+      },
+    },
+    defaultVariants: {
+      active: false,
+      framed: false,
+    },
+  }
+)
+
+const dayCellButton = cva(
+  [
+    "relative flex h-[var(--bh-date-day-cell-height)] min-w-0 flex-1 items-center justify-center text-center outline-none",
+    "text-[length:var(--bh-text-body-md-regular-font-size)] font-[var(--bh-text-body-md-regular-font-weight)] leading-[var(--bh-text-body-md-regular-line-height)] tracking-[var(--bh-text-body-md-regular-letter-spacing)]",
+    "transition-[background-color,color,box-shadow] focus-visible:z-[var(--bh-z-raised)] focus-visible:shadow-[var(--elevation-button-focus)]",
+  ],
+  {
+    variants: {
+      state: {
+        default:
+          "rounded-[var(--bh-control-default)] text-[var(--bh-content-default)] hover:bg-[var(--bh-interactive-ghost-hover)]",
+        outside:
+          "rounded-[var(--bh-control-default)] text-[var(--bh-content-disabled)]",
+        event:
+          "rounded-[var(--bh-control-default)] text-[var(--bh-content-brand-default)] after:absolute after:bottom-[var(--bh-date-event-dot-offset-bottom)] after:left-1/2 after:size-[var(--bh-date-event-dot-size)] after:-translate-x-1/2 after:rounded-[var(--bh-radius-full)] after:bg-[var(--bh-content-brand-default)] rtl:after:translate-x-1/2",
+        selected:
+          "rounded-[var(--bh-control-default)] bg-[var(--bh-bg-brand-bold)] text-[var(--bh-content-on-brand)] hover:bg-[var(--bh-bg-brand-bold)] hover:shadow-[inset_0_0_0_var(--bh-border-width-default)_var(--bh-border-focus)]",
+        range:
+          "rounded-none bg-[var(--bh-bg-brand-subtle)] text-[var(--bh-content-brand-strong)] hover:bg-[var(--bh-bg-brand-subtle)]",
+      },
+    },
+    defaultVariants: {
+      state: "default",
+    },
+  }
+)
+
+const dateListItem = cva(
+  [
+    "flex h-[var(--bh-date-list-item-height)] w-full items-center rounded-[var(--bh-radius-lg-8)] px-[var(--bh-space-md-8)] py-[var(--bh-space-sm-6)] text-start outline-none",
+    "text-[length:var(--bh-text-body-md-medium-font-size)] font-[var(--bh-text-body-md-medium-font-weight)] leading-[var(--bh-text-body-md-medium-line-height)] tracking-[var(--bh-text-body-md-medium-letter-spacing)]",
+    "text-[var(--bh-content-default)] transition-colors hover:bg-[var(--bh-interactive-ghost-hover)] focus-visible:bg-[var(--bh-interactive-ghost-hover)] disabled:pointer-events-none disabled:text-[var(--bh-content-disabled)]",
+  ]
+)
+
+function Calendar({
+  className,
+  defaultValue,
+  dir,
+  displayMonth,
+  events,
+  monthYearItems,
+  nextLabel = "Next month",
+  onDisplayMonthChange,
+  onSelect,
+  onViewChange,
+  previousLabel = "Previous month",
+  selectedDate,
+  showTime = false,
+  surfaceSize = "calendar",
+  timeLabel = "Time",
+  timeValue = defaultTimeValue,
+  title,
+  value,
+  view,
+  ...props
+}: CalendarProps) {
+  const controlledValue = value ?? selectedDate
+  const [internalValue, setInternalValue] = React.useState(defaultValue)
+  const [internalDisplayMonth, setInternalDisplayMonth] = React.useState(() =>
+    startOfMonth(displayMonth ?? controlledValue ?? defaultValue ?? new Date())
+  )
+  const [internalView, setInternalView] = React.useState<CalendarView>("days")
+  const selected = controlledValue ?? internalValue
+  const activeDisplayMonth = startOfMonth(displayMonth ?? internalDisplayMonth)
+  const activeView = view ?? internalView
+  const eventDates = events ?? []
+  const resolvedMonthYearItems =
+    monthYearItems ?? createMonthYearItems(activeDisplayMonth)
+
+  function updateDisplayMonth(nextMonth: Date) {
+    const normalized = startOfMonth(nextMonth)
+    if (displayMonth === undefined) {
+      setInternalDisplayMonth(normalized)
+    }
+    onDisplayMonthChange?.(normalized)
+  }
+
+  function updateView(nextView: CalendarView) {
+    if (view === undefined) {
+      setInternalView(nextView)
+    }
+    onViewChange?.(nextView)
+  }
+
+  function selectDate(nextDate: Date) {
+    if (value === undefined && selectedDate === undefined) {
+      setInternalValue(nextDate)
+    }
+    onSelect?.(nextDate)
+  }
+
+  return (
+    <div
+      data-slot="calendar"
+      data-view={activeView}
+      dir={dir}
+      className={cn(calendarSurface({ layout: "single", surfaceSize }), className)}
+      {...props}
+    >
+      <CalendarMonth
+        displayMonth={activeDisplayMonth}
+        eventDates={eventDates}
+        mode="single"
+        className="w-full"
+        nextLabel={nextLabel}
+        onDisplayMonthChange={updateDisplayMonth}
+        onSelectDate={selectDate}
+        onToggleView={() =>
+          updateView(activeView === "days" ? "month-year" : "days")
+        }
+        previousLabel={previousLabel}
+        selectedDate={selected}
+        showTime={showTime && activeView === "days"}
+        timeLabel={timeLabel}
+        timeValue={timeValue}
+        title={title}
+        view={activeView}
+      />
+
+      {activeView === "month-year" ? (
+        <>
+          <div aria-hidden="true" className="h-[var(--bh-date-month-year-spacer-height)] w-full" />
+          <MonthYearList
+            items={resolvedMonthYearItems}
+            onSelect={(item) => {
+              if (!item.value) return
+              updateDisplayMonth(item.value)
+              updateView("days")
+            }}
+          />
+        </>
+      ) : null}
+    </div>
+  )
+}
+
+function RangeCalendar({
+  className,
+  defaultValue = {},
+  dir,
+  displayMonth,
+  nextLabel = "Next month",
+  onDisplayMonthChange,
+  onPresetSelect,
+  onSelect,
+  presets,
+  previousLabel = "Previous month",
+  showPresets,
+  showTime = false,
+  timeLabel = "Time",
+  timeValue = defaultTimeValue,
+  type = "double",
+  value,
+  ...props
+}: RangeCalendarProps) {
+  const [internalRange, setInternalRange] = React.useState(defaultValue)
+  const [internalDisplayMonth, setInternalDisplayMonth] = React.useState(() =>
+    startOfMonth(displayMonth ?? defaultValue.from ?? new Date())
+  )
+  const [presetReferenceDate] = React.useState(() => startOfDay(new Date()))
+  const selectedRange = normalizeRange(value ?? internalRange)
+  const activeDisplayMonth = startOfMonth(displayMonth ?? internalDisplayMonth)
+  const monthsToRender = type === "single" ? 1 : 2
+  const shouldShowPresets = showPresets ?? type === "double-with-presets"
+  const presetItems = presets ?? createDefaultPresets(presetReferenceDate)
+  const monthNodes = Array.from({ length: monthsToRender }, (_, index) =>
+    addMonths(activeDisplayMonth, index)
+  )
+
+  function updateDisplayMonth(nextMonth: Date) {
+    const normalized = startOfMonth(nextMonth)
+    if (displayMonth === undefined) {
+      setInternalDisplayMonth(normalized)
+    }
+    onDisplayMonthChange?.(normalized)
+  }
+
+  function selectRangeDate(nextDate: Date) {
+    const nextRange = getNextRange(selectedRange, nextDate)
+    if (value === undefined) {
+      setInternalRange(nextRange)
+    }
+    onSelect?.(nextRange)
+  }
+
+  function selectPreset(preset: CalendarPreset) {
+    if (preset.disabled) return
+    if (preset.range) {
+      const nextRange = normalizeRange(preset.range)
+      if (value === undefined) {
+        setInternalRange(nextRange)
+      }
+      onSelect?.(nextRange)
+    }
+    onPresetSelect?.(preset)
+  }
+
+  return (
+    <div
+      data-slot="range-calendar"
+      data-type={type}
+      dir={dir}
+      className={cn(calendarSurface({ layout: "range" }), className)}
+      {...props}
+    >
+      {shouldShowPresets ? (
+        <div
+          data-slot="range-calendar-presets"
+          className="grid w-[var(--bh-date-presets-width)] shrink-0 border-e border-[var(--bh-border-subtle)] pe-[var(--bh-space-md-8)]"
+        >
+          {presetItems.map((preset, index) => {
+            const disabled =
+              Boolean(preset.disabled) ||
+              (!preset.range && onPresetSelect === undefined)
+
+            return (
+            <button
+              aria-disabled={disabled || undefined}
+              className={dateListItem()}
+              data-slot="range-calendar-preset"
+              disabled={disabled}
+              key={preset.id || index}
+              type="button"
+              onClick={() => selectPreset(preset)}
+            >
+              <span dir="auto" className="min-w-0 truncate">
+                {preset.label}
+              </span>
+            </button>
+            )
+          })}
+        </div>
+      ) : null}
+
+      <div
+        data-slot="range-calendar-months"
+        className="flex min-w-max gap-[var(--bh-space-3xl-16)]"
+      >
+        {monthNodes.map((month, index) => (
+          <CalendarMonth
+            displayMonth={month}
+            key={month.toISOString()}
+            mode="range"
+            className="w-[var(--bh-date-range-month-width)]"
+            nextLabel={nextLabel}
+            onDisplayMonthChange={updateDisplayMonth}
+            onSelectDate={selectRangeDate}
+            previousLabel={previousLabel}
+            range={selectedRange}
+            showNextButton={index === monthNodes.length - 1}
+            showPreviousButton={index === 0}
+            showTime={showTime}
+            timeLabel={timeLabel}
+            timeValue={timeValue}
+          />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+function DatePicker({
+  calendarProps,
+  className,
+  defaultOpen = false,
+  defaultValue,
+  density,
+  dir,
+  disabled,
+  icon,
+  onOpenChange,
+  onSelect,
+  open,
+  placeholder = "Select date",
+  triggerClassName,
+  triggerProps,
+  value,
+  ...props
+}: DatePickerProps) {
+  const [internalOpen, setInternalOpen] = React.useState(defaultOpen)
+  const [internalValue, setInternalValue] = React.useState(defaultValue)
+  const [internalDisplayMonth, setInternalDisplayMonth] = React.useState(() =>
+    startOfMonth(value ?? defaultValue ?? new Date())
+  )
+  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) {
+      setInternalOpen(nextOpen)
+    }
+    onOpenChange?.(nextOpen)
+  }
+
+  function selectDate(nextDate: Date) {
+    if (value === undefined) {
+      setInternalValue(nextDate)
+    }
+    onSelect?.(nextDate)
+  }
+
+  function updateDisplayMonth(nextMonth: Date) {
+    const normalized = startOfMonth(nextMonth)
+    if (calendarProps?.displayMonth === undefined) {
+      setInternalDisplayMonth(normalized)
+    }
+    calendarProps?.onDisplayMonthChange?.(normalized)
+  }
+
+  return (
+    <Popover
+      open={isOpen}
+      onOpenChange={updateOpen}
+      data-open={isOpen ? "true" : "false"}
+      data-slot="date-picker"
+      dir={dir}
+      className={cn("relative w-[var(--bh-date-picker-width)] max-w-full", className)}
+      {...props}
+    >
+      <PopoverTrigger asChild>
+        <DatePickerTrigger
+          {...triggerProps}
+          disabled={disabled ?? triggerProps?.disabled}
+          density={density}
+          icon={icon}
+          open={isOpen}
+          placeholder={placeholder}
+          value={selected ? formatCalendarDate(selected, { month: "long" }) : undefined}
+          className={cn(triggerClassName, triggerProps?.className)}
+        />
+      </PopoverTrigger>
+
+      <PopoverContent
+        align="center"
+        showArrow={false}
+        size="auto"
+        className="w-auto bg-transparent p-0 shadow-none"
+      >
+        <Calendar
+          {...calendarProps}
+          defaultValue={defaultValue}
+          displayMonth={calendarProps?.displayMonth ?? internalDisplayMonth}
+          selectedDate={selected}
+          surfaceSize="picker"
+          className={calendarProps?.className}
+          dir={calendarProps?.dir ?? dir}
+          onDisplayMonthChange={updateDisplayMonth}
+          onSelect={(nextDate) => {
+            selectDate(nextDate)
+            calendarProps?.onSelect?.(nextDate)
+          }}
+        />
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+function DateRangePicker({
+  calendarProps,
+  className,
+  defaultOpen = false,
+  defaultValue,
+  density,
+  dir,
+  disabled,
+  icon,
+  onOpenChange,
+  onSelect,
+  open,
+  placeholder = "Select date range",
+  triggerClassName,
+  triggerProps,
+  type = "double",
+  value,
+  ...props
+}: DateRangePickerProps) {
+  const [internalOpen, setInternalOpen] = React.useState(defaultOpen)
+  const [internalValue, setInternalValue] = React.useState(defaultValue)
+  const selectedRange = normalizeRange(value ?? internalValue ?? {})
+  const isOpen = open ?? internalOpen
+  const [internalDisplayMonth, setInternalDisplayMonth] = React.useState(() =>
+    startOfMonth(selectedRange.from ?? defaultValue?.from ?? new Date())
+  )
+  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) {
+      setInternalOpen(nextOpen)
+    }
+    onOpenChange?.(nextOpen)
+  }
+
+  function selectRange(nextRange: CalendarRange) {
+    if (value === undefined) {
+      setInternalValue(nextRange)
+    }
+    onSelect?.(nextRange)
+  }
+
+  function updateDisplayMonth(nextMonth: Date) {
+    const normalized = startOfMonth(nextMonth)
+    if (calendarProps?.displayMonth === undefined) {
+      setInternalDisplayMonth(normalized)
+    }
+    calendarProps?.onDisplayMonthChange?.(normalized)
+  }
+
+  return (
+    <Popover
+      open={isOpen}
+      onOpenChange={updateOpen}
+      data-open={isOpen ? "true" : "false"}
+      data-slot="date-range-picker"
+      data-type={type}
+      dir={dir}
+      className={cn("relative w-[var(--bh-date-picker-width)] max-w-full", className)}
+      {...props}
+    >
+      <PopoverTrigger asChild>
+        <DatePickerTrigger
+          {...triggerProps}
+          disabled={disabled ?? triggerProps?.disabled}
+          density={density}
+          icon={icon}
+          open={isOpen}
+          placeholder={placeholder}
+          value={formatCalendarRange(selectedRange)}
+          className={cn(triggerClassName, triggerProps?.className)}
+        />
+      </PopoverTrigger>
+
+      <PopoverContent
+        align="center"
+        showArrow={false}
+        size="auto"
+        className="w-auto bg-transparent p-0 shadow-none"
+      >
+        <RangeCalendar
+          {...calendarProps}
+          defaultValue={defaultValue ?? {}}
+          displayMonth={calendarProps?.displayMonth ?? internalDisplayMonth}
+          type={type}
+          value={selectedRange}
+          className={calendarProps?.className}
+          dir={calendarProps?.dir ?? dir}
+          onDisplayMonthChange={updateDisplayMonth}
+          onSelect={(nextRange) => {
+            selectRange(nextRange)
+            calendarProps?.onSelect?.(nextRange)
+          }}
+        />
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+type DatePickerTriggerProps = Omit<
+  React.ComponentProps<"button">,
+  "children" | "value"
+> & {
+  density?: ControlDensity
+  icon?: React.ReactNode
+  open?: boolean
+  placeholder: React.ReactNode
+  value?: React.ReactNode
+}
+
+function DatePickerTrigger({
+  className,
+  density,
+  disabled,
+  icon,
+  onClick,
+  open,
+  placeholder,
+  type = "button",
+  value,
+  ...props
+}: DatePickerTriggerProps) {
+  const hasValue = hasRenderableContent(value)
+
+  return (
+    <button
+      aria-expanded={open || undefined}
+      data-date-picker-trigger=""
+      data-density={density ?? "comfortable"}
+      data-slot="date-picker-trigger"
+      disabled={disabled}
+      type={type}
+      className={cn(pickerTrigger({ density }), className)}
+      onClick={onClick}
+      {...props}
+    >
+      <span
+        aria-hidden="true"
+        data-slot="date-picker-trigger-icon"
+        className="flex size-[var(--bh-date-trigger-icon-slot-size)] shrink-0 items-center justify-center text-[var(--bh-content-muted)] group-disabled/date-trigger:text-[var(--bh-content-disabled)] [&_svg:not([class*='size-'])]:size-[var(--bh-date-trigger-icon-size)]"
+      >
+        {icon ?? <CalendarDaysIcon strokeWidth="var(--bh-icon-stroke-180)" />}
+      </span>
+      <span
+        data-slot="date-picker-trigger-value"
+        dir="auto"
+        className={cn(
+          "min-w-0 flex-1 truncate text-start",
+          hasValue ? "text-[var(--bh-content-default)]" : "text-[var(--bh-content-muted)]",
+          disabled && "text-[var(--bh-content-disabled)]"
+        )}
+      >
+        {hasValue ? value : placeholder}
+      </span>
+    </button>
+  )
+}
+
+function CalendarMonth({
+  className,
+  displayMonth,
+  eventDates,
+  mode,
+  nextLabel,
+  onDisplayMonthChange,
+  onSelectDate,
+  onToggleView,
+  previousLabel,
+  range,
+  selectedDate,
+  showNextButton = true,
+  showPreviousButton = true,
+  showTime,
+  timeLabel,
+  timeValue,
+  title,
+  view = "days",
+}: {
+  className?: string
+  displayMonth: Date
+  eventDates?: Date[]
+  mode: CalendarMode
+  nextLabel: string
+  onDisplayMonthChange: (month: Date) => void
+  onSelectDate: (date: Date) => void
+  onToggleView?: () => void
+  previousLabel: string
+  range?: CalendarRange
+  selectedDate?: Date
+  showNextButton?: boolean
+  showPreviousButton?: boolean
+  showTime?: boolean
+  timeLabel: React.ReactNode
+  timeValue: CalendarTimeValue
+  title?: React.ReactNode
+  view?: CalendarView
+}) {
+  const cells = React.useMemo(() => getCalendarCells(displayMonth), [displayMonth])
+  const gridRef = React.useRef<HTMLDivElement>(null)
+  const titleId = React.useId()
+  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"
+      className={cn(
+        "flex shrink-0 flex-col items-start gap-[var(--bh-space-md-8)]",
+        className
+      )}
+    >
+      <div
+        data-slot="calendar-header"
+        className="flex w-full items-center gap-[var(--bh-space-md-8)]"
+      >
+        <button
+          aria-label={previousLabel}
+          disabled={!showPreviousButton || view === "month-year"}
+          type="button"
+          className={monthButton()}
+          onClick={() => onDisplayMonthChange(addMonths(displayMonth, -1))}
+        >
+          <span
+            aria-hidden="true"
+            data-slot="date-picker-nav-icon"
+            className="inline-flex size-[var(--bh-date-nav-icon-slot-size)] items-center justify-center"
+          >
+            <ChevronLeftIcon data-rtl-flip="true" />
+          </span>
+        </button>
+
+        {hasMonthToggle ? (
+          <button
+            aria-expanded={view === "month-year"}
+            data-slot="calendar-title"
+            id={titleId}
+            type="button"
+            className={calendarTitleButton({
+              active: view === "month-year",
+              framed: true,
+            })}
+            onClick={onToggleView}
+          >
+            <span className="min-w-0 truncate">{monthTitle}</span>
+            {view === "month-year" ? (
+              <ChevronUpIcon aria-hidden="true" className="size-[var(--bh-date-title-chevron-size)]" />
+            ) : (
+              <ChevronDownIcon aria-hidden="true" className="size-[var(--bh-date-title-chevron-size)]" />
+            )}
+          </button>
+        ) : (
+          <div
+            data-slot="calendar-title"
+            id={titleId}
+            className={calendarTitleButton({ framed: false })}
+          >
+            <span className="min-w-0 truncate">{monthTitle}</span>
+          </div>
+        )}
+
+        <button
+          aria-label={nextLabel}
+          disabled={!showNextButton || view === "month-year"}
+          type="button"
+          className={monthButton()}
+          onClick={() => onDisplayMonthChange(addMonths(displayMonth, 1))}
+        >
+          <span
+            aria-hidden="true"
+            data-slot="date-picker-nav-icon"
+            className="inline-flex size-[var(--bh-date-nav-icon-slot-size)] items-center justify-center"
+          >
+            <ChevronRightIcon data-rtl-flip="true" />
+          </span>
+        </button>
+      </div>
+
+      {view === "days" ? (
+        <>
+          <div
+            aria-colcount={7}
+            aria-labelledby={titleId}
+            aria-rowcount={Math.ceil(cells.length / 7) + 1}
+            data-slot="calendar-grid"
+            role="grid"
+            ref={gridRef}
+            className="grid w-full gap-[var(--bh-space-md-8)]"
+          >
+            <div
+              data-slot="calendar-weekdays"
+              role="row"
+              className="grid w-full grid-cols-7"
+            >
+              {defaultDayLabels.map((day) => (
+                <div
+                  aria-label={day.full}
+                  className="flex h-[var(--bh-date-day-cell-height)] min-w-0 items-center justify-center rounded-[var(--bh-radius-lg-8)] text-center text-[length:var(--bh-text-body-md-regular-font-size)] font-[var(--bh-text-body-md-regular-font-weight)] leading-[var(--bh-text-body-md-regular-line-height)] tracking-[var(--bh-text-body-md-regular-letter-spacing)] text-[var(--bh-content-subtle)]"
+                  key={day.full}
+                  role="columnheader"
+                >
+                  {day.short}
+                </div>
+              ))}
+            </div>
+
+            <div role="rowgroup" className="grid w-full">
+              {chunkCalendarRows(cells).map((row, rowIndex) => (
+                <div
+                  className="grid w-full grid-cols-7"
+                  key={row[0]?.date.toISOString() ?? rowIndex}
+                  role="row"
+                >
+                  {row.map((cell) => (
+                    <CalendarDayCell
+                      cell={cell}
+                      displayMonth={displayMonth}
+                      eventDates={eventDates}
+                      key={cell.date.toISOString()}
+                      mode={mode}
+                      onKeyboardNavigateDate={handleKeyboardNavigateDate}
+                      onSelectDate={onSelectDate}
+                      range={range}
+                      selectedDate={selectedDate}
+                    />
+                  ))}
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {showTime ? (
+            <CalendarTime
+              label={timeLabel}
+              value={timeValue}
+            />
+          ) : null}
+        </>
+      ) : null}
+    </div>
+  )
+}
+
+function chunkCalendarRows(cells: CalendarCell[]) {
+  const rows: CalendarCell[][] = []
+
+  for (let index = 0; index < cells.length; index += 7) {
+    rows.push(cells.slice(index, index + 7))
+  }
+
+  return rows
+}
+
+function CalendarDayCell({
+  cell,
+  displayMonth,
+  eventDates,
+  mode,
+  onKeyboardNavigateDate,
+  onSelectDate,
+  range,
+  selectedDate,
+}: {
+  cell: CalendarCell
+  displayMonth: Date
+  eventDates?: Date[]
+  mode: CalendarMode
+  onKeyboardNavigateDate: (date: Date) => void
+  onSelectDate: (date: Date) => void
+  range?: CalendarRange
+  selectedDate?: Date
+}) {
+  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"
+      disabled={outside}
+      role="gridcell"
+      type="button"
+      className={cn(
+        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>
+  )
+}
+
+function CalendarTime({
+  label,
+  value,
+}: {
+  label: React.ReactNode
+  value: CalendarTimeValue
+}) {
+  const resolved = {
+    ...defaultTimeValue,
+    ...value,
+  }
+
+  return (
+    <div
+      data-slot="calendar-time"
+      className="flex w-full items-center gap-[var(--bh-space-5xl-24)] ps-[var(--bh-space-md-8)]"
+    >
+      <span
+        data-slot="calendar-time-label"
+        dir="auto"
+        className="shrink-0 text-[length:var(--bh-text-body-2xs-regular-font-size)] font-[var(--bh-text-body-2xs-regular-font-weight)] leading-[var(--bh-text-body-2xs-regular-line-height)] tracking-[var(--bh-text-body-2xs-regular-letter-spacing)] text-[var(--bh-content-subtle)]"
+      >
+        {label}
+      </span>
+      <span
+        data-slot="calendar-time-value"
+        className="flex min-h-[var(--bh-date-time-input-min-height)] min-w-0 flex-1 items-center gap-[var(--bh-space-xs-4)] rounded-[var(--bh-radius-lg-8)] bg-[var(--bh-interactive-input-default)] px-[var(--bh-space-md-8)] py-[var(--bh-space-sm-6)] shadow-[var(--elevation-date-time-input)]"
+      >
+        <CalendarTimeSegment active>{resolved.hours}</CalendarTimeSegment>
+        <span className="text-[var(--bh-content-subtle)]">:</span>
+        <CalendarTimeSegment>{resolved.minutes}</CalendarTimeSegment>
+        <CalendarTimeSegment>{resolved.period}</CalendarTimeSegment>
+        <CalendarTimeSegment subtle>{resolved.zone}</CalendarTimeSegment>
+      </span>
+    </div>
+  )
+}
+
+function CalendarTimeSegment({
+  active,
+  children,
+  subtle,
+}: {
+  active?: boolean
+  children: React.ReactNode
+  subtle?: boolean
+}) {
+  return (
+    <span
+      data-active={active ? "true" : undefined}
+      className={cn(
+        "inline-flex min-w-0 items-center justify-center rounded-[var(--bh-radius-sm-4)] px-[var(--bh-space-xxs-2)] text-[length:var(--bh-text-body-2xs-medium-font-size)] font-[var(--bh-text-body-2xs-medium-font-weight)] leading-[var(--bh-text-body-2xs-medium-line-height)] tracking-[var(--bh-text-body-2xs-medium-letter-spacing)]",
+        active && "bg-[var(--bh-interactive-ghost-hover)]",
+        subtle ? "text-[var(--bh-content-subtle)]" : "text-[var(--bh-content-default)]"
+      )}
+    >
+      {children}
+    </span>
+  )
+}
+
+function MonthYearList({
+  items,
+  onSelect,
+}: {
+  items: CalendarMonthYearItem[]
+  onSelect: (item: CalendarMonthYearItem) => void
+}) {
+  return (
+    <div
+      data-slot="calendar-month-year-list"
+      className="absolute bottom-[var(--bh-space-md-8)] left-1/2 top-[var(--bh-date-month-year-list-top)] flex w-[var(--bh-date-month-year-list-width)] -translate-x-1/2 flex-col justify-center overflow-hidden rounded-[var(--bh-radius-md-6)] bg-[var(--bh-bg-default)] p-[var(--bh-space-md-8)] shadow-[var(--elevation-date-month-year-list)] rtl:translate-x-1/2"
+    >
+      {items.map((item, index) => (
+        <button
+          className={cn(
+            "grid h-[var(--bh-date-month-year-item-height)] grid-cols-2 items-center rounded-[var(--bh-radius-md-6)] px-[var(--bh-space-md-8)] py-[var(--bh-space-xs-4)] text-center outline-none transition-colors",
+            "text-[length:var(--bh-text-body-md-regular-font-size)] font-[var(--bh-text-body-md-regular-font-weight)] leading-[var(--bh-text-body-md-regular-line-height)] tracking-[var(--bh-text-body-md-regular-letter-spacing)] text-[var(--bh-content-default)]",
+            "hover:bg-[var(--bh-interactive-ghost-hover)] focus-visible:bg-[var(--bh-interactive-ghost-hover)] disabled:text-[var(--bh-content-disabled)]",
+            item.selected && "bg-[var(--bh-interactive-ghost-hover)]"
+          )}
+          data-selected={item.selected ? "true" : undefined}
+          data-slot="calendar-month-year-item"
+          disabled={item.disabled || !item.value}
+          key={item.id || index}
+          onClick={() => onSelect(item)}
+          type="button"
+        >
+          <span className="truncate">{item.month}</span>
+          <span className="truncate">{item.year}</span>
+        </button>
+      ))}
+    </div>
+  )
+}
+
+function startOfDay(date: Date) {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate())
+}
+
+function addDays(date: Date, amount: number) {
+  const next = startOfDay(date)
+  next.setDate(next.getDate() + amount)
+  return next
+}
+
+function createDefaultPresets(today: Date): CalendarPreset[] {
+  const quarterStartMonth = Math.floor(today.getMonth() / 3) * 3
+
+  return [
+    { id: "today", label: "Today", range: { from: today, to: today } },
+    {
+      id: "last-7-days",
+      label: "Last 7 days",
+      range: { from: addDays(today, -6), to: today },
+    },
+    {
+      id: "last-14-days",
+      label: "Last 14 days",
+      range: { from: addDays(today, -13), to: today },
+    },
+    {
+      id: "last-30-days",
+      label: "Last 30 days",
+      range: { from: addDays(today, -29), to: today },
+    },
+    {
+      id: "last-3-months",
+      label: "Last 3 months",
+      range: { from: addMonths(today, -3), to: today },
+    },
+    {
+      id: "last-12-months",
+      label: "Last 12 months",
+      range: { from: addMonths(today, -12), to: today },
+    },
+    {
+      id: "quarter-to-date",
+      label: "Quarter to date",
+      range: {
+        from: new Date(today.getFullYear(), quarterStartMonth, 1),
+        to: today,
+      },
+    },
+    {
+      id: "year-to-date",
+      label: "Year to date",
+      range: { from: new Date(today.getFullYear(), 0, 1), to: today },
+    },
+  ]
+}
+
+function createMonthYearItems(
+  displayMonth: Date
+): CalendarMonthYearItem[] {
+  return Array.from({ length: 7 }, (_, index) => {
+    const value = addMonths(displayMonth, index - 3)
+
+    return {
+      id: `${value.getFullYear()}-${value.getMonth()}`,
+      month: new Intl.DateTimeFormat(undefined, { month: "long" }).format(value),
+      selected: index === 3,
+      value,
+      year: String(value.getFullYear()),
+    }
+  })
+}
+
+function getCurrentTimeValue(): Required<CalendarTimeValue> {
+  const now = new Date()
+  const timeParts = new Intl.DateTimeFormat("en-US", {
+    hour: "2-digit",
+    hour12: true,
+    minute: "2-digit",
+  }).formatToParts(now)
+  const zoneParts = new Intl.DateTimeFormat("en-US", {
+    timeZoneName: "short",
+  }).formatToParts(now)
+  const getPart = (parts: Intl.DateTimeFormatPart[], type: string) =>
+    parts.find((part) => part.type === type)?.value ?? ""
+
+  return {
+    hours: getPart(timeParts, "hour"),
+    minutes: getPart(timeParts, "minute"),
+    period: getPart(timeParts, "dayPeriod"),
+    zone: getPart(zoneParts, "timeZoneName") || "UTC",
+  }
+}
+
+function hasRenderableContent(content: React.ReactNode) {
+  return (
+    content !== undefined &&
+    content !== null &&
+    content !== false &&
+    content !== ""
+  )
+}
+
+export {
+  Calendar,
+  DatePicker,
+  DatePickerTrigger,
+  DateRangePicker,
+  RangeCalendar,
+  calendarSurface,
+  pickerTrigger,
+}
+export type {
+  CalendarMonthYearItem,
+  CalendarPreset,
+  CalendarProps,
+  CalendarRange,
+  CalendarTimeValue,
+  CalendarView,
+  DatePickerDirection,
+  DatePickerProps,
+  DatePickerTriggerProps,
+  DateRangePickerProps,
+  ControlDensity,
+  RangeCalendarProps,
+  RangeCalendarType,
+}