@refraction-ui/astro 0.4.0 → 0.4.4

package/dist/language-selector/language-selector.ts

@@ -0,0 +1,149 @@
+import type { KeyboardHandlerMap } from '../shared/index.ts'
+import { generateId, Keys, createKeyboardHandler } from '../shared/index.ts'
+
+export interface LanguageOption {
+  value: string
+  label: string
+  group?: string
+}
+
+export interface LanguageSelectorProps {
+  value?: string | string[]
+  onValueChange?: (value: string | string[]) => void
+  options: LanguageOption[]
+  multiple?: boolean
+}
+
+export interface LanguageSelectorAPI {
+  /** Current state */
+  state: { selectedValues: string[]; isOpen: boolean }
+  /** Props to spread on the trigger element */
+  triggerProps: {
+    'aria-expanded': boolean
+    'aria-controls': string
+    'aria-haspopup': 'listbox'
+    role: 'combobox'
+  }
+  /** Props to spread on the content/dropdown element */
+  contentProps: {
+    role: 'listbox'
+    id: string
+    'aria-multiselectable'?: boolean
+  }
+  /** Get props for an individual option */
+  getOptionProps: (value: string) => {
+    role: 'option'
+    'aria-selected': boolean
+    'data-value': string
+  }
+  /** Toggle an option's selection */
+  toggle: (value: string) => void
+  /** Open the dropdown */
+  open: () => void
+  /** Close the dropdown */
+  close: () => void
+  /** Keyboard handler map */
+  keyboardHandlers: KeyboardHandlerMap
+  /** Pre-built keyboard event handler */
+  handleKeyDown: (event: KeyboardEvent) => void
+}
+
+export function createLanguageSelector(props: LanguageSelectorProps): LanguageSelectorAPI {
+  const {
+    value: initialValue,
+    onValueChange,
+    options: _options,
+    multiple = false,
+  } = props
+
+  const contentId = generateId('rfr-lang-sel')
+
+  let selectedValues: string[] = Array.isArray(initialValue)
+    ? [...initialValue]
+    : initialValue
+      ? [initialValue]
+      : []
+  let isOpen = false
+
+  const state = { selectedValues: [...selectedValues], isOpen }
+
+  function setOpen(value: boolean) {
+    isOpen = value
+    state.isOpen = value
+  }
+
+  function toggle(value: string) {
+    if (multiple) {
+      const index = selectedValues.indexOf(value)
+      if (index >= 0) {
+        selectedValues.splice(index, 1)
+      } else {
+        selectedValues.push(value)
+      }
+      state.selectedValues = [...selectedValues]
+      onValueChange?.([...selectedValues])
+    } else {
+      selectedValues = [value]
+      state.selectedValues = [value]
+      onValueChange?.(value)
+      setOpen(false)
+    }
+  }
+
+  const triggerProps = {
+    'aria-expanded': isOpen,
+    'aria-controls': contentId,
+    'aria-haspopup': 'listbox' as const,
+    role: 'combobox' as const,
+  }
+
+  const contentProps: LanguageSelectorAPI['contentProps'] = {
+    role: 'listbox' as const,
+    id: contentId,
+    ...(multiple ? { 'aria-multiselectable': true } : {}),
+  }
+
+  function getOptionProps(value: string) {
+    return {
+      role: 'option' as const,
+      'aria-selected': selectedValues.includes(value),
+      'data-value': value,
+    }
+  }
+
+  const keyboardHandlers: KeyboardHandlerMap = {
+    [Keys.Escape]: () => {
+      setOpen(false)
+    },
+    [Keys.Enter]: () => {
+      setOpen(!isOpen)
+    },
+    [Keys.Space]: () => {
+      setOpen(!isOpen)
+    },
+    [Keys.ArrowDown]: () => {
+      if (!isOpen) {
+        setOpen(true)
+      }
+    },
+    [Keys.ArrowUp]: () => {
+      if (!isOpen) {
+        setOpen(true)
+      }
+    },
+  }
+
+  const handleKeyDown = createKeyboardHandler(keyboardHandlers)
+
+  return {
+    state,
+    triggerProps,
+    contentProps,
+    getOptionProps,
+    toggle,
+    open: () => setOpen(true),
+    close: () => setOpen(false),
+    keyboardHandlers,
+    handleKeyDown,
+  }
+}

package/dist/link-card/index.ts

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

package/dist/link-card/link-card.ts

@@ -0,0 +1,9 @@
+export interface LinkCardProps {
+  href?: string
+}
+
+export function createLinkCard(_props: LinkCardProps = {}) {
+  return {
+    dataAttributes: { 'data-slot': 'link-card' }
+  }
+}

package/dist/markdown-renderer/index.ts

@@ -0,0 +1,8 @@
+export {
+  createMarkdownRenderer,
+  type MarkdownRendererProps,
+  type MarkdownRendererAPI,
+  type ComponentDef,
+} from './markdown-renderer.js'
+
+export { proseVariants, markdownRendererTokens } from './markdown-renderer.styles.js'

package/dist/markdown-renderer/markdown-renderer.styles.ts

@@ -0,0 +1,31 @@
+import { cva } from '../shared/index.ts'
+import type { TokenContract } from '../shared/index.ts'
+
+export const markdownRendererTokens: TokenContract = {
+  name: 'markdown-renderer',
+  tokens: {
+    bg: { variable: '--rfr-markdown-bg', fallback: 'hsl(var(--background))' },
+    fg: { variable: '--rfr-markdown-fg', fallback: 'hsl(var(--foreground))' },
+    codeBg: { variable: '--rfr-markdown-code-bg', fallback: 'hsl(var(--muted))' },
+    linkColor: { variable: '--rfr-markdown-link', fallback: 'hsl(var(--primary))' },
+    borderColor: { variable: '--rfr-markdown-border', fallback: 'hsl(var(--border))' },
+  },
+}
+
+export const proseVariants = cva({
+  base: 'prose max-w-none text-foreground leading-relaxed',
+  variants: {
+    size: {
+      sm: 'prose-sm text-sm',
+      default: 'prose-base text-base',
+      lg: 'prose-lg text-lg',
+    },
+    theme: {
+      light: 'bg-white text-gray-900',
+      dark: 'bg-gray-900 text-gray-100',
+    },
+  },
+  defaultVariants: {
+    size: 'default',
+  },
+})

package/dist/markdown-renderer/markdown-renderer.ts

@@ -0,0 +1,251 @@
+import type { AccessibilityProps } from '../shared/index.ts'
+
+export interface ComponentDef {
+  type: string
+  pattern: RegExp
+  props: Record<string, string>
+}
+
+export interface MarkdownRendererProps {
+  content: string
+  components?: Record<string, ComponentDef>
+  linkResolver?: (url: string) => string
+}
+
+export interface MarkdownRendererAPI {
+  /** Rendered HTML string */
+  html: string
+  /** Extracted component slots from custom component definitions */
+  components: Array<{ name: string; props: Record<string, string> }>
+  /** ARIA attributes for the rendered content container */
+  ariaProps: Partial<AccessibilityProps>
+}
+
+/**
+ * Escape HTML entities to prevent injection in non-code contexts.
+ */
+function escapeHtml(text: string): string {
+  return text
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;')
+}
+
+/**
+ * Parse inline markdown elements: bold, italic, code, links.
+ */
+function parseInline(text: string, linkResolver?: (url: string) => string): string {
+  let result = escapeHtml(text)
+
+  // Inline code (backticks) — must come before bold/italic to avoid conflicts
+  result = result.replace(/`([^`]+)`/g, '<code>$1</code>')
+
+  // Bold (**text** or __text__)
+  result = result.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>')
+  result = result.replace(/__([^_]+)__/g, '<strong>$1</strong>')
+
+  // Italic (*text* or _text_)
+  result = result.replace(/\*([^*]+)\*/g, '<em>$1</em>')
+  result = result.replace(/_([^_]+)_/g, '<em>$1</em>')
+
+  // Links [text](url) — reject javascript: URLs for XSS safety
+  result = result.replace(/\[([^\]]+)\]\(([^)]+)\)/g, (_match, text, url) => {
+    if (/^\s*javascript\s*:/i.test(url)) {
+      return text
+    }
+    const resolvedUrl = linkResolver ? linkResolver(url) : url
+    return `<a href="${resolvedUrl}">${text}</a>`
+  })
+
+  return result
+}
+
+/**
+ * Parse a full markdown string into HTML.
+ * Handles: headings, bold, italic, links, code (inline & block),
+ * lists (unordered & ordered), blockquotes, horizontal rules.
+ */
+function parseMarkdown(content: string, linkResolver?: (url: string) => string): string {
+  const lines = content.split('\n')
+  const outputLines: string[] = []
+  let inCodeBlock = false
+  let codeBlockContent: string[] = []
+  let codeBlockLang = ''
+  let inList: 'ul' | 'ol' | null = null
+  let inBlockquote = false
+
+  function closeList() {
+    if (inList) {
+      outputLines.push(inList === 'ul' ? '</ul>' : '</ol>')
+      inList = null
+    }
+  }
+
+  function closeBlockquote() {
+    if (inBlockquote) {
+      outputLines.push('</blockquote>')
+      inBlockquote = false
+    }
+  }
+
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i]
+
+    // Code blocks (fenced with ```)
+    if (line.trimStart().startsWith('```')) {
+      if (inCodeBlock) {
+        // Closing code block
+        outputLines.push(`<pre><code${codeBlockLang ? ` class="language-${escapeHtml(codeBlockLang)}"` : ''}>${escapeHtml(codeBlockContent.join('\n'))}</code></pre>`)
+        codeBlockContent = []
+        codeBlockLang = ''
+        inCodeBlock = false
+      } else {
+        // Opening code block
+        closeList()
+        closeBlockquote()
+        inCodeBlock = true
+        codeBlockLang = line.trimStart().slice(3).trim()
+      }
+      continue
+    }
+
+    if (inCodeBlock) {
+      codeBlockContent.push(line)
+      continue
+    }
+
+    // Horizontal rule (--- or ___ or ***)
+    if (/^(\s*[-*_]\s*){3,}$/.test(line)) {
+      closeList()
+      closeBlockquote()
+      outputLines.push('<hr />')
+      continue
+    }
+
+    // Headings (# through ######)
+    const headingMatch = line.match(/^(#{1,6})\s+(.+)$/)
+    if (headingMatch) {
+      closeList()
+      closeBlockquote()
+      const level = headingMatch[1].length
+      const text = parseInline(headingMatch[2], linkResolver)
+      outputLines.push(`<h${level}>${text}</h${level}>`)
+      continue
+    }
+
+    // Blockquotes (> text)
+    const blockquoteMatch = line.match(/^>\s?(.*)$/)
+    if (blockquoteMatch) {
+      closeList()
+      if (!inBlockquote) {
+        inBlockquote = true
+        outputLines.push('<blockquote>')
+      }
+      const text = blockquoteMatch[1].trim()
+      if (text) {
+        outputLines.push(`<p>${parseInline(text, linkResolver)}</p>`)
+      }
+      continue
+    } else if (inBlockquote) {
+      closeBlockquote()
+    }
+
+    // Unordered list items (- or * at start)
+    const ulMatch = line.match(/^[\s]*[-*+]\s+(.+)$/)
+    if (ulMatch) {
+      closeBlockquote()
+      if (inList !== 'ul') {
+        closeList()
+        inList = 'ul'
+        outputLines.push('<ul>')
+      }
+      outputLines.push(`<li>${parseInline(ulMatch[1], linkResolver)}</li>`)
+      continue
+    }
+
+    // Ordered list items (1. 2. etc.)
+    const olMatch = line.match(/^[\s]*\d+\.\s+(.+)$/)
+    if (olMatch) {
+      closeBlockquote()
+      if (inList !== 'ol') {
+        closeList()
+        inList = 'ol'
+        outputLines.push('<ol>')
+      }
+      outputLines.push(`<li>${parseInline(olMatch[1], linkResolver)}</li>`)
+      continue
+    }
+
+    // If we were in a list and hit a non-list line, close the list
+    if (inList) {
+      closeList()
+    }
+
+    // Empty line
+    if (line.trim() === '') {
+      continue
+    }
+
+    // Regular paragraph
+    outputLines.push(`<p>${parseInline(line, linkResolver)}</p>`)
+  }
+
+  // Close any open blocks
+  if (inCodeBlock) {
+    outputLines.push(`<pre><code${codeBlockLang ? ` class="language-${escapeHtml(codeBlockLang)}"` : ''}>${escapeHtml(codeBlockContent.join('\n'))}</code></pre>`)
+  }
+  closeList()
+  closeBlockquote()
+
+  return outputLines.join('\n')
+}
+
+/**
+ * Extract custom component slots from content based on component definitions.
+ */
+function extractComponents(
+  content: string,
+  components?: Record<string, ComponentDef>,
+): Array<{ name: string; props: Record<string, string> }> {
+  if (!components) return []
+
+  const extracted: Array<{ name: string; props: Record<string, string> }> = []
+
+  for (const [name, def] of Object.entries(components)) {
+    const matches = Array.from(content.matchAll(def.pattern))
+    matches.forEach(() => {
+      extracted.push({
+        name,
+        props: { ...def.props },
+      })
+    })
+  }
+
+  return extracted
+}
+
+/**
+ * Create a headless markdown renderer.
+ *
+ * Uses the headless pattern — returns an API object with rendered HTML,
+ * extracted component slots, and ARIA props for the container.
+ */
+export function createMarkdownRenderer(props: MarkdownRendererProps): MarkdownRendererAPI {
+  const { content, components, linkResolver } = props
+
+  const html = parseMarkdown(content, linkResolver)
+  const extractedComponents = extractComponents(content, components)
+
+  const ariaProps: Partial<AccessibilityProps> = {
+    role: 'document',
+    'aria-label': 'Rendered markdown content',
+  }
+
+  return {
+    html,
+    components: extractedComponents,
+    ariaProps,
+  }
+}

package/dist/mobile-nav/index.ts

@@ -0,0 +1,14 @@
+export {
+  createMobileNav,
+  type MobileNavProps,
+  type MobileNavState,
+  type MobileNavAPI,
+} from './mobile-nav.js'
+
+export {
+  mobileNavVariants,
+  mobileNavContentVariants,
+  mobileNavTriggerVariants,
+  mobileNavLinkVariants,
+  mobileNavTokens,
+} from './mobile-nav.styles.js'

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

@@ -0,0 +1,39 @@
+import { cva } from '../shared/index.ts'
+import type { TokenContract } from '../shared/index.ts'
+
+export const mobileNavTokens: TokenContract = {
+  name: 'mobile-nav',
+  tokens: {
+    bg: { variable: '--rfr-mobile-nav-bg', fallback: 'hsl(var(--background))' },
+    fg: { variable: '--rfr-mobile-nav-fg', fallback: 'hsl(var(--foreground))' },
+    border: { variable: '--rfr-mobile-nav-border', fallback: 'hsl(var(--border))' },
+  },
+}
+
+export const mobileNavVariants = cva({
+  base: 'relative',
+  variants: {},
+})
+
+export const mobileNavContentVariants = cva({
+  base: 'w-full overflow-hidden border-b bg-background transition-all duration-200',
+  variants: {
+    state: {
+      open: 'max-h-screen opacity-100 animate-in slide-in-from-top',
+      closed: 'max-h-0 opacity-0 pointer-events-none animate-out slide-out-to-top',
+    },
+  },
+  defaultVariants: {
+    state: 'closed',
+  },
+})
+
+export const mobileNavTriggerVariants = cva({
+  base: 'inline-flex items-center justify-center rounded-md p-2 transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
+  variants: {},
+})
+
+export const mobileNavLinkVariants = cva({
+  base: 'block w-full px-4 py-2 text-sm transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2',
+  variants: {},
+})

package/dist/mobile-nav/mobile-nav.ts

@@ -0,0 +1,74 @@
+import type { AccessibilityProps, KeyboardHandlerMap } from '../shared/index.ts'
+import { Keys, generateId } from '../shared/index.ts'
+
+export interface MobileNavProps {
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+  id?: string
+}
+
+export interface MobileNavState {
+  open: boolean
+}
+
+export interface MobileNavAPI {
+  /** Current state */
+  state: MobileNavState
+  /** ARIA and interaction props for the trigger button */
+  triggerProps: Partial<AccessibilityProps> & Record<string, string | boolean | undefined>
+  /** ARIA and data attributes for the content panel */
+  contentProps: Partial<AccessibilityProps> & Record<string, string | boolean | undefined>
+  /** Toggle open state */
+  toggle: () => void
+  /** Open the nav */
+  open: () => void
+  /** Close the nav */
+  close: () => void
+  /** Keyboard handlers (Escape closes) */
+  keyboardHandlers: KeyboardHandlerMap
+}
+
+export function createMobileNav(props: MobileNavProps = {}): MobileNavAPI {
+  const isOpen = props.open ?? false
+  const id = props.id ?? generateId('rfr-mobile-nav')
+  const contentId = `${id}-content`
+
+  const state: MobileNavState = {
+    open: isOpen,
+  }
+
+  const triggerProps: MobileNavAPI['triggerProps'] = {
+    'aria-expanded': isOpen,
+    'aria-controls': contentId,
+    'aria-label': 'Toggle menu',
+  }
+
+  const contentProps: MobileNavAPI['contentProps'] = {
+    id: contentId,
+    role: 'menu',
+    'data-state': isOpen ? 'open' : 'closed',
+  }
+
+  function setOpen(value: boolean) {
+    state.open = value
+    props.onOpenChange?.(value)
+  }
+
+  const toggle = () => setOpen(!state.open)
+  const open = () => setOpen(true)
+  const close = () => setOpen(false)
+
+  const keyboardHandlers: KeyboardHandlerMap = {
+    [Keys.Escape]: () => close(),
+  }
+
+  return {
+    state,
+    triggerProps,
+    contentProps,
+    toggle,
+    open,
+    close,
+    keyboardHandlers,
+  }
+}

package/dist/navbar/index.ts

@@ -0,0 +1,9 @@
+export {
+  createNavbar,
+  type NavLink,
+  type NavbarVariant,
+  type NavbarProps,
+  type NavbarAPI,
+} from './navbar.js'
+
+export { navbarVariants, navLinkVariants } from './navbar.styles.js'

package/dist/navbar/navbar.styles.ts

@@ -0,0 +1,29 @@
+import { cva } from '../shared/index.ts'
+
+export const navbarVariants = cva({
+  base: 'sticky top-0 z-40 w-full border-b',
+  variants: {
+    variant: {
+      solid: 'bg-background',
+      blur: 'bg-background/80 backdrop-blur-md',
+      gradient: 'bg-gradient-to-b from-background to-background/80 backdrop-blur-sm',
+      transparent: 'bg-transparent border-transparent',
+    },
+  },
+  defaultVariants: {
+    variant: 'blur',
+  },
+})
+
+export const navLinkVariants = cva({
+  base: 'text-sm font-medium transition-colors hover:text-foreground',
+  variants: {
+    active: {
+      true: 'text-foreground',
+      false: 'text-muted-foreground',
+    },
+  },
+  defaultVariants: {
+    active: 'false',
+  },
+})

package/dist/navbar/navbar.ts

@@ -0,0 +1,39 @@
+export interface NavLink {
+  label: string
+  href: string
+  icon?: string
+}
+
+export type NavbarVariant = 'solid' | 'blur' | 'gradient' | 'transparent'
+
+export interface NavbarProps {
+  links?: NavLink[]
+  currentPath?: string
+  variant?: NavbarVariant
+}
+
+export interface NavbarAPI {
+  ariaProps: Record<string, string>
+  isActive: (href: string) => boolean
+  linkAriaProps: (href: string) => Record<string, string>
+}
+
+export function createNavbar(props: NavbarProps = {}): NavbarAPI {
+  const { currentPath = '/' } = props
+
+  function isActive(href: string): boolean {
+    if (href === '/') return currentPath === '/'
+    return currentPath.startsWith(href)
+  }
+
+  function linkAriaProps(href: string): Record<string, string> {
+    const active = isActive(href)
+    return active ? { 'aria-current': 'page' } : {}
+  }
+
+  return {
+    ariaProps: { role: 'navigation', 'aria-label': 'Main navigation' },
+    isActive,
+    linkAriaProps,
+  }
+}

package/dist/otp-input/index.ts

@@ -0,0 +1,13 @@
+export {
+  createOtpInput,
+  type OtpInputProps,
+  type OtpInputAPI,
+  type OtpSlotProps,
+  type OtpInputType,
+} from './otp-input.js'
+
+export {
+  otpInputContainerVariants,
+  otpInputSlotVariants,
+  otpInputTokens,
+} from './otp-input.styles.js'