@stacksjs/defaults 0.70.229 → 0.70.231

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

@@ -1,57 +0,0 @@
-<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

@@ -1,32 +0,0 @@
-<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

@@ -1,34 +0,0 @@
-<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

@@ -1,28 +0,0 @@
-<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

@@ -1,33 +0,0 @@
-<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

@@ -1,66 +0,0 @@
-<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>

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

@@ -1,52 +0,0 @@
-<script>
-interface PaymentMethodListProps {
-  userId?: number
-  paymentMethods?: any[]
-  loading?: boolean
-}
-
-const { userId = 1, paymentMethods = [], loading = false } = defineProps<PaymentMethodListProps>()
-</script>
-<div class="mt-4">
-    @if(loading)
-      <slot name="loading" />
-    @else
-      <ul role="list" class="grid gap-6 grid-cols-1 sm:grid-cols-1 lg:grid-cols-1">
-        @foreach(paymentMethods as method)
-          <li class="col-span-1 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">
-                    {{ method.brand }} •••• {{ method.last_four }} <br>
-                    <span class="italic text-gray-500 text-xs">Expires {{ method.exp_month }} / {{ method.exp_year }}</span>
-                  </h2>
-                </div>
-
-                <div class="flex justify-end space-x-4">
-                  <button
-                    type="button"
-                    class="px-2 py-1 font-semibold text-sm text-white bg-white hover:bg-neutral-50 border rounded-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-600 focus-visible:outline-offset-2 shadow-sm"
-                    data-action="make-default"
-                    data-method-id="{{ method.id }}"
-                  >
-                    <span class="text-gray-700 i-hugeicons-star"></span>
-                  </button>
-
-                  <button
-                    type="button"
-                    class="px-2 py-1 font-semibold text-sm text-white bg-white hover:bg-neutral-50 border rounded-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-600 focus-visible:outline-offset-2 shadow-sm"
-                    data-action="delete"
-                    data-method-id="{{ method.id }}"
-                  >
-                    <span class="text-gray-700 i-hugeicons-trash"></span>
-                  </button>
-                </div>
-              </div>
-            </div>
-          </li>
-        @endforeach
-      </ul>
-    @endif
-  </div>

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

@@ -1,136 +0,0 @@
-<script>
-interface PlansProps {
-  currentPlan?: any
-  hasPaymentMethods?: boolean
-  updatingPlanState?: boolean
-  hobbyMonthlyPrice?: number
-  hobbyYearlyPrice?: number
-  hobbyLifetimePrice?: number
-  proMonthlyPrice?: number
-  proYearlyPrice?: number
-  proLifetimePrice?: number
-  showPlans?: boolean
-}
-
-const { currentPlan = null, hasPaymentMethods = false, updatingPlanState = false, hobbyMonthlyPrice = 39, hobbyYearlyPrice = 379, hobbyLifetimePrice = 479, proMonthlyPrice = 59, proYearlyPrice = 579, proLifetimePrice = 749, showPlans = true } = defineProps<PlansProps>()
-
-// Pricing data
-</script>
-<div class="w-full">
-    <div class="flex items-center justify-between">
-      <div class="flex items-center space-x-2">
-        <h2 class="font-medium text-gray-900 text-lg">
-          Dashboard Plans
-        </h2>
-      </div>
-
-      <div>
-        <div class="flex justify-center">
-          <fieldset aria-label="Payment frequency">
-            <div class="grid gap-x-1 grid-cols-3 p-1 font-semibold text-center text-xs/5 ring-1 ring-gray-200 ring-inset rounded-full" data-plan-type-selector>
-              <label class="px-2.5 py-1 text-white bg-blue-600 rounded-full cursor-pointer" data-plan-type="monthly">
-                <input type="radio" name="frequency" value="monthly" class="sr-only" checked>
-                <span>Monthly</span>
-              </label>
-
-              <label class="px-2.5 py-1 rounded-full cursor-pointer" data-plan-type="annually">
-                <input type="radio" name="frequency" value="annually" class="sr-only">
-                <span>Annually</span>
-              </label>
-
-              <label class="px-2.5 py-1 rounded-full cursor-pointer" data-plan-type="lifetime">
-                <input type="radio" name="frequency" value="lifetime" class="sr-only">
-                <span>Lifetime</span>
-              </label>
-            </div>
-          </fieldset>
-        </div>
-      </div>
-    </div>
-
-    <div class="pt-8">
-      <p class="font-semibold text-gray-800">
-        Choose one of the recurring plans.
-      </p>
-    </div>
-
-    <div class="pt-8">
-      <fieldset>
-        <div class="space-y-4">
-          <!-- Hobby Plan -->
-          <label class="block sm:flex relative sm:justify-between px-6 py-4 bg-white border rounded-lg focus:outline-none shadow-sm cursor-pointer" data-plan="hobby">
-            <input type="radio" name="selected-plan" value="hobby" class="sr-only">
-            <span class="flex items-center">
-              <span class="flex flex-col text-sm">
-                <div class="flex">
-                  <span class="font-medium text-gray-900">Hobby</span>
-                </div>
-                <p class="pt-2 text-gray-600 text-xs">
-                  All Stacks features are included.
-                </p>
-              </span>
-            </span>
-            <span class="flex sm:flex-col mt-2 sm:ml-4 sm:mt-0 text-sm sm:text-right">
-              <span class="font-medium text-gray-900" data-hobby-price>$ {{ hobbyMonthlyPrice }}</span>
-              <span class="ml-1 sm:ml-0 text-gray-500" data-per-text>/month</span>
-            </span>
-            <span class="absolute border rounded-lg pointer-events-none -inset-px" aria-hidden="true"></span>
-          </label>
-
-          <!-- Pro Plan -->
-          <label class="block sm:flex relative sm:justify-between px-6 py-4 bg-white border rounded-lg focus:outline-none shadow-sm cursor-pointer" data-plan="pro">
-            <input type="radio" name="selected-plan" value="pro" class="sr-only">
-            <span class="flex items-center">
-              <span class="flex flex-col text-sm">
-                <div class="flex">
-                  <span class="font-medium text-gray-900">Pro</span>
-                </div>
-                <p class="pt-2 text-gray-600 text-xs">
-                  All Stacks features are included & being able to invite team members.
-                </p>
-              </span>
-            </span>
-            <span class="flex sm:flex-col mt-2 sm:ml-4 sm:mt-0 text-sm sm:text-right">
-              <span class="font-medium text-gray-900" data-pro-price>${{ proMonthlyPrice }}</span>
-              <span class="ml-1 sm:ml-0 text-gray-500" data-per-text>/month</span>
-            </span>
-            <span class="absolute border rounded-lg pointer-events-none -inset-px" aria-hidden="true"></span>
-          </label>
-        </div>
-      </fieldset>
-    </div>
-
-    @if(showPlans)
-      <div class="flex justify-end pt-8">
-        <button
-          type="button"
-          class="px-2.5 py-1.5 font-semibold text-sm text-white bg-blue-600 disabled:bg-gray-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"
-          @if(!hasPaymentMethods) disabled @endif
-          data-action="subscribe"
-        >
-          Subscribe
-        </button>
-      </div>
-    @endif
-
-    @if(updatingPlanState)
-      <div class="flex justify-end pt-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-edit"
-        >
-          Cancel Plan
-        </button>
-
-        <button
-          type="button"
-          class="ml-4 px-2.5 py-1.5 font-semibold text-sm text-white bg-blue-600 disabled:bg-gray-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"
-          @if(!hasPaymentMethods) disabled @endif
-          data-action="update-plan"
-        >
-          Update Plan
-        </button>
-      </div>
-    @endif
-  </div>

package/resources/components/Dashboard/Buttons/AppButton.stx

@@ -1,48 +0,0 @@
-<script server>
-interface AppButtonProps {
-  buttonText?: string
-  loadingText?: string
-  passedClass?: string
-  loading?: boolean
-}
-
-const { buttonText = '', loadingText = '', passedClass = '', loading = false } = defineProps<AppButtonProps>()
-
-const buttonString = loading ? loadingText : buttonText
-  const disabledClass = ' disabled:opacity-50 disabled:cursor-not-allowed'
-  const finalClass = passedClass + disabledClass
-</script>
-<button
-  type="button"
-  class="flex items-center {{ finalClass }}"
-  @if(loading) disabled @endif
->
-  @if(loading)
-    <svg
-      class="-ml-1 mr-3 h-5 w-5 text-white animate-spin"
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-    >
-      <circle
-        class="opacity-25"
-        cx="12"
-        cy="12"
-        r="10"
-        stroke="currentColor"
-        stroke-width="4"
-      ></circle>
-      <path
-        class="opacity-75"
-        fill="currentColor"
-        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-      ></path>
-    </svg>
-  @else
-    <slot name="icon" />
-  @endif
-
-  <span>
-    {{ buttonString }}
-  </span>
-</button>

package/resources/components/Dashboard/Buttons/IconButton.stx

@@ -1,20 +0,0 @@
-<script server>
-interface IconButtonProps {
-  to?: string
-  active?: boolean
-}
-
-const { to = '', active = false } = defineProps<IconButtonProps>()
-</script>
-<a
-  href="{{ to }}"
-  class="bg-primary flex flex-row items-center gap-2 rounded-md p-1 {{ active ? 'dark:bg-neutral-700 bg-neutral-50 dark:text-blue-300 text-gray-600' : '' }}"
->
-  <div class="flex relative items-center justify-center p-1 bg-gray-8 rounded-md">
-    <span class="h-6 w-6 text-white"></span>
-  </div>
-
-  <span class="!text-sm text-gray-8">
-    <slot />
-  </span>
-</a>

package/resources/components/Dashboard/Card.stx

@@ -1,78 +0,0 @@
-<!--
-  Custom Dashboard Card Component
-
-  A flexible card component for dashboard content.
-
-  Usage:
-  <Card title="My Card" :actions="[{ label: 'Action', onClick: handleClick }]">
-    <p>Card content here</p>
-  </Card>
--->
-
-<script>
-interface CardProps {
-  title?: string
-  subtitle?: string
-  actions?: any[]
-  padding?: boolean
-}
-
-const { title, subtitle, actions, padding } = defineProps<CardProps>()
-</script>
-<div class="dashboard-card">
-    @if (title || actions.length > 0)
-      <div class="dashboard-card-header">
-        <div>
-          @if (title)
-            <h3 class="dashboard-card-title">{{ title }}</h3>
-          @endif
-          @if (subtitle)
-            <p class="dashboard-card-subtitle">{{ subtitle }}</p>
-          @endif
-        </div>
-        @if (actions.length > 0)
-          <div class="dashboard-card-actions">
-            @foreach (actions as action)
-              <button class="btn btn-ghost btn-sm" @click="action.onClick">
-                {{ action.label }}
-              </button>
-            @endforeach
-          </div>
-        @endif
-      </div>
-    @endif
-    <div class="{{ padding ? 'dashboard-card-content' : '' }}">
-      <slot></slot>
-    </div>
-  </div>
-<style>
-.dashboard-card {
-  background: var(--color-bg-card);
-  border: 1px solid var(--color-border);
-  border-radius: 0.75rem;
-  overflow: hidden;
-}
-.dashboard-card-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 1rem 1.25rem;
-  border-bottom: 1px solid var(--color-border);
-}
-.dashboard-card-title {
-  font-size: 0.9375rem;
-  font-weight: 600;
-}
-.dashboard-card-subtitle {
-  font-size: 0.8125rem;
-  color: var(--color-text-muted);
-  margin-top: 0.125rem;
-}
-.dashboard-card-actions {
-  display: flex;
-  gap: 0.5rem;
-}
-.dashboard-card-content {
-  padding: 1.25rem;
-}
-</style>

package/resources/components/Dashboard/Chart.stx

@@ -1,75 +0,0 @@
-<!--
-  Custom Dashboard Chart Component
-
-  A placeholder chart component for dashboard visualizations.
-  Integrate with your preferred charting library (Chart.js, D3, etc.)
-
-  Usage:
-  <Chart type="line" :data="chartData" :options="chartOptions" />
--->
-
-<script>
-interface ChartProps {
-  type?: string
-  data: Record<string, any>
-  options?: Record<string, any>
-  height?: string
-}
-
-const { type = 'line', data, options = {}, height = '300px' } = defineProps<ChartProps>()
-</script>
-<div class="dashboard-chart" style="height: {{ height }};">
-    <div class="chart-placeholder">
-      <div class="chart-icon">📊</div>
-      <div class="chart-text">{{ type.charAt(0).toUpperCase() + type.slice(1) }} Chart</div>
-      <div class="chart-hint">
-        Integrate with Chart.js, D3, or your preferred library
-      </div>
-    </div>
-    <!--
-      To use with Chart.js:
-      <canvas ref="chartCanvas"></canvas>
-
-      <script client>
-      import Chart from '@stacksjs/charts'
-
-            </script>
-    -->
-  </div>
-<script client>
-import { onMount } from 'stx'
-
-onMount(() => {
-  new Chart(chartCanvas, {
-          type: type,
-          data: data,
-          options: options
-        }
-})
-</script>
-
-<style>
-.dashboard-chart {
-  background: var(--color-bg-subtle);
-  border-radius: 0.5rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.chart-placeholder {
-  text-align: center;
-  color: var(--color-text-muted);
-}
-.chart-icon {
-  font-size: 2.5rem;
-  margin-bottom: 0.5rem;
-}
-.chart-text {
-  font-weight: 500;
-  margin-bottom: 0.25rem;
-}
-.chart-hint {
-  font-size: 0.75rem;
-  opacity: 0.7;
-}
-</style>