@refraction-ui/astro 0.3.1 → 0.4.2

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 '@refraction-ui/app-shell'
+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 '@refraction-ui/app-shell'
+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 '@refraction-ui/app-shell'
+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>

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

@@ -0,0 +1,33 @@
+---
+/**
+ * PageShellNav — navigation bar within PageShell.
+ */
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** Whether nav is sticky (default true) */
+  sticky?: boolean
+  /** Whether nav is transparent (default false) */
+  transparent?: boolean
+}
+
+const { sticky = true, transparent = false, class: className, ...props } = Astro.props
+
+const stickyClass = sticky ? 'sticky top-0 z-40' : ''
+const transparentClass = transparent ? 'bg-transparent' : 'bg-background border-b'
+---
+
+<nav
+  role="navigation"
+  aria-label="Main navigation"
+  class={cn(
+    'flex items-center h-[var(--page-nav-height)] px-4 sm:px-6 lg:px-8',
+    stickyClass,
+    transparentClass,
+    className,
+  )}
+  data-rfr-page-nav
+  {...props}
+>
+  <slot />
+</nav>

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

@@ -0,0 +1,32 @@
+---
+/**
+ * PageShellSection — a content section within PageShell.
+ */
+import { createPageShell } from '@refraction-ui/app-shell'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** Whether section spans edge-to-edge (default false) */
+  fullWidth?: boolean
+  /** Override max-width for this section */
+  maxWidth?: string
+  /** Whether section has padding (default true) */
+  padding?: boolean
+  /** Background variant */
+  background?: 'default' | 'muted' | 'primary' | 'none'
+}
+
+const { fullWidth, maxWidth, padding, background, class: className, ...props } = Astro.props
+
+// Use the default page shell to get section classes
+const api = createPageShell()
+const sectionClasses = api.getSectionClasses({ fullWidth, maxWidth, padding, background })
+---
+
+<section
+  class={cn('py-12', sectionClasses, className)}
+  data-rfr-page-section
+  {...props}
+>
+  <slot />
+</section>

package/dist/astro-app-shell/index.ts

@@ -0,0 +1,21 @@
+// AppShell compound components
+export { default as AppShell } from './AppShell.astro'
+export { default as AppShellSidebar } from './AppShellSidebar.astro'
+export { default as AppShellHeader } from './AppShellHeader.astro'
+export { default as AppShellMain } from './AppShellMain.astro'
+export { default as AppShellContent } from './AppShellContent.astro'
+export { default as AppShellMobileNav } from './AppShellMobileNav.astro'
+export { default as AppShellOverlay } from './AppShellOverlay.astro'
+
+// PageShell compound components
+export { default as PageShell } from './PageShell.astro'
+export { default as PageShellNav } from './PageShellNav.astro'
+export { default as PageShellSection } from './PageShellSection.astro'
+export { default as PageShellFooter } from './PageShellFooter.astro'
+
+// AuthShell compound components
+export { default as AuthShell } from './AuthShell.astro'
+export { default as AuthShellCard } from './AuthShellCard.astro'
+
+// Re-export core types
+export { createAppShell, createPageShell, createAuthShell } from '@refraction-ui/app-shell'

package/dist/astro-auth/AuthGuard.astro

@@ -0,0 +1,133 @@
+---
+/**
+ * AuthGuard — server-side component that conditionally renders children
+ * based on auth state. Since Astro is primarily server-rendered, this
+ * component checks auth at SSR time and includes a client-side script
+ * for dynamic scenarios.
+ *
+ * Slots:
+ *   - default: content shown when authenticated
+ *   - fallback: shown while loading / when unauthenticated (no roles check)
+ *   - unauthorized: shown when user lacks required roles
+ */
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** Roles required to view the content */
+  roles?: string[]
+  /** URL to redirect to when unauthenticated (client-side) */
+  redirectTo?: string
+  /** Provider type for auto-detection */
+  provider?: 'firebase' | 'supabase' | 'mock' | 'none'
+}
+
+const { roles, redirectTo, provider, class: className, ...props } = Astro.props
+
+const rolesJSON = JSON.stringify(roles ?? [])
+---
+
+<div
+  class={cn('rfr-auth-guard', className)}
+  data-rfr-auth-guard
+  data-rfr-auth-roles={rolesJSON}
+  data-rfr-auth-redirect={redirectTo}
+  data-rfr-auth-provider={provider}
+  {...props}
+>
+  <!-- Loading / fallback state (hidden once auth resolves) -->
+  <div data-rfr-auth-state="loading">
+    <slot name="fallback">
+      <div class="flex items-center justify-center p-8" aria-busy="true" aria-label="Checking authentication">
+        <svg
+          class="animate-spin h-6 w-6"
+          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>
+      </div>
+    </slot>
+  </div>
+
+  <!-- Authenticated content (hidden until auth confirmed) -->
+  <div data-rfr-auth-state="authenticated" style="display:none;">
+    <slot />
+  </div>
+
+  <!-- Unauthorized (hidden unless roles check fails) -->
+  <div data-rfr-auth-state="unauthorized" style="display:none;">
+    <slot name="unauthorized">
+      <div class="flex items-center justify-center p-8 text-muted-foreground" role="alert">
+        <p>You do not have permission to view this content.</p>
+      </div>
+    </slot>
+  </div>
+</div>
+
+<script is:inline>
+  ;(function () {
+    document.querySelectorAll('[data-rfr-auth-guard]').forEach(function (guard) {
+      var redirect = guard.getAttribute('data-rfr-auth-redirect')
+      var roles = []
+      try {
+        roles = JSON.parse(guard.getAttribute('data-rfr-auth-roles') || '[]')
+      } catch (_) { /* */ }
+
+      var loadingEl = guard.querySelector('[data-rfr-auth-state="loading"]')
+      var authedEl = guard.querySelector('[data-rfr-auth-state="authenticated"]')
+      var unauthEl = guard.querySelector('[data-rfr-auth-state="unauthorized"]')
+
+      function showState(state) {
+        if (loadingEl) loadingEl.style.display = state === 'loading' ? '' : 'none'
+        if (authedEl) authedEl.style.display = state === 'authenticated' ? '' : 'none'
+        if (unauthEl) unauthEl.style.display = state === 'unauthorized' ? '' : 'none'
+      }
+
+      function hasAnyRole(user, requiredRoles) {
+        if (!requiredRoles || requiredRoles.length === 0) return true
+        if (!user || !user.roles) return false
+        return requiredRoles.some(function (r) { return user.roles.indexOf(r) !== -1 })
+      }
+
+      function handleAuth(user) {
+        if (!user) {
+          if (redirect) {
+            window.location.href = redirect
+          } else {
+            showState('loading')
+          }
+          return
+        }
+        if (roles.length > 0 && !hasAnyRole(user, roles)) {
+          showState('unauthorized')
+          return
+        }
+        showState('authenticated')
+      }
+
+      // Listen for custom auth events dispatched by the auth system
+      window.addEventListener('rfr:auth:state', function (e) {
+        handleAuth(e.detail && e.detail.user)
+      })
+
+      // Check if auth state is already available
+      if (window.__rfr_auth && window.__rfr_auth._ready) {
+        handleAuth(window.__rfr_auth.user)
+      }
+    })
+  })()
+</script>

package/dist/astro-auth/index.ts

@@ -0,0 +1,5 @@
+export { default as AuthGuard } from './AuthGuard.astro'
+
+// Re-export core types for convenience
+export type { User, AuthState, AuthConfig } from '@refraction-ui/auth'
+export { createAuth } from '@refraction-ui/auth'

package/dist/astro-avatar/Avatar.astro

@@ -0,0 +1,22 @@
+---
+import { createAvatar, avatarVariants, type AvatarSize } from '@refraction-ui/avatar'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  size?: AvatarSize
+}
+
+const { size = 'md', class: className, ...props } = Astro.props
+const api = createAvatar({ size })
+---
+
+<span
+  class={cn(avatarVariants({ size }), className)}
+  data-rfr-avatar
+  data-rfr-avatar-size={size}
+  {...api.ariaProps}
+  {...api.dataAttributes}
+  {...props}
+>
+  <slot />
+</span>

package/dist/astro-avatar/AvatarFallback.astro

@@ -0,0 +1,18 @@
+---
+import { avatarFallbackVariants, type AvatarSize } from '@refraction-ui/avatar'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  size?: AvatarSize
+}
+
+const { size = 'md', class: className, ...props } = Astro.props
+---
+
+<span
+  class={cn(avatarFallbackVariants({ size }), className)}
+  data-rfr-avatar-fallback
+  {...props}
+>
+  <slot />
+</span>

package/dist/astro-avatar/AvatarImage.astro

@@ -0,0 +1,48 @@
+---
+import { avatarImageVariants } from '@refraction-ui/avatar'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  src?: string
+  alt?: string
+}
+
+const { src, alt = '', class: className, ...props } = Astro.props
+---
+
+<img
+  class={cn(avatarImageVariants(), className)}
+  src={src}
+  alt={alt}
+  data-rfr-avatar-image
+  {...props}
+/>
+
+<script>
+  document.querySelectorAll('[data-rfr-avatar-image]').forEach((img) => {
+    const imgEl = img as HTMLImageElement
+    const parent = imgEl.closest('[data-rfr-avatar]')
+    const fallback = parent?.querySelector('[data-rfr-avatar-fallback]') as HTMLElement | null
+
+    // Handle already-loaded images (cached)
+    if (imgEl.complete && imgEl.naturalWidth > 0) {
+      imgEl.style.display = ''
+      if (fallback) fallback.style.display = 'none'
+      return
+    }
+
+    // Hide image until loaded
+    imgEl.style.display = 'none'
+    if (fallback) fallback.style.display = ''
+
+    imgEl.addEventListener('load', () => {
+      imgEl.style.display = ''
+      if (fallback) fallback.style.display = 'none'
+    })
+
+    imgEl.addEventListener('error', () => {
+      imgEl.style.display = 'none'
+      if (fallback) fallback.style.display = ''
+    })
+  })
+</script>

package/dist/astro-avatar/index.ts

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

package/dist/astro-avatar-group/AvatarGroup.astro

@@ -0,0 +1,42 @@
+---
+import {
+  createAvatarGroup,
+  avatarGroupStyles,
+  avatarVariants,
+  avatarOverflowBadgeVariants,
+  avatarImageStyles,
+  avatarPresenceDotVariants,
+  type AvatarUser,
+  type AvatarSize,
+} from '@refraction-ui/avatar-group'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  users: AvatarUser[]
+  max?: number
+  size?: AvatarSize
+}
+
+const { users, max, size = 'md', class: className, ...props } = Astro.props
+const api = createAvatarGroup({ users, max, size })
+---
+
+<div class={cn(avatarGroupStyles, className)} {...api.ariaProps} {...props}>
+  {api.visibleUsers.map((user) => (
+    <div class={avatarVariants({ size })} {...api.getAvatarAriaProps(user)}>
+      {user.src ? (
+        <img src={user.src} alt={user.name} class={avatarImageStyles} />
+      ) : (
+        <span>{api.getInitials(user.name)}</span>
+      )}
+      {user.status && (
+        <span class={avatarPresenceDotVariants({ size, status: user.status })} />
+      )}
+    </div>
+  ))}
+  {api.overflowCount > 0 && (
+    <div class={avatarOverflowBadgeVariants({ size })} {...api.overflowBadgeProps}>
+      +{api.overflowCount}
+    </div>
+  )}
+</div>

package/dist/astro-avatar-group/index.ts

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

package/dist/astro-badge/Badge.astro

@@ -0,0 +1,27 @@
+---
+import {
+  createBadge,
+  badgeVariants,
+  type BadgeVariant,
+  type BadgeSize,
+} from '@refraction-ui/badge'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  variant?: BadgeVariant
+  size?: BadgeSize
+}
+
+const { variant, size, class: className, ...props } = Astro.props
+const api = createBadge({ variant, size })
+const classes = cn(badgeVariants({ variant, size }), className)
+---
+
+<div
+  class={classes}
+  {...api.ariaProps}
+  {...api.dataAttributes}
+  {...props}
+>
+  <slot />
+</div>

package/dist/astro-badge/index.ts

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

package/dist/astro-bottom-nav/BottomNav.astro

@@ -0,0 +1,40 @@
+---
+import {
+  createBottomNav,
+  bottomNavVariants,
+  bottomNavTabVariants,
+  type NavTab,
+} from '@refraction-ui/bottom-nav'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  tabs?: NavTab[]
+  currentPath?: string
+}
+
+const { tabs = [], currentPath, class: className, ...props } = Astro.props
+const api = createBottomNav({ tabs, currentPath })
+const classes = cn(bottomNavVariants(), className)
+---
+
+<nav class={classes} {...api.ariaProps} {...props}>
+  <div class="flex">
+    {tabs.map((tab) => {
+      const active = api.isActive(tab.href)
+      return (
+        <a
+          href={tab.href}
+          class={bottomNavTabVariants({ active: active ? 'true' : 'false' })}
+          {...api.tabAriaProps(tab.href)}
+        >
+          {tab.icon && (
+            <span aria-hidden="true">
+              {active && tab.activeIcon ? tab.activeIcon : tab.icon}
+            </span>
+          )}
+          <span>{tab.label}</span>
+        </a>
+      )
+    })}
+  </div>
+</nav>

package/dist/astro-bottom-nav/index.ts

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