@stacksjs/components 0.2.27 → 0.2.53

package/dist/Accordion-19x8q4rj.stx

@@ -0,0 +1,88 @@
+<script server>
+export const items = $props.items || []
+export const allowMultiple = $props.allowMultiple || false
+export const defaultOpen = $props.defaultOpen || []
+export const className = $props.className || ''
+
+export const accordionClasses = `divide-y divide-gray-200 dark:divide-gray-700 border border-gray-200 dark:border-gray-700 rounded-lg ${className}`.trim()
+export const headerClasses = `w-full flex items-center justify-between px-4 py-3 text-left font-medium text-gray-900 dark:text-gray-100 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900`.trim()
+export const iconClasses = `w-5 h-5 text-gray-500 dark:text-gray-400 transition-transform duration-200`.trim()
+export const contentClasses = `px-4 py-3 text-gray-700 dark:text-gray-300`.trim()
+</script>
+
+<script client>
+const emit = defineEmits()
+const allowMultiple = {{ allowMultiple }}
+const openItems = state({{ defaultOpen }})
+
+function toggleItem(index) {
+  const cur = openItems()
+  if (allowMultiple) {
+    openItems.set(cur.includes(index) ? cur.filter(i => i !== index) : [...cur, index])
+  }
+  else {
+    openItems.set(cur.includes(index) ? [] : [index])
+  }
+  emit('change', openItems())
+}
+
+function isOpen(index) {
+  return openItems().includes(index)
+}
+
+function onHeaderKey(event, index) {
+  const buttons = event.currentTarget.closest('[role="region"]').querySelectorAll('button[data-accordion-header]')
+  if (event.key === 'ArrowDown') {
+    event.preventDefault()
+    buttons[index + 1]?.focus()
+  }
+  else if (event.key === 'ArrowUp') {
+    event.preventDefault()
+    buttons[index - 1]?.focus()
+  }
+  else if (event.key === 'Home') {
+    event.preventDefault()
+    buttons[0]?.focus()
+  }
+  else if (event.key === 'End') {
+    event.preventDefault()
+    buttons[buttons.length - 1]?.focus()
+  }
+}
+</script>
+
+<div class="{{ accordionClasses }}" role="region">
+  @foreach(item in items)
+    <div>
+      <button
+        type="button"
+        data-accordion-header
+        class="{{ headerClasses }}"
+        @click="toggleItem({{ $loop.index }})"
+        @keydown="onHeaderKey($event, {{ $loop.index }})"
+        :aria-expanded="isOpen({{ $loop.index }}) ? 'true' : 'false'"
+        aria-controls="accordion-content-{{ $loop.index }}"
+      >
+        <span>{{ item.title }}</span>
+        <svg
+          class="{{ iconClasses }}"
+          :style="`transform: rotate(${isOpen({{ $loop.index }}) ? 180 : 0}deg)`"
+          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
+        :show="isOpen({{ $loop.index }})"
+        id="accordion-content-{{ $loop.index }}"
+        class="{{ contentClasses }}"
+        role="region"
+      >
+        {!! item.content !!}
+      </div>
+    </div>
+  @endforeach
+</div>

package/dist/{Audio-vdmg1258.stx → Audio-hjywk3qc.stx}

@@ -25,10 +25,10 @@ export const audioClasses = 'w-full rounded-md bg-gray-100 dark:bg-gray-800'
   <audio
     class="{{ audioClasses }}"
     src="{{ src }}"
-    controls="{{ controls }}"
-    autoplay="{{ autoplay }}"
-    loop="{{ loop }}"
-    muted="{{ muted }}"
+    @if(controls)controls@endif
+    @if(autoplay)autoplay@endif
+    @if(loop)loop@endif
+    @if(muted)muted@endif
     preload="{{ preload }}"
   >
     Your browser does not support the audio element.

package/dist/{Avatar-365cvrh4.stx → Avatar-h3jmwcq0.stx}

@@ -6,11 +6,7 @@ export const size = $props.size || 'md'
 export const shape = $props.shape || 'circle'
 export const status = $props.status || ''
 export const className = $props.className || ''
-export const onError = $props.onError
 
-let imageError = false
-
-// Size classes
 const sizeClasses = {
   xs: 'w-6 h-6 text-xs',
   sm: 'w-8 h-8 text-sm',
@@ -20,13 +16,8 @@ const sizeClasses = {
   '2xl': 'w-20 h-20 text-2xl',
 }
 
-// Shape classes
-const shapeClasses = {
-  circle: 'rounded-full',
-  square: 'rounded-md',
-}
+const shapeClasses = { circle: 'rounded-full', square: 'rounded-md' }
 
-// Status indicator size classes
 const statusSizeClasses = {
   xs: 'w-1.5 h-1.5 border',
   sm: 'w-2 h-2 border',
@@ -36,7 +27,6 @@ const statusSizeClasses = {
   '2xl': 'w-4 h-4 border-2',
 }
 
-// Status color classes
 const statusColorClasses = {
   online: 'bg-green-500 dark:bg-green-400',
   offline: 'bg-gray-400 dark:bg-gray-600',
@@ -48,24 +38,33 @@ export const containerClasses = `relative inline-block ${className}`.trim()
 export const avatarClasses = `flex items-center justify-center overflow-hidden bg-gray-200 dark:bg-gray-700 ${sizeClasses[size]} ${shapeClasses[shape]}`.trim()
 export const imageClasses = `w-full h-full object-cover`.trim()
 export const initialsClasses = `font-medium text-gray-600 dark:text-gray-300 uppercase select-none`.trim()
-export const statusClasses = `absolute bottom-0 right-0 ${statusSizeClasses[size]} ${statusColorClasses[status]} ${shapeClasses[shape]} border-white dark:border-gray-900`.trim()
-
-// Generate initials from name if not provided
+export const statusClasses = status ? `absolute bottom-0 right-0 ${statusSizeClasses[size]} ${statusColorClasses[status]} ${shapeClasses[shape]} border-white dark:border-gray-900`.trim() : ''
 export const displayInitials = initials || (alt ? alt.split(' ').map(n => n[0]).join('').substring(0, 2) : '?')
 </script>
 
+<script client>
+const emit = defineEmits()
+const imageError = state(false)
+const hasSrc = {{ !!src }}
+
+function onImageError(event) {
+  imageError.set(true)
+  emit('error', event)
+}
+
+const showImage = derived(() => hasSrc && !imageError())
+</script>
+
 <div class="{{ containerClasses }}">
   <div class="{{ avatarClasses }}">
-    @if(src && !imageError)
-      <img
-        src="{{ src }}"
-        alt="{{ alt }}"
-        class="{{ imageClasses }}"
-        onerror="handleImageError(event)"
-      />
-    @else
-      <span class="{{ initialsClasses }}">{{ displayInitials }}</span>
-    @endif
+    <img
+      :show="showImage()"
+      src="{{ src }}"
+      alt="{{ alt }}"
+      class="{{ imageClasses }}"
+      @error="onImageError($event)"
+    />
+    <span :show="!showImage()" class="{{ initialsClasses }}">{{ displayInitials }}</span>
   </div>
 
   @if(status)
@@ -76,13 +75,3 @@ export const displayInitials = initials || (alt ? alt.split(' ').map(n => n[0]).
     ></span>
   @endif
 </div>
-
-<script>
-function handleImageError(event) {
-  imageError = true
-
-  if (onError) {
-    onError(event)
-  }
-}
-</script>

package/dist/{Badge-8m3qete4.stx → Badge-k8dy3d53.stx}

@@ -4,9 +4,7 @@ export const size = $props.size || 'md'
 export const dot = $props.dot || false
 export const removable = $props.removable || false
 export const className = $props.className || ''
-export const onRemove = $props.onRemove
 
-// Variant classes
 const variantClasses = {
   default: 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300',
   primary: 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200',
@@ -17,14 +15,8 @@ const variantClasses = {
   info: 'bg-cyan-100 text-cyan-800 dark:bg-cyan-900 dark:text-cyan-200',
 }
 
-// Size classes
-const sizeClasses = {
-  sm: 'px-2 py-0.5 text-xs',
-  md: 'px-2.5 py-0.5 text-sm',
-  lg: 'px-3 py-1 text-base',
-}
+const sizeClasses = { sm: 'px-2 py-0.5 text-xs', md: 'px-2.5 py-0.5 text-sm', lg: 'px-3 py-1 text-base' }
 
-// Dot color classes
 const dotColorClasses = {
   default: 'bg-gray-500 dark:bg-gray-400',
   primary: 'bg-blue-500 dark:bg-blue-400',
@@ -40,6 +32,14 @@ export const dotClasses = `w-2 h-2 rounded-full ${dotColorClasses[variant]}`.tri
 export const removeButtonClasses = `ml-0.5 -mr-1 text-current hover:bg-black hover:bg-opacity-10 dark:hover:bg-white dark:hover:bg-opacity-10 rounded-full p-0.5 transition-colors duration-150`.trim()
 </script>
 
+<script client>
+const emit = defineEmits()
+
+function onRemove() {
+  emit('remove')
+}
+</script>
+
 <span class="{{ badgeClasses }}" role="status">
   @if(dot)
     <span class="{{ dotClasses }}" aria-hidden="true"></span>
@@ -47,10 +47,10 @@ export const removeButtonClasses = `ml-0.5 -mr-1 text-current hover:bg-black hov
 
   <slot />
 
-  @if(removable && onRemove)
+  @if(removable)
     <button
       type="button"
-      @click="handleRemove()"
+      @click="onRemove()"
       class="{{ removeButtonClasses }}"
       aria-label="Remove"
     >
@@ -60,11 +60,3 @@ export const removeButtonClasses = `ml-0.5 -mr-1 text-current hover:bg-black hov
     </button>
   @endif
 </span>
-
-<script>
-function handleRemove() {
-  if (onRemove) {
-    onRemove()
-  }
-}
-</script>

package/dist/{Button-3tt4vsqt.stx → Button-1vknasy3.stx}

@@ -8,9 +8,7 @@ export const fullWidth = $props.fullWidth || false
 export const leftIcon = $props.leftIcon || ''
 export const rightIcon = $props.rightIcon || ''
 export const className = $props.className || ''
-export const onClick = $props.onClick
 
-// Variant styles using headwind
 const variantClasses = {
   primary: 'bg-blue-500 hover:bg-blue-600 text-white shadow-md hover:shadow-lg dark:bg-blue-600 dark:hover:bg-blue-700',
   secondary: 'bg-neutral-200 hover:bg-neutral-300 text-neutral-900 dark:bg-neutral-700 dark:hover:bg-neutral-600 dark:text-white',
@@ -19,7 +17,6 @@ const variantClasses = {
   danger: 'bg-red-500 hover:bg-red-600 text-white shadow-md hover:shadow-lg dark:bg-red-600 dark:hover:bg-red-700',
 }
 
-// Size styles using headwind
 const sizeClasses = {
   xs: 'px-2.5 py-1 text-xs h-7 gap-1',
   sm: 'px-3 py-1.5 text-sm h-8 gap-1.5',
@@ -28,62 +25,50 @@ const sizeClasses = {
   xl: 'px-8 py-4 text-xl h-14 gap-3',
 }
 
-// Icon size styles
-const iconSizeClasses = {
-  xs: 'h-3 w-3',
-  sm: 'h-4 w-4',
-  md: 'h-5 w-5',
-  lg: 'h-6 w-6',
-  xl: 'h-7 w-7',
-}
-
-// Base classes
+const iconSizeClasses = { xs: 'h-3 w-3', sm: 'h-4 w-4', md: 'h-5 w-5', lg: 'h-6 w-6', xl: 'h-7 w-7' }
 const baseClasses = 'inline-flex items-center justify-center font-semibold rounded-md transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none'
-
-// Width classes
 const widthClasses = fullWidth ? 'w-full' : ''
+export const isDisabled = disabled || loading
 
-// Loading state disables interactions
-const isDisabled = disabled || loading
-
-// Combine classes
 export const buttonClasses = `${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]} ${widthClasses} ${className}`.trim()
 export const iconClasses = iconSizeClasses[size]
 export const spinnerClasses = `animate-spin ${iconClasses}`.trim()
 </script>
 
+<script client>
+const emit = defineEmits()
+const disabledNow = {{ isDisabled }}
+
+function onClick(event) {
+  if (disabledNow) {
+    event.preventDefault()
+    return
+  }
+  emit('click', event)
+}
+</script>
+
 <button
   type="{{ type }}"
   class="{{ buttonClasses }}"
   @if(isDisabled)disabled@endif
-  @if(onClick)@click="handleClick(event)"@endif
+  @click="onClick($event)"
   aria-busy="{{ loading ? 'true' : 'false' }}"
 >
   @if(loading)
-    <!-- Loading spinner -->
     <svg class="{{ spinnerClasses }}" xmlns="http://www.w3.org/2000/svg" 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>
   @else
     @if(leftIcon)
-      <!-- Left icon -->
-      <span class="{{ iconClasses }}" innerHTML="{!! leftIcon !!}"></span>
+      <span class="{{ iconClasses }}">{!! leftIcon !!}</span>
     @endif
   @endif
 
   <slot />
 
   @if(!loading && rightIcon)
-    <!-- Right icon -->
-    <span class="{{ iconClasses }}" innerHTML="{!! rightIcon !!}"></span>
+    <span class="{{ iconClasses }}">{!! rightIcon !!}</span>
   @endif
 </button>
-
-<script>
-function handleClick(event) {
-  if (!isDisabled && onClick) {
-    onClick(event)
-  }
-}
-</script>

package/dist/Calendar-reny0et7.stx

@@ -0,0 +1,189 @@
+<script server>
+export const value = $props.value || null
+export const minDate = $props.minDate || null
+export const maxDate = $props.maxDate || null
+export const disabledDates = $props.disabledDates || []
+export const locale = $props.locale || 'en-US'
+export const firstDayOfWeek = $props.firstDayOfWeek || 0
+export const showToday = $props.showToday !== false
+export const className = $props.className || ''
+export const highlightToday = $props.highlightToday !== false
+
+const baseClasses = 'bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4 w-full max-w-sm'
+export const calendarClasses = `${baseClasses} ${className}`.trim()
+export const headerClasses = 'flex items-center justify-between mb-4'
+export const monthYearClasses = 'text-lg font-semibold text-gray-900 dark:text-gray-100'
+export const buttonClasses = 'p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md transition-colors'
+export const weekdaysClasses = 'grid grid-cols-7 gap-1 mb-2'
+export const weekdayClasses = 'text-center text-xs font-medium text-gray-600 dark:text-gray-400 py-2'
+export const daysGridClasses = 'grid grid-cols-7 gap-1'
+
+const valueIso = value ? new Date(value).toISOString() : null
+export const initialValueIso = valueIso
+const minIso = minDate ? new Date(minDate).toISOString() : null
+const maxIso = maxDate ? new Date(maxDate).toISOString() : null
+export const minIsoValue = minIso
+export const maxIsoValue = maxIso
+export const disabledIsoList = disabledDates.map(d => new Date(d).toISOString())
+</script>
+
+<script client>
+const emit = defineEmits()
+const locale = {{ locale }}
+const firstDayOfWeek = {{ firstDayOfWeek }}
+const highlightToday = {{ highlightToday }}
+const minDate = {{ minIsoValue === null ? 'null' : minIsoValue }} ? new Date({{ minIsoValue === null ? 'null' : minIsoValue }}) : null
+const maxDate = {{ maxIsoValue === null ? 'null' : maxIsoValue }} ? new Date({{ maxIsoValue === null ? 'null' : maxIsoValue }}) : null
+const disabledDates = ({{ disabledIsoList }}).map(s => new Date(s))
+const initialValue = {{ initialValueIso === null ? 'null' : initialValueIso }} ? new Date({{ initialValueIso === null ? 'null' : initialValueIso }}) : null
+
+const today = new Date()
+const currentMonth = state(initialValue ? new Date(initialValue) : new Date())
+const selectedDate = state(initialValue)
+
+function isSameDay(d1, d2) {
+  if (!d1 || !d2) return false
+  return d1.getFullYear() === d2.getFullYear() && d1.getMonth() === d2.getMonth() && d1.getDate() === d2.getDate()
+}
+
+function isToday(d) { return isSameDay(d, today) }
+
+function isDisabled(d) {
+  if (minDate && d < minDate) return true
+  if (maxDate && d > maxDate) return true
+  return disabledDates.some(x => isSameDay(x, d))
+}
+
+function getDaysInMonth(d) { return new Date(d.getFullYear(), d.getMonth() + 1, 0).getDate() }
+function getFirstDayOfMonth(d) { return new Date(d.getFullYear(), d.getMonth(), 1).getDay() }
+
+const monthYearLabel = derived(() => {
+  const m = currentMonth()
+  return `${m.toLocaleDateString(locale, { month: 'long' })} ${m.getFullYear()}`
+})
+
+const dayNames = (() => {
+  const days = []
+  const baseDate = new Date(2024, 0, firstDayOfWeek)
+  for (let i = 0; i < 7; i++) {
+    const day = new Date(baseDate)
+    day.setDate(baseDate.getDate() + i)
+    days.push(day.toLocaleDateString(locale, { weekday: 'short' }))
+  }
+  return days
+})()
+
+const calendarDays = derived(() => {
+  const month = currentMonth()
+  const daysInMonth = getDaysInMonth(month)
+  const firstDay = (getFirstDayOfMonth(month) - firstDayOfWeek + 7) % 7
+  const days = []
+  const prev = new Date(month.getFullYear(), month.getMonth() - 1, 1)
+  const daysInPrev = getDaysInMonth(prev)
+  for (let i = firstDay - 1; i >= 0; i--) {
+    days.push({ date: new Date(prev.getFullYear(), prev.getMonth(), daysInPrev - i), isCurrentMonth: false })
+  }
+  for (let i = 1; i <= daysInMonth; i++) {
+    days.push({ date: new Date(month.getFullYear(), month.getMonth(), i), isCurrentMonth: true })
+  }
+  const remaining = 42 - days.length
+  const next = new Date(month.getFullYear(), month.getMonth() + 1, 1)
+  for (let i = 1; i <= remaining; i++) {
+    days.push({ date: new Date(next.getFullYear(), next.getMonth(), i), isCurrentMonth: false })
+  }
+  return days
+})
+
+function previousMonth() {
+  const m = currentMonth()
+  currentMonth.set(new Date(m.getFullYear(), m.getMonth() - 1, 1))
+}
+
+function nextMonthFn() {
+  const m = currentMonth()
+  currentMonth.set(new Date(m.getFullYear(), m.getMonth() + 1, 1))
+}
+
+function selectDate(date) {
+  if (isDisabled(date)) return
+  selectedDate.set(date)
+  emit('change', date)
+}
+
+function goToToday() {
+  currentMonth.set(new Date(today))
+  selectDate(today)
+}
+
+function dayClasses(day) {
+  const base = 'flex items-center justify-center h-10 w-10 rounded-md text-sm transition-colors'
+  const isSelected = isSameDay(day.date, selectedDate())
+  const isTodayDate = isToday(day.date)
+  const disabled = isDisabled(day.date)
+  let cls = base
+  cls += day.isCurrentMonth ? ' text-gray-900 dark:text-gray-100' : ' text-gray-400 dark:text-gray-600'
+  cls += disabled ? ' opacity-50 cursor-not-allowed' : ' cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700'
+  if (isSelected) cls += ' bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600'
+  if (isTodayDate && highlightToday && !isSelected) cls += ' border-2 border-blue-600 dark:border-blue-400'
+  return cls
+}
+
+defineExpose({ selectedDate, currentMonth, selectDate })
+</script>
+
+<div class="{{ calendarClasses }}">
+  <div class="{{ headerClasses }}">
+    <button
+      type="button"
+      class="{{ buttonClasses }}"
+      @click="previousMonth()"
+      aria-label="Previous month"
+    >
+      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+      </svg>
+    </button>
+
+    <div class="{{ monthYearClasses }}" x-text="monthYearLabel()"></div>
+
+    <button
+      type="button"
+      class="{{ buttonClasses }}"
+      @click="nextMonthFn()"
+      aria-label="Next month"
+    >
+      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+      </svg>
+    </button>
+  </div>
+
+  <div class="{{ weekdaysClasses }}">
+    <div :for="d in dayNames" :key="d" class="{{ weekdayClasses }}" x-text="d"></div>
+  </div>
+
+  <div class="{{ daysGridClasses }}">
+    <button
+      :for="day in calendarDays()"
+      :key="day.date.toISOString()"
+      type="button"
+      :class="dayClasses(day)"
+      @click="selectDate(day.date)"
+      :aria-label="day.date.toLocaleDateString(locale)"
+      :disabled="isDisabled(day.date)"
+      x-text="day.date.getDate()"
+    ></button>
+  </div>
+
+  @if(showToday)
+    <div class="mt-4 flex justify-center">
+      <button
+        type="button"
+        class="px-4 py-2 text-sm font-medium text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-gray-700 rounded-md transition-colors"
+        @click="goToToday()"
+      >
+        Today
+      </button>
+    </div>
+  @endif
+</div>

package/dist/{Card-6wdbexqr.stx → Card-c1g1fd1w.stx}

@@ -5,11 +5,8 @@ export const hover = $props.hover || false
 export const clickable = $props.clickable || false
 export const image = $props.image || ''
 export const imageAlt = $props.imageAlt || ''
-export const imagePosition = $props.imagePosition || 'top'
 export const className = $props.className || ''
-export const onClick = $props.onClick
 
-// Variant classes
 const variantClasses = {
   default: 'bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700',
   outlined: 'bg-transparent border-2 border-gray-300 dark:border-gray-600',
@@ -17,18 +14,8 @@ const variantClasses = {
   flat: 'bg-gray-50 dark:bg-gray-900 border-0',
 }
 
-// Padding classes
-const paddingClasses = {
-  none: 'p-0',
-  sm: 'p-3',
-  default: 'p-6',
-  lg: 'p-8',
-}
-
-// Hover effect classes
+const paddingClasses = { none: 'p-0', sm: 'p-3', default: 'p-6', lg: 'p-8' }
 const hoverClasses = hover ? 'transition-all duration-200 hover:shadow-lg hover:-translate-y-0.5' : ''
-
-// Clickable classes
 const clickableClasses = clickable ? 'cursor-pointer' : ''
 
 export const cardClasses = `rounded-lg overflow-hidden ${variantClasses[variant]} ${paddingClasses[image ? 'none' : padding]} ${hoverClasses} ${clickableClasses} ${className}`.trim()
@@ -36,12 +23,35 @@ export const imageClasses = `w-full h-48 object-cover`.trim()
 export const contentClasses = `${image ? paddingClasses[padding] : ''}`.trim()
 </script>
 
-@if(onClick)
-  <div class="{{ cardClasses }}" @click="handleClick(event)" role="button" tabindex="0" onkeydown="handleKeyDown(event)">
+<script client>
+const emit = defineEmits()
+const isClickable = {{ clickable }}
+
+function onClick(event) {
+  if (!isClickable) return
+  emit('click', event)
+}
+
+function onKey(event) {
+  if (!isClickable) return
+  if (event.key === 'Enter' || event.key === ' ') {
+    event.preventDefault()
+    emit('click', event)
+  }
+}
+</script>
+
+@if(clickable)
+  <div
+    class="{{ cardClasses }}"
+    @click="onClick($event)"
+    @keydown="onKey($event)"
+    role="button"
+    tabindex="0"
+  >
     @if(image)
       <img src="{{ image }}" alt="{{ imageAlt }}" class="{{ imageClasses }}" />
     @endif
-
     <div class="{{ contentClasses }}">
       <slot />
     </div>
@@ -51,24 +61,8 @@ export const contentClasses = `${image ? paddingClasses[padding] : ''}`.trim()
     @if(image)
       <img src="{{ image }}" alt="{{ imageAlt }}" class="{{ imageClasses }}" />
     @endif
-
     <div class="{{ contentClasses }}">
       <slot />
     </div>
   </div>
 @endif
-
-<script>
-function handleClick(event) {
-  if (clickable && onClick) {
-    onClick(event)
-  }
-}
-
-function handleKeyDown(event) {
-  if ((event.key === 'Enter' || event.key === ' ') && clickable && onClick) {
-    event.preventDefault()
-    onClick(event)
-  }
-}
-</script>