@stacksjs/components 0.2.20 → 0.2.24

package/src/ui/select/README.md

@@ -13,110 +13,87 @@ bun add @stacksjs/components
 ### Basic Select
 
 ```stx
-<script>
-export const options = [
+<script server>
+const options = [
   { value: 'option1', label: 'Option 1' },
   { value: 'option2', label: 'Option 2' },
   { value: 'option3', label: 'Option 3' },
 ]
 
-export const selected = 'option1'
+const selected = 'option1'
 
-export const handleChange = (value) => {
+const handleChange = (value) => {
   console.log('Selected:', value)
   selected = value
 }
 </script>
 
-@component('Select', {
-  value: selected,
-  onChange: handleChange,
-  options: options,
-  placeholder: 'Choose an option'
-})
-@endcomponent
+<Select
+  :value="selected"
+  :onChange="handleChange"
+  :options="options"
+  placeholder="Choose an option"
+/>
 ```
 
 ### With Label and Helper Text
 
 ```stx
-@component('Select', {
-  label: 'Country',
-  helperText: 'Select your country of residence',
-  value: country,
-  onChange: (val) => country = val,
-  options: countries,
-  required: true
-})
-@endcomponent
+<Select
+  label="Country"
+  helperText="Select your country of residence"
+  :value="country"
+  :onChange="(val) => country = val"
+  :options="countries"
+  required
+/>
 ```
 
 ### With Error State
 
 ```stx
-@component('Select', {
-  label: 'Category',
-  value: category,
-  onChange: (val) => category = val,
-  options: categories,
-  error: true,
-  helperText: 'Please select a valid category',
-  required: true
-})
-@endcomponent
+<Select
+  label="Category"
+  :value="category"
+  :onChange="(val) => category = val"
+  :options="categories"
+  error
+  helperText="Please select a valid category"
+  required
+/>
 ```
 
 ### Different Sizes
 
 ```stx
 <!-- Small -->
-@component('Select', {
-  size: 'sm',
-  options: options
-})
-@endcomponent
+<Select size="sm" :options="options" />
 
 <!-- Medium (default) -->
-@component('Select', {
-  size: 'md',
-  options: options
-})
-@endcomponent
+<Select size="md" :options="options" />
 
 <!-- Large -->
-@component('Select', {
-  size: 'lg',
-  options: options
-})
-@endcomponent
+<Select size="lg" :options="options" />
 ```
 
 ### Disabled State
 
 ```stx
-@component('Select', {
-  disabled: true,
-  value: 'locked',
-  options: options
-})
-@endcomponent
+<Select disabled value="locked" :options="options" />
 ```
 
 ### With Disabled Options
 
 ```stx
-<script>
-export const options = [
+<script server>
+const options = [
   { value: '1', label: 'Available Option' },
   { value: '2', label: 'Disabled Option', disabled: true },
   { value: '3', label: 'Another Available' },
 ]
 </script>
 
-@component('Select', {
-  options: options
-})
-@endcomponent
+<Select :options="options" />
 ```
 
 ## Props
@@ -170,8 +147,8 @@ interface SelectOption {
 ## Example: Form Select
 
 ```stx
-<script>
-export const countries = [
+<script server>
+const countries = [
   { value: 'us', label: 'United States' },
   { value: 'ca', label: 'Canada' },
   { value: 'mx', label: 'Mexico' },
@@ -179,26 +156,25 @@ export const countries = [
   { value: 'de', label: 'Germany' },
 ]
 
-export let selectedCountry = ''
-export let hasError = false
+let selectedCountry = ''
+let hasError = false
 
-export const handleCountryChange = (value) => {
+const handleCountryChange = (value) => {
   selectedCountry = value
   hasError = !value
 }
 </script>
 
 <form>
-  @component('Select', {
-    label: 'Country',
-    value: selectedCountry,
-    onChange: handleCountryChange,
-    options: countries,
-    placeholder: 'Select your country',
-    required: true,
-    error: hasError,
-    helperText: hasError ? 'Country is required' : 'Choose your country'
-  })
-  @endcomponent
+  <Select
+    label="Country"
+    :value="selectedCountry"
+    :onChange="handleCountryChange"
+    :options="countries"
+    placeholder="Select your country"
+    required
+    :error="hasError"
+    :helperText="hasError ? 'Country is required' : 'Choose your country'"
+  />
 </form>
 ```

package/src/ui/select/Select.stx

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

package/src/ui/sidebar/Sidebar.stx

@@ -1,4 +1,4 @@
-<script>
+<script server>
 /**
  * Sidebar Component - macOS Native Style
  *

package/src/ui/sidebar/SidebarFooter.stx

@@ -1,4 +1,4 @@
-<script>
+<script server>
 /**
  * SidebarFooter Component
  *

package/src/ui/sidebar/SidebarHeader.stx

@@ -1,4 +1,4 @@
-<script>
+<script server>
 /**
  * SidebarHeader Component
  *

package/src/ui/sidebar/SidebarItem.stx

@@ -1,4 +1,4 @@
-<script>
+<script server>
 /**
  * SidebarItem Component
  *

package/src/ui/sidebar/SidebarSection.stx

@@ -1,4 +1,4 @@
-<script>
+<script server>
 /**
  * SidebarSection Component
  *

package/src/ui/skeleton/Skeleton.stx

@@ -1,4 +1,4 @@
-<script>
+<script server>
 export const variant = $props.variant || 'text'
 export const count = $props.count || 1
 export const width = $props.width || ''

package/src/ui/spinner/Spinner.stx

@@ -1,4 +1,4 @@
-<script>
+<script server>
 export const variant = $props.variant || 'circle'
 export const size = $props.size || 'md'
 export const color = $props.color || 'primary'

package/src/ui/stepper/README.md

@@ -11,19 +11,19 @@ bun add @stacksjs/components
 ## Usage
 
 ```stx
-<script>
-export let currentStep = 0
+<script server>
+let currentStep = 0
 
-export function handleStepClick(step) {
+function handleStepClick(step) {
   currentStep = step
 }
 </script>
 
-@component('Stepper', { currentStep })
-  @component('StepperStep', { stepNumber: 0, currentStep, label: 'Account', onClick: handleStepClick })
-  @component('StepperStep', { stepNumber: 1, currentStep, label: 'Profile', onClick: handleStepClick })
-  @component('StepperStep', { stepNumber: 2, currentStep, label: 'Confirmation', onClick: handleStepClick })
-@endcomponent
+<Stepper :currentStep="currentStep">
+  <StepperStep :stepNumber="0" :currentStep="currentStep" label="Account" :onClick="handleStepClick" />
+  <StepperStep :stepNumber="1" :currentStep="currentStep" label="Profile" :onClick="handleStepClick" />
+  <StepperStep :stepNumber="2" :currentStep="currentStep" label="Confirmation" :onClick="handleStepClick" />
+</Stepper>
 ```
 
 ## Features

package/src/ui/stepper/Stepper.stx

@@ -1,4 +1,4 @@
-<script>
+<script server>
 export const currentStep = $props.currentStep || 0
 export const orientation = $props.orientation || 'horizontal'
 export const className = $props.className || ''

package/src/ui/stepper/StepperStep.stx

@@ -1,4 +1,4 @@
-<script>
+<script server>
 export const stepNumber = $props.stepNumber
 export const currentStep = $props.currentStep || 0
 export const label = $props.label || ''

package/src/ui/switch/README.md

@@ -11,7 +11,7 @@ bun add @stacksjs/components
 ## Usage
 
 ```stx
-@component('Switch', { checked: true, label: 'Enable notifications' })
+<Switch checked label="Enable notifications" />
 ```
 
 ## Props
@@ -30,60 +30,44 @@ bun add @stacksjs/components
 ### Basic Switch
 
 ```stx
-<script>
+<script server>
 let enabled = false
 
 function handleChange(checked) {
   enabled = checked
   console.log('Switch is now:', checked)
 }
-
-module.exports = { enabled, handleChange }
 </script>
 
-@component('Switch', {
-  checked: enabled,
-  onChange: handleChange
-})
+<Switch :checked="enabled" :onChange="handleChange" />
 ```
 
 ### With Label
 
 ```stx
-@component('Switch', {
-  checked: true,
-  label: 'Enable notifications',
-  onChange: handleChange
-})
+<Switch checked label="Enable notifications" :onChange="handleChange" />
 ```
 
 ### Sizes
 
 ```stx
-@component('Switch', { size: 'sm', checked: true })
+<Switch size="sm" checked />
 
-@component('Switch', { size: 'md', checked: true })
+<Switch size="md" checked />
 
-@component('Switch', { size: 'lg', checked: true })
+<Switch size="lg" checked />
 ```
 
 ### Disabled State
 
 ```stx
-@component('Switch', {
-  checked: true,
-  disabled: true,
-  label: 'Cannot toggle'
-})
+<Switch checked disabled label="Cannot toggle" />
 ```
 
 ### Custom Styling
 
 ```stx
-@component('Switch', {
-  checked: true,
-  className: 'my-4'
-})
+<Switch checked className="my-4" />
 ```
 
 ## Accessibility
@@ -126,8 +110,5 @@ To customize colors, you can:
 
 Example:
 ```stx
-@component('Switch', {
-  checked: true,
-  className: '!bg-green-500'
-})
+<Switch checked className="!bg-green-500" />
 ```

package/src/ui/switch/Switch.stx

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

package/src/ui/table/README.md

@@ -11,23 +11,23 @@ bun add @stacksjs/components
 ## Usage
 
 ```stx
-@component('Table')
-  @component('TableHead')
-    @component('TableRow')
-      @component('TableHeader') Name @endcomponent
-      @component('TableHeader') Email @endcomponent
-      @component('TableHeader') Role @endcomponent
-    @endcomponent
-  @endcomponent
-
-  @component('TableBody')
-    @component('TableRow')
-      @component('TableCell') John Doe @endcomponent
-      @component('TableCell') john@example.com @endcomponent
-      @component('TableCell') Admin @endcomponent
-    @endcomponent
-  @endcomponent
-@endcomponent
+<Table>
+  <TableHead>
+    <TableRow>
+      <TableHeader>Name</TableHeader>
+      <TableHeader>Email</TableHeader>
+      <TableHeader>Role</TableHeader>
+    </TableRow>
+  </TableHead>
+
+  <TableBody>
+    <TableRow>
+      <TableCell>John Doe</TableCell>
+      <TableCell>john@example.com</TableCell>
+      <TableCell>Admin</TableCell>
+    </TableRow>
+  </TableBody>
+</Table>
 ```
 
 ## Features

package/src/ui/table/Table.stx

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

package/src/ui/table/TableBody.stx

@@ -1,4 +1,4 @@
-<script>
+<script server>
 export const className = $props.className || ''
 
 const baseClasses = 'bg-white divide-y divide-neutral-200 dark:bg-neutral-900 dark:divide-neutral-700'

package/src/ui/table/TableCell.stx

@@ -1,4 +1,4 @@
-<script>
+<script server>
 export const className = $props.className || ''
 
 const baseClasses = 'px-6 py-4 whitespace-nowrap text-sm text-neutral-900 dark:text-neutral-100'

package/src/ui/table/TableHead.stx

@@ -1,4 +1,4 @@
-<script>
+<script server>
 export const className = $props.className || ''
 
 const baseClasses = 'bg-neutral-50 dark:bg-neutral-800'

package/src/ui/table/TableHeader.stx

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

package/src/ui/table/TableRow.stx

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

package/src/ui/tabs/Tabs.stx

@@ -1,4 +1,4 @@
-<script>
+<script server>
 export const tabs = $props.tabs || []
 export const defaultTab = $props.defaultTab || 0
 export const orientation = $props.orientation || 'horizontal'
@@ -71,7 +71,7 @@ export const tabPanelClasses = `p-4 focus:outline-none`.trim()
         aria-controls="tab-panel-{{ $loop.index }}"
         id="tab-{{ $loop.index }}"
         tabindex="{{ activeTab === $loop.index ? '0' : '-1' }}"
-        onclick="selectTab({{ $loop.index }})"
+        @click="selectTab({{ $loop.index }})"
         onkeydown="handleKeyDown(event, {{ $loop.index }})"
       >
         @if(tab.icon)

package/src/ui/teleport/Teleport.stx

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

package/src/ui/textarea/Textarea.stx

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

package/src/ui/tooltip/Tooltip.stx

@@ -1,4 +1,4 @@
-<script>
+<script server>
 export const content = $props.content || ''
 export const position = $props.position || 'top'
 export const delay = $props.delay || 0

package/src/ui/transition/README.md

@@ -11,15 +11,15 @@ bun add @stacksjs/components
 ## Usage
 
 ```stx
-<script>
-export let isOpen = true
+<script server>
+let isOpen = true
 </script>
 
-@component('Transition', { show: isOpen })
+<Transition :show="isOpen">
   <div class="p-4 bg-white rounded-lg shadow-lg">
     Content with fade transition
   </div>
-@endcomponent
+</Transition>
 ```
 
 ## Features

package/src/ui/transition/Transition.stx

@@ -1,4 +1,4 @@
-<script>
+<script server>
 export const show = $props.show !== false
 export const enter = $props.enter || 'transition-opacity duration-300'
 export const enterFrom = $props.enterFrom || 'opacity-0'

package/src/ui/video/README.md

@@ -11,14 +11,13 @@ bun add @stacksjs/components
 ## Usage
 
 ```stx
-@component('Video', {
-  src: '/videos/demo.mp4',
-  poster: '/images/video-thumbnail.jpg',
-  title: 'Product Demo',
-  aspectRatio: '16/9',
-  controls: true
-})
-@endcomponent
+<Video
+  src="/videos/demo.mp4"
+  poster="/images/video-thumbnail.jpg"
+  title="Product Demo"
+  aspectRatio="16/9"
+  controls
+/>
 ```
 
 ## Props

package/src/ui/video/Video.stx

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

package/src/ui/virtual-list/VirtualList.stx

@@ -1,4 +1,4 @@
-<script>
+<script server>
 export const items = $props.items || []
 export const itemHeight = $props.itemHeight || 50
 export const height = $props.height || 400

package/src/ui/virtual-table/VirtualTable.stx

@@ -1,4 +1,4 @@
-<script>
+<script server>
 export const columns = $props.columns || []
 export const data = $props.data || []
 export const rowHeight = $props.rowHeight || 48