@refraction-ui/astro 0.4.0 → 0.4.4

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

@@ -0,0 +1,333 @@
+import type { AccessibilityProps, KeyboardHandlerMap } from '../shared/index.ts'
+import { generateId, Keys } from '../shared/index.ts'
+
+export type DatePickerView = 'calendar' | 'time'
+
+export interface DatePickerProps {
+  /** Selected date (controlled) */
+  value?: Date
+  /** Callback when value changes */
+  onChange?: (date: Date) => void
+  /** Minimum selectable date */
+  minDate?: Date
+  /** Maximum selectable date */
+  maxDate?: Date
+  /** Show time selection */
+  showTime?: boolean
+  /** Display format string */
+  format?: string
+  /** Placeholder text */
+  placeholder?: string
+  /** Whether the picker is open (controlled) */
+  open?: boolean
+  /** Default open state */
+  defaultOpen?: boolean
+  /** Callback when open changes */
+  onOpenChange?: (open: boolean) => void
+}
+
+export interface DatePickerState {
+  open: boolean
+  selectedDate: Date | undefined
+  view: DatePickerView
+  hours: number
+  minutes: number
+  currentMonth: Date
+}
+
+export interface CalendarDay {
+  date: Date
+  isToday: boolean
+  isSelected: boolean
+  isCurrentMonth: boolean
+  isDisabled: boolean
+}
+
+export interface DatePickerAPI {
+  /** Current state */
+  state: DatePickerState
+  /** Calendar days grid (42 cells) */
+  days: CalendarDay[]
+  /** Open the picker */
+  openPicker(): void
+  /** Close the picker */
+  closePicker(): void
+  /** Toggle the picker */
+  togglePicker(): void
+  /** Select a date from calendar */
+  selectDate(date: Date): void
+  /** Set hours */
+  setHours(hours: number): void
+  /** Set minutes */
+  setMinutes(minutes: number): void
+  /** Navigate to previous month */
+  prevMonth(): void
+  /** Navigate to next month */
+  nextMonth(): void
+  /** Switch between calendar and time views */
+  setView(view: DatePickerView): void
+  /** Format the selected date for display */
+  formatDisplay(): string
+  /** ARIA attributes for the trigger input */
+  triggerProps: Partial<AccessibilityProps> & Record<string, unknown>
+  /** ARIA attributes for the dropdown */
+  dropdownProps: Partial<AccessibilityProps> & Record<string, unknown>
+  /** ARIA props for the calendar grid */
+  gridProps: Partial<AccessibilityProps> & Record<string, unknown>
+  /** Get ARIA props for a day cell */
+  getDayAriaProps(day: CalendarDay): Partial<AccessibilityProps> & Record<string, unknown>
+  /** Keyboard handlers */
+  keyboardHandlers: KeyboardHandlerMap
+  /** Generated IDs */
+  ids: {
+    trigger: string
+    dropdown: string
+    grid: string
+    label: string
+  }
+}
+
+function isSameDay(a: Date, b: Date): boolean {
+  return (
+    a.getFullYear() === b.getFullYear() &&
+    a.getMonth() === b.getMonth() &&
+    a.getDate() === b.getDate()
+  )
+}
+
+function startOfMonth(date: Date): Date {
+  return new Date(date.getFullYear(), date.getMonth(), 1)
+}
+
+function startOfDay(date: Date): Date {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate())
+}
+
+function endOfDay(date: Date): Date {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate(), 23, 59, 59, 999)
+}
+
+const DAY_NAMES = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
+
+function padZero(n: number): string {
+  return n < 10 ? `0${n}` : `${n}`
+}
+
+export function formatDate(date: Date | undefined, format: string, showTime: boolean): string {
+  if (!date) return ''
+  const year = date.getFullYear()
+  const month = padZero(date.getMonth() + 1)
+  const day = padZero(date.getDate())
+  const hours = padZero(date.getHours())
+  const minutes = padZero(date.getMinutes())
+
+  let result = format
+    .replace('YYYY', String(year))
+    .replace('MM', month)
+    .replace('DD', day)
+
+  if (showTime) {
+    result = result.replace('HH', hours).replace('mm', minutes)
+  }
+
+  return result
+}
+
+export function createDatePicker(props: DatePickerProps = {}): DatePickerAPI {
+  const {
+    value,
+    onChange,
+    minDate,
+    maxDate,
+    showTime = false,
+    format = showTime ? 'YYYY-MM-DD HH:mm' : 'YYYY-MM-DD',
+    placeholder = 'Select date...',
+    open: controlledOpen,
+    defaultOpen = false,
+    onOpenChange,
+  } = props
+
+  const today = new Date()
+  let internalOpen = controlledOpen ?? defaultOpen
+  let currentMonth = value ? startOfMonth(value) : startOfMonth(today)
+  let view: DatePickerView = 'calendar'
+  const hours = value ? value.getHours() : 0
+  const minutes = value ? value.getMinutes() : 0
+
+  const triggerId = generateId('rfr-datepicker-trigger')
+  const dropdownId = generateId('rfr-datepicker-dropdown')
+  const gridId = generateId('rfr-datepicker-grid')
+  const labelId = generateId('rfr-datepicker-label')
+
+  function isOpen(): boolean {
+    if (controlledOpen !== undefined) return controlledOpen
+    return internalOpen
+  }
+
+  function isDateDisabled(date: Date): boolean {
+    if (minDate && date < startOfDay(minDate)) return true
+    if (maxDate && date > endOfDay(maxDate)) return true
+    return false
+  }
+
+  function buildDays(): CalendarDay[] {
+    const year = currentMonth.getFullYear()
+    const month = currentMonth.getMonth()
+    const first = new Date(year, month, 1)
+    const startDow = first.getDay()
+    const gridStart = new Date(year, month, 1 - startDow)
+
+    const days: CalendarDay[] = []
+    for (let i = 0; i < 42; i++) {
+      const date = new Date(
+        gridStart.getFullYear(),
+        gridStart.getMonth(),
+        gridStart.getDate() + i,
+      )
+      days.push({
+        date,
+        isToday: isSameDay(date, today),
+        isSelected: value ? isSameDay(date, value) : false,
+        isCurrentMonth: date.getMonth() === month,
+        isDisabled: isDateDisabled(date),
+      })
+    }
+    return days
+  }
+
+  function openPicker(): void {
+    internalOpen = true
+    onOpenChange?.(true)
+  }
+
+  function closePicker(): void {
+    internalOpen = false
+    onOpenChange?.(false)
+  }
+
+  function togglePicker(): void {
+    if (isOpen()) {
+      closePicker()
+    } else {
+      openPicker()
+    }
+  }
+
+  function selectDate(date: Date): void {
+    if (isDateDisabled(date)) return
+    const newDate = new Date(date)
+    if (value) {
+      newDate.setHours(value.getHours())
+      newDate.setMinutes(value.getMinutes())
+    }
+    onChange?.(newDate)
+    if (!showTime) {
+      closePicker()
+    }
+  }
+
+  function setHours(h: number): void {
+    if (h < 0 || h > 23) return
+    const newDate = value ? new Date(value) : new Date()
+    newDate.setHours(h)
+    onChange?.(newDate)
+  }
+
+  function setMinutes(m: number): void {
+    if (m < 0 || m > 59) return
+    const newDate = value ? new Date(value) : new Date()
+    newDate.setMinutes(m)
+    onChange?.(newDate)
+  }
+
+  function prevMonth(): void {
+    currentMonth = new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1, 1)
+  }
+
+  function nextMonth(): void {
+    currentMonth = new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1, 1)
+  }
+
+  function setView(v: DatePickerView): void {
+    view = v
+  }
+
+  function formatDisplay(): string {
+    return value ? formatDate(value, format, showTime) : placeholder
+  }
+
+  const keyboardHandlers: KeyboardHandlerMap = {
+    [Keys.Escape]: (e) => {
+      e.preventDefault()
+      closePicker()
+    },
+  }
+
+  const triggerProps: Partial<AccessibilityProps> & Record<string, unknown> = {
+    'aria-expanded': isOpen(),
+    'aria-controls': dropdownId,
+    'aria-haspopup': 'dialog',
+    id: triggerId,
+    role: 'combobox',
+  }
+
+  const dropdownProps: Partial<AccessibilityProps> & Record<string, unknown> = {
+    role: 'dialog',
+    'aria-modal': true,
+    'aria-labelledby': labelId,
+    id: dropdownId,
+  }
+
+  const gridProps: Partial<AccessibilityProps> & Record<string, unknown> = {
+    role: 'grid',
+    'aria-labelledby': labelId,
+    id: gridId,
+  }
+
+  function getDayAriaProps(day: CalendarDay): Partial<AccessibilityProps> & Record<string, unknown> {
+    return {
+      role: 'gridcell',
+      'aria-selected': day.isSelected,
+      'aria-disabled': day.isDisabled,
+      'aria-current': day.isToday ? ('date' as const) : undefined,
+      'aria-label': `${DAY_NAMES[day.date.getDay()]}, ${day.date.toLocaleDateString('en-US', {
+        month: 'long',
+        day: 'numeric',
+        year: 'numeric',
+      })}`,
+    }
+  }
+
+  return {
+    state: {
+      open: isOpen(),
+      selectedDate: value,
+      view,
+      hours,
+      minutes,
+      currentMonth,
+    },
+    days: buildDays(),
+    openPicker,
+    closePicker,
+    togglePicker,
+    selectDate,
+    setHours,
+    setMinutes,
+    prevMonth,
+    nextMonth,
+    setView,
+    formatDisplay,
+    triggerProps,
+    dropdownProps,
+    gridProps,
+    getDayAriaProps,
+    keyboardHandlers,
+    ids: {
+      trigger: triggerId,
+      dropdown: dropdownId,
+      grid: gridId,
+      label: labelId,
+    },
+  }
+}

package/dist/date-picker/index.ts

@@ -0,0 +1,18 @@
+export {
+  createDatePicker,
+  formatDate,
+  type DatePickerProps,
+  type DatePickerState,
+  type DatePickerView,
+  type DatePickerAPI,
+  type CalendarDay,
+} from './date-picker.js'
+
+export {
+  datePickerTriggerStyles,
+  datePickerDropdownStyles,
+  datePickerGridStyles,
+  datePickerDayVariants,
+  datePickerTimeStyles,
+  datePickerTimeInputStyles,
+} from './date-picker.styles.js'

package/dist/device-frame/device-frame.styles.ts

@@ -0,0 +1,21 @@
+import { cva } from '../shared/index.ts'
+
+export const deviceFrameVariants = cva({
+  base: 'relative overflow-hidden bg-black border-4 border-gray-800 shadow-xl',
+  variants: {
+    device: {
+      iphone: 'rounded-[44px] border-[6px]',
+      ipad: 'rounded-[18px] border-[6px]',
+      'android-phone': 'rounded-[24px] border-4',
+      'android-tablet': 'rounded-[16px] border-4',
+    },
+    orientation: {
+      portrait: '',
+      landscape: '',
+    },
+  },
+  defaultVariants: {
+    device: 'iphone',
+    orientation: 'portrait',
+  },
+})

package/dist/device-frame/device-frame.ts

@@ -0,0 +1,112 @@
+import type { AccessibilityProps } from '../shared/index.ts'
+
+export type DeviceType = 'iphone' | 'ipad' | 'android-phone' | 'android-tablet'
+export type DeviceOrientation = 'portrait' | 'landscape'
+
+export interface DeviceFrameProps {
+  /** The type of device to display */
+  device: DeviceType
+  /** The orientation of the device */
+  orientation?: DeviceOrientation
+}
+
+export interface DeviceDimensions {
+  /** Width in pixels */
+  width: number
+  /** Height in pixels */
+  height: number
+  /** Border radius in pixels */
+  radius: number
+  /** Whether the device has a notch */
+  notch: boolean
+  /** Whether the device has a home indicator bar */
+  homeIndicator: boolean
+}
+
+export interface DeviceFrameAPI {
+  /** Computed dimensions for the device */
+  dimensions: DeviceDimensions
+  /** ARIA attributes for the device frame */
+  ariaProps: Partial<AccessibilityProps> & Record<string, unknown>
+  /** Data attributes for styling hooks */
+  dataAttributes: Record<string, string>
+}
+
+interface DeviceSpec {
+  width: number
+  height: number
+  radius: number
+  notch: boolean
+  homeIndicator: boolean
+}
+
+const DEVICE_SPECS: Record<DeviceType, DeviceSpec> = {
+  iphone: {
+    width: 375,
+    height: 812,
+    radius: 44,
+    notch: true,
+    homeIndicator: true,
+  },
+  ipad: {
+    width: 810,
+    height: 1080,
+    radius: 18,
+    notch: false,
+    homeIndicator: true,
+  },
+  'android-phone': {
+    width: 360,
+    height: 800,
+    radius: 24,
+    notch: false,
+    homeIndicator: false,
+  },
+  'android-tablet': {
+    width: 800,
+    height: 1280,
+    radius: 16,
+    notch: false,
+    homeIndicator: false,
+  },
+}
+
+const DEVICE_LABELS: Record<DeviceType, string> = {
+  iphone: 'iPhone',
+  ipad: 'iPad',
+  'android-phone': 'Android Phone',
+  'android-tablet': 'Android Tablet',
+}
+
+export function createDeviceFrame(props: DeviceFrameProps): DeviceFrameAPI {
+  const { device, orientation = 'portrait' } = props
+  const spec = DEVICE_SPECS[device]
+
+  const isLandscape = orientation === 'landscape'
+
+  const dimensions: DeviceDimensions = {
+    width: isLandscape ? spec.height : spec.width,
+    height: isLandscape ? spec.width : spec.height,
+    radius: spec.radius,
+    notch: spec.notch,
+    homeIndicator: spec.homeIndicator,
+  }
+
+  const ariaProps: Partial<AccessibilityProps> & Record<string, unknown> = {
+    role: 'img',
+    'aria-label': `${DEVICE_LABELS[device]} device frame in ${orientation} orientation`,
+  }
+
+  const dataAttributes: Record<string, string> = {
+    'data-device': device,
+    'data-orientation': orientation,
+    ...(spec.notch ? { 'data-notch': 'true' } : {}),
+    ...(spec.homeIndicator ? { 'data-home-indicator': 'true' } : {}),
+  }
+
+  return {
+    dimensions,
+    ariaProps,
+    dataAttributes,
+  }
+}

package/dist/device-frame/index.ts

@@ -0,0 +1,10 @@
+export {
+  createDeviceFrame,
+  type DeviceType,
+  type DeviceOrientation,
+  type DeviceFrameProps,
+  type DeviceDimensions,
+  type DeviceFrameAPI,
+} from './device-frame.js'
+
+export { deviceFrameVariants } from './device-frame.styles.js'

package/dist/dialog/dialog.styles.ts

@@ -0,0 +1,8 @@
+import { cva } from '../shared/index.ts'
+
+export const overlayStyles =
+  'fixed inset-0 z-50 bg-black/80'
+
+export const dialogContentVariants = cva({
+  base: 'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 sm:rounded-lg',
+})

package/dist/dialog/dialog.ts

@@ -0,0 +1,133 @@
+import type { AccessibilityProps, KeyboardHandlerMap, FocusTrapConfig } from '../shared/index.ts'
+import { createMachine, Keys, generateId } from '../shared/index.ts'
+
+export interface DialogProps {
+  /** Whether the dialog is open (controlled) */
+  open?: boolean
+  /** Whether the dialog starts open (uncontrolled) */
+  defaultOpen?: boolean
+  /** Callback when open state changes */
+  onOpenChange?: (open: boolean) => void
+  /** Whether the dialog is modal (default: true) */
+  modal?: boolean
+}
+
+export interface DialogState {
+  open: boolean
+}
+
+export interface DialogAPI {
+  /** Current dialog state */
+  state: DialogState
+  /** ARIA attributes for the trigger button */
+  triggerProps: Partial<AccessibilityProps> & Record<string, unknown>
+  /** ARIA attributes for the dialog content */
+  contentProps: Partial<AccessibilityProps> & Record<string, unknown>
+  /** Data attributes for the overlay */
+  overlayProps: Record<string, string>
+  /** Open the dialog */
+  open(): void
+  /** Close the dialog */
+  close(): void
+  /** Toggle the dialog */
+  toggle(): void
+  /** Keyboard handlers (Escape to close) */
+  keyboardHandlers: KeyboardHandlerMap
+  /** Generated IDs for aria linking */
+  ids: {
+    content: string
+    title: string
+    description: string
+  }
+  /**
+   * Focus trap configuration for framework wrappers.
+   * Pass this to createFocusTrap() with a container element.
+   */
+  focusTrapConfig: Omit<FocusTrapConfig, 'container'>
+}
+
+export function createDialog(props: DialogProps = {}): DialogAPI {
+  const { open: controlledOpen, defaultOpen = false, onOpenChange, modal = true } = props
+
+  const machine = createMachine<'open' | 'closed', 'OPEN' | 'CLOSE'>({
+    initial: controlledOpen ?? defaultOpen ? 'open' : 'closed',
+    states: {
+      closed: { on: { OPEN: 'open' } },
+      open: { on: { CLOSE: 'closed' } },
+    },
+  })
+
+  const contentId = generateId('rfr-dialog')
+  const titleId = generateId('rfr-dialog-title')
+  const descriptionId = generateId('rfr-dialog-desc')
+
+  function isOpen(): boolean {
+    if (controlledOpen !== undefined) return controlledOpen
+    return machine.matches('open')
+  }
+
+  function openDialog(): void {
+    machine.send('OPEN')
+    onOpenChange?.(true)
+  }
+
+  function closeDialog(): void {
+    machine.send('CLOSE')
+    onOpenChange?.(false)
+  }
+
+  function toggleDialog(): void {
+    if (isOpen()) {
+      closeDialog()
+    } else {
+      openDialog()
+    }
+  }
+
+  const keyboardHandlers: KeyboardHandlerMap = {
+    [Keys.Escape]: (e) => {
+      e.preventDefault()
+      closeDialog()
+    },
+  }
+
+  const triggerProps: Partial<AccessibilityProps> & Record<string, unknown> = {
+    'aria-expanded': isOpen(),
+    'aria-controls': contentId,
+    'aria-haspopup': 'dialog',
+  }
+
+  const contentProps: Partial<AccessibilityProps> & Record<string, unknown> = {
+    role: 'dialog',
+    'aria-modal': modal,
+    'aria-labelledby': titleId,
+    'aria-describedby': descriptionId,
+    id: contentId,
+  }
+
+  const overlayProps: Record<string, string> = {
+    'data-state': isOpen() ? 'open' : 'closed',
+  }
+
+  const focusTrapConfig: Omit<FocusTrapConfig, 'container'> = {
+    onEscape: closeDialog,
+    returnFocusOnDeactivate: true,
+  }
+
+  return {
+    state: { open: isOpen() },
+    triggerProps,
+    contentProps,
+    overlayProps,
+    open: openDialog,
+    close: closeDialog,
+    toggle: toggleDialog,
+    keyboardHandlers,
+    ids: {
+      content: contentId,
+      title: titleId,
+      description: descriptionId,
+    },
+    focusTrapConfig,
+  }
+}

package/dist/dialog/index.ts

@@ -0,0 +1,8 @@
+export {
+  createDialog,
+  type DialogProps,
+  type DialogAPI,
+  type DialogState,
+} from './dialog.js'
+
+export { overlayStyles, dialogContentVariants } from './dialog.styles.js'