@stacksjs/components 0.2.92 → 0.2.94

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>

package/src/ui/input/SearchInput.stx

@@ -1,44 +0,0 @@
-<script server>
-export const value = $props.value || ''
-export const placeholder = $props.placeholder || 'Search...'
-export const disabled = $props.disabled || 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 loading = $props.loading || false
-export const className = $props.className || ''
-
-export const searchIcon = '<svg fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg>'
-export const spinnerIcon = '<svg class="animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>'
-export const rightIcon = loading ? spinnerIcon : ''
-</script>
-
-<script client>
-const emit = defineEmits()
-let searchTimeout = null
-
-function onSearchInput(event) {
-  const target = event.target
-  const value = target?.value ?? event.detail
-  if (searchTimeout) clearTimeout(searchTimeout)
-  searchTimeout = setTimeout(() => emit('search', value), 300)
-}
-</script>
-
-<div @input="onSearchInput($event)">
-  <TextInput
-    :value="value"
-    :placeholder="placeholder"
-    :disabled="disabled"
-    :size="size"
-    :error="error"
-    :label="label"
-    :helperText="helperText"
-    :leftIcon="searchIcon"
-    :rightIcon="rightIcon"
-    :clearable="!loading"
-    :className="className"
-    inputClassName="pr-20"
-  />
-</div>

package/src/ui/input/TextInput.stx

@@ -1,132 +0,0 @@
-<script server>
-export const value = $props.value || ''
-export const placeholder = $props.placeholder || ''
-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 leftIcon = $props.leftIcon || ''
-export const rightIcon = $props.rightIcon || ''
-export const clearable = $props.clearable || false
-export const maxLength = $props.maxLength
-export const showCount = $props.showCount || 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'
-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 inputId = `input-${label}`
-</script>
-
-<script client>
-const emit = defineEmits()
-// Reactive prop binding so the parent can drive `value` via signals.
-// Parent listens to @input to push user changes back into its signal.
-// See stacksjs/stx#1704.
-const inputValue = useReactiveProp('value', {{ value }}, { parse: (v) => v == null ? '' : String(v) })
-
-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="{{ inputId }}" class="{{ labelClasses }}">
-      {{ label }}
-      @if(required)
-        <span class="text-red-500 ml-1">*</span>
-      @endif
-    </label>
-  @endif
-
-  <div class="relative">
-    @if(leftIcon)
-      <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">{!! leftIcon !!}</span>
-      </div>
-    @endif
-
-    <input
-      type="text"
-      id="{{ inputId }}"
-      class="{{ inputClasses }}"
-      :value="inputValue()"
-      placeholder="{{ placeholder }}"
-      @if(disabled)disabled@endif
-      @if(readonly)readonly@endif
-      @if(required)required@endif
-      @if(maxLength)maxlength="{{ maxLength }}"@endif
-      @input="onInput($event)"
-      :aria-invalid="{{ error ? 'true' : 'false' }}"
-      @if(helperText)aria-describedby="helper-text"@endif
-    />
-
-    @if(clearable)
-      <div :show="hasValue() && !{{ disabled }} && !{{ readonly }}" class="absolute inset-y-0 right-0 flex items-center pr-3">
-        <button
-          type="button"
-          @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"
-        >
-          <svg class="{{ iconClasses }}" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-          </svg>
-        </button>
-      </div>
-    @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>
-
-  @if(helperText || (showCount && maxLength))
-    <div class="flex items-center justify-between mt-2">
-      @if(helperText)
-        <p id="helper-text" class="{{ helperClasses }}">
-          {{ helperText }}
-        </p>
-      @else
-        <span></span>
-      @endif
-
-      @if(showCount && maxLength)
-        <p class="text-sm text-gray-500 dark:text-gray-400" x-text="charCount()"></p>
-      @endif
-    </div>
-  @endif
-</div>