@stacksjs/components 0.2.35 → 0.2.54

package/src/ui/image/Image.stx

@@ -10,18 +10,14 @@ export const height = $props.height
 export const lazy = $props.lazy ?? true
 export const placeholder = $props.placeholder || 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300"%3E%3Crect fill="%23e5e7eb" width="400" height="300"/%3E%3C/svg%3E'
 export const blurDataURL = $props.blurDataURL || ''
-export const onLoad = $props.onLoad
-export const onError = $props.onError
 export const aspectRatio = $props.aspectRatio
 export const objectFit = $props.objectFit || 'cover'
 export const rounded = $props.rounded ?? false
 export const zoomOnHover = $props.zoomOnHover || false
 export const className = $props.className || ''
 
-// Has WebP support
-export const hasWebP = webpSrc || webpSrcSet
+export const hasWebP = !!(webpSrc || webpSrcSet)
 
-// Object fit classes
 const objectFitClasses = {
   contain: 'object-contain',
   cover: 'object-cover',
@@ -30,23 +26,69 @@ const objectFitClasses = {
   'scale-down': 'object-scale-down',
 }
 
-// Rounded classes
 const roundedClass = rounded === true ? 'rounded-lg' : rounded === 'full' ? 'rounded-full' : rounded ? `rounded-${rounded}` : ''
-
 const zoomClasses = zoomOnHover ? 'transform hover:scale-110 transition-transform duration-300 ease-in-out cursor-zoom-in' : ''
 
 export const containerClasses = `relative overflow-hidden ${roundedClass} ${className}`.trim()
 export const imageClasses = `w-full h-full transition-opacity duration-300 ${objectFitClasses[objectFit]} ${zoomClasses}`.trim()
-export const placeholderClasses = `absolute inset-0 bg-gray-200 dark:bg-gray-700 ${roundedClass}`.trim()
 export const blurPlaceholderClasses = `absolute inset-0 ${roundedClass} filter blur-lg scale-110`.trim()
+export const containerStyle = aspectRatio ? `padding-bottom: ${(1 / aspectRatio) * 100}%` : ''
+</script>
+
+<script client>
+const emit = defineEmits()
+const lazy = {{ lazy }}
+const realSrc = {{ src }}
+const realSrcSet = {{ srcSet }}
+const errorPlaceholder = 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300"%3E%3Crect fill="%23e5e7eb" width="400" height="300"/%3E%3Ctext x="50%25" y="50%25" fill="%239ca3af" font-size="16" text-anchor="middle" dominant-baseline="middle"%3EImage not found%3C/text%3E%3C/svg%3E'
+
+function onImageLoad(event) {
+  const img = event.target
+  img.classList.remove('opacity-0')
+  img.classList.add('opacity-100')
+  emit('load', event)
+}
 
-// Generate aspect ratio padding if provided
-export const paddingBottom = aspectRatio ? `${(1 / aspectRatio) * 100}%` : undefined
+function onImageError(event) {
+  const img = event.target
+  img.src = errorPlaceholder
+  emit('error', event)
+}
+
+onMount(() => {
+  if (!lazy) return
+  if (typeof IntersectionObserver === 'undefined') return
+  const lazyImages = document.querySelectorAll('.lazy-image:not([data-stx-img-loaded])')
+  const observer = new IntersectionObserver((entries, obs) => {
+    for (const entry of entries) {
+      if (!entry.isIntersecting) continue
+      const img = entry.target
+      img.setAttribute('data-stx-img-loaded', '1')
+      const dataSrc = img.getAttribute('data-src')
+      const dataSrcSet = img.getAttribute('data-srcset')
+      if (!dataSrc) continue
+      const probe = new Image()
+      probe.onload = () => {
+        img.src = dataSrc
+        if (dataSrcSet) img.srcset = dataSrcSet
+        img.classList.remove('opacity-0')
+        img.classList.add('opacity-100')
+        obs.unobserve(img)
+      }
+      probe.onerror = () => {
+        onImageError({ target: img })
+        obs.unobserve(img)
+      }
+      probe.src = dataSrc
+      if (dataSrcSet) probe.srcset = dataSrcSet
+    }
+  }, { rootMargin: '50px' })
+  for (const img of lazyImages) observer.observe(img)
+})
 </script>
 
-<div class="{{ containerClasses }}" style="{{ paddingBottom ? `padding-bottom: ${paddingBottom}` : '' }}">
+<div class="{{ containerClasses }}" style="{{ containerStyle }}">
   @if(blurDataURL)
-    <!-- Blur placeholder -->
     <img
       src="{{ blurDataURL }}"
       alt=""
@@ -56,17 +98,13 @@ export const paddingBottom = aspectRatio ? `${(1 / aspectRatio) * 100}%` : undef
   @endif
 
   @if(hasWebP)
-    <!-- Picture element with WebP support -->
     <picture>
-      @if(webpSrcSet || webpSrc)
-        <source
-          type="image/webp"
-          @if(webpSrcSet)srcset="{{ webpSrcSet }}"@endif
-          @if(webpSrc && !webpSrcSet)srcset="{{ webpSrc }}"@endif
-          @if(sizes)sizes="{{ sizes }}"@endif
-        />
-      @endif
-
+      <source
+        type="image/webp"
+        @if(webpSrcSet)srcset="{{ webpSrcSet }}"@endif
+        @if(webpSrc && !webpSrcSet)srcset="{{ webpSrc }}"@endif
+        @if(sizes)sizes="{{ sizes }}"@endif
+      />
       @if(lazy)
         <img
           src="{{ placeholder }}"
@@ -78,8 +116,8 @@ export const paddingBottom = aspectRatio ? `${(1 / aspectRatio) * 100}%` : undef
           width="{{ width }}"
           height="{{ height }}"
           loading="lazy"
-          onload="handleImageLoad(event)"
-          onerror="handleImageError(event)"
+          @load="onImageLoad($event)"
+          @error="onImageError($event)"
         />
       @else
         <img
@@ -90,13 +128,12 @@ export const paddingBottom = aspectRatio ? `${(1 / aspectRatio) * 100}%` : undef
           class="{{ imageClasses }}"
           width="{{ width }}"
           height="{{ height }}"
-          onload="handleImageLoad(event)"
-          onerror="handleImageError(event)"
+          @load="onImageLoad($event)"
+          @error="onImageError($event)"
         />
       @endif
     </picture>
   @else
-    <!-- Regular img element -->
     @if(lazy)
       <img
         src="{{ placeholder }}"
@@ -108,8 +145,8 @@ export const paddingBottom = aspectRatio ? `${(1 / aspectRatio) * 100}%` : undef
         width="{{ width }}"
         height="{{ height }}"
         loading="lazy"
-        onload="handleImageLoad(event)"
-        onerror="handleImageError(event)"
+        @load="onImageLoad($event)"
+        @error="onImageError($event)"
       />
     @else
       <img
@@ -120,78 +157,9 @@ export const paddingBottom = aspectRatio ? `${(1 / aspectRatio) * 100}%` : undef
         class="{{ imageClasses }}"
         width="{{ width }}"
         height="{{ height }}"
-        onload="handleImageLoad(event)"
-        onerror="handleImageError(event)"
+        @load="onImageLoad($event)"
+        @error="onImageError($event)"
       />
     @endif
   @endif
-
-  <!-- Loading skeleton -->
-  <div class="{{ placeholderClasses }} skeleton" style="display: none;">
-    <div class="animate-pulse w-full h-full bg-gray-300 dark:bg-gray-600"></div>
-  </div>
 </div>
-
-<script>
-// Intersection Observer for lazy loading
-if (lazy && typeof window !== 'undefined' && 'IntersectionObserver' in window) {
-  const lazyImages = document.querySelectorAll('.lazy-image')
-
-  const imageObserver = new IntersectionObserver((entries, observer) => {
-    entries.forEach(entry => {
-      if (entry.isIntersecting) {
-        const img = entry.target
-        const realSrc = img.getAttribute('data-src')
-        const realSrcSet = img.getAttribute('data-srcset')
-
-        if (realSrc) {
-          // Load the real image
-          const tempImg = new Image()
-          tempImg.onload = () => {
-            img.src = realSrc
-            if (realSrcSet) {
-              img.srcset = realSrcSet
-            }
-            img.classList.remove('opacity-0')
-            img.classList.add('opacity-100')
-            observer.unobserve(img)
-          }
-          tempImg.onerror = () => {
-            handleImageError({ target: img })
-            observer.unobserve(img)
-          }
-          tempImg.src = realSrc
-          if (realSrcSet) {
-            tempImg.srcset = realSrcSet
-          }
-        }
-      }
-    })
-  }, {
-    rootMargin: '50px', // Start loading 50px before entering viewport
-  })
-
-  lazyImages.forEach(img => imageObserver.observe(img))
-}
-
-function handleImageLoad(event) {
-  const img = event.target
-  img.classList.remove('opacity-0')
-  img.classList.add('opacity-100')
-
-  if (onLoad) {
-    onLoad(event)
-  }
-}
-
-function handleImageError(event) {
-  const img = event.target
-
-  // Show a broken image placeholder
-  img.src = 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300"%3E%3Crect fill="%23e5e7eb" width="400" height="300"/%3E%3Ctext x="50%25" y="50%25" fill="%239ca3af" font-size="16" text-anchor="middle" dominant-baseline="middle"%3EImage not found%3C/text%3E%3C/svg%3E'
-
-  if (onError) {
-    onError(event)
-  }
-}
-</script>

package/src/ui/input/EmailInput.stx

@@ -1,6 +1,5 @@
 <script server>
 export const value = $props.value || ''
-export const onChange = $props.onChange || (() => {})
 export const placeholder = $props.placeholder || 'Enter your email'
 export const disabled = $props.disabled || false
 export const readonly = $props.readonly || false
@@ -11,31 +10,21 @@ export const helperText = $props.helperText || ''
 export const required = $props.required || false
 export const className = $props.className || ''
 
-// Email icon SVG
-const emailIcon = '<svg fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /></svg>'
+export const emailIcon = '<svg fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /></svg>'
 </script>
 
-@component('TextInput', {
-  value,
-  onChange,
-  placeholder,
-  disabled,
-  readonly,
-  size,
-  error,
-  label,
-  helperText,
-  required,
-  leftIcon: emailIcon,
-  clearable: true,
-  className,
-  inputClassName: 'font-mono'
-})
-@endcomponent
-
-<script>
-// Add additional email validation logic if needed
-function validateEmail(email) {
-  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)
-}
-</script>
+<TextInput
+  :value="value"
+  :placeholder="placeholder"
+  :disabled="disabled"
+  :readonly="readonly"
+  :size="size"
+  :error="error"
+  :label="label"
+  :helperText="helperText"
+  :required="required"
+  :leftIcon="emailIcon"
+  :clearable="true"
+  :className="className"
+  inputClassName="font-mono"
+/>

package/src/ui/input/NumberInput.stx

@@ -1,6 +1,5 @@
 <script server>
 export const value = $props.value || ''
-export const onChange = $props.onChange || (() => {})
 export const placeholder = $props.placeholder || '0'
 export const disabled = $props.disabled || false
 export const readonly = $props.readonly || false
@@ -16,26 +15,16 @@ export const showControls = $props.showControls ?? true
 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',
-}
-
-// Base and state 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' }
 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 = showControls ? 'pr-10' : ''
 
 export const inputClasses = `${baseClasses} ${sizeClasses[size]} ${stateClasses} ${disabledClasses} ${paddingClasses} ${inputClassName}`.trim()
@@ -43,6 +32,37 @@ 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 stepSize = {{ step }}
+const minVal = {{ min === undefined ? 'undefined' : min }}
+const maxVal = {{ max === undefined ? 'undefined' : max }}
+const inputValue = state({{ value }})
+
+function onInput(event) {
+  inputValue.set(event.target.value)
+  emit('input', inputValue())
+}
+
+function increment() {
+  const current = Number.parseFloat(inputValue()) || 0
+  const next = current + stepSize
+  if (maxVal !== undefined && next > maxVal) return
+  inputValue.set(String(next))
+  emit('input', String(next))
+}
+
+function decrement() {
+  const current = Number.parseFloat(inputValue()) || 0
+  const next = current - stepSize
+  if (minVal !== undefined && next < minVal) return
+  inputValue.set(String(next))
+  emit('input', String(next))
+}
+
+defineExpose({ value: inputValue, increment, decrement })
+</script>
+
 <div class="w-full {{ className }}">
   @if(label)
     <label for="number-input" class="{{ labelClasses }}">
@@ -58,25 +78,24 @@ export const helperClasses = `mt-2 text-sm ${error ? 'text-red-600 dark:text-red
       type="number"
       id="number-input"
       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(min !== undefined)min="{{ min }}"@endif
       @if(max !== undefined)max="{{ max }}"@endif
       step="{{ step }}"
-      oninput="handleInput(event)"
-      aria-invalid="{{ error ? 'true' : 'false' }}"
+      @input="onInput($event)"
+      :aria-invalid="{{ error ? 'true' : 'false' }}"
       @if(helperText)aria-describedby="helper-text"@endif
     />
 
     @if(showControls && !disabled && !readonly)
-      <!-- Increment/Decrement controls -->
       <div class="absolute inset-y-0 right-0 flex flex-col">
         <button
           type="button"
-          @click="handleIncrement()"
+          @click="increment()"
           class="flex items-center justify-center w-8 h-1/2 text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 focus:outline-none border-b border-gray-300 dark:border-gray-600"
           aria-label="Increment"
         >
@@ -86,7 +105,7 @@ export const helperClasses = `mt-2 text-sm ${error ? 'text-red-600 dark:text-red
         </button>
         <button
           type="button"
-          @click="handleDecrement()"
+          @click="decrement()"
           class="flex items-center justify-center w-8 h-1/2 text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 focus:outline-none"
           aria-label="Decrement"
         >
@@ -104,35 +123,3 @@ export const helperClasses = `mt-2 text-sm ${error ? 'text-red-600 dark:text-red
     </p>
   @endif
 </div>
-
-<script>
-function handleInput(event) {
-  const newValue = event.target.value
-
-  if (onChange) {
-    onChange(newValue)
-  }
-}
-
-function handleIncrement() {
-  const currentValue = parseFloat(value) || 0
-  const newValue = currentValue + step
-
-  if (max !== undefined && newValue > max) return
-
-  if (onChange) {
-    onChange(String(newValue))
-  }
-}
-
-function handleDecrement() {
-  const currentValue = parseFloat(value) || 0
-  const newValue = currentValue - step
-
-  if (min !== undefined && newValue < min) return
-
-  if (onChange) {
-    onChange(String(newValue))
-  }
-}
-</script>

package/src/ui/input/PasswordInput.stx

@@ -1,6 +1,5 @@
 <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
@@ -13,30 +12,13 @@ export const showStrength = $props.showStrength || false
 export const className = $props.className || ''
 export const inputClassName = $props.inputClassName || ''
 
-// State
-let showPassword = false
+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' }
 
-// 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
@@ -47,22 +29,50 @@ export const inputClasses = `${baseClasses} ${sizeClasses[size]} ${stateClasses}
 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]
+</script>
+
+<script client>
+const emit = defineEmits()
+const showPassword = state(false)
+const inputValue = state({{ value }})
+
+function onInput(event) {
+  inputValue.set(event.target.value)
+  emit('input', inputValue())
+}
 
-// 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)
+function toggleVisibility() {
+  showPassword.set(!showPassword())
+}
+
+function calcStrength(pw) {
+  if (!pw) return 0
+  let s = 0
+  if (pw.length >= 8) s += 25
+  if (pw.length >= 12) s += 25
+  if (/[a-z]/.test(pw) && /[A-Z]/.test(pw)) s += 25
+  if (/\d/.test(pw)) s += 15
+  if (/[^a-zA-Z\d]/.test(pw)) s += 10
+  return Math.min(s, 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'
+const strength = derived(() => calcStrength(inputValue()))
+const strengthText = derived(() => {
+  const s = strength()
+  return s < 40 ? 'Weak' : s < 70 ? 'Medium' : 'Strong'
+})
+const strengthColor = derived(() => {
+  const s = strength()
+  return s < 40 ? 'bg-red-500' : s < 70 ? 'bg-yellow-500' : 'bg-green-500'
+})
+const strengthLabelColor = derived(() => {
+  const s = strength()
+  return s < 40 ? 'text-red-600' : s < 70 ? 'text-yellow-600' : 'text-green-600'
+})
+const inputType = derived(() => showPassword() ? 'text' : 'password')
+const toggleAriaLabel = derived(() => showPassword() ? 'Hide password' : 'Show password')
+
+defineExpose({ value: inputValue })
 </script>
 
 <div class="w-full {{ className }}">
@@ -77,56 +87,48 @@ export const strengthText = strength < 40 ? 'Weak' : strength < 70 ? 'Medium' :
 
   <div class="relative">
     <input
-      type="{{ showPassword ? 'text' : 'password' }}"
+      :type="inputType()"
       id="password-input"
       class="{{ inputClasses }}"
-      value="{{ value }}"
+      :value="inputValue()"
       placeholder="{{ placeholder }}"
-      disabled="{{ disabled }}"
-      readonly="{{ readonly }}"
-      required="{{ required }}"
-      oninput="handleInput(event)"
-      aria-invalid="{{ error ? 'true' : 'false' }}"
+      @if(disabled)disabled@endif
+      @if(readonly)readonly@endif
+      @if(required)required@endif
+      @input="onInput($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' }}"
+        :aria-label="toggleAriaLabel()"
       >
-        @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
+        <svg :show="showPassword()" 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>
+        <svg :show="!showPassword()" 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>
       </button>
     </div>
   </div>
 
-  @if(showStrength && value.length > 0)
-    <!-- Password strength indicator -->
-    <div class="mt-2">
+  @if(showStrength)
+    <div :show="inputValue().length > 0" 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>
+        <span class="text-xs font-medium" :class="strengthLabelColor()" x-text="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 }}%"
+          class="h-full transition-all duration-300 rounded-full"
+          :class="strengthColor()"
+          :style="`width: ${strength()}%`"
         ></div>
       </div>
     </div>
@@ -138,18 +140,3 @@ export const strengthText = strength < 40 ? 'Weak' : strength < 70 ? 'Medium' :
     </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>