@classic-homes/theme-svelte 0.1.3 → 0.1.5

package/dist/lib/components/layout/sidebar/SidebarSearch.svelte

@@ -0,0 +1,121 @@
+<script lang="ts">
+  /**
+   * SidebarSearch - Search input component for sidebar navigation
+   *
+   * Features debounced input to prevent excessive filtering on large navigation trees
+   */
+  import { cn } from '../../../utils.js';
+
+  interface Props {
+    /** Current search value */
+    value: string;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Whether using light variant */
+    isLight?: boolean;
+    /** Debounce delay in milliseconds (default: 150) */
+    debounceMs?: number;
+    /** Callback when value changes (debounced) */
+    onInput: (value: string) => void;
+    /** Callback when search is cleared */
+    onClear: () => void;
+  }
+
+  let {
+    value,
+    placeholder = 'Search...',
+    isLight = true,
+    debounceMs = 150,
+    onInput,
+    onClear,
+  }: Props = $props();
+
+  // Local input value for immediate feedback
+  let localValue = $state('');
+  let debounceTimer: ReturnType<typeof setTimeout> | null = null;
+
+  // Sync local value when external value changes (including initial value)
+  $effect(() => {
+    localValue = value;
+  });
+
+  function handleInput(newValue: string) {
+    localValue = newValue;
+
+    // Clear any existing timer
+    if (debounceTimer) {
+      clearTimeout(debounceTimer);
+    }
+
+    // Debounce the callback
+    debounceTimer = setTimeout(() => {
+      onInput(newValue);
+      debounceTimer = null;
+    }, debounceMs);
+  }
+
+  function handleClear() {
+    // Clear immediately without debounce
+    if (debounceTimer) {
+      clearTimeout(debounceTimer);
+      debounceTimer = null;
+    }
+    localValue = '';
+    onClear();
+  }
+</script>
+
+<div class="px-3 py-2 border-b border-black">
+  <div class="relative">
+    <!-- Search icon - always rendered, no conditional blocks to avoid transition issues -->
+    <svg
+      class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none"
+      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
+      type="search"
+      data-sidebar-search
+      value={localValue}
+      {placeholder}
+      class={cn(
+        'w-full pl-9 pr-8 py-1.5 text-sm rounded-md border transition-colors',
+        'focus:outline-none focus:ring-2 focus:ring-primary/50',
+        '[&::-webkit-search-cancel-button]:hidden [&::-webkit-search-decoration]:hidden',
+        isLight
+          ? 'bg-background border-border text-foreground placeholder:text-muted-foreground'
+          : 'bg-sidebar-accent/50 border-sidebar-foreground/20 text-sidebar-foreground placeholder:text-sidebar-foreground/50'
+      )}
+      oninput={(e) => handleInput(e.currentTarget.value)}
+    />
+    {#if localValue}
+      <button
+        type="button"
+        class={cn(
+          'absolute right-2 top-1/2 -translate-y-1/2 p-1 rounded',
+          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1',
+          isLight ? 'hover:bg-accent' : 'hover:bg-sidebar-accent'
+        )}
+        onclick={handleClear}
+        aria-label="Clear search"
+      >
+        <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M6 18L18 6M6 6l12 12"
+          />
+        </svg>
+      </button>
+    {/if}
+  </div>
+</div>

package/dist/lib/components/layout/sidebar/SidebarSearch.svelte.d.ts

@@ -0,0 +1,17 @@
+interface Props {
+    /** Current search value */
+    value: string;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Whether using light variant */
+    isLight?: boolean;
+    /** Debounce delay in milliseconds (default: 150) */
+    debounceMs?: number;
+    /** Callback when value changes (debounced) */
+    onInput: (value: string) => void;
+    /** Callback when search is cleared */
+    onClear: () => void;
+}
+declare const SidebarSearch: import("svelte").Component<Props, {}, "">;
+type SidebarSearch = ReturnType<typeof SidebarSearch>;
+export default SidebarSearch;

package/dist/lib/components/layout/sidebar/SidebarSection.svelte

@@ -0,0 +1,144 @@
+<script lang="ts">
+  /**
+   * SidebarSection - Navigation section component with optional collapsible header
+   *
+   * Features animated collapse/expand transitions
+   */
+  import { slide } from 'svelte/transition';
+  import type { Snippet } from 'svelte';
+  import type { NavSection, NavItem } from '../../../types/layout.js';
+  import { cn } from '../../../utils.js';
+  import { sidebarStore } from '../../../stores/sidebar.svelte.js';
+  import SidebarNavItem from './SidebarNavItem.svelte';
+
+  interface Props {
+    /** The navigation section to render */
+    section: NavSection;
+    /** Whether using light variant */
+    isLight?: boolean;
+    /** Whether sidebar is collapsed */
+    collapsed?: boolean;
+    /** Whether currently on mobile */
+    isMobile?: boolean;
+    /** Custom icon renderer for nav items */
+    icon?: Snippet<[NavItem]>;
+    /** Search query for text highlighting */
+    searchQuery?: string;
+    /** Callback when a navigation item is clicked */
+    onNavigate?: (item: NavItem) => void;
+    /** Callback when mouse enters an item (for flyout) */
+    onItemMouseEnter?: (item: NavItem, event: MouseEvent) => void;
+    /** Callback when mouse leaves an item (for flyout) */
+    onItemMouseLeave?: () => void;
+  }
+
+  let {
+    section,
+    isLight = true,
+    collapsed = false,
+    isMobile = false,
+    icon,
+    searchQuery = '',
+    onNavigate,
+    onItemMouseEnter,
+    onItemMouseLeave,
+  }: Props = $props();
+
+  const isExpanded = $derived(sidebarStore.isSectionExpanded(section.id));
+
+  function toggleSection() {
+    sidebarStore.toggleSection(section.id);
+  }
+</script>
+
+<div class="mb-4">
+  {#if section.title}
+    {#if section.collapsible && !collapsed && !isMobile}
+      <!-- Collapsible section header -->
+      <button
+        onclick={toggleSection}
+        class={cn(
+          'flex w-full items-center justify-between mb-2 px-4 text-xs font-semibold uppercase tracking-wider transition-colors rounded-md',
+          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1',
+          isLight
+            ? 'text-muted-foreground hover:text-foreground'
+            : 'text-sidebar-foreground/60 hover:text-sidebar-foreground'
+        )}
+        aria-expanded={isExpanded}
+        aria-controls={`sidebar-section-${section.id}`}
+      >
+        <span class="whitespace-nowrap">{section.title}</span>
+        <svg
+          class={cn(
+            'h-4 w-4 transition-transform duration-200',
+            isExpanded ? 'rotate-0' : '-rotate-90'
+          )}
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M19 9l-7 7-7-7"
+          />
+        </svg>
+      </button>
+    {:else if !collapsed}
+      <!-- Non-collapsible section header -->
+      <h2
+        class={cn(
+          'mb-2 px-4 text-xs font-semibold uppercase tracking-wider',
+          isLight ? 'text-muted-foreground' : 'text-sidebar-foreground/60'
+        )}
+      >
+        {section.title}
+      </h2>
+    {/if}
+  {/if}
+
+  {#if !section.collapsible || collapsed || isMobile}
+    <!-- Non-collapsible or mobile/collapsed: show without animation -->
+    <ul class="space-y-1 px-2" id={`sidebar-section-${section.id}`}>
+      {#each section.items as item}
+        <li>
+          <SidebarNavItem
+            {item}
+            {isLight}
+            {collapsed}
+            {isMobile}
+            {icon}
+            {searchQuery}
+            {onNavigate}
+            onMouseEnter={onItemMouseEnter}
+            onMouseLeave={onItemMouseLeave}
+          />
+        </li>
+      {/each}
+    </ul>
+  {:else if isExpanded}
+    <!-- Collapsible and expanded: animate -->
+    <ul
+      class="space-y-1 px-2 motion-reduce:transition-none overflow-hidden"
+      id={`sidebar-section-${section.id}`}
+      transition:slide={{ duration: 200 }}
+    >
+      {#each section.items as item}
+        <li>
+          <SidebarNavItem
+            {item}
+            {isLight}
+            {collapsed}
+            {isMobile}
+            {icon}
+            {searchQuery}
+            {onNavigate}
+            onMouseEnter={onItemMouseEnter}
+            onMouseLeave={onItemMouseLeave}
+          />
+        </li>
+      {/each}
+    </ul>
+  {/if}
+</div>

package/dist/lib/components/layout/sidebar/SidebarSection.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { Snippet } from 'svelte';
+import type { NavSection, NavItem } from '../../../types/layout.js';
+interface Props {
+    /** The navigation section to render */
+    section: NavSection;
+    /** Whether using light variant */
+    isLight?: boolean;
+    /** Whether sidebar is collapsed */
+    collapsed?: boolean;
+    /** Whether currently on mobile */
+    isMobile?: boolean;
+    /** Custom icon renderer for nav items */
+    icon?: Snippet<[NavItem]>;
+    /** Search query for text highlighting */
+    searchQuery?: string;
+    /** Callback when a navigation item is clicked */
+    onNavigate?: (item: NavItem) => void;
+    /** Callback when mouse enters an item (for flyout) */
+    onItemMouseEnter?: (item: NavItem, event: MouseEvent) => void;
+    /** Callback when mouse leaves an item (for flyout) */
+    onItemMouseLeave?: () => void;
+}
+declare const SidebarSection: import("svelte").Component<Props, {}, "">;
+type SidebarSection = ReturnType<typeof SidebarSection>;
+export default SidebarSection;

package/dist/lib/components/layout/sidebar/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Sidebar subcomponents
+ *
+ * These are internal components used by the main Sidebar component.
+ * They can be used independently for custom sidebar implementations.
+ */
+export { default as SidebarSearch } from './SidebarSearch.svelte';
+export { default as SidebarNavItem } from './SidebarNavItem.svelte';
+export { default as SidebarSection } from './SidebarSection.svelte';
+export { default as SidebarFlyout } from './SidebarFlyout.svelte';

package/dist/lib/components/layout/sidebar/index.js

@@ -0,0 +1,10 @@
+/**
+ * Sidebar subcomponents
+ *
+ * These are internal components used by the main Sidebar component.
+ * They can be used independently for custom sidebar implementations.
+ */
+export { default as SidebarSearch } from './SidebarSearch.svelte';
+export { default as SidebarNavItem } from './SidebarNavItem.svelte';
+export { default as SidebarSection } from './SidebarSection.svelte';
+export { default as SidebarFlyout } from './SidebarFlyout.svelte';

package/dist/lib/index.d.ts

@@ -34,10 +34,18 @@ export { default as DropdownMenu } from './components/DropdownMenu.svelte';
 export { default as Select } from './components/Select.svelte';
 export { default as FormField } from './components/FormField.svelte';
 export { default as FileUpload } from './components/FileUpload.svelte';
+export { default as RadioGroup } from './components/RadioGroup.svelte';
+export { default as Slider } from './components/Slider.svelte';
+export { default as NumberInput } from './components/NumberInput.svelte';
+export { default as Combobox } from './components/Combobox.svelte';
+export { default as MultiSelect } from './components/MultiSelect.svelte';
+export { default as DateTimePicker } from './components/DateTimePicker.svelte';
+export { default as OTPInput } from './components/OTPInput.svelte';
+export { default as Signature } from './components/Signature.svelte';
 export { default as DataTable } from './components/DataTable.svelte';
 export { default as Tabs } from './components/Tabs.svelte';
 export { default as TabPanel } from './components/TabPanel.svelte';
-export type { DropdownMenuItem, DropdownMenuGroup, SelectOption, SelectGroup, Tab, FileMetadata, DataTableColumn, } from './types/components.js';
+export type { DropdownMenuItem, DropdownMenuGroup, SelectOption, SelectGroup, Tab, FileMetadata, DataTableColumn, RadioOption, ComboboxOption, MultiSelectOption, SignatureData, SignatureStroke, SignaturePoint, SignatureMetadata, SignatureFont, SignatureValidationResult, } from './types/components.js';
 export { default as LogoMain } from './components/LogoMain.svelte';
 export { default as LoadingLogo } from './components/LoadingLogo.svelte';
 export { default as Avatar } from './components/Avatar.svelte';

package/dist/lib/index.js

@@ -41,6 +41,14 @@ export { default as DropdownMenu } from './components/DropdownMenu.svelte';
 export { default as Select } from './components/Select.svelte';
 export { default as FormField } from './components/FormField.svelte';
 export { default as FileUpload } from './components/FileUpload.svelte';
+export { default as RadioGroup } from './components/RadioGroup.svelte';
+export { default as Slider } from './components/Slider.svelte';
+export { default as NumberInput } from './components/NumberInput.svelte';
+export { default as Combobox } from './components/Combobox.svelte';
+export { default as MultiSelect } from './components/MultiSelect.svelte';
+export { default as DateTimePicker } from './components/DateTimePicker.svelte';
+export { default as OTPInput } from './components/OTPInput.svelte';
+export { default as Signature } from './components/Signature.svelte';
 // Data Display
 export { default as DataTable } from './components/DataTable.svelte';
 // Tabs

package/dist/lib/schemas/auth.d.ts

@@ -261,9 +261,9 @@ export declare const userSchema: z.ZodObject<{
     id: string;
     email: string;
     username?: string | undefined;
+    roles?: string[] | undefined;
     fullName?: string | undefined;
     avatarUrl?: string | null | undefined;
-    roles?: string[] | undefined;
     permissions?: string[] | undefined;
     mfaEnabled?: boolean | undefined;
     emailVerified?: boolean | undefined;
@@ -273,9 +273,9 @@ export declare const userSchema: z.ZodObject<{
     id: string;
     email: string;
     username?: string | undefined;
+    roles?: string[] | undefined;
     fullName?: string | undefined;
     avatarUrl?: string | null | undefined;
-    roles?: string[] | undefined;
     permissions?: string[] | undefined;
     mfaEnabled?: boolean | undefined;
     emailVerified?: boolean | undefined;
@@ -323,9 +323,9 @@ export declare const loginResponseSchema: z.ZodObject<{
         id: string;
         email: string;
         username?: string | undefined;
+        roles?: string[] | undefined;
         fullName?: string | undefined;
         avatarUrl?: string | null | undefined;
-        roles?: string[] | undefined;
         permissions?: string[] | undefined;
         mfaEnabled?: boolean | undefined;
         emailVerified?: boolean | undefined;
@@ -335,9 +335,9 @@ export declare const loginResponseSchema: z.ZodObject<{
         id: string;
         email: string;
         username?: string | undefined;
+        roles?: string[] | undefined;
         fullName?: string | undefined;
         avatarUrl?: string | null | undefined;
-        roles?: string[] | undefined;
         permissions?: string[] | undefined;
         mfaEnabled?: boolean | undefined;
         emailVerified?: boolean | undefined;
@@ -367,9 +367,9 @@ export declare const loginResponseSchema: z.ZodObject<{
         id: string;
         email: string;
         username?: string | undefined;
+        roles?: string[] | undefined;
         fullName?: string | undefined;
         avatarUrl?: string | null | undefined;
-        roles?: string[] | undefined;
         permissions?: string[] | undefined;
         mfaEnabled?: boolean | undefined;
         emailVerified?: boolean | undefined;
@@ -389,9 +389,9 @@ export declare const loginResponseSchema: z.ZodObject<{
         id: string;
         email: string;
         username?: string | undefined;
+        roles?: string[] | undefined;
         fullName?: string | undefined;
         avatarUrl?: string | null | undefined;
-        roles?: string[] | undefined;
         permissions?: string[] | undefined;
         mfaEnabled?: boolean | undefined;
         emailVerified?: boolean | undefined;

package/dist/lib/stores/sidebar.svelte.d.ts

@@ -2,8 +2,28 @@
  * Sidebar Store - Svelte 5 runes-based state management for sidebar
  */
 declare class SidebarStore {
+    #private;
     isOpen: boolean;
     isMobile: boolean;
+    expandedSections: Set<string>;
+    expandedItems: Set<string>;
+    /**
+     * Whether the store has been initialized
+     */
+    get initialized(): boolean;
+    /**
+     * Whether the sidebar open state was loaded from localStorage
+     */
+    get hasPersistedState(): boolean;
+    /**
+     * Whether expansion state was loaded from localStorage
+     */
+    get hasPersistedExpansionState(): boolean;
+    /**
+     * Initialize store with persisted state.
+     * Call this from a component's $effect to load saved state.
+     */
+    initialize(): void;
     /**
      * Toggle the sidebar open/closed state
      */
@@ -20,6 +40,40 @@ declare class SidebarStore {
      * Set mobile mode
      */
     setMobile(isMobile: boolean): void;
+    /**
+     * Toggle section expansion state
+     */
+    toggleSection(sectionId: string): void;
+    /**
+     * Toggle item expansion state
+     */
+    toggleItem(itemId: string): void;
+    /**
+     * Check if a section is expanded
+     */
+    isSectionExpanded(sectionId: string): boolean;
+    /**
+     * Check if an item is expanded
+     */
+    isItemExpanded(itemId: string): boolean;
+    /**
+     * Set default expansion for sections (called during initialization)
+     */
+    setDefaultSections(sectionIds: string[]): void;
+    /**
+     * Set default expansion for items (called during initialization)
+     */
+    setDefaultItems(itemIds: string[]): void;
+    /**
+     * Force expand specific items (used during search to show matching children)
+     * This bypasses the persisted state check but doesn't persist the changes
+     */
+    forceExpandItems(itemIds: string[]): void;
+    /**
+     * Force expand specific sections (used during search)
+     * This bypasses the persisted state check but doesn't persist the changes
+     */
+    forceExpandSections(sectionIds: string[]): void;
 }
 export declare const sidebarStore: SidebarStore;
 export {};