@stacksjs/components 0.2.21 → 0.2.26

package/src/ui/combobox/README.md

@@ -11,61 +11,57 @@ 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]
-export let query = ''
+let selected = people[0]
+let query = ''
 
-export const filtered = query === ''
+const filtered = query === ''
   ? people
   : people.filter(person =>
       person.name.toLowerCase().includes(query.toLowerCase())
     )
 
-export function handleChange(person) {
+function handleChange(person) {
   selected = person
   query = ''
 }
 
-export function handleQueryChange(value) {
+function handleQueryChange(value) {
   query = value
 }
 </script>
 
-@component('Combobox', { value: selected, onChange: handleChange })
+<Combobox :value="selected" :onChange="handleChange">
   <div class="relative mt-1">
-    @component('ComboboxInput', {
-      displayValue: selected.name,
-      onChange: handleQueryChange,
-      placeholder: 'Search people...'
-    })
+    <ComboboxInput
+      :displayValue="selected.name"
+      :onChange="handleQueryChange"
+      placeholder="Search people..."
+    />
 
-    @component('ComboboxButton')
+    <ComboboxButton />
 
-    @component('ComboboxOptions')
+    <ComboboxOptions>
       @if(filtered.length === 0 && query !== '')
         <div class="relative cursor-default select-none py-2 px-4 text-neutral-700 dark:text-neutral-300">
           Nothing found.
         </div>
       @else
         @foreach(person in filtered)
-          @component('ComboboxOption', {
-            value: person,
-            currentValue: selected,
-            onChange: handleChange
-          })
+          <ComboboxOption :value="person" :currentValue="selected" :onChange="handleChange">
             {{ person.name }}
-          @endcomponent
+          </ComboboxOption>
         @endforeach
       @endif
-    @endcomponent
+    </ComboboxOptions>
   </div>
-@endcomponent
+</Combobox>
 ```
 
 ## Props
@@ -115,30 +111,30 @@ export function handleQueryChange(value) {
 ### With Empty State
 
 ```stx
-@component('ComboboxOptions')
+<ComboboxOptions>
   @if(filtered.length === 0)
     <div class="py-2 px-4 text-neutral-500 dark:text-neutral-400">
       No results found for "{{ query }}"
     </div>
   @else
     @foreach(item in filtered)
-      @component('ComboboxOption', { value: item })
+      <ComboboxOption :value="item">
         {{ item.name }}
-      @endcomponent
+      </ComboboxOption>
     @endforeach
   @endif
-@endcomponent
+</ComboboxOptions>
 ```
 
 ### With Avatars
 
 ```stx
-@component('ComboboxOption', { value: person })
+<ComboboxOption :value="person">
   <div class="flex items-center gap-2">
     <img src="{{ person.avatar }}" alt="" class="h-6 w-6 rounded-full" />
     <span>{{ person.name }}</span>
   </div>
-@endcomponent
+</ComboboxOption>
 ```
 
 ## Features

package/src/ui/command-palette/CommandPalette.stx

@@ -1,4 +1,4 @@
-<script>
+<script server>
 export const open = $props.open || false
 export const onClose = $props.onClose
 export const query = $props.query || ''

package/src/ui/command-palette/CommandPaletteItem.stx

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

package/src/ui/command-palette/README.md

@@ -11,27 +11,27 @@ bun add @stacksjs/components
 ## Usage
 
 ```stx
-<script>
-export let open = false
-export let query = ''
+<script server>
+let open = false
+let query = ''
 
 const commands = [
   { name: 'Create new file', action: () => console.log('create') },
   { name: 'Open settings', action: () => console.log('settings') }
 ]
 
-export const filtered = query === ''
+const filtered = query === ''
   ? commands
   : commands.filter(cmd => cmd.name.toLowerCase().includes(query.toLowerCase()))
 </script>
 
-@component('CommandPalette', { open, onClose: () => open = false, query, onQueryChange: (q) => query = q })
+<CommandPalette :open="open" :onClose="() => open = false" :query="query" :onQueryChange="(q) => query = q">
   @foreach(command in filtered)
-    @component('CommandPaletteItem', { onClick: command.action })
+    <CommandPaletteItem :onClick="command.action">
       {{ command.name }}
-    @endcomponent
+    </CommandPaletteItem>
   @endforeach
-@endcomponent
+</CommandPalette>
 ```
 
 ## Features

package/src/ui/dialog/Dialog.stx

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

package/src/ui/dialog/DialogBackdrop.stx

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

package/src/ui/dialog/DialogDescription.stx

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

package/src/ui/dialog/DialogPanel.stx

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

package/src/ui/dialog/DialogTitle.stx

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

package/src/ui/dialog/README.md

@@ -11,37 +11,33 @@ bun add @stacksjs/components
 ## Usage
 
 ```stx
-<script>
-export let isOpen = false
+<script server>
+let isOpen = false
 
-export function closeModal() {
+function closeModal() {
   isOpen = false
 }
 
-export function openModal() {
+function openModal() {
   isOpen = true
 }
 </script>
 
-@component('Dialog', { open: isOpen, onClose: closeModal })
-  @component('DialogBackdrop')
+<Dialog :open="isOpen" :onClose="closeModal">
+  <DialogBackdrop />
 
-  @component('DialogPanel', { className: 'max-w-md' })
-    @component('DialogTitle')
-      Payment successful
-    @endcomponent
+  <DialogPanel className="max-w-md">
+    <DialogTitle>Payment successful</DialogTitle>
 
-    @component('DialogDescription')
+    <DialogDescription>
       Your payment has been successfully submitted.
-    @endcomponent
+    </DialogDescription>
 
     <div class="mt-4">
-      @component('Button', { onClick: closeModal })
-        Got it, thanks!
-      @endcomponent
+      <Button :onClick="closeModal">Got it, thanks!</Button>
     </div>
-  @endcomponent
-@endcomponent
+  </DialogPanel>
+</Dialog>
 ```
 
 ## Props
@@ -83,42 +79,34 @@ export function openModal() {
 ### Confirmation Dialog
 
 ```stx
-@component('Dialog', { open: isOpen, onClose: closeModal })
-  @component('DialogBackdrop')
+<Dialog :open="isOpen" :onClose="closeModal">
+  <DialogBackdrop />
 
-  @component('DialogPanel', { className: 'max-w-md' })
-    @component('DialogTitle')
-      Delete account
-    @endcomponent
+  <DialogPanel className="max-w-md">
+    <DialogTitle>Delete account</DialogTitle>
 
-    @component('DialogDescription')
+    <DialogDescription>
       Are you sure you want to delete your account? This action cannot be undone.
-    @endcomponent
+    </DialogDescription>
 
     <div class="mt-4 flex gap-2">
-      @component('Button', { variant: 'danger', onClick: handleDelete })
-        Delete
-      @endcomponent
-      @component('Button', { variant: 'secondary', onClick: closeModal })
-        Cancel
-      @endcomponent
+      <Button variant="danger" :onClick="handleDelete">Delete</Button>
+      <Button variant="secondary" :onClick="closeModal">Cancel</Button>
     </div>
-  @endcomponent
-@endcomponent
+  </DialogPanel>
+</Dialog>
 ```
 
 ### Large Dialog
 
 ```stx
-@component('DialogPanel', { className: 'max-w-4xl' })
-  @component('DialogTitle')
-    Terms and Conditions
-  @endcomponent
+<DialogPanel className="max-w-4xl">
+  <DialogTitle>Terms and Conditions</DialogTitle>
 
   <div class="mt-4 max-h-96 overflow-y-auto">
     <!-- Long content -->
   </div>
-@endcomponent
+</DialogPanel>
 ```
 
 ## Features

package/src/ui/drawer/Drawer.stx

@@ -1,4 +1,4 @@
-<script>
+<script server>
 export const open = $props.open ?? false
 export const onClose = $props.onClose || (() => {})
 export const position = $props.position || 'right'
@@ -60,7 +60,7 @@ export const closeButtonClasses = `absolute top-0 ${closeButtonPosition[position
   <div
     class="fixed inset-0 z-50 bg-gray-500/75 dark:bg-gray-900/75 transition-opacity duration-500"
     style="animation: fadeIn 0.5s ease-in-out"
-    onclick="handleBackdropClick()"
+    @click="handleBackdropClick()"
   ></div>
 
   <!-- Drawer Container -->
@@ -77,7 +77,7 @@ export const closeButtonClasses = `absolute top-0 ${closeButtonPosition[position
             <button
               type="button"
               class="relative rounded-md text-gray-300 dark:text-gray-400 hover:text-white dark:hover:text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
-              onclick="handleClose()"
+              @click="handleClose()"
             >
               <span class="absolute -inset-2.5"></span>
               <span class="sr-only">Close panel</span>

package/src/ui/drawer/README.md

@@ -11,8 +11,8 @@ bun add @stacksjs/components
 ## Usage
 
 ```stx
-<script>
-export let drawerOpen = false
+<script server>
+let drawerOpen = false
 </script>
 
 <button
@@ -22,16 +22,16 @@ export let drawerOpen = false
   Open drawer
 </button>
 
-@component('Drawer', {
-  open: drawerOpen,
-  onClose: () => drawerOpen = false,
-  position: 'right',
-  title: 'Panel title'
-})
+<Drawer
+  :open="drawerOpen"
+  :onClose="() => drawerOpen = false"
+  position="right"
+  title="Panel title"
+>
   <p class="text-sm text-gray-500 dark:text-gray-400">
     Your drawer content goes here.
   </p>
-@endcomponent
+</Drawer>
 ```
 
 ## Props
@@ -48,42 +48,22 @@ export let drawerOpen = false
 
 ### Right (default)
 ```stx
-@component('Drawer', {
-  open: true,
-  position: 'right'
-})
-  Content
-@endcomponent
+<Drawer open position="right">Content</Drawer>
 ```
 
 ### Left
 ```stx
-@component('Drawer', {
-  open: true,
-  position: 'left'
-})
-  Content
-@endcomponent
+<Drawer open position="left">Content</Drawer>
 ```
 
 ### Top
 ```stx
-@component('Drawer', {
-  open: true,
-  position: 'top'
-})
-  Content
-@endcomponent
+<Drawer open position="top">Content</Drawer>
 ```
 
 ### Bottom
 ```stx
-@component('Drawer', {
-  open: true,
-  position: 'bottom'
-})
-  Content
-@endcomponent
+<Drawer open position="bottom">Content</Drawer>
 ```
 
 ## Features

package/src/ui/dropdown/Dropdown.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/dropdown/DropdownButton.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/dropdown/DropdownItem.stx

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

package/src/ui/dropdown/DropdownItems.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/dropdown/README.md

@@ -11,20 +11,14 @@ bun add @stacksjs/components
 ## Usage
 
 ```stx
-@component('Dropdown')
-  @component('DropdownButton', { className: 'btn-primary' })
-    Options
-  @endcomponent
-
-  @component('DropdownItems')
-    @component('DropdownItem')
-      Edit
-    @endcomponent
-    @component('DropdownItem')
-      Delete
-    @endcomponent
-  @endcomponent
-@endcomponent
+<Dropdown>
+  <DropdownButton className="btn-primary">Options</DropdownButton>
+
+  <DropdownItems>
+    <DropdownItem>Edit</DropdownItem>
+    <DropdownItem>Delete</DropdownItem>
+  </DropdownItems>
+</Dropdown>
 ```
 
 ## Props
@@ -63,71 +57,49 @@ bun add @stacksjs/components
 ### Basic Dropdown
 
 ```stx
-@component('Dropdown')
-  @component('DropdownButton', {
-    className: 'px-4 py-2 bg-blue-500 text-white rounded-md'
-  })
+<Dropdown>
+  <DropdownButton className="px-4 py-2 bg-blue-500 text-white rounded-md">
     Actions
-  @endcomponent
-
-  @component('DropdownItems', {
-    className: 'w-56'
-  })
-    @component('DropdownItem')
-      Edit
-    @endcomponent
-    @component('DropdownItem')
-      Duplicate
-    @endcomponent
-    @component('DropdownItem', { disabled: true })
-      Archive (coming soon)
-    @endcomponent
-    @component('DropdownItem')
-      Delete
-    @endcomponent
-  @endcomponent
-@endcomponent
+  </DropdownButton>
+
+  <DropdownItems className="w-56">
+    <DropdownItem>Edit</DropdownItem>
+    <DropdownItem>Duplicate</DropdownItem>
+    <DropdownItem disabled>Archive (coming soon)</DropdownItem>
+    <DropdownItem>Delete</DropdownItem>
+  </DropdownItems>
+</Dropdown>
 ```
 
 ### With Icons
 
 ```stx
-@component('DropdownItem')
+<DropdownItem>
   <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
   </svg>
   Edit
-@endcomponent
+</DropdownItem>
 ```
 
 ### Grouped Items
 
 ```stx
-@component('DropdownItems')
+<DropdownItems>
   <div class="px-1 py-1">
-    @component('DropdownItem')
-      Edit
-    @endcomponent
-    @component('DropdownItem')
-      Duplicate
-    @endcomponent
+    <DropdownItem>Edit</DropdownItem>
+    <DropdownItem>Duplicate</DropdownItem>
   </div>
 
   <div class="px-1 py-1">
-    @component('DropdownItem')
-      Archive
-    @endcomponent
-    @component('DropdownItem')
-      Move
-    @endcomponent
+    <DropdownItem>Archive</DropdownItem>
+    <DropdownItem>Move</DropdownItem>
   </div>
 
   <div class="px-1 py-1">
-    @component('DropdownItem')
-      Delete
-    @endcomponent
+    <DropdownItem>Delete</DropdownItem>
   </div>
-@endcomponent
+</DropdownItems>
 ```
 
 ## Features

package/src/ui/form/Form.stx

@@ -1,4 +1,4 @@
-<script>
+<script server>
 export const action = $props.action || ''
 export const method = $props.method || 'POST'
 export const validationSchema = $props.validationSchema || {}

package/src/ui/image/Image.stx

@@ -1,4 +1,4 @@
-<script>
+<script server>
 export const src = $props.src || ''
 export const srcSet = $props.srcSet || ''
 export const sizes = $props.sizes || ''