@refraction-ui/astro 0.4.0 → 0.4.4

package/dist/auth/adapters/mock.ts

@@ -0,0 +1,74 @@
+import type { AuthAdapter, User } from '../types.js'
+
+/**
+ * Mock auth adapter for testing and development.
+ * No external dependencies. Stores state in memory.
+ */
+export function createMockAdapter(initialUser?: User): AuthAdapter {
+  let currentUser: User | null = initialUser ?? null
+  const listeners = new Set<(user: User | null) => void>()
+
+  function notify() {
+    for (const fn of listeners) {
+      fn(currentUser)
+    }
+  }
+
+  return {
+    async signIn(email, _password) {
+      currentUser = {
+        uid: 'mock-' + email,
+        email,
+        displayName: email.split('@')[0],
+        photoURL: null,
+        roles: ['student'],
+      }
+      notify()
+      return currentUser
+    },
+
+    async signInWithOAuth(_provider) {
+      currentUser = {
+        uid: 'mock-oauth',
+        email: 'oauth@example.com',
+        displayName: 'OAuth User',
+        photoURL: null,
+        roles: ['student'],
+      }
+      notify()
+      return currentUser
+    },
+
+    async signUp(email, _password, displayName) {
+      currentUser = {
+        uid: 'mock-' + email,
+        email,
+        displayName,
+        photoURL: null,
+        roles: ['student'],
+      }
+      notify()
+      return currentUser
+    },
+
+    async signOut() {
+      currentUser = null
+      notify()
+    },
+
+    async resetPassword(_email) {
+      // no-op in mock
+    },
+
+    async getToken() {
+      return currentUser ? 'mock-token-' + currentUser.uid : null
+    },
+
+    onAuthStateChange(callback) {
+      listeners.add(callback)
+      // Fire immediately with current state
+      callback(currentUser)
+      return () => { listeners.delete(callback) }
+    },
+  }
+}

package/dist/auth/auth-machine.ts

@@ -0,0 +1,120 @@
+import type { User, AuthState, AuthStatus, AuthConfig, AuthAdapter, OAuthProvider } from './types.js'
+
+export interface AuthAPI {
+  getState(): AuthState
+  signIn(email: string, password: string): Promise<User>
+  signInWithOAuth(provider: OAuthProvider): Promise<User>
+  signUp(email: string, password: string, displayName: string): Promise<User>
+  signOut(): Promise<void>
+  resetPassword(email: string): Promise<void>
+  getToken(): Promise<string | null>
+  subscribe(fn: (state: AuthState) => void): () => void
+  destroy(): void
+}
+
+export function createAuth(
+  adapter: AuthAdapter,
+  config: Omit<AuthConfig, 'adapter'> = {},
+): AuthAPI {
+  const listeners = new Set<(state: AuthState) => void>()
+  let state: AuthState = { user: null, status: 'loading' }
+  let unsubAuth: (() => void) | null = null
+  let tokenRefreshTimer: ReturnType<typeof setInterval> | null = null
+
+  const { tokenRefreshInterval = 50, testMode = false, testUser } = config
+
+  function setState(newState: AuthState) {
+    state = newState
+    for (const fn of listeners) {
+      fn(state)
+    }
+  }
+
+  function setUser(user: User | null) {
+    setState({
+      user,
+      status: user ? 'authenticated' : 'unauthenticated',
+    })
+  }
+
+  // Start token refresh timer
+  function startTokenRefresh() {
+    if (tokenRefreshTimer) clearInterval(tokenRefreshTimer)
+    tokenRefreshTimer = setInterval(
+      () => { adapter.getToken().catch(() => {}) },
+      tokenRefreshInterval * 60 * 1000,
+    )
+  }
+
+  // Initialize
+  if (testMode && testUser) {
+    setUser(testUser)
+  } else {
+    unsubAuth = adapter.onAuthStateChange((user) => {
+      setUser(user)
+      if (user) {
+        startTokenRefresh()
+      } else if (tokenRefreshTimer) {
+        clearInterval(tokenRefreshTimer)
+        tokenRefreshTimer = null
+      }
+    })
+  }
+
+  return {
+    getState() {
+      return state
+    },
+
+    async signIn(email, password) {
+      const user = await adapter.signIn(email, password)
+      setUser(user)
+      startTokenRefresh()
+      return user
+    },
+
+    async signInWithOAuth(provider) {
+      const user = await adapter.signInWithOAuth(provider)
+      setUser(user)
+      startTokenRefresh()
+      return user
+    },
+
+    async signUp(email, password, displayName) {
+      const user = await adapter.signUp(email, password, displayName)
+      setUser(user)
+      startTokenRefresh()
+      return user
+    },
+
+    async signOut() {
+      await adapter.signOut()
+      if (tokenRefreshTimer) {
+        clearInterval(tokenRefreshTimer)
+        tokenRefreshTimer = null
+      }
+      setUser(null)
+    },
+
+    async resetPassword(email) {
+      await adapter.resetPassword(email)
+    },
+
+    async getToken() {
+      return adapter.getToken()
+    },
+
+    subscribe(fn) {
+      listeners.add(fn)
+      return () => { listeners.delete(fn) }
+    },
+
+    destroy() {
+      listeners.clear()
+      unsubAuth?.()
+      if (tokenRefreshTimer) {
+        clearInterval(tokenRefreshTimer)
+      }
+    },
+  }
+}

package/dist/auth/index.ts

@@ -0,0 +1,22 @@
+export type {
+  User,
+  AuthState,
+  AuthStatus,
+  OAuthProvider,
+  AuthConfig,
+  AuthAdapter,
+} from './types.js'
+
+export { createAuth, type AuthAPI } from './auth-machine.js'
+
+export {
+  hasRole,
+  hasAnyRole,
+  hasAllRoles,
+  canAccessAdmin,
+  canAccessReviewer,
+  getDefaultPortal,
+  getAssignableRoles,
+} from './rbac.js'
+
+export { createMockAdapter } from './adapters/mock.js'

package/dist/auth/rbac.ts

@@ -0,0 +1,44 @@
+import type { User } from './types.js'
+
+/** Check if user has a specific role */
+export function hasRole(user: User | null, role: string): boolean {
+  return user?.roles?.includes(role) ?? false
+}
+
+/** Check if user has any of the specified roles */
+export function hasAnyRole(user: User | null, roles: string[]): boolean {
+  if (!user?.roles) return false
+  return roles.some((role) => user.roles.includes(role))
+}
+
+/** Check if user has all of the specified roles */
+export function hasAllRoles(user: User | null, roles: string[]): boolean {
+  if (!user?.roles) return false
+  return roles.every((role) => user.roles.includes(role))
+}
+
+/** Convenience role checks */
+export function canAccessAdmin(user: User | null): boolean {
+  return hasRole(user, 'admin')
+}
+
+export function canAccessReviewer(user: User | null): boolean {
+  return hasAnyRole(user, ['admin', 'reviewer'])
+}
+
+/** Get the default portal URL based on highest-privilege role */
+export function getDefaultPortal(roles: string[]): string {
+  if (roles.includes('admin')) return '/admin'
+  if (roles.includes('reviewer')) return '/reviewer'
+  if (roles.includes('parent')) return '/parent'
+  if (roles.includes('student')) return '/student'
+  return '/'
+}
+
+/** Get roles that the given user can assign to others */
+export function getAssignableRoles(user: User | null): string[] {
+  if (!user) return []
+  if (hasRole(user, 'admin')) return ['admin', 'reviewer', 'parent', 'student']
+  if (hasRole(user, 'reviewer')) return ['student']
+  return []
+}

package/dist/auth/types.ts

@@ -0,0 +1,44 @@
+/** User object — framework-agnostic, provider-agnostic */
+export interface User {
+  uid: string
+  email: string | null
+  displayName: string | null
+  photoURL: string | null
+  roles: string[]
+}
+
+/** Auth state */
+export type AuthStatus = 'loading' | 'authenticated' | 'unauthenticated'
+
+export interface AuthState {
+  user: User | null
+  status: AuthStatus
+}
+
+/** OAuth providers */
+export type OAuthProvider = string
+
+/**
+ * AuthAdapter — interface implemented by provider adapters (e.g. Firebase, Supabase, Auth0).
+ * Consumers must provide an implementation of this adapter to the AuthProvider.
+ */
+export interface AuthAdapter {
+  signIn(email: string, password: string): Promise<User>
+  signInWithOAuth(provider: OAuthProvider): Promise<User>
+  signUp(email: string, password: string, displayName: string): Promise<User>
+  signOut(): Promise<void>
+  resetPassword(email: string): Promise<void>
+  getToken(): Promise<string | null>
+  onAuthStateChange(callback: (user: User | null) => void): () => void
+}
+
+export interface AuthConfig {
+  /** The adapter implementation for your specific auth provider (Supabase, Firebase, Auth0, Custom, etc.) */
+  adapter: AuthAdapter
+  /** Token refresh interval in minutes. Default: 50 */
+  tokenRefreshInterval?: number
+  /** Enable E2E test mode with mock user */
+  testMode?: boolean
+  /** Mock user for test mode */
+  testUser?: User
+}

package/dist/avatar/avatar.styles.ts

@@ -0,0 +1,47 @@
+import { cva } from '../shared/index.ts'
+import type { TokenContract } from '../shared/index.ts'
+
+export const avatarTokens: TokenContract = {
+  name: 'avatar',
+  tokens: {
+    bg: { variable: '--rfr-avatar-bg', fallback: 'hsl(var(--muted))' },
+    fg: { variable: '--rfr-avatar-fg', fallback: 'hsl(var(--muted-foreground))' },
+    border: { variable: '--rfr-avatar-border', fallback: 'hsl(var(--border))' },
+  },
+}
+
+export const avatarVariants = cva({
+  base: 'relative flex shrink-0 overflow-hidden rounded-full',
+  variants: {
+    size: {
+      xs: 'h-6 w-6',
+      sm: 'h-8 w-8',
+      md: 'h-10 w-10',
+      lg: 'h-12 w-12',
+      xl: 'h-16 w-16',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+})
+
+export const avatarImageVariants = cva({
+  base: 'aspect-square h-full w-full object-cover',
+})
+
+export const avatarFallbackVariants = cva({
+  base: 'flex h-full w-full items-center justify-center rounded-full bg-muted text-muted-foreground',
+  variants: {
+    size: {
+      xs: 'text-xs',
+      sm: 'text-xs',
+      md: 'text-sm',
+      lg: 'text-base',
+      xl: 'text-lg',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+})

package/dist/avatar/avatar.ts

@@ -0,0 +1,73 @@
+import type { AccessibilityProps } from '../shared/index.ts'
+
+export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+
+export type AvatarLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error'
+
+export interface AvatarProps {
+  src?: string
+  alt?: string
+  fallback?: string
+  size?: AvatarSize
+}
+
+export interface AvatarAPI {
+  /** ARIA attributes to spread on the root element */
+  ariaProps: Partial<AccessibilityProps>
+  /** Data attributes for CSS styling hooks */
+  dataAttributes: Record<string, string>
+  /** Image ARIA props */
+  imageProps: {
+    alt: string
+    role: string
+  }
+  /** Fallback text (initials) */
+  fallbackText: string
+  /** Current state */
+  state: {
+    size: AvatarSize
+    hasSrc: boolean
+  }
+}
+
+/**
+ * Extract initials from a name or fallback string.
+ * Takes first letter of first two words, uppercased.
+ */
+export function getInitials(name: string): string {
+  const parts = name.trim().split(/\s+/)
+  if (parts.length === 0 || parts[0] === '') return ''
+  if (parts.length === 1) return parts[0].charAt(0).toUpperCase()
+  return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0)).toUpperCase()
+}
+
+export function createAvatar(props: AvatarProps = {}): AvatarAPI {
+  const { src, alt = '', fallback = '', size = 'md' } = props
+
+  const ariaProps: Partial<AccessibilityProps> = {
+    role: 'img',
+  }
+  if (alt) {
+    ariaProps['aria-label'] = alt
+  }
+
+  const fallbackText = fallback ? getInitials(fallback) : (alt ? getInitials(alt) : '')
+
+  const dataAttributes: Record<string, string> = {
+    'data-slot': 'avatar',
+  }
+
+  return {
+    ariaProps,
+    dataAttributes,
+    imageProps: {
+      alt,
+      role: 'img',
+    },
+    fallbackText,
+    state: {
+      size,
+      hasSrc: !!src,
+    },
+  }
+}

package/dist/avatar/index.ts

@@ -0,0 +1,15 @@
+export {
+  createAvatar,
+  getInitials,
+  type AvatarProps,
+  type AvatarAPI,
+  type AvatarSize,
+  type AvatarLoadingStatus,
+} from './avatar.js'
+
+export {
+  avatarVariants,
+  avatarImageVariants,
+  avatarFallbackVariants,
+  avatarTokens,
+} from './avatar.styles.js'

package/dist/avatar-group/avatar-group.styles.ts

@@ -0,0 +1,63 @@
+import { cva } from '../shared/index.ts'
+
+export const avatarGroupStyles =
+  'flex items-center -space-x-2'
+
+export const avatarVariants = cva({
+  base: 'relative inline-flex items-center justify-center rounded-full border-2 border-background bg-muted text-muted-foreground font-medium overflow-hidden ring-2 ring-background',
+  variants: {
+    size: {
+      xs: 'h-6 w-6 text-[10px]',
+      sm: 'h-8 w-8 text-xs',
+      md: 'h-10 w-10 text-sm',
+      lg: 'h-12 w-12 text-base',
+      xl: 'h-16 w-16 text-xl',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+})
+
+export const avatarOverflowBadgeVariants = cva({
+  base: 'relative inline-flex items-center justify-center rounded-full border-2 border-background bg-muted text-muted-foreground font-medium ring-2 ring-background',
+  variants: {
+    size: {
+      xs: 'h-6 w-6 text-[10px]',
+      sm: 'h-8 w-8 text-xs',
+      md: 'h-10 w-10 text-sm',
+      lg: 'h-12 w-12 text-base',
+      xl: 'h-16 w-16 text-xl',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+})
+
+export const avatarImageStyles =
+  'h-full w-full object-cover'
+
+export const avatarPresenceDotVariants = cva({
+  base: 'absolute bottom-0 right-0 rounded-full border-2 border-background',
+  variants: {
+    size: {
+      xs: 'h-2 w-2',
+      sm: 'h-2.5 w-2.5',
+      md: 'h-3 w-3',
+      lg: 'h-3.5 w-3.5',
+      xl: 'h-4 w-4',
+    },
+    status: {
+      online: 'bg-green-500',
+      offline: 'bg-gray-400',
+      away: 'bg-yellow-500',
+      busy: 'bg-red-500',
+      dnd: 'bg-red-500',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+    status: 'offline',
+  },
+})

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

@@ -0,0 +1,106 @@
+import type { AccessibilityProps } from '../shared/index.ts'
+import { generateId } from '../shared/index.ts'
+
+export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+export type PresenceStatus = 'online' | 'offline' | 'away' | 'busy' | 'dnd'
+
+export interface AvatarUser {
+  /** Unique identifier */
+  id: string
+  /** Display name */
+  name: string
+  /** Avatar image URL */
+  src?: string
+  /** Online presence status */
+  status?: PresenceStatus
+}
+
+export interface AvatarGroupProps {
+  /** Array of users to display */
+  users: AvatarUser[]
+  /** Maximum number of visible avatars */
+  max?: number
+  /** Avatar size */
+  size?: AvatarSize
+}
+
+export interface AvatarGroupAPI {
+  /** Users that are visible (within max limit) */
+  visibleUsers: AvatarUser[]
+  /** Number of overflow users */
+  overflowCount: number
+  /** All overflow users (for tooltip/popup) */
+  overflowUsers: AvatarUser[]
+  /** ARIA props for the group container */
+  ariaProps: Partial<AccessibilityProps> & Record<string, unknown>
+  /** Get ARIA props for an individual avatar */
+  getAvatarAriaProps(user: AvatarUser): Record<string, unknown>
+  /** Get initials from a user's name */
+  getInitials(name: string): string
+  /** Get the overflow badge ARIA props */
+  overflowBadgeProps: Record<string, unknown>
+  /** Generated IDs */
+  ids: {
+    group: string
+    label: string
+  }
+}
+
+export const AVATAR_SIZES: Record<AvatarSize, { width: number; fontSize: number }> = {
+  xs: { width: 24, fontSize: 10 },
+  sm: { width: 32, fontSize: 12 },
+  md: { width: 40, fontSize: 14 },
+  lg: { width: 48, fontSize: 16 },
+  xl: { width: 64, fontSize: 20 },
+}
+
+export function getInitials(name: string): string {
+  const parts = name.trim().split(/\s+/)
+  if (parts.length === 0) return ''
+  if (parts.length === 1) return parts[0].charAt(0).toUpperCase()
+  return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0)).toUpperCase()
+}
+
+export function createAvatarGroup(props: AvatarGroupProps): AvatarGroupAPI {
+  const { users, max, size = 'md' } = props
+
+  const visibleUsers = max && max > 0 ? users.slice(0, max) : users
+  const overflowUsers = max && max > 0 ? users.slice(max) : []
+  const overflowCount = overflowUsers.length
+
+  const groupId = generateId('rfr-avatar-group')
+  const labelId = generateId('rfr-avatar-group-label')
+
+  const ariaProps: Partial<AccessibilityProps> & Record<string, unknown> = {
+    role: 'group',
+    'aria-label': `${users.length} users`,
+    id: groupId,
+  }
+
+  function getAvatarAriaProps(user: AvatarUser): Record<string, unknown> {
+    const label = user.status ? `${user.name} (${user.status})` : user.name
+    return {
+      role: 'img',
+      'aria-label': label,
+    }
+  }
+
+  const overflowBadgeProps: Record<string, unknown> = {
+    role: 'button',
+    'aria-label': `${overflowCount} more users`,
+  }
+
+  return {
+    visibleUsers,
+    overflowCount,
+    overflowUsers,
+    ariaProps,
+    getAvatarAriaProps,
+    getInitials,
+    overflowBadgeProps,
+    ids: {
+      group: groupId,
+      label: labelId,
+    },
+  }
+}

package/dist/avatar-group/index.ts

@@ -0,0 +1,18 @@
+export {
+  createAvatarGroup,
+  getInitials,
+  AVATAR_SIZES,
+  type AvatarGroupProps,
+  type AvatarGroupAPI,
+  type AvatarUser,
+  type AvatarSize,
+  type PresenceStatus,
+} from './avatar-group.js'
+
+export {
+  avatarGroupStyles,
+  avatarVariants,
+  avatarOverflowBadgeVariants,
+  avatarImageStyles,
+  avatarPresenceDotVariants,
+} from './avatar-group.styles.js'

package/dist/badge/badge.styles.ts

@@ -0,0 +1,24 @@
+import { cva } from '../shared/index.ts'
+
+export const badgeVariants = cva({
+  base: 'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  variants: {
+    variant: {
+      default: 'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
+      primary: 'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
+      secondary: 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+      destructive: 'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80 font-semibold',
+      outline: 'text-foreground',
+      success: 'border-transparent bg-green-500 text-white shadow hover:bg-green-500/80 font-semibold',
+      warning: 'border-transparent bg-yellow-500 text-white shadow hover:bg-yellow-500/80 font-semibold',
+    },
+    size: {
+      sm: 'px-2 py-0 text-[10px]',
+      md: 'px-2.5 py-0.5 text-xs',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+    size: 'md',
+  },
+})