@refraction-ui/astro 0.3.1 → 0.4.2

package/dist/astro-rich-editor/RichEditor.astro

@@ -0,0 +1,260 @@
+---
+/**
+ * RichEditor — rich text editor component using a contenteditable div + toolbar.
+ *
+ * Uses the headless @refraction-ui/rich-editor core for document model reference.
+ * Renders a contenteditable div with a formatting toolbar, keyboard shortcuts,
+ * and optional character/word count display.
+ */
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** Initial content (plain text or HTML) */
+  content?: string
+  /** Placeholder text shown when empty */
+  placeholder?: string
+  /** Read-only mode */
+  readOnly?: boolean
+  /** Maximum character count */
+  maxLength?: number
+  /** Show toolbar (default true) */
+  showToolbar?: boolean
+  /** Show character/word count (default false) */
+  showCount?: boolean
+  /** Hidden input name for form submission */
+  name?: string
+}
+
+const {
+  content = '',
+  placeholder = 'Start typing...',
+  readOnly = false,
+  maxLength,
+  showToolbar = true,
+  showCount = false,
+  name,
+  class: className,
+  ...props
+} = Astro.props
+
+const configJSON = JSON.stringify({
+  placeholder,
+  readOnly,
+  maxLength,
+  showCount,
+})
+---
+
+<div
+  class={cn(
+    'rfr-rich-editor rounded-md border bg-background overflow-hidden',
+    readOnly && 'opacity-75',
+    className,
+  )}
+  data-rfr-rich-editor
+  data-rfr-rich-editor-config={configJSON}
+  {...props}
+>
+  {showToolbar && !readOnly && (
+    <div
+      class="flex flex-wrap items-center gap-1 border-b px-2 py-1 bg-muted/50"
+      role="toolbar"
+      aria-label="Formatting options"
+      data-rfr-editor-toolbar
+    >
+      <button type="button" class="inline-flex items-center justify-center rounded px-2 py-1 text-sm font-bold hover:bg-muted" data-rfr-editor-action="bold" aria-label="Bold" title="Bold (Ctrl+B)">B</button>
+      <button type="button" class="inline-flex items-center justify-center rounded px-2 py-1 text-sm italic hover:bg-muted" data-rfr-editor-action="italic" aria-label="Italic" title="Italic (Ctrl+I)"><em>I</em></button>
+      <button type="button" class="inline-flex items-center justify-center rounded px-2 py-1 text-sm line-through hover:bg-muted" data-rfr-editor-action="strikethrough" aria-label="Strikethrough" title="Strikethrough"><s>S</s></button>
+      <button type="button" class="inline-flex items-center justify-center rounded px-2 py-1 text-sm font-mono hover:bg-muted" data-rfr-editor-action="code" aria-label="Code" title="Inline code">&lt;/&gt;</button>
+      <span class="mx-1 h-4 w-px bg-border" aria-hidden="true"></span>
+      <button type="button" class="inline-flex items-center justify-center rounded px-2 py-1 text-sm font-bold hover:bg-muted" data-rfr-editor-action="heading" aria-label="Heading" title="Heading">H</button>
+      <button type="button" class="inline-flex items-center justify-center rounded px-2 py-1 text-sm hover:bg-muted" data-rfr-editor-action="blockquote" aria-label="Blockquote" title="Blockquote">&ldquo;</button>
+      <button type="button" class="inline-flex items-center justify-center rounded px-2 py-1 text-sm hover:bg-muted" data-rfr-editor-action="list-item" aria-label="List" title="Bullet list">&bull;</button>
+      <span class="mx-1 h-4 w-px bg-border" aria-hidden="true"></span>
+      <button type="button" class="inline-flex items-center justify-center rounded px-2 py-1 text-sm hover:bg-muted" data-rfr-editor-action="undo" aria-label="Undo" title="Undo (Ctrl+Z)">&#8630;</button>
+      <button type="button" class="inline-flex items-center justify-center rounded px-2 py-1 text-sm hover:bg-muted" data-rfr-editor-action="redo" aria-label="Redo" title="Redo (Ctrl+Y)">&#8631;</button>
+    </div>
+  )}
+
+  <div
+    class={cn(
+      'min-h-[8rem] px-3 py-2 text-sm prose prose-sm dark:prose-invert max-w-none focus:outline-none',
+      readOnly && 'cursor-default',
+    )}
+    contenteditable={!readOnly ? 'true' : 'false'}
+    role="textbox"
+    aria-multiline="true"
+    aria-placeholder={placeholder}
+    aria-readonly={readOnly ? 'true' : undefined}
+    data-rfr-editor-content
+    data-placeholder={placeholder}
+  >
+    <Fragment set:html={content} />
+  </div>
+
+  {showCount && (
+    <div
+      class="flex justify-end gap-3 border-t px-3 py-1 text-xs text-muted-foreground"
+      data-rfr-editor-count
+    >
+      <span data-rfr-editor-char-count>0 chars</span>
+      <span data-rfr-editor-word-count>0 words</span>
+    </div>
+  )}
+
+  {name && <input type="hidden" name={name} value={content} data-rfr-editor-input />}
+</div>
+
+<style>
+  [data-rfr-editor-content]:empty::before {
+    content: attr(data-placeholder);
+    color: var(--muted-foreground, #9ca3af);
+    pointer-events: none;
+  }
+  [data-rfr-editor-content] {
+    white-space: pre-wrap;
+    word-wrap: break-word;
+  }
+</style>
+
+<script>
+  document.querySelectorAll('[data-rfr-rich-editor]').forEach((editor) => {
+    const contentEl = editor.querySelector('[data-rfr-editor-content]') as HTMLElement
+    const toolbar = editor.querySelector('[data-rfr-editor-toolbar]')
+    const hiddenInput = editor.querySelector('[data-rfr-editor-input]') as HTMLInputElement | null
+    const charCountEl = editor.querySelector('[data-rfr-editor-char-count]')
+    const wordCountEl = editor.querySelector('[data-rfr-editor-word-count]')
+
+    if (!contentEl) return
+
+    let config: Record<string, unknown> = {}
+    try { config = JSON.parse(editor.getAttribute('data-rfr-rich-editor-config') || '{}') } catch { /* */ }
+
+    function updateCounts() {
+      if (!charCountEl && !wordCountEl) return
+      const text = contentEl.innerText || ''
+      if (charCountEl) charCountEl.textContent = `${text.length} chars`
+      if (wordCountEl) {
+        const trimmed = text.trim()
+        const wc = trimmed === '' ? 0 : trimmed.split(/\s+/).length
+        wordCountEl.textContent = `${wc} words`
+      }
+    }
+
+    function enforceMaxLength() {
+      const maxLen = config.maxLength as number | undefined
+      if (!maxLen) return
+      const text = contentEl.innerText || ''
+      if (text.length > maxLen) {
+        contentEl.innerText = text.slice(0, maxLen)
+        const range = document.createRange()
+        const sel = window.getSelection()
+        range.selectNodeContents(contentEl)
+        range.collapse(false)
+        sel?.removeAllRanges()
+        sel?.addRange(range)
+      }
+    }
+
+    function syncHiddenInput() {
+      if (hiddenInput) hiddenInput.value = contentEl.innerHTML
+    }
+
+    contentEl.addEventListener('input', () => {
+      enforceMaxLength()
+      updateCounts()
+      syncHiddenInput()
+      editor.dispatchEvent(new CustomEvent('rfr:editor:change', {
+        detail: { html: contentEl.innerHTML, text: contentEl.innerText || '' },
+        bubbles: true,
+      }))
+    })
+
+    // Toolbar actions
+    toolbar?.addEventListener('click', (e) => {
+      const btn = (e.target as HTMLElement).closest('[data-rfr-editor-action]')
+      if (!btn) return
+
+      const action = btn.getAttribute('data-rfr-editor-action')
+      contentEl.focus()
+
+      switch (action) {
+        case 'bold':
+          document.execCommand('bold')
+          break
+        case 'italic':
+          document.execCommand('italic')
+          break
+        case 'strikethrough':
+          document.execCommand('strikeThrough')
+          break
+        case 'code': {
+          const sel = window.getSelection()
+          if (sel && sel.rangeCount > 0 && !sel.isCollapsed) {
+            const range = sel.getRangeAt(0)
+            const code = document.createElement('code')
+            code.className = 'bg-muted px-1 rounded text-sm font-mono'
+            try { range.surroundContents(code) } catch { /* cross-node selection */ }
+          } else {
+            document.execCommand('formatBlock', false, 'pre')
+          }
+          break
+        }
+        case 'heading':
+          document.execCommand('formatBlock', false, 'h2')
+          break
+        case 'blockquote':
+          document.execCommand('formatBlock', false, 'blockquote')
+          break
+        case 'list-item':
+          document.execCommand('insertUnorderedList')
+          break
+        case 'undo':
+          document.execCommand('undo')
+          break
+        case 'redo':
+          document.execCommand('redo')
+          break
+      }
+
+      updateCounts()
+      syncHiddenInput()
+    })
+
+    // Keyboard shortcuts
+    contentEl.addEventListener('keydown', (e) => {
+      if (config.readOnly) {
+        e.preventDefault()
+        return
+      }
+      const mod = e.ctrlKey || e.metaKey
+      if (mod && e.key === 'b') {
+        e.preventDefault()
+        document.execCommand('bold')
+      } else if (mod && e.key === 'i') {
+        e.preventDefault()
+        document.execCommand('italic')
+      } else if (mod && e.key === 'z') {
+        e.preventDefault()
+        if (e.shiftKey) {
+          document.execCommand('redo')
+        } else {
+          document.execCommand('undo')
+        }
+      } else if (mod && e.key === 'y') {
+        e.preventDefault()
+        document.execCommand('redo')
+      }
+    })
+
+    // Expose API on element for external scripts
+    ;(editor as any).__rfr_editor = {
+      getHTML: () => contentEl.innerHTML,
+      getText: () => contentEl.innerText || '',
+      setContent: (html: string) => { contentEl.innerHTML = html; updateCounts(); syncHiddenInput() },
+      clear: () => { contentEl.innerHTML = ''; updateCounts(); syncHiddenInput() },
+    }
+
+    updateCounts()
+  })
+</script>

package/dist/astro-rich-editor/index.ts

@@ -0,0 +1,25 @@
+export { default as RichEditor } from './RichEditor.astro'
+
+// Re-export core types and utilities
+export type {
+  BlockType,
+  HeadingLevel,
+  MarkType,
+  Mark,
+  Block,
+  Document,
+  EditorConfig,
+  EditorAPI,
+  EditorState,
+} from '@refraction-ui/rich-editor'
+
+export {
+  createEditor,
+  createDocument,
+  createBlock,
+  toMarkdown,
+  fromMarkdown,
+  toHTML,
+  fromHTML,
+  toPlainText,
+} from '@refraction-ui/rich-editor'

package/dist/astro-search-bar/SearchBar.astro

@@ -0,0 +1,140 @@
+---
+import {
+  createSearchBar,
+  searchBarVariants,
+} from '@refraction-ui/search-bar'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  placeholder?: string
+  loading?: boolean
+  debounceMs?: number
+}
+
+const {
+  placeholder = 'Search...',
+  loading = false,
+  debounceMs = 300,
+  class: className,
+  ...props
+} = Astro.props
+
+const api = createSearchBar({ placeholder, loading, debounceMs })
+---
+
+<div
+  data-rfr-search-bar
+  data-rfr-search-debounce={String(debounceMs)}
+  class={cn(searchBarVariants(), className)}
+  {...props}
+>
+  <span class="rfr-search-icon" aria-hidden="true">&#x1F50D;</span>
+  <input
+    role={api.inputProps.role}
+    aria-expanded={api.inputProps['aria-expanded']}
+    aria-controls={api.inputProps['aria-controls']}
+    aria-autocomplete={api.inputProps['aria-autocomplete']}
+    placeholder={placeholder}
+    class="rfr-search-input flex-1 bg-transparent outline-none"
+    data-rfr-search-input
+  />
+  <span
+    class="rfr-search-spinner hidden"
+    aria-label="Loading"
+    data-rfr-search-spinner
+  >&#x23F3;</span>
+  <button
+    type="button"
+    class="rfr-search-clear hidden"
+    aria-label="Clear search"
+    data-rfr-search-clear
+  >&#x2715;</button>
+  <slot />
+</div>
+
+<script>
+  document.querySelectorAll<HTMLElement>('[data-rfr-search-bar]').forEach((root) => {
+    const input = root.querySelector<HTMLInputElement>('[data-rfr-search-input]')
+    const clearBtn = root.querySelector<HTMLButtonElement>('[data-rfr-search-clear]')
+    const spinner = root.querySelector<HTMLElement>('[data-rfr-search-spinner]')
+    if (!input || !clearBtn || !spinner) return
+
+    const debounceMs = parseInt(root.getAttribute('data-rfr-search-debounce') || '300', 10)
+    let debounceTimer: ReturnType<typeof setTimeout> | undefined
+
+    function updateUI(value: string, isSearching: boolean) {
+      if (isSearching) {
+        spinner!.classList.remove('hidden')
+        clearBtn!.classList.add('hidden')
+      } else if (value.length > 0) {
+        spinner!.classList.add('hidden')
+        clearBtn!.classList.remove('hidden')
+      } else {
+        spinner!.classList.add('hidden')
+        clearBtn!.classList.add('hidden')
+      }
+    }
+
+    function dispatchSearch(value: string) {
+      root.dispatchEvent(
+        new CustomEvent('rfr-search', { detail: { value }, bubbles: true })
+      )
+    }
+
+    function dispatchValueChange(value: string) {
+      root.dispatchEvent(
+        new CustomEvent('rfr-search-change', { detail: { value }, bubbles: true })
+      )
+    }
+
+    function scheduleSearch(value: string) {
+      if (debounceTimer !== undefined) {
+        clearTimeout(debounceTimer)
+      }
+
+      if (value.length > 0) {
+        updateUI(value, true)
+        debounceTimer = setTimeout(() => {
+          dispatchSearch(value)
+          updateUI(value, false)
+        }, debounceMs)
+      } else {
+        updateUI(value, false)
+      }
+    }
+
+    function clear() {
+      if (debounceTimer !== undefined) {
+        clearTimeout(debounceTimer)
+      }
+      input!.value = ''
+      updateUI('', false)
+      dispatchValueChange('')
+      input!.focus()
+    }
+
+    input.addEventListener('input', () => {
+      const value = input.value
+      dispatchValueChange(value)
+      scheduleSearch(value)
+    })
+
+    input.addEventListener('keydown', (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        e.preventDefault()
+        clear()
+      } else if (e.key === 'Enter') {
+        e.preventDefault()
+        if (debounceTimer !== undefined) {
+          clearTimeout(debounceTimer)
+        }
+        dispatchSearch(input.value)
+        updateUI(input.value, false)
+      }
+    })
+
+    clearBtn.addEventListener('click', () => {
+      clear()
+    })
+  })
+</script>

package/dist/astro-search-bar/SearchResultItem.astro

@@ -0,0 +1,16 @@
+---
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {}
+
+const { class: className, ...props } = Astro.props
+---
+
+<li
+  role="option"
+  data-rfr-search-result-item
+  class={cn('px-3 py-2 cursor-pointer hover:bg-accent', className)}
+  {...props}
+>
+  <slot />
+</li>

package/dist/astro-search-bar/SearchResults.astro

@@ -0,0 +1,17 @@
+---
+import { searchResultVariants } from '@refraction-ui/search-bar'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {}
+
+const { class: className, ...props } = Astro.props
+---
+
+<ul
+  role="listbox"
+  data-rfr-search-results
+  class={cn(searchResultVariants(), className)}
+  {...props}
+>
+  <slot />
+</ul>

package/dist/astro-search-bar/index.ts

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

package/dist/astro-select/Select.astro

@@ -0,0 +1,165 @@
+---
+import { createSelect } from '@refraction-ui/select'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  value?: string
+  placeholder?: string
+  disabled?: boolean
+  name?: string
+}
+
+const { value, placeholder = 'Select an option', disabled = false, name, class: className, ...props } = Astro.props
+const api = createSelect({ value, disabled, placeholder })
+---
+
+<div
+  data-rfr-select
+  data-rfr-select-value={value || ''}
+  data-rfr-select-disabled={disabled ? '' : undefined}
+  data-rfr-select-trigger-id={api.ids.trigger}
+  data-rfr-select-content-id={api.ids.content}
+  class={className}
+  style="position: relative;"
+  {...props}
+>
+  <slot />
+  {name && <input type="hidden" name={name} value={value || ''} data-rfr-select-input />}
+</div>
+
+<script>
+  document.querySelectorAll<HTMLElement>('[data-rfr-select]').forEach((root) => {
+    const triggerId = root.getAttribute('data-rfr-select-trigger-id') || ''
+    const contentId = root.getAttribute('data-rfr-select-content-id') || ''
+    let isOpen = false
+
+    function getDisabled() {
+      return root.hasAttribute('data-rfr-select-disabled')
+    }
+
+    function setOpen(open: boolean) {
+      if (getDisabled()) return
+      isOpen = open
+      const trigger = root.querySelector('[data-rfr-select-trigger]') as HTMLElement | null
+      const content = root.querySelector('[data-rfr-select-content]') as HTMLElement | null
+
+      if (trigger) {
+        trigger.setAttribute('aria-expanded', String(isOpen))
+        trigger.setAttribute('data-state', isOpen ? 'open' : 'closed')
+      }
+      if (content) {
+        content.setAttribute('data-state', isOpen ? 'open' : 'closed')
+        content.hidden = !isOpen
+      }
+    }
+
+    function selectValue(value: string, label?: string) {
+      root.setAttribute('data-rfr-select-value', value)
+
+      // Update trigger display text
+      const trigger = root.querySelector('[data-rfr-select-trigger]') as HTMLElement | null
+      if (trigger) {
+        const textEl = trigger.querySelector('[data-rfr-select-value-text]') as HTMLElement | null
+        if (textEl) textEl.textContent = label || value
+      }
+
+      // Update item states
+      root.querySelectorAll<HTMLElement>('[data-rfr-select-item]').forEach((item) => {
+        const itemValue = item.getAttribute('data-rfr-select-item-value') || ''
+        const isSelected = itemValue === value
+        item.setAttribute('aria-selected', String(isSelected))
+        if (isSelected) {
+          item.setAttribute('data-state', 'checked')
+        } else {
+          item.removeAttribute('data-state')
+        }
+        // Show/hide check icon
+        const check = item.querySelector('[data-rfr-select-check]') as HTMLElement | null
+        if (check) {
+          check.style.display = isSelected ? '' : 'none'
+        }
+      })
+
+      // Update hidden input
+      const input = root.querySelector('[data-rfr-select-input]') as HTMLInputElement | null
+      if (input) input.value = value
+
+      root.dispatchEvent(new CustomEvent('change', { detail: { value } }))
+    }
+
+    // Toggle on trigger click
+    root.addEventListener('click', (e) => {
+      const trigger = (e.target as HTMLElement).closest('[data-rfr-select-trigger]')
+      if (trigger) {
+        e.stopPropagation()
+        setOpen(!isOpen)
+        return
+      }
+
+      const item = (e.target as HTMLElement).closest<HTMLElement>('[data-rfr-select-item]')
+      if (item && !item.hasAttribute('data-disabled')) {
+        const value = item.getAttribute('data-rfr-select-item-value') || ''
+        const label = item.textContent?.trim() || value
+        selectValue(value, label)
+        setOpen(false)
+        // Return focus to trigger
+        const triggerEl = root.querySelector('[data-rfr-select-trigger]') as HTMLElement | null
+        if (triggerEl) triggerEl.focus()
+      }
+    })
+
+    // Keyboard handling
+    root.addEventListener('keydown', (e) => {
+      const trigger = (e.target as HTMLElement).closest('[data-rfr-select-trigger]')
+      if (trigger) {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault()
+          setOpen(!isOpen)
+        } else if (e.key === 'Escape') {
+          setOpen(false)
+        } else if ((e.key === 'ArrowDown' || e.key === 'ArrowUp') && !isOpen) {
+          e.preventDefault()
+          setOpen(true)
+        }
+        return
+      }
+
+      // Keyboard nav within content
+      const item = (e.target as HTMLElement).closest<HTMLElement>('[data-rfr-select-item]')
+      if (item) {
+        const items = Array.from(root.querySelectorAll<HTMLElement>('[data-rfr-select-item]:not([data-disabled])'))
+        const currentIndex = items.indexOf(item)
+
+        if (e.key === 'ArrowDown') {
+          e.preventDefault()
+          const next = items[(currentIndex + 1) % items.length]
+          if (next) next.focus()
+        } else if (e.key === 'ArrowUp') {
+          e.preventDefault()
+          const prev = items[(currentIndex - 1 + items.length) % items.length]
+          if (prev) prev.focus()
+        } else if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault()
+          if (!item.hasAttribute('data-disabled')) {
+            const value = item.getAttribute('data-rfr-select-item-value') || ''
+            const label = item.textContent?.trim() || value
+            selectValue(value, label)
+            setOpen(false)
+            const triggerEl = root.querySelector('[data-rfr-select-trigger]') as HTMLElement | null
+            if (triggerEl) triggerEl.focus()
+          }
+        } else if (e.key === 'Escape') {
+          setOpen(false)
+          const triggerEl = root.querySelector('[data-rfr-select-trigger]') as HTMLElement | null
+          if (triggerEl) triggerEl.focus()
+        }
+      }
+    })
+
+    // Close on outside click
+    document.addEventListener('click', (e) => {
+      if (isOpen && !root.contains(e.target as Node)) {
+        setOpen(false)
+      }
+    })
+  })
+</script>

package/dist/astro-select/SelectContent.astro

@@ -0,0 +1,19 @@
+---
+import { selectContentVariants } from '@refraction-ui/select'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {}
+
+const { class: className, ...props } = Astro.props
+---
+
+<div
+  role="listbox"
+  data-state="closed"
+  data-rfr-select-content
+  hidden
+  class={cn(selectContentVariants(), className)}
+  {...props}
+>
+  <slot />
+</div>

package/dist/astro-select/SelectItem.astro

@@ -0,0 +1,42 @@
+---
+import { selectItemVariants } from '@refraction-ui/select'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  value: string
+  disabled?: boolean
+  selected?: boolean
+}
+
+const { value, disabled = false, selected = false, class: className, ...props } = Astro.props
+---
+
+<div
+  role="option"
+  aria-selected={selected}
+  aria-disabled={disabled || undefined}
+  data-state={selected ? 'checked' : undefined}
+  data-disabled={disabled ? '' : undefined}
+  tabindex={disabled ? undefined : 0}
+  data-rfr-select-item
+  data-rfr-select-item-value={value}
+  class={cn(selectItemVariants({ selected: selected ? 'true' : 'false' }), className)}
+  {...props}
+>
+  <span data-rfr-select-check style={selected ? '' : 'display: none'} class="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+    <svg
+      class="h-4 w-4"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M20 6L9 17l-5-5" />
+    </svg>
+  </span>
+  <slot />
+</div>