@refraction-ui/astro 0.4.2 → 0.4.5

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

@@ -0,0 +1,183 @@
+import type { AccessibilityProps } from '../shared/index.ts'
+
+export interface ColumnDef<T = Record<string, unknown>> {
+  /** Unique column identifier */
+  id: string
+  /** Column header text */
+  header: string
+  /** Accessor function to get cell value from row */
+  accessor: (row: T) => unknown
+  /** Whether this column is sortable */
+  sortable?: boolean
+  /** Whether this column is filterable */
+  filterable?: boolean
+}
+
+export type SortDirection = 'asc' | 'desc'
+
+export interface DataTableProps<T = Record<string, unknown>> {
+  /** Column definitions */
+  columns: ColumnDef<T>[]
+  /** Data rows */
+  data: T[]
+  /** Current sort column */
+  sortBy?: string
+  /** Current sort direction */
+  sortDir?: SortDirection
+  /** Callback when sort changes */
+  onSort?: (columnId: string, direction: SortDirection) => void
+  /** Active filters: columnId -> filter value */
+  filters?: Record<string, string>
+}
+
+export interface DataTableState<T = Record<string, unknown>> {
+  sortedData: T[]
+  sortBy: string | null
+  sortDir: SortDirection
+  filters: Record<string, string>
+}
+
+export interface DataTableAPI<T = Record<string, unknown>> {
+  /** Current table state */
+  state: DataTableState<T>
+  /** Toggle sort for a column */
+  sort(columnId: string): void
+  /** Set a filter value for a column */
+  setFilter(columnId: string, value: string): void
+  /** Get ARIA and role props for a header cell */
+  getHeaderProps(col: ColumnDef<T>): Partial<AccessibilityProps> & Record<string, unknown>
+  /** Get props for a data cell */
+  getCellProps(col: ColumnDef<T>, row: T): Record<string, unknown>
+  /** Get props for a data row */
+  getRowProps(row: T, index: number): Record<string, unknown>
+}
+
+export function createDataTable<T = Record<string, unknown>>(
+  props: DataTableProps<T>,
+): DataTableAPI<T> {
+  const {
+    columns,
+    data,
+    sortBy: initialSortBy,
+    sortDir: initialSortDir = 'asc',
+    onSort,
+    filters: initialFilters,
+  } = props
+
+  let sortBy: string | null = initialSortBy ?? null
+  let sortDir: SortDirection = initialSortDir
+  let filters: Record<string, string> = { ...(initialFilters ?? {}) }
+
+  function getFilteredData(): T[] {
+    let result = [...data]
+
+    for (const [columnId, filterValue] of Object.entries(filters)) {
+      if (!filterValue) continue
+      const col = columns.find((c) => c.id === columnId)
+      if (!col) continue
+      const lowerFilter = filterValue.toLowerCase()
+      result = result.filter((row) => {
+        const cellValue = col.accessor(row)
+        return String(cellValue ?? '').toLowerCase().includes(lowerFilter)
+      })
+    }
+
+    return result
+  }
+
+  function getSortedData(): T[] {
+    const filtered = getFilteredData()
+
+    if (!sortBy) return filtered
+
+    const col = columns.find((c) => c.id === sortBy)
+    if (!col) return filtered
+
+    return [...filtered].sort((a, b) => {
+      const aVal = col.accessor(a)
+      const bVal = col.accessor(b)
+      const aStr = String(aVal ?? '')
+      const bStr = String(bVal ?? '')
+
+      const cmp = aStr.localeCompare(bStr, undefined, { numeric: true })
+      return sortDir === 'asc' ? cmp : -cmp
+    })
+  }
+
+  function sort(columnId: string): void {
+    const col = columns.find((c) => c.id === columnId)
+    if (!col?.sortable) return
+
+    if (sortBy === columnId) {
+      sortDir = sortDir === 'asc' ? 'desc' : 'asc'
+    } else {
+      sortBy = columnId
+      sortDir = 'asc'
+    }
+
+    onSort?.(sortBy, sortDir)
+  }
+
+  function setFilter(columnId: string, value: string): void {
+    filters = { ...filters, [columnId]: value }
+  }
+
+  function getHeaderProps(
+    col: ColumnDef<T>,
+  ): Partial<AccessibilityProps> & Record<string, unknown> {
+    const props: Partial<AccessibilityProps> & Record<string, unknown> = {
+      role: 'columnheader',
+    }
+
+    if (col.sortable) {
+      if (sortBy === col.id) {
+        props['aria-sort'] = sortDir === 'asc' ? 'ascending' : 'descending'
+      } else {
+        props['aria-sort'] = 'none'
+      }
+    }
+
+    return props
+  }
+
+  function getCellProps(
+    col: ColumnDef<T>,
+    _row: T,
+  ): Record<string, unknown> {
+    return {
+      role: 'cell',
+      'data-column': col.id,
+    }
+  }
+
+  function getRowProps(_row: T, index: number): Record<string, unknown> {
+    return {
+      role: 'row',
+      'data-row-index': index,
+    }
+  }
+
+  return {
+    get state(): DataTableState<T> {
+      return {
+        get sortedData() {
+          return getSortedData()
+        },
+        get sortBy() {
+          return sortBy
+        },
+        get sortDir() {
+          return sortDir
+        },
+        get filters() {
+          return { ...filters }
+        },
+      }
+    },
+    sort,
+    setFilter,
+    getHeaderProps,
+    getCellProps,
+    getRowProps,
+  }
+}

package/dist/data-table/index.ts

@@ -0,0 +1,15 @@
+export {
+  createDataTable,
+  type ColumnDef,
+  type SortDirection,
+  type DataTableProps,
+  type DataTableState,
+  type DataTableAPI,
+} from './data-table.js'
+
+export {
+  tableVariants,
+  headerVariants,
+  cellVariants,
+  rowVariants,
+} from './data-table.styles.js'

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

@@ -0,0 +1,31 @@
+import { cva } from '../shared/index.ts'
+
+export const datePickerTriggerStyles =
+  'inline-flex items-center gap-2 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring cursor-pointer'
+
+export const datePickerDropdownStyles =
+  'absolute z-50 mt-1 rounded-md border bg-popover p-4 text-popover-foreground shadow-md'
+
+export const datePickerGridStyles = 'w-full border-collapse'
+
+export const datePickerDayVariants = cva({
+  base: 'inline-flex h-8 w-8 items-center justify-center rounded-md text-sm cursor-pointer hover:bg-accent hover:text-accent-foreground',
+  variants: {
+    state: {
+      default: '',
+      selected: 'bg-primary text-primary-foreground hover:bg-primary/90',
+      today: 'border border-accent-foreground',
+      disabled: 'text-muted-foreground opacity-50 pointer-events-none',
+      outside: 'text-muted-foreground opacity-30',
+    },
+  },
+  defaultVariants: {
+    state: 'default',
+  },
+})
+
+export const datePickerTimeStyles =
+  'flex items-center gap-2 mt-3 pt-3 border-t'
+
+export const datePickerTimeInputStyles =
+  'w-14 rounded-md border border-input bg-background px-2 py-1 text-sm text-center'

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,
+  }
+}