azamat-ui-kit-cli 0.2.2 → 0.3.4

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "azamat-ui-kit-cli",
-  "version": "0.2.2",
+  "version": "0.3.4",
   "description": "CLI for Azamat UI Kit source-copy, presets, and theme setup.",
   "license": "MIT",
   "type": "module",
   "bin": {
-    "azamat-ui-kit": "dist/index.js"
+    "azamat-ui-kit": "dist/index.cjs"
   },
   "files": [
     "dist",

package/vendor/src/components/actions/action-menu.tsx

@@ -66,17 +66,20 @@ function ActionMenu({
   return (
     <DropdownMenu>
       <DropdownMenuTrigger
-        render={
-          trigger ?? (
-            <Button
-              type="button"
-              variant="ghost"
-              size="icon-sm"
-              disabled={disabled}
-              className={triggerClassName}
-            />
-          )
-        }
+        render={
+          trigger ?? (
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon-sm"
+              disabled={disabled}
+              className={cn(
+                "rounded-full border border-transparent text-muted-foreground hover:border-border/70 hover:bg-muted/50 hover:text-foreground",
+                triggerClassName
+              )}
+            />
+          )
+        }
       >
         {!trigger && <MoreHorizontalIcon />}
         <span className="sr-only">Open actions</span>
@@ -104,13 +107,13 @@ function ActionMenu({
               variant={action.destructive ? "destructive" : "default"}
               onClick={() => void handleSelect(action)}
             >
-              {isLoading ? <Loader2Icon className="animate-spin" /> : action.icon}
-              <span className="min-w-0 flex-1 truncate">{action.label}</span>
-              {action.shortcut && (
-                <span className="ml-auto text-xs text-muted-foreground">{action.shortcut}</span>
-              )}
-            </DropdownMenuItem>
-          )
+              {isLoading ? <Loader2Icon className="animate-spin" /> : action.icon}
+              <span className="min-w-0 flex-1 truncate">{action.label}</span>
+              {action.shortcut && (
+                <span className="ml-auto text-[11px] tracking-[0.14em] text-muted-foreground">{action.shortcut}</span>
+              )}
+            </DropdownMenuItem>
+          )
         })}
       </DropdownMenuContent>
     </DropdownMenu>

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

@@ -31,10 +31,10 @@ export type CalendarLabels = {
   disabledDate?: (date: string, reason: CalendarDisabledReason) => string
 }
 
-export type CalendarProps = React.ComponentProps<"div"> & {
-  value?: string | null
-  range?: CalendarDateRange
-  onValueChange?: (value: string) => void
+export type CalendarProps = React.ComponentProps<"div"> & {
+  value?: string | null
+  range?: CalendarDateRange
+  onValueChange?: (value: string) => void
   onRangeChange?: (range: CalendarDateRange) => void
   mode?: "single" | "range"
   month?: Date
@@ -42,11 +42,14 @@ export type CalendarProps = React.ComponentProps<"div"> & {
   onMonthChange?: (month: Date) => void
   min?: string
   max?: string
-  disabledDates?: string[]
-  locale?: string
-  weekStartsOn?: 0 | 1
-  labels?: CalendarLabels
-}
+  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)
@@ -103,20 +106,41 @@ function Calendar({
   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)
+  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 => {
@@ -128,12 +152,12 @@ function Calendar({
     [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 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
@@ -153,9 +177,9 @@ function Calendar({
     onMonthChange?.(next)
   }
 
-  const moveFocus = (date: Date) => {
-    let nextDate = date
-    let nextKey = toDateKey(nextDate)
+  const moveFocus = (date: Date) => {
+    let nextDate = date
+    let nextKey = toDateKey(nextDate)
     let guard = 0
 
     while (isDateDisabled(nextKey) && guard < 370) {
@@ -163,13 +187,15 @@ function Calendar({
       nextKey = toDateKey(nextDate)
       guard += 1
     }
-
-    setFocusedDateKey(nextKey)
-
-    if (!isSameMonth(nextDate, currentMonth)) {
-      setMonth(startOfMonth(nextDate))
-    }
-  }
+
+    setFocusedDateKey(nextKey)
+
+    const isVisibleInCurrentViewport = visibleMonths.some((visibleMonth) => isSameMonth(nextDate, visibleMonth))
+
+    if (!isVisibleInCurrentViewport) {
+      setMonth(startOfMonth(nextDate))
+    }
+  }
 
   const handleDateSelect = (dateKey: string) => {
     if (isDateDisabled(dateKey)) return
@@ -197,10 +223,12 @@ function Calendar({
     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) {
+  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))
@@ -239,90 +267,113 @@ function Calendar({
   return (
     <div
       data-slot="calendar"
+      data-months={resolvedNumberOfMonths}
       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",
+        "w-fit rounded-[calc(var(--radius-2xl)+4px)] border border-border/80 bg-popover/98 p-3.5 text-popover-foreground shadow-[0_24px_70px_rgba(15,23,42,0.16)] ring-1 ring-foreground/6 backdrop-blur",
         className
       )}
       {...props}
     >
-      <div className="mb-3 flex items-center justify-between gap-2">
+      <div className="mb-4 flex items-center justify-between gap-3">
         <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"
+          className="rounded-full border-border/90 bg-background/88 text-foreground shadow-[0_1px_0_rgba(255,255,255,0.08)] hover:border-ring/30 hover:bg-accent hover:text-accent-foreground"
           aria-label={labels?.previousMonth ?? "Previous month"}
-          onClick={() => setMonth(addMonths(currentMonth, -1))}
+          onClick={() => setMonth(addMonths(currentMonth, -navigationStep))}
         >
           <ChevronLeftIcon />
         </Button>
-        <div className="text-base font-semibold capitalize tracking-tight text-foreground">{getMonthLabel(currentMonth, locale)}</div>
+        <div className="flex flex-1 flex-col items-center text-center">
+          <span className="text-[11px] font-semibold uppercase tracking-[0.24em] text-muted-foreground">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/80 bg-background/70 text-foreground shadow-none hover:bg-accent hover:text-accent-foreground"
+          className="rounded-full border-border/90 bg-background/88 text-foreground shadow-[0_1px_0_rgba(255,255,255,0.08)] hover:border-ring/30 hover:bg-accent hover:text-accent-foreground"
           aria-label={labels?.nextMonth ?? "Next month"}
-          onClick={() => setMonth(addMonths(currentMonth, 1))}
+          onClick={() => setMonth(addMonths(currentMonth, navigationStep))}
         >
           <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
+        className={cn("grid gap-3.5", 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-[17rem] rounded-[var(--radius-2xl)] border border-border/60 bg-background/58 p-2.5 shadow-[inset_0_1px_0_rgba(255,255,255,0.05)]">
+            {shouldShowMonthHeaders && (
+              <div className="mb-3 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">
+              {weekdayLabels.map((weekday) => (
+                <div key={`${toDateKey(visibleMonth)}-${weekday}`} className="py-1.5">
+                  {weekday}
+                </div>
+              ))}
+            </div>
+
+            <div className="mt-2 grid grid-cols-7 gap-1.5">
+              {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-10 items-center justify-center rounded-[min(var(--radius-xl),16px)] border border-transparent text-sm font-medium outline-none transition-[background-color,color,border-color,box-shadow,transform] hover:border-border/70 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/42",
+                      dateKey === todayKey && "border-primary/25 bg-accent/42 text-foreground",
+                      inRange && "border-primary/12 bg-primary/10 text-foreground",
+                      selected && "border-primary/85 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>
         ))}
       </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>
-  )
-}
+    </div>
+  )
+}
 
 export { Calendar }

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

@@ -52,25 +52,35 @@ function DatePicker({
   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)}
-            />
-          }
-        >
+        <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 p-0", contentClassName)}>
-          <Calendar value={value} onValueChange={handleSelect} labels={labels} {...calendarProps} />
-        </PopoverContent>
-      </Popover>
+        <PopoverContent
+          align="start"
+          className={cn(
+            "w-auto rounded-[var(--radius-2xl)] border-border/80 bg-popover/98 p-0 shadow-[0_24px_80px_rgba(15,23,42,0.18)] backdrop-blur",
+            contentClassName
+          )}
+        >
+          <Calendar value={value} onValueChange={handleSelect} labels={labels} {...calendarProps} />
+        </PopoverContent>
+      </Popover>
     </div>
   )
 }