@stacksjs/components 0.2.27 → 0.2.53

package/src/ui/switch/Switch.stx

@@ -3,51 +3,50 @@ export const checked = $props.checked || false
 export const disabled = $props.disabled || false
 export const size = $props.size || 'md'
 export const className = $props.className || ''
-export const onChange = $props.onChange
 export const label = $props.label || ''
 
-// Size configurations using headwind
 const sizeConfig = {
-  sm: {
-    track: 'h-5 w-9',
-    thumb: 'h-4 w-4',
-    translate: 'translate-x-4',
-  },
-  md: {
-    track: 'h-[38px] w-[74px]',
-    thumb: 'h-[34px] w-[34px]',
-    translate: 'translate-x-9',
-  },
-  lg: {
-    track: 'h-12 w-24',
-    thumb: 'h-11 w-11',
-    translate: 'translate-x-12',
-  },
+  sm: { track: 'h-5 w-9', thumb: 'h-4 w-4', translate: 'translate-x-4' },
+  md: { track: 'h-[38px] w-[74px]', thumb: 'h-[34px] w-[34px]', translate: 'translate-x-9' },
+  lg: { track: 'h-12 w-24', thumb: 'h-11 w-11', translate: 'translate-x-12' },
 }
 
-const config = sizeConfig[size]
+export const config = sizeConfig[size]
 
-// Track classes
-const trackBaseClasses = 'relative inline-flex shrink-0 cursor-pointer border-2 border-transparent rounded-full transition-colors duration-200 ease-in-out focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-neutral-300 dark:focus-visible:ring-offset-neutral-700'
-const trackStateClasses = checked
-  ? 'bg-blue-500 dark:bg-blue-600'
-  : 'bg-neutral-400 dark:bg-neutral-600'
-const trackDisabledClasses = disabled
-  ? 'opacity-50 cursor-not-allowed pointer-events-none'
-  : ''
+export const trackBaseClasses = 'relative inline-flex shrink-0 cursor-pointer border-2 border-transparent rounded-full transition-colors duration-200 ease-in-out focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-neutral-300 dark:focus-visible:ring-offset-neutral-700'
+export const trackDisabledClasses = disabled ? 'opacity-50 cursor-not-allowed pointer-events-none' : ''
+export const thumbBaseClasses = 'pointer-events-none inline-block transform rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out'
+</script>
 
-export const trackClasses = `${trackBaseClasses} ${trackStateClasses} ${trackDisabledClasses} ${config.track} ${className}`.trim()
+<script client>
+const emit = defineEmits()
+const isDisabled = {{ disabled }}
+const config = {{ config }}
+const trackBase = {{ trackBaseClasses }}
+const trackDisabled = {{ trackDisabledClasses }}
+const thumbBase = {{ thumbBaseClasses }}
+const extraClass = {{ className }}
+const isChecked = state({{ checked }})
 
-// Thumb classes
-const thumbBaseClasses = 'pointer-events-none inline-block transform rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out'
-const thumbPositionClasses = checked ? config.translate : 'translate-x-0'
-export const thumbClasses = `${thumbBaseClasses} ${thumbPositionClasses} ${config.thumb}`.trim()
+function toggle() {
+  if (isDisabled) return
+  isChecked.set(!isChecked())
+  emit('change', isChecked())
+}
 
-// Toggle function
-export function toggle() {
-  if (disabled) return
-  onChange?.(!checked)
+function trackClasses() {
+  const stateClass = isChecked()
+    ? 'bg-blue-500 dark:bg-blue-600'
+    : 'bg-neutral-400 dark:bg-neutral-600'
+  return `${trackBase} ${stateClass} ${trackDisabled} ${config.track} ${extraClass}`.trim()
 }
+
+function thumbClasses() {
+  const pos = isChecked() ? config.translate : 'translate-x-0'
+  return `${thumbBase} ${pos} ${config.thumb}`.trim()
+}
+
+defineExpose({ isChecked, toggle })
 </script>
 
 <label class="inline-flex items-center gap-3 cursor-pointer">
@@ -60,15 +59,12 @@ export function toggle() {
   <button
     type="button"
     role="switch"
-    aria-checked="{{ checked ? 'true' : 'false' }}"
-    class="{{ trackClasses }}"
+    :aria-checked="isChecked() ? 'true' : 'false'"
+    :class="trackClasses()"
     @if(disabled)disabled aria-disabled="true"@endif
-    @click="toggle"
+    @click="toggle()"
   >
     <span class="sr-only">@if(label){{ label }}@else Toggle switch@endif</span>
-    <span
-      aria-hidden="true"
-      class="{{ thumbClasses }}"
-    />
+    <span aria-hidden="true" :class="thumbClasses()"></span>
   </button>
 </label>

package/src/ui/table/TableHeader.stx

@@ -1,13 +1,20 @@
 <script server>
 export const className = $props.className || ''
 export const sortable = $props.sortable || false
-export const onClick = $props.onClick
 
 const baseClasses = 'px-6 py-3 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider dark:text-neutral-400'
 const sortableClasses = sortable ? 'cursor-pointer hover:text-neutral-700 dark:hover:text-neutral-200' : ''
-const headerClasses = `${baseClasses} ${sortableClasses} ${className}`.trim()
+export const headerClasses = `${baseClasses} ${sortableClasses} ${className}`.trim()
 </script>
 
-<th class="{{ headerClasses }}" @if(sortable)@click="onClick"@endif>
+<script client>
+const emit = defineEmits()
+
+function onClick() {
+  emit('click')
+}
+</script>
+
+<th class="{{ headerClasses }}" @if(sortable)@click="onClick()"@endif>
   <slot />
 </th>

package/src/ui/tabs/Tabs.stx

@@ -4,59 +4,84 @@ export const defaultTab = $props.defaultTab || 0
 export const orientation = $props.orientation || 'horizontal'
 export const variant = $props.variant || 'line'
 export const className = $props.className || ''
-export const onChange = $props.onChange
 
-let activeTab = defaultTab
-
-function selectTab(index) {
-  activeTab = index
-  if (onChange) {
-    onChange(index, tabs[index])
-  }
-}
-
-// Orientation classes
 const orientationClasses = {
   horizontal: 'flex-col',
   vertical: 'flex-row',
 }
 
-// Tab list orientation classes
 const tabListOrientationClasses = {
   horizontal: 'flex-row border-b',
   vertical: 'flex-col border-r',
 }
 
-// Variant classes for tab list
 const variantClasses = {
   line: 'border-gray-200 dark:border-gray-700',
   pills: 'gap-2 border-0 bg-gray-100 dark:bg-gray-800 p-1 rounded-lg',
   enclosed: 'border-gray-200 dark:border-gray-700',
 }
 
-// Tab button classes based on variant
-function getTabClasses(index, variant, orientation) {
-  const isActive = index === activeTab
-  const baseClasses = 'px-4 py-2 font-medium text-sm transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900'
+export const containerClasses = `flex ${orientationClasses[orientation]} ${className}`.trim()
+export const tabListClasses = `flex ${tabListOrientationClasses[orientation]} ${variantClasses[variant]}`.trim()
+export const tabPanelClasses = `p-4 focus:outline-none`.trim()
+</script>
+
+<script client>
+const emit = defineEmits()
+const tabs = {{ tabs }}
+const variant = {{ variant }}
+const orientation = {{ orientation }}
+const activeTab = state({{ defaultTab }})
+
+function selectTab(index) {
+  activeTab.set(index)
+  emit('change', { index, tab: tabs[index] })
+}
+
+function isActive(index) {
+  return activeTab() === index
+}
 
+function getTabClasses(index) {
+  const isActiveTab = isActive(index)
+  const base = 'px-4 py-2 font-medium text-sm transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900'
   if (variant === 'line') {
-    const borderPosition = orientation === 'horizontal' ? 'border-b-2' : 'border-r-2'
-    return `${baseClasses} ${borderPosition} ${isActive ? 'border-blue-500 text-blue-600 dark:text-blue-400' : 'border-transparent text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 hover:border-gray-300 dark:hover:border-gray-600'}`
-  } else if (variant === 'pills') {
-    return `${baseClasses} rounded-md ${isActive ? 'bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 shadow-sm' : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200'}`
-  } else if (variant === 'enclosed') {
-    const borderClasses = orientation === 'horizontal' ? 'border-t border-l border-r rounded-t-md' : 'border-t border-l border-b rounded-l-md'
-    return `${baseClasses} ${borderClasses} ${isActive ? 'bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700 -mb-px' : 'bg-gray-50 dark:bg-gray-900 border-transparent hover:border-gray-200 dark:hover:border-gray-700'}`
+    const border = orientation === 'horizontal' ? 'border-b-2' : 'border-r-2'
+    return `${base} ${border} ${isActiveTab ? 'border-blue-500 text-blue-600 dark:text-blue-400' : 'border-transparent text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 hover:border-gray-300 dark:hover:border-gray-600'}`
   }
+  if (variant === 'pills') {
+    return `${base} rounded-md ${isActiveTab ? 'bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 shadow-sm' : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200'}`
+  }
+  if (variant === 'enclosed') {
+    const borders = orientation === 'horizontal' ? 'border-t border-l border-r rounded-t-md' : 'border-t border-l border-b rounded-l-md'
+    return `${base} ${borders} ${isActiveTab ? 'bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700 -mb-px' : 'bg-gray-50 dark:bg-gray-900 border-transparent hover:border-gray-200 dark:hover:border-gray-700'}`
+  }
+  return base
 }
 
-export const containerClasses = `flex ${orientationClasses[orientation]} ${className}`.trim()
-export const tabListClasses = `flex ${tabListOrientationClasses[orientation]} ${variantClasses[variant]}`.trim()
-export const tabPanelClasses = `p-4 focus:outline-none`.trim()
+function onTabKey(event, index) {
+  const tabCount = tabs.length
+  let next = index
+  if (orientation === 'horizontal') {
+    if (event.key === 'ArrowRight') { event.preventDefault(); next = (index + 1) % tabCount }
+    else if (event.key === 'ArrowLeft') { event.preventDefault(); next = (index - 1 + tabCount) % tabCount }
+  }
+  else {
+    if (event.key === 'ArrowDown') { event.preventDefault(); next = (index + 1) % tabCount }
+    else if (event.key === 'ArrowUp') { event.preventDefault(); next = (index - 1 + tabCount) % tabCount }
+  }
+  if (event.key === 'Home') { event.preventDefault(); next = 0 }
+  else if (event.key === 'End') { event.preventDefault(); next = tabCount - 1 }
+  if (next !== index) {
+    selectTab(next)
+    document.getElementById(`tab-${next}`)?.focus()
+  }
+}
+
+defineExpose({ activeTab, selectTab })
 </script>
 
 <div class="{{ containerClasses }}">
-  <!-- Tab List -->
   <div
     class="{{ tabListClasses }}"
     role="tablist"
@@ -65,18 +90,18 @@ export const tabPanelClasses = `p-4 focus:outline-none`.trim()
     @foreach(tab in tabs)
       <button
         type="button"
-        class="{{ getTabClasses($loop.index, variant, orientation) }}"
+        :class="getTabClasses({{ $loop.index }})"
         role="tab"
-        aria-selected="{{ activeTab === $loop.index ? 'true' : 'false' }}"
+        :aria-selected="isActive({{ $loop.index }}) ? 'true' : 'false'"
         aria-controls="tab-panel-{{ $loop.index }}"
         id="tab-{{ $loop.index }}"
-        tabindex="{{ activeTab === $loop.index ? '0' : '-1' }}"
+        :tabindex="isActive({{ $loop.index }}) ? '0' : '-1'"
         @click="selectTab({{ $loop.index }})"
-        onkeydown="handleKeyDown(event, {{ $loop.index }})"
+        @keydown="onTabKey($event, {{ $loop.index }})"
       >
         @if(tab.icon)
           <span class="inline-flex items-center gap-2">
-            <span innerHTML="{!! tab.icon !!}"></span>
+            <span x-html="{!! JSON.stringify(tab.icon) !!}"></span>
             <span>{{ tab.label }}</span>
           </span>
         @else
@@ -86,60 +111,16 @@ export const tabPanelClasses = `p-4 focus:outline-none`.trim()
     @endforeach
   </div>
 
-  <!-- Tab Panels -->
   @foreach(tab in tabs)
-    @if(activeTab === $loop.index)
-      <div
-        id="tab-panel-{{ $loop.index }}"
-        class="{{ tabPanelClasses }}"
-        role="tabpanel"
-        aria-labelledby="tab-{{ $loop.index }}"
-        tabindex="0"
-      >
-        {!! tab.content !!}
-      </div>
-    @endif
+    <div
+      :show="isActive({{ $loop.index }})"
+      id="tab-panel-{{ $loop.index }}"
+      class="{{ tabPanelClasses }}"
+      role="tabpanel"
+      aria-labelledby="tab-{{ $loop.index }}"
+      tabindex="0"
+    >
+      {!! tab.content !!}
+    </div>
   @endforeach
 </div>
-
-<script>
-function handleKeyDown(event, currentIndex) {
-  const tabCount = tabs.length
-  let newIndex = currentIndex
-
-  if (orientation === 'horizontal') {
-    if (event.key === 'ArrowRight') {
-      event.preventDefault()
-      newIndex = (currentIndex + 1) % tabCount
-    } else if (event.key === 'ArrowLeft') {
-      event.preventDefault()
-      newIndex = (currentIndex - 1 + tabCount) % tabCount
-    }
-  } else {
-    if (event.key === 'ArrowDown') {
-      event.preventDefault()
-      newIndex = (currentIndex + 1) % tabCount
-    } else if (event.key === 'ArrowUp') {
-      event.preventDefault()
-      newIndex = (currentIndex - 1 + tabCount) % tabCount
-    }
-  }
-
-  if (event.key === 'Home') {
-    event.preventDefault()
-    newIndex = 0
-  } else if (event.key === 'End') {
-    event.preventDefault()
-    newIndex = tabCount - 1
-  }
-
-  if (newIndex !== currentIndex) {
-    selectTab(newIndex)
-    // Focus the new tab
-    if (typeof window !== 'undefined') {
-      const newTab = document.getElementById(`tab-${newIndex}`)
-      if (newTab) newTab.focus()
-    }
-  }
-}
-</script>

package/src/ui/teleport/Teleport.stx

@@ -3,99 +3,63 @@ export const to = $props.to || 'body'
 export const disabled = $props.disabled || false
 export const defer = $props.defer || false
 
-let teleportContainer = null
-let teleportId = `teleport-${Math.random().toString(36).substr(2, 9)}`
+export const teleportId = `teleport-${Math.random().toString(36).slice(2, 11)}`
+</script>
 
-// Teleport content to target
-function teleport() {
-  if (typeof window === 'undefined' || disabled)
-    return
+<script client>
+const to = {{ to }}
+const isDisabled = {{ disabled }}
+const shouldDefer = {{ defer }}
+const teleportId = {{ teleportId }}
 
-  // Get target element
-  const targetElement = typeof to === 'string'
-    ? document.querySelector(to)
-    : to
+let teleportContainer = null
 
+function teleport() {
+  if (isDisabled) return
+  const targetElement = typeof to === 'string' ? document.querySelector(to) : to
   if (!targetElement) {
     console.warn(`Teleport target "${to}" not found`)
     return
   }
-
-  // Get source element
   const sourceElement = document.getElementById(teleportId)
-  if (!sourceElement)
-    return
-
-  // Create teleport container if needed
+  if (!sourceElement) return
   if (!teleportContainer) {
     teleportContainer = document.createElement('div')
     teleportContainer.setAttribute('data-teleport-id', teleportId)
   }
-
-  // Move all child nodes to container
   while (sourceElement.firstChild) {
     teleportContainer.appendChild(sourceElement.firstChild)
   }
-
-  // Append to target
   targetElement.appendChild(teleportContainer)
 }
 
-// Return content back to original location
 function returnContent() {
-  if (!teleportContainer || !teleportContainer.parentNode)
-    return
-
+  if (!teleportContainer || !teleportContainer.parentNode) return
   const sourceElement = document.getElementById(teleportId)
-  if (!sourceElement)
-    return
-
-  // Move content back
+  if (!sourceElement) return
   while (teleportContainer.firstChild) {
     sourceElement.appendChild(teleportContainer.firstChild)
   }
-
-  // Remove container
   teleportContainer.parentNode.removeChild(teleportContainer)
   teleportContainer = null
 }
 
-// Initialize teleport
-if (typeof window !== 'undefined') {
-  if (defer) {
-    // Defer until next tick
-    window.addEventListener('DOMContentLoaded', () => {
-      setTimeout(teleport, 0)
-    })
-  }
-  else {
-    // Immediate
-    window.addEventListener('DOMContentLoaded', teleport)
-  }
-
-  // Cleanup on page unload
+onMount(() => {
+  if (shouldDefer) setTimeout(teleport, 0)
+  else teleport()
   window.addEventListener('beforeunload', returnContent)
-}
+})
+
+onDestroy(() => {
+  returnContent()
+  window.removeEventListener('beforeunload', returnContent)
+})
 </script>
 
 @if(disabled)
-  <!-- Render in place if disabled -->
   <slot />
 @else
-  <!-- Source container -->
   <div id="{{ teleportId }}" data-teleport-source="true">
     <slot />
   </div>
 @endif
-
-<script>
-// Trigger teleport after render
-if (typeof window !== 'undefined' && document.readyState === 'complete') {
-  if (defer) {
-    setTimeout(teleport, 0)
-  }
-  else {
-    teleport()
-  }
-}
-</script>

package/src/ui/textarea/Textarea.stx

@@ -1,6 +1,5 @@
 <script server>
 export const value = $props.value || ''
-export const onChange = $props.onChange || (() => {})
 export const placeholder = $props.placeholder || ''
 export const disabled = $props.disabled || false
 export const readonly = $props.readonly || false
@@ -13,24 +12,14 @@ export const helperText = $props.helperText || ''
 export const required = $props.required || false
 export const maxLength = $props.maxLength
 export const showCount = $props.showCount || false
-export const resize = $props.resize || 'vertical' // 'none' | 'vertical' | 'horizontal' | 'both'
+export const resize = $props.resize || 'vertical'
 export const className = $props.className || ''
 
-// Resize classes
-const resizeClasses = {
-  none: 'resize-none',
-  vertical: 'resize-y',
-  horizontal: 'resize-x',
-  both: 'resize',
-}
-
-// Base and state classes
+const resizeClasses = { none: 'resize-none', vertical: 'resize-y', horizontal: 'resize-x', both: 'resize' }
 const baseClasses = 'block w-full border-0 rounded-md shadow-sm ring-1 ring-inset transition-colors duration-200 focus:ring-2 focus:ring-inset px-4 py-2 text-base dark:bg-blue-gray-700 dark:text-gray-100'
-
 const stateClasses = error
   ? 'ring-red-300 dark:ring-red-600 text-red-900 dark:text-red-300 placeholder-red-300 dark:placeholder-red-500 focus:ring-red-500 dark:focus:ring-red-400'
   : 'ring-gray-300 dark:ring-gray-600 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:ring-indigo-600 dark:focus:ring-indigo-400'
-
 const disabledClasses = disabled
   ? 'opacity-50 cursor-not-allowed bg-gray-50 dark:bg-gray-800'
   : readonly
@@ -42,6 +31,40 @@ export const labelClasses = `block text-sm font-medium leading-6 mb-2 ${error ?
 export const helperClasses = `mt-2 text-sm ${error ? 'text-red-600 dark:text-red-400' : 'text-gray-500 dark:text-gray-400'}`.trim()
 </script>
 
+<script client>
+const emit = defineEmits()
+const autoResize = {{ autoResize }}
+const maxRows = {{ maxRows }}
+const inputValue = state({{ value }})
+
+function resizeTextarea(el) {
+  if (!autoResize) return
+  el.style.height = 'auto'
+  const scrollHeight = el.scrollHeight
+  const lineHeight = Number.parseInt(window.getComputedStyle(el).lineHeight) || 20
+  const maxHeight = lineHeight * maxRows
+  el.style.height = `${Math.min(scrollHeight, maxHeight)}px`
+  el.style.overflowY = scrollHeight > maxHeight ? 'auto' : 'hidden'
+}
+
+function onInput(event) {
+  inputValue.set(event.target.value)
+  resizeTextarea(event.target)
+  emit('input', inputValue())
+}
+
+onMount(() => {
+  if (autoResize) {
+    const el = document.getElementById('textarea-input')
+    if (el) resizeTextarea(el)
+  }
+})
+
+const charCount = derived(() => `${inputValue().length} / {{ maxLength || 0 }}`)
+
+defineExpose({ value: inputValue })
+</script>
+
 <div class="w-full">
   @if(label)
     <label for="textarea-input" class="{{ labelClasses }}">
@@ -57,12 +80,12 @@ export const helperClasses = `mt-2 text-sm ${error ? 'text-red-600 dark:text-red
     class="{{ textareaClasses }}"
     rows="{{ rows }}"
     placeholder="{{ placeholder }}"
-    disabled="{{ disabled }}"
-    readonly="{{ readonly }}"
-    required="{{ required }}"
+    @if(disabled)disabled@endif
+    @if(readonly)readonly@endif
+    @if(required)required@endif
     @if(maxLength)maxlength="{{ maxLength }}"@endif
-    oninput="handleInput(event)"
-    aria-invalid="{{ error ? 'true' : 'false' }}"
+    @input="onInput($event)"
+    :aria-invalid="{{ error ? 'true' : 'false' }}"
     @if(helperText)aria-describedby="helper-text"@endif
   >{{ value }}</textarea>
 
@@ -77,43 +100,8 @@ export const helperClasses = `mt-2 text-sm ${error ? 'text-red-600 dark:text-red
       @endif
 
       @if(showCount && maxLength)
-        <p class="text-sm text-gray-500 dark:text-gray-400">
-          {{ value.length }} / {{ maxLength }}
-        </p>
+        <p class="text-sm text-gray-500 dark:text-gray-400" x-text="charCount()"></p>
       @endif
     </div>
   @endif
 </div>
-
-<script>
-function handleInput(event) {
-  const textarea = event.target
-  const newValue = textarea.value
-
-  if (autoResize && typeof window !== 'undefined') {
-    // Auto-resize functionality
-    textarea.style.height = 'auto'
-    const scrollHeight = textarea.scrollHeight
-    const lineHeight = parseInt(window.getComputedStyle(textarea).lineHeight)
-    const maxHeight = lineHeight * maxRows
-
-    textarea.style.height = Math.min(scrollHeight, maxHeight) + 'px'
-    textarea.style.overflowY = scrollHeight > maxHeight ? 'auto' : 'hidden'
-  }
-
-  if (onChange) {
-    onChange(newValue)
-  }
-}
-
-// Initialize auto-resize on mount
-if (autoResize && typeof window !== 'undefined') {
-  window.addEventListener('DOMContentLoaded', () => {
-    const textarea = document.getElementById('textarea-input')
-    if (textarea && value) {
-      // Trigger initial resize
-      textarea.dispatchEvent(new Event('input'))
-    }
-  })
-}
-</script>