@classic-homes/theme-svelte 0.1.0

package/README.md

@@ -0,0 +1,305 @@
+# @classic-homes/theme-svelte
+
+Svelte 5 components for the Classic Theme design system. Built on [Bits UI](https://bits-ui.com) primitives and styled with Tailwind CSS.
+
+## Installation
+
+```bash
+npm install @classic-homes/theme-svelte @classic-homes/theme-tokens
+```
+
+## Setup
+
+### 1. Configure Tailwind CSS
+
+Add the Classic Theme preset to your `tailwind.config.js`:
+
+```js
+import preset from '@classic-homes/theme-tailwind-preset';
+
+export default {
+  presets: [preset],
+  content: [
+    './src/**/*.{html,js,svelte,ts}',
+    './node_modules/@classic-homes/theme-svelte/**/*.{html,js,svelte,ts}',
+  ],
+};
+```
+
+### 2. Import Design Tokens
+
+Import the CSS tokens in your app's root CSS file:
+
+```css
+@import '@classic-homes/theme-tokens/css';
+```
+
+Or in your root layout:
+
+```svelte
+<script>
+  import '@classic-homes/theme-tokens/css';
+</script>
+```
+
+## Usage
+
+```svelte
+<script>
+  import { Button, Card, CardHeader, CardTitle, CardContent } from '@classic-homes/theme-svelte';
+</script>
+
+<Card>
+  <CardHeader>
+    <CardTitle>Welcome</CardTitle>
+  </CardHeader>
+  <CardContent>
+    <Button variant="default">Click me</Button>
+  </CardContent>
+</Card>
+```
+
+## Components
+
+### Core UI
+
+- `Button` - Buttons with variants (default, secondary, destructive, outline, ghost, link)
+- `Input` - Text input field
+- `Textarea` - Multi-line text input
+- `Label` - Form labels
+- `Checkbox` - Checkbox input
+- `Switch` - Toggle switch
+- `Select` - Dropdown select
+- `FormField` - Combined label + input + error handling
+
+### Layout
+
+- `AppShell` - Application wrapper with skip links and toast container
+- `DashboardLayout` - Sidebar + header layout for dashboards
+- `PublicLayout` - Header + footer layout for public pages
+- `FormPageLayout` - Centered form page layout
+- `Sidebar` - Navigation sidebar
+- `Header` - Page header
+- `Footer` - Page footer
+
+### Feedback
+
+- `Alert` - Alert messages (default, destructive, success, warning, info)
+- `AlertDialog` - Confirmation dialogs
+- `Dialog` - Modal dialogs
+- `Toast` - Toast notifications
+- `ToastContainer` - Toast notification container
+- `Spinner` - Loading spinner
+- `Skeleton` - Loading skeleton
+
+### Data Display
+
+- `Card` - Card container with header, content, footer
+- `Badge` - Status badges
+- `DataTable` - Sortable data table
+- `Tabs` - Tab navigation
+- `Tooltip` - Hover tooltips
+- `DropdownMenu` - Dropdown menus
+- `Avatar` - User avatars
+
+### Branding
+
+- `LogoMain` - Main logo component
+- `LoadingLogo` - Animated loading logo
+
+## Error Handling
+
+### Overview
+
+Components in this library do not include built-in error boundaries to give you full control over error handling. We recommend implementing error handling at your application's root level.
+
+### Recommended: Error Boundary Component
+
+Create an ErrorBoundary component to catch and handle errors gracefully:
+
+```svelte
+<!-- src/lib/ErrorBoundary.svelte -->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { Button, Alert, AlertDescription } from '@classic-homes/theme-svelte';
+
+  interface Props {
+    children: Snippet;
+    fallback?: Snippet<[Error, () => void]>;
+  }
+
+  let { children, fallback }: Props = $props();
+  let error = $state<Error | null>(null);
+
+  function reset() {
+    error = null;
+  }
+
+  $effect(() => {
+    const handleError = (e: ErrorEvent) => {
+      e.preventDefault();
+      error = e.error || new Error(e.message);
+    };
+
+    const handleUnhandledRejection = (e: PromiseRejectionEvent) => {
+      e.preventDefault();
+      error = e.reason instanceof Error ? e.reason : new Error(String(e.reason));
+    };
+
+    window.addEventListener('error', handleError);
+    window.addEventListener('unhandledrejection', handleUnhandledRejection);
+
+    return () => {
+      window.removeEventListener('error', handleError);
+      window.removeEventListener('unhandledrejection', handleUnhandledRejection);
+    };
+  });
+</script>
+
+{#if error}
+  {#if fallback}
+    {@render fallback(error, reset)}
+  {:else}
+    <div class="flex min-h-screen items-center justify-center p-4">
+      <div class="w-full max-w-md space-y-4">
+        <Alert variant="destructive">
+          <AlertDescription>
+            <strong>Something went wrong</strong>
+            <p class="mt-2 text-sm">{error.message}</p>
+          </AlertDescription>
+        </Alert>
+        <Button onclick={reset} variant="outline" class="w-full">Try again</Button>
+      </div>
+    </div>
+  {/if}
+{:else}
+  {@render children()}
+{/if}
+```
+
+### Usage with AppShell
+
+Wrap your `AppShell` with the ErrorBoundary:
+
+```svelte
+<!-- src/routes/+layout.svelte -->
+<script>
+  import { AppShell } from '@classic-homes/theme-svelte';
+  import ErrorBoundary from '$lib/ErrorBoundary.svelte';
+</script>
+
+<ErrorBoundary>
+  <AppShell>
+    <slot />
+  </AppShell>
+</ErrorBoundary>
+```
+
+### Custom Fallback UI
+
+You can provide a custom fallback UI:
+
+```svelte
+<ErrorBoundary>
+  {#snippet fallback(error, reset)}
+    <div class="error-page">
+      <h1>Oops!</h1>
+      <p>{error.message}</p>
+      <button onclick={reset}>Reload</button>
+    </div>
+  {/snippet}
+
+  <AppShell>
+    <slot />
+  </AppShell>
+</ErrorBoundary>
+```
+
+## Toast Notifications
+
+The library includes a toast store for managing notifications:
+
+```svelte
+<script>
+  import { toastStore, Button } from '@classic-homes/theme-svelte';
+
+  function showSuccess() {
+    toastStore.success('Operation completed successfully!');
+  }
+
+  function showError() {
+    toastStore.error('Something went wrong', { title: 'Error' });
+  }
+</script>
+
+<Button onclick={showSuccess}>Show Success</Button>
+<Button onclick={showError} variant="destructive">Show Error</Button>
+```
+
+Toast methods:
+
+- `toastStore.success(message, options?)` - Green success toast
+- `toastStore.error(message, options?)` - Red error toast (persistent by default)
+- `toastStore.warning(message, options?)` - Yellow warning toast
+- `toastStore.info(message, options?)` - Blue info toast
+- `toastStore.add(toast)` - Add custom toast
+- `toastStore.remove(id)` - Remove toast by ID
+- `toastStore.clear()` - Remove all toasts
+
+## Sidebar State
+
+For layouts with collapsible sidebars, use the sidebar store:
+
+```svelte
+<script>
+  import { sidebarStore } from '@classic-homes/theme-svelte';
+
+  function toggleSidebar() {
+    sidebarStore.toggle();
+  }
+</script>
+
+<button onclick={toggleSidebar}>
+  {sidebarStore.isOpen ? 'Close' : 'Open'} Sidebar
+</button>
+```
+
+## TypeScript Support
+
+All components are fully typed. Import types as needed:
+
+```typescript
+import type {
+  NavItem,
+  NavSection,
+  User,
+  Tab,
+  FileMetadata,
+  DataTableColumn,
+  SelectOption,
+} from '@classic-homes/theme-svelte';
+```
+
+## Svelte 5 Runes
+
+All components use Svelte 5 runes syntax:
+
+- `$props()` for component props
+- `$state()` for reactive state
+- `$derived()` for computed values
+- `$effect()` for side effects
+- `$bindable()` for two-way binding
+
+## Accessibility
+
+Components are built with accessibility in mind:
+
+- Proper ARIA attributes
+- Keyboard navigation support
+- Focus management
+- Screen reader friendly
+- Skip links in AppShell
+
+## License
+
+MIT

package/dist/lib/components/Alert.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../utils.js';
+  import { tv, type VariantProps } from 'tailwind-variants';
+
+  const alertVariants = tv({
+    base: 'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
+    variants: {
+      variant: {
+        default:
+          'bg-gray-50 dark:bg-gray-800 border-gray-200 dark:border-gray-700 text-gray-900 dark:text-gray-100',
+        destructive:
+          'bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-800 text-red-700 dark:text-red-400 [&>svg]:text-red-700 dark:[&>svg]:text-red-400',
+        error:
+          'bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-800 text-red-700 dark:text-red-400 [&>svg]:text-red-700 dark:[&>svg]:text-red-400',
+        success:
+          'bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800 text-green-700 dark:text-green-400 [&>svg]:text-green-700 dark:[&>svg]:text-green-400',
+        warning:
+          'bg-yellow-50 dark:bg-yellow-900/20 border-yellow-200 dark:border-yellow-800 text-yellow-700 dark:text-yellow-400 [&>svg]:text-yellow-700 dark:[&>svg]:text-yellow-400',
+        info: 'bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800 text-blue-700 dark:text-blue-400 [&>svg]:text-blue-700 dark:[&>svg]:text-blue-400',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  });
+
+  type AlertVariants = VariantProps<typeof alertVariants>;
+
+  interface Props {
+    variant?: AlertVariants['variant'];
+    class?: string;
+    children: Snippet;
+    [key: string]: unknown;
+  }
+
+  let { variant = 'default', class: className, children, ...restProps }: Props = $props();
+
+  const classes = $derived(cn(alertVariants({ variant }), className));
+
+  // Use assertive for errors/warnings, polite for info/success/default
+  const ariaLive = $derived(
+    variant === 'error' || variant === 'destructive' || variant === 'warning'
+      ? 'assertive'
+      : 'polite'
+  );
+</script>
+
+<div role="alert" aria-live={ariaLive} class={classes} {...restProps}>
+  {@render children()}
+</div>

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

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+declare const Alert: import("svelte").Component<{
+    [key: string]: unknown;
+    variant?: "default" | "destructive" | "error" | "success" | "warning" | "info" | undefined;
+    class?: string;
+    children: Snippet;
+}, {}, "">;
+type Alert = ReturnType<typeof Alert>;
+export default Alert;

package/dist/lib/components/AlertDescription.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../utils.js';
+
+  interface Props {
+    class?: string;
+    children: Snippet;
+    [key: string]: unknown;
+  }
+
+  let { class: className, children, ...restProps }: Props = $props();
+</script>
+
+<div class={cn('text-sm [&_p]:leading-relaxed', className)} {...restProps}>
+  {@render children()}
+</div>

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

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    class?: string;
+    children: Snippet;
+    [key: string]: unknown;
+}
+declare const AlertDescription: import("svelte").Component<Props, {}, "">;
+type AlertDescription = ReturnType<typeof AlertDescription>;
+export default AlertDescription;

package/dist/lib/components/AlertDialog.svelte

@@ -0,0 +1,136 @@
+<script lang="ts">
+  import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+  import { cn } from '../utils.js';
+  import type { Snippet } from 'svelte';
+  import { tv, type VariantProps } from 'tailwind-variants';
+
+  const buttonVariants = tv({
+    base: 'inline-flex items-center justify-center rounded-md text-sm font-medium 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: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  });
+
+  interface Props {
+    /** Whether the dialog is open */
+    open?: boolean;
+    /** Callback when open state changes */
+    onOpenChange?: (open: boolean) => void;
+    /** Dialog title */
+    title: string;
+    /** Dialog description */
+    description?: string;
+    /** Cancel button text */
+    cancelText?: string;
+    /** Confirm button text */
+    confirmText?: string;
+    /** Confirm button variant */
+    confirmVariant?: VariantProps<typeof buttonVariants>['variant'];
+    /** Callback when user confirms */
+    onConfirm?: () => void;
+    /** Callback when user cancels */
+    onCancel?: () => void;
+    /** Additional class for dialog content */
+    class?: string;
+    /** Optional trigger element */
+    trigger?: Snippet;
+    /** Optional custom content */
+    children?: Snippet;
+  }
+
+  let {
+    open = $bindable(false),
+    onOpenChange,
+    title,
+    description,
+    cancelText = 'Cancel',
+    confirmText = 'Continue',
+    confirmVariant = 'default',
+    onConfirm,
+    onCancel,
+    class: className,
+    trigger,
+    children,
+  }: Props = $props();
+
+  function handleOpenChange(newOpen: boolean) {
+    open = newOpen;
+    onOpenChange?.(newOpen);
+  }
+
+  function handleCancel() {
+    onCancel?.();
+    open = false;
+    onOpenChange?.(false);
+  }
+
+  function handleConfirm() {
+    onConfirm?.();
+    open = false;
+    onOpenChange?.(false);
+  }
+</script>
+
+<AlertDialogPrimitive.Root bind:open onOpenChange={handleOpenChange}>
+  {#if trigger}
+    <AlertDialogPrimitive.Trigger asChild>
+      {#snippet child({ props })}
+        <span {...props}>
+          {@render trigger()}
+        </span>
+      {/snippet}
+    </AlertDialogPrimitive.Trigger>
+  {/if}
+
+  <AlertDialogPrimitive.Portal>
+    <AlertDialogPrimitive.Overlay
+      class="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+    />
+    <AlertDialogPrimitive.Content
+      class={cn(
+        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+        className
+      )}
+    >
+      <div class="flex flex-col space-y-2 text-center sm:text-left">
+        <AlertDialogPrimitive.Title class="text-lg font-semibold">
+          {title}
+        </AlertDialogPrimitive.Title>
+        {#if description}
+          <AlertDialogPrimitive.Description class="text-sm text-muted-foreground">
+            {description}
+          </AlertDialogPrimitive.Description>
+        {/if}
+      </div>
+
+      {#if children}
+        <div class="py-2">
+          {@render children()}
+        </div>
+      {/if}
+
+      <div class="flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2">
+        <AlertDialogPrimitive.Cancel
+          class={cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0 h-10 px-4 py-2')}
+          onclick={handleCancel}
+        >
+          {cancelText}
+        </AlertDialogPrimitive.Cancel>
+        <AlertDialogPrimitive.Action
+          class={cn(buttonVariants({ variant: confirmVariant }), 'h-10 px-4 py-2')}
+          onclick={handleConfirm}
+        >
+          {confirmText}
+        </AlertDialogPrimitive.Action>
+      </div>
+    </AlertDialogPrimitive.Content>
+  </AlertDialogPrimitive.Portal>
+</AlertDialogPrimitive.Root>

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

@@ -0,0 +1,79 @@
+import type { Snippet } from 'svelte';
+import { type VariantProps } from 'tailwind-variants';
+declare const AlertDialog: import("svelte").Component<{
+    /** Whether the dialog is open */
+    open?: boolean;
+    /** Callback when open state changes */
+    onOpenChange?: (open: boolean) => void;
+    /** Dialog title */
+    title: string;
+    /** Dialog description */
+    description?: string;
+    /** Cancel button text */
+    cancelText?: string;
+    /** Confirm button text */
+    confirmText?: string;
+    /** Confirm button variant */
+    confirmVariant?: VariantProps<import("tailwind-variants").TVReturnType<{
+        variant: {
+            default: string;
+            destructive: string;
+            outline: string;
+            ghost: string;
+        };
+    }, undefined, "inline-flex items-center justify-center rounded-md text-sm font-medium 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", import("tailwind-variants/dist/config.js").TVConfig<{
+        variant: {
+            default: string;
+            destructive: string;
+            outline: string;
+            ghost: string;
+        };
+    }, {
+        variant: {
+            default: string;
+            destructive: string;
+            outline: string;
+            ghost: string;
+        };
+    }>, {
+        variant: {
+            default: string;
+            destructive: string;
+            outline: string;
+            ghost: string;
+        };
+    }, undefined, import("tailwind-variants").TVReturnType<{
+        variant: {
+            default: string;
+            destructive: string;
+            outline: string;
+            ghost: string;
+        };
+    }, undefined, "inline-flex items-center justify-center rounded-md text-sm font-medium 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", import("tailwind-variants/dist/config.js").TVConfig<{
+        variant: {
+            default: string;
+            destructive: string;
+            outline: string;
+            ghost: string;
+        };
+    }, {
+        variant: {
+            default: string;
+            destructive: string;
+            outline: string;
+            ghost: string;
+        };
+    }>, unknown, unknown, undefined>>>["variant"];
+    /** Callback when user confirms */
+    onConfirm?: () => void;
+    /** Callback when user cancels */
+    onCancel?: () => void;
+    /** Additional class for dialog content */
+    class?: string;
+    /** Optional trigger element */
+    trigger?: Snippet;
+    /** Optional custom content */
+    children?: Snippet;
+}, {}, "open">;
+type AlertDialog = ReturnType<typeof AlertDialog>;
+export default AlertDialog;

package/dist/lib/components/AlertTitle.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../utils.js';
+
+  interface Props {
+    class?: string;
+    children: Snippet;
+    [key: string]: unknown;
+  }
+
+  let { class: className, children, ...restProps }: Props = $props();
+</script>
+
+<h5 class={cn('mb-1 font-medium leading-none tracking-tight', className)} {...restProps}>
+  {@render children()}
+</h5>

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

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    class?: string;
+    children: Snippet;
+    [key: string]: unknown;
+}
+declare const AlertTitle: import("svelte").Component<Props, {}, "">;
+type AlertTitle = ReturnType<typeof AlertTitle>;
+export default AlertTitle;

package/dist/lib/components/Avatar.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+  /**
+   * Avatar - User/entity representation component
+   *
+   * Built on Bits UI Avatar primitive for accessibility and loading state handling.
+   * Displays user images with fallback placeholder support.
+   *
+   * Features:
+   * - Multiple size variants (xs, sm, md, lg)
+   * - Automatic image loading state management
+   * - Fallback display when image fails/loading
+   * - Circular design by default
+   */
+  import type { Snippet } from 'svelte';
+  import { Avatar as AvatarPrimitive } from 'bits-ui';
+  import { cn } from '../utils.js';
+  import { tv, type VariantProps } from 'tailwind-variants';
+
+  const avatarVariants = tv({
+    base: 'relative flex shrink-0 overflow-hidden rounded-full',
+    variants: {
+      size: {
+        xs: 'h-6 w-6',
+        sm: 'h-8 w-8',
+        md: 'h-10 w-10',
+        lg: 'h-12 w-12',
+        xl: 'h-16 w-16',
+      },
+    },
+    defaultVariants: {
+      size: 'md',
+    },
+  });
+
+  type AvatarVariants = VariantProps<typeof avatarVariants>;
+
+  interface Props {
+    /** Size variant */
+    size?: AvatarVariants['size'];
+    /** Delay before showing fallback (ms) */
+    delayMs?: number;
+    /** Additional classes */
+    class?: string;
+    /** Avatar content (AvatarImage and/or AvatarFallback) */
+    children: Snippet;
+    [key: string]: unknown;
+  }
+
+  let { size = 'md', delayMs = 0, class: className, children, ...restProps }: Props = $props();
+
+  const classes = $derived(cn(avatarVariants({ size }), className));
+</script>
+
+<AvatarPrimitive.Root class={classes} {delayMs} {...restProps}>
+  {@render children()}
+</AvatarPrimitive.Root>