@stacksjs/components 0.2.20 → 0.2.24

package/README.md

@@ -94,112 +94,71 @@ yarn add @stacksjs/components
 
 ## Component Syntax
 
-stx provides multiple ways to use components, giving you flexibility to choose the syntax that best fits your project:
+Both `<Component>` JSX-style tags and `@component('Name', {...})` Blade-style directives work. **The JSX form is preferred** — it's cleaner, matches the rest of the stx ecosystem (`<StxLink>`, `<Icon>`, etc.), and reads like standard HTML.
 
-### 1. @component Directive with Object Shorthand (Recommended)
-
-The most concise syntax using ES6 object shorthand:
+### Static props
 
 ```stx
-<script>
-export const title = 'Welcome'
-export const variant = 'primary'
-export const onClick = () => console.log('clicked')
-</script>
-
-@component('Button', {
-  title,
-  variant,
-  onClick
-})
-@endcomponent
+<Button variant="primary" size="lg">Save Changes</Button>
 ```
 
-### 2. @component Directive with Full Props
+### Dynamic props (server-side)
 
-Traditional explicit prop mapping:
+Use `:prop` to bind server-side expressions:
 
 ```stx
-@component('Button', {
-  title: title,
-  variant: variant,
-  onClick: onClick
-})
-@endcomponent
-```
+<script server>
+const variant = isAdmin ? 'danger' : 'primary'
+</script>
 
-### 3. PascalCase Component Tags with Dynamic Binding (Vue-like)
+<Button :variant="variant">Delete</Button>
+```
 
-Use `:prop` syntax for dynamic values from context:
+### Self-closing
 
 ```stx
-<script>
-export const title = 'Welcome'
-export const variant = 'primary'
-</script>
-
-<Button
-  :title="title"
-  :variant="variant"
-  :onClick="onClick"
-/>
+<Switch checked label="Enable notifications" />
+<Avatar src="/photo.jpg" alt="Glenn" size="md" />
 ```
 
-### 4. PascalCase Component Tags with Static Values
-
-Use regular attributes for static strings:
+### Slots
 
 ```stx
-<Button
-  title="Welcome"
-  variant="primary"
-/>
+<Dialog :open="isOpen" @close="handleClose">
+  <DialogBackdrop />
+  <DialogPanel className="max-w-md">
+    <DialogTitle>Confirm delete</DialogTitle>
+    <p>This action cannot be undone.</p>
+  </DialogPanel>
+</Dialog>
 ```
 
-### 5. Mixed Static and Dynamic Props
+### Blade-compat alternative
 
-Combine static strings and dynamic bindings:
+The `@component` directive also works if you prefer the Blade style:
 
 ```stx
-<Button
-  title="Static Title"
-  :variant="dynamicVariant"
-  size="large"
-/>
+@component('Button', { variant: 'primary' })
+  Save Changes
+@endcomponent
 ```
 
-All these syntaxes are equivalent and fully interchangeable. Choose the one that fits your coding style!
-
 ## Usage
 
 ### Basic Example
 
 ```stx
-<script>
-import { Button, Switch } from '@stacksjs/components'
-
-let notifications = true
-
-function handleNotificationChange(checked) {
-  notifications = checked
-}
-
-module.exports = { notifications, handleNotificationChange }
+<script server>
+const notifications = true
 </script>
 
 <div class="p-6">
   <h1 class="text-2xl font-bold mb-4">Settings</h1>
 
-  @component('Switch', {
-    checked: notifications,
-    label: 'Enable notifications',
-    onChange: handleNotificationChange
-  })
+  <Switch :checked="notifications" label="Enable notifications" />
 
   <div class="mt-4">
-    @component('Button', { variant: 'primary' })
-      Save Changes
-    @endcomponent
+    <Button variant="primary">Save Changes</Button>
   </div>
 </div>
 ```
@@ -207,42 +166,27 @@ module.exports = { notifications, handleNotificationChange }
 ### With Code Highlighting
 
 ```stx
-<script>
-import { CodeBlock } from '@stacksjs/components'
-
+<script server>
 const code = `
 function greet(name: string) {
   console.log(\`Hello, \${name}!\`)
 }
 `
-
-module.exports = { code }
 </script>
 
-@component('CodeBlock', {
-  code: code,
-  language: 'typescript',
-  copyable: true
-})
+<CodeBlock :code="code" language="typescript" copyable />
 ```
 
 ### Using Composables
 
 ```stx
-<script>
-import { useDarkMode, useCopyCode } from '@stacksjs/components'
-
+<script client>
 const { isDark, toggle } = useDarkMode()
-
-module.exports = { isDark, toggle }
 </script>
 
-<button @click="toggle">
-  @if(isDark)
-    Switch to Light Mode
-  @else
-    Switch to Dark Mode
-  @endif
+<button @click="toggle()">
+  <span :if="isDark()">Switch to Light Mode</span>
+  <span :if="!isDark()">Switch to Dark Mode</span>
 </button>
 ```
 

package/dist/{Accordion-x2gjedap.stx → Accordion-sbfra0mz.stx}

@@ -1,4 +1,4 @@
-<script>
+<script server>
 export const items = $props.items || []
 export const allowMultiple = $props.allowMultiple || false
 export const defaultOpen = $props.defaultOpen || []
@@ -49,7 +49,7 @@ export const contentClasses = `px-4 py-3 text-gray-700 dark:text-gray-300`.trim(
       <button
         type="button"
         class="{{ headerClasses }}"
-        onclick="toggleItem({{ $loop.index }})"
+        @click="toggleItem({{ $loop.index }})"
         aria-expanded="{{ isOpen($loop.index) ? 'true' : 'false' }}"
         aria-controls="accordion-content-{{ $loop.index }}"
       >

package/dist/{Audio-0fk6p9tn.stx → Audio-vdmg1258.stx}

@@ -1,4 +1,4 @@
-<script>
+<script server>
 export const src = $props.src || ''
 export const autoplay = $props.autoplay || false
 export const loop = $props.loop || false

package/dist/{Avatar-5m0v0s4x.stx → Avatar-365cvrh4.stx}

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

package/dist/{Badge-ynes82vv.stx → Badge-8m3qete4.stx}

@@ -1,4 +1,4 @@
-<script>
+<script server>
 export const variant = $props.variant || 'default'
 export const size = $props.size || 'md'
 export const dot = $props.dot || false
@@ -50,7 +50,7 @@ export const removeButtonClasses = `ml-0.5 -mr-1 text-current hover:bg-black hov
   @if(removable && onRemove)
     <button
       type="button"
-      onclick="handleRemove()"
+      @click="handleRemove()"
       class="{{ removeButtonClasses }}"
       aria-label="Remove"
     >

package/dist/{Breadcrumb-h9n427sk.stx → Breadcrumb-7f7s4d02.stx}

@@ -1,4 +1,4 @@
-<script>
+<script server>
 export const items = $props.items || []
 export const separator = $props.separator || '/'
 export const maxItems = $props.maxItems || 0

package/dist/{Button-7xtrzn14.stx → Button-3tt4vsqt.stx}

@@ -1,4 +1,4 @@
-<script>
+<script server>
 export const variant = $props.variant || 'primary'
 export const size = $props.size || 'md'
 export const disabled = $props.disabled || false
@@ -56,7 +56,7 @@ export const spinnerClasses = `animate-spin ${iconClasses}`.trim()
   type="{{ type }}"
   class="{{ buttonClasses }}"
   @if(isDisabled)disabled@endif
-  @if(onClick)onclick="handleClick(event)"@endif
+  @if(onClick)@click="handleClick(event)"@endif
   aria-busy="{{ loading ? 'true' : 'false' }}"
 >
   @if(loading)

package/dist/{Calendar-egvx1pma.stx → Calendar-58nnkdh8.stx}

@@ -1,4 +1,4 @@
-<script>
+<script server>
 // Calendar Component Props
 export const value = $props.value || new Date()
 export const onChange = $props.onChange
@@ -170,7 +170,7 @@ const calendarDays = getCalendarDays()
     <button
       type="button"
       class="{{ buttonClasses }}"
-      onclick="previousMonth()"
+      @click="previousMonth()"
       aria-label="Previous month"
     >
       <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -185,7 +185,7 @@ const calendarDays = getCalendarDays()
     <button
       type="button"
       class="{{ buttonClasses }}"
-      onclick="nextMonth()"
+      @click="nextMonth()"
       aria-label="Next month"
     >
       <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -207,7 +207,7 @@ const calendarDays = getCalendarDays()
       <button
         type="button"
         class="{{ getDayClasses(day) }}"
-        onclick="selectDate(day.date)"
+        @click="selectDate(day.date)"
         aria-label="{{ day.date.toLocaleDateString(locale) }}"
         @if(isDisabled(day.date))
           disabled
@@ -223,7 +223,7 @@ const calendarDays = getCalendarDays()
       <button
         type="button"
         class="px-4 py-2 text-sm font-medium text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-gray-700 rounded-md transition-colors"
-        onclick="goToToday()"
+        @click="goToToday()"
       >
         Today
       </button>

package/dist/{Card-r9w7vy1a.stx → Card-6wdbexqr.stx}

@@ -1,4 +1,4 @@
-<script>
+<script server>
 export const variant = $props.variant || 'default'
 export const padding = $props.padding || 'default'
 export const hover = $props.hover || false
@@ -37,7 +37,7 @@ export const contentClasses = `${image ? paddingClasses[padding] : ''}`.trim()
 </script>
 
 @if(onClick)
-  <div class="{{ cardClasses }}" onclick="handleClick(event)" role="button" tabindex="0" onkeydown="handleKeyDown(event)">
+  <div class="{{ cardClasses }}" @click="handleClick(event)" role="button" tabindex="0" onkeydown="handleKeyDown(event)">
     @if(image)
       <img src="{{ image }}" alt="{{ imageAlt }}" class="{{ imageClasses }}" />
     @endif

package/dist/{Checkbox-m8v46pmx.stx → Checkbox-p3q3e3nf.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/dist/{Checkout-vcnnr176.stx → Checkout-e4037tyy.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/dist/{Combobox-npb08vkp.stx → Combobox-th5ebw62.stx}

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

package/dist/{ComboboxButton-vcdyq4zw.stx → ComboboxButton-8gxwkhdx.stx}

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

package/dist/{ComboboxInput-c9d2p02m.stx → ComboboxInput-mk99z65n.stx}

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

package/dist/{ComboboxOption-7d0h9ash.stx → ComboboxOption-an9zyan6.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/dist/{ComboboxOptions-4dtqc0qa.stx → ComboboxOptions-6b5ywc5x.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/dist/{CommandPalette-ah00bf8v.stx → CommandPalette-kwmdf2np.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/dist/{CommandPaletteItem-2yx0gvtj.stx → CommandPaletteItem-zx2fbpts.stx}

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

package/dist/{DefaultPaymentMethod-emw5fg8s.stx → DefaultPaymentMethod-shhf6aap.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/dist/{Dialog-1w4rz7x0.stx → Dialog-rgmj8q2j.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/dist/{DialogBackdrop-qbm3y5ab.stx → DialogBackdrop-rxax3sec.stx}

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

package/dist/{DialogDescription-01w5j74b.stx → DialogDescription-76prd1m2.stx}

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

package/dist/{DialogPanel-brsszrrs.stx → DialogPanel-44d8jeqy.stx}

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

package/dist/{DialogTitle-3rxhwg21.stx → DialogTitle-x0r6k8x9.stx}

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

package/dist/{Drawer-yfaz8q7f.stx → Drawer-p7m351bn.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/dist/{Dropdown-ng7nx556.stx → Dropdown-jz4jy0n3.stx}

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

package/dist/{DropdownButton-vc4zpyrb.stx → DropdownButton-9w8zkfwj.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/dist/{DropdownItem-z491y23c.stx → DropdownItem-wagdspb8.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/dist/{DropdownItems-7ykf29sj.stx → DropdownItems-aygjpxkx.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/dist/{EmailInput-bfshpj92.stx → EmailInput-ajsp9vw6.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/dist/{Form-z4f7w6r1.stx → Form-1mdmx9b6.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/dist/{Image-ktk0451c.stx → Image-jhkm6w1f.stx}

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

package/dist/{Listbox-xcejcmyc.stx → Listbox-pqqh72g8.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/dist/{ListboxButton-nx5kmw19.stx → ListboxButton-spwx7513.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/dist/{RadioGroupLabel-aky8a73n.stx → ListboxLabel-7mymt1b8.stx}

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

package/dist/{ListboxOption-6h4hsdz5.stx → ListboxOption-7nxzaexq.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/dist/{ListboxOptions-2sacdtm5.stx → ListboxOptions-8kqvfp7z.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/dist/{Login-s2jkvd9y.stx → Login-rx9gyqhx.stx}

@@ -1,4 +1,4 @@
-<script>
+<script server>
 export const showLogo = $props.showLogo ?? true
 export const headingText = $props.headingText || 'Sign in to your account'
 export const showSocialLogin = $props.showSocialLogin ?? true

package/dist/{Navigator-tqqdgdkw.stx → Navigator-aay8bjab.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/dist/{Notification-sry8egea.stx → Notification-gk33gv7b.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/dist/{NumberInput-zm93ddfw.stx → NumberInput-nzpkx1ry.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/dist/{Pagination-yza9v4qw.stx → Pagination-h61eq390.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 }}"