@stacksjs/components 0.2.27 → 0.2.53

package/src/ui/accordion/Accordion.stx

@@ -3,60 +3,70 @@ export const items = $props.items || []
 export const allowMultiple = $props.allowMultiple || false
 export const defaultOpen = $props.defaultOpen || []
 export const className = $props.className || ''
-export const onChange = $props.onChange
 
-// Track which items are open
-let openItems = defaultOpen
+export const accordionClasses = `divide-y divide-gray-200 dark:divide-gray-700 border border-gray-200 dark:border-gray-700 rounded-lg ${className}`.trim()
+export const headerClasses = `w-full flex items-center justify-between px-4 py-3 text-left font-medium text-gray-900 dark:text-gray-100 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900`.trim()
+export const iconClasses = `w-5 h-5 text-gray-500 dark:text-gray-400 transition-transform duration-200`.trim()
+export const contentClasses = `px-4 py-3 text-gray-700 dark:text-gray-300`.trim()
+</script>
+
+<script client>
+const emit = defineEmits()
+const allowMultiple = {{ allowMultiple }}
+const openItems = state({{ defaultOpen }})
 
-// Toggle an item
 function toggleItem(index) {
+  const cur = openItems()
   if (allowMultiple) {
-    // Multiple items can be open
-    if (openItems.includes(index)) {
-      openItems = openItems.filter(i => i !== index)
-    } else {
-      openItems = [...openItems, index]
-    }
-  } else {
-    // Only one item can be open
-    if (openItems.includes(index)) {
-      openItems = []
-    } else {
-      openItems = [index]
-    }
+    openItems.set(cur.includes(index) ? cur.filter(i => i !== index) : [...cur, index])
   }
-
-  if (onChange) {
-    onChange(openItems)
+  else {
+    openItems.set(cur.includes(index) ? [] : [index])
   }
+  emit('change', openItems())
 }
 
-// Check if item is open
 function isOpen(index) {
-  return openItems.includes(index)
+  return openItems().includes(index)
 }
 
-export const accordionClasses = `divide-y divide-gray-200 dark:divide-gray-700 border border-gray-200 dark:border-gray-700 rounded-lg ${className}`.trim()
-export const itemClasses = ``.trim()
-export const headerClasses = `w-full flex items-center justify-between px-4 py-3 text-left font-medium text-gray-900 dark:text-gray-100 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900`.trim()
-export const iconClasses = `w-5 h-5 text-gray-500 dark:text-gray-400 transition-transform duration-200`.trim()
-export const contentClasses = `px-4 py-3 text-gray-700 dark:text-gray-300`.trim()
+function onHeaderKey(event, index) {
+  const buttons = event.currentTarget.closest('[role="region"]').querySelectorAll('button[data-accordion-header]')
+  if (event.key === 'ArrowDown') {
+    event.preventDefault()
+    buttons[index + 1]?.focus()
+  }
+  else if (event.key === 'ArrowUp') {
+    event.preventDefault()
+    buttons[index - 1]?.focus()
+  }
+  else if (event.key === 'Home') {
+    event.preventDefault()
+    buttons[0]?.focus()
+  }
+  else if (event.key === 'End') {
+    event.preventDefault()
+    buttons[buttons.length - 1]?.focus()
+  }
+}
 </script>
 
 <div class="{{ accordionClasses }}" role="region">
   @foreach(item in items)
-    <div class="{{ itemClasses }}">
+    <div>
       <button
         type="button"
+        data-accordion-header
         class="{{ headerClasses }}"
         @click="toggleItem({{ $loop.index }})"
-        aria-expanded="{{ isOpen($loop.index) ? 'true' : 'false' }}"
+        @keydown="onHeaderKey($event, {{ $loop.index }})"
+        :aria-expanded="isOpen({{ $loop.index }}) ? 'true' : 'false'"
         aria-controls="accordion-content-{{ $loop.index }}"
       >
         <span>{{ item.title }}</span>
         <svg
           class="{{ iconClasses }}"
-          style="transform: rotate({{ isOpen($loop.index) ? '180' : '0' }}deg)"
+          :style="`transform: rotate(${isOpen({{ $loop.index }}) ? 180 : 0}deg)`"
           fill="none"
           viewBox="0 0 24 24"
           stroke="currentColor"
@@ -65,44 +75,14 @@ export const contentClasses = `px-4 py-3 text-gray-700 dark:text-gray-300`.trim(
         </svg>
       </button>
 
-      @if(isOpen($loop.index))
-        <div
-          id="accordion-content-{{ $loop.index }}"
-          class="{{ contentClasses }}"
-          role="region"
-        >
-          {!! item.content !!}
-        </div>
-      @endif
+      <div
+        :show="isOpen({{ $loop.index }})"
+        id="accordion-content-{{ $loop.index }}"
+        class="{{ contentClasses }}"
+        role="region"
+      >
+        {!! item.content !!}
+      </div>
     </div>
   @endforeach
 </div>
-
-<script>
-// Keyboard navigation
-if (typeof window !== 'undefined') {
-  window.addEventListener('DOMContentLoaded', () => {
-    const buttons = document.querySelectorAll('[aria-expanded]')
-
-    buttons.forEach((button, index) => {
-      button.addEventListener('keydown', (event) => {
-        if (event.key === 'ArrowDown') {
-          event.preventDefault()
-          const nextButton = buttons[index + 1]
-          if (nextButton) nextButton.focus()
-        } else if (event.key === 'ArrowUp') {
-          event.preventDefault()
-          const prevButton = buttons[index - 1]
-          if (prevButton) prevButton.focus()
-        } else if (event.key === 'Home') {
-          event.preventDefault()
-          buttons[0].focus()
-        } else if (event.key === 'End') {
-          event.preventDefault()
-          buttons[buttons.length - 1].focus()
-        }
-      })
-    })
-  })
-}
-</script>

package/src/ui/audio/Audio.stx

@@ -25,10 +25,10 @@ export const audioClasses = 'w-full rounded-md bg-gray-100 dark:bg-gray-800'
   <audio
     class="{{ audioClasses }}"
     src="{{ src }}"
-    controls="{{ controls }}"
-    autoplay="{{ autoplay }}"
-    loop="{{ loop }}"
-    muted="{{ muted }}"
+    @if(controls)controls@endif
+    @if(autoplay)autoplay@endif
+    @if(loop)loop@endif
+    @if(muted)muted@endif
     preload="{{ preload }}"
   >
     Your browser does not support the audio element.

package/src/ui/auth/Login.stx

@@ -6,12 +6,27 @@ export const showRememberMe = $props.showRememberMe ?? true
 export const showForgotPassword = $props.showForgotPassword ?? true
 export const showSignup = $props.showSignup ?? true
 export const signupText = $props.signupText || 'Start a 14 day free trial'
-export const onSubmit = $props.onSubmit || (() => {})
 export const className = $props.className || ''
 
 export const containerClasses = `min-h-full flex flex-col justify-center py-12 lg:px-8 sm:px-6 dark:bg-blue-gray-900 ${className}`.trim()
 </script>
 
+<script client>
+const emit = defineEmits()
+
+function onSubmit(event) {
+  event.preventDefault()
+  const formData = new FormData(event.target)
+  const email = formData.get('email')
+  const password = formData.get('password')
+  emit('submit', { email, password })
+  setTimeout(() => {
+    const pw = event.target.querySelector('#password')
+    if (pw) pw.value = ''
+  }, 1000)
+}
+</script>
+
 <div class="{{ containerClasses }}">
   <div class="sm:mx-auto sm:max-w-md sm:w-full">
     @if(showLogo)
@@ -22,7 +37,7 @@ export const containerClasses = `min-h-full flex flex-col justify-center py-12 l
     </h2>
   </div>
 
-  <form onsubmit="event.preventDefault(); handleSubmit(event)">
+  <form @submit="onSubmit($event)">
     <div class="mt-10 sm:mx-auto sm:max-w-[480px] sm:w-full">
       <div class="bg-white dark:bg-blue-gray-800 px-6 py-12 shadow sm:rounded-lg sm:px-12">
         <div class="space-y-6">
@@ -144,20 +159,3 @@ export const containerClasses = `min-h-full flex flex-col justify-center py-12 l
     </div>
   </form>
 </div>
-
-<script>
-function handleSubmit(event) {
-  const formData = new FormData(event.target)
-  const email = formData.get('email')
-  const password = formData.get('password')
-
-  if (onSubmit) {
-    onSubmit({ email, password })
-  }
-
-  // Clear password after submission
-  setTimeout(() => {
-    event.target.querySelector('#password').value = ''
-  }, 1000)
-}
-</script>

package/src/ui/auth/Signup.stx

@@ -1,12 +1,36 @@
 <script server>
 export const headingText = $props.headingText || 'Sign up for Stacks'
 export const showSocialSignup = $props.showSocialSignup ?? true
-export const onSubmit = $props.onSubmit || (() => {})
 export const className = $props.className || ''
 
 export const containerClasses = `min-h-full flex flex-col justify-center py-12 lg:px-8 sm:px-6 dark:bg-blue-gray-900 ${className}`.trim()
 </script>
 
+<script client>
+const emit = defineEmits()
+
+function onSubmit(event) {
+  event.preventDefault()
+  const formData = new FormData(event.target)
+  const name = formData.get('name')
+  const email = formData.get('email')
+  const confirmEmail = formData.get('confirm_email')
+  const password = formData.get('password')
+
+  if (email !== confirmEmail) {
+    emit('error', { message: 'Emails do not match' })
+    return
+  }
+
+  emit('submit', { name, email, password })
+
+  setTimeout(() => {
+    event.target.querySelector('#password')?.setAttribute('value', '')
+    event.target.querySelector('#confirm_email')?.setAttribute('value', '')
+  }, 1000)
+}
+</script>
+
 <div class="{{ containerClasses }}">
   <div class="sm:mx-auto sm:max-w-md sm:w-full">
     <h2 class="mt-6 text-center text-2xl text-gray-900 dark:text-gray-100 font-bold leading-9 tracking-tight">
@@ -16,7 +40,7 @@ export const containerClasses = `min-h-full flex flex-col justify-center py-12 l
 
   <div class="mt-10 sm:mx-auto sm:max-w-[480px] sm:w-full">
     <div class="bg-white dark:bg-blue-gray-800 px-6 py-12 shadow sm:rounded-lg sm:px-12">
-      <form class="space-y-6" onsubmit="event.preventDefault(); handleSubmit(event)">
+      <form class="space-y-6" @submit="onSubmit($event)">
         <div>
           <label for="name" class="block text-sm text-gray-900 dark:text-gray-100 font-medium leading-6">
             Full Name
@@ -133,29 +157,3 @@ export const containerClasses = `min-h-full flex flex-col justify-center py-12 l
     </div>
   </div>
 </div>
-
-<script>
-function handleSubmit(event) {
-  const formData = new FormData(event.target)
-  const name = formData.get('name')
-  const email = formData.get('email')
-  const confirmEmail = formData.get('confirm_email')
-  const password = formData.get('password')
-
-  // Basic email confirmation validation
-  if (email !== confirmEmail) {
-    alert('Emails do not match!')
-    return
-  }
-
-  if (onSubmit) {
-    onSubmit({ name, email, password })
-  }
-
-  // Clear sensitive fields after submission
-  setTimeout(() => {
-    event.target.querySelector('#password').value = ''
-    event.target.querySelector('#confirm_email').value = ''
-  }, 1000)
-}
-</script>

package/src/ui/auth/TwoFactorChallenge.stx

@@ -3,12 +3,53 @@ export const headingText = $props.headingText || 'Two Factor Authentication'
 export const labelText = $props.labelText || 'Authentication code'
 export const instructionText = $props.instructionText || 'Open your Symantec 2FA app to view your authentication code.'
 export const codeLength = $props.codeLength || 6
-export const onSubmit = $props.onSubmit || (() => {})
-export const onUseRecoveryCode = $props.onUseRecoveryCode
+export const showRecoveryCode = $props.showRecoveryCode ?? true
 export const className = $props.className || ''
 
 export const containerClasses = `py-32 dark:bg-blue-gray-900 ${className}`.trim()
-export const codes = Array(codeLength).fill('')
+</script>
+
+<script client>
+const emit = defineEmits()
+const codeLength = {{ codeLength }}
+
+function onCodeInput(event, index) {
+  const input = event.target
+  const value = input.value
+  if (!/^\d*$/.test(value)) {
+    input.value = ''
+    return
+  }
+  if (value.length === 1 && index < codeLength - 1) {
+    document.getElementById(`code-${index + 1}`)?.focus()
+  }
+}
+
+function onKeyDown(event, index) {
+  if (event.key === 'Backspace' && !event.target.value && index > 0) {
+    document.getElementById(`code-${index - 1}`)?.focus()
+  }
+}
+
+function onSubmit(event) {
+  event.preventDefault()
+  const code = []
+  for (let i = 0; i < codeLength; i++) {
+    const input = document.getElementById(`code-${i}`)
+    if (input?.value) code.push(input.value)
+  }
+  if (code.length === codeLength) {
+    emit('submit', code.join(''))
+  }
+  else {
+    emit('error', { message: 'Please enter all digits' })
+  }
+}
+
+function onRecoveryCode(event) {
+  event.preventDefault()
+  emit('useRecoveryCode')
+}
 </script>
 
 <div class="{{ containerClasses }}">
@@ -21,7 +62,7 @@ export const codes = Array(codeLength).fill('')
         <label for="code-0" class="mt-4 block text-sm text-gray-900 dark:text-gray-100 font-medium leading-6">
           {{ labelText }}
         </label>
-        <form onsubmit="event.preventDefault(); handleSubmit(event)">
+        <form @submit="onSubmit($event)">
           <div class="mt-2 flex rounded-md shadow-sm space-x-2">
             @for(i in Array(codeLength).keys())
               <input
@@ -31,8 +72,8 @@ export const codes = Array(codeLength).fill('')
                 name="code-{{ i }}"
                 placeholder="-"
                 class="block w-full border-0 rounded-md px-2 py-2 text-center text-gray-900 dark:text-gray-100 ring-1 ring-gray-300 dark:ring-gray-600 ring-inset sm:text-sm placeholder:text-gray-400 dark:placeholder:text-gray-500 sm:leading-6 focus:ring-2 focus:ring-indigo-600 focus:ring-inset dark:bg-blue-gray-700"
-                oninput="handleCodeInput(event, {{ i }})"
-                onkeydown="handleKeyDown(event, {{ i }})"
+                @input="onCodeInput($event, {{ i }})"
+                @keydown="onKeyDown($event, {{ i }})"
               />
             @endfor
           </div>
@@ -50,14 +91,14 @@ export const codes = Array(codeLength).fill('')
             {{ instructionText }}
           </p>
         </div>
-        @if(onUseRecoveryCode)
+        @if(showRecoveryCode)
           <div class="mt-4">
             <p class="text-xs text-gray-700 dark:text-gray-300 font-semibold">
               Having Problems?
             </p>
             <a
               href="#"
-              @click="event.preventDefault(); handleRecoveryCode()"
+              @click="onRecoveryCode($event)"
               class="text-xs text-blue-500 hover:underline"
             >
               Use recovery code instead
@@ -68,58 +109,3 @@ export const codes = Array(codeLength).fill('')
     </div>
   </div>
 </div>
-
-<script>
-function handleCodeInput(event, index) {
-  const input = event.target
-  const value = input.value
-
-  // Only allow digits
-  if (!/^\d*$/.test(value)) {
-    input.value = ''
-    return
-  }
-
-  // Auto-focus next input
-  if (value.length === 1 && index < codeLength - 1) {
-    const nextInput = document.getElementById(`code-${index + 1}`)
-    if (nextInput) {
-      nextInput.focus()
-    }
-  }
-}
-
-function handleKeyDown(event, index) {
-  // Handle backspace to move to previous input
-  if (event.key === 'Backspace' && !event.target.value && index > 0) {
-    const prevInput = document.getElementById(`code-${index - 1}`)
-    if (prevInput) {
-      prevInput.focus()
-    }
-  }
-}
-
-function handleSubmit(event) {
-  const code = []
-  for (let i = 0; i < codeLength; i++) {
-    const input = document.getElementById(`code-${i}`)
-    if (input && input.value) {
-      code.push(input.value)
-    }
-  }
-
-  if (code.length === codeLength) {
-    if (onSubmit) {
-      onSubmit(code.join(''))
-    }
-  } else {
-    alert('Please enter all digits')
-  }
-}
-
-function handleRecoveryCode() {
-  if (onUseRecoveryCode) {
-    onUseRecoveryCode()
-  }
-}
-</script>

package/src/ui/avatar/Avatar.stx

@@ -6,11 +6,7 @@ export const size = $props.size || 'md'
 export const shape = $props.shape || 'circle'
 export const status = $props.status || ''
 export const className = $props.className || ''
-export const onError = $props.onError
 
-let imageError = false
-
-// Size classes
 const sizeClasses = {
   xs: 'w-6 h-6 text-xs',
   sm: 'w-8 h-8 text-sm',
@@ -20,13 +16,8 @@ const sizeClasses = {
   '2xl': 'w-20 h-20 text-2xl',
 }
 
-// Shape classes
-const shapeClasses = {
-  circle: 'rounded-full',
-  square: 'rounded-md',
-}
+const shapeClasses = { circle: 'rounded-full', square: 'rounded-md' }
 
-// Status indicator size classes
 const statusSizeClasses = {
   xs: 'w-1.5 h-1.5 border',
   sm: 'w-2 h-2 border',
@@ -36,7 +27,6 @@ const statusSizeClasses = {
   '2xl': 'w-4 h-4 border-2',
 }
 
-// Status color classes
 const statusColorClasses = {
   online: 'bg-green-500 dark:bg-green-400',
   offline: 'bg-gray-400 dark:bg-gray-600',
@@ -48,24 +38,33 @@ export const containerClasses = `relative inline-block ${className}`.trim()
 export const avatarClasses = `flex items-center justify-center overflow-hidden bg-gray-200 dark:bg-gray-700 ${sizeClasses[size]} ${shapeClasses[shape]}`.trim()
 export const imageClasses = `w-full h-full object-cover`.trim()
 export const initialsClasses = `font-medium text-gray-600 dark:text-gray-300 uppercase select-none`.trim()
-export const statusClasses = `absolute bottom-0 right-0 ${statusSizeClasses[size]} ${statusColorClasses[status]} ${shapeClasses[shape]} border-white dark:border-gray-900`.trim()
-
-// Generate initials from name if not provided
+export const statusClasses = status ? `absolute bottom-0 right-0 ${statusSizeClasses[size]} ${statusColorClasses[status]} ${shapeClasses[shape]} border-white dark:border-gray-900`.trim() : ''
 export const displayInitials = initials || (alt ? alt.split(' ').map(n => n[0]).join('').substring(0, 2) : '?')
 </script>
 
+<script client>
+const emit = defineEmits()
+const imageError = state(false)
+const hasSrc = {{ !!src }}
+
+function onImageError(event) {
+  imageError.set(true)
+  emit('error', event)
+}
+
+const showImage = derived(() => hasSrc && !imageError())
+</script>
+
 <div class="{{ containerClasses }}">
   <div class="{{ avatarClasses }}">
-    @if(src && !imageError)
-      <img
-        src="{{ src }}"
-        alt="{{ alt }}"
-        class="{{ imageClasses }}"
-        onerror="handleImageError(event)"
-      />
-    @else
-      <span class="{{ initialsClasses }}">{{ displayInitials }}</span>
-    @endif
+    <img
+      :show="showImage()"
+      src="{{ src }}"
+      alt="{{ alt }}"
+      class="{{ imageClasses }}"
+      @error="onImageError($event)"
+    />
+    <span :show="!showImage()" class="{{ initialsClasses }}">{{ displayInitials }}</span>
   </div>
 
   @if(status)
@@ -76,13 +75,3 @@ export const displayInitials = initials || (alt ? alt.split(' ').map(n => n[0]).
     ></span>
   @endif
 </div>
-
-<script>
-function handleImageError(event) {
-  imageError = true
-
-  if (onError) {
-    onError(event)
-  }
-}
-</script>

package/src/ui/badge/Badge.stx

@@ -4,9 +4,7 @@ export const size = $props.size || 'md'
 export const dot = $props.dot || false
 export const removable = $props.removable || false
 export const className = $props.className || ''
-export const onRemove = $props.onRemove
 
-// Variant classes
 const variantClasses = {
   default: 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300',
   primary: 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200',
@@ -17,14 +15,8 @@ const variantClasses = {
   info: 'bg-cyan-100 text-cyan-800 dark:bg-cyan-900 dark:text-cyan-200',
 }
 
-// Size classes
-const sizeClasses = {
-  sm: 'px-2 py-0.5 text-xs',
-  md: 'px-2.5 py-0.5 text-sm',
-  lg: 'px-3 py-1 text-base',
-}
+const sizeClasses = { sm: 'px-2 py-0.5 text-xs', md: 'px-2.5 py-0.5 text-sm', lg: 'px-3 py-1 text-base' }
 
-// Dot color classes
 const dotColorClasses = {
   default: 'bg-gray-500 dark:bg-gray-400',
   primary: 'bg-blue-500 dark:bg-blue-400',
@@ -40,6 +32,14 @@ export const dotClasses = `w-2 h-2 rounded-full ${dotColorClasses[variant]}`.tri
 export const removeButtonClasses = `ml-0.5 -mr-1 text-current hover:bg-black hover:bg-opacity-10 dark:hover:bg-white dark:hover:bg-opacity-10 rounded-full p-0.5 transition-colors duration-150`.trim()
 </script>
 
+<script client>
+const emit = defineEmits()
+
+function onRemove() {
+  emit('remove')
+}
+</script>
+
 <span class="{{ badgeClasses }}" role="status">
   @if(dot)
     <span class="{{ dotClasses }}" aria-hidden="true"></span>
@@ -47,10 +47,10 @@ export const removeButtonClasses = `ml-0.5 -mr-1 text-current hover:bg-black hov
 
   <slot />
 
-  @if(removable && onRemove)
+  @if(removable)
     <button
       type="button"
-      @click="handleRemove()"
+      @click="onRemove()"
       class="{{ removeButtonClasses }}"
       aria-label="Remove"
     >
@@ -60,11 +60,3 @@ export const removeButtonClasses = `ml-0.5 -mr-1 text-current hover:bg-black hov
     </button>
   @endif
 </span>
-
-<script>
-function handleRemove() {
-  if (onRemove) {
-    onRemove()
-  }
-}
-</script>