@refraction-ui/astro 0.3.1 → 0.4.2

package/dist/astro-toast/Toast.astro

@@ -0,0 +1,49 @@
+---
+import { toastVariants, type ToastVariant } from '@refraction-ui/toast'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** Visual variant */
+  variant?: ToastVariant
+  /** Auto-dismiss duration in ms (default: 3000). Set to 0 to disable. */
+  duration?: number
+  /** Whether to show a dismiss button */
+  dismissible?: boolean
+  /** Toast message text (alternative to using the default slot) */
+  message?: string
+}
+
+const {
+  variant = 'default',
+  duration = 3000,
+  dismissible = true,
+  message,
+  class: className,
+  ...props
+} = Astro.props
+---
+
+<div
+  data-rfr-toast
+  data-rfr-toast-variant={variant}
+  data-rfr-toast-duration={duration}
+  role="alert"
+  aria-live="assertive"
+  aria-atomic="true"
+  class={cn(toastVariants({ variant }), className)}
+  {...props}
+>
+  <div class="flex-1">
+    {message ? message : <slot />}
+  </div>
+  {dismissible && (
+    <button
+      type="button"
+      data-rfr-toast-dismiss
+      class="shrink-0"
+      aria-label="Dismiss"
+    >
+      &times;
+    </button>
+  )}
+</div>

package/dist/astro-toast/Toaster.astro

@@ -0,0 +1,142 @@
+---
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {}
+
+const { class: className, ...props } = Astro.props
+---
+
+<div
+  data-rfr-toaster
+  class={cn('fixed bottom-4 right-4 z-50 flex flex-col gap-2 w-full max-w-sm pointer-events-none', className)}
+  {...props}
+>
+  <slot />
+</div>
+
+<script>
+  function initToaster() {
+    // Initialize all individual toasts (auto-dismiss, pause on hover)
+    document.querySelectorAll<HTMLElement>('[data-rfr-toast]').forEach((toast) => {
+      if (toast.hasAttribute('data-rfr-toast-init')) return
+      toast.setAttribute('data-rfr-toast-init', '')
+
+      const duration = parseInt(toast.getAttribute('data-rfr-toast-duration') || '3000', 10)
+      let timerId: ReturnType<typeof setTimeout> | null = null
+      let remaining = duration
+      let startedAt = 0
+
+      function dismiss() {
+        clearTimer()
+        toast.style.transition = 'opacity 200ms, transform 200ms'
+        toast.style.opacity = '0'
+        toast.style.transform = 'translateX(100%)'
+        setTimeout(() => {
+          toast.remove()
+        }, 200)
+        toast.dispatchEvent(new CustomEvent('rfr-toast-dismiss', { bubbles: true }))
+      }
+
+      function clearTimer() {
+        if (timerId !== null) {
+          clearTimeout(timerId)
+          timerId = null
+        }
+      }
+
+      function startTimer() {
+        if (duration <= 0) return
+        clearTimer()
+        remaining = duration
+        startedAt = Date.now()
+        timerId = setTimeout(dismiss, remaining)
+      }
+
+      function pauseTimer() {
+        if (timerId === null) return
+        clearTimer()
+        remaining = remaining - (Date.now() - startedAt)
+        if (remaining < 0) remaining = 0
+      }
+
+      function resumeTimer() {
+        if (duration <= 0 || remaining <= 0) return
+        clearTimer()
+        startedAt = Date.now()
+        timerId = setTimeout(dismiss, remaining)
+      }
+
+      // Dismiss button
+      const dismissBtn = toast.querySelector<HTMLElement>('[data-rfr-toast-dismiss]')
+      dismissBtn?.addEventListener('click', dismiss)
+
+      // Pause on hover, resume on leave
+      toast.addEventListener('mouseenter', pauseTimer)
+      toast.addEventListener('mouseleave', resumeTimer)
+
+      // Start auto-dismiss
+      startTimer()
+    })
+  }
+
+  // Expose a global function to programmatically add toasts
+  interface ToastOptions {
+    message: string
+    variant?: 'default' | 'success' | 'error' | 'warning'
+    duration?: number
+  }
+
+  const VARIANT_CLASSES: Record<string, string> = {
+    default: 'border bg-background text-foreground',
+    success: 'border-l-4 border-green-500/50 bg-green-50 text-green-900 dark:bg-green-950 dark:text-green-100',
+    error: 'border-l-4 border-red-500/50 bg-red-50 text-red-900 dark:bg-red-950 dark:text-red-100',
+    warning: 'border-l-4 border-amber-500/50 bg-amber-50 text-amber-900 dark:bg-amber-950 dark:text-amber-100',
+  }
+
+  function createToastElement(options: ToastOptions): HTMLElement {
+    const { message, variant = 'default', duration = 3000 } = options
+
+    const toast = document.createElement('div')
+    toast.setAttribute('data-rfr-toast', '')
+    toast.setAttribute('data-rfr-toast-variant', variant)
+    toast.setAttribute('data-rfr-toast-duration', String(duration))
+    toast.setAttribute('role', 'alert')
+    toast.setAttribute('aria-live', 'assertive')
+    toast.setAttribute('aria-atomic', 'true')
+    toast.className = `pointer-events-auto relative flex w-full items-center justify-between gap-2 overflow-hidden rounded-lg border p-4 shadow-lg transition-all ${VARIANT_CLASSES[variant] || VARIANT_CLASSES.default}`
+
+    const content = document.createElement('div')
+    content.className = 'flex-1'
+    content.textContent = message
+
+    const dismissBtn = document.createElement('button')
+    dismissBtn.type = 'button'
+    dismissBtn.setAttribute('data-rfr-toast-dismiss', '')
+    dismissBtn.className = 'shrink-0'
+    dismissBtn.setAttribute('aria-label', 'Dismiss')
+    dismissBtn.innerHTML = '&times;'
+
+    toast.appendChild(content)
+    toast.appendChild(dismissBtn)
+
+    return toast
+  }
+
+  ;(window as any).__rfr_toast = function(options: ToastOptions | string) {
+    const opts: ToastOptions = typeof options === 'string' ? { message: options } : options
+    const toaster = document.querySelector<HTMLElement>('[data-rfr-toaster]')
+    if (!toaster) {
+      console.warn('[refraction-ui] No <Toaster /> found in the document. Add a <Toaster /> component to use programmatic toasts.')
+      return
+    }
+
+    const toast = createToastElement(opts)
+    toaster.appendChild(toast)
+
+    // Re-init to attach event listeners to the new toast
+    initToaster()
+  }
+
+  initToaster()
+  document.addEventListener('astro:after-swap', initToaster)
+</script>

package/dist/astro-toast/index.ts

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

package/dist/astro-tooltip/Tooltip.astro

@@ -0,0 +1,95 @@
+---
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** Delay before showing in ms (default: 300) */
+  delayDuration?: number
+}
+
+const { delayDuration = 300, class: className, ...props } = Astro.props
+---
+
+<span
+  data-rfr-tooltip
+  data-rfr-tooltip-delay={delayDuration}
+  data-state="closed"
+  class={cn('relative inline-block', className)}
+  {...props}
+>
+  <slot />
+</span>
+
+<script>
+  function initTooltips() {
+    document.querySelectorAll<HTMLElement>('[data-rfr-tooltip]').forEach((root) => {
+      if (root.hasAttribute('data-rfr-tooltip-init')) return
+      root.setAttribute('data-rfr-tooltip-init', '')
+
+      const delay = parseInt(root.getAttribute('data-rfr-tooltip-delay') || '300', 10)
+      let isOpen = false
+      let timer: ReturnType<typeof setTimeout> | null = null
+
+      const trigger = root.querySelector<HTMLElement>('[data-rfr-tooltip-trigger]')
+      const content = root.querySelector<HTMLElement>('[data-rfr-tooltip-content]')
+
+      function cancelTimer() {
+        if (timer !== null) {
+          clearTimeout(timer)
+          timer = null
+        }
+      }
+
+      function setState(open: boolean) {
+        isOpen = open
+        const state = open ? 'open' : 'closed'
+        root.setAttribute('data-state', state)
+        content?.setAttribute('data-state', state)
+
+        if (open) {
+          content?.removeAttribute('hidden')
+        } else {
+          content?.setAttribute('hidden', '')
+        }
+      }
+
+      function showWithDelay() {
+        cancelTimer()
+        if (delay <= 0) {
+          setState(true)
+          return
+        }
+        timer = setTimeout(() => {
+          setState(true)
+          timer = null
+        }, delay)
+      }
+
+      function hide() {
+        cancelTimer()
+        setState(false)
+      }
+
+      // Mouse events on trigger
+      trigger?.addEventListener('mouseenter', () => showWithDelay())
+      trigger?.addEventListener('mouseleave', () => hide())
+
+      // Focus events on trigger
+      trigger?.addEventListener('focus', () => showWithDelay())
+      trigger?.addEventListener('blur', () => hide())
+
+      // Escape key
+      trigger?.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape' && isOpen) {
+          e.preventDefault()
+          hide()
+        }
+      })
+
+      // Set initial state
+      content?.setAttribute('hidden', '')
+    })
+  }
+
+  initTooltips()
+  document.addEventListener('astro:after-swap', initTooltips)
+</script>

package/dist/astro-tooltip/TooltipContent.astro

@@ -0,0 +1,22 @@
+---
+import { tooltipContentVariants } from '@refraction-ui/tooltip'
+import { cn } from '../shared/index.ts'
+import type { Side } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  side?: Side
+}
+
+const { side = 'top', class: className, ...props } = Astro.props
+---
+
+<div
+  data-rfr-tooltip-content
+  data-state="closed"
+  role="tooltip"
+  hidden
+  class={cn(tooltipContentVariants({ side }), className)}
+  {...props}
+>
+  <slot />
+</div>

package/dist/astro-tooltip/TooltipTrigger.astro

@@ -0,0 +1,16 @@
+---
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {}
+
+const { class: className, ...props } = Astro.props
+---
+
+<span
+  data-rfr-tooltip-trigger
+  tabindex="0"
+  class={cn(className)}
+  {...props}
+>
+  <slot />
+</span>

package/dist/astro-tooltip/index.ts

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

package/dist/astro-version-selector/VersionSelector.astro

@@ -0,0 +1,174 @@
+---
+import {
+  createVersionSelector,
+  versionSelectorVariants,
+  optionVariants,
+  latestBadgeVariants,
+  type VersionOption,
+} from '@refraction-ui/version-selector'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  value?: string
+  versions: VersionOption[]
+  placeholder?: string
+}
+
+const {
+  value = '',
+  versions,
+  placeholder = 'Select version...',
+  class: className,
+  ...props
+} = Astro.props
+
+const api = createVersionSelector({ value, versions })
+const selectedOpt = versions.find((v) => v.value === value)
+const displayLabel = selectedOpt ? selectedOpt.label : placeholder
+---
+
+<div
+  class={cn('rfr-version-selector relative inline-block', className)}
+  data-rfr-version-selector
+  data-rfr-versions={JSON.stringify(versions)}
+  data-rfr-version-value={value}
+  data-rfr-version-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={versionSelectorVariants()}
+    data-rfr-version-trigger
+  >
+    <span data-rfr-version-label>{displayLabel}</span>
+    {selectedOpt?.isLatest && (
+      <span class={cn(latestBadgeVariants(), 'ml-2')} data-rfr-version-latest-badge>Latest</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-version-dropdown
+  >
+    {versions.map((ver) => {
+      const optProps = api.getOptionProps(ver.value)
+      const isSelected = value === ver.value
+      return (
+        <li
+          role={optProps.role}
+          aria-selected={optProps['aria-selected']}
+          data-value={ver.value}
+          class={optionVariants({ selected: isSelected ? 'true' : 'false' })}
+          data-rfr-version-option
+        >
+          <span>{ver.label}</span>
+          {ver.isLatest && (
+            <span class={latestBadgeVariants()}>Latest</span>
+          )}
+        </li>
+      )
+    })}
+  </ul>
+</div>
+
+<script>
+  document.querySelectorAll<HTMLElement>('[data-rfr-version-selector]').forEach((root) => {
+    const versions: Array<{ value: string; label: string; isLatest?: boolean }> = JSON.parse(
+      root.getAttribute('data-rfr-versions') || '[]',
+    )
+    const placeholder = root.getAttribute('data-rfr-version-placeholder') || 'Select version...'
+
+    const trigger = root.querySelector<HTMLButtonElement>('[data-rfr-version-trigger]')!
+    const dropdown = root.querySelector<HTMLElement>('[data-rfr-version-dropdown]')!
+    const label = root.querySelector<HTMLElement>('[data-rfr-version-label]')!
+    const options = root.querySelectorAll<HTMLElement>('[data-rfr-version-option]')
+
+    let isOpen = false
+    let selectedValue = root.getAttribute('data-rfr-version-value') || ''
+
+    function setOpen(open: boolean) {
+      isOpen = open
+      dropdown.style.display = isOpen ? '' : 'none'
+      trigger.setAttribute('aria-expanded', String(isOpen))
+    }
+
+    function select(value: string) {
+      selectedValue = value
+      root.setAttribute('data-rfr-version-value', value)
+
+      const opt = versions.find((v) => v.value === value)
+      label.textContent = opt ? opt.label : placeholder
+
+      // Update latest badge on trigger
+      let badge = trigger.querySelector('[data-rfr-version-latest-badge]')
+      if (opt?.isLatest) {
+        if (!badge) {
+          badge = document.createElement('span')
+          badge.setAttribute('data-rfr-version-latest-badge', '')
+          badge.className = trigger.querySelector('[class*="badge"]')?.className || 'inline-flex items-center rounded-full text-xs font-medium px-2 py-0.5 bg-primary/10 text-primary ml-2'
+          // Insert before the arrow
+          const arrow = trigger.querySelector('[aria-hidden]')
+          trigger.insertBefore(badge, arrow)
+        }
+        badge.textContent = 'Latest'
+      } else if (badge) {
+        badge.remove()
+      }
+
+      // Update option states
+      options.forEach((optEl) => {
+        const val = optEl.getAttribute('data-value')
+        const isSel = val === value
+        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')
+        }
+      })
+
+      setOpen(false)
+      root.dispatchEvent(new CustomEvent('change', { detail: { value }, bubbles: true }))
+    }
+
+    trigger.addEventListener('click', () => setOpen(!isOpen))
+
+    options.forEach((optEl) => {
+      optEl.addEventListener('click', () => {
+        const value = optEl.getAttribute('data-value') || ''
+        select(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-version-selector/index.ts

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

package/dist/astro-video-player/VideoPlayer.astro

@@ -0,0 +1,153 @@
+---
+import {
+  createVideoPlayer,
+  playerVariants,
+  controlsVariants,
+  overlayVariants,
+} from '@refraction-ui/video-player'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  src?: string
+  poster?: string
+  autoplay?: boolean
+  muted?: boolean
+  controls?: boolean
+}
+
+const {
+  src,
+  poster,
+  autoplay = false,
+  muted: initialMuted = false,
+  controls = true,
+  class: className,
+  ...props
+} = Astro.props
+
+const api = createVideoPlayer({ src, poster, autoplay, muted: initialMuted, controls })
+---
+
+{!src ? (
+  <div
+    class={cn(playerVariants(), 'flex items-center justify-center aspect-video', className)}
+    role={api.ariaProps.role}
+    aria-label={api.ariaProps['aria-label'] as string}
+    {...props}
+  >
+    <div class="text-center text-muted-foreground">
+      <p class="text-lg font-medium">Coming soon</p>
+    </div>
+  </div>
+) : (
+  <div
+    class={cn(playerVariants(), 'aspect-video', className)}
+    role={api.ariaProps.role}
+    aria-label={api.ariaProps['aria-label'] as string}
+    data-state={api.dataAttributes['data-state']}
+    data-rfr-video-player
+    {...props}
+  >
+    <video
+      class="h-full w-full"
+      src={src}
+      poster={poster}
+      autoplay={autoplay}
+      muted={initialMuted}
+      data-rfr-video-element
+    />
+
+    {controls && (
+      <div class={overlayVariants({ visibility: 'visible' })} data-rfr-video-overlay>
+        <button
+          type="button"
+          class="rounded-full bg-white/90 p-4 text-black shadow-lg"
+          aria-label="Play"
+          data-rfr-video-play-pause
+        >
+          Play
+        </button>
+      </div>
+    )}
+
+    {controls && (
+      <div class={controlsVariants()} data-rfr-video-controls>
+        <button
+          type="button"
+          class="rounded bg-white/20 px-3 py-1 text-sm text-white"
+          aria-label={initialMuted ? 'Unmute' : 'Mute'}
+          data-rfr-video-mute
+        >
+          {initialMuted ? 'Unmute' : 'Mute'}
+        </button>
+      </div>
+    )}
+  </div>
+)}
+
+<script>
+  document.querySelectorAll<HTMLElement>('[data-rfr-video-player]').forEach((root) => {
+    const video = root.querySelector<HTMLVideoElement>('[data-rfr-video-element]')
+    const overlay = root.querySelector<HTMLElement>('[data-rfr-video-overlay]')
+    const playPauseBtn = root.querySelector<HTMLButtonElement>('[data-rfr-video-play-pause]')
+    const muteBtn = root.querySelector<HTMLButtonElement>('[data-rfr-video-mute]')
+
+    if (!video) return
+
+    let isMuted = video.muted
+
+    function updatePlayState() {
+      const isPlaying = !video!.paused && !video!.ended
+      root.setAttribute('data-state', isPlaying ? 'playing' : 'paused')
+
+      if (overlay) {
+        if (isPlaying) {
+          overlay.classList.add('opacity-0', 'pointer-events-none')
+          overlay.classList.remove('opacity-100')
+        } else {
+          overlay.classList.remove('opacity-0', 'pointer-events-none')
+          overlay.classList.add('opacity-100')
+        }
+      }
+
+      if (playPauseBtn) {
+        playPauseBtn.textContent = isPlaying ? 'Pause' : 'Play'
+        playPauseBtn.setAttribute('aria-label', isPlaying ? 'Pause' : 'Play')
+      }
+    }
+
+    function togglePlay() {
+      if (video!.paused || video!.ended) {
+        video!.play()
+      } else {
+        video!.pause()
+      }
+    }
+
+    function toggleMute() {
+      isMuted = !isMuted
+      video!.muted = isMuted
+      if (muteBtn) {
+        muteBtn.textContent = isMuted ? 'Unmute' : 'Mute'
+        muteBtn.setAttribute('aria-label', isMuted ? 'Unmute' : 'Mute')
+      }
+    }
+
+    video.addEventListener('play', updatePlayState)
+    video.addEventListener('pause', updatePlayState)
+    video.addEventListener('ended', updatePlayState)
+
+    if (playPauseBtn) {
+      playPauseBtn.addEventListener('click', togglePlay)
+    }
+
+    // Click on overlay to toggle play
+    if (overlay) {
+      overlay.addEventListener('click', togglePlay)
+    }
+
+    if (muteBtn) {
+      muteBtn.addEventListener('click', toggleMute)
+    }
+  })
+</script>

package/dist/astro-video-player/index.ts

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