@classic-homes/theme-svelte 0.1.3 → 0.1.5

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

@@ -0,0 +1,74 @@
+import type { SignatureData, SignatureFont, SignatureValidationResult } from '../types/components.js';
+interface Props {
+    /** Signature data containing image output and metadata */
+    value?: SignatureData | null;
+    /** Callback when signature changes */
+    onValueChange?: (data: SignatureData | null) => void;
+    /** Callback when signature is completed (meets validation) */
+    onComplete?: (data: SignatureData) => void;
+    /** Callback when consent state changes */
+    onConsentChange?: (consented: boolean) => void;
+    /** Input mode: draw with stylus/mouse or type with fonts */
+    mode?: 'draw' | 'type';
+    /** Whether to show mode toggle */
+    showModeToggle?: boolean;
+    /** Default typed name for type mode */
+    typedName?: string;
+    /** Stroke color (default: currentColor) */
+    strokeColor?: string;
+    /** Stroke width in pixels */
+    strokeWidth?: number;
+    /** Minimum stroke width for pressure */
+    minStrokeWidth?: number;
+    /** Maximum stroke width for pressure */
+    maxStrokeWidth?: number;
+    /** Whether to show stroke customization */
+    showStrokeCustomization?: boolean;
+    /** Available fonts for typed signatures */
+    fonts?: SignatureFont[];
+    /** Selected font family */
+    selectedFont?: string;
+    /** Preferred output format */
+    outputFormat?: 'png' | 'svg' | 'dataUrl';
+    /** PNG/image quality (0-1) */
+    imageQuality?: number;
+    /** Background color */
+    backgroundColor?: 'transparent' | 'white';
+    /** Minimum stroke points required (draw mode) */
+    minStrokePoints?: number;
+    /** Minimum stroke length in pixels (draw mode) */
+    minStrokeLength?: number;
+    /** Minimum characters for typed signature */
+    minTypedLength?: number;
+    /** Custom validation function */
+    validate?: (data: SignatureData) => SignatureValidationResult;
+    /** Whether to show consent checkbox */
+    showConsent?: boolean;
+    /** Consent checkbox text */
+    consentText?: string;
+    /** Whether consent is required */
+    requireConsent?: boolean;
+    /** Current consent state */
+    consented?: boolean;
+    /** Input ID */
+    id?: string;
+    /** Name attribute for form submission */
+    name?: string;
+    /** Whether disabled */
+    disabled?: boolean;
+    /** Whether required */
+    required?: boolean;
+    /** Error message */
+    error?: string;
+    /** Hint text */
+    hint?: string;
+    /** Label text */
+    label?: string;
+    /** Canvas height (CSS value) */
+    height?: string;
+    /** Additional class */
+    class?: string;
+}
+declare const Signature: import("svelte").Component<Props, {}, "value" | "consented">;
+type Signature = ReturnType<typeof Signature>;
+export default Signature;

package/dist/lib/components/Slider.svelte

@@ -0,0 +1,136 @@
+<script lang="ts">
+  import { Slider as SliderPrimitive } from 'bits-ui';
+  import { cn } from '../utils.js';
+  import { tv, type VariantProps } from 'tailwind-variants';
+
+  const sliderVariants = tv({
+    slots: {
+      root: 'relative flex w-full touch-none select-none items-center',
+      range: 'absolute h-full bg-primary rounded-full',
+      thumb:
+        'block rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+    },
+    variants: {
+      size: {
+        sm: {
+          root: 'h-1.5',
+          thumb: 'h-4 w-4',
+        },
+        md: {
+          root: 'h-2',
+          thumb: 'h-5 w-5',
+        },
+        lg: {
+          root: 'h-3',
+          thumb: 'h-6 w-6',
+        },
+      },
+    },
+    defaultVariants: {
+      size: 'md',
+    },
+  });
+
+  type SliderVariants = VariantProps<typeof sliderVariants>;
+
+  interface Props {
+    /** Current value(s) - array for range slider */
+    value?: number[];
+    /** Minimum value */
+    min?: number;
+    /** Maximum value */
+    max?: number;
+    /** Step increment */
+    step?: number;
+    /** Whether the slider is disabled */
+    disabled?: boolean;
+    /** Layout orientation */
+    orientation?: 'horizontal' | 'vertical';
+    /** Callback when value changes during drag */
+    onValueChange?: (value: number[]) => void;
+    /** Callback when value is committed (drag ends) */
+    onValueCommit?: (value: number[]) => void;
+    /** Size variant */
+    size?: SliderVariants['size'];
+    /** Optional label */
+    label?: string;
+    /** Whether to show the current value */
+    showValue?: boolean;
+    /** Format function for displayed value */
+    formatValue?: (value: number) => string;
+    /** Additional class for the container */
+    class?: string;
+  }
+
+  let {
+    value = $bindable([50]),
+    min = 0,
+    max = 100,
+    step = 1,
+    disabled = false,
+    orientation = 'horizontal',
+    onValueChange,
+    onValueCommit,
+    size = 'md',
+    label,
+    showValue = false,
+    formatValue = (v) => String(v),
+    class: className,
+  }: Props = $props();
+
+  const styles = $derived(sliderVariants({ size }));
+
+  function handleValueChange(newValue: number[]) {
+    value = newValue;
+    onValueChange?.(newValue);
+  }
+
+  function handleValueCommit(newValue: number[]) {
+    onValueCommit?.(newValue);
+  }
+
+  const displayValue = $derived(
+    value.length === 1
+      ? formatValue(value[0])
+      : `${formatValue(value[0])} - ${formatValue(value[value.length - 1])}`
+  );
+</script>
+
+<div class={cn('w-full', className)}>
+  {#if label || showValue}
+    <div class="flex items-center justify-between mb-2">
+      {#if label}
+        <span class="text-sm font-medium leading-none">
+          {label}
+        </span>
+      {/if}
+      {#if showValue}
+        <span class="text-sm text-muted-foreground tabular-nums">
+          {displayValue}
+        </span>
+      {/if}
+    </div>
+  {/if}
+
+  <SliderPrimitive.Root
+    type="multiple"
+    {value}
+    {min}
+    {max}
+    {step}
+    {disabled}
+    {orientation}
+    onValueChange={handleValueChange}
+    onValueCommit={handleValueCommit}
+    class={cn(styles.root(), 'rounded-full bg-secondary')}
+  >
+    <SliderPrimitive.Range class={styles.range()} />
+    {#each value as _, i}
+      <SliderPrimitive.Thumb
+        index={i}
+        class={styles.thumb()}
+        aria-label={value.length > 1 ? `Thumb ${i + 1}` : label || 'Slider'}
+      />
+    {/each}
+  </SliderPrimitive.Root>
+</div>

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

@@ -0,0 +1,30 @@
+declare const Slider: import("svelte").Component<{
+    /** Current value(s) - array for range slider */
+    value?: number[];
+    /** Minimum value */
+    min?: number;
+    /** Maximum value */
+    max?: number;
+    /** Step increment */
+    step?: number;
+    /** Whether the slider is disabled */
+    disabled?: boolean;
+    /** Layout orientation */
+    orientation?: "horizontal" | "vertical";
+    /** Callback when value changes during drag */
+    onValueChange?: (value: number[]) => void;
+    /** Callback when value is committed (drag ends) */
+    onValueCommit?: (value: number[]) => void;
+    /** Size variant */
+    size?: "sm" | "md" | "lg" | undefined;
+    /** Optional label */
+    label?: string;
+    /** Whether to show the current value */
+    showValue?: boolean;
+    /** Format function for displayed value */
+    formatValue?: (value: number) => string;
+    /** Additional class for the container */
+    class?: string;
+}, {}, "value">;
+type Slider = ReturnType<typeof Slider>;
+export default Slider;

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

@@ -52,7 +52,7 @@
   let {
     skipToId = 'main-content',
     skipToText = 'Skip to main content',
-    toastPosition = 'top-right',
+    toastPosition = 'bottom-right',
     children,
   }: Props = $props();
 </script>

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

@@ -11,21 +11,12 @@
    * - Integrated with sidebar store for state management
    */
   import type { Snippet } from 'svelte';
-  import type { NavSection, NavItem, User, QuickLink } from '../../types/layout.js';
+  import type { NavSection, NavItem, User, QuickLink, BackLink } from '../../types/layout.js';
   import { cn } from '../../utils.js';
   import { sidebarStore } from '../../stores/sidebar.svelte.js';
   import AppShell from './AppShell.svelte';
   import Sidebar from './Sidebar.svelte';
 
-  interface BackLink {
-    /** Link label (e.g., "Back to Dashboard") */
-    label: string;
-    /** Link URL */
-    href: string;
-    /** Icon name for the icon snippet */
-    icon?: string;
-  }
-
   interface Props {
     /** Navigation sections for sidebar */
     navigation: NavSection[];
@@ -49,10 +40,12 @@
     icon?: Snippet<[NavItem]>;
     /** Quick links displayed at bottom of sidebar */
     quickLinks?: QuickLink[];
-    /** Quick links display mode: 'list' for stacked with labels, 'icons' for horizontal icons only */
+    /** Quick links display mode: 'list' for stacked with labels, 'icons' for stacked centered icons only */
     quickLinksDisplay?: 'list' | 'icons';
     /** Custom icon renderer for quick links */
     quickLinkIcon?: Snippet<[QuickLink]>;
+    /** Callback when a navigation item is clicked */
+    onNavigate?: (item: NavItem) => void;
     /** Custom content at start of header (after toggle button) */
     headerStart?: Snippet;
     /** Custom content at end of header */
@@ -61,6 +54,14 @@
     userMenu?: Snippet<[User]>;
     /** Sidebar footer content */
     sidebarFooter?: Snippet;
+    /** Sidebar width when expanded in pixels (default: 256) */
+    expandedWidth?: number;
+    /** Sidebar width when collapsed in pixels (default: 64) */
+    collapsedWidth?: number;
+    /** Enable search/filter input for navigation */
+    searchable?: boolean;
+    /** Placeholder text for search input */
+    searchPlaceholder?: string;
     /** Main content */
     children: Snippet;
   }
@@ -79,10 +80,15 @@
     quickLinks,
     quickLinksDisplay = 'list',
     quickLinkIcon,
+    onNavigate,
     headerStart,
     headerEnd,
     userMenu,
     sidebarFooter,
+    expandedWidth = 256,
+    collapsedWidth = 64,
+    searchable = false,
+    searchPlaceholder = 'Search...',
     children,
   }: Props = $props();
 
@@ -125,36 +131,77 @@
     }
   });
 
-  // Initialize sidebar state
+  // Load persisted sidebar state and apply prop-based defaults
   $effect(() => {
-    if (!sidebarCollapsed && !isMobile) {
-      sidebarStore.open();
+    sidebarStore.initialize();
+
+    // Only apply prop-based initial state if no persisted state exists
+    if (!sidebarStore.hasPersistedState && !isMobile) {
+      if (sidebarCollapsed) {
+        sidebarStore.close();
+      } else {
+        sidebarStore.open();
+      }
     }
   });
 
-  const sidebarWidth = $derived(isMobile ? 0 : sidebarStore.isOpen ? 256 : 64);
+  // Keyboard shortcuts
+  $effect(() => {
+    if (typeof window === 'undefined') return;
+
+    const handleKeydown = (e: KeyboardEvent) => {
+      // Toggle sidebar (Ctrl+\ or Cmd+\)
+      if ((e.ctrlKey || e.metaKey) && e.key === '\\') {
+        e.preventDefault();
+        sidebarStore.toggle();
+        return;
+      }
+
+      // Focus search with / key (when not in input/textarea)
+      if (e.key === '/' && !['INPUT', 'TEXTAREA'].includes(document.activeElement?.tagName || '')) {
+        e.preventDefault();
+        const searchInput = document.querySelector<HTMLInputElement>('[data-sidebar-search]');
+        if (searchInput) {
+          searchInput.focus();
+        }
+      }
+    };
+
+    window.addEventListener('keydown', handleKeydown);
+    return () => window.removeEventListener('keydown', handleKeydown);
+  });
+
+  const sidebarWidth = $derived(
+    isMobile ? 0 : sidebarStore.isOpen ? expandedWidth : collapsedWidth
+  );
 </script>
 
 <AppShell>
   <!-- Sidebar -->
   <Sidebar
     navigation={effectiveNavigation}
+    userRoles={user?.roles}
     variant={sidebarVariant}
     collapsed={!sidebarStore.isOpen && !isMobile}
     {isMobile}
     mobileOpen={isMobile && sidebarStore.isOpen}
     onClose={() => sidebarStore.close()}
+    {onNavigate}
     {logo}
     {icon}
     {quickLinks}
     {quickLinksDisplay}
     {quickLinkIcon}
     footer={sidebarFooter}
+    {expandedWidth}
+    {collapsedWidth}
+    {searchable}
+    {searchPlaceholder}
   />
 
   <!-- Main Content Area -->
   <div
-    class="flex flex-1 flex-col transition-all duration-300"
+    class="flex flex-1 flex-col transition-all duration-300 motion-reduce:transition-none"
     style="margin-left: {sidebarWidth}px;"
   >
     {#if showHeader}

package/dist/lib/components/layout/DashboardLayout.svelte.d.ts

@@ -10,15 +10,7 @@
    * - Integrated with sidebar store for state management
    */
 import type { Snippet } from 'svelte';
-import type { NavSection, NavItem, User, QuickLink } from '../../types/layout.js';
-interface BackLink {
-    /** Link label (e.g., "Back to Dashboard") */
-    label: string;
-    /** Link URL */
-    href: string;
-    /** Icon name for the icon snippet */
-    icon?: string;
-}
+import type { NavSection, NavItem, User, QuickLink, BackLink } from '../../types/layout.js';
 interface Props {
     /** Navigation sections for sidebar */
     navigation: NavSection[];
@@ -42,10 +34,12 @@ interface Props {
     icon?: Snippet<[NavItem]>;
     /** Quick links displayed at bottom of sidebar */
     quickLinks?: QuickLink[];
-    /** Quick links display mode: 'list' for stacked with labels, 'icons' for horizontal icons only */
+    /** Quick links display mode: 'list' for stacked with labels, 'icons' for stacked centered icons only */
     quickLinksDisplay?: 'list' | 'icons';
     /** Custom icon renderer for quick links */
     quickLinkIcon?: Snippet<[QuickLink]>;
+    /** Callback when a navigation item is clicked */
+    onNavigate?: (item: NavItem) => void;
     /** Custom content at start of header (after toggle button) */
     headerStart?: Snippet;
     /** Custom content at end of header */
@@ -54,6 +48,14 @@ interface Props {
     userMenu?: Snippet<[User]>;
     /** Sidebar footer content */
     sidebarFooter?: Snippet;
+    /** Sidebar width when expanded in pixels (default: 256) */
+    expandedWidth?: number;
+    /** Sidebar width when collapsed in pixels (default: 64) */
+    collapsedWidth?: number;
+    /** Enable search/filter input for navigation */
+    searchable?: boolean;
+    /** Placeholder text for search input */
+    searchPlaceholder?: string;
     /** Main content */
     children: Snippet;
 }

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

@@ -3,7 +3,7 @@
    * QuickLinks - Quick navigation links section for sidebar
    *
    * Features:
-   * - Two display modes: 'list' (stacked with labels) and 'icons' (horizontal icons only)
+   * - Two display modes: 'list' (stacked with labels) and 'icons' (stacked centered icons only)
    * - Light/dark variant support
    * - External link indicator
    * - Custom icon renderer support
@@ -16,37 +16,41 @@
   interface Props {
     /** Array of quick link items */
     links: QuickLink[];
-    /** Display mode: 'list' for stacked with labels, 'icons' for horizontal icons only */
+    /** Display mode: 'list' for stacked with labels, 'icons' for stacked centered icons only */
     display?: 'list' | 'icons';
     /** Visual variant - light (default) or dark */
     variant?: 'light' | 'dark';
     /** Custom icon renderer */
     icon?: Snippet<[QuickLink]>;
+    /** Accessible label for the navigation region */
+    ariaLabel?: string;
     /** Additional classes */
     class?: string;
   }
 
-  let { links, display = 'list', variant = 'light', icon, class: className }: Props = $props();
+  let {
+    links,
+    display = 'list',
+    variant = 'light',
+    icon,
+    ariaLabel = 'Quick links',
+    class: className,
+  }: Props = $props();
 
   const isLight = $derived(variant === 'light');
 </script>
 
 {#if links.length > 0}
   <div
-    class={cn(
-      display === 'list'
-        ? 'flex flex-col gap-1'
-        : 'flex flex-row items-center justify-center gap-2',
-      className
-    )}
+    class={cn('flex flex-col gap-1', display === 'icons' && 'items-center', className)}
     role="navigation"
-    aria-label="Quick links"
+    aria-label={ariaLabel}
   >
     {#each links as link}
       <a
         href={link.href}
         class={cn(
-          'flex items-center transition-colors',
+          'flex items-center transition-all duration-300 motion-reduce:transition-none overflow-hidden',
           // List mode styles
           display === 'list' && 'gap-3 rounded-md px-3 py-2 text-sm',
           display === 'list' &&
@@ -56,7 +60,7 @@
             !isLight &&
             'text-sidebar-foreground/70 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
           // Icon mode styles
-          display === 'icons' && 'rounded-md p-2',
+          display === 'icons' && 'rounded-md p-2 gap-0',
           display === 'icons' &&
             isLight &&
             'text-muted-foreground hover:bg-accent hover:text-accent-foreground',
@@ -87,24 +91,40 @@
           </span>
         {/if}
 
-        {#if display === 'list'}
-          <span class="flex-1 truncate">{link.label}</span>
+        <span
+          class={cn(
+            'truncate whitespace-nowrap transition-all duration-300 motion-reduce:transition-none',
+            display === 'icons' ? 'w-0 opacity-0 flex-none' : 'flex-1 opacity-100'
+          )}
+        >
+          {link.label}
+        </span>
 
-          {#if link.external}
-            <svg
-              class="h-4 w-4 shrink-0 opacity-50"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
-              />
-            </svg>
-          {/if}
+        {#if link.badge !== undefined && display === 'list'}
+          <span
+            class="ml-auto rounded-full bg-primary px-2 py-0.5 text-xs font-medium text-primary-foreground whitespace-nowrap"
+          >
+            {link.badge}
+          </span>
+        {/if}
+
+        {#if link.external}
+          <svg
+            class={cn(
+              'h-4 w-4 shrink-0 transition-all duration-300',
+              display === 'icons' ? 'hidden' : 'opacity-50'
+            )}
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+            />
+          </svg>
         {/if}
       </a>
     {/each}

package/dist/lib/components/layout/QuickLinks.svelte.d.ts

@@ -2,7 +2,7 @@
    * QuickLinks - Quick navigation links section for sidebar
    *
    * Features:
-   * - Two display modes: 'list' (stacked with labels) and 'icons' (horizontal icons only)
+   * - Two display modes: 'list' (stacked with labels) and 'icons' (stacked centered icons only)
    * - Light/dark variant support
    * - External link indicator
    * - Custom icon renderer support
@@ -13,12 +13,14 @@ import type { QuickLink } from '../../types/layout.js';
 interface Props {
     /** Array of quick link items */
     links: QuickLink[];
-    /** Display mode: 'list' for stacked with labels, 'icons' for horizontal icons only */
+    /** Display mode: 'list' for stacked with labels, 'icons' for stacked centered icons only */
     display?: 'list' | 'icons';
     /** Visual variant - light (default) or dark */
     variant?: 'light' | 'dark';
     /** Custom icon renderer */
     icon?: Snippet<[QuickLink]>;
+    /** Accessible label for the navigation region */
+    ariaLabel?: string;
     /** Additional classes */
     class?: string;
 }