@stacksjs/components 0.2.3

package/dist/Avatar-5m0v0s4x.stx

@@ -0,0 +1,88 @@
+<script>
+export const src = $props.src || ''
+export const alt = $props.alt || ''
+export const initials = $props.initials || ''
+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',
+  md: 'w-10 h-10 text-base',
+  lg: 'w-12 h-12 text-lg',
+  xl: 'w-16 h-16 text-xl',
+  '2xl': 'w-20 h-20 text-2xl',
+}
+
+// Shape classes
+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',
+  md: 'w-2.5 h-2.5 border-2',
+  lg: 'w-3 h-3 border-2',
+  xl: 'w-3.5 h-3.5 border-2',
+  '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',
+  away: 'bg-yellow-500 dark:bg-yellow-400',
+  busy: 'bg-red-500 dark:bg-red-400',
+}
+
+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 displayInitials = initials || (alt ? alt.split(' ').map(n => n[0]).join('').substring(0, 2) : '?')
+</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
+  </div>
+
+  @if(status)
+    <span
+      class="{{ statusClasses }}"
+      role="status"
+      aria-label="{{ status }}"
+    ></span>
+  @endif
+</div>
+
+<script>
+function handleImageError(event) {
+  imageError = true
+
+  if (onError) {
+    onError(event)
+  }
+}
+</script>

package/dist/Badge-ynes82vv.stx

@@ -0,0 +1,70 @@
+<script>
+export const variant = $props.variant || 'default'
+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',
+  secondary: 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200',
+  success: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200',
+  warning: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200',
+  danger: 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200',
+  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',
+}
+
+// Dot color classes
+const dotColorClasses = {
+  default: 'bg-gray-500 dark:bg-gray-400',
+  primary: 'bg-blue-500 dark:bg-blue-400',
+  secondary: 'bg-purple-500 dark:bg-purple-400',
+  success: 'bg-green-500 dark:bg-green-400',
+  warning: 'bg-yellow-500 dark:bg-yellow-400',
+  danger: 'bg-red-500 dark:bg-red-400',
+  info: 'bg-cyan-500 dark:bg-cyan-400',
+}
+
+export const badgeClasses = `inline-flex items-center gap-1.5 font-medium rounded-full ${variantClasses[variant]} ${sizeClasses[size]} ${className}`.trim()
+export const dotClasses = `w-2 h-2 rounded-full ${dotColorClasses[variant]}`.trim()
+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>
+
+<span class="{{ badgeClasses }}" role="status">
+  @if(dot)
+    <span class="{{ dotClasses }}" aria-hidden="true"></span>
+  @endif
+
+  <slot />
+
+  @if(removable && onRemove)
+    <button
+      type="button"
+      onclick="handleRemove()"
+      class="{{ removeButtonClasses }}"
+      aria-label="Remove"
+    >
+      <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+      </svg>
+    </button>
+  @endif
+</span>
+
+<script>
+function handleRemove() {
+  if (onRemove) {
+    onRemove()
+  }
+}
+</script>

package/dist/Breadcrumb-h9n427sk.stx

@@ -0,0 +1,79 @@
+<script>
+export const items = $props.items || []
+export const separator = $props.separator || '/'
+export const maxItems = $props.maxItems || 0
+export const className = $props.className || ''
+
+// Handle collapse if maxItems is set
+let displayItems = items
+if (maxItems > 0 && items.length > maxItems) {
+  const firstItems = items.slice(0, 1)
+  const lastItems = items.slice(-(maxItems - 1))
+  displayItems = [...firstItems, { label: '...', href: '#', collapsed: true }, ...lastItems]
+}
+
+// Separator element
+const separatorElement = separator === '/' ? '/' :
+  separator === '>' ? '›' :
+  separator === 'arrow' ? `<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>` :
+  separator
+
+export const breadcrumbClasses = `flex items-center flex-wrap gap-2 text-sm ${className}`.trim()
+export const itemClasses = `text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 transition-colors duration-150`.trim()
+export const activeItemClasses = `text-gray-900 dark:text-gray-100 font-medium`.trim()
+export const separatorClasses = `text-gray-400 dark:text-gray-600 select-none`.trim()
+export const collapsedClasses = `text-gray-400 dark:text-gray-600 cursor-default`.trim()
+</script>
+
+<nav class="{{ breadcrumbClasses }}" aria-label="Breadcrumb">
+  <ol class="flex items-center gap-2">
+    @foreach(item in displayItems)
+      <li class="flex items-center gap-2">
+        @if(item.collapsed)
+          <!-- Collapsed indicator -->
+          <span class="{{ collapsedClasses }}">{{ item.label }}</span>
+        @else
+          @if($loop.last)
+            <!-- Last item (current page) -->
+            <span class="{{ activeItemClasses }}" aria-current="page">
+              @if(item.icon)
+                <span class="inline-flex items-center gap-1.5">
+                  <span innerHTML="{!! item.icon !!}"></span>
+                  <span>{{ item.label }}</span>
+                </span>
+              @else
+                {{ item.label }}
+              @endif
+            </span>
+          @else
+            <!-- Link item -->
+            <a
+              href="{{ item.href }}"
+              class="{{ itemClasses }}"
+            >
+              @if(item.icon)
+                <span class="inline-flex items-center gap-1.5">
+                  <span innerHTML="{!! item.icon !!}"></span>
+                  <span>{{ item.label }}</span>
+                </span>
+              @else
+                {{ item.label }}
+              @endif
+            </a>
+          @endif
+        @endif
+
+        <!-- Separator (not after last item) -->
+        @if(!$loop.last)
+          <span class="{{ separatorClasses }}" aria-hidden="true">
+            @if(separator === 'arrow')
+              {!! separatorElement !!}
+            @else
+              {{ separatorElement }}
+            @endif
+          </span>
+        @endif
+      </li>
+    @endforeach
+  </ol>
+</nav>

package/dist/Button-7xtrzn14.stx

@@ -0,0 +1,89 @@
+<script>
+export const variant = $props.variant || 'primary'
+export const size = $props.size || 'md'
+export const disabled = $props.disabled || false
+export const loading = $props.loading || false
+export const type = $props.type || 'button'
+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',
+  outline: 'border-2 border-blue-500 text-blue-500 hover:bg-blue-50 dark:border-blue-400 dark:text-blue-400 dark:hover:bg-blue-950',
+  ghost: 'hover:bg-neutral-100 text-neutral-700 dark:hover:bg-neutral-800 dark:text-neutral-300',
+  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',
+  md: 'px-4 py-2 text-base h-10 gap-2',
+  lg: 'px-6 py-3 text-lg h-12 gap-2.5',
+  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 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' : ''
+
+// 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>
+
+<button
+  type="{{ type }}"
+  class="{{ buttonClasses }}"
+  @if(isDisabled)disabled@endif
+  @if(onClick)onclick="handleClick(event)"@endif
+  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>
+    @endif
+  @endif
+
+  <slot />
+
+  @if(!loading && rightIcon)
+    <!-- Right icon -->
+    <span class="{{ iconClasses }}" innerHTML="{!! rightIcon !!}"></span>
+  @endif
+</button>
+
+<script>
+function handleClick(event) {
+  if (!isDisabled && onClick) {
+    onClick(event)
+  }
+}
+</script>

package/dist/Calendar-egvx1pma.stx

@@ -0,0 +1,232 @@
+<script>
+// 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 }}"
+      onclick="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 }}"
+      onclick="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) }}"
+        onclick="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"
+        onclick="goToToday()"
+      >
+        Today
+      </button>
+    </div>
+  @endif
+</div>

package/dist/Card-r9w7vy1a.stx

@@ -0,0 +1,74 @@
+<script>
+export const variant = $props.variant || 'default'
+export const padding = $props.padding || 'default'
+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',
+  elevated: 'bg-white dark:bg-gray-800 shadow-lg border-0',
+  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 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()
+export const imageClasses = `w-full h-48 object-cover`.trim()
+export const contentClasses = `${image ? paddingClasses[padding] : ''}`.trim()
+</script>
+
+@if(onClick)
+  <div class="{{ cardClasses }}" onclick="handleClick(event)" role="button" tabindex="0" onkeydown="handleKeyDown(event)">
+    @if(image)
+      <img src="{{ image }}" alt="{{ imageAlt }}" class="{{ imageClasses }}" />
+    @endif
+
+    <div class="{{ contentClasses }}">
+      <slot />
+    </div>
+  </div>
+@else
+  <div class="{{ cardClasses }}">
+    @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>