@stacksjs/components 0.2.35 → 0.2.54

package/src/ui/button/Button.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/src/ui/calendar/Calendar.stx

@@ -1,171 +1,137 @@
 <script server>
-// Calendar Component Props
-export const value = $props.value || new Date()
-export const onChange = $props.onChange
-export const minDate = $props.minDate
-export const maxDate = $props.maxDate
+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 // 0 = Sunday, 1 = Monday
+export const firstDayOfWeek = $props.firstDayOfWeek || 0
 export const showToday = $props.showToday !== false
 export const className = $props.className || ''
 export const highlightToday = $props.highlightToday !== false
 
-// State
-let currentMonth = value ? new Date(value) : new Date()
-let selectedDate = value ? new Date(value) : null
-const today = new Date()
+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>
 
-// Helper functions
-function getDaysInMonth(date) {
-  return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate()
-}
+<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
 
-function getFirstDayOfMonth(date) {
-  return new Date(date.getFullYear(), date.getMonth(), 1).getDay()
-}
+const today = new Date()
+const currentMonth = state(initialValue ? new Date(initialValue) : new Date())
+const selectedDate = state(initialValue)
 
-function isSameDay(date1, date2) {
-  if (!date1 || !date2) return false
-  return date1.getFullYear() === date2.getFullYear() &&
-         date1.getMonth() === date2.getMonth() &&
-         date1.getDate() === date2.getDate()
+function isSameDay(d1, d2) {
+  if (!d1 || !d2) return false
+  return d1.getFullYear() === d2.getFullYear() && d1.getMonth() === d2.getMonth() && d1.getDate() === d2.getDate()
 }
 
-function isToday(date) {
-  return isSameDay(date, today)
-}
+function isToday(d) { return isSameDay(d, today) }
 
-function isDisabled(date) {
-  if (minDate && date < minDate) return true
-  if (maxDate && date > maxDate) return true
-  return disabledDates.some(d => isSameDay(d, date))
+function isDisabled(d) {
+  if (minDate && d < minDate) return true
+  if (maxDate && d > maxDate) return true
+  return disabledDates.some(x => isSameDay(x, d))
 }
 
-function getMonthName(date) {
-  return date.toLocaleDateString(locale, { month: 'long' })
-}
+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() }
 
-function getYear(date) {
-  return date.getFullYear()
-}
+const monthYearLabel = derived(() => {
+  const m = currentMonth()
+  return `${m.toLocaleDateString(locale, { month: 'long' })} ${m.getFullYear()}`
+})
 
-function getDayNames() {
+const dayNames = (() => {
   const days = []
-  const baseDate = new Date(2024, 0, firstDayOfWeek) // Jan 2024 started on Monday
+  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
-}
+})()
 
-function getCalendarDays() {
-  const daysInMonth = getDaysInMonth(currentMonth)
-  const firstDay = (getFirstDayOfMonth(currentMonth) - firstDayOfWeek + 7) % 7
+const calendarDays = derived(() => {
+  const month = currentMonth()
+  const daysInMonth = getDaysInMonth(month)
+  const firstDay = (getFirstDayOfMonth(month) - firstDayOfWeek + 7) % 7
   const days = []
-
-  // Previous month days
-  const prevMonth = new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1, 1)
-  const daysInPrevMonth = getDaysInMonth(prevMonth)
+  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(prevMonth.getFullYear(), prevMonth.getMonth(), daysInPrevMonth - i),
-      isCurrentMonth: false,
-    })
+    days.push({ date: new Date(prev.getFullYear(), prev.getMonth(), daysInPrev - i), isCurrentMonth: false })
   }
-
-  // Current month days
   for (let i = 1; i <= daysInMonth; i++) {
-    days.push({
-      date: new Date(currentMonth.getFullYear(), currentMonth.getMonth(), i),
-      isCurrentMonth: true,
-    })
+    days.push({ date: new Date(month.getFullYear(), month.getMonth(), i), isCurrentMonth: true })
   }
-
-  // Next month days to fill the grid
-  const remainingDays = 42 - days.length // 6 rows * 7 days
-  const nextMonth = new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1, 1)
-  for (let i = 1; i <= remainingDays; i++) {
-    days.push({
-      date: new Date(nextMonth.getFullYear(), nextMonth.getMonth(), i),
-      isCurrentMonth: false,
-    })
+  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() {
-  currentMonth = new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1, 1)
+  const m = currentMonth()
+  currentMonth.set(new Date(m.getFullYear(), m.getMonth() - 1, 1))
 }
 
-function nextMonth() {
-  currentMonth = new Date(currentMonth.getFullYear(), currentMonth.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 = date
-  onChange?.(date)
+  selectedDate.set(date)
+  emit('change', date)
 }
 
 function goToToday() {
-  currentMonth = new Date(today)
+  currentMonth.set(new Date(today))
   selectDate(today)
 }
 
-// Base classes
-const baseClasses = 'bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4 w-full max-w-sm'
-const calendarClasses = `${baseClasses} ${className}`.trim()
-
-const headerClasses = 'flex items-center justify-between mb-4'
-const monthYearClasses = 'text-lg font-semibold text-gray-900 dark:text-gray-100'
-const buttonClasses = 'p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md transition-colors'
-
-const weekdaysClasses = 'grid grid-cols-7 gap-1 mb-2'
-const weekdayClasses = 'text-center text-xs font-medium text-gray-600 dark:text-gray-400 py-2'
-
-const daysGridClasses = 'grid grid-cols-7 gap-1'
-
-function getDayClasses(day) {
+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 isSelected = isSameDay(day.date, selectedDate())
   const isTodayDate = isToday(day.date)
   const disabled = isDisabled(day.date)
-
-  let classes = base
-
-  if (!day.isCurrentMonth) {
-    classes += ' text-gray-400 dark:text-gray-600'
-  } else {
-    classes += ' text-gray-900 dark:text-gray-100'
-  }
-
-  if (disabled) {
-    classes += ' opacity-50 cursor-not-allowed'
-  } else {
-    classes += ' cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700'
-  }
-
-  if (isSelected) {
-    classes += ' bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600'
-  }
-
-  if (isTodayDate && highlightToday && !isSelected) {
-    classes += ' border-2 border-blue-600 dark:border-blue-400'
-  }
-
-  return classes
+  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
 }
 
-const dayNames = getDayNames()
-const calendarDays = getCalendarDays()
+defineExpose({ selectedDate, currentMonth, selectDate })
 </script>
 
 <div class="{{ calendarClasses }}">
-  <!-- Header -->
   <div class="{{ headerClasses }}">
     <button
       type="button"
@@ -178,14 +144,12 @@ const calendarDays = getCalendarDays()
       </svg>
     </button>
 
-    <div class="{{ monthYearClasses }}">
-      {{ getMonthName(currentMonth) }} {{ getYear(currentMonth) }}
-    </div>
+    <div class="{{ monthYearClasses }}" x-text="monthYearLabel()"></div>
 
     <button
       type="button"
       class="{{ buttonClasses }}"
-      @click="nextMonth()"
+      @click="nextMonthFn()"
       aria-label="Next month"
     >
       <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -194,28 +158,21 @@ const calendarDays = getCalendarDays()
     </button>
   </div>
 
-  <!-- Weekday names -->
   <div class="{{ weekdaysClasses }}">
-    @foreach(dayNames as day)
-      <div class="{{ weekdayClasses }}">{{ day }}</div>
-    @endforeach
+    <div :for="d in dayNames" :key="d" class="{{ weekdayClasses }}" x-text="d"></div>
   </div>
 
-  <!-- Calendar grid -->
   <div class="{{ daysGridClasses }}">
-    @foreach(calendarDays as day)
-      <button
-        type="button"
-        class="{{ getDayClasses(day) }}"
-        @click="selectDate(day.date)"
-        aria-label="{{ day.date.toLocaleDateString(locale) }}"
-        @if(isDisabled(day.date))
-          disabled
-        @endif
-      >
-        {{ day.date.getDate() }}
-      </button>
-    @endforeach
+    <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)

package/src/ui/card/Card.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>

package/src/ui/checkbox/Checkbox.stx

@@ -1,6 +1,5 @@
 <script server>
 export const checked = $props.checked || false
-export const onChange = $props.onChange || (() => {})
 export const disabled = $props.disabled || false
 export const indeterminate = $props.indeterminate || false
 export const size = $props.size || 'md'
@@ -12,42 +11,55 @@ export const value = $props.value || ''
 export const name = $props.name || ''
 export const className = $props.className || ''
 
-// Size classes
-const sizeClasses = {
-  sm: 'h-4 w-4',
-  md: 'h-5 w-5',
-  lg: 'h-6 w-6',
-}
-
-// Base classes for checkbox
+const sizeClasses = { sm: 'h-4 w-4', md: 'h-5 w-5', lg: 'h-6 w-6' }
 const baseClasses = 'rounded border-gray-300 dark:border-gray-600 text-indigo-600 dark:text-indigo-500 focus:ring-indigo-600 dark:focus:ring-indigo-500 focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900 transition-colors'
-
-const stateClasses = error
-  ? 'border-red-300 dark:border-red-600 text-red-600 dark:text-red-500 focus:ring-red-500 dark:focus:ring-red-400'
-  : ''
-
-const disabledClasses = disabled
-  ? 'opacity-50 cursor-not-allowed'
-  : 'cursor-pointer'
+const stateClasses = error ? 'border-red-300 dark:border-red-600 text-red-600 dark:text-red-500 focus:ring-red-500 dark:focus:ring-red-400' : ''
+const disabledClasses = disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'
 
 export const checkboxClasses = `${baseClasses} ${sizeClasses[size]} ${stateClasses} ${disabledClasses}`.trim()
 export const labelClasses = `text-sm font-medium ${error ? 'text-red-600 dark:text-red-400' : 'text-gray-900 dark:text-gray-100'} ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`.trim()
 export const descriptionClasses = `text-sm ${error ? 'text-red-500 dark:text-red-400' : 'text-gray-500 dark:text-gray-400'}`.trim()
+export const inputId = `checkbox-${value || label}`
+</script>
+
+<script client>
+const emit = defineEmits()
+const isDisabled = {{ disabled }}
+const isIndeterminate = {{ indeterminate }}
+const isChecked = state({{ checked }})
+
+function onInputChange(event) {
+  if (isDisabled) {
+    event.target.checked = isChecked()
+    return
+  }
+  isChecked.set(event.target.checked)
+  emit('change', isChecked())
+}
+
+onMount(() => {
+  if (isIndeterminate) {
+    const el = document.getElementById({{ inputId }})
+    if (el) el.indeterminate = true
+  }
+})
+
+defineExpose({ isChecked })
 </script>
 
 <div class="relative flex items-start {{ className }}">
   <div class="flex h-6 items-center">
     <input
-      id="checkbox-{{ value || label }}"
+      id="{{ inputId }}"
       type="checkbox"
       name="{{ name }}"
       value="{{ value }}"
-      checked="{{ checked }}"
-      disabled="{{ disabled }}"
-      required="{{ required }}"
+      :checked="isChecked()"
+      @if(disabled)disabled@endif
+      @if(required)required@endif
       class="{{ checkboxClasses }}"
-      onchange="handleChange(event)"
-      aria-invalid="{{ error ? 'true' : 'false' }}"
+      @change="onInputChange($event)"
+      :aria-invalid="{{ error ? 'true' : 'false' }}"
       @if(description)aria-describedby="checkbox-description"@endif
     />
   </div>
@@ -55,7 +67,7 @@ export const descriptionClasses = `text-sm ${error ? 'text-red-500 dark:text-red
   @if(label || description)
     <div class="ml-3 text-sm leading-6">
       @if(label)
-        <label for="checkbox-{{ value || label }}" class="{{ labelClasses }}">
+        <label for="{{ inputId }}" class="{{ labelClasses }}">
           {{ label }}
           @if(required)
             <span class="text-red-500 ml-1">*</span>
@@ -70,23 +82,3 @@ export const descriptionClasses = `text-sm ${error ? 'text-red-500 dark:text-red
     </div>
   @endif
 </div>
-
-<script>
-function handleChange(event) {
-  const isChecked = event.target.checked
-
-  if (!disabled && onChange) {
-    onChange(isChecked)
-  }
-}
-
-// Handle indeterminate state
-if (indeterminate && typeof window !== 'undefined') {
-  window.addEventListener('DOMContentLoaded', () => {
-    const checkbox = document.getElementById('checkbox-{{ value || label }}')
-    if (checkbox) {
-      checkbox.indeterminate = true
-    }
-  })
-}
-</script>