@classic-homes/theme-svelte 0.1.5 → 0.1.7

package/dist/lib/components/CardFooter.svelte

@@ -1,11 +1,29 @@
 <script lang="ts">
+  /**
+   * CardFooter - Footer section for Card component
+   *
+   * Provides consistent padding and flex layout for card action buttons
+   * or summary content.
+   *
+   * @example
+   * <Card>
+   *   <CardHeader>...</CardHeader>
+   *   <CardContent>...</CardContent>
+   *   <CardFooter>
+   *     <Button>Save</Button>
+   *     <Button variant="outline">Cancel</Button>
+   *   </CardFooter>
+   * </Card>
+   */
   import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
   import { cn } from '../utils.js';
 
-  interface Props {
+  interface Props extends HTMLAttributes<HTMLDivElement> {
+    /** Additional CSS classes */
     class?: string;
+    /** Footer content */
     children: Snippet;
-    [key: string]: unknown;
   }
 
   let { class: className, children, ...restProps }: Props = $props();

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

@@ -1,8 +1,26 @@
+/**
+   * CardFooter - Footer section for Card component
+   *
+   * Provides consistent padding and flex layout for card action buttons
+   * or summary content.
+   *
+   * @example
+   * <Card>
+   *   <CardHeader>...</CardHeader>
+   *   <CardContent>...</CardContent>
+   *   <CardFooter>
+   *     <Button>Save</Button>
+   *     <Button variant="outline">Cancel</Button>
+   *   </CardFooter>
+   * </Card>
+   */
 import type { Snippet } from 'svelte';
-interface Props {
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    /** Additional CSS classes */
     class?: string;
+    /** Footer content */
     children: Snippet;
-    [key: string]: unknown;
 }
 declare const CardFooter: import("svelte").Component<Props, {}, "">;
 type CardFooter = ReturnType<typeof CardFooter>;

package/dist/lib/components/CardHeader.svelte

@@ -1,16 +1,36 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
   import { cn } from '../utils.js';
+  import { tv, type VariantProps } from 'tailwind-variants';
+
+  const cardHeaderVariants = tv({
+    base: 'flex flex-col space-y-1.5',
+    variants: {
+      variant: {
+        default: 'p-6',
+        compact: 'p-4',
+        bordered: 'p-6 border-b',
+        shaded: 'p-6 bg-muted/50',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  });
+
+  type CardHeaderVariants = VariantProps<typeof cardHeaderVariants>;
 
   interface Props {
+    /** Visual variant */
+    variant?: CardHeaderVariants['variant'];
     class?: string;
     children: Snippet;
     [key: string]: unknown;
   }
 
-  let { class: className, children, ...restProps }: Props = $props();
+  let { variant = 'default', class: className, children, ...restProps }: Props = $props();
 </script>
 
-<div class={cn('flex flex-col space-y-1.5 p-6', className)} {...restProps}>
+<div class={cn(cardHeaderVariants({ variant }), className)} {...restProps}>
   {@render children()}
 </div>

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

@@ -1,9 +1,10 @@
 import type { Snippet } from 'svelte';
-interface Props {
+declare const CardHeader: import("svelte").Component<{
+    [key: string]: unknown;
+    /** Visual variant */
+    variant?: "default" | "compact" | "bordered" | "shaded" | undefined;
     class?: string;
     children: Snippet;
-    [key: string]: unknown;
-}
-declare const CardHeader: import("svelte").Component<Props, {}, "">;
+}, {}, "">;
 type CardHeader = ReturnType<typeof CardHeader>;
 export default CardHeader;

package/dist/lib/components/HeaderSearch.svelte

@@ -0,0 +1,340 @@
+<script lang="ts">
+  /**
+   * HeaderSearch - Docusaurus-style search component for the header
+   *
+   * A flexible, configurable search component that displays a trigger button
+   * in the header and opens a modal dialog with search input and results.
+   *
+   * Features:
+   * - Backend-agnostic (callback-based integration)
+   * - Keyboard shortcut support (Cmd/Ctrl+K)
+   * - Full keyboard navigation in results
+   * - Custom result rendering via snippets
+   * - Loading and empty states
+   *
+   * @example Basic usage:
+   * ```svelte
+   * <HeaderSearch
+   *   enabled={true}
+   *   placeholder="Search..."
+   *   onSearch={(query) => handleSearch(query)}
+   *   onSelect={(item) => goto(item.href)}
+   *   results={searchResults}
+   *   loading={isSearching}
+   * />
+   * ```
+   */
+  import { Dialog as DialogPrimitive } from 'bits-ui';
+  import { cn } from '../utils.js';
+  import type { Snippet } from 'svelte';
+  import type { SearchResultItem, SearchResultGroup } from '../types/layout.js';
+  import Spinner from './Spinner.svelte';
+
+  interface Props<T = SearchResultItem> {
+    /** Whether search is enabled/visible */
+    enabled?: boolean;
+    /** Placeholder text for search input */
+    placeholder?: string;
+    /** Called when user types (debounced). App should update results prop. */
+    onSearch?: (query: string) => void;
+    /** Called when user selects a result */
+    onSelect?: (item: T) => void;
+    /** Called when search dialog opens/closes */
+    onOpenChange?: (open: boolean) => void;
+    /** Search results to display (flat list or grouped) */
+    results?: T[] | SearchResultGroup<T>[];
+    /** Whether results are currently loading */
+    loading?: boolean;
+    /** Message when no results found */
+    emptyMessage?: string;
+    /** Enable Cmd/Ctrl+K shortcut (default: true) */
+    enableShortcut?: boolean;
+    /** Custom shortcut key (default: 'k') */
+    shortcutKey?: string;
+    /** Trigger button variant: 'default' shows full search box, 'icon' shows icon-only button */
+    variant?: 'default' | 'icon';
+    /** Size variant for trigger button */
+    size?: 'sm' | 'md';
+    /** Custom result item renderer - receives (item, isSelected) */
+    renderResult?: Snippet<[T, boolean]>;
+    /** Custom empty state renderer */
+    renderEmpty?: Snippet;
+    /** Additional classes for trigger button */
+    class?: string;
+  }
+
+  let {
+    enabled = true,
+    placeholder = 'Search...',
+    onSearch,
+    onSelect,
+    onOpenChange,
+    results = [],
+    loading = false,
+    emptyMessage = 'No results found.',
+    enableShortcut = true,
+    shortcutKey = 'k',
+    variant = 'default',
+    size = 'md',
+    renderResult,
+    renderEmpty,
+    class: className,
+  }: Props = $props();
+
+  // State
+  let open = $state(false);
+  let query = $state('');
+  let selectedIndex = $state(0);
+  let inputRef: HTMLInputElement | undefined = $state();
+  let debounceTimer: ReturnType<typeof setTimeout> | null = null;
+
+  // Flatten results for keyboard navigation
+  const flatResults = $derived.by(() => {
+    if (!results || results.length === 0) return [];
+    // Check if grouped results
+    if (results.length > 0 && 'items' in results[0]) {
+      return (results as SearchResultGroup[]).flatMap((g) => g.items);
+    }
+    return results as SearchResultItem[];
+  });
+
+  // Keyboard shortcut handler
+  $effect(() => {
+    if (!enableShortcut || typeof window === 'undefined') return;
+
+    const handleKeydown = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === shortcutKey) {
+        e.preventDefault();
+        open = true;
+      }
+    };
+
+    window.addEventListener('keydown', handleKeydown);
+    return () => window.removeEventListener('keydown', handleKeydown);
+  });
+
+  // Focus input when dialog opens
+  $effect(() => {
+    if (open && inputRef) {
+      requestAnimationFrame(() => inputRef?.focus());
+    }
+  });
+
+  // Debounced search
+  function handleInput(value: string) {
+    query = value;
+    selectedIndex = 0;
+
+    if (debounceTimer) clearTimeout(debounceTimer);
+    debounceTimer = setTimeout(() => {
+      onSearch?.(value);
+    }, 200);
+  }
+
+  // Keyboard navigation within results
+  function handleKeydown(e: KeyboardEvent) {
+    switch (e.key) {
+      case 'ArrowDown':
+        e.preventDefault();
+        selectedIndex = Math.min(selectedIndex + 1, flatResults.length - 1);
+        break;
+      case 'ArrowUp':
+        e.preventDefault();
+        selectedIndex = Math.max(selectedIndex - 1, 0);
+        break;
+      case 'Enter':
+        e.preventDefault();
+        if (flatResults[selectedIndex]) {
+          handleSelect(flatResults[selectedIndex]);
+        }
+        break;
+    }
+  }
+
+  function handleSelect(item: SearchResultItem) {
+    onSelect?.(item);
+    open = false;
+    query = '';
+  }
+
+  function handleOpenChange(isOpen: boolean) {
+    open = isOpen;
+    onOpenChange?.(isOpen);
+    if (!isOpen) {
+      query = '';
+      selectedIndex = 0;
+    }
+  }
+</script>
+
+{#if enabled}
+  <!-- Trigger Button -->
+  {#if variant === 'icon'}
+    <!-- Icon-only variant -->
+    <button
+      type="button"
+      onclick={() => (open = true)}
+      class={cn(
+        'inline-flex items-center justify-center rounded-md border border-input bg-background text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+        size === 'sm' ? 'h-8 w-8' : 'h-9 w-9',
+        className
+      )}
+      aria-label="Search"
+      title={enableShortcut ? `Search (⌘/${shortcutKey.toUpperCase()})` : 'Search'}
+    >
+      <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+        />
+      </svg>
+    </button>
+  {:else}
+    <!-- Default full search box variant -->
+    <button
+      type="button"
+      onclick={() => (open = true)}
+      class={cn(
+        'flex items-center gap-2 rounded-md border border-input bg-background px-3 text-sm text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+        size === 'sm' ? 'h-8' : 'h-9',
+        className
+      )}
+      aria-label="Search"
+    >
+      <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+        />
+      </svg>
+      <span class="hidden sm:inline">{placeholder}</span>
+      {#if enableShortcut}
+        <kbd
+          class="pointer-events-none hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground sm:inline-flex"
+        >
+          <span class="text-xs">⌘</span>{shortcutKey.toUpperCase()}
+        </kbd>
+      {/if}
+    </button>
+  {/if}
+
+  <!-- Search Dialog -->
+  <DialogPrimitive.Root bind:open onOpenChange={handleOpenChange}>
+    <DialogPrimitive.Portal>
+      <DialogPrimitive.Overlay
+        class="fixed inset-0 z-50 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+      />
+      <DialogPrimitive.Content
+        class="fixed left-[50%] top-[20%] z-50 w-full max-w-lg translate-x-[-50%] overflow-hidden rounded-lg border bg-background shadow-lg 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 sm:top-[15%]"
+        aria-describedby={undefined}
+      >
+        <!-- Search Input -->
+        <div class="flex items-center border-b px-3">
+          <svg
+            class="h-4 w-4 shrink-0 text-muted-foreground"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+            />
+          </svg>
+          <input
+            bind:this={inputRef}
+            type="search"
+            {placeholder}
+            value={query}
+            oninput={(e) => handleInput(e.currentTarget.value)}
+            onkeydown={handleKeydown}
+            class="flex h-12 w-full bg-transparent px-3 py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
+            autocomplete="off"
+            autocorrect="off"
+            spellcheck="false"
+          />
+          {#if loading}
+            <Spinner size="sm" class="shrink-0" />
+          {/if}
+        </div>
+
+        <!-- Results Area -->
+        <div class="max-h-[300px] overflow-y-auto p-2" role="listbox">
+          {#if loading && flatResults.length === 0}
+            <div class="flex items-center justify-center py-6">
+              <Spinner size="sm" />
+              <span class="ml-2 text-sm text-muted-foreground">Searching...</span>
+            </div>
+          {:else if flatResults.length === 0 && query}
+            {#if renderEmpty}
+              {@render renderEmpty()}
+            {:else}
+              <div class="py-6 text-center text-sm text-muted-foreground">
+                {emptyMessage}
+              </div>
+            {/if}
+          {:else if flatResults.length === 0}
+            <div class="py-6 text-center text-sm text-muted-foreground">Type to search...</div>
+          {:else}
+            {#each flatResults as item, index (item.id)}
+              <button
+                type="button"
+                onclick={() => handleSelect(item)}
+                class={cn(
+                  'flex w-full cursor-pointer items-start gap-3 rounded-md px-3 py-2 text-left text-sm transition-colors',
+                  index === selectedIndex
+                    ? 'bg-accent text-accent-foreground'
+                    : 'hover:bg-accent/50'
+                )}
+                role="option"
+                aria-selected={index === selectedIndex}
+              >
+                {#if renderResult}
+                  {@render renderResult(item, index === selectedIndex)}
+                {:else}
+                  <div class="min-w-0 flex-1">
+                    <div class="truncate font-medium">{item.title}</div>
+                    {#if item.description}
+                      <div class="truncate text-xs text-muted-foreground">
+                        {item.description}
+                      </div>
+                    {/if}
+                  </div>
+                  {#if item.category}
+                    <span class="shrink-0 text-xs text-muted-foreground">
+                      {item.category}
+                    </span>
+                  {/if}
+                {/if}
+              </button>
+            {/each}
+          {/if}
+        </div>
+
+        <!-- Footer with keyboard hints -->
+        <div
+          class="flex items-center justify-between border-t px-3 py-2 text-xs text-muted-foreground"
+        >
+          <div class="flex items-center gap-1">
+            <kbd class="rounded border bg-muted px-1.5 py-0.5">↑↓</kbd>
+            <span>Navigate</span>
+          </div>
+          <div class="flex items-center gap-1">
+            <kbd class="rounded border bg-muted px-1.5 py-0.5">↵</kbd>
+            <span>Select</span>
+          </div>
+          <div class="flex items-center gap-1">
+            <kbd class="rounded border bg-muted px-1.5 py-0.5">esc</kbd>
+            <span>Close</span>
+          </div>
+        </div>
+      </DialogPrimitive.Content>
+    </DialogPrimitive.Portal>
+  </DialogPrimitive.Root>
+{/if}

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

@@ -0,0 +1,37 @@
+import type { Snippet } from 'svelte';
+import type { SearchResultItem, SearchResultGroup } from '../types/layout.js';
+interface Props<T = SearchResultItem> {
+    /** Whether search is enabled/visible */
+    enabled?: boolean;
+    /** Placeholder text for search input */
+    placeholder?: string;
+    /** Called when user types (debounced). App should update results prop. */
+    onSearch?: (query: string) => void;
+    /** Called when user selects a result */
+    onSelect?: (item: T) => void;
+    /** Called when search dialog opens/closes */
+    onOpenChange?: (open: boolean) => void;
+    /** Search results to display (flat list or grouped) */
+    results?: T[] | SearchResultGroup<T>[];
+    /** Whether results are currently loading */
+    loading?: boolean;
+    /** Message when no results found */
+    emptyMessage?: string;
+    /** Enable Cmd/Ctrl+K shortcut (default: true) */
+    enableShortcut?: boolean;
+    /** Custom shortcut key (default: 'k') */
+    shortcutKey?: string;
+    /** Trigger button variant: 'default' shows full search box, 'icon' shows icon-only button */
+    variant?: 'default' | 'icon';
+    /** Size variant for trigger button */
+    size?: 'sm' | 'md';
+    /** Custom result item renderer - receives (item, isSelected) */
+    renderResult?: Snippet<[T, boolean]>;
+    /** Custom empty state renderer */
+    renderEmpty?: Snippet;
+    /** Additional classes for trigger button */
+    class?: string;
+}
+declare const HeaderSearch: import("svelte").Component<Props<SearchResultItem>, {}, "">;
+type HeaderSearch = ReturnType<typeof HeaderSearch>;
+export default HeaderSearch;

package/dist/lib/components/PageHeader.svelte

@@ -42,6 +42,12 @@
           subtitle: 'text-xl max-w-2xl mx-auto',
           actionsWrapper: 'mt-6 justify-center',
         },
+        form: {
+          container: 'text-center mb-8',
+          title: 'text-3xl md:text-4xl font-light tracking-tight text-brand-core-2',
+          subtitle: 'mt-3 text-base md:text-lg text-gray-600',
+          actionsWrapper: 'mt-6 justify-center',
+        },
       },
     },
     defaultVariants: {

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

@@ -18,7 +18,7 @@ declare const PageHeader: import("svelte").Component<{
     /** Optional subtitle text */
     subtitle?: string;
     /** Visual variant */
-    variant?: "default" | "hero" | "centered" | undefined;
+    variant?: "default" | "form" | "hero" | "centered" | undefined;
     /** Additional classes for the container */
     class?: string;
     /** Optional action buttons/content */

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>