@stacksjs/defaults 0.70.54

package/resources/components/Docs/Demo/StepperCode.md

@@ -0,0 +1,216 @@
+```vue
+<script setup>
+import { ref, computed } from '@stacksjs/stx'
+import { Stepper } from '@stacksjs/stepper'
+
+const currentStep = ref(0)
+const stepperRef = ref()
+
+const steps = [
+  {
+    title: 'Step 1',
+    description: 'First step',
+    icon: 'i-heroicons-check'
+  },
+  {
+    title: 'Step 2',
+    description: 'Second step',
+    icon: 'i-heroicons-check'
+  },
+  {
+    title: 'Step 3',
+    description: 'Third step',
+    icon: 'i-heroicons-check'
+  }
+]
+
+const next = () => {
+  if (currentStep.value < steps.length - 1) {
+    currentStep.value++
+  }
+}
+
+const previous = () => {
+  if (currentStep.value > 0) {
+    currentStep.value--
+  }
+}
+
+const reset = () => {
+  currentStep.value = 0
+}
+
+const currentContent = computed(() => {
+  switch (currentStep.value) {
+    case 0:
+      return {
+        title: 'Personal Information',
+        description: 'Please provide your basic details'
+      }
+    case 1:
+      return {
+        title: 'Account Setup',
+        description: 'Configure your account settings'
+      }
+    case 2:
+      return {
+        title: 'Final Review',
+        description: 'Review your information before submitting'
+      }
+    default:
+      return {
+        title: '',
+        description: ''
+      }
+  }
+})
+</script>
+
+<template>
+  <div class="mx-auto p-8 max-w-3xl">
+    <Stepper
+      ref="stepperRef"
+      v-model="currentStep"
+      :steps="steps"
+      orientation="horizontal"
+      class="mb-12"
+    />
+
+    <!-- Content Section -->
+    <div class="mb-8 p-6 bg-white ring-1 ring-gray-900/5 rounded-lg shadow-sm">
+      <h2 class="mb-2 font-semibold text-gray-900 text-xl">
+        {{ currentContent.title }}
+      </h2>
+      <p class="mb-6 text-gray-600">
+        {{ currentContent.description }}
+      </p>
+
+      <!-- Step 1 Content -->
+      <div v-if="currentStep === 0" class="space-y-4">
+        <div class="grid gap-4 grid-cols-2">
+          <div class="space-y-2">
+            <label class="block font-medium text-gray-700 text-sm">First Name</label>
+            <input type="text" class="block w-full sm:text-sm border-gray-300 rounded-md focus:border-blue-500 focus:ring-blue-500 shadow-sm" />
+          </div>
+          <div class="space-y-2">
+            <label class="block font-medium text-gray-700 text-sm">Last Name</label>
+            <input type="text" class="block w-full sm:text-sm border-gray-300 rounded-md focus:border-blue-500 focus:ring-blue-500 shadow-sm" />
+          </div>
+        </div>
+        <div class="space-y-2">
+          <label class="block font-medium text-gray-700 text-sm">Email</label>
+          <input type="email" class="block w-full sm:text-sm border-gray-300 rounded-md focus:border-blue-500 focus:ring-blue-500 shadow-sm" />
+        </div>
+      </div>
+
+      <!-- Step 2 Content -->
+      <div v-if="currentStep === 1" class="space-y-4">
+        <div class="space-y-2">
+          <label class="block font-medium text-gray-700 text-sm">Username</label>
+          <input type="text" class="block w-full sm:text-sm border-gray-300 rounded-md focus:border-blue-500 focus:ring-blue-500 shadow-sm" />
+        </div>
+        <div class="space-y-2">
+          <label class="block font-medium text-gray-700 text-sm">Password</label>
+          <input type="password" class="block w-full sm:text-sm border-gray-300 rounded-md focus:border-blue-500 focus:ring-blue-500 shadow-sm" />
+        </div>
+      </div>
+
+      <!-- Step 3 Content -->
+      <div v-if="currentStep === 2" class="space-y-4">
+        <div class="p-4 bg-gray-50 rounded-lg">
+          <h3 class="mb-2 font-medium text-gray-900 text-sm">Review Your Information</h3>
+          <p class="text-gray-600 text-sm">Please review all the information you've entered. Once you submit, you won't be able to make changes.</p>
+        </div>
+        <div class="flex items-center space-x-2">
+          <input type="checkbox" class="text-blue-600 border-gray-300 rounded focus:ring-blue-500" />
+          <label class="text-gray-700 text-sm">I confirm that all the information provided is correct</label>
+        </div>
+      </div>
+    </div>
+
+    <div class="flex gap-4 justify-center">
+      <button
+        class="px-4 py-2 font-medium text-gray-700 text-sm bg-gray-50 hover:bg-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50"
+        :disabled="currentStep === 0"
+        @click="previous"
+      >
+        Previous
+      </button>
+      <button
+        class="px-4 py-2 font-medium text-sm text-white bg-blue-500 hover:bg-blue-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50"
+        :disabled="currentStep === steps.length - 1"
+        @click="next"
+      >
+        Next
+      </button>
+      <button
+        class="px-4 py-2 font-medium text-gray-700 text-sm bg-white hover:bg-gray-50 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+        @click="reset"
+      >
+        Reset
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+:deep(.stepper) {
+  --tw-primary-100: rgb(219 234 254);
+  --tw-primary-600: rgb(37 99 235);
+}
+
+button {
+  transition: all 0.2s ease;
+}
+
+button:not(:disabled):active {
+  transform: scale(0.98);
+}
+
+:deep(.step) {
+  min-width: 120px;
+}
+
+:deep(.step[data-orientation="horizontal"]:not(:last-child)) {
+  margin-right: 1rem;
+}
+
+:deep(.step-completed .connector-line) {
+  @apply bg-blue-500;
+}
+
+:deep(.step-current) {
+  @apply text-blue-600;
+}
+
+:deep(.step-completed) {
+  @apply text-blue-600;
+}
+
+:deep(.step-icon) {
+  @apply h-8 w-8 rounded-full flex items-center justify-center;
+}
+
+:deep(.step-completed .step-icon) {
+  @apply bg-blue-100 text-blue-600;
+}
+
+:deep(.step-current .step-icon) {
+  @apply bg-blue-100 text-blue-600 ring-2 ring-blue-600 ring-offset-2;
+}
+
+:deep(.step-upcoming .step-icon) {
+  @apply bg-gray-100 text-gray-500;
+}
+
+input[type="text"],
+input[type="email"],
+input[type="password"] {
+  @apply border-gray-300;
+}
+
+input[type="checkbox"] {
+  @apply rounded border-gray-300 text-blue-600 focus:ring-blue-500;
+}
+</style>
+```

package/resources/components/Docs/Demo/StepperDemo.stx

@@ -0,0 +1,137 @@
+<script>
+interface StepperDemoProps {
+  currentStep?: number
+  steps?: string
+}
+
+const { currentStep = 0, steps = [ } = defineProps<StepperDemoProps>()
+
+{ title: 'Step 1', description: 'First step', icon: 'i-heroicons-check' },
+  { title: 'Step 2', description: 'Second step', icon: 'i-heroicons-check' },
+  { title: 'Step 3', description: 'Third step', icon: 'i-heroicons-check' },
+]
+
+function getStepContent(step) {
+  switch (step) {
+    case 0:
+      return { title: 'Personal Information', description: 'Please provide your basic details' }
+    case 1:
+      return { title: 'Account Setup', description: 'Configure your account settings' }
+    case 2:
+      return { title: 'Final Review', description: 'Review your information before submitting' }
+    default:
+      return { title: '', description: '' }
+  }
+}
+</script>
+<div class="max-w-4xl">
+  <DocsPlayground>
+    <div class="mx-auto p-8 max-w-3xl">
+      <!-- Stepper indicator -->
+      <div class="flex items-center justify-between mb-12">
+        @foreach(steps as step)
+          <div class="flex items-center : ? '' 'flex-1' {{ }} loop.last">
+            <div class="flex flex-col items-center">
+              <div class="flex items-center justify-center h-8 w-8 text-blue-600' text-gray-500' ring-blue-600 ring-offset-2' rounded-full : : ? ? '' 'bg-blue-100 'bg-gray-100 'ring-2 {{ {{ }} }} <= == currentStep currentStep loop.index loop.index">
+                @if(loop.index < currentStep)
+                  <div class="h-5 w-5 i-heroicons-check"></div>
+                @else
+                  {{ loop.index + 1 }}
+                @endif
+              </div>
+              <span class="mt-2 font-medium' text-sm : ? 'text-blue-600 'text-gray-500' {{ }} == currentStep loop.index">{{ step.title }}</span>
+            </div>
+            @if(!loop.last)
+              <div class="flex-1 mx-4 h-0.5 : ? 'bg-blue-500' 'bg-gray-200' {{ }} < currentStep loop.index"></div>
+            @endif
+          </div>
+        @endforeach
+      </div>
+
+      <!-- Content Section -->
+      <div class="mb-8 p-6 bg-white ring-1 ring-gray-900/5 rounded-lg shadow-sm">
+        <h2 class="mb-2 font-semibold text-gray-900 text-xl">
+          {{ getStepContent(currentStep).title }}
+        </h2>
+        <p class="mb-6 text-gray-600">
+          {{ getStepContent(currentStep).description }}
+        </p>
+
+        <!-- Step 1 Content -->
+        @if(currentStep == 0)
+          <div class="space-y-4">
+            <div class="grid gap-4 grid-cols-2">
+              <div class="space-y-2">
+                <label class="block font-medium text-gray-700 text-sm">First Name</label>
+                <input type="text" class="block w-full sm:text-sm border-gray-300 rounded-md focus:border-blue-500 focus:ring-blue-500 shadow-sm">
+              </div>
+              <div class="space-y-2">
+                <label class="block font-medium text-gray-700 text-sm">Last Name</label>
+                <input type="text" class="block w-full sm:text-sm border-gray-300 rounded-md focus:border-blue-500 focus:ring-blue-500 shadow-sm">
+              </div>
+            </div>
+            <div class="space-y-2">
+              <label class="block font-medium text-gray-700 text-sm">Email</label>
+              <input type="email" class="block w-full sm:text-sm border-gray-300 rounded-md focus:border-blue-500 focus:ring-blue-500 shadow-sm">
+            </div>
+          </div>
+        @endif
+
+        <!-- Step 2 Content -->
+        @if(currentStep == 1)
+          <div class="space-y-4">
+            <div class="space-y-2">
+              <label class="block font-medium text-gray-700 text-sm">Username</label>
+              <input type="text" class="block w-full sm:text-sm border-gray-300 rounded-md focus:border-blue-500 focus:ring-blue-500 shadow-sm">
+            </div>
+            <div class="space-y-2">
+              <label class="block font-medium text-gray-700 text-sm">Password</label>
+              <input type="password" class="block w-full sm:text-sm border-gray-300 rounded-md focus:border-blue-500 focus:ring-blue-500 shadow-sm">
+            </div>
+          </div>
+        @endif
+
+        <!-- Step 3 Content -->
+        @if(currentStep == 2)
+          <div class="space-y-4">
+            <div class="p-4 bg-gray-50 rounded-lg">
+              <h3 class="mb-2 font-medium text-gray-900 text-sm">Review Your Information</h3>
+              <p class="text-gray-600 text-sm">Please review all the information you've entered. Once you submit, you won't be able to make changes.</p>
+            </div>
+            <div class="flex items-center space-x-2">
+              <input type="checkbox" class="text-blue-600 border-gray-300 rounded focus:ring-blue-500">
+              <label class="text-gray-700 text-sm">I confirm that all the information provided is correct</label>
+            </div>
+          </div>
+        @endif
+      </div>
+
+      <div class="flex gap-4 justify-center">
+        <button
+          class="px-4 py-2 font-medium text-gray-700 text-sm bg-gray-50 hover:bg-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 cursor-not-allowed' : ? '' 'opacity-50 {{ }} == 0 currentStep"
+          data-action="previous-step"
+          {{ currentStep == 0 ? 'disabled' : '' }}
+        >
+          Previous
+        </button>
+        <button
+          class="px-4 py-2 font-medium text-sm text-white bg-blue-500 hover:bg-blue-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 cursor-not-allowed' - : ? '' 'opacity-50 {{ }} == 1 currentStep steps.length"
+          data-action="next-step"
+          {{ currentStep == steps.length - 1 ? 'disabled' : '' }}
+        >
+          Next
+        </button>
+        <button
+          class="px-4 py-2 font-medium text-gray-700 text-sm bg-white hover:bg-gray-50 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+          data-action="reset-stepper"
+        >
+          Reset
+        </button>
+      </div>
+    </div>
+
+    <div slot="code">
+      <!-- StepperCode component would be rendered here -->
+    </div>
+  </DocsPlayground>
+</div>

package/resources/components/Docs/Demo/SwitchCode.md

@@ -0,0 +1,24 @@
+```vue
+<script lang="ts" setup>
+import { ref } from '@stacksjs/stx'
+import { Switch } from '@stacksjs/switch'
+
+const enabled = ref(false)
+</script>
+
+<template>
+  <Switch
+    v-model="enabled"
+    :class=": ? 'bg-blue-500' 'bg-gray-400' enabled"
+    class="inline-flex relative shrink-0 h-[38px] w-[74px] border-2 border-transparent rounded-full focus-visible:ring-2 focus-visible:ring-white/75 focus:outline-none duration-200 ease-in-out transition-colors cursor-pointer"
+  >
+    <span class="sr-only">Use setting</span>
+    <span
+      aria-hidden="true"
+      :class=": ? 'translate-x-0' 'translate-x-9' enabled"
+      class="inline-block h-[34px] w-[34px] bg-white ring-0 rounded-full shadow-lg duration-200 ease-in-out transition transform pointer-events-none"
+    />
+  </Switch>
+</template>
+
+```

package/resources/components/Docs/Demo/SwitchDemo.stx

@@ -0,0 +1,28 @@
+<script>
+interface SwitchDemoProps {
+  enabled?: boolean
+}
+
+const { enabled = false } = defineProps<SwitchDemoProps>()
+</script>
+<div class="max-w-4xl">
+    <DocsPlayground>
+      <div class="flex gap-2 items-center justify-center my-3">
+        <button
+          class="inline-flex relative shrink-0 h-[38px] w-[74px] border-2 border-transparent rounded-full focus-visible:ring-2 focus-visible:ring-white/75 focus:outline-none duration-200 ease-in-out transition-colors cursor-pointer : ? 'bg-blue-500' 'bg-gray-400' {{ }} enabled"
+          data-action="toggle-switch"
+        >
+          <span class="sr-only">Use setting</span>
+          <span
+            aria-hidden="true"
+            class="inline-block h-[34px] w-[34px] bg-white ring-0 rounded-full shadow-lg duration-200 ease-in-out transition transform pointer-events-none : ? 'translate-x-0' 'translate-x-9' {{ }} enabled"
+          ></span>
+        </button>
+      </div>
+
+      <!-- Code slot placeholder -->
+      <div slot="code">
+        <!-- SwitchCode component would be rendered here -->
+      </div>
+    </DocsPlayground>
+  </div>

package/resources/components/Docs/Home.stx

@@ -0,0 +1,7 @@
+<div class="flex flex-col items-center mt-4 home">
+  <HomeTeam />
+
+  <HomeSponsors />
+
+  <HomeContributors />
+</div>

package/resources/components/Docs/HomeContributors.stx

@@ -0,0 +1,23 @@
+<script>
+interface HomeContributorsProps {
+  contributors?: any[]
+}
+
+const { contributors = [] } = defineProps<HomeContributorsProps>()
+</script>
+<div class="vp-doc">
+    <h2 class="pb-2 pt-5 font-normal op50">
+      Contributors
+    </h2>
+  </div>
+
+  <div class="p-10 max-w-200 leading-7 text-center text-lg">
+    <div class="flex flex-wrap gap-1 justify-center">
+      @foreach(contributors as contributor)
+        <a href="https://github.com/{{ contributor.name }}" class="m-0" rel="noopener noreferrer" aria-label="{{ contributor.name }} on GitHub">
+          <img loading="lazy" src="{{ contributor.avatar }}" width="40" height="40" class="h-10 min-h-10 min-w-10 w-10 rounded-full" alt="{{ contributor.name }}'s avatar">
+        </a>
+      @endforeach
+    </div>
+    <br>
+  </div>

package/resources/components/Docs/HomeSponsors.stx

@@ -0,0 +1,17 @@
+<div class="vp-doc">
+  <h2 class="pb-2 pt-5 font-normal op50">
+    Stacks Sponsors
+  </h2>
+</div>
+
+<p id="sponsor" class="mt-5 text-center">
+  <a href="https://github.com/sponsors/chrisbbreuer">
+    <img src="https://cdn.jsdelivr.net/gh/stacksjs/sponsors/sponsorkit/sponsors.svg" class="m-auto">
+  </a>
+</p>
+
+<p class="mt-5 text-center">
+  <a href="https://github.com/sponsors/chrisbbreuer" class="italic text-xs">
+    Click here to become a sponsor.
+  </a>
+</p>

package/resources/components/Docs/HomeTeam.stx

@@ -0,0 +1,18 @@
+<script>
+interface HomeTeamProps {
+  coreTeamMembers?: any[]
+}
+
+const { coreTeamMembers = [] } = defineProps<HomeTeamProps>()
+</script>
+<div class="vp-doc">
+    <h2 class="pb-2 pt-5 font-normal op50">
+      Meet The Team
+    </h2>
+  </div>
+
+  <div class="grid gap-x-3 gap-y-20 items-start sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 p-10">
+    @foreach(coreTeamMembers as member)
+      <TeamMember data="{{ member }}" />
+    @endforeach
+  </div>

package/resources/components/Docs/TeamMember.stx

@@ -0,0 +1,79 @@
+<script>
+interface TeamMemberProps {
+  data?: string
+}
+
+const { data = { } = defineProps<TeamMemberProps>()
+
+name: '',
+  avatar: '',
+  description: '',
+  github: '',
+  sponsors: false,
+  functions: [],
+  packages: []
+}
+</script>
+<div class="text-center">
+    <img
+      loading="lazy"
+      width="100"
+      height="100"
+      class="m-auto h-25 min-h-25 min-w-25 w-25 rounded-full"
+      src="{{ data.avatar }}"
+      alt="{{ data.name }}'s avatar"
+    >
+    <div class="mb-1 mt-2 text-xl">
+      {{ data.name }}
+    </div>
+    <div class="h-80px op60">
+      {!! data.description !!}
+    </div>
+
+    <div class="flex inline gap-2 py-2 text-2xl">
+      <a
+        class="inline-block text-current duration-200 transition i-carbon-logo-github mya op30 hover:op100"
+        href="https://github.com/{{ data.github }}"
+        target="_blank"
+        rel="noopener noreferrer"
+        aria-label="{{ data.name }} on GitHub"
+      ></a>
+
+      @if(data.sponsors)
+        <a
+          class="inline-block text-current duration-200 transition i-carbon-favorite-filled mya op30 hover:op100"
+          href="https://github.com/sponsors/{{ data.github }}"
+          target="_blank"
+          rel="noopener noreferrer"
+          title="Sponsor {{ data.name }}"
+          aria-label="Sponsor {{ data.name }}"
+        ></a>
+      @endif
+    </div>
+
+    @if(data.functions.length > 0 || data.packages.length > 0)
+      <div class="grid gap-x-1 gap-y-2 grid-cols-[20px_1fr] items-start mb-2 mx-auto p-3 w-5/6 bg-gray-100 rounded">
+        @if(data.functions.length > 0)
+          <div class="ma op50 i-carbon:function-math" title="Functions"></div>
+          <div class="flex flex-row flex-wrap gap-2 text-left text-sm">
+            @foreach(data.functions as func)
+              <a href="/{{ func }}" target="_blank">
+                <code>{{ func }}</code>
+              </a>
+            @endforeach
+          </div>
+        @endif
+
+        @if(data.packages.length > 0)
+          <div class="i-carbon-cube ma op50" title="Packages"></div>
+          <div class="flex flex-row flex-wrap gap-2 text-left text-sm">
+            @foreach(data.packages as pkg)
+              <a href="/add-ons">
+                <code>{{ pkg }}</code>
+              </a>
+            @endforeach
+          </div>
+        @endif
+      </div>
+    @endif
+  </div>

package/resources/components/Email/EmailButton.stx

@@ -0,0 +1,32 @@
+<script server>
+// Bulletproof email button (stacksjs/stacks#1901 B1).
+//
+// Renders a table-based CTA that works in Outlook 2007-2019, Gmail
+// (web + Android), Apple Mail. The `bg` colour applies to BOTH the
+// table cell (Outlook ignores anchor backgrounds) and the anchor
+// (everywhere else). `mso-padding-alt` is the documented hint that
+// lets Outlook render padding correctly.
+interface EmailButtonProps {
+  href: string
+  color?: string
+  bg?: string
+  padX?: string
+  padY?: string
+}
+
+const props = defineProps<EmailButtonProps>()
+const href = props.href || '#'
+const color = props.color || '#ffffff'
+const bg = props.bg || '#3451b2'
+const padX = props.padX || '32px'
+const padY = props.padY || '14px'
+</script>
+<table role="presentation" cellpadding="0" cellspacing="0" border="0" style="margin:24px 0;border-collapse:separate;">
+  <tr>
+    <td align="center" style="border-radius:6px;background-color:{{ bg }};mso-padding-alt:0;">
+      <a href="{{ href }}" style="display:inline-block;padding:{{ padY }} {{ padX }};color:{{ color }};text-decoration:none;border-radius:6px;font-weight:600;font-size:16px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;text-align:center;mso-padding-alt:{{ padY }} {{ padX }};">
+        <slot />
+      </a>
+    </td>
+  </tr>
+</table>

package/resources/components/Email/EmailDivider.stx

@@ -0,0 +1,20 @@
+<script server>
+// Email horizontal rule (stacksjs/stacks#1901 B1).
+//
+// `<hr>` renders inconsistently across clients (Outlook draws double
+// lines, Gmail strips the colour). A 1px-tall table row with a forced
+// font-size:1px;line-height:1px; is the safe equivalent.
+interface EmailDividerProps {
+  color?: string
+  spacing?: string
+}
+
+const props = defineProps<EmailDividerProps>()
+const color = props.color || '#e5e7eb'
+const spacing = props.spacing || '24px'
+</script>
+<table role="presentation" cellpadding="0" cellspacing="0" border="0" style="width:100%;border-collapse:collapse;margin:{{ spacing }} 0;">
+  <tr>
+    <td style="height:1px;font-size:1px;line-height:1px;background-color:{{ color }};">&nbsp;</td>
+  </tr>
+</table>

package/resources/components/Email/EmailImage.stx

@@ -0,0 +1,24 @@
+<script server>
+// Email image (stacksjs/stacks#1901 B1).
+//
+// Sets the attributes Outlook + Gmail (mobile especially) need to
+// behave: display:block kills the inline whitespace gap, border:0
+// undoes the default link border, -ms-interpolation-mode:bicubic
+// smooths scaling in Outlook on Windows. Always set `alt`: image
+// blocking is the default in many corporate clients.
+interface EmailImageProps {
+  src: string
+  alt: string
+  width?: number | string
+  height?: number | string
+  display?: 'block' | 'inline'
+}
+
+const props = defineProps<EmailImageProps>()
+const src = props.src || ''
+const alt = props.alt || ''
+const width = props.width || ''
+const height = props.height || ''
+const display = props.display || 'block'
+</script>
+<img src="{{ src }}" alt="{{ alt }}" @if(width) width="{{ width }}" @endif @if(height) height="{{ height }}" @endif style="display:{{ display }};border:0;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic;max-width:100%;height:auto;" />