@stacksjs/components 0.2.35 → 0.2.53

package/dist/Accordion-sbfra0mz.stx

@@ -1,108 +0,0 @@
-<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 onChange = $props.onChange
-
-// Track which items are open
-let openItems = defaultOpen
-
-// Toggle an item
-function toggleItem(index) {
-  if (allowMultiple) {
-    // Multiple items can be open
-    if (openItems.includes(index)) {
-      openItems = openItems.filter(i => i !== index)
-    } else {
-      openItems = [...openItems, index]
-    }
-  } else {
-    // Only one item can be open
-    if (openItems.includes(index)) {
-      openItems = []
-    } else {
-      openItems = [index]
-    }
-  }
-
-  if (onChange) {
-    onChange(openItems)
-  }
-}
-
-// Check if item is open
-function isOpen(index) {
-  return openItems.includes(index)
-}
-
-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 itemClasses = ``.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>
-
-<div class="{{ accordionClasses }}" role="region">
-  @foreach(item in items)
-    <div class="{{ itemClasses }}">
-      <button
-        type="button"
-        class="{{ headerClasses }}"
-        @click="toggleItem({{ $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>
-
-      @if(isOpen($loop.index))
-        <div
-          id="accordion-content-{{ $loop.index }}"
-          class="{{ contentClasses }}"
-          role="region"
-        >
-          {!! item.content !!}
-        </div>
-      @endif
-    </div>
-  @endforeach
-</div>
-
-<script>
-// Keyboard navigation
-if (typeof window !== 'undefined') {
-  window.addEventListener('DOMContentLoaded', () => {
-    const buttons = document.querySelectorAll('[aria-expanded]')
-
-    buttons.forEach((button, index) => {
-      button.addEventListener('keydown', (event) => {
-        if (event.key === 'ArrowDown') {
-          event.preventDefault()
-          const nextButton = buttons[index + 1]
-          if (nextButton) nextButton.focus()
-        } else if (event.key === 'ArrowUp') {
-          event.preventDefault()
-          const prevButton = buttons[index - 1]
-          if (prevButton) prevButton.focus()
-        } else if (event.key === 'Home') {
-          event.preventDefault()
-          buttons[0].focus()
-        } else if (event.key === 'End') {
-          event.preventDefault()
-          buttons[buttons.length - 1].focus()
-        }
-      })
-    })
-  })
-}
-</script>

package/dist/Calendar-58nnkdh8.stx

@@ -1,232 +0,0 @@
-<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 disabledDates = $props.disabledDates || []
-export const locale = $props.locale || 'en-US'
-export const firstDayOfWeek = $props.firstDayOfWeek || 0 // 0 = Sunday, 1 = Monday
-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()
-
-// Helper functions
-function getDaysInMonth(date) {
-  return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate()
-}
-
-function getFirstDayOfMonth(date) {
-  return new Date(date.getFullYear(), date.getMonth(), 1).getDay()
-}
-
-function isSameDay(date1, date2) {
-  if (!date1 || !date2) return false
-  return date1.getFullYear() === date2.getFullYear() &&
-         date1.getMonth() === date2.getMonth() &&
-         date1.getDate() === date2.getDate()
-}
-
-function isToday(date) {
-  return isSameDay(date, today)
-}
-
-function isDisabled(date) {
-  if (minDate && date < minDate) return true
-  if (maxDate && date > maxDate) return true
-  return disabledDates.some(d => isSameDay(d, date))
-}
-
-function getMonthName(date) {
-  return date.toLocaleDateString(locale, { month: 'long' })
-}
-
-function getYear(date) {
-  return date.getFullYear()
-}
-
-function getDayNames() {
-  const days = []
-  const baseDate = new Date(2024, 0, firstDayOfWeek) // Jan 2024 started on Monday
-  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 days = []
-
-  // Previous month days
-  const prevMonth = new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1, 1)
-  const daysInPrevMonth = getDaysInMonth(prevMonth)
-  for (let i = firstDay - 1; i >= 0; i--) {
-    days.push({
-      date: new Date(prevMonth.getFullYear(), prevMonth.getMonth(), daysInPrevMonth - 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,
-    })
-  }
-
-  // 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,
-    })
-  }
-
-  return days
-}
-
-function previousMonth() {
-  currentMonth = new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1, 1)
-}
-
-function nextMonth() {
-  currentMonth = new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1, 1)
-}
-
-function selectDate(date) {
-  if (isDisabled(date)) return
-  selectedDate = date
-  onChange?.(date)
-}
-
-function goToToday() {
-  currentMonth = 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) {
-  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 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
-}
-
-const dayNames = getDayNames()
-const calendarDays = getCalendarDays()
-</script>
-
-<div class="{{ calendarClasses }}">
-  <!-- Header -->
-  <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 }}">
-      {{ getMonthName(currentMonth) }} {{ getYear(currentMonth) }}
-    </div>
-
-    <button
-      type="button"
-      class="{{ buttonClasses }}"
-      @click="nextMonth()"
-      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>
-
-  <!-- Weekday names -->
-  <div class="{{ weekdaysClasses }}">
-    @foreach(dayNames as day)
-      <div class="{{ weekdayClasses }}">{{ day }}</div>
-    @endforeach
-  </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
-  </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/Combobox-th5ebw62.stx

@@ -1,13 +0,0 @@
-<script server>
-export const value = $props.value
-export const onChange = $props.onChange
-export const className = $props.className || ''
-export const as = $props.as || 'div'
-
-const baseClasses = 'relative'
-const comboboxClasses = `${baseClasses} ${className}`.trim()
-</script>
-
-<component :is="{{ as }}" class="{{ comboboxClasses }}">
-  <slot :value="value" :onChange="onChange" />
-</component>

package/dist/ComboboxOption-an9zyan6.stx

@@ -1,52 +0,0 @@
-<script server>
-export const value = $props.value
-export const disabled = $props.disabled || false
-export const className = $props.className || ''
-export const as = $props.as || 'li'
-export const currentValue = $props.currentValue
-export const onChange = $props.onChange
-
-export let active = false
-export const selected = currentValue === value
-
-const baseClasses = 'relative cursor-pointer select-none py-2 pl-10 pr-4'
-const stateClasses = active
-  ? 'bg-blue-100 text-blue-900 dark:bg-blue-900 dark:text-blue-100'
-  : 'text-neutral-900 dark:text-neutral-100'
-const disabledClasses = disabled ? 'opacity-50 cursor-not-allowed' : ''
-const optionClasses = `${baseClasses} ${stateClasses} ${disabledClasses} ${className}`.trim()
-
-export function handleClick() {
-  if (disabled) return
-  onChange?.(value)
-}
-
-export function handleMouseEnter() {
-  if (!disabled) active = true
-}
-
-export function handleMouseLeave() {
-  active = false
-}
-</script>
-
-<component
-  :is="{{ as }}"
-  class="{{ optionClasses }}"
-  role="option"
-  aria-selected="{{ selected ? 'true' : 'false' }}"
-  @if(disabled)aria-disabled="true"@endif
-  @click="handleClick"
-  @mouseenter="handleMouseEnter"
-  @mouseleave="handleMouseLeave"
->
-  @if(selected)
-    <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-blue-600 dark:text-blue-400">
-      <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-        <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
-      </svg>
-    </span>
-  @endif
-
-  <slot :active="active" :selected="selected" :disabled="disabled" />
-</component>

package/dist/CommandPalette-kwmdf2np.stx

@@ -1,39 +0,0 @@
-<script server>
-export const open = $props.open || false
-export const onClose = $props.onClose
-export const query = $props.query || ''
-export const onQueryChange = $props.onQueryChange
-export const className = $props.className || ''
-
-const baseClasses = 'fixed inset-0 z-50 overflow-y-auto p-4 sm:p-6 md:p-20'
-const paletteClasses = `${baseClasses} ${className}`.trim()
-
-export function handleClose() {
-  onClose?.()
-}
-</script>
-
-@if(open)
-  <div class="{{ paletteClasses }}">
-    <div class="fixed inset-0 bg-neutral-500 bg-opacity-25 dark:bg-opacity-50 transition-opacity" @click="handleClose" />
-
-    <div class="mx-auto max-w-xl transform divide-y divide-neutral-100 dark:divide-neutral-800 overflow-hidden rounded-xl bg-white dark:bg-neutral-900 shadow-2xl ring-1 ring-black ring-opacity-5 transition-all">
-      <div class="relative">
-        <svg class="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-neutral-400" viewBox="0 0 20 20" fill="currentColor">
-          <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
-        </svg>
-        <input
-          type="text"
-          class="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-neutral-900 dark:text-white placeholder-neutral-400 focus:ring-0 sm:text-sm"
-          placeholder="Search..."
-          value="{{ query }}"
-          @input="(e) => onQueryChange?.(e.target.value)"
-        />
-      </div>
-
-      <div class="max-h-96 overflow-y-auto py-2">
-        <slot :query="query" />
-      </div>
-    </div>
-  </div>
-@endif

package/dist/CommandPaletteItem-zx2fbpts.stx

@@ -1,32 +0,0 @@
-<script server>
-export const className = $props.className || ''
-export const onClick = $props.onClick
-export let active = false
-
-const baseClasses = 'flex cursor-pointer select-none items-center px-4 py-2'
-const activeClasses = active
-  ? 'bg-blue-600 text-white'
-  : 'text-neutral-900 dark:text-neutral-100'
-const itemClasses = `${baseClasses} ${activeClasses} ${className}`.trim()
-
-export function handleClick() {
-  onClick?.()
-}
-
-export function handleMouseEnter() {
-  active = true
-}
-
-export function handleMouseLeave() {
-  active = false
-}
-</script>
-
-<div
-  class="{{ itemClasses }}"
-  @click="handleClick"
-  @mouseenter="handleMouseEnter"
-  @mouseleave="handleMouseLeave"
->
-  <slot :active="active" />
-</div>

package/dist/Dialog-rgmj8q2j.stx

@@ -1,19 +0,0 @@
-<script server>
-export const open = $props.open || false
-export const onClose = $props.onClose
-export const className = $props.className || ''
-export const as = $props.as || 'div'
-
-const baseClasses = 'relative z-50'
-const dialogClasses = `${baseClasses} ${className}`.trim()
-
-export function handleClose() {
-  onClose?.(false)
-}
-</script>
-
-@if(open)
-  <div class="{{ dialogClasses }}" role="dialog" aria-modal="true">
-    <slot />
-  </div>
-@endif

package/dist/Dropdown-jz4jy0n3.stx

@@ -1,24 +0,0 @@
-<script server>
-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/DropdownItem-wagdspb8.stx

@@ -1,43 +0,0 @@
-<script server>
-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/EmailInput-ajsp9vw6.stx

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