@mrintel/villain-ui 0.3.0 → 0.6.3

package/dist/components/forms/TimePicker.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">import { createId } from '../../lib/internal/id.js';
+import { baseInputClasses, focusClasses, disabledClasses, } from './formClasses';
+let { value = $bindable(''), min, max, step, placeholder, disabled = false, error = false, label, id = createId('timepicker'), onchange, class: className = '', } = $props();
+const errorClasses = $derived(error ? 'error-state' : '');
+</script>
+
+{#if label}
+	<div>
+		<label for={id} class="text-text-soft text-sm mb-2 block">
+			{label}
+		</label>
+		<input
+			type="time"
+			{id}
+			{placeholder}
+			{disabled}
+			{min}
+			{max}
+			{step}
+			bind:value
+			{onchange}
+			class="{baseInputClasses} {focusClasses} {errorClasses} {disabled
+				? disabledClasses
+				: ''} {className}"
+		/>
+	</div>
+{:else}
+	<input
+		type="time"
+		{id}
+		{placeholder}
+		{disabled}
+		{min}
+		{max}
+		{step}
+		bind:value
+		{onchange}
+		class="{baseInputClasses} {focusClasses} {errorClasses} {disabled
+			? disabledClasses
+			: ''} {className}"
+	/>
+{/if}
+
+<style>
+	input[type='time'] {
+		min-height: 3rem;
+		cursor: pointer;
+	}
+
+	input[type='time']::-webkit-calendar-picker-indicator {
+		cursor: pointer;
+		filter: invert(0.7);
+		transition: filter 120ms var(--ease-sharp);
+	}
+
+	input[type='time']:hover::-webkit-calendar-picker-indicator {
+		filter: invert(1);
+	}
+
+	input[type='time']:disabled::-webkit-calendar-picker-indicator {
+		cursor: not-allowed;
+		opacity: 0.4;
+	}</style>

package/dist/components/forms/TimePicker.svelte.d.ts

@@ -0,0 +1,16 @@
+export interface Props {
+    value?: string;
+    min?: string;
+    max?: string;
+    step?: number;
+    placeholder?: string;
+    disabled?: boolean;
+    error?: boolean;
+    label?: string;
+    id?: string;
+    onchange?: (event: Event) => void;
+    class?: string;
+}
+declare const TimePicker: import("svelte").Component<Props, {}, "value">;
+type TimePicker = ReturnType<typeof TimePicker>;
+export default TimePicker;

package/dist/components/forms/formClasses.d.ts

@@ -0,0 +1,3 @@
+export declare const baseInputClasses = "glass-panel rounded-[var(--radius-lg)] px-5 py-3.5 font-body text-text placeholder:text-text-muted transition-all duration-300 ease-luxe w-full";
+export declare const focusClasses = "focus:outline-none focus:border-accent focus:accent-glow";
+export declare const disabledClasses = "opacity-50 cursor-not-allowed";

package/dist/components/forms/formClasses.js

@@ -0,0 +1,3 @@
+export const baseInputClasses = 'glass-panel rounded-[var(--radius-lg)] px-5 py-3.5 font-body text-text placeholder:text-text-muted transition-all duration-300 ease-luxe w-full';
+export const focusClasses = 'focus:outline-none focus:border-accent focus:accent-glow';
+export const disabledClasses = 'opacity-50 cursor-not-allowed';

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

@@ -7,3 +7,6 @@ export { default as RadioGroup } from './RadioGroup.svelte';
 export { default as RangeSlider } from './RangeSlider.svelte';
 export { default as FileUpload } from './FileUpload.svelte';
 export { default as InputGroup } from './InputGroup.svelte';
+export { default as DatePicker } from './DatePicker.svelte';
+export { default as TimePicker } from './TimePicker.svelte';
+export { default as DateTimePicker } from './DateTimePicker.svelte';

package/dist/components/forms/index.js

@@ -7,3 +7,6 @@ export { default as RadioGroup } from './RadioGroup.svelte';
 export { default as RangeSlider } from './RangeSlider.svelte';
 export { default as FileUpload } from './FileUpload.svelte';
 export { default as InputGroup } from './InputGroup.svelte';
+export { default as DatePicker } from './DatePicker.svelte';
+export { default as TimePicker } from './TimePicker.svelte';
+export { default as DateTimePicker } from './DateTimePicker.svelte';

package/dist/components/navigation/Breadcrumbs.svelte

@@ -1,59 +1,56 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-
-  interface BreadcrumbItem {
-    label: string;
-    href?: string;
-    onclick?: () => void;
-  }
-
-  interface Props {
-    items: BreadcrumbItem[];
-    separator?: string;
-    separatorIcon?: Snippet;
-  }
-
-  let {
-    items,
-    separator = '/',
-    separatorIcon
-  }: Props = $props();
-</script>
-
-<nav role="navigation" aria-label="Breadcrumb">
-  <ol class="flex items-center gap-2">
-    {#each items as item, index}
-      <li class="flex items-center gap-2">
-        {#if item.href}
-          <a
-            href={item.href}
-            class="text-sm font-[var(--font-body)] text-[var(--color-text-soft)] hover:text-[var(--color-accent)] hover:underline transition-colors duration-200 ease-[var(--ease-luxe)]"
-          >
-            {item.label}
-          </a>
-        {:else if item.onclick}
-          <button
-            onclick={item.onclick}
-            class="text-sm font-[var(--font-body)] text-[var(--color-text-soft)] hover:text-[var(--color-accent)] hover:underline transition-colors duration-200 ease-[var(--ease-luxe)] cursor-pointer"
-          >
-            {item.label}
-          </button>
-        {:else}
-          <span class="text-sm font-[var(--font-body)] {index === items.length - 1 ? 'text-[var(--color-text)]' : 'text-[var(--color-text-soft)]'}">
-            {item.label}
-          </span>
-        {/if}
-
-        {#if index < items.length - 1}
-          <span class="text-[var(--color-text-muted)] text-sm" aria-hidden="true">
-            {#if separatorIcon}
-              {@render separatorIcon()}
-            {:else}
-              {separator}
-            {/if}
-          </span>
-        {/if}
-      </li>
-    {/each}
-  </ol>
-</nav>
+<script lang="ts">let { items, separator = '/', separatorIcon } = $props();
+export {};
+</script>
+
+<nav role="navigation" aria-label="Breadcrumb">
+  <ol class="flex items-center gap-2">
+    {#each items as item, index}
+      <li class="flex items-center gap-2">
+        {#if item.href}
+          <a
+            href={item.href}
+            class="flex items-center gap-2 text-sm font-[var(--font-body)] text-[var(--color-text-soft)] hover:text-[var(--color-accent)] hover:underline transition-colors duration-200 ease-[var(--ease-luxe)]"
+          >
+            {#if item.icon}
+              <span class="inline-flex items-center justify-center">
+                {@render item.icon()}
+              </span>
+            {/if}
+            {item.label}
+          </a>
+        {:else if item.onclick}
+          <button
+            onclick={item.onclick}
+            class="flex items-center gap-2 text-sm font-[var(--font-body)] text-[var(--color-text-soft)] hover:text-[var(--color-accent)] hover:underline transition-colors duration-200 ease-[var(--ease-luxe)] cursor-pointer"
+          >
+            {#if item.icon}
+              <span class="inline-flex items-center justify-center">
+                {@render item.icon()}
+              </span>
+            {/if}
+            {item.label}
+          </button>
+        {:else}
+          <span class="flex items-center gap-2 text-sm font-[var(--font-body)] {index === items.length - 1 ? 'text-[var(--color-text)]' : 'text-[var(--color-text-soft)]'}">
+            {#if item.icon}
+              <span class="inline-flex items-center justify-center">
+                {@render item.icon()}
+              </span>
+            {/if}
+            {item.label}
+          </span>
+        {/if}
+
+        {#if index < items.length - 1}
+          <span class="text-[var(--color-text-muted)] text-sm" aria-hidden="true">
+            {#if separatorIcon}
+              {@render separatorIcon()}
+            {:else}
+              {separator}
+            {/if}
+          </span>
+        {/if}
+      </li>
+    {/each}
+  </ol>
+</nav>

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

@@ -3,6 +3,7 @@ interface BreadcrumbItem {
     label: string;
     href?: string;
     onclick?: () => void;
+    icon?: Snippet;
 }
 interface Props {
     items: BreadcrumbItem[];

package/dist/components/navigation/ContextMenu.svelte

@@ -1,83 +1,133 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-
-  interface Props {
-    open?: boolean;
-    x?: number;
-    y?: number;
-    trigger?: Snippet;
-    children?: Snippet;
-  }
-
-  let {
-    open = $bindable(false),
-    x = $bindable(0),
-    y = $bindable(0),
-    trigger,
-    children
-  }: Props = $props();
-
-  let menuElement = $state<HTMLDivElement>();
-
-  function handleContextMenu(event: MouseEvent) {
-    event.preventDefault();
-    x = event.clientX;
-    y = event.clientY;
-    open = true;
-
-    // Adjust position if menu would overflow viewport
-    requestAnimationFrame(() => {
-      if (menuElement) {
-        const menuRect = menuElement.getBoundingClientRect();
-        const viewportWidth = window.innerWidth;
-        const viewportHeight = window.innerHeight;
-
-        if (x + menuRect.width > viewportWidth) {
-          x = viewportWidth - menuRect.width - 10;
-        }
-
-        if (y + menuRect.height > viewportHeight) {
-          y = viewportHeight - menuRect.height - 10;
-        }
-      }
-    });
-  }
-
-  function handleClickOutside(event: MouseEvent) {
-    if (menuElement && !menuElement.contains(event.target as Node)) {
-      open = false;
-    }
-  }
-
-  function handleEscape(event: KeyboardEvent) {
-    if (event.key === 'Escape') {
-      open = false;
-    }
-  }
-
-  $effect(() => {
-    if (open) {
-      document.addEventListener('click', handleClickOutside);
-      document.addEventListener('keydown', handleEscape);
-
-      return () => {
-        document.removeEventListener('click', handleClickOutside);
-        document.removeEventListener('keydown', handleEscape);
-      };
-    }
-  });
-</script>
-
-<div oncontextmenu={handleContextMenu} role="presentation" class="contents">
-  {@render trigger?.()}
-</div>
-
-{#if open}
-  <div
-    bind:this={menuElement}
-    class="fixed z-50 glass-panel rounded-[var(--radius-lg)] shadow-[var(--shadow-deep)] min-w-[12rem] animate-[fade-in_0.15s_var(--ease-luxe)]"
-    style="left: {x}px; top: {y}px;"
-  >
-    {@render children?.()}
-  </div>
-{/if}
+<script lang="ts">import { createId } from '../../lib/internal/id.js';
+let { items, open = $bindable(false), x = $bindable(0), y = $bindable(0), trigger } = $props();
+let menuElement = $state();
+let selectedIndex = $state(0);
+const menuId = createId('context-menu');
+function handleContextMenu(event) {
+    event.preventDefault();
+    x = event.clientX;
+    y = event.clientY;
+    open = true;
+    selectedIndex = 0;
+    // Adjust position if menu would overflow viewport
+    requestAnimationFrame(() => {
+        if (menuElement) {
+            const menuRect = menuElement.getBoundingClientRect();
+            const viewportWidth = window.innerWidth;
+            const viewportHeight = window.innerHeight;
+            if (x + menuRect.width > viewportWidth) {
+                x = viewportWidth - menuRect.width - 10;
+            }
+            if (y + menuRect.height > viewportHeight) {
+                y = viewportHeight - menuRect.height - 10;
+            }
+        }
+    });
+}
+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 && !menuElement.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 oncontextmenu={handleContextMenu} role="presentation" class="contents">
+  {@render trigger?.()}
+</div>
+
+{#if open}
+  <div
+    bind:this={menuElement}
+    id={menuId}
+    role="menu"
+    tabindex="-1"
+    onkeydown={handleMenuKeyDown}
+    class="fixed z-[var(--z-50)] glass-panel rounded-[var(--radius-lg)] shadow-[var(--shadow-deep)] min-w-[12rem] animate-[fade-in_0.15s_var(--ease-luxe)]"
+    style="left: {x}px; top: {y}px;"
+  >
+    {#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}

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

@@ -1,10 +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;
     x?: number;
     y?: number;
     trigger?: Snippet;
-    children?: Snippet;
 }
 declare const ContextMenu: import("svelte").Component<Props, {}, "open" | "x" | "y">;
 type ContextMenu = ReturnType<typeof ContextMenu>;