@refraction-ui/astro 0.4.2 → 0.4.4

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'

package/dist/diff-viewer/diff-viewer.styles.ts

@@ -0,0 +1,124 @@
+import { cva } from '../shared/index.ts'
+import type { TokenContract } from '../shared/index.ts'
+
+export const diffViewerTokens: TokenContract = {
+  name: 'diff-viewer',
+  tokens: {
+    bg: { variable: '--rfr-diff-bg', fallback: 'hsl(var(--background))' },
+    fg: { variable: '--rfr-diff-fg', fallback: 'hsl(var(--foreground))' },
+    sidebarBg: { variable: '--rfr-diff-sidebar-bg', fallback: 'hsl(var(--muted))' },
+    headerBg: { variable: '--rfr-diff-header-bg', fallback: 'hsl(var(--muted))' },
+    border: { variable: '--rfr-diff-border', fallback: 'hsl(var(--border))' },
+    addBg: { variable: '--rfr-diff-add-bg', fallback: 'rgba(46, 160, 67, 0.15)' },
+    delBg: { variable: '--rfr-diff-del-bg', fallback: 'rgba(248, 81, 73, 0.15)' },
+    addFg: { variable: '--rfr-diff-add-fg', fallback: '#3fb950' },
+    delFg: { variable: '--rfr-diff-del-fg', fallback: '#f85149' },
+    statusbar: { variable: '--rfr-diff-statusbar', fallback: 'hsl(var(--primary))' },
+    statusbarFg: { variable: '--rfr-diff-statusbar-fg', fallback: 'hsl(var(--primary-foreground))' },
+  },
+}
+
+export const diffViewerVariants = cva({
+  base: 'flex flex-col overflow-hidden font-sans text-sm',
+  variants: {
+    theme: {
+      light: 'bg-white text-gray-900',
+      dark: 'bg-gray-950 text-gray-100',
+    },
+    fullscreen: {
+      'true': 'h-screen',
+      'false': '',
+    },
+  },
+  defaultVariants: {
+    theme: 'dark',
+    fullscreen: 'true',
+  },
+})
+
+export const sidebarVariants = cva({
+  base: 'border-r overflow-auto flex-shrink-0',
+  variants: {
+    theme: {
+      light: 'bg-gray-50 border-gray-200',
+      dark: 'bg-gray-900 border-gray-800',
+    },
+  },
+  defaultVariants: {
+    theme: 'dark',
+  },
+})
+
+export const sidebarItemVariants = cva({
+  base: 'px-2.5 py-1 cursor-pointer text-xs font-mono transition-colors',
+  variants: {
+    active: {
+      'true': 'border-l-2 border-blue-500',
+      'false': 'border-l-2 border-transparent',
+    },
+    theme: {
+      light: '',
+      dark: '',
+    },
+  },
+  compoundVariants: [
+    { active: 'true', theme: 'dark', class: 'bg-gray-800 text-gray-100' },
+    { active: 'false', theme: 'dark', class: 'text-gray-400 hover:bg-gray-800/50' },
+    { active: 'true', theme: 'light', class: 'bg-blue-50 text-gray-900' },
+    { active: 'false', theme: 'light', class: 'text-gray-600 hover:bg-gray-100' },
+  ],
+  defaultVariants: {
+    active: 'false',
+    theme: 'dark',
+  },
+})
+
+export const tabBarVariants = cva({
+  base: 'flex items-center border-b overflow-auto flex-shrink-0',
+  variants: {
+    theme: {
+      light: 'bg-gray-50 border-gray-200',
+      dark: 'bg-gray-900 border-gray-800',
+    },
+  },
+  defaultVariants: {
+    theme: 'dark',
+  },
+})
+
+export const tabVariants = cva({
+  base: 'px-3 h-[35px] flex items-center gap-1 cursor-pointer text-xs font-mono border-r shrink-0',
+  variants: {
+    active: {
+      'true': '',
+      'false': '',
+    },
+    theme: {
+      light: 'border-gray-200',
+      dark: 'border-gray-800',
+    },
+  },
+  compoundVariants: [
+    { active: 'true', theme: 'dark', class: 'bg-gray-950 text-gray-100 border-b-gray-950 -mb-px' },
+    { active: 'false', theme: 'dark', class: 'text-gray-400' },
+    { active: 'true', theme: 'light', class: 'bg-white text-gray-900 border-b-white -mb-px' },
+    { active: 'false', theme: 'light', class: 'text-gray-500' },
+  ],
+  defaultVariants: {
+    active: 'false',
+    theme: 'dark',
+  },
+})
+
+export const statusBarVariants = cva({
+  base: 'h-[22px] flex items-center px-2.5 gap-3 text-[11px] font-mono flex-shrink-0',
+  variants: {
+    theme: {
+      light: 'bg-blue-600 text-white',
+      dark: 'bg-blue-700 text-white',
+    },
+  },
+  defaultVariants: {
+    theme: 'dark',
+  },
+})

package/dist/diff-viewer/diff-viewer.ts

@@ -0,0 +1,255 @@
+import type { AccessibilityProps } from '../shared/index.ts'
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export type DiffViewerTheme = 'light' | 'dark'
+export type DiffViewMode = 'side-by-side' | 'inline'
+
+export type DiffFileStatus = 'added' | 'modified' | 'deleted' | 'renamed'
+
+export interface DiffFile {
+  /** File path */
+  path: string
+  /** Change status */
+  status: DiffFileStatus
+  /** Lines added */
+  additions: number
+  /** Lines deleted */
+  deletions: number
+  /** Unified diff content for this file */
+  diff?: string
+  /** Old path for renamed files */
+  oldPath?: string
+}
+
+export interface DiffViewerProps {
+  /** Files in this diff */
+  files?: DiffFile[]
+  /** Index of the active file */
+  activeFileIndex?: number
+  /** View mode */
+  viewMode?: DiffViewMode
+  /** Theme */
+  theme?: DiffViewerTheme
+  /** Language for syntax highlighting */
+  language?: string
+  /** Whether the sidebar is visible */
+  sidebarOpen?: boolean
+  /** Callback when active file changes */
+  onFileSelect?: (index: number) => void
+  /** Callback when view mode changes */
+  onViewModeChange?: (mode: DiffViewMode) => void
+  /** Callback when sidebar toggled */
+  onSidebarToggle?: () => void
+}
+
+export interface DiffViewerState {
+  activeFileIndex: number
+  viewMode: DiffViewMode
+  theme: DiffViewerTheme
+  language: string
+  sidebarOpen: boolean
+  files: DiffFile[]
+}
+
+export interface DiffViewerAPI {
+  /** Current viewer state */
+  state: DiffViewerState
+  /** ARIA attributes for the root element */
+  ariaProps: Partial<AccessibilityProps> & Record<string, unknown>
+  /** Data attributes for CSS styling hooks */
+  dataAttributes: Record<string, string>
+  /** Select a file by index */
+  selectFile: (index: number) => void
+  /** Move to next file */
+  nextFile: () => void
+  /** Move to previous file */
+  prevFile: () => void
+  /** Toggle view mode */
+  toggleViewMode: () => void
+  /** Toggle sidebar */
+  toggleSidebar: () => void
+  /** Get language label for a file path */
+  getLanguageForFile: (path: string) => string
+  /** Get human-readable file status icon */
+  getFileStatusIcon: (status: DiffFileStatus) => string
+  /** Get total additions across all files */
+  totalAdditions: () => number
+  /** Get total deletions across all files */
+  totalDeletions: () => number
+}
+
+// ---------------------------------------------------------------------------
+// Language detection
+// ---------------------------------------------------------------------------
+
+const extToLanguage: Record<string, string> = {
+  ts: 'typescript',
+  tsx: 'typescript',
+  js: 'javascript',
+  jsx: 'javascript',
+  py: 'python',
+  go: 'go',
+  rs: 'rust',
+  rb: 'ruby',
+  java: 'java',
+  swift: 'swift',
+  kt: 'kotlin',
+  dart: 'dart',
+  php: 'php',
+  lua: 'lua',
+  r: 'r',
+  scala: 'scala',
+  json: 'json',
+  yaml: 'yaml',
+  yml: 'yaml',
+  md: 'markdown',
+  html: 'html',
+  css: 'css',
+  scss: 'scss',
+  sql: 'sql',
+  sh: 'shell',
+  bash: 'shell',
+  zsh: 'shell',
+  xml: 'xml',
+  toml: 'toml',
+  proto: 'protobuf',
+  dockerfile: 'dockerfile',
+  cpp: 'cpp',
+  c: 'c',
+}
+
+function getLanguageForFile(filePath: string): string {
+  const ext = filePath.split('.').pop()?.toLowerCase() || ''
+  const basename = filePath.split('/').pop()?.toLowerCase() || ''
+  if (basename === 'dockerfile') return 'dockerfile'
+  return extToLanguage[ext] || 'plaintext'
+}
+
+// ---------------------------------------------------------------------------
+// Status icons
+// ---------------------------------------------------------------------------
+
+const statusIcons: Record<DiffFileStatus, string> = {
+  added: '\u{1F7E2}',    // green circle
+  modified: '\u{1F7E1}', // yellow circle
+  deleted: '\u{1F534}',  // red circle
+  renamed: '\u{1F535}',  // blue circle
+}
+
+// ---------------------------------------------------------------------------
+// Factory
+// ---------------------------------------------------------------------------
+
+/**
+ * Create a headless diff viewer API.
+ *
+ * Manages file selection, view mode, sidebar state, and produces ARIA/data
+ * attributes. The actual rendering (Monaco DiffEditor, custom renderer, etc.)
+ * is handled by framework-specific wrappers.
+ */
+export function createDiffViewer(props: DiffViewerProps = {}): DiffViewerAPI {
+  const {
+    files = [],
+    activeFileIndex = 0,
+    viewMode = 'side-by-side',
+    theme = 'dark',
+    language,
+    sidebarOpen = true,
+    onFileSelect,
+    onViewModeChange,
+    onSidebarToggle,
+  } = props
+
+  let currentIndex = Math.min(activeFileIndex, Math.max(0, files.length - 1))
+  let currentViewMode = viewMode
+  let currentSidebarOpen = sidebarOpen
+
+  const state: DiffViewerState = {
+    activeFileIndex: currentIndex,
+    viewMode: currentViewMode,
+    theme,
+    language: language || (files[currentIndex] ? getLanguageForFile(files[currentIndex].path) : 'plaintext'),
+    sidebarOpen: currentSidebarOpen,
+    files,
+  }
+
+  const ariaProps: Partial<AccessibilityProps> & Record<string, unknown> = {
+    role: 'region',
+    'aria-label': 'Diff viewer',
+  }
+
+  const dataAttributes: Record<string, string> = {
+    'data-view-mode': currentViewMode,
+    'data-theme': theme,
+    'data-file-count': String(files.length),
+  }
+
+  if (!currentSidebarOpen) {
+    dataAttributes['data-sidebar-collapsed'] = ''
+  }
+
+  function selectFile(index: number) {
+    if (index >= 0 && index < files.length) {
+      currentIndex = index
+      state.activeFileIndex = index
+      state.language = language || getLanguageForFile(files[index].path)
+      onFileSelect?.(index)
+    }
+  }
+
+  function nextFile() {
+    if (currentIndex < files.length - 1) {
+      selectFile(currentIndex + 1)
+    }
+  }
+
+  function prevFile() {
+    if (currentIndex > 0) {
+      selectFile(currentIndex - 1)
+    }
+  }
+
+  function toggleViewMode() {
+    currentViewMode = currentViewMode === 'side-by-side' ? 'inline' : 'side-by-side'
+    state.viewMode = currentViewMode
+    dataAttributes['data-view-mode'] = currentViewMode
+    onViewModeChange?.(currentViewMode)
+  }
+
+  function toggleSidebar() {
+    currentSidebarOpen = !currentSidebarOpen
+    state.sidebarOpen = currentSidebarOpen
+    if (currentSidebarOpen) {
+      delete dataAttributes['data-sidebar-collapsed']
+    } else {
+      dataAttributes['data-sidebar-collapsed'] = ''
+    }
+    onSidebarToggle?.()
+  }
+
+  function totalAdditions(): number {
+    return files.reduce((sum, f) => sum + f.additions, 0)
+  }
+
+  function totalDeletions(): number {
+    return files.reduce((sum, f) => sum + f.deletions, 0)
+  }
+
+  return {
+    state,
+    ariaProps,
+    dataAttributes,
+    selectFile,
+    nextFile,
+    prevFile,
+    toggleViewMode,
+    toggleSidebar,
+    getLanguageForFile,
+    getFileStatusIcon: (status: DiffFileStatus) => statusIcons[status] || '\u{26AA}',
+    totalAdditions,
+    totalDeletions,
+  }
+}

package/dist/diff-viewer/index.ts

@@ -0,0 +1,20 @@
+export {
+  createDiffViewer,
+  type DiffViewerProps,
+  type DiffViewerAPI,
+  type DiffViewerState,
+  type DiffViewerTheme,
+  type DiffViewMode,
+  type DiffFile,
+  type DiffFileStatus,
+} from './diff-viewer.js'
+
+export {
+  diffViewerTokens,
+  diffViewerVariants,
+  sidebarVariants,
+  sidebarItemVariants,
+  tabBarVariants,
+  tabVariants,
+  statusBarVariants,
+} from './diff-viewer.styles.js'

package/dist/dropdown-menu/dropdown-menu.styles.ts

@@ -0,0 +1,9 @@
+import { cva } from '../shared/index.ts'
+
+export const menuContentVariants = cva({
+  base: 'z-50 rounded-md border bg-popover shadow-md',
+})
+
+export const menuItemVariants = cva({
+  base: 'relative flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+})