@mrintel/villain-ui 0.2.2 → 0.6.3

package/dist/components/navigation/Tabs.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">let { tabs, activeTab = $bindable(''), orientation = 'horizontal', variant = 'default', onTabChange, ontabchange, class: className = '' } = $props();
+const onTabChangeCallback = $derived(onTabChange ?? ontabchange);
+function handleTabClick(tabId, disabled) {
+    if (disabled)
+        return;
+    activeTab = tabId;
+    onTabChangeCallback?.(tabId);
+}
+function handleKeyDown(event, currentTabId) {
+    const enabledTabs = tabs.filter(tab => !tab.disabled);
+    const currentIndex = enabledTabs.findIndex(tab => tab.id === currentTabId);
+    let nextIndex = currentIndex;
+    switch (event.key) {
+        case 'ArrowLeft':
+            if (orientation !== 'horizontal')
+                return;
+            event.preventDefault();
+            nextIndex = currentIndex > 0 ? currentIndex - 1 : enabledTabs.length - 1;
+            break;
+        case 'ArrowRight':
+            if (orientation !== 'horizontal')
+                return;
+            event.preventDefault();
+            nextIndex = currentIndex < enabledTabs.length - 1 ? currentIndex + 1 : 0;
+            break;
+        case 'ArrowUp':
+            if (orientation !== 'vertical')
+                return;
+            event.preventDefault();
+            nextIndex = currentIndex > 0 ? currentIndex - 1 : enabledTabs.length - 1;
+            break;
+        case 'ArrowDown':
+            if (orientation !== 'vertical')
+                return;
+            event.preventDefault();
+            nextIndex = currentIndex < enabledTabs.length - 1 ? currentIndex + 1 : 0;
+            break;
+        case 'Home':
+            event.preventDefault();
+            nextIndex = 0;
+            break;
+        case 'End':
+            event.preventDefault();
+            nextIndex = enabledTabs.length - 1;
+            break;
+        default:
+            return;
+    }
+    const nextTab = enabledTabs[nextIndex];
+    if (nextTab) {
+        handleTabClick(nextTab.id);
+        requestAnimationFrame(() => {
+            const button = document.querySelector(`[role="tab"][aria-selected="true"]`);
+            button?.focus();
+        });
+    }
+}
+const orientationClasses = {
+    horizontal: 'flex flex-row',
+    vertical: 'flex flex-col'
+};
+const radiusClass = variant === 'pills' ? 'rounded-pill' : 'rounded-[var(--radius-md)]';
+export {};
+</script>
+
+<div role="tablist" class="{orientationClasses[orientation]} gap-1 p-1 {className}">
+  {#each tabs as tab}
+    <button
+      role="tab"
+      aria-selected={activeTab === tab.id}
+      aria-disabled={tab.disabled}
+      tabindex={activeTab === tab.id ? 0 : -1}
+      onclick={() => handleTabClick(tab.id, tab.disabled)}
+      onkeydown={(e) => handleKeyDown(e, tab.id)}
+      disabled={tab.disabled}
+      class="flex items-center gap-2 px-6 py-3 {radiusClass} font-body text-sm transition-all duration-300 ease-luxe {activeTab === tab.id ? 'bg-accent text-text accent-glow' : 'text-text-soft hover:bg-base-3'} {tab.disabled ? 'opacity-50 pointer-events-none' : 'cursor-pointer'}"
+    >
+      {#if tab.iconBefore}
+        <span class="inline-flex items-center justify-center">
+          {@render tab.iconBefore()}
+        </span>
+      {/if}
+      {tab.label}
+    </button>
+  {/each}
+</div>

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

@@ -0,0 +1,19 @@
+interface Tab {
+    id: string;
+    label: string;
+    iconBefore?: import('svelte').Snippet;
+    disabled?: boolean;
+}
+export interface Props {
+    tabs: Tab[];
+    activeTab?: string;
+    orientation?: 'horizontal' | 'vertical';
+    variant?: 'default' | 'pills';
+    onTabChange?: (tabId: string) => void;
+    /** @deprecated Use onTabChange */
+    ontabchange?: (tabId: string) => void;
+    class?: string;
+}
+declare const Tabs: import("svelte").Component<Props, {}, "activeTab">;
+type Tabs = ReturnType<typeof Tabs>;
+export default Tabs;

package/dist/components/navigation/index.d.ts

@@ -0,0 +1,7 @@
+export { default as Navbar } from './Navbar.svelte';
+export { default as Sidebar } from './Sidebar.svelte';
+export { default as Tabs } from './Tabs.svelte';
+export { default as Breadcrumbs } from './Breadcrumbs.svelte';
+export { default as Menu } from './Menu.svelte';
+export { default as DropdownMenu } from './DropdownMenu.svelte';
+export { default as ContextMenu } from './ContextMenu.svelte';

package/dist/components/navigation/index.js

@@ -0,0 +1,7 @@
+export { default as Navbar } from './Navbar.svelte';
+export { default as Sidebar } from './Sidebar.svelte';
+export { default as Tabs } from './Tabs.svelte';
+export { default as Breadcrumbs } from './Breadcrumbs.svelte';
+export { default as Menu } from './Menu.svelte';
+export { default as DropdownMenu } from './DropdownMenu.svelte';
+export { default as ContextMenu } from './ContextMenu.svelte';

package/dist/components/overlays/Alert.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">let { variant = 'info', title, dismissible = false, iconBefore, onClose, onclose, children, class: className = '' } = $props();
+const onCloseCallback = $derived(onClose ?? onclose);
+let visible = $state(true);
+const variantClasses = {
+    info: 'border-l-4 border-accent',
+    success: 'border-l-4 border-success',
+    warning: 'border-l-4 border-warning',
+    error: 'border-l-4 border-error'
+};
+const variantTextClasses = {
+    info: 'text-accent-soft',
+    success: 'text-success',
+    warning: 'text-warning',
+    error: 'text-error'
+};
+const variantIcons = {
+    info: 'M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z',
+    success: 'M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z',
+    warning: 'M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z',
+    error: 'M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z'
+};
+const roleMap = {
+    info: 'status',
+    success: 'status',
+    warning: 'alert',
+    error: 'alert'
+};
+const ariaLiveMap = {
+    info: 'polite',
+    success: 'polite',
+    warning: 'polite',
+    error: 'assertive'
+};
+function handleClose() {
+    visible = false;
+    onCloseCallback?.();
+}
+export {};
+</script>
+
+{#if visible}
+  <div
+    class="glass-panel rounded-[var(--radius-lg)] p-4 flex gap-3 {variantClasses[variant]} {className} animate-[fade-in_0.2s_var(--ease-sharp)]"
+    role={roleMap[variant]}
+    aria-live={ariaLiveMap[variant]}
+  >
+    <div class="shrink-0 {variantTextClasses[variant]}">
+      {#if iconBefore}
+        {@render iconBefore()}
+      {:else}
+        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d={variantIcons[variant]} />
+        </svg>
+      {/if}
+    </div>
+
+    <div class="flex-1 min-w-0">
+      {#if title}
+        <h4 class="font-semibold text-text mb-1">
+          {title}
+        </h4>
+      {/if}
+      <div class="text-sm text-text-soft">
+        {@render children?.()}
+      </div>
+    </div>
+
+    {#if dismissible}
+      <button
+        type="button"
+        onclick={handleClose}
+        class="shrink-0 text-text-soft hover:text-text transition-colors"
+        aria-label="Dismiss alert"
+      >
+        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+        </svg>
+      </button>
+    {/if}
+  </div>
+{/if}

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

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+export interface Props {
+    variant?: 'info' | 'success' | 'warning' | 'error';
+    title?: string;
+    dismissible?: boolean;
+    iconBefore?: Snippet;
+    onClose?: () => void;
+    /** @deprecated Use onClose */
+    onclose?: () => void;
+    children?: Snippet;
+    class?: string;
+}
+declare const Alert: import("svelte").Component<Props, {}, "">;
+type Alert = ReturnType<typeof Alert>;
+export default Alert;

package/dist/components/overlays/CommandPalette.svelte

@@ -0,0 +1,182 @@
+<script lang="ts">import { createId } from '../../lib/internal/id.js';
+let { open = $bindable(false), commands, placeholder = 'Search commands...' } = $props();
+let query = $state('');
+let selectedIndex = $state(0);
+let inputElement = $state();
+let previousFocus = $state(null);
+const paletteId = createId('command-palette');
+// Inline fuzzy matching function
+function fuzzyMatch(text, search) {
+    const searchChars = search.toLowerCase().split('');
+    const textLower = text.toLowerCase();
+    let searchIndex = 0;
+    for (let i = 0; i < textLower.length && searchIndex < searchChars.length; i++) {
+        if (textLower[i] === searchChars[searchIndex]) {
+            searchIndex++;
+        }
+    }
+    return searchIndex === searchChars.length;
+}
+let filteredCommands = $derived(query.trim() === ''
+    ? commands
+    : commands.filter(cmd => {
+        // Match against label
+        if (fuzzyMatch(cmd.label, query))
+            return true;
+        // Match against keywords
+        if (cmd.keywords) {
+            return cmd.keywords.some(keyword => fuzzyMatch(keyword, query));
+        }
+        return false;
+    }));
+function handleClose() {
+    open = false;
+    query = '';
+    selectedIndex = 0;
+}
+function handleBackdropClick(event) {
+    if (event.target === event.currentTarget) {
+        handleClose();
+    }
+}
+function handleSelectCommand(command) {
+    command.onSelect();
+    handleClose();
+}
+function handleKeyDown(event) {
+    if (event.key === 'ArrowDown') {
+        if (!filteredCommands.length)
+            return;
+        event.preventDefault();
+        selectedIndex = (selectedIndex + 1) % filteredCommands.length;
+    }
+    else if (event.key === 'ArrowUp') {
+        if (!filteredCommands.length)
+            return;
+        event.preventDefault();
+        selectedIndex = (selectedIndex - 1 + filteredCommands.length) % filteredCommands.length;
+    }
+    else if (event.key === 'Enter') {
+        event.preventDefault();
+        if (filteredCommands[selectedIndex]) {
+            handleSelectCommand(filteredCommands[selectedIndex]);
+        }
+        else if (filteredCommands.length) {
+            selectedIndex = 0;
+        }
+    }
+    else if (event.key === 'Escape') {
+        event.preventDefault();
+        handleClose();
+    }
+}
+// Reset and clamp selected index when filtered commands change
+$effect(() => {
+    if (filteredCommands.length === 0) {
+        selectedIndex = -1;
+    }
+    else if (selectedIndex >= filteredCommands.length || selectedIndex < 0) {
+        selectedIndex = 0;
+    }
+});
+$effect(() => {
+    if (typeof document === 'undefined')
+        return;
+    if (open) {
+        // Store previous focus
+        previousFocus = document.activeElement;
+        // Prevent body scroll
+        document.body.style.overflow = 'hidden';
+        // Focus input element
+        requestAnimationFrame(() => {
+            inputElement?.focus();
+        });
+        return () => {
+            // Restore body scroll
+            document.body.style.overflow = '';
+            // Restore previous focus
+            previousFocus?.focus();
+        };
+    }
+});
+</script>
+
+{#if open}
+  <div
+    class="fixed inset-0 z-[var(--z-50)] flex items-start justify-center pt-[20vh] p-4 bg-overlay backdrop-blur-md animate-[fade-in_0.2s_var(--ease-luxe)]"
+    onclick={handleBackdropClick}
+    role="presentation"
+  >
+    <div
+      class="panel-floating rounded-xl shadow-deep w-full max-w-[36rem] animate-[fade-up_0.3s_var(--ease-luxe)]"
+      role="combobox"
+      aria-expanded="true"
+      aria-haspopup="listbox"
+      aria-controls={paletteId}
+    >
+      <div class="p-4 border-b border-border">
+        <input
+          bind:this={inputElement}
+          bind:value={query}
+          type="text"
+          placeholder={placeholder}
+          onkeydown={handleKeyDown}
+          class="w-full bg-transparent border-none outline-none text-text text-lg placeholder:text-text-muted"
+          aria-autocomplete="list"
+          aria-activedescendant={selectedIndex >= 0 && selectedIndex < filteredCommands.length && filteredCommands[selectedIndex] ? `cmd-${filteredCommands[selectedIndex].id}` : undefined}
+        />
+      </div>
+
+      <div
+        id={paletteId}
+        role="listbox"
+        class="max-h-[400px] overflow-y-auto"
+        style="scrollbar-width: thin; scrollbar-color: var(--color-accent) var(--color-base-3);"
+      >
+        {#if filteredCommands.length === 0}
+          <div class="p-8 text-center text-text-muted">
+            No commands found
+          </div>
+        {:else}
+          {#each filteredCommands as command, index (command.id)}
+            <button
+              id="cmd-{command.id}"
+              type="button"
+              role="option"
+              aria-selected={index === selectedIndex}
+              tabindex={index === selectedIndex ? 0 : -1}
+              onclick={() => handleSelectCommand(command)}
+              class="w-full flex items-center gap-3 p-4 text-left text-text hover:bg-base-3 transition-colors {index === selectedIndex ? 'accent-glow bg-base-3' : ''}"
+            >
+              {#if command.icon}
+                <div class="shrink-0">
+                  {@render command.icon()}
+                </div>
+              {/if}
+              <span>{command.label}</span>
+            </button>
+          {/each}
+        {/if}
+      </div>
+    </div>
+  </div>
+{/if}
+
+<style>
+  div[role="listbox"]::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  div[role="listbox"]::-webkit-scrollbar-track {
+    background: var(--color-base-3);
+    border-radius: var(--radius-sm);
+  }
+
+  div[role="listbox"]::-webkit-scrollbar-thumb {
+    background: var(--color-accent);
+    border-radius: var(--radius-sm);
+  }
+
+  div[role="listbox"]::-webkit-scrollbar-thumb:hover {
+    background: var(--color-accent-soft);
+  }</style>

package/dist/components/overlays/CommandPalette.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+interface Command {
+    id: string;
+    label: string;
+    icon?: Snippet;
+    onSelect: () => void;
+    keywords?: string[];
+}
+interface Props {
+    open?: boolean;
+    commands: Command[];
+    placeholder?: string;
+}
+declare const CommandPalette: import("svelte").Component<Props, {}, "open">;
+type CommandPalette = ReturnType<typeof CommandPalette>;
+export default CommandPalette;

package/dist/components/overlays/Drawer.svelte

@@ -0,0 +1,158 @@
+<script lang="ts">import { createId } from '../../lib/internal/id.js';
+import ScrollArea from '../utilities/ScrollArea.svelte';
+let { open = $bindable(false), side = 'right', size = 'md', title, closeOnBackdrop = true, closeOnEscape = true, children, footer, iconBefore, class: className = '' } = $props();
+let drawerElement = $state();
+let previousFocus = $state(null);
+const titleId = createId('drawer-title');
+const focusableSelector = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"]), [contenteditable="true"], summary, details, audio[controls], video[controls]';
+const sizeClasses = {
+    left: {
+        sm: 'max-w-[20rem]',
+        md: 'max-w-[28rem]',
+        lg: 'max-w-[36rem]'
+    },
+    right: {
+        sm: 'max-w-[20rem]',
+        md: 'max-w-[28rem]',
+        lg: 'max-w-[36rem]'
+    },
+    top: {
+        sm: 'max-h-[20rem]',
+        md: 'max-h-[28rem]',
+        lg: 'max-h-[36rem]'
+    },
+    bottom: {
+        sm: 'max-h-[20rem]',
+        md: 'max-h-[28rem]',
+        lg: 'max-h-[36rem]'
+    }
+};
+const positionClasses = {
+    left: 'left-0 top-0 h-full',
+    right: 'right-0 top-0 h-full',
+    top: 'top-0 left-0 w-full',
+    bottom: 'bottom-0 left-0 w-full'
+};
+const animationClasses = {
+    left: 'animate-[slide-in-left_0.3s_var(--ease-luxe)]',
+    right: 'animate-[slide-in-right_0.3s_var(--ease-luxe)]',
+    top: 'animate-[slide-in-top_0.3s_var(--ease-luxe)]',
+    bottom: 'animate-[slide-in-bottom_0.3s_var(--ease-luxe)]'
+};
+function handleClose() {
+    open = false;
+}
+function handleBackdropClick(event) {
+    if (closeOnBackdrop && event.target === event.currentTarget) {
+        handleClose();
+    }
+}
+function handleEscape(event) {
+    if (closeOnEscape && event.key === 'Escape') {
+        handleClose();
+    }
+}
+function handleFocusTrap(event) {
+    if (event.key !== 'Tab' || !drawerElement)
+        return;
+    const focusableElements = Array.from(drawerElement.querySelectorAll(focusableSelector));
+    if (focusableElements.length === 0)
+        return;
+    const firstFocusable = focusableElements[0];
+    const lastFocusable = focusableElements[focusableElements.length - 1];
+    if (event.shiftKey) {
+        // Shift+Tab: moving backwards
+        if (document.activeElement === firstFocusable) {
+            event.preventDefault();
+            lastFocusable.focus();
+        }
+    }
+    else {
+        // Tab: moving forwards
+        if (document.activeElement === lastFocusable) {
+            event.preventDefault();
+            firstFocusable.focus();
+        }
+    }
+}
+$effect(() => {
+    if (typeof document === 'undefined')
+        return;
+    if (open) {
+        // Store previous focus
+        previousFocus = document.activeElement;
+        // Prevent body scroll
+        document.body.style.overflow = 'hidden';
+        // Add event listeners
+        document.addEventListener('keydown', handleEscape);
+        document.addEventListener('keydown', handleFocusTrap);
+        // Focus first interactive element
+        requestAnimationFrame(() => {
+            const firstInteractive = drawerElement?.querySelector(focusableSelector);
+            firstInteractive?.focus();
+        });
+        return () => {
+            // Restore body scroll
+            document.body.style.overflow = '';
+            // Remove event listeners
+            document.removeEventListener('keydown', handleEscape);
+            document.removeEventListener('keydown', handleFocusTrap);
+            // Restore previous focus
+            previousFocus?.focus();
+        };
+    }
+});
+</script>
+
+{#if open}
+  <div
+    class="fixed inset-0 z-[var(--z-50)] bg-overlay backdrop-blur-md animate-[fade-in_0.2s_var(--ease-luxe)]"
+    onclick={handleBackdropClick}
+    role="presentation"
+  >
+    <div
+      bind:this={drawerElement}
+      class="panel-floating shadow-deep fixed {positionClasses[side]} {sizeClasses[side][size]} {animationClasses[side]} {className} flex flex-col"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby={title ? titleId : undefined}
+    >
+      {#if title}
+        <div class="flex items-center justify-between p-8 border-b border-border">
+          <h2 id={titleId} class="text-xl font-semibold text-text flex items-center gap-3">
+            {#if iconBefore}
+              <span class="inline-flex items-center justify-center">
+                {@render iconBefore()}
+              </span>
+            {/if}
+            {title}
+          </h2>
+          <button
+            type="button"
+            onclick={handleClose}
+            class="text-text-soft hover:text-text transition-colors"
+            aria-label="Close drawer"
+          >
+            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+      {/if}
+
+      <div class="flex-1 overflow-hidden">
+        <ScrollArea height="100%">
+          <div class="p-8">
+            {@render children?.()}
+          </div>
+        </ScrollArea>
+      </div>
+
+      {#if footer}
+        <div class="flex items-center justify-end gap-4 p-8 border-t border-border">
+          {@render footer?.()}
+        </div>
+      {/if}
+    </div>
+  </div>
+{/if}

package/dist/components/overlays/Drawer.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+export interface Props {
+    open?: boolean;
+    side?: 'left' | 'right' | 'top' | 'bottom';
+    size?: 'sm' | 'md' | 'lg';
+    title?: string;
+    closeOnBackdrop?: boolean;
+    closeOnEscape?: boolean;
+    children?: Snippet;
+    footer?: Snippet;
+    iconBefore?: Snippet;
+    class?: string;
+}
+declare const Drawer: import("svelte").Component<Props, {}, "open">;
+type Drawer = ReturnType<typeof Drawer>;
+export default Drawer;

package/dist/components/overlays/Dropdown.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">import { createId } from '../../lib/internal/id.js';
+let { open = $bindable(false), placement = 'bottom-start', closeOnClickOutside = true, trigger, children } = $props();
+let dropdownElement = $state();
+let wrapperElement = $state();
+const dropdownId = createId('dropdown');
+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 toggleOpen() {
+    open = !open;
+}
+function handleClickOutside(event) {
+    if (closeOnClickOutside && dropdownElement && wrapperElement && !wrapperElement.contains(event.target)) {
+        open = false;
+    }
+}
+function handleEscape(event) {
+    if (event.key === 'Escape') {
+        open = false;
+    }
+}
+$effect(() => {
+    if (typeof document === 'undefined')
+        return;
+    if (open) {
+        document.addEventListener('click', handleClickOutside);
+        document.addEventListener('keydown', handleEscape);
+        return () => {
+            document.removeEventListener('click', handleClickOutside);
+            document.removeEventListener('keydown', handleEscape);
+        };
+    }
+});
+</script>
+
+<div bind:this={wrapperElement} class="relative inline-block">
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div
+    onclick={toggleOpen}
+    onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); toggleOpen(); } }}
+    aria-haspopup="true"
+    aria-expanded={open}
+    aria-controls={open ? dropdownId : undefined}
+    class="inline-block"
+  >
+    {@render trigger?.()}
+  </div>
+
+  {#if open}
+    <div
+      bind:this={dropdownElement}
+      id={dropdownId}
+      class="absolute {placementClasses[placement]} z-[var(--z-50)] panel-floating rounded-[var(--radius-lg)] shadow-[var(--shadow-deep)] min-w-[12rem] animate-[fade-up_0.2s_var(--ease-luxe)]"
+      role="menu"
+    >
+      {@render children?.()}
+    </div>
+  {/if}
+</div>

package/dist/components/overlays/Dropdown.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    open?: boolean;
+    placement?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
+    closeOnClickOutside?: boolean;
+    trigger?: Snippet;
+    children?: Snippet;
+}
+declare const Dropdown: import("svelte").Component<Props, {}, "open">;
+type Dropdown = ReturnType<typeof Dropdown>;
+export default Dropdown;