@refraction-ui/astro 0.4.0 → 0.4.4

package/dist/badge/badge.ts

@@ -0,0 +1,48 @@
+import type { AccessibilityProps } from '../shared/index.ts'
+
+export type BadgeVariant = 'default' | 'primary' | 'secondary' | 'destructive' | 'outline' | 'success' | 'warning'
+export type BadgeSize = 'sm' | 'md'
+
+export interface BadgeProps {
+  variant?: BadgeVariant
+  size?: BadgeSize
+}
+
+export interface BadgeAPI {
+  /** ARIA attributes to spread on the element */
+  ariaProps: Partial<AccessibilityProps>
+  /** Data attributes for CSS styling hooks */
+  dataAttributes: Record<string, string>
+}
+
+const statusVariants: BadgeVariant[] = ['success', 'warning', 'destructive']
+
+/** Icon name for status badge variants — non-color indicator for colorblind safety */
+const BADGE_ICONS: Partial<Record<BadgeVariant, string>> = {
+  success: 'check',
+  warning: 'alert',
+  destructive: 'x',
+}
+
+/** Get the icon name for a badge variant (undefined for non-status variants) */
+export function getBadgeIcon(variant: BadgeVariant): string | undefined {
+  return BADGE_ICONS[variant]
+}
+
+export function createBadge(props: BadgeProps = {}): BadgeAPI {
+  const { variant = 'default' } = props
+
+  const ariaProps: Partial<AccessibilityProps> = {}
+
+  if (statusVariants.includes(variant)) {
+    ariaProps.role = 'status'
+  }
+
+  const dataAttributes: Record<string, string> = {}
+  dataAttributes['data-variant'] = variant
+
+  return {
+    ariaProps,
+    dataAttributes,
+  }
+}

package/dist/badge/index.ts

@@ -0,0 +1,10 @@
+export {
+  createBadge,
+  getBadgeIcon,
+  type BadgeVariant,
+  type BadgeSize,
+  type BadgeProps,
+  type BadgeAPI,
+} from './badge.js'
+
+export { badgeVariants } from './badge.styles.js'

package/dist/bottom-nav/bottom-nav.styles.ts

@@ -0,0 +1,18 @@
+import { cva } from '../shared/index.ts'
+
+export const bottomNavVariants = cva({
+  base: 'fixed bottom-0 left-0 right-0 z-40 border-t bg-background md:hidden',
+})
+
+export const bottomNavTabVariants = cva({
+  base: 'flex flex-1 flex-col items-center justify-center gap-1 py-2 text-xs transition-colors',
+  variants: {
+    active: {
+      true: 'text-foreground',
+      false: 'text-muted-foreground',
+    },
+  },
+  defaultVariants: {
+    active: 'false',
+  },
+})

package/dist/bottom-nav/bottom-nav.ts

@@ -0,0 +1,33 @@
+export interface NavTab {
+  label: string
+  href: string
+  icon?: string
+  activeIcon?: string
+}
+
+export interface BottomNavProps {
+  tabs?: NavTab[]
+  currentPath?: string
+}
+
+export interface BottomNavAPI {
+  ariaProps: Record<string, string>
+  isActive: (href: string) => boolean
+  tabAriaProps: (href: string) => Record<string, string>
+}
+
+export function createBottomNav(props: BottomNavProps = {}): BottomNavAPI {
+  const { currentPath = '/' } = props
+
+  function isActive(href: string): boolean {
+    if (href === '/') return currentPath === '/'
+    return currentPath.startsWith(href)
+  }
+
+  return {
+    ariaProps: { role: 'navigation', 'aria-label': 'Main navigation' },
+    isActive,
+    tabAriaProps: (href: string): Record<string, string> =>
+      isActive(href) ? { 'aria-current': 'page' } : {},
+  }
+}

package/dist/bottom-nav/index.ts

@@ -0,0 +1,2 @@
+export { createBottomNav, type NavTab, type BottomNavProps, type BottomNavAPI } from './bottom-nav.js'
+export { bottomNavVariants, bottomNavTabVariants } from './bottom-nav.styles.js'

package/dist/breadcrumbs/breadcrumbs.styles.ts

@@ -0,0 +1,20 @@
+import { cva } from '../shared/index.ts'
+
+export const breadcrumbsVariants = cva({
+  base: 'flex flex-wrap items-center gap-1.5 text-sm text-muted-foreground',
+})
+
+export const breadcrumbItemVariants = cva({
+  base: 'transition-colors',
+  variants: {
+    active: {
+      true: 'font-medium text-foreground',
+      false: 'hover:text-foreground',
+    },
+  },
+  defaultVariants: {
+    active: 'false',
+  },
+})
+
+export const breadcrumbSeparatorStyles = 'text-muted-foreground/50 select-none'

package/dist/breadcrumbs/breadcrumbs.ts

@@ -0,0 +1,72 @@
+export interface BreadcrumbItem {
+  label: string
+  href?: string
+}
+
+export interface BreadcrumbsProps {
+  /** Current pathname to auto-generate from */
+  pathname?: string
+  /** Manual items (overrides pathname) */
+  items?: BreadcrumbItem[]
+  /** Custom label map for pathname segments */
+  labels?: Record<string, string>
+  /** Separator character */
+  separator?: string
+  /** Max items to show before truncating */
+  maxItems?: number
+}
+
+export interface BreadcrumbsAPI {
+  items: BreadcrumbItem[]
+  ariaProps: Record<string, string>
+  separator: string
+  isLast: (index: number) => boolean
+  itemAriaProps: (index: number) => Record<string, string>
+}
+
+function kebabToTitle(segment: string): string {
+  return segment
+    .split('-')
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' ')
+}
+
+function pathToItems(
+  pathname: string,
+  labels: Record<string, string> = {},
+): BreadcrumbItem[] {
+  const segments = pathname.split('/').filter(Boolean)
+  const items: BreadcrumbItem[] = [{ label: 'Home', href: '/' }]
+
+  let currentPath = ''
+  for (const segment of segments) {
+    currentPath += `/${segment}`
+    items.push({
+      label: labels[segment] ?? labels[currentPath] ?? kebabToTitle(segment),
+      href: currentPath,
+    })
+  }
+
+  return items
+}
+
+export function createBreadcrumbs(props: BreadcrumbsProps = {}): BreadcrumbsAPI {
+  const { pathname, items: manualItems, labels = {}, separator = '/', maxItems } = props
+
+  let items = manualItems ?? (pathname ? pathToItems(pathname, labels) : [])
+
+  if (maxItems && items.length > maxItems) {
+    const first = items[0]
+    const last = items.slice(-(maxItems - 1))
+    items = [first, { label: '...' }, ...last]
+  }
+
+  return {
+    items,
+    ariaProps: { 'aria-label': 'Breadcrumb' },
+    separator,
+    isLast: (index: number) => index === items.length - 1,
+    itemAriaProps: (index: number): Record<string, string> =>
+      index === items.length - 1 ? { 'aria-current': 'page' } : {},
+  }
+}

package/dist/breadcrumbs/index.ts

@@ -0,0 +1,8 @@
+export {
+  createBreadcrumbs,
+  type BreadcrumbItem,
+  type BreadcrumbsProps,
+  type BreadcrumbsAPI,
+} from './breadcrumbs.js'
+
+export { breadcrumbsVariants, breadcrumbItemVariants, breadcrumbSeparatorStyles } from './breadcrumbs.styles.js'

package/dist/button/button.styles.ts

@@ -0,0 +1,38 @@
+import { cva } from '../shared/index.ts'
+import type { TokenContract } from '../shared/index.ts'
+
+export const buttonTokens: TokenContract = {
+  name: 'button',
+  tokens: {
+    bg: { variable: '--rfr-button-bg', fallback: 'hsl(var(--primary))' },
+    fg: { variable: '--rfr-button-fg', fallback: 'hsl(var(--primary-foreground))' },
+    border: { variable: '--rfr-button-border', fallback: 'hsl(var(--border))' },
+    radius: { variable: '--rfr-button-radius', fallback: 'var(--radius)' },
+    ring: { variable: '--rfr-button-ring', fallback: 'hsl(var(--ring))' },
+  },
+}
+
+export const buttonVariants = cva({
+  base: 'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0',
+  variants: {
+    variant: {
+      default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+      destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+      outline: 'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
+      secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+      ghost: 'hover:bg-accent hover:text-accent-foreground',
+      link: 'text-primary underline-offset-4 hover:underline',
+    },
+    size: {
+      xs: 'h-7 rounded px-2 text-xs',
+      sm: 'h-8 rounded-md px-3 text-xs',
+      default: 'h-9 px-4 py-2',
+      lg: 'h-10 rounded-md px-8',
+      icon: 'h-9 w-9',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+    size: 'default',
+  },
+})

package/dist/button/button.ts

@@ -0,0 +1,64 @@
+import type { AccessibilityProps, KeyboardHandlerMap } from '../shared/index.ts'
+import { Keys } from '../shared/index.ts'
+
+export type ButtonVariant = 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link'
+export type ButtonSize = 'xs' | 'sm' | 'default' | 'lg' | 'icon'
+
+export interface ButtonProps {
+  variant?: ButtonVariant
+  size?: ButtonSize
+  disabled?: boolean
+  loading?: boolean
+  asChild?: boolean
+  type?: 'button' | 'submit' | 'reset'
+}
+
+export interface ButtonAPI {
+  /** ARIA attributes to spread on the element */
+  ariaProps: Partial<AccessibilityProps>
+  /** Keyboard handlers to attach */
+  keyboardHandlers: KeyboardHandlerMap
+  /** Whether interaction should be blocked */
+  isInteractive: boolean
+  /** Data attributes for CSS styling hooks */
+  dataAttributes: Record<string, string>
+}
+
+export function createButton(props: ButtonProps = {}): ButtonAPI {
+  const { disabled = false, loading = false } = props
+  const isInteractive = !disabled && !loading
+
+  const ariaProps: Partial<AccessibilityProps> = {}
+  if (disabled) {
+    ariaProps['aria-disabled'] = true
+  }
+  if (loading) {
+    ariaProps['aria-disabled'] = true
+    ariaProps['aria-label'] = ariaProps['aria-label'] ?? undefined
+  }
+
+  const dataAttributes: Record<string, string> = {}
+  if (loading) {
+    dataAttributes['data-loading'] = ''
+  }
+  if (disabled) {
+    dataAttributes['data-disabled'] = ''
+  }
+
+  const keyboardHandlers: KeyboardHandlerMap = {}
+  if (!isInteractive) {
+    keyboardHandlers[Keys.Enter] = (e) => e.preventDefault()
+    keyboardHandlers[Keys.Space] = (e) => e.preventDefault()
+  }
+
+  return {
+    ariaProps,
+    keyboardHandlers,
+    isInteractive,
+    dataAttributes,
+  }
+}
+
+export function getButtonType(props: ButtonProps): string {
+  return props.type ?? 'button'
+}

package/dist/button/index.ts

@@ -0,0 +1,10 @@
+export {
+  createButton,
+  getButtonType,
+  type ButtonProps,
+  type ButtonAPI,
+  type ButtonVariant,
+  type ButtonSize,
+} from './button.js'
+
+export { buttonVariants, buttonTokens } from './button.styles.js'

package/dist/calendar/calendar.styles.ts

@@ -0,0 +1,21 @@
+import { cva } from '../shared/index.ts'
+
+export const calendarVariants = cva({
+  base: 'p-3 rounded-md border bg-background',
+})
+
+export const dayVariants = cva({
+  base: 'inline-flex items-center justify-center rounded-md text-sm h-9 w-9',
+  variants: {
+    state: {
+      default: 'hover:bg-accent hover:text-accent-foreground',
+      selected: 'bg-primary text-primary-foreground hover:bg-primary/90',
+      today: 'bg-accent text-accent-foreground',
+      disabled: 'text-muted-foreground opacity-50 cursor-not-allowed',
+      outside: 'text-muted-foreground opacity-50',
+    },
+  },
+  defaultVariants: {
+    state: 'default',
+  },
+})

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