@stacksjs/components 0.2.3

package/src/ui/image/Image.stx

@@ -0,0 +1,197 @@
+<script>
+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 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
+
+// Object fit classes
+const objectFitClasses = {
+  contain: 'object-contain',
+  cover: 'object-cover',
+  fill: 'object-fill',
+  none: 'object-none',
+  '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()
+
+// Generate aspect ratio padding if provided
+export const paddingBottom = aspectRatio ? `${(1 / aspectRatio) * 100}%` : undefined
+</script>
+
+<div class="{{ containerClasses }}" style="{{ paddingBottom ? `padding-bottom: ${paddingBottom}` : '' }}">
+  @if(blurDataURL)
+    <!-- Blur placeholder -->
+    <img
+      src="{{ blurDataURL }}"
+      alt=""
+      class="{{ blurPlaceholderClasses }}"
+      aria-hidden="true"
+    />
+  @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
+
+      @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"
+          onload="handleImageLoad(event)"
+          onerror="handleImageError(event)"
+        />
+      @else
+        <img
+          src="{{ src }}"
+          @if(srcSet)srcset="{{ srcSet }}"@endif
+          @if(sizes)sizes="{{ sizes }}"@endif
+          alt="{{ alt }}"
+          class="{{ imageClasses }}"
+          width="{{ width }}"
+          height="{{ height }}"
+          onload="handleImageLoad(event)"
+          onerror="handleImageError(event)"
+        />
+      @endif
+    </picture>
+  @else
+    <!-- Regular img element -->
+    @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"
+        onload="handleImageLoad(event)"
+        onerror="handleImageError(event)"
+      />
+    @else
+      <img
+        src="{{ src }}"
+        @if(srcSet)srcset="{{ srcSet }}"@endif
+        @if(sizes)sizes="{{ sizes }}"@endif
+        alt="{{ alt }}"
+        class="{{ imageClasses }}"
+        width="{{ width }}"
+        height="{{ height }}"
+        onload="handleImageLoad(event)"
+        onerror="handleImageError(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/image/README.md

@@ -0,0 +1,171 @@
+# Image Component
+
+An optimized image component with lazy loading, placeholders, and responsive features.
+
+## Installation
+
+```bash
+bun add @stacksjs/components
+```
+
+## Usage
+
+### Basic Image
+
+```stx
+@component('Image', {
+  src: '/path/to/image.jpg',
+  alt: 'Description of image',
+  width: 400,
+  height: 300
+})
+@endcomponent
+```
+
+### Lazy Loading (default)
+
+```stx
+@component('Image', {
+  src: '/large-image.jpg',
+  alt: 'Large image',
+  lazy: true,
+  placeholder: '/thumbnail.jpg'
+})
+@endcomponent
+```
+
+### Aspect Ratio
+
+```stx
+@component('Image', {
+  src: '/hero.jpg',
+  alt: 'Hero image',
+  aspectRatio: 16/9,
+  objectFit: 'cover'
+})
+@endcomponent
+```
+
+### Rounded Images
+
+```stx
+<!-- Rounded corners -->
+@component('Image', {
+  src: '/avatar.jpg',
+  alt: 'Avatar',
+  rounded: true
+})
+@endcomponent
+
+<!-- Circular -->
+@component('Image', {
+  src: '/profile.jpg',
+  alt: 'Profile',
+  rounded: 'full'
+})
+@endcomponent
+```
+
+### With Callbacks
+
+```stx
+<script>
+export const handleLoad = () => {
+  console.log('Image loaded!')
+}
+
+export const handleError = () => {
+  console.error('Failed to load image')
+}
+</script>
+
+@component('Image', {
+  src: '/photo.jpg',
+  alt: 'Photo',
+  onLoad: handleLoad,
+  onError: handleError
+})
+@endcomponent
+```
+
+## 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)
+    @component('Image', {
+      src: image.url,
+      alt: image.description,
+      aspectRatio: 1,
+      objectFit: 'cover',
+      rounded: true,
+      lazy: true
+    })
+    @endcomponent
+  @endforeach
+</div>
+```

package/src/ui/image/index.ts

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,41 @@
+<script>
+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
+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 || ''
+
+// 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>'
+</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>

package/src/ui/input/NumberInput.stx

@@ -0,0 +1,138 @@
+<script>
+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
+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 || ''
+
+// 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 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>
+
+<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="{{ value }}"
+      placeholder="{{ placeholder }}"
+      disabled="{{ disabled }}"
+      readonly="{{ readonly }}"
+      required="{{ required }}"
+      @if(min !== undefined)min="{{ min }}"@endif
+      @if(max !== undefined)max="{{ max }}"@endif
+      step="{{ step }}"
+      oninput="handleInput(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"
+          onclick="handleIncrement()"
+          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"
+          onclick="handleDecrement()"
+          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>
+
+<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>