@refraction-ui/astro 0.4.2 → 0.4.4

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

@@ -0,0 +1,252 @@
+import { generateId } from '../shared/index.ts'
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export type BreakpointName = 'mobile' | 'tablet' | 'desktop'
+
+export interface AppShellConfig {
+  /** Sidebar width when expanded (default '16rem') */
+  sidebarWidth?: string
+  /** Sidebar width when collapsed to icon-only (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 be collapsed on desktop (default true) */
+  sidebarCollapsible?: boolean
+  /** Whether sidebar starts collapsed on desktop (default false) */
+  sidebarDefaultCollapsed?: boolean
+  /** Mobile nav position (default 'bottom') */
+  mobileNavPosition?: 'bottom' | 'none'
+}
+
+export interface AppShellState {
+  /** On mobile: drawer open/closed */
+  sidebarOpen: boolean
+  /** On desktop: full/icon-only */
+  sidebarCollapsed: boolean
+  /** Current responsive breakpoint */
+  breakpoint: BreakpointName
+  /** Convenience: breakpoint === 'mobile' */
+  isMobile: boolean
+  /** Convenience: breakpoint === 'tablet' */
+  isTablet: boolean
+  /** Convenience: breakpoint === 'desktop' */
+  isDesktop: boolean
+}
+
+export type AppShellSubscriber = (state: AppShellState) => void
+
+export interface AppShellAPI {
+  /** Current state (snapshot — will not mutate) */
+  state: AppShellState
+  /** Resolved config with all defaults applied */
+  config: Required<AppShellConfig>
+
+  /** Mobile: open/close drawer. Desktop: collapse/expand sidebar. */
+  toggleSidebar(): void
+  /** Open sidebar (mobile drawer) */
+  openSidebar(): void
+  /** Close sidebar (mobile drawer) */
+  closeSidebar(): void
+  /** Collapse sidebar to icon-only (desktop) */
+  collapseSidebar(): void
+  /** Expand sidebar from icon-only (desktop) */
+  expandSidebar(): void
+  /** Update the current breakpoint */
+  setBreakpoint(bp: BreakpointName): void
+
+  /** CSS custom property map for layout dimensions */
+  getCSSVariables(): Record<string, string>
+
+  /** ARIA attributes for sidebar region */
+  sidebarAriaProps: Record<string, string>
+  /** ARIA attributes for main region */
+  mainAriaProps: Record<string, string>
+  /** ARIA attributes for header region */
+  headerAriaProps: Record<string, string>
+  /** ARIA attributes for mobile bottom nav */
+  mobileNavAriaProps: Record<string, string>
+  /** ARIA attributes for mobile sidebar overlay/backdrop */
+  overlayAriaProps: Record<string, string>
+
+  /** Subscribe to state changes. Returns unsubscribe function. */
+  subscribe(fn: AppShellSubscriber): () => void
+}
+
+// ---------------------------------------------------------------------------
+// Defaults
+// ---------------------------------------------------------------------------
+
+const DEFAULTS: Required<AppShellConfig> = {
+  sidebarWidth: '16rem',
+  sidebarCollapsedWidth: '4rem',
+  headerHeight: '3.5rem',
+  mobileBreakpoint: 768,
+  tabletBreakpoint: 1024,
+  sidebarPosition: 'left',
+  sidebarCollapsible: true,
+  sidebarDefaultCollapsed: false,
+  mobileNavPosition: 'bottom',
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function resolveBreakpoint(
+  width: number,
+  mobileBp: number,
+  tabletBp: number,
+): BreakpointName {
+  if (width < mobileBp) return 'mobile'
+  if (width < tabletBp) return 'tablet'
+  return 'desktop'
+}
+
+function makeState(
+  sidebarOpen: boolean,
+  sidebarCollapsed: boolean,
+  breakpoint: BreakpointName,
+): AppShellState {
+  return {
+    sidebarOpen,
+    sidebarCollapsed,
+    breakpoint,
+    isMobile: breakpoint === 'mobile',
+    isTablet: breakpoint === 'tablet',
+    isDesktop: breakpoint === 'desktop',
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Factory
+// ---------------------------------------------------------------------------
+
+export function createAppShell(config?: AppShellConfig): AppShellAPI {
+  const resolved: Required<AppShellConfig> = { ...DEFAULTS, ...config }
+
+  // Internal mutable state
+  let sidebarOpen = false
+  let sidebarCollapsed = resolved.sidebarDefaultCollapsed
+  let breakpoint: BreakpointName = 'desktop' // SSR default
+
+  const subscribers = new Set<AppShellSubscriber>()
+
+  const sidebarId = generateId('rfr-shell-sidebar')
+
+  function getState(): AppShellState {
+    return makeState(sidebarOpen, sidebarCollapsed, breakpoint)
+  }
+
+  function notify(): void {
+    const s = getState()
+    for (const fn of subscribers) {
+      fn(s)
+    }
+  }
+
+  function toggleSidebar(): void {
+    if (breakpoint === 'mobile') {
+      sidebarOpen = !sidebarOpen
+    } else if (resolved.sidebarCollapsible) {
+      sidebarCollapsed = !sidebarCollapsed
+    }
+    notify()
+  }
+
+  function openSidebar(): void {
+    sidebarOpen = true
+    notify()
+  }
+
+  function closeSidebar(): void {
+    sidebarOpen = false
+    notify()
+  }
+
+  function collapseSidebar(): void {
+    sidebarCollapsed = true
+    notify()
+  }
+
+  function expandSidebar(): void {
+    sidebarCollapsed = false
+    notify()
+  }
+
+  function setBreakpoint(bp: BreakpointName): void {
+    if (bp === breakpoint) return
+    breakpoint = bp
+    // Auto-close mobile drawer when moving to desktop
+    if (bp !== 'mobile') {
+      sidebarOpen = false
+    }
+    notify()
+  }
+
+  function getCSSVariables(): Record<string, string> {
+    const currentWidth = sidebarCollapsed
+      ? resolved.sidebarCollapsedWidth
+      : resolved.sidebarWidth
+    return {
+      '--shell-sidebar-width': currentWidth,
+      '--shell-sidebar-full-width': resolved.sidebarWidth,
+      '--shell-sidebar-collapsed-width': resolved.sidebarCollapsedWidth,
+      '--shell-header-height': resolved.headerHeight,
+    }
+  }
+
+  function subscribe(fn: AppShellSubscriber): () => void {
+    subscribers.add(fn)
+    return () => {
+      subscribers.delete(fn)
+    }
+  }
+
+  return {
+    get state() {
+      return getState()
+    },
+    config: resolved,
+
+    toggleSidebar,
+    openSidebar,
+    closeSidebar,
+    collapseSidebar,
+    expandSidebar,
+    setBreakpoint,
+
+    getCSSVariables,
+
+    sidebarAriaProps: {
+      role: 'navigation',
+      'aria-label': 'Sidebar',
+      id: sidebarId,
+    },
+    mainAriaProps: {
+      role: 'main',
+    },
+    headerAriaProps: {
+      role: 'banner',
+    },
+    mobileNavAriaProps: {
+      role: 'navigation',
+      'aria-label': 'Mobile navigation',
+    },
+    overlayAriaProps: {
+      'aria-hidden': 'true',
+    },
+
+    subscribe,
+  }
+}
+
+export { resolveBreakpoint }

package/dist/app-shell/auth-shell.ts

@@ -0,0 +1,84 @@
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface AuthShellConfig {
+  /** Card max-width preset (default 'sm') */
+  maxWidth?: 'xs' | 'sm' | 'md'
+  /** Card position (default 'center') */
+  position?: 'center' | 'left'
+  /** Show decorative background pattern (default true) */
+  showBackground?: boolean
+}
+
+export interface AuthShellAPI {
+  /** Resolved config with all defaults */
+  config: Required<AuthShellConfig>
+  /** Tailwind classes for the outer container */
+  containerClasses: string
+  /** Tailwind classes for the card */
+  cardClasses: string
+  /** ARIA attributes for the auth region */
+  ariaProps: Record<string, string>
+}
+
+// ---------------------------------------------------------------------------
+// Defaults
+// ---------------------------------------------------------------------------
+
+const DEFAULTS: Required<AuthShellConfig> = {
+  maxWidth: 'sm',
+  position: 'center',
+  showBackground: true,
+}
+
+// ---------------------------------------------------------------------------
+// Class maps
+// ---------------------------------------------------------------------------
+
+const MAX_WIDTH_CLASSES: Record<AuthShellConfig['maxWidth'] & string, string> = {
+  xs: 'max-w-xs',
+  sm: 'max-w-sm',
+  md: 'max-w-md',
+}
+
+// ---------------------------------------------------------------------------
+// Factory
+// ---------------------------------------------------------------------------
+
+export function createAuthShell(config?: AuthShellConfig): AuthShellAPI {
+  const resolved: Required<AuthShellConfig> = { ...DEFAULTS, ...config }
+
+  const containerParts: string[] = ['min-h-screen', 'flex', 'w-full']
+
+  if (resolved.position === 'center') {
+    containerParts.push('items-center', 'justify-center')
+  } else {
+    // left-aligned: vertically centered, padded from left
+    containerParts.push('items-center', 'justify-start', 'pl-8 sm:pl-16 lg:pl-24')
+  }
+
+  if (resolved.showBackground) {
+    containerParts.push('bg-muted')
+  }
+
+  const cardParts: string[] = [
+    'w-full',
+    MAX_WIDTH_CLASSES[resolved.maxWidth],
+    'rounded-lg',
+    'border',
+    'bg-card',
+    'p-6',
+    'shadow-sm',
+  ]
+
+  return {
+    config: resolved,
+    containerClasses: containerParts.join(' '),
+    cardClasses: cardParts.join(' '),
+    ariaProps: {
+      role: 'main',
+      'aria-label': 'Authentication',
+    },
+  }
+}

package/dist/app-shell/index.ts

@@ -0,0 +1,22 @@
+export {
+  createAppShell,
+  resolveBreakpoint,
+  type BreakpointName,
+  type AppShellConfig,
+  type AppShellState,
+  type AppShellSubscriber,
+  type AppShellAPI,
+} from './app-shell.js'
+
+export {
+  createPageShell,
+  type PageShellConfig,
+  type SectionConfig,
+  type PageShellAPI,
+} from './page-shell.js'
+
+export {
+  createAuthShell,
+  type AuthShellConfig,
+  type AuthShellAPI,
+} from './auth-shell.js'

package/dist/app-shell/page-shell.ts

@@ -0,0 +1,125 @@
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface PageShellConfig {
+  /** Max width for contained sections (default '80rem') */
+  maxWidth?: string
+  /** Navigation bar height (default '4rem') */
+  navHeight?: string
+  /** Whether nav is transparent (for hero sections, default false) */
+  navTransparent?: boolean
+  /** Whether nav is sticky (default true) */
+  navSticky?: boolean
+  /** Number of footer columns (default 4) */
+  footerColumns?: number
+}
+
+export interface SectionConfig {
+  /** 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'
+}
+
+export interface PageShellAPI {
+  /** Resolved config with all defaults applied */
+  config: Required<PageShellConfig>
+  /** ARIA attributes for the nav region */
+  navAriaProps: Record<string, string>
+  /** ARIA attributes for the footer region */
+  footerAriaProps: Record<string, string>
+  /** Returns Tailwind utility classes for a section */
+  getSectionClasses(sectionConfig?: SectionConfig): string
+  /** CSS custom property map */
+  getCSSVariables(): Record<string, string>
+}
+
+// ---------------------------------------------------------------------------
+// Defaults
+// ---------------------------------------------------------------------------
+
+const DEFAULTS: Required<PageShellConfig> = {
+  maxWidth: '80rem',
+  navHeight: '4rem',
+  navTransparent: false,
+  navSticky: true,
+  footerColumns: 4,
+}
+
+// ---------------------------------------------------------------------------
+// Background class map
+// ---------------------------------------------------------------------------
+
+const BACKGROUND_CLASSES: Record<NonNullable<SectionConfig['background']>, string> = {
+  default: '',
+  muted: 'bg-muted',
+  primary: 'bg-primary text-primary-foreground',
+  none: '',
+}
+
+// ---------------------------------------------------------------------------
+// Factory
+// ---------------------------------------------------------------------------
+
+export function createPageShell(config?: PageShellConfig): PageShellAPI {
+  const resolved: Required<PageShellConfig> = { ...DEFAULTS, ...config }
+
+  function getSectionClasses(sectionConfig?: SectionConfig): string {
+    const {
+      fullWidth = false,
+      maxWidth,
+      padding = true,
+      background = 'default',
+    } = sectionConfig ?? {}
+
+    const classes: string[] = []
+
+    if (!fullWidth) {
+      classes.push('mx-auto')
+      classes.push('w-full')
+      // Use custom max-width or fall through to CSS variable
+      if (maxWidth) {
+        classes.push(`max-w-${maxWidth}`)
+      } else {
+        classes.push('max-w-[var(--page-max-width)]')
+      }
+    }
+
+    if (padding) {
+      classes.push('px-4 sm:px-6 lg:px-8')
+    }
+
+    const bg = BACKGROUND_CLASSES[background]
+    if (bg) {
+      classes.push(bg)
+    }
+
+    return classes.join(' ')
+  }
+
+  function getCSSVariables(): Record<string, string> {
+    return {
+      '--page-max-width': resolved.maxWidth,
+      '--page-nav-height': resolved.navHeight,
+      '--page-footer-columns': String(resolved.footerColumns),
+    }
+  }
+
+  return {
+    config: resolved,
+    navAriaProps: {
+      role: 'navigation',
+      'aria-label': 'Main navigation',
+    },
+    footerAriaProps: {
+      role: 'contentinfo',
+    },
+    getSectionClasses,
+    getCSSVariables,
+  }
+}

package/dist/astro-accordion/Button.astro

@@ -5,7 +5,7 @@ import {
   getButtonType,
   type ButtonVariant,
   type ButtonSize,
-} from '@refraction-ui/button'
+} from '../button/index.ts'
 import { cn } from '../shared/index.ts'
 
 interface Props extends astroHTML.JSX.HTMLAttributes {

package/dist/astro-ai/index.ts

@@ -13,4 +13,4 @@ export {
   type TTSProvider,
   type GenerateOptions,
   type TTSOptions,
-} from '@refraction-ui/ai'
+} from '../ai/index.ts'

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

@@ -1,5 +1,5 @@
 ---
-import { animatedTextVariants } from '@refraction-ui/animated-text'
+import { animatedTextVariants } from '../animated-text/index.ts'
 import { cn } from '../shared/index.ts'
 
 interface Props extends astroHTML.JSX.HTMLAttributes {

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

@@ -1,5 +1,5 @@
 ---
-import { typewriterVariants } from '@refraction-ui/animated-text'
+import { typewriterVariants } from '../animated-text/index.ts'
 import { cn } from '../shared/index.ts'
 
 interface Props extends astroHTML.JSX.HTMLAttributes {

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

@@ -3,7 +3,7 @@
  * 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 { createAppShell, type AppShellConfig } from '../app-shell/index.ts'
 import { cn } from '../shared/index.ts'
 
 interface Props extends astroHTML.JSX.HTMLAttributes {

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

@@ -2,7 +2,7 @@
 /**
  * AuthShell — centered layout for authentication pages (sign-in, sign-up, etc.).
  */
-import { createAuthShell, type AuthShellConfig } from '@refraction-ui/app-shell'
+import { createAuthShell, type AuthShellConfig } from '../app-shell/index.ts'
 import { cn } from '../shared/index.ts'
 
 interface Props extends astroHTML.JSX.HTMLAttributes {

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

@@ -2,7 +2,7 @@
 /**
  * AuthShellCard — card container within AuthShell for form content.
  */
-import { createAuthShell, type AuthShellConfig } from '@refraction-ui/app-shell'
+import { createAuthShell, type AuthShellConfig } from '../app-shell/index.ts'
 import { cn } from '../shared/index.ts'
 
 interface Props extends astroHTML.JSX.HTMLAttributes {

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

@@ -2,7 +2,7 @@
 /**
  * PageShell — root layout for marketing/landing pages with nav, sections, footer.
  */
-import { createPageShell, type PageShellConfig } from '@refraction-ui/app-shell'
+import { createPageShell, type PageShellConfig } from '../app-shell/index.ts'
 import { cn } from '../shared/index.ts'
 
 interface Props extends astroHTML.JSX.HTMLAttributes {

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

@@ -2,7 +2,7 @@
 /**
  * PageShellSection — a content section within PageShell.
  */
-import { createPageShell } from '@refraction-ui/app-shell'
+import { createPageShell } from '../app-shell/index.ts'
 import { cn } from '../shared/index.ts'
 
 interface Props extends astroHTML.JSX.HTMLAttributes {

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

@@ -18,4 +18,4 @@ 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'
+export { createAppShell, createPageShell, createAuthShell } from '../app-shell/index.ts'

package/dist/astro-auth/index.ts

@@ -1,5 +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'
+export type { User, AuthState, AuthConfig } from '../auth/index.ts'
+export { createAuth } from '../auth/index.ts'

package/dist/astro-avatar/Avatar.astro

@@ -1,5 +1,5 @@
 ---
-import { createAvatar, avatarVariants, type AvatarSize } from '@refraction-ui/avatar'
+import { createAvatar, avatarVariants, type AvatarSize } from '../avatar/index.ts'
 import { cn } from '../shared/index.ts'
 
 interface Props extends astroHTML.JSX.HTMLAttributes {

package/dist/astro-avatar/AvatarFallback.astro

@@ -1,5 +1,5 @@
 ---
-import { avatarFallbackVariants, type AvatarSize } from '@refraction-ui/avatar'
+import { avatarFallbackVariants, type AvatarSize } from '../avatar/index.ts'
 import { cn } from '../shared/index.ts'
 
 interface Props extends astroHTML.JSX.HTMLAttributes {

package/dist/astro-avatar/AvatarImage.astro

@@ -1,5 +1,5 @@
 ---
-import { avatarImageVariants } from '@refraction-ui/avatar'
+import { avatarImageVariants } from '../avatar/index.ts'
 import { cn } from '../shared/index.ts'
 
 interface Props extends astroHTML.JSX.HTMLAttributes {

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

@@ -8,7 +8,7 @@ import {
   avatarPresenceDotVariants,
   type AvatarUser,
   type AvatarSize,
-} from '@refraction-ui/avatar-group'
+} from '../avatar-group/index.ts'
 import { cn } from '../shared/index.ts'
 
 interface Props extends astroHTML.JSX.HTMLAttributes {

package/dist/astro-badge/Badge.astro

@@ -4,7 +4,7 @@ import {
   badgeVariants,
   type BadgeVariant,
   type BadgeSize,
-} from '@refraction-ui/badge'
+} from '../badge/index.ts'
 import { cn } from '../shared/index.ts'
 
 interface Props extends astroHTML.JSX.HTMLAttributes {

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

@@ -4,7 +4,7 @@ import {
   bottomNavVariants,
   bottomNavTabVariants,
   type NavTab,
-} from '@refraction-ui/bottom-nav'
+} from '../bottom-nav/index.ts'
 import { cn } from '../shared/index.ts'
 
 interface Props extends astroHTML.JSX.HTMLAttributes {

package/dist/astro-breadcrumbs/Breadcrumbs.astro

@@ -5,7 +5,7 @@ import {
   breadcrumbItemVariants,
   breadcrumbSeparatorStyles,
   type BreadcrumbItem,
-} from '@refraction-ui/breadcrumbs'
+} from '../breadcrumbs/index.ts'
 import { cn } from '../shared/index.ts'
 
 interface Props extends astroHTML.JSX.HTMLAttributes {

package/dist/astro-button/Button.astro

@@ -5,7 +5,7 @@ import {
   getButtonType,
   type ButtonVariant,
   type ButtonSize,
-} from '@refraction-ui/button'
+} from '../button/index.ts'
 import { cn } from '../shared/index.ts'
 
 interface Props extends astroHTML.JSX.HTMLAttributes {

package/dist/astro-calendar/Calendar.astro

@@ -4,7 +4,7 @@ import {
   calendarVariants,
   dayVariants,
   type CalendarDay,
-} from '@refraction-ui/calendar'
+} from '../calendar/index.ts'
 import { cn } from '../shared/index.ts'
 
 interface Props extends astroHTML.JSX.HTMLAttributes {

package/dist/astro-card/Card.astro

@@ -1,5 +1,5 @@
 ---
-import { createCard, cardVariants } from '@refraction-ui/card'
+import { createCard, cardVariants } from '../card/index.ts'
 import { cn } from '../shared/index.ts'
 
 interface Props extends astroHTML.JSX.HTMLAttributes {