@classic-homes/theme-svelte 0.1.3 → 0.1.5

package/dist/lib/components/Combobox.svelte

@@ -0,0 +1,187 @@
+<script lang="ts">
+  import { Combobox as ComboboxPrimitive } from 'bits-ui';
+  import { cn } from '../utils.js';
+  import Spinner from './Spinner.svelte';
+
+  export interface ComboboxOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+  }
+
+  interface Props {
+    /** Current selected value */
+    value?: string;
+    /** Callback when value changes */
+    onValueChange?: (value: string) => void;
+    /** Array of selectable options */
+    options: ComboboxOption[];
+    /** Placeholder text for the input */
+    placeholder?: string;
+    /** Message to display when no results found */
+    emptyMessage?: string;
+    /** Whether the combobox is disabled */
+    disabled?: boolean;
+    /** Whether selection is required */
+    required?: boolean;
+    /** Name attribute for form submission */
+    name?: string;
+    /** Element ID */
+    id?: string;
+    /** Error message to display */
+    error?: string;
+    /** Whether async data is loading */
+    loading?: boolean;
+    /** Callback when search query changes (for async loading) */
+    onSearch?: (query: string) => void;
+    /** Debounce delay in ms for search callback (default: 300) */
+    debounceMs?: number;
+    /** Additional class for the trigger */
+    class?: string;
+  }
+
+  let {
+    value = $bindable(''),
+    onValueChange,
+    options,
+    placeholder = 'Select an option...',
+    emptyMessage = 'No results found.',
+    disabled = false,
+    required = false,
+    name,
+    id,
+    error,
+    loading = false,
+    onSearch,
+    debounceMs = 300,
+    class: className,
+  }: Props = $props();
+
+  let searchQuery = $state('');
+  let debounceTimer: ReturnType<typeof setTimeout> | null = null;
+  let open = $state(false);
+
+  // Find selected option label
+  const selectedLabel = $derived(options.find((opt) => opt.value === value)?.label);
+
+  // Always filter options locally based on search query
+  const filteredOptions = $derived.by(() => {
+    if (!searchQuery) return options;
+    const query = searchQuery.toLowerCase();
+    return options.filter((opt) => opt.label.toLowerCase().includes(query));
+  });
+
+  function handleSearchInput(e: Event) {
+    const target = e.target as HTMLInputElement;
+    searchQuery = target.value;
+
+    if (onSearch) {
+      // Debounce the search callback
+      if (debounceTimer) clearTimeout(debounceTimer);
+      debounceTimer = setTimeout(() => {
+        onSearch(searchQuery);
+      }, debounceMs);
+    }
+  }
+
+  function handleValueChange(newValue: string | undefined) {
+    if (newValue !== undefined) {
+      value = newValue;
+      onValueChange?.(newValue);
+    }
+  }
+
+  function handleOpenChange(isOpen: boolean) {
+    open = isOpen;
+    if (!isOpen) {
+      searchQuery = '';
+    }
+  }
+
+  // Cleanup debounce timer on unmount
+  $effect(() => {
+    return () => {
+      if (debounceTimer) clearTimeout(debounceTimer);
+    };
+  });
+</script>
+
+<ComboboxPrimitive.Root
+  type="single"
+  {disabled}
+  {required}
+  {name}
+  bind:open
+  onOpenChange={handleOpenChange}
+  onValueChange={handleValueChange}
+  {value}
+>
+  <div class="relative">
+    <ComboboxPrimitive.Input
+      {id}
+      placeholder={selectedLabel || placeholder}
+      oninput={handleSearchInput}
+      onfocus={() => (open = true)}
+      onclick={() => (open = true)}
+      class={cn(
+        'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+        error && 'border-destructive focus:ring-destructive',
+        className
+      )}
+      aria-invalid={error ? 'true' : undefined}
+    />
+  </div>
+
+  <ComboboxPrimitive.Content
+    class="relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
+    sideOffset={4}
+  >
+    <div class="p-1 max-h-[300px] overflow-y-auto">
+      {#if loading}
+        <div class="flex items-center justify-center py-6">
+          <Spinner size="sm" />
+          <span class="ml-2 text-sm text-muted-foreground">Loading...</span>
+        </div>
+      {:else if filteredOptions.length === 0}
+        <div class="py-6 text-center text-sm text-muted-foreground">
+          {emptyMessage}
+        </div>
+      {:else}
+        {#each filteredOptions as option}
+          <ComboboxPrimitive.Item
+            value={option.value}
+            label={option.label}
+            disabled={option.disabled}
+            class="relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[disabled]:cursor-default"
+          >
+            {#if option.value === value}
+              <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="16"
+                  height="16"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  class="h-4 w-4"
+                >
+                  <polyline points="20 6 9 17 4 12" />
+                </svg>
+              </span>
+            {/if}
+            {option.label}
+          </ComboboxPrimitive.Item>
+        {/each}
+      {/if}
+    </div>
+  </ComboboxPrimitive.Content>
+</ComboboxPrimitive.Root>
+
+{#if error}
+  <p class="text-sm text-destructive mt-1.5" role="alert">
+    {error}
+  </p>
+{/if}

package/dist/lib/components/Combobox.svelte.d.ts

@@ -0,0 +1,38 @@
+export interface ComboboxOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+interface Props {
+    /** Current selected value */
+    value?: string;
+    /** Callback when value changes */
+    onValueChange?: (value: string) => void;
+    /** Array of selectable options */
+    options: ComboboxOption[];
+    /** Placeholder text for the input */
+    placeholder?: string;
+    /** Message to display when no results found */
+    emptyMessage?: string;
+    /** Whether the combobox is disabled */
+    disabled?: boolean;
+    /** Whether selection is required */
+    required?: boolean;
+    /** Name attribute for form submission */
+    name?: string;
+    /** Element ID */
+    id?: string;
+    /** Error message to display */
+    error?: string;
+    /** Whether async data is loading */
+    loading?: boolean;
+    /** Callback when search query changes (for async loading) */
+    onSearch?: (query: string) => void;
+    /** Debounce delay in ms for search callback (default: 300) */
+    debounceMs?: number;
+    /** Additional class for the trigger */
+    class?: string;
+}
+declare const Combobox: import("svelte").Component<Props, {}, "value">;
+type Combobox = ReturnType<typeof Combobox>;
+export default Combobox;

package/dist/lib/components/DateTimePicker.svelte

@@ -0,0 +1,415 @@
+<script lang="ts">
+  import { Popover, Calendar } from 'bits-ui';
+  import { cn } from '../utils.js';
+
+  interface Props {
+    /** Current date/time value */
+    value?: Date | null;
+    /** Callback when value changes */
+    onValueChange?: (date: Date | null) => void;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Whether the picker is disabled */
+    disabled?: boolean;
+    /** Whether selection is required */
+    required?: boolean;
+    /** Minimum selectable date */
+    min?: Date;
+    /** Maximum selectable date */
+    max?: Date;
+    /** Time format (12h or 24h) */
+    timeFormat?: '12h' | '24h';
+    /** Minute step interval (default: 15) */
+    minuteStep?: number;
+    /** Name attribute for form submission */
+    name?: string;
+    /** Element ID */
+    id?: string;
+    /** Error message to display */
+    error?: string;
+    /** Additional class for the trigger */
+    class?: string;
+  }
+
+  let {
+    value = $bindable(null),
+    onValueChange,
+    placeholder = 'Select date and time...',
+    disabled = false,
+    required = false,
+    min,
+    max,
+    timeFormat = '12h',
+    minuteStep = 15,
+    name,
+    id,
+    error,
+    class: className,
+  }: Props = $props();
+
+  let open = $state(false);
+
+  // Calendar state - initialize with current date
+  let viewMonth = $state(new Date().getMonth());
+  let viewYear = $state(new Date().getFullYear());
+
+  // Time state
+  let hour = $state(12);
+  let minute = $state(0);
+  let period = $state<'AM' | 'PM'>('PM');
+
+  // Sync state when value changes externally
+  $effect(() => {
+    if (value) {
+      hour = value.getHours();
+      minute = value.getMinutes();
+      period = value.getHours() >= 12 ? 'PM' : 'AM';
+      viewMonth = value.getMonth();
+      viewYear = value.getFullYear();
+    }
+  });
+
+  // Format display value
+  const displayValue = $derived.by(() => {
+    if (!value) return '';
+    const dateStr = value.toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric',
+    });
+    const timeStr = value.toLocaleTimeString('en-US', {
+      hour: 'numeric',
+      minute: '2-digit',
+      hour12: timeFormat === '12h',
+    });
+    return `${dateStr} at ${timeStr}`;
+  });
+
+  // Generate calendar days for current month
+  const calendarDays = $derived.by(() => {
+    const firstDay = new Date(viewYear, viewMonth, 1);
+    const lastDay = new Date(viewYear, viewMonth + 1, 0);
+    const daysInMonth = lastDay.getDate();
+    const startDayOfWeek = firstDay.getDay();
+
+    const days: (number | null)[] = [];
+
+    // Add empty slots for days before the 1st
+    for (let i = 0; i < startDayOfWeek; i++) {
+      days.push(null);
+    }
+
+    // Add days of the month
+    for (let i = 1; i <= daysInMonth; i++) {
+      days.push(i);
+    }
+
+    return days;
+  });
+
+  // Generate time options
+  const hourOptions = $derived(
+    timeFormat === '12h'
+      ? Array.from({ length: 12 }, (_, i) => (i === 0 ? 12 : i))
+      : Array.from({ length: 24 }, (_, i) => i)
+  );
+
+  const minuteOptions = $derived(Array.from({ length: 60 / minuteStep }, (_, i) => i * minuteStep));
+
+  function isDateDisabled(day: number): boolean {
+    const date = new Date(viewYear, viewMonth, day);
+    if (min && date < new Date(min.getFullYear(), min.getMonth(), min.getDate())) {
+      return true;
+    }
+    if (max && date > new Date(max.getFullYear(), max.getMonth(), max.getDate())) {
+      return true;
+    }
+    return false;
+  }
+
+  function isDateSelected(day: number): boolean {
+    if (!value) return false;
+    return (
+      value.getDate() === day && value.getMonth() === viewMonth && value.getFullYear() === viewYear
+    );
+  }
+
+  function selectDate(day: number) {
+    if (isDateDisabled(day)) return;
+
+    const newDate = new Date(viewYear, viewMonth, day);
+
+    // Preserve or set time
+    let h = hour;
+    if (timeFormat === '12h') {
+      h = period === 'PM' ? (hour === 12 ? 12 : hour + 12) : hour === 12 ? 0 : hour;
+    }
+    newDate.setHours(h, minute, 0, 0);
+
+    value = newDate;
+    onValueChange?.(newDate);
+  }
+
+  function updateTime() {
+    if (!value) {
+      // If no date selected, use today
+      const today = new Date();
+      let h = hour;
+      if (timeFormat === '12h') {
+        h = period === 'PM' ? (hour === 12 ? 12 : hour + 12) : hour === 12 ? 0 : hour;
+      }
+      today.setHours(h, minute, 0, 0);
+      value = today;
+      onValueChange?.(today);
+    } else {
+      const newDate = new Date(value);
+      let h = hour;
+      if (timeFormat === '12h') {
+        h = period === 'PM' ? (hour === 12 ? 12 : hour + 12) : hour === 12 ? 0 : hour;
+      }
+      newDate.setHours(h, minute, 0, 0);
+      value = newDate;
+      onValueChange?.(newDate);
+    }
+  }
+
+  function prevMonth() {
+    if (viewMonth === 0) {
+      viewMonth = 11;
+      viewYear--;
+    } else {
+      viewMonth--;
+    }
+  }
+
+  function nextMonth() {
+    if (viewMonth === 11) {
+      viewMonth = 0;
+      viewYear++;
+    } else {
+      viewMonth++;
+    }
+  }
+
+  function clearValue() {
+    value = null;
+    onValueChange?.(null);
+  }
+
+  const monthNames = [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December',
+  ];
+
+  const dayNames = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+</script>
+
+<Popover.Root bind:open>
+  <Popover.Trigger
+    {id}
+    {disabled}
+    class={cn(
+      'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+      !value && 'text-muted-foreground',
+      error && 'border-destructive focus:ring-destructive',
+      className
+    )}
+    aria-invalid={error ? 'true' : undefined}
+  >
+    <span class="truncate">
+      {displayValue || placeholder}
+    </span>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class="h-4 w-4 opacity-50 shrink-0 ml-2"
+    >
+      <rect width="18" height="18" x="3" y="4" rx="2" ry="2" />
+      <line x1="16" x2="16" y1="2" y2="6" />
+      <line x1="8" x2="8" y1="2" y2="6" />
+      <line x1="3" x2="21" y1="10" y2="10" />
+      <path d="M8 14h.01" />
+      <path d="M12 14h.01" />
+      <path d="M16 14h.01" />
+      <path d="M8 18h.01" />
+      <path d="M12 18h.01" />
+      <path d="M16 18h.01" />
+    </svg>
+  </Popover.Trigger>
+
+  <Popover.Content
+    class="w-auto p-0 rounded-md border bg-popover text-popover-foreground shadow-md"
+    sideOffset={4}
+    align="start"
+  >
+    <div class="p-3">
+      <!-- Calendar header -->
+      <div class="flex items-center justify-between mb-2">
+        <button
+          type="button"
+          onclick={prevMonth}
+          class="h-7 w-7 inline-flex items-center justify-center rounded-md hover:bg-accent hover:text-accent-foreground"
+          aria-label="Previous month"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="m15 18-6-6 6-6" />
+          </svg>
+        </button>
+        <span class="text-sm font-medium">
+          {monthNames[viewMonth]}
+          {viewYear}
+        </span>
+        <button
+          type="button"
+          onclick={nextMonth}
+          class="h-7 w-7 inline-flex items-center justify-center rounded-md hover:bg-accent hover:text-accent-foreground"
+          aria-label="Next month"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="m9 18 6-6-6-6" />
+          </svg>
+        </button>
+      </div>
+
+      <!-- Day names -->
+      <div class="grid grid-cols-7 gap-1 mb-1">
+        {#each dayNames as dayName}
+          <div
+            class="h-8 w-8 flex items-center justify-center text-xs text-muted-foreground font-medium"
+          >
+            {dayName}
+          </div>
+        {/each}
+      </div>
+
+      <!-- Calendar days -->
+      <div class="grid grid-cols-7 gap-1">
+        {#each calendarDays as day}
+          {#if day === null}
+            <div class="h-8 w-8"></div>
+          {:else}
+            <button
+              type="button"
+              onclick={() => selectDate(day)}
+              disabled={isDateDisabled(day)}
+              class={cn(
+                'h-8 w-8 inline-flex items-center justify-center rounded-md text-sm transition-colors',
+                'hover:bg-accent hover:text-accent-foreground',
+                'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+                'disabled:pointer-events-none disabled:opacity-50',
+                isDateSelected(day) &&
+                  'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground'
+              )}
+            >
+              {day}
+            </button>
+          {/if}
+        {/each}
+      </div>
+
+      <!-- Time selector -->
+      <div class="border-t mt-3 pt-3">
+        <div class="flex items-center gap-2">
+          <span class="text-sm text-muted-foreground">Time:</span>
+          <select
+            bind:value={hour}
+            onchange={updateTime}
+            class="h-8 rounded-md border border-input bg-background px-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+          >
+            {#each hourOptions as h}
+              <option value={timeFormat === '12h' ? h : h}>
+                {String(h).padStart(2, '0')}
+              </option>
+            {/each}
+          </select>
+          <span class="text-muted-foreground">:</span>
+          <select
+            bind:value={minute}
+            onchange={updateTime}
+            class="h-8 rounded-md border border-input bg-background px-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+          >
+            {#each minuteOptions as m}
+              <option value={m}>{String(m).padStart(2, '0')}</option>
+            {/each}
+          </select>
+          {#if timeFormat === '12h'}
+            <select
+              bind:value={period}
+              onchange={updateTime}
+              class="h-8 rounded-md border border-input bg-background px-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+            >
+              <option value="AM">AM</option>
+              <option value="PM">PM</option>
+            </select>
+          {/if}
+        </div>
+      </div>
+
+      <!-- Actions -->
+      <div class="border-t mt-3 pt-3 flex justify-between">
+        <button
+          type="button"
+          onclick={clearValue}
+          class="text-sm text-muted-foreground hover:text-foreground"
+        >
+          Clear
+        </button>
+        <button
+          type="button"
+          onclick={() => (open = false)}
+          class="text-sm font-medium text-primary hover:underline"
+        >
+          Done
+        </button>
+      </div>
+    </div>
+  </Popover.Content>
+</Popover.Root>
+
+<!-- Hidden input for form submission -->
+{#if name && value}
+  <input type="hidden" {name} value={value.toISOString()} />
+{/if}
+
+{#if error}
+  <p class="text-sm text-destructive mt-1.5" role="alert">
+    {error}
+  </p>
+{/if}

package/dist/lib/components/DateTimePicker.svelte.d.ts

@@ -0,0 +1,31 @@
+interface Props {
+    /** Current date/time value */
+    value?: Date | null;
+    /** Callback when value changes */
+    onValueChange?: (date: Date | null) => void;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Whether the picker is disabled */
+    disabled?: boolean;
+    /** Whether selection is required */
+    required?: boolean;
+    /** Minimum selectable date */
+    min?: Date;
+    /** Maximum selectable date */
+    max?: Date;
+    /** Time format (12h or 24h) */
+    timeFormat?: '12h' | '24h';
+    /** Minute step interval (default: 15) */
+    minuteStep?: number;
+    /** Name attribute for form submission */
+    name?: string;
+    /** Element ID */
+    id?: string;
+    /** Error message to display */
+    error?: string;
+    /** Additional class for the trigger */
+    class?: string;
+}
+declare const DateTimePicker: import("svelte").Component<Props, {}, "value">;
+type DateTimePicker = ReturnType<typeof DateTimePicker>;
+export default DateTimePicker;