@refraction-ui/astro 0.4.0 → 0.4.4

package/dist/toast/toast.styles.ts

@@ -0,0 +1,19 @@
+import { cva } from '../shared/index.ts'
+
+export const toastVariants = cva({
+  base: 'pointer-events-auto relative flex w-full items-center justify-between gap-2 overflow-hidden rounded-lg border p-4 shadow-lg transition-all',
+  variants: {
+    variant: {
+      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',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+})

package/dist/toast/toast.ts

@@ -0,0 +1,203 @@
+import type { AccessibilityProps } from '../shared/index.ts'
+import { generateId } from '../shared/index.ts'
+
+export type ToastVariant = 'default' | 'success' | 'error' | 'warning'
+
+/** Icon name for each toast variant — non-color indicator for colorblind safety */
+const TOAST_ICONS: Record<ToastVariant, string> = {
+  default: 'info-circle',
+  success: 'check-circle',
+  error: 'x-circle',
+  warning: 'alert-triangle',
+}
+
+/** Get the icon name for a toast variant (colorblind-safe: meaning not conveyed by color alone) */
+export function getToastIcon(variant: ToastVariant): string {
+  return TOAST_ICONS[variant]
+}
+
+export interface ToastProps {
+  /** Visual variant */
+  variant?: ToastVariant
+  /** Auto-dismiss duration in ms (default: 3000). Set to 0 to disable. */
+  duration?: number
+  /** Whether the toast is open (controlled) */
+  open?: boolean
+  /** Callback when open state changes */
+  onOpenChange?: (open: boolean) => void
+}
+
+export interface ToastState {
+  open: boolean
+  variant: ToastVariant
+}
+
+export interface ToastAPI {
+  /** Current toast state */
+  state: ToastState
+  /** ARIA attributes for the toast element */
+  ariaProps: Partial<AccessibilityProps>
+  /** Dismiss the toast */
+  dismiss(): void
+  /** Start the auto-dismiss timer */
+  startTimer(): void
+  /** Pause the auto-dismiss timer (e.g. on hover) */
+  pauseTimer(): void
+  /** Resume the auto-dismiss timer */
+  resumeTimer(): void
+}
+
+export function createToast(props: ToastProps = {}): ToastAPI {
+  const {
+    variant = 'default',
+    duration = 3000,
+    open: controlledOpen,
+    onOpenChange,
+  } = props
+
+  let isOpen = controlledOpen ?? true
+  let timerId: ReturnType<typeof setTimeout> | null = null
+  let remaining = duration
+  let startedAt = 0
+
+  function dismiss(): void {
+    clearTimer()
+    isOpen = false
+    onOpenChange?.(false)
+  }
+
+  function clearTimer(): void {
+    if (timerId !== null) {
+      clearTimeout(timerId)
+      timerId = null
+    }
+  }
+
+  function startTimer(): void {
+    if (duration <= 0) return
+    clearTimer()
+    remaining = duration
+    startedAt = Date.now()
+    timerId = setTimeout(dismiss, remaining)
+  }
+
+  function pauseTimer(): void {
+    if (timerId === null) return
+    clearTimer()
+    remaining = remaining - (Date.now() - startedAt)
+    if (remaining < 0) remaining = 0
+  }
+
+  function resumeTimer(): void {
+    if (duration <= 0 || remaining <= 0) return
+    clearTimer()
+    startedAt = Date.now()
+    timerId = setTimeout(dismiss, remaining)
+  }
+
+  const ariaProps: Partial<AccessibilityProps> = {
+    role: 'alert',
+    'aria-live': 'assertive',
+    'aria-atomic': true,
+  }
+
+  return {
+    state: {
+      get open() {
+        return controlledOpen !== undefined ? controlledOpen : isOpen
+      },
+      variant,
+    },
+    ariaProps,
+    dismiss,
+    startTimer,
+    pauseTimer,
+    resumeTimer,
+  }
+}
+
+/** Entry in the toast manager */
+export interface ToastEntry {
+  id: string
+  message: string
+  variant: ToastVariant
+  duration: number
+  createdAt: number
+}
+
+export interface ToastManagerAPI {
+  /** Add a new toast. Returns the toast id. */
+  toast(message: string, opts?: { variant?: ToastVariant; duration?: number }): string
+  /** Dismiss a toast by id */
+  dismiss(id: string): void
+  /** Current toast list (read-only) */
+  readonly toasts: ReadonlyArray<ToastEntry>
+  /** Subscribe to toast list changes. Returns unsubscribe function. */
+  subscribe(fn: (toasts: ReadonlyArray<ToastEntry>) => void): () => void
+}
+
+export function createToastManager(): ToastManagerAPI {
+  let toasts: ToastEntry[] = []
+  const listeners = new Set<(toasts: ReadonlyArray<ToastEntry>) => void>()
+  const timers = new Map<string, ReturnType<typeof setTimeout>>()
+
+  function notify(): void {
+    const snapshot = [...toasts]
+    for (const fn of listeners) {
+      fn(snapshot)
+    }
+  }
+
+  function dismiss(id: string): void {
+    const timer = timers.get(id)
+    if (timer) {
+      clearTimeout(timer)
+      timers.delete(id)
+    }
+    toasts = toasts.filter((t) => t.id !== id)
+    notify()
+  }
+
+  function toast(
+    message: string,
+    opts?: { variant?: ToastVariant; duration?: number },
+  ): string {
+    const id = generateId('rfr-toast')
+    const variant = opts?.variant ?? 'default'
+    const duration = opts?.duration ?? 3000
+
+    const entry: ToastEntry = {
+      id,
+      message,
+      variant,
+      duration,
+      createdAt: Date.now(),
+    }
+
+    toasts = [...toasts, entry]
+    notify()
+
+    if (duration > 0) {
+      const timer = setTimeout(() => dismiss(id), duration)
+      timers.set(id, timer)
+    }
+
+    return id
+  }
+
+  function subscribe(fn: (toasts: ReadonlyArray<ToastEntry>) => void): () => void {
+    listeners.add(fn)
+    return () => {
+      listeners.delete(fn)
+    }
+  }
+
+  return {
+    toast,
+    dismiss,
+    get toasts() {
+      return toasts
+    },
+    subscribe,
+  }
+}

package/dist/tooltip/index.ts

@@ -0,0 +1,7 @@
+export {
+  createTooltip,
+  type TooltipProps,
+  type TooltipAPI,
+} from './tooltip.js'
+
+export { tooltipContentVariants } from './tooltip.styles.js'

package/dist/tooltip/tooltip.styles.ts

@@ -0,0 +1,16 @@
+import { cva } from '../shared/index.ts'
+
+export const tooltipContentVariants = cva({
+  base: 'z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground shadow-md',
+  variants: {
+    side: {
+      top: 'animate-slide-down-fade',
+      right: 'animate-slide-left-fade',
+      bottom: 'animate-slide-up-fade',
+      left: 'animate-slide-right-fade',
+    },
+  },
+  defaultVariants: {
+    side: 'top',
+  },
+})

package/dist/tooltip/tooltip.ts

@@ -0,0 +1,109 @@
+import type { AccessibilityProps, Side } from '../shared/index.ts'
+import { generateId } from '../shared/index.ts'
+
+export interface TooltipProps {
+  open?: boolean
+  defaultOpen?: boolean
+  onOpenChange?: (open: boolean) => void
+  placement?: Side
+  delayDuration?: number
+}
+
+export interface TooltipAPI {
+  /** Current open state */
+  state: { open: boolean }
+  /** Props to spread on the trigger element */
+  triggerProps: Partial<AccessibilityProps> & {
+    'aria-describedby': string
+  }
+  /** Props to spread on the content element */
+  contentProps: {
+    role: 'tooltip'
+    id: string
+  }
+  /** Resolved placement */
+  placement: Side
+  /** Open the tooltip */
+  open: () => void
+  /** Close the tooltip (and clear any pending delay) */
+  close: () => void
+  /** Open with delay */
+  openWithDelay: () => void
+  /** The configured delay duration */
+  delayDuration: number
+  /** Cancel any pending delay timer */
+  cancelDelay: () => void
+}
+
+export function createTooltip(props: TooltipProps = {}): TooltipAPI {
+  const {
+    open: controlledOpen,
+    defaultOpen = false,
+    onOpenChange,
+    placement = 'top',
+    delayDuration = 300,
+  } = props
+
+  const contentId = generateId('rfr-tooltip')
+
+  let isOpen = controlledOpen ?? defaultOpen
+  let delayTimer: ReturnType<typeof setTimeout> | null = null
+
+  const state = { open: isOpen }
+
+  function setOpen(value: boolean) {
+    isOpen = value
+    state.open = value
+    onOpenChange?.(value)
+  }
+
+  function cancelDelay() {
+    if (delayTimer !== null) {
+      clearTimeout(delayTimer)
+      delayTimer = null
+    }
+  }
+
+  function open() {
+    cancelDelay()
+    setOpen(true)
+  }
+
+  function close() {
+    cancelDelay()
+    setOpen(false)
+  }
+
+  function openWithDelay() {
+    cancelDelay()
+    if (delayDuration <= 0) {
+      setOpen(true)
+      return
+    }
+    delayTimer = setTimeout(() => {
+      setOpen(true)
+      delayTimer = null
+    }, delayDuration)
+  }
+
+  const triggerProps = {
+    'aria-describedby': contentId,
+  }
+
+  const contentProps = {
+    role: 'tooltip' as const,
+    id: contentId,
+  }
+
+  return {
+    state,
+    triggerProps,
+    contentProps,
+    placement,
+    open,
+    close,
+    openWithDelay,
+    delayDuration,
+    cancelDelay,
+  }
+}

package/dist/version-selector/index.ts

@@ -0,0 +1,12 @@
+export {
+  createVersionSelector,
+  type VersionSelectorProps,
+  type VersionSelectorAPI,
+  type VersionOption,
+} from './version-selector.js'
+
+export {
+  versionSelectorVariants,
+  optionVariants,
+  latestBadgeVariants,
+} from './version-selector.styles.js'

package/dist/version-selector/version-selector.styles.ts

@@ -0,0 +1,41 @@
+import { cva } from '../shared/index.ts'
+
+export const versionSelectorVariants = cva({
+  base: 'relative inline-flex items-center justify-between rounded-md border bg-background text-foreground cursor-pointer',
+  variants: {
+    size: {
+      sm: 'h-8 text-sm px-2 min-w-[100px]',
+      md: 'h-10 text-base px-3 min-w-[140px]',
+      lg: 'h-12 text-lg px-4 min-w-[180px]',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+})
+
+export const optionVariants = cva({
+  base: 'flex items-center gap-2 px-3 py-2 cursor-pointer hover:bg-accent',
+  variants: {
+    selected: {
+      true: 'bg-accent/50 font-medium',
+      false: '',
+    },
+  },
+  defaultVariants: {
+    selected: 'false',
+  },
+})
+
+export const latestBadgeVariants = cva({
+  base: 'inline-flex items-center rounded-full text-xs font-medium px-2 py-0.5',
+  variants: {
+    variant: {
+      default: 'bg-primary/10 text-primary',
+      accent: 'bg-accent text-accent-foreground',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+})

package/dist/version-selector/version-selector.ts

@@ -0,0 +1,136 @@
+import type { KeyboardHandlerMap } from '../shared/index.ts'
+import { generateId, Keys, createKeyboardHandler } from '../shared/index.ts'
+
+export interface VersionOption {
+  value: string
+  label: string
+  isLatest?: boolean
+}
+
+export interface VersionSelectorProps {
+  value?: string
+  onValueChange?: (value: string) => void
+  versions: VersionOption[]
+}
+
+export interface VersionSelectorAPI {
+  /** Current state */
+  state: { selectedVersion: 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
+  }
+  /** Get props for an individual option */
+  getOptionProps: (value: string) => {
+    role: 'option'
+    'aria-selected': boolean
+    'data-value': string
+    'data-latest'?: string
+  }
+  /** Select a version */
+  select: (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 createVersionSelector(props: VersionSelectorProps): VersionSelectorAPI {
+  const {
+    value: initialValue = '',
+    onValueChange,
+    versions,
+  } = props
+
+  const contentId = generateId('rfr-ver-sel')
+
+  let selectedVersion = initialValue
+  let isOpen = false
+
+  const state = { selectedVersion, isOpen }
+
+  function setOpen(value: boolean) {
+    isOpen = value
+    state.isOpen = value
+  }
+
+  function select(value: string) {
+    selectedVersion = value
+    state.selectedVersion = value
+    onValueChange?.(value)
+    setOpen(false)
+  }
+
+  const triggerProps = {
+    'aria-expanded': isOpen,
+    'aria-controls': contentId,
+    'aria-haspopup': 'listbox' as const,
+    role: 'combobox' as const,
+  }
+
+  const contentProps = {
+    role: 'listbox' as const,
+    id: contentId,
+  }
+
+  function getOptionProps(value: string) {
+    const version = versions.find((v) => v.value === value)
+    const base = {
+      role: 'option' as const,
+      'aria-selected': selectedVersion === value,
+      'data-value': value,
+    }
+    if (version?.isLatest) {
+      return { ...base, 'data-latest': 'true' }
+    }
+    return base
+  }
+
+  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,
+    select,
+    open: () => setOpen(true),
+    close: () => setOpen(false),
+    keyboardHandlers,
+    handleKeyDown,
+  }
+}

package/dist/video-player/index.ts

@@ -0,0 +1,12 @@
+export {
+  createVideoPlayer,
+  type VideoPlayerProps,
+  type VideoState,
+  type VideoPlayerAPI,
+} from './video-player.js'
+
+export {
+  playerVariants,
+  controlsVariants,
+  overlayVariants,
+} from './video-player.styles.js'

package/dist/video-player/video-player.styles.ts

@@ -0,0 +1,42 @@
+import { cva } from '../shared/index.ts'
+
+export const playerVariants = cva({
+  base: 'relative overflow-hidden rounded-lg bg-black',
+  variants: {
+    size: {
+      sm: 'max-w-sm',
+      md: 'max-w-2xl',
+      lg: 'max-w-4xl',
+      full: 'w-full',
+    },
+  },
+  defaultVariants: {
+    size: 'full',
+  },
+})
+
+export const controlsVariants = cva({
+  base: 'absolute bottom-0 left-0 right-0 flex items-center gap-2 bg-gradient-to-t from-black/80 to-transparent p-4 transition-opacity',
+  variants: {
+    visibility: {
+      visible: 'opacity-100',
+      hidden: 'opacity-0 pointer-events-none',
+    },
+  },
+  defaultVariants: {
+    visibility: 'visible',
+  },
+})
+
+export const overlayVariants = cva({
+  base: 'absolute inset-0 flex items-center justify-center bg-black/40 transition-opacity',
+  variants: {
+    visibility: {
+      visible: 'opacity-100',
+      hidden: 'opacity-0 pointer-events-none',
+    },
+  },
+  defaultVariants: {
+    visibility: 'visible',
+  },
+})

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

@@ -0,0 +1,100 @@
+import type { AccessibilityProps } from '../shared/index.ts'
+
+export interface VideoPlayerProps {
+  src?: string
+  poster?: string
+  autoplay?: boolean
+  muted?: boolean
+  controls?: boolean
+}
+
+export type VideoState = 'idle' | 'loading' | 'playing' | 'paused' | 'ended'
+
+export interface VideoPlayerAPI {
+  /** Current player state */
+  state: VideoState
+  /** Transition to playing state */
+  play: () => void
+  /** Transition to paused state */
+  pause: () => void
+  /** Toggle between playing and paused */
+  togglePlay: () => void
+  /** Toggle mute state */
+  toggleMute: () => boolean
+  /** ARIA props for the player region */
+  ariaProps: Partial<AccessibilityProps>
+  /** ARIA props for control buttons */
+  controlAriaProps: {
+    playPause: Partial<AccessibilityProps>
+    mute: Partial<AccessibilityProps>
+  }
+  /** Data attributes reflecting current state */
+  dataAttributes: Record<string, string>
+}
+
+export function createVideoPlayer(props: VideoPlayerProps = {}): VideoPlayerAPI {
+  const { muted: initialMuted = false } = props
+
+  let state: VideoState = 'idle'
+  let isMuted = initialMuted
+
+  function play() {
+    if (state === 'ended') {
+      state = 'playing'
+    } else if (state !== 'playing') {
+      state = 'playing'
+    }
+  }
+
+  function pause() {
+    if (state === 'playing') {
+      state = 'paused'
+    }
+  }
+
+  function togglePlay() {
+    if (state === 'playing') {
+      pause()
+    } else {
+      play()
+    }
+  }
+
+  function toggleMute(): boolean {
+    isMuted = !isMuted
+    return isMuted
+  }
+
+  const ariaProps: Partial<AccessibilityProps> = {
+    role: 'region',
+    'aria-label': 'Video player',
+  }
+
+  const api: VideoPlayerAPI = {
+    get state() {
+      return state
+    },
+    play,
+    pause,
+    togglePlay,
+    toggleMute,
+    ariaProps,
+    get controlAriaProps() {
+      return {
+        playPause: {
+          'aria-label': state === 'playing' ? 'Pause' : 'Play',
+        },
+        mute: {
+          'aria-label': isMuted ? 'Unmute' : 'Mute',
+        },
+      }
+    },
+    get dataAttributes() {
+      return {
+        'data-state': state,
+      }
+    },
+  }
+
+  return api
+}