@refraction-ui/astro 0.4.2 → 0.4.5

package/dist/calendar/calendar.ts

@@ -0,0 +1,202 @@
+import type { AccessibilityProps } from '../shared/index.ts'
+import { generateId } from '../shared/index.ts'
+
+export interface CalendarProps {
+  /** Selected date (controlled) */
+  value?: Date
+  /** Default selected date (uncontrolled) */
+  defaultValue?: Date
+  /** Callback when a date is selected */
+  onSelect?: (date: Date) => void
+  /** Displayed month (controlled) */
+  month?: Date
+  /** Callback when the displayed month changes */
+  onMonthChange?: (month: Date) => void
+  /** Minimum selectable date */
+  minDate?: Date
+  /** Maximum selectable date */
+  maxDate?: Date
+  /** Specific dates to disable */
+  disabledDates?: Date[]
+}
+
+export interface CalendarDay {
+  /** The date this cell represents */
+  date: Date
+  /** Whether the date is today */
+  isToday: boolean
+  /** Whether the date is currently selected */
+  isSelected: boolean
+  /** Whether the date belongs to the currently displayed month */
+  isCurrentMonth: boolean
+  /** Whether the date is disabled */
+  isDisabled: boolean
+}
+
+export interface CalendarState {
+  /** The currently displayed month */
+  currentMonth: Date
+  /** The currently selected date, if any */
+  selectedDate: Date | undefined
+}
+
+export interface CalendarAPI {
+  /** Current calendar state */
+  state: CalendarState
+  /** Array of day objects for the current month grid (always 42: 6 weeks x 7 days) */
+  days: CalendarDay[]
+  /** Navigate to the previous month */
+  prevMonth(): void
+  /** Navigate to the next month */
+  nextMonth(): void
+  /** Select a date */
+  select(date: Date): void
+  /** ARIA attributes for the calendar grid */
+  ariaProps: Partial<AccessibilityProps> & Record<string, unknown>
+  /** Get ARIA attributes for a specific day cell */
+  getDayAriaProps(day: CalendarDay): Partial<AccessibilityProps> & Record<string, unknown>
+  /** Generated IDs */
+  ids: {
+    grid: string
+    label: string
+  }
+}
+
+/** Check if two dates represent the same calendar day */
+function isSameDay(a: Date, b: Date): boolean {
+  return (
+    a.getFullYear() === b.getFullYear() &&
+    a.getMonth() === b.getMonth() &&
+    a.getDate() === b.getDate()
+  )
+}
+
+/** Get the first day of a month */
+function startOfMonth(date: Date): Date {
+  return new Date(date.getFullYear(), date.getMonth(), 1)
+}
+
+/** Get day names */
+const DAY_NAMES = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
+
+export function createCalendar(props: CalendarProps = {}): CalendarAPI {
+  const {
+    value: controlledValue,
+    defaultValue,
+    onSelect,
+    month: controlledMonth,
+    onMonthChange,
+    minDate,
+    maxDate,
+    disabledDates = [],
+  } = props
+
+  const today = new Date()
+
+  // Determine selected date
+  const selectedDate = controlledValue ?? defaultValue
+
+  // Determine current displayed month
+  const currentMonth = controlledMonth
+    ? startOfMonth(controlledMonth)
+    : selectedDate
+      ? startOfMonth(selectedDate)
+      : startOfMonth(today)
+
+  const gridId = generateId('rfr-calendar')
+  const labelId = generateId('rfr-calendar-label')
+
+  function isDateDisabled(date: Date): boolean {
+    if (minDate && date < startOfDay(minDate)) return true
+    if (maxDate && date > endOfDay(maxDate)) return true
+    return disabledDates.some((d) => isSameDay(d, date))
+  }
+
+  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)
+  }
+
+  /** Build the 42-cell grid for the current month view */
+  function buildDays(): CalendarDay[] {
+    const year = currentMonth.getFullYear()
+    const month = currentMonth.getMonth()
+
+    // First day of the month
+    const first = new Date(year, month, 1)
+    // Day of week the month starts on (0 = Sunday)
+    const startDow = first.getDay()
+
+    // Start from the Sunday before (or on) the first
+    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: selectedDate ? isSameDay(date, selectedDate) : false,
+        isCurrentMonth: date.getMonth() === month,
+        isDisabled: isDateDisabled(date),
+      })
+    }
+    return days
+  }
+
+  function prevMonth(): void {
+    const prev = new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1, 1)
+    onMonthChange?.(prev)
+  }
+
+  function nextMonth(): void {
+    const next = new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1, 1)
+    onMonthChange?.(next)
+  }
+
+  function select(date: Date): void {
+    if (!isDateDisabled(date)) {
+      onSelect?.(date)
+    }
+  }
+
+  const ariaProps: 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: {
+      currentMonth,
+      selectedDate,
+    },
+    days: buildDays(),
+    prevMonth,
+    nextMonth,
+    select,
+    ariaProps,
+    getDayAriaProps,
+    ids: {
+      grid: gridId,
+      label: labelId,
+    },
+  }
+}

package/dist/calendar/index.ts

@@ -0,0 +1,9 @@
+export {
+  createCalendar,
+  type CalendarProps,
+  type CalendarDay,
+  type CalendarState,
+  type CalendarAPI,
+} from './calendar.js'
+
+export { calendarVariants, dayVariants } from './calendar.styles.js'

package/dist/callout/callout.ts

@@ -0,0 +1 @@
+export const callout = {};

package/dist/callout/index.ts

@@ -0,0 +1 @@
+export * from './callout';

package/dist/card/card.styles.ts

@@ -0,0 +1,55 @@
+import { cva } from '../shared/index.ts'
+import type { TokenContract } from '../shared/index.ts'
+
+export const cardTokens: TokenContract = {
+  name: 'card',
+  tokens: {
+    bg: { variable: '--rfr-card-bg', fallback: 'hsl(var(--card))' },
+    fg: { variable: '--rfr-card-fg', fallback: 'hsl(var(--card-foreground))' },
+    border: { variable: '--rfr-card-border', fallback: 'hsl(var(--border))' },
+  },
+}
+
+export const cardVariants = cva({
+  base: 'rounded-lg border bg-card text-card-foreground shadow',
+  variants: {
+    padding: {
+      none: '',
+      default: 'p-6',
+      compact: 'p-4',
+    },
+  },
+  defaultVariants: {
+    padding: 'none',
+  },
+})
+
+export const cardHeaderVariants = cva({
+  base: 'flex flex-col space-y-1.5 p-6',
+})
+
+export const cardTitleVariants = cva({
+  base: 'font-semibold leading-none tracking-tight',
+  variants: {
+    size: {
+      sm: 'text-lg',
+      default: 'text-2xl',
+      lg: 'text-3xl',
+    },
+  },
+  defaultVariants: {
+    size: 'default',
+  },
+})
+
+export const cardDescriptionVariants = cva({
+  base: 'text-sm text-muted-foreground',
+})
+
+export const cardContentVariants = cva({
+  base: 'p-6 pt-0',
+})
+
+export const cardFooterVariants = cva({
+  base: 'flex items-center p-6 pt-0',
+})

package/dist/card/card.ts

@@ -0,0 +1,45 @@
+import type { AccessibilityProps } from '../shared/index.ts'
+
+export interface CardProps {
+  /** Optional accessible role override */
+  role?: string
+}
+
+export interface CardAPI {
+  /** ARIA attributes to spread on the element */
+  ariaProps: Partial<AccessibilityProps>
+  /** Data attributes for CSS styling hooks */
+  dataAttributes: Record<string, string>
+}
+
+export function createCard(props: CardProps = {}): CardAPI {
+  const ariaProps: Partial<AccessibilityProps> = {}
+  if (props.role) {
+    ariaProps.role = props.role
+  }
+
+  return {
+    ariaProps,
+    dataAttributes: { 'data-slot': 'card' },
+  }
+}
+
+export function createCardHeader(): { dataAttributes: Record<string, string> } {
+  return { dataAttributes: { 'data-slot': 'card-header' } }
+}
+
+export function createCardTitle(): { dataAttributes: Record<string, string> } {
+  return { dataAttributes: { 'data-slot': 'card-title' } }
+}
+
+export function createCardDescription(): { dataAttributes: Record<string, string> } {
+  return { dataAttributes: { 'data-slot': 'card-description' } }
+}
+
+export function createCardContent(): { dataAttributes: Record<string, string> } {
+  return { dataAttributes: { 'data-slot': 'card-content' } }
+}
+
+export function createCardFooter(): { dataAttributes: Record<string, string> } {
+  return { dataAttributes: { 'data-slot': 'card-footer' } }
+}

package/dist/card/index.ts

@@ -0,0 +1,20 @@
+export {
+  createCard,
+  createCardHeader,
+  createCardTitle,
+  createCardDescription,
+  createCardContent,
+  createCardFooter,
+  type CardProps,
+  type CardAPI,
+} from './card.js'
+
+export {
+  cardVariants,
+  cardHeaderVariants,
+  cardTitleVariants,
+  cardDescriptionVariants,
+  cardContentVariants,
+  cardFooterVariants,
+  cardTokens,
+} from './card.styles.js'

package/dist/card-grid/card-grid.ts

@@ -0,0 +1,9 @@
+export interface CardGridProps {
+  columns?: number
+}
+
+export function createCardGrid(_props: CardGridProps = {}) {
+  return {
+    dataAttributes: { 'data-slot': 'card-grid' }
+  }
+}

package/dist/card-grid/index.ts

@@ -0,0 +1 @@
+export * from './card-grid.js'

package/dist/carousel/index.ts

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

package/dist/charts/axis.ts

@@ -0,0 +1,50 @@
+import type { LinearScale, BandScale, TimeScale } from './scales.js'
+
+type AnyScale = LinearScale | BandScale | TimeScale
+
+export function generateTicks(
+  scale: AnyScale,
+  count?: number,
+): (number | string | Date)[] {
+  if (scale.type === 'band') {
+    return scale.domain
+  }
+  if (scale.type === 'time') {
+    return scale.ticks(count)
+  }
+  // linear
+  return scale.ticks(count)
+}
+
+export function formatTick(
+  value: number | string | Date,
+  type: 'number' | 'date' | 'string',
+): string {
+  if (type === 'string') {
+    return String(value)
+  }
+
+  if (type === 'date') {
+    if (value instanceof Date) {
+      return value.toISOString().split('T')[0]
+    }
+    return String(value)
+  }
+
+  // type === 'number'
+  const num = value as number
+  if (!Number.isFinite(num)) return String(num)
+
+  // Check if integer
+  if (Number.isInteger(num)) {
+    // Format with locale separators for large numbers
+    return num.toLocaleString('en-US', { maximumFractionDigits: 0 })
+  }
+
+  // Decimal: show up to 2 decimal places, strip trailing zeros
+  const formatted = num.toLocaleString('en-US', {
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 2,
+  })
+  return formatted
+}

package/dist/charts/chart.ts

@@ -0,0 +1,73 @@
+export interface Margin {
+  top: number
+  right: number
+  bottom: number
+  left: number
+}
+
+export interface Dimensions {
+  width: number
+  height: number
+  margin: Margin
+  boundedWidth: number
+  boundedHeight: number
+}
+
+export interface ChartConfig {
+  width?: number
+  height?: number
+  margin?: Partial<Margin>
+  data?: unknown[]
+}
+
+export interface ChartAPI {
+  dimensions: Dimensions
+  scales: Record<string, unknown>
+  updateDimensions: (partial: Partial<ChartConfig>) => void
+}
+
+const DEFAULT_MARGIN: Margin = {
+  top: 40,
+  right: 30,
+  bottom: 40,
+  left: 75,
+}
+
+const DEFAULT_WIDTH = 600
+const DEFAULT_HEIGHT = 400
+
+export function combineDimensions(partial: Partial<ChartConfig>): Dimensions {
+  const width = partial.width ?? DEFAULT_WIDTH
+  const height = partial.height ?? DEFAULT_HEIGHT
+  const margin: Margin = {
+    ...DEFAULT_MARGIN,
+    ...(partial.margin ?? {}),
+  }
+  const boundedWidth = Math.max(0, width - margin.left - margin.right)
+  const boundedHeight = Math.max(0, height - margin.top - margin.bottom)
+
+  return { width, height, margin, boundedWidth, boundedHeight }
+}
+
+export function createChart(config: ChartConfig): ChartAPI {
+  let dimensions = combineDimensions(config)
+  const scales: Record<string, unknown> = {}
+
+  return {
+    get dimensions() {
+      return dimensions
+    },
+    scales,
+    updateDimensions(partial: Partial<ChartConfig>) {
+      const merged: Partial<ChartConfig> = {
+        width: partial.width ?? dimensions.width,
+        height: partial.height ?? dimensions.height,
+        margin: {
+          ...dimensions.margin,
+          ...(partial.margin ?? {}),
+        },
+      }
+      dimensions = combineDimensions(merged)
+    },
+  }
+}

package/dist/charts/colorblind.ts

@@ -0,0 +1,100 @@
+/**
+ * Colorblind-safe color palettes for charts.
+ * Based on Wong (2011) "Points of view: Color blindness" — Nature Methods.
+ * These 8 colors are distinguishable by people with all types of color vision deficiency.
+ */
+export const COLORBLIND_SAFE_PALETTE = [
+  '#0072B2', // blue
+  '#E69F00', // orange
+  '#009E73', // green (blue-tinted, safe for protanopia/deuteranopia)
+  '#F0E442', // yellow
+  '#56B4E9', // sky blue
+  '#D55E00', // vermillion (not red — distinguishable from green)
+  '#CC79A7', // pink
+  '#000000', // black
+] as const
+
+/** Convert hex to HSL string for CSS variables */
+export function hexToHSL(hex: string): string {
+  // Remove # prefix
+  const h = hex.replace(/^#/, '')
+
+  const r = parseInt(h.substring(0, 2), 16) / 255
+  const g = parseInt(h.substring(2, 4), 16) / 255
+  const b = parseInt(h.substring(4, 6), 16) / 255
+
+  const max = Math.max(r, g, b)
+  const min = Math.min(r, g, b)
+  const l = (max + min) / 2
+
+  if (max === min) {
+    // Achromatic
+    return `0 0% ${Math.round(l * 100)}%`
+  }
+
+  const d = max - min
+  const s = l > 0.5 ? d / (2 - max - min) : d / (max + min)
+
+  let hue: number
+  if (max === r) {
+    hue = ((g - b) / d + (g < b ? 6 : 0)) / 6
+  } else if (max === g) {
+    hue = ((b - r) / d + 2) / 6
+  } else {
+    hue = ((r - g) / d + 4) / 6
+  }
+
+  return `${Math.round(hue * 360)} ${Math.round(s * 100)}% ${Math.round(l * 100)}%`
+}
+
+/** Get a colorblind-safe color by index (wraps around) */
+export function getChartColor(index: number): string {
+  return COLORBLIND_SAFE_PALETTE[index % COLORBLIND_SAFE_PALETTE.length]
+}
+
+/**
+ * Pattern fills for charts — when color alone isn't enough.
+ * Returns SVG pattern definitions that can be used as fill.
+ */
+export type PatternType = 'solid' | 'diagonal' | 'dots' | 'crosshatch' | 'horizontal' | 'vertical' | 'zigzag' | 'checker'
+
+export function getPatternDef(type: PatternType, color: string, id: string): string {
+  const size = 8
+
+  switch (type) {
+    case 'solid':
+      return `<pattern id="${id}" width="${size}" height="${size}" patternUnits="userSpaceOnUse"><rect width="${size}" height="${size}" fill="${color}"/></pattern>`
+
+    case 'diagonal':
+      return `<pattern id="${id}" width="${size}" height="${size}" patternUnits="userSpaceOnUse"><rect width="${size}" height="${size}" fill="${color}" opacity="0.3"/><line x1="0" y1="${size}" x2="${size}" y2="0" stroke="${color}" stroke-width="1.5"/></pattern>`
+
+    case 'dots':
+      return `<pattern id="${id}" width="${size}" height="${size}" patternUnits="userSpaceOnUse"><rect width="${size}" height="${size}" fill="${color}" opacity="0.3"/><circle cx="${size / 2}" cy="${size / 2}" r="1.5" fill="${color}"/></pattern>`
+
+    case 'crosshatch':
+      return `<pattern id="${id}" width="${size}" height="${size}" patternUnits="userSpaceOnUse"><rect width="${size}" height="${size}" fill="${color}" opacity="0.3"/><line x1="0" y1="0" x2="${size}" y2="${size}" stroke="${color}" stroke-width="1"/><line x1="${size}" y1="0" x2="0" y2="${size}" stroke="${color}" stroke-width="1"/></pattern>`
+
+    case 'horizontal':
+      return `<pattern id="${id}" width="${size}" height="${size}" patternUnits="userSpaceOnUse"><rect width="${size}" height="${size}" fill="${color}" opacity="0.3"/><line x1="0" y1="${size / 2}" x2="${size}" y2="${size / 2}" stroke="${color}" stroke-width="1.5"/></pattern>`
+
+    case 'vertical':
+      return `<pattern id="${id}" width="${size}" height="${size}" patternUnits="userSpaceOnUse"><rect width="${size}" height="${size}" fill="${color}" opacity="0.3"/><line x1="${size / 2}" y1="0" x2="${size / 2}" y2="${size}" stroke="${color}" stroke-width="1.5"/></pattern>`
+
+    case 'zigzag':
+      return `<pattern id="${id}" width="${size}" height="${size}" patternUnits="userSpaceOnUse"><rect width="${size}" height="${size}" fill="${color}" opacity="0.3"/><polyline points="0,${size} ${size / 2},0 ${size},${size}" fill="none" stroke="${color}" stroke-width="1.5"/></pattern>`
+
+    case 'checker':
+      return `<pattern id="${id}" width="${size}" height="${size}" patternUnits="userSpaceOnUse"><rect width="${size}" height="${size}" fill="${color}" opacity="0.3"/><rect width="${size / 2}" height="${size / 2}" fill="${color}"/><rect x="${size / 2}" y="${size / 2}" width="${size / 2}" height="${size / 2}" fill="${color}"/></pattern>`
+  }
+}
+
+export const PATTERNS: PatternType[] = [
+  'solid',
+  'diagonal',
+  'dots',
+  'crosshatch',
+  'horizontal',
+  'vertical',
+  'zigzag',
+  'checker',
+]

package/dist/charts/data.ts

@@ -0,0 +1,72 @@
+export interface HistogramBin {
+  x0: number
+  x1: number
+  count: number
+}
+
+export function computeExtent(data: number[]): [number, number] {
+  let min = data[0]
+  let max = data[0]
+  for (let i = 1; i < data.length; i++) {
+    if (data[i] < min) min = data[i]
+    if (data[i] > max) max = data[i]
+  }
+  return [min, max]
+}
+
+export function computeMean(data: number[]): number {
+  let sum = 0
+  for (let i = 0; i < data.length; i++) {
+    sum += data[i]
+  }
+  return sum / data.length
+}
+
+export function computeHistogramBins(
+  data: number[],
+  binCount?: number,
+): HistogramBin[] {
+  const count = binCount ?? Math.ceil(Math.sqrt(data.length))
+  const [min, max] = computeExtent(data)
+  const span = max - min
+
+  // Handle case where all values are the same
+  if (span === 0) {
+    const bins: HistogramBin[] = []
+    for (let i = 0; i < count; i++) {
+      bins.push({ x0: min, x1: max, count: 0 })
+    }
+    // Put all items in the first bin
+    bins[0].count = data.length
+    return bins
+  }
+
+  const binWidth = span / count
+  const bins: HistogramBin[] = []
+  for (let i = 0; i < count; i++) {
+    bins.push({
+      x0: min + i * binWidth,
+      x1: min + (i + 1) * binWidth,
+      count: 0,
+    })
+  }
+
+  for (const value of data) {
+    let idx = Math.floor((value - min) / binWidth)
+    // Values at the max boundary go into the last bin
+    if (idx >= count) idx = count - 1
+    bins[idx].count++
+  }
+
+  return bins
+}
+
+export function normalizeData<T>(
+  data: T[],
+  accessor: string | ((d: T) => unknown),
+): unknown[] {
+  if (typeof accessor === 'string') {
+    return data.map((d) => (d as Record<string, unknown>)[accessor])
+  }
+  return data.map(accessor)
+}