@stacksjs/components 0.2.20 → 0.2.24

package/src/ui/image/README.md

@@ -13,79 +13,73 @@ bun add @stacksjs/components
 ### Basic Image
 
 ```stx
-@component('Image', {
-  src: '/path/to/image.jpg',
-  alt: 'Description of image',
-  width: 400,
-  height: 300
-})
-@endcomponent
+<Image
+  src="/path/to/image.jpg"
+  alt="Description of image"
+  :width="400"
+  :height="300"
+/>
 ```
 
 ### Lazy Loading (default)
 
 ```stx
-@component('Image', {
-  src: '/large-image.jpg',
-  alt: 'Large image',
-  lazy: true,
-  placeholder: '/thumbnail.jpg'
-})
-@endcomponent
+<Image
+  src="/large-image.jpg"
+  alt="Large image"
+  lazy
+  placeholder="/thumbnail.jpg"
+/>
 ```
 
 ### Aspect Ratio
 
 ```stx
-@component('Image', {
-  src: '/hero.jpg',
-  alt: 'Hero image',
-  aspectRatio: 16/9,
-  objectFit: 'cover'
-})
-@endcomponent
+<Image
+  src="/hero.jpg"
+  alt="Hero image"
+  :aspectRatio="16/9"
+  objectFit="cover"
+/>
 ```
 
 ### Rounded Images
 
 ```stx
 <!-- Rounded corners -->
-@component('Image', {
-  src: '/avatar.jpg',
-  alt: 'Avatar',
-  rounded: true
-})
-@endcomponent
+<Image
+  src="/avatar.jpg"
+  alt="Avatar"
+  rounded
+/>
 
 <!-- Circular -->
-@component('Image', {
-  src: '/profile.jpg',
-  alt: 'Profile',
-  rounded: 'full'
-})
-@endcomponent
+<Image
+  src="/profile.jpg"
+  alt="Profile"
+  rounded="full"
+/>
 ```
 
 ### With Callbacks
 
 ```stx
-<script>
-export const handleLoad = () => {
+<script server>
+const handleLoad = () => {
   console.log('Image loaded!')
 }
 
-export const handleError = () => {
+const handleError = () => {
   console.error('Failed to load image')
 }
 </script>
 
-@component('Image', {
-  src: '/photo.jpg',
-  alt: 'Photo',
-  onLoad: handleLoad,
-  onError: handleError
-})
-@endcomponent
+<Image
+  src="/photo.jpg"
+  alt="Photo"
+  :onLoad="handleLoad"
+  :onError="handleError"
+/>
 ```
 
 ## Props
@@ -157,15 +151,14 @@ export const handleError = () => {
 ```stx
 <div class="grid grid-cols-3 gap-4">
   @foreach(image in images)
-    @component('Image', {
-      src: image.url,
-      alt: image.description,
-      aspectRatio: 1,
-      objectFit: 'cover',
-      rounded: true,
-      lazy: true
-    })
-    @endcomponent
+    <Image
+      :src="image.url"
+      :alt="image.description"
+      :aspectRatio="1"
+      objectFit="cover"
+      rounded
+      lazy
+    />
   @endforeach
 </div>
 ```

package/src/ui/input/EmailInput.stx

@@ -1,4 +1,4 @@
-<script>
+<script server>
 export const value = $props.value || ''
 export const onChange = $props.onChange || (() => {})
 export const placeholder = $props.placeholder || 'Enter your email'

package/src/ui/input/NumberInput.stx

@@ -1,4 +1,4 @@
-<script>
+<script server>
 export const value = $props.value || ''
 export const onChange = $props.onChange || (() => {})
 export const placeholder = $props.placeholder || '0'
@@ -76,7 +76,7 @@ export const helperClasses = `mt-2 text-sm ${error ? 'text-red-600 dark:text-red
       <div class="absolute inset-y-0 right-0 flex flex-col">
         <button
           type="button"
-          onclick="handleIncrement()"
+          @click="handleIncrement()"
           class="flex items-center justify-center w-8 h-1/2 text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 focus:outline-none border-b border-gray-300 dark:border-gray-600"
           aria-label="Increment"
         >
@@ -86,7 +86,7 @@ export const helperClasses = `mt-2 text-sm ${error ? 'text-red-600 dark:text-red
         </button>
         <button
           type="button"
-          onclick="handleDecrement()"
+          @click="handleDecrement()"
           class="flex items-center justify-center w-8 h-1/2 text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 focus:outline-none"
           aria-label="Decrement"
         >

package/src/ui/input/PasswordInput.stx

@@ -1,4 +1,4 @@
-<script>
+<script server>
 export const value = $props.value || ''
 export const onChange = $props.onChange || (() => {})
 export const placeholder = $props.placeholder || 'Enter your password'
@@ -94,7 +94,7 @@ export const strengthText = strength < 40 ? 'Weak' : strength < 70 ? 'Medium' :
     <div class="absolute inset-y-0 right-0 flex items-center pr-3">
       <button
         type="button"
-        onclick="toggleVisibility()"
+        @click="toggleVisibility()"
         class="text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 focus:outline-none"
         aria-label="{{ showPassword ? 'Hide password' : 'Show password' }}"
       >

package/src/ui/input/SearchInput.stx

@@ -1,4 +1,4 @@
-<script>
+<script server>
 export const value = $props.value || ''
 export const onChange = $props.onChange || (() => {})
 export const onSearch = $props.onSearch || (() => {})

package/src/ui/input/TextInput.stx

@@ -1,4 +1,4 @@
-<script>
+<script server>
 export const value = $props.value || ''
 export const onChange = $props.onChange || (() => {})
 export const placeholder = $props.placeholder || ''
@@ -91,7 +91,7 @@ export const hasValue = value && value.length > 0
       <div class="absolute inset-y-0 right-0 flex items-center pr-3">
         <button
           type="button"
-          onclick="handleClear()"
+          @click="handleClear()"
           class="text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 focus:outline-none"
           aria-label="Clear input"
         >

package/src/ui/listbox/Listbox.stx

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

package/src/ui/listbox/ListboxButton.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/listbox/ListboxLabel.stx

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

package/src/ui/listbox/ListboxOption.stx

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

package/src/ui/listbox/ListboxOptions.stx

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

package/src/ui/listbox/README.md

@@ -11,41 +11,33 @@ bun add @stacksjs/components
 ## Usage
 
 ```stx
-<script>
-export const people = [
+<script server>
+const people = [
   { id: 1, name: 'Wade Cooper' },
   { id: 2, name: 'Arlene Mccoy' },
   { id: 3, name: 'Devon Webb' }
 ]
 
-export let selected = people[0]
+let selected = people[0]
 
-export function handleChange(person) {
+function handleChange(person) {
   selected = person
 }
 </script>
 
-@component('Listbox', { value: selected, onChange: handleChange })
-  @component('ListboxLabel')
-    Assign to
-  @endcomponent
+<Listbox :value="selected" :onChange="handleChange">
+  <ListboxLabel>Assign to</ListboxLabel>
 
-  @component('ListboxButton')
-    {{ selected.name }}
-  @endcomponent
+  <ListboxButton>{{ selected.name }}</ListboxButton>
 
-  @component('ListboxOptions')
+  <ListboxOptions>
     @foreach(person in people)
-      @component('ListboxOption', {
-        value: person,
-        currentValue: selected,
-        onChange: handleChange
-      })
+      <ListboxOption :value="person" :currentValue="selected" :onChange="handleChange">
         {{ person.name }}
-      @endcomponent
+      </ListboxOption>
     @endforeach
-  @endcomponent
-@endcomponent
+  </ListboxOptions>
+</Listbox>
 ```
 
 ## Props
@@ -94,10 +86,10 @@ export function handleChange(person) {
 ### Multiple Selection
 
 ```stx
-<script>
-export let selectedPeople = [people[0], people[1]]
+<script server>
+let selectedPeople = [people[0], people[1]]
 
-export function handleChange(person) {
+function handleChange(person) {
   if (selectedPeople.includes(person)) {
     selectedPeople = selectedPeople.filter(p => p !== person)
   } else {
@@ -106,28 +98,28 @@ export function handleChange(person) {
 }
 </script>
 
-@component('Listbox', { value: selectedPeople, onChange: handleChange, multiple: true })
+<Listbox :value="selectedPeople" :onChange="handleChange" multiple>
   <!-- ... -->
-@endcomponent
+</Listbox>
 ```
 
 ### With Avatars
 
 ```stx
-@component('ListboxOption', { value: person })
+<ListboxOption :value="person">
   <div class="flex items-center">
     <img src="{{ person.avatar }}" alt="" class="h-6 w-6 rounded-full mr-2" />
     {{ person.name }}
   </div>
-@endcomponent
+</ListboxOption>
 ```
 
 ### Disabled Option
 
 ```stx
-@component('ListboxOption', { value: person, disabled: true })
+<ListboxOption :value="person" disabled>
   {{ person.name }} (unavailable)
-@endcomponent
+</ListboxOption>
 ```
 
 ## Features

package/src/ui/navigator/Navigator.stx

@@ -1,4 +1,4 @@
-<script>
+<script server>
 // Navigator Component Props
 export const items = $props.items || []
 export const active = $props.active || ''
@@ -94,7 +94,7 @@ function handleClick(item, event) {
       <a
         href="{{ item.href }}"
         class="{{ getItemClasses(item) }}"
-        onclick="handleClick(item, event)"
+        @click="handleClick(item, event)"
         @if(isActive(item))
           aria-current="page"
         @endif
@@ -117,7 +117,7 @@ function handleClick(item, event) {
       <button
         type="button"
         class="{{ getItemClasses(item) }}"
-        onclick="handleClick(item, event)"
+        @click="handleClick(item, event)"
         @if(item.disabled)
           disabled
           aria-disabled="true"

package/src/ui/notification/Notification.stx

@@ -1,4 +1,4 @@
-<script>
+<script server>
 export const show = $props.show !== false
 export const title = $props.title || ''
 export const message = $props.message || ''

package/src/ui/notification/README.md

@@ -11,21 +11,21 @@ bun add @stacksjs/components
 ## Usage
 
 ```stx
-<script>
-export let showNotification = true
+<script server>
+let showNotification = true
 
-export function closeNotification() {
+function closeNotification() {
   showNotification = false
 }
 </script>
 
-@component('Notification', {
-  show: showNotification,
-  title: 'Success!',
-  message: 'Your changes have been saved.',
-  type: 'success',
-  onClose: closeNotification
-})
+<Notification
+  :show="showNotification"
+  title="Success!"
+  message="Your changes have been saved."
+  type="success"
+  :onClose="closeNotification"
+/>
 ```
 
 ## Props
@@ -46,37 +46,37 @@ export function closeNotification() {
 ### Types
 
 ```stx
-@component('Notification', { type: 'info', title: 'Information', message: 'This is an info message' })
+<Notification type="info" title="Information" message="This is an info message" />
 
-@component('Notification', { type: 'success', title: 'Success', message: 'Operation completed' })
+<Notification type="success" title="Success" message="Operation completed" />
 
-@component('Notification', { type: 'warning', title: 'Warning', message: 'Please be careful' })
+<Notification type="warning" title="Warning" message="Please be careful" />
 
-@component('Notification', { type: 'error', title: 'Error', message: 'Something went wrong' })
+<Notification type="error" title="Error" message="Something went wrong" />
 ```
 
 ### Positions
 
 ```stx
-@component('Notification', { position: 'top-left', title: 'Top Left' })
-@component('Notification', { position: 'top-center', title: 'Top Center' })
-@component('Notification', { position: 'bottom-right', title: 'Bottom Right' })
+<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
-@component('Notification', {
-  duration: 0,
-  title: 'Important',
-  message: 'This will not auto-hide'
-})
+<Notification
+  :duration="0"
+  title="Important"
+  message="This will not auto-hide"
+/>
 ```
 
 ### Custom Content
 
 ```stx
-@component('Notification', { type: 'info' })
+<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" />
@@ -86,23 +86,19 @@ export function closeNotification() {
       <p class="mt-1 text-sm">With custom content and layout</p>
     </div>
   </div>
-@endcomponent
+</Notification>
 ```
 
 ### With Actions
 
 ```stx
-@component('Notification', { type: 'info', title: 'New message' })
+<Notification type="info" title="New message">
   <p>You have a new message from John</p>
   <div class="mt-3 flex gap-2">
-    @component('Button', { size: 'sm', variant: 'primary' })
-      View
-    @endcomponent
-    @component('Button', { size: 'sm', variant: 'ghost' })
-      Dismiss
-    @endcomponent
+    <Button size="sm" variant="primary">View</Button>
+    <Button size="sm" variant="ghost">Dismiss</Button>
   </div>
-@endcomponent
+</Notification>
 ```
 
 ## Features

package/src/ui/pagination/Pagination.stx

@@ -1,4 +1,4 @@
-<script>
+<script server>
 export const currentPage = $props.currentPage || 1
 export const totalPages = $props.totalPages || 1
 export const siblingCount = $props.siblingCount || 1
@@ -94,7 +94,7 @@ export const iconClasses = `w-5 h-5`.trim()
   @if(showFirstLast)
     <button
       type="button"
-      onclick="goToFirst()"
+      @click="goToFirst()"
       class="{{ buttonClasses }}"
       aria-label="Go to first page"
       disabled="{{ currentPage === 1 }}"
@@ -109,7 +109,7 @@ export const iconClasses = `w-5 h-5`.trim()
   @if(showPrevNext)
     <button
       type="button"
-      onclick="goToPrevious()"
+      @click="goToPrevious()"
       class="{{ buttonClasses }}"
       aria-label="Go to previous page"
       disabled="{{ currentPage === 1 }}"
@@ -141,7 +141,7 @@ export const iconClasses = `w-5 h-5`.trim()
         <!-- Other pages -->
         <button
           type="button"
-          onclick="goToPage({{ page }})"
+          @click="goToPage({{ page }})"
           class="{{ buttonClasses }}"
           aria-label="Go to page {{ page }}"
         >
@@ -155,7 +155,7 @@ export const iconClasses = `w-5 h-5`.trim()
   @if(showPrevNext)
     <button
       type="button"
-      onclick="goToNext()"
+      @click="goToNext()"
       class="{{ buttonClasses }}"
       aria-label="Go to next page"
       disabled="{{ currentPage === totalPages }}"
@@ -170,7 +170,7 @@ export const iconClasses = `w-5 h-5`.trim()
   @if(showFirstLast)
     <button
       type="button"
-      onclick="goToLast()"
+      @click="goToLast()"
       class="{{ buttonClasses }}"
       aria-label="Go to last page"
       disabled="{{ currentPage === totalPages }}"

package/src/ui/payment/Checkout.stx

@@ -1,4 +1,4 @@
-<script>
+<script server>
 export const products = $props.products || []
 export const redirectUrl = $props.redirectUrl || ''
 export const mode = $props.mode || 'subscription'

package/src/ui/payment/DefaultPaymentMethod.stx

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

package/src/ui/payment/PaymentMethods.stx

@@ -1,4 +1,4 @@
-<script>
+<script server>
 export const paymentMethods = $props.paymentMethods || []
 export const onDeletePaymentMethod = $props.onDeletePaymentMethod
 export const onMakeDefault = $props.onMakeDefault
@@ -53,7 +53,7 @@ export const containerClasses = `mt-4 ${className}`.trim()
                     <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"
-                      onclick="handleMakeDefault('{{ method.id }}')"
+                      @click="handleMakeDefault('{{ method.id }}')"
                       title="Make default"
                     >
                       <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -67,7 +67,7 @@ export const containerClasses = `mt-4 ${className}`.trim()
                     <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"
-                      onclick="handleDelete('{{ method.id }}')"
+                      @click="handleDelete('{{ method.id }}')"
                       title="Delete payment method"
                     >
                       <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">