@refraction-ui/astro 0.4.0 → 0.4.2

package/dist/astro-data-table/DataTable.astro

@@ -0,0 +1,263 @@
+---
+import {
+  createDataTable,
+  tableVariants,
+  headerVariants,
+  cellVariants,
+  rowVariants,
+  type ColumnDef,
+  type SortDirection,
+} from '@refraction-ui/data-table'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  columns: ColumnDef[]
+  data: Record<string, unknown>[]
+  sortBy?: string
+  sortDir?: SortDirection
+  emptyMessage?: string
+}
+
+const {
+  columns,
+  data,
+  sortBy,
+  sortDir = 'asc',
+  emptyMessage = 'No data available',
+  class: className,
+  ...props
+} = Astro.props
+
+const api = createDataTable({ columns, data, sortBy, sortDir })
+const sortedData = api.state.sortedData
+const hasFilterable = columns.some((c: ColumnDef) => c.filterable)
+---
+
+<div class="relative w-full overflow-auto" data-rfr-data-table data-rfr-data-table-columns={JSON.stringify(columns)} data-rfr-data-table-data={JSON.stringify(data)} {...props}>
+  <table class={cn(tableVariants(), className)} role="table">
+    <thead>
+      <tr role="row">
+        {columns.map((col: ColumnDef) => {
+          const hProps = api.getHeaderProps(col)
+          return (
+            <th
+              class={headerVariants({ sortable: col.sortable ? 'true' : 'false' })}
+              role={hProps.role as string}
+              aria-sort={hProps['aria-sort'] as any}
+              data-rfr-data-table-header={col.id}
+              data-sortable={col.sortable ? 'true' : undefined}
+            >
+              {col.header}
+              {col.sortable && sortBy === col.id && (
+                <span aria-hidden="true">{sortDir === 'asc' ? ' \u2191' : ' \u2193'}</span>
+              )}
+            </th>
+          )
+        })}
+      </tr>
+      {hasFilterable && (
+        <tr role="row" data-filter-row="true">
+          {columns.map((col: ColumnDef) => (
+            <th>
+              {col.filterable ? (
+                <input
+                  type="text"
+                  aria-label={`Filter ${col.header}`}
+                  placeholder="Filter..."
+                  data-rfr-data-table-filter={col.id}
+                  class="w-full px-2 py-1 text-sm border rounded"
+                />
+              ) : null}
+            </th>
+          ))}
+        </tr>
+      )}
+    </thead>
+    <tbody data-rfr-data-table-body>
+      {sortedData.length === 0 ? (
+        <tr role="row">
+          <td
+            colspan={columns.length}
+            class="text-center p-4 text-muted-foreground"
+            role="cell"
+          >
+            {emptyMessage}
+          </td>
+        </tr>
+      ) : (
+        sortedData.map((row: Record<string, unknown>, rowIndex: number) => (
+          <tr
+            role="row"
+            class={rowVariants()}
+            data-row-index={rowIndex}
+          >
+            {columns.map((col: ColumnDef) => (
+              <td
+                role="cell"
+                class={cellVariants()}
+                data-column={col.id}
+              >
+                {String(col.accessor(row) ?? '')}
+              </td>
+            ))}
+          </tr>
+        ))
+      )}
+    </tbody>
+  </table>
+</div>
+
+<script>
+  function initDataTables() {
+    document.querySelectorAll<HTMLElement>('[data-rfr-data-table]').forEach((root) => {
+      if (root.hasAttribute('data-rfr-data-table-init')) return
+      root.setAttribute('data-rfr-data-table-init', '')
+
+      let columns: Array<{ id: string; header: string; sortable?: boolean; filterable?: boolean }>
+      let data: Array<Record<string, unknown>>
+
+      try {
+        columns = JSON.parse(root.getAttribute('data-rfr-data-table-columns') || '[]')
+        data = JSON.parse(root.getAttribute('data-rfr-data-table-data') || '[]')
+      } catch {
+        return
+      }
+
+      let sortBy: string | null = null
+      let sortDir: 'asc' | 'desc' = 'asc'
+      const filters: Record<string, string> = {}
+
+      const tbody = root.querySelector<HTMLElement>('[data-rfr-data-table-body]')
+      if (!tbody) return
+
+      // Build accessor functions from column IDs
+      function getCellValue(row: Record<string, unknown>, colId: string): unknown {
+        return row[colId]
+      }
+
+      function getFilteredSortedData(): Array<Record<string, unknown>> {
+        let result = [...data]
+
+        // Apply filters
+        for (const [colId, filterValue] of Object.entries(filters)) {
+          if (!filterValue) continue
+          const lowerFilter = filterValue.toLowerCase()
+          result = result.filter((row) => {
+            const cellValue = getCellValue(row, colId)
+            return String(cellValue ?? '').toLowerCase().includes(lowerFilter)
+          })
+        }
+
+        // Apply sort
+        if (sortBy) {
+          const sBy = sortBy
+          result.sort((a, b) => {
+            const aStr = String(getCellValue(a, sBy) ?? '')
+            const bStr = String(getCellValue(b, sBy) ?? '')
+            const cmp = aStr.localeCompare(bStr, undefined, { numeric: true })
+            return sortDir === 'asc' ? cmp : -cmp
+          })
+        }
+
+        return result
+      }
+
+      function renderRows() {
+        const sorted = getFilteredSortedData()
+        tbody!.innerHTML = ''
+
+        if (sorted.length === 0) {
+          const tr = document.createElement('tr')
+          tr.setAttribute('role', 'row')
+          const td = document.createElement('td')
+          td.setAttribute('colspan', String(columns.length))
+          td.setAttribute('role', 'cell')
+          td.className = 'text-center p-4 text-muted-foreground'
+          td.textContent = root.querySelector('td[role="cell"]')?.textContent || 'No data available'
+          tr.appendChild(td)
+          tbody!.appendChild(tr)
+          return
+        }
+
+        for (let i = 0; i < sorted.length; i++) {
+          const row = sorted[i]
+          const tr = document.createElement('tr')
+          tr.setAttribute('role', 'row')
+          tr.setAttribute('data-row-index', String(i))
+          // Apply row hover styles
+          tr.className = 'border-b transition-colors hover:bg-muted/50'
+
+          for (const col of columns) {
+            const td = document.createElement('td')
+            td.setAttribute('role', 'cell')
+            td.setAttribute('data-column', col.id)
+            td.className = 'p-2 align-middle border-b'
+            td.textContent = String(getCellValue(row, col.id) ?? '')
+            tr.appendChild(td)
+          }
+
+          tbody!.appendChild(tr)
+        }
+
+        root.dispatchEvent(
+          new CustomEvent('rfr-data-table-change', {
+            detail: { sortBy, sortDir, filters: { ...filters } },
+            bubbles: true,
+          }),
+        )
+      }
+
+      // Sort click handlers
+      const headers = root.querySelectorAll<HTMLElement>('[data-rfr-data-table-header]')
+      headers.forEach((th) => {
+        const colId = th.getAttribute('data-rfr-data-table-header')!
+        const isSortable = th.getAttribute('data-sortable') === 'true'
+        if (!isSortable) return
+
+        th.addEventListener('click', () => {
+          if (sortBy === colId) {
+            sortDir = sortDir === 'asc' ? 'desc' : 'asc'
+          } else {
+            sortBy = colId
+            sortDir = 'asc'
+          }
+
+          // Update sort indicators on all headers
+          headers.forEach((h) => {
+            const hColId = h.getAttribute('data-rfr-data-table-header')
+            const indicator = h.querySelector('span[aria-hidden]')
+            if (hColId === sortBy) {
+              h.setAttribute('aria-sort', sortDir === 'asc' ? 'ascending' : 'descending')
+              if (indicator) {
+                indicator.textContent = sortDir === 'asc' ? ' \u2191' : ' \u2193'
+              } else {
+                const span = document.createElement('span')
+                span.setAttribute('aria-hidden', 'true')
+                span.textContent = sortDir === 'asc' ? ' \u2191' : ' \u2193'
+                h.appendChild(span)
+              }
+            } else {
+              h.setAttribute('aria-sort', 'none')
+              if (indicator) indicator.remove()
+            }
+          })
+
+          renderRows()
+        })
+      })
+
+      // Filter input handlers
+      const filterInputs = root.querySelectorAll<HTMLInputElement>('[data-rfr-data-table-filter]')
+      filterInputs.forEach((input) => {
+        const colId = input.getAttribute('data-rfr-data-table-filter')!
+        input.addEventListener('input', () => {
+          filters[colId] = input.value
+          renderRows()
+        })
+      })
+    })
+  }
+
+  initDataTables()
+  document.addEventListener('astro:after-swap', initDataTables)
+</script>

package/dist/astro-data-table/index.ts

@@ -0,0 +1 @@
+export {}

package/dist/astro-date-picker/DatePicker.astro

@@ -0,0 +1,398 @@
+---
+import {
+  createDatePicker,
+  formatDate,
+  datePickerTriggerStyles,
+  datePickerDropdownStyles,
+  datePickerDayVariants,
+  datePickerTimeStyles,
+  datePickerTimeInputStyles,
+  type CalendarDay,
+} from '@refraction-ui/date-picker'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** Selected date value (ISO string) */
+  value?: string
+  /** Minimum selectable date (ISO string) */
+  minDate?: string
+  /** Maximum selectable date (ISO string) */
+  maxDate?: string
+  /** Show time selection inputs */
+  showTime?: boolean
+  /** Date format string */
+  format?: string
+  /** Placeholder text */
+  placeholder?: string
+  /** Whether the picker is disabled */
+  disabled?: boolean
+}
+
+const {
+  value,
+  minDate,
+  maxDate,
+  showTime = false,
+  format,
+  placeholder = 'Select date...',
+  disabled = false,
+  class: className,
+  ...props
+} = Astro.props
+
+const parsedValue = value ? new Date(value) : undefined
+const parsedMin = minDate ? new Date(minDate) : undefined
+const parsedMax = maxDate ? new Date(maxDate) : undefined
+
+const api = createDatePicker({
+  value: parsedValue,
+  minDate: parsedMin,
+  maxDate: parsedMax,
+  showTime,
+  format,
+  placeholder,
+})
+
+const displayValue = api.formatDisplay()
+const DAY_HEADERS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+const currentMonth = api.state.currentMonth
+const monthLabel = currentMonth.toLocaleDateString('en-US', { month: 'long', year: 'numeric' })
+
+function getDayState(day: CalendarDay): 'default' | 'selected' | 'today' | 'disabled' | 'outside' {
+  if (day.isDisabled) return 'disabled'
+  if (day.isSelected) return 'selected'
+  if (day.isToday) return 'today'
+  if (!day.isCurrentMonth) return 'outside'
+  return 'default'
+}
+---
+
+<div
+  data-rfr-datepicker
+  data-rfr-datepicker-value={value || ''}
+  data-rfr-datepicker-min={minDate || ''}
+  data-rfr-datepicker-max={maxDate || ''}
+  data-rfr-datepicker-show-time={showTime}
+  data-rfr-datepicker-format={format || (showTime ? 'YYYY-MM-DD HH:mm' : 'YYYY-MM-DD')}
+  data-rfr-datepicker-placeholder={placeholder}
+  data-rfr-datepicker-year={currentMonth.getFullYear()}
+  data-rfr-datepicker-month={currentMonth.getMonth()}
+  data-state="closed"
+  class={cn('relative inline-block', className)}
+  {...props}
+>
+  <!-- Trigger button -->
+  <button
+    type="button"
+    data-rfr-datepicker-trigger
+    class={cn(datePickerTriggerStyles, disabled && 'opacity-50 cursor-not-allowed')}
+    aria-expanded="false"
+    aria-haspopup="dialog"
+    disabled={disabled}
+  >{displayValue}</button>
+
+  <!-- Dropdown (initially hidden) -->
+  <div
+    data-rfr-datepicker-dropdown
+    class={datePickerDropdownStyles}
+    role="dialog"
+    aria-modal="true"
+    hidden
+  >
+    <!-- Month navigation -->
+    <div class="flex items-center justify-between mb-3">
+      <button
+        type="button"
+        data-rfr-datepicker-prev
+        class="p-1 hover:bg-accent rounded cursor-pointer"
+        aria-label="Previous month"
+      >&lsaquo;</button>
+      <span data-rfr-datepicker-label class="text-sm font-medium">{monthLabel}</span>
+      <button
+        type="button"
+        data-rfr-datepicker-next
+        class="p-1 hover:bg-accent rounded cursor-pointer"
+        aria-label="Next month"
+      >&rsaquo;</button>
+    </div>
+
+    <!-- Calendar grid -->
+    <div class="grid grid-cols-7 gap-0 text-center" role="grid">
+      {DAY_HEADERS.map((d) => (
+        <div class="text-xs text-muted-foreground py-1 font-medium">{d}</div>
+      ))}
+      <div data-rfr-datepicker-grid class="contents">
+        {api.days.map((day) => {
+          const state = getDayState(day)
+          return (
+            <button
+              type="button"
+              class={datePickerDayVariants({ state })}
+              disabled={day.isDisabled}
+              data-rfr-datepicker-day
+              data-date={day.date.toISOString()}
+              aria-selected={day.isSelected}
+              aria-disabled={day.isDisabled}
+            >{day.date.getDate()}</button>
+          )
+        })}
+      </div>
+    </div>
+
+    <!-- Time inputs (optional) -->
+    {showTime && (
+      <div class={datePickerTimeStyles} data-rfr-datepicker-time>
+        <span class="text-sm text-muted-foreground">Time:</span>
+        <input
+          type="number"
+          min="0"
+          max="23"
+          value={parsedValue ? parsedValue.getHours() : 0}
+          class={datePickerTimeInputStyles}
+          aria-label="Hours"
+          data-rfr-datepicker-hours
+        />
+        <span class="text-muted-foreground">:</span>
+        <input
+          type="number"
+          min="0"
+          max="59"
+          value={parsedValue ? parsedValue.getMinutes() : 0}
+          class={datePickerTimeInputStyles}
+          aria-label="Minutes"
+          data-rfr-datepicker-minutes
+        />
+      </div>
+    )}
+  </div>
+</div>
+
+<script>
+  const MONTH_NAMES = [
+    'January', 'February', 'March', 'April', 'May', 'June',
+    'July', 'August', 'September', 'October', 'November', 'December',
+  ]
+  const DAY_VARIANT_DEFAULT = 'inline-flex h-8 w-8 items-center justify-center rounded-md text-sm cursor-pointer hover:bg-accent hover:text-accent-foreground'
+  const DAY_VARIANT_SELECTED = 'inline-flex h-8 w-8 items-center justify-center rounded-md text-sm cursor-pointer hover:bg-accent hover:text-accent-foreground bg-primary text-primary-foreground hover:bg-primary/90'
+  const DAY_VARIANT_TODAY = 'inline-flex h-8 w-8 items-center justify-center rounded-md text-sm cursor-pointer hover:bg-accent hover:text-accent-foreground border border-accent-foreground'
+  const DAY_VARIANT_DISABLED = 'inline-flex h-8 w-8 items-center justify-center rounded-md text-sm cursor-pointer hover:bg-accent hover:text-accent-foreground text-muted-foreground opacity-50 pointer-events-none'
+  const DAY_VARIANT_OUTSIDE = 'inline-flex h-8 w-8 items-center justify-center rounded-md text-sm cursor-pointer hover:bg-accent hover:text-accent-foreground text-muted-foreground opacity-30'
+
+  function isSameDay(a: Date, b: Date): boolean {
+    return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate()
+  }
+
+  function padZero(n: number): string {
+    return n < 10 ? `0${n}` : `${n}`
+  }
+
+  function formatDateStr(date: Date | null, fmt: string, showTime: boolean): string {
+    if (!date) return ''
+    let result = fmt
+      .replace('YYYY', String(date.getFullYear()))
+      .replace('MM', padZero(date.getMonth() + 1))
+      .replace('DD', padZero(date.getDate()))
+    if (showTime) {
+      result = result.replace('HH', padZero(date.getHours())).replace('mm', padZero(date.getMinutes()))
+    }
+    return result
+  }
+
+  function isDateDisabled(date: Date, minStr: string, maxStr: string): boolean {
+    if (minStr) {
+      const min = new Date(minStr)
+      const startOfMin = new Date(min.getFullYear(), min.getMonth(), min.getDate())
+      if (date < startOfMin) return true
+    }
+    if (maxStr) {
+      const max = new Date(maxStr)
+      const endOfMax = new Date(max.getFullYear(), max.getMonth(), max.getDate(), 23, 59, 59, 999)
+      if (date > endOfMax) return true
+    }
+    return false
+  }
+
+  function renderDatePickerGrid(root: HTMLElement) {
+    const year = parseInt(root.getAttribute('data-rfr-datepicker-year') || '0', 10)
+    const month = parseInt(root.getAttribute('data-rfr-datepicker-month') || '0', 10)
+    const valueStr = root.getAttribute('data-rfr-datepicker-value') || ''
+    const minStr = root.getAttribute('data-rfr-datepicker-min') || ''
+    const maxStr = root.getAttribute('data-rfr-datepicker-max') || ''
+    const selectedDate = valueStr ? new Date(valueStr) : null
+    const today = new Date()
+
+    const label = root.querySelector<HTMLElement>('[data-rfr-datepicker-label]')
+    if (label) label.textContent = `${MONTH_NAMES[month]} ${year}`
+
+    const grid = root.querySelector<HTMLElement>('[data-rfr-datepicker-grid]')
+    if (!grid) return
+
+    grid.innerHTML = ''
+    const first = new Date(year, month, 1)
+    const startDow = first.getDay()
+    const gridStart = new Date(year, month, 1 - startDow)
+
+    for (let i = 0; i < 42; i++) {
+      const date = new Date(gridStart.getFullYear(), gridStart.getMonth(), gridStart.getDate() + i)
+      const isToday = isSameDay(date, today)
+      const isSelected = selectedDate ? isSameDay(date, selectedDate) : false
+      const isCurrentMonth = date.getMonth() === month
+      const isDisabled = isDateDisabled(date, minStr, maxStr)
+
+      let variant = DAY_VARIANT_DEFAULT
+      if (isDisabled) variant = DAY_VARIANT_DISABLED
+      else if (isSelected) variant = DAY_VARIANT_SELECTED
+      else if (isToday) variant = DAY_VARIANT_TODAY
+      else if (!isCurrentMonth) variant = DAY_VARIANT_OUTSIDE
+
+      const btn = document.createElement('button')
+      btn.type = 'button'
+      btn.className = variant
+      btn.disabled = isDisabled
+      btn.setAttribute('data-rfr-datepicker-day', '')
+      btn.setAttribute('data-date', date.toISOString())
+      btn.setAttribute('aria-selected', String(isSelected))
+      btn.setAttribute('aria-disabled', String(isDisabled))
+      btn.textContent = String(date.getDate())
+      grid.appendChild(btn)
+    }
+  }
+
+  function initDatePickers() {
+    document.querySelectorAll<HTMLElement>('[data-rfr-datepicker]').forEach((root) => {
+      if (root.hasAttribute('data-rfr-datepicker-init')) return
+      root.setAttribute('data-rfr-datepicker-init', '')
+
+      const trigger = root.querySelector<HTMLButtonElement>('[data-rfr-datepicker-trigger]')
+      const dropdown = root.querySelector<HTMLElement>('[data-rfr-datepicker-dropdown]')
+      const showTime = root.getAttribute('data-rfr-datepicker-show-time') === 'true'
+      const fmt = root.getAttribute('data-rfr-datepicker-format') || 'YYYY-MM-DD'
+      const placeholder = root.getAttribute('data-rfr-datepicker-placeholder') || 'Select date...'
+
+      let isOpen = false
+
+      function setOpen(open: boolean) {
+        isOpen = open
+        root.setAttribute('data-state', open ? 'open' : 'closed')
+        trigger?.setAttribute('aria-expanded', String(open))
+        if (dropdown) {
+          if (open) {
+            dropdown.removeAttribute('hidden')
+            renderDatePickerGrid(root)
+          } else {
+            dropdown.setAttribute('hidden', '')
+          }
+        }
+      }
+
+      function updateTriggerLabel() {
+        const valueStr = root.getAttribute('data-rfr-datepicker-value') || ''
+        const date = valueStr ? new Date(valueStr) : null
+        if (trigger) {
+          trigger.textContent = date ? formatDateStr(date, fmt, showTime) : placeholder
+        }
+      }
+
+      // Toggle dropdown
+      trigger?.addEventListener('click', () => {
+        if (trigger.disabled) return
+        setOpen(!isOpen)
+      })
+
+      // Prev month
+      root.querySelector('[data-rfr-datepicker-prev]')?.addEventListener('click', () => {
+        const year = parseInt(root.getAttribute('data-rfr-datepicker-year') || '0', 10)
+        const month = parseInt(root.getAttribute('data-rfr-datepicker-month') || '0', 10)
+        const prev = new Date(year, month - 1, 1)
+        root.setAttribute('data-rfr-datepicker-year', String(prev.getFullYear()))
+        root.setAttribute('data-rfr-datepicker-month', String(prev.getMonth()))
+        renderDatePickerGrid(root)
+      })
+
+      // Next month
+      root.querySelector('[data-rfr-datepicker-next]')?.addEventListener('click', () => {
+        const year = parseInt(root.getAttribute('data-rfr-datepicker-year') || '0', 10)
+        const month = parseInt(root.getAttribute('data-rfr-datepicker-month') || '0', 10)
+        const next = new Date(year, month + 1, 1)
+        root.setAttribute('data-rfr-datepicker-year', String(next.getFullYear()))
+        root.setAttribute('data-rfr-datepicker-month', String(next.getMonth()))
+        renderDatePickerGrid(root)
+      })
+
+      // Day click (delegated on grid's parent)
+      const gridParent = root.querySelector('[role="grid"]')
+      gridParent?.addEventListener('click', (e) => {
+        const btn = (e.target as HTMLElement).closest<HTMLButtonElement>('[data-rfr-datepicker-day]')
+        if (!btn || btn.disabled) return
+        const dateStr = btn.getAttribute('data-date')
+        if (!dateStr) return
+
+        const selectedDate = new Date(dateStr)
+        // Preserve existing time if showTime
+        if (showTime) {
+          const hoursInput = root.querySelector<HTMLInputElement>('[data-rfr-datepicker-hours]')
+          const minutesInput = root.querySelector<HTMLInputElement>('[data-rfr-datepicker-minutes]')
+          if (hoursInput) selectedDate.setHours(parseInt(hoursInput.value, 10) || 0)
+          if (minutesInput) selectedDate.setMinutes(parseInt(minutesInput.value, 10) || 0)
+        }
+
+        root.setAttribute('data-rfr-datepicker-value', selectedDate.toISOString())
+        updateTriggerLabel()
+        renderDatePickerGrid(root)
+
+        if (!showTime) {
+          setOpen(false)
+        }
+
+        root.dispatchEvent(new CustomEvent('rfr-date-change', {
+          detail: { date: selectedDate, iso: selectedDate.toISOString() },
+          bubbles: true,
+        }))
+      })
+
+      // Time input changes
+      const hoursInput = root.querySelector<HTMLInputElement>('[data-rfr-datepicker-hours]')
+      const minutesInput = root.querySelector<HTMLInputElement>('[data-rfr-datepicker-minutes]')
+
+      function handleTimeChange() {
+        const valueStr = root.getAttribute('data-rfr-datepicker-value') || ''
+        const date = valueStr ? new Date(valueStr) : new Date()
+        if (hoursInput) {
+          const h = parseInt(hoursInput.value, 10)
+          if (!isNaN(h) && h >= 0 && h <= 23) date.setHours(h)
+        }
+        if (minutesInput) {
+          const m = parseInt(minutesInput.value, 10)
+          if (!isNaN(m) && m >= 0 && m <= 59) date.setMinutes(m)
+        }
+        root.setAttribute('data-rfr-datepicker-value', date.toISOString())
+        updateTriggerLabel()
+        root.dispatchEvent(new CustomEvent('rfr-date-change', {
+          detail: { date, iso: date.toISOString() },
+          bubbles: true,
+        }))
+      }
+
+      hoursInput?.addEventListener('change', handleTimeChange)
+      minutesInput?.addEventListener('change', handleTimeChange)
+
+      // Close on outside click
+      document.addEventListener('mousedown', (e) => {
+        if (isOpen && !root.contains(e.target as Node)) {
+          setOpen(false)
+        }
+      })
+
+      // Close on Escape
+      document.addEventListener('keydown', (e) => {
+        if (isOpen && e.key === 'Escape') {
+          e.preventDefault()
+          setOpen(false)
+        }
+      })
+    })
+  }
+
+  initDatePickers()
+  document.addEventListener('astro:after-swap', initDatePickers)
+</script>

package/dist/astro-date-picker/index.ts

@@ -0,0 +1 @@
+export {}