@classic-homes/theme-svelte 0.1.4 → 0.1.6

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

@@ -0,0 +1,133 @@
+<script lang="ts">
+  /**
+   * AuthLayout - Layout for authentication pages
+   *
+   * Features:
+   * - Centered card layout for auth forms
+   * - Logo with optional subtitle
+   * - Footer links (privacy, terms, etc.)
+   * - Optional background decoration
+   * - Responsive design
+   * - Composes AppShell for consistent base structure
+   *
+   * Use this layout for: login, signup, password reset, forgot password,
+   * email verification, 2FA, and other authentication flows.
+   */
+  import type { Snippet } from 'svelte';
+  import { cn } from '../../utils.js';
+  import AppShell from './AppShell.svelte';
+  import LogoMain from '../LogoMain.svelte';
+
+  interface FooterLink {
+    /** Link label */
+    label: string;
+    /** Link URL */
+    href: string;
+    /** Opens in new tab */
+    external?: boolean;
+  }
+
+  interface Props {
+    /** Custom logo snippet */
+    logo?: Snippet;
+    /** Logo subtitle for default logo (e.g., "Sign in to your account") */
+    logoSubtitle?: string;
+    /** Logo environment indicator for default logo */
+    logoEnvironment?: 'local' | 'dev' | 'demo';
+    /** Footer links (privacy policy, terms, etc.) */
+    footerLinks?: FooterLink[];
+    /** Custom footer content (replaces footer links) */
+    footer?: Snippet;
+    /** Show decorative background */
+    showBackground?: boolean;
+    /** Background variant */
+    backgroundVariant?: 'default' | 'gradient' | 'pattern';
+    /** Maximum width of content card */
+    maxWidth?: 'sm' | 'md' | 'lg';
+    /** Additional classes for the container */
+    class?: string;
+    /** Main content (auth form) */
+    children: Snippet;
+  }
+
+  let {
+    logo,
+    logoSubtitle,
+    logoEnvironment,
+    footerLinks = [],
+    footer,
+    showBackground = false,
+    backgroundVariant = 'default',
+    maxWidth = 'sm',
+    class: className,
+    children,
+  }: Props = $props();
+
+  const maxWidthClasses = {
+    sm: 'max-w-sm',
+    md: 'max-w-md',
+    lg: 'max-w-lg',
+  };
+
+  const backgroundClasses = {
+    default: 'bg-content-bg',
+    gradient: 'bg-gradient-to-br from-primary/5 via-content-bg to-accent/5',
+    pattern:
+      'bg-content-bg bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-primary/10 via-content-bg to-content-bg',
+  };
+</script>
+
+<AppShell>
+  <div
+    class={cn(
+      'flex h-screen flex-col items-center justify-center overflow-auto bg-content-bg px-4 py-8 sm:px-6 lg:px-8',
+      showBackground && backgroundClasses[backgroundVariant],
+      className
+    )}
+  >
+    <!-- Logo -->
+    <div class="mb-6 flex flex-col items-center">
+      {#if logo}
+        {@render logo()}
+      {:else}
+        <LogoMain
+          variant="stacked"
+          color="dark"
+          size="lg"
+          subtitle={logoSubtitle}
+          environment={logoEnvironment}
+        />
+      {/if}
+    </div>
+
+    <!-- Main Content Card -->
+    <main
+      id="main-content"
+      class={cn('w-full rounded-lg bg-background p-6 shadow-lg sm:p-8', maxWidthClasses[maxWidth])}
+    >
+      {@render children()}
+    </main>
+
+    <!-- Footer Links -->
+    {#if footer}
+      <footer class="mt-6">
+        {@render footer()}
+      </footer>
+    {:else if footerLinks.length > 0}
+      <footer class="mt-6">
+        <nav class="flex flex-wrap justify-center gap-x-6 gap-y-2" aria-label="Footer">
+          {#each footerLinks as link}
+            <a
+              href={link.href}
+              class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+              target={link.external ? '_blank' : undefined}
+              rel={link.external ? 'noopener noreferrer' : undefined}
+            >
+              {link.label}
+            </a>
+          {/each}
+        </nav>
+      </footer>
+    {/if}
+  </div>
+</AppShell>

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

@@ -0,0 +1,48 @@
+/**
+   * AuthLayout - Layout for authentication pages
+   *
+   * Features:
+   * - Centered card layout for auth forms
+   * - Logo with optional subtitle
+   * - Footer links (privacy, terms, etc.)
+   * - Optional background decoration
+   * - Responsive design
+   * - Composes AppShell for consistent base structure
+   *
+   * Use this layout for: login, signup, password reset, forgot password,
+   * email verification, 2FA, and other authentication flows.
+   */
+import type { Snippet } from 'svelte';
+interface FooterLink {
+    /** Link label */
+    label: string;
+    /** Link URL */
+    href: string;
+    /** Opens in new tab */
+    external?: boolean;
+}
+interface Props {
+    /** Custom logo snippet */
+    logo?: Snippet;
+    /** Logo subtitle for default logo (e.g., "Sign in to your account") */
+    logoSubtitle?: string;
+    /** Logo environment indicator for default logo */
+    logoEnvironment?: 'local' | 'dev' | 'demo';
+    /** Footer links (privacy policy, terms, etc.) */
+    footerLinks?: FooterLink[];
+    /** Custom footer content (replaces footer links) */
+    footer?: Snippet;
+    /** Show decorative background */
+    showBackground?: boolean;
+    /** Background variant */
+    backgroundVariant?: 'default' | 'gradient' | 'pattern';
+    /** Maximum width of content card */
+    maxWidth?: 'sm' | 'md' | 'lg';
+    /** Additional classes for the container */
+    class?: string;
+    /** Main content (auth form) */
+    children: Snippet;
+}
+declare const AuthLayout: import("svelte").Component<Props, {}, "">;
+type AuthLayout = ReturnType<typeof AuthLayout>;
+export default AuthLayout;

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

@@ -11,20 +11,28 @@
    * - Integrated with sidebar store for state management
    */
   import type { Snippet } from 'svelte';
-  import type { NavSection, NavItem, User, QuickLink } from '../../types/layout.js';
-  import { cn } from '../../utils.js';
+  import type {
+    NavSection,
+    NavItem,
+    User,
+    QuickLink,
+    BackLink,
+    HeaderSearchConfig,
+  } from '../../types/layout.js';
   import { sidebarStore } from '../../stores/sidebar.svelte.js';
   import AppShell from './AppShell.svelte';
   import Sidebar from './Sidebar.svelte';
+  import Header from './Header.svelte';
 
-  interface BackLink {
-    /** Link label (e.g., "Back to Dashboard") */
-    label: string;
-    /** Link URL */
-    href: string;
-    /** Icon name for the icon snippet */
-    icon?: string;
-  }
+  type Breakpoint = 'sm' | 'md' | 'lg';
+
+  // Breakpoint pixel values (max-width for mobile detection)
+  // These match Tailwind's breakpoint - 1 (e.g., lg starts at 1024px, so mobile is <= 1023px)
+  const breakpointPixels: Record<Breakpoint, number> = {
+    sm: 639,
+    md: 767,
+    lg: 1023,
+  };
 
   interface Props {
     /** Navigation sections for sidebar */
@@ -49,10 +57,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 +71,18 @@
     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;
+    /** Header search configuration */
+    headerSearch?: HeaderSearchConfig;
+    /** Breakpoint at which to switch between mobile and desktop layouts */
+    mobileBreakpoint?: Breakpoint;
     /** Main content */
     children: Snippet;
   }
@@ -79,10 +101,17 @@
     quickLinks,
     quickLinksDisplay = 'list',
     quickLinkIcon,
+    onNavigate,
     headerStart,
     headerEnd,
     userMenu,
     sidebarFooter,
+    expandedWidth = 256,
+    collapsedWidth = 64,
+    searchable = false,
+    searchPlaceholder = 'Search...',
+    headerSearch,
+    mobileBreakpoint = 'lg',
     children,
   }: Props = $props();
 
@@ -111,7 +140,7 @@
 
   $effect(() => {
     if (typeof window !== 'undefined') {
-      const mediaQuery = window.matchMedia('(max-width: 1023px)');
+      const mediaQuery = window.matchMedia(`(max-width: ${breakpointPixels[mobileBreakpoint]}px)`);
       isMobile = mediaQuery.matches;
       sidebarStore.setMobile(isMobile);
 
@@ -125,95 +154,92 @@
     }
   });
 
-  // 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}
-      <header
-        class="sticky top-0 z-30 flex h-16 items-center justify-between border-b border-black bg-background px-4 lg:px-6"
+      <Header
+        showMenuButton={isMobile}
+        menuOpen={sidebarStore.isOpen}
+        onMenuClick={() => sidebarStore.toggle()}
+        showCollapseButton={!isMobile}
+        sidebarCollapsed={!sidebarStore.isOpen}
+        onCollapseClick={() => sidebarStore.toggle()}
+        title={pageTitle}
+        start={headerStart}
+        search={headerSearch}
       >
-        <div class="flex items-center gap-4">
-          <!-- Mobile Menu Button -->
-          {#if isMobile}
-            <button
-              class="rounded-md p-2 hover:bg-accent hover:text-accent-foreground lg:hidden"
-              onclick={() => sidebarStore.toggle()}
-              aria-label="Open menu"
-            >
-              <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M4 6h16M4 12h16M4 18h16"
-                />
-              </svg>
-            </button>
-          {:else}
-            <!-- Collapse Toggle Button (Desktop) -->
-            <button
-              class="rounded-md p-2 hover:bg-accent hover:text-accent-foreground"
-              onclick={() => sidebarStore.toggle()}
-              aria-label={sidebarStore.isOpen ? 'Collapse sidebar' : 'Expand sidebar'}
-            >
-              <svg
-                class={cn('h-5 w-5 transition-transform', !sidebarStore.isOpen && 'rotate-180')}
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M11 19l-7-7 7-7m8 14l-7-7 7-7"
-                />
-              </svg>
-            </button>
-          {/if}
-
-          <!-- Page Title -->
-          {#if pageTitle}
-            <h2 class="text-lg font-semibold">{pageTitle}</h2>
-          {/if}
-
-          <!-- Custom Header Start -->
-          {#if headerStart}
-            {@render headerStart()}
-          {/if}
-        </div>
-
-        <div class="flex items-center gap-4">
-          <!-- Custom Header End -->
+        {#snippet end()}
           {#if headerEnd}
             {@render headerEnd()}
           {:else if user}
@@ -236,8 +262,8 @@
               </div>
             {/if}
           {/if}
-        </div>
-      </header>
+        {/snippet}
+      </Header>
     {/if}
 
     <!-- Main Content -->