@mrintel/villain-ui 0.3.0 → 0.7.1

package/dist/components/navigation/Tabs.svelte

@@ -1,54 +1,86 @@
-<script lang="ts">
-
-  interface Tab {
-    id: string;
-    label: string;
-    disabled?: boolean;
-  }
-
-  interface Props {
-    tabs: Tab[];
-    activeTab?: string;
-    orientation?: 'horizontal' | 'vertical';
-    variant?: 'default' | 'pills';
-    onTabChange?: (tabId: string) => void;
-  }
-
-  let {
-    tabs,
-    activeTab = $bindable(''),
-    orientation = 'horizontal',
-    variant = 'default',
-    onTabChange
-  }: Props = $props();
-
-  function handleTabClick(tabId: string, disabled?: boolean) {
-    if (disabled) return;
-    activeTab = tabId;
-    if (onTabChange) {
-      onTabChange(tabId);
-    }
-  }
-
-  const orientationClasses = {
-    horizontal: 'flex flex-row',
-    vertical: 'flex flex-col'
-  };
-
-  const radiusClass = variant === 'pills' ? 'rounded-pill' : 'rounded-md';
-</script>
-
-<div role="tablist" class="{orientationClasses[orientation]} gap-1 p-1">
-  {#each tabs as tab}
-    <button
-      role="tab"
-      aria-selected={activeTab === tab.id}
-      aria-disabled={tab.disabled}
-      onclick={() => handleTabClick(tab.id, tab.disabled)}
-      disabled={tab.disabled}
-      class="px-4 py-2 {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'}"
-    >
-      {tab.label}
-    </button>
-  {/each}
-</div>
+<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

@@ -1,14 +1,18 @@
 interface Tab {
     id: string;
     label: string;
+    iconBefore?: import('svelte').Snippet;
     disabled?: boolean;
 }
-interface Props {
+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>;

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

@@ -5,3 +5,4 @@ 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';
+export { default as Stepper } from './Stepper.svelte';

package/dist/components/navigation/index.js

@@ -5,3 +5,4 @@ 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';
+export { default as Stepper } from './Stepper.svelte';

package/dist/components/overlays/Alert.svelte

@@ -1,99 +1,81 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-
-  interface Props {
-    variant?: 'info' | 'success' | 'warning' | 'error';
-    title?: string;
-    dismissible?: boolean;
-    onclose?: () => void;
-    children?: Snippet;
-  }
-
-  let {
-    variant = 'info',
-    title,
-    dismissible = false,
-    onclose,
-    children
-  }: Props = $props();
-
-  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'
-  } satisfies Record<'info' | 'success' | 'warning' | 'error', 'polite' | 'assertive'>;
-
-  function handleClose() {
-    visible = false;
-    onclose?.();
-  }
-</script>
-
-{#if visible}
-  <div
-    class="glass-panel rounded-lg p-4 flex gap-3 {variantClasses[variant]} animate-[fade-in_0.2s_var(--ease-luxe)]"
-    role={roleMap[variant]}
-    aria-live={ariaLiveMap[variant]}
-  >
-    <div class="shrink-0 {variantTextClasses[variant]}">
-      <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>
-    </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}
+<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

@@ -1,10 +1,14 @@
 import type { Snippet } from 'svelte';
-interface Props {
+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>;