twintrinsic 0.0.1

package/dist/components/Form/Calendar.svelte

@@ -0,0 +1,429 @@
+<!--
+@component
+Calendar - A date picker component with month navigation, range selection,
+and keyboard controls. Built with accessibility in mind.
+
+Usage:
+```svelte
+<Calendar
+  value={selectedDate}
+  onselect={handleSelect}
+/>
+
+<Calendar
+  value={dateRange}
+  range={true}
+  minDate={minDate}
+  maxDate={maxDate}
+  onselect={handleRangeSelect}
+/>
+```
+-->
+<script>
+import { slide } from "svelte/transition"
+import { clickOutside } from "../../actions"
+import Input from "./Input.svelte"
+
+const {
+  /** @type {Date | [Date, Date] | null} - Selected date or date range */
+  value = null,
+  /** @type {boolean} - Whether to allow range selection */
+  range = false,
+  /** @type {Date | null} - Minimum selectable date */
+  minDate = null,
+  /** @type {Date | null} - Maximum selectable date */
+  maxDate = null,
+  /** @type {boolean} - Whether to show week numbers */
+  showWeekNumbers = false,
+  /** @type {string[]} - Custom day names */
+  dayNames = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
+  /** @type {string[]} - Custom month names */
+  monthNames = [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December",
+  ],
+  /** @type {string} - Input label */
+  label = "Date",
+  /** @type {string} - Date format for display */
+  format = "MM/dd/yyyy",
+  /** @type {boolean} - Whether the calendar is disabled */
+  disabled = false,
+  /** @type {string} - Additional CSS classes */
+  class: className = "",
+  /** @type {(event: CustomEvent) => void} - Select event handler */
+  onselect,
+} = $props()
+
+let showCalendar = $state(false)
+let currentMonth = $state(new Date())
+let hoverDate = $state(null)
+let inputValue = $state("")
+let startDate = $state(null)
+let endDate = $state(null)
+let calendarElement = $state()
+
+// Initialize dates from value prop
+$effect(() => {
+  if (value) {
+    if (range && Array.isArray(value)) {
+      ;[startDate, endDate] = value
+      currentMonth = new Date(startDate)
+    } else if (!range && value instanceof Date) {
+      startDate = value
+      currentMonth = new Date(value)
+    }
+    updateInputValue()
+  }
+})
+
+// Get days in month matrix
+function getDaysInMonth(date) {
+  const year = date.getFullYear()
+  const month = date.getMonth()
+  const firstDay = new Date(year, month, 1)
+  const lastDay = new Date(year, month + 1, 0)
+  const days = []
+  let week = []
+
+  // Fill in leading empty cells
+  for (let i = 0; i < firstDay.getDay(); i++) {
+    week.push(null)
+  }
+
+  // Fill in days
+  for (let day = 1; day <= lastDay.getDate(); day++) {
+    if (week.length === 7) {
+      days.push(week)
+      week = []
+    }
+    week.push(new Date(year, month, day))
+  }
+
+  // Fill in trailing empty cells
+  while (week.length < 7) {
+    week.push(null)
+  }
+  days.push(week)
+
+  return days
+}
+
+// Get week number
+function getWeekNumber(date) {
+  const target = new Date(date.valueOf())
+  const dayNr = (date.getDay() + 6) % 7
+  target.setDate(target.getDate() - dayNr + 3)
+  const firstThursday = target.valueOf()
+  target.setMonth(0, 1)
+  if (target.getDay() !== 4) {
+    target.setMonth(0, 1 + ((4 - target.getDay() + 7) % 7))
+  }
+  return 1 + Math.ceil((firstThursday - target) / 604800000)
+}
+
+// Format date for display
+function formatDate(date) {
+  if (!date) return ""
+
+  return format
+    .replace("MM", String(date.getMonth() + 1).padStart(2, "0"))
+    .replace("dd", String(date.getDate()).padStart(2, "0"))
+    .replace("yyyy", date.getFullYear())
+}
+
+// Update input value based on selected dates
+function updateInputValue() {
+  if (range) {
+    inputValue = startDate && endDate ? `${formatDate(startDate)} - ${formatDate(endDate)}` : ""
+  } else {
+    inputValue = startDate ? formatDate(startDate) : ""
+  }
+}
+
+// Handle date selection
+function handleDateSelect(date) {
+  if (disabled) return
+
+  if (range) {
+    if (!startDate || (startDate && endDate) || date < startDate) {
+      startDate = date
+      endDate = null
+    } else {
+      endDate = date
+      showCalendar = false
+    }
+
+    onselect?.(new CustomEvent("select", { detail: { start: startDate, end: endDate } }))
+  } else {
+    startDate = date
+    showCalendar = false
+    onselect?.(new CustomEvent("select", { detail: { date } }))
+  }
+
+  updateInputValue()
+}
+
+// Handle date hover for range selection
+function handleDateHover(date) {
+  if (range && startDate && !endDate) {
+    hoverDate = date
+  }
+}
+
+// Check if date is in range
+function isInRange(date) {
+  if (!date) return false
+  if (range) {
+    if (startDate && !endDate && hoverDate) {
+      return date >= startDate && date <= hoverDate
+    }
+    return startDate && endDate && date >= startDate && date <= endDate
+  }
+  return false
+}
+
+// Check if date is selected
+function isSelected(date) {
+  if (!date) return false
+  if (range) {
+    return (
+      (startDate && date.getTime() === startDate.getTime()) ||
+      (endDate && date.getTime() === endDate.getTime())
+    )
+  }
+  return startDate && date.getTime() === startDate.getTime()
+}
+
+// Check if date is disabled
+function isDisabled(date) {
+  if (!date) return true
+  if (minDate && date < minDate) return true
+  if (maxDate && date > maxDate) return true
+  return false
+}
+
+// Navigate to previous/next month
+function navigateMonth(delta) {
+  const newMonth = new Date(currentMonth)
+  newMonth.setMonth(newMonth.getMonth() + delta)
+  currentMonth = newMonth
+}
+
+// Handle keyboard navigation
+function handleKeydown(event) {
+  if (!showCalendar) return
+
+  const key = event.key
+  const newDate = new Date(currentMonth)
+
+  switch (key) {
+    case "ArrowLeft":
+      event.preventDefault()
+      newDate.setDate(newDate.getDate() - 1)
+      break
+    case "ArrowRight":
+      event.preventDefault()
+      newDate.setDate(newDate.getDate() + 1)
+      break
+    case "ArrowUp":
+      event.preventDefault()
+      newDate.setDate(newDate.getDate() - 7)
+      break
+    case "ArrowDown":
+      event.preventDefault()
+      newDate.setDate(newDate.getDate() + 7)
+      break
+    case "Enter":
+      event.preventDefault()
+      handleDateSelect(currentMonth)
+      break
+    case "Escape":
+      event.preventDefault()
+      showCalendar = false
+      break
+    default:
+      return
+  }
+
+  if (!isDisabled(newDate)) {
+    currentMonth = newDate
+  }
+}
+</script>
+
+<div
+  class="calendar-container {className}"
+  use:clickOutside
+  onclickOutside={() => showCalendar = false}
+>
+  <Input
+    {label}
+    {disabled}
+    value={inputValue}
+    readonly
+    rightIcon="calendar"
+    onclick={() => showCalendar = !showCalendar}
+    onrightIconClick={() => showCalendar = !showCalendar}
+  />
+  
+  {#if showCalendar}
+    <div
+      class="calendar"
+      role="dialog"
+      aria-label="Calendar"
+      transition:slide={{ duration: 150 }}
+      onkeydown={handleKeydown}
+    >
+      <div class="calendar-header">
+        <button
+          type="button"
+          class="calendar-nav-btn"
+          onclick={() => navigateMonth(-1)}
+          aria-label="Previous month"
+          disabled={disabled}
+        >
+          <svg class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
+            <path d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z" />
+          </svg>
+        </button>
+        
+        <div class="calendar-title">
+          {monthNames[currentMonth.getMonth()]} {currentMonth.getFullYear()}
+        </div>
+        
+        <button
+          type="button"
+          class="calendar-nav-btn"
+          onclick={() => navigateMonth(1)}
+          aria-label="Next month"
+          disabled={disabled}
+        >
+          <svg class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
+            <path d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" />
+          </svg>
+        </button>
+      </div>
+      
+      <table class="calendar-grid" role="grid">
+        <thead>
+          <tr>
+            {#if showWeekNumbers}
+              <th scope="col">Wk</th>
+            {/if}
+            {#each dayNames as day}
+              <th scope="col">{day}</th>
+            {/each}
+          </tr>
+        </thead>
+        <tbody>
+          {#each getDaysInMonth(currentMonth) as week}
+            <tr>
+              {#if showWeekNumbers}
+                <td class="calendar-week">
+                  {#if week[0]}
+                    {getWeekNumber(week[0])}
+                  {/if}
+                </td>
+              {/if}
+              {#each week as day}
+                <td
+                  class="calendar-day"
+                  class:calendar-day-selected={isSelected(day)}
+                  class:calendar-day-in-range={isInRange(day)}
+                  class:calendar-day-disabled={isDisabled(day)}
+                >
+                  {#if day}
+                    <button
+                      type="button"
+                      disabled={isDisabled(day)}
+                      onclick={() => handleDateSelect(day)}
+                      onmouseenter={() => handleDateHover(day)}
+                      aria-label={formatDate(day)}
+                      aria-selected={isSelected(day)}
+                    >
+                      {day.getDate()}
+                    </button>
+                  {/if}
+                </td>
+              {/each}
+            </tr>
+          {/each}
+        </tbody>
+      </table>
+    </div>
+  {/if}
+</div>
+
+<style>
+  @reference "../../twintrinsic.css";
+
+  .calendar-container {
+    @apply relative inline-block w-full;
+  }
+
+  .calendar {
+    @apply absolute z-50 mt-1 p-4;
+    @apply bg-surface border border-border rounded-md shadow-lg;
+    @apply min-w-[280px];
+  }
+
+  .calendar-header {
+    @apply flex items-center justify-between mb-4;
+  }
+
+  .calendar-title {
+    @apply text-sm font-medium;
+  }
+
+  .calendar-nav-btn {
+    @apply p-1 rounded-md;
+    @apply hover:bg-hover focus:bg-hover;
+    @apply disabled:opacity-50 disabled:cursor-not-allowed;
+  }
+
+  .calendar-grid {
+    @apply w-full border-collapse;
+  }
+
+  .calendar-grid th {
+    @apply p-1 text-xs font-medium text-muted text-center;
+  }
+
+  .calendar-week {
+    @apply p-1 text-xs text-muted text-center;
+  }
+
+  .calendar-day {
+    @apply p-0 text-center;
+  }
+
+  .calendar-day button {
+    @apply w-8 h-8 rounded-md text-sm;
+    @apply hover:bg-hover focus:bg-hover;
+    @apply disabled:opacity-50 disabled:cursor-not-allowed;
+  }
+
+  .calendar-day-selected button {
+    @apply bg-primary text-primary-text;
+    @apply hover:bg-primary-hover focus:bg-primary-hover;
+  }
+
+  .calendar-day-in-range {
+    @apply bg-primary-50 dark:bg-primary-900;
+  }
+
+  .calendar-day-disabled button {
+    @apply opacity-50 cursor-not-allowed;
+    @apply hover:bg-transparent focus:bg-transparent;
+  }
+</style>

package/dist/components/Form/Calendar.svelte.d.ts

@@ -0,0 +1,53 @@
+export default Calendar;
+type Calendar = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * Calendar - A date picker component with month navigation, range selection,
+ * and keyboard controls. Built with accessibility in mind.
+ *
+ * Usage:
+ * ```svelte
+ * <Calendar
+ * value={selectedDate}
+ * onselect={handleSelect}
+ * />
+ *
+ * <Calendar
+ * value={dateRange}
+ * range={true}
+ * minDate={minDate}
+ * maxDate={maxDate}
+ * onselect={handleRangeSelect}
+ * />
+ * ```
+ */
+declare const Calendar: import("svelte").Component<{
+    value?: any;
+    range?: boolean;
+    minDate?: any;
+    maxDate?: any;
+    showWeekNumbers?: boolean;
+    dayNames?: any[];
+    monthNames?: any[];
+    label?: string;
+    format?: string;
+    disabled?: boolean;
+    class?: string;
+    onselect: any;
+}, {}, "">;
+type $$ComponentProps = {
+    value?: any;
+    range?: boolean;
+    minDate?: any;
+    maxDate?: any;
+    showWeekNumbers?: boolean;
+    dayNames?: any[];
+    monthNames?: any[];
+    label?: string;
+    format?: string;
+    disabled?: boolean;
+    class?: string;
+    onselect: any;
+};

package/dist/components/Form/Checkbox.svelte

@@ -0,0 +1,196 @@
+<!--
+@component
+Checkbox - A form component for boolean or indeterminate input with customizable
+labels, descriptions, and validation states.
+
+Usage:
+```svelte
+<Checkbox
+  label="Accept terms"
+  onchange={handleChange}
+/>
+
+<Checkbox
+  label="Select all"
+  indeterminate={someSelected}
+  checked={allSelected}
+  description="Select all items in the list"
+/>
+```
+-->
+<script>
+const {
+  /** @type {string} - Label text */
+  label,
+  /** @type {string} - Description text */
+  description = "",
+  /** @type {boolean} - Whether the checkbox is checked */
+  checked = false,
+  /** @type {boolean} - Whether the checkbox is in an indeterminate state */
+  indeterminate = false,
+  /** @type {boolean} - Whether the checkbox is disabled */
+  disabled = false,
+  /** @type {boolean} - Whether the checkbox is required */
+  required = false,
+  /** @type {string} - Error message */
+  error = "",
+  /** @type {string} - Name attribute */
+  name = "",
+  /** @type {string} - Value attribute */
+  value = "",
+  /** @type {string} - Additional CSS classes */
+  class: className = "",
+  /** @type {(event: CustomEvent) => void} - Change event handler */
+  onchange,
+} = $props()
+
+let checkboxEl = $state()
+
+// Update indeterminate state
+$effect(() => {
+  if (checkboxEl) {
+    checkboxEl.indeterminate = indeterminate
+  }
+})
+
+// Handle change event
+function handleChange(event) {
+  const isChecked = event.target.checked
+  onchange?.(new CustomEvent("change", { detail: { checked: isChecked } }))
+}
+</script>
+
+<div class="checkbox-container {className}">
+  <label
+    class="checkbox"
+    class:checkbox-disabled={disabled}
+    class:checkbox-error={error}
+  >
+    <input
+      type="checkbox"
+      bind:this={checkboxEl}
+      {name}
+      {value}
+      {checked}
+      {disabled}
+      {required}
+      aria-invalid={!!error}
+      aria-describedby={error ? `${name}-error` : undefined}
+      onchange={handleChange}
+    />
+    <span class="checkbox-control" aria-hidden="true">
+      {#if checked && !indeterminate}
+        <svg class="w-4 h-4" viewBox="0 0 20 20" fill="currentColor">
+          <path 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" />
+        </svg>
+      {:else if indeterminate}
+        <svg class="w-4 h-4" viewBox="0 0 20 20" fill="currentColor">
+          <path d="M5 10a1 1 0 011-1h8a1 1 0 110 2H6a1 1 0 01-1-1z" />
+        </svg>
+      {/if}
+    </span>
+    <span class="checkbox-label">
+      {label}
+      {#if required}
+        <span class="checkbox-required" aria-hidden="true">*</span>
+      {/if}
+    </span>
+  </label>
+
+  {#if description}
+    <div class="checkbox-description">
+      {description}
+    </div>
+  {/if}
+
+  {#if error}
+    <div
+      class="checkbox-error-text"
+      id="{name}-error"
+      role="alert"
+    >
+      {error}
+    </div>
+  {/if}
+</div>
+
+<style>
+  @reference "../../twintrinsic.css";
+
+  .checkbox-container {
+    @apply flex flex-col gap-1;
+  }
+
+  .checkbox {
+    @apply relative flex items-start gap-2;
+    @apply cursor-pointer select-none;
+  }
+
+  .checkbox-disabled {
+    @apply cursor-not-allowed opacity-50;
+  }
+
+  /* Hide default checkbox */
+  .checkbox input {
+    @apply absolute w-0 h-0 opacity-0;
+  }
+
+  /* Custom checkbox control */
+  .checkbox-control {
+    @apply flex items-center justify-center;
+    @apply w-5 h-5 rounded;
+    @apply border-2 border-border;
+    @apply text-primary;
+    @apply transition-colors;
+  }
+
+  /* Hover state */
+  .checkbox:hover .checkbox-control {
+    @apply border-primary-500;
+  }
+
+  /* Focus state */
+  .checkbox input:focus + .checkbox-control {
+    @apply ring-2 ring-primary-500 ring-offset-2;
+    @apply ring-offset-background;
+  }
+
+  /* Checked state */
+  .checkbox input:checked + .checkbox-control {
+    @apply bg-primary-500 border-primary-500;
+  }
+
+  /* Error state */
+  .checkbox-error .checkbox-control {
+    @apply border-error;
+  }
+
+  .checkbox-error:hover .checkbox-control {
+    @apply border-error-bold;
+  }
+
+  .checkbox-error input:checked + .checkbox-control {
+    @apply bg-error border-error-bold;
+  }
+
+  /* Label */
+  .checkbox-label {
+    @apply text-sm;
+  }
+
+  .checkbox-required {
+    @apply ml-1 text-error;
+  }
+
+  /* Description */
+  .checkbox-description {
+    @apply text-sm text-muted;
+    @apply pl-7; /* Align with label text */
+  }
+
+  /* Error message */
+  .checkbox-error-text {
+    @apply text-sm text-error;
+    @apply pl-7; /* Align with label text */
+  }
+</style>