@stacksjs/components 0.2.27 → 0.2.53

package/dist/Dropdown-vvhemtc0.stx

@@ -0,0 +1,82 @@
+<script server>
+export const className = $props.className || ''
+export const as = $props.as || 'div'
+
+const baseClasses = 'relative inline-block text-left'
+export const dropdownClasses = `${baseClasses} ${className}`.trim()
+export const dropdownInstanceId = `stx-dd-${Math.random().toString(36).slice(2, 11)}`
+</script>
+
+<script client>
+const emit = defineEmits()
+const dropdownInstanceId = {{ dropdownInstanceId }}
+const isOpen = state(false)
+let rootEl = null
+let outsideHandler = null
+
+function toggle() {
+  isOpen.set(!isOpen())
+  emit('change', isOpen())
+}
+
+function open() {
+  if (isOpen()) return
+  isOpen.set(true)
+  emit('change', true)
+}
+
+function close() {
+  if (!isOpen()) return
+  isOpen.set(false)
+  emit('change', false)
+}
+
+function onItemSelect(event) {
+  event.stopPropagation()
+  emit('select', event.detail)
+  close()
+}
+
+function onToggle(event) { event.stopPropagation(); toggle() }
+function onOpen(event) { event.stopPropagation(); open() }
+function onClose(event) { event.stopPropagation(); close() }
+
+onMount(() => {
+  rootEl = document.querySelector(`[data-dropdown-id="${dropdownInstanceId}"]`)
+  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')
+const dataExpanded = derived(() => isOpen() ? 'true' : 'false')
+
+defineExpose({ isOpen, toggle, open, close })
+</script>
+
+<component
+  :is="{{ as }}"
+  class="{{ dropdownClasses }}"
+  data-stx-dropdown
+  data-dropdown-id="{{ dropdownInstanceId }}"
+  :data-state="dataState()"
+  :data-expanded="dataExpanded()"
+  @stx:dropdown-toggle="onToggle($event)"
+  @stx:dropdown-open="onOpen($event)"
+  @stx:dropdown-close="onClose($event)"
+  @stx:dropdown-select="onItemSelect($event)"
+>
+  <slot />
+</component>
+
+<style>
+[data-stx-dropdown][data-state="closed"] [data-stx-dropdown-items] {
+  display: none;
+}
+</style>

package/dist/{DropdownButton-9w8zkfwj.stx → DropdownButton-wcz67dxy.stx}

@@ -2,22 +2,28 @@
 export const className = $props.className || ''
 export const as = $props.as || 'button'
 export const disabled = $props.disabled || false
-export const onClick = $props.onClick
 
 const baseClasses = 'inline-flex justify-center items-center rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75'
-const buttonClasses = `${baseClasses} ${className}`.trim()
+export const buttonClasses = `${baseClasses} ${className}`.trim()
+</script>
+
+<script client>
+const emit = defineEmits()
+const isDisabled = {{ disabled }}
 
-export function handleClick(e) {
-  if (disabled) return
-  onClick?.(e)
+function onClick(event) {
+  if (isDisabled) return
+  emit('click', event)
+  event.currentTarget.dispatchEvent(new CustomEvent('stx:dropdown-toggle', { bubbles: true }))
 }
 </script>
 
 <component
   :is="{{ as }}"
   class="{{ buttonClasses }}"
+  data-stx-dropdown-button
   @if(disabled)disabled aria-disabled="true"@endif
-  @click="handleClick"
+  @click="onClick($event)"
 >
   <slot />
 </component>

package/dist/DropdownItem-c7rz08e5.stx

@@ -0,0 +1,35 @@
+<script server>
+export const className = $props.className || ''
+export const as = $props.as || 'div'
+export const disabled = $props.disabled || false
+export const value = $props.value
+
+const baseClasses = 'group flex w-full items-center px-2 py-2 text-sm transition-colors text-neutral-900 dark:text-neutral-100 hover:bg-blue-500 hover:text-white dark:hover:bg-blue-600'
+const disabledClasses = disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'
+export const itemClasses = `${baseClasses} ${disabledClasses} ${className}`.trim()
+</script>
+
+<script client>
+const emit = defineEmits()
+const isDisabled = {{ disabled }}
+const itemValue = {{ value === undefined ? 'null' : value }}
+
+function onClick(event) {
+  if (isDisabled) return
+  emit('click', event)
+  event.currentTarget.dispatchEvent(
+    new CustomEvent('stx:dropdown-select', { bubbles: true, detail: itemValue }),
+  )
+}
+</script>
+
+<component
+  :is="{{ as }}"
+  class="{{ itemClasses }}"
+  data-stx-dropdown-item
+  role="menuitem"
+  @if(disabled)aria-disabled="true"@endif
+  @click="onClick($event)"
+>
+  <slot :disabled="disabled" />
+</component>

package/dist/{DropdownItems-aygjpxkx.stx → DropdownItems-1sxnd5qn.stx}

@@ -1,15 +1,15 @@
 <script server>
 export const className = $props.className || ''
 export const as = $props.as || 'div'
-export const static_ = $props.static || false
 
 const baseClasses = 'absolute z-10 mt-2 origin-top-right divide-y divide-neutral-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-neutral-800 dark:divide-neutral-700 dark:ring-neutral-600'
-const itemsClasses = `${baseClasses} ${className}`.trim()
+export const itemsClasses = `${baseClasses} ${className}`.trim()
 </script>
 
 <component
   :is="{{ as }}"
   class="{{ itemsClasses }}"
+  data-stx-dropdown-items
   role="menu"
   aria-orientation="vertical"
   tabindex="-1"

package/dist/EmailInput-vak3kkmk.stx

@@ -0,0 +1,30 @@
+<script server>
+export const value = $props.value || ''
+export const placeholder = $props.placeholder || 'Enter your email'
+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 className = $props.className || ''
+
+export const emailIcon = '<svg fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /></svg>'
+</script>
+
+<TextInput
+  :value="value"
+  :placeholder="placeholder"
+  :disabled="disabled"
+  :readonly="readonly"
+  :size="size"
+  :error="error"
+  :label="label"
+  :helperText="helperText"
+  :required="required"
+  :leftIcon="emailIcon"
+  :clearable="true"
+  :className="className"
+  inputClassName="font-mono"
+/>

package/dist/Form-mas630hy.stx

@@ -0,0 +1,95 @@
+<script server>
+export const action = $props.action || ''
+export const method = $props.method || 'POST'
+export const validationSchema = $props.validationSchema || {}
+export const className = $props.className || ''
+
+export const formClasses = `space-y-6 ${className}`.trim()
+export const errorClasses = `mt-1 text-sm text-red-600 dark:text-red-400`.trim()
+</script>
+
+<script client>
+const emit = defineEmits()
+const validationSchema = {{ validationSchema }}
+
+const errors = state({})
+const isSubmitting = state(false)
+const submitCount = state(0)
+
+function validateField(name, value, allValues) {
+  const schema = validationSchema[name]
+  if (!schema) return null
+  if (schema.required && !value) {
+    return schema.requiredMessage || `${name} is required`
+  }
+  if (schema.minLength && String(value).length < schema.minLength) {
+    return schema.minLengthMessage || `${name} must be at least ${schema.minLength} characters`
+  }
+  if (schema.maxLength && String(value).length > schema.maxLength) {
+    return schema.maxLengthMessage || `${name} must be at most ${schema.maxLength} characters`
+  }
+  if (schema.pattern && !new RegExp(schema.pattern).test(value)) {
+    return schema.patternMessage || `${name} is invalid`
+  }
+  return null
+}
+
+function validateForm(values) {
+  const next = {}
+  let valid = true
+  for (const name of Object.keys(validationSchema)) {
+    const err = validateField(name, values[name], values)
+    if (err) {
+      next[name] = err
+      valid = false
+    }
+  }
+  errors.set(next)
+  return valid
+}
+
+async function onSubmit(event) {
+  event.preventDefault()
+  submitCount.set(submitCount() + 1)
+
+  const formData = new FormData(event.target)
+  const values = {}
+  for (const [k, v] of formData.entries()) values[k] = v
+
+  if (!validateForm(values)) {
+    emit('error', errors())
+    return
+  }
+
+  isSubmitting.set(true)
+  try {
+    emit('submit', values)
+  }
+  finally {
+    isSubmitting.set(false)
+  }
+}
+
+function setErrors(next) {
+  errors.set({ ...errors(), ...next })
+}
+
+function reset(form) {
+  errors.set({})
+  isSubmitting.set(false)
+  submitCount.set(0)
+  if (form?.reset) form.reset()
+}
+
+defineExpose({ errors, isSubmitting, submitCount, setErrors, reset, validateForm })
+</script>
+
+<form
+  class="{{ formClasses }}"
+  @if(action)action="{{ action }}"@endif
+  method="{{ method }}"
+  @submit="onSubmit($event)"
+  novalidate
+>
+  <slot />
+</form>

package/dist/{Image-jhkm6w1f.stx → Image-yhxcvgzs.stx}

@@ -10,18 +10,14 @@ export const height = $props.height
 export const lazy = $props.lazy ?? true
 export const placeholder = $props.placeholder || 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300"%3E%3Crect fill="%23e5e7eb" width="400" height="300"/%3E%3C/svg%3E'
 export const blurDataURL = $props.blurDataURL || ''
-export const onLoad = $props.onLoad
-export const onError = $props.onError
 export const aspectRatio = $props.aspectRatio
 export const objectFit = $props.objectFit || 'cover'
 export const rounded = $props.rounded ?? false
 export const zoomOnHover = $props.zoomOnHover || false
 export const className = $props.className || ''
 
-// Has WebP support
-export const hasWebP = webpSrc || webpSrcSet
+export const hasWebP = !!(webpSrc || webpSrcSet)
 
-// Object fit classes
 const objectFitClasses = {
   contain: 'object-contain',
   cover: 'object-cover',
@@ -30,23 +26,69 @@ const objectFitClasses = {
   'scale-down': 'object-scale-down',
 }
 
-// Rounded classes
 const roundedClass = rounded === true ? 'rounded-lg' : rounded === 'full' ? 'rounded-full' : rounded ? `rounded-${rounded}` : ''
-
 const zoomClasses = zoomOnHover ? 'transform hover:scale-110 transition-transform duration-300 ease-in-out cursor-zoom-in' : ''
 
 export const containerClasses = `relative overflow-hidden ${roundedClass} ${className}`.trim()
 export const imageClasses = `w-full h-full transition-opacity duration-300 ${objectFitClasses[objectFit]} ${zoomClasses}`.trim()
-export const placeholderClasses = `absolute inset-0 bg-gray-200 dark:bg-gray-700 ${roundedClass}`.trim()
 export const blurPlaceholderClasses = `absolute inset-0 ${roundedClass} filter blur-lg scale-110`.trim()
+export const containerStyle = aspectRatio ? `padding-bottom: ${(1 / aspectRatio) * 100}%` : ''
+</script>
+
+<script client>
+const emit = defineEmits()
+const lazy = {{ lazy }}
+const realSrc = {{ src }}
+const realSrcSet = {{ srcSet }}
+const errorPlaceholder = 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300"%3E%3Crect fill="%23e5e7eb" width="400" height="300"/%3E%3Ctext x="50%25" y="50%25" fill="%239ca3af" font-size="16" text-anchor="middle" dominant-baseline="middle"%3EImage not found%3C/text%3E%3C/svg%3E'
+
+function onImageLoad(event) {
+  const img = event.target
+  img.classList.remove('opacity-0')
+  img.classList.add('opacity-100')
+  emit('load', event)
+}
 
-// Generate aspect ratio padding if provided
-export const paddingBottom = aspectRatio ? `${(1 / aspectRatio) * 100}%` : undefined
+function onImageError(event) {
+  const img = event.target
+  img.src = errorPlaceholder
+  emit('error', event)
+}
+
+onMount(() => {
+  if (!lazy) return
+  if (typeof IntersectionObserver === 'undefined') return
+  const lazyImages = document.querySelectorAll('.lazy-image:not([data-stx-img-loaded])')
+  const observer = new IntersectionObserver((entries, obs) => {
+    for (const entry of entries) {
+      if (!entry.isIntersecting) continue
+      const img = entry.target
+      img.setAttribute('data-stx-img-loaded', '1')
+      const dataSrc = img.getAttribute('data-src')
+      const dataSrcSet = img.getAttribute('data-srcset')
+      if (!dataSrc) continue
+      const probe = new Image()
+      probe.onload = () => {
+        img.src = dataSrc
+        if (dataSrcSet) img.srcset = dataSrcSet
+        img.classList.remove('opacity-0')
+        img.classList.add('opacity-100')
+        obs.unobserve(img)
+      }
+      probe.onerror = () => {
+        onImageError({ target: img })
+        obs.unobserve(img)
+      }
+      probe.src = dataSrc
+      if (dataSrcSet) probe.srcset = dataSrcSet
+    }
+  }, { rootMargin: '50px' })
+  for (const img of lazyImages) observer.observe(img)
+})
 </script>
 
-<div class="{{ containerClasses }}" style="{{ paddingBottom ? `padding-bottom: ${paddingBottom}` : '' }}">
+<div class="{{ containerClasses }}" style="{{ containerStyle }}">
   @if(blurDataURL)
-    <!-- Blur placeholder -->
     <img
       src="{{ blurDataURL }}"
       alt=""
@@ -56,17 +98,13 @@ export const paddingBottom = aspectRatio ? `${(1 / aspectRatio) * 100}%` : undef
   @endif
 
   @if(hasWebP)
-    <!-- Picture element with WebP support -->
     <picture>
-      @if(webpSrcSet || webpSrc)
-        <source
-          type="image/webp"
-          @if(webpSrcSet)srcset="{{ webpSrcSet }}"@endif
-          @if(webpSrc && !webpSrcSet)srcset="{{ webpSrc }}"@endif
-          @if(sizes)sizes="{{ sizes }}"@endif
-        />
-      @endif
-
+      <source
+        type="image/webp"
+        @if(webpSrcSet)srcset="{{ webpSrcSet }}"@endif
+        @if(webpSrc && !webpSrcSet)srcset="{{ webpSrc }}"@endif
+        @if(sizes)sizes="{{ sizes }}"@endif
+      />
       @if(lazy)
         <img
           src="{{ placeholder }}"
@@ -78,8 +116,8 @@ export const paddingBottom = aspectRatio ? `${(1 / aspectRatio) * 100}%` : undef
           width="{{ width }}"
           height="{{ height }}"
           loading="lazy"
-          onload="handleImageLoad(event)"
-          onerror="handleImageError(event)"
+          @load="onImageLoad($event)"
+          @error="onImageError($event)"
         />
       @else
         <img
@@ -90,13 +128,12 @@ export const paddingBottom = aspectRatio ? `${(1 / aspectRatio) * 100}%` : undef
           class="{{ imageClasses }}"
           width="{{ width }}"
           height="{{ height }}"
-          onload="handleImageLoad(event)"
-          onerror="handleImageError(event)"
+          @load="onImageLoad($event)"
+          @error="onImageError($event)"
         />
       @endif
     </picture>
   @else
-    <!-- Regular img element -->
     @if(lazy)
       <img
         src="{{ placeholder }}"
@@ -108,8 +145,8 @@ export const paddingBottom = aspectRatio ? `${(1 / aspectRatio) * 100}%` : undef
         width="{{ width }}"
         height="{{ height }}"
         loading="lazy"
-        onload="handleImageLoad(event)"
-        onerror="handleImageError(event)"
+        @load="onImageLoad($event)"
+        @error="onImageError($event)"
       />
     @else
       <img
@@ -120,78 +157,9 @@ export const paddingBottom = aspectRatio ? `${(1 / aspectRatio) * 100}%` : undef
         class="{{ imageClasses }}"
         width="{{ width }}"
         height="{{ height }}"
-        onload="handleImageLoad(event)"
-        onerror="handleImageError(event)"
+        @load="onImageLoad($event)"
+        @error="onImageError($event)"
       />
     @endif
   @endif
-
-  <!-- Loading skeleton -->
-  <div class="{{ placeholderClasses }} skeleton" style="display: none;">
-    <div class="animate-pulse w-full h-full bg-gray-300 dark:bg-gray-600"></div>
-  </div>
 </div>
-
-<script>
-// Intersection Observer for lazy loading
-if (lazy && typeof window !== 'undefined' && 'IntersectionObserver' in window) {
-  const lazyImages = document.querySelectorAll('.lazy-image')
-
-  const imageObserver = new IntersectionObserver((entries, observer) => {
-    entries.forEach(entry => {
-      if (entry.isIntersecting) {
-        const img = entry.target
-        const realSrc = img.getAttribute('data-src')
-        const realSrcSet = img.getAttribute('data-srcset')
-
-        if (realSrc) {
-          // Load the real image
-          const tempImg = new Image()
-          tempImg.onload = () => {
-            img.src = realSrc
-            if (realSrcSet) {
-              img.srcset = realSrcSet
-            }
-            img.classList.remove('opacity-0')
-            img.classList.add('opacity-100')
-            observer.unobserve(img)
-          }
-          tempImg.onerror = () => {
-            handleImageError({ target: img })
-            observer.unobserve(img)
-          }
-          tempImg.src = realSrc
-          if (realSrcSet) {
-            tempImg.srcset = realSrcSet
-          }
-        }
-      }
-    })
-  }, {
-    rootMargin: '50px', // Start loading 50px before entering viewport
-  })
-
-  lazyImages.forEach(img => imageObserver.observe(img))
-}
-
-function handleImageLoad(event) {
-  const img = event.target
-  img.classList.remove('opacity-0')
-  img.classList.add('opacity-100')
-
-  if (onLoad) {
-    onLoad(event)
-  }
-}
-
-function handleImageError(event) {
-  const img = event.target
-
-  // Show a broken image placeholder
-  img.src = 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300"%3E%3Crect fill="%23e5e7eb" width="400" height="300"/%3E%3Ctext x="50%25" y="50%25" fill="%239ca3af" font-size="16" text-anchor="middle" dominant-baseline="middle"%3EImage not found%3C/text%3E%3C/svg%3E'
-
-  if (onError) {
-    onError(event)
-  }
-}
-</script>

package/dist/Listbox-q49tnr90.stx

@@ -0,0 +1,101 @@
+<script server>
+export const value = $props.value
+export const multiple = $props.multiple || false
+export const className = $props.className || ''
+export const as = $props.as || 'div'
+
+const baseClasses = 'relative'
+export const listboxClasses = `${baseClasses} ${className}`.trim()
+export const listboxInstanceId = `stx-lb-${Math.random().toString(36).slice(2, 11)}`
+</script>
+
+<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/dist/{ListboxButton-spwx7513.stx → ListboxButton-keb8gm0q.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>