@refraction-ui/astro 0.4.0 → 0.4.4

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

@@ -0,0 +1,81 @@
+---
+import { animatedTextVariants } from '../animated-text/index.ts'
+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 '../animated-text/index.ts'
+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 '../app-shell/index.ts'
+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>

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

@@ -0,0 +1,27 @@
+---
+/**
+ * AppShellMobileNav — fixed bottom navigation bar, visible only on mobile.
+ */
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {}
+
+const { class: className, ...props } = Astro.props
+---
+
+<nav
+  role="navigation"
+  aria-label="Mobile navigation"
+  class={cn(
+    'fixed bottom-0 left-0 right-0 z-30',
+    'flex items-center justify-around',
+    'border-t bg-background',
+    'h-14',
+    className,
+  )}
+  style="display:none;"
+  data-rfr-shell-mobile-nav
+  {...props}
+>
+  <slot />
+</nav>

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

@@ -0,0 +1,21 @@
+---
+/**
+ * AppShellOverlay — backdrop overlay shown when mobile sidebar is open.
+ */
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {}
+
+const { class: className, ...props } = Astro.props
+---
+
+<div
+  aria-hidden="true"
+  class={cn(
+    'fixed inset-0 z-30 bg-black/50 transition-opacity',
+    className,
+  )}
+  style="display:none;"
+  data-rfr-shell-overlay
+  {...props}
+/>

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

@@ -0,0 +1,26 @@
+---
+/**
+ * AppShellSidebar — sidebar navigation area within the AppShell.
+ */
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {}
+
+const { class: className, ...props } = Astro.props
+---
+
+<aside
+  role="navigation"
+  aria-label="Sidebar"
+  class={cn(
+    'flex flex-col shrink-0 overflow-y-auto overflow-x-hidden',
+    'bg-background border-r',
+    'transition-[width,transform] duration-200 ease-in-out',
+    'h-full relative w-[var(--shell-sidebar-width)]',
+    className,
+  )}
+  data-rfr-shell-sidebar
+  {...props}
+>
+  <slot />
+</aside>

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

@@ -0,0 +1,31 @@
+---
+/**
+ * AuthShell — centered layout for authentication pages (sign-in, sign-up, etc.).
+ */
+import { createAuthShell, type AuthShellConfig } from '../app-shell/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** Card max-width preset (default 'sm') */
+  maxWidth?: 'xs' | 'sm' | 'md'
+  /** Card position (default 'center') */
+  position?: 'center' | 'left'
+  /** Show decorative background (default true) */
+  showBackground?: boolean
+}
+
+const { maxWidth, position, showBackground, class: className, ...props } = Astro.props
+
+const config: AuthShellConfig = { maxWidth, position, showBackground }
+const api = createAuthShell(config)
+---
+
+<div
+  role="main"
+  aria-label="Authentication"
+  class={cn(api.containerClasses, className)}
+  data-rfr-auth-shell
+  {...props}
+>
+  <slot />
+</div>

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

@@ -0,0 +1,24 @@
+---
+/**
+ * AuthShellCard — card container within AuthShell for form content.
+ */
+import { createAuthShell, type AuthShellConfig } from '../app-shell/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** Card max-width preset (default 'sm') */
+  maxWidth?: 'xs' | 'sm' | 'md'
+}
+
+const { maxWidth, class: className, ...props } = Astro.props
+
+const api = createAuthShell({ maxWidth })
+---
+
+<div
+  class={cn(api.cardClasses, className)}
+  data-rfr-auth-card
+  {...props}
+>
+  <slot />
+</div>

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

@@ -0,0 +1,36 @@
+---
+/**
+ * PageShell — root layout for marketing/landing pages with nav, sections, footer.
+ */
+import { createPageShell, type PageShellConfig } from '../app-shell/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** Max width for contained sections (default '80rem') */
+  maxWidth?: string
+  /** Navigation bar height (default '4rem') */
+  navHeight?: string
+  /** Whether nav is transparent (default false) */
+  navTransparent?: boolean
+  /** Whether nav is sticky (default true) */
+  navSticky?: boolean
+  /** Number of footer columns (default 4) */
+  footerColumns?: number
+}
+
+const { maxWidth, navHeight, navTransparent, navSticky, footerColumns, class: className, ...props } = Astro.props
+
+const config: PageShellConfig = { maxWidth, navHeight, navTransparent, navSticky, footerColumns }
+const api = createPageShell(config)
+const cssVars = api.getCSSVariables()
+const styleStr = Object.entries(cssVars).map(([k, v]) => `${k}:${v}`).join(';')
+---
+
+<div
+  class={cn('flex min-h-screen flex-col', className)}
+  style={styleStr}
+  data-rfr-page-shell
+  {...props}
+>
+  <slot />
+</div>

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

@@ -0,0 +1,30 @@
+---
+/**
+ * PageShellFooter — footer area within PageShell.
+ */
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** Number of grid columns (default 4) */
+  columns?: number
+}
+
+const { columns = 4, class: className, ...props } = Astro.props
+---
+
+<footer
+  role="contentinfo"
+  class={cn(
+    'border-t bg-muted py-12 px-4 sm:px-6 lg:px-8',
+    className,
+  )}
+  data-rfr-page-footer
+  {...props}
+>
+  <div
+    class="mx-auto max-w-[var(--page-max-width)] grid gap-8"
+    style={`grid-template-columns: repeat(${columns}, minmax(0, 1fr));`}
+  >
+    <slot />
+  </div>
+</footer>