@classic-homes/theme-svelte 0.1.11 → 0.1.13

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

@@ -133,8 +133,10 @@
   </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}
+    class="relative z-50 w-[var(--bits-floating-anchor-width)] min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[side=bottom]:border-t-0 data-[side=bottom]:rounded-t-none data-[side=top]:border-b-0 data-[side=top]:rounded-b-none 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={-1}
+    collisionPadding={8}
+    avoidCollisions={true}
   >
     <div class="p-1 max-h-[300px] overflow-y-auto">
       {#if loading}

package/dist/lib/components/DateTimePicker.svelte

@@ -65,12 +65,21 @@
   let minute = $state(0);
   let period = $state<'AM' | 'PM'>('PM');
 
-  // Sync state when value changes externally
+  // Track if we're currently selecting to prevent effect from interfering
+  let isSelecting = $state(false);
+
+  // Sync state when value changes externally (not during our own selection)
   $effect(() => {
-    if (value) {
-      hour = value.getHours();
+    if (value && !isSelecting) {
+      const hours = value.getHours();
       minute = value.getMinutes();
-      period = value.getHours() >= 12 ? 'PM' : 'AM';
+      period = hours >= 12 ? 'PM' : 'AM';
+      // Convert 24h to 12h format for the hour state
+      if (timeFormat === '12h') {
+        hour = hours === 0 ? 12 : hours > 12 ? hours - 12 : hours;
+      } else {
+        hour = hours;
+      }
       viewMonth = value.getMonth();
       viewYear = value.getFullYear();
     }
@@ -147,7 +156,11 @@
   function selectDate(day: number) {
     if (isDateDisabled(day)) return;
 
-    const newDate = new Date(viewYear, viewMonth, day);
+    // Capture current view state before any reactive updates
+    const currentMonth = viewMonth;
+    const currentYear = viewYear;
+
+    const newDate = new Date(currentYear, currentMonth, day);
 
     if (dateOnly) {
       // Set to midnight for date-only mode
@@ -161,11 +174,16 @@
       newDate.setHours(h, minute, 0, 0);
     }
 
+    // Prevent the effect from running during our selection
+    isSelecting = true;
     value = newDate;
     onValueChange?.(newDate);
+    // Allow effect to run again for external changes
+    isSelecting = false;
   }
 
   function updateTime() {
+    isSelecting = true;
     if (!value) {
       // If no date selected, use today
       const today = new Date();
@@ -186,6 +204,7 @@
       value = newDate;
       onValueChange?.(newDate);
     }
+    isSelecting = false;
   }
 
   function prevMonth() {
@@ -280,7 +299,7 @@
         <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"
+          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
@@ -304,7 +323,7 @@
         <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"
+          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
@@ -345,7 +364,7 @@
               onclick={() => selectDate(day)}
               disabled={isDateDisabled(day)}
               class={cn(
-                'h-8 w-8 inline-flex items-center justify-center rounded-md text-sm transition-colors',
+                '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',

package/dist/lib/components/DropdownMenu.svelte

@@ -67,69 +67,73 @@
   <DropdownMenuPrimitive.Content
     {side}
     {align}
-    sideOffset={4}
+    sideOffset={-1}
+    collisionPadding={8}
+    avoidCollisions={true}
     class={cn(
       'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 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',
       className
     )}
   >
-    {#each items as item}
-      {#if isGroup(item)}
-        <DropdownMenuPrimitive.Group>
-          {#if item.label}
-            <div class="px-2 py-1.5 text-sm font-semibold">
-              {item.label}
-            </div>
-          {/if}
-          {#each item.items as subItem}
-            {#if subItem.type === 'separator'}
-              <DropdownMenuPrimitive.Separator class="-mx-1 my-1 h-px bg-muted" />
-            {:else if subItem.type === 'label'}
+    <div class="max-h-[300px] overflow-y-auto">
+      {#each items as item}
+        {#if isGroup(item)}
+          <DropdownMenuPrimitive.Group>
+            {#if item.label}
               <div class="px-2 py-1.5 text-sm font-semibold">
-                {subItem.label}
+                {item.label}
               </div>
-            {:else}
-              <DropdownMenuPrimitive.Item
-                disabled={subItem.disabled}
-                onSelect={() => subItem.onSelect?.()}
-                class={cn(
-                  'relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 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',
-                  subItem.destructive && 'text-destructive data-[highlighted]:text-destructive'
-                )}
-              >
-                {subItem.label}
-                {#if subItem.shortcut}
-                  <span class="ml-auto text-xs tracking-widest opacity-60">
-                    {subItem.shortcut}
-                  </span>
-                {/if}
-              </DropdownMenuPrimitive.Item>
             {/if}
-          {/each}
-        </DropdownMenuPrimitive.Group>
-      {:else if item.type === 'separator'}
-        <DropdownMenuPrimitive.Separator class="-mx-1 my-1 h-px bg-muted" />
-      {:else if item.type === 'label'}
-        <div class="px-2 py-1.5 text-sm font-semibold">
-          {item.label}
-        </div>
-      {:else}
-        <DropdownMenuPrimitive.Item
-          disabled={item.disabled}
-          onSelect={() => item.onSelect?.()}
-          class={cn(
-            'relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 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',
-            item.destructive && 'text-destructive data-[highlighted]:text-destructive'
-          )}
-        >
-          {item.label}
-          {#if item.shortcut}
-            <span class="ml-auto text-xs tracking-widest opacity-60">
-              {item.shortcut}
-            </span>
-          {/if}
-        </DropdownMenuPrimitive.Item>
-      {/if}
-    {/each}
+            {#each item.items as subItem}
+              {#if subItem.type === 'separator'}
+                <DropdownMenuPrimitive.Separator class="-mx-1 my-1 h-px bg-muted" />
+              {:else if subItem.type === 'label'}
+                <div class="px-2 py-1.5 text-sm font-semibold">
+                  {subItem.label}
+                </div>
+              {:else}
+                <DropdownMenuPrimitive.Item
+                  disabled={subItem.disabled}
+                  onSelect={() => subItem.onSelect?.()}
+                  class={cn(
+                    'relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 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',
+                    subItem.destructive && 'text-destructive data-[highlighted]:text-destructive'
+                  )}
+                >
+                  {subItem.label}
+                  {#if subItem.shortcut}
+                    <span class="ml-auto text-xs tracking-widest opacity-60">
+                      {subItem.shortcut}
+                    </span>
+                  {/if}
+                </DropdownMenuPrimitive.Item>
+              {/if}
+            {/each}
+          </DropdownMenuPrimitive.Group>
+        {:else if item.type === 'separator'}
+          <DropdownMenuPrimitive.Separator class="-mx-1 my-1 h-px bg-muted" />
+        {:else if item.type === 'label'}
+          <div class="px-2 py-1.5 text-sm font-semibold">
+            {item.label}
+          </div>
+        {:else}
+          <DropdownMenuPrimitive.Item
+            disabled={item.disabled}
+            onSelect={() => item.onSelect?.()}
+            class={cn(
+              'relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 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',
+              item.destructive && 'text-destructive data-[highlighted]:text-destructive'
+            )}
+          >
+            {item.label}
+            {#if item.shortcut}
+              <span class="ml-auto text-xs tracking-widest opacity-60">
+                {item.shortcut}
+              </span>
+            {/if}
+          </DropdownMenuPrimitive.Item>
+        {/if}
+      {/each}
+    </div>
   </DropdownMenuPrimitive.Content>
 </DropdownMenuPrimitive.Root>

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

@@ -185,8 +185,10 @@
     </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}
+      class="relative z-50 w-[var(--bits-floating-anchor-width)] min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[side=bottom]:border-t-0 data-[side=bottom]:rounded-t-none data-[side=top]:border-b-0 data-[side=top]:rounded-b-none 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={-1}
+      collisionPadding={8}
+      avoidCollisions={true}
     >
       <div class="p-1 max-h-[300px] overflow-y-auto">
         {#if loading}