@gentleduck/registry-ui 0.2.12 → 0.3.1

package/.turbo/turbo-test.log

@@ -1,9 +1,9 @@
 $ bun test
-bun test v1.3.5 (1e86cebd)
+bun test v1.3.10 (30e609e0)
 
 ::group::src/pagination/__test__/pagination.test.tsx:
-(pass) registry-ui pagination > PaginationWrapper prefers provided button icons over the default chevrons [18.00ms]
-(pass) registry-ui pagination > PaginationWrapper still renders default chevrons when icons are not provided [4.00ms]
+(pass) registry-ui pagination > PaginationWrapper prefers provided button icons over the default chevrons [17.00ms]
+(pass) registry-ui pagination > PaginationWrapper still renders default chevrons when icons are not provided [3.00ms]
 
 ::endgroup::
 
@@ -30,7 +30,7 @@ bun test v1.3.5 (1e86cebd)
 (pass) registry-ui button > button exports keep stable display names
 (pass) registry-ui button > Button renders loading state as a busy disabled native button [1.00ms]
 (pass) registry-ui button > Button preserves explicit disabled state even when loading is false
-(pass) registry-ui button > Button collapses into icon-only mode and hides secondary content [1.00ms]
+(pass) registry-ui button > Button collapses into icon-only mode and hides secondary content
 (pass) registry-ui button > AnimationIcon renders left and right placements around children
 
 ::endgroup::
@@ -38,4 +38,4 @@ bun test v1.3.5 (1e86cebd)
  14 pass
  0 fail
  43 expect() calls
-Ran 14 tests across 5 files. [439.00ms]
+Ran 14 tests across 5 files. [441.00ms]

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @gentleduck/registry-ui
 
+## 0.3.1
+
+### Patch Changes
+
+- Updated dependencies [58d1c61]
+  - @gentleduck/calendar@0.2.0
+
+## 0.3.0
+
+### Minor Changes
+
+- 3ee8b3a: feat: add AI documentation chat and command menu enhancements
+
+  @gentleduck/docs:
+
+  - Add useAIChat hook for streaming AI chat with rAF-batched updates
+  - Add AIChatPanel component with markdown rendering, shiki syntax highlighting, and dynamic props
+  - Add AI toggle mode to CommandMenu with auto-switch on empty search results
+  - Add react-markdown and shiki as optional peer dependencies
+
+  @gentleduck/registry-ui:
+
+  - Add hideClose prop to DialogContent to conditionally hide the close button
+  - Add children prop to CommandInput for rendering extra elements in the input wrapper
+  - Add contentClassName prop to CommandDialog for dynamic dialog sizing
+
 ## 0.2.12
 
 ### Patch Changes

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 @gentleduck 
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/SECURITY.md

@@ -0,0 +1,19 @@
+# Security Policy
+
+## Supported Versions
+We provide security updates for the latest major release of gentleduck/ui.  
+Older versions may not receive patches.
+
+## Reporting a Vulnerability
+⚠️ **Please do not disclose security issues publicly.**  
+If you discover a vulnerability in gentleduck/ui:
+
+1. Report it privately by emailing: **security@gentleduck.org**
+2. Include a detailed description of the vulnerability and how to reproduce it.
+3. We will confirm receipt within **48 hours** and provide a timeline for a fix.
+
+## Responsible Disclosure
+We ask security researchers to give us **90 days** to address issues before public disclosure.  
+We will credit you in release notes unless you prefer to remain anonymous.
+
+Thank you for helping keep gentleduck/ui secure.

package/package.json

@@ -4,6 +4,7 @@
     "node": ">=22.0.0"
   },
   "dependencies": {
+    "@gentleduck/calendar": "workspace:*",
     "@gentleduck/hooks": "^0.1.12",
     "@gentleduck/libs": "^0.1.15",
     "@gentleduck/motion": "^0.1.17",
@@ -14,7 +15,6 @@
     "lucide-react": "0.577.0",
     "next-themes": "^0.4.6",
     "react": "^19.2.4",
-    "react-day-picker": "^9.8.1",
     "react-dom": "^19.2.4",
     "react-hook-form": "^7.71.1",
     "react-resizable-panels": "^4.7.0",
@@ -56,5 +56,13 @@
     "test": "bun test"
   },
   "type": "module",
-  "version": "0.2.12"
+  "version": "0.3.1",
+  "description": "Styled Tailwind components for Duck UI.",
+  "keywords": [
+    "gentleduck",
+    "react",
+    "components",
+    "tailwind",
+    "ui"
+  ]
 }

package/src/accordion/accordion.tsx

@@ -244,4 +244,4 @@ const AccordionContent = React.forwardRef<HTMLDivElement, React.HTMLProps<HTMLDi
 )
 AccordionContent.displayName = 'AccordionContent'
 
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger }

package/src/alert/alert.tsx

@@ -49,4 +49,4 @@ const AlertDescription = React.forwardRef<HTMLDivElement, React.HTMLAttributes<H
 )
 AlertDescription.displayName = 'AlertDescription'
 
-export { Alert, AlertTitle, AlertDescription }
+export { Alert, AlertDescription, AlertTitle }

package/src/alert-dialog/alert-dialog.tsx

@@ -101,14 +101,14 @@ AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
 
 export {
   AlertDialog,
-  AlertDialogPortal,
-  AlertDialogOverlay,
-  AlertDialogTrigger,
+  AlertDialogAction,
+  AlertDialogCancel,
   AlertDialogContent,
-  AlertDialogHeader,
+  AlertDialogDescription,
   AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogOverlay,
+  AlertDialogPortal,
   AlertDialogTitle,
-  AlertDialogDescription,
-  AlertDialogAction,
-  AlertDialogCancel,
+  AlertDialogTrigger,
 }

package/src/avatar/avatar.tsx

@@ -75,4 +75,4 @@ const AvatarGroup = React.forwardRef<HTMLDivElement, AvatarGroupProps>(
 )
 AvatarGroup.displayName = 'AvatarGroup'
 
-export { Avatar, AvatarImage, AvatarFallback, AvatarGroup }
+export { Avatar, AvatarFallback, AvatarGroup, AvatarImage }

package/src/breadcrumb/breadcrumb.tsx

@@ -110,10 +110,10 @@ BreadcrumbEllipsis.displayName = 'BreadcrumbEllipsis'
 
 export {
   Breadcrumb,
-  BreadcrumbList,
+  BreadcrumbEllipsis,
   BreadcrumbItem,
   BreadcrumbLink,
+  BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
-  BreadcrumbEllipsis,
 }

package/src/button/button.tsx

@@ -76,4 +76,4 @@ function AnimationIcon({ children, animationIcon }: AnimationIconProps): React.J
 }
 AnimationIcon.displayName = 'AnimationIcon'
 
-export { Button, AnimationIcon }
+export { AnimationIcon, Button }

package/src/calendar/calendar-day.tsx

@@ -0,0 +1,131 @@
+'use client'
+
+import type { CalendarDay as CalendarDayType, DayProps } from '@gentleduck/calendar'
+import { cn } from '@gentleduck/libs/cn'
+import * as React from 'react'
+import { buttonVariants } from '../button'
+import { getCachedNumberFormat } from './calendar.utils'
+
+const HEBREW_ONES = [
+  '',
+  '\u05D0\u05F3',
+  '\u05D1\u05F3',
+  '\u05D2\u05F3',
+  '\u05D3\u05F3',
+  '\u05D4\u05F3',
+  '\u05D5\u05F3',
+  '\u05D6\u05F3',
+  '\u05D7\u05F3',
+  '\u05D8\u05F3',
+]
+const HEBREW_TENS = ['', '\u05D9\u05F3', '\u05DB\u05F3', '\u05DC\u05F3']
+
+function toHebrewNumeral(n: number): string {
+  if (n === 15) return '\u05D8\u05F4\u05D5'
+  if (n === 16) return '\u05D8\u05F4\u05D6'
+  const ten = Math.floor(n / 10)
+  const one = n % 10
+  if (one === 0) return HEBREW_TENS[ten] ?? String(n)
+  if (ten === 0) return HEBREW_ONES[one] ?? String(n)
+  const t = (HEBREW_TENS[ten] ?? '').replace('\u05F3', '')
+  const o = (HEBREW_ONES[one] ?? '').replace('\u05F3', '')
+  return `${t}\u05F4${o}`
+}
+
+interface CalendarDayCellProps {
+  day: CalendarDayType<Date>
+  dayProps: Omit<DayProps, 'role' | 'aria-selected' | 'onMouseEnter'>
+  isFocused: boolean
+  isSelectedSingle: boolean
+  isFirstInRow: boolean
+  isLastInRow: boolean
+  locale?: string
+  onFocusDate: (date: Date) => void
+  renderDay?: (day: CalendarDayType<Date>, children: React.ReactNode) => React.ReactNode
+}
+
+function formatDayNumber(d: number, locale?: string): React.ReactNode {
+  if (!locale) return d
+  if (locale.startsWith('ar')) return getCachedNumberFormat(`${locale}-u-nu-arab`).format(d)
+  if (locale.startsWith('he')) return toHebrewNumeral(d)
+  return getCachedNumberFormat(locale).format(d)
+}
+
+export const CalendarDayCell = React.memo(function CalendarDayCell({
+  day,
+  dayProps,
+  isFocused,
+  isSelectedSingle,
+  isFirstInRow,
+  isLastInRow,
+  locale,
+  onFocusDate,
+  renderDay,
+}: CalendarDayCellProps) {
+  const isInRange = day.isRangeStart || day.isRangeEnd || day.isRangeMiddle
+  const dayNum = formatDayNumber(day.date.getDate(), locale)
+
+  return (
+    // biome-ignore lint/a11y/useSemanticElements: gridcell on div per WAI-ARIA grid pattern
+    // biome-ignore lint/a11y/useFocusableInteractive: gridcell focus is on the child button
+    <div
+      role="gridcell"
+      aria-selected={day.isSelected}
+      data-selected={day.isSelected ? 'true' : undefined}
+      data-focused={isFocused ? 'true' : undefined}
+      className={cn(
+        'group/day relative aspect-square h-full w-full select-none p-0 text-center',
+        day.isHidden && 'invisible',
+        isInRange && 'overflow-hidden',
+        day.isRangeStart && 'rounded-s-md bg-accent',
+        day.isRangeEnd && 'rounded-e-md bg-accent',
+        day.isRangeMiddle && 'bg-accent',
+        isInRange && isFirstInRow && !day.isRangeStart && 'rounded-s-md',
+        isInRange && isLastInRow && !day.isRangeEnd && 'rounded-e-md',
+        day.isOutside && !day.isHidden && 'text-muted-foreground',
+        day.isOutside && !day.isHidden && day.isSelected && 'text-muted-foreground',
+        day.isDisabled && !day.isHidden && 'pointer-events-none text-muted-foreground opacity-50',
+      )}>
+      <button
+        type="button"
+        {...dayProps}
+        disabled={day.isDisabled}
+        tabIndex={day.isDisabled ? -1 : dayProps.tabIndex}
+        onClick={(e) => {
+          if (day.isDisabled) return
+          dayProps.onClick({ shiftKey: e.shiftKey })
+          onFocusDate(day.date)
+          // Remove browser focus so the cell returns to neutral visual state
+          ;(e.currentTarget as HTMLElement).blur()
+        }}
+        data-day={day.date.toLocaleDateString()}
+        data-range-end={day.isRangeEnd || undefined}
+        data-range-middle={day.isRangeMiddle || undefined}
+        data-range-start={day.isRangeStart || undefined}
+        data-selected-single={isSelectedSingle || undefined}
+        data-today={day.isToday || undefined}
+        data-focused={isFocused || undefined}
+        className={cn(
+          buttonVariants({ variant: 'ghost', size: 'icon' }),
+          'flex aspect-square size-auto w-full min-w-(--gentleduck-calendar-cell) flex-col gap-1 font-normal leading-none focus-visible:ring-0 focus-visible:ring-offset-0',
+          // Single selection
+          'data-[selected-single=true]:rounded-md data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground',
+          // Range selection
+          'data-[range-start=true]:rounded-s-md data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground',
+          'data-[range-end=true]:rounded-e-md data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground',
+          'data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground',
+          // Outside month
+          day.isOutside && 'text-muted-foreground/50',
+          // Today
+          'data-[today=true]:font-semibold',
+          // Focus ring
+          'group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:rounded-md group-data-[focused=true]/day:border group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-1 group-data-[focused=true]/day:ring-ring/50',
+          '[&>span]:text-xs [&>span]:opacity-70',
+        )}>
+        {renderDay ? renderDay(day, dayNum) : dayNum}
+      </button>
+    </div>
+  )
+})
+
+CalendarDayCell.displayName = 'CalendarDayCell'

package/src/calendar/calendar-header.tsx

@@ -0,0 +1,291 @@
+'use client'
+
+import { buildCalendarYear, type DateAdapter, goToMonth, goToYear, NativeAdapter } from '@gentleduck/calendar'
+import { cn } from '@gentleduck/libs/cn'
+import { CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-react'
+import * as React from 'react'
+import { buttonVariants } from '../button'
+import { getCachedNumberFormat } from './calendar.utils'
+
+const defaultAdapter = new NativeAdapter()
+
+/** Height of each dropdown item in pixels. */
+const ITEM_HEIGHT = 28
+/** Number of items visible in the dropdown viewport. */
+const VISIBLE_ITEMS = 9
+const LIST_HEIGHT = ITEM_HEIGHT * VISIBLE_ITEMS
+/** Extra items rendered above/below the visible area for smooth scrolling. */
+const OVERSCAN = 3
+
+// ---------------------------------------------------------------------------
+// VirtualizedDropdown  -  shared by month and year
+// ---------------------------------------------------------------------------
+
+function VirtualizedDropdown({
+  items,
+  activeValue,
+  onSelect,
+  open,
+}: {
+  items: { value: string; label: string }[]
+  activeValue: string
+  onSelect: (value: string) => void
+  open: boolean
+}) {
+  const scrollRef = React.useRef<HTMLDivElement>(null)
+  const [scrollTop, setScrollTop] = React.useState(() => {
+    const idx = items.findIndex((i) => i.value === activeValue)
+    return Math.max(0, idx * ITEM_HEIGHT - LIST_HEIGHT / 2 + ITEM_HEIGHT / 2)
+  })
+
+  const totalHeight = items.length * ITEM_HEIGHT
+
+  React.useLayoutEffect(() => {
+    if (!open || !scrollRef.current) return
+    const idx = items.findIndex((i) => i.value === activeValue)
+    const target = Math.max(0, idx * ITEM_HEIGHT - LIST_HEIGHT / 2 + ITEM_HEIGHT / 2)
+    scrollRef.current.scrollTop = target
+    setScrollTop(target)
+  }, [activeValue, items, open])
+
+  const startIndex = Math.max(0, Math.floor(scrollTop / ITEM_HEIGHT) - OVERSCAN)
+  const endIndex = Math.min(items.length, Math.ceil((scrollTop + LIST_HEIGHT) / ITEM_HEIGHT) + OVERSCAN)
+
+  // Find the longest label to size the container
+  const longestLabel = React.useMemo(
+    () => items.reduce((a, b) => (b.label.length > a.length ? b.label : a), ''),
+    [items],
+  )
+
+  return (
+    <div
+      ref={scrollRef}
+      data-state={open ? 'open' : 'closed'}
+      className={cn(
+        'overflow-y-auto rounded-md border bg-popover p-1 shadow-md',
+        'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=open]:slide-in-from-top-2 data-[state=closed]:slide-out-to-top-2 origin-top data-[state=closed]:hidden data-[state=closed]:animate-out data-[state=open]:animate-in',
+        'transition-all transition-discrete duration-150 ease-(--duck-motion-ease)',
+      )}
+      style={{ height: LIST_HEIGHT, scrollBehavior: 'auto' }}
+      onScroll={(e) => setScrollTop(e.currentTarget.scrollTop)}>
+      {/* Hidden sizer  -  establishes the intrinsic width from the longest label */}
+      <div
+        aria-hidden
+        className="pointer-events-none invisible flex h-0 items-center gap-2 overflow-hidden ps-6 pe-4 text-sm">
+        <CheckIcon className="size-3.5 shrink-0" />
+        {longestLabel}
+      </div>
+      <div style={{ height: totalHeight, position: 'relative' }}>
+        {items.slice(startIndex, endIndex).map((item, i) => {
+          const isActive = item.value === activeValue
+          return (
+            <button
+              key={item.value}
+              type="button"
+              className={cn(
+                'flex w-full cursor-default select-none items-center gap-2 whitespace-nowrap rounded-sm ps-6 pe-2 text-sm outline-none hover:bg-accent hover:text-accent-foreground',
+                isActive && 'bg-accent font-medium text-accent-foreground',
+              )}
+              style={{
+                position: 'absolute',
+                top: (startIndex + i) * ITEM_HEIGHT,
+                height: ITEM_HEIGHT,
+                left: 0,
+                right: 0,
+              }}
+              onClick={() => onSelect(item.value)}>
+              {isActive && <CheckIcon className="absolute start-1.5 size-3.5" />}
+              {item.label}
+            </button>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// DropdownTrigger  -  shared trigger button
+// ---------------------------------------------------------------------------
+
+function DropdownTrigger({ label, open, onClick }: { label: string; open: boolean; onClick: () => void }) {
+  return (
+    <button
+      type="button"
+      dir="ltr"
+      aria-expanded={open}
+      onClick={onClick}
+      className="flex h-7 w-fit shrink-0 items-center gap-1 whitespace-nowrap rounded-md border px-2 font-medium text-sm shadow-xs">
+      <span dir="auto">{label}</span>
+      <ChevronDownIcon className="size-3 text-muted-foreground" />
+    </button>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// CalendarHeader
+// ---------------------------------------------------------------------------
+
+interface CalendarHeaderProps {
+  adapter?: DateAdapter<Date>
+  month: Date
+  title: string
+  direction: 'ltr' | 'rtl'
+  locale?: string
+  buttonVariant: string
+  showDropdowns: boolean
+  yearRange: { from: number; to: number }
+  getNavProps: (dir: 'prev' | 'next') => { 'aria-label': string; disabled: boolean; onClick: () => void }
+  getHeaderProps: () => { id: string; 'aria-live': 'polite' }
+  onMonthSelect: (date: Date) => void
+}
+
+/** Prevents Select portal interactions from dismissing parent Popover. */
+function stopPopoverDismiss(e: React.PointerEvent) {
+  e.stopPropagation()
+}
+
+export function CalendarHeader({
+  adapter: adapterProp,
+  month,
+  title,
+  direction,
+  locale,
+  buttonVariant,
+  showDropdowns,
+  yearRange,
+  getNavProps,
+  getHeaderProps,
+  onMonthSelect,
+}: CalendarHeaderProps) {
+  const adapter = adapterProp ?? defaultAdapter
+  const headerProps = getHeaderProps()
+  const currentYear = adapter.getYear(month)
+  const currentMonth = adapter.getMonth(month)
+  const [monthOpen, setMonthOpen] = React.useState(false)
+  const [yearOpen, setYearOpen] = React.useState(false)
+  const dropdownRef = React.useRef<HTMLDivElement>(null)
+
+  // Close dropdowns on click outside (without a fixed backdrop that breaks Popover)
+  React.useEffect(() => {
+    if (!monthOpen && !yearOpen) return
+    function handlePointerDown(e: PointerEvent) {
+      if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
+        setMonthOpen(false)
+        setYearOpen(false)
+      }
+    }
+    document.addEventListener('pointerdown', handlePointerDown, true)
+    return () => document.removeEventListener('pointerdown', handlePointerDown, true)
+  }, [monthOpen, yearOpen])
+
+  const isArabic = locale?.startsWith('ar')
+  const formatLocaleTag = isArabic ? `${locale}-u-nu-arab` : locale
+
+  const monthItems = React.useMemo(() => {
+    const entries = buildCalendarYear(adapter, month, locale)
+    return entries.map((e) => ({
+      value: String(e.month),
+      label: isArabic ? e.label : e.label.slice(0, 3),
+    }))
+  }, [adapter, month, locale, isArabic])
+
+  const yearItems = React.useMemo(() => {
+    const fmt = formatLocaleTag ? getCachedNumberFormat(formatLocaleTag, { useGrouping: false }) : null
+    const result: { value: string; label: string }[] = []
+    for (let y = yearRange.from; y <= yearRange.to; y++) {
+      result.push({ value: String(y), label: fmt ? fmt.format(y) : String(y) })
+    }
+    return result
+  }, [yearRange.from, yearRange.to, formatLocaleTag])
+
+  return (
+    <div className="flex h-(--gentleduck-calendar-cell) w-full items-center justify-center px-(--gentleduck-calendar-cell)">
+      <div className="absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1">
+        <button
+          type="button"
+          {...getNavProps('prev')}
+          className={cn(
+            buttonVariants({ variant: buttonVariant as 'ghost' }),
+            'size-(--gentleduck-calendar-cell) select-none p-0 aria-disabled:opacity-50',
+          )}>
+          <ChevronLeftIcon className={cn('size-4', direction === 'rtl' && 'rotate-180')} />
+        </button>
+
+        {showDropdowns ? (
+          <div
+            ref={dropdownRef}
+            {...headerProps}
+            className="flex items-center gap-1.5"
+            onPointerDown={stopPopoverDismiss}>
+            {/* Month dropdown */}
+            <div className="relative">
+              <DropdownTrigger
+                label={adapter.format(month, { month: isArabic ? 'long' : 'short' }, formatLocaleTag)}
+                open={monthOpen}
+                onClick={() => {
+                  setMonthOpen((o) => !o)
+                  setYearOpen(false)
+                }}
+              />
+              <div className="absolute start-0 top-full z-50 mt-1">
+                <VirtualizedDropdown
+                  items={monthItems}
+                  activeValue={String(currentMonth)}
+                  open={monthOpen}
+                  onSelect={(v) => {
+                    onMonthSelect(goToMonth(adapter, month, Number(v)))
+                    setMonthOpen(false)
+                  }}
+                />
+              </div>
+            </div>
+
+            {/* Year dropdown */}
+            <div className="relative">
+              <DropdownTrigger
+                label={
+                  formatLocaleTag
+                    ? getCachedNumberFormat(formatLocaleTag, { useGrouping: false }).format(currentYear)
+                    : String(currentYear)
+                }
+                open={yearOpen}
+                onClick={() => {
+                  setYearOpen((o) => !o)
+                  setMonthOpen(false)
+                }}
+              />
+              <div className="absolute end-0 top-full z-50 mt-1">
+                <VirtualizedDropdown
+                  items={yearItems}
+                  activeValue={String(currentYear)}
+                  open={yearOpen}
+                  onSelect={(v) => {
+                    onMonthSelect(goToYear(adapter, month, Number(v)))
+                    setYearOpen(false)
+                  }}
+                />
+              </div>
+            </div>
+          </div>
+        ) : (
+          <div {...headerProps} className="select-none font-medium text-sm">
+            {title}
+          </div>
+        )}
+
+        <button
+          type="button"
+          {...getNavProps('next')}
+          className={cn(
+            buttonVariants({ variant: buttonVariant as 'ghost' }),
+            'size-(--gentleduck-calendar-cell) select-none p-0 aria-disabled:opacity-50',
+          )}>
+          <ChevronRightIcon className={cn('size-4', direction === 'rtl' && 'rotate-180')} />
+        </button>
+      </div>
+    </div>
+  )
+}
+
+CalendarHeader.displayName = 'CalendarHeader'