@stacksjs/components 0.2.27 → 0.2.53

package/dist/{Signup-c4dyv6f3.stx → Signup-hxm5hwkr.stx}

@@ -1,12 +1,36 @@
 <script server>
 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>
 
+<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">
@@ -16,7 +40,7 @@ export const containerClasses = `min-h-full flex flex-col justify-center py-12 l
 
   <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)">
+      <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
@@ -133,29 +157,3 @@ export const containerClasses = `min-h-full flex flex-col justify-center py-12 l
     </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/dist/{StepperStep-en4r00zv.stx → StepperStep-wxgembat.stx}

@@ -5,24 +5,28 @@ export const label = $props.label || ''
 export const description = $props.description || ''
 export const className = $props.className || ''
 export const as = $props.as || 'div'
-export const onClick = $props.onClick
 
 export const isComplete = stepNumber < currentStep
 export const isCurrent = stepNumber === currentStep
 export const isUpcoming = stepNumber > currentStep
 
 const baseClasses = 'flex items-center'
-const stepClasses = `${baseClasses} ${className}`.trim()
+export const stepClasses = `${baseClasses} ${className}`.trim()
+</script>
+
+<script client>
+const emit = defineEmits()
+const stepNumber = {{ stepNumber }}
 
-export function handleClick() {
-  onClick?.(stepNumber)
+function onClick() {
+  emit('click', stepNumber)
 }
 </script>
 
 <component :is="{{ as }}" class="{{ stepClasses }}">
   <button
     type="button"
-    @click="handleClick"
+    @click="onClick()"
     class="flex items-center gap-3 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 rounded-lg p-2"
   >
     <div class="{{ isComplete ? 'bg-blue-600 dark:bg-blue-500' : isCurrent ? 'bg-blue-600 dark:bg-blue-500 ring-4 ring-blue-200 dark:ring-blue-800' : 'bg-neutral-300 dark:bg-neutral-600' }} w-10 h-10 rounded-full flex items-center justify-center text-white font-semibold transition-all">

package/dist/{SubscriptionCheckout-gawjzf3q.stx → SubscriptionCheckout-zy2ycrmw.stx}

@@ -2,27 +2,115 @@
 export const products = $props.products || []
 export const stripePublicKey = $props.stripePublicKey || ''
 export const apiUrl = $props.apiUrl || ''
-export const onSubmit = $props.onSubmit
-export const onRemoveProduct = $props.onRemoveProduct
+export const showRemoveProduct = $props.showRemoveProduct ?? true
 export const shipping = $props.shipping || 0
 export const taxes = $props.taxes || 0
 export const className = $props.className || ''
 
-// Calculate totals
-export const calculateSubtotal = () => {
-  return products.reduce((sum, product) => sum + (product.price * (product.quantity || 1)), 0)
+export const subtotal = products.reduce((sum, product) => sum + (product.price * (product.quantity || 1)), 0)
+export const total = subtotal + shipping + taxes
+
+export const containerClasses = `bg-gray-50 dark:bg-blue-gray-900 ${className}`.trim()
+</script>
+
+<script client>
+const emit = defineEmits()
+const stripePublicKey = {{ stripePublicKey }}
+const apiUrl = {{ apiUrl }}
+const products = {{ products }}
+const total = {{ total }}
+
+let stripe = null
+let elements = null
+let paymentElement = null
+
+function onRemoveProduct(productId) {
+  emit('removeProduct', productId)
+}
+
+async function setupStripeElements() {
+  if (!stripe || !apiUrl) return
+  try {
+    const response = await fetch(`${apiUrl}/stripe/create-subscription`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
+      body: JSON.stringify({
+        amount: total,
+        quantity: products.reduce((sum, p) => sum + (p.quantity || 1), 0),
+      }),
+    })
+    const paymentIntent = await response.json()
+    const { clientSecret } = paymentIntent
+    if (!clientSecret) {
+      console.error('No client secret returned from API')
+      return
+    }
+    elements = stripe.elements({
+      clientSecret,
+      appearance: {
+        theme: document.documentElement.classList.contains('dark') ? 'night' : 'stripe',
+      },
+    })
+    paymentElement = elements.create('payment')
+    paymentElement.mount('#payment-element')
+  }
+  catch (error) {
+    console.error('Error setting up Stripe elements:', error)
+  }
 }
 
-export const total = calculateSubtotal() + shipping + taxes
+async function initializeStripe() {
+  if (!stripePublicKey) {
+    console.error('Stripe public key is required')
+    return
+  }
+  if (window.Stripe) {
+    stripe = window.Stripe(stripePublicKey)
+    await setupStripeElements()
+    return
+  }
+  const script = document.createElement('script')
+  script.src = 'https://js.stripe.com/v3/'
+  script.async = true
+  script.onload = async () => {
+    stripe = window.Stripe(stripePublicKey)
+    await setupStripeElements()
+  }
+  document.head.appendChild(script)
+}
 
-export const containerClasses = `bg-gray-50 dark:bg-blue-gray-900 ${className}`.trim()
+async function onSubmit(event) {
+  event.preventDefault()
+  if (!stripe || !elements) {
+    emit('error', { message: 'Stripe not initialized' })
+    return
+  }
+  try {
+    const { error } = await stripe.confirmPayment({
+      elements,
+      redirect: 'if_required',
+      confirmParams: { return_url: window.location.href },
+    })
+    if (error) {
+      emit('error', error)
+    }
+    else {
+      emit('submit', { success: true })
+    }
+  }
+  catch (error) {
+    emit('error', error)
+  }
+}
+
+onMount(() => initializeStripe())
 </script>
 
 <div class="{{ containerClasses }}">
   <div class="mx-auto max-w-2xl px-4 pb-24 pt-16 lg:max-w-7xl lg:px-8 sm:px-6">
     <h2 class="sr-only">Checkout</h2>
 
-    <form class="lg:grid lg:grid-cols-2 lg:gap-x-12 xl:gap-x-16" onsubmit="event.preventDefault(); handleCheckoutSubmit(event)">
+    <form class="lg:grid lg:grid-cols-2 lg:gap-x-12 xl:gap-x-16" @submit="onSubmit($event)">
       <!-- Left Column - Contact & Payment -->
       <div>
         <!-- Contact Information -->
@@ -139,12 +227,12 @@ export const containerClasses = `bg-gray-50 dark:bg-blue-gray-900 ${className}`.
                       </h4>
                     </div>
 
-                    @if(onRemoveProduct)
+                    @if(showRemoveProduct)
                       <div class="ml-4 flow-root flex-shrink-0">
                         <button
                           type="button"
                           class="flex items-center justify-center bg-white dark:bg-blue-gray-700 p-2.5 text-gray-400 dark:text-gray-500 -m-2.5 hover:text-gray-500 dark:hover:text-gray-400"
-                          @click="handleRemoveProduct('{{ product.id }}')"
+                          @click="onRemoveProduct('{{ product.id }}')"
                           title="Remove"
                         >
                           <span class="sr-only">Remove</span>
@@ -189,7 +277,7 @@ export const containerClasses = `bg-gray-50 dark:bg-blue-gray-900 ${className}`.
             <div class="flex items-center justify-between">
               <dt class="text-sm text-gray-600 dark:text-gray-400">Subtotal</dt>
               <dd class="text-sm text-gray-900 dark:text-gray-100 font-medium">
-                ${{ (calculateSubtotal() / 100).toFixed(2) }}
+                ${{ (subtotal / 100).toFixed(2) }}
               </dd>
             </div>
 
@@ -233,121 +321,3 @@ export const containerClasses = `bg-gray-50 dark:bg-blue-gray-900 ${className}`.
     </form>
   </div>
 </div>
-
-<script>
-// Stripe integration
-let stripe = null
-let elements = null
-let paymentElement = null
-
-function handleRemoveProduct(productId) {
-  if (onRemoveProduct) {
-    onRemoveProduct(productId)
-  }
-}
-
-async function initializeStripe() {
-  if (!stripePublicKey) {
-    console.error('Stripe public key is required')
-    return
-  }
-
-  try {
-    // Load Stripe.js
-    if (typeof window !== 'undefined' && window.Stripe) {
-      stripe = window.Stripe(stripePublicKey)
-    } else {
-      // Dynamically load Stripe.js
-      const script = document.createElement('script')
-      script.src = 'https://js.stripe.com/v3/'
-      script.async = true
-      script.onload = () => {
-        stripe = window.Stripe(stripePublicKey)
-        setupStripeElements()
-      }
-      document.head.appendChild(script)
-    }
-
-    if (stripe) {
-      await setupStripeElements()
-    }
-  } catch (error) {
-    console.error('Error initializing Stripe:', error)
-  }
-}
-
-async function setupStripeElements() {
-  if (!stripe || !apiUrl) return
-
-  try {
-    // Create payment intent for subscription
-    const response = await fetch(`${apiUrl}/stripe/create-subscription`, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-        'Accept': 'application/json',
-      },
-      body: JSON.stringify({
-        amount: total,
-        quantity: products.reduce((sum, p) => sum + (p.quantity || 1), 0),
-      }),
-    })
-
-    const paymentIntent = await response.json()
-    const { clientSecret } = paymentIntent
-    if (!clientSecret) {
-      console.error('No client secret returned from API')
-      return
-    }
-
-    // Create elements instance
-    elements = stripe.elements({
-      clientSecret,
-      appearance: {
-        theme: document.documentElement.classList.contains('dark') ? 'night' : 'stripe',
-      },
-    })
-
-    // Create and mount payment element
-    paymentElement = elements.create('payment')
-    paymentElement.mount('#payment-element')
-  } catch (error) {
-    console.error('Error setting up Stripe elements:', error)
-  }
-}
-
-async function handleCheckoutSubmit(event) {
-  if (!stripe || !elements) {
-    console.error('Stripe not initialized')
-    return
-  }
-
-  try {
-    const { error } = await stripe.confirmPayment({
-      elements,
-      redirect: 'if_required',
-      confirmParams: {
-        return_url: window.location.href,
-      },
-    })
-
-    if (error) {
-      console.error('Payment error:', error)
-      alert(error.message)
-    } else {
-      // Success!
-      if (onSubmit) {
-        onSubmit({ success: true })
-      }
-    }
-  } catch (error) {
-    console.error('Checkout error:', error)
-    alert('An error occurred during checkout')
-  }
-}
-
-// Initialize on component mount
-if (typeof window !== 'undefined') {
-  initializeStripe()
-}
-</script>

package/dist/Switch-r5t5w04w.stx

@@ -0,0 +1,70 @@
+<script server>
+export const checked = $props.checked || false
+export const disabled = $props.disabled || false
+export const size = $props.size || 'md'
+export const className = $props.className || ''
+export const label = $props.label || ''
+
+const sizeConfig = {
+  sm: { track: 'h-5 w-9', thumb: 'h-4 w-4', translate: 'translate-x-4' },
+  md: { track: 'h-[38px] w-[74px]', thumb: 'h-[34px] w-[34px]', translate: 'translate-x-9' },
+  lg: { track: 'h-12 w-24', thumb: 'h-11 w-11', translate: 'translate-x-12' },
+}
+
+export const config = sizeConfig[size]
+
+export const trackBaseClasses = 'relative inline-flex shrink-0 cursor-pointer border-2 border-transparent rounded-full transition-colors duration-200 ease-in-out focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-neutral-300 dark:focus-visible:ring-offset-neutral-700'
+export const trackDisabledClasses = disabled ? 'opacity-50 cursor-not-allowed pointer-events-none' : ''
+export const thumbBaseClasses = 'pointer-events-none inline-block transform rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out'
+</script>
+
+<script client>
+const emit = defineEmits()
+const isDisabled = {{ disabled }}
+const config = {{ config }}
+const trackBase = {{ trackBaseClasses }}
+const trackDisabled = {{ trackDisabledClasses }}
+const thumbBase = {{ thumbBaseClasses }}
+const extraClass = {{ className }}
+const isChecked = state({{ checked }})
+
+function toggle() {
+  if (isDisabled) return
+  isChecked.set(!isChecked())
+  emit('change', isChecked())
+}
+
+function trackClasses() {
+  const stateClass = isChecked()
+    ? 'bg-blue-500 dark:bg-blue-600'
+    : 'bg-neutral-400 dark:bg-neutral-600'
+  return `${trackBase} ${stateClass} ${trackDisabled} ${config.track} ${extraClass}`.trim()
+}
+
+function thumbClasses() {
+  const pos = isChecked() ? config.translate : 'translate-x-0'
+  return `${thumbBase} ${pos} ${config.thumb}`.trim()
+}
+
+defineExpose({ isChecked, toggle })
+</script>
+
+<label class="inline-flex items-center gap-3 cursor-pointer">
+  @if(label)
+    <span class="text-sm font-medium text-neutral-700 dark:text-neutral-300">
+      {{ label }}
+    </span>
+  @endif
+
+  <button
+    type="button"
+    role="switch"
+    :aria-checked="isChecked() ? 'true' : 'false'"
+    :class="trackClasses()"
+    @if(disabled)disabled aria-disabled="true"@endif
+    @click="toggle()"
+  >
+    <span class="sr-only">@if(label){{ label }}@else Toggle switch@endif</span>
+    <span aria-hidden="true" :class="thumbClasses()"></span>
+  </button>
+</label>

package/dist/{TableHeader-ydys9rzz.stx → TableHeader-0eyzbqpz.stx}

@@ -1,13 +1,20 @@
 <script server>
 export const className = $props.className || ''
 export const sortable = $props.sortable || false
-export const onClick = $props.onClick
 
 const baseClasses = 'px-6 py-3 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider dark:text-neutral-400'
 const sortableClasses = sortable ? 'cursor-pointer hover:text-neutral-700 dark:hover:text-neutral-200' : ''
-const headerClasses = `${baseClasses} ${sortableClasses} ${className}`.trim()
+export const headerClasses = `${baseClasses} ${sortableClasses} ${className}`.trim()
 </script>
 
-<th class="{{ headerClasses }}" @if(sortable)@click="onClick"@endif>
+<script client>
+const emit = defineEmits()
+
+function onClick() {
+  emit('click')
+}
+</script>
+
+<th class="{{ headerClasses }}" @if(sortable)@click="onClick()"@endif>
   <slot />
 </th>

package/dist/Tabs-bzvvn4ke.stx

@@ -0,0 +1,126 @@
+<script server>
+export const tabs = $props.tabs || []
+export const defaultTab = $props.defaultTab || 0
+export const orientation = $props.orientation || 'horizontal'
+export const variant = $props.variant || 'line'
+export const className = $props.className || ''
+
+const orientationClasses = {
+  horizontal: 'flex-col',
+  vertical: 'flex-row',
+}
+
+const tabListOrientationClasses = {
+  horizontal: 'flex-row border-b',
+  vertical: 'flex-col border-r',
+}
+
+const variantClasses = {
+  line: 'border-gray-200 dark:border-gray-700',
+  pills: 'gap-2 border-0 bg-gray-100 dark:bg-gray-800 p-1 rounded-lg',
+  enclosed: 'border-gray-200 dark:border-gray-700',
+}
+
+export const containerClasses = `flex ${orientationClasses[orientation]} ${className}`.trim()
+export const tabListClasses = `flex ${tabListOrientationClasses[orientation]} ${variantClasses[variant]}`.trim()
+export const tabPanelClasses = `p-4 focus:outline-none`.trim()
+</script>
+
+<script client>
+const emit = defineEmits()
+const tabs = {{ tabs }}
+const variant = {{ variant }}
+const orientation = {{ orientation }}
+const activeTab = state({{ defaultTab }})
+
+function selectTab(index) {
+  activeTab.set(index)
+  emit('change', { index, tab: tabs[index] })
+}
+
+function isActive(index) {
+  return activeTab() === index
+}
+
+function getTabClasses(index) {
+  const isActiveTab = isActive(index)
+  const base = 'px-4 py-2 font-medium text-sm transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900'
+  if (variant === 'line') {
+    const border = orientation === 'horizontal' ? 'border-b-2' : 'border-r-2'
+    return `${base} ${border} ${isActiveTab ? 'border-blue-500 text-blue-600 dark:text-blue-400' : 'border-transparent text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 hover:border-gray-300 dark:hover:border-gray-600'}`
+  }
+  if (variant === 'pills') {
+    return `${base} rounded-md ${isActiveTab ? 'bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 shadow-sm' : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200'}`
+  }
+  if (variant === 'enclosed') {
+    const borders = orientation === 'horizontal' ? 'border-t border-l border-r rounded-t-md' : 'border-t border-l border-b rounded-l-md'
+    return `${base} ${borders} ${isActiveTab ? 'bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700 -mb-px' : 'bg-gray-50 dark:bg-gray-900 border-transparent hover:border-gray-200 dark:hover:border-gray-700'}`
+  }
+  return base
+}
+
+function onTabKey(event, index) {
+  const tabCount = tabs.length
+  let next = index
+  if (orientation === 'horizontal') {
+    if (event.key === 'ArrowRight') { event.preventDefault(); next = (index + 1) % tabCount }
+    else if (event.key === 'ArrowLeft') { event.preventDefault(); next = (index - 1 + tabCount) % tabCount }
+  }
+  else {
+    if (event.key === 'ArrowDown') { event.preventDefault(); next = (index + 1) % tabCount }
+    else if (event.key === 'ArrowUp') { event.preventDefault(); next = (index - 1 + tabCount) % tabCount }
+  }
+  if (event.key === 'Home') { event.preventDefault(); next = 0 }
+  else if (event.key === 'End') { event.preventDefault(); next = tabCount - 1 }
+  if (next !== index) {
+    selectTab(next)
+    document.getElementById(`tab-${next}`)?.focus()
+  }
+}
+
+defineExpose({ activeTab, selectTab })
+</script>
+
+<div class="{{ containerClasses }}">
+  <div
+    class="{{ tabListClasses }}"
+    role="tablist"
+    aria-orientation="{{ orientation }}"
+  >
+    @foreach(tab in tabs)
+      <button
+        type="button"
+        :class="getTabClasses({{ $loop.index }})"
+        role="tab"
+        :aria-selected="isActive({{ $loop.index }}) ? 'true' : 'false'"
+        aria-controls="tab-panel-{{ $loop.index }}"
+        id="tab-{{ $loop.index }}"
+        :tabindex="isActive({{ $loop.index }}) ? '0' : '-1'"
+        @click="selectTab({{ $loop.index }})"
+        @keydown="onTabKey($event, {{ $loop.index }})"
+      >
+        @if(tab.icon)
+          <span class="inline-flex items-center gap-2">
+            <span x-html="{!! JSON.stringify(tab.icon) !!}"></span>
+            <span>{{ tab.label }}</span>
+          </span>
+        @else
+          {{ tab.label }}
+        @endif
+      </button>
+    @endforeach
+  </div>
+
+  @foreach(tab in tabs)
+    <div
+      :show="isActive({{ $loop.index }})"
+      id="tab-panel-{{ $loop.index }}"
+      class="{{ tabPanelClasses }}"
+      role="tabpanel"
+      aria-labelledby="tab-{{ $loop.index }}"
+      tabindex="0"
+    >
+      {!! tab.content !!}
+    </div>
+  @endforeach
+</div>

package/dist/Teleport-tsx4bt4n.stx

@@ -0,0 +1,65 @@
+<script server>
+export const to = $props.to || 'body'
+export const disabled = $props.disabled || false
+export const defer = $props.defer || false
+
+export const teleportId = `teleport-${Math.random().toString(36).slice(2, 11)}`
+</script>
+
+<script client>
+const to = {{ to }}
+const isDisabled = {{ disabled }}
+const shouldDefer = {{ defer }}
+const teleportId = {{ teleportId }}
+
+let teleportContainer = null
+
+function teleport() {
+  if (isDisabled) return
+  const targetElement = typeof to === 'string' ? document.querySelector(to) : to
+  if (!targetElement) {
+    console.warn(`Teleport target "${to}" not found`)
+    return
+  }
+  const sourceElement = document.getElementById(teleportId)
+  if (!sourceElement) return
+  if (!teleportContainer) {
+    teleportContainer = document.createElement('div')
+    teleportContainer.setAttribute('data-teleport-id', teleportId)
+  }
+  while (sourceElement.firstChild) {
+    teleportContainer.appendChild(sourceElement.firstChild)
+  }
+  targetElement.appendChild(teleportContainer)
+}
+
+function returnContent() {
+  if (!teleportContainer || !teleportContainer.parentNode) return
+  const sourceElement = document.getElementById(teleportId)
+  if (!sourceElement) return
+  while (teleportContainer.firstChild) {
+    sourceElement.appendChild(teleportContainer.firstChild)
+  }
+  teleportContainer.parentNode.removeChild(teleportContainer)
+  teleportContainer = null
+}
+
+onMount(() => {
+  if (shouldDefer) setTimeout(teleport, 0)
+  else teleport()
+  window.addEventListener('beforeunload', returnContent)
+})
+
+onDestroy(() => {
+  returnContent()
+  window.removeEventListener('beforeunload', returnContent)
+})
+</script>
+
+@if(disabled)
+  <slot />
+@else
+  <div id="{{ teleportId }}" data-teleport-source="true">
+    <slot />
+  </div>
+@endif