@mrintel/villain-ui 0.2.2 → 0.6.3

package/dist/components/navigation/ContextMenu.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+interface MenuItem {
+    id: string;
+    label: string;
+    onclick?: () => void;
+    disabled?: boolean;
+    icon?: Snippet;
+}
+interface Props {
+    items: MenuItem[];
+    open?: boolean;
+    x?: number;
+    y?: number;
+    trigger?: Snippet;
+}
+declare const ContextMenu: import("svelte").Component<Props, {}, "open" | "x" | "y">;
+type ContextMenu = ReturnType<typeof ContextMenu>;
+export default ContextMenu;

package/dist/components/navigation/DropdownMenu.svelte

@@ -0,0 +1,139 @@
+<script lang="ts">import { createId } from '../../lib/internal/id.js';
+let { items, open = $bindable(false), placement = 'bottom-start', trigger } = $props();
+let menuElement = $state();
+let wrapperElement;
+let selectedIndex = $state(0);
+const menuId = createId('dropdown-menu');
+const placementClasses = {
+    'bottom-start': 'top-full left-0 mt-2',
+    'bottom-end': 'top-full right-0 mt-2',
+    'top-start': 'bottom-full left-0 mb-2',
+    'top-end': 'bottom-full right-0 mb-2'
+};
+function toggleMenu() {
+    open = !open;
+    if (open) {
+        selectedIndex = 0;
+    }
+}
+function handleItemClick(item) {
+    if (item.disabled)
+        return;
+    item.onclick?.();
+    open = false;
+}
+function handleMenuKeyDown(event) {
+    // Derive current index from focused element to stay in sync
+    const focusedElement = document.activeElement;
+    const dataIndex = focusedElement?.getAttribute('data-index');
+    if (dataIndex !== null) {
+        const currentFocusedIndex = parseInt(dataIndex || '0', 10);
+        if (!isNaN(currentFocusedIndex) && currentFocusedIndex >= 0 && currentFocusedIndex < items.length) {
+            selectedIndex = currentFocusedIndex;
+        }
+    }
+    const enabledItems = items.filter(item => !item.disabled);
+    const currentEnabledIndex = enabledItems.findIndex(item => item.id === items[selectedIndex]?.id);
+    let nextIndex = currentEnabledIndex;
+    switch (event.key) {
+        case 'ArrowDown':
+            event.preventDefault();
+            nextIndex = currentEnabledIndex < enabledItems.length - 1 ? currentEnabledIndex + 1 : 0;
+            selectedIndex = items.findIndex(item => item.id === enabledItems[nextIndex]?.id);
+            break;
+        case 'ArrowUp':
+            event.preventDefault();
+            nextIndex = currentEnabledIndex > 0 ? currentEnabledIndex - 1 : enabledItems.length - 1;
+            selectedIndex = items.findIndex(item => item.id === enabledItems[nextIndex]?.id);
+            break;
+        case 'Home':
+            event.preventDefault();
+            selectedIndex = items.findIndex(item => item.id === enabledItems[0]?.id);
+            break;
+        case 'End':
+            event.preventDefault();
+            selectedIndex = items.findIndex(item => item.id === enabledItems[enabledItems.length - 1]?.id);
+            break;
+        case 'Enter':
+        case ' ':
+            event.preventDefault();
+            if (items[selectedIndex] && !items[selectedIndex].disabled) {
+                handleItemClick(items[selectedIndex]);
+            }
+            break;
+        case 'Escape':
+            event.preventDefault();
+            open = false;
+            break;
+    }
+}
+function handleClickOutside(event) {
+    if (menuElement && !wrapperElement.contains(event.target)) {
+        open = false;
+    }
+}
+$effect(() => {
+    if (open) {
+        document.addEventListener('click', handleClickOutside);
+        requestAnimationFrame(() => {
+            const firstItem = menuElement?.querySelector('[role="menuitem"]');
+            if (firstItem) {
+                const dataIndex = firstItem.getAttribute('data-index');
+                if (dataIndex !== null) {
+                    selectedIndex = parseInt(dataIndex, 10);
+                }
+                firstItem.focus();
+            }
+        });
+        return () => {
+            document.removeEventListener('click', handleClickOutside);
+        };
+    }
+});
+</script>
+
+<div bind:this={wrapperElement} class="relative">
+  <button
+    type="button"
+    onclick={toggleMenu}
+    onkeydown={(e) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        toggleMenu();
+      }
+    }}
+    aria-haspopup="menu"
+    aria-expanded={open}
+    aria-controls={menuId}
+    class="bg-transparent border-none p-0 cursor-pointer"
+  >
+    {@render trigger?.()}
+  </button>
+
+  {#if open}
+    <div
+      bind:this={menuElement}
+      id={menuId}
+      role="menu"
+      tabindex="-1"
+      onkeydown={handleMenuKeyDown}
+      class="absolute {placementClasses[placement]} z-[var(--z-50)] glass-panel rounded-[var(--radius-lg)] shadow-[var(--shadow-deep)] min-w-[12rem] animate-[fade-up_0.2s_var(--ease-luxe)]"
+    >
+      {#each items as item, index}
+        <button
+          role="menuitem"
+          data-index={index}
+          tabindex={index === selectedIndex ? 0 : -1}
+          onclick={() => handleItemClick(item)}
+          disabled={item.disabled}
+          class="w-full text-left px-4 py-2 text-sm text-text hover:bg-base-3 transition-colors duration-200 flex items-center gap-2 {item.disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}"
+        >
+          {#if item.icon}
+            {@render item.icon()}
+          {/if}
+          {item.label}
+        </button>
+      {/each}
+    </div>
+  {/if}
+</div>

package/dist/components/navigation/DropdownMenu.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { Snippet } from 'svelte';
+interface MenuItem {
+    id: string;
+    label: string;
+    onclick?: () => void;
+    disabled?: boolean;
+    icon?: Snippet;
+}
+interface Props {
+    items: MenuItem[];
+    open?: boolean;
+    placement?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
+    trigger?: Snippet;
+}
+declare const DropdownMenu: import("svelte").Component<Props, {}, "open">;
+type DropdownMenu = ReturnType<typeof DropdownMenu>;
+export default DropdownMenu;

package/dist/components/navigation/Menu.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">let { items, children } = $props();
+let selectedIndex = $state(0);
+let menuContainer;
+function handleItemClick(item) {
+    if (!item.disabled && item.onclick) {
+        item.onclick();
+    }
+}
+function handleMenuKeyDown(event) {
+    if (!items)
+        return;
+    const enabledItems = items.filter(item => !item.disabled);
+    const currentEnabledIndex = enabledItems.findIndex(item => item.id === items[selectedIndex]?.id);
+    let nextIndex = currentEnabledIndex;
+    switch (event.key) {
+        case 'ArrowDown':
+            event.preventDefault();
+            nextIndex = currentEnabledIndex < enabledItems.length - 1 ? currentEnabledIndex + 1 : 0;
+            selectedIndex = items.findIndex(item => item.id === enabledItems[nextIndex]?.id);
+            break;
+        case 'ArrowUp':
+            event.preventDefault();
+            nextIndex = currentEnabledIndex > 0 ? currentEnabledIndex - 1 : enabledItems.length - 1;
+            selectedIndex = items.findIndex(item => item.id === enabledItems[nextIndex]?.id);
+            break;
+        case 'Home':
+            event.preventDefault();
+            selectedIndex = items.findIndex(item => item.id === enabledItems[0]?.id);
+            break;
+        case 'End':
+            event.preventDefault();
+            selectedIndex = items.findIndex(item => item.id === enabledItems[enabledItems.length - 1]?.id);
+            break;
+        case 'Enter':
+        case ' ':
+            event.preventDefault();
+            if (items[selectedIndex] && !items[selectedIndex].disabled) {
+                handleItemClick(items[selectedIndex]);
+            }
+            break;
+    }
+}
+$effect(() => {
+    if (items && selectedIndex >= 0 && menuContainer) {
+        const selectedButton = menuContainer.querySelector(`[role="menuitem"][tabindex="0"]`);
+        selectedButton?.focus();
+    }
+});
+export {};
+</script>
+
+<div bind:this={menuContainer} role="menu" tabindex="-1" onkeydown={handleMenuKeyDown} class="glass-panel rounded-[var(--radius-lg)] p-3 shadow-[var(--shadow-deep)]">
+  {#if children}
+    {@render children()}
+  {:else if items}
+    {#each items as item, index}
+      <button
+        role="menuitem"
+        aria-disabled={item.disabled}
+        tabindex={index === selectedIndex ? 0 : -1}
+        onclick={() => handleItemClick(item)}
+        disabled={item.disabled}
+        class="flex items-center gap-2 w-full px-4 py-3 rounded-[var(--radius-md)] text-[var(--color-text)] text-sm font-[var(--font-body)] hover:bg-[var(--color-base-3)] hover-lift transition-all duration-200 ease-[var(--ease-luxe)] {item.disabled ? 'opacity-50 pointer-events-none' : 'cursor-pointer'}"
+      >
+        {#if item.icon}
+          {@render item.icon()}
+        {/if}
+        <span>{item.label}</span>
+      </button>
+    {/each}
+  {/if}
+</div>

package/dist/components/navigation/Menu.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+interface MenuItem {
+    id: string;
+    label: string;
+    icon?: Snippet;
+    disabled?: boolean;
+    onclick?: () => void;
+}
+interface Props {
+    items?: MenuItem[];
+    children?: Snippet;
+}
+declare const Menu: import("svelte").Component<Props, {}, "">;
+type Menu = ReturnType<typeof Menu>;
+export default Menu;

package/dist/components/navigation/Navbar.svelte

@@ -0,0 +1,111 @@
+<script lang="ts">let { position = 'sticky', height = 'md', navigationAlign = 'center', toggleButton, logo, navigation, actions, children, currentPath } = $props();
+const positionClasses = {
+    sticky: 'sticky top-0',
+    fixed: 'fixed top-0 left-0 right-0'
+};
+const heightClasses = {
+    sm: 'h-16',
+    md: 'h-18',
+    lg: 'h-24'
+};
+const baseClasses = 'z-[var(--z-50)] glass-panel flex items-center justify-between px-4 md:px-6 lg:px-8 transition-all duration-300 ease-[var(--ease-luxe)]';
+// Track elements modified by the effect to preserve manual .active classes
+let autoManagedElements = $state(new Set());
+let rootElement = $state(null);
+$effect(() => {
+    if (typeof document === 'undefined')
+        return;
+    if (!rootElement)
+        return;
+    // Clear auto-managed active classes when currentPath becomes falsy
+    if (!currentPath) {
+        autoManagedElements.forEach((element) => {
+            element.classList.remove('active');
+        });
+        autoManagedElements.clear();
+        return;
+    }
+    const elements = rootElement.querySelectorAll('a, button');
+    elements.forEach((element) => {
+        const href = element.getAttribute('href');
+        const dataHref = element.getAttribute('data-href');
+        const targetPath = href || dataHref;
+        // Match exact path or nested routes (e.g., /buttons matches /buttons/icon-button)
+        const isActive = targetPath === currentPath ||
+            (targetPath && currentPath.startsWith(targetPath + '/'));
+        if (isActive) {
+            // Only add to autoManagedElements if we're adding the class ourselves
+            if (!element.classList.contains('active')) {
+                element.classList.add('active');
+                autoManagedElements.add(element);
+            }
+        }
+        else if (autoManagedElements.has(element)) {
+            element.classList.remove('active');
+            autoManagedElements.delete(element);
+        }
+    });
+});
+export {};
+</script>
+
+<nav bind:this={rootElement} data-navbar class="{baseClasses} {positionClasses[position]} {heightClasses[height]}">
+  <!-- Left Section: Toggle Button and Logo -->
+  <div class="flex items-center gap-3">
+    {#if toggleButton}
+      {@render toggleButton()}
+    {/if}
+    {#if logo}
+      {@render logo()}
+    {/if}
+  </div>
+  
+  <!-- Center Section: Navigation Links -->
+  {#if navigation}
+    <div class="flex-1 flex items-center {navigationAlign === 'center' ? 'justify-center' : ''} gap-6 {logo ? 'ml-4' : ''}">
+      {@render navigation()}
+    </div>
+  {:else if children}
+    <div class="flex-1 flex items-center {navigationAlign === 'center' ? 'justify-center' : ''} gap-4 {logo ? 'ml-4' : ''}">
+      {@render children()}
+    </div>
+  {/if}
+  
+  <!-- Right Section: Actions -->
+  {#if actions}
+    <div class="flex items-center gap-3">
+      {@render actions()}
+    </div>
+  {/if}
+</nav>
+
+<style>
+  nav :global(.navbar-logo) {
+    color: var(--color-accent);
+    font-weight: 600;
+    font-size: var(--text-lg);
+  }
+
+  nav :global(a.active),
+  nav :global(button.active) {
+    color: var(--color-accent);
+    font-weight: 600;
+    position: relative;
+  }
+
+  nav :global(a.active::after),
+  nav :global(button.active::after) {
+    content: '';
+    position: absolute;
+    bottom: -0.5rem;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background: var(--color-accent);
+    box-shadow: var(--shadow-accent-glow);
+  }
+
+  nav :global(a:not(.active):hover),
+  nav :global(button:not(.active):hover) {
+    color: var(--color-accent-soft);
+  }</style>

package/dist/components/navigation/Navbar.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    position?: 'sticky' | 'fixed';
+    height?: 'sm' | 'md' | 'lg';
+    navigationAlign?: 'left' | 'center';
+    toggleButton?: Snippet;
+    logo?: Snippet;
+    navigation?: Snippet;
+    actions?: Snippet;
+    children?: Snippet;
+    currentPath?: string;
+}
+declare const Navbar: import("svelte").Component<Props, {}, "">;
+type Navbar = ReturnType<typeof Navbar>;
+export default Navbar;

package/dist/components/navigation/Sidebar.svelte

@@ -0,0 +1,236 @@
+<script lang="ts">let { open = $bindable(true), side = 'left', width = 'md', header, children, currentPath } = $props();
+let navbarHeight = $state(0);
+$effect(() => {
+    if (typeof document === 'undefined')
+        return;
+    const navbarElement = document.querySelector('[data-navbar]');
+    if (navbarElement) {
+        // Initial height
+        navbarHeight = navbarElement.offsetHeight;
+        // Watch for height changes (responsive behavior, window resize, etc.)
+        if (typeof ResizeObserver !== 'undefined') {
+            const resizeObserver = new ResizeObserver(() => {
+                navbarHeight = navbarElement.offsetHeight;
+            });
+            resizeObserver.observe(navbarElement);
+            return () => {
+                resizeObserver.disconnect();
+            };
+        }
+    }
+    else {
+        navbarHeight = 0;
+    }
+});
+// Track elements modified by the effect to preserve manual .active classes
+let autoManagedElements = $state(new Set());
+let rootElement = $state(null);
+$effect(() => {
+    if (typeof document === 'undefined')
+        return;
+    if (!rootElement)
+        return;
+    // Clear auto-managed active classes when currentPath becomes falsy
+    if (!currentPath) {
+        autoManagedElements.forEach((element) => {
+            element.classList.remove('active');
+        });
+        autoManagedElements.clear();
+        return;
+    }
+    const elements = rootElement.querySelectorAll('a, button');
+    elements.forEach((element) => {
+        const href = element.getAttribute('href');
+        const dataHref = element.getAttribute('data-href');
+        const targetPath = href || dataHref;
+        // Match exact path or nested routes (e.g., /buttons matches /buttons/icon-button)
+        const isActive = targetPath === currentPath ||
+            (targetPath && currentPath.startsWith(targetPath + '/'));
+        if (isActive) {
+            // Only add to autoManagedElements if we're adding the class ourselves
+            if (!element.classList.contains('active')) {
+                element.classList.add('active');
+                autoManagedElements.add(element);
+            }
+        }
+        else if (autoManagedElements.has(element)) {
+            element.classList.remove('active');
+            autoManagedElements.delete(element);
+        }
+    });
+});
+// Collapsed state icon/text detection
+$effect(() => {
+    if (typeof document === 'undefined')
+        return;
+    if (!rootElement)
+        return;
+    // Reference open to make effect reactive to collapse/expand state changes
+    // This ensures detection runs when sidebar toggles
+    if (open === undefined)
+        return;
+    const elements = rootElement.querySelectorAll('a, button');
+    elements.forEach((element) => {
+        // Check for icon presence using documented .sidebar-item-icon class
+        const hasIcon = element.querySelector('.sidebar-item-icon');
+        if (hasIcon) {
+            element.setAttribute('data-sidebar-has-icon', 'true');
+            element.removeAttribute('data-sidebar-first-letter');
+        }
+        else {
+            // Extract first letter from .sidebar-item-label or fallback to text content
+            const label = element.querySelector('.sidebar-item-label');
+            const textContent = (label?.textContent || element.textContent)?.trim();
+            const firstChar = textContent?.[0];
+            // Only set first-letter if it's alphanumeric
+            if (firstChar && /[a-zA-Z0-9]/.test(firstChar)) {
+                element.setAttribute('data-sidebar-first-letter', firstChar.toUpperCase());
+                element.removeAttribute('data-sidebar-has-icon');
+            }
+            else {
+                // No valid first letter - don't show anything in collapsed mode
+                element.removeAttribute('data-sidebar-first-letter');
+                element.removeAttribute('data-sidebar-has-icon');
+            }
+        }
+    });
+});
+const widthClasses = {
+    sm: { open: 'w-56', collapsed: 'w-14' },
+    md: { open: 'w-64', collapsed: 'w-16' },
+    lg: { open: 'w-80', collapsed: 'w-20' }
+};
+const sideClasses = {
+    left: 'left-0',
+    right: 'right-0'
+};
+const currentWidth = $derived(open ? widthClasses[width].open : widthClasses[width].collapsed);
+const baseClasses = 'fixed bottom-0 z-[var(--z-40)] glass-panel overflow-y-auto overflow-x-hidden transition-all duration-300 ease-[var(--ease-luxe)]';
+export {};
+</script>
+
+<aside bind:this={rootElement} data-sidebar class="{baseClasses} {sideClasses[side]} {currentWidth}" style="top: {navbarHeight}px">
+  {#if header && open}
+    {@render header()}
+  {/if}
+  {@render children?.()}
+</aside>
+
+<style>
+  /* Header styling */
+  aside :global(.sidebar-header) {
+    padding: 1rem;
+    font-weight: 600;
+    color: var(--color-accent);
+    font-size: var(--text-sm);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    transition: all 0.2s var(--ease-luxe);
+  }
+
+  /* Collapsed state - center icons and hide text */
+  aside[class*="w-14"] :global(a[data-sidebar-has-icon]),
+  aside[class*="w-16"] :global(a[data-sidebar-has-icon]),
+  aside[class*="w-20"] :global(a[data-sidebar-has-icon]),
+  aside[class*="w-14"] :global(button[data-sidebar-has-icon]),
+  aside[class*="w-16"] :global(button[data-sidebar-has-icon]),
+  aside[class*="w-20"] :global(button[data-sidebar-has-icon]) {
+    justify-content: center;
+  }
+
+  aside[class*="w-14"] :global(a[data-sidebar-has-icon] .sidebar-item-label),
+  aside[class*="w-16"] :global(a[data-sidebar-has-icon] .sidebar-item-label),
+  aside[class*="w-20"] :global(a[data-sidebar-has-icon] .sidebar-item-label),
+  aside[class*="w-14"] :global(button[data-sidebar-has-icon] .sidebar-item-label),
+  aside[class*="w-16"] :global(button[data-sidebar-has-icon] .sidebar-item-label),
+  aside[class*="w-20"] :global(button[data-sidebar-has-icon] .sidebar-item-label) {
+    display: none;
+  }
+
+  aside[class*="w-14"] :global(a[data-sidebar-has-icon] .sidebar-item-icon),
+  aside[class*="w-16"] :global(a[data-sidebar-has-icon] .sidebar-item-icon),
+  aside[class*="w-20"] :global(a[data-sidebar-has-icon] .sidebar-item-icon),
+  aside[class*="w-14"] :global(button[data-sidebar-has-icon] .sidebar-item-icon),
+  aside[class*="w-16"] :global(button[data-sidebar-has-icon] .sidebar-item-icon),
+  aside[class*="w-20"] :global(button[data-sidebar-has-icon] .sidebar-item-icon) {
+    font-size: var(--text-2xl);
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+
+  /* Collapsed state - first letter circle for items without icons */
+  aside[class*="w-14"] :global(a:not([data-sidebar-has-icon]))::before,
+  aside[class*="w-16"] :global(a:not([data-sidebar-has-icon]))::before,
+  aside[class*="w-20"] :global(a:not([data-sidebar-has-icon]))::before,
+  aside[class*="w-14"] :global(button:not([data-sidebar-has-icon]))::before,
+  aside[class*="w-16"] :global(button:not([data-sidebar-has-icon]))::before,
+  aside[class*="w-20"] :global(button:not([data-sidebar-has-icon]))::before {
+    content: attr(data-sidebar-first-letter);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: var(--radius-pill);
+    background: var(--color-accent-overlay-20);
+    color: var(--color-accent);
+    font-weight: 600;
+    font-size: var(--text-lg);
+  }
+
+  aside[class*="w-14"] :global(a:not([data-sidebar-has-icon])),
+  aside[class*="w-16"] :global(a:not([data-sidebar-has-icon])),
+  aside[class*="w-20"] :global(a:not([data-sidebar-has-icon])),
+  aside[class*="w-14"] :global(button:not([data-sidebar-has-icon])),
+  aside[class*="w-16"] :global(button:not([data-sidebar-has-icon])),
+  aside[class*="w-20"] :global(button:not([data-sidebar-has-icon])) {
+    justify-content: center;
+  }
+
+  aside[class*="w-14"] :global(a:not([data-sidebar-has-icon]) .sidebar-item-label),
+  aside[class*="w-16"] :global(a:not([data-sidebar-has-icon]) .sidebar-item-label),
+  aside[class*="w-20"] :global(a:not([data-sidebar-has-icon]) .sidebar-item-label),
+  aside[class*="w-14"] :global(button:not([data-sidebar-has-icon]) .sidebar-item-label),
+  aside[class*="w-16"] :global(button:not([data-sidebar-has-icon]) .sidebar-item-label),
+  aside[class*="w-20"] :global(button:not([data-sidebar-has-icon]) .sidebar-item-label) {
+    display: none;
+  }
+
+  aside :global(a.active),
+  aside :global(button.active) {
+    background: var(--color-accent-overlay-15);
+    color: var(--color-accent);
+    border-left: 3px solid var(--color-accent);
+    font-weight: 600;
+  }
+
+  aside :global(a.active),
+  aside :global(button.active) {
+    box-shadow: var(--shadow-accent-glow);
+  }
+
+  aside :global(a:not(.active):hover),
+  aside :global(button:not(.active):hover) {
+    background: var(--color-base-3);
+    color: var(--color-accent-soft);
+  }
+
+  aside :global(a),
+  aside :global(button) {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.75rem 1rem;
+    margin: 0.25rem 0.5rem;
+    border-radius: var(--radius-md);
+    color: var(--color-text-soft);
+    text-decoration: none;
+    transition: all 0.2s var(--ease-luxe);
+    cursor: pointer;
+    border: none;
+    background: transparent;
+    width: calc(100% - 1rem);
+    text-align: left;
+    font-family: var(--font-body);
+    font-size: 0.875rem;
+  }</style>

package/dist/components/navigation/Sidebar.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    open?: boolean;
+    side?: 'left' | 'right';
+    width?: 'sm' | 'md' | 'lg';
+    header?: Snippet;
+    children?: Snippet;
+    currentPath?: string;
+}
+declare const Sidebar: import("svelte").Component<Props, {}, "open">;
+type Sidebar = ReturnType<typeof Sidebar>;
+export default Sidebar;