@stacksjs/components 0.2.35 → 0.2.53

package/dist/{Checkbox-p3q3e3nf.stx → Checkbox-zgdmy3p5.stx}

@@ -1,6 +1,5 @@
 <script server>
 export const checked = $props.checked || false
-export const onChange = $props.onChange || (() => {})
 export const disabled = $props.disabled || false
 export const indeterminate = $props.indeterminate || false
 export const size = $props.size || 'md'
@@ -12,42 +11,55 @@ export const value = $props.value || ''
 export const name = $props.name || ''
 export const className = $props.className || ''
 
-// Size classes
-const sizeClasses = {
-  sm: 'h-4 w-4',
-  md: 'h-5 w-5',
-  lg: 'h-6 w-6',
-}
-
-// Base classes for checkbox
+const sizeClasses = { sm: 'h-4 w-4', md: 'h-5 w-5', lg: 'h-6 w-6' }
 const baseClasses = 'rounded border-gray-300 dark:border-gray-600 text-indigo-600 dark:text-indigo-500 focus:ring-indigo-600 dark:focus:ring-indigo-500 focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900 transition-colors'
-
-const stateClasses = error
-  ? 'border-red-300 dark:border-red-600 text-red-600 dark:text-red-500 focus:ring-red-500 dark:focus:ring-red-400'
-  : ''
-
-const disabledClasses = disabled
-  ? 'opacity-50 cursor-not-allowed'
-  : 'cursor-pointer'
+const stateClasses = error ? 'border-red-300 dark:border-red-600 text-red-600 dark:text-red-500 focus:ring-red-500 dark:focus:ring-red-400' : ''
+const disabledClasses = disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'
 
 export const checkboxClasses = `${baseClasses} ${sizeClasses[size]} ${stateClasses} ${disabledClasses}`.trim()
 export const labelClasses = `text-sm font-medium ${error ? 'text-red-600 dark:text-red-400' : 'text-gray-900 dark:text-gray-100'} ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`.trim()
 export const descriptionClasses = `text-sm ${error ? 'text-red-500 dark:text-red-400' : 'text-gray-500 dark:text-gray-400'}`.trim()
+export const inputId = `checkbox-${value || label}`
+</script>
+
+<script client>
+const emit = defineEmits()
+const isDisabled = {{ disabled }}
+const isIndeterminate = {{ indeterminate }}
+const isChecked = state({{ checked }})
+
+function onInputChange(event) {
+  if (isDisabled) {
+    event.target.checked = isChecked()
+    return
+  }
+  isChecked.set(event.target.checked)
+  emit('change', isChecked())
+}
+
+onMount(() => {
+  if (isIndeterminate) {
+    const el = document.getElementById({{ inputId }})
+    if (el) el.indeterminate = true
+  }
+})
+
+defineExpose({ isChecked })
 </script>
 
 <div class="relative flex items-start {{ className }}">
   <div class="flex h-6 items-center">
     <input
-      id="checkbox-{{ value || label }}"
+      id="{{ inputId }}"
       type="checkbox"
       name="{{ name }}"
       value="{{ value }}"
-      checked="{{ checked }}"
-      disabled="{{ disabled }}"
-      required="{{ required }}"
+      :checked="isChecked()"
+      @if(disabled)disabled@endif
+      @if(required)required@endif
       class="{{ checkboxClasses }}"
-      onchange="handleChange(event)"
-      aria-invalid="{{ error ? 'true' : 'false' }}"
+      @change="onInputChange($event)"
+      :aria-invalid="{{ error ? 'true' : 'false' }}"
       @if(description)aria-describedby="checkbox-description"@endif
     />
   </div>
@@ -55,7 +67,7 @@ export const descriptionClasses = `text-sm ${error ? 'text-red-500 dark:text-red
   @if(label || description)
     <div class="ml-3 text-sm leading-6">
       @if(label)
-        <label for="checkbox-{{ value || label }}" class="{{ labelClasses }}">
+        <label for="{{ inputId }}" class="{{ labelClasses }}">
           {{ label }}
           @if(required)
             <span class="text-red-500 ml-1">*</span>
@@ -70,23 +82,3 @@ export const descriptionClasses = `text-sm ${error ? 'text-red-500 dark:text-red
     </div>
   @endif
 </div>
-
-<script>
-function handleChange(event) {
-  const isChecked = event.target.checked
-
-  if (!disabled && onChange) {
-    onChange(isChecked)
-  }
-}
-
-// Handle indeterminate state
-if (indeterminate && typeof window !== 'undefined') {
-  window.addEventListener('DOMContentLoaded', () => {
-    const checkbox = document.getElementById('checkbox-{{ value || label }}')
-    if (checkbox) {
-      checkbox.indeterminate = true
-    }
-  })
-}
-</script>

package/dist/{Checkout-e4037tyy.stx → Checkout-agt0ngpw.stx}

@@ -1,36 +1,28 @@
 <script server>
 export const products = $props.products || []
-export const redirectUrl = $props.redirectUrl || ''
 export const mode = $props.mode || 'subscription'
 export const stripePublicKey = $props.stripePublicKey || ''
 export const apiUrl = $props.apiUrl || ''
-export const onSubmit = $props.onSubmit
-export const onRemoveProduct = $props.onRemoveProduct
 export const shipping = $props.shipping || 0
 export const taxes = $props.taxes || 0
 export const className = $props.className || ''
 
-// For future expansion - one-time payment support
 export const isSubscription = mode === 'subscription'
 export const isOneTime = mode === 'one-time'
 </script>
 
 @if(isSubscription)
-  @component('SubscriptionCheckout', {
-    products,
-    stripePublicKey,
-    apiUrl,
-    onSubmit,
-    onRemoveProduct,
-    shipping,
-    taxes,
-    className
-  })
-  @endcomponent
+  <SubscriptionCheckout
+    :products="products"
+    :stripePublicKey="stripePublicKey"
+    :apiUrl="apiUrl"
+    :shipping="shipping"
+    :taxes="taxes"
+    :className="className"
+  />
 @endif
 
 @if(isOneTime)
-  <!-- One-time payment component can be implemented here in the future -->
   <div class="p-8 text-center">
     <p class="text-gray-600 dark:text-gray-400">
       One-time payment mode is not yet implemented.

package/dist/Combobox-fdkr6cdq.stx

@@ -0,0 +1,96 @@
+<script server>
+export const value = $props.value
+export const className = $props.className || ''
+export const as = $props.as || 'div'
+
+const baseClasses = 'relative'
+export const comboboxClasses = `${baseClasses} ${className}`.trim()
+export const comboboxInstanceId = `stx-cb-${Math.random().toString(36).slice(2, 11)}`
+</script>
+
+<script client>
+const emit = defineEmits()
+const comboboxInstanceId = {{ comboboxInstanceId }}
+const initialValue = {{ value === undefined ? 'null' : value }}
+
+const isOpen = state(false)
+const selected = state(initialValue)
+const query = state('')
+let rootEl = null
+let outsideHandler = null
+
+function isSelectedValue(v) {
+  return selected() === v
+}
+
+function selectValue(v) {
+  selected.set(v)
+  isOpen.set(false)
+  syncOptionStates()
+  emit('change', v)
+}
+
+function syncOptionStates() {
+  if (!rootEl) return
+  const options = rootEl.querySelectorAll('[data-stx-combobox-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) } }
+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) }
+function onQuery(event) {
+  event.stopPropagation()
+  query.set(event.detail)
+  if (!isOpen()) open()
+  emit('query', event.detail)
+}
+
+onMount(() => {
+  rootEl = document.querySelector(`[data-combobox-id="${comboboxInstanceId}"]`)
+  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, query, toggle, open, close, selectValue })
+</script>
+
+<component
+  :is="{{ as }}"
+  class="{{ comboboxClasses }}"
+  data-stx-combobox
+  data-combobox-id="{{ comboboxInstanceId }}"
+  :data-state="dataState()"
+  @stx:combobox-toggle="onToggle($event)"
+  @stx:combobox-select="onSelect($event)"
+  @stx:combobox-query="onQuery($event)"
+>
+  <slot />
+</component>
+
+<style>
+[data-stx-combobox][data-state="closed"] [data-stx-combobox-options] {
+  display: none;
+}
+</style>

package/dist/{ComboboxButton-8gxwkhdx.stx → ComboboxButton-g76stp1e.stx}

@@ -3,10 +3,22 @@ export const className = $props.className || ''
 export const as = $props.as || 'button'
 
 const baseClasses = 'absolute inset-y-0 right-0 flex items-center pr-2'
-const buttonClasses = `${baseClasses} ${className}`.trim()
+export const buttonClasses = `${baseClasses} ${className}`.trim()
 </script>
 
-<component :is="{{ as }}" class="{{ buttonClasses }}" tabindex="-1">
+<script client>
+function onClick(event) {
+  event.currentTarget.dispatchEvent(new CustomEvent('stx:combobox-toggle', { bubbles: true }))
+}
+</script>
+
+<component
+  :is="{{ as }}"
+  class="{{ buttonClasses }}"
+  data-stx-combobox-button
+  tabindex="-1"
+  @click="onClick($event)"
+>
   <svg class="h-5 w-5 text-neutral-400" viewBox="0 0 20 20" fill="none" stroke="currentColor">
     <path d="M7 7l3-3 3 3m0 6l-3 3-3-3" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
   </svg>

package/dist/{ComboboxInput-mk99z65n.stx → ComboboxInput-z1293bbh.stx}

@@ -1,25 +1,32 @@
 <script server>
 export const displayValue = $props.displayValue
-export const onChange = $props.onChange
 export const className = $props.className || ''
 export const placeholder = $props.placeholder || ''
 export const disabled = $props.disabled || false
 
 const baseClasses = 'w-full rounded-lg border-none bg-white dark:bg-neutral-800 py-2 pl-3 pr-10 text-sm leading-5 text-neutral-900 dark:text-white focus:ring-0 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'
 const disabledClasses = disabled ? 'opacity-50 cursor-not-allowed' : ''
-const inputClasses = `${baseClasses} ${disabledClasses} ${className}`.trim()
+export const inputClasses = `${baseClasses} ${disabledClasses} ${className}`.trim()
+</script>
+
+<script client>
+const isDisabled = {{ disabled }}
 
-export function handleChange(e) {
-  onChange?.(e.target.value)
+function onInput(event) {
+  if (isDisabled) return
+  event.currentTarget.dispatchEvent(
+    new CustomEvent('stx:combobox-query', { bubbles: true, detail: event.target.value }),
+  )
 }
 </script>
 
 <input
   type="text"
   class="{{ inputClasses }}"
+  data-stx-combobox-input
   placeholder="{{ placeholder }}"
   value="{{ displayValue }}"
   @if(disabled)disabled@endif
-  @input="handleChange"
+  @input="onInput($event)"
   autocomplete="off"
 />

package/dist/ComboboxOption-hmxt3gte.stx

@@ -0,0 +1,49 @@
+<script server>
+export const value = $props.value
+export const disabled = $props.disabled || false
+export const className = $props.className || ''
+export const as = $props.as || 'li'
+
+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>
+
+<script client>
+const isDisabled = {{ disabled }}
+const optionValue = {{ value === undefined ? 'null' : value }}
+
+function onClick(event) {
+  if (isDisabled) return
+  event.currentTarget.dispatchEvent(
+    new CustomEvent('stx:combobox-select', { bubbles: true, detail: optionValue }),
+  )
+}
+</script>
+
+<component
+  :is="{{ as }}"
+  class="{{ optionClasses }}"
+  data-stx-combobox-option
+  data-option-value="{{ valueJson }}"
+  role="option"
+  aria-selected="false"
+  @if(disabled)aria-disabled="true"@endif
+  @click="onClick($event)"
+>
+  <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-blue-600 dark:text-blue-400" data-stx-combobox-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 :disabled="disabled" />
+</component>
+
+<style>
+[data-stx-combobox-option][data-selected="false"] [data-stx-combobox-check],
+[data-stx-combobox-option]:not([data-selected]) [data-stx-combobox-check] {
+  display: none;
+}
+</style>

package/dist/{ListboxOptions-8kqvfp7z.stx → ComboboxOptions-sq5360ae.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-combobox-options
   role="listbox"
 >
   <slot />

package/dist/CommandPalette-36mxf05w.stx

@@ -0,0 +1,81 @@
+<script server>
+export const open = $props.open || false
+export const initialQuery = $props.query || ''
+export const className = $props.className || ''
+
+const baseClasses = 'fixed inset-0 z-50 overflow-y-auto p-4 sm:p-6 md:p-20'
+export const paletteClasses = `${baseClasses} ${className}`.trim()
+export const paletteInstanceId = `stx-cmd-${Math.random().toString(36).slice(2, 11)}`
+</script>
+
+<script client>
+const emit = defineEmits()
+const paletteInstanceId = {{ paletteInstanceId }}
+const isOpen = state({{ open }})
+const query = state({{ initialQuery }})
+let escHandler = null
+
+function close() {
+  if (!isOpen()) return
+  isOpen.set(false)
+  emit('close')
+}
+
+function show() {
+  if (isOpen()) return
+  isOpen.set(true)
+}
+
+function onQueryInput(event) {
+  query.set(event.target.value)
+  emit('query', event.target.value)
+}
+
+function onItemSelect(event) {
+  event.stopPropagation()
+  emit('select', event.detail)
+  close()
+}
+
+onMount(() => {
+  escHandler = (event) => {
+    if (event.key === 'Escape' && isOpen()) close()
+  }
+  document.addEventListener('keydown', escHandler)
+})
+
+onDestroy(() => {
+  if (escHandler) document.removeEventListener('keydown', escHandler)
+})
+
+defineExpose({ isOpen, query, show, close })
+</script>
+
+<div
+  :show="isOpen()"
+  class="{{ paletteClasses }}"
+  data-stx-command-palette
+  data-palette-id="{{ paletteInstanceId }}"
+  @stx:command-select="onItemSelect($event)"
+>
+  <div class="fixed inset-0 bg-neutral-500 bg-opacity-25 dark:bg-opacity-50 transition-opacity" @click="close()"></div>
+
+  <div class="mx-auto max-w-xl transform divide-y divide-neutral-100 dark:divide-neutral-800 overflow-hidden rounded-xl bg-white dark:bg-neutral-900 shadow-2xl ring-1 ring-black ring-opacity-5 transition-all relative">
+    <div class="relative">
+      <svg class="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-neutral-400" viewBox="0 0 20 20" fill="currentColor">
+        <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
+      </svg>
+      <input
+        type="text"
+        class="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-neutral-900 dark:text-white placeholder-neutral-400 focus:ring-0 sm:text-sm"
+        placeholder="Search..."
+        :value="query()"
+        @input="onQueryInput($event)"
+      />
+    </div>
+
+    <div class="max-h-96 overflow-y-auto py-2">
+      <slot />
+    </div>
+  </div>
+</div>

package/dist/CommandPaletteItem-mvk6q7a2.stx

@@ -0,0 +1,27 @@
+<script server>
+export const className = $props.className || ''
+export const value = $props.value
+
+const baseClasses = 'flex cursor-pointer select-none items-center px-4 py-2 text-neutral-900 dark:text-neutral-100 hover:bg-blue-600 hover:text-white'
+export const itemClasses = `${baseClasses} ${className}`.trim()
+</script>
+
+<script client>
+const emit = defineEmits()
+const itemValue = {{ value === undefined ? 'null' : value }}
+
+function onClick(event) {
+  emit('click', event)
+  event.currentTarget.dispatchEvent(
+    new CustomEvent('stx:command-select', { bubbles: true, detail: itemValue }),
+  )
+}
+</script>
+
+<div
+  class="{{ itemClasses }}"
+  data-stx-command-item
+  @click="onClick($event)"
+>
+  <slot />
+</div>

package/dist/Dialog-hczpexs4.stx

@@ -0,0 +1,37 @@
+<script server>
+export const open = $props.open || false
+export const className = $props.className || ''
+
+const baseClasses = 'relative z-50'
+export const dialogClasses = `${baseClasses} ${className}`.trim()
+</script>
+
+<script client>
+const emit = defineEmits()
+const isOpen = state({{ open }})
+
+function close() {
+  isOpen.set(false)
+  emit('close')
+}
+
+function onBackdropKey(event) {
+  if (event.key === 'Escape') close()
+}
+
+defineExpose({
+  open: () => isOpen.set(true),
+  close,
+  isOpen,
+})
+</script>
+
+<div
+  :show="isOpen()"
+  class="{{ dialogClasses }}"
+  role="dialog"
+  aria-modal="true"
+  @keydown="onBackdropKey($event)"
+>
+  <slot />
+</div>

package/dist/{Drawer-p7m351bn.stx → Drawer-xhevp5cw.stx}

@@ -1,11 +1,9 @@
 <script server>
 export const open = $props.open ?? false
-export const onClose = $props.onClose || (() => {})
 export const position = $props.position || 'right'
 export const title = $props.title || ''
 export const className = $props.className || ''
 
-// Position classes
 const positionClasses = {
   right: 'inset-y-0 right-0 pl-10 sm:pl-16',
   left: 'inset-y-0 left-0 pr-10 sm:pr-16',
@@ -13,27 +11,6 @@ const positionClasses = {
   bottom: 'inset-x-0 bottom-0 pt-10',
 }
 
-// Slide animation classes
-const slideClasses = {
-  right: {
-    enter: 'translate-x-full',
-    leave: 'translate-x-0',
-  },
-  left: {
-    enter: '-translate-x-full',
-    leave: 'translate-x-0',
-  },
-  top: {
-    enter: '-translate-y-full',
-    leave: 'translate-y-0',
-  },
-  bottom: {
-    enter: 'translate-y-full',
-    leave: 'translate-y-0',
-  },
-}
-
-// Size classes based on position
 const sizeClasses = {
   right: 'max-w-md w-screen',
   left: 'max-w-md w-screen',
@@ -41,7 +18,6 @@ const sizeClasses = {
   bottom: 'max-h-[90vh] w-full',
 }
 
-// Close button position
 const closeButtonPosition = {
   right: 'left-0 -ml-8 sm:-ml-10',
   left: 'right-0 -mr-8 sm:-mr-10',
@@ -51,33 +27,52 @@ const closeButtonPosition = {
 
 export const containerClasses = `pointer-events-none fixed ${positionClasses[position]} flex max-w-full`.trim()
 export const panelClasses = `pointer-events-auto relative ${sizeClasses[position]} ${className}`.trim()
-export const slideAnimation = slideClasses[position]
 export const closeButtonClasses = `absolute top-0 ${closeButtonPosition[position]} flex pt-4 pr-2 sm:pr-4`.trim()
 </script>
 
-@if(open)
-  <!-- Backdrop -->
+<script client>
+const emit = defineEmits()
+const isOpen = state({{ open }})
+
+function close() {
+  isOpen.set(false)
+  emit('close')
+}
+
+function onBackdropClick() {
+  close()
+}
+
+function onPanelKey(event) {
+  if (event.key === 'Escape') close()
+}
+
+defineExpose({
+  open: () => isOpen.set(true),
+  close,
+  isOpen,
+})
+</script>
+
+<div :show="isOpen()">
   <div
     class="fixed inset-0 z-50 bg-gray-500/75 dark:bg-gray-900/75 transition-opacity duration-500"
     style="animation: fadeIn 0.5s ease-in-out"
-    @click="handleBackdropClick()"
+    @click="onBackdropClick()"
   ></div>
 
-  <!-- Drawer Container -->
-  <div class="fixed inset-0 z-50 overflow-hidden">
+  <div class="fixed inset-0 z-50 overflow-hidden" @keydown="onPanelKey($event)">
     <div class="absolute inset-0 overflow-hidden">
       <div class="{{ containerClasses }}">
-        <!-- Drawer Panel -->
         <div
           class="{{ panelClasses }}"
           style="animation: slideIn 0.5s ease-in-out"
         >
-          <!-- Close Button -->
           <div class="{{ closeButtonClasses }}">
             <button
               type="button"
               class="relative rounded-md text-gray-300 dark:text-gray-400 hover:text-white dark:hover:text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
-              @click="handleClose()"
+              @click="close()"
             >
               <span class="absolute -inset-2.5"></span>
               <span class="sr-only">Close panel</span>
@@ -87,7 +82,6 @@ export const closeButtonClasses = `absolute top-0 ${closeButtonPosition[position
             </button>
           </div>
 
-          <!-- Drawer Content -->
           <div class="relative flex h-full flex-col overflow-y-auto bg-white dark:bg-blue-gray-800 py-6 shadow-xl">
             @if(title)
               <div class="px-4 sm:px-6">
@@ -104,7 +98,7 @@ export const closeButtonClasses = `absolute top-0 ${closeButtonPosition[position
       </div>
     </div>
   </div>
-@endif
+</div>
 
 <style>
 @keyframes fadeIn {
@@ -121,17 +115,3 @@ export const closeButtonClasses = `absolute top-0 ${closeButtonPosition[position
   }
 }
 </style>
-
-<script>
-function handleClose() {
-  if (onClose) {
-    onClose()
-  }
-}
-
-function handleBackdropClick() {
-  if (onClose) {
-    onClose()
-  }
-}
-</script>