@refraction-ui/astro 0.4.2 → 0.4.4

package/dist/tabs/tabs.ts

@@ -0,0 +1,133 @@
+import type { AccessibilityProps, KeyboardHandlerMap } from '../shared/index.ts'
+import { Keys, generateId } from '../shared/index.ts'
+
+export interface TabsProps {
+  /** The active tab value (controlled) */
+  value?: string
+  /** The default active tab value (uncontrolled) */
+  defaultValue?: string
+  /** Callback when active tab changes */
+  onValueChange?: (value: string) => void
+  /** Orientation of the tab list */
+  orientation?: 'horizontal' | 'vertical'
+}
+
+export interface TabsState {
+  activeValue: string
+}
+
+export interface TabsAPI {
+  /** Current tabs state */
+  state: TabsState
+  /** ARIA attributes for the tab list */
+  listProps: Partial<AccessibilityProps> & Record<string, unknown>
+  /** Factory for individual tab trigger props */
+  getTabProps(value: string): Partial<AccessibilityProps> & Record<string, unknown>
+  /** Factory for individual tab panel props */
+  getPanelProps(value: string): Partial<AccessibilityProps> & Record<string, unknown>
+  /** Select a tab by value */
+  select(value: string): void
+  /** Keyboard handlers for the tab list */
+  keyboardHandlers: KeyboardHandlerMap
+  /** Generated ID prefix for aria linking */
+  idPrefix: string
+}
+
+export function createTabs(props: TabsProps = {}): TabsAPI {
+  const {
+    value: controlledValue,
+    defaultValue = '',
+    onValueChange,
+    orientation = 'horizontal',
+  } = props
+
+  let uncontrolledValue = controlledValue ?? defaultValue
+  const idPrefix = generateId('rfr-tabs')
+
+  function getActiveValue(): string {
+    if (controlledValue !== undefined) return controlledValue
+    return uncontrolledValue
+  }
+
+  function select(value: string): void {
+    uncontrolledValue = value
+    onValueChange?.(value)
+  }
+
+  function getTabId(value: string): string {
+    return `${idPrefix}-tab-${value}`
+  }
+
+  function getPanelId(value: string): string {
+    return `${idPrefix}-panel-${value}`
+  }
+
+  function getTabProps(value: string): Partial<AccessibilityProps> & Record<string, unknown> {
+    const isSelected = getActiveValue() === value
+    return {
+      role: 'tab',
+      'aria-selected': isSelected,
+      'aria-controls': getPanelId(value),
+      tabIndex: isSelected ? 0 : -1,
+      id: getTabId(value),
+      'data-state': isSelected ? 'active' : 'inactive',
+    }
+  }
+
+  function getPanelProps(value: string): Partial<AccessibilityProps> & Record<string, unknown> {
+    const isSelected = getActiveValue() === value
+    return {
+      role: 'tabpanel',
+      'aria-labelledby': getTabId(value),
+      id: getPanelId(value),
+      hidden: !isSelected || undefined,
+      tabIndex: 0,
+      'data-state': isSelected ? 'active' : 'inactive',
+    }
+  }
+
+  const listProps: Partial<AccessibilityProps> & Record<string, unknown> = {
+    role: 'tablist',
+    'aria-orientation': orientation,
+  }
+
+  const keyboardHandlers: KeyboardHandlerMap = orientation === 'horizontal'
+    ? {
+        [Keys.ArrowLeft]: (e) => {
+          e.preventDefault()
+        },
+        [Keys.ArrowRight]: (e) => {
+          e.preventDefault()
+        },
+        [Keys.Home]: (e) => {
+          e.preventDefault()
+        },
+        [Keys.End]: (e) => {
+          e.preventDefault()
+        },
+      }
+    : {
+        [Keys.ArrowUp]: (e) => {
+          e.preventDefault()
+        },
+        [Keys.ArrowDown]: (e) => {
+          e.preventDefault()
+        },
+        [Keys.Home]: (e) => {
+          e.preventDefault()
+        },
+        [Keys.End]: (e) => {
+          e.preventDefault()
+        },
+      }
+
+  return {
+    state: { activeValue: getActiveValue() },
+    listProps,
+    getTabProps,
+    getPanelProps,
+    select,
+    keyboardHandlers,
+    idPrefix,
+  }
+}

package/dist/textarea/index.ts

@@ -0,0 +1,7 @@
+export {
+  createTextarea,
+  type TextareaProps,
+  type TextareaAPI,
+} from './textarea.js'
+
+export { textareaVariants } from './textarea.styles.js'

package/dist/textarea/textarea.styles.ts

@@ -0,0 +1,15 @@
+import { cva } from '../shared/index.ts'
+
+export const textareaVariants = cva({
+  base: 'flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+  variants: {
+    size: {
+      sm: 'min-h-[40px] text-xs',
+      default: 'min-h-[60px]',
+      lg: 'min-h-[80px] text-base',
+    },
+  },
+  defaultVariants: {
+    size: 'default',
+  },
+})

package/dist/textarea/textarea.ts

@@ -0,0 +1,59 @@
+import type { AccessibilityProps } from '../shared/index.ts'
+
+export interface TextareaProps {
+  disabled?: boolean
+  readOnly?: boolean
+  required?: boolean
+  'aria-invalid'?: boolean
+  rows?: number
+  maxRows?: number
+}
+
+export interface TextareaAPI {
+  /** ARIA attributes to spread on the element */
+  ariaProps: Partial<AccessibilityProps> & { 'aria-invalid'?: boolean; 'aria-required'?: boolean }
+  /** Data attributes for CSS styling hooks */
+  dataAttributes: Record<string, string>
+}
+
+export function createTextarea(props: TextareaProps = {}): TextareaAPI {
+  const {
+    disabled = false,
+    readOnly = false,
+    required = false,
+    'aria-invalid': ariaInvalid,
+  } = props
+
+  const ariaProps: TextareaAPI['ariaProps'] = {}
+
+  if (disabled) {
+    ariaProps['aria-disabled'] = true
+  }
+
+  if (ariaInvalid) {
+    ariaProps['aria-invalid'] = true
+  }
+
+  if (required) {
+    ariaProps['aria-required'] = true
+  }
+
+  const dataAttributes: Record<string, string> = {}
+
+  if (disabled) {
+    dataAttributes['data-disabled'] = ''
+  }
+
+  if (readOnly) {
+    dataAttributes['data-readonly'] = ''
+  }
+
+  if (ariaInvalid) {
+    dataAttributes['data-invalid'] = ''
+  }
+
+  return {
+    ariaProps,
+    dataAttributes,
+  }
+}

package/dist/theme/dom-adapters.ts

@@ -0,0 +1,60 @@
+/**
+ * Browser DOM adapters for the theme machine.
+ * These bridge the headless core to browser APIs.
+ */
+
+import type { StorageAdapter, MediaQueryAdapter, ResolvedTheme } from './theme-machine.js'
+
+/** localStorage adapter */
+export function createLocalStorageAdapter(): StorageAdapter {
+  return {
+    get(key) {
+      try {
+        return localStorage.getItem(key)
+      } catch {
+        return null
+      }
+    },
+    set(key, value) {
+      try {
+        localStorage.setItem(key, value)
+      } catch {
+        // localStorage unavailable (SSR, incognito quota exceeded, etc.)
+      }
+    },
+  }
+}
+
+/** matchMedia adapter */
+export function createMediaQueryAdapter(): MediaQueryAdapter {
+  return {
+    matches(query) {
+      if (typeof window === 'undefined') return false
+      return window.matchMedia(query).matches
+    },
+    subscribe(query, callback) {
+      if (typeof window === 'undefined') return () => {}
+      const mql = window.matchMedia(query)
+      const handler = (e: MediaQueryListEvent) => callback(e.matches)
+      mql.addEventListener('change', handler)
+      return () => mql.removeEventListener('change', handler)
+    },
+  }
+}
+
+/** Apply resolved theme to the document */
+export function applyThemeToDOM(
+  resolved: ResolvedTheme,
+  attribute: 'class' | 'data-theme' = 'class',
+): void {
+  if (typeof document === 'undefined') return
+
+  const root = document.documentElement
+  if (attribute === 'class') {
+    root.classList.remove('light', 'dark')
+    root.classList.add(resolved)
+  } else {
+    root.setAttribute(attribute, resolved)
+  }
+  root.style.colorScheme = resolved
+}

package/dist/theme/index.ts

@@ -0,0 +1,18 @@
+export {
+  createTheme,
+  type ThemeMode,
+  type ResolvedTheme,
+  type ThemeState,
+  type ThemeConfig,
+  type ThemeAPI,
+  type StorageAdapter,
+  type MediaQueryAdapter,
+} from './theme-machine.js'
+
+export { getThemeScript } from './theme-script.js'
+
+export {
+  createLocalStorageAdapter,
+  createMediaQueryAdapter,
+  applyThemeToDOM,
+} from './dom-adapters.js'

package/dist/theme/theme-machine.ts

@@ -0,0 +1,130 @@
+/**
+ * Headless theme state machine — pure TypeScript, zero DOM dependencies.
+ * Manages light/dark/system mode with system preference tracking.
+ */
+
+export type ThemeMode = 'light' | 'dark' | 'system'
+export type ResolvedTheme = 'light' | 'dark'
+
+export interface ThemeState {
+  /** User's chosen mode */
+  mode: ThemeMode
+  /** Resolved theme after system preference detection */
+  resolved: ResolvedTheme
+}
+
+export interface ThemeConfig {
+  /** Initial mode. Default: 'system' */
+  defaultMode?: ThemeMode
+  /** localStorage key. Default: 'rfr-theme' */
+  storageKey?: string
+  /** HTML attribute to set. Default: 'class' */
+  attribute?: 'class' | 'data-theme'
+}
+
+export interface StorageAdapter {
+  get(key: string): string | null
+  set(key: string, value: string): void
+}
+
+export interface MediaQueryAdapter {
+  matches(query: string): boolean
+  subscribe(query: string, callback: (matches: boolean) => void): () => void
+}
+
+export interface ThemeAPI {
+  /** Get current state */
+  getState(): ThemeState
+  /** Set mode (light/dark/system) */
+  setMode(mode: ThemeMode): void
+  /** Subscribe to state changes */
+  subscribe(fn: (state: ThemeState) => void): () => void
+  /** Clean up subscriptions */
+  destroy(): void
+}
+
+function resolveTheme(mode: ThemeMode, systemPrefersDark: boolean): ResolvedTheme {
+  if (mode === 'system') {
+    return systemPrefersDark ? 'dark' : 'light'
+  }
+  return mode
+}
+
+export function createTheme(
+  config: ThemeConfig = {},
+  storage?: StorageAdapter,
+  mediaQuery?: MediaQueryAdapter,
+): ThemeAPI {
+  const {
+    defaultMode = 'system',
+    storageKey = 'rfr-theme',
+  } = config
+
+  const listeners = new Set<(state: ThemeState) => void>()
+  let cleanupMediaQuery: (() => void) | null = null
+
+  // Read persisted mode or use default
+  const persisted = storage?.get(storageKey) as ThemeMode | null
+  let mode: ThemeMode = persisted && ['light', 'dark', 'system'].includes(persisted)
+    ? persisted
+    : defaultMode
+
+  // Detect system preference
+  let systemPrefersDark = mediaQuery?.matches('(prefers-color-scheme: dark)') ?? false
+
+  let state: ThemeState = {
+    mode,
+    resolved: resolveTheme(mode, systemPrefersDark),
+  }
+
+  function notify() {
+    for (const fn of listeners) {
+      fn(state)
+    }
+  }
+
+  function updateState(newMode: ThemeMode) {
+    mode = newMode
+    state = { mode, resolved: resolveTheme(mode, systemPrefersDark) }
+    storage?.set(storageKey, mode)
+    notify()
+  }
+
+  // Listen for system preference changes
+  if (mediaQuery) {
+    cleanupMediaQuery = mediaQuery.subscribe(
+      '(prefers-color-scheme: dark)',
+      (matches) => {
+        systemPrefersDark = matches
+        if (mode === 'system') {
+          state = { mode, resolved: resolveTheme(mode, systemPrefersDark) }
+          notify()
+        }
+      },
+    )
+  }
+
+  return {
+    getState() {
+      return state
+    },
+
+    setMode(newMode: ThemeMode) {
+      if (newMode !== mode) {
+        updateState(newMode)
+      }
+    },
+
+    subscribe(fn: (state: ThemeState) => void) {
+      listeners.add(fn)
+      return () => {
+        listeners.delete(fn)
+      }
+    },
+
+    destroy() {
+      listeners.clear()
+      cleanupMediaQuery?.()
+    },
+  }
+}

package/dist/theme/theme-script.ts

@@ -0,0 +1,18 @@
+/**
+ * Inline script for preventing theme flash on page load.
+ * Inject this as a <script> tag in the <head> before any CSS.
+ * Works with any framework (React, Angular, Astro, plain HTML).
+ */
+
+export function getThemeScript(
+  storageKey = 'rfr-theme',
+  attribute: 'class' | 'data-theme' = 'class',
+): string {
+  // This string is injected as innerHTML of a <script> tag.
+  // It runs before any CSS/JS loads, preventing flash of wrong theme.
+  return `(function(){try{var m=localStorage.getItem('${storageKey}');var s=window.matchMedia('(prefers-color-scheme:dark)').matches;var t=m==='dark'||(m!=='light'&&s)?'dark':'light';var d=document.documentElement;${
+    attribute === 'class'
+      ? "d.classList.remove('light','dark');d.classList.add(t);"
+      : `d.setAttribute('${attribute}',t);`
+  }d.style.colorScheme=t;}catch(e){}})()`
+}

package/dist/thread-view/index.ts

@@ -0,0 +1,26 @@
+export {
+  createThreadView,
+  formatTimestamp,
+  formatRelativeTime,
+  type ThreadViewProps,
+  type ThreadViewState,
+  type ThreadViewAPI,
+  type MessageData,
+  type MessageReaction,
+  type MessageAttachment,
+} from './thread-view.js'
+
+export {
+  threadContainerStyles,
+  threadMessageStyles,
+  threadAvatarStyles,
+  threadContentStyles,
+  threadAuthorStyles,
+  threadTimestampStyles,
+  threadBodyStyles,
+  threadReactionsStyles,
+  threadReplyIndicatorStyles,
+  threadActionsStyles,
+  threadAttachmentStyles,
+  threadEditedStyles,
+} from './thread-view.styles.js'

package/dist/thread-view/thread-view.styles.ts

@@ -0,0 +1,35 @@
+export const threadContainerStyles =
+  'flex flex-col gap-1'
+
+export const threadMessageStyles =
+  'flex gap-3 px-4 py-2 hover:bg-accent/50 rounded-md transition-colors group'
+
+export const threadAvatarStyles =
+  'h-9 w-9 rounded-full bg-muted flex items-center justify-center text-sm font-medium overflow-hidden flex-shrink-0'
+
+export const threadContentStyles =
+  'flex-1 min-w-0'
+
+export const threadAuthorStyles =
+  'font-semibold text-sm'
+
+export const threadTimestampStyles =
+  'text-xs text-muted-foreground ml-2'
+
+export const threadBodyStyles =
+  'text-sm mt-0.5 whitespace-pre-wrap break-words'
+
+export const threadReactionsStyles =
+  'flex flex-wrap gap-1 mt-1'
+
+export const threadReplyIndicatorStyles =
+  'flex items-center gap-1 mt-1 text-xs text-primary cursor-pointer hover:underline'
+
+export const threadActionsStyles =
+  'flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity'
+
+export const threadAttachmentStyles =
+  'flex items-center gap-2 mt-1 p-2 rounded border text-xs bg-muted/50'
+
+export const threadEditedStyles =
+  'text-xs text-muted-foreground ml-1'

package/dist/thread-view/thread-view.ts

@@ -0,0 +1,176 @@
+import type { AccessibilityProps } from '../shared/index.ts'
+import { generateId } from '../shared/index.ts'
+
+export interface MessageReaction {
+  emoji: string
+  count: number
+  userReacted: boolean
+}
+
+export interface MessageAttachment {
+  id: string
+  name: string
+  url: string
+  type: string
+  size?: number
+}
+
+export interface MessageData {
+  /** Unique message ID */
+  id: string
+  /** Author display info */
+  author: {
+    id: string
+    name: string
+    avatarUrl?: string
+  }
+  /** Message content (can contain markdown) */
+  content: string
+  /** Message timestamp */
+  timestamp: Date
+  /** Reactions on this message */
+  reactions?: MessageReaction[]
+  /** Threaded replies */
+  replies?: MessageData[]
+  /** File attachments */
+  attachments?: MessageAttachment[]
+  /** Whether this message has been edited */
+  edited?: boolean
+}
+
+export interface ThreadViewProps {
+  /** Messages to display */
+  messages: MessageData[]
+  /** Callback when a reply is sent */
+  onReply?: (messageId: string, content: string) => void
+  /** Callback when a reaction is toggled */
+  onReact?: (messageId: string, emoji: string) => void
+  /** Current user ID (for highlighting own messages) */
+  currentUserId?: string
+}
+
+export interface ThreadViewState {
+  messages: MessageData[]
+  replyingTo: string | null
+}
+
+export interface ThreadViewAPI {
+  /** Current state */
+  state: ThreadViewState
+  /** Start replying to a message */
+  startReply(messageId: string): void
+  /** Cancel reply */
+  cancelReply(): void
+  /** Send a reply */
+  reply(messageId: string, content: string): void
+  /** Toggle a reaction on a message */
+  react(messageId: string, emoji: string): void
+  /** Format a timestamp for display */
+  formatTimestamp(date: Date): string
+  /** Format relative time (e.g., "2 minutes ago") */
+  formatRelativeTime(date: Date): string
+  /** ARIA props for the thread container */
+  ariaProps: Partial<AccessibilityProps> & Record<string, unknown>
+  /** Get ARIA props for a message */
+  getMessageAriaProps(message: MessageData): Record<string, unknown>
+  /** Get ARIA props for a reply button */
+  getReplyButtonAriaProps(messageId: string): Record<string, unknown>
+  /** Generated IDs */
+  ids: {
+    thread: string
+    label: string
+  }
+}
+
+export function formatTimestamp(date: Date): string {
+  const hours = date.getHours()
+  const minutes = date.getMinutes()
+  const ampm = hours >= 12 ? 'PM' : 'AM'
+  const displayHours = hours % 12 || 12
+  const displayMinutes = minutes < 10 ? `0${minutes}` : `${minutes}`
+  return `${displayHours}:${displayMinutes} ${ampm}`
+}
+
+export function formatRelativeTime(date: Date, now?: Date): string {
+  const reference = now ?? new Date()
+  const diffMs = reference.getTime() - date.getTime()
+  const diffSeconds = Math.floor(diffMs / 1000)
+  const diffMinutes = Math.floor(diffSeconds / 60)
+  const diffHours = Math.floor(diffMinutes / 60)
+  const diffDays = Math.floor(diffHours / 24)
+
+  if (diffSeconds < 60) return 'just now'
+  if (diffMinutes < 60) return `${diffMinutes} minute${diffMinutes === 1 ? '' : 's'} ago`
+  if (diffHours < 24) return `${diffHours} hour${diffHours === 1 ? '' : 's'} ago`
+  if (diffDays < 7) return `${diffDays} day${diffDays === 1 ? '' : 's'} ago`
+
+  return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })
+}
+
+export function createThreadView(props: ThreadViewProps): ThreadViewAPI {
+  const { messages, onReply, onReact, currentUserId } = props
+
+  let replyingTo: string | null = null
+
+  const threadId = generateId('rfr-thread')
+  const labelId = generateId('rfr-thread-label')
+
+  function startReply(messageId: string): void {
+    replyingTo = messageId
+  }
+
+  function cancelReply(): void {
+    replyingTo = null
+  }
+
+  function reply(messageId: string, content: string): void {
+    onReply?.(messageId, content)
+    replyingTo = null
+  }
+
+  function react(messageId: string, emoji: string): void {
+    onReact?.(messageId, emoji)
+  }
+
+  const ariaProps: Partial<AccessibilityProps> & Record<string, unknown> = {
+    role: 'log',
+    'aria-label': 'Message thread',
+    'aria-live': 'polite',
+    id: threadId,
+  }
+
+  function getMessageAriaProps(message: MessageData): Record<string, unknown> {
+    const isOwn = currentUserId && message.author.id === currentUserId
+    return {
+      role: 'article',
+      'aria-label': `Message from ${message.author.name}${isOwn ? ' (you)' : ''} at ${formatTimestamp(message.timestamp)}`,
+    }
+  }
+
+  function getReplyButtonAriaProps(_messageId: string): Record<string, unknown> {
+    return {
+      role: 'button',
+      'aria-label': `Reply to message`,
+    }
+  }
+
+  return {
+    state: {
+      messages,
+      get replyingTo() { return replyingTo },
+    },
+    startReply,
+    cancelReply,
+    reply,
+    react,
+    formatTimestamp,
+    formatRelativeTime,
+    ariaProps,
+    getMessageAriaProps,
+    getReplyButtonAriaProps,
+    ids: {
+      thread: threadId,
+      label: labelId,
+    },
+  }
+}

package/dist/toast/index.ts

@@ -0,0 +1,13 @@
+export {
+  createToast,
+  createToastManager,
+  getToastIcon,
+  type ToastVariant,
+  type ToastProps,
+  type ToastAPI,
+  type ToastState,
+  type ToastEntry,
+  type ToastManagerAPI,
+} from './toast.js'
+
+export { toastVariants } from './toast.styles.js'