@stacksjs/components 0.2.92 → 0.2.94

package/src/ui/pagination/Pagination.stx

@@ -1,150 +0,0 @@
-<script server>
-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 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>
-
-<script client>
-const emit = defineEmits()
-const totalPages = {{ totalPages }}
-const siblingCount = {{ siblingCount }}
-// Reactive prop binding — parent can drive `current-page` via signals
-// (useful for URL-driven pagination via useSearchParams). See #1704.
-const page = useReactiveProp('current-page', {{ currentPage }})
-
-function goToPage(target) {
-  if (target >= 1 && target <= totalPages && target !== page()) {
-    page.set(target)
-    emit('change', target)
-  }
-}
-
-function goToPrevious() { goToPage(page() - 1) }
-function goToNext() { goToPage(page() + 1) }
-function goToFirst() { goToPage(1) }
-function goToLast() { goToPage(totalPages) }
-
-const pageNumbers = derived(() => {
-  const cur = page()
-  const pages = []
-  const totalNumbers = siblingCount * 2 + 3
-  const totalBlocks = totalNumbers + 2
-
-  if (totalPages <= totalBlocks) {
-    for (let i = 1; i <= totalPages; i++) pages.push(i)
-    return pages
-  }
-
-  const leftSibling = Math.max(cur - siblingCount, 1)
-  const rightSibling = Math.min(cur + siblingCount, totalPages)
-  const showLeftEllipsis = leftSibling > 2
-  const showRightEllipsis = rightSibling < totalPages - 1
-
-  if (!showLeftEllipsis && showRightEllipsis) {
-    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) {
-    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 {
-    pages.push(1)
-    pages.push('ellipsis-left')
-    for (let i = leftSibling; i <= rightSibling; i++) pages.push(i)
-    pages.push('ellipsis-right')
-    pages.push(totalPages)
-  }
-  return pages
-})
-
-const isFirstPage = derived(() => page() === 1)
-const isLastPage = derived(() => page() === totalPages)
-
-defineExpose({ page, goToPage })
-</script>
-
-<nav class="{{ paginationClasses }}" role="navigation" aria-label="Pagination">
-  @if(showFirstLast)
-    <button
-      type="button"
-      @click="goToFirst()"
-      class="{{ buttonClasses }}"
-      aria-label="Go to first page"
-      :disabled="isFirstPage()"
-    >
-      <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
-
-  @if(showPrevNext)
-    <button
-      type="button"
-      @click="goToPrevious()"
-      class="{{ buttonClasses }}"
-      aria-label="Go to previous page"
-      :disabled="isFirstPage()"
-    >
-      <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
-
-  <span :for="p in pageNumbers()" :key="p" class="contents">
-    <span :if="typeof p === 'string'" class="{{ ellipsisClasses }}" aria-hidden="true">...</span>
-    <button
-      :if="typeof p !== 'string'"
-      type="button"
-      :class="p === page() ? '{{ activeButtonClasses }}' : '{{ buttonClasses }}'"
-      :aria-label="`Go to page ${p}`"
-      :aria-current="p === page() ? 'page' : null"
-      :disabled="p === page()"
-      @click="goToPage(p)"
-      x-text="p"
-    ></button>
-  </span>
-
-  @if(showPrevNext)
-    <button
-      type="button"
-      @click="goToNext()"
-      class="{{ buttonClasses }}"
-      aria-label="Go to next page"
-      :disabled="isLastPage()"
-    >
-      <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
-
-  @if(showFirstLast)
-    <button
-      type="button"
-      @click="goToLast()"
-      class="{{ buttonClasses }}"
-      aria-label="Go to last page"
-      :disabled="isLastPage()"
-    >
-      <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/src/ui/pagination/index.ts

@@ -1,11 +0,0 @@
-export { default as Pagination } from './Pagination.stx'
-
-export interface PaginationProps {
-  currentPage: number
-  totalPages: number
-  siblingCount?: number
-  showFirstLast?: boolean
-  showPrevNext?: boolean
-  onChange?: (page: number) => void
-  className?: string
-}

package/src/ui/payment/Checkout.stx

@@ -1,31 +0,0 @@
-<script server>
-export const products = $props.products || []
-export const mode = $props.mode || 'subscription'
-export const stripePublicKey = $props.stripePublicKey || ''
-export const apiUrl = $props.apiUrl || ''
-export const shipping = $props.shipping || 0
-export const taxes = $props.taxes || 0
-export const className = $props.className || ''
-
-export const isSubscription = mode === 'subscription'
-export const isOneTime = mode === 'one-time'
-</script>
-
-@if(isSubscription)
-  <SubscriptionCheckout
-    :products="products"
-    :stripePublicKey="stripePublicKey"
-    :apiUrl="apiUrl"
-    :shipping="shipping"
-    :taxes="taxes"
-    :className="className"
-  />
-@endif
-
-@if(isOneTime)
-  <div class="p-8 text-center">
-    <p class="text-gray-600 dark:text-gray-400">
-      One-time payment mode is not yet implemented.
-    </p>
-  </div>
-@endif

package/src/ui/payment/DefaultPaymentMethod.stx

@@ -1,62 +0,0 @@
-<script server>
-export const paymentMethod = $props.paymentMethod
-export const isLoading = $props.isLoading || false
-export const className = $props.className || ''
-
-const brandIcons = {
-  visa: '💳',
-  mastercard: '💳',
-  amex: '💳',
-  discover: '💳',
-  default: '💳',
-}
-
-export const containerClasses = `mt-16 w-2/3 bg-white dark:bg-blue-gray-800 px-8 py-6 shadow ring-1 ring-black dark:ring-gray-700 ring-opacity-5 sm:rounded-lg ${className}`.trim()
-</script>
-
-<div class="{{ containerClasses }}">
-  <h2 class="text-lg text-gray-900 dark:text-gray-100 font-medium">
-    Payment Info
-  </h2>
-
-  @if(isLoading)
-    <!-- Loading skeleton -->
-    <div class="mt-8 animate-pulse">
-      <div class="h-20 bg-gray-200 dark:bg-gray-700 rounded-lg"></div>
-    </div>
-  @else
-    @if(paymentMethod)
-      <div class="col-span-1 mt-8 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[paymentMethod.brand.toLowerCase()] || brandIcons.default }}</span>
-              </div>
-
-              <!-- Card Details -->
-              <div>
-                <h2 class="text-sm text-gray-600 dark:text-gray-300">
-                  {{ paymentMethod.brand }} •••• {{ paymentMethod.last_four }}
-                  <span class="ml-4 inline-flex items-center rounded-md bg-indigo-50 dark:bg-indigo-900/30 px-2 py-1 text-xs text-indigo-700 dark:text-indigo-300 font-medium ring-1 ring-indigo-700/10 dark:ring-indigo-300/20 ring-inset">Default</span>
-                  <br>
-                  <span class="text-xs text-gray-500 dark:text-gray-400 italic">Expires {{ paymentMethod.exp_month }} / {{ paymentMethod.exp_year }}</span>
-                </h2>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    @else
-      <!-- Empty state -->
-      <div class="col-span-1 mt-8 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 px-4 py-5">
-          <h2 class="text-center text-sm text-gray-600 dark:text-gray-300">
-            You haven't added any payment methods yet.
-          </h2>
-        </div>
-      </div>
-    @endif
-  @endif
-</div>

package/src/ui/payment/PaymentMethods.stx

@@ -1,104 +0,0 @@
-<script server>
-export const paymentMethods = $props.paymentMethods || []
-export const isLoading = $props.isLoading || false
-export const showMakeDefault = $props.showMakeDefault ?? true
-export const showDelete = $props.showDelete ?? true
-export const className = $props.className || ''
-
-export const brandIcons = {
-  visa: '💳',
-  mastercard: '💳',
-  amex: '💳',
-  discover: '💳',
-  default: '💳',
-}
-
-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)
-    <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">
-                  <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>
-
-                  <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">
-                  @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="onMakeDefault('{{ 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
-
-                  @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="onDelete('{{ 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
-      <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>