tembro 3.0.0 → 3.1.1

package/packages/cli/vendor/src/components/calendar/calendar.tsx

@@ -26,23 +26,23 @@ export type CalendarDateRange = {
 
 export type CalendarDisabledReason = "disabled" | "min" | "max" | "range"
 
-export type CalendarLabels = {
-  previousMonth?: string
-  nextMonth?: string
-  today?: string
-  clear?: string
-  selectDate?: (date: string) => string
-  disabledDate?: (date: string, reason: CalendarDisabledReason) => string
-}
-
-export type CalendarSummaryState = {
-  mode: "single" | "range"
-  value?: string | null
-  range?: CalendarDateRange
-  locale: string
-}
-
-export type CalendarProps = React.ComponentProps<"div"> & {
+export type CalendarLabels = {
+  previousMonth?: string
+  nextMonth?: string
+  today?: string
+  clear?: string
+  selectDate?: (date: string) => string
+  disabledDate?: (date: string, reason: CalendarDisabledReason) => string
+}
+
+export type CalendarSummaryState = {
+  mode: "single" | "range"
+  value?: string | null
+  range?: CalendarDateRange
+  locale: string
+}
+
+export type CalendarProps = React.ComponentProps<"div"> & {
   value?: string | null
   range?: CalendarDateRange
   onValueChange?: (value: string) => void
@@ -55,18 +55,18 @@ export type CalendarProps = React.ComponentProps<"div"> & {
   max?: string
   disabledDates?: string[]
   locale?: string
-  weekStartsOn?: 0 | 1
-  months?: number
-  numberOfMonths?: number
-  showMonthHeaders?: boolean
-  showOutsideDays?: boolean
-  pagedNavigation?: boolean
-  showTodayShortcut?: boolean
-  showClearShortcut?: boolean
-  showSelectionSummary?: boolean
-  labels?: CalendarLabels
-  renderSelectionSummary?: (state: CalendarSummaryState) => React.ReactNode
-}
+  weekStartsOn?: 0 | 1
+  months?: number
+  numberOfMonths?: number
+  showMonthHeaders?: boolean
+  showOutsideDays?: boolean
+  pagedNavigation?: boolean
+  showTodayShortcut?: boolean
+  showClearShortcut?: boolean
+  showSelectionSummary?: boolean
+  labels?: CalendarLabels
+  renderSelectionSummary?: (state: CalendarSummaryState) => React.ReactNode
+}
 
 function getInitialMonth(defaultMonth?: Date | string | null, value?: string | null, range?: CalendarDateRange) {
   if (defaultMonth instanceof Date) return startOfMonth(defaultMonth)
@@ -94,7 +94,7 @@ function getDateAtSameDayInMonth(date: Date, month: Date) {
   return new Date(month.getFullYear(), month.getMonth(), Math.min(date.getDate(), lastDay))
 }
 
-function getDateKeysBetween(from: string, to: string) {
+function getDateKeysBetween(from: string, to: string) {
   const start = parseDateKey(from)
   const end = parseDateKey(to)
 
@@ -108,16 +108,16 @@ function getDateKeysBetween(from: string, to: string) {
     cursor.setDate(cursor.getDate() + 1)
   }
 
-  return keys
-}
-
+  return keys
+}
+
 function formatCalendarSummaryDate(value: string | null | undefined, locale: string) {
   const date = parseDateKey(value)
   if (!date || !value) return null
   return new Intl.DateTimeFormat(locale, { dateStyle: "medium" }).format(date)
 }
-
-function Calendar({
+
+function Calendar({
   className,
   value,
   range,
@@ -130,37 +130,37 @@ function Calendar({
   min,
   max,
   disabledDates,
-  locale = "en-US",
-  weekStartsOn = 1,
-  months,
-  numberOfMonths = 1,
-  showMonthHeaders,
-  showOutsideDays = true,
-  pagedNavigation = false,
-  showTodayShortcut = false,
-  showClearShortcut = false,
-  showSelectionSummary = false,
-  labels,
-  renderSelectionSummary,
-  ...props
-}: CalendarProps) {
-  const isControlledSingle = value !== undefined
-  const isControlledRange = range !== undefined
-  const [internalValue, setInternalValue] = React.useState<string | null | undefined>(value ?? null)
-  const [internalRange, setInternalRange] = React.useState<CalendarDateRange>(range ?? {})
-  const [internalMonth, setInternalMonth] = React.useState(() => getInitialMonth(defaultMonth, value, range))
-  const currentValue = isControlledSingle ? value : internalValue
-  const currentRange = isControlledRange ? range : internalRange
-  const currentMonth = month ?? internalMonth
-  const resolvedNumberOfMonths = Math.max(months ?? numberOfMonths, 1)
+  locale = "en-US",
+  weekStartsOn = 1,
+  months,
+  numberOfMonths = 1,
+  showMonthHeaders,
+  showOutsideDays = true,
+  pagedNavigation = false,
+  showTodayShortcut = false,
+  showClearShortcut = false,
+  showSelectionSummary = false,
+  labels,
+  renderSelectionSummary,
+  ...props
+}: CalendarProps) {
+  const isControlledSingle = value !== undefined
+  const isControlledRange = range !== undefined
+  const [internalValue, setInternalValue] = React.useState<string | null | undefined>(value ?? null)
+  const [internalRange, setInternalRange] = React.useState<CalendarDateRange>(range ?? {})
+  const [internalMonth, setInternalMonth] = React.useState(() => getInitialMonth(defaultMonth, value, range))
+  const currentValue = isControlledSingle ? value : internalValue
+  const currentRange = isControlledRange ? range : internalRange
+  const currentMonth = month ?? internalMonth
+  const resolvedNumberOfMonths = Math.max(months ?? numberOfMonths, 1)
   const shouldShowMonthHeaders = showMonthHeaders ?? resolvedNumberOfMonths > 1
   const navigationStep = pagedNavigation ? resolvedNumberOfMonths : 1
   const todayKey = toDateKey(new Date())
   const disabledSet = React.useMemo(() => new Set(disabledDates ?? []), [disabledDates])
   const weekdayLabels = React.useMemo(() => getWeekdayLabels(locale, weekStartsOn), [locale, weekStartsOn])
   const buttonRefs = React.useRef(new Map<string, HTMLButtonElement>())
-  const [focusedDateKey, setFocusedDateKey] = React.useState(() => value ?? range?.from ?? todayKey)
-  const [hoveredDateKey, setHoveredDateKey] = React.useState<string | null>(null)
+  const [focusedDateKey, setFocusedDateKey] = React.useState(() => value ?? range?.from ?? todayKey)
+  const [hoveredDateKey, setHoveredDateKey] = React.useState<string | null>(null)
   const visibleMonths = React.useMemo(
     () => Array.from({ length: resolvedNumberOfMonths }, (_, index) => addMonths(currentMonth, index)),
     [currentMonth, resolvedNumberOfMonths]
@@ -190,40 +190,67 @@ function Calendar({
 
   const isDateDisabled = React.useCallback((dateKey: string) => Boolean(getDisabledReason(dateKey)), [getDisabledReason])
 
-  const visibleEnabledKeys = React.useMemo(
-    () => allMonthDays.map(toDateKey).filter((dateKey) => !isDateDisabled(dateKey)),
-    [allMonthDays, isDateDisabled]
-  )
-
-  const tabbableDateKey = React.useMemo(() => {
-    const preferred = value ?? range?.from ?? todayKey
-    const selectedFrom = currentRange?.from ?? undefined
-    const selectedValue = currentValue ?? undefined
-    if (visibleEnabledKeys.includes(focusedDateKey)) return focusedDateKey
-    if (visibleEnabledKeys.includes(selectedValue ?? selectedFrom ?? preferred)) return selectedValue ?? selectedFrom ?? preferred
-    return visibleEnabledKeys[0]
-  }, [currentRange?.from, currentValue, focusedDateKey, range?.from, todayKey, value, visibleEnabledKeys])
+  const visibleEnabledKeys = React.useMemo(
+    () => allMonthDays.map(toDateKey).filter((dateKey) => !isDateDisabled(dateKey)),
+    [allMonthDays, isDateDisabled]
+  )
 
-  React.useEffect(() => {
-    if (isControlledSingle) {
-      setInternalValue(value ?? null)
+  const summaryContent = React.useMemo(() => {
+    if (renderSelectionSummary) {
+      return renderSelectionSummary({
+        mode,
+        value: currentValue ?? undefined,
+        range: currentRange,
+        locale,
+      })
     }
-  }, [isControlledSingle, value])
 
-  React.useEffect(() => {
-    if (isControlledRange && range) {
-      setInternalRange(range)
+    if (!showSelectionSummary) {
+      return null
     }
-  }, [isControlledRange, range])
-
-  React.useEffect(() => {
-    if (!focusedDateKey) return
-    buttonRefs.current.get(focusedDateKey)?.focus()
-  }, [focusedDateKey])
 
-  React.useEffect(() => {
-    if (mode !== "range") setHoveredDateKey(null)
-  }, [mode])
+    if (mode === "range") {
+      const from = formatCalendarSummaryDate(currentRange?.from, locale)
+      const to = formatCalendarSummaryDate(currentRange?.to, locale)
+
+      if (from && to) return `${from} -> ${to}`
+      if (from) return `${from} -> ...`
+      return "No range selected"
+    }
+
+    const selected = formatCalendarSummaryDate(currentValue, locale)
+    return selected ? `Selected date: ${selected}` : "No date selected"
+  }, [currentRange, currentValue, locale, mode, renderSelectionSummary, showSelectionSummary])
+
+  const tabbableDateKey = React.useMemo(() => {
+    const preferred = value ?? range?.from ?? todayKey
+    const selectedFrom = currentRange?.from ?? undefined
+    const selectedValue = currentValue ?? undefined
+    if (visibleEnabledKeys.includes(focusedDateKey)) return focusedDateKey
+    if (visibleEnabledKeys.includes(selectedValue ?? selectedFrom ?? preferred)) return selectedValue ?? selectedFrom ?? preferred
+    return visibleEnabledKeys[0]
+  }, [currentRange?.from, currentValue, focusedDateKey, range?.from, todayKey, value, visibleEnabledKeys])
+
+  React.useEffect(() => {
+    if (isControlledSingle) {
+      setInternalValue(value ?? null)
+    }
+  }, [isControlledSingle, value])
+
+  React.useEffect(() => {
+    if (isControlledRange && range) {
+      setInternalRange(range)
+    }
+  }, [isControlledRange, range])
+
+  React.useEffect(() => {
+    if (!focusedDateKey) return
+    buttonRefs.current.get(focusedDateKey)?.focus()
+  }, [focusedDateKey])
+
+  React.useEffect(() => {
+    if (mode !== "range") setHoveredDateKey(null)
+  }, [mode])
 
   const setMonth = (nextMonth: Date) => {
     const next = startOfMonth(nextMonth)
@@ -231,16 +258,16 @@ function Calendar({
     onMonthChange?.(next)
   }
 
-  const moveFocus = (date: Date, step = 1) => {
-    let nextDate = date
-    let nextKey = toDateKey(nextDate)
-    let guard = 0
-
-    while (isDateDisabled(nextKey) && guard < 370) {
-      nextDate = addDays(nextDate, step)
-      nextKey = toDateKey(nextDate)
-      guard += 1
-    }
+  const moveFocus = (date: Date, step = 1) => {
+    let nextDate = date
+    let nextKey = toDateKey(nextDate)
+    let guard = 0
+
+    while (isDateDisabled(nextKey) && guard < 370) {
+      nextDate = addDays(nextDate, step)
+      nextKey = toDateKey(nextDate)
+      guard += 1
+    }
 
     setFocusedDateKey(nextKey)
 
@@ -251,93 +278,68 @@ function Calendar({
     }
   }
 
-  const handleDateSelect = (dateKey: string) => {
+  const handleDateSelect = (dateKey: string) => {
     if (isDateDisabled(dateKey)) return
 
-    if (mode === "single") {
-      if (!isControlledSingle) setInternalValue(dateKey)
-      onValueChange?.(dateKey)
-      return
-    }
-
-    const from = currentRange?.from ?? null
-    const to = currentRange?.to ?? null
-
-    if (!from || (from && to) || dateKey < from) {
-      const nextRange = { from: dateKey, to: null }
-      if (!isControlledRange) setInternalRange(nextRange)
-      onRangeChange?.(nextRange)
-      return
-    }
+    if (mode === "single") {
+      if (!isControlledSingle) setInternalValue(dateKey)
+      onValueChange?.(dateKey)
+      return
+    }
+
+    const from = currentRange?.from ?? null
+    const to = currentRange?.to ?? null
+
+    if (!from || (from && to) || dateKey < from) {
+      const nextRange = { from: dateKey, to: null }
+      if (!isControlledRange) setInternalRange(nextRange)
+      onRangeChange?.(nextRange)
+      return
+    }
 
     const rangeHasDisabledDate = getDateKeysBetween(from, dateKey).some((key) => isDateDisabled(key))
 
-    if (rangeHasDisabledDate) {
-      const nextRange = { from: dateKey, to: null }
-      if (!isControlledRange) setInternalRange(nextRange)
-      onRangeChange?.(nextRange)
-      return
-    }
-
-    const nextRange = { from, to: dateKey }
-    if (!isControlledRange) setInternalRange(nextRange)
-    onRangeChange?.(nextRange)
-  }
-
-  const previewRange =
-    mode === "range" &&
-    currentRange?.from &&
-    !currentRange.to &&
-    hoveredDateKey &&
-    hoveredDateKey >= currentRange.from &&
-    !getDateKeysBetween(currentRange.from, hoveredDateKey).some((key) => isDateDisabled(key))
-      ? { from: currentRange.from, to: hoveredDateKey }
-      : null
-
-  const summaryContent = React.useMemo(() => {
-    if (!showSelectionSummary && !renderSelectionSummary) return null
-
-    if (renderSelectionSummary) {
-      return renderSelectionSummary({
-        mode,
-        value: currentValue,
-        range: currentRange,
-        locale,
-      })
-    }
-
-    if (mode === "range") {
-      const formattedFrom = formatCalendarSummaryDate(currentRange?.from, locale)
-      const formattedTo = formatCalendarSummaryDate(currentRange?.to, locale)
-      if (formattedFrom && formattedTo) return `${formattedFrom} -> ${formattedTo}`
-      if (formattedFrom) return `${formattedFrom} -> ...`
-      return "No range selected"
-    }
-
-    return formatCalendarSummaryDate(currentValue, locale) ?? "No date selected"
-  }, [currentRange, currentValue, locale, mode, renderSelectionSummary, showSelectionSummary])
-
-  const clearSelection = () => {
-    if (mode === "single") {
-      if (!isControlledSingle) setInternalValue(null)
-      onValueChange?.("")
-      return
-    }
-
-    const nextRange = { from: null, to: null }
-    if (!isControlledRange) setInternalRange(nextRange)
-    onRangeChange?.(nextRange)
-  }
-
-  const jumpToToday = () => {
-    const today = new Date()
-    const todayDateKey = toDateKey(today)
-    setMonth(today)
-    setFocusedDateKey(todayDateKey)
-    if (!isDateDisabled(todayDateKey)) {
-      handleDateSelect(todayDateKey)
-    }
-  }
+    if (rangeHasDisabledDate) {
+      const nextRange = { from: dateKey, to: null }
+      if (!isControlledRange) setInternalRange(nextRange)
+      onRangeChange?.(nextRange)
+      return
+    }
+
+    const nextRange = { from, to: dateKey }
+    if (!isControlledRange) setInternalRange(nextRange)
+    onRangeChange?.(nextRange)
+  }
+
+  const previewRange = (() => {
+    if (mode !== "range") return null
+    if (!currentRange?.from || currentRange?.to || !hoveredDateKey || hoveredDateKey < currentRange.from) return null
+    const rangeIncludesDisabledDate = getDateKeysBetween(currentRange.from, hoveredDateKey).some((key) => isDateDisabled(key))
+    if (rangeIncludesDisabledDate) return null
+    return { from: currentRange.from, to: hoveredDateKey }
+  })()
+
+  const clearSelection = () => {
+    if (mode === "single") {
+      if (!isControlledSingle) setInternalValue(null)
+      onValueChange?.("")
+      return
+    }
+
+    const nextRange = { from: null, to: null }
+    if (!isControlledRange) setInternalRange(nextRange)
+    onRangeChange?.(nextRange)
+  }
+
+  const jumpToToday = () => {
+    const today = new Date()
+    const todayDateKey = toDateKey(today)
+    setMonth(today)
+    setFocusedDateKey(todayDateKey)
+    if (!isDateDisabled(todayDateKey)) {
+      handleDateSelect(todayDateKey)
+    }
+  }
 
   const handleDateKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>, date: Date) => {
     const visibleMonthEntry = monthDaysByMonth.find((entry) => isSameMonth(date, entry.month))
@@ -345,38 +347,38 @@ function Calendar({
       ((visibleMonthEntry?.days.findIndex((item) => toDateKey(item) === toDateKey(date)) ?? 0) + 7) % 7
 
     switch (event.key) {
-      case "ArrowRight":
-        event.preventDefault()
-        moveFocus(addDays(date, 1), 1)
-        break
-      case "ArrowLeft":
-        event.preventDefault()
-        moveFocus(addDays(date, -1), -1)
-        break
-      case "ArrowDown":
-        event.preventDefault()
-        moveFocus(addDays(date, 7), 7)
-        break
-      case "ArrowUp":
-        event.preventDefault()
-        moveFocus(addDays(date, -7), -7)
-        break
-      case "Home":
-        event.preventDefault()
-        moveFocus(addDays(date, -columnIndex), -1)
-        break
-      case "End":
-        event.preventDefault()
-        moveFocus(addDays(date, 6 - columnIndex), 1)
-        break
-      case "PageUp":
-        event.preventDefault()
-        moveFocus(getDateAtSameDayInMonth(date, addMonths(date, -1)), -1)
-        break
-      case "PageDown":
-        event.preventDefault()
-        moveFocus(getDateAtSameDayInMonth(date, addMonths(date, 1)), 1)
-        break
+      case "ArrowRight":
+        event.preventDefault()
+        moveFocus(addDays(date, 1), 1)
+        break
+      case "ArrowLeft":
+        event.preventDefault()
+        moveFocus(addDays(date, -1), -1)
+        break
+      case "ArrowDown":
+        event.preventDefault()
+        moveFocus(addDays(date, 7), 7)
+        break
+      case "ArrowUp":
+        event.preventDefault()
+        moveFocus(addDays(date, -7), -7)
+        break
+      case "Home":
+        event.preventDefault()
+        moveFocus(addDays(date, -columnIndex), -1)
+        break
+      case "End":
+        event.preventDefault()
+        moveFocus(addDays(date, 6 - columnIndex), 1)
+        break
+      case "PageUp":
+        event.preventDefault()
+        moveFocus(getDateAtSameDayInMonth(date, addMonths(date, -1)), -1)
+        break
+      case "PageDown":
+        event.preventDefault()
+        moveFocus(getDateAtSameDayInMonth(date, addMonths(date, 1)), 1)
+        break
     }
   }
 
@@ -385,7 +387,7 @@ function Calendar({
       data-slot="calendar"
       data-months={resolvedNumberOfMonths}
       className={cn(
-        "w-fit rounded-[var(--aui-card-radius,var(--radius-lg))] border border-[color:var(--aui-card-border,var(--border))] bg-popover p-3 text-popover-foreground shadow-[var(--aui-control-panel-shadow,0_18px_40px_rgba(15,23,42,0.14))]",
+        "w-fit rounded-[var(--aui-card-radius,var(--radius-lg))] border border-[color:var(--aui-card-border,var(--border))] bg-popover p-3 text-popover-foreground shadow-[var(--aui-control-panel-shadow,0_18px_40px_rgba(15,23,42,0.14))]",
         className
       )}
       {...props}
@@ -395,7 +397,7 @@ function Calendar({
           type="button"
           variant="outline"
           size="icon-sm"
-          className="rounded-[var(--radius-md)] border-border/70 bg-background text-foreground shadow-none hover:border-border hover:bg-accent hover:text-accent-foreground"
+          className="rounded-[var(--radius-md)] border-border/70 bg-background text-foreground shadow-none hover:border-border hover:bg-accent hover:text-accent-foreground"
           aria-label={labels?.previousMonth ?? "Previous month"}
           onClick={() => setMonth(addMonths(currentMonth, -navigationStep))}
         >
@@ -409,7 +411,7 @@ function Calendar({
           type="button"
           variant="outline"
           size="icon-sm"
-          className="rounded-[var(--radius-md)] border-border/70 bg-background text-foreground shadow-none hover:border-border hover:bg-accent hover:text-accent-foreground"
+          className="rounded-[var(--radius-md)] border-border/70 bg-background text-foreground shadow-none hover:border-border hover:bg-accent hover:text-accent-foreground"
           aria-label={labels?.nextMonth ?? "Next month"}
           onClick={() => setMonth(addMonths(currentMonth, navigationStep))}
         >
@@ -417,8 +419,8 @@ function Calendar({
         </Button>
       </div>
 
-      <div
-        className={cn("grid gap-3", resolvedNumberOfMonths > 1 && "sm:grid-cols-2")}
+      <div
+        className={cn("grid gap-3", resolvedNumberOfMonths > 1 && "sm:grid-cols-2")}
         style={
           resolvedNumberOfMonths > 2
             ? { gridTemplateColumns: `repeat(${resolvedNumberOfMonths}, minmax(0, 1fr))` }
@@ -426,7 +428,7 @@ function Calendar({
         }
       >
         {monthDaysByMonth.map(({ month: visibleMonth, days }) => (
-          <div key={toDateKey(visibleMonth)} className="min-w-[16.5rem] rounded-[var(--radius-md)] bg-transparent p-1">
+          <div key={toDateKey(visibleMonth)} className="min-w-[16.5rem] rounded-[var(--radius-md)] bg-transparent p-1">
             {shouldShowMonthHeaders && (
               <div className="mb-2 text-center text-sm font-semibold capitalize tracking-tight text-foreground">
                 {getMonthLabel(visibleMonth, locale)}
@@ -444,19 +446,19 @@ function Calendar({
             <div className="mt-1.5 grid grid-cols-7 gap-1">
               {days.map((date) => {
                 const dateKey = toDateKey(date)
-                const outside = !isSameMonth(date, visibleMonth)
-                const selected = mode === "single" ? currentValue === dateKey : dateKey === currentRange?.from || dateKey === currentRange?.to
-                const inRange = mode === "range" && isWithinRange(dateKey, currentRange?.from, currentRange?.to)
-                const inPreviewRange = !inRange && mode === "range" && isWithinRange(dateKey, previewRange?.from, previewRange?.to)
-                const rangeStart = mode === "range" && dateKey === currentRange?.from
-                const rangeEnd = mode === "range" && dateKey === currentRange?.to
-                const rangeMiddle = inRange && !rangeStart && !rangeEnd
-                const disabledReason = getDisabledReason(dateKey)
-                const disabled = Boolean(disabledReason)
-                const disabledLabel = disabledReason ? labels?.disabledDate?.(dateKey, disabledReason) : undefined
-
-                return (
-                  <button
+                const outside = !isSameMonth(date, visibleMonth)
+                const selected = mode === "single" ? currentValue === dateKey : dateKey === currentRange?.from || dateKey === currentRange?.to
+                const inRange = mode === "range" && isWithinRange(dateKey, currentRange?.from, currentRange?.to)
+                const inPreviewRange = !inRange && mode === "range" && isWithinRange(dateKey, previewRange?.from, previewRange?.to)
+                const rangeStart = mode === "range" && dateKey === currentRange?.from
+                const rangeEnd = mode === "range" && dateKey === currentRange?.to
+                const rangeMiddle = inRange && !rangeStart && !rangeEnd
+                const disabledReason = getDisabledReason(dateKey)
+                const disabled = Boolean(disabledReason)
+                const disabledLabel = disabledReason ? labels?.disabledDate?.(dateKey, disabledReason) : undefined
+
+                return (
+                  <button
                     key={dateKey}
                     ref={(node) => {
                       if (node) buttonRefs.current.set(dateKey, node)
@@ -464,61 +466,61 @@ function Calendar({
                     }}
                     type="button"
                     disabled={disabled}
-                    aria-label={disabledLabel ?? labels?.selectDate?.(dateKey) ?? dateKey}
-                    aria-current={dateKey === todayKey ? "date" : undefined}
-                    tabIndex={dateKey === tabbableDateKey ? 0 : -1}
-                    title={disabledLabel}
-                    data-selected={selected || undefined}
-                    data-range-start={rangeStart || undefined}
-                    data-range-end={rangeEnd || undefined}
-                    data-range-middle={rangeMiddle || undefined}
-                    data-today={dateKey === todayKey || undefined}
-                    data-outside={outside || undefined}
-                    data-in-range={inRange || undefined}
-                    data-in-preview-range={inPreviewRange || undefined}
-                    data-disabled-reason={disabledReason}
-                    className={cn(
-                      "flex h-9 items-center justify-center rounded-[var(--radius-sm)] border border-transparent text-sm font-medium outline-none transition-[background-color,color,border-color,box-shadow,transform] hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-30",
-                      outside && showOutsideDays ? "text-muted-foreground/34" : "text-foreground",
-                      outside && !showOutsideDays && "pointer-events-none opacity-0",
-                      dateKey === todayKey && "border-border/70 bg-muted/60 text-foreground",
-                      inRange && "bg-primary/10 text-foreground",
-                      inPreviewRange && "bg-primary/6 text-foreground",
-                      selected && "border-primary bg-primary text-primary-foreground shadow-[0_10px_22px_color-mix(in_oklch,var(--primary),transparent_78%)] hover:bg-primary hover:text-primary-foreground"
-                    )}
-                    onFocus={() => setFocusedDateKey(dateKey)}
-                    onMouseEnter={() => setHoveredDateKey(dateKey)}
-                    onMouseLeave={() => setHoveredDateKey(null)}
-                    onKeyDown={(event) => handleDateKeyDown(event, date)}
-                    onClick={() => handleDateSelect(dateKey)}
-                  >
+                    aria-label={disabledLabel ?? labels?.selectDate?.(dateKey) ?? dateKey}
+                    aria-current={dateKey === todayKey ? "date" : undefined}
+                    tabIndex={dateKey === tabbableDateKey ? 0 : -1}
+                    title={disabledLabel}
+                    data-selected={selected || undefined}
+                    data-range-start={rangeStart || undefined}
+                    data-range-end={rangeEnd || undefined}
+                    data-range-middle={rangeMiddle || undefined}
+                    data-today={dateKey === todayKey || undefined}
+                    data-outside={outside || undefined}
+                    data-in-range={inRange || undefined}
+                    data-in-preview-range={inPreviewRange || undefined}
+                    data-disabled-reason={disabledReason}
+                    className={cn(
+                      "flex h-9 items-center justify-center rounded-[var(--radius-sm)] border border-transparent text-sm font-medium outline-none transition-[background-color,color,border-color,box-shadow,transform] hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-30",
+                      outside && showOutsideDays ? "text-muted-foreground/34" : "text-foreground",
+                      outside && !showOutsideDays && "pointer-events-none opacity-0",
+                      dateKey === todayKey && "border-border/70 bg-muted/60 text-foreground",
+                      inRange && "bg-primary/10 text-foreground",
+                      inPreviewRange && "bg-primary/6 text-foreground",
+                      selected && "border-primary bg-primary text-primary-foreground shadow-[0_10px_22px_color-mix(in_oklch,var(--primary),transparent_78%)] hover:bg-primary hover:text-primary-foreground"
+                    )}
+                    onFocus={() => setFocusedDateKey(dateKey)}
+                    onMouseEnter={() => setHoveredDateKey(dateKey)}
+                    onMouseLeave={() => setHoveredDateKey(null)}
+                    onKeyDown={(event) => handleDateKeyDown(event, date)}
+                    onClick={() => handleDateSelect(dateKey)}
+                  >
                     {date.getDate()}
                   </button>
                 )
               })}
             </div>
           </div>
-        ))}
-      </div>
-      {(showTodayShortcut || showClearShortcut || showSelectionSummary || renderSelectionSummary) ? (
-        <div className="mt-3 flex flex-wrap items-center justify-between gap-2 border-t border-[color:var(--aui-card-border,var(--border))] pt-3">
-          <div className="text-xs text-muted-foreground">{summaryContent}</div>
-          <div className="flex flex-wrap gap-2">
-            {showClearShortcut ? (
-              <Button type="button" size="sm" variant="ghost" onClick={clearSelection}>
-                {labels?.clear ?? "Clear"}
-              </Button>
-            ) : null}
-            {showTodayShortcut ? (
-              <Button type="button" size="sm" variant="outline" onClick={jumpToToday}>
-                {labels?.today ?? "Today"}
-              </Button>
-            ) : null}
-          </div>
-        </div>
-      ) : null}
-    </div>
-  )
-}
+        ))}
+      </div>
+      {(showTodayShortcut || showClearShortcut || showSelectionSummary || renderSelectionSummary) ? (
+        <div className="mt-3 flex flex-wrap items-center justify-between gap-2 border-t border-[color:var(--aui-card-border,var(--border))] pt-3">
+          <div className="text-xs text-muted-foreground">{summaryContent}</div>
+          <div className="flex flex-wrap gap-2">
+            {showClearShortcut ? (
+              <Button type="button" size="sm" variant="ghost" onClick={clearSelection}>
+                {labels?.clear ?? "Clear"}
+              </Button>
+            ) : null}
+            {showTodayShortcut ? (
+              <Button type="button" size="sm" variant="outline" onClick={jumpToToday}>
+                {labels?.today ?? "Today"}
+              </Button>
+            ) : null}
+          </div>
+        </div>
+      ) : null}
+    </div>
+  )
+}
 
 export { Calendar }