@stacksjs/components 0.2.93 → 0.2.94

package/src/ui/button/README.md

@@ -1,80 +0,0 @@
-# Button Component
-
-A versatile button component built with STX and headwind utility classes.
-
-## Installation
-
-```bash
-bun add @stacksjs/components
-```
-
-## Usage
-
-```stx
-<Button variant="primary" size="md">Click me</Button>
-```
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `variant` | `'primary' \| 'secondary' \| 'outline' \| 'ghost' \| 'danger'` | `'primary'` | Button visual style |
-| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Button size |
-| `disabled` | `boolean` | `false` | Disable the button |
-| `type` | `'button' \| 'submit' \| 'reset'` | `'button'` | Button HTML type |
-| `className` | `string` | `''` | Additional CSS classes |
-| `onClick` | `() => void` | - | Click handler |
-
-## Examples
-
-### Variants
-
-```stx
-<Button variant="primary">Primary Button</Button>
-
-<Button variant="secondary">Secondary Button</Button>
-
-<Button variant="outline">Outline Button</Button>
-
-<Button variant="ghost">Ghost Button</Button>
-
-<Button variant="danger">Danger Button</Button>
-```
-
-### Sizes
-
-```stx
-<Button size="sm">Small Button</Button>
-
-<Button size="md">Medium Button</Button>
-
-<Button size="lg">Large Button</Button>
-```
-
-### Disabled State
-
-```stx
-<Button disabled>Disabled Button</Button>
-```
-
-### With Icon
-
-```stx
-<Button variant="primary">
-  <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
-  </svg>
-  Add Item
-</Button>
-```
-
-## Features
-
-- 5 visual variants (primary, secondary, outline, ghost, danger)
-- 3 size options (sm, md, lg)
-- Disabled state support
-- Focus ring with keyboard navigation
-- Dark mode support
-- Accessible by default
-- Smooth transitions
-- Headwind utility classes for easy customization

package/src/ui/button/index.ts

@@ -1,85 +0,0 @@
-import type { PropSchema, ValidationResult } from '../../utils/prop-validation'
-import { ErrorTypes, wrapErrorHandler } from '../../utils/error-handling'
-import { createPropValidator, PropTypes } from '../../utils/prop-validation'
-
-export { default as Button } from './Button.stx'
-
-export interface ButtonProps {
-  variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger'
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
-  disabled?: boolean
-  loading?: boolean
-  type?: 'button' | 'submit' | 'reset'
-  fullWidth?: boolean
-  leftIcon?: string
-  rightIcon?: string
-  className?: string
-  onClick?: (event: Event) => void
-}
-
-/**
- * Button prop validation schema
- */
-export const buttonPropSchema: PropSchema = {
-  variant: PropTypes.oneOf(['primary', 'secondary', 'outline', 'ghost', 'danger']),
-  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
-  disabled: PropTypes.boolean,
-  loading: PropTypes.boolean,
-  type: PropTypes.oneOf(['button', 'submit', 'reset']),
-  fullWidth: PropTypes.boolean,
-  leftIcon: PropTypes.string,
-  rightIcon: PropTypes.string,
-  className: PropTypes.string,
-  onClick: PropTypes.func,
-}
-
-/**
- * Validate Button component props
- * Only runs in development mode
- */
-export const validateButtonProps: (props: Record<string, any>) => ValidationResult = createPropValidator('Button', buttonPropSchema)
-
-/**
- * Create a safe onClick handler that catches and reports errors
- *
- * @param handler - Click handler function
- * @returns Wrapped handler with error handling
- *
- * @example
- * ```ts
- * const safeHandler = createSafeClickHandler(() => {
- *   // Your click logic
- * })
- * ```
- */
-export function createSafeClickHandler(handler: (event: Event) => void): (event: Event) => void {
-  return wrapErrorHandler(handler, 'Button', 'onClick')
-}
-
-/**
- * Helper to validate button variant
- */
-export function validateVariant(variant?: string): void {
-  if (variant && !['primary', 'secondary', 'outline', 'ghost', 'danger'].includes(variant)) {
-    throw ErrorTypes.invalidProp(
-      'Button',
-      'variant',
-      variant,
-      ['primary', 'secondary', 'outline', 'ghost', 'danger'],
-    )
-  }
-}
-
-/**
- * Helper to validate button size
- */
-export function validateSize(size?: string): void {
-  if (size && !['xs', 'sm', 'md', 'lg', 'xl'].includes(size)) {
-    throw ErrorTypes.invalidProp(
-      'Button',
-      'size',
-      size,
-      ['xs', 'sm', 'md', 'lg', 'xl'],
-    )
-  }
-}

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
-}