@stacksjs/components 0.2.27 → 0.2.53

package/dist/Form-1mdmx9b6.stx

@@ -1,209 +0,0 @@
-<script server>
-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
-
-// Validate a single field
-function validateField(name, value) {
-  const fieldSchema = validationSchema[name]
-  if (!fieldSchema)
-    return null
-
-  // Required validation
-  if (fieldSchema.required && !value) {
-    return fieldSchema.requiredMessage || `${name} is required`
-  }
-
-  // Min length validation
-  if (fieldSchema.minLength && value.length < fieldSchema.minLength) {
-    return fieldSchema.minLengthMessage || `${name} must be at least ${fieldSchema.minLength} characters`
-  }
-
-  // Max length validation
-  if (fieldSchema.maxLength && value.length > fieldSchema.maxLength) {
-    return fieldSchema.maxLengthMessage || `${name} must be at most ${fieldSchema.maxLength} characters`
-  }
-
-  // Pattern validation
-  if (fieldSchema.pattern && !fieldSchema.pattern.test(value)) {
-    return fieldSchema.patternMessage || `${name} is invalid`
-  }
-
-  // Custom validation
-  if (fieldSchema.validate && typeof fieldSchema.validate === 'function') {
-    return fieldSchema.validate(value, values)
-  }
-
-  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]
-    }
-  }
-}
-
-// Handle form submission
-async function handleSubmit(event) {
-  event.preventDefault()
-  submitCount++
-
-  // Mark all fields as touched
-  Object.keys(validationSchema).forEach((name) => {
-    touched[name] = true
-  })
-
-  // Validate
-  isValidating = true
-  const isValid = validateForm()
-  isValidating = false
-
-  if (!isValid) {
-    if (onError) {
-      onError(errors)
-    }
-    return
-  }
-
-  // Submit
-  isSubmitting = true
-
-  try {
-    if (onSubmit) {
-      await onSubmit(values, { setErrors, setValues, resetForm })
-    }
-  }
-  catch (error) {
-    if (onError) {
-      onError(error)
-    }
-  }
-  finally {
-    isSubmitting = false
-  }
-}
-
-// Helper functions
-function setErrors(newErrors) {
-  errors = { ...errors, ...newErrors }
-}
-
-function setValues(newValues) {
-  values = { ...values, ...newValues }
-}
-
-function resetForm() {
-  values = { ...initialValues }
-  errors = {}
-  touched = {}
-  isSubmitting = false
-  submitCount = 0
-}
-
-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()
-</script>
-
-<form
-  class="{{ formClasses }}"
-  @if(action)action="{{ action }}"@endif
-  method="{{ method }}"
-  onsubmit="handleSubmit(event)"
-  novalidate
->
-  <slot
-    values="{{ values }}"
-    errors="{{ errors }}"
-    touched="{{ touched }}"
-    isSubmitting="{{ isSubmitting }}"
-    isValidating="{{ isValidating }}"
-    submitCount="{{ submitCount }}"
-    getFieldProps="{{ getFieldProps }}"
-    setErrors="{{ setErrors }}"
-    setValues="{{ setValues }}"
-    resetForm="{{ resetForm }}"
-  />
-</form>
-
-<script>
-// Export context for child components
-if (typeof window !== 'undefined') {
-  window.__formContext = {
-    values,
-    errors,
-    touched,
-    isSubmitting,
-    isValidating,
-    getFieldProps,
-    handleChange,
-    handleBlur,
-  }
-}
-</script>

package/dist/Listbox-pqqh72g8.stx

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

package/dist/ListboxOption-7nxzaexq.stx

@@ -1,57 +0,0 @@
-<script server>
-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/dist/Navigator-aay8bjab.stx

@@ -1,138 +0,0 @@
-<script server>
-// Navigator Component Props
-export const items = $props.items || []
-export const active = $props.active || ''
-export const orientation = $props.orientation || 'horizontal' // 'horizontal' | 'vertical'
-export const variant = $props.variant || 'default' // 'default' | 'pills' | 'underline' | 'sidebar'
-export const size = $props.size || 'md' // 'sm' | 'md' | 'lg'
-export const onNavigate = $props.onNavigate
-export const className = $props.className || ''
-
-// Helper function to check if item is active
-function isActive(item) {
-  if (typeof item.href === 'string' && typeof active === 'string') {
-    // Exact match
-    if (item.href === active) return true
-    // Match with query params/hash
-    if (active.startsWith(item.href)) return true
-  }
-  if (item.id && item.id === active) return true
-  return false
-}
-
-// Base classes
-const containerBaseClasses = orientation === 'horizontal'
-  ? 'flex items-center'
-  : 'flex flex-col'
-
-const containerClasses = `${containerBaseClasses} ${className}`.trim()
-
-// Item classes based on variant and size
-function getItemClasses(item) {
-  const active = isActive(item)
-  let classes = ''
-
-  // Size classes
-  const sizeClasses = {
-    sm: 'px-2 py-1 text-sm',
-    md: 'px-3 py-2 text-base',
-    lg: 'px-4 py-3 text-lg',
-  }
-
-  classes += sizeClasses[size] || sizeClasses.md
-
-  // Variant classes
-  if (variant === 'default') {
-    classes += active
-      ? ' text-gray-900 dark:text-gray-100 font-medium'
-      : ' text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
-  } else if (variant === 'pills') {
-    classes += active
-      ? ' bg-blue-600 text-white font-medium rounded-full'
-      : ' text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-full'
-  } else if (variant === 'underline') {
-    classes += active
-      ? ' text-blue-600 dark:text-blue-400 font-medium border-b-2 border-blue-600 dark:border-blue-400'
-      : ' text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 border-b-2 border-transparent'
-  } else if (variant === 'sidebar') {
-    classes += active
-      ? ' bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 font-medium border-l-4 border-blue-600 dark:border-blue-400'
-      : ' text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 border-l-4 border-transparent'
-  }
-
-  // Common classes
-  classes += ' transition-all duration-200 cursor-pointer flex items-center gap-2'
-
-  if (item.disabled) {
-    classes += ' opacity-50 cursor-not-allowed pointer-events-none'
-  }
-
-  return classes.trim()
-}
-
-// Gap classes between items
-const gapClasses = orientation === 'horizontal'
-  ? 'gap-1'
-  : 'gap-0.5'
-
-function handleClick(item, event) {
-  if (item.disabled) {
-    event.preventDefault()
-    return
-  }
-
-  if (onNavigate) {
-    event.preventDefault()
-    onNavigate(item)
-  }
-}
-</script>
-
-<nav class="{{ containerClasses }} {{ gapClasses }}" role="navigation" aria-label="Main navigation">
-  @foreach(item in items)
-    @if(item.href)
-      <a
-        href="{{ item.href }}"
-        class="{{ getItemClasses(item) }}"
-        @click="handleClick(item, event)"
-        @if(isActive(item))
-          aria-current="page"
-        @endif
-        @if(item.disabled)
-          aria-disabled="true"
-          tabindex="-1"
-        @endif
-      >
-        @if(item.icon)
-          <span class="flex-shrink-0" innerHTML="{!! item.icon !!}"></span>
-        @endif
-        <span>{{ item.label }}</span>
-        @if(item.badge)
-          <span class="ml-auto px-2 py-0.5 text-xs font-semibold rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300">
-            {{ item.badge }}
-          </span>
-        @endif
-      </a>
-    @else
-      <button
-        type="button"
-        class="{{ getItemClasses(item) }}"
-        @click="handleClick(item, event)"
-        @if(item.disabled)
-          disabled
-          aria-disabled="true"
-        @endif
-      >
-        @if(item.icon)
-          <span class="flex-shrink-0" innerHTML="{!! item.icon !!}"></span>
-        @endif
-        <span>{{ item.label }}</span>
-        @if(item.badge)
-          <span class="ml-auto px-2 py-0.5 text-xs font-semibold rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300">
-            {{ item.badge }}
-          </span>
-        @endif
-      </button>
-    @endif
-  @endforeach
-</nav>

package/dist/Notification-gk33gv7b.stx

@@ -1,71 +0,0 @@
-<script server>
-export const show = $props.show !== false
-export const title = $props.title || ''
-export const message = $props.message || ''
-export const type = $props.type || 'info'
-export const position = $props.position || 'top-right'
-export const duration = $props.duration || 5000
-export const onClose = $props.onClose
-export const className = $props.className || ''
-
-const typeColors = {
-  info: 'bg-blue-50 text-blue-900 dark:bg-blue-900 dark:text-blue-100',
-  success: 'bg-green-50 text-green-900 dark:bg-green-900 dark:text-green-100',
-  warning: 'bg-yellow-50 text-yellow-900 dark:bg-yellow-900 dark:text-yellow-100',
-  error: 'bg-red-50 text-red-900 dark:bg-red-900 dark:text-red-100',
-}
-
-const positions = {
-  'top-left': 'top-0 left-0',
-  'top-right': 'top-0 right-0',
-  'top-center': 'top-0 left-1/2 -translate-x-1/2',
-  'bottom-left': 'bottom-0 left-0',
-  'bottom-right': 'bottom-0 right-0',
-  'bottom-center': 'bottom-0 left-1/2 -translate-x-1/2',
-}
-
-const baseClasses = 'fixed z-50 m-4 max-w-md w-full pointer-events-auto rounded-lg p-4 shadow-lg ring-1 ring-black ring-opacity-5 transition-all'
-const notificationClasses = `${baseClasses} ${typeColors[type]} ${positions[position]} ${className}`.trim()
-
-export function handleClose() {
-  onClose?.()
-}
-</script>
-
-@if(show)
-  <div class="{{ notificationClasses }}" role="alert">
-    <div class="flex items-start">
-      <div class="flex-1">
-        @if(title)
-          <p class="text-sm font-medium">{{ title }}</p>
-        @endif
-        @if(message)
-          <p class="mt-1 text-sm {{ title ? 'opacity-90' : '' }}">{{ message }}</p>
-        @endif
-        @if(!title && !message)
-          <slot />
-        @endif
-      </div>
-
-      <button
-        type="button"
-        @click="handleClose"
-        class="ml-4 inline-flex rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2"
-      >
-        <span class="sr-only">Close</span>
-        <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-          <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
-        </svg>
-      </button>
-    </div>
-  </div>
-
-  <script>
-  // Auto-hide after duration (client-side only)
-  if (typeof window !== 'undefined' && duration > 0) {
-    setTimeout(() => {
-      handleClose()
-    }, duration)
-  }
-  </script>
-@endif

package/dist/PasswordInput-zv4hm43j.stx

@@ -1,155 +0,0 @@
-<script server>
-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"
-        @click="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/dist/Popover-469gbt6r.stx

@@ -1,24 +0,0 @@
-<script server>
-export const className = $props.className || ''
-export const as = $props.as || 'div'
-export let isOpen = false
-
-export function toggle() {
-  isOpen = !isOpen
-}
-
-export function close() {
-  isOpen = false
-}
-
-export function open() {
-  isOpen = true
-}
-
-const baseClasses = 'relative'
-const popoverClasses = `${baseClasses} ${className}`.trim()
-</script>
-
-<component :is="{{ as }}" class="{{ popoverClasses }}">
-  <slot :isOpen="isOpen" :toggle="toggle" :close="close" :open="open" />
-</component>

package/dist/RadioGroup-bvb1mrhd.stx

@@ -1,13 +0,0 @@
-<script server>
-export const value = $props.value
-export const onChange = $props.onChange
-export const className = $props.className || ''
-export const as = $props.as || 'div'
-
-const baseClasses = 'w-full'
-const groupClasses = `${baseClasses} ${className}`.trim()
-</script>
-
-<component :is="{{ as }}" class="{{ groupClasses }}" role="radiogroup">
-  <slot :value="value" :onChange="onChange" />
-</component>