tembro 1.0.0

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

@@ -0,0 +1,379 @@
+import * as React from "react"
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
+import {
+  addMonths,
+  getMonthDays,
+  getMonthLabel,
+  getWeekdayLabels,
+  isAfterDate,
+  isBeforeDate,
+  isSameMonth,
+  isWithinRange,
+  parseDateKey,
+  startOfMonth,
+  toDateKey,
+} from "./date-utils"
+
+export type CalendarDateRange = {
+  from?: string | null
+  to?: string | null
+}
+
+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"> & {
+  value?: string | null
+  range?: CalendarDateRange
+  onValueChange?: (value: string) => void
+  onRangeChange?: (range: CalendarDateRange) => void
+  mode?: "single" | "range"
+  month?: Date
+  defaultMonth?: Date | string | null
+  onMonthChange?: (month: Date) => void
+  min?: string
+  max?: string
+  disabledDates?: string[]
+  locale?: string
+  weekStartsOn?: 0 | 1
+  numberOfMonths?: number
+  showMonthHeaders?: boolean
+  pagedNavigation?: boolean
+  labels?: CalendarLabels
+}
+
+function getInitialMonth(defaultMonth?: Date | string | null, value?: string | null, range?: CalendarDateRange) {
+  if (defaultMonth instanceof Date) return startOfMonth(defaultMonth)
+
+  const fromDefault = parseDateKey(defaultMonth)
+  if (fromDefault) return startOfMonth(fromDefault)
+
+  const fromValue = parseDateKey(value)
+  if (fromValue) return startOfMonth(fromValue)
+
+  const fromRange = parseDateKey(range?.from ?? range?.to)
+  if (fromRange) return startOfMonth(fromRange)
+
+  return startOfMonth(new Date())
+}
+
+function addDays(date: Date, amount: number) {
+  const next = new Date(date)
+  next.setDate(date.getDate() + amount)
+  return next
+}
+
+function getDateAtSameDayInMonth(date: Date, month: Date) {
+  const lastDay = new Date(month.getFullYear(), month.getMonth() + 1, 0).getDate()
+  return new Date(month.getFullYear(), month.getMonth(), Math.min(date.getDate(), lastDay))
+}
+
+function getDateKeysBetween(from: string, to: string) {
+  const start = parseDateKey(from)
+  const end = parseDateKey(to)
+
+  if (!start || !end || to < from) return []
+
+  const keys: string[] = []
+  const cursor = new Date(start)
+
+  while (toDateKey(cursor) <= to) {
+    keys.push(toDateKey(cursor))
+    cursor.setDate(cursor.getDate() + 1)
+  }
+
+  return keys
+}
+
+function Calendar({
+  className,
+  value,
+  range,
+  onValueChange,
+  onRangeChange,
+  mode = "single",
+  month,
+  defaultMonth,
+  onMonthChange,
+  min,
+  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
+  const resolvedNumberOfMonths = Math.max(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 visibleMonths = React.useMemo(
+    () => Array.from({ length: resolvedNumberOfMonths }, (_, index) => addMonths(currentMonth, index)),
+    [currentMonth, resolvedNumberOfMonths]
+  )
+  const monthDaysByMonth = React.useMemo(
+    () =>
+      visibleMonths.map((visibleMonth) => ({
+        month: visibleMonth,
+        days: getMonthDays(visibleMonth, weekStartsOn),
+      })),
+    [visibleMonths, weekStartsOn]
+  )
+  const allMonthDays = React.useMemo(
+    () => monthDaysByMonth.flatMap((entry) => entry.days),
+    [monthDaysByMonth]
+  )
+
+  const getDisabledReason = React.useCallback(
+    (dateKey: string): CalendarDisabledReason | undefined => {
+      if (disabledSet.has(dateKey)) return "disabled"
+      if (isBeforeDate(dateKey, min)) return "min"
+      if (isAfterDate(dateKey, max)) return "max"
+      return undefined
+    },
+    [disabledSet, max, min]
+  )
+
+  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
+    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 setMonth = (nextMonth: Date) => {
+    const next = startOfMonth(nextMonth)
+    setInternalMonth(next)
+    onMonthChange?.(next)
+  }
+
+  const moveFocus = (date: Date) => {
+    let nextDate = date
+    let nextKey = toDateKey(nextDate)
+    let guard = 0
+
+    while (isDateDisabled(nextKey) && guard < 370) {
+      nextDate = addDays(nextDate, nextDate < date ? -1 : 1)
+      nextKey = toDateKey(nextDate)
+      guard += 1
+    }
+
+    setFocusedDateKey(nextKey)
+
+    const isVisibleInCurrentViewport = visibleMonths.some((visibleMonth) => isSameMonth(nextDate, visibleMonth))
+
+    if (!isVisibleInCurrentViewport) {
+      setMonth(startOfMonth(nextDate))
+    }
+  }
+
+  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
+    }
+
+    const rangeHasDisabledDate = getDateKeysBetween(from, dateKey).some((key) => isDateDisabled(key))
+
+    if (rangeHasDisabledDate) {
+      onRangeChange?.({ from: dateKey, to: null })
+      return
+    }
+
+    onRangeChange?.({ from, to: dateKey })
+  }
+
+  const handleDateKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>, date: Date) => {
+    const visibleMonthEntry = monthDaysByMonth.find((entry) => isSameMonth(date, entry.month))
+    const columnIndex =
+      ((visibleMonthEntry?.days.findIndex((item) => toDateKey(item) === toDateKey(date)) ?? 0) + 7) % 7
+
+    switch (event.key) {
+      case "ArrowRight":
+        event.preventDefault()
+        moveFocus(addDays(date, 1))
+        break
+      case "ArrowLeft":
+        event.preventDefault()
+        moveFocus(addDays(date, -1))
+        break
+      case "ArrowDown":
+        event.preventDefault()
+        moveFocus(addDays(date, 7))
+        break
+      case "ArrowUp":
+        event.preventDefault()
+        moveFocus(addDays(date, -7))
+        break
+      case "Home":
+        event.preventDefault()
+        moveFocus(addDays(date, -columnIndex))
+        break
+      case "End":
+        event.preventDefault()
+        moveFocus(addDays(date, 6 - columnIndex))
+        break
+      case "PageUp":
+        event.preventDefault()
+        moveFocus(getDateAtSameDayInMonth(date, addMonths(date, -1)))
+        break
+      case "PageDown":
+        event.preventDefault()
+        moveFocus(getDateAtSameDayInMonth(date, addMonths(date, 1)))
+        break
+    }
+  }
+
+  return (
+    <div
+      data-slot="calendar"
+      data-months={resolvedNumberOfMonths}
+      className={cn(
+        "w-fit rounded-[calc(var(--radius-2xl)+2px)] border border-border/70 bg-popover p-3 text-popover-foreground shadow-[0_18px_48px_rgba(15,23,42,0.18)] backdrop-blur",
+        className
+      )}
+      {...props}
+    >
+      <div className="mb-3 flex items-center justify-between gap-3">
+        <Button
+          type="button"
+          variant="outline"
+          size="icon-sm"
+          className="rounded-full 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))}
+        >
+          <ChevronLeftIcon />
+        </Button>
+        <div className="flex flex-1 flex-col items-center text-center">
+          <span className="text-[10px] font-semibold uppercase tracking-[0.24em] text-muted-foreground/90">Calendar</span>
+          <div className="text-base font-semibold capitalize tracking-tight text-foreground">{getMonthLabel(currentMonth, locale)}</div>
+        </div>
+        <Button
+          type="button"
+          variant="outline"
+          size="icon-sm"
+          className="rounded-full 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))}
+        >
+          <ChevronRightIcon />
+        </Button>
+      </div>
+
+      <div
+        className={cn("grid gap-3", resolvedNumberOfMonths > 1 && "sm:grid-cols-2")}
+        style={
+          resolvedNumberOfMonths > 2
+            ? { gridTemplateColumns: `repeat(${resolvedNumberOfMonths}, minmax(0, 1fr))` }
+            : undefined
+        }
+      >
+        {monthDaysByMonth.map(({ month: visibleMonth, days }) => (
+          <div key={toDateKey(visibleMonth)} className="min-w-[16.5rem] rounded-[var(--radius-2xl)] bg-transparent p-1">
+            {shouldShowMonthHeaders && (
+              <div className="mb-2 text-center text-sm font-semibold capitalize tracking-tight text-foreground">
+                {getMonthLabel(visibleMonth, locale)}
+              </div>
+            )}
+
+            <div className="grid grid-cols-7 gap-1 text-center text-[0.68rem] font-semibold uppercase tracking-[0.18em] text-muted-foreground/90">
+              {weekdayLabels.map((weekday) => (
+                <div key={`${toDateKey(visibleMonth)}-${weekday}`} className="py-1">
+                  {weekday}
+                </div>
+              ))}
+            </div>
+
+            <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
+                    key={dateKey}
+                    ref={(node) => {
+                      if (node) buttonRefs.current.set(dateKey, node)
+                      else buttonRefs.current.delete(dateKey)
+                    }}
+                    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-today={dateKey === todayKey || undefined}
+                    data-outside={outside || undefined}
+                    data-in-range={inRange || undefined}
+                    data-disabled-reason={disabledReason}
+                    className={cn(
+                      "flex h-9 items-center justify-center rounded-[min(var(--radius-xl),14px)] 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)}
+                  >
+                    {date.getDate()}
+                  </button>
+                )
+              })}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export { Calendar }

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

@@ -0,0 +1,88 @@
+import * as React from "react"
+import { CalendarIcon } from "lucide-react"
+
+import { Calendar, type CalendarProps } from "@/components/calendar/calendar"
+import { Button } from "@/components/ui/button"
+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 DatePickerProps = Omit<
+  CalendarProps,
+  "mode" | "range" | "onRangeChange" | "labels"
+> & {
+  placeholder?: string
+  labels?: DatePickerLabels
+  disabled?: boolean
+  formatValue?: (value: string) => React.ReactNode
+  triggerClassName?: string
+  contentClassName?: string
+}
+
+function defaultFormatValue(value: string) {
+  const date = parseDateKey(value)
+  if (!date) return value
+  return new Intl.DateTimeFormat("en-US", { dateStyle: "medium" }).format(date)
+}
+
+function DatePicker({
+  value,
+  onValueChange,
+  placeholder,
+  labels,
+  disabled = false,
+  formatValue = defaultFormatValue,
+  triggerClassName,
+  contentClassName,
+  className,
+  ...calendarProps
+}: DatePickerProps) {
+  const [open, setOpen] = React.useState(false)
+  const hasValue = Boolean(value)
+
+  const handleSelect = (nextValue: string) => {
+    onValueChange?.(nextValue)
+    setOpen(false)
+  }
+
+  return (
+    <div data-slot="date-picker" className={cn("w-full", className)}>
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger
+          render={
+            <Button
+              type="button"
+              variant="outline"
+              disabled={disabled}
+              className={cn(
+                "min-h-11 w-full justify-start rounded-[min(var(--radius-xl),16px)] border-border/80 bg-background/96 text-left font-normal shadow-[0_1px_0_rgba(255,255,255,0.06)]",
+                !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>
+        <PopoverContent
+          align="start"
+          className={cn(
+            "w-auto overflow-hidden rounded-[calc(var(--radius-2xl)+2px)] border-border/70 bg-popover p-0 shadow-[0_22px_56px_rgba(15,23,42,0.2)] backdrop-blur",
+            contentClassName
+          )}
+        >
+          <Calendar value={value} onValueChange={handleSelect} labels={labels} {...calendarProps} />
+        </PopoverContent>
+      </Popover>
+    </div>
+  )
+}
+
+export { DatePicker }

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

@@ -0,0 +1,175 @@
+import * as React from "react"
+import { CalendarIcon } from "lucide-react"
+
+import { Calendar, type CalendarDateRange, type CalendarProps } from "@/components/calendar/calendar"
+import { Button } from "@/components/ui/button"
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
+import { cn } from "@/lib/utils"
+import { parseDateKey } from "./date-utils"
+
+export type DateRangePickerValue = CalendarDateRange
+
+export type DateRangePickerLabels = CalendarProps["labels"] & {
+  placeholder?: string
+  apply?: React.ReactNode
+  clear?: React.ReactNode
+}
+
+export type DateRangePickerProps = Omit<
+  CalendarProps,
+  "mode" | "value" | "onValueChange" | "range" | "onRangeChange" | "labels"
+> & {
+  value?: DateRangePickerValue
+  onValueChange?: (value: DateRangePickerValue) => void
+  labels?: DateRangePickerLabels
+  placeholder?: string
+  disabled?: boolean
+  formatValue?: (value: string) => React.ReactNode
+  closeOnSelect?: boolean
+  showFooter?: boolean
+  triggerClassName?: string
+  contentClassName?: string
+}
+
+function defaultFormatValue(value: string) {
+  const date = parseDateKey(value)
+  if (!date) return value
+  return new Intl.DateTimeFormat("en-US", { dateStyle: "medium" }).format(date)
+}
+
+function DateRangePicker({
+  className,
+  value,
+  onValueChange,
+  labels,
+  placeholder,
+  disabled = false,
+  formatValue = defaultFormatValue,
+  closeOnSelect = true,
+  showFooter = false,
+  triggerClassName,
+  contentClassName,
+  numberOfMonths = 2,
+  pagedNavigation = true,
+  ...calendarProps
+}: DateRangePickerProps) {
+  const [open, setOpen] = React.useState(false)
+  const [draftValue, setDraftValue] = React.useState<DateRangePickerValue>(value ?? {})
+  const from = value?.from ?? ""
+  const to = value?.to ?? ""
+  const hasValue = Boolean(from || to)
+  const activeValue = showFooter ? draftValue : value
+  const activeFrom = activeValue?.from ?? ""
+  const activeTo = activeValue?.to ?? ""
+  const hasDraftValue = Boolean(activeFrom || activeTo)
+
+  const label = from && to
+    ? `${formatValue(from)} - ${formatValue(to)}`
+    : from
+      ? `${formatValue(from)} - ...`
+      : placeholder ?? labels?.placeholder ?? "Select date range"
+
+  const draftLabel = activeFrom && activeTo
+    ? `${formatValue(activeFrom)} - ${formatValue(activeTo)}`
+    : activeFrom
+      ? `${formatValue(activeFrom)} - ...`
+      : labels?.placeholder ?? "Select date range"
+
+  React.useEffect(() => {
+    if (open && showFooter) {
+      setDraftValue(value ?? {})
+    }
+  }, [open, showFooter, value])
+
+  const handleRangeChange = (nextValue: DateRangePickerValue) => {
+    if (showFooter) {
+      setDraftValue(nextValue)
+      return
+    }
+
+    onValueChange?.(nextValue)
+    if (closeOnSelect && nextValue.from && nextValue.to) {
+      setOpen(false)
+    }
+  }
+
+  const applyDraftValue = () => {
+    onValueChange?.(draftValue)
+    setOpen(false)
+  }
+
+  const clearDraftValue = () => {
+    const nextValue = {}
+
+    if (showFooter) {
+      setDraftValue(nextValue)
+      return
+    }
+
+    onValueChange?.(nextValue)
+  }
+
+  return (
+    <div data-slot="date-range-picker" className={cn("w-full", className)}>
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger
+          render={
+            <Button
+              type="button"
+              variant="outline"
+              disabled={disabled}
+              className={cn(
+                "min-h-11 w-full justify-start rounded-[min(var(--radius-xl),16px)] border-border/80 bg-background/96 text-left font-normal shadow-[0_1px_0_rgba(255,255,255,0.06)]",
+                !hasValue && "text-muted-foreground",
+                triggerClassName
+              )}
+            />
+          }
+        >
+          <CalendarIcon data-icon="inline-start" />
+          <span className="min-w-0 flex-1 truncate">{label}</span>
+        </PopoverTrigger>
+        <PopoverContent
+          align="start"
+          className={cn(
+            "w-auto overflow-hidden rounded-[calc(var(--radius-2xl)+2px)] border-border/70 bg-popover p-0 shadow-[0_22px_56px_rgba(15,23,42,0.2)] backdrop-blur",
+            contentClassName
+          )}
+        >
+          <Calendar
+            mode="range"
+            range={activeValue}
+            onRangeChange={handleRangeChange}
+            labels={labels}
+            numberOfMonths={numberOfMonths}
+            pagedNavigation={pagedNavigation}
+            {...calendarProps}
+          />
+          {showFooter && (
+            <div className="flex flex-wrap items-center justify-between gap-3 border-t border-border/70 bg-muted/24 px-4 py-3">
+              <div className="min-w-0 text-sm text-muted-foreground">
+                <span className="block truncate">{draftLabel}</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <Button type="button" variant="ghost" size="sm" className="rounded-full" onClick={clearDraftValue}>
+                  {labels?.clear ?? "Clear"}
+                </Button>
+                <Button
+                  type="button"
+                  size="sm"
+                  className="rounded-full"
+                  disabled={!hasDraftValue}
+                  onClick={applyDraftValue}
+                >
+                  {labels?.apply ?? "Apply"}
+                </Button>
+              </div>
+            </div>
+          )}
+        </PopoverContent>
+      </Popover>
+    </div>
+  )
+}
+
+export { DateRangePicker }