@refraction-ui/astro 0.4.0 → 0.4.4

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 '../app-shell/index.ts'
+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 '../app-shell/index.ts'

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 '../auth/index.ts'
+export { createAuth } from '../auth/index.ts'

package/dist/astro-avatar/Avatar.astro

@@ -0,0 +1,22 @@
+---
+import { createAvatar, avatarVariants, type AvatarSize } from '../avatar/index.ts'
+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 '../avatar/index.ts'
+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 '../avatar/index.ts'
+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 '../avatar-group/index.ts'
+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 '../badge/index.ts'
+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 '../bottom-nav/index.ts'
+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 {}

package/dist/astro-breadcrumbs/Breadcrumbs.astro

@@ -0,0 +1,56 @@
+---
+import {
+  createBreadcrumbs,
+  breadcrumbsVariants,
+  breadcrumbItemVariants,
+  breadcrumbSeparatorStyles,
+  type BreadcrumbItem,
+} from '../breadcrumbs/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  pathname?: string
+  items?: BreadcrumbItem[]
+  labels?: Record<string, string>
+  separator?: string
+  maxItems?: number
+}
+
+const { pathname, items, labels, separator, maxItems, class: className, ...props } = Astro.props
+const api = createBreadcrumbs({ pathname, items, labels, separator, maxItems })
+const classes = cn(breadcrumbsVariants(), className)
+---
+
+<nav class={classes} {...api.ariaProps} {...props}>
+  <ol class="flex items-center gap-1.5">
+    {api.items.map((item, index) => {
+      const isLast = api.isLast(index)
+      return (
+        <li class="flex items-center gap-1.5">
+          {index > 0 && (
+            <span class={breadcrumbSeparatorStyles} aria-hidden="true">
+              {api.separator}
+            </span>
+          )}
+          {item.href && !isLast ? (
+            <a
+              href={item.href}
+              class={breadcrumbItemVariants({ active: 'false' })}
+            >
+              {item.label}
+            </a>
+          ) : (
+            <span
+              class={breadcrumbItemVariants({
+                active: isLast ? 'true' : 'false',
+              })}
+              {...api.itemAriaProps(index)}
+            >
+              {item.label}
+            </span>
+          )}
+        </li>
+      )
+    })}
+  </ol>
+</nav>

package/dist/astro-breadcrumbs/index.ts

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

package/dist/astro-button/Button.astro

@@ -0,0 +1,55 @@
+---
+import {
+  createButton,
+  buttonVariants,
+  getButtonType,
+  type ButtonVariant,
+  type ButtonSize,
+} from '../button/index.ts'
+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-button/index.ts

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