@classic-homes/theme-svelte 0.1.0

package/dist/lib/components/PageHeader.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+  /**
+   * PageHeader - Comprehensive hero/page header component
+   *
+   * A flexible page header component for hero sections and page titles.
+   * Supports multiple layout variants and optional action buttons.
+   *
+   * Features:
+   * - Multiple variants: default, hero, centered
+   * - Optional subtitle with branded styling
+   * - Optional actions slot for CTA buttons
+   * - Consistent typography using design tokens
+   */
+  import type { Snippet } from 'svelte';
+  import { cn } from '../utils.js';
+  import { tv, type VariantProps } from 'tailwind-variants';
+
+  const pageHeaderVariants = tv({
+    slots: {
+      container: '',
+      title: 'text-foreground',
+      subtitle: 'text-muted-foreground',
+      actionsWrapper: 'flex gap-4',
+    },
+    variants: {
+      variant: {
+        default: {
+          container: '',
+          title: 'text-3xl font-bold mb-2',
+          subtitle: 'text-lg',
+          actionsWrapper: 'mt-4',
+        },
+        hero: {
+          container: '',
+          title: 'text-5xl font-black uppercase tracking-tight mb-2',
+          subtitle: 'text-lg font-serif italic',
+          actionsWrapper: 'mt-6',
+        },
+        centered: {
+          container: 'text-center',
+          title: 'text-4xl font-bold mb-3',
+          subtitle: 'text-xl max-w-2xl mx-auto',
+          actionsWrapper: 'mt-6 justify-center',
+        },
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  });
+
+  type PageHeaderVariants = VariantProps<typeof pageHeaderVariants>;
+
+  interface Props {
+    /** Main title text */
+    title: string;
+    /** Optional subtitle text */
+    subtitle?: string;
+    /** Visual variant */
+    variant?: PageHeaderVariants['variant'];
+    /** Additional classes for the container */
+    class?: string;
+    /** Optional action buttons/content */
+    actions?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let {
+    title,
+    subtitle,
+    variant = 'default',
+    class: className,
+    actions,
+    ...restProps
+  }: Props = $props();
+
+  const styles = $derived(pageHeaderVariants({ variant }));
+</script>
+
+<header class={cn(styles.container(), className)} {...restProps}>
+  <h1 class={styles.title()}>{title}</h1>
+  {#if subtitle}
+    <p class={styles.subtitle()}>{subtitle}</p>
+  {/if}
+  {#if actions}
+    <div class={styles.actionsWrapper()}>
+      {@render actions()}
+    </div>
+  {/if}
+</header>

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

@@ -0,0 +1,28 @@
+/**
+   * PageHeader - Comprehensive hero/page header component
+   *
+   * A flexible page header component for hero sections and page titles.
+   * Supports multiple layout variants and optional action buttons.
+   *
+   * Features:
+   * - Multiple variants: default, hero, centered
+   * - Optional subtitle with branded styling
+   * - Optional actions slot for CTA buttons
+   * - Consistent typography using design tokens
+   */
+import type { Snippet } from 'svelte';
+declare const PageHeader: import("svelte").Component<{
+    [key: string]: unknown;
+    /** Main title text */
+    title: string;
+    /** Optional subtitle text */
+    subtitle?: string;
+    /** Visual variant */
+    variant?: "default" | "hero" | "centered" | undefined;
+    /** Additional classes for the container */
+    class?: string;
+    /** Optional action buttons/content */
+    actions?: Snippet;
+}, {}, "">;
+type PageHeader = ReturnType<typeof PageHeader>;
+export default PageHeader;

package/dist/lib/components/Section.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  /**
+   * Section - Content section container component
+   *
+   * A full-width content container with optional title and description.
+   * Different from Card in that Sections are meant for page-level content
+   * organization, while Cards are for individual content panels.
+   *
+   * Features:
+   * - Optional title (renders as h2)
+   * - Optional description
+   * - Consistent styling with shadow and border
+   * - Flexible content area via children snippet
+   */
+  import type { Snippet } from 'svelte';
+  import { cn } from '../utils.js';
+
+  interface Props {
+    /** Section title (rendered as h2) */
+    title?: string;
+    /** Optional description text below the title */
+    description?: string;
+    /** Additional classes for the section container */
+    class?: string;
+    /** Section content */
+    children: Snippet;
+    [key: string]: unknown;
+  }
+
+  let { title, description, class: className, children, ...restProps }: Props = $props();
+</script>
+
+<section
+  class={cn('bg-card rounded-lg shadow-md p-6 border border-border', className)}
+  {...restProps}
+>
+  {#if title}
+    <h2 class="text-2xl font-bold text-card-foreground mb-4">{title}</h2>
+  {/if}
+  {#if description}
+    <p class="text-sm text-muted-foreground mb-4">{description}</p>
+  {/if}
+  {@render children()}
+</section>

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

@@ -0,0 +1,28 @@
+/**
+   * Section - Content section container component
+   *
+   * A full-width content container with optional title and description.
+   * Different from Card in that Sections are meant for page-level content
+   * organization, while Cards are for individual content panels.
+   *
+   * Features:
+   * - Optional title (renders as h2)
+   * - Optional description
+   * - Consistent styling with shadow and border
+   * - Flexible content area via children snippet
+   */
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Section title (rendered as h2) */
+    title?: string;
+    /** Optional description text below the title */
+    description?: string;
+    /** Additional classes for the section container */
+    class?: string;
+    /** Section content */
+    children: Snippet;
+    [key: string]: unknown;
+}
+declare const Section: import("svelte").Component<Props, {}, "">;
+type Section = ReturnType<typeof Section>;
+export default Section;

package/dist/lib/components/Select.svelte

@@ -0,0 +1,174 @@
+<script lang="ts">
+  import { Select as SelectPrimitive } from 'bits-ui';
+  import { cn } from '../utils.js';
+  import { validateNonEmptyArray } from '../validation.js';
+
+  export interface SelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+  }
+
+  export interface SelectGroup {
+    label: string;
+    options: SelectOption[];
+  }
+
+  interface Props {
+    /** Current value */
+    value?: string;
+    /** Callback when value changes */
+    onValueChange?: (value: string) => void;
+    /** Placeholder text when no value selected */
+    placeholder?: string;
+    /** Array of options or grouped options */
+    options: (SelectOption | SelectGroup)[];
+    /** Whether the select is disabled */
+    disabled?: boolean;
+    /** Name attribute for form submission */
+    name?: string;
+    /** Whether this field is required */
+    required?: boolean;
+    /** Additional class for the trigger */
+    class?: string;
+    /** Optional label */
+    label?: string;
+  }
+
+  let {
+    value = $bindable(''),
+    onValueChange,
+    placeholder = 'Select an option...',
+    options,
+    disabled = false,
+    name,
+    required = false,
+    class: className,
+    label,
+  }: Props = $props();
+
+  // Validate props in development
+  $effect(() => {
+    validateNonEmptyArray(options, 'options', 'Select');
+  });
+
+  function isGroup(item: SelectOption | SelectGroup): item is SelectGroup {
+    return 'options' in item;
+  }
+
+  // Find the label for the current value
+  const selectedLabel = $derived.by(() => {
+    for (const item of options) {
+      if (isGroup(item)) {
+        const found = item.options.find((opt) => opt.value === value);
+        if (found) return found.label;
+      } else if (item.value === value) {
+        return item.label;
+      }
+    }
+    return undefined;
+  });
+
+  // Build items array for typeahead support
+  const flatItems = $derived.by(() => {
+    const items: { value: string; label: string; disabled?: boolean }[] = [];
+    for (const item of options) {
+      if (isGroup(item)) {
+        for (const opt of item.options) {
+          items.push(opt);
+        }
+      } else {
+        items.push(item);
+      }
+    }
+    return items;
+  });
+
+  function handleValueChange(newValue: string) {
+    value = newValue;
+    onValueChange?.(newValue);
+  }
+</script>
+
+{#if label}
+  <span
+    class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 mb-1.5 block"
+  >
+    {label}
+    {#if required}
+      <span class="text-destructive">*</span>
+    {/if}
+  </span>
+{/if}
+
+<SelectPrimitive.Root
+  type="single"
+  {name}
+  {disabled}
+  {required}
+  {value}
+  items={flatItems}
+  onValueChange={handleValueChange}
+>
+  <SelectPrimitive.Trigger
+    class={cn(
+      'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+      className
+    )}
+    aria-label={label || placeholder}
+  >
+    <span class={value ? '' : 'text-muted-foreground'}>
+      {selectedLabel || placeholder}
+    </span>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class="h-4 w-4 opacity-50"
+    >
+      <path d="m6 9 6 6 6-6" />
+    </svg>
+  </SelectPrimitive.Trigger>
+
+  <SelectPrimitive.Content
+    class="relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md 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-[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"
+    sideOffset={4}
+  >
+    <div class="p-1">
+      {#each options as item}
+        {#if isGroup(item)}
+          <SelectPrimitive.Group>
+            <div class="py-1.5 pl-8 pr-2 text-sm font-semibold">
+              {item.label}
+            </div>
+            {#each item.options as option}
+              <SelectPrimitive.Item
+                value={option.value}
+                label={option.label}
+                disabled={option.disabled}
+                class="relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
+              >
+                {option.label}
+              </SelectPrimitive.Item>
+            {/each}
+          </SelectPrimitive.Group>
+        {:else}
+          <SelectPrimitive.Item
+            value={item.value}
+            label={item.label}
+            disabled={item.disabled}
+            class="relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
+          >
+            {item.label}
+          </SelectPrimitive.Item>
+        {/if}
+      {/each}
+    </div>
+  </SelectPrimitive.Content>
+</SelectPrimitive.Root>

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

@@ -0,0 +1,32 @@
+export interface SelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+export interface SelectGroup {
+    label: string;
+    options: SelectOption[];
+}
+interface Props {
+    /** Current value */
+    value?: string;
+    /** Callback when value changes */
+    onValueChange?: (value: string) => void;
+    /** Placeholder text when no value selected */
+    placeholder?: string;
+    /** Array of options or grouped options */
+    options: (SelectOption | SelectGroup)[];
+    /** Whether the select is disabled */
+    disabled?: boolean;
+    /** Name attribute for form submission */
+    name?: string;
+    /** Whether this field is required */
+    required?: boolean;
+    /** Additional class for the trigger */
+    class?: string;
+    /** Optional label */
+    label?: string;
+}
+declare const Select: import("svelte").Component<Props, {}, "value">;
+type Select = ReturnType<typeof Select>;
+export default Select;

package/dist/lib/components/Separator.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { Separator as SeparatorPrimitive } from 'bits-ui';
+  import { cn } from '../utils.js';
+
+  interface Props {
+    orientation?: 'horizontal' | 'vertical';
+    decorative?: boolean;
+    class?: string;
+    [key: string]: unknown;
+  }
+
+  let {
+    orientation = 'horizontal',
+    decorative = true,
+    class: className,
+    ...restProps
+  }: Props = $props();
+</script>
+
+<SeparatorPrimitive.Root
+  {orientation}
+  {decorative}
+  class={cn(
+    'shrink-0 bg-black',
+    orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
+    className
+  )}
+  {...restProps}
+/>

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

@@ -0,0 +1,9 @@
+interface Props {
+    orientation?: 'horizontal' | 'vertical';
+    decorative?: boolean;
+    class?: string;
+    [key: string]: unknown;
+}
+declare const Separator: import("svelte").Component<Props, {}, "">;
+type Separator = ReturnType<typeof Separator>;
+export default Separator;

package/dist/lib/components/Skeleton.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import { cn } from '../utils.js';
+  import { tv, type VariantProps } from 'tailwind-variants';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  const skeletonVariants = tv({
+    base: 'animate-pulse rounded-md bg-muted',
+    variants: {
+      variant: {
+        default: '',
+        text: 'h-4 w-full',
+        avatar: 'h-12 w-12 rounded-full',
+        card: 'h-32 w-full',
+        button: 'h-10 w-24',
+        title: 'h-6 w-3/4',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  });
+
+  type SkeletonVariants = VariantProps<typeof skeletonVariants>;
+
+  interface Props extends HTMLAttributes<HTMLDivElement> {
+    variant?: SkeletonVariants['variant'];
+    class?: string;
+  }
+
+  let { variant = 'default', class: className, ...restProps }: Props = $props();
+
+  const classes = $derived(cn(skeletonVariants({ variant }), className));
+</script>
+
+<div class={classes} {...restProps}></div>

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

@@ -0,0 +1,7 @@
+import type { HTMLAttributes } from 'svelte/elements';
+declare const Skeleton: import("svelte").Component<HTMLAttributes<HTMLDivElement> & {
+    variant?: "default" | "button" | "text" | "title" | "avatar" | "card" | undefined;
+    class?: string;
+}, {}, "">;
+type Skeleton = ReturnType<typeof Skeleton>;
+export default Skeleton;

package/dist/lib/components/Spinner.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+  import { cn } from '../utils.js';
+  import { tv, type VariantProps } from 'tailwind-variants';
+
+  const spinnerVariants = tv({
+    base: 'animate-spin text-current',
+    variants: {
+      size: {
+        sm: 'h-4 w-4',
+        md: 'h-6 w-6',
+        lg: 'h-8 w-8',
+        xl: 'h-12 w-12',
+      },
+    },
+    defaultVariants: {
+      size: 'md',
+    },
+  });
+
+  type SpinnerVariants = VariantProps<typeof spinnerVariants>;
+
+  interface Props {
+    size?: SpinnerVariants['size'];
+    class?: string;
+    label?: string;
+    [key: string]: unknown;
+  }
+
+  let { size = 'md', class: className, label = 'Loading...', ...restProps }: Props = $props();
+
+  const classes = $derived(cn(spinnerVariants({ size }), className));
+</script>
+
+<svg
+  class={classes}
+  xmlns="http://www.w3.org/2000/svg"
+  fill="none"
+  viewBox="0 0 24 24"
+  aria-label={label}
+  role="status"
+  {...restProps}
+>
+  <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>
+  <title>{label}</title>
+</svg>

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

@@ -0,0 +1,8 @@
+declare const Spinner: import("svelte").Component<{
+    [key: string]: unknown;
+    size?: "sm" | "md" | "lg" | "xl" | undefined;
+    class?: string;
+    label?: string;
+}, {}, "">;
+type Spinner = ReturnType<typeof Spinner>;
+export default Spinner;

package/dist/lib/components/Switch.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+  import { Switch as SwitchPrimitive } from 'bits-ui';
+  import { cn } from '../utils.js';
+
+  interface Props {
+    checked?: boolean;
+    disabled?: boolean;
+    required?: boolean;
+    name?: string;
+    value?: string;
+    id?: string;
+    class?: string;
+    onchange?: (checked: boolean) => void;
+    [key: string]: unknown;
+  }
+
+  let {
+    checked = $bindable(false),
+    disabled = false,
+    required = false,
+    name,
+    value,
+    id,
+    class: className,
+    onchange,
+    ...restProps
+  }: Props = $props();
+
+  function handleCheckedChange(newChecked: boolean) {
+    checked = newChecked;
+    onchange?.(newChecked);
+  }
+</script>
+
+<SwitchPrimitive.Root
+  bind:checked
+  {disabled}
+  {required}
+  {name}
+  {value}
+  {id}
+  onCheckedChange={handleCheckedChange}
+  class={cn(
+    'peer relative inline-flex h-7 w-12 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
+    className
+  )}
+  {...restProps}
+>
+  <!-- Touch target expansion (invisible, extends clickable area) -->
+  <span class="absolute inset-0 -m-2" aria-hidden="true"></span>
+  <SwitchPrimitive.Thumb
+    class={cn(
+      'pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-[22px] data-[state=unchecked]:translate-x-0.5'
+    )}
+  />
+</SwitchPrimitive.Root>

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

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

package/dist/lib/components/TabPanel.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { getContext } from 'svelte';
+  import { cn } from '../utils.js';
+
+  interface TabsContext {
+    activeTab: string;
+    tabsId: string;
+  }
+
+  interface Props {
+    /** Tab ID this panel belongs to */
+    value: string;
+    /** Additional classes */
+    class?: string;
+    /** Panel content */
+    children?: Snippet;
+  }
+
+  let { value, class: className, children }: Props = $props();
+
+  // Get context from parent Tabs
+  const context = getContext<TabsContext>('tabs');
+  const isActive = $derived(context?.activeTab === value);
+  const panelId = $derived(context ? `${context.tabsId}-panel-${value}` : `panel-${value}`);
+  const tabId = $derived(context ? `${context.tabsId}-tab-${value}` : `tab-${value}`);
+</script>
+
+{#if isActive}
+  <div
+    id={panelId}
+    role="tabpanel"
+    aria-labelledby={tabId}
+    tabindex="0"
+    class={cn(
+      'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+      className
+    )}
+  >
+    {#if children}
+      {@render children()}
+    {/if}
+  </div>
+{/if}

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

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Tab ID this panel belongs to */
+    value: string;
+    /** Additional classes */
+    class?: string;
+    /** Panel content */
+    children?: Snippet;
+}
+declare const TabPanel: import("svelte").Component<Props, {}, "">;
+type TabPanel = ReturnType<typeof TabPanel>;
+export default TabPanel;