@classic-homes/theme-svelte 0.1.0

package/dist/lib/components/Tabs.svelte

@@ -0,0 +1,125 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { setContext } from 'svelte';
+  import { cn } from '../utils.js';
+  import type { Tab } from '../types/components.js';
+
+  interface Props {
+    /** Array of tab definitions */
+    tabs: Tab[];
+    /** Active tab ID (bindable) */
+    value?: string;
+    /** Unique ID for ARIA relationships */
+    id?: string;
+    /** Additional classes for container */
+    class?: string;
+    /** Tab panel content */
+    children?: Snippet;
+    /** Callback when active tab changes */
+    onValueChange?: (value: string) => void;
+  }
+
+  let {
+    tabs,
+    value = $bindable(tabs[0]?.id ?? ''),
+    id = `tabs-${Math.random().toString(36).slice(2, 11)}`,
+    class: className,
+    children,
+    onValueChange,
+  }: Props = $props();
+
+  // Create a reactive object for context
+  // Initialize with empty values - the effect will set them immediately
+  const tabsState = $state({ activeTab: '', tabsId: '' });
+
+  // Keep context state in sync with props (runs immediately and on changes)
+  $effect(() => {
+    tabsState.activeTab = value;
+    tabsState.tabsId = id;
+  });
+
+  // Set up context for TabPanel children (done once at component init)
+  setContext('tabs', tabsState);
+
+  function selectTab(tabId: string) {
+    if (tabs.find((t) => t.id === tabId && t.disabled)) return;
+    value = tabId;
+    tabsState.activeTab = tabId;
+    onValueChange?.(tabId);
+  }
+
+  function handleKeyDown(e: KeyboardEvent, currentIndex: number) {
+    const enabledTabs = tabs.filter((t) => !t.disabled);
+    const currentEnabledIndex = enabledTabs.findIndex((t) => t.id === tabs[currentIndex].id);
+
+    let newIndex = currentEnabledIndex;
+
+    switch (e.key) {
+      case 'ArrowLeft':
+        e.preventDefault();
+        newIndex = currentEnabledIndex > 0 ? currentEnabledIndex - 1 : enabledTabs.length - 1;
+        break;
+      case 'ArrowRight':
+        e.preventDefault();
+        newIndex = currentEnabledIndex < enabledTabs.length - 1 ? currentEnabledIndex + 1 : 0;
+        break;
+      case 'Home':
+        e.preventDefault();
+        newIndex = 0;
+        break;
+      case 'End':
+        e.preventDefault();
+        newIndex = enabledTabs.length - 1;
+        break;
+      default:
+        return;
+    }
+
+    const newTab = enabledTabs[newIndex];
+    if (newTab) {
+      selectTab(newTab.id);
+      // Focus the new tab
+      const tabElement = document.getElementById(`${id}-tab-${newTab.id}`);
+      tabElement?.focus();
+    }
+  }
+</script>
+
+<div class={cn('w-full', className)}>
+  <!-- Tab List -->
+  <div
+    role="tablist"
+    aria-label="Tabs"
+    class="inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground"
+  >
+    {#each tabs as tab, index (tab.id)}
+      <button
+        id={`${id}-tab-${tab.id}`}
+        role="tab"
+        type="button"
+        aria-selected={value === tab.id}
+        aria-controls={`${id}-panel-${tab.id}`}
+        tabindex={value === tab.id ? 0 : -1}
+        disabled={tab.disabled}
+        class={cn(
+          'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+          value === tab.id
+            ? 'bg-background text-foreground shadow-sm'
+            : 'hover:bg-background/50 hover:text-foreground',
+          tab.disabled && 'opacity-50 pointer-events-none cursor-not-allowed'
+        )}
+        onclick={() => selectTab(tab.id)}
+        onkeydown={(e) => handleKeyDown(e, index)}
+      >
+        {tab.label}
+      </button>
+    {/each}
+  </div>
+
+  <!-- Tab Panels Container -->
+  {#if children}
+    <div class="mt-2">
+      {@render children()}
+    </div>
+  {/if}
+</div>

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

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+import type { Tab } from '../types/components.js';
+interface Props {
+    /** Array of tab definitions */
+    tabs: Tab[];
+    /** Active tab ID (bindable) */
+    value?: string;
+    /** Unique ID for ARIA relationships */
+    id?: string;
+    /** Additional classes for container */
+    class?: string;
+    /** Tab panel content */
+    children?: Snippet;
+    /** Callback when active tab changes */
+    onValueChange?: (value: string) => void;
+}
+declare const Tabs: import("svelte").Component<Props, {}, "value">;
+type Tabs = ReturnType<typeof Tabs>;
+export default Tabs;

package/dist/lib/components/Textarea.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+  import { cn } from '../utils.js';
+
+  interface Props {
+    value?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    required?: boolean;
+    name?: string;
+    id?: string;
+    rows?: number;
+    class?: string;
+    onValueChange?: (value: string) => void;
+    [key: string]: unknown;
+  }
+
+  let {
+    value = $bindable(''),
+    placeholder,
+    disabled = false,
+    readonly = false,
+    required = false,
+    name,
+    id,
+    rows = 3,
+    class: className,
+    onValueChange,
+    ...restProps
+  }: Props = $props();
+
+  function handleInput(e: Event) {
+    const target = e.target as HTMLTextAreaElement;
+    value = target.value;
+    onValueChange?.(target.value);
+  }
+</script>
+
+<textarea
+  {value}
+  {placeholder}
+  {disabled}
+  {readonly}
+  {required}
+  {name}
+  {id}
+  {rows}
+  class={cn(
+    'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-gray-500 dark:placeholder:text-gray-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 resize-y',
+    className
+  )}
+  oninput={handleInput}
+  {...restProps}
+></textarea>

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

@@ -0,0 +1,16 @@
+interface Props {
+    value?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    required?: boolean;
+    name?: string;
+    id?: string;
+    rows?: number;
+    class?: string;
+    onValueChange?: (value: string) => void;
+    [key: string]: unknown;
+}
+declare const Textarea: import("svelte").Component<Props, {}, "value">;
+type Textarea = ReturnType<typeof Textarea>;
+export default Textarea;

package/dist/lib/components/Toast.svelte

@@ -0,0 +1,116 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { fly } from 'svelte/transition';
+  import { cn } from '../utils.js';
+  import { tv, type VariantProps } from 'tailwind-variants';
+
+  type ToastType = 'success' | 'error' | 'warning' | 'info';
+
+  const toastVariants = tv({
+    base: 'group pointer-events-auto relative flex w-full items-start gap-3 overflow-hidden rounded-lg border p-4 shadow-lg transition-all',
+    variants: {
+      type: {
+        success:
+          'bg-green-50 text-green-800 border-green-200 dark:bg-green-900/20 dark:text-green-400 dark:border-green-800',
+        error:
+          'bg-red-50 text-red-800 border-red-200 dark:bg-red-900/20 dark:text-red-400 dark:border-red-800',
+        warning:
+          'bg-yellow-50 text-yellow-800 border-yellow-200 dark:bg-yellow-900/20 dark:text-yellow-400 dark:border-yellow-800',
+        info: 'bg-blue-50 text-blue-800 border-blue-200 dark:bg-blue-900/20 dark:text-blue-400 dark:border-blue-800',
+      },
+    },
+    defaultVariants: {
+      type: 'info',
+    },
+  });
+
+  type ToastVariants = VariantProps<typeof toastVariants>;
+
+  // Icon paths for each toast type
+  const icons: Record<ToastType, string> = {
+    success: 'M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z',
+    error: 'M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z',
+    warning:
+      'M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z',
+    info: 'M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z',
+  };
+
+  const iconColors: Record<ToastType, string> = {
+    success: 'text-green-500 dark:text-green-400',
+    error: 'text-red-500 dark:text-red-400',
+    warning: 'text-yellow-500 dark:text-yellow-400',
+    info: 'text-blue-500 dark:text-blue-400',
+  };
+
+  interface Props {
+    type?: ToastVariants['type'];
+    title?: string;
+    message: string;
+    class?: string;
+    onclose?: () => void;
+    action?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let {
+    type = 'info',
+    title,
+    message,
+    class: className,
+    onclose,
+    action,
+    ...restProps
+  }: Props = $props();
+
+  const classes = $derived(cn(toastVariants({ type }), className));
+  const toastType = $derived(type as ToastType);
+</script>
+
+<div class={classes} role="alert" transition:fly={{ y: 50, duration: 300 }} {...restProps}>
+  <svg
+    class="h-5 w-5 flex-shrink-0 {iconColors[toastType]}"
+    fill="none"
+    stroke="currentColor"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
+  >
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d={icons[toastType]} />
+  </svg>
+
+  <div class="flex-1">
+    {#if title}
+      <div class="text-sm font-semibold">{title}</div>
+    {/if}
+    <p class="text-sm font-medium">{message}</p>
+  </div>
+
+  {#if action}
+    {@render action()}
+  {/if}
+
+  {#if onclose}
+    <button
+      type="button"
+      class="flex-shrink-0 rounded-md p-1 hover:bg-black/5 dark:hover:bg-white/10 transition-colors"
+      onclick={onclose}
+      aria-label="Close"
+    >
+      <svg
+        class="h-4 w-4"
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+        aria-hidden="true"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M6 18L18 6M6 6l12 12"
+        />
+      </svg>
+    </button>
+  {/if}
+</div>

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

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+declare const Toast: import("svelte").Component<{
+    [key: string]: unknown;
+    type?: "error" | "success" | "warning" | "info" | undefined;
+    title?: string;
+    message: string;
+    class?: string;
+    onclose?: () => void;
+    action?: Snippet;
+}, {}, "">;
+type Toast = ReturnType<typeof Toast>;
+export default Toast;

package/dist/lib/components/ToastContainer.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+  import { cn } from '../utils.js';
+  import { toastStore } from '../stores/toast.svelte.js';
+  import Toast from './Toast.svelte';
+
+  interface Props {
+    position?:
+      | 'top-left'
+      | 'top-right'
+      | 'top-center'
+      | 'bottom-left'
+      | 'bottom-right'
+      | 'bottom-center';
+    class?: string;
+    [key: string]: unknown;
+  }
+
+  let { position = 'bottom-right', class: className, ...restProps }: Props = $props();
+
+  const positionClasses = {
+    'top-left': 'top-4 left-4',
+    'top-right': 'top-4 right-4',
+    'top-center': 'top-4 left-1/2 -translate-x-1/2',
+    'bottom-left': 'bottom-4 left-4',
+    'bottom-right': 'bottom-4 right-4',
+    'bottom-center': 'bottom-4 left-1/2 -translate-x-1/2',
+  };
+
+  // Stack order: bottom positions use flex-col-reverse so newest appears at bottom
+  const stackOrder = $derived(position.startsWith('bottom') ? 'flex-col' : 'flex-col-reverse');
+</script>
+
+{#if toastStore.toasts.length > 0}
+  <div
+    class={cn(
+      'fixed z-50 flex w-full max-w-sm gap-2 pointer-events-none',
+      stackOrder,
+      positionClasses[position],
+      className
+    )}
+    aria-live="polite"
+    aria-atomic="true"
+    {...restProps}
+  >
+    {#each toastStore.toasts as toast (toast.id)}
+      <div class="pointer-events-auto">
+        <Toast
+          type={toast.type}
+          title={toast.title}
+          message={toast.message}
+          onclose={() => toastStore.remove(toast.id)}
+        />
+      </div>
+    {/each}
+  </div>
+{/if}

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

@@ -0,0 +1,8 @@
+interface Props {
+    position?: 'top-left' | 'top-right' | 'top-center' | 'bottom-left' | 'bottom-right' | 'bottom-center';
+    class?: string;
+    [key: string]: unknown;
+}
+declare const ToastContainer: import("svelte").Component<Props, {}, "">;
+type ToastContainer = ReturnType<typeof ToastContainer>;
+export default ToastContainer;

package/dist/lib/components/Tooltip.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+  import { Tooltip as TooltipPrimitive } from 'bits-ui';
+  import { cn } from '../utils.js';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    /** Content to display in the tooltip */
+    content: string;
+    /** Side of the trigger to show tooltip */
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    /** Alignment of tooltip relative to trigger */
+    align?: 'start' | 'center' | 'end';
+    /** Delay in ms before showing tooltip */
+    delayDuration?: number;
+    /** Additional class for tooltip content */
+    class?: string;
+    /** Trigger element */
+    children: Snippet;
+  }
+
+  let {
+    content,
+    side = 'top',
+    align = 'center',
+    delayDuration = 200,
+    class: className,
+    children,
+  }: Props = $props();
+</script>
+
+<TooltipPrimitive.Provider>
+  <TooltipPrimitive.Root {delayDuration}>
+    <TooltipPrimitive.Trigger asChild>
+      {#snippet child({ props })}
+        <span {...props} class="inline-flex">
+          {@render children()}
+        </span>
+      {/snippet}
+    </TooltipPrimitive.Trigger>
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        {side}
+        {align}
+        sideOffset={4}
+        class={cn(
+          'z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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
+        )}
+      >
+        {content}
+        <TooltipPrimitive.Arrow class="fill-primary" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  </TooltipPrimitive.Root>
+</TooltipPrimitive.Provider>

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

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Content to display in the tooltip */
+    content: string;
+    /** Side of the trigger to show tooltip */
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    /** Alignment of tooltip relative to trigger */
+    align?: 'start' | 'center' | 'end';
+    /** Delay in ms before showing tooltip */
+    delayDuration?: number;
+    /** Additional class for tooltip content */
+    class?: string;
+    /** Trigger element */
+    children: Snippet;
+}
+declare const Tooltip: import("svelte").Component<Props, {}, "">;
+type Tooltip = ReturnType<typeof Tooltip>;
+export default Tooltip;

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

@@ -0,0 +1,82 @@
+<script lang="ts">
+  /**
+   * AppShell - Base wrapper component for applications
+   *
+   * Provides:
+   * - Skip link for accessibility
+   * - Toast container for notifications
+   * - Consistent base structure
+   *
+   * ## Error Handling
+   *
+   * AppShell does not include built-in error boundaries to give you full control
+   * over error handling in your application. We recommend implementing error
+   * handling at your application's root level.
+   *
+   * ### Recommended Pattern
+   *
+   * Create an ErrorBoundary component that catches errors and wrap AppShell with it.
+   * See the package README for a complete ErrorBoundary implementation example.
+   *
+   * Usage:
+   *   ErrorBoundary > AppShell > YourContent
+   *
+   * The ErrorBoundary should:
+   * 1. Listen for window 'error' events
+   * 2. Store error state using $state
+   * 3. Render fallback UI when error is present
+   * 4. Provide a way to reset/retry
+   *
+   * @see README.md for complete ErrorBoundary implementation
+   */
+  import type { Snippet } from 'svelte';
+  import ToastContainer from '../ToastContainer.svelte';
+
+  interface Props {
+    /** Skip link target ID */
+    skipToId?: string;
+    /** Skip link text */
+    skipToText?: string;
+    /** Toast container position */
+    toastPosition?:
+      | 'top-right'
+      | 'top-left'
+      | 'bottom-right'
+      | 'bottom-left'
+      | 'top-center'
+      | 'bottom-center';
+    /** Main content */
+    children: Snippet;
+  }
+
+  let {
+    skipToId = 'main-content',
+    skipToText = 'Skip to main content',
+    toastPosition = 'top-right',
+    children,
+  }: Props = $props();
+</script>
+
+<div class="app-shell min-h-screen bg-background text-foreground">
+  <!-- Skip Link for Accessibility -->
+  <a
+    href="#{skipToId}"
+    class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-[100] focus:rounded-md focus:bg-primary focus:px-4 focus:py-2 focus:text-primary-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
+  >
+    {skipToText}
+  </a>
+
+  <!-- Main Content -->
+  {@render children()}
+
+  <!-- Toast Container -->
+  <ToastContainer position={toastPosition} />
+</div>
+
+<style>
+  .app-shell {
+    /* Ensure the app shell fills the viewport */
+    display: flex;
+    flex-direction: column;
+  }
+</style>

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

@@ -0,0 +1,44 @@
+/**
+   * AppShell - Base wrapper component for applications
+   *
+   * Provides:
+   * - Skip link for accessibility
+   * - Toast container for notifications
+   * - Consistent base structure
+   *
+   * ## Error Handling
+   *
+   * AppShell does not include built-in error boundaries to give you full control
+   * over error handling in your application. We recommend implementing error
+   * handling at your application's root level.
+   *
+   * ### Recommended Pattern
+   *
+   * Create an ErrorBoundary component that catches errors and wrap AppShell with it.
+   * See the package README for a complete ErrorBoundary implementation example.
+   *
+   * Usage:
+   *   ErrorBoundary > AppShell > YourContent
+   *
+   * The ErrorBoundary should:
+   * 1. Listen for window 'error' events
+   * 2. Store error state using $state
+   * 3. Render fallback UI when error is present
+   * 4. Provide a way to reset/retry
+   *
+   * @see README.md for complete ErrorBoundary implementation
+   */
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Skip link target ID */
+    skipToId?: string;
+    /** Skip link text */
+    skipToText?: string;
+    /** Toast container position */
+    toastPosition?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center';
+    /** Main content */
+    children: Snippet;
+}
+declare const AppShell: import("svelte").Component<Props, {}, "">;
+type AppShell = ReturnType<typeof AppShell>;
+export default AppShell;