@stacksjs/components 0.2.93 → 0.2.94

package/src/ui/image/Image.stx

@@ -1,165 +0,0 @@
-<script server>
-export const src = $props.src || ''
-export const srcSet = $props.srcSet || ''
-export const sizes = $props.sizes || ''
-export const webpSrc = $props.webpSrc || ''
-export const webpSrcSet = $props.webpSrcSet || ''
-export const alt = $props.alt || ''
-export const width = $props.width
-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 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 || ''
-
-export const hasWebP = !!(webpSrc || webpSrcSet)
-
-const objectFitClasses = {
-  contain: 'object-contain',
-  cover: 'object-cover',
-  fill: 'object-fill',
-  none: 'object-none',
-  'scale-down': 'object-scale-down',
-}
-
-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 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)
-}
-
-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="{{ containerStyle }}">
-  @if(blurDataURL)
-    <img
-      src="{{ blurDataURL }}"
-      alt=""
-      class="{{ blurPlaceholderClasses }}"
-      aria-hidden="true"
-    />
-  @endif
-
-  @if(hasWebP)
-    <picture>
-      <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 }}"
-          data-src="{{ src }}"
-          @if(srcSet)data-srcset="{{ srcSet }}"@endif
-          @if(sizes)sizes="{{ sizes }}"@endif
-          alt="{{ alt }}"
-          class="{{ imageClasses }} lazy-image opacity-0"
-          width="{{ width }}"
-          height="{{ height }}"
-          loading="lazy"
-          @load="onImageLoad($event)"
-          @error="onImageError($event)"
-        />
-      @else
-        <img
-          src="{{ src }}"
-          @if(srcSet)srcset="{{ srcSet }}"@endif
-          @if(sizes)sizes="{{ sizes }}"@endif
-          alt="{{ alt }}"
-          class="{{ imageClasses }}"
-          width="{{ width }}"
-          height="{{ height }}"
-          @load="onImageLoad($event)"
-          @error="onImageError($event)"
-        />
-      @endif
-    </picture>
-  @else
-    @if(lazy)
-      <img
-        src="{{ placeholder }}"
-        data-src="{{ src }}"
-        @if(srcSet)data-srcset="{{ srcSet }}"@endif
-        @if(sizes)sizes="{{ sizes }}"@endif
-        alt="{{ alt }}"
-        class="{{ imageClasses }} lazy-image opacity-0"
-        width="{{ width }}"
-        height="{{ height }}"
-        loading="lazy"
-        @load="onImageLoad($event)"
-        @error="onImageError($event)"
-      />
-    @else
-      <img
-        src="{{ src }}"
-        @if(srcSet)srcset="{{ srcSet }}"@endif
-        @if(sizes)sizes="{{ sizes }}"@endif
-        alt="{{ alt }}"
-        class="{{ imageClasses }}"
-        width="{{ width }}"
-        height="{{ height }}"
-        @load="onImageLoad($event)"
-        @error="onImageError($event)"
-      />
-    @endif
-  @endif
-</div>

package/src/ui/image/README.md

@@ -1,164 +0,0 @@
-# Image Component
-
-An optimized image component with lazy loading, placeholders, and responsive features.
-
-## Installation
-
-```bash
-bun add @stacksjs/components
-```
-
-## Usage
-
-### Basic Image
-
-```stx
-<Image
-  src="/path/to/image.jpg"
-  alt="Description of image"
-  :width="400"
-  :height="300"
-/>
-```
-
-### Lazy Loading (default)
-
-```stx
-<Image
-  src="/large-image.jpg"
-  alt="Large image"
-  lazy
-  placeholder="/thumbnail.jpg"
-/>
-```
-
-### Aspect Ratio
-
-```stx
-<Image
-  src="/hero.jpg"
-  alt="Hero image"
-  :aspectRatio="16/9"
-  objectFit="cover"
-/>
-```
-
-### Rounded Images
-
-```stx
-<!-- Rounded corners -->
-<Image
-  src="/avatar.jpg"
-  alt="Avatar"
-  rounded
-/>
-
-<!-- Circular -->
-<Image
-  src="/profile.jpg"
-  alt="Profile"
-  rounded="full"
-/>
-```
-
-### With Callbacks
-
-```stx
-<script server>
-const handleLoad = () => {
-  console.log('Image loaded!')
-}
-
-const handleError = () => {
-  console.error('Failed to load image')
-}
-</script>
-
-<Image
-  src="/photo.jpg"
-  alt="Photo"
-  :onLoad="handleLoad"
-  :onError="handleError"
-/>
-```
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `src` | `string` | - | Image source URL (required) |
-| `alt` | `string` | - | Alt text (required) |
-| `width` | `number \| string` | - | Image width |
-| `height` | `number \| string` | - | Image height |
-| `lazy` | `boolean` | `true` | Enable lazy loading |
-| `placeholder` | `string` | gray SVG | Placeholder image while loading |
-| `onLoad` | `function` | - | Callback when image loads |
-| `onError` | `function` | - | Callback when image fails |
-| `aspectRatio` | `number` | - | Aspect ratio (e.g., 16/9, 4/3) |
-| `objectFit` | `'contain' \| 'cover' \| 'fill' \| 'none' \| 'scale-down'` | `'cover'` | How image fits container |
-| `rounded` | `boolean \| 'full' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'` | `false` | Border radius |
-| `className` | `string` | `''` | Additional CSS classes |
-
-## Features
-
-- **Lazy loading** - Loads images only when visible (Intersection Observer)
-- **Placeholders** - Shows placeholder until image loads
-- **Aspect ratio** - Maintains aspect ratio to prevent layout shift
-- **Object fit** - Control how images fill their container
-- **Responsive** - Adapts to container size
-- **Error handling** - Shows fallback on load failure
-- **Dark mode** - Skeleton loader adapts to dark mode
-- **Smooth transitions** - Fade-in effect on load
-- **Performance** - Optimized with intersection observer
-- **Modern ES modules** - Clean export syntax
-- **Headwind styling** - Utility-first CSS classes
-
-## Object Fit Options
-
-- `contain` - Image fits within container, maintains aspect ratio
-- `cover` - Image covers container, may crop
-- `fill` - Image stretches to fill container
-- `none` - Image maintains original size
-- `scale-down` - Uses smallest of `none` or `contain`
-
-## Rounded Options
-
-- `true` - `rounded-lg` (8px)
-- `'full'` - `rounded-full` (fully circular)
-- `'sm'` - `rounded-sm` (2px)
-- `'md'` - `rounded-md` (6px)
-- `'lg'` - `rounded-lg` (8px)
-- `'xl'` - `rounded-xl` (12px)
-- `'2xl'` - `rounded-2xl` (16px)
-
-## Accessibility
-
-- Always provide meaningful `alt` text
-- Component automatically handles loading states
-- Error states show user-friendly fallback
-- Works without JavaScript (progressive enhancement)
-
-## Performance Tips
-
-1. Use `aspectRatio` to prevent layout shift
-2. Enable `lazy` loading for below-the-fold images
-3. Provide appropriate `width` and `height`
-4. Use appropriate image formats (WebP, AVIF)
-5. Optimize images before upload
-
-## Example: Image Gallery
-
-```stx
-<div class="grid grid-cols-3 gap-4">
-  @foreach(image in images)
-    <Image
-      :src="image.url"
-      :alt="image.description"
-      :aspectRatio="1"
-      objectFit="cover"
-      rounded
-      lazy
-    />
-  @endforeach
-</div>
-```

package/src/ui/image/index.ts

@@ -1,22 +0,0 @@
-export { default as Image } from './Image.stx'
-
-export interface ImageProps {
-  src: string
-  srcSet?: string
-  sizes?: string
-  webpSrc?: string
-  webpSrcSet?: string
-  alt: string
-  width?: number | string
-  height?: number | string
-  lazy?: boolean
-  placeholder?: string
-  blurDataURL?: string
-  onLoad?: (event: Event) => void
-  onError?: (event: Event) => void
-  aspectRatio?: number
-  objectFit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down'
-  rounded?: boolean | 'full' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
-  zoomOnHover?: boolean
-  className?: string
-}

package/src/ui/input/EmailInput.stx

@@ -1,30 +0,0 @@
-<script server>
-export const value = $props.value || ''
-export const placeholder = $props.placeholder || 'Enter your email'
-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 className = $props.className || ''
-
-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>
-
-<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,126 +0,0 @@
-<script server>
-export const value = $props.value || ''
-export const placeholder = $props.placeholder || '0'
-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 min = $props.min
-export const max = $props.max
-export const step = $props.step || 1
-export const showControls = $props.showControls ?? true
-export const className = $props.className || ''
-export const inputClassName = $props.inputClassName || ''
-
-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()
-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()
-</script>
-
-<script client>
-const emit = defineEmits()
-const stepSize = {{ step }}
-const minVal = {{ min === undefined ? 'undefined' : min }}
-const maxVal = {{ max === undefined ? 'undefined' : max }}
-// Reactive prop binding — parent can drive value via signals. See #1704.
-const inputValue = useReactiveProp('value', {{ value }}, { parse: (v) => v == null || v === '' ? '' : String(v) })
-
-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 }}">
-      {{ label }}
-      @if(required)
-        <span class="text-red-500 ml-1">*</span>
-      @endif
-    </label>
-  @endif
-
-  <div class="relative">
-    <input
-      type="number"
-      id="number-input"
-      class="{{ inputClasses }}"
-      :value="inputValue()"
-      placeholder="{{ placeholder }}"
-      @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 }}"
-      @input="onInput($event)"
-      :aria-invalid="{{ error ? 'true' : 'false' }}"
-      @if(helperText)aria-describedby="helper-text"@endif
-    />
-
-    @if(showControls && !disabled && !readonly)
-      <div class="absolute inset-y-0 right-0 flex flex-col">
-        <button
-          type="button"
-          @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"
-        >
-          <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7" />
-          </svg>
-        </button>
-        <button
-          type="button"
-          @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"
-        >
-          <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
-          </svg>
-        </button>
-      </div>
-    @endif
-  </div>
-
-  @if(helperText)
-    <p id="helper-text" class="{{ helperClasses }}">
-      {{ helperText }}
-    </p>
-  @endif
-</div>

package/src/ui/input/PasswordInput.stx

@@ -1,143 +0,0 @@
-<script server>
-export const value = $props.value || ''
-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 || ''
-
-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' }
-
-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]
-</script>
-
-<script client>
-const emit = defineEmits()
-const showPassword = state(false)
-// Reactive prop binding — parent can drive value via signals. See #1704.
-const inputValue = useReactiveProp('value', {{ value }}, { parse: (v) => v == null ? '' : String(v) })
-
-function onInput(event) {
-  inputValue.set(event.target.value)
-  emit('input', inputValue())
-}
-
-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)
-}
-
-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 }}">
-  @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="inputType()"
-      id="password-input"
-      class="{{ inputClasses }}"
-      :value="inputValue()"
-      placeholder="{{ placeholder }}"
-      @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
-    />
-
-    <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="toggleAriaLabel()"
-      >
-        <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)
-    <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" :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="h-full transition-all duration-300 rounded-full"
-          :class="strengthColor()"
-          :style="`width: ${strength()}%`"
-        ></div>
-      </div>
-    </div>
-  @endif
-
-  @if(helperText)
-    <p id="helper-text" class="{{ helperClasses }}">
-      {{ helperText }}
-    </p>
-  @endif
-</div>