@stacksjs/components 0.2.3

package/dist/Pagination-yza9v4qw.stx

@@ -0,0 +1,183 @@
+<script>
+export const currentPage = $props.currentPage || 1
+export const totalPages = $props.totalPages || 1
+export const siblingCount = $props.siblingCount || 1
+export const showFirstLast = $props.showFirstLast ?? true
+export const showPrevNext = $props.showPrevNext ?? true
+export const className = $props.className || ''
+export const onChange = $props.onChange
+
+// Generate page numbers to display
+function generatePageNumbers() {
+  const pages = []
+  const totalNumbers = siblingCount * 2 + 3 // siblings on each side + current + first + last
+  const totalBlocks = totalNumbers + 2 // + 2 for ellipsis
+
+  if (totalPages <= totalBlocks) {
+    // Show all pages
+    for (let i = 1; i <= totalPages; i++) {
+      pages.push(i)
+    }
+  } else {
+    const leftSiblingIndex = Math.max(currentPage - siblingCount, 1)
+    const rightSiblingIndex = Math.min(currentPage + siblingCount, totalPages)
+
+    const showLeftEllipsis = leftSiblingIndex > 2
+    const showRightEllipsis = rightSiblingIndex < totalPages - 1
+
+    if (!showLeftEllipsis && showRightEllipsis) {
+      // Show left pages + ellipsis + last
+      const leftCount = 3 + 2 * siblingCount
+      for (let i = 1; i <= leftCount; i++) {
+        pages.push(i)
+      }
+      pages.push('ellipsis-right')
+      pages.push(totalPages)
+    } else if (showLeftEllipsis && !showRightEllipsis) {
+      // Show first + ellipsis + right pages
+      pages.push(1)
+      pages.push('ellipsis-left')
+      const rightCount = 3 + 2 * siblingCount
+      for (let i = totalPages - rightCount + 1; i <= totalPages; i++) {
+        pages.push(i)
+      }
+    } else {
+      // Show first + ellipsis + middle + ellipsis + last
+      pages.push(1)
+      pages.push('ellipsis-left')
+      for (let i = leftSiblingIndex; i <= rightSiblingIndex; i++) {
+        pages.push(i)
+      }
+      pages.push('ellipsis-right')
+      pages.push(totalPages)
+    }
+  }
+
+  return pages
+}
+
+const pageNumbers = generatePageNumbers()
+
+function goToPage(page) {
+  if (page >= 1 && page <= totalPages && page !== currentPage) {
+    if (onChange) {
+      onChange(page)
+    }
+  }
+}
+
+function goToPrevious() {
+  goToPage(currentPage - 1)
+}
+
+function goToNext() {
+  goToPage(currentPage + 1)
+}
+
+function goToFirst() {
+  goToPage(1)
+}
+
+function goToLast() {
+  goToPage(totalPages)
+}
+
+export const paginationClasses = `flex items-center gap-1 ${className}`.trim()
+export const buttonClasses = `px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-white dark:disabled:hover:bg-gray-800 transition-colors duration-150`.trim()
+export const activeButtonClasses = `px-3 py-2 text-sm font-medium text-white bg-blue-600 dark:bg-blue-500 border border-blue-600 dark:border-blue-500 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900`.trim()
+export const ellipsisClasses = `px-3 py-2 text-sm font-medium text-gray-400 dark:text-gray-600`.trim()
+export const iconClasses = `w-5 h-5`.trim()
+</script>
+
+<nav class="{{ paginationClasses }}" role="navigation" aria-label="Pagination">
+  <!-- First page button -->
+  @if(showFirstLast)
+    <button
+      type="button"
+      onclick="goToFirst()"
+      class="{{ buttonClasses }}"
+      aria-label="Go to first page"
+      disabled="{{ currentPage === 1 }}"
+    >
+      <svg class="{{ iconClasses }}" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 19l-7-7 7-7m8 14l-7-7 7-7" />
+      </svg>
+    </button>
+  @endif
+
+  <!-- Previous button -->
+  @if(showPrevNext)
+    <button
+      type="button"
+      onclick="goToPrevious()"
+      class="{{ buttonClasses }}"
+      aria-label="Go to previous page"
+      disabled="{{ currentPage === 1 }}"
+    >
+      <svg class="{{ iconClasses }}" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+      </svg>
+    </button>
+  @endif
+
+  <!-- Page numbers -->
+  @foreach(page in pageNumbers)
+    @if(typeof page === 'string')
+      <!-- Ellipsis -->
+      <span class="{{ ellipsisClasses }}" aria-hidden="true">...</span>
+    @else
+      @if(page === currentPage)
+        <!-- Current page -->
+        <button
+          type="button"
+          class="{{ activeButtonClasses }}"
+          aria-label="Page {{ page }}"
+          aria-current="page"
+          disabled
+        >
+          {{ page }}
+        </button>
+      @else
+        <!-- Other pages -->
+        <button
+          type="button"
+          onclick="goToPage({{ page }})"
+          class="{{ buttonClasses }}"
+          aria-label="Go to page {{ page }}"
+        >
+          {{ page }}
+        </button>
+      @endif
+    @endif
+  @endforeach
+
+  <!-- Next button -->
+  @if(showPrevNext)
+    <button
+      type="button"
+      onclick="goToNext()"
+      class="{{ buttonClasses }}"
+      aria-label="Go to next page"
+      disabled="{{ currentPage === totalPages }}"
+    >
+      <svg class="{{ iconClasses }}" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+      </svg>
+    </button>
+  @endif
+
+  <!-- Last page button -->
+  @if(showFirstLast)
+    <button
+      type="button"
+      onclick="goToLast()"
+      class="{{ buttonClasses }}"
+      aria-label="Go to last page"
+      disabled="{{ currentPage === totalPages }}"
+    >
+      <svg class="{{ iconClasses }}" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 5l7 7-7 7M5 5l7 7-7 7" />
+      </svg>
+    </button>
+  @endif
+</nav>

package/dist/PasswordInput-4xnndp5y.stx

@@ -0,0 +1,155 @@
+<script>
+export const value = $props.value || ''
+export const onChange = $props.onChange || (() => {})
+export const placeholder = $props.placeholder || 'Enter your password'
+export const disabled = $props.disabled || false
+export const readonly = $props.readonly || false
+export const size = $props.size || 'md'
+export const error = $props.error || false
+export const label = $props.label || ''
+export const helperText = $props.helperText || ''
+export const required = $props.required || false
+export const showStrength = $props.showStrength || false
+export const className = $props.className || ''
+export const inputClassName = $props.inputClassName || ''
+
+// State
+let showPassword = false
+
+// Size classes
+const sizeClasses = {
+  sm: 'px-3 py-1.5 text-sm h-8',
+  md: 'px-4 py-2 text-base h-10',
+  lg: 'px-5 py-3 text-lg h-12',
+}
+
+// Icon size classes
+const iconSizeClasses = {
+  sm: 'h-4 w-4',
+  md: 'h-5 w-5',
+  lg: 'h-6 w-6',
+}
+
+// Base and state classes
+const baseClasses = 'block w-full border-0 rounded-md shadow-sm ring-1 ring-inset transition-colors duration-200 focus:ring-2 focus:ring-inset dark:bg-blue-gray-700 dark:text-gray-100 pr-10'
+
+const stateClasses = error
+  ? 'ring-red-300 dark:ring-red-600 text-red-900 dark:text-red-300 placeholder-red-300 dark:placeholder-red-500 focus:ring-red-500 dark:focus:ring-red-400'
+  : 'ring-gray-300 dark:ring-gray-600 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:ring-indigo-600 dark:focus:ring-indigo-400'
+
+const disabledClasses = disabled
+  ? 'opacity-50 cursor-not-allowed bg-gray-50 dark:bg-gray-800'
+  : readonly
+    ? 'bg-gray-50 dark:bg-gray-800 cursor-default'
+    : 'bg-white dark:bg-blue-gray-700'
+
+export const inputClasses = `${baseClasses} ${sizeClasses[size]} ${stateClasses} ${disabledClasses} ${inputClassName}`.trim()
+export const labelClasses = `block text-sm font-medium leading-6 mb-2 ${error ? 'text-red-600 dark:text-red-400' : 'text-gray-900 dark:text-gray-100'}`.trim()
+export const helperClasses = `mt-2 text-sm ${error ? 'text-red-600 dark:text-red-400' : 'text-gray-500 dark:text-gray-400'}`.trim()
+export const iconClasses = iconSizeClasses[size]
+
+// Password strength calculation
+function calculateStrength(password) {
+  if (!password) return 0
+  let strength = 0
+  if (password.length >= 8) strength += 25
+  if (password.length >= 12) strength += 25
+  if (/[a-z]/.test(password) && /[A-Z]/.test(password)) strength += 25
+  if (/\d/.test(password)) strength += 15
+  if (/[^a-zA-Z\d]/.test(password)) strength += 10
+  return Math.min(strength, 100)
+}
+
+export const strength = calculateStrength(value)
+export const strengthColor = strength < 40 ? 'bg-red-500' : strength < 70 ? 'bg-yellow-500' : 'bg-green-500'
+export const strengthText = strength < 40 ? 'Weak' : strength < 70 ? 'Medium' : 'Strong'
+</script>
+
+<div class="w-full {{ className }}">
+  @if(label)
+    <label for="password-input" class="{{ labelClasses }}">
+      {{ label }}
+      @if(required)
+        <span class="text-red-500 ml-1">*</span>
+      @endif
+    </label>
+  @endif
+
+  <div class="relative">
+    <input
+      type="{{ showPassword ? 'text' : 'password' }}"
+      id="password-input"
+      class="{{ inputClasses }}"
+      value="{{ value }}"
+      placeholder="{{ placeholder }}"
+      disabled="{{ disabled }}"
+      readonly="{{ readonly }}"
+      required="{{ required }}"
+      oninput="handleInput(event)"
+      aria-invalid="{{ error ? 'true' : 'false' }}"
+      @if(helperText)aria-describedby="helper-text"@endif
+    />
+
+    <!-- Toggle visibility button -->
+    <div class="absolute inset-y-0 right-0 flex items-center pr-3">
+      <button
+        type="button"
+        onclick="toggleVisibility()"
+        class="text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 focus:outline-none"
+        aria-label="{{ showPassword ? 'Hide password' : 'Show password' }}"
+      >
+        @if(showPassword)
+          <!-- Eye slash icon (hide) -->
+          <svg class="{{ iconClasses }}" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
+          </svg>
+        @else
+          <!-- Eye icon (show) -->
+          <svg class="{{ iconClasses }}" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+          </svg>
+        @endif
+      </button>
+    </div>
+  </div>
+
+  @if(showStrength && value.length > 0)
+    <!-- Password strength indicator -->
+    <div class="mt-2">
+      <div class="flex items-center justify-between mb-1">
+        <span class="text-xs text-gray-600 dark:text-gray-400">Password strength</span>
+        <span class="text-xs font-medium {{ strength < 40 ? 'text-red-600' : strength < 70 ? 'text-yellow-600' : 'text-green-600' }}">
+          {{ strengthText }}
+        </span>
+      </div>
+      <div class="w-full h-1.5 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
+        <div
+          class="{{ strengthColor }} h-full transition-all duration-300 rounded-full"
+          style="width: {{ strength }}%"
+        ></div>
+      </div>
+    </div>
+  @endif
+
+  @if(helperText)
+    <p id="helper-text" class="{{ helperClasses }}">
+      {{ helperText }}
+    </p>
+  @endif
+</div>
+
+<script>
+function handleInput(event) {
+  const newValue = event.target.value
+
+  if (onChange) {
+    onChange(newValue)
+  }
+}
+
+function toggleVisibility() {
+  showPassword = !showPassword
+  // Re-render would be handled by the framework
+}
+</script>

package/dist/PaymentMethods-jxba6kek.stx

@@ -0,0 +1,113 @@
+<script>
+export const paymentMethods = $props.paymentMethods || []
+export const onDeletePaymentMethod = $props.onDeletePaymentMethod
+export const onMakeDefault = $props.onMakeDefault
+export const isLoading = $props.isLoading || false
+export const className = $props.className || ''
+
+// Card brand icon mapping
+const brandIcons = {
+  visa: '💳',
+  mastercard: '💳',
+  amex: '💳',
+  discover: '💳',
+  default: '💳',
+}
+
+export const containerClasses = `mt-4 ${className}`.trim()
+</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>
+  @else
+    @if(paymentMethods.length > 0)
+      <ul role="list" class="grid grid-cols-1 gap-6 lg:grid-cols-1 sm:grid-cols-1">
+        @foreach(method in paymentMethods)
+          <li class="col-span-1 border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-blue-gray-800 shadow divide-y divide-gray-200 dark:divide-gray-700">
+            <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 }}
+                    </h2>
+                    <span class="text-xs text-gray-500 dark:text-gray-400 italic">
+                      Expires {{ method.exp_month }} / {{ method.exp_year }}
+                    </span>
+                  </div>
+                </div>
+
+                <div class="flex justify-end space-x-4">
+                  <!-- Make Default Button -->
+                  @if(onMakeDefault)
+                    <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"
+                      onclick="handleMakeDefault('{{ method.id }}')"
+                      title="Make default"
+                    >
+                      <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
+                      </svg>
+                    </button>
+                  @endif
+
+                  <!-- Delete Button -->
+                  @if(onDeletePaymentMethod)
+                    <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"
+                      onclick="handleDelete('{{ method.id }}')"
+                      title="Delete payment method"
+                    >
+                      <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                      </svg>
+                    </button>
+                  @endif
+                </div>
+              </div>
+            </div>
+          </li>
+        @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" />
+        </svg>
+        <h3 class="mt-2 text-sm text-gray-900 dark:text-gray-100 font-medium">No payment methods</h3>
+        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
+          You haven't added any payment methods yet.
+        </p>
+      </div>
+    @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/dist/Popover-scbqatjq.stx

@@ -0,0 +1,24 @@
+<script>
+export const className = $props.className || ''
+export const as = $props.as || 'div'
+export let isOpen = false
+
+export function toggle() {
+  isOpen = !isOpen
+}
+
+export function close() {
+  isOpen = false
+}
+
+export function open() {
+  isOpen = true
+}
+
+const baseClasses = 'relative'
+const popoverClasses = `${baseClasses} ${className}`.trim()
+</script>
+
+<component :is="{{ as }}" class="{{ popoverClasses }}">
+  <slot :isOpen="isOpen" :toggle="toggle" :close="close" :open="open" />
+</component>

package/dist/PopoverButton-rbxhzj4k.stx

@@ -0,0 +1,23 @@
+<script>
+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 function handleClick(e) {
+  if (disabled) return
+  onClick?.(e)
+}
+</script>
+
+<component
+  :is="{{ as }}"
+  class="{{ buttonClasses }}"
+  @if(disabled)disabled aria-disabled="true"@endif
+  @click="handleClick"
+>
+  <slot />
+</component>

package/dist/PopoverPanel-9ng1rm6e.stx

@@ -0,0 +1,23 @@
+<script>
+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',
+}
+
+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()
+</script>
+
+<component
+  :is="{{ as }}"
+  class="{{ panelClasses }}"
+>
+  <slot />
+</component>

package/dist/Portal-j111yvqp.stx

@@ -0,0 +1,74 @@
+<script>
+export const target = $props.target || 'body'
+export const disabled = $props.disabled || false
+
+let portalContainer = null
+let mounted = false
+
+// Create portal container
+function createPortal() {
+  if (typeof window === 'undefined' || disabled)
+    return
+
+  // Get target element
+  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')
+  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
+  window.addEventListener('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;">
+    <slot />
+  </div>
+@endif
+
+<script>
+// Trigger portal creation after render
+if (typeof window !== 'undefined' && document.readyState === 'complete') {
+  setTimeout(createPortal, 0)
+}
+</script>