@stacksjs/components 0.2.35 → 0.2.54

package/src/ui/input/SearchInput.stx

@@ -1,7 +1,5 @@
 <script server>
 export const value = $props.value || ''
-export const onChange = $props.onChange || (() => {})
-export const onSearch = $props.onSearch || (() => {})
 export const placeholder = $props.placeholder || 'Search...'
 export const disabled = $props.disabled || false
 export const size = $props.size || 'md'
@@ -11,53 +9,36 @@ export const helperText = $props.helperText || ''
 export const loading = $props.loading || false
 export const className = $props.className || ''
 
-// Search icon SVG
-const searchIcon = '<svg fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg>'
-
-// Loading spinner SVG
-const spinnerIcon = '<svg class="animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>'
-
-export const rightIcon = loading ? spinnerIcon : undefined
+export const searchIcon = '<svg fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg>'
+export const spinnerIcon = '<svg class="animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>'
+export const rightIcon = loading ? spinnerIcon : ''
 </script>
 
-@component('TextInput', {
-  value,
-  onChange,
-  placeholder,
-  disabled,
-  size,
-  error,
-  label,
-  helperText,
-  leftIcon: searchIcon,
-  rightIcon,
-  clearable: !loading,
-  className,
-  inputClassName: 'pr-20'
-})
-@endcomponent
-
-<script>
-// Debounce search to avoid excessive calls
+<script client>
+const emit = defineEmits()
 let searchTimeout = null
 
-function handleSearchInput(newValue) {
-  if (onChange) {
-    onChange(newValue)
-  }
-
-  // Debounce the onSearch callback
-  if (searchTimeout) {
-    clearTimeout(searchTimeout)
-  }
-
-  searchTimeout = setTimeout(() => {
-    if (onSearch) {
-      onSearch(newValue)
-    }
-  }, 300) // 300ms debounce
+function onSearchInput(event) {
+  const target = event.target
+  const value = target?.value ?? event.detail
+  if (searchTimeout) clearTimeout(searchTimeout)
+  searchTimeout = setTimeout(() => emit('search', value), 300)
 }
-
-// Expose enhanced onChange handler
-export const enhancedOnChange = handleSearchInput
 </script>
+
+<div @input="onSearchInput($event)">
+  <TextInput
+    :value="value"
+    :placeholder="placeholder"
+    :disabled="disabled"
+    :size="size"
+    :error="error"
+    :label="label"
+    :helperText="helperText"
+    :leftIcon="searchIcon"
+    :rightIcon="rightIcon"
+    :clearable="!loading"
+    :className="className"
+    inputClassName="pr-20"
+  />
+</div>

package/src/ui/input/TextInput.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
@@ -17,45 +16,51 @@ export const showCount = $props.showCount || false
 export const className = $props.className || ''
 export const inputClassName = $props.inputClassName || ''
 
-// Size classes
-const sizeClasses = {
-  sm: 'px-3 py-1.5 text-sm h-8',
-  md: 'px-4 py-2 text-base h-10',
-  lg: 'px-5 py-3 text-lg h-12',
-}
-
-// Icon size classes
-const iconSizeClasses = {
-  sm: 'h-4 w-4',
-  md: 'h-5 w-5',
-  lg: 'h-6 w-6',
-}
+const sizeClasses = { sm: 'px-3 py-1.5 text-sm h-8', md: 'px-4 py-2 text-base h-10', lg: 'px-5 py-3 text-lg h-12' }
+const iconSizeClasses = { sm: 'h-4 w-4', md: 'h-5 w-5', lg: 'h-6 w-6' }
 
-// Base and state classes
 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 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
     ? 'bg-gray-50 dark:bg-gray-800 cursor-default'
     : 'bg-white dark:bg-blue-gray-700'
-
 const paddingClasses = leftIcon ? 'pl-10' : rightIcon || clearable ? 'pr-10' : ''
 
 export const inputClasses = `${baseClasses} ${sizeClasses[size]} ${stateClasses} ${disabledClasses} ${paddingClasses} ${inputClassName}`.trim()
 export const labelClasses = `block text-sm font-medium leading-6 mb-2 ${error ? 'text-red-600 dark:text-red-400' : 'text-gray-900 dark:text-gray-100'}`.trim()
 export const helperClasses = `mt-2 text-sm ${error ? 'text-red-600 dark:text-red-400' : 'text-gray-500 dark:text-gray-400'}`.trim()
 export const iconClasses = iconSizeClasses[size]
-export const hasValue = value && value.length > 0
+export const inputId = `input-${label}`
+</script>
+
+<script client>
+const emit = defineEmits()
+const inputValue = state({{ value }})
+
+function onInput(event) {
+  inputValue.set(event.target.value)
+  emit('input', inputValue())
+}
+
+function onClear() {
+  inputValue.set('')
+  emit('input', '')
+  emit('clear')
+}
+
+const hasValue = derived(() => inputValue().length > 0)
+const charCount = derived(() => `${inputValue().length} / {{ maxLength || 0 }}`)
+
+defineExpose({ value: inputValue, clear: onClear })
 </script>
 
 <div class="w-full {{ className }}">
   @if(label)
-    <label for="input-{{ label }}" class="{{ labelClasses }}">
+    <label for="{{ inputId }}" class="{{ labelClasses }}">
       {{ label }}
       @if(required)
         <span class="text-red-500 ml-1">*</span>
@@ -65,33 +70,31 @@ export const hasValue = value && value.length > 0
 
   <div class="relative">
     @if(leftIcon)
-      <!-- Left icon -->
       <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
-        <span class="{{ iconClasses }} text-gray-400 dark:text-gray-500" innerHTML="{!! leftIcon !!}"></span>
+        <span class="{{ iconClasses }} text-gray-400 dark:text-gray-500">{!! leftIcon !!}</span>
       </div>
     @endif
 
     <input
       type="text"
-      id="input-{{ label }}"
+      id="{{ inputId }}"
       class="{{ inputClasses }}"
-      value="{{ value }}"
+      :value="inputValue()"
       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
     />
 
-    @if(clearable && hasValue && !disabled && !readonly)
-      <!-- Clear button -->
-      <div class="absolute inset-y-0 right-0 flex items-center pr-3">
+    @if(clearable)
+      <div :show="hasValue() && !{{ disabled }} && !{{ readonly }}" class="absolute inset-y-0 right-0 flex items-center pr-3">
         <button
           type="button"
-          @click="handleClear()"
+          @click="onClear()"
           class="text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 focus:outline-none"
           aria-label="Clear input"
         >
@@ -100,13 +103,11 @@ export const hasValue = value && value.length > 0
           </svg>
         </button>
       </div>
-    @else
-      @if(rightIcon && !clearable)
-        <!-- Right icon -->
-        <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
-          <span class="{{ iconClasses }} text-gray-400 dark:text-gray-500" innerHTML="{!! rightIcon !!}"></span>
-        </div>
-      @endif
+    @endif
+    @if(rightIcon && !clearable)
+      <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+        <span class="{{ iconClasses }} text-gray-400 dark:text-gray-500">{!! rightIcon !!}</span>
+      </div>
     @endif
   </div>
 
@@ -121,26 +122,8 @@ export const hasValue = value && value.length > 0
       @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 newValue = event.target.value
-
-  if (onChange) {
-    onChange(newValue)
-  }
-}
-
-function handleClear() {
-  if (onChange) {
-    onChange('')
-  }
-}
-</script>

package/src/ui/listbox/Listbox.stx

@@ -1,14 +1,101 @@
 <script server>
 export const value = $props.value
-export const onChange = $props.onChange
 export const multiple = $props.multiple || false
 export const className = $props.className || ''
 export const as = $props.as || 'div'
 
 const baseClasses = 'relative'
-const listboxClasses = `${baseClasses} ${className}`.trim()
+export const listboxClasses = `${baseClasses} ${className}`.trim()
+export const listboxInstanceId = `stx-lb-${Math.random().toString(36).slice(2, 11)}`
 </script>
 
-<component :is="{{ as }}" class="{{ listboxClasses }}">
-  <slot :value="value" :onChange="onChange" :multiple="multiple" />
+<script client>
+const emit = defineEmits()
+const listboxInstanceId = {{ listboxInstanceId }}
+const multiple = {{ multiple }}
+const initialValue = {{ value === undefined ? 'null' : value }}
+
+const isOpen = state(false)
+const selected = state(initialValue)
+let rootEl = null
+let outsideHandler = null
+
+function isSelectedValue(v) {
+  const cur = selected()
+  if (multiple && Array.isArray(cur)) return cur.includes(v)
+  return cur === v
+}
+
+function selectValue(v) {
+  if (multiple) {
+    const cur = Array.isArray(selected()) ? selected() : []
+    selected.set(cur.includes(v) ? cur.filter(x => x !== v) : [...cur, v])
+  }
+  else {
+    selected.set(v)
+    isOpen.set(false)
+  }
+  syncOptionStates()
+  emit('change', selected())
+}
+
+function syncOptionStates() {
+  if (!rootEl) return
+  const options = rootEl.querySelectorAll('[data-stx-listbox-option]')
+  for (const opt of options) {
+    const raw = opt.dataset.optionValue
+    let v
+    try { v = JSON.parse(raw ?? 'null') }
+    catch { v = raw }
+    const sel = isSelectedValue(v)
+    opt.setAttribute('aria-selected', sel ? 'true' : 'false')
+    opt.setAttribute('data-selected', sel ? 'true' : 'false')
+  }
+}
+
+function open() { if (!isOpen()) { isOpen.set(true); emit('change', selected()) } }
+function close() { if (isOpen()) { isOpen.set(false) } }
+function toggle() { isOpen() ? close() : open() }
+
+function onToggle(event) { event.stopPropagation(); toggle() }
+function onSelect(event) {
+  event.stopPropagation()
+  selectValue(event.detail)
+}
+
+onMount(() => {
+  rootEl = document.querySelector(`[data-listbox-id="${listboxInstanceId}"]`)
+  syncOptionStates()
+  outsideHandler = (event) => {
+    if (!isOpen()) return
+    if (rootEl && !rootEl.contains(event.target)) close()
+  }
+  document.addEventListener('click', outsideHandler, true)
+})
+
+onDestroy(() => {
+  if (outsideHandler) document.removeEventListener('click', outsideHandler, true)
+})
+
+const dataState = derived(() => isOpen() ? 'open' : 'closed')
+
+defineExpose({ isOpen, selected, toggle, open, close, selectValue })
+</script>
+
+<component
+  :is="{{ as }}"
+  class="{{ listboxClasses }}"
+  data-stx-listbox
+  data-listbox-id="{{ listboxInstanceId }}"
+  :data-state="dataState()"
+  @stx:listbox-toggle="onToggle($event)"
+  @stx:listbox-select="onSelect($event)"
+>
+  <slot />
 </component>
+
+<style>
+[data-stx-listbox][data-state="closed"] [data-stx-listbox-options] {
+  display: none;
+}
+</style>

package/src/ui/listbox/ListboxButton.stx

@@ -5,13 +5,24 @@ export const disabled = $props.disabled || false
 
 const baseClasses = 'relative w-full cursor-pointer rounded-lg bg-white dark:bg-neutral-800 py-2 pl-3 pr-10 text-left shadow-md focus:outline-none focus-visible:border-blue-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-blue-300'
 const disabledClasses = disabled ? 'opacity-50 cursor-not-allowed' : ''
-const buttonClasses = `${baseClasses} ${disabledClasses} ${className}`.trim()
+export const buttonClasses = `${baseClasses} ${disabledClasses} ${className}`.trim()
+</script>
+
+<script client>
+const isDisabled = {{ disabled }}
+
+function onClick(event) {
+  if (isDisabled) return
+  event.currentTarget.dispatchEvent(new CustomEvent('stx:listbox-toggle', { bubbles: true }))
+}
 </script>
 
 <component
   :is="{{ as }}"
   class="{{ buttonClasses }}"
+  data-stx-listbox-button
   @if(disabled)disabled aria-disabled="true"@endif
+  @click="onClick($event)"
 >
   <slot />
 </component>

package/src/ui/listbox/ListboxOption.stx

@@ -3,55 +3,47 @@ export const value = $props.value
 export const disabled = $props.disabled || false
 export const className = $props.className || ''
 export const as = $props.as || 'li'
-export const currentValue = $props.currentValue
-export const onChange = $props.onChange
 
-export let active = false
-export const selected = Array.isArray(currentValue)
-  ? currentValue.includes(value)
-  : currentValue === value
-
-const baseClasses = 'relative cursor-pointer select-none py-2 pl-10 pr-4'
-const stateClasses = active
-  ? 'bg-blue-100 text-blue-900 dark:bg-blue-900 dark:text-blue-100'
-  : 'text-neutral-900 dark:text-neutral-100'
-const disabledClasses = disabled
-  ? 'opacity-50 cursor-not-allowed'
-  : ''
-
-const optionClasses = `${baseClasses} ${stateClasses} ${disabledClasses} ${className}`.trim()
-
-export function handleClick() {
-  if (disabled) return
-  onChange?.(value)
-}
+const baseClasses = 'relative cursor-pointer select-none py-2 pl-10 pr-4 text-neutral-900 dark:text-neutral-100 hover:bg-blue-100 dark:hover:bg-blue-900'
+const disabledClasses = disabled ? 'opacity-50 cursor-not-allowed' : ''
+export const optionClasses = `${baseClasses} ${disabledClasses} ${className}`.trim()
+export const valueJson = JSON.stringify(value === undefined ? null : value)
+</script>
 
-export function handleMouseEnter() {
-  if (!disabled) active = true
-}
+<script client>
+const isDisabled = {{ disabled }}
+const optionValue = {{ value === undefined ? 'null' : value }}
 
-export function handleMouseLeave() {
-  active = false
+function onClick(event) {
+  if (isDisabled) return
+  event.currentTarget.dispatchEvent(
+    new CustomEvent('stx:listbox-select', { bubbles: true, detail: optionValue }),
+  )
 }
 </script>
 
 <component
   :is="{{ as }}"
   class="{{ optionClasses }}"
+  data-stx-listbox-option
+  data-option-value="{{ valueJson }}"
   role="option"
-  aria-selected="{{ selected ? 'true' : 'false' }}"
+  aria-selected="false"
   @if(disabled)aria-disabled="true"@endif
-  @click="handleClick"
-  @mouseenter="handleMouseEnter"
-  @mouseleave="handleMouseLeave"
+  @click="onClick($event)"
 >
-  @if(selected)
-    <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-blue-600 dark:text-blue-400">
-      <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-        <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
-      </svg>
-    </span>
-  @endif
+  <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-blue-600 dark:text-blue-400" data-stx-listbox-check>
+    <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+      <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
+    </svg>
+  </span>
 
-  <slot :active="active" :selected="selected" :disabled="disabled" />
+  <slot :disabled="disabled" />
 </component>
+
+<style>
+[data-stx-listbox-option][data-selected="false"] [data-stx-listbox-check],
+[data-stx-listbox-option]:not([data-selected]) [data-stx-listbox-check] {
+  display: none;
+}
+</style>

package/src/ui/listbox/ListboxOptions.stx

@@ -1,15 +1,15 @@
 <script server>
 export const className = $props.className || ''
 export const as = $props.as || 'ul'
-export const static_ = $props.static || false
 
 const baseClasses = 'absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white dark:bg-neutral-800 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none'
-const optionsClasses = `${baseClasses} ${className}`.trim()
+export const optionsClasses = `${baseClasses} ${className}`.trim()
 </script>
 
 <component
   :is="{{ as }}"
   class="{{ optionsClasses }}"
+  data-stx-listbox-options
   role="listbox"
 >
   <slot />