@stacksjs/components 0.2.92 → 0.2.94

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.

package/src/ui/auth/Signup.stx

@@ -1,159 +0,0 @@
-<script server>
-export const headingText = $props.headingText || 'Sign up for Stacks'
-export const showSocialSignup = $props.showSocialSignup ?? true
-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 name = formData.get('name')
-  const email = formData.get('email')
-  const confirmEmail = formData.get('confirm_email')
-  const password = formData.get('password')
-
-  if (email !== confirmEmail) {
-    emit('error', { message: 'Emails do not match' })
-    return
-  }
-
-  emit('submit', { name, email, password })
-
-  setTimeout(() => {
-    event.target.querySelector('#password')?.setAttribute('value', '')
-    event.target.querySelector('#confirm_email')?.setAttribute('value', '')
-  }, 1000)
-}
-</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" @submit="onSubmit($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>

package/src/ui/auth/TwoFactorChallenge.stx

@@ -1,111 +0,0 @@
-<script server>
-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 showRecoveryCode = $props.showRecoveryCode ?? true
-export const className = $props.className || ''
-
-export const containerClasses = `py-32 dark:bg-blue-gray-900 ${className}`.trim()
-</script>
-
-<script client>
-const emit = defineEmits()
-const codeLength = {{ codeLength }}
-
-function onCodeInput(event, index) {
-  const input = event.target
-  const value = input.value
-  if (!/^\d*$/.test(value)) {
-    input.value = ''
-    return
-  }
-  if (value.length === 1 && index < codeLength - 1) {
-    document.getElementById(`code-${index + 1}`)?.focus()
-  }
-}
-
-function onKeyDown(event, index) {
-  if (event.key === 'Backspace' && !event.target.value && index > 0) {
-    document.getElementById(`code-${index - 1}`)?.focus()
-  }
-}
-
-function onSubmit(event) {
-  event.preventDefault()
-  const code = []
-  for (let i = 0; i < codeLength; i++) {
-    const input = document.getElementById(`code-${i}`)
-    if (input?.value) code.push(input.value)
-  }
-  if (code.length === codeLength) {
-    emit('submit', code.join(''))
-  }
-  else {
-    emit('error', { message: 'Please enter all digits' })
-  }
-}
-
-function onRecoveryCode(event) {
-  event.preventDefault()
-  emit('useRecoveryCode')
-}
-</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 @submit="onSubmit($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"
-                @input="onCodeInput($event, {{ i }})"
-                @keydown="onKeyDown($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(showRecoveryCode)
-          <div class="mt-4">
-            <p class="text-xs text-gray-700 dark:text-gray-300 font-semibold">
-              Having Problems?
-            </p>
-            <a
-              href="#"
-              @click="onRecoveryCode($event)"
-              class="text-xs text-blue-500 hover:underline"
-            >
-              Use recovery code instead
-            </a>
-          </div>
-        @endif
-      </div>
-    </div>
-  </div>
-</div>

package/src/ui/auth/index.ts

@@ -1,32 +0,0 @@
-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
-}