@stacksjs/components 0.2.3

package/dist/Dropdown-ng7nx556.stx

@@ -0,0 +1,24 @@
+<script>
+export const className = $props.className || ''
+export const as = $props.as || 'div'
+export let isOpen = false
+
+export function toggle() {
+  isOpen = !isOpen
+}
+
+export function close() {
+  isOpen = false
+}
+
+export function open() {
+  isOpen = true
+}
+
+const baseClasses = 'relative inline-block text-left'
+const dropdownClasses = `${baseClasses} ${className}`.trim()
+</script>
+
+<component :is="{{ as }}" class="{{ dropdownClasses }}">
+  <slot :isOpen="isOpen" :toggle="toggle" :close="close" :open="open" />
+</component>

package/dist/DropdownButton-vc4zpyrb.stx

@@ -0,0 +1,23 @@
+<script>
+export const className = $props.className || ''
+export const as = $props.as || 'button'
+export const disabled = $props.disabled || false
+export const onClick = $props.onClick
+
+const baseClasses = 'inline-flex justify-center items-center rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75'
+const buttonClasses = `${baseClasses} ${className}`.trim()
+
+export function handleClick(e) {
+  if (disabled) return
+  onClick?.(e)
+}
+</script>
+
+<component
+  :is="{{ as }}"
+  class="{{ buttonClasses }}"
+  @if(disabled)disabled aria-disabled="true"@endif
+  @click="handleClick"
+>
+  <slot />
+</component>

package/dist/DropdownItem-z491y23c.stx

@@ -0,0 +1,43 @@
+<script>
+export const className = $props.className || ''
+export const as = $props.as || 'div'
+export const disabled = $props.disabled || false
+export const onClick = $props.onClick
+
+export let active = false
+
+const baseClasses = 'group flex w-full items-center px-2 py-2 text-sm transition-colors'
+const stateClasses = active
+  ? 'bg-blue-500 text-white dark:bg-blue-600'
+  : 'text-neutral-900 dark:text-neutral-100'
+const disabledClasses = disabled
+  ? 'opacity-50 cursor-not-allowed'
+  : 'cursor-pointer'
+
+const itemClasses = `${baseClasses} ${stateClasses} ${disabledClasses} ${className}`.trim()
+
+export function handleClick(e) {
+  if (disabled) return
+  onClick?.(e)
+}
+
+export function handleMouseEnter() {
+  if (!disabled) active = true
+}
+
+export function handleMouseLeave() {
+  active = false
+}
+</script>
+
+<component
+  :is="{{ as }}"
+  class="{{ itemClasses }}"
+  role="menuitem"
+  @if(disabled)aria-disabled="true"@endif
+  @click="handleClick"
+  @mouseenter="handleMouseEnter"
+  @mouseleave="handleMouseLeave"
+>
+  <slot :active="active" :disabled="disabled" />
+</component>

package/dist/DropdownItems-7ykf29sj.stx

@@ -0,0 +1,18 @@
+<script>
+export const className = $props.className || ''
+export const as = $props.as || 'div'
+export const static_ = $props.static || false
+
+const baseClasses = 'absolute z-10 mt-2 origin-top-right divide-y divide-neutral-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-neutral-800 dark:divide-neutral-700 dark:ring-neutral-600'
+const itemsClasses = `${baseClasses} ${className}`.trim()
+</script>
+
+<component
+  :is="{{ as }}"
+  class="{{ itemsClasses }}"
+  role="menu"
+  aria-orientation="vertical"
+  tabindex="-1"
+>
+  <slot />
+</component>

package/dist/EmailInput-bfshpj92.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/dist/Footer-xdaf02nr.stx

@@ -0,0 +1,66 @@
+<script>
+export const author = $props.author || '@chrisbbreuer'
+export const authorUrl = $props.authorUrl || 'https://github.com/chrisbbreuer'
+export const project = $props.project || '@stacksjs'
+export const projectUrl = $props.projectUrl || 'https://github.com/stacksjs/stacks'
+export const twitterUrl = $props.twitterUrl || 'https://twitter.com/chrisbbreuer'
+export const sponsorUrl = $props.sponsorUrl || 'https://github.com/sponsors/chrisbbreuer'
+export const coffeeUrl = $props.coffeeUrl || 'https://www.buymeacoffee.com/xlbd'
+
+export const currentYear = new Date().getFullYear()
+</script>
+
+<footer class="flex items-center justify-center mt-16 w-full pb-4 text-neutral-600 dark:text-neutral-400 opacity-60">
+  <div class="flex flex-col items-center justify-center">
+    <p class="text-sm">
+      With 💙 by
+      <a href="{{ authorUrl }}" class="text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300 transition-colors">
+        {{ author }}
+      </a>
+      &
+      <a href="{{ projectUrl }}" class="text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300 transition-colors">
+        {{ project }}
+      </a>
+      <span> © {{ currentYear }}</span>
+    </p>
+
+    <div class="mt-2 flex flex-col items-center sm:flex-row space-x-1 space-y-2 sm:space-y-0">
+      <div class="flex items-center space-x-1">
+        <svg class="w-4 h-4 text-blue-500" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+          <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
+        </svg>
+        <span class="text-sm">
+          <a href="{{ twitterUrl }}" target="_blank" rel="noopener noreferrer" class="text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300 transition-colors">
+            Follow me on Twitter
+          </a>
+        </span>
+      </div>
+
+      <span class="hidden px-2 text-neutral-400 sm:block">|</span>
+
+      <div class="flex items-center space-x-1">
+        <svg class="w-4 h-4 text-blue-500" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+          <path d="M20.216 6.415l-.132-.666c-.119-.598-.388-1.163-1.001-1.379-.197-.069-.42-.098-.57-.241-.152-.143-.196-.366-.231-.572-.065-.378-.125-.756-.192-1.133-.057-.325-.102-.69-.25-.987-.195-.4-.597-.634-.996-.788a5.723 5.723 0 00-.626-.194c-1-.263-2.05-.36-3.077-.416a25.834 25.834 0 00-3.7.062c-.915.083-1.88.184-2.75.5-.318.116-.646.256-.888.501-.297.302-.393.77-.177 1.146.154.267.415.456.692.58.36.162.737.284 1.123.366 1.075.238 2.189.331 3.287.37 1.218.05 2.437.01 3.65-.118.299-.033.598-.073.896-.119.352-.054.578-.513.474-.834-.124-.383-.457-.531-.834-.473-.466.074-.96.108-1.382.146-1.177.08-2.358.082-3.536.006a22.228 22.228 0 01-1.157-.107c-.086-.01-.18-.025-.258-.036-.243-.036-.484-.08-.724-.13-.111-.027-.111-.185 0-.212h.005c.277-.06.557-.108.838-.147h.002c.131-.009.263-.032.394-.048a25.076 25.076 0 013.426-.12c.674.019 1.347.067 2.017.144l.228.031c.267.04.533.088.798.145.392.085.895.113 1.07.542.055.137.08.288.111.431l.319 1.484a.237.237 0 01-.199.284h-.003c-.037.006-.075.01-.112.015a36.704 36.704 0 01-4.743.295 37.059 37.059 0 01-4.699-.304c-.14-.017-.293-.042-.417-.06-.326-.048-.649-.108-.973-.161-.393-.065-.768-.032-1.123.161-.29.16-.527.404-.675.701-.154.316-.199.66-.267 1-.069.34-.176.707-.135 1.056.087.753.613 1.365 1.37 1.502a39.69 39.69 0 0011.343.376.483.483 0 01.535.53l-.071.697-1.018 9.907c-.041.41-.047.832-.125 1.237-.122.637-.553 1.028-1.182 1.171-.577.131-1.165.2-1.756.205-.656.004-1.31-.025-1.966-.022-.699.004-1.556-.06-2.095-.58-.475-.458-.54-1.174-.605-1.793l-.731-7.013-.322-3.094c-.037-.351-.286-.695-.678-.678-.336.015-.718.3-.678.679l.228 2.185.949 9.112c.147 1.344 1.174 2.068 2.446 2.272.742.12 1.503.144 2.257.156.966.016 1.942.053 2.892-.122 1.408-.258 2.465-1.198 2.616-2.657.34-3.332.683-6.663 1.024-9.995l.215-2.087a.484.484 0 01.39-.426c.402-.078.787-.212 1.074-.518.455-.488.546-1.124.385-1.766zm-1.478.772c-.145.137-.363.201-.578.233-2.416.359-4.866.54-7.308.46-1.748-.06-3.477-.254-5.207-.498-.17-.024-.353-.055-.47-.18-.22-.236-.111-.71-.054-.995.052-.26.152-.609.463-.646.484-.057 1.046.148 1.526.22.577.088 1.156.16 1.737.212 2.48.226 5.002.19 7.472-.14.45-.06.899-.13 1.345-.21.399-.072.84-.206 1.08.206.166.281.188.657.162.974a.544.544 0 01-.169.364zm-6.159 3.9c-.862.37-1.84.788-3.109.788a5.884 5.884 0 01-1.569-.217l.877 9.004c.065.78.717 1.38 1.5 1.38 0 0 1.243.065 1.658.065.447 0 1.786-.065 1.786-.065.783 0 1.434-.6 1.499-1.38l.94-9.95a3.996 3.996 0 00-1.322-.238c-.826 0-1.491.284-2.26.613z" />
+        </svg>
+        <span class="text-sm">
+          <a href="{{ coffeeUrl }}" target="_blank" rel="noopener noreferrer" class="text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300 transition-colors">
+            Buy me a coffee
+          </a>
+        </span>
+      </div>
+
+      <span class="hidden px-2 text-neutral-400 sm:block">|</span>
+
+      <div class="flex items-center space-x-1">
+        <svg class="w-4 h-4 text-blue-500" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+          <path d="m11.645 20.91-.007-.003-.022-.012a15.247 15.247 0 0 1-.383-.218 25.18 25.18 0 0 1-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0 1 12 5.052 5.5 5.5 0 0 1 16.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 0 1-4.244 3.17 15.247 15.247 0 0 1-.383.219l-.022.012-.007.004-.003.001a.752.752 0 0 1-.704 0l-.003-.001Z" />
+        </svg>
+        <span class="text-sm">
+          <a href="{{ sponsorUrl }}" target="_blank" rel="noopener noreferrer" class="text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300 transition-colors">
+            Sponsor me on GitHub
+          </a>
+        </span>
+      </div>
+    </div>
+  </div>
+</footer>

package/dist/Form-z4f7w6r1.stx

@@ -0,0 +1,209 @@
+<script>
+export const action = $props.action || ''
+export const method = $props.method || 'POST'
+export const validationSchema = $props.validationSchema || {}
+export const initialValues = $props.initialValues || {}
+export const validateOnChange = $props.validateOnChange ?? true
+export const validateOnBlur = $props.validateOnBlur ?? true
+export const onSubmit = $props.onSubmit
+export const onError = $props.onError
+export const className = $props.className || ''
+
+let values = { ...initialValues }
+let errors = {}
+let touched = {}
+let isSubmitting = false
+let isValidating = false
+let submitCount = 0
+
+// Validate a single field
+function validateField(name, value) {
+  const fieldSchema = validationSchema[name]
+  if (!fieldSchema)
+    return null
+
+  // Required validation
+  if (fieldSchema.required && !value) {
+    return fieldSchema.requiredMessage || `${name} is required`
+  }
+
+  // Min length validation
+  if (fieldSchema.minLength && value.length < fieldSchema.minLength) {
+    return fieldSchema.minLengthMessage || `${name} must be at least ${fieldSchema.minLength} characters`
+  }
+
+  // Max length validation
+  if (fieldSchema.maxLength && value.length > fieldSchema.maxLength) {
+    return fieldSchema.maxLengthMessage || `${name} must be at most ${fieldSchema.maxLength} characters`
+  }
+
+  // Pattern validation
+  if (fieldSchema.pattern && !fieldSchema.pattern.test(value)) {
+    return fieldSchema.patternMessage || `${name} is invalid`
+  }
+
+  // Custom validation
+  if (fieldSchema.validate && typeof fieldSchema.validate === 'function') {
+    return fieldSchema.validate(value, values)
+  }
+
+  return null
+}
+
+// Validate all fields
+function validateForm() {
+  const newErrors = {}
+  let isValid = true
+
+  Object.keys(validationSchema).forEach((name) => {
+    const error = validateField(name, values[name])
+    if (error) {
+      newErrors[name] = error
+      isValid = false
+    }
+  })
+
+  errors = newErrors
+  return isValid
+}
+
+// Handle field change
+function handleChange(event) {
+  const { name, value } = event.target
+  values[name] = value
+
+  if (validateOnChange && touched[name]) {
+    const error = validateField(name, value)
+    if (error) {
+      errors[name] = error
+    }
+    else {
+      delete errors[name]
+    }
+  }
+}
+
+// Handle field blur
+function handleBlur(event) {
+  const { name } = event.target
+  touched[name] = true
+
+  if (validateOnBlur) {
+    const error = validateField(name, values[name])
+    if (error) {
+      errors[name] = error
+    }
+    else {
+      delete errors[name]
+    }
+  }
+}
+
+// Handle form submission
+async function handleSubmit(event) {
+  event.preventDefault()
+  submitCount++
+
+  // Mark all fields as touched
+  Object.keys(validationSchema).forEach((name) => {
+    touched[name] = true
+  })
+
+  // Validate
+  isValidating = true
+  const isValid = validateForm()
+  isValidating = false
+
+  if (!isValid) {
+    if (onError) {
+      onError(errors)
+    }
+    return
+  }
+
+  // Submit
+  isSubmitting = true
+
+  try {
+    if (onSubmit) {
+      await onSubmit(values, { setErrors, setValues, resetForm })
+    }
+  }
+  catch (error) {
+    if (onError) {
+      onError(error)
+    }
+  }
+  finally {
+    isSubmitting = false
+  }
+}
+
+// Helper functions
+function setErrors(newErrors) {
+  errors = { ...errors, ...newErrors }
+}
+
+function setValues(newValues) {
+  values = { ...values, ...newValues }
+}
+
+function resetForm() {
+  values = { ...initialValues }
+  errors = {}
+  touched = {}
+  isSubmitting = false
+  submitCount = 0
+}
+
+function getFieldProps(name) {
+  return {
+    name,
+    value: values[name] || '',
+    error: errors[name],
+    touched: touched[name],
+    onChange: handleChange,
+    onBlur: handleBlur,
+  }
+}
+
+export const formClasses = `space-y-6 ${className}`.trim()
+export const errorClasses = `mt-1 text-sm text-red-600 dark:text-red-400`.trim()
+</script>
+
+<form
+  class="{{ formClasses }}"
+  @if(action)action="{{ action }}"@endif
+  method="{{ method }}"
+  onsubmit="handleSubmit(event)"
+  novalidate
+>
+  <slot
+    values="{{ values }}"
+    errors="{{ errors }}"
+    touched="{{ touched }}"
+    isSubmitting="{{ isSubmitting }}"
+    isValidating="{{ isValidating }}"
+    submitCount="{{ submitCount }}"
+    getFieldProps="{{ getFieldProps }}"
+    setErrors="{{ setErrors }}"
+    setValues="{{ setValues }}"
+    resetForm="{{ resetForm }}"
+  />
+</form>
+
+<script>
+// Export context for child components
+if (typeof window !== 'undefined') {
+  window.__formContext = {
+    values,
+    errors,
+    touched,
+    isSubmitting,
+    isValidating,
+    getFieldProps,
+    handleChange,
+    handleBlur,
+  }
+}
+</script>

package/dist/Hero-9vvp7pxf.stx

@@ -0,0 +1,25 @@
+<script>
+export const title = $props.title || 'Component'
+export const description = $props.description || 'A modern component built with STX'
+export const githubUrl = $props.githubUrl || '#'
+</script>
+
+<div class="flex flex-col items-center gap-3">
+  <h1 class="text-5xl font-bold mb-3 -mt-5 bg-gradient-to-r from-blue-500 to-purple-600 bg-clip-text text-transparent">
+    {{ title }}
+  </h1>
+  <p class="mb-3 mt-0 text-lg text-neutral-600 dark:text-neutral-400">
+    {{ description }}
+  </p>
+  <div class="flex gap-2">
+    <slot name="demo" />
+    <a
+      href="{{ githubUrl }}"
+      target="_blank"
+      rel="noopener noreferrer"
+      class="inline-flex items-center justify-center h-10 px-8 rounded-md text-sm font-semibold bg-gradient-to-b from-white to-neutral-100 dark:from-neutral-800 dark:to-neutral-900 text-neutral-900 dark:text-white shadow-md hover:shadow-lg transition-all duration-200"
+    >
+      GitHub
+    </a>
+  </div>
+</div>

package/dist/Image-ktk0451c.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>