@classic-homes/theme-svelte 0.1.10 → 0.1.12

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" | "error" | "warning" | "success" | "info" | undefined;
+    variant?: "default" | "destructive" | "error" | "info" | "warning" | "success" | undefined;
     class?: string;
     children: Snippet;
 }, {}, "">;

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

@@ -1,7 +1,7 @@
 import type { Snippet } from 'svelte';
 declare const Badge: import("svelte").Component<{
     [key: string]: unknown;
-    variant?: "default" | "secondary" | "destructive" | "outline" | "warning" | "success" | "info" | undefined;
+    variant?: "default" | "secondary" | "destructive" | "outline" | "info" | "warning" | "success" | undefined;
     size?: "default" | "sm" | "dot" | undefined;
     clickable?: boolean;
     class?: string;

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/Icon.svelte

@@ -0,0 +1,370 @@
+<script lang="ts">
+  import { cn } from '../utils.js';
+
+  /**
+   * Available icon names for the Icon component.
+   * These are common icons useful across applications.
+   */
+  export type IconName =
+    | 'close'
+    | 'check'
+    | 'plus'
+    | 'minus'
+    | 'edit'
+    | 'trash'
+    | 'info'
+    | 'alert-circle'
+    | 'alert-triangle'
+    | 'chevron-down'
+    | 'chevron-up'
+    | 'chevron-left'
+    | 'chevron-right'
+    | 'search'
+    | 'settings'
+    | 'user'
+    | 'home'
+    | 'external-link'
+    | 'loading'
+    | 'send'
+    | 'more'
+    | 'more-horizontal'
+    | 'grip'
+    | 'history'
+    | 'message'
+    | 'chat'
+    | 'eye'
+    | 'eye-off'
+    | 'copy'
+    | 'download'
+    | 'upload'
+    | 'refresh'
+    | 'arrow-left'
+    | 'arrow-right'
+    | 'menu'
+    | 'filter'
+    | 'sort'
+    | 'calendar'
+    | 'clock'
+    | 'mail'
+    | 'phone'
+    | 'link'
+    | 'image'
+    | 'file'
+    | 'folder'
+    | 'star'
+    | 'heart'
+    | 'bookmark'
+    | 'lock'
+    | 'unlock';
+
+  interface Props {
+    /** The name of the icon to display */
+    name: IconName;
+    /** Size of the icon in pixels (default: 24) */
+    size?: number;
+    /** Additional CSS classes */
+    class?: string;
+    /** Stroke width for stroke-based icons (default: 2) */
+    strokeWidth?: number;
+    /** Accessible label for the icon (renders as visually hidden text) */
+    label?: string;
+    /** Additional attributes to spread onto the SVG element */
+    [key: string]: unknown;
+  }
+
+  let { name, size = 24, class: className, strokeWidth = 2, label, ...restProps }: Props = $props();
+
+  // SVG path definitions for each icon
+  // All icons use a 24x24 viewBox
+  const icons: Record<IconName, { path: string; fill?: boolean }> = {
+    // Close (X)
+    close: {
+      path: 'M18 6L6 18M6 6l12 12',
+    },
+    // Check mark
+    check: {
+      path: 'M20 6L9 17l-5-5',
+    },
+    // Plus
+    plus: {
+      path: 'M12 5v14M5 12h14',
+    },
+    // Minus
+    minus: {
+      path: 'M5 12h14',
+    },
+    // Edit (pencil)
+    edit: {
+      path: 'M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5ZM15 5l4 4',
+    },
+    // Trash
+    trash: {
+      path: 'M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M10 11v6M14 11v6',
+    },
+    // Info
+    info: {
+      path: 'M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zM12 16v-4M12 8h.01',
+    },
+    // Alert circle
+    'alert-circle': {
+      path: 'M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zM12 8v4M12 16h.01',
+    },
+    // Alert triangle
+    'alert-triangle': {
+      path: 'M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0zM12 9v4M12 17h.01',
+    },
+    // Chevrons
+    'chevron-down': {
+      path: 'M6 9l6 6 6-6',
+    },
+    'chevron-up': {
+      path: 'M18 15l-6-6-6 6',
+    },
+    'chevron-left': {
+      path: 'M15 18l-6-6 6-6',
+    },
+    'chevron-right': {
+      path: 'M9 18l6-6-6-6',
+    },
+    // Search
+    search: {
+      path: 'M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM21 21l-4.35-4.35',
+    },
+    // Settings (gear)
+    settings: {
+      path: 'M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2zM12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z',
+    },
+    // User
+    user: {
+      path: 'M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2M12 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z',
+    },
+    // Home
+    home: {
+      path: 'M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9zM9 22V12h6v10',
+    },
+    // External link
+    'external-link': {
+      path: 'M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6M15 3h6v6M10 14L21 3',
+    },
+    // Loading spinner (animated)
+    loading: {
+      path: '', // Special case - handled separately
+    },
+    // Send
+    send: {
+      path: 'M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z',
+    },
+    // More (vertical dots)
+    more: {
+      path: '', // Special case - uses filled circles
+      fill: true,
+    },
+    // More horizontal (horizontal dots)
+    'more-horizontal': {
+      path: '', // Special case - uses filled circles
+      fill: true,
+    },
+    // Grip (drag handle)
+    grip: {
+      path: '', // Special case - uses filled circles
+      fill: true,
+    },
+    // History (clock)
+    history: {
+      path: 'M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zM12 6v6l4 2',
+    },
+    // Message bubble
+    message: {
+      path: 'M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z',
+    },
+    // Chat bubble (simpler)
+    chat: {
+      path: 'M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z',
+    },
+    // Eye
+    eye: {
+      path: 'M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8zM12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z',
+    },
+    // Eye off
+    'eye-off': {
+      path: 'M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24M1 1l22 22',
+    },
+    // Copy
+    copy: {
+      path: 'M20 9h-9a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2-2v-9a2 2 0 0 0-2-2zM5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1',
+    },
+    // Download
+    download: {
+      path: 'M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3',
+    },
+    // Upload
+    upload: {
+      path: 'M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12',
+    },
+    // Refresh
+    refresh: {
+      path: 'M23 4v6h-6M1 20v-6h6M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15',
+    },
+    // Arrow left
+    'arrow-left': {
+      path: 'M19 12H5M12 19l-7-7 7-7',
+    },
+    // Arrow right
+    'arrow-right': {
+      path: 'M5 12h14M12 5l7 7-7 7',
+    },
+    // Menu (hamburger)
+    menu: {
+      path: 'M3 12h18M3 6h18M3 18h18',
+    },
+    // Filter
+    filter: {
+      path: 'M22 3H2l8 9.46V19l4 2v-8.54L22 3z',
+    },
+    // Sort
+    sort: {
+      path: 'M11 5h10M11 9h7M11 13h4M3 17l3 3 3-3M6 18V4',
+    },
+    // Calendar
+    calendar: {
+      path: 'M19 4H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zM16 2v4M8 2v4M3 10h18',
+    },
+    // Clock
+    clock: {
+      path: 'M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zM12 6v6l4 2',
+    },
+    // Mail
+    mail: {
+      path: 'M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2zM22 6l-10 7L2 6',
+    },
+    // Phone
+    phone: {
+      path: 'M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z',
+    },
+    // Link
+    link: {
+      path: 'M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71',
+    },
+    // Image
+    image: {
+      path: 'M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zM8.5 10a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM21 15l-5-5L5 21',
+    },
+    // File
+    file: {
+      path: 'M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8zM14 2v6h6M16 13H8M16 17H8M10 9H8',
+    },
+    // Folder
+    folder: {
+      path: 'M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z',
+    },
+    // Star
+    star: {
+      path: 'M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z',
+    },
+    // Heart
+    heart: {
+      path: 'M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z',
+    },
+    // Bookmark
+    bookmark: {
+      path: 'M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z',
+    },
+    // Lock
+    lock: {
+      path: 'M19 11H5a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7a2 2 0 0 0-2-2zM7 11V7a5 5 0 0 1 10 0v4',
+    },
+    // Unlock
+    unlock: {
+      path: 'M19 11H5a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7a2 2 0 0 0-2-2zM7 11V7a5 5 0 0 1 9.9-1',
+    },
+  };
+
+  const iconDef = $derived(icons[name]);
+</script>
+
+{#if name === 'loading'}
+  <!-- Loading spinner with animation -->
+  <svg
+    aria-hidden={!label}
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width={strokeWidth}
+    class={cn('animate-spin', className)}
+    {...restProps}
+  >
+    <circle cx="12" cy="12" r="10" stroke-opacity="0.25"></circle>
+    <path d="M12 2a10 10 0 0 1 10 10" stroke-linecap="round"></path>
+  </svg>
+{:else if name === 'more'}
+  <!-- Vertical dots -->
+  <svg
+    aria-hidden={!label}
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    class={className}
+    {...restProps}
+  >
+    <circle cx="12" cy="5" r="1.5"></circle>
+    <circle cx="12" cy="12" r="1.5"></circle>
+    <circle cx="12" cy="19" r="1.5"></circle>
+  </svg>
+{:else if name === 'more-horizontal'}
+  <!-- Horizontal dots -->
+  <svg
+    aria-hidden={!label}
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    class={className}
+    {...restProps}
+  >
+    <circle cx="5" cy="12" r="1.5"></circle>
+    <circle cx="12" cy="12" r="1.5"></circle>
+    <circle cx="19" cy="12" r="1.5"></circle>
+  </svg>
+{:else if name === 'grip'}
+  <!-- Grip handle (6 dots for drag) -->
+  <svg
+    aria-hidden={!label}
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    class={className}
+    {...restProps}
+  >
+    <circle cx="8" cy="6" r="2"></circle>
+    <circle cx="16" cy="6" r="2"></circle>
+    <circle cx="8" cy="12" r="2"></circle>
+    <circle cx="16" cy="12" r="2"></circle>
+    <circle cx="8" cy="18" r="2"></circle>
+    <circle cx="16" cy="18" r="2"></circle>
+  </svg>
+{:else if iconDef}
+  <!-- Standard path-based icons -->
+  <svg
+    aria-hidden={!label}
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill={iconDef.fill ? 'currentColor' : 'none'}
+    stroke={iconDef.fill ? 'none' : 'currentColor'}
+    stroke-width={iconDef.fill ? 0 : strokeWidth}
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    class={className}
+    {...restProps}
+  >
+    <path d={iconDef.path}></path>
+  </svg>
+{/if}
+
+{#if label}
+  <span class="sr-only">{label}</span>
+{/if}

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

@@ -0,0 +1,22 @@
+/**
+ * Available icon names for the Icon component.
+ * These are common icons useful across applications.
+ */
+export type IconName = 'close' | 'check' | 'plus' | 'minus' | 'edit' | 'trash' | 'info' | 'alert-circle' | 'alert-triangle' | 'chevron-down' | 'chevron-up' | 'chevron-left' | 'chevron-right' | 'search' | 'settings' | 'user' | 'home' | 'external-link' | 'loading' | 'send' | 'more' | 'more-horizontal' | 'grip' | 'history' | 'message' | 'chat' | 'eye' | 'eye-off' | 'copy' | 'download' | 'upload' | 'refresh' | 'arrow-left' | 'arrow-right' | 'menu' | 'filter' | 'sort' | 'calendar' | 'clock' | 'mail' | 'phone' | 'link' | 'image' | 'file' | 'folder' | 'star' | 'heart' | 'bookmark' | 'lock' | 'unlock';
+interface Props {
+    /** The name of the icon to display */
+    name: IconName;
+    /** Size of the icon in pixels (default: 24) */
+    size?: number;
+    /** Additional CSS classes */
+    class?: string;
+    /** Stroke width for stroke-based icons (default: 2) */
+    strokeWidth?: number;
+    /** Accessible label for the icon (renders as visually hidden text) */
+    label?: string;
+    /** Additional attributes to spread onto the SVG element */
+    [key: string]: unknown;
+}
+declare const Icon: import("svelte").Component<Props, {}, "">;
+type Icon = ReturnType<typeof Icon>;
+export default Icon;

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?: "error" | "warning" | "success" | "info" | undefined;
+    type?: "error" | "info" | "warning" | "success" | undefined;
     title?: string;
     message: string;
     class?: string;

package/dist/lib/index.d.ts

@@ -13,6 +13,7 @@ export { default as Textarea } from './components/Textarea.svelte';
 export { default as Checkbox } from './components/Checkbox.svelte';
 export { default as Switch } from './components/Switch.svelte';
 export { default as Separator } from './components/Separator.svelte';
+export { default as Icon, type IconName } from './components/Icon.svelte';
 export { default as Card } from './components/Card.svelte';
 export { default as CardHeader } from './components/CardHeader.svelte';
 export { default as CardTitle } from './components/CardTitle.svelte';
@@ -74,3 +75,4 @@ export { validateNonEmptyArray, validateRequired, validateOneOf, validateRange,
 export { perfStart, perfEnd, measure, measureAsync, getPerformanceEntries, clearPerformanceEntries, createPerfMonitor, type PerformanceMark, } from './performance.js';
 export { useForm, useAsync, runAsync, usePersistedForm, type UseFormOptions, type UseFormReturn, type FieldError, type FormState, type InferFormData, type UseAsyncOptions, type UseAsyncReturn, type UsePersistedFormOptions, type UsePersistedFormReturn, type InferPersistedFormData, } from './composables/index.js';
 export * from './schemas/index.js';
+export { type Notice, type NoticeConfig, type NoticeLocation, type NoticeVariant, type NoticePage, type ActiveNotice, NoticeSchema, NoticeLinkSchema, validateNotice, validateNotices, initializeNotices, setCurrentPath, dismissNotice, clearDismissedNotices, isNoticeDismissed, activeNotices, bannerNotices, cardNotices, getNoticesForPage, refreshNotices, cleanupDismissedNotices, isNoticeActive, isNoticeForPage, isNoticeForLocation, sanitizeHtml, initSanitizer, NoticeBanner, NoticeCard, } from './notices/index.js';

package/dist/lib/index.js

@@ -14,6 +14,7 @@ export { default as Textarea } from './components/Textarea.svelte';
 export { default as Checkbox } from './components/Checkbox.svelte';
 export { default as Switch } from './components/Switch.svelte';
 export { default as Separator } from './components/Separator.svelte';
+export { default as Icon } from './components/Icon.svelte';
 // Card Components
 export { default as Card } from './components/Card.svelte';
 export { default as CardHeader } from './components/CardHeader.svelte';
@@ -92,3 +93,13 @@ export { perfStart, perfEnd, measure, measureAsync, getPerformanceEntries, clear
 export { useForm, useAsync, runAsync, usePersistedForm, } from './composables/index.js';
 // Validation schemas - Zod schemas for forms and data validation
 export * from './schemas/index.js';
+// Notice System - Scheduled, page-specific, dismissible announcements
+export { 
+// Schemas
+NoticeSchema, NoticeLinkSchema, validateNotice, validateNotices, 
+// Store
+initializeNotices, setCurrentPath, dismissNotice, clearDismissedNotices, isNoticeDismissed, activeNotices, bannerNotices, cardNotices, getNoticesForPage, refreshNotices, cleanupDismissedNotices, isNoticeActive, isNoticeForPage, isNoticeForLocation, 
+// Sanitization
+sanitizeHtml, initSanitizer, 
+// Components
+NoticeBanner, NoticeCard, } from './notices/index.js';