@classic-homes/theme-svelte 0.1.0

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

@@ -0,0 +1,26 @@
+/**
+   * 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';
+declare const Avatar: import("svelte").Component<{
+    [key: string]: unknown;
+    /** Size variant */
+    size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
+    /** Delay before showing fallback (ms) */
+    delayMs?: number;
+    /** Additional classes */
+    class?: string;
+    /** Avatar content (AvatarImage and/or AvatarFallback) */
+    children: Snippet;
+}, {}, "">;
+type Avatar = ReturnType<typeof Avatar>;
+export default Avatar;

package/dist/lib/components/AvatarFallback.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  /**
+   * AvatarFallback - Fallback content when Avatar image is loading or unavailable
+   *
+   * Displays initials or placeholder content when the image cannot be shown.
+   * Should be used inside an Avatar component.
+   */
+  import type { Snippet } from 'svelte';
+  import { Avatar as AvatarPrimitive } from 'bits-ui';
+  import { cn } from '../utils.js';
+
+  interface Props {
+    /** Additional classes */
+    class?: string;
+    /** Fallback content (typically initials) */
+    children: Snippet;
+    [key: string]: unknown;
+  }
+
+  let { class: className, children, ...restProps }: Props = $props();
+</script>
+
+<AvatarPrimitive.Fallback
+  class={cn(
+    'flex h-full w-full items-center justify-center rounded-full bg-primary/20 text-sm font-medium',
+    className
+  )}
+  {...restProps}
+>
+  {@render children()}
+</AvatarPrimitive.Fallback>

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

@@ -0,0 +1,17 @@
+/**
+   * AvatarFallback - Fallback content when Avatar image is loading or unavailable
+   *
+   * Displays initials or placeholder content when the image cannot be shown.
+   * Should be used inside an Avatar component.
+   */
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Additional classes */
+    class?: string;
+    /** Fallback content (typically initials) */
+    children: Snippet;
+    [key: string]: unknown;
+}
+declare const AvatarFallback: import("svelte").Component<Props, {}, "">;
+type AvatarFallback = ReturnType<typeof AvatarFallback>;
+export default AvatarFallback;

package/dist/lib/components/AvatarImage.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  /**
+   * AvatarImage - The image displayed within an Avatar
+   *
+   * Handles image loading states automatically via Bits UI.
+   * Should be used inside an Avatar component.
+   */
+  import { Avatar as AvatarPrimitive } from 'bits-ui';
+  import { cn } from '../utils.js';
+
+  interface Props {
+    /** Image source URL */
+    src: string;
+    /** Alt text for accessibility */
+    alt: string;
+    /** Additional classes */
+    class?: string;
+    [key: string]: unknown;
+  }
+
+  let { src, alt, class: className, ...restProps }: Props = $props();
+</script>
+
+<AvatarPrimitive.Image
+  {src}
+  {alt}
+  class={cn('aspect-square h-full w-full object-cover', className)}
+  {...restProps}
+/>

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

@@ -0,0 +1,12 @@
+interface Props {
+    /** Image source URL */
+    src: string;
+    /** Alt text for accessibility */
+    alt: string;
+    /** Additional classes */
+    class?: string;
+    [key: string]: unknown;
+}
+declare const AvatarImage: import("svelte").Component<Props, {}, "">;
+type AvatarImage = ReturnType<typeof AvatarImage>;
+export default AvatarImage;

package/dist/lib/components/Badge.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../utils.js';
+  import { tv, type VariantProps } from 'tailwind-variants';
+
+  const badgeVariants = tv({
+    base: 'inline-flex items-center justify-center rounded-md border font-medium w-fit whitespace-nowrap shrink-0 gap-1 transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+    variants: {
+      variant: {
+        default: 'border-transparent bg-primary text-primary-foreground',
+        secondary: 'border-transparent bg-secondary text-secondary-foreground',
+        destructive: 'border-transparent bg-destructive text-white',
+        outline: 'text-foreground',
+        success: 'border-transparent bg-green-500 text-white',
+        warning: 'border-transparent bg-yellow-500 text-white',
+        info: 'border-transparent bg-blue-500 text-white',
+      },
+      size: {
+        default: 'px-2 py-0.5 text-xs',
+        sm: 'px-1.5 py-0.5 text-xs',
+        dot: 'h-5 w-5 p-0 text-xs',
+      },
+      clickable: {
+        true: 'cursor-pointer',
+        false: '',
+      },
+    },
+    compoundVariants: [
+      { variant: 'default', clickable: true, class: 'hover:bg-primary/90' },
+      { variant: 'secondary', clickable: true, class: 'hover:bg-secondary/90' },
+      { variant: 'destructive', clickable: true, class: 'hover:bg-destructive/90' },
+      {
+        variant: 'outline',
+        clickable: true,
+        class: 'hover:bg-accent hover:text-accent-foreground',
+      },
+      { variant: 'success', clickable: true, class: 'hover:bg-green-600' },
+      { variant: 'warning', clickable: true, class: 'hover:bg-yellow-600' },
+      { variant: 'info', clickable: true, class: 'hover:bg-blue-600' },
+    ],
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+      clickable: false,
+    },
+  });
+
+  type BadgeVariants = VariantProps<typeof badgeVariants>;
+
+  interface Props {
+    variant?: BadgeVariants['variant'];
+    size?: BadgeVariants['size'];
+    clickable?: boolean;
+    class?: string;
+    children: Snippet;
+    [key: string]: unknown;
+  }
+
+  let {
+    variant = 'default',
+    size = 'default',
+    clickable = false,
+    class: className,
+    children,
+    ...restProps
+  }: Props = $props();
+
+  const classes = $derived(cn(badgeVariants({ variant, size, clickable }), className));
+</script>
+
+<span class={classes} {...restProps}>
+  {@render children()}
+</span>

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

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+declare const Badge: import("svelte").Component<{
+    [key: string]: unknown;
+    variant?: "default" | "secondary" | "destructive" | "outline" | "success" | "warning" | "info" | undefined;
+    size?: "default" | "sm" | "dot" | undefined;
+    clickable?: boolean;
+    class?: string;
+    children: Snippet;
+}, {}, "">;
+type Badge = ReturnType<typeof Badge>;
+export default Badge;

package/dist/lib/components/Button.svelte

@@ -0,0 +1,130 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../utils.js';
+  import { tv, type VariantProps } from 'tailwind-variants';
+
+  const buttonVariants = tv({
+    base: 'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg 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 disabled:pointer-events-none disabled:opacity-50',
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:opacity-90',
+        secondary: 'bg-secondary text-secondary-foreground hover:opacity-90',
+        destructive:
+          'bg-destructive text-destructive-foreground hover:opacity-90 focus-visible:ring-destructive',
+        outline:
+          'border-2 border-primary text-primary bg-transparent hover:bg-primary hover:text-primary-foreground',
+        ghost: 'hover:bg-muted hover:text-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-10 px-4 py-2',
+        sm: 'h-9 rounded-md px-3 text-sm',
+        lg: 'h-11 rounded-md px-8',
+        icon: 'h-10 w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  });
+
+  type ButtonVariants = VariantProps<typeof buttonVariants>;
+
+  interface Props {
+    variant?: ButtonVariants['variant'];
+    size?: ButtonVariants['size'];
+    type?: 'button' | 'submit' | 'reset';
+    href?: string;
+    disabled?: boolean;
+    loading?: boolean;
+    /** Text to show when loading (replaces children) */
+    loadingText?: string;
+    class?: string;
+    onclick?: (e: MouseEvent) => void;
+    children: Snippet;
+    [key: string]: unknown;
+  }
+
+  let {
+    variant = 'default',
+    size = 'default',
+    type = 'button',
+    href,
+    disabled = false,
+    loading = false,
+    loadingText,
+    class: className,
+    onclick,
+    children,
+    ...restProps
+  }: Props = $props();
+
+  const classes = $derived(cn(buttonVariants({ variant, size }), className));
+</script>
+
+{#if href}
+  <a {href} class={classes} {...restProps}>
+    {#if loading}
+      <svg
+        class="h-4 w-4 animate-spin"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        aria-hidden="true"
+      >
+        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"
+        ></circle>
+        <path
+          class="opacity-75"
+          fill="currentColor"
+          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+        ></path>
+      </svg>
+      {#if loadingText}
+        <span>{loadingText}</span>
+        <span class="sr-only">Loading</span>
+      {:else}
+        {@render children()}
+      {/if}
+    {:else}
+      {@render children()}
+    {/if}
+  </a>
+{:else}
+  <button
+    {type}
+    class={classes}
+    disabled={disabled || loading}
+    aria-disabled={disabled || loading || undefined}
+    aria-busy={loading || undefined}
+    {onclick}
+    {...restProps}
+  >
+    {#if loading}
+      <svg
+        class="h-4 w-4 animate-spin"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        aria-hidden="true"
+      >
+        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"
+        ></circle>
+        <path
+          class="opacity-75"
+          fill="currentColor"
+          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+        ></path>
+      </svg>
+      {#if loadingText}
+        <span>{loadingText}</span>
+        <span class="sr-only">Loading</span>
+      {:else}
+        {@render children()}
+      {/if}
+    {:else}
+      {@render children()}
+    {/if}
+  </button>
+{/if}

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

@@ -0,0 +1,17 @@
+import type { Snippet } from 'svelte';
+declare const Button: import("svelte").Component<{
+    [key: string]: unknown;
+    variant?: "default" | "secondary" | "destructive" | "outline" | "ghost" | "link" | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | undefined;
+    type?: "button" | "submit" | "reset";
+    href?: string;
+    disabled?: boolean;
+    loading?: boolean;
+    /** Text to show when loading (replaces children) */
+    loadingText?: string;
+    class?: string;
+    onclick?: (e: MouseEvent) => void;
+    children: Snippet;
+}, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/dist/lib/components/Card.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+  /**
+   * Card - Content container component
+   *
+   * Features:
+   * - Clean border styling with sharp look
+   * - Optional hover shadow effect for interactive cards
+   * - Featured variant with thicker border (border-2)
+   * - Consistent with brand guidelines
+   */
+  import type { Snippet } from 'svelte';
+  import { cn } from '../utils.js';
+
+  interface Props {
+    /** Enable hover shadow effect for interactive cards */
+    interactive?: boolean;
+    /** Card variant - default has 1px border, featured has 2px border */
+    variant?: 'default' | 'featured';
+    /** Border color for featured variant */
+    borderColor?: 'default' | 'primary' | 'muted';
+    /** Additional classes */
+    class?: string;
+    /** Card content */
+    children: Snippet;
+    [key: string]: unknown;
+  }
+
+  let {
+    interactive = false,
+    variant = 'default',
+    borderColor = 'default',
+    class: className,
+    children,
+    ...restProps
+  }: Props = $props();
+
+  const borderColorClasses = {
+    default: 'border-border',
+    primary: 'border-primary',
+    muted: 'border-gray-200',
+  };
+</script>
+
+<div
+  class={cn(
+    'rounded-md bg-card text-card-foreground',
+    // Border thickness based on variant
+    variant === 'featured' ? 'border-2' : 'border',
+    // Border color
+    borderColorClasses[borderColor],
+    // Interactive hover effect
+    interactive && 'hover:shadow-lg transition-shadow duration-200',
+    className
+  )}
+  {...restProps}
+>
+  {@render children()}
+</div>

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

@@ -0,0 +1,26 @@
+/**
+   * Card - Content container component
+   *
+   * Features:
+   * - Clean border styling with sharp look
+   * - Optional hover shadow effect for interactive cards
+   * - Featured variant with thicker border (border-2)
+   * - Consistent with brand guidelines
+   */
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Enable hover shadow effect for interactive cards */
+    interactive?: boolean;
+    /** Card variant - default has 1px border, featured has 2px border */
+    variant?: 'default' | 'featured';
+    /** Border color for featured variant */
+    borderColor?: 'default' | 'primary' | 'muted';
+    /** Additional classes */
+    class?: string;
+    /** Card content */
+    children: Snippet;
+    [key: string]: unknown;
+}
+declare const Card: import("svelte").Component<Props, {}, "">;
+type Card = ReturnType<typeof Card>;
+export default Card;

package/dist/lib/components/CardContent.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('p-6 pt-0', className)} {...restProps}>
+  {@render children()}
+</div>

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

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

package/dist/lib/components/CardDescription.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>
+
+<p class={cn('text-sm text-muted-foreground', className)} {...restProps}>
+  {@render children()}
+</p>

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

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

package/dist/lib/components/CardFooter.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('flex items-center p-6 pt-0', className)} {...restProps}>
+  {@render children()}
+</div>

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

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

package/dist/lib/components/CardHeader.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('flex flex-col space-y-1.5 p-6', className)} {...restProps}>
+  {@render children()}
+</div>

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

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    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/CardTitle.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>
+
+<h3 class={cn('text-2xl font-semibold leading-none tracking-tight', className)} {...restProps}>
+  {@render children()}
+</h3>

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

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

package/dist/lib/components/Checkbox.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+  import { Checkbox as CheckboxPrimitive } from 'bits-ui';
+  import { cn } from '../utils.js';
+
+  interface Props {
+    checked?: boolean;
+    disabled?: boolean;
+    required?: boolean;
+    name?: string;
+    value?: string;
+    id?: string;
+    class?: string;
+    onCheckedChange?: (checked: boolean) => void;
+    [key: string]: unknown;
+  }
+
+  let {
+    checked = $bindable(false),
+    disabled = false,
+    required = false,
+    name,
+    value,
+    id,
+    class: className,
+    onCheckedChange,
+    ...restProps
+  }: Props = $props();
+
+  function handleCheckedChange(newChecked: boolean | 'indeterminate') {
+    if (typeof newChecked === 'boolean') {
+      checked = newChecked;
+      onCheckedChange?.(newChecked);
+    }
+  }
+</script>
+
+<CheckboxPrimitive.Root
+  bind:checked
+  {disabled}
+  {required}
+  {name}
+  {value}
+  {id}
+  onCheckedChange={handleCheckedChange}
+  class={cn(
+    'peer relative h-5 w-5 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground flex items-center justify-center',
+    className
+  )}
+  {...restProps}
+>
+  <!-- Touch target expansion (invisible, extends clickable area to 44x44px) -->
+  <span class="absolute inset-0 -m-3" aria-hidden="true"></span>
+  {#if checked}
+    <svg
+      class="h-5 w-5"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      viewBox="0 0 24 24"
+      aria-hidden="true"
+    >
+      <polyline points="20 6 9 17 4 12" />
+    </svg>
+  {/if}
+</CheckboxPrimitive.Root>

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

@@ -0,0 +1,14 @@
+interface Props {
+    checked?: boolean;
+    disabled?: boolean;
+    required?: boolean;
+    name?: string;
+    value?: string;
+    id?: string;
+    class?: string;
+    onCheckedChange?: (checked: boolean) => void;
+    [key: string]: unknown;
+}
+declare const Checkbox: import("svelte").Component<Props, {}, "checked">;
+type Checkbox = ReturnType<typeof Checkbox>;
+export default Checkbox;