@stacksjs/defaults 0.70.54

package/resources/components/Button.stx

@@ -0,0 +1,70 @@
+<script>
+interface ButtonProps {
+  variant?: 'solid' | 'outline'
+  color?: 'blue' | 'slate' | 'white' | 'black'
+  href?: string
+  customClass?: string
+}
+
+const { variant = 'solid', color = 'slate', href = '', customClass = '' } = defineProps<ButtonProps>()
+
+/**
+ * Marketing Button Component
+ *
+ * A simple button designed for marketing pages with solid/outline variants.
+ * NOTE: For dashboard/app UIs, use @stacksjs/stx-ui components instead.
+ */
+
+const baseStyles = {
+  solid:
+    'group inline-flex items-center justify-center rounded-full py-2 px-4 text-sm font-semibold focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 transition-colors',
+  outline:
+    'group inline-flex ring-1 items-center justify-center rounded-full py-2 px-4 text-sm focus:outline-none transition-colors',
+}
+
+const variantStyles = {
+  solid: {
+    slate:
+      'bg-slate-900 text-white hover:bg-slate-700 hover:text-slate-100 active:bg-slate-800 active:text-slate-300 focus-visible:outline-slate-900',
+    blue: 'bg-blue-600 text-white hover:text-slate-100 hover:bg-blue-500 active:bg-blue-800 active:text-blue-100 focus-visible:outline-blue-600',
+    white:
+      'bg-white text-slate-900 hover:bg-blue-50 active:bg-blue-200 active:text-slate-600 focus-visible:outline-white',
+    black: 'bg-black text-white hover:bg-gray-800 active:bg-gray-900 active:text-gray-200 focus-visible:outline-black',
+  },
+  outline: {
+    slate:
+      'ring-slate-200 text-slate-700 hover:text-slate-900 hover:ring-slate-300 active:bg-slate-100 active:text-slate-600 focus-visible:outline-blue-600 focus-visible:ring-slate-300',
+    blue: 'ring-blue-200 text-blue-700 hover:text-blue-900 hover:ring-blue-300 active:bg-blue-100 active:text-blue-600 focus-visible:outline-blue-600',
+    white:
+      'ring-slate-700 text-white hover:ring-slate-500 active:ring-slate-700 active:text-slate-400 focus-visible:outline-white',
+    black: 'ring-black text-black hover:ring-gray-700 active:bg-gray-100 focus-visible:outline-black',
+  },
+}
+
+function getClassName(variant, color, customClass) {
+  const v = variant || 'solid'
+  const c = color || 'slate'
+  let classes = baseStyles[v] || baseStyles.solid
+
+  const colorStyles = variantStyles[v]?.[c]
+  if (colorStyles) {
+    classes += ` ${colorStyles}`
+  }
+
+  if (customClass) {
+    classes += ` ${customClass}`
+  }
+
+  return classes
+}
+</script>
+
+@if(!href)
+  <button class="{{ }} color, customClass) getClassName(variant,">
+    <slot />
+  </button>
+@else
+  <a href="{{ href }}" class="{{ }} color, customClass) getClassName(variant,">
+    <slot />
+  </a>
+@endif

package/resources/components/Buttons/BaseButton.stx

@@ -0,0 +1,39 @@
+<script>
+interface BaseButtonProps {
+  loading?: boolean
+  buttonText?: string
+  classString?: string
+}
+
+const { loading = false, buttonText = 'Submit', classString = '' } = defineProps<BaseButtonProps>()
+
+const baseClass = 'duration-150 ease-in-out transition focus:ring-2 focus:ring-inset focus:ring-blue-600'
+const fullClass = classString + ' ' + baseClass + (loading ? ' opacity-75 disabled:cursor-not-allowed' : '')
+</script>
+
+<button type="button" class="{{ }} fullClass" @if(loading) disabled @endif>
+  @if(loading)
+    <svg
+      class="-ml-1 mr-1 h-5 w-5 text-gray-500 animate-spin"
+      fill="none"
+      viewBox="0 0 24 24"
+    >
+      <circle
+        class="opacity-25"
+        cx="12"
+        cy="12"
+        r="10"
+        stroke="currentColor"
+        stroke-width="4"
+      />
+      <path
+        class="opacity-75"
+        fill="currentColor"
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+      />
+    </svg>
+    <span>One moment...</span>
+  @else
+    <span>{{ buttonText }}</span>
+  @endif
+</button>

package/resources/components/Buttons/Counter.stx

@@ -0,0 +1,28 @@
+<script>
+interface CounterProps {
+  count?: number
+}
+
+const { count = 0 } = defineProps<CounterProps>()
+</script>
+<div>
+    <button
+      type="button"
+      class="text-white text-xs bg-blue-500 hover:bg-blue-600 btn"
+      data-counter
+    >
+      <i
+        class="-ml-1 mr-3 h-4 w-4 i-hugeicons-outline-plus"
+        aria-hidden="true"
+      ></i>
+      Counter: <span data-count>{{ count }}</span>
+    </button>
+  </div>
+<script client>
+document.querySelector('[data-counter]')?.addEventListener('click', function() {
+  const countEl = document.querySelector('[data-count]')
+  if (countEl) {
+    countEl.textContent = parseInt(countEl.textContent || '0') + 1
+  }
+}
+</script>

package/resources/components/Buttons/ToggleDark.stx

@@ -0,0 +1,11 @@
+<button
+    class="btn"
+    data-toggle-dark
+  >
+    <div class="i-hugeicons-outline-sun dark:i-hugeicons-outline-moon"></div>
+  </button>
+<script client>
+document.querySelector('[data-toggle-dark]')?.addEventListener('click', function() {
+  document.documentElement.classList.toggle('dark')
+}
+</script>

package/resources/components/Container.stx

@@ -0,0 +1,10 @@
+<script>
+interface ContainerProps {
+  className?: string
+}
+
+const { className = '' } = defineProps<ContainerProps>()
+</script>
+<div class="mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl {{ }} className">
+    <slot />
+  </div>

package/resources/components/Dashboard/Auth/ForgotPassword.stx

@@ -0,0 +1,127 @@
+@import('../UI/Input', '../UI/Button')
+
+<script server>
+interface ForgotPasswordProps {
+  title?: string
+  subtitle?: string
+  email?: string
+  isLoading?: boolean
+  error?: string
+  success?: boolean
+}
+
+const { title = 'Forgot password?', subtitle = 'Enter your email and we\'ll send you a reset link', email = '', isLoading = false, error = '', success = false } = defineProps<ForgotPasswordProps>()
+
+/**
+ * Forgot Password Component
+ * A clean form for requesting a password reset link.
+ */
+
+// Form state
+// Emit submit event with email
+function handleSubmit(event) {
+  event.preventDefault()
+
+  if (!email) {
+    return
+  }
+
+  // Emit the submit event - parent component handles the actual request
+  $emit('submit', { email })
+}
+</script>
+<div class="flex items-center justify-center px-4 py-12 min-h-screen">
+  <div class="max-w-sm w-full">
+    <!-- Logo/Brand -->
+    <div class="mb-8 text-center">
+      <div class="inline-flex items-center justify-center mb-4 h-12 w-12 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl shadow-blue-500/25 shadow-lg">
+        <svg class="h-7 w-7 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
+        </svg>
+      </div>
+      <h1 class="font-semibold text-2xl text-neutral-900 dark:text-white">
+        {{ title }}
+      </h1>
+      <p class="mt-2 text-neutral-500 text-sm dark:text-neutral-400">
+        {{ subtitle }}
+      </p>
+    </div>
+
+    <!-- Form Card -->
+    <div class="p-6 bg-white dark:bg-neutral-900 border border-neutral-200/60 rounded-2xl dark:border-neutral-800 shadow-black/5 shadow-xl dark:shadow-black/20">
+      @if(success)
+        <!-- Success Message -->
+        <div class="py-4 text-center">
+          <div class="inline-flex items-center justify-center mb-4 h-12 w-12 bg-green-100 dark:bg-green-900/30 rounded-full">
+            <div class="h-6 w-6 text-green-600 dark:text-green-400 i-hugeicons-checkmark-circle-02"></div>
+          </div>
+          <h3 class="mb-2 font-medium text-lg text-neutral-900 dark:text-white">
+            Check your email
+          </h3>
+          <p class="mb-6 text-neutral-500 text-sm dark:text-neutral-400">
+            We've sent a password reset link to <strong class="text-neutral-700 dark:text-neutral-200">{{ email }}</strong>
+          </p>
+          <p class="text-neutral-400 text-xs dark:text-neutral-500">
+            Didn't receive the email? Check your spam folder or
+            <button
+              type="button"
+              class="text-blue-600 dark:text-blue-400 hover:text-blue-500"
+              @click="success = false"
+            >
+              try again
+            </button>
+          </p>
+        </div>
+      @else
+        <!-- Error Message -->
+        @if(error)
+          <div class="mb-4 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 rounded-lg dark:border-red-800">
+            <div class="flex gap-2 items-center">
+              <div class="h-4 w-4 text-red-600 dark:text-red-400 i-hugeicons-alert-circle"></div>
+              <p class="text-red-600 text-sm dark:text-red-400">{{ error }}</p>
+            </div>
+          </div>
+        @endif
+
+        <form @submit="handleSubmit">
+          <!-- Email Field -->
+          <div class="mb-6">
+            <Input
+              type="email"
+              label="Email address"
+              placeholder="you@example.com"
+              :value="email"
+              @input="email = $event.target.value"
+              required
+              :disabled="isLoading"
+            />
+          </div>
+
+          <!-- Submit Button -->
+          <Button
+            type="submit"
+            variant="primary"
+            size="lg"
+            fullWidth
+            :loading="isLoading"
+            :disabled="isLoading || !email"
+          >
+            @if(isLoading)
+              Sending...
+            @else
+              Send reset link
+            @endif
+          </Button>
+        </form>
+      @endif
+    </div>
+
+    <!-- Back to Login -->
+    <p class="mt-6 text-center text-neutral-500 text-sm dark:text-neutral-400">
+      <a href="/login" class="inline-flex gap-1 items-center font-medium text-blue-600 dark:text-blue-400 hover:text-blue-500 dark:hover:text-blue-300">
+        <div class="h-4 w-4 i-hugeicons-arrow-left-01"></div>
+        Back to sign in
+      </a>
+    </p>
+  </div>
+</div>

package/resources/components/Dashboard/Auth/Login.stx

@@ -0,0 +1,212 @@
+@import('../UI/Input', '../UI/Button')
+
+<script server>
+interface LoginProps {
+  title?: string
+  subtitle?: string
+  email?: string
+  password?: string
+  rememberMe?: boolean
+  isLoading?: boolean
+  error?: string
+  fieldErrors?: Record<string, any>
+  showRememberMe?: boolean
+  showForgotPassword?: boolean
+  showSignUp?: boolean
+}
+
+const { title = 'Welcome back', subtitle = 'Sign in to your account', email = '', password = '', rememberMe = false, isLoading = false, error = '', fieldErrors = {}, showRememberMe = true, showForgotPassword = true, showSignUp = true } = defineProps<LoginProps>()
+
+/**
+ * Login Component
+ * A clean, modern login form for the Stacks Dashboard.
+ */
+
+// Form state
+// Validate email format
+function validateEmail() {
+  if (!email) {
+    fieldErrors.email = 'Email is required'
+    return false
+  }
+  if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+    fieldErrors.email = 'Please enter a valid email address'
+    return false
+  }
+  fieldErrors.email = ''
+  return true
+}
+
+// Validate password
+function validatePassword() {
+  if (!password) {
+    fieldErrors.password = 'Password is required'
+    return false
+  }
+  fieldErrors.password = ''
+  return true
+}
+
+// Emit submit event with credentials
+function handleSubmit(event) {
+  event.preventDefault()
+
+  const emailValid = validateEmail()
+  const passwordValid = validatePassword()
+
+  if (!emailValid || !passwordValid) {
+    return
+  }
+
+  // Emit the submit event - parent component handles the actual login
+  $emit('submit', { email, password, rememberMe })
+}
+</script>
+<div class="flex items-center justify-center px-4 py-12 min-h-screen">
+  <div class="max-w-sm w-full">
+    <!-- Logo/Brand -->
+    <div class="mb-8 text-center">
+      <div class="inline-flex items-center justify-center mb-4 h-12 w-12 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl shadow-blue-500/25 shadow-lg">
+        <svg class="h-7 w-7 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
+        </svg>
+      </div>
+      <h1 class="font-semibold text-2xl text-neutral-900 dark:text-white">
+        {{ title }}
+      </h1>
+      <p class="mt-2 text-neutral-500 text-sm dark:text-neutral-400">
+        {{ subtitle }}
+      </p>
+    </div>
+
+    <!-- Login Form -->
+    <div class="p-6 bg-white dark:bg-neutral-900 border border-neutral-200/60 rounded-2xl dark:border-neutral-800 shadow-black/5 shadow-xl dark:shadow-black/20">
+      <!-- Error Message -->
+      @if(error)
+        <div class="mb-4 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 rounded-lg dark:border-red-800">
+          <div class="flex gap-2 items-center">
+            <div class="h-4 w-4 text-red-600 dark:text-red-400 i-hugeicons-alert-circle"></div>
+            <p class="text-red-600 text-sm dark:text-red-400">{{ error }}</p>
+          </div>
+        </div>
+      @endif
+
+      <form @submit="handleSubmit">
+        <!-- Email Field -->
+        <div class="mb-4">
+          <Input
+            type="email"
+            label="Email address"
+            placeholder="you@example.com"
+            :value="email"
+            @input="email = $event.target.value"
+            @blur="validateEmail"
+            :error="fieldErrors.email"
+            required
+            :disabled="isLoading"
+          />
+        </div>
+
+        <!-- Password Field -->
+        <div class="mb-4">
+          <Input
+            type="password"
+            label="Password"
+            placeholder="Enter your password"
+            :value="password"
+            @input="password = $event.target.value"
+            @blur="validatePassword"
+            :error="fieldErrors.password"
+            required
+            :disabled="isLoading"
+          />
+        </div>
+
+        <!-- Remember Me & Forgot Password -->
+        <div class="flex items-center justify-between mb-6">
+          @if(showRememberMe)
+            <label class="flex gap-2 items-center cursor-pointer">
+              <input
+                type="checkbox"
+                class="h-4 w-4 text-blue-500 bg-white dark:bg-neutral-800 border-neutral-300 rounded dark:border-neutral-600 focus:ring-blue-500/40 focus:ring-offset-0"
+                :checked="rememberMe"
+                @change="rememberMe = $event.target.checked"
+                :disabled="isLoading"
+              />
+              <span class="text-neutral-600 text-sm dark:text-neutral-400">Remember me</span>
+            </label>
+          @endif
+
+          @if(showForgotPassword)
+            <a href="/forgot-password" class="font-medium text-blue-600 text-sm dark:text-blue-400 hover:text-blue-500 dark:hover:text-blue-300">
+              Forgot password?
+            </a>
+          @endif
+        </div>
+
+        <!-- Submit Button -->
+        <Button
+          type="submit"
+          variant="primary"
+          size="lg"
+          fullWidth
+          :loading="isLoading"
+          :disabled="isLoading || !email || !password"
+        >
+          @if(isLoading)
+            Signing in...
+          @else
+            Sign in
+          @endif
+        </Button>
+      </form>
+
+      <!-- Divider -->
+      <div class="relative my-6">
+        <div class="flex absolute inset-0 items-center">
+          <div class="w-full border-neutral-200 border-t dark:border-neutral-700"></div>
+        </div>
+        <div class="flex relative justify-center text-xs">
+          <span class="px-2 text-neutral-400 bg-white dark:bg-neutral-900">or continue with</span>
+        </div>
+      </div>
+
+      <!-- Social Login -->
+      <div class="grid gap-3 grid-cols-2">
+        <button
+          type="button"
+          class="flex gap-2 items-center justify-center px-4 py-2 font-medium text-neutral-700 text-sm dark:text-neutral-200 bg-white dark:bg-neutral-800 hover:bg-neutral-50 dark:hover:bg-neutral-700 border border-neutral-200 rounded-lg dark:border-neutral-700 transition-colors"
+          :disabled="isLoading"
+        >
+          <svg class="h-4 w-4" viewBox="0 0 24 24">
+            <path fill="currentColor" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
+            <path fill="currentColor" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
+            <path fill="currentColor" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
+            <path fill="currentColor" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
+          </svg>
+          Google
+        </button>
+        <button
+          type="button"
+          class="flex gap-2 items-center justify-center px-4 py-2 font-medium text-neutral-700 text-sm dark:text-neutral-200 bg-white dark:bg-neutral-800 hover:bg-neutral-50 dark:hover:bg-neutral-700 border border-neutral-200 rounded-lg dark:border-neutral-700 transition-colors"
+          :disabled="isLoading"
+        >
+          <svg class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
+            <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
+          </svg>
+          GitHub
+        </button>
+      </div>
+    </div>
+
+    <!-- Sign Up Link -->
+    @if(showSignUp)
+      <p class="mt-6 text-center text-neutral-500 text-sm dark:text-neutral-400">
+        Don't have an account?
+        <a href="/register" class="font-medium text-blue-600 dark:text-blue-400 hover:text-blue-500 dark:hover:text-blue-300">
+          Sign up
+        </a>
+      </p>
+    @endif
+  </div>
+</div>