@classic-homes/theme-svelte 0.1.21 → 0.1.23

package/dist/lib/components/DateTimePicker.svelte

@@ -1,12 +1,19 @@
 <script lang="ts">
   import { Popover, Calendar } from 'bits-ui';
+  import { tick } from 'svelte';
   import { cn } from '../utils.js';
+  import { parseDate, toISOString } from '../utils/date.js';
+  import Label from './Label.svelte';
 
   interface Props {
     /** Current date/time value */
     value?: Date | null;
+    /** Current value as ISO string (alternative to value prop for form binding) */
+    stringValue?: string | null;
     /** Callback when value changes */
     onValueChange?: (date: Date | null) => void;
+    /** Callback when stringValue changes */
+    onStringValueChange?: (value: string | null) => void;
     /** Placeholder text */
     placeholder?: string;
     /** Whether the picker is disabled */
@@ -31,11 +38,17 @@
     class?: string;
     /** Show only date picker without time selection */
     dateOnly?: boolean;
+    /** Label text for the picker */
+    label?: string;
+    /** Hint text displayed below the picker */
+    hint?: string;
   }
 
   let {
     value = $bindable(null),
+    stringValue = $bindable(null),
     onValueChange,
+    onStringValueChange,
     placeholder,
     disabled = false,
     required = false,
@@ -48,8 +61,50 @@
     error,
     class: className,
     dateOnly = false,
+    label,
+    hint,
   }: Props = $props();
 
+  // Generate unique IDs for accessibility
+  // Using a random suffix ensures uniqueness if id is not provided
+  const randomSuffix = Math.random().toString(36).substring(2, 9);
+  const componentId = $derived(id || `datetimepicker-${randomSuffix}`);
+  const hintId = $derived(`${componentId}-hint`);
+  const errorId = $derived(`${componentId}-error`);
+
+  // Compute aria-describedby based on hint and error
+  const describedBy = $derived.by(() => {
+    const ids: string[] = [];
+    if (hint) ids.push(hintId);
+    if (error) ids.push(errorId);
+    return ids.length > 0 ? ids.join(' ') : undefined;
+  });
+
+  // Sync stringValue -> value when stringValue changes externally
+  let lastStringValue = $state<string | null>(stringValue);
+  $effect(() => {
+    if (stringValue !== lastStringValue) {
+      lastStringValue = stringValue;
+      const parsed = parseDate(stringValue);
+      if (
+        parsed !== value &&
+        (parsed === null || value === null || parsed.getTime() !== value?.getTime())
+      ) {
+        value = parsed;
+      }
+    }
+  });
+
+  // Sync value -> stringValue when value changes
+  $effect(() => {
+    const newStringValue = toISOString(value);
+    if (newStringValue !== stringValue) {
+      stringValue = newStringValue;
+      lastStringValue = newStringValue;
+      onStringValueChange?.(newStringValue);
+    }
+  });
+
   // Set default placeholder based on dateOnly mode
   const defaultPlaceholder = $derived(dateOnly ? 'Select date...' : 'Select date and time...');
   const effectivePlaceholder = $derived(placeholder ?? defaultPlaceholder);
@@ -153,7 +208,7 @@
     );
   }
 
-  function selectDate(day: number) {
+  async function selectDate(day: number) {
     if (isDateDisabled(day)) return;
 
     // Capture current view state before any reactive updates
@@ -178,11 +233,12 @@
     isSelecting = true;
     value = newDate;
     onValueChange?.(newDate);
-    // Allow effect to run again for external changes
+    // Wait for effects to process before allowing external sync
+    await tick();
     isSelecting = false;
   }
 
-  function updateTime() {
+  async function updateTime() {
     isSelecting = true;
     if (!value) {
       // If no date selected, use today
@@ -204,6 +260,8 @@
       value = newDate;
       onValueChange?.(newDate);
     }
+    // Wait for effects to process before allowing external sync
+    await tick();
     isSelecting = false;
   }
 
@@ -246,208 +304,239 @@
   ];
 
   const dayNames = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+
+  // Determine if we need a container wrapper
+  const hasWrapper = $derived(!!label || !!hint || !!error);
 </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 || effectivePlaceholder}
-    </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.Portal>
-    <Popover.Content
-      class="z-50 w-auto p-0 rounded-md border bg-popover text-popover-foreground shadow-md"
-      sideOffset={4}
-      align="start"
+{#snippet pickerContent()}
+  <Popover.Root bind:open>
+    <Popover.Trigger
+      id={componentId}
+      {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}
+      aria-describedby={describedBy}
+      aria-label={!label ? effectivePlaceholder : undefined}
     >
-      <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 bg-transparent transition-colors duration-150 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 bg-transparent transition-colors duration-150 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"
+      <span class="truncate">
+        {displayValue || effectivePlaceholder}
+      </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.Portal>
+      <Popover.Content
+        class="z-50 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 bg-transparent transition-colors duration-150 hover:bg-accent hover:text-accent-foreground"
+              aria-label="Previous month"
             >
-              <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"
+              <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 bg-transparent transition-colors duration-150 hover:bg-accent hover:text-accent-foreground"
+              aria-label="Next month"
             >
-              {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 bg-transparent transition-colors duration-150',
-                  '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'
-                )}
+              <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"
               >
-                {day}
-              </button>
-            {/if}
-          {/each}
-        </div>
+                <path d="m9 18 6-6-6-6" />
+              </svg>
+            </button>
+          </div>
 
-        <!-- Time selector (hidden in dateOnly mode) -->
-        {#if !dateOnly}
-          <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"
+          <!-- 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"
               >
-                {#each minuteOptions as m}
-                  <option value={m}>{String(m).padStart(2, '0')}</option>
-                {/each}
-              </select>
-              {#if timeFormat === '12h'}
+                {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 bg-transparent transition-colors duration-150',
+                    '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 (hidden in dateOnly mode) -->
+          {#if !dateOnly}
+            <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={period}
+                  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"
                 >
-                  <option value="AM">AM</option>
-                  <option value="PM">PM</option>
+                  {#each hourOptions as h}
+                    <option value={timeFormat === '12h' ? h : h}>
+                      {String(h).padStart(2, '0')}
+                    </option>
+                  {/each}
                 </select>
-              {/if}
+                <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>
+          {/if}
+
+          <!-- 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>
-        {/if}
-
-        <!-- 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.Portal>
-</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>
+      </Popover.Content>
+    </Popover.Portal>
+  </Popover.Root>
+
+  <!-- Hidden input for form submission -->
+  {#if name && value}
+    <input type="hidden" {name} value={value.toISOString()} />
+  {/if}
+{/snippet}
+
+{#if hasWrapper}
+  <div class="space-y-2">
+    {#if label}
+      <Label for={componentId} {disabled}>
+        {label}
+        {#if required}
+          <span class="text-destructive ml-0.5" aria-hidden="true">*</span>
+          <span class="sr-only">(required)</span>
+        {/if}
+      </Label>
+    {/if}
+
+    {@render pickerContent()}
+
+    {#if hint && !error}
+      <p id={hintId} class="text-sm text-muted-foreground">
+        {hint}
+      </p>
+    {/if}
+
+    {#if error}
+      <p id={errorId} class="text-sm text-destructive" role="alert" aria-live="polite">
+        {error}
+      </p>
+    {/if}
+  </div>
+{:else}
+  {@render pickerContent()}
 {/if}

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

@@ -1,8 +1,12 @@
 interface Props {
     /** Current date/time value */
     value?: Date | null;
+    /** Current value as ISO string (alternative to value prop for form binding) */
+    stringValue?: string | null;
     /** Callback when value changes */
     onValueChange?: (date: Date | null) => void;
+    /** Callback when stringValue changes */
+    onStringValueChange?: (value: string | null) => void;
     /** Placeholder text */
     placeholder?: string;
     /** Whether the picker is disabled */
@@ -27,7 +31,11 @@ interface Props {
     class?: string;
     /** Show only date picker without time selection */
     dateOnly?: boolean;
+    /** Label text for the picker */
+    label?: string;
+    /** Hint text displayed below the picker */
+    hint?: string;
 }
-declare const DateTimePicker: import("svelte").Component<Props, {}, "value">;
+declare const DateTimePicker: import("svelte").Component<Props, {}, "value" | "stringValue">;
 type DateTimePicker = ReturnType<typeof DateTimePicker>;
 export default DateTimePicker;

package/dist/lib/components/Input.svelte

@@ -53,7 +53,7 @@
   {autocomplete}
   {inputmode}
   class={cn(
-    'flex h-11 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+    'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
     className
   )}
   oninput={handleInput}