@stacksjs/components 0.2.3

package/dist/SubscriptionCheckout-4cbxdg7w.stx

@@ -0,0 +1,353 @@
+<script>
+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 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 total = calculateSubtotal() + shipping + taxes
+
+export const containerClasses = `bg-gray-50 dark:bg-blue-gray-900 ${className}`.trim()
+</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)">
+      <!-- Left Column - Contact & Payment -->
+      <div>
+        <!-- Contact Information -->
+        <div>
+          <h2 class="text-lg text-gray-900 dark:text-gray-100 font-medium">
+            Contact information
+          </h2>
+
+          <div class="mt-4">
+            <label for="email-address" class="block text-sm text-gray-700 dark:text-gray-300 font-medium">
+              Email address
+            </label>
+            <div class="mt-1">
+              <input
+                id="email-address"
+                type="email"
+                name="email-address"
+                autocomplete="email"
+                required
+                class="block w-full border border-gray-300 dark:border-gray-600 rounded-md p-2 shadow-sm bg-white dark:bg-blue-gray-700 text-gray-900 dark:text-gray-100 focus:border-indigo-500 dark:focus:border-indigo-400 sm:text-sm focus:ring-indigo-500 dark:focus:ring-indigo-400"
+              />
+            </div>
+          </div>
+        </div>
+
+        <!-- Billing Information -->
+        <div class="mt-10 border-t border-gray-200 dark:border-gray-700 pt-10">
+          <h2 class="text-lg text-gray-900 dark:text-gray-100 font-medium">
+            Billing information
+          </h2>
+
+          <div class="mt-4 grid grid-cols-1 gap-y-6 sm:grid-cols-2 sm:gap-x-4">
+            <div class="sm:col-span-2">
+              <label for="card-name" class="block text-sm text-gray-700 dark:text-gray-300 font-medium">
+                Name on card
+              </label>
+              <div class="mt-1">
+                <input
+                  type="text"
+                  id="card-name"
+                  name="card-name"
+                  autocomplete="cc-name"
+                  required
+                  class="block w-full border border-gray-300 dark:border-gray-600 rounded-md p-2 shadow-sm bg-white dark:bg-blue-gray-700 text-gray-900 dark:text-gray-100 focus:border-indigo-500 sm:text-sm focus:ring-indigo-500"
+                />
+              </div>
+            </div>
+
+            <!-- Stripe Element Mount Point -->
+            <div class="sm:col-span-2">
+              <div id="payment-element" class="mt-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-blue-gray-700 p-3"></div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Payment Type -->
+        <div class="mt-10 border-t border-gray-200 dark:border-gray-700 pt-10">
+          <h2 class="text-lg text-gray-900 dark:text-gray-100 font-medium">
+            Payment
+          </h2>
+
+          <fieldset class="mt-4">
+            <legend class="sr-only">Payment type</legend>
+            <div class="sm:flex sm:items-center space-y-4 sm:space-x-10 sm:space-y-0">
+              <div class="flex items-center">
+                <input
+                  id="credit-card"
+                  name="payment-type"
+                  type="radio"
+                  checked
+                  class="h-4 w-4 border-gray-300 dark:border-gray-600 text-indigo-600 dark:text-indigo-400 focus:ring-indigo-500 dark:focus:ring-indigo-400"
+                />
+                <label for="credit-card" class="ml-3 block text-sm text-gray-700 dark:text-gray-300 font-medium">
+                  Credit card
+                </label>
+              </div>
+            </div>
+          </fieldset>
+        </div>
+      </div>
+
+      <!-- Right Column - Order Summary -->
+      <div class="mt-10 lg:mt-0">
+        <h2 class="text-lg text-gray-900 dark:text-gray-100 font-medium">
+          Order summary
+        </h2>
+
+        <div class="mt-4 border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-blue-gray-800 shadow-sm">
+          <h3 class="sr-only">Items in your cart</h3>
+
+          <!-- Product List -->
+          <ul role="list" class="divide-y divide-gray-200 dark:divide-gray-700">
+            @foreach(product in products)
+              <li class="flex px-4 py-6 sm:px-6">
+                <div class="flex-shrink-0">
+                  @if(product.images)
+                    <img src="{{ product.images }}" alt="{{ product.name }}" class="w-20 rounded-md" />
+                  @else
+                    <div class="w-20 h-20 bg-gray-200 dark:bg-gray-700 rounded-md flex items-center justify-center">
+                      <svg class="h-8 w-8 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                      </svg>
+                    </div>
+                  @endif
+                </div>
+
+                <div class="ml-6 flex flex-1 flex-col">
+                  <div class="flex">
+                    <div class="min-w-0 flex-1">
+                      <h4 class="text-sm">
+                        <a href="#" class="text-gray-700 dark:text-gray-300 font-medium hover:text-gray-800 dark:hover:text-gray-200">
+                          {{ product.name }}
+                        </a>
+                      </h4>
+                    </div>
+
+                    @if(onRemoveProduct)
+                      <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"
+                          onclick="handleRemoveProduct('{{ product.id }}')"
+                          title="Remove"
+                        >
+                          <span class="sr-only">Remove</span>
+                          <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                            <path fill-rule="evenodd" d="M8.75 1A2.75 2.75 0 0 0 6 3.75v.443c-.795.077-1.584.176-2.365.298a.75.75 0 1 0 .23 1.482l.149-.022.841 10.518A2.75 2.75 0 0 0 7.596 19h4.807a2.75 2.75 0 0 0 2.742-2.53l.841-10.52.149.023a.75.75 0 0 0 .23-1.482A41.03 41.03 0 0 0 14 4.193V3.75A2.75 2.75 0 0 0 11.25 1h-2.5ZM10 4c.84 0 1.673.025 2.5.075V3.75c0-.69-.56-1.25-1.25-1.25h-2.5c-.69 0-1.25.56-1.25 1.25v.325C8.327 4.025 9.16 4 10 4ZM8.58 7.72a.75.75 0 0 0-1.5.06l.3 7.5a.75.75 0 1 0 1.5-.06l-.3-7.5Zm4.34.06a.75.75 0 1 0-1.5-.06l-.3 7.5a.75.75 0 1 0 1.5.06l.3-7.5Z" clip-rule="evenodd" />
+                          </svg>
+                        </button>
+                      </div>
+                    @endif
+                  </div>
+
+                  <div class="flex flex-1 items-end justify-between pt-2">
+                    <p class="mt-1 text-sm text-gray-900 dark:text-gray-100 font-medium">
+                      ${{ (product.price / 100).toFixed(2) }}
+                    </p>
+
+                    <div class="ml-4">
+                      <label for="quantity-{{ product.id }}" class="sr-only">Quantity</label>
+                      <select
+                        id="quantity-{{ product.id }}"
+                        name="quantity"
+                        class="border border-gray-300 dark:border-gray-600 rounded-md text-left text-base text-gray-700 dark:text-gray-300 font-medium shadow-sm bg-white dark:bg-blue-gray-700 focus:border-indigo-500 sm:text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500"
+                      >
+                        <option value="1" {{ (product.quantity || 1) === 1 ? 'selected' : '' }}>1</option>
+                        <option value="2" {{ (product.quantity || 1) === 2 ? 'selected' : '' }}>2</option>
+                        <option value="3" {{ (product.quantity || 1) === 3 ? 'selected' : '' }}>3</option>
+                        <option value="4" {{ (product.quantity || 1) === 4 ? 'selected' : '' }}>4</option>
+                        <option value="5" {{ (product.quantity || 1) === 5 ? 'selected' : '' }}>5</option>
+                        <option value="6" {{ (product.quantity || 1) === 6 ? 'selected' : '' }}>6</option>
+                        <option value="7" {{ (product.quantity || 1) === 7 ? 'selected' : '' }}>7</option>
+                        <option value="8" {{ (product.quantity || 1) === 8 ? 'selected' : '' }}>8</option>
+                      </select>
+                    </div>
+                  </div>
+                </div>
+              </li>
+            @endforeach
+          </ul>
+
+          <!-- Summary Totals -->
+          <dl class="border-t border-gray-200 dark:border-gray-700 px-4 py-6 space-y-6 sm:px-6">
+            <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) }}
+              </dd>
+            </div>
+
+            @if(shipping > 0)
+              <div class="flex items-center justify-between">
+                <dt class="text-sm text-gray-600 dark:text-gray-400">Shipping</dt>
+                <dd class="text-sm text-gray-900 dark:text-gray-100 font-medium">
+                  ${{ (shipping / 100).toFixed(2) }}
+                </dd>
+              </div>
+            @endif
+
+            @if(taxes > 0)
+              <div class="flex items-center justify-between">
+                <dt class="text-sm text-gray-600 dark:text-gray-400">Taxes</dt>
+                <dd class="text-sm text-gray-900 dark:text-gray-100 font-medium">
+                  ${{ (taxes / 100).toFixed(2) }}
+                </dd>
+              </div>
+            @endif
+
+            <div class="flex items-center justify-between border-t border-gray-200 dark:border-gray-700 pt-6">
+              <dt class="text-base text-gray-900 dark:text-gray-100 font-medium">Total</dt>
+              <dd class="text-base text-gray-900 dark:text-gray-100 font-medium">
+                ${{ (total / 100).toFixed(2) }}
+              </dd>
+            </div>
+          </dl>
+
+          <!-- Submit Button -->
+          <div class="border-t border-gray-200 dark:border-gray-700 px-4 py-6 sm:px-6">
+            <button
+              type="submit"
+              class="w-full border border-transparent rounded-md bg-indigo-600 dark:bg-indigo-500 px-4 py-3 text-base text-white font-medium shadow-sm hover:bg-indigo-700 dark:hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-900"
+            >
+              Confirm order
+            </button>
+          </div>
+        </div>
+      </div>
+    </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-kjq8qd2p.stx

@@ -0,0 +1,74 @@
+<script>
+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 onChange = $props.onChange
+export const label = $props.label || ''
+
+// Size configurations using headwind
+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',
+  },
+}
+
+const config = sizeConfig[size]
+
+// Track classes
+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'
+const trackStateClasses = checked
+  ? 'bg-blue-500 dark:bg-blue-600'
+  : 'bg-neutral-400 dark:bg-neutral-600'
+const trackDisabledClasses = disabled
+  ? 'opacity-50 cursor-not-allowed pointer-events-none'
+  : ''
+
+export const trackClasses = `${trackBaseClasses} ${trackStateClasses} ${trackDisabledClasses} ${config.track} ${className}`.trim()
+
+// Thumb classes
+const thumbBaseClasses = 'pointer-events-none inline-block transform rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out'
+const thumbPositionClasses = checked ? config.translate : 'translate-x-0'
+export const thumbClasses = `${thumbBaseClasses} ${thumbPositionClasses} ${config.thumb}`.trim()
+
+// Toggle function
+export function toggle() {
+  if (disabled) return
+  onChange?.(!checked)
+}
+</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="{{ checked ? '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 }}"
+    />
+  </button>
+</label>

package/dist/Table-59j9qwp0.stx

@@ -0,0 +1,14 @@
+<script>
+export const className = $props.className || ''
+export const striped = $props.striped || false
+export const hoverable = $props.hoverable !== false
+
+const baseClasses = 'min-w-full divide-y divide-neutral-200 dark:divide-neutral-700'
+const tableClasses = `${baseClasses} ${className}`.trim()
+</script>
+
+<div class="overflow-x-auto">
+  <table class="{{ tableClasses }}">
+    <slot :striped="striped" :hoverable="hoverable" />
+  </table>
+</div>

package/dist/TableBody-reka2gwv.stx

@@ -0,0 +1,10 @@
+<script>
+export const className = $props.className || ''
+
+const baseClasses = 'bg-white divide-y divide-neutral-200 dark:bg-neutral-900 dark:divide-neutral-700'
+const bodyClasses = `${baseClasses} ${className}`.trim()
+</script>
+
+<tbody class="{{ bodyClasses }}">
+  <slot />
+</tbody>

package/dist/TableCell-j7nh4sgr.stx

@@ -0,0 +1,10 @@
+<script>
+export const className = $props.className || ''
+
+const baseClasses = 'px-6 py-4 whitespace-nowrap text-sm text-neutral-900 dark:text-neutral-100'
+const cellClasses = `${baseClasses} ${className}`.trim()
+</script>
+
+<td class="{{ cellClasses }}">
+  <slot />
+</td>

package/dist/TableHead-ecbrwpqm.stx

@@ -0,0 +1,10 @@
+<script>
+export const className = $props.className || ''
+
+const baseClasses = 'bg-neutral-50 dark:bg-neutral-800'
+const headClasses = `${baseClasses} ${className}`.trim()
+</script>
+
+<thead class="{{ headClasses }}">
+  <slot />
+</thead>

package/dist/TableHeader-jn2shwsv.stx

@@ -0,0 +1,13 @@
+<script>
+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()
+</script>
+
+<th class="{{ headerClasses }}" @if(sortable)@click="onClick"@endif>
+  <slot />
+</th>

package/dist/TableRow-xz8rrxhc.stx

@@ -0,0 +1,11 @@
+<script>
+export const className = $props.className || ''
+export const hoverable = $props.hoverable !== false
+
+const hoverClasses = hoverable ? 'hover:bg-neutral-50 dark:hover:bg-neutral-800' : ''
+const rowClasses = `${hoverClasses} ${className}`.trim()
+</script>
+
+<tr class="{{ rowClasses }}">
+  <slot />
+</tr>

package/dist/Tabs-kb6ex6m7.stx

@@ -0,0 +1,145 @@
+<script>
+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 || ''
+export const onChange = $props.onChange
+
+let activeTab = defaultTab
+
+function selectTab(index) {
+  activeTab = index
+  if (onChange) {
+    onChange(index, tabs[index])
+  }
+}
+
+// Orientation classes
+const orientationClasses = {
+  horizontal: 'flex-col',
+  vertical: 'flex-row',
+}
+
+// Tab list orientation classes
+const tabListOrientationClasses = {
+  horizontal: 'flex-row border-b',
+  vertical: 'flex-col border-r',
+}
+
+// Variant classes for tab list
+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',
+}
+
+// Tab button classes based on variant
+function getTabClasses(index, variant, orientation) {
+  const isActive = index === activeTab
+  const baseClasses = '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 borderPosition = orientation === 'horizontal' ? 'border-b-2' : 'border-r-2'
+    return `${baseClasses} ${borderPosition} ${isActive ? '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'}`
+  } else if (variant === 'pills') {
+    return `${baseClasses} rounded-md ${isActive ? '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'}`
+  } else if (variant === 'enclosed') {
+    const borderClasses = orientation === 'horizontal' ? 'border-t border-l border-r rounded-t-md' : 'border-t border-l border-b rounded-l-md'
+    return `${baseClasses} ${borderClasses} ${isActive ? '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'}`
+  }
+}
+
+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>
+
+<div class="{{ containerClasses }}">
+  <!-- Tab List -->
+  <div
+    class="{{ tabListClasses }}"
+    role="tablist"
+    aria-orientation="{{ orientation }}"
+  >
+    @foreach(tab in tabs)
+      <button
+        type="button"
+        class="{{ getTabClasses($loop.index, variant, orientation) }}"
+        role="tab"
+        aria-selected="{{ activeTab === $loop.index ? 'true' : 'false' }}"
+        aria-controls="tab-panel-{{ $loop.index }}"
+        id="tab-{{ $loop.index }}"
+        tabindex="{{ activeTab === $loop.index ? '0' : '-1' }}"
+        onclick="selectTab({{ $loop.index }})"
+        onkeydown="handleKeyDown(event, {{ $loop.index }})"
+      >
+        @if(tab.icon)
+          <span class="inline-flex items-center gap-2">
+            <span innerHTML="{!! tab.icon !!}"></span>
+            <span>{{ tab.label }}</span>
+          </span>
+        @else
+          {{ tab.label }}
+        @endif
+      </button>
+    @endforeach
+  </div>
+
+  <!-- Tab Panels -->
+  @foreach(tab in tabs)
+    @if(activeTab === $loop.index)
+      <div
+        id="tab-panel-{{ $loop.index }}"
+        class="{{ tabPanelClasses }}"
+        role="tabpanel"
+        aria-labelledby="tab-{{ $loop.index }}"
+        tabindex="0"
+      >
+        {!! tab.content !!}
+      </div>
+    @endif
+  @endforeach
+</div>
+
+<script>
+function handleKeyDown(event, currentIndex) {
+  const tabCount = tabs.length
+  let newIndex = currentIndex
+
+  if (orientation === 'horizontal') {
+    if (event.key === 'ArrowRight') {
+      event.preventDefault()
+      newIndex = (currentIndex + 1) % tabCount
+    } else if (event.key === 'ArrowLeft') {
+      event.preventDefault()
+      newIndex = (currentIndex - 1 + tabCount) % tabCount
+    }
+  } else {
+    if (event.key === 'ArrowDown') {
+      event.preventDefault()
+      newIndex = (currentIndex + 1) % tabCount
+    } else if (event.key === 'ArrowUp') {
+      event.preventDefault()
+      newIndex = (currentIndex - 1 + tabCount) % tabCount
+    }
+  }
+
+  if (event.key === 'Home') {
+    event.preventDefault()
+    newIndex = 0
+  } else if (event.key === 'End') {
+    event.preventDefault()
+    newIndex = tabCount - 1
+  }
+
+  if (newIndex !== currentIndex) {
+    selectTab(newIndex)
+    // Focus the new tab
+    if (typeof window !== 'undefined') {
+      const newTab = document.getElementById(`tab-${newIndex}`)
+      if (newTab) newTab.focus()
+    }
+  }
+}
+</script>