@stacksjs/components 0.2.3

package/src/ui/calendar/Calendar.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/src/ui/calendar/README.md

@@ -0,0 +1,254 @@
+# Calendar Component
+
+A fully-featured calendar/date picker component with support for date selection, range constraints, and localization.
+
+## Features
+
+- ✅ Date selection with visual feedback
+- ✅ Month/year navigation
+- ✅ Min/max date constraints
+- ✅ Disabled dates support
+- ✅ Localization support
+- ✅ Configurable first day of week
+- ✅ Today button for quick navigation
+- ✅ Today highlighting
+- ✅ Dark mode support
+- ✅ Accessible with ARIA labels
+- ✅ Keyboard navigation ready
+
+## Usage
+
+### Basic Calendar
+
+```stx
+<script>
+import { Calendar } from '@stacksjs/components'
+
+let selectedDate = new Date()
+
+function handleDateChange(date) {
+  selectedDate = date
+  console.log('Selected date:', date)
+}
+</script>
+
+<Calendar value={selectedDate} onChange={handleDateChange} />
+```
+
+### With Date Constraints
+
+```stx
+<script>
+import { Calendar } from '@stacksjs/components'
+
+const today = new Date()
+const minDate = new Date(today.getFullYear(), today.getMonth(), 1) // First day of month
+const maxDate = new Date(today.getFullYear(), today.getMonth() + 1, 0) // Last day of month
+
+let selectedDate = today
+</script>
+
+<Calendar
+  value={selectedDate}
+  minDate={minDate}
+  maxDate={maxDate}
+  onChange={(date) => selectedDate = date}
+/>
+```
+
+### With Disabled Dates
+
+```stx
+<script>
+import { Calendar } from '@stacksjs/components'
+
+const disabledDates = [
+  new Date(2024, 11, 25), // Christmas
+  new Date(2024, 0, 1),   // New Year's Day
+]
+
+let selectedDate = new Date()
+</script>
+
+<Calendar
+  value={selectedDate}
+  disabledDates={disabledDates}
+  onChange={(date) => selectedDate = date}
+/>
+```
+
+### Localized Calendar
+
+```stx
+<script>
+import { Calendar } from '@stacksjs/components'
+
+let selectedDate = new Date()
+</script>
+
+<!-- Spanish calendar starting on Monday -->
+<Calendar
+  value={selectedDate}
+  locale="es-ES"
+  firstDayOfWeek={1}
+  onChange={(date) => selectedDate = date}
+/>
+```
+
+### Without Today Button
+
+```stx
+<script>
+import { Calendar } from '@stacksjs/components'
+
+let selectedDate = new Date()
+</script>
+
+<Calendar
+  value={selectedDate}
+  showToday={false}
+  highlightToday={false}
+  onChange={(date) => selectedDate = date}
+/>
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value` | `Date` | `new Date()` | Currently selected date |
+| `onChange` | `(date: Date) => void` | - | Callback when a date is selected |
+| `minDate` | `Date` | - | Minimum selectable date |
+| `maxDate` | `Date` | - | Maximum selectable date |
+| `disabledDates` | `Date[]` | `[]` | Array of dates that cannot be selected |
+| `locale` | `string` | `'en-US'` | Locale for month/day names (e.g., 'en-US', 'es-ES', 'fr-FR') |
+| `firstDayOfWeek` | `number` | `0` | First day of week (0 = Sunday, 1 = Monday, etc.) |
+| `showToday` | `boolean` | `true` | Show "Today" button |
+| `highlightToday` | `boolean` | `true` | Highlight today's date with a border |
+| `className` | `string` | `''` | Additional CSS classes |
+
+## Examples
+
+### Date Range Selector (Start Date)
+
+```stx
+<script>
+import { Calendar } from '@stacksjs/components'
+
+let startDate = null
+let endDate = null
+
+function handleStartDateChange(date) {
+  startDate = date
+  if (endDate && date > endDate) {
+    endDate = null
+  }
+}
+</script>
+
+<div>
+  <h3>Select Start Date</h3>
+  <Calendar
+    value={startDate}
+    maxDate={endDate}
+    onChange={handleStartDateChange}
+  />
+</div>
+```
+
+### Meeting Scheduler (Exclude Weekends)
+
+```stx
+<script>
+import { Calendar } from '@stacksjs/components'
+
+function getNextNDays(n) {
+  const dates = []
+  const today = new Date()
+  for (let i = 0; i < n; i++) {
+    const date = new Date(today)
+    date.setDate(today.getDate() + i)
+    dates.push(date)
+  }
+  return dates
+}
+
+function getWeekends(days) {
+  return days.filter(date => date.getDay() === 0 || date.getDay() === 6)
+}
+
+const next60Days = getNextNDays(60)
+const weekends = getWeekends(next60Days)
+
+let meetingDate = null
+</script>
+
+<Calendar
+  value={meetingDate}
+  minDate={new Date()}
+  disabledDates={weekends}
+  onChange={(date) => meetingDate = date}
+/>
+```
+
+### Birthday Picker
+
+```stx
+<script>
+import { Calendar } from '@stacksjs/components'
+
+const today = new Date()
+const minDate = new Date(today.getFullYear() - 120, 0, 1) // 120 years ago
+const maxDate = new Date(today.getFullYear() - 18, today.getMonth(), today.getDate()) // 18+ only
+
+let birthday = null
+</script>
+
+<Calendar
+  value={birthday}
+  minDate={minDate}
+  maxDate={maxDate}
+  onChange={(date) => birthday = date}
+/>
+```
+
+## Styling
+
+The calendar uses utility-first CSS classes and supports dark mode out of the box. You can customize the appearance by passing additional classes:
+
+```stx
+<Calendar
+  className="border-2 border-gray-300 shadow-xl"
+  value={selectedDate}
+  onChange={handleChange}
+/>
+```
+
+### Key Classes
+
+- Container: `bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4`
+- Selected date: `bg-blue-600 text-white`
+- Today: `border-2 border-blue-600` (when not selected)
+- Disabled: `opacity-50 cursor-not-allowed`
+- Hover: `hover:bg-gray-100 dark:hover:bg-gray-700`
+
+## Accessibility
+
+- Semantic HTML with proper ARIA labels
+- Keyboard navigation support (ready for enhancement)
+- Disabled dates are properly marked with `disabled` attribute
+- Clear visual indicators for selected and current dates
+
+## Browser Support
+
+Works in all modern browsers that support:
+- ES6+ JavaScript features
+- CSS Grid
+- CSS custom properties (for dark mode)
+
+## Related Components
+
+- **DatePicker**: Combines Calendar with an input field
+- **DateRangePicker**: Select start and end dates
+- **TimePicker**: Select time values
+- **DateTimePicker**: Combines date and time selection

package/src/ui/calendar/index.ts

@@ -0,0 +1,14 @@
+export { default as Calendar } from './Calendar.stx'
+
+export interface CalendarProps {
+  value?: Date
+  onChange?: (date: Date) => void
+  minDate?: Date
+  maxDate?: Date
+  disabledDates?: Date[]
+  locale?: string
+  firstDayOfWeek?: number // 0 = Sunday, 1 = Monday, etc.
+  showToday?: boolean
+  highlightToday?: boolean
+  className?: string
+}

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

package/src/ui/card/index.ts

@@ -0,0 +1,13 @@
+export { default as Card } from './Card.stx'
+
+export interface CardProps {
+  variant?: 'default' | 'outlined' | 'elevated' | 'flat'
+  padding?: 'none' | 'sm' | 'default' | 'lg'
+  hover?: boolean
+  clickable?: boolean
+  image?: string
+  imageAlt?: string
+  imagePosition?: 'top' | 'bottom'
+  onClick?: (event: Event) => void
+  className?: string
+}

package/src/ui/checkbox/Checkbox.stx

@@ -0,0 +1,92 @@
+<script>
+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'
+export const label = $props.label || ''
+export const description = $props.description || ''
+export const error = $props.error || false
+export const required = $props.required || false
+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 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'
+
+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()
+</script>
+
+<div class="relative flex items-start {{ className }}">
+  <div class="flex h-6 items-center">
+    <input
+      id="checkbox-{{ value || label }}"
+      type="checkbox"
+      name="{{ name }}"
+      value="{{ value }}"
+      checked="{{ checked }}"
+      disabled="{{ disabled }}"
+      required="{{ required }}"
+      class="{{ checkboxClasses }}"
+      onchange="handleChange(event)"
+      aria-invalid="{{ error ? 'true' : 'false' }}"
+      @if(description)aria-describedby="checkbox-description"@endif
+    />
+  </div>
+
+  @if(label || description)
+    <div class="ml-3 text-sm leading-6">
+      @if(label)
+        <label for="checkbox-{{ value || label }}" class="{{ labelClasses }}">
+          {{ label }}
+          @if(required)
+            <span class="text-red-500 ml-1">*</span>
+          @endif
+        </label>
+      @endif
+      @if(description)
+        <p id="checkbox-description" class="{{ descriptionClasses }}">
+          {{ description }}
+        </p>
+      @endif
+    </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>

package/src/ui/checkbox/index.ts

@@ -0,0 +1,16 @@
+export { default as Checkbox } from './Checkbox.stx'
+
+export interface CheckboxProps {
+  checked?: boolean
+  onChange?: (checked: boolean) => void
+  disabled?: boolean
+  indeterminate?: boolean
+  size?: 'sm' | 'md' | 'lg'
+  label?: string
+  description?: string
+  error?: boolean
+  required?: boolean
+  value?: string
+  name?: string
+  className?: string
+}