@stacksjs/components 0.2.92 → 0.2.94

package/src/ui/calendar/Calendar.stx

@@ -1,189 +0,0 @@
-<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/src/ui/calendar/README.md

@@ -1,254 +0,0 @@
-# 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

@@ -1,14 +0,0 @@
-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

@@ -1,68 +0,0 @@
-<script server>
-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 className = $props.className || ''
-
-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',
-}
-
-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' : ''
-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>
-
-<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>
-  </div>
-@else
-  <div class="{{ cardClasses }}">
-    @if(image)
-      <img src="{{ image }}" alt="{{ imageAlt }}" class="{{ imageClasses }}" />
-    @endif
-    <div class="{{ contentClasses }}">
-      <slot />
-    </div>
-  </div>
-@endif

package/src/ui/card/index.ts

@@ -1,13 +0,0 @@
-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

@@ -1,86 +0,0 @@
-<script server>
-export const checked = $props.checked || false
-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 || ''
-
-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'
-
-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 }}
-// Reactive prop binding so the parent can drive `checked` via signals.
-// See stacksjs/stx#1704.
-const isChecked = useReactiveProp('checked', {{ 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="{{ inputId }}"
-      type="checkbox"
-      name="{{ name }}"
-      value="{{ value }}"
-      :checked="isChecked()"
-      @if(disabled)disabled@endif
-      @if(required)required@endif
-      class="{{ checkboxClasses }}"
-      @change="onInputChange($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="{{ inputId }}" 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>

package/src/ui/checkbox/index.ts

@@ -1,16 +0,0 @@
-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
-}