@refraction-ui/astro 0.3.1 → 0.4.2

package/dist/astro-accordion/Button.astro

@@ -0,0 +1,55 @@
+---
+import {
+  createButton,
+  buttonVariants,
+  getButtonType,
+  type ButtonVariant,
+  type ButtonSize,
+} from '@refraction-ui/button'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  variant?: ButtonVariant
+  size?: ButtonSize
+  loading?: boolean
+  disabled?: boolean
+}
+
+const { variant, size, loading, disabled, class: className, ...props } = Astro.props
+const api = createButton({ variant, size, disabled, loading, type: props.type as string })
+const classes = cn(buttonVariants({ variant, size }), className)
+---
+
+<button
+  type={getButtonType({ type: props.type as string }) as any}
+  class={classes}
+  disabled={disabled || loading}
+  {...api.ariaProps}
+  {...api.dataAttributes}
+  {...props}
+>
+  {loading && (
+    <svg
+      class="animate-spin h-4 w-4"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      aria-hidden="true"
+    >
+      <circle
+        class="opacity-25"
+        cx="12"
+        cy="12"
+        r="10"
+        stroke="currentColor"
+        stroke-width="4"
+      />
+      <path
+        class="opacity-75"
+        fill="currentColor"
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+      />
+    </svg>
+  )}
+  <slot />
+</button>

package/dist/astro-accordion/index.ts

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

package/dist/astro-ai/AIScript.astro

@@ -0,0 +1,69 @@
+---
+/**
+ * AIScript — injects a <script> that initializes the AI client on the page.
+ * Exposes `window.__rfr_ai` for other scripts to call generateText / generateJSON.
+ *
+ * Props mirror AIConfig from @refraction-ui/ai.
+ */
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** Default provider name */
+  default?: string
+  /** Fallback chain of provider names */
+  fallback?: string[]
+}
+
+const { default: defaultProvider, fallback, ...props } = Astro.props
+
+const configJSON = JSON.stringify({
+  default: defaultProvider,
+  fallback,
+})
+---
+
+<script
+  data-rfr-ai-config={configJSON}
+  {...props}
+  is:inline
+>
+  ;(function () {
+    // Only initialize once
+    if (window.__rfr_ai) return
+
+    // We cannot import ES modules from an inline script, so we stash the config
+    // and let the consumer call the init function from their own module script.
+    // This inline script sets up the namespace and a deferred init helper.
+    var configEl = document.querySelector('[data-rfr-ai-config]')
+    var config = {}
+    if (configEl) {
+      try { config = JSON.parse(configEl.getAttribute('data-rfr-ai-config') || '{}') } catch (_) { /* */ }
+    }
+
+    // Placeholder that will be replaced once createAI is called
+    window.__rfr_ai = {
+      _config: config,
+      _api: null,
+      _ready: false,
+      init: function (createAI, providers) {
+        var api = createAI(config)
+        if (providers) {
+          Object.keys(providers).forEach(function (name) {
+            api.addProvider(name, providers[name])
+          })
+        }
+        window.__rfr_ai._api = api
+        window.__rfr_ai._ready = true
+        window.__rfr_ai.generateText = api.generateText.bind(api)
+        window.__rfr_ai.generateJSON = api.generateJSON.bind(api)
+        window.__rfr_ai.addProvider = api.addProvider.bind(api)
+        window.__rfr_ai.removeProvider = api.removeProvider.bind(api)
+        window.__rfr_ai.providers = api.providers
+      },
+      generateText: function () { throw new Error('AI not initialized. Call window.__rfr_ai.init(createAI, providers) first.') },
+      generateJSON: function () { throw new Error('AI not initialized. Call window.__rfr_ai.init(createAI, providers) first.') },
+      addProvider: function () { throw new Error('AI not initialized.') },
+      removeProvider: function () { throw new Error('AI not initialized.') },
+      providers: [],
+    }
+  })()
+</script>

package/dist/astro-ai/TTSScript.astro

@@ -0,0 +1,60 @@
+---
+/**
+ * TTSScript — injects a <script> that initializes TTS on the page.
+ * Exposes `window.__rfr_tts` for other scripts to call speak / stop.
+ *
+ * Props mirror TTSConfig from @refraction-ui/ai.
+ */
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** Default TTS provider name */
+  default?: string
+}
+
+const { default: defaultProvider, ...props } = Astro.props
+
+const configJSON = JSON.stringify({
+  default: defaultProvider,
+})
+---
+
+<script
+  data-rfr-tts-config={configJSON}
+  {...props}
+  is:inline
+>
+  ;(function () {
+    if (window.__rfr_tts) return
+
+    var configEl = document.querySelector('[data-rfr-tts-config]')
+    var config = {}
+    if (configEl) {
+      try { config = JSON.parse(configEl.getAttribute('data-rfr-tts-config') || '{}') } catch (_) { /* */ }
+    }
+
+    window.__rfr_tts = {
+      _config: config,
+      _api: null,
+      _ready: false,
+      init: function (createTTS, providers) {
+        var api = createTTS(config)
+        if (providers) {
+          Object.keys(providers).forEach(function (name) {
+            api.addProvider(name, providers[name])
+          })
+        }
+        window.__rfr_tts._api = api
+        window.__rfr_tts._ready = true
+        window.__rfr_tts.speak = api.speak.bind(api)
+        window.__rfr_tts.stop = api.stop.bind(api)
+        window.__rfr_tts.addProvider = api.addProvider.bind(api)
+        window.__rfr_tts.providers = api.providers
+      },
+      speak: function () { throw new Error('TTS not initialized. Call window.__rfr_tts.init(createTTS, providers) first.') },
+      stop: function () { throw new Error('TTS not initialized.') },
+      addProvider: function () { throw new Error('TTS not initialized.') },
+      providers: [],
+      isSpeaking: false,
+    }
+  })()
+</script>

package/dist/astro-ai/index.ts

@@ -0,0 +1,16 @@
+export { default as AIScript } from './AIScript.astro'
+export { default as TTSScript } from './TTSScript.astro'
+
+// Re-export core types and factories for convenience
+export {
+  createAI,
+  createTTS,
+  type AIConfig,
+  type TTSConfig,
+  type AIAPI,
+  type TTSAPI,
+  type AIProvider,
+  type TTSProvider,
+  type GenerateOptions,
+  type TTSOptions,
+} from '@refraction-ui/ai'

package/dist/astro-animated-text/AnimatedText.astro

@@ -0,0 +1,81 @@
+---
+import { animatedTextVariants } from '@refraction-ui/animated-text'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** Array of words to cycle through */
+  words: string[]
+  /** Interval between word changes in ms. Default: 2500 */
+  interval?: number
+  /** Duration of the transition in ms. Default: 1000 */
+  transitionDuration?: number
+}
+
+const {
+  words,
+  interval = 2500,
+  transitionDuration = 1000,
+  class: className,
+  ...props
+} = Astro.props
+
+const classes = cn(animatedTextVariants({ state: 'idle' }), className)
+---
+
+<span
+  data-rfr-animated-text
+  data-rfr-animated-words={JSON.stringify(words)}
+  data-rfr-animated-interval={interval}
+  data-rfr-animated-transition-duration={transitionDuration}
+  class={classes}
+  aria-live="polite"
+  aria-atomic="true"
+  {...props}
+>
+  {words.length > 0 ? words[0] : ''}
+</span>
+
+<script>
+  function initAnimatedTexts() {
+    document.querySelectorAll<HTMLElement>('[data-rfr-animated-text]').forEach((el) => {
+      if (el.hasAttribute('data-rfr-animated-text-init')) return
+      el.setAttribute('data-rfr-animated-text-init', '')
+
+      const words: string[] = JSON.parse(el.getAttribute('data-rfr-animated-words') || '[]')
+      const interval = Number(el.getAttribute('data-rfr-animated-interval') || 2500)
+      const transitionDuration = Number(el.getAttribute('data-rfr-animated-transition-duration') || 1000)
+
+      if (words.length <= 1) return
+
+      const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
+      let currentIndex = 0
+
+      const tick = setInterval(() => {
+        if (prefersReducedMotion) {
+          currentIndex = (currentIndex + 1) % words.length
+          el.textContent = words[currentIndex]
+        } else {
+          // Exit transition
+          el.style.opacity = '0'
+          setTimeout(() => {
+            currentIndex = (currentIndex + 1) % words.length
+            el.textContent = words[currentIndex]
+            // Enter transition
+            el.style.opacity = '1'
+          }, transitionDuration / 2)
+        }
+      }, interval)
+
+      // Set transition style if motion is allowed
+      if (!prefersReducedMotion) {
+        el.style.transition = `opacity ${transitionDuration / 2}ms ease`
+      }
+
+      // Cleanup on removal (Astro page transitions)
+      el.addEventListener('astro:before-swap', () => clearInterval(tick), { once: true })
+    })
+  }
+
+  initAnimatedTexts()
+  document.addEventListener('astro:after-swap', initAnimatedTexts)
+</script>

package/dist/astro-animated-text/TypewriterText.astro

@@ -0,0 +1,90 @@
+---
+import { typewriterVariants } from '@refraction-ui/animated-text'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** The text to type out */
+  text: string
+  /** Typing speed in ms per character. Default: 50 */
+  speed?: number
+  /** Delay before starting in ms. Default: 0 */
+  startDelay?: number
+}
+
+const {
+  text,
+  speed = 50,
+  startDelay = 0,
+  class: className,
+  ...props
+} = Astro.props
+
+const classes = cn(typewriterVariants({ cursor: 'blinking' }), className)
+---
+
+<span
+  data-rfr-typewriter
+  data-rfr-typewriter-text={text}
+  data-rfr-typewriter-speed={speed}
+  data-rfr-typewriter-start-delay={startDelay}
+  class={classes}
+  aria-label={text}
+  {...props}
+></span>
+
+<script>
+  function initTypewriters() {
+    document.querySelectorAll<HTMLElement>('[data-rfr-typewriter]').forEach((el) => {
+      if (el.hasAttribute('data-rfr-typewriter-init')) return
+      el.setAttribute('data-rfr-typewriter-init', '')
+
+      const text = el.getAttribute('data-rfr-typewriter-text') || ''
+      const speed = Number(el.getAttribute('data-rfr-typewriter-speed') || 50)
+      const startDelay = Number(el.getAttribute('data-rfr-typewriter-start-delay') || 0)
+
+      const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
+
+      if (prefersReducedMotion) {
+        el.textContent = text
+        // Remove cursor classes when complete
+        el.className = el.className
+          .replace(/after:inline-block/g, '')
+          .replace(/after:w-\[2px\]/g, '')
+          .replace(/after:h-\[1em\]/g, '')
+          .replace(/after:bg-current/g, '')
+          .replace(/after:ml-\[1px\]/g, '')
+          .replace(/after:animate-blink/g, '')
+          .replace(/after:align-text-bottom/g, '')
+        return
+      }
+
+      let currentIndex = 0
+
+      const startTimeout = setTimeout(() => {
+        function tick() {
+          if (currentIndex < text.length) {
+            currentIndex += 1
+            el.textContent = text.slice(0, currentIndex)
+            setTimeout(tick, speed)
+          } else {
+            // Typing complete — remove cursor
+            el.className = el.className
+              .replace(/after:inline-block/g, '')
+              .replace(/after:w-\[2px\]/g, '')
+              .replace(/after:h-\[1em\]/g, '')
+              .replace(/after:bg-current/g, '')
+              .replace(/after:ml-\[1px\]/g, '')
+              .replace(/after:animate-blink/g, '')
+              .replace(/after:align-text-bottom/g, '')
+          }
+        }
+        tick()
+      }, startDelay)
+
+      el.addEventListener('astro:before-swap', () => clearTimeout(startTimeout), { once: true })
+    })
+  }
+
+  initTypewriters()
+  document.addEventListener('astro:after-swap', initTypewriters)
+</script>

package/dist/astro-animated-text/index.ts

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

package/dist/astro-app-shell/AppShell.astro

@@ -0,0 +1,195 @@
+---
+/**
+ * AppShell — root layout container for app-style layouts with sidebar, header, and main content.
+ * Includes a client-side script for responsive breakpoint detection and sidebar toggling.
+ */
+import { createAppShell, type AppShellConfig } from '@refraction-ui/app-shell'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** Sidebar width when expanded (default '16rem') */
+  sidebarWidth?: string
+  /** Sidebar width when collapsed (default '4rem') */
+  sidebarCollapsedWidth?: string
+  /** Header height (default '3.5rem') */
+  headerHeight?: string
+  /** Breakpoint below which layout is mobile (default 768) */
+  mobileBreakpoint?: number
+  /** Breakpoint below which layout is tablet (default 1024) */
+  tabletBreakpoint?: number
+  /** Sidebar position (default 'left') */
+  sidebarPosition?: 'left' | 'right'
+  /** Whether sidebar can collapse on desktop (default true) */
+  sidebarCollapsible?: boolean
+  /** Whether sidebar starts collapsed (default false) */
+  sidebarDefaultCollapsed?: boolean
+  /** Mobile nav position (default 'bottom') */
+  mobileNavPosition?: 'bottom' | 'none'
+}
+
+const {
+  sidebarWidth,
+  sidebarCollapsedWidth,
+  headerHeight,
+  mobileBreakpoint,
+  tabletBreakpoint,
+  sidebarPosition,
+  sidebarCollapsible,
+  sidebarDefaultCollapsed,
+  mobileNavPosition,
+  class: className,
+  ...props
+} = Astro.props
+
+const config: AppShellConfig = {
+  sidebarWidth,
+  sidebarCollapsedWidth,
+  headerHeight,
+  mobileBreakpoint,
+  tabletBreakpoint,
+  sidebarPosition,
+  sidebarCollapsible,
+  sidebarDefaultCollapsed,
+  mobileNavPosition,
+}
+
+const api = createAppShell(config)
+const cssVars = api.getCSSVariables()
+const styleStr = Object.entries(cssVars).map(([k, v]) => `${k}:${v}`).join(';')
+
+const configJSON = JSON.stringify(api.config)
+---
+
+<div
+  class={cn('flex h-screen w-full overflow-hidden', className)}
+  style={styleStr}
+  data-rfr-shell
+  data-rfr-shell-config={configJSON}
+  {...props}
+>
+  <slot />
+</div>
+
+<script is:inline>
+  ;(function () {
+    var shell = document.querySelector('[data-rfr-shell]')
+    if (!shell) return
+
+    var config = {}
+    try { config = JSON.parse(shell.getAttribute('data-rfr-shell-config') || '{}') } catch (_) { /* */ }
+
+    var mobileBp = config.mobileBreakpoint || 768
+    var tabletBp = config.tabletBreakpoint || 1024
+    var sidebarCollapsible = config.sidebarCollapsible !== false
+    var sidebarWidth = config.sidebarWidth || '16rem'
+    var sidebarCollapsedWidth = config.sidebarCollapsedWidth || '4rem'
+    var sidebarPosition = config.sidebarPosition || 'left'
+
+    var state = {
+      breakpoint: 'desktop',
+      sidebarOpen: false,
+      sidebarCollapsed: config.sidebarDefaultCollapsed || false,
+    }
+
+    function isMobile() { return state.breakpoint === 'mobile' }
+
+    function updateBreakpoint() {
+      var w = window.innerWidth
+      var bp = w < mobileBp ? 'mobile' : w < tabletBp ? 'tablet' : 'desktop'
+      if (bp !== state.breakpoint) {
+        state.breakpoint = bp
+        if (bp !== 'mobile') state.sidebarOpen = false
+        applyState()
+      }
+    }
+
+    function toggleSidebar() {
+      if (isMobile()) {
+        state.sidebarOpen = !state.sidebarOpen
+      } else if (sidebarCollapsible) {
+        state.sidebarCollapsed = !state.sidebarCollapsed
+      }
+      applyState()
+    }
+
+    function closeSidebar() {
+      state.sidebarOpen = false
+      applyState()
+    }
+
+    function applyState() {
+      var sidebar = shell.querySelector('[data-rfr-shell-sidebar]')
+      var overlay = shell.querySelector('[data-rfr-shell-overlay]')
+      var mobileNav = shell.querySelector('[data-rfr-shell-mobile-nav]')
+      var hamburgers = shell.querySelectorAll('[data-rfr-shell-toggle]')
+
+      // Update CSS variable for sidebar width
+      var currentWidth = state.sidebarCollapsed ? sidebarCollapsedWidth : sidebarWidth
+      shell.style.setProperty('--shell-sidebar-width', currentWidth)
+
+      if (sidebar) {
+        if (isMobile()) {
+          sidebar.style.position = 'fixed'
+          sidebar.style.top = '0'
+          sidebar.style.zIndex = '40'
+          sidebar.style.width = sidebarWidth
+          sidebar.style[sidebarPosition === 'right' ? 'right' : 'left'] = '0'
+          sidebar.style.transform = state.sidebarOpen
+            ? 'translateX(0)'
+            : sidebarPosition === 'right' ? 'translateX(100%)' : 'translateX(-100%)'
+          sidebar.removeAttribute('data-collapsed')
+        } else {
+          sidebar.style.position = 'relative'
+          sidebar.style.transform = ''
+          sidebar.style.width = currentWidth
+          if (state.sidebarCollapsed) {
+            sidebar.setAttribute('data-collapsed', '')
+          } else {
+            sidebar.removeAttribute('data-collapsed')
+          }
+        }
+        if (state.sidebarOpen) {
+          sidebar.setAttribute('data-open', '')
+        } else {
+          sidebar.removeAttribute('data-open')
+        }
+      }
+
+      if (overlay) {
+        if (isMobile() && state.sidebarOpen) {
+          overlay.style.display = ''
+        } else {
+          overlay.style.display = 'none'
+        }
+      }
+
+      if (mobileNav) {
+        mobileNav.style.display = isMobile() ? '' : 'none'
+      }
+
+      hamburgers.forEach(function (btn) {
+        btn.setAttribute('aria-expanded', String(state.sidebarOpen))
+      })
+    }
+
+    // Bind toggle buttons
+    shell.addEventListener('click', function (e) {
+      var toggle = e.target.closest('[data-rfr-shell-toggle]')
+      if (toggle) {
+        toggleSidebar()
+        return
+      }
+      var overlayClick = e.target.closest('[data-rfr-shell-overlay]')
+      if (overlayClick) {
+        closeSidebar()
+      }
+    })
+
+    // Expose API for external scripts
+    window.__rfr_shell = { toggleSidebar: toggleSidebar, closeSidebar: closeSidebar, state: state }
+
+    // Responsive listener
+    window.addEventListener('resize', updateBreakpoint)
+    updateBreakpoint()
+  })()
+</script>

package/dist/astro-app-shell/AppShellContent.astro

@@ -0,0 +1,29 @@
+---
+/**
+ * AppShellContent — scrollable content area within AppShellMain.
+ */
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** Tailwind max-width class suffix, e.g. '6xl' -> max-w-6xl */
+  maxWidth?: string
+}
+
+const { maxWidth, class: className, ...props } = Astro.props
+
+const mwClass = maxWidth ? `max-w-${maxWidth} mx-auto w-full` : ''
+---
+
+<main
+  role="main"
+  class={cn(
+    'flex-1 overflow-y-auto',
+    mwClass,
+    'px-4 sm:px-6 lg:px-8 py-6',
+    className,
+  )}
+  data-rfr-shell-content
+  {...props}
+>
+  <slot />
+</main>

package/dist/astro-app-shell/AppShellHeader.astro

@@ -0,0 +1,54 @@
+---
+/**
+ * AppShellHeader — header area within the AppShell.
+ * On mobile, automatically renders a hamburger toggle button.
+ */
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** Hide the hamburger menu button */
+  hideToggle?: boolean
+}
+
+const { hideToggle, class: className, ...props } = Astro.props
+---
+
+<header
+  role="banner"
+  class={cn(
+    'sticky top-0 z-30 flex items-center shrink-0',
+    'h-[var(--shell-header-height)]',
+    'border-b bg-background px-4',
+    className,
+  )}
+  data-rfr-shell-header
+  {...props}
+>
+  {!hideToggle && (
+    <button
+      type="button"
+      aria-label="Toggle sidebar"
+      aria-expanded="false"
+      class="inline-flex items-center justify-center p-2 mr-2 md:hidden"
+      data-rfr-shell-toggle
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        aria-hidden="true"
+      >
+        <line x1="3" y1="6" x2="21" y2="6" />
+        <line x1="3" y1="12" x2="21" y2="12" />
+        <line x1="3" y1="18" x2="21" y2="18" />
+      </svg>
+    </button>
+  )}
+  <slot />
+</header>

package/dist/astro-app-shell/AppShellMain.astro

@@ -0,0 +1,18 @@
+---
+/**
+ * AppShellMain — main content area wrapper (flex column).
+ */
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {}
+
+const { class: className, ...props } = Astro.props
+---
+
+<div
+  class={cn('flex flex-1 flex-col min-w-0 h-full', className)}
+  data-rfr-shell-main
+  {...props}
+>
+  <slot />
+</div>