azamat-ui-kit-cli 0.2.2

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

@@ -0,0 +1,328 @@
+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
+  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,
+  labels,
+  ...props
+}: CalendarProps) {
+  const [internalMonth, setInternalMonth] = React.useState(() => getInitialMonth(defaultMonth, value, range))
+  const currentMonth = month ?? internalMonth
+  const todayKey = toDateKey(new Date())
+  const disabledSet = React.useMemo(() => new Set(disabledDates ?? []), [disabledDates])
+  const monthDays = React.useMemo(() => getMonthDays(currentMonth, weekStartsOn), [currentMonth, weekStartsOn])
+  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 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(
+    () => monthDays.map(toDateKey).filter((dateKey) => !isDateDisabled(dateKey)),
+    [isDateDisabled, monthDays]
+  )
+
+  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)
+
+    if (!isSameMonth(nextDate, currentMonth)) {
+      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 columnIndex = monthDays.findIndex((item) => toDateKey(item) === toDateKey(date)) % 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"
+      className={cn(
+        "w-72 rounded-[calc(var(--radius-2xl)+2px)] border border-border/75 bg-popover/98 p-3 text-popover-foreground shadow-[0_24px_70px_rgba(15,23,42,0.14)] backdrop-blur",
+        className
+      )}
+      {...props}
+    >
+      <div className="mb-3 flex items-center justify-between gap-2">
+        <Button
+          type="button"
+          variant="outline"
+          size="icon-sm"
+          className="rounded-full border-border/80 bg-background/70 text-foreground shadow-none hover:bg-accent hover:text-accent-foreground"
+          aria-label={labels?.previousMonth ?? "Previous month"}
+          onClick={() => setMonth(addMonths(currentMonth, -1))}
+        >
+          <ChevronLeftIcon />
+        </Button>
+        <div className="text-base font-semibold capitalize tracking-tight text-foreground">{getMonthLabel(currentMonth, locale)}</div>
+        <Button
+          type="button"
+          variant="outline"
+          size="icon-sm"
+          className="rounded-full border-border/80 bg-background/70 text-foreground shadow-none hover:bg-accent hover:text-accent-foreground"
+          aria-label={labels?.nextMonth ?? "Next month"}
+          onClick={() => setMonth(addMonths(currentMonth, 1))}
+        >
+          <ChevronRightIcon />
+        </Button>
+      </div>
+
+      <div className="grid grid-cols-7 gap-1 text-center text-[0.72rem] font-medium uppercase tracking-[0.18em] text-muted-foreground">
+        {weekdayLabels.map((weekday) => (
+          <div key={weekday} className="py-1.5">
+            {weekday}
+          </div>
+        ))}
+      </div>
+
+      <div className="mt-2 grid grid-cols-7 gap-1.5">
+        {monthDays.map((date) => {
+          const dateKey = toDateKey(date)
+          const outside = !isSameMonth(date, currentMonth)
+          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-xl border border-transparent text-sm font-medium outline-none transition-[background-color,color,border-color,box-shadow] hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-35",
+                outside && "text-muted-foreground/45",
+                dateKey === todayKey && "border-primary/30 bg-accent/25 text-foreground",
+                inRange && "border-accent/60 bg-accent/75 text-accent-foreground",
+                selected && "border-primary/80 bg-primary text-primary-foreground shadow-[0_10px_24px_color-mix(in_oklch,var(--primary),transparent_76%)] hover:bg-primary/92 hover:text-primary-foreground"
+              )}
+              onFocus={() => setFocusedDateKey(dateKey)}
+              onKeyDown={(event) => handleDateKeyDown(event, date)}
+              onClick={() => handleDateSelect(dateKey)}
+            >
+              {date.getDate()}
+            </button>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+export { Calendar }

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

@@ -0,0 +1,78 @@
+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("w-full justify-start text-left font-normal", !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 p-0", contentClassName)}>
+          <Calendar value={value} onValueChange={handleSelect} labels={labels} {...calendarProps} />
+        </PopoverContent>
+      </Popover>
+    </div>
+  )
+}
+
+export { DatePicker }

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

@@ -0,0 +1,96 @@
+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
+}
+
+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
+  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,
+  triggerClassName,
+  contentClassName,
+  ...calendarProps
+}: DateRangePickerProps) {
+  const [open, setOpen] = React.useState(false)
+  const from = value?.from ?? ""
+  const to = value?.to ?? ""
+  const hasValue = Boolean(from || to)
+
+  const label = from && to
+    ? `${formatValue(from)} - ${formatValue(to)}`
+    : from
+      ? `${formatValue(from)} - ...`
+      : placeholder ?? labels?.placeholder ?? "Select date range"
+
+  const handleRangeChange = (nextValue: DateRangePickerValue) => {
+    onValueChange?.(nextValue)
+    if (nextValue.from && nextValue.to) {
+      setOpen(false)
+    }
+  }
+
+  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("w-full justify-start text-left font-normal", !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 p-0", contentClassName)}>
+          <Calendar
+            mode="range"
+            range={value}
+            onRangeChange={handleRangeChange}
+            labels={labels}
+            {...calendarProps}
+          />
+        </PopoverContent>
+      </Popover>
+    </div>
+  )
+}
+
+export { DateRangePicker }

package/vendor/src/components/calendar/date-utils.ts

@@ -0,0 +1,89 @@
+const DATE_KEY_REGEXP = /^\d{4}-\d{2}-\d{2}$/
+
+function padDatePart(value: number) {
+  return String(value).padStart(2, "0")
+}
+
+function toDateKey(date: Date) {
+  return `${date.getFullYear()}-${padDatePart(date.getMonth() + 1)}-${padDatePart(date.getDate())}`
+}
+
+function parseDateKey(value?: string | null) {
+  if (!value || !DATE_KEY_REGEXP.test(value)) return null
+
+  const [year, month, day] = value.split("-").map(Number)
+  const date = new Date(year, month - 1, day)
+
+  if (date.getFullYear() !== year || date.getMonth() !== month - 1 || date.getDate() !== day) {
+    return null
+  }
+
+  return date
+}
+
+function startOfMonth(date: Date) {
+  return new Date(date.getFullYear(), date.getMonth(), 1)
+}
+
+function addMonths(date: Date, amount: number) {
+  return new Date(date.getFullYear(), date.getMonth() + amount, 1)
+}
+
+function isSameMonth(left: Date, right: Date) {
+  return left.getFullYear() === right.getFullYear() && left.getMonth() === right.getMonth()
+}
+
+function isBeforeDate(left: string, right?: string | null) {
+  return Boolean(right && left < right)
+}
+
+function isAfterDate(left: string, right?: string | null) {
+  return Boolean(right && left > right)
+}
+
+function isWithinRange(date: string, from?: string | null, to?: string | null) {
+  if (!from || !to) return false
+  return date >= from && date <= to
+}
+
+function getMonthLabel(date: Date, locale = "en-US") {
+  return new Intl.DateTimeFormat(locale, { month: "long", year: "numeric" }).format(date)
+}
+
+function getWeekdayLabels(locale = "en-US", weekStartsOn: 0 | 1 = 1) {
+  const baseDate = new Date(2024, 0, weekStartsOn === 1 ? 1 : 7)
+
+  return Array.from({ length: 7 }, (_, index) => {
+    const date = new Date(baseDate)
+    date.setDate(baseDate.getDate() + index)
+    return new Intl.DateTimeFormat(locale, { weekday: "short" }).format(date)
+  })
+}
+
+function getMonthDays(month: Date, weekStartsOn: 0 | 1 = 1) {
+  const start = startOfMonth(month)
+  const dayOfWeek = start.getDay()
+  const offset = weekStartsOn === 1 ? (dayOfWeek + 6) % 7 : dayOfWeek
+  const firstVisibleDay = new Date(start)
+  firstVisibleDay.setDate(start.getDate() - offset)
+
+  return Array.from({ length: 42 }, (_, index) => {
+    const date = new Date(firstVisibleDay)
+    date.setDate(firstVisibleDay.getDate() + index)
+    return date
+  })
+}
+
+export {
+  addMonths,
+  getMonthDays,
+  getMonthLabel,
+  getWeekdayLabels,
+  isAfterDate,
+  isBeforeDate,
+  isSameMonth,
+  isWithinRange,
+  parseDateKey,
+  startOfMonth,
+  toDateKey,
+}

package/vendor/src/components/calendar/index.ts

@@ -0,0 +1,4 @@
+export * from "./date-utils"
+export * from "./calendar"
+export * from "./date-picker"
+export * from "./date-range-picker"