@stacksjs/components 0.2.3

package/src/ui/input/PasswordInput.stx

@@ -0,0 +1,155 @@
+<script>
+export const value = $props.value || ''
+export const onChange = $props.onChange || (() => {})
+export const placeholder = $props.placeholder || 'Enter your password'
+export const disabled = $props.disabled || false
+export const readonly = $props.readonly || false
+export const size = $props.size || 'md'
+export const error = $props.error || false
+export const label = $props.label || ''
+export const helperText = $props.helperText || ''
+export const required = $props.required || false
+export const showStrength = $props.showStrength || false
+export const className = $props.className || ''
+export const inputClassName = $props.inputClassName || ''
+
+// State
+let showPassword = false
+
+// 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',
+}
+
+// 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 pr-10'
+
+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'
+
+export const inputClasses = `${baseClasses} ${sizeClasses[size]} ${stateClasses} ${disabledClasses} ${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]
+
+// Password strength calculation
+function calculateStrength(password) {
+  if (!password) return 0
+  let strength = 0
+  if (password.length >= 8) strength += 25
+  if (password.length >= 12) strength += 25
+  if (/[a-z]/.test(password) && /[A-Z]/.test(password)) strength += 25
+  if (/\d/.test(password)) strength += 15
+  if (/[^a-zA-Z\d]/.test(password)) strength += 10
+  return Math.min(strength, 100)
+}
+
+export const strength = calculateStrength(value)
+export const strengthColor = strength < 40 ? 'bg-red-500' : strength < 70 ? 'bg-yellow-500' : 'bg-green-500'
+export const strengthText = strength < 40 ? 'Weak' : strength < 70 ? 'Medium' : 'Strong'
+</script>
+
+<div class="w-full {{ className }}">
+  @if(label)
+    <label for="password-input" class="{{ labelClasses }}">
+      {{ label }}
+      @if(required)
+        <span class="text-red-500 ml-1">*</span>
+      @endif
+    </label>
+  @endif
+
+  <div class="relative">
+    <input
+      type="{{ showPassword ? 'text' : 'password' }}"
+      id="password-input"
+      class="{{ inputClasses }}"
+      value="{{ value }}"
+      placeholder="{{ placeholder }}"
+      disabled="{{ disabled }}"
+      readonly="{{ readonly }}"
+      required="{{ required }}"
+      oninput="handleInput(event)"
+      aria-invalid="{{ error ? 'true' : 'false' }}"
+      @if(helperText)aria-describedby="helper-text"@endif
+    />
+
+    <!-- Toggle visibility button -->
+    <div class="absolute inset-y-0 right-0 flex items-center pr-3">
+      <button
+        type="button"
+        onclick="toggleVisibility()"
+        class="text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 focus:outline-none"
+        aria-label="{{ showPassword ? 'Hide password' : 'Show password' }}"
+      >
+        @if(showPassword)
+          <!-- Eye slash icon (hide) -->
+          <svg class="{{ iconClasses }}" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
+          </svg>
+        @else
+          <!-- Eye icon (show) -->
+          <svg class="{{ iconClasses }}" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+          </svg>
+        @endif
+      </button>
+    </div>
+  </div>
+
+  @if(showStrength && value.length > 0)
+    <!-- Password strength indicator -->
+    <div class="mt-2">
+      <div class="flex items-center justify-between mb-1">
+        <span class="text-xs text-gray-600 dark:text-gray-400">Password strength</span>
+        <span class="text-xs font-medium {{ strength < 40 ? 'text-red-600' : strength < 70 ? 'text-yellow-600' : 'text-green-600' }}">
+          {{ strengthText }}
+        </span>
+      </div>
+      <div class="w-full h-1.5 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
+        <div
+          class="{{ strengthColor }} h-full transition-all duration-300 rounded-full"
+          style="width: {{ strength }}%"
+        ></div>
+      </div>
+    </div>
+  @endif
+
+  @if(helperText)
+    <p id="helper-text" class="{{ helperClasses }}">
+      {{ helperText }}
+    </p>
+  @endif
+</div>
+
+<script>
+function handleInput(event) {
+  const newValue = event.target.value
+
+  if (onChange) {
+    onChange(newValue)
+  }
+}
+
+function toggleVisibility() {
+  showPassword = !showPassword
+  // Re-render would be handled by the framework
+}
+</script>

package/src/ui/input/SearchInput.stx

@@ -0,0 +1,63 @@
+<script>
+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'
+export const error = $props.error || false
+export const label = $props.label || ''
+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
+</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
+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
+}
+
+// Expose enhanced onChange handler
+export const enhancedOnChange = handleSearchInput
+</script>

package/src/ui/input/TextInput.stx

@@ -0,0 +1,146 @@
+<script>
+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
+export const size = $props.size || 'md'
+export const error = $props.error || false
+export const label = $props.label || ''
+export const helperText = $props.helperText || ''
+export const required = $props.required || false
+export const leftIcon = $props.leftIcon || ''
+export const rightIcon = $props.rightIcon || ''
+export const clearable = $props.clearable || false
+export const maxLength = $props.maxLength
+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',
+}
+
+// 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
+</script>
+
+<div class="w-full {{ className }}">
+  @if(label)
+    <label for="input-{{ label }}" class="{{ labelClasses }}">
+      {{ label }}
+      @if(required)
+        <span class="text-red-500 ml-1">*</span>
+      @endif
+    </label>
+  @endif
+
+  <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>
+      </div>
+    @endif
+
+    <input
+      type="text"
+      id="input-{{ label }}"
+      class="{{ inputClasses }}"
+      value="{{ value }}"
+      placeholder="{{ placeholder }}"
+      disabled="{{ disabled }}"
+      readonly="{{ readonly }}"
+      required="{{ required }}"
+      @if(maxLength)maxlength="{{ maxLength }}"@endif
+      oninput="handleInput(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">
+        <button
+          type="button"
+          onclick="handleClear()"
+          class="text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 focus:outline-none"
+          aria-label="Clear input"
+        >
+          <svg class="{{ iconClasses }}" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+          </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
+  </div>
+
+  @if(helperText || (showCount && maxLength))
+    <div class="flex items-center justify-between mt-2">
+      @if(helperText)
+        <p id="helper-text" class="{{ helperClasses }}">
+          {{ helperText }}
+        </p>
+      @else
+        <span></span>
+      @endif
+
+      @if(showCount && maxLength)
+        <p class="text-sm text-gray-500 dark:text-gray-400">
+          {{ value.length }} / {{ maxLength }}
+        </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/input/index.ts

@@ -0,0 +1,180 @@
+import type { PropSchema, ValidationResult } from '../../utils/prop-validation'
+import { createPropValidator, PropTypes } from '../../utils/prop-validation'
+
+export { default as EmailInput } from './EmailInput.stx'
+export { default as NumberInput } from './NumberInput.stx'
+export { default as PasswordInput } from './PasswordInput.stx'
+export { default as SearchInput } from './SearchInput.stx'
+export { default as TextInput } from './TextInput.stx'
+
+export interface BaseInputProps {
+  value?: string
+  onChange?: (value: string) => void
+  placeholder?: string
+  disabled?: boolean
+  readonly?: boolean
+  size?: 'sm' | 'md' | 'lg'
+  error?: boolean
+  label?: string
+  helperText?: string
+  required?: boolean
+  className?: string
+  inputClassName?: string
+}
+
+export interface TextInputProps extends BaseInputProps {
+  leftIcon?: string
+  rightIcon?: string
+  clearable?: boolean
+  maxLength?: number
+  showCount?: boolean
+}
+
+export interface EmailInputProps extends Omit<BaseInputProps, 'placeholder'> {
+  placeholder?: string
+}
+
+export interface PasswordInputProps extends Omit<BaseInputProps, 'placeholder'> {
+  placeholder?: string
+  showStrength?: boolean
+}
+
+export interface NumberInputProps extends BaseInputProps {
+  min?: number
+  max?: number
+  step?: number
+  showControls?: boolean
+}
+
+export interface SearchInputProps extends Omit<BaseInputProps, 'placeholder'> {
+  placeholder?: string
+  onSearch?: (value: string) => void
+  loading?: boolean
+}
+
+/**
+ * Base input prop validation schema
+ */
+const baseInputPropSchema: PropSchema = {
+  value: PropTypes.string,
+  onChange: PropTypes.func,
+  placeholder: PropTypes.string,
+  disabled: PropTypes.boolean,
+  readonly: PropTypes.boolean,
+  size: PropTypes.oneOf(['sm', 'md', 'lg']),
+  error: PropTypes.boolean,
+  label: PropTypes.string,
+  helperText: PropTypes.string,
+  required: PropTypes.boolean,
+  className: PropTypes.string,
+  inputClassName: PropTypes.string,
+}
+
+/**
+ * TextInput prop validation schema
+ */
+export const textInputPropSchema: PropSchema = {
+  value: PropTypes.string,
+  onChange: PropTypes.func,
+  placeholder: PropTypes.string,
+  disabled: PropTypes.boolean,
+  readonly: PropTypes.boolean,
+  size: PropTypes.oneOf(['sm', 'md', 'lg']),
+  error: PropTypes.boolean,
+  label: PropTypes.string,
+  helperText: PropTypes.string,
+  required: PropTypes.boolean,
+  className: PropTypes.string,
+  inputClassName: PropTypes.string,
+  leftIcon: PropTypes.string,
+  rightIcon: PropTypes.string,
+  clearable: PropTypes.boolean,
+  maxLength: PropTypes.number,
+  showCount: PropTypes.boolean,
+}
+
+/**
+ * NumberInput prop validation schema
+ */
+export const numberInputPropSchema: PropSchema = {
+  value: PropTypes.string,
+  onChange: PropTypes.func,
+  placeholder: PropTypes.string,
+  disabled: PropTypes.boolean,
+  readonly: PropTypes.boolean,
+  size: PropTypes.oneOf(['sm', 'md', 'lg']),
+  error: PropTypes.boolean,
+  label: PropTypes.string,
+  helperText: PropTypes.string,
+  required: PropTypes.boolean,
+  className: PropTypes.string,
+  inputClassName: PropTypes.string,
+  min: PropTypes.number,
+  max: PropTypes.number,
+  step: PropTypes.number,
+  showControls: PropTypes.boolean,
+}
+
+/**
+ * PasswordInput prop validation schema
+ */
+const passwordInputPropSchema: PropSchema = {
+  value: PropTypes.string,
+  onChange: PropTypes.func,
+  placeholder: PropTypes.string,
+  disabled: PropTypes.boolean,
+  readonly: PropTypes.boolean,
+  size: PropTypes.oneOf(['sm', 'md', 'lg']),
+  error: PropTypes.boolean,
+  label: PropTypes.string,
+  helperText: PropTypes.string,
+  required: PropTypes.boolean,
+  className: PropTypes.string,
+  inputClassName: PropTypes.string,
+  showStrength: PropTypes.boolean,
+}
+
+/**
+ * SearchInput prop validation schema
+ */
+const searchInputPropSchema: PropSchema = {
+  value: PropTypes.string,
+  onChange: PropTypes.func,
+  placeholder: PropTypes.string,
+  disabled: PropTypes.boolean,
+  readonly: PropTypes.boolean,
+  size: PropTypes.oneOf(['sm', 'md', 'lg']),
+  error: PropTypes.boolean,
+  label: PropTypes.string,
+  helperText: PropTypes.string,
+  required: PropTypes.boolean,
+  className: PropTypes.string,
+  inputClassName: PropTypes.string,
+  onSearch: PropTypes.func,
+  loading: PropTypes.boolean,
+}
+
+/**
+ * Validate TextInput component props
+ */
+export const validateTextInputProps: (props: Record<string, any>) => ValidationResult = createPropValidator('TextInput', textInputPropSchema)
+
+/**
+ * Validate EmailInput component props
+ */
+export const validateEmailInputProps: (props: Record<string, any>) => ValidationResult = createPropValidator('EmailInput', baseInputPropSchema)
+
+/**
+ * Validate PasswordInput component props
+ */
+export const validatePasswordInputProps: (props: Record<string, any>) => ValidationResult = createPropValidator('PasswordInput', passwordInputPropSchema)
+
+/**
+ * Validate NumberInput component props
+ */
+export const validateNumberInputProps: (props: Record<string, any>) => ValidationResult = createPropValidator('NumberInput', numberInputPropSchema)
+
+/**
+ * Validate SearchInput component props
+ */
+export const validateSearchInputProps: (props: Record<string, any>) => ValidationResult = createPropValidator('SearchInput', searchInputPropSchema)

package/src/ui/listbox/Listbox.stx

@@ -0,0 +1,14 @@
+<script>
+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()
+</script>
+
+<component :is="{{ as }}" class="{{ listboxClasses }}">
+  <slot :value="value" :onChange="onChange" :multiple="multiple" />
+</component>

package/src/ui/listbox/ListboxButton.stx

@@ -0,0 +1,17 @@
+<script>
+export const className = $props.className || ''
+export const as = $props.as || 'button'
+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()
+</script>
+
+<component
+  :is="{{ as }}"
+  class="{{ buttonClasses }}"
+  @if(disabled)disabled aria-disabled="true"@endif
+>
+  <slot />
+</component>

package/src/ui/listbox/ListboxLabel.stx

@@ -0,0 +1,11 @@
+<script>
+export const className = $props.className || ''
+export const as = $props.as || 'label'
+
+const baseClasses = 'block text-sm font-medium text-neutral-900 dark:text-white'
+const labelClasses = `${baseClasses} ${className}`.trim()
+</script>
+
+<component :is="{{ as }}" class="{{ labelClasses }}">
+  <slot />
+</component>

package/src/ui/listbox/ListboxOption.stx

@@ -0,0 +1,57 @@
+<script>
+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)
+}
+
+export function handleMouseEnter() {
+  if (!disabled) active = true
+}
+
+export function handleMouseLeave() {
+  active = false
+}
+</script>
+
+<component
+  :is="{{ as }}"
+  class="{{ optionClasses }}"
+  role="option"
+  aria-selected="{{ selected ? 'true' : 'false' }}"
+  @if(disabled)aria-disabled="true"@endif
+  @click="handleClick"
+  @mouseenter="handleMouseEnter"
+  @mouseleave="handleMouseLeave"
+>
+  @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
+
+  <slot :active="active" :selected="selected" :disabled="disabled" />
+</component>

package/src/ui/listbox/ListboxOptions.stx

@@ -0,0 +1,16 @@
+<script>
+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()
+</script>
+
+<component
+  :is="{{ as }}"
+  class="{{ optionsClasses }}"
+  role="listbox"
+>
+  <slot />
+</component>