@stacksjs/components 0.2.20 → 0.2.24

package/src/ui/payment/README.md

@@ -2,50 +2,6 @@
 
 Comprehensive payment components for Stripe integration, including payment method management and checkout flows.
 
-## Component Syntax
-
-stx supports multiple ways to use components:
-
-### 1. @component Directive with Object Shorthand (Recommended)
-```stx
-@component('Checkout', {
-  products,
-  stripePublicKey,
-  apiUrl
-})
-@endcomponent
-```
-
-### 2. @component Directive with Full Props
-```stx
-@component('Checkout', {
-  products: products,
-  stripePublicKey: stripePublicKey,
-  apiUrl: apiUrl
-})
-@endcomponent
-```
-
-### 3. PascalCase Component Tags (Vue-like)
-```stx
-<Checkout
-  :products="products"
-  :stripePublicKey="stripePublicKey"
-  :apiUrl="apiUrl"
-/>
-```
-
-### 4. PascalCase with Static Values
-```stx
-<Checkout
-  products="[]"
-  stripePublicKey="pk_test_..."
-  apiUrl="https://api.example.com"
-/>
-```
-
-All syntaxes are equivalent and can be used interchangeably based on your preference.
-
 ## Installation
 
 ```bash
@@ -68,13 +24,11 @@ Display the default payment method with a badge.
 
 ## Usage
 
-### Checkout Component (Recommended)
-
-**Using @component directive with object shorthand:**
+### Checkout Component
 
 ```stx
-<script>
-export const products = [
+<script server>
+const products = [
   {
     id: 1,
     name: 'Premium Subscription',
@@ -84,58 +38,34 @@ export const products = [
   }
 ]
 
-export const mode = 'subscription'
-export const stripePublicKey = 'pk_test_...'
-export const apiUrl = 'https://api.example.com'
-export const redirectUrl = '/thank-you'
-export const shipping = 4500
-export const taxes = 552
+const mode = 'subscription'
+const stripePublicKey = 'pk_test_...'
+const apiUrl = 'https://api.example.com'
+const redirectUrl = '/thank-you'
+const shipping = 4500
+const taxes = 552
 
-export const onSubmit = (result) => {
+const onSubmit = (result) => {
   if (result.success) {
     console.log('Payment successful!')
     window.location.href = redirectUrl
   }
 }
 
-export const onRemoveProduct = (productId) => {
+const onRemoveProduct = (productId) => {
   console.log('Remove product:', productId)
   // Update cart state
 }
 </script>
 
-@component('Checkout', {
-  products,
-  mode,
-  stripePublicKey,
-  apiUrl,
-  redirectUrl,
-  shipping,
-  taxes,
-  onSubmit,
-  onRemoveProduct
-})
-@endcomponent
-```
-
-**Or using Vue-like PascalCase syntax:**
-
-```stx
-<script>
-export const products = [...]
-export const stripePublicKey = 'pk_test_...'
-export const apiUrl = 'https://api.example.com'
-// ... other exports
-</script>
-
 <Checkout
   :products="products"
-  mode="subscription"
+  :mode="mode"
   :stripePublicKey="stripePublicKey"
   :apiUrl="apiUrl"
-  redirectUrl="/thank-you"
-  :shipping="4500"
-  :taxes="552"
+  :redirectUrl="redirectUrl"
+  :shipping="shipping"
+  :taxes="taxes"
   :onSubmit="onSubmit"
   :onRemoveProduct="onRemoveProduct"
 />
@@ -144,8 +74,8 @@ export const apiUrl = 'https://api.example.com'
 ### PaymentMethods Component
 
 ```stx
-<script>
-export const methods = [
+<script server>
+const methods = [
   {
     id: 1,
     brand: 'Visa',
@@ -162,31 +92,29 @@ export const methods = [
   }
 ]
 
-export const handleDelete = (id) => {
+const handleDelete = (id) => {
   console.log('Delete payment method:', id)
   // Call your API to delete
 }
 
-export const handleMakeDefault = (id) => {
+const handleMakeDefault = (id) => {
   console.log('Make default:', id)
   // Call your API to set as default
 }
 </script>
 
-@component('PaymentMethods', {
-  paymentMethods: methods,
-  onDeletePaymentMethod: handleDelete,
-  onMakeDefault: handleMakeDefault,
-  isLoading: false
-})
-@endcomponent
+<PaymentMethods
+  :paymentMethods="methods"
+  :onDeletePaymentMethod="handleDelete"
+  :onMakeDefault="handleMakeDefault"
+/>
 ```
 
 ### DefaultPaymentMethod Component
 
 ```stx
-<script>
-export const defaultMethod = {
+<script server>
+const defaultMethod = {
   id: 1,
   brand: 'Visa',
   last_four: '4242',
@@ -195,18 +123,14 @@ export const defaultMethod = {
 }
 </script>
 
-@component('DefaultPaymentMethod', {
-  paymentMethod: defaultMethod,
-  isLoading: false
-})
-@endcomponent
+<DefaultPaymentMethod :paymentMethod="defaultMethod" />
 ```
 
 ### SubscriptionCheckout Component
 
 ```stx
-<script>
-export const cartProducts = [
+<script server>
+const cartProducts = [
   {
     id: 1,
     name: 'Premium Subscription',
@@ -216,7 +140,7 @@ export const cartProducts = [
   }
 ]
 
-export const handleCheckoutComplete = (result) => {
+const handleCheckoutComplete = (result) => {
   if (result.success) {
     console.log('Payment successful!')
     // Redirect to success page
@@ -224,15 +148,14 @@ export const handleCheckoutComplete = (result) => {
 }
 </script>
 
-@component('SubscriptionCheckout', {
-  products: cartProducts,
-  stripePublicKey: 'pk_test_...',
-  apiUrl: 'https://api.example.com/payments',
-  shipping: 4500, // $45.00 in cents
-  taxes: 552, // $5.52 in cents
-  onSubmit: handleCheckoutComplete
-})
-@endcomponent
+<SubscriptionCheckout
+  :products="cartProducts"
+  stripePublicKey="pk_test_..."
+  apiUrl="https://api.example.com/payments"
+  :shipping="4500"
+  :taxes="552"
+  :onSubmit="handleCheckoutComplete"
+/>
 ```
 
 ## Props
@@ -362,30 +285,30 @@ Use any future expiration date and any 3-digit CVC.
 ## Example: Full Payment Flow
 
 ```stx
-<script>
+<script server>
 // Fetch payment methods
-export const paymentMethods = await fetch('/api/payment-methods').then(r => r.json())
+const paymentMethods = await fetch('/api/payment-methods').then(r => r.json())
 
 // Fetch default payment method
-export const defaultMethod = paymentMethods.find(m => m.is_default)
+const defaultMethod = paymentMethods.find(m => m.is_default)
 
 // Cart products
-export const cart = [
+const cart = [
   { id: 1, name: 'Product 1', price: 5000, quantity: 2 },
   { id: 2, name: 'Product 2', price: 3000, quantity: 1 },
 ]
 
-export const handleDelete = async (id) => {
+const handleDelete = async (id) => {
   await fetch(`/api/payment-methods/${id}`, { method: 'DELETE' })
   // Refetch payment methods
 }
 
-export const handleMakeDefault = async (id) => {
+const handleMakeDefault = async (id) => {
   await fetch(`/api/payment-methods/${id}/default`, { method: 'POST' })
   // Refetch payment methods
 }
 
-export const handleCheckout = (result) => {
+const handleCheckout = (result) => {
   if (result.success) {
     window.location.href = '/thank-you'
   }
@@ -393,29 +316,24 @@ export const handleCheckout = (result) => {
 </script>
 
 <!-- Default Payment Method -->
-@component('DefaultPaymentMethod', {
-  paymentMethod: defaultMethod
-})
-@endcomponent
+<DefaultPaymentMethod :paymentMethod="defaultMethod" />
 
 <!-- All Payment Methods -->
-@component('PaymentMethods', {
-  paymentMethods: paymentMethods,
-  onDeletePaymentMethod: handleDelete,
-  onMakeDefault: handleMakeDefault
-})
-@endcomponent
+<PaymentMethods
+  :paymentMethods="paymentMethods"
+  :onDeletePaymentMethod="handleDelete"
+  :onMakeDefault="handleMakeDefault"
+/>
 
 <!-- Checkout Form -->
-@component('SubscriptionCheckout', {
-  products: cart,
-  stripePublicKey: 'pk_test_...',
-  apiUrl: 'https://api.example.com/payments',
-  shipping: 1000,
-  taxes: 800,
-  onSubmit: handleCheckout
-})
-@endcomponent
+<SubscriptionCheckout
+  :products="cart"
+  stripePublicKey="pk_test_..."
+  apiUrl="https://api.example.com/payments"
+  :shipping="1000"
+  :taxes="800"
+  :onSubmit="handleCheckout"
+/>
 ```
 
 ## Security Notes

package/src/ui/payment/SubscriptionCheckout.stx

@@ -1,4 +1,4 @@
-<script>
+<script server>
 export const products = $props.products || []
 export const stripePublicKey = $props.stripePublicKey || ''
 export const apiUrl = $props.apiUrl || ''
@@ -144,7 +144,7 @@ export const containerClasses = `bg-gray-50 dark:bg-blue-gray-900 ${className}`.
                         <button
                           type="button"
                           class="flex items-center justify-center bg-white dark:bg-blue-gray-700 p-2.5 text-gray-400 dark:text-gray-500 -m-2.5 hover:text-gray-500 dark:hover:text-gray-400"
-                          onclick="handleRemoveProduct('{{ product.id }}')"
+                          @click="handleRemoveProduct('{{ product.id }}')"
                           title="Remove"
                         >
                           <span class="sr-only">Remove</span>

package/src/ui/popover/Popover.stx

@@ -1,4 +1,4 @@
-<script>
+<script server>
 export const className = $props.className || ''
 export const as = $props.as || 'div'
 export let isOpen = false

package/src/ui/popover/PopoverButton.stx

@@ -1,4 +1,4 @@
-<script>
+<script server>
 export const className = $props.className || ''
 export const as = $props.as || 'button'
 export const disabled = $props.disabled || false

package/src/ui/popover/PopoverPanel.stx

@@ -1,4 +1,4 @@
-<script>
+<script server>
 export const className = $props.className || ''
 export const as = $props.as || 'div'
 export const static_ = $props.static || false

package/src/ui/popover/README.md

@@ -11,19 +11,19 @@ bun add @stacksjs/components
 ## Usage
 
 ```stx
-@component('Popover')
-  @component('PopoverButton', { className: 'px-4 py-2 bg-blue-500 text-white rounded' })
+<Popover>
+  <PopoverButton className="px-4 py-2 bg-blue-500 text-white rounded">
     Solutions
-  @endcomponent
+  </PopoverButton>
 
-  @component('PopoverPanel', { className: 'w-64' })
+  <PopoverPanel className="w-64">
     <div class="grid gap-4">
       <a href="/analytics">Analytics</a>
       <a href="/engagement">Engagement</a>
       <a href="/security">Security</a>
     </div>
-  @endcomponent
-@endcomponent
+  </PopoverPanel>
+</Popover>
 ```
 
 ## Props
@@ -55,7 +55,7 @@ bun add @stacksjs/components
 ### Solutions Menu
 
 ```stx
-@component('PopoverPanel', { className: 'w-80' })
+<PopoverPanel className="w-80">
   <div class="grid gap-8">
     <a href="/analytics" class="flex items-start gap-4 group">
       <div class="shrink-0 text-blue-500">
@@ -69,19 +69,15 @@ bun add @stacksjs/components
       </div>
     </a>
   </div>
-@endcomponent
+</PopoverPanel>
 ```
 
 ### Different Positions
 
 ```stx
-@component('PopoverPanel', { position: 'top' })
-  Content appears above
-@endcomponent
+<PopoverPanel position="top">Content appears above</PopoverPanel>
 
-@component('PopoverPanel', { position: 'left' })
-  Content appears to the left
-@endcomponent
+<PopoverPanel position="left">Content appears to the left</PopoverPanel>
 ```
 
 ## Features

package/src/ui/portal/Portal.stx

@@ -1,4 +1,4 @@
-<script>
+<script server>
 export const target = $props.target || 'body'
 export const disabled = $props.disabled || false
 

package/src/ui/progress/Progress.stx

@@ -1,4 +1,4 @@
-<script>
+<script server>
 export const value = $props.value || 0
 export const max = $props.max || 100
 export const variant = $props.variant || 'linear'

package/src/ui/radio/Radio.stx

@@ -1,4 +1,4 @@
-<script>
+<script server>
 export const checked = $props.checked || false
 export const onChange = $props.onChange || (() => {})
 export const disabled = $props.disabled || false

package/src/ui/radio-group/README.md

@@ -11,27 +11,25 @@ bun add @stacksjs/components
 ## Usage
 
 ```stx
-<script>
-export let selected = 'option1'
+<script server>
+let selected = 'option1'
 
-export function handleChange(value) {
+function handleChange(value) {
   selected = value
 }
 </script>
 
-@component('RadioGroup', { value: selected, onChange: handleChange })
-  @component('RadioGroupLabel')
-    Choose an option
-  @endcomponent
+<RadioGroup :value="selected" :onChange="handleChange">
+  <RadioGroupLabel>Choose an option</RadioGroupLabel>
 
-  @component('RadioGroupOption', { value: 'option1', currentValue: selected, onChange: handleChange })
+  <RadioGroupOption value="option1" :currentValue="selected" :onChange="handleChange">
     Option 1
-  @endcomponent
+  </RadioGroupOption>
 
-  @component('RadioGroupOption', { value: 'option2', currentValue: selected, onChange: handleChange })
+  <RadioGroupOption value="option2" :currentValue="selected" :onChange="handleChange">
     Option 2
-  @endcomponent
-@endcomponent
+  </RadioGroupOption>
+</RadioGroup>
 ```
 
 ## Props
@@ -71,44 +69,40 @@ export function handleChange(value) {
 ### Server Plans
 
 ```stx
-<script>
-export const plans = [
+<script server>
+const plans = [
   { name: 'Startup', ram: '12GB', cpus: '6 CPUs', disk: '160 GB SSD' },
   { name: 'Business', ram: '16GB', cpus: '8 CPUs', disk: '512 GB SSD' },
   { name: 'Enterprise', ram: '32GB', cpus: '12 CPUs', disk: '1024 GB SSD' }
 ]
 
-export let selected = plans[0]
+let selected = plans[0]
 
-export function handleChange(plan) {
+function handleChange(plan) {
   selected = plan
 }
 </script>
 
-@component('RadioGroup', { value: selected, onChange: handleChange })
-  @component('RadioGroupLabel', { className: 'sr-only' })
-    Server size
-  @endcomponent
+<RadioGroup :value="selected" :onChange="handleChange">
+  <RadioGroupLabel className="sr-only">Server size</RadioGroupLabel>
 
   <div class="space-y-2">
     @foreach(plan in plans)
-      @component('RadioGroupOption', {
-        value: plan,
-        currentValue: selected,
-        onChange: handleChange
-      })
+      <RadioGroupOption
+        :value="plan"
+        :currentValue="selected"
+        :onChange="handleChange"
+      >
         <div class="w-full flex items-center justify-between">
           <div class="flex items-center">
             <div class="text-sm">
-              @component('RadioGroupLabel', {
-                className: 'font-medium'
-              })
+              <RadioGroupLabel className="font-medium">
                 {{ plan.name }}
-              @endcomponent
+              </RadioGroupLabel>
 
-              @component('RadioGroupDescription')
+              <RadioGroupDescription>
                 {{ plan.ram }}/{{ plan.cpus }} · {{ plan.disk }}
-              @endcomponent
+              </RadioGroupDescription>
             </div>
           </div>
 
@@ -119,18 +113,18 @@ export function handleChange(plan) {
             </svg>
           @endif
         </div>
-      @endcomponent
+      </RadioGroupOption>
     @endforeach
   </div>
-@endcomponent
+</RadioGroup>
 ```
 
 ### With Disabled Option
 
 ```stx
-@component('RadioGroupOption', { value: 'disabled', disabled: true })
+<RadioGroupOption value="disabled" disabled>
   This option is disabled
-@endcomponent
+</RadioGroupOption>
 ```
 
 ## Features

package/src/ui/radio-group/RadioGroup.stx

@@ -1,4 +1,4 @@
-<script>
+<script server>
 export const value = $props.value
 export const onChange = $props.onChange
 export const className = $props.className || ''

package/src/ui/radio-group/RadioGroupDescription.stx

@@ -1,4 +1,4 @@
-<script>
+<script server>
 export const className = $props.className || ''
 export const as = $props.as || 'span'
 

package/src/ui/radio-group/RadioGroupLabel.stx

@@ -1,4 +1,4 @@
-<script>
+<script server>
 export const className = $props.className || ''
 export const as = $props.as || 'label'
 

package/src/ui/radio-group/RadioGroupOption.stx

@@ -1,4 +1,4 @@
-<script>
+<script server>
 export const value = $props.value
 export const disabled = $props.disabled || false
 export const className = $props.className || ''