@stacksjs/defaults 0.70.54

package/resources/components/Dashboard/Auth/Register.stx

@@ -0,0 +1,306 @@
+@import('../UI/Input', '../UI/Button')
+
+<script server>
+interface RegisterProps {
+  title?: string
+  subtitle?: string
+  name?: string
+  email?: string
+  password?: string
+  passwordConfirmation?: string
+  agreeToTerms?: boolean
+  isLoading?: boolean
+  error?: string
+  errors?: Record<string, any>
+  showLogin?: boolean
+}
+
+const { title = 'Create an account', subtitle = 'Get started with your free account', name = '', email = '', password = '', passwordConfirmation = '', agreeToTerms = false, isLoading = false, error = '', errors = {}, showLogin = true } = defineProps<RegisterProps>()
+
+/**
+ * Register Component
+ * A clean, modern registration form for the Stacks Dashboard.
+ */
+
+// Form state
+// Password strength calculation
+let passwordStrength = 0
+let passwordStrengthLabel = ''
+
+function computePasswordStrength(pw) {
+  let score = 0
+  if (pw.length >= 8) score++
+  if (pw.length >= 12) score++
+  if (/[A-Z]/.test(pw) && /[a-z]/.test(pw)) score++
+  if (/\d/.test(pw)) score++
+  if (/[^A-Za-z0-9]/.test(pw)) score++
+
+  // Map 0-5 score to 0-4 strength
+  passwordStrength = Math.min(4, score)
+  const labels = ['', 'Weak', 'Fair', 'Good', 'Strong']
+  passwordStrengthLabel = pw.length > 0 ? labels[passwordStrength] : ''
+}
+
+// Validation - validates individual fields on blur, full form on submit
+function validateEmail() {
+  if (!email.trim()) {
+    errors.email = 'Email is required'
+  } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+    errors.email = 'Please enter a valid email'
+  } else {
+    errors.email = ''
+  }
+}
+
+function validatePassword() {
+  if (!password) {
+    errors.password = 'Password is required'
+  } else if (password.length < 8) {
+    errors.password = 'Password must be at least 8 characters'
+  } else {
+    errors.password = ''
+  }
+  computePasswordStrength(password)
+}
+
+function validateConfirmation() {
+  if (passwordConfirmation && password !== passwordConfirmation) {
+    errors.passwordConfirmation = 'Passwords do not match'
+  } else {
+    errors.passwordConfirmation = ''
+  }
+}
+
+function validateForm() {
+  const newErrors = {}
+
+  if (!name.trim()) {
+    newErrors.name = 'Name is required'
+  }
+
+  if (!email.trim()) {
+    newErrors.email = 'Email is required'
+  } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+    newErrors.email = 'Please enter a valid email'
+  }
+
+  if (!password) {
+    newErrors.password = 'Password is required'
+  } else if (password.length < 8) {
+    newErrors.password = 'Password must be at least 8 characters'
+  }
+
+  if (password !== passwordConfirmation) {
+    newErrors.passwordConfirmation = 'Passwords do not match'
+  }
+
+  if (!agreeToTerms) {
+    newErrors.terms = 'You must agree to the terms'
+  }
+
+  errors = newErrors
+  return Object.keys(newErrors).length === 0
+}
+
+// Emit submit event with credentials
+function handleSubmit(event) {
+  event.preventDefault()
+
+  if (!validateForm()) {
+    return
+  }
+
+  // Emit the submit event - parent component handles the actual registration
+  $emit('submit', { name, email, password, password_confirmation: passwordConfirmation })
+}
+</script>
+<div class="flex items-center justify-center px-4 py-12 min-h-screen">
+  <div class="max-w-sm w-full">
+    <!-- Logo/Brand -->
+    <div class="mb-8 text-center">
+      <div class="inline-flex items-center justify-center mb-4 h-12 w-12 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl shadow-blue-500/25 shadow-lg">
+        <svg class="h-7 w-7 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
+        </svg>
+      </div>
+      <h1 class="font-semibold text-2xl text-neutral-900 dark:text-white">
+        {{ title }}
+      </h1>
+      <p class="mt-2 text-neutral-500 text-sm dark:text-neutral-400">
+        {{ subtitle }}
+      </p>
+    </div>
+
+    <!-- Register Form -->
+    <div class="p-6 bg-white dark:bg-neutral-900 border border-neutral-200/60 rounded-2xl dark:border-neutral-800 shadow-black/5 shadow-xl dark:shadow-black/20">
+      <!-- Error Message -->
+      @if(error)
+        <div class="mb-4 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 rounded-lg dark:border-red-800">
+          <div class="flex gap-2 items-center">
+            <div class="h-4 w-4 text-red-600 dark:text-red-400 i-hugeicons-alert-circle"></div>
+            <p class="text-red-600 text-sm dark:text-red-400">{{ error }}</p>
+          </div>
+        </div>
+      @endif
+
+      <form @submit="handleSubmit">
+        <!-- Name Field -->
+        <div class="mb-4">
+          <Input
+            type="text"
+            label="Full name"
+            placeholder="John Doe"
+            :value="name"
+            @input="name = $event.target.value"
+            :error="errors.name"
+            required
+            :disabled="isLoading"
+          />
+        </div>
+
+        <!-- Email Field -->
+        <div class="mb-4">
+          <Input
+            type="email"
+            label="Email address"
+            placeholder="you@example.com"
+            :value="email"
+            @input="email = $event.target.value"
+            @blur="validateEmail"
+            :error="errors.email"
+            required
+            :disabled="isLoading"
+          />
+        </div>
+
+        <!-- Password Field -->
+        <div class="mb-4">
+          <Input
+            type="password"
+            label="Password"
+            placeholder="At least 8 characters"
+            :value="password"
+            @input="password = $event.target.value; validatePassword()"
+            @blur="validatePassword"
+            :error="errors.password"
+            required
+            :disabled="isLoading"
+          />
+          <!-- Password Strength Indicator -->
+          @if(password.length > 0)
+            <div class="mt-2">
+              <div class="flex gap-1">
+                <div class="flex-1 h-1 rounded-full" :class="passwordStrength >= 1 ? (passwordStrength <= 1 ? 'bg-red-500' : passwordStrength === 2 ? 'bg-orange-500' : passwordStrength === 3 ? 'bg-yellow-500' : 'bg-green-500') : 'bg-neutral-200 dark:bg-neutral-700'"></div>
+                <div class="flex-1 h-1 rounded-full" :class="passwordStrength >= 2 ? (passwordStrength === 2 ? 'bg-orange-500' : passwordStrength === 3 ? 'bg-yellow-500' : 'bg-green-500') : 'bg-neutral-200 dark:bg-neutral-700'"></div>
+                <div class="flex-1 h-1 rounded-full" :class="passwordStrength >= 3 ? (passwordStrength === 3 ? 'bg-yellow-500' : 'bg-green-500') : 'bg-neutral-200 dark:bg-neutral-700'"></div>
+                <div class="flex-1 h-1 rounded-full" :class="passwordStrength >= 4 ? 'bg-green-500' : 'bg-neutral-200 dark:bg-neutral-700'"></div>
+              </div>
+              <p class="mt-1 text-xs" :class="passwordStrength <= 1 ? 'text-red-500' : passwordStrength === 2 ? 'text-orange-500' : passwordStrength === 3 ? 'text-yellow-600 dark:text-yellow-400' : 'text-green-500'">
+                {{ passwordStrengthLabel }}
+              </p>
+            </div>
+          @endif
+        </div>
+
+        <!-- Confirm Password Field -->
+        <div class="mb-4">
+          <Input
+            type="password"
+            label="Confirm password"
+            placeholder="Confirm your password"
+            :value="passwordConfirmation"
+            @input="passwordConfirmation = $event.target.value; validateConfirmation()"
+            :error="errors.passwordConfirmation"
+            required
+            :disabled="isLoading"
+          />
+        </div>
+
+        <!-- Terms Checkbox -->
+        <div class="mb-6">
+          <label class="flex gap-2 items-start cursor-pointer">
+            <input
+              type="checkbox"
+              class="mt-0.5 h-4 w-4 text-blue-500 bg-white dark:bg-neutral-800 border-neutral-300 rounded dark:border-neutral-600 focus:ring-blue-500/40 focus:ring-offset-0"
+              :checked="agreeToTerms"
+              @change="agreeToTerms = $event.target.checked"
+              :disabled="isLoading"
+            />
+            <span class="text-neutral-600 text-sm dark:text-neutral-400">
+              I agree to the
+              <a href="/terms" class="text-blue-600 dark:text-blue-400 hover:text-blue-500">Terms of Service</a>
+              and
+              <a href="/privacy" class="text-blue-600 dark:text-blue-400 hover:text-blue-500">Privacy Policy</a>
+            </span>
+          </label>
+          @if(errors.terms)
+            <p class="mt-1 text-red-600 text-sm dark:text-red-400">{{ errors.terms }}</p>
+          @endif
+        </div>
+
+        <!-- Submit Button -->
+        <Button
+          type="submit"
+          variant="primary"
+          size="lg"
+          fullWidth
+          :loading="isLoading"
+          :disabled="isLoading"
+        >
+          @if(isLoading)
+            Creating account...
+          @else
+            Create account
+          @endif
+        </Button>
+      </form>
+
+      <!-- Divider -->
+      <div class="relative my-6">
+        <div class="flex absolute inset-0 items-center">
+          <div class="w-full border-neutral-200 border-t dark:border-neutral-700"></div>
+        </div>
+        <div class="flex relative justify-center text-xs">
+          <span class="px-2 text-neutral-400 bg-white dark:bg-neutral-900">or continue with</span>
+        </div>
+      </div>
+
+      <!-- Social Login -->
+      <div class="grid gap-3 grid-cols-2">
+        <button
+          type="button"
+          class="flex gap-2 items-center justify-center px-4 py-2 font-medium text-neutral-700 text-sm dark:text-neutral-200 bg-white dark:bg-neutral-800 hover:bg-neutral-50 dark:hover:bg-neutral-700 border border-neutral-200 rounded-lg dark:border-neutral-700 transition-colors"
+          :disabled="isLoading"
+        >
+          <svg class="h-4 w-4" viewBox="0 0 24 24">
+            <path fill="currentColor" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
+            <path fill="currentColor" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
+            <path fill="currentColor" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
+            <path fill="currentColor" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
+          </svg>
+          Google
+        </button>
+        <button
+          type="button"
+          class="flex gap-2 items-center justify-center px-4 py-2 font-medium text-neutral-700 text-sm dark:text-neutral-200 bg-white dark:bg-neutral-800 hover:bg-neutral-50 dark:hover:bg-neutral-700 border border-neutral-200 rounded-lg dark:border-neutral-700 transition-colors"
+          :disabled="isLoading"
+        >
+          <svg class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
+            <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
+          </svg>
+          GitHub
+        </button>
+      </div>
+    </div>
+
+    <!-- Login Link -->
+    @if(showLogin)
+      <p class="mt-6 text-center text-neutral-500 text-sm dark:text-neutral-400">
+        Already have an account?
+        <a href="/login" class="font-medium text-blue-600 dark:text-blue-400 hover:text-blue-500 dark:hover:text-blue-300">
+          Sign in
+        </a>
+      </p>
+    @endif
+  </div>
+</div>

package/resources/components/Dashboard/Avatar.stx

@@ -0,0 +1,123 @@
+<script>
+interface AvatarProps {
+  name?: string
+  size?: string
+  rounded?: string
+  status?: string
+  src?: string
+  alt?: string
+}
+
+const { name = '', size = 'md', rounded = 'full', status, src, alt } = defineProps<AvatarProps>()
+
+/**
+ * Avatar Component
+ * Displays user avatar with optional status indicator
+ */
+
+const sizeClasses = {
+  xs: 'h-5 w-5 text-[10px]',
+  sm: 'h-7 w-7 text-[11px]',
+  md: 'h-8 w-8 text-[12px]',
+  lg: 'h-10 w-10 text-[13px]',
+  xl: 'h-12 w-12 text-[14px]',
+  '2xl': 'h-14 w-14 text-[16px]'
+}
+
+const radiusClasses = {
+  sm: 'rounded-md',
+  md: 'rounded-lg',
+  lg: 'rounded-xl',
+  full: 'rounded-full'
+}
+
+const statusColors = {
+  online: 'bg-green-500',
+  offline: 'bg-neutral-400',
+  away: 'bg-orange-500',
+  busy: 'bg-red-500'
+}
+
+const statusSizes = {
+  xs: 'h-1.5 w-1.5',
+  sm: 'h-2 w-2',
+  md: 'h-2 w-2',
+  lg: 'h-2.5 w-2.5',
+  xl: 'h-3 w-3',
+  '2xl': 'h-3.5 w-3.5'
+}
+
+// Generate initials from name
+function getInitials(fullName) {
+  if (!fullName) return ''
+  const parts = fullName.trim().split(/\s+/)
+  if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase()
+  return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase()
+}
+
+// Background colors for initials (consistent based on name)
+const bgColors = [
+  'bg-red-500/15 text-red-600 dark:bg-red-400/20 dark:text-red-400',
+  'bg-orange-500/15 text-orange-600 dark:bg-orange-400/20 dark:text-orange-400',
+  'bg-yellow-500/15 text-yellow-600 dark:bg-yellow-400/20 dark:text-yellow-400',
+  'bg-green-500/15 text-green-600 dark:bg-green-400/20 dark:text-green-400',
+  'bg-teal-500/15 text-teal-600 dark:bg-teal-400/20 dark:text-teal-400',
+  'bg-cyan-500/15 text-cyan-600 dark:bg-cyan-400/20 dark:text-cyan-400',
+  'bg-blue-500/15 text-blue-600 dark:bg-blue-400/20 dark:text-blue-400',
+  'bg-indigo-500/15 text-indigo-600 dark:bg-indigo-400/20 dark:text-indigo-400',
+  'bg-purple-500/15 text-purple-600 dark:bg-purple-400/20 dark:text-purple-400',
+  'bg-pink-500/15 text-pink-600 dark:bg-pink-400/20 dark:text-pink-400'
+]
+
+function getBgColorIndex(fullName) {
+  if (!fullName) return 0
+  let hash = 0
+  for (let i = 0; i < fullName.length; i++) {
+    hash = fullName.charCodeAt(i) + ((hash << 5) - hash)
+  }
+  return Math.abs(hash) % bgColors.length
+}
+
+function getSizeClass() {
+  return sizeClasses[size || 'md']
+}
+
+function getRadiusClass() {
+  return radiusClasses[rounded || 'full']
+}
+
+function getStatusColor() {
+  return statusColors[status] || ''
+}
+
+function getStatusSize() {
+  return statusSizes[size || 'md']
+}
+
+function getBgColor() {
+  return name ? bgColors[getBgColorIndex(name)] : 'bg-black/[0.06] text-neutral-500 dark:bg-white/10 dark:text-neutral-400'
+}
+</script>
+<div class="inline-flex relative flex-shrink-0">
+    @if(src)
+      <img
+        src="{{ src }}"
+        alt="{{ alt || name || 'Avatar' }}"
+        class="object-cover {{ getSizeClass() }} {{ getRadiusClass() }}"
+      >
+    @else
+      <div class="inline-flex items-center justify-center font-medium {{ getSizeClass() }} {{ getRadiusClass() }} {{ getBgColor() }}">
+        @if(name)
+          <span>{{ getInitials(name) }}</span>
+        @else
+          <svg class="h-1/2 w-1/2 text-neutral-400" fill="currentColor" viewBox="0 0 20 20">
+            <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path>
+          </svg>
+        @endif
+      </div>
+    @endif
+
+    @if(status)
+      <span class="absolute bottom-0 right-0 rounded-full ring-2 ring-white dark:ring-neutral-900 {{ getStatusColor() }} {{ getStatusSize() }}"></span>
+    @endif
+  </div>

package/resources/components/Dashboard/Billing/ActivePlan.stx

@@ -0,0 +1,57 @@
+<script>
+interface ActivePlanProps {
+  plan?: Record<string, any>
+}
+
+const { plan = {} } = defineProps<ActivePlanProps>()
+
+function convertUnixTimestampToDate(timestamp) {
+    if (!timestamp) return ''
+    const date = new Date(timestamp * 1000)
+    return date.toLocaleDateString()
+  }
+
+  const subscriptionType = plan.subscription?.type
+    ? plan.subscription.type.charAt(0).toUpperCase() + plan.subscription.type.slice(1)
+    : ''
+
+  const nextPayment = convertUnixTimestampToDate(plan.providerSubscription?.current_period_end)
+  const unitPrice = plan.subscription?.unit_price ? (plan.subscription.unit_price / 100).toFixed(2) : '0.00'
+</script>
+<div class="w-full">
+    <h2 class="font-medium text-gray-900 text-lg">
+      Plan Details
+    </h2>
+
+    <div class="pt-8">
+      <p class="font-bold text-gray-700">
+        {{ subscriptionType }} Plan
+      </p>
+
+      <p class="pt-2 font-normal italic text-gray-500 text-sm">
+        {{ plan.subscription?.description || '' }}
+      </p>
+
+      <p class="pt-4 font-semibold text-gray-700 text-sm">
+        Next payment of ${{ unitPrice }} occurs on {{ nextPayment }}
+      </p>
+    </div>
+
+    <div class="flex mt-8">
+      <button
+        type="button"
+        class="px-2.5 py-1.5 font-semibold text-gray-900 text-sm bg-white hover:bg-gray-50 ring-1 ring-gray-300 ring-inset rounded-md shadow-sm"
+        data-action="cancel-plan"
+      >
+        Cancel Plan
+      </button>
+
+      <button
+        type="button"
+        class="ml-4 px-2.5 py-1.5 font-semibold text-sm text-white bg-blue-600 hover:bg-neutral-500 rounded-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-600 focus-visible:outline-offset-2 shadow-sm"
+        data-action="change-plan"
+      >
+        Change Plan
+      </button>
+    </div>
+  </div>

package/resources/components/Dashboard/Billing/CardBrands.stx

@@ -0,0 +1,32 @@
+<script>
+interface CardBrandsProps {
+  brand?: string
+  width?: number
+}
+
+const { brand = '', width = 4 } = defineProps<CardBrandsProps>()
+
+function getLogoSrc(cardBrand) {
+    if (!cardBrand) return ''
+
+    switch (cardBrand.toLowerCase()) {
+      case 'visa':
+        return '/images/logos/visa.png'
+      case 'mastercard':
+      case 'mc':
+        return '/images/logos/mastercard.svg'
+      case 'jcb':
+        return '/images/logos/jcb.svg'
+      case 'amex':
+      case 'american express':
+        return '/images/logos/amex.jpg'
+      default:
+        return '/images/logos/default-card.svg'
+    }
+  }
+
+  const logoSrc = getLogoSrc(brand)
+</script>
+<div style="width: {{ width }}rem">
+    <img src="{{ logoSrc }}" alt="{{ brand }} Logo">
+  </div>

package/resources/components/Dashboard/Billing/CardForm.stx

@@ -0,0 +1,34 @@
+<script>
+interface CardFormProps {
+  clientSecret?: string
+}
+
+const { clientSecret = '' } = defineProps<CardFormProps>()
+</script>
+<div>
+    <form
+      id="card-form"
+      class="mt-8 p-8 border border-gray-200"
+    >
+      <div id="link-authentication-element"></div>
+      <div id="card-element"></div>
+
+      <div class="flex mt-6 space-x-2">
+        <button
+          type="button"
+          class="px-2 py-1.5 w-full font-semibold text-sm text-white bg-indigo-600 hover:bg-indigo-500 rounded focus-visible:outline focus-visible:outline-2 focus-visible:outline-indigo-600 focus-visible:outline-offset-2 shadow-sm"
+          data-action="save-payment-method"
+        >
+          Save Payment Method
+        </button>
+
+        <button
+          type="button"
+          class="px-2 py-1.5 w-full font-semibold text-gray-900 text-sm bg-white hover:bg-gray-50 ring-1 ring-gray-300 ring-inset rounded shadow-sm"
+          data-action="cancel"
+        >
+          Cancel
+        </button>
+      </div>
+    </form>
+  </div>

package/resources/components/Dashboard/Billing/OneTimePayment.stx

@@ -0,0 +1,28 @@
+<script>
+interface OneTimePaymentProps {
+  product?: Record<string, any>
+  paymentIntent?: string
+}
+
+const { product = {}, paymentIntent = '' } = defineProps<OneTimePaymentProps>()
+
+const unitPrice = product.unit_price ? `${(product.unit_price / 100).toFixed(2)}` : '$0.00'
+</script>
+@if(product.name)
+    <div class="flex p-4 space-x-2 border border-gray-200 rounded-md">
+      <ul role="list" class="w-1/3 font-medium text-gray-900 text-sm divide-gray-200 divide-y">
+        <li class="flex items-ce space-x-4">
+          <img src="https://tailwindui.com/plus/img/ecommerce-images/checkout-page-04-product-01.jpg" alt="Moss green canvas compact backpack with double top zipper, zipper front pouch, and matching carry handle and backpack straps." class="object-cover flex-none size-20 border rounded-md">
+          <div class="flex-auto mt-2 space-y-1">
+            <h3>{{ product.name }}</h3>
+            <p class="flex-none font-medium text-sm">
+              {{ unitPrice }}
+            </p>
+          </div>
+        </li>
+      </ul>
+      <div class="w-2/3">
+        <slot name="paymentForm" />
+      </div>
+    </div>
+  @endif

package/resources/components/Dashboard/Billing/PaymentForm.stx

@@ -0,0 +1,33 @@
+<script>
+interface PaymentFormProps {
+  productId?: number
+  price?: string
+  paymentIntent?: string
+}
+
+const { productId = 1, price = '$0.00', paymentIntent = '' } = defineProps<PaymentFormProps>()
+</script>
+<div>
+    <form id="payment-form">
+      <div id="link-authentication-element"></div>
+      <div id="payment-element"></div>
+
+      <div class="flex mt-6 space-x-2">
+        <button
+          type="button"
+          class="px-2 py-1.5 w-full font-semibold text-sm text-white bg-indigo-600 hover:bg-indigo-500 rounded focus-visible:outline focus-visible:outline-2 focus-visible:outline-indigo-600 focus-visible:outline-offset-2 shadow-sm"
+          data-action="pay"
+        >
+          Pay {{ price }}
+        </button>
+
+        <button
+          type="button"
+          class="px-2 py-1.5 w-full font-semibold text-gray-900 text-sm bg-white hover:bg-gray-50 ring-1 ring-gray-300 ring-inset rounded shadow-sm"
+          data-action="cancel"
+        >
+          Cancel
+        </button>
+      </div>
+    </form>
+  </div>

package/resources/components/Dashboard/Billing/PaymentMethod.stx

@@ -0,0 +1,66 @@
+<script>
+interface PaymentMethodProps {
+  defaultPaymentMethod?: any
+  paymentMethods?: any[]
+  loading?: boolean
+  showCardForm?: boolean
+}
+
+const { defaultPaymentMethod = null, paymentMethods = [], loading = false, showCardForm = false } = defineProps<PaymentMethodProps>()
+</script>
+<div class="mt-16 px-8 py-6 w-2/3 bg-white ring-1 ring-black ring-opacity-5 sm:rounded-lg shadow">
+    <h2 class="font-medium text-gray-900 text-lg">
+      Payment Info
+    </h2>
+
+    @if(loading)
+      <div class="mt-8">
+        <slot name="loading" />
+      </div>
+    @else
+      @if(defaultPaymentMethod)
+        <div class="col-span-1 mt-8 bg-white border divide-gray-200 divide-y rounded-lg shadow">
+          <div class="p-3 w-full">
+            <div class="flex items-center justify-between">
+              <div class="flex items-center space-x-4">
+                <slot name="cardBrand" />
+
+                <h2 class="text-gray-600 text-sm">
+                  {{ defaultPaymentMethod.brand }} •••• {{ defaultPaymentMethod.last_four }}
+                  <span class="inline-flex items-center ml-4 px-2 py-1 font-medium text-indigo-700 text-xs bg-indigo-50 ring-1 ring-indigo-700/10 ring-inset rounded-md">Default</span>
+                  <br>
+                  <span class="italic text-gray-500 text-xs">Expires {{ defaultPaymentMethod.exp_month }} / {{ defaultPaymentMethod.exp_year }}</span>
+                </h2>
+              </div>
+            </div>
+          </div>
+        </div>
+      @else
+        <div class="col-span-1 mt-8 bg-white border divide-gray-200 divide-y rounded-lg shadow">
+          <div class="px-4 py-5 w-full">
+            <h2 class="text-center text-gray-600 text-sm">
+              You haven't added any payment methods yet.
+            </h2>
+          </div>
+        </div>
+      @endif
+    @endif
+
+    <slot name="paymentMethodList" />
+
+    @if(showCardForm)
+      <slot name="cardForm" />
+    @endif
+
+    @if(!showCardForm)
+      <div class="flex justify-end mt-8">
+        <button
+          type="button"
+          class="px-3.5 py-2.5 font-semibold text-sm text-white bg-blue-600 hover:bg-neutral-500 rounded-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-600 focus-visible:outline-offset-2 shadow-sm"
+          data-action="add-payment-method"
+        >
+          Add Payment Method
+        </button>
+      </div>
+    @endif
+  </div>