@classic-homes/theme-svelte 0.1.9 → 0.1.11

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

@@ -1,7 +1,7 @@
 import type { Snippet } from 'svelte';
 declare const Alert: import("svelte").Component<{
     [key: string]: unknown;
-    variant?: "default" | "destructive" | "warning" | "error" | "success" | "info" | undefined;
+    variant?: "default" | "destructive" | "error" | "warning" | "success" | "info" | undefined;
     class?: string;
     children: Snippet;
 }, {}, "">;

package/dist/lib/components/Checkbox.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import type { Snippet } from 'svelte';
   import { Checkbox as CheckboxPrimitive } from 'bits-ui';
   import { cn } from '../utils.js';
 
@@ -10,7 +11,9 @@
     value?: string;
     id?: string;
     class?: string;
+    error?: string;
     onCheckedChange?: (checked: boolean) => void;
+    children?: Snippet;
     [key: string]: unknown;
   }
 
@@ -22,44 +25,80 @@
     value,
     id,
     class: className,
+    error,
     onCheckedChange,
+    children,
     ...restProps
   }: Props = $props();
 
+  // Generate a stable unique ID if none provided (for accessibility)
+  const generatedId = `checkbox-${Math.random().toString(36).substring(2, 11)}`;
+  const effectiveId = $derived(id ?? generatedId);
+
   function handleCheckedChange(newChecked: boolean | 'indeterminate') {
     if (typeof newChecked === 'boolean') {
       checked = newChecked;
       onCheckedChange?.(newChecked);
     }
   }
+
+  const hasError = $derived(!!error);
+  const errorId = $derived(`${effectiveId}-error`);
 </script>
 
-<CheckboxPrimitive.Root
-  bind:checked
-  {disabled}
-  {required}
-  {name}
-  {value}
-  {id}
-  onCheckedChange={handleCheckedChange}
-  class={cn(
-    'peer relative h-5 w-5 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground flex items-center justify-center',
-    className
-  )}
-  {...restProps}
->
-  <!-- Touch target expansion (invisible, extends clickable area to 44x44px) -->
-  <span class="absolute inset-0 -m-3" aria-hidden="true"></span>
-  {#if checked}
-    <svg
-      class="h-5 w-5"
-      fill="none"
-      stroke="currentColor"
-      stroke-width="2"
-      viewBox="0 0 24 24"
-      aria-hidden="true"
+<div class="space-y-1">
+  <div class="flex items-start gap-3">
+    <CheckboxPrimitive.Root
+      bind:checked
+      {disabled}
+      {required}
+      {name}
+      {value}
+      id={effectiveId}
+      onCheckedChange={handleCheckedChange}
+      aria-invalid={hasError ? 'true' : undefined}
+      aria-describedby={hasError ? errorId : undefined}
+      class={cn(
+        'peer relative h-5 w-5 shrink-0 rounded-sm border ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground flex items-center justify-center mt-0.5',
+        hasError ? 'border-destructive' : 'border-primary',
+        className
+      )}
+      {...restProps}
     >
-      <polyline points="20 6 9 17 4 12" />
-    </svg>
+      <!-- Touch target expansion (invisible, extends clickable area to 44x44px) -->
+      <span class="absolute inset-0 -m-3" aria-hidden="true"></span>
+      {#if checked}
+        <svg
+          class="h-5 w-5"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          viewBox="0 0 24 24"
+          aria-hidden="true"
+        >
+          <polyline points="20 6 9 17 4 12" />
+        </svg>
+      {/if}
+    </CheckboxPrimitive.Root>
+    {#if children}
+      <label
+        for={effectiveId}
+        class={cn(
+          'text-sm leading-relaxed cursor-pointer select-none',
+          disabled && 'cursor-not-allowed opacity-50'
+        )}
+      >
+        {@render children()}
+        {#if required}
+          <span class="text-destructive ml-1" aria-hidden="true">*</span>
+          <span class="sr-only">(required)</span>
+        {/if}
+      </label>
+    {/if}
+  </div>
+  {#if error}
+    <p id={errorId} class="text-sm text-destructive ml-8" role="alert" aria-live="polite">
+      {error}
+    </p>
   {/if}
-</CheckboxPrimitive.Root>
+</div>

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

@@ -1,3 +1,4 @@
+import type { Snippet } from 'svelte';
 interface Props {
     checked?: boolean;
     disabled?: boolean;
@@ -6,7 +7,9 @@ interface Props {
     value?: string;
     id?: string;
     class?: string;
+    error?: string;
     onCheckedChange?: (checked: boolean) => void;
+    children?: Snippet;
     [key: string]: unknown;
 }
 declare const Checkbox: import("svelte").Component<Props, {}, "checked">;

package/dist/lib/components/DateTimePicker.svelte

@@ -29,12 +29,14 @@
     error?: string;
     /** Additional class for the trigger */
     class?: string;
+    /** Show only date picker without time selection */
+    dateOnly?: boolean;
   }
 
   let {
     value = $bindable(null),
     onValueChange,
-    placeholder = 'Select date and time...',
+    placeholder,
     disabled = false,
     required = false,
     min,
@@ -45,8 +47,13 @@
     id,
     error,
     class: className,
+    dateOnly = false,
   }: Props = $props();
 
+  // Set default placeholder based on dateOnly mode
+  const defaultPlaceholder = $derived(dateOnly ? 'Select date...' : 'Select date and time...');
+  const effectivePlaceholder = $derived(placeholder ?? defaultPlaceholder);
+
   let open = $state(false);
 
   // Calendar state - initialize with current date
@@ -77,6 +84,9 @@
       day: 'numeric',
       year: 'numeric',
     });
+    if (dateOnly) {
+      return dateStr;
+    }
     const timeStr = value.toLocaleTimeString('en-US', {
       hour: 'numeric',
       minute: '2-digit',
@@ -139,12 +149,17 @@
 
     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;
+    if (dateOnly) {
+      // Set to midnight for date-only mode
+      newDate.setHours(0, 0, 0, 0);
+    } else {
+      // 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);
     }
-    newDate.setHours(h, minute, 0, 0);
 
     value = newDate;
     onValueChange?.(newDate);
@@ -227,7 +242,7 @@
     aria-invalid={error ? 'true' : undefined}
   >
     <span class="truncate">
-      {displayValue || placeholder}
+      {displayValue || effectivePlaceholder}
     </span>
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -344,43 +359,45 @@
         {/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'}
+      <!-- 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>
-      </div>
+      {/if}
 
       <!-- Actions -->
       <div class="border-t mt-3 pt-3 flex justify-between">

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

@@ -25,6 +25,8 @@ interface Props {
     error?: string;
     /** Additional class for the trigger */
     class?: string;
+    /** Show only date picker without time selection */
+    dateOnly?: boolean;
 }
 declare const DateTimePicker: import("svelte").Component<Props, {}, "value">;
 type DateTimePicker = ReturnType<typeof DateTimePicker>;

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

@@ -1,7 +1,7 @@
 import type { Snippet } from 'svelte';
 declare const Toast: import("svelte").Component<{
     [key: string]: unknown;
-    type?: "warning" | "error" | "success" | "info" | undefined;
+    type?: "error" | "warning" | "success" | "info" | undefined;
     title?: string;
     message: string;
     class?: string;

package/dist/lib/components/layout/FormPageLayout.svelte

@@ -67,7 +67,7 @@
     <div class={cn('gap-8', hasSidebar ? 'grid lg:grid-cols-[1fr,320px]' : 'mx-auto max-w-2xl')}>
       <!-- Sidebar (shows first on mobile when present) -->
       {#if hasSidebar}
-        <aside class="order-first lg:order-last">
+        <aside class="order-first lg:order-last space-y-6">
           {@render sidebar!()}
         </aside>
       {/if}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@classic-homes/theme-svelte",
-  "version": "0.1.9",
+  "version": "0.1.11",
   "description": "Svelte components for the Classic theme system",
   "type": "module",
   "svelte": "./dist/lib/index.js",