tembro 2.0.4 → 2.0.5

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

@@ -24,14 +24,23 @@ export type CalendarDateRange = {
 
 export type CalendarDisabledReason = "disabled" | "min" | "max" | "range"
 
-export type CalendarLabels = {
-  previousMonth?: string
-  nextMonth?: string
-  selectDate?: (date: string) => string
-  disabledDate?: (date: string, reason: CalendarDisabledReason) => 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
@@ -45,11 +54,16 @@ export type CalendarProps = React.ComponentProps<"div"> & {
   disabledDates?: string[]
   locale?: string
   weekStartsOn?: 0 | 1
-  numberOfMonths?: number
-  showMonthHeaders?: boolean
-  pagedNavigation?: boolean
-  labels?: CalendarLabels
-}
+  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)
@@ -77,7 +91,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)
 
@@ -91,10 +105,16 @@ function getDateKeysBetween(from: string, to: string) {
     cursor.setDate(cursor.getDate() + 1)
   }
 
-  return keys
-}
-
-function Calendar({
+  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({
   className,
   value,
   range,
@@ -108,15 +128,26 @@ function Calendar({
   max,
   disabledDates,
   locale = "en-US",
-  weekStartsOn = 1,
-  numberOfMonths = 1,
-  showMonthHeaders,
-  pagedNavigation = false,
-  labels,
-  ...props
-}: CalendarProps) {
-  const [internalMonth, setInternalMonth] = React.useState(() => getInitialMonth(defaultMonth, value, range))
-  const currentMonth = month ?? internalMonth
+  weekStartsOn = 1,
+  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(numberOfMonths, 1)
   const shouldShowMonthHeaders = showMonthHeaders ?? resolvedNumberOfMonths > 1
   const navigationStep = pagedNavigation ? resolvedNumberOfMonths : 1
@@ -124,7 +155,8 @@ function Calendar({
   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 [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]
@@ -160,16 +192,34 @@ function Calendar({
   )
 
   const tabbableDateKey = React.useMemo(() => {
-    const preferred = value ?? range?.from ?? todayKey
-    if (visibleEnabledKeys.includes(focusedDateKey)) return focusedDateKey
-    if (visibleEnabledKeys.includes(preferred)) return preferred
-    return visibleEnabledKeys[0]
-  }, [focusedDateKey, range?.from, todayKey, value, visibleEnabledKeys])
-
-  React.useEffect(() => {
-    if (!focusedDateKey) return
-    buttonRefs.current.get(focusedDateKey)?.focus()
-  }, [focusedDateKey])
+    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)
@@ -197,31 +247,93 @@ function Calendar({
     }
   }
 
-  const handleDateSelect = (dateKey: string) => {
+  const handleDateSelect = (dateKey: string) => {
     if (isDateDisabled(dateKey)) return
 
-    if (mode === "single") {
-      onValueChange?.(dateKey)
-      return
-    }
-
-    const from = range?.from ?? null
-    const to = range?.to ?? null
-
-    if (!from || (from && to) || dateKey < from) {
-      onRangeChange?.({ from: dateKey, to: null })
-      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) {
-      onRangeChange?.({ from: dateKey, to: null })
-      return
-    }
-
-    onRangeChange?.({ from, to: dateKey })
-  }
+    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)
+    }
+  }
 
   const handleDateKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>, date: Date) => {
     const visibleMonthEntry = monthDaysByMonth.find((entry) => isSameMonth(date, entry.month))
@@ -301,8 +413,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))` }
@@ -328,15 +440,16 @@ 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" ? value === dateKey : dateKey === range?.from || dateKey === range?.to
-                const inRange = mode === "range" && isWithinRange(dateKey, range?.from, range?.to)
-                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 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)
@@ -349,31 +462,53 @@ function Calendar({
                     tabIndex={dateKey === tabbableDateKey ? 0 : -1}
                     title={disabledLabel}
                     data-selected={selected || undefined}
-                    data-today={dateKey === todayKey || undefined}
-                    data-outside={outside || undefined}
-                    data-in-range={inRange || undefined}
-                    data-disabled-reason={disabledReason}
-                    className={cn(
+                    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 && "text-muted-foreground/34",
-                      dateKey === todayKey && "border-border/70 bg-muted/60 text-foreground",
-                      inRange && "bg-primary/10 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)}
-                    onKeyDown={(event) => handleDateKeyDown(event, date)}
-                    onClick={() => handleDateSelect(dateKey)}
-                  >
+                      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>
-    </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 }

package/packages/cli/vendor/src/components/calendar/date-picker.tsx

@@ -1,5 +1,5 @@
 import * as React from "react"
-import { CalendarIcon } from "lucide-react"
+import { CalendarIcon, XIcon } from "lucide-react"
 
 import { Calendar, type CalendarProps } from "@/components/calendar/calendar"
 import { Button } from "@/components/ui/button"
@@ -7,9 +7,10 @@ import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover
 import { cn } from "@/lib/utils"
 import { parseDateKey } from "./date-utils"
 
-export type DatePickerLabels = CalendarProps["labels"] & {
-  placeholder?: string
-}
+export type DatePickerLabels = CalendarProps["labels"] & {
+  placeholder?: string
+  selected?: string
+}
 
 export type DatePickerProps = Omit<
   CalendarProps,
@@ -17,10 +18,11 @@ export type DatePickerProps = Omit<
 > & {
   placeholder?: string
   labels?: DatePickerLabels
-  disabled?: boolean
-  formatValue?: (value: string) => React.ReactNode
-  triggerClassName?: string
-  contentClassName?: string
+  disabled?: boolean
+  clearable?: boolean
+  formatValue?: (value: string) => React.ReactNode
+  triggerClassName?: string
+  contentClassName?: string
 }
 
 function defaultFormatValue(value: string) {
@@ -33,9 +35,10 @@ function DatePicker({
   value,
   onValueChange,
   placeholder,
-  labels,
-  disabled = false,
-  formatValue = defaultFormatValue,
+  labels,
+  disabled = false,
+  clearable = true,
+  formatValue = defaultFormatValue,
   triggerClassName,
   contentClassName,
   className,
@@ -44,10 +47,21 @@ function DatePicker({
   const [open, setOpen] = React.useState(false)
   const hasValue = Boolean(value)
 
-  const handleSelect = (nextValue: string) => {
-    onValueChange?.(nextValue)
-    setOpen(false)
-  }
+  const handleSelect = (nextValue: string) => {
+    onValueChange?.(nextValue)
+    setOpen(false)
+  }
+
+  const clearValue = () => {
+    onValueChange?.("")
+    setOpen(false)
+  }
+
+  const handleClear = (event: React.MouseEvent<HTMLElement>) => {
+    event.preventDefault()
+    event.stopPropagation()
+    clearValue()
+  }
 
   return (
     <div data-slot="date-picker" className={cn("w-full", className)}>
@@ -58,19 +72,41 @@ function DatePicker({
               type="button"
               variant="outline"
               disabled={disabled}
-              className={cn(
-                "min-h-11 w-full justify-start rounded-[var(--aui-control-radius,var(--radius-md))] border-border/80 bg-background/96 text-left font-normal shadow-[var(--aui-control-shadow,0_1px_2px_rgba(15,23,42,0.04))]",
-                !hasValue && "text-muted-foreground",
-                triggerClassName
-              )}
-            />
-          }
-        >
-          <CalendarIcon data-icon="inline-start" />
-          <span className="min-w-0 flex-1 truncate">
-            {hasValue ? formatValue(String(value)) : placeholder ?? labels?.placeholder ?? "Select date"}
-          </span>
-        </PopoverTrigger>
+              className={cn(
+                "group min-h-11 w-full justify-start gap-3 rounded-[var(--aui-control-radius,var(--radius-md))] border-border/80 bg-background/96 px-3 text-left font-normal shadow-[var(--aui-control-shadow,0_1px_2px_rgba(15,23,42,0.04))]",
+                !hasValue && "text-muted-foreground",
+                triggerClassName
+              )}
+            />
+          }
+        >
+          <CalendarIcon data-icon="inline-start" className={cn(hasValue && "text-primary")} />
+          <span className="grid min-w-0 flex-1 gap-0.5">
+            <span className="text-[11px] font-semibold uppercase tracking-[0.16em] text-muted-foreground">
+              {labels?.selected ?? "Date"}
+            </span>
+            <span className={cn("truncate text-sm", hasValue && "font-semibold text-foreground")}>
+              {hasValue ? formatValue(String(value)) : placeholder ?? labels?.placeholder ?? "Select date"}
+            </span>
+          </span>
+          {clearable && hasValue ? (
+            <span
+              role="button"
+              tabIndex={0}
+              aria-label={labels?.clear ?? "Clear date"}
+              className="ml-auto inline-flex size-7 shrink-0 items-center justify-center rounded-[var(--radius-sm)] text-muted-foreground opacity-80 transition hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"
+              onClick={handleClear}
+              onKeyDown={(event) => {
+                if (event.key === "Enter" || event.key === " ") {
+                  event.preventDefault()
+                  clearValue()
+                }
+              }}
+            >
+              <XIcon className="size-3.5" />
+            </span>
+          ) : null}
+        </PopoverTrigger>
         <PopoverContent
           align="start"
           className={cn(
@@ -78,7 +114,15 @@ function DatePicker({
             contentClassName
           )}
         >
-          <Calendar value={value} onValueChange={handleSelect} labels={labels} {...calendarProps} />
+          <Calendar
+            value={value}
+            onValueChange={handleSelect}
+            labels={labels}
+            showTodayShortcut
+            showClearShortcut={clearable}
+            showSelectionSummary
+            {...calendarProps}
+          />
         </PopoverContent>
       </Popover>
     </div>