@stacksjs/components 0.2.3

package/src/ui/auth/Login.stx

@@ -0,0 +1,163 @@
+<script>
+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 onSubmit = $props.onSubmit || (() => {})
+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>
+
+<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 onsubmit="event.preventDefault(); handleSubmit(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>
+
+<script>
+function handleSubmit(event) {
+  const formData = new FormData(event.target)
+  const email = formData.get('email')
+  const password = formData.get('password')
+
+  if (onSubmit) {
+    onSubmit({ email, password })
+  }
+
+  // Clear password after submission
+  setTimeout(() => {
+    event.target.querySelector('#password').value = ''
+  }, 1000)
+}
+</script>

package/src/ui/auth/README.md

@@ -0,0 +1,145 @@
+# 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>
+export const handleLogin = (data) => {
+  console.log('Login:', data.email, data.password)
+}
+</script>
+
+@component('Login', {
+  showLogo: true,
+  headingText: 'Sign in to your account',
+  showSocialLogin: true,
+  showRememberMe: true,
+  showForgotPassword: true,
+  showSignup: true,
+  signupText: 'Start a 14 day free trial',
+  onSubmit: handleLogin
+})
+@endcomponent
+```
+
+### Signup Component
+
+```stx
+<script>
+export const handleSignup = (data) => {
+  console.log('Signup:', data.name, data.email, data.password)
+}
+</script>
+
+@component('Signup', {
+  headingText: 'Sign up for Stacks',
+  showSocialSignup: true,
+  onSubmit: handleSignup
+})
+@endcomponent
+```
+
+### TwoFactorChallenge Component
+
+```stx
+<script>
+export const handleVerify = (code) => {
+  console.log('2FA Code:', code)
+}
+
+export const handleRecoveryCode = () => {
+  console.log('Using recovery code')
+}
+</script>
+
+@component('TwoFactorChallenge', {
+  headingText: 'Two Factor Authentication',
+  labelText: 'Authentication code',
+  instructionText: 'Open your 2FA app to view your authentication code.',
+  codeLength: 6,
+  onSubmit: handleVerify,
+  onUseRecoveryCode: handleRecoveryCode
+})
+@endcomponent
+```
+
+## 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.

package/src/ui/auth/Signup.stx

@@ -0,0 +1,161 @@
+<script>
+export const headingText = $props.headingText || 'Sign up for Stacks'
+export const showSocialSignup = $props.showSocialSignup ?? true
+export const onSubmit = $props.onSubmit || (() => {})
+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>
+
+<div class="{{ containerClasses }}">
+  <div class="sm:mx-auto sm:max-w-md sm:w-full">
+    <h2 class="mt-6 text-center text-2xl text-gray-900 dark:text-gray-100 font-bold leading-9 tracking-tight">
+      {{ headingText }}
+    </h2>
+  </div>
+
+  <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">
+      <form class="space-y-6" onsubmit="event.preventDefault(); handleSubmit(event)">
+        <div>
+          <label for="name" class="block text-sm text-gray-900 dark:text-gray-100 font-medium leading-6">
+            Full Name
+          </label>
+          <div class="mt-2">
+            <input
+              id="name"
+              name="name"
+              type="text"
+              autocomplete="name"
+              required
+              class="block w-full border-0 rounded-md p-2 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-teal-600 focus:ring-inset dark:bg-blue-gray-700"
+            />
+          </div>
+        </div>
+
+        <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 p-2 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-teal-600 focus:ring-inset dark:bg-blue-gray-700"
+            />
+          </div>
+        </div>
+
+        <div>
+          <label for="confirm_email" class="block text-sm text-gray-900 dark:text-gray-100 font-medium leading-6">
+            Confirm Email
+          </label>
+          <div class="mt-2">
+            <input
+              id="confirm_email"
+              name="confirm_email"
+              type="email"
+              autocomplete="email"
+              required
+              class="block w-full border-0 rounded-md p-2 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-teal-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="new-password"
+              required
+              class="block w-full border-0 rounded-md p-2 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-teal-600 focus:ring-inset dark:bg-blue-gray-700"
+            />
+          </div>
+        </div>
+
+        <div>
+          <button
+            type="submit"
+            class="w-full flex justify-center rounded-md bg-teal-600 px-3 py-1.5 text-sm text-white font-semibold leading-6 shadow-sm hover:bg-teal-500 focus-visible:outline-2 focus-visible:outline-teal-600 focus-visible:outline-offset-2 focus-visible:outline"
+          >
+            Sign up
+          </button>
+        </div>
+      </form>
+
+      @if(showSocialSignup)
+        <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 signup 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] dark:fill-white" 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>
+  </div>
+</div>
+
+<script>
+function handleSubmit(event) {
+  const formData = new FormData(event.target)
+  const name = formData.get('name')
+  const email = formData.get('email')
+  const confirmEmail = formData.get('confirm_email')
+  const password = formData.get('password')
+
+  // Basic email confirmation validation
+  if (email !== confirmEmail) {
+    alert('Emails do not match!')
+    return
+  }
+
+  if (onSubmit) {
+    onSubmit({ name, email, password })
+  }
+
+  // Clear sensitive fields after submission
+  setTimeout(() => {
+    event.target.querySelector('#password').value = ''
+    event.target.querySelector('#confirm_email').value = ''
+  }, 1000)
+}
+</script>

package/src/ui/auth/TwoFactorChallenge.stx

@@ -0,0 +1,125 @@
+<script>
+export const headingText = $props.headingText || 'Two Factor Authentication'
+export const labelText = $props.labelText || 'Authentication code'
+export const instructionText = $props.instructionText || 'Open your Symantec 2FA app to view your authentication code.'
+export const codeLength = $props.codeLength || 6
+export const onSubmit = $props.onSubmit || (() => {})
+export const onUseRecoveryCode = $props.onUseRecoveryCode
+export const className = $props.className || ''
+
+export const containerClasses = `py-32 dark:bg-blue-gray-900 ${className}`.trim()
+export const codes = Array(codeLength).fill('')
+</script>
+
+<div class="{{ containerClasses }}">
+  <div class="mx-auto max-w-sm rounded-md px-8 py-4 shadow-md bg-white dark:bg-blue-gray-800">
+    <div class="card-body">
+      <div>
+        <h3 class="text-center text-sm text-gray-900 dark:text-gray-100 font-semibold">
+          {{ headingText }}
+        </h3>
+        <label for="code-0" class="mt-4 block text-sm text-gray-900 dark:text-gray-100 font-medium leading-6">
+          {{ labelText }}
+        </label>
+        <form onsubmit="event.preventDefault(); handleSubmit(event)">
+          <div class="mt-2 flex rounded-md shadow-sm space-x-2">
+            @for(i in Array(codeLength).keys())
+              <input
+                id="code-{{ i }}"
+                type="text"
+                maxlength="1"
+                name="code-{{ i }}"
+                placeholder="-"
+                class="block w-full border-0 rounded-md px-2 py-2 text-center text-gray-900 dark:text-gray-100 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"
+                oninput="handleCodeInput(event, {{ i }})"
+                onkeydown="handleKeyDown(event, {{ i }})"
+              />
+            @endfor
+          </div>
+          <div class="py-4">
+            <button
+              type="submit"
+              class="relative h-8 w-full flex items-center justify-center rounded-full bg-teal-600 px-4 text-white font-semibold hover:bg-teal-500 focus:outline-none focus:ring-2 focus:ring-teal-600 focus:ring-offset-2"
+            >
+              Verify
+            </button>
+          </div>
+        </form>
+        <div>
+          <p class="text-xs text-gray-700 dark:text-gray-300 font-semibold">
+            {{ instructionText }}
+          </p>
+        </div>
+        @if(onUseRecoveryCode)
+          <div class="mt-4">
+            <p class="text-xs text-gray-700 dark:text-gray-300 font-semibold">
+              Having Problems?
+            </p>
+            <a
+              href="#"
+              onclick="event.preventDefault(); handleRecoveryCode()"
+              class="text-xs text-blue-500 hover:underline"
+            >
+              Use recovery code instead
+            </a>
+          </div>
+        @endif
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+function handleCodeInput(event, index) {
+  const input = event.target
+  const value = input.value
+
+  // Only allow digits
+  if (!/^\d*$/.test(value)) {
+    input.value = ''
+    return
+  }
+
+  // Auto-focus next input
+  if (value.length === 1 && index < codeLength - 1) {
+    const nextInput = document.getElementById(`code-${index + 1}`)
+    if (nextInput) {
+      nextInput.focus()
+    }
+  }
+}
+
+function handleKeyDown(event, index) {
+  // Handle backspace to move to previous input
+  if (event.key === 'Backspace' && !event.target.value && index > 0) {
+    const prevInput = document.getElementById(`code-${index - 1}`)
+    if (prevInput) {
+      prevInput.focus()
+    }
+  }
+}
+
+function handleSubmit(event) {
+  const code = []
+  for (let i = 0; i < codeLength; i++) {
+    const input = document.getElementById(`code-${i}`)
+    if (input && input.value) {
+      code.push(input.value)
+    }
+  }
+
+  if (code.length === codeLength) {
+    if (onSubmit) {
+      onSubmit(code.join(''))
+    }
+  } else {
+    alert('Please enter all digits')
+  }
+}
+
+function handleRecoveryCode() {
+  if (onUseRecoveryCode) {
+    onUseRecoveryCode()
+  }
+}
+</script>

package/src/ui/auth/index.ts

@@ -0,0 +1,32 @@
+export { default as Login } from './Login.stx'
+export { default as Signup } from './Signup.stx'
+export { default as TwoFactorChallenge } from './TwoFactorChallenge.stx'
+
+export interface LoginProps {
+  showLogo?: boolean
+  headingText?: string
+  showSocialLogin?: boolean
+  showRememberMe?: boolean
+  showForgotPassword?: boolean
+  showSignup?: boolean
+  signupText?: string
+  onSubmit?: (data: { email: string, password: string }) => void
+  className?: string
+}
+
+export interface SignupProps {
+  headingText?: string
+  showSocialSignup?: boolean
+  onSubmit?: (data: { name: string, email: string, password: string }) => void
+  className?: string
+}
+
+export interface TwoFactorChallengeProps {
+  headingText?: string
+  labelText?: string
+  instructionText?: string
+  codeLength?: number
+  onSubmit?: (code: string) => void
+  onUseRecoveryCode?: () => void
+  className?: string
+}