@stacksjs/components 0.2.93 → 0.2.94

package/src/ui/notification/Notification.stx

@@ -1,117 +0,0 @@
-<script server>
-// Initial defaults captured at render time. The client script wraps these
-// in signals so consumers can mutate them after mount (fetch-then-toast,
-// auto-dismiss, etc.). See stacksjs/stx#1692.
-export const initialShow = $props.show !== false
-export const initialTitle = $props.title || ''
-export const initialMessage = $props.message || ''
-export const initialType = $props.type || 'info'
-export const initialPosition = $props.position || 'top-right'
-export const initialDuration = Number($props.duration ?? 5000)
-export const className = $props.className || ''
-</script>
-
-<script client>
-const emit = defineEmits()
-
-const isVisible = state({{ initialShow }})
-const title = state({{ initialTitle }})
-const message = state({{ initialMessage }})
-const type = state({{ initialType }})
-const position = state({{ initialPosition }})
-const duration = state({{ initialDuration }})
-
-const typeColors = {
-  info: 'bg-blue-50 text-blue-900 dark:bg-blue-900 dark:text-blue-100',
-  success: 'bg-green-50 text-green-900 dark:bg-green-900 dark:text-green-100',
-  warning: 'bg-yellow-50 text-yellow-900 dark:bg-yellow-900 dark:text-yellow-100',
-  error: 'bg-red-50 text-red-900 dark:bg-red-900 dark:text-red-100',
-}
-
-const positions = {
-  'top-left': 'top-0 left-0',
-  'top-right': 'top-0 right-0',
-  'top-center': 'top-0 left-1/2 -translate-x-1/2',
-  'bottom-left': 'bottom-0 left-0',
-  'bottom-right': 'bottom-0 right-0',
-  'bottom-center': 'bottom-0 left-1/2 -translate-x-1/2',
-}
-
-const baseClasses = 'fixed z-50 m-4 max-w-md w-full pointer-events-auto rounded-lg p-4 shadow-lg ring-1 ring-black ring-opacity-5 transition-all'
-const extraClassName = {{ JSON.stringify(className) }}
-
-const notificationClasses = derived(() => {
-  const color = typeColors[type()] || typeColors.info
-  const pos = positions[position()] || positions['top-right']
-  return `${baseClasses} ${color} ${pos} ${extraClassName}`.trim()
-})
-
-let autoHideTimer = null
-function clearAutoHide() {
-  if (autoHideTimer) {
-    clearTimeout(autoHideTimer)
-    autoHideTimer = null
-  }
-}
-function scheduleAutoHide() {
-  clearAutoHide()
-  const d = duration()
-  if (d > 0 && isVisible()) {
-    autoHideTimer = setTimeout(() => close(), d)
-  }
-}
-
-function close() {
-  isVisible.set(false)
-  clearAutoHide()
-  emit('close')
-}
-
-function open(opts) {
-  if (opts && typeof opts === 'object') {
-    if (opts.title !== undefined) title.set(opts.title)
-    if (opts.message !== undefined) message.set(opts.message)
-    if (opts.type !== undefined) type.set(opts.type)
-    if (opts.position !== undefined) position.set(opts.position)
-    if (opts.duration !== undefined) duration.set(Number(opts.duration))
-  }
-  isVisible.set(true)
-  scheduleAutoHide()
-}
-
-onMount(() => {
-  if (isVisible()) scheduleAutoHide()
-})
-
-defineExpose({
-  open,
-  close,
-  isVisible,
-  title,
-  message,
-  type,
-  position,
-  duration,
-})
-</script>
-
-<div :if="isVisible()" :class="notificationClasses()" role="alert">
-  <div class="flex items-start">
-    <div class="flex-1">
-      <p :if="title()" class="text-sm font-medium" :text="title()"></p>
-      <p :if="message()" class="mt-1 text-sm" :class="title() ? 'opacity-90' : ''" :text="message()"></p>
-      <slot :if="!title() && !message()" />
-    </div>
-
-    <button
-      type="button"
-      @click="close()"
-      class="ml-4 inline-flex rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2"
-    >
-      <span class="sr-only">Close</span>
-      <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-        <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
-      </svg>
-    </button>
-  </div>
-</div>

package/src/ui/notification/README.md

@@ -1,114 +0,0 @@
-# Notification Component
-
-Toast notifications for user feedback and alerts.
-
-## Installation
-
-```bash
-bun add @stacksjs/components
-```
-
-## Usage
-
-```stx
-<script server>
-let showNotification = true
-
-function closeNotification() {
-  showNotification = false
-}
-</script>
-
-<Notification
-  :show="showNotification"
-  title="Success!"
-  message="Your changes have been saved."
-  type="success"
-  :onClose="closeNotification"
-/>
-```
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `show` | `boolean` | `true` | Whether notification is visible |
-| `title` | `string` | `''` | Notification title |
-| `message` | `string` | `''` | Notification message |
-| `type` | `'info' \| 'success' \| 'warning' \| 'error'` | `'info'` | Notification type |
-| `position` | `'top-left' \| 'top-right' \| 'top-center' \| 'bottom-left' \| 'bottom-right' \| 'bottom-center'` | `'top-right'` | Position on screen |
-| `duration` | `number` | `5000` | Auto-hide duration (0 = no auto-hide) |
-| `onClose` | `() => void` | - | Close handler |
-| `className` | `string` | `''` | Additional CSS classes |
-
-## Examples
-
-### Types
-
-```stx
-<Notification type="info" title="Information" message="This is an info message" />
-
-<Notification type="success" title="Success" message="Operation completed" />
-
-<Notification type="warning" title="Warning" message="Please be careful" />
-
-<Notification type="error" title="Error" message="Something went wrong" />
-```
-
-### Positions
-
-```stx
-<Notification position="top-left" title="Top Left" />
-<Notification position="top-center" title="Top Center" />
-<Notification position="bottom-right" title="Bottom Right" />
-```
-
-### No Auto-Hide
-
-```stx
-<Notification
-  :duration="0"
-  title="Important"
-  message="This will not auto-hide"
-/>
-```
-
-### Custom Content
-
-```stx
-<Notification type="info">
-  <div class="flex items-start gap-3">
-    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-    </svg>
-    <div>
-      <p class="font-medium">Custom notification</p>
-      <p class="mt-1 text-sm">With custom content and layout</p>
-    </div>
-  </div>
-</Notification>
-```
-
-### With Actions
-
-```stx
-<Notification type="info" title="New message">
-  <p>You have a new message from John</p>
-  <div class="mt-3 flex gap-2">
-    <Button size="sm" variant="primary">View</Button>
-    <Button size="sm" variant="ghost">Dismiss</Button>
-  </div>
-</Notification>
-```
-
-## Features
-
-- 4 types (info, success, warning, error)
-- 6 position options
-- Auto-hide with configurable duration
-- Dark mode support
-- Accessible (WAI-ARIA)
-- Close button
-- Custom content support
-- Smooth transitions
-- Customizable styling

package/src/ui/notification/index.ts

@@ -1,12 +0,0 @@
-export { default as Notification } from './Notification.stx'
-
-export interface NotificationProps {
-  show?: boolean
-  title?: string
-  message?: string
-  type?: 'info' | 'success' | 'warning' | 'error'
-  position?: 'top-left' | 'top-right' | 'top-center' | 'bottom-left' | 'bottom-right' | 'bottom-center'
-  duration?: number
-  onClose?: () => void
-  className?: string
-}

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>