@refraction-ui/astro 0.4.0 → 0.4.2

package/dist/astro-install-prompt/InstallPrompt.astro

@@ -0,0 +1,115 @@
+---
+import { installPromptVariants } from '@refraction-ui/install-prompt'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** Delay in ms before showing. Default: 3000 */
+  delay?: number
+  /** Storage key for dismissed state. Default: 'rfr-install-dismissed' */
+  storageKey?: string
+  /** Install button label. Default: 'Install' */
+  installLabel?: string
+  /** Dismiss button label. Default: 'Dismiss' */
+  dismissLabel?: string
+  /** Message text. Default: 'Install this app for a better experience' */
+  message?: string
+}
+
+const {
+  delay = 3000,
+  storageKey = 'rfr-install-dismissed',
+  installLabel = 'Install',
+  dismissLabel = 'Dismiss',
+  message = 'Install this app for a better experience',
+  class: className,
+  ...props
+} = Astro.props
+
+const classes = cn(installPromptVariants(), className)
+---
+
+<div
+  data-rfr-install-prompt
+  data-rfr-ip-delay={delay}
+  data-rfr-ip-storage-key={storageKey}
+  class={classes}
+  role="banner"
+  aria-label="Install application"
+  hidden
+  {...props}
+>
+  <span data-rfr-ip-message>{message}</span>
+  <div>
+    <button type="button" data-rfr-ip-install>
+      {installLabel}
+    </button>
+    <button type="button" data-rfr-ip-dismiss>
+      {dismissLabel}
+    </button>
+  </div>
+</div>
+
+<script>
+  function initInstallPrompts() {
+    document.querySelectorAll<HTMLElement>('[data-rfr-install-prompt]').forEach((el) => {
+      if (el.hasAttribute('data-rfr-ip-init')) return
+      el.setAttribute('data-rfr-ip-init', '')
+
+      const delay = Number(el.getAttribute('data-rfr-ip-delay') || 3000)
+      const storageKey = el.getAttribute('data-rfr-ip-storage-key') || 'rfr-install-dismissed'
+
+      // Check if already dismissed
+      try {
+        if (localStorage.getItem(storageKey) === 'true') return
+      } catch { /* ignore */ }
+
+      let promptEvent: { prompt(): void } | null = null
+
+      const handleBeforeInstall = (e: Event) => {
+        e.preventDefault()
+        promptEvent = e as unknown as { prompt(): void }
+      }
+
+      window.addEventListener('beforeinstallprompt', handleBeforeInstall)
+
+      const timer = setTimeout(() => {
+        // Check dismissed again in case it changed
+        try {
+          if (localStorage.getItem(storageKey) === 'true') return
+        } catch { /* ignore */ }
+
+        if (promptEvent) {
+          el.hidden = false
+          el.dispatchEvent(new CustomEvent('rfr-install-prompt-show', { bubbles: true }))
+        }
+      }, delay)
+
+      // Install button
+      const installBtn = el.querySelector<HTMLElement>('[data-rfr-ip-install]')
+      installBtn?.addEventListener('click', () => {
+        promptEvent?.prompt()
+        el.hidden = true
+        el.dispatchEvent(new CustomEvent('rfr-install-prompt-install', { bubbles: true }))
+      })
+
+      // Dismiss button
+      const dismissBtn = el.querySelector<HTMLElement>('[data-rfr-ip-dismiss]')
+      dismissBtn?.addEventListener('click', () => {
+        el.hidden = true
+        try {
+          localStorage.setItem(storageKey, 'true')
+        } catch { /* ignore */ }
+        el.dispatchEvent(new CustomEvent('rfr-install-prompt-dismiss', { bubbles: true }))
+      })
+
+      // Cleanup
+      el.addEventListener('astro:before-swap', () => {
+        window.removeEventListener('beforeinstallprompt', handleBeforeInstall)
+        clearTimeout(timer)
+      }, { once: true })
+    })
+  }
+
+  initInstallPrompts()
+  document.addEventListener('astro:after-swap', initInstallPrompts)
+</script>

package/dist/astro-install-prompt/index.ts

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

package/dist/astro-keyboard-shortcut/KeyboardShortcut.astro

@@ -0,0 +1,83 @@
+---
+interface Props {
+  /** Key combination (e.g., ['Ctrl', 'K'] or ['Meta', 'Shift', 'P']) */
+  keys: string[]
+  /** Whether the shortcut is enabled. Default: true */
+  enabled?: boolean
+  /** Prevent default browser behavior. Default: true */
+  preventDefault?: boolean
+}
+
+const {
+  keys,
+  enabled = true,
+  preventDefault = true,
+} = Astro.props
+---
+
+<div
+  data-rfr-keyboard-shortcut
+  data-rfr-ks-keys={JSON.stringify(keys)}
+  data-rfr-ks-enabled={enabled}
+  data-rfr-ks-prevent-default={preventDefault}
+  hidden
+  aria-hidden="true"
+></div>
+
+<script>
+  function initKeyboardShortcuts() {
+    const MODIFIER_KEYS = new Set(['Ctrl', 'Control', 'Alt', 'Shift', 'Meta', 'Cmd', 'Command'])
+
+    function normalizeKey(key: string): string {
+      if (key === 'Command' || key === 'Cmd') return 'Meta'
+      if (key === 'Control') return 'Ctrl'
+      return key
+    }
+
+    document.querySelectorAll<HTMLElement>('[data-rfr-keyboard-shortcut]').forEach((el) => {
+      if (el.hasAttribute('data-rfr-ks-init')) return
+      el.setAttribute('data-rfr-ks-init', '')
+
+      const keys: string[] = JSON.parse(el.getAttribute('data-rfr-ks-keys') || '[]')
+      const enabled = el.getAttribute('data-rfr-ks-enabled') !== 'false'
+      const preventDefault = el.getAttribute('data-rfr-ks-prevent-default') !== 'false'
+
+      if (!enabled || keys.length === 0) return
+
+      const normalizedKeys = keys.map(normalizeKey)
+      const modifiers = normalizedKeys.filter((k) => MODIFIER_KEYS.has(k))
+      const regularKeys = normalizedKeys.filter((k) => !MODIFIER_KEYS.has(k))
+
+      function handleKeyDown(e: KeyboardEvent) {
+        const ctrlRequired = modifiers.includes('Ctrl')
+        const altRequired = modifiers.includes('Alt')
+        const shiftRequired = modifiers.includes('Shift')
+        const metaRequired = modifiers.includes('Meta')
+
+        const ctrlMatch = ctrlRequired ? e.ctrlKey : !e.ctrlKey
+        const altMatch = altRequired ? e.altKey : !e.altKey
+        const shiftMatch = shiftRequired ? e.shiftKey : !e.shiftKey
+        const metaMatch = metaRequired ? e.metaKey : !e.metaKey
+
+        if (!ctrlMatch || !altMatch || !shiftMatch || !metaMatch) return
+
+        if (regularKeys.length > 0) {
+          const eventKey = e.key.length === 1 ? e.key.toUpperCase() : e.key
+          const targetKey = regularKeys[0].length === 1 ? regularKeys[0].toUpperCase() : regularKeys[0]
+          if (eventKey !== targetKey) return
+        }
+
+        if (preventDefault) {
+          e.preventDefault()
+        }
+
+        el.dispatchEvent(new CustomEvent('rfr-shortcut-trigger', { detail: { keys }, bubbles: true }))
+      }
+
+      document.addEventListener('keydown', handleKeyDown)
+    })
+  }
+
+  initKeyboardShortcuts()
+  document.addEventListener('astro:after-swap', initKeyboardShortcuts)
+</script>

package/dist/astro-keyboard-shortcut/ShortcutBadge.astro

@@ -0,0 +1,41 @@
+---
+import {
+  createKeyboardShortcut,
+  formatShortcut,
+  shortcutBadgeStyles,
+  shortcutKeyStyles,
+  shortcutSeparatorStyles,
+} from '@refraction-ui/keyboard-shortcut'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** Key combination to display */
+  keys: string[]
+  /** Use platform-aware display (Mac symbols). Default: true */
+  platform?: boolean
+}
+
+const { keys, platform = true, class: className, ...props } = Astro.props
+
+const api = createKeyboardShortcut({ keys, onTrigger: () => {}, enabled: false })
+const displayKeys = platform ? api.platformDisplay : api.display
+const isMacDisplay = platform && displayKeys !== api.display
+---
+
+<kbd
+  aria-hidden="true"
+  role="presentation"
+  class={cn(shortcutBadgeStyles, className)}
+  {...props}
+>
+  {isMacDisplay ? (
+    <span>{displayKeys}</span>
+  ) : (
+    keys.map((key, i) => (
+      <>
+        {i > 0 && <span class={shortcutSeparatorStyles}>+</span>}
+        <span class={shortcutKeyStyles}>{formatShortcut([key], false)}</span>
+      </>
+    ))
+  )}
+</kbd>

package/dist/astro-keyboard-shortcut/index.ts

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

package/dist/astro-language-selector/LanguageSelector.astro

@@ -0,0 +1,247 @@
+---
+import {
+  createLanguageSelector,
+  selectorVariants,
+  optionVariants,
+  type LanguageOption,
+} from '@refraction-ui/language-selector'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  value?: string | string[]
+  options: LanguageOption[]
+  multiple?: boolean
+  placeholder?: string
+}
+
+const {
+  value: controlledValue,
+  options,
+  multiple = false,
+  placeholder = 'Select language...',
+  class: className,
+  ...props
+} = Astro.props
+
+const initialValues = Array.isArray(controlledValue)
+  ? controlledValue
+  : controlledValue
+    ? [controlledValue]
+    : []
+
+const api = createLanguageSelector({
+  value: multiple ? initialValues : initialValues[0],
+  options,
+  multiple,
+})
+
+const displayLabel = initialValues.length > 0
+  ? options
+      .filter((o) => initialValues.includes(o.value))
+      .map((o) => o.label)
+      .join(', ')
+  : placeholder
+
+// Group options
+const groups = new Map<string, LanguageOption[]>()
+const ungrouped: LanguageOption[] = []
+for (const opt of options) {
+  if (opt.group) {
+    const list = groups.get(opt.group) ?? []
+    list.push(opt)
+    groups.set(opt.group, list)
+  } else {
+    ungrouped.push(opt)
+  }
+}
+---
+
+<div
+  class={cn('rfr-language-selector relative inline-block', className)}
+  data-rfr-language-selector
+  data-rfr-lang-options={JSON.stringify(options)}
+  data-rfr-lang-value={JSON.stringify(initialValues)}
+  data-rfr-lang-multiple={String(multiple)}
+  data-rfr-lang-placeholder={placeholder}
+  {...props}
+>
+  <!-- Trigger button -->
+  <button
+    type="button"
+    role={api.triggerProps.role}
+    aria-expanded="false"
+    aria-controls={api.triggerProps['aria-controls']}
+    aria-haspopup={api.triggerProps['aria-haspopup']}
+    class={selectorVariants()}
+    data-rfr-lang-trigger
+  >
+    <span data-rfr-lang-label>{displayLabel}</span>
+    <span aria-hidden="true" class="ml-2">&#x25BE;</span>
+  </button>
+
+  <!-- Dropdown -->
+  <ul
+    role={api.contentProps.role}
+    id={api.contentProps.id}
+    class="absolute top-full left-0 w-full mt-1 rounded-md border bg-popover text-popover-foreground shadow-md z-50 overflow-auto max-h-60"
+    style="display:none"
+    data-rfr-lang-dropdown
+    {...(multiple ? { 'aria-multiselectable': 'true' } : {})}
+  >
+    {/* Grouped options */}
+    {[...groups.entries()].map(([group, opts]) => (
+      <li role="presentation">
+        <div class="px-3 py-1 text-xs font-semibold text-muted-foreground uppercase">
+          {group}
+        </div>
+        <ul role="group" aria-label={group}>
+          {opts.map((opt) => {
+            const optProps = api.getOptionProps(opt.value)
+            const isSelected = initialValues.includes(opt.value)
+            return (
+              <li
+                role={optProps.role}
+                aria-selected={optProps['aria-selected']}
+                data-value={opt.value}
+                class={optionVariants({ selected: isSelected ? 'true' : 'false' })}
+                data-rfr-lang-option
+              >
+                {isSelected && <span aria-hidden="true">&#x2713;</span>}
+                <span>{opt.label}</span>
+              </li>
+            )
+          })}
+        </ul>
+      </li>
+    ))}
+
+    {/* Ungrouped options */}
+    {ungrouped.map((opt) => {
+      const optProps = api.getOptionProps(opt.value)
+      const isSelected = initialValues.includes(opt.value)
+      return (
+        <li
+          role={optProps.role}
+          aria-selected={optProps['aria-selected']}
+          data-value={opt.value}
+          class={optionVariants({ selected: isSelected ? 'true' : 'false' })}
+          data-rfr-lang-option
+        >
+          {isSelected && <span aria-hidden="true">&#x2713;</span>}
+          <span>{opt.label}</span>
+        </li>
+      )
+    })}
+  </ul>
+</div>
+
+<script>
+  document.querySelectorAll<HTMLElement>('[data-rfr-language-selector]').forEach((root) => {
+    const allOptions: Array<{ value: string; label: string; group?: string }> = JSON.parse(
+      root.getAttribute('data-rfr-lang-options') || '[]',
+    )
+    const multiple = root.getAttribute('data-rfr-lang-multiple') === 'true'
+    const placeholder = root.getAttribute('data-rfr-lang-placeholder') || 'Select language...'
+
+    const trigger = root.querySelector<HTMLButtonElement>('[data-rfr-lang-trigger]')!
+    const dropdown = root.querySelector<HTMLElement>('[data-rfr-lang-dropdown]')!
+    const label = root.querySelector<HTMLElement>('[data-rfr-lang-label]')!
+    const optionEls = root.querySelectorAll<HTMLElement>('[data-rfr-lang-option]')
+
+    let isOpen = false
+    let selectedValues: string[] = JSON.parse(root.getAttribute('data-rfr-lang-value') || '[]')
+
+    function setOpen(open: boolean) {
+      isOpen = open
+      dropdown.style.display = isOpen ? '' : 'none'
+      trigger.setAttribute('aria-expanded', String(isOpen))
+    }
+
+    function updateLabel() {
+      if (selectedValues.length > 0) {
+        label.textContent = allOptions
+          .filter((o) => selectedValues.includes(o.value))
+          .map((o) => o.label)
+          .join(', ')
+      } else {
+        label.textContent = placeholder
+      }
+    }
+
+    function updateOptionStates() {
+      optionEls.forEach((optEl) => {
+        const val = optEl.getAttribute('data-value') || ''
+        const isSel = selectedValues.includes(val)
+        optEl.setAttribute('aria-selected', String(isSel))
+
+        // Toggle selected styling
+        if (isSel) {
+          optEl.classList.add('bg-accent/50', 'font-medium')
+        } else {
+          optEl.classList.remove('bg-accent/50', 'font-medium')
+        }
+
+        // Toggle checkmark
+        let checkmark = optEl.querySelector('[aria-hidden="true"]')
+        if (isSel && !checkmark) {
+          checkmark = document.createElement('span')
+          checkmark.setAttribute('aria-hidden', 'true')
+          checkmark.textContent = '\u2713'
+          optEl.insertBefore(checkmark, optEl.firstChild)
+        } else if (!isSel && checkmark) {
+          checkmark.remove()
+        }
+      })
+    }
+
+    function toggle(value: string) {
+      if (multiple) {
+        const index = selectedValues.indexOf(value)
+        if (index >= 0) {
+          selectedValues.splice(index, 1)
+        } else {
+          selectedValues.push(value)
+        }
+      } else {
+        selectedValues = [value]
+        setOpen(false)
+      }
+
+      root.setAttribute('data-rfr-lang-value', JSON.stringify(selectedValues))
+      updateLabel()
+      updateOptionStates()
+
+      const emittedValue = multiple ? [...selectedValues] : selectedValues[0] || ''
+      root.dispatchEvent(new CustomEvent('change', { detail: { value: emittedValue }, bubbles: true }))
+    }
+
+    trigger.addEventListener('click', () => setOpen(!isOpen))
+
+    optionEls.forEach((optEl) => {
+      optEl.addEventListener('click', () => {
+        const value = optEl.getAttribute('data-value') || ''
+        toggle(value)
+      })
+    })
+
+    trigger.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape') {
+        setOpen(false)
+      } else if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault()
+        setOpen(!isOpen)
+      } else if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+        if (!isOpen) {
+          setOpen(true)
+        }
+      }
+    })
+
+    // Click outside to close
+    document.addEventListener('mousedown', (e) => {
+      if (isOpen && !root.contains(e.target as Node)) {
+        setOpen(false)
+      }
+    })
+  })
+</script>

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

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

package/dist/astro-link-card/LinkCard.astro

@@ -0,0 +1,17 @@
+---
+import { createLinkCard } from '@refraction-ui/link-card'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.AnchorHTMLAttributes {}
+
+const { class: className, ...props } = Astro.props
+const api = createLinkCard(props as any)
+---
+
+<a
+  class={cn(className)}
+  {...api.dataAttributes}
+  {...props}
+>
+  <slot />
+</a>

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

@@ -0,0 +1 @@
+export { default as LinkCard } from './LinkCard.astro'

package/dist/astro-markdown-renderer/MarkdownRenderer.astro

@@ -0,0 +1,62 @@
+---
+import {
+  createMarkdownRenderer,
+  proseVariants,
+  type MarkdownRendererProps as CoreProps,
+  type ComponentDef,
+} from '@refraction-ui/markdown-renderer'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  content: string
+  components?: Record<string, ComponentDef>
+  linkResolver?: (url: string) => string
+  size?: 'sm' | 'default' | 'lg'
+}
+
+const {
+  content,
+  components,
+  linkResolver,
+  size,
+  class: className,
+  ...props
+} = Astro.props
+
+const coreProps: CoreProps = { content, components, linkResolver }
+const api = createMarkdownRenderer(coreProps)
+const classes = cn(proseVariants({ size }), className)
+
+/**
+ * Sanitize HTML to prevent XSS attacks.
+ * Strips script tags, on* event attributes, and javascript: URLs.
+ */
+function sanitizeHtml(html: string): string {
+  let sanitized = html
+
+  // Remove <script> tags and their contents
+  sanitized = sanitized.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '')
+
+  // Remove standalone <script> opening/closing tags
+  sanitized = sanitized.replace(/<\/?script[^>]*>/gi, '')
+
+  // Remove on* event handler attributes
+  sanitized = sanitized.replace(/\s+on\w+\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+)/gi, '')
+
+  // Remove javascript: URLs from href and src attributes
+  sanitized = sanitized.replace(/(href|src)\s*=\s*["']?\s*javascript\s*:[^"'>]*/gi, '$1=""')
+
+  return sanitized
+}
+
+const sanitizedHtml = sanitizeHtml(api.html)
+---
+
+<div
+  class={classes}
+  role={api.ariaProps.role}
+  aria-label={api.ariaProps['aria-label']}
+  {...props}
+>
+  <Fragment set:html={sanitizedHtml} />
+</div>

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

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

package/dist/astro-mobile-nav/MobileNav.astro

@@ -0,0 +1,84 @@
+---
+import { mobileNavVariants } from '@refraction-ui/mobile-nav'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** Whether the nav starts open */
+  defaultOpen?: boolean
+}
+
+const { defaultOpen = false, class: className, ...props } = Astro.props
+---
+
+<nav
+  data-rfr-mobile-nav
+  data-rfr-mobile-nav-default-open={defaultOpen}
+  data-state={defaultOpen ? 'open' : 'closed'}
+  class={cn(mobileNavVariants(), className)}
+  {...props}
+>
+  <slot />
+</nav>
+
+<script>
+  function initMobileNavs() {
+    document.querySelectorAll<HTMLElement>('[data-rfr-mobile-nav]').forEach((root) => {
+      if (root.hasAttribute('data-rfr-mobile-nav-init')) return
+      root.setAttribute('data-rfr-mobile-nav-init', '')
+
+      const defaultOpen = root.getAttribute('data-rfr-mobile-nav-default-open') === 'true'
+      let isOpen = defaultOpen
+
+      const trigger = root.querySelector<HTMLElement>('[data-rfr-mobile-nav-trigger]')
+      const content = root.querySelector<HTMLElement>('[data-rfr-mobile-nav-content]')
+
+      function setState(open: boolean) {
+        isOpen = open
+        const state = open ? 'open' : 'closed'
+        root.setAttribute('data-state', state)
+        trigger?.setAttribute('aria-expanded', String(open))
+        content?.setAttribute('data-state', state)
+
+        // Update trigger icon
+        const openIcon = trigger?.querySelector('[data-rfr-mobile-nav-icon-open]')
+        const closedIcon = trigger?.querySelector('[data-rfr-mobile-nav-icon-closed]')
+        if (openIcon && closedIcon) {
+          if (open) {
+            openIcon.removeAttribute('hidden')
+            closedIcon.setAttribute('hidden', '')
+          } else {
+            openIcon.setAttribute('hidden', '')
+            closedIcon.removeAttribute('hidden')
+          }
+        }
+
+        root.dispatchEvent(new CustomEvent('rfr-mobile-nav-change', { detail: { open }, bubbles: true }))
+      }
+
+      // Trigger click
+      trigger?.addEventListener('click', () => setState(!isOpen))
+
+      // Escape key
+      root.addEventListener('keydown', (e) => {
+        if (!isOpen) return
+        if (e.key === 'Escape') {
+          e.preventDefault()
+          setState(false)
+          trigger?.focus()
+        }
+      })
+
+      // Set initial state for icon visibility
+      if (!defaultOpen) {
+        const openIcon = trigger?.querySelector('[data-rfr-mobile-nav-icon-open]')
+        openIcon?.setAttribute('hidden', '')
+      } else {
+        const closedIcon = trigger?.querySelector('[data-rfr-mobile-nav-icon-closed]')
+        closedIcon?.setAttribute('hidden', '')
+      }
+    })
+  }
+
+  initMobileNavs()
+  document.addEventListener('astro:after-swap', initMobileNavs)
+</script>

package/dist/astro-mobile-nav/MobileNavContent.astro

@@ -0,0 +1,29 @@
+---
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {}
+
+const { class: className, ...props } = Astro.props
+---
+
+<div
+  data-rfr-mobile-nav-content
+  data-state="closed"
+  role="menu"
+  class={cn('w-full overflow-hidden border-b bg-background transition-all duration-200', className)}
+  {...props}
+>
+  <slot />
+</div>
+
+<style>
+  [data-rfr-mobile-nav-content][data-state="open"] {
+    max-height: 100vh;
+    opacity: 1;
+  }
+  [data-rfr-mobile-nav-content][data-state="closed"] {
+    max-height: 0;
+    opacity: 0;
+    pointer-events: none;
+  }
+</style>