@stacksjs/components 0.2.27 → 0.2.53

package/src/ui/payment/PaymentMethods.stx

@@ -1,12 +1,11 @@
 <script server>
 export const paymentMethods = $props.paymentMethods || []
-export const onDeletePaymentMethod = $props.onDeletePaymentMethod
-export const onMakeDefault = $props.onMakeDefault
 export const isLoading = $props.isLoading || false
+export const showMakeDefault = $props.showMakeDefault ?? true
+export const showDelete = $props.showDelete ?? true
 export const className = $props.className || ''
 
-// Card brand icon mapping
-const brandIcons = {
+export const brandIcons = {
   visa: '💳',
   mastercard: '💳',
   amex: '💳',
@@ -17,9 +16,22 @@ const brandIcons = {
 export const containerClasses = `mt-4 ${className}`.trim()
 </script>
 
+<script client>
+const emit = defineEmits()
+
+function onMakeDefault(methodId) {
+  emit('makeDefault', methodId)
+}
+
+function onDelete(methodId) {
+  if (confirm('Are you sure you want to delete this payment method?')) {
+    emit('deletePaymentMethod', methodId)
+  }
+}
+</script>
+
 <div class="{{ containerClasses }}">
   @if(isLoading)
-    <!-- Loading state -->
     <div class="animate-pulse">
       <div class="h-24 bg-gray-200 dark:bg-gray-700 rounded-lg"></div>
     </div>
@@ -31,12 +43,10 @@ export const containerClasses = `mt-4 ${className}`.trim()
             <div class="w-full p-3">
               <div class="flex items-center justify-between">
                 <div class="flex items-center space-x-4">
-                  <!-- Card Brand Icon -->
                   <div class="flex-shrink-0 h-10 w-10 flex items-center justify-center bg-gray-100 dark:bg-gray-700 rounded-md">
                     <span class="text-2xl">{{ brandIcons[method.brand.toLowerCase()] || brandIcons.default }}</span>
                   </div>
 
-                  <!-- Card Details -->
                   <div>
                     <h2 class="text-sm text-gray-600 dark:text-gray-300">
                       {{ method.brand }} •••• {{ method.last_four }}
@@ -48,12 +58,11 @@ export const containerClasses = `mt-4 ${className}`.trim()
                 </div>
 
                 <div class="flex justify-end space-x-4">
-                  <!-- Make Default Button -->
-                  @if(onMakeDefault)
+                  @if(showMakeDefault)
                     <button
                       type="button"
                       class="border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-blue-gray-700 px-2 py-1 text-sm text-gray-700 dark:text-gray-300 font-semibold shadow-sm hover:bg-gray-50 dark:hover:bg-blue-gray-600 focus-visible:outline-2 focus-visible:outline-blue-600 focus-visible:outline-offset-2 disabled:opacity-50 disabled:cursor-not-allowed"
-                      @click="handleMakeDefault('{{ method.id }}')"
+                      @click="onMakeDefault('{{ method.id }}')"
                       title="Make default"
                     >
                       <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -62,12 +71,11 @@ export const containerClasses = `mt-4 ${className}`.trim()
                     </button>
                   @endif
 
-                  <!-- Delete Button -->
-                  @if(onDeletePaymentMethod)
+                  @if(showDelete)
                     <button
                       type="button"
                       class="border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-blue-gray-700 px-2 py-1 text-sm text-red-600 dark:text-red-400 font-semibold shadow-sm hover:bg-red-50 dark:hover:bg-red-900/20 focus-visible:outline-2 focus-visible:outline-red-600 focus-visible:outline-offset-2 disabled:opacity-50 disabled:cursor-not-allowed"
-                      @click="handleDelete('{{ method.id }}')"
+                      @click="onDelete('{{ method.id }}')"
                       title="Delete payment method"
                     >
                       <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -82,7 +90,6 @@ export const containerClasses = `mt-4 ${className}`.trim()
         @endforeach
       </ul>
     @else
-      <!-- Empty state -->
       <div class="text-center py-12 bg-white dark:bg-blue-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
         <svg class="mx-auto h-12 w-12 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
@@ -95,19 +102,3 @@ export const containerClasses = `mt-4 ${className}`.trim()
     @endif
   @endif
 </div>
-
-<script>
-function handleMakeDefault(methodId) {
-  if (onMakeDefault) {
-    onMakeDefault(methodId)
-  }
-}
-
-function handleDelete(methodId) {
-  if (onDeletePaymentMethod) {
-    if (confirm('Are you sure you want to delete this payment method?')) {
-      onDeletePaymentMethod(methodId)
-    }
-  }
-}
-</script>

package/src/ui/payment/SubscriptionCheckout.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/src/ui/popover/Popover.stx

@@ -1,24 +1,60 @@
 <script server>
 export const className = $props.className || ''
 export const as = $props.as || 'div'
-export let isOpen = false
 
-export function toggle() {
-  isOpen = !isOpen
-}
+const baseClasses = 'relative'
+export const popoverClasses = `${baseClasses} ${className}`.trim()
+export const popoverInstanceId = `stx-pop-${Math.random().toString(36).slice(2, 11)}`
+</script>
 
-export function close() {
-  isOpen = false
-}
+<script client>
+const emit = defineEmits()
+const popoverInstanceId = {{ popoverInstanceId }}
+const isOpen = state(false)
+let rootEl = null
+let outsideHandler = null
 
-export function open() {
-  isOpen = true
-}
+function open() { if (!isOpen()) { isOpen.set(true); emit('change', true) } }
+function close() { if (isOpen()) { isOpen.set(false); emit('change', false) } }
+function toggle() { isOpen() ? close() : open() }
 
-const baseClasses = 'relative'
-const popoverClasses = `${baseClasses} ${className}`.trim()
+function onToggle(event) { event.stopPropagation(); toggle() }
+function onClose(event) { event.stopPropagation(); close() }
+function onOpen(event) { event.stopPropagation(); open() }
+
+onMount(() => {
+  rootEl = document.querySelector(`[data-popover-id="${popoverInstanceId}"]`)
+  outsideHandler = (event) => {
+    if (!isOpen()) return
+    if (rootEl && !rootEl.contains(event.target)) close()
+  }
+  document.addEventListener('click', outsideHandler, true)
+})
+
+onDestroy(() => {
+  if (outsideHandler) document.removeEventListener('click', outsideHandler, true)
+})
+
+const dataState = derived(() => isOpen() ? 'open' : 'closed')
+
+defineExpose({ isOpen, toggle, open, close })
 </script>
 
-<component :is="{{ as }}" class="{{ popoverClasses }}">
-  <slot :isOpen="isOpen" :toggle="toggle" :close="close" :open="open" />
+<component
+  :is="{{ as }}"
+  class="{{ popoverClasses }}"
+  data-stx-popover
+  data-popover-id="{{ popoverInstanceId }}"
+  :data-state="dataState()"
+  @stx:popover-toggle="onToggle($event)"
+  @stx:popover-open="onOpen($event)"
+  @stx:popover-close="onClose($event)"
+>
+  <slot />
 </component>
+
+<style>
+[data-stx-popover][data-state="closed"] [data-stx-popover-panel] {
+  display: none;
+}
+</style>

package/src/ui/popover/PopoverButton.stx

@@ -2,22 +2,28 @@
 export const className = $props.className || ''
 export const as = $props.as || 'button'
 export const disabled = $props.disabled || false
-export const onClick = $props.onClick
 
 const baseClasses = 'inline-flex items-center gap-2 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75'
-const buttonClasses = `${baseClasses} ${className}`.trim()
+export const buttonClasses = `${baseClasses} ${className}`.trim()
+</script>
+
+<script client>
+const emit = defineEmits()
+const isDisabled = {{ disabled }}
 
-export function handleClick(e) {
-  if (disabled) return
-  onClick?.(e)
+function onClick(event) {
+  if (isDisabled) return
+  emit('click', event)
+  event.currentTarget.dispatchEvent(new CustomEvent('stx:popover-toggle', { bubbles: true }))
 }
 </script>
 
 <component
   :is="{{ as }}"
   class="{{ buttonClasses }}"
+  data-stx-popover-button
   @if(disabled)disabled aria-disabled="true"@endif
-  @click="handleClick"
+  @click="onClick($event)"
 >
   <slot />
 </component>

package/src/ui/popover/PopoverPanel.stx

@@ -1,23 +1,23 @@
 <script server>
 export const className = $props.className || ''
 export const as = $props.as || 'div'
-export const static_ = $props.static || false
 export const position = $props.position || 'bottom'
 
 const positionClasses = {
-  'top': 'bottom-full mb-2',
-  'bottom': 'top-full mt-2',
-  'left': 'right-full mr-2',
-  'right': 'left-full ml-2',
+  top: 'bottom-full mb-2',
+  bottom: 'top-full mt-2',
+  left: 'right-full mr-2',
+  right: 'left-full ml-2',
 }
 
 const baseClasses = 'absolute z-10 rounded-lg bg-white dark:bg-neutral-800 p-4 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none'
-const panelClasses = `${baseClasses} ${positionClasses[position]} ${className}`.trim()
+export const panelClasses = `${baseClasses} ${positionClasses[position]} ${className}`.trim()
 </script>
 
 <component
   :is="{{ as }}"
   class="{{ panelClasses }}"
+  data-stx-popover-panel
 >
   <slot />
 </component>

package/src/ui/portal/Portal.stx

@@ -2,73 +2,56 @@
 export const target = $props.target || 'body'
 export const disabled = $props.disabled || false
 
-let portalContainer = null
-let mounted = false
+export const portalId = `portal-content-${Math.random().toString(36).slice(2, 11)}`
+</script>
 
-// Create portal container
-function createPortal() {
-  if (typeof window === 'undefined' || disabled)
-    return
+<script client>
+const target = {{ target }}
+const isDisabled = {{ disabled }}
+const portalId = {{ portalId }}
 
-  // Get target element
-  const targetElement = typeof target === 'string'
-    ? document.querySelector(target)
-    : target
+let portalContainer = null
 
+function createPortal() {
+  if (isDisabled) return
+  const targetElement = typeof target === 'string' ? document.querySelector(target) : target
   if (!targetElement) {
     console.warn(`Portal target "${target}" not found`)
     return
   }
-
-  // Create portal container
   portalContainer = document.createElement('div')
   portalContainer.setAttribute('data-portal', 'true')
-
-  // Move portal content to target
-  const portalContent = document.getElementById('portal-content')
+  const portalContent = document.getElementById(portalId)
   if (portalContent) {
     while (portalContent.firstChild) {
       portalContainer.appendChild(portalContent.firstChild)
     }
   }
-
   targetElement.appendChild(portalContainer)
-  mounted = true
 }
 
-// Cleanup portal
 function cleanupPortal() {
   if (portalContainer && portalContainer.parentNode) {
     portalContainer.parentNode.removeChild(portalContainer)
     portalContainer = null
-    mounted = false
   }
 }
 
-// Initialize portal on mount
-if (typeof window !== 'undefined') {
-  window.addEventListener('DOMContentLoaded', () => {
-    setTimeout(createPortal, 0)
-  })
-
-  // Cleanup on page unload
+onMount(() => {
+  setTimeout(createPortal, 0)
   window.addEventListener('beforeunload', cleanupPortal)
-}
+})
+
+onDestroy(() => {
+  cleanupPortal()
+  window.removeEventListener('beforeunload', cleanupPortal)
+})
 </script>
 
 @if(disabled)
-  <!-- Render in place if disabled -->
   <slot />
 @else
-  <!-- Hidden container that will be moved to portal -->
-  <div id="portal-content" style="display: none;">
+  <div id="{{ portalId }}" style="display: none;">
     <slot />
   </div>
 @endif
-
-<script>
-// Trigger portal creation after render
-if (typeof window !== 'undefined' && document.readyState === 'complete') {
-  setTimeout(createPortal, 0)
-}
-</script>