@stacksjs/components 0.2.35 → 0.2.53

package/src/ui/dropdown/Dropdown.stx

@@ -1,24 +1,82 @@
 <script server>
 export const className = $props.className || ''
 export const as = $props.as || 'div'
-export let isOpen = false
 
-export function toggle() {
-  isOpen = !isOpen
+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())
 }
 
-export function close() {
-  isOpen = false
+function open() {
+  if (isOpen()) return
+  isOpen.set(true)
+  emit('change', true)
 }
 
-export function open() {
-  isOpen = true
+function close() {
+  if (!isOpen()) return
+  isOpen.set(false)
+  emit('change', false)
 }
 
-const baseClasses = 'relative inline-block text-left'
-const dropdownClasses = `${baseClasses} ${className}`.trim()
+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 }}">
-  <slot :isOpen="isOpen" :toggle="toggle" :close="close" :open="open" />
+<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/src/ui/dropdown/DropdownButton.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/src/ui/dropdown/DropdownItem.stx

@@ -2,42 +2,34 @@
 export const className = $props.className || ''
 export const as = $props.as || 'div'
 export const disabled = $props.disabled || false
-export const onClick = $props.onClick
+export const value = $props.value
 
-export let active = false
-
-const baseClasses = 'group flex w-full items-center px-2 py-2 text-sm transition-colors'
-const stateClasses = active
-  ? 'bg-blue-500 text-white dark:bg-blue-600'
-  : 'text-neutral-900 dark:text-neutral-100'
-const disabledClasses = disabled
-  ? 'opacity-50 cursor-not-allowed'
-  : 'cursor-pointer'
-
-const itemClasses = `${baseClasses} ${stateClasses} ${disabledClasses} ${className}`.trim()
-
-export function handleClick(e) {
-  if (disabled) return
-  onClick?.(e)
-}
+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>
 
-export function handleMouseEnter() {
-  if (!disabled) active = true
-}
+<script client>
+const emit = defineEmits()
+const isDisabled = {{ disabled }}
+const itemValue = {{ value === undefined ? 'null' : value }}
 
-export function handleMouseLeave() {
-  active = false
+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="handleClick"
-  @mouseenter="handleMouseEnter"
-  @mouseleave="handleMouseLeave"
+  @click="onClick($event)"
 >
-  <slot :active="active" :disabled="disabled" />
+  <slot :disabled="disabled" />
 </component>

package/src/ui/dropdown/DropdownItems.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/src/ui/form/Form.stx

@@ -2,208 +2,94 @@
 export const action = $props.action || ''
 export const method = $props.method || 'POST'
 export const validationSchema = $props.validationSchema || {}
-export const initialValues = $props.initialValues || {}
-export const validateOnChange = $props.validateOnChange ?? true
-export const validateOnBlur = $props.validateOnBlur ?? true
-export const onSubmit = $props.onSubmit
-export const onError = $props.onError
 export const className = $props.className || ''
 
-let values = { ...initialValues }
-let errors = {}
-let touched = {}
-let isSubmitting = false
-let isValidating = false
-let submitCount = 0
+export const formClasses = `space-y-6 ${className}`.trim()
+export const errorClasses = `mt-1 text-sm text-red-600 dark:text-red-400`.trim()
+</script>
 
-// Validate a single field
-function validateField(name, value) {
-  const fieldSchema = validationSchema[name]
-  if (!fieldSchema)
-    return null
+<script client>
+const emit = defineEmits()
+const validationSchema = {{ validationSchema }}
 
-  // Required validation
-  if (fieldSchema.required && !value) {
-    return fieldSchema.requiredMessage || `${name} is required`
-  }
+const errors = state({})
+const isSubmitting = state(false)
+const submitCount = state(0)
 
-  // Min length validation
-  if (fieldSchema.minLength && value.length < fieldSchema.minLength) {
-    return fieldSchema.minLengthMessage || `${name} must be at least ${fieldSchema.minLength} characters`
+function validateField(name, value, allValues) {
+  const schema = validationSchema[name]
+  if (!schema) return null
+  if (schema.required && !value) {
+    return schema.requiredMessage || `${name} is required`
   }
-
-  // Max length validation
-  if (fieldSchema.maxLength && value.length > fieldSchema.maxLength) {
-    return fieldSchema.maxLengthMessage || `${name} must be at most ${fieldSchema.maxLength} characters`
+  if (schema.minLength && String(value).length < schema.minLength) {
+    return schema.minLengthMessage || `${name} must be at least ${schema.minLength} characters`
   }
-
-  // Pattern validation
-  if (fieldSchema.pattern && !fieldSchema.pattern.test(value)) {
-    return fieldSchema.patternMessage || `${name} is invalid`
+  if (schema.maxLength && String(value).length > schema.maxLength) {
+    return schema.maxLengthMessage || `${name} must be at most ${schema.maxLength} characters`
   }
-
-  // Custom validation
-  if (fieldSchema.validate && typeof fieldSchema.validate === 'function') {
-    return fieldSchema.validate(value, values)
+  if (schema.pattern && !new RegExp(schema.pattern).test(value)) {
+    return schema.patternMessage || `${name} is invalid`
   }
-
   return null
 }
 
-// Validate all fields
-function validateForm() {
-  const newErrors = {}
-  let isValid = true
-
-  Object.keys(validationSchema).forEach((name) => {
-    const error = validateField(name, values[name])
-    if (error) {
-      newErrors[name] = error
-      isValid = false
-    }
-  })
-
-  errors = newErrors
-  return isValid
-}
-
-// Handle field change
-function handleChange(event) {
-  const { name, value } = event.target
-  values[name] = value
-
-  if (validateOnChange && touched[name]) {
-    const error = validateField(name, value)
-    if (error) {
-      errors[name] = error
-    }
-    else {
-      delete errors[name]
-    }
-  }
-}
-
-// Handle field blur
-function handleBlur(event) {
-  const { name } = event.target
-  touched[name] = true
-
-  if (validateOnBlur) {
-    const error = validateField(name, values[name])
-    if (error) {
-      errors[name] = error
-    }
-    else {
-      delete errors[name]
+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
 }
 
-// Handle form submission
-async function handleSubmit(event) {
+async function onSubmit(event) {
   event.preventDefault()
-  submitCount++
-
-  // Mark all fields as touched
-  Object.keys(validationSchema).forEach((name) => {
-    touched[name] = true
-  })
+  submitCount.set(submitCount() + 1)
 
-  // Validate
-  isValidating = true
-  const isValid = validateForm()
-  isValidating = false
+  const formData = new FormData(event.target)
+  const values = {}
+  for (const [k, v] of formData.entries()) values[k] = v
 
-  if (!isValid) {
-    if (onError) {
-      onError(errors)
-    }
+  if (!validateForm(values)) {
+    emit('error', errors())
     return
   }
 
-  // Submit
-  isSubmitting = true
-
+  isSubmitting.set(true)
   try {
-    if (onSubmit) {
-      await onSubmit(values, { setErrors, setValues, resetForm })
-    }
-  }
-  catch (error) {
-    if (onError) {
-      onError(error)
-    }
+    emit('submit', values)
   }
   finally {
-    isSubmitting = false
+    isSubmitting.set(false)
   }
 }
 
-// Helper functions
-function setErrors(newErrors) {
-  errors = { ...errors, ...newErrors }
-}
-
-function setValues(newValues) {
-  values = { ...values, ...newValues }
+function setErrors(next) {
+  errors.set({ ...errors(), ...next })
 }
 
-function resetForm() {
-  values = { ...initialValues }
-  errors = {}
-  touched = {}
-  isSubmitting = false
-  submitCount = 0
+function reset(form) {
+  errors.set({})
+  isSubmitting.set(false)
+  submitCount.set(0)
+  if (form?.reset) form.reset()
 }
 
-function getFieldProps(name) {
-  return {
-    name,
-    value: values[name] || '',
-    error: errors[name],
-    touched: touched[name],
-    onChange: handleChange,
-    onBlur: handleBlur,
-  }
-}
-
-export const formClasses = `space-y-6 ${className}`.trim()
-export const errorClasses = `mt-1 text-sm text-red-600 dark:text-red-400`.trim()
+defineExpose({ errors, isSubmitting, submitCount, setErrors, reset, validateForm })
 </script>
 
 <form
   class="{{ formClasses }}"
   @if(action)action="{{ action }}"@endif
   method="{{ method }}"
-  onsubmit="handleSubmit(event)"
+  @submit="onSubmit($event)"
   novalidate
 >
-  <slot
-    values="{{ values }}"
-    errors="{{ errors }}"
-    touched="{{ touched }}"
-    isSubmitting="{{ isSubmitting }}"
-    isValidating="{{ isValidating }}"
-    submitCount="{{ submitCount }}"
-    getFieldProps="{{ getFieldProps }}"
-    setErrors="{{ setErrors }}"
-    setValues="{{ setValues }}"
-    resetForm="{{ resetForm }}"
-  />
+  <slot />
 </form>
-
-<script>
-// Export context for child components
-if (typeof window !== 'undefined') {
-  window.__formContext = {
-    values,
-    errors,
-    touched,
-    isSubmitting,
-    isValidating,
-    getFieldProps,
-    handleChange,
-    handleBlur,
-  }
-}
-</script>

package/src/ui/heatmap/Heatmap.stx

@@ -1,46 +1,25 @@
-<script>
-/**
- * Heatmap Component
- *
- * A privacy-compliant heatmap visualization component that displays user interaction data.
- * Can be used to show click heatmaps, movement heatmaps, or scroll depth visualizations.
- *
- * Props:
- * @prop {string} id - Unique identifier for the heatmap container
- * @prop {string} mode - Visualization mode: 'overlay' | 'standalone' | 'thumbnail' (default: 'overlay')
- * @prop {number} width - Width in pixels (default: 100% of container)
- * @prop {number} height - Height in pixels (default: 100% of container)
- * @prop {number} radius - Heat point radius (default: 20)
- * @prop {number} blur - Blur amount for heatmap (default: 15)
- * @prop {number} opacity - Maximum opacity (default: 0.6)
- * @prop {boolean} showLegend - Show color legend (default: true)
- * @prop {boolean} interactive - Enable zoom/pan interactions (default: false)
- * @prop {string} dataSource - Source of data: 'auto' | 'manual' | 'endpoint' (default: 'auto')
- * @prop {string} endpoint - API endpoint for fetching heatmap data
- * @prop {string} colorScheme - Color scheme: 'default' | 'fire' | 'cool' | 'grayscale' (default: 'default')
- */
-const id = props.id || 'stx-heatmap-' + Math.random().toString(36).slice(2, 8)
-const mode = props.mode || 'overlay'
-const width = props.width || null
-const height = props.height || null
-const radius = props.radius || 20
-const blur = props.blur || 15
-const opacity = props.opacity || 0.6
-const showLegend = props.showLegend !== false
-const interactive = props.interactive || false
-const dataSource = props.dataSource || 'auto'
-const endpoint = props.endpoint || ''
-const colorScheme = props.colorScheme || 'default'
-
-// Color schemes
+<script server>
+export const id = $props.id || `stx-heatmap-${Math.random().toString(36).slice(2, 8)}`
+export const mode = $props.mode || 'overlay'
+export const width = $props.width || null
+export const height = $props.height || null
+export const radius = $props.radius || 20
+export const blur = $props.blur || 15
+export const opacity = $props.opacity || 0.6
+export const showLegend = $props.showLegend !== false
+export const interactive = $props.interactive || false
+export const dataSource = $props.dataSource || 'auto'
+export const endpoint = $props.endpoint || ''
+export const colorScheme = $props.colorScheme || 'default'
+
 const colorSchemes = {
   default: ['#0000ff', '#00ffff', '#00ff00', '#ffff00', '#ff0000'],
   fire: ['#000000', '#ff0000', '#ffff00', '#ffffff'],
   cool: ['#000033', '#0066ff', '#00ccff', '#ffffff'],
-  grayscale: ['#000000', '#444444', '#888888', '#cccccc', '#ffffff']
+  grayscale: ['#000000', '#444444', '#888888', '#cccccc', '#ffffff'],
 }
 
-const colors = colorSchemes[colorScheme] || colorSchemes.default
+export const colors = colorSchemes[colorScheme] || colorSchemes.default
 </script>
 
 <div