@stacksjs/components 0.2.35 → 0.2.54

package/dist/{TextInput-k2kfkgy1.stx → TextInput-kf084763.stx}

@@ -1,6 +1,5 @@
 <script server>
 export const value = $props.value || ''
-export const onChange = $props.onChange || (() => {})
 export const placeholder = $props.placeholder || ''
 export const disabled = $props.disabled || false
 export const readonly = $props.readonly || false
@@ -17,45 +16,51 @@ export const showCount = $props.showCount || false
 export const className = $props.className || ''
 export const inputClassName = $props.inputClassName || ''
 
-// 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',
-}
+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' }
+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'
-
 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'
-
 const paddingClasses = leftIcon ? 'pl-10' : rightIcon || clearable ? 'pr-10' : ''
 
 export const inputClasses = `${baseClasses} ${sizeClasses[size]} ${stateClasses} ${disabledClasses} ${paddingClasses} ${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]
-export const hasValue = value && value.length > 0
+export const inputId = `input-${label}`
+</script>
+
+<script client>
+const emit = defineEmits()
+const inputValue = state({{ value }})
+
+function onInput(event) {
+  inputValue.set(event.target.value)
+  emit('input', inputValue())
+}
+
+function onClear() {
+  inputValue.set('')
+  emit('input', '')
+  emit('clear')
+}
+
+const hasValue = derived(() => inputValue().length > 0)
+const charCount = derived(() => `${inputValue().length} / {{ maxLength || 0 }}`)
+
+defineExpose({ value: inputValue, clear: onClear })
 </script>
 
 <div class="w-full {{ className }}">
   @if(label)
-    <label for="input-{{ label }}" class="{{ labelClasses }}">
+    <label for="{{ inputId }}" class="{{ labelClasses }}">
       {{ label }}
       @if(required)
         <span class="text-red-500 ml-1">*</span>
@@ -65,33 +70,31 @@ export const hasValue = value && value.length > 0
 
   <div class="relative">
     @if(leftIcon)
-      <!-- Left icon -->
       <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
-        <span class="{{ iconClasses }} text-gray-400 dark:text-gray-500" innerHTML="{!! leftIcon !!}"></span>
+        <span class="{{ iconClasses }} text-gray-400 dark:text-gray-500">{!! leftIcon !!}</span>
       </div>
     @endif
 
     <input
       type="text"
-      id="input-{{ label }}"
+      id="{{ inputId }}"
       class="{{ inputClasses }}"
-      value="{{ value }}"
+      :value="inputValue()"
       placeholder="{{ placeholder }}"
-      disabled="{{ disabled }}"
-      readonly="{{ readonly }}"
-      required="{{ required }}"
+      @if(disabled)disabled@endif
+      @if(readonly)readonly@endif
+      @if(required)required@endif
       @if(maxLength)maxlength="{{ maxLength }}"@endif
-      oninput="handleInput(event)"
-      aria-invalid="{{ error ? 'true' : 'false' }}"
+      @input="onInput($event)"
+      :aria-invalid="{{ error ? 'true' : 'false' }}"
       @if(helperText)aria-describedby="helper-text"@endif
     />
 
-    @if(clearable && hasValue && !disabled && !readonly)
-      <!-- Clear button -->
-      <div class="absolute inset-y-0 right-0 flex items-center pr-3">
+    @if(clearable)
+      <div :show="hasValue() && !{{ disabled }} && !{{ readonly }}" class="absolute inset-y-0 right-0 flex items-center pr-3">
         <button
           type="button"
-          @click="handleClear()"
+          @click="onClear()"
           class="text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 focus:outline-none"
           aria-label="Clear input"
         >
@@ -100,13 +103,11 @@ export const hasValue = value && value.length > 0
           </svg>
         </button>
       </div>
-    @else
-      @if(rightIcon && !clearable)
-        <!-- Right icon -->
-        <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
-          <span class="{{ iconClasses }} text-gray-400 dark:text-gray-500" innerHTML="{!! rightIcon !!}"></span>
-        </div>
-      @endif
+    @endif
+    @if(rightIcon && !clearable)
+      <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+        <span class="{{ iconClasses }} text-gray-400 dark:text-gray-500">{!! rightIcon !!}</span>
+      </div>
     @endif
   </div>
 
@@ -121,26 +122,8 @@ export const hasValue = value && value.length > 0
       @endif
 
       @if(showCount && maxLength)
-        <p class="text-sm text-gray-500 dark:text-gray-400">
-          {{ value.length }} / {{ maxLength }}
-        </p>
+        <p class="text-sm text-gray-500 dark:text-gray-400" x-text="charCount()"></p>
       @endif
     </div>
   @endif
 </div>
-
-<script>
-function handleInput(event) {
-  const newValue = event.target.value
-
-  if (onChange) {
-    onChange(newValue)
-  }
-}
-
-function handleClear() {
-  if (onChange) {
-    onChange('')
-  }
-}
-</script>

package/dist/{Textarea-szad57dz.stx → Textarea-xg4rr2xz.stx}

@@ -1,6 +1,5 @@
 <script server>
 export const value = $props.value || ''
-export const onChange = $props.onChange || (() => {})
 export const placeholder = $props.placeholder || ''
 export const disabled = $props.disabled || false
 export const readonly = $props.readonly || false
@@ -13,24 +12,14 @@ export const helperText = $props.helperText || ''
 export const required = $props.required || false
 export const maxLength = $props.maxLength
 export const showCount = $props.showCount || false
-export const resize = $props.resize || 'vertical' // 'none' | 'vertical' | 'horizontal' | 'both'
+export const resize = $props.resize || 'vertical'
 export const className = $props.className || ''
 
-// Resize classes
-const resizeClasses = {
-  none: 'resize-none',
-  vertical: 'resize-y',
-  horizontal: 'resize-x',
-  both: 'resize',
-}
-
-// Base and state classes
+const resizeClasses = { none: 'resize-none', vertical: 'resize-y', horizontal: 'resize-x', both: 'resize' }
 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 px-4 py-2 text-base dark:bg-blue-gray-700 dark:text-gray-100'
-
 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
@@ -42,6 +31,40 @@ export const labelClasses = `block text-sm font-medium leading-6 mb-2 ${error ?
 export const helperClasses = `mt-2 text-sm ${error ? 'text-red-600 dark:text-red-400' : 'text-gray-500 dark:text-gray-400'}`.trim()
 </script>
 
+<script client>
+const emit = defineEmits()
+const autoResize = {{ autoResize }}
+const maxRows = {{ maxRows }}
+const inputValue = state({{ value }})
+
+function resizeTextarea(el) {
+  if (!autoResize) return
+  el.style.height = 'auto'
+  const scrollHeight = el.scrollHeight
+  const lineHeight = Number.parseInt(window.getComputedStyle(el).lineHeight) || 20
+  const maxHeight = lineHeight * maxRows
+  el.style.height = `${Math.min(scrollHeight, maxHeight)}px`
+  el.style.overflowY = scrollHeight > maxHeight ? 'auto' : 'hidden'
+}
+
+function onInput(event) {
+  inputValue.set(event.target.value)
+  resizeTextarea(event.target)
+  emit('input', inputValue())
+}
+
+onMount(() => {
+  if (autoResize) {
+    const el = document.getElementById('textarea-input')
+    if (el) resizeTextarea(el)
+  }
+})
+
+const charCount = derived(() => `${inputValue().length} / {{ maxLength || 0 }}`)
+
+defineExpose({ value: inputValue })
+</script>
+
 <div class="w-full">
   @if(label)
     <label for="textarea-input" class="{{ labelClasses }}">
@@ -57,12 +80,12 @@ export const helperClasses = `mt-2 text-sm ${error ? 'text-red-600 dark:text-red
     class="{{ textareaClasses }}"
     rows="{{ rows }}"
     placeholder="{{ placeholder }}"
-    disabled="{{ disabled }}"
-    readonly="{{ readonly }}"
-    required="{{ required }}"
+    @if(disabled)disabled@endif
+    @if(readonly)readonly@endif
+    @if(required)required@endif
     @if(maxLength)maxlength="{{ maxLength }}"@endif
-    oninput="handleInput(event)"
-    aria-invalid="{{ error ? 'true' : 'false' }}"
+    @input="onInput($event)"
+    :aria-invalid="{{ error ? 'true' : 'false' }}"
     @if(helperText)aria-describedby="helper-text"@endif
   >{{ value }}</textarea>
 
@@ -77,43 +100,8 @@ export const helperClasses = `mt-2 text-sm ${error ? 'text-red-600 dark:text-red
       @endif
 
       @if(showCount && maxLength)
-        <p class="text-sm text-gray-500 dark:text-gray-400">
-          {{ value.length }} / {{ maxLength }}
-        </p>
+        <p class="text-sm text-gray-500 dark:text-gray-400" x-text="charCount()"></p>
       @endif
     </div>
   @endif
 </div>
-
-<script>
-function handleInput(event) {
-  const textarea = event.target
-  const newValue = textarea.value
-
-  if (autoResize && typeof window !== 'undefined') {
-    // Auto-resize functionality
-    textarea.style.height = 'auto'
-    const scrollHeight = textarea.scrollHeight
-    const lineHeight = parseInt(window.getComputedStyle(textarea).lineHeight)
-    const maxHeight = lineHeight * maxRows
-
-    textarea.style.height = Math.min(scrollHeight, maxHeight) + 'px'
-    textarea.style.overflowY = scrollHeight > maxHeight ? 'auto' : 'hidden'
-  }
-
-  if (onChange) {
-    onChange(newValue)
-  }
-}
-
-// Initialize auto-resize on mount
-if (autoResize && typeof window !== 'undefined') {
-  window.addEventListener('DOMContentLoaded', () => {
-    const textarea = document.getElementById('textarea-input')
-    if (textarea && value) {
-      // Trigger initial resize
-      textarea.dispatchEvent(new Event('input'))
-    }
-  })
-}
-</script>

package/dist/{Tooltip-em7t551n.stx → Tooltip-m0tqd72e.stx}

@@ -6,7 +6,6 @@ export const className = $props.className || ''
 export const show = $props.show || false
 export const disabled = $props.disabled || false
 
-// Position classes
 const positionClasses = {
   top: 'bottom-full left-1/2 -translate-x-1/2 mb-2',
   bottom: 'top-full left-1/2 -translate-x-1/2 mt-2',
@@ -14,7 +13,6 @@ const positionClasses = {
   right: 'left-full top-1/2 -translate-y-1/2 ml-2',
 }
 
-// Arrow classes
 const arrowClasses = {
   top: 'top-full left-1/2 -translate-x-1/2 border-t-gray-900 dark:border-t-gray-700',
   bottom: 'bottom-full left-1/2 -translate-x-1/2 border-b-gray-900 dark:border-b-gray-700',
@@ -22,55 +20,51 @@ const arrowClasses = {
   right: 'right-full top-1/2 -translate-y-1/2 border-r-gray-900 dark:border-r-gray-700',
 }
 
-export const tooltipClasses = `absolute z-50 px-3 py-2 text-sm font-medium text-white bg-gray-900 dark:bg-gray-700 rounded-lg shadow-lg whitespace-nowrap pointer-events-none opacity-0 transition-opacity duration-200 ${positionClasses[position]} ${className}`.trim()
+export const tooltipClasses = `absolute z-50 px-3 py-2 text-sm font-medium text-white bg-gray-900 dark:bg-gray-700 rounded-lg shadow-lg whitespace-nowrap pointer-events-none transition-opacity duration-200 ${positionClasses[position]} ${className}`.trim()
 export const arrowClass = `absolute w-0 h-0 border-4 border-transparent ${arrowClasses[position]}`.trim()
-
-let isVisible = show
-let timeoutId = null
 </script>
 
-<div class="relative inline-block {{ disabled ? 'cursor-not-allowed' : '' }}">
-  <!-- Trigger element (slot) -->
-  <div
-    onmouseenter="handleMouseEnter()"
-    onmouseleave="handleMouseLeave()"
-    onfocus="handleMouseEnter()"
-    onblur="handleMouseLeave()"
-  >
-    <slot />
-  </div>
-
-  <!-- Tooltip -->
-  @if(isVisible && !disabled)
-    <div
-      class="{{ tooltipClasses }}"
-      role="tooltip"
-      style="opacity: 1"
-    >
-      {{ content }}
-      <div class="{{ arrowClass }}"></div>
-    </div>
-  @endif
-</div>
-
-<script>
-function handleMouseEnter() {
-  if (disabled) return
+<script client>
+const delay = {{ delay }}
+const isDisabled = {{ disabled }}
+const isVisible = state({{ show }})
+let timeoutId = null
 
+function showTooltip() {
+  if (isDisabled) return
   if (delay > 0) {
-    timeoutId = setTimeout(() => {
-      isVisible = true
-    }, delay)
-  } else {
-    isVisible = true
+    timeoutId = setTimeout(() => isVisible.set(true), delay)
+  }
+  else {
+    isVisible.set(true)
   }
 }
 
-function handleMouseLeave() {
+function hideTooltip() {
   if (timeoutId) {
     clearTimeout(timeoutId)
     timeoutId = null
   }
-  isVisible = false
+  isVisible.set(false)
 }
 </script>
+
+<div class="relative inline-block {{ disabled ? 'cursor-not-allowed' : '' }}">
+  <div
+    @mouseenter="showTooltip()"
+    @mouseleave="hideTooltip()"
+    @focusin="showTooltip()"
+    @focusout="hideTooltip()"
+  >
+    <slot />
+  </div>
+
+  <div
+    :show="isVisible() && !{{ disabled }}"
+    class="{{ tooltipClasses }}"
+    role="tooltip"
+  >
+    {{ content }}
+    <div class="{{ arrowClass }}"></div>
+  </div>
+</div>

package/dist/Transition-7smenaz8.stx

@@ -0,0 +1,102 @@
+<script server>
+export const show = $props.show !== false
+export const enter = $props.enter || 'transition-opacity duration-300'
+export const enterFrom = $props.enterFrom || 'opacity-0'
+export const enterTo = $props.enterTo || 'opacity-100'
+export const leave = $props.leave || 'transition-opacity duration-200'
+export const leaveFrom = $props.leaveFrom || 'opacity-100'
+export const leaveTo = $props.leaveTo || 'opacity-0'
+export const appear = $props.appear || false
+export const duration = $props.duration || 300
+export const delay = $props.delay || 0
+export const preset = $props.preset || ''
+export const className = $props.className || ''
+
+const presets = {
+  fade: { enter: 'transition-opacity', enterFrom: 'opacity-0', enterTo: 'opacity-100', leave: 'transition-opacity', leaveFrom: 'opacity-100', leaveTo: 'opacity-0' },
+  slide: { enter: 'transition-transform', enterFrom: 'translate-y-2', enterTo: 'translate-y-0', leave: 'transition-transform', leaveFrom: 'translate-y-0', leaveTo: 'translate-y-2' },
+  slideLeft: { enter: 'transition-transform', enterFrom: 'translate-x-full', enterTo: 'translate-x-0', leave: 'transition-transform', leaveFrom: 'translate-x-0', leaveTo: '-translate-x-full' },
+  slideRight: { enter: 'transition-transform', enterFrom: '-translate-x-full', enterTo: 'translate-x-0', leave: 'transition-transform', leaveFrom: 'translate-x-0', leaveTo: 'translate-x-full' },
+  scale: { enter: 'transition-transform', enterFrom: 'scale-95', enterTo: 'scale-100', leave: 'transition-transform', leaveFrom: 'scale-100', leaveTo: 'scale-95' },
+  rotate: { enter: 'transition-transform', enterFrom: 'rotate-12 scale-95', enterTo: 'rotate-0 scale-100', leave: 'transition-transform', leaveFrom: 'rotate-0 scale-100', leaveTo: '-rotate-12 scale-95' },
+  zoom: { enter: 'transition-all', enterFrom: 'scale-0 opacity-0', enterTo: 'scale-100 opacity-100', leave: 'transition-all', leaveFrom: 'scale-100 opacity-100', leaveTo: 'scale-0 opacity-0' },
+}
+
+const p = preset && presets[preset] ? presets[preset] : {}
+export const enterClass = p.enter || enter
+export const enterFromClass = p.enterFrom || enterFrom
+export const enterToClass = p.enterTo || enterTo
+export const leaveClass = p.leave || leave
+export const leaveFromClass = p.leaveFrom || leaveFrom
+export const leaveToClass = p.leaveTo || leaveTo
+
+export const durationStyle = `transition-duration: ${duration}ms; transition-delay: ${delay}ms;`
+export const extraClass = className
+</script>
+
+<script client>
+const emit = defineEmits()
+const showProp = {{ show }}
+const appear = {{ appear }}
+const duration = {{ duration }}
+const delay = {{ delay }}
+const enterClass = {{ enterClass }}
+const enterFromClass = {{ enterFromClass }}
+const enterToClass = {{ enterToClass }}
+const leaveClass = {{ leaveClass }}
+const leaveFromClass = {{ leaveFromClass }}
+const leaveToClass = {{ leaveToClass }}
+const extraClass = {{ extraClass }}
+
+const visible = state(showProp)
+const isEntering = state(appear && showProp)
+const isLeaving = state(false)
+const shouldRender = state(showProp)
+
+const transitionClass = derived(() => {
+  if (visible()) {
+    return isEntering() ? `${enterClass} ${enterFromClass}` : enterToClass
+  }
+  return isLeaving() ? `${leaveClass} ${leaveFromClass}` : leaveToClass
+})
+
+const componentClass = derived(() => `${transitionClass()} ${extraClass}`.trim())
+
+function setShow(next) {
+  if (next === visible()) return
+  if (next) {
+    emit('beforeEnter')
+    shouldRender.set(true)
+    visible.set(true)
+    isEntering.set(true)
+    setTimeout(() => emit('enter'), delay)
+    setTimeout(() => {
+      isEntering.set(false)
+      emit('afterEnter')
+    }, duration + delay)
+  }
+  else {
+    emit('beforeLeave')
+    visible.set(false)
+    isLeaving.set(true)
+    setTimeout(() => emit('leave'), delay)
+    setTimeout(() => {
+      isLeaving.set(false)
+      shouldRender.set(false)
+      emit('afterLeave')
+    }, duration + delay)
+  }
+}
+
+onMount(() => {
+  if (appear && showProp) {
+    setTimeout(() => isEntering.set(false), duration + delay)
+  }
+})
+
+defineExpose({ visible, setShow })
+</script>
+
+<div :show="shouldRender()" :class="componentClass()" style="{{ durationStyle }}">
+  <slot />
+</div>

package/dist/{TwoFactorChallenge-an9yvxvq.stx → TwoFactorChallenge-y5m3nk79.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/dist/{Video-crxva65p.stx → Video-84j4pv6h.stx}

@@ -31,10 +31,10 @@ export const aspectRatioClass = aspectRatio === '16/9' ? 'aspect-video' : aspect
       class="{{ videoClasses }}"
       src="{{ src }}"
       poster="{{ poster }}"
-      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 }}"
       width="{{ width }}"
       height="{{ height }}"