@stacksjs/components 0.2.93 → 0.2.94

package/src/ui/accordion/Accordion.stx

@@ -1,146 +0,0 @@
-<script server>
-// Two modes (see stacksjs/stx#1703):
-//   1. Legacy prop API — pass `items={[{title, content}, …]}` for simple
-//      string-content accordions (kept for backward compatibility with
-//      existing visual snapshots and consumers).
-//   2. Slot API — drop `<AccordionItem title="…">` children for arbitrary
-//      content. Each AccordionItem renders its own header + content panel;
-//      this parent attaches click handlers and toggles content visibility.
-export const items = $props.items || []
-export const allowMultiple = $props.allowMultiple || false
-export const defaultOpen = $props.defaultOpen || []
-export const className = $props.className || ''
-
-export const accordionClasses = `divide-y divide-gray-200 dark:divide-gray-700 border border-gray-200 dark:border-gray-700 rounded-lg ${className}`.trim()
-export const headerClasses = `w-full flex items-center justify-between px-4 py-3 text-left font-medium text-gray-900 dark:text-gray-100 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900`.trim()
-export const iconClasses = `w-5 h-5 text-gray-500 dark:text-gray-400 transition-transform duration-200`.trim()
-export const contentClasses = `px-4 py-3 text-gray-700 dark:text-gray-300`.trim()
-export const hasPropItems = Array.isArray(items) && items.length > 0
-</script>
-
-<script client>
-const emit = defineEmits()
-const allowMultiple = {{ allowMultiple }}
-const hasPropItems = {{ hasPropItems }}
-const containerRef = useRef()
-const openItems = state({{ defaultOpen }})
-
-function findOwnItems() {
-  const root = containerRef.value
-  if (!root) return []
-  return Array.from(root.querySelectorAll('[data-stx-accordion-item]'))
-    .filter(item => item.closest('[data-stx-accordion]') === root)
-}
-
-onMount(() => {
-  if (hasPropItems) return  // legacy mode: server-rendered, no wiring needed
-  const items = findOwnItems()
-  items.forEach((item, idx) => {
-    const header = item.querySelector(':scope > [data-stx-accordion-header]')
-    if (header && !header.__stx_wired) {
-      header.__stx_wired = true
-      header.addEventListener('click', () => toggleItem(idx))
-      header.addEventListener('keydown', (e) => onHeaderKey(e, idx))
-    }
-  })
-})
-
-// Sync the open state into the DOM: show/hide content panels, update
-// aria-expanded on headers, rotate chevrons.
-effect(() => {
-  if (hasPropItems) return
-  const items = findOwnItems()
-  const open = openItems()
-  items.forEach((item, idx) => {
-    const isOpenItem = open.includes(idx)
-    const header = item.querySelector(':scope > [data-stx-accordion-header]')
-    const content = item.querySelector(':scope > [data-stx-accordion-content]')
-    const chevron = item.querySelector(':scope > [data-stx-accordion-header] [data-stx-accordion-chevron]')
-    if (header) header.setAttribute('aria-expanded', isOpenItem ? 'true' : 'false')
-    if (content) {
-      if (isOpenItem) content.removeAttribute('hidden')
-      else content.setAttribute('hidden', '')
-    }
-    if (chevron) chevron.style.transform = `rotate(${isOpenItem ? 180 : 0}deg)`
-  })
-})
-
-function toggleItem(index) {
-  const cur = openItems()
-  if (allowMultiple) {
-    openItems.set(cur.includes(index) ? cur.filter(i => i !== index) : [...cur, index])
-  }
-  else {
-    openItems.set(cur.includes(index) ? [] : [index])
-  }
-  emit('change', openItems())
-}
-
-function isOpen(index) {
-  return openItems().includes(index)
-}
-
-function onHeaderKey(event, index) {
-  const root = containerRef.value
-  if (!root) return
-  const buttons = root.querySelectorAll('button[data-stx-accordion-header], button[data-accordion-header]')
-  if (event.key === 'ArrowDown') {
-    event.preventDefault()
-    buttons[index + 1]?.focus()
-  }
-  else if (event.key === 'ArrowUp') {
-    event.preventDefault()
-    buttons[index - 1]?.focus()
-  }
-  else if (event.key === 'Home') {
-    event.preventDefault()
-    buttons[0]?.focus()
-  }
-  else if (event.key === 'End') {
-    event.preventDefault()
-    buttons[buttons.length - 1]?.focus()
-  }
-}
-
-defineExpose({ openItems, toggleItem })
-</script>
-
-<div x-ref="containerRef" data-stx-accordion class="{{ accordionClasses }}" role="region">
-  @if(hasPropItems)
-    @foreach(item in items)
-      <div>
-        <button
-          type="button"
-          data-accordion-header
-          class="{{ headerClasses }}"
-          @click="toggleItem({{ $loop.index }})"
-          @keydown="onHeaderKey($event, {{ $loop.index }})"
-          :aria-expanded="isOpen({{ $loop.index }}) ? 'true' : 'false'"
-          aria-controls="accordion-content-{{ $loop.index }}"
-        >
-          <span>{{ item.title }}</span>
-          <svg
-            class="{{ iconClasses }}"
-            :style="`transform: rotate(${isOpen({{ $loop.index }}) ? 180 : 0}deg)`"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
-          </svg>
-        </button>
-
-        <div
-          :show="isOpen({{ $loop.index }})"
-          id="accordion-content-{{ $loop.index }}"
-          class="{{ contentClasses }}"
-          role="region"
-        >
-          {!! item.content !!}
-        </div>
-      </div>
-    @endforeach
-  @else
-    <slot />
-  @endif
-</div>

package/src/ui/accordion/AccordionItem.stx

@@ -1,37 +0,0 @@
-<script server>
-// Slot wrapper that the parent <Accordion> discovers and wires up on mount.
-// Renders its own header button + content panel; the parent attaches click
-// handlers and toggles the content panel's `hidden` attribute as openItems
-// changes. Hard-coded styling here matches the legacy prop-mode markup so
-// snapshots compare cleanly in both modes. See stacksjs/stx#1703.
-export const title = $props.title || ''
-export const className = $props.className || ''
-
-const headerClasses = 'w-full flex items-center justify-between px-4 py-3 text-left font-medium text-gray-900 dark:text-gray-100 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900'
-const iconClasses = 'w-5 h-5 text-gray-500 dark:text-gray-400 transition-transform duration-200'
-const contentClasses = 'px-4 py-3 text-gray-700 dark:text-gray-300'
-</script>
-
-<div data-stx-accordion-item data-title="{{ title }}" class="{{ className }}">
-  <button
-    type="button"
-    data-stx-accordion-header
-    data-accordion-header
-    class="{{ headerClasses }}"
-    aria-expanded="false"
-  >
-    <span>{{ title }}</span>
-    <svg
-      data-stx-accordion-chevron
-      class="{{ iconClasses }}"
-      fill="none"
-      viewBox="0 0 24 24"
-      stroke="currentColor"
-    >
-      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
-    </svg>
-  </button>
-  <div data-stx-accordion-content class="{{ contentClasses }}" role="region" hidden>
-    <slot />
-  </div>
-</div>

package/src/ui/accordion/index.ts

@@ -1,47 +0,0 @@
-export { default as Accordion } from './Accordion.stx'
-export { default as AccordionItem } from './AccordionItem.stx'
-
-/**
- * Legacy prop API — pass `items` as an array of `{ title, content }` where
- * `content` is a HTML string. Kept for backward compatibility; prefer the
- * slot API below for any accordion whose content needs to be a component tree.
- *
- * See stacksjs/stx#1703.
- */
-export interface AccordionLegacyItem {
-  title: string
-  content: string
-}
-
-export type AccordionItemDefinition = AccordionLegacyItem
-
-export interface AccordionProps {
-  /** Legacy: array of item definitions with string content. */
-  items?: AccordionItemDefinition[]
-  allowMultiple?: boolean
-  defaultOpen?: number[]
-  onChange?: (openItems: number[]) => void
-  className?: string
-}
-
-/**
- * Slot API — wrap each section's content in `<AccordionItem title="…">`.
- * Each `<AccordionItem>` renders its own header + content panel; the parent
- * `<Accordion>` attaches click handlers and toggles the content visibility.
- *
- * @example
- * ```html
- * <Accordion allowMultiple>
- *   <AccordionItem title="Profile">
- *     <ProfileEditor :user="user()" />
- *   </AccordionItem>
- *   <AccordionItem title="Zones">
- *     <ZonesEditor />
- *   </AccordionItem>
- * </Accordion>
- * ```
- */
-export interface AccordionItemProps {
-  title: string
-  className?: string
-}

package/src/ui/audio/Audio.stx

@@ -1,50 +0,0 @@
-<script server>
-export const src = $props.src || ''
-export const autoplay = $props.autoplay || false
-export const loop = $props.loop || false
-export const muted = $props.muted || false
-export const controls = $props.controls ?? true
-export const preload = $props.preload || 'metadata'
-export const className = $props.className || ''
-export const showWaveform = $props.showWaveform || false
-export const title = $props.title || ''
-
-export const containerClasses = `relative w-full ${className}`.trim()
-export const audioClasses = 'w-full rounded-md bg-gray-100 dark:bg-gray-800'
-</script>
-
-<div class="{{ containerClasses }}">
-  @if(title)
-    <div class="mb-2 px-1">
-      <h3 class="text-sm font-medium text-gray-900 dark:text-gray-100">
-        {{ title }}
-      </h3>
-    </div>
-  @endif
-
-  <audio
-    class="{{ audioClasses }}"
-    src="{{ src }}"
-    @if(controls)controls@endif
-    @if(autoplay)autoplay@endif
-    @if(loop)loop@endif
-    @if(muted)muted@endif
-    preload="{{ preload }}"
-  >
-    Your browser does not support the audio element.
-  </audio>
-
-  @if(showWaveform)
-    <div class="mt-2 h-16 bg-gray-100 dark:bg-gray-800 rounded-md flex items-center justify-center">
-      <svg class="w-full h-full px-4" viewBox="0 0 100 40" preserveAspectRatio="none">
-        <path
-          d="M 0,20 L 10,15 L 20,10 L 30,5 L 40,15 L 50,20 L 60,25 L 70,30 L 80,20 L 90,15 L 100,20"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          class="text-indigo-500 dark:text-indigo-400"
-        />
-      </svg>
-    </div>
-  @endif
-</div>

package/src/ui/audio/README.md

@@ -1,41 +0,0 @@
-# Audio Component
-
-A styled audio player with optional waveform visualization.
-
-## Installation
-
-```bash
-bun add @stacksjs/components
-```
-
-## Usage
-
-```stx
-<Audio
-  src="/audio/podcast.mp3"
-  title="Episode 42: Building with STX"
-  controls
-/>
-```
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `src` | `string` | - | Audio file URL (required) |
-| `autoplay` | `boolean` | `false` | Auto-play on load |
-| `loop` | `boolean` | `false` | Loop playback |
-| `muted` | `boolean` | `false` | Start muted |
-| `controls` | `boolean` | `true` | Show native controls |
-| `preload` | `'none' \| 'metadata' \| 'auto'` | `'metadata'` | Preload strategy |
-| `className` | `string` | `''` | Additional CSS classes |
-| `showWaveform` | `boolean` | `false` | Show waveform visualization |
-| `title` | `string` | `''` | Optional title above player |
-
-## Features
-
-- **Native controls** - Uses browser's native audio controls
-- **Dark mode** - Styled for dark mode
-- **Waveform** - Optional visual waveform display
-- **Accessible** - Proper fallback text
-- **Responsive** - Full-width design

package/src/ui/audio/index.ts

@@ -1,13 +0,0 @@
-export { default as Audio } from './Audio.stx'
-
-export interface AudioProps {
-  src: string
-  autoplay?: boolean
-  loop?: boolean
-  muted?: boolean
-  controls?: boolean
-  preload?: 'none' | 'metadata' | 'auto'
-  className?: string
-  showWaveform?: boolean
-  title?: string
-}

package/src/ui/auth/Login.stx

@@ -1,161 +0,0 @@
-<script server>
-export const showLogo = $props.showLogo ?? true
-export const headingText = $props.headingText || 'Sign in to your account'
-export const showSocialLogin = $props.showSocialLogin ?? true
-export const showRememberMe = $props.showRememberMe ?? true
-export const showForgotPassword = $props.showForgotPassword ?? true
-export const showSignup = $props.showSignup ?? true
-export const signupText = $props.signupText || 'Start a 14 day free trial'
-export const className = $props.className || ''
-
-export const containerClasses = `min-h-full flex flex-col justify-center py-12 lg:px-8 sm:px-6 dark:bg-blue-gray-900 ${className}`.trim()
-</script>
-
-<script client>
-const emit = defineEmits()
-
-function onSubmit(event) {
-  event.preventDefault()
-  const formData = new FormData(event.target)
-  const email = formData.get('email')
-  const password = formData.get('password')
-  emit('submit', { email, password })
-  setTimeout(() => {
-    const pw = event.target.querySelector('#password')
-    if (pw) pw.value = ''
-  }, 1000)
-}
-</script>
-
-<div class="{{ containerClasses }}">
-  <div class="sm:mx-auto sm:max-w-md sm:w-full">
-    @if(showLogo)
-      <img src="/logo.svg" alt="Logo" class="mx-auto h-11 w-auto" />
-    @endif
-    <h2 class="mt-6 text-center text-2xl text-gray-900 dark:text-gray-100 font-bold leading-9 tracking-tight">
-      {{ headingText }}
-    </h2>
-  </div>
-
-  <form @submit="onSubmit($event)">
-    <div class="mt-10 sm:mx-auto sm:max-w-[480px] sm:w-full">
-      <div class="bg-white dark:bg-blue-gray-800 px-6 py-12 shadow sm:rounded-lg sm:px-12">
-        <div class="space-y-6">
-          <div>
-            <label for="email" class="block text-sm text-gray-900 dark:text-gray-100 font-medium leading-6">
-              Email address
-            </label>
-            <div class="mt-2">
-              <input
-                id="email"
-                name="email"
-                type="email"
-                autocomplete="email"
-                required
-                class="block w-full border-0 rounded-md py-1.5 text-gray-900 dark:text-gray-100 shadow-sm ring-1 ring-gray-300 dark:ring-gray-600 ring-inset sm:text-sm placeholder:text-gray-400 dark:placeholder:text-gray-500 sm:leading-6 focus:ring-2 focus:ring-indigo-600 focus:ring-inset dark:bg-blue-gray-700"
-              />
-            </div>
-          </div>
-
-          <div>
-            <label for="password" class="block text-sm text-gray-900 dark:text-gray-100 font-medium leading-6">
-              Password
-            </label>
-            <div class="mt-2">
-              <input
-                id="password"
-                name="password"
-                type="password"
-                autocomplete="current-password"
-                required
-                class="block w-full border-0 rounded-md py-1.5 text-gray-900 dark:text-gray-100 shadow-sm ring-1 ring-gray-300 dark:ring-gray-600 ring-inset sm:text-sm placeholder:text-gray-400 dark:placeholder:text-gray-500 sm:leading-6 focus:ring-2 focus:ring-indigo-600 focus:ring-inset dark:bg-blue-gray-700"
-              />
-            </div>
-          </div>
-
-          <div class="flex items-center justify-between">
-            @if(showRememberMe)
-              <div class="flex items-center">
-                <input
-                  id="remember-me"
-                  name="remember-me"
-                  type="checkbox"
-                  class="h-4 w-4 border-gray-300 dark:border-gray-600 rounded text-indigo-600 focus:ring-indigo-600 dark:bg-blue-gray-700"
-                />
-                <label for="remember-me" class="ml-3 block text-sm text-gray-900 dark:text-gray-100 leading-6">
-                  Remember me
-                </label>
-              </div>
-            @endif
-
-            @if(showForgotPassword)
-              <div class="text-sm leading-6">
-                <a href="#" class="text-indigo-600 dark:text-indigo-400 font-semibold hover:text-indigo-500 dark:hover:text-indigo-300">
-                  Forgot password?
-                </a>
-              </div>
-            @endif
-          </div>
-
-          <div>
-            <button
-              type="submit"
-              class="w-full flex justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm text-white font-semibold leading-6 shadow-sm hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-indigo-600 focus-visible:outline-offset-2 focus-visible:outline"
-            >
-              Sign in
-            </button>
-          </div>
-        </div>
-
-        @if(showSocialLogin)
-          <div>
-            <div class="relative mt-10">
-              <div class="absolute inset-0 flex items-center" aria-hidden="true">
-                <div class="w-full border-t border-gray-200 dark:border-gray-600"></div>
-              </div>
-              <div class="relative flex justify-center text-sm font-medium leading-6">
-                <span class="bg-white dark:bg-blue-gray-800 px-6 text-gray-900 dark:text-gray-100">
-                  Or continue with
-                </span>
-              </div>
-            </div>
-
-            <div class="grid grid-cols-2 mt-6 gap-4">
-              <a
-                href="#"
-                class="w-full flex items-center justify-center gap-3 rounded-md bg-white dark:bg-blue-gray-700 px-3 py-2 text-sm text-gray-900 dark:text-gray-100 font-semibold shadow-sm ring-1 ring-gray-300 dark:ring-gray-600 ring-inset hover:bg-gray-50 dark:hover:bg-blue-gray-600 focus-visible:ring-transparent"
-              >
-                <svg class="h-5 w-5" viewBox="0 0 24 24" aria-hidden="true">
-                  <path d="M12.0003 4.75C13.7703 4.75 15.3553 5.36002 16.6053 6.54998L20.0303 3.125C17.9502 1.19 15.2353 0 12.0003 0C7.31028 0 3.25527 2.69 1.28027 6.60998L5.27028 9.70498C6.21525 6.86002 8.87028 4.75 12.0003 4.75Z" fill="#EA4335" />
-                  <path d="M23.49 12.275C23.49 11.49 23.415 10.73 23.3 10H12V14.51H18.47C18.18 15.99 17.34 17.25 16.08 18.1L19.945 21.1C22.2 19.01 23.49 15.92 23.49 12.275Z" fill="#4285F4" />
-                  <path d="M5.26498 14.2949C5.02498 13.5699 4.88501 12.7999 4.88501 11.9999C4.88501 11.1999 5.01998 10.4299 5.26498 9.7049L1.275 6.60986C0.46 8.22986 0 10.0599 0 11.9999C0 13.9399 0.46 15.7699 1.28 17.3899L5.26498 14.2949Z" fill="#FBBC05" />
-                  <path d="M12.0004 24.0001C15.2404 24.0001 17.9654 22.935 19.9454 21.095L16.0804 18.095C15.0054 18.82 13.6204 19.245 12.0004 19.245C8.8704 19.245 6.21537 17.135 5.2654 14.29L1.27539 17.385C3.25539 21.31 7.3104 24.0001 12.0004 24.0001Z" fill="#34A853" />
-                </svg>
-                <span class="text-sm font-semibold leading-6">Google</span>
-              </a>
-
-              <a
-                href="#"
-                class="w-full flex items-center justify-center gap-3 rounded-md bg-white dark:bg-blue-gray-700 px-3 py-2 text-sm text-gray-900 dark:text-gray-100 font-semibold shadow-sm ring-1 ring-gray-300 dark:ring-gray-600 ring-inset hover:bg-gray-50 dark:hover:bg-blue-gray-600 focus-visible:ring-transparent"
-              >
-                <svg class="h-5 w-5 fill-[#24292F]" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
-                  <path fill-rule="evenodd" d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0020 10.017C20 4.484 15.522 0 10 0z" clip-rule="evenodd" />
-                </svg>
-                <span class="text-sm font-semibold leading-6">GitHub</span>
-              </a>
-            </div>
-          </div>
-        @endif
-      </div>
-
-      @if(showSignup)
-        <p class="mt-10 text-center text-sm text-gray-500 dark:text-gray-400">
-          Not a member?
-          <a href="#" class="text-indigo-600 dark:text-indigo-400 font-semibold leading-6 hover:text-indigo-500 dark:hover:text-indigo-300">
-            {{ signupText }}
-          </a>
-        </p>
-      @endif
-    </div>
-  </form>
-</div>

package/src/ui/auth/README.md

@@ -1,142 +0,0 @@
-# Auth Components
-
-Authentication UI components including Login, Signup, and Two-Factor Authentication.
-
-## Components
-
-### Login
-A full-featured login form with email/password and optional social login.
-
-### Signup
-A registration form with name, email, email confirmation, and password fields.
-
-### TwoFactorChallenge
-A 2FA code entry component with auto-focus and recovery code option.
-
-## Installation
-
-```bash
-bun add @stacksjs/components
-```
-
-## Usage
-
-### Login Component
-
-```stx
-<script server>
-const handleLogin = (data) => {
-  console.log('Login:', data.email, data.password)
-}
-</script>
-
-<Login
-  showLogo
-  headingText="Sign in to your account"
-  showSocialLogin
-  showRememberMe
-  showForgotPassword
-  showSignup
-  signupText="Start a 14 day free trial"
-  :onSubmit="handleLogin"
-/>
-```
-
-### Signup Component
-
-```stx
-<script server>
-const handleSignup = (data) => {
-  console.log('Signup:', data.name, data.email, data.password)
-}
-</script>
-
-<Signup
-  headingText="Sign up for Stacks"
-  showSocialSignup
-  :onSubmit="handleSignup"
-/>
-```
-
-### TwoFactorChallenge Component
-
-```stx
-<script server>
-const handleVerify = (code) => {
-  console.log('2FA Code:', code)
-}
-
-const handleRecoveryCode = () => {
-  console.log('Using recovery code')
-}
-</script>
-
-<TwoFactorChallenge
-  headingText="Two Factor Authentication"
-  labelText="Authentication code"
-  instructionText="Open your 2FA app to view your authentication code."
-  :codeLength="6"
-  :onSubmit="handleVerify"
-  :onUseRecoveryCode="handleRecoveryCode"
-/>
-```
-
-## Props
-
-### Login Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `showLogo` | `boolean` | `true` | Show logo at top |
-| `headingText` | `string` | `'Sign in to your account'` | Heading text |
-| `showSocialLogin` | `boolean` | `true` | Show social login buttons |
-| `showRememberMe` | `boolean` | `true` | Show remember me checkbox |
-| `showForgotPassword` | `boolean` | `true` | Show forgot password link |
-| `showSignup` | `boolean` | `true` | Show signup link at bottom |
-| `signupText` | `string` | `'Start a 14 day free trial'` | Signup link text |
-| `onSubmit` | `function` | - | Callback when form submitted |
-| `className` | `string` | `''` | Additional CSS classes |
-
-### Signup Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `headingText` | `string` | `'Sign up for Stacks'` | Heading text |
-| `showSocialSignup` | `boolean` | `true` | Show social signup buttons |
-| `onSubmit` | `function` | - | Callback when form submitted |
-| `className` | `string` | `''` | Additional CSS classes |
-
-### TwoFactorChallenge Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `headingText` | `string` | `'Two Factor Authentication'` | Heading text |
-| `labelText` | `string` | `'Authentication code'` | Input label |
-| `instructionText` | `string` | `'Open your Symantec 2FA app...'` | Instructions |
-| `codeLength` | `number` | `6` | Number of code digits |
-| `onSubmit` | `function` | - | Callback with complete code |
-| `onUseRecoveryCode` | `function` | - | Callback for recovery code |
-| `className` | `string` | `''` | Additional CSS classes |
-
-## Features
-
-- **Modern ES module exports** - Clean, modern JavaScript
-- **Dark mode support** - All components support dark mode
-- **Fully accessible** - Proper labels, ARIA attributes
-- **Social login** - Google and GitHub integration
-- **Auto-focus** - 2FA inputs auto-focus next field
-- **Validation** - Email confirmation validation in Signup
-- **TypeScript** - Full type definitions
-- **Headwind styling** - Utility-first CSS classes
-
-## Accessibility
-
-- Proper label associations
-- ARIA attributes where needed
-- Keyboard navigation support
-- Focus management in 2FA component
-- Required field indicators
-
-## Customization
-
-All components accept a `className` prop for additional styling and support full customization through props.