@mrintel/villain-ui 0.2.0 → 0.3.0

package/dist/components/overlays/Tooltip.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { createId } from '../../lib/internal/id.js';
+
+  interface Props {
+    content: string;
+    placement?: 'top' | 'bottom' | 'left' | 'right';
+    delay?: number;
+    trigger?: Snippet;
+  }
+
+  let {
+    content,
+    placement = 'top',
+    delay = 200,
+    trigger
+  }: Props = $props();
+
+  let visible = $state(false);
+  let actualPlacement = $state(placement);
+  let tooltipElement = $state<HTMLDivElement>();
+  let timeoutId: number | undefined;
+
+  const tooltipId = createId('tooltip');
+
+  const placementClasses = {
+    top: 'bottom-full left-1/2 -translate-x-1/2 mb-2',
+    bottom: 'top-full left-1/2 -translate-x-1/2 mt-2',
+    left: 'right-full top-1/2 -translate-y-1/2 mr-2',
+    right: 'left-full top-1/2 -translate-y-1/2 ml-2'
+  };
+
+  const oppositePlacement = {
+    top: 'bottom',
+    bottom: 'top',
+    left: 'right',
+    right: 'left'
+  } as const;
+
+  function handleMouseEnter() {
+    if (typeof window === 'undefined') return;
+    timeoutId = window.setTimeout(() => {
+      visible = true;
+    }, delay);
+  }
+
+  function handleMouseLeave() {
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+    }
+    visible = false;
+  }
+
+  function handleFocus() {
+    handleMouseEnter();
+  }
+
+  function handleBlur() {
+    handleMouseLeave();
+  }
+
+  // Reset actualPlacement when visibility changes
+  $effect(() => {
+    if (!visible) {
+      actualPlacement = placement;
+    }
+  });
+
+  // Check viewport bounds and flip placement if needed
+  $effect(() => {
+    if (typeof window === 'undefined') return;
+    
+    if (visible && tooltipElement) {
+      const rect = tooltipElement.getBoundingClientRect();
+      const viewportWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
+
+      // Determine if current placement overflows and flip if needed
+      if (actualPlacement === 'top' && rect.top < 0 && actualPlacement !== oppositePlacement[placement]) {
+        actualPlacement = 'bottom';
+      } else if (actualPlacement === 'bottom' && rect.bottom > viewportHeight && actualPlacement !== oppositePlacement[placement]) {
+        actualPlacement = 'top';
+      } else if (actualPlacement === 'left' && rect.left < 0 && actualPlacement !== oppositePlacement[placement]) {
+        actualPlacement = 'right';
+      } else if (actualPlacement === 'right' && rect.right > viewportWidth && actualPlacement !== oppositePlacement[placement]) {
+        actualPlacement = 'left';
+      }
+    }
+  });
+</script>
+
+<div class="relative inline-block">
+  <div
+    aria-describedby={visible ? tooltipId : undefined}
+    onmouseenter={handleMouseEnter}
+    onmouseleave={handleMouseLeave}
+    onfocus={handleFocus}
+    onblur={handleBlur}
+    role="presentation"
+    class="contents"
+  >
+    {@render trigger?.()}
+  </div>
+
+  {#if visible}
+    <div
+      bind:this={tooltipElement}
+      id={tooltipId}
+      role="tooltip"
+      class="absolute {placementClasses[actualPlacement]} z-50 glass-panel rounded-md px-3 py-2 text-sm text-text whitespace-nowrap animate-[fade-in_0.15s_var(--ease-luxe)] pointer-events-none"
+    >
+      {content}
+    </div>
+  {/if}
+</div>

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

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    content: string;
+    placement?: 'top' | 'bottom' | 'left' | 'right';
+    delay?: number;
+    trigger?: Snippet;
+}
+declare const Tooltip: import("svelte").Component<Props, {}, "">;
+type Tooltip = ReturnType<typeof Tooltip>;
+export default Tooltip;

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

@@ -0,0 +1,11 @@
+export { default as Modal } from './Modal.svelte';
+export { default as Alert } from './Alert.svelte';
+export { default as Spinner } from './Spinner.svelte';
+export { default as Tooltip } from './Tooltip.svelte';
+export { default as ProgressBar } from './ProgressBar.svelte';
+export { default as SkeletonLoader } from './SkeletonLoader.svelte';
+export { default as Toast } from './Toast.svelte';
+export { default as Drawer } from './Drawer.svelte';
+export { default as Popover } from './Popover.svelte';
+export { default as Dropdown } from './Dropdown.svelte';
+export { default as CommandPalette } from './CommandPalette.svelte';

package/dist/components/overlays/index.js

@@ -0,0 +1,11 @@
+export { default as Modal } from './Modal.svelte';
+export { default as Alert } from './Alert.svelte';
+export { default as Spinner } from './Spinner.svelte';
+export { default as Tooltip } from './Tooltip.svelte';
+export { default as ProgressBar } from './ProgressBar.svelte';
+export { default as SkeletonLoader } from './SkeletonLoader.svelte';
+export { default as Toast } from './Toast.svelte';
+export { default as Drawer } from './Drawer.svelte';
+export { default as Popover } from './Popover.svelte';
+export { default as Dropdown } from './Dropdown.svelte';
+export { default as CommandPalette } from './CommandPalette.svelte';

package/dist/components/typography/Code.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	interface Props {
+		children?: import('svelte').Snippet;
+	}
+
+	let { children }: Props = $props();
+</script>
+
+<code
+	class="inline-flex items-center transition-all duration-300 hover:shadow-[0_0_12px_rgba(127,61,255,0.3)]"
+	style="background: rgba(127, 61, 255, 0.1); border: 1px solid var(--color-border); padding: 0.125rem 0.375rem; border-radius: var(--radius-sm); font-family: var(--font-mono); color: var(--color-accent-soft); font-size: 0.9em;"
+>
+	{@render children?.()}
+</code>

package/dist/components/typography/Code.svelte.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    children?: import('svelte').Snippet;
+}
+declare const Code: import("svelte").Component<Props, {}, "">;
+type Code = ReturnType<typeof Code>;
+export default Code;

package/dist/components/typography/Heading.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	interface Props {
+		level?: 1 | 2 | 3 | 4 | 5 | 6;
+		glow?: boolean;
+		as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+		children?: import('svelte').Snippet;
+	}
+
+	let { level = 1, glow = false, as, children }: Props = $props();
+
+	const element = $derived(as ?? `h${level}`);
+	const baseClasses = $derived(
+		`transition-all duration-300 ${glow ? 'text-glow' : ''}`
+	);
+	const styles = $derived(
+		`font-size: var(--text-h${level}-size); line-height: var(--text-h${level}-line-height); font-weight: var(--text-h${level}-weight); font-family: var(--font-heading); color: var(--color-text);`
+	);
+</script>
+
+<svelte:element this={element} class={baseClasses} style={styles}>
+	{@render children?.()}
+</svelte:element>

package/dist/components/typography/Heading.svelte.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+    glow?: boolean;
+    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    children?: import('svelte').Snippet;
+}
+declare const Heading: import("svelte").Component<Props, {}, "">;
+type Heading = ReturnType<typeof Heading>;
+export default Heading;

package/dist/components/typography/Text.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	interface Props {
+		variant?: 'body' | 'caption';
+		color?: 'default' | 'soft' | 'muted';
+		as?: 'p' | 'span' | 'div';
+		children?: import('svelte').Snippet;
+	}
+
+	let { variant = 'body', color = 'default', as = 'p', children }: Props = $props();
+
+	const colorMap = {
+		default: 'var(--color-text)',
+		soft: 'var(--color-text-soft)',
+		muted: 'var(--color-text-muted)'
+	};
+
+	const styles = $derived(
+		`font-size: var(--text-${variant}-size); line-height: var(--text-${variant}-line-height); font-weight: var(--text-${variant}-weight); font-family: var(--font-body); color: ${colorMap[color]};`
+	);
+</script>
+
+<svelte:element this={as} class="transition-colors duration-300" style={styles}>
+	{@render children?.()}
+</svelte:element>

package/dist/components/typography/Text.svelte.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    variant?: 'body' | 'caption';
+    color?: 'default' | 'soft' | 'muted';
+    as?: 'p' | 'span' | 'div';
+    children?: import('svelte').Snippet;
+}
+declare const Text: import("svelte").Component<Props, {}, "">;
+type Text = ReturnType<typeof Text>;
+export default Text;

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

@@ -0,0 +1,3 @@
+export { default as Heading } from './Heading.svelte';
+export { default as Text } from './Text.svelte';
+export { default as Code } from './Code.svelte';

package/dist/components/typography/index.js

@@ -0,0 +1,3 @@
+export { default as Heading } from './Heading.svelte';
+export { default as Text } from './Text.svelte';
+export { default as Code } from './Code.svelte';

package/dist/components/utilities/Accordion.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import Collapse from './Collapse.svelte';
+
+  interface AccordionItem {
+    id: string;
+    title: string;
+    content: string | Snippet;
+  }
+
+  interface Props {
+    items: AccordionItem[];
+    openItems?: string | string[];
+    mode?: 'single' | 'multiple';
+  }
+
+  let { items, openItems = $bindable([]), mode = 'single' }: Props = $props();
+
+  // Normalize openItems to array
+  let openItemsArray = $derived(
+    mode === 'single'
+      ? typeof openItems === 'string'
+        ? [openItems]
+        : []
+      : Array.isArray(openItems)
+        ? openItems
+        : []
+  );
+
+  function isItemOpen(id: string): boolean {
+    return openItemsArray.includes(id);
+  }
+
+  function toggleItem(id: string) {
+    if (mode === 'single') {
+      // Single mode: only one item open at a time
+      if (isItemOpen(id)) {
+        openItems = '';
+      } else {
+        openItems = id;
+      }
+    } else {
+      // Multiple mode: toggle independently
+      if (isItemOpen(id)) {
+        openItems = openItemsArray.filter(itemId => itemId !== id);
+      } else {
+        openItems = [...openItemsArray, id];
+      }
+    }
+  }
+</script>
+
+<div class="space-y-2">
+  {#each items as item (item.id)}
+    <Collapse
+      title={item.title}
+      open={isItemOpen(item.id)}
+      onToggle={() => toggleItem(item.id)}
+    >
+      {#if typeof item.content === 'string'}
+        {item.content}
+      {:else}
+        {@render item.content()}
+      {/if}
+    </Collapse>
+  {/each}
+</div>

package/dist/components/utilities/Accordion.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+interface AccordionItem {
+    id: string;
+    title: string;
+    content: string | Snippet;
+}
+interface Props {
+    items: AccordionItem[];
+    openItems?: string | string[];
+    mode?: 'single' | 'multiple';
+}
+declare const Accordion: import("svelte").Component<Props, {}, "openItems">;
+type Accordion = ReturnType<typeof Accordion>;
+export default Accordion;

package/dist/components/utilities/Carousel.svelte

@@ -0,0 +1,152 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface CarouselItem {
+    id: string;
+    content: Snippet | string;
+  }
+
+  interface Props {
+    items: CarouselItem[];
+    currentIndex?: number;
+    autoplay?: boolean;
+    autoplayInterval?: number;
+    showDots?: boolean;
+    showArrows?: boolean;
+  }
+
+  let {
+    items,
+    currentIndex = $bindable(0),
+    autoplay = false,
+    autoplayInterval = 3000,
+    showDots = true,
+    showArrows = true
+  }: Props = $props();
+
+  let startX = $state(0);
+  let currentX = $state(0);
+  let isDragging = $state(false);
+
+  function goToNext() {
+    if (!items.length) return;
+    currentIndex = (currentIndex + 1) % items.length;
+  }
+
+  function goToPrev() {
+    if (!items.length) return;
+    currentIndex = (currentIndex - 1 + items.length) % items.length;
+  }
+
+  function goToIndex(index: number) {
+    if (items.length === 0 || index < 0 || index >= items.length) return;
+    currentIndex = index;
+  }
+
+  function handleTouchStart(event: TouchEvent) {
+    isDragging = true;
+    startX = event.touches[0].clientX;
+    currentX = startX;
+  }
+
+  function handleTouchMove(event: TouchEvent) {
+    if (!isDragging) return;
+    currentX = event.touches[0].clientX;
+  }
+
+  function handleTouchEnd() {
+    if (!isDragging) return;
+    if (!items.length) {
+      isDragging = false;
+      return;
+    }
+    isDragging = false;
+
+    const diff = startX - currentX;
+    const threshold = 50;
+
+    if (diff > threshold) {
+      goToNext();
+    } else if (diff < -threshold) {
+      goToPrev();
+    }
+
+    startX = 0;
+    currentX = 0;
+  }
+
+  $effect(() => {
+    if (!autoplay || items.length < 2) return;
+
+    const interval = setInterval(goToNext, autoplayInterval);
+
+    return () => {
+      clearInterval(interval);
+    };
+  });
+
+  // Clamp currentIndex when items change
+  $effect(() => {
+    if (items.length && (currentIndex < 0 || currentIndex >= items.length)) {
+      currentIndex = 0;
+    }
+  });
+</script>
+
+<div class="glass-panel rounded-lg overflow-hidden relative">
+  <div
+    class="flex transition-transform duration-300 ease-luxe"
+    style="transform: translateX(-{currentIndex * 100}%);"
+    ontouchstart={handleTouchStart}
+    ontouchmove={handleTouchMove}
+    ontouchend={handleTouchEnd}
+  >
+    {#each items as item (item.id)}
+      <div class="min-w-full flex items-center justify-center p-8">
+        {#if typeof item.content === 'string'}
+          <div class="text-text">{item.content}</div>
+        {:else}
+          {@render item.content()}
+        {/if}
+      </div>
+    {/each}
+  </div>
+
+  {#if showArrows && items.length}
+    <button
+      type="button"
+      onclick={goToPrev}
+      class="absolute left-4 top-1/2 -translate-y-1/2 glass-panel rounded-full p-2 text-text hover:accent-glow transition-all"
+      aria-label="Previous item"
+    >
+      <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="M15 19l-7-7 7-7" />
+      </svg>
+    </button>
+
+    <button
+      type="button"
+      onclick={goToNext}
+      class="absolute right-4 top-1/2 -translate-y-1/2 glass-panel rounded-full p-2 text-text hover:accent-glow transition-all"
+      aria-label="Next item"
+    >
+      <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="M9 5l7 7-7 7" />
+      </svg>
+    </button>
+  {/if}
+
+  {#if showDots && items.length}
+    <div class="absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2">
+      {#each items as item, index (item.id)}
+        <button
+          type="button"
+          onclick={() => goToIndex(index)}
+          class="w-2 h-2 rounded-full transition-all {index === currentIndex ? 'accent-glow bg-accent w-8' : 'bg-text-muted'}"
+          aria-label="Go to item {index + 1}"
+        >
+        </button>
+      {/each}
+    </div>
+  {/if}
+</div>

package/dist/components/utilities/Carousel.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+interface CarouselItem {
+    id: string;
+    content: Snippet | string;
+}
+interface Props {
+    items: CarouselItem[];
+    currentIndex?: number;
+    autoplay?: boolean;
+    autoplayInterval?: number;
+    showDots?: boolean;
+    showArrows?: boolean;
+}
+declare const Carousel: import("svelte").Component<Props, {}, "currentIndex">;
+type Carousel = ReturnType<typeof Carousel>;
+export default Carousel;

package/dist/components/utilities/Collapse.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { createId } from '../../lib/internal/id.js';
+
+  interface Props {
+    open: boolean;
+    title: string;
+    children?: Snippet;
+    onToggle?: () => void;
+  }
+
+  let { open, title, children, onToggle }: Props = $props();
+
+  let contentElement = $state<HTMLDivElement>();
+  let openLocal = $state(open);
+
+  const headerId = createId('collapse-header');
+  const contentId = createId('collapse-content');
+
+  function toggleLocal() {
+    openLocal = !openLocal;
+  }
+
+  let effectiveOpen = $derived(onToggle ? open : openLocal);
+  let maxHeight = $derived(effectiveOpen && contentElement ? `${contentElement.scrollHeight}px` : '0px');
+</script>
+
+<div class="border border-border rounded-md overflow-hidden {effectiveOpen ? 'glass-panel' : ''}">
+  <button
+    id={headerId}
+    type="button"
+    onclick={onToggle ?? toggleLocal}
+    class="w-full flex items-center justify-between p-4 text-left text-text font-medium hover:bg-base-3 transition-colors"
+    aria-expanded={effectiveOpen}
+    aria-controls={contentId}
+  >
+    <span>{title}</span>
+    <svg
+      class="w-5 h-5 transition-transform duration-300 ease-luxe {effectiveOpen ? 'rotate-180' : ''}"
+      fill="none"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
+    >
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+    </svg>
+  </button>
+
+  <div
+    bind:this={contentElement}
+    id={contentId}
+    class="overflow-hidden transition-[max-height] duration-300 ease-luxe"
+    style="max-height: {maxHeight};"
+    role="region"
+    aria-labelledby={headerId}
+  >
+    <div class="p-4 text-text-soft border-t border-border">
+      {@render children?.()}
+    </div>
+  </div>
+</div>

package/dist/components/utilities/Collapse.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    open: boolean;
+    title: string;
+    children?: Snippet;
+    onToggle?: () => void;
+}
+declare const Collapse: import("svelte").Component<Props, {}, "">;
+type Collapse = ReturnType<typeof Collapse>;
+export default Collapse;

package/dist/components/utilities/Portal.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  /**
+   * Portal component - teleports content to a different DOM location.
+   * 
+   * **Focus Management**: This component handles DOM manipulation only.
+   * For focus-sensitive content (modals, drawers, toasts), the parent component
+   * should manage focus using the patterns from Modal.svelte and Drawer.svelte:
+   * - Store previousFocus before opening
+   * - Focus appropriate element after mount
+   * - Restore focus on cleanup
+   * 
+   * **Stacking Coordination**: Multiple portals can coexist. For z-index stacking,
+   * manage via CSS classes on the portal children or implement a portal manager.
+   */
+  interface Props {
+    target?: HTMLElement | string;
+    children?: Snippet;
+  }
+
+  let { target = 'body', children }: Props = $props();
+
+  let mountElement = $state<HTMLElement | null>(null);
+
+  function portal(node: HTMLElement, currentTarget: HTMLElement) {
+    currentTarget.appendChild(node);
+    return {
+      update(newTarget: HTMLElement) {
+        // Handle target prop changes by moving node to new parent
+        if (newTarget !== currentTarget) {
+          newTarget.appendChild(node);
+        }
+      },
+      destroy() {
+        if (node.parentNode) {
+          node.parentNode.removeChild(node);
+        }
+      }
+    };
+  }
+
+  $effect(() => {
+    if (typeof document === 'undefined') return;
+
+    // Resolve target element
+    const targetElement = typeof target === 'string'
+      ? document.querySelector<HTMLElement>(target)
+      : target;
+
+    if (!targetElement) return;
+
+    // Create container div
+    const container = document.createElement('div');
+    targetElement.appendChild(container);
+    mountElement = container;
+
+    return () => {
+      // Cleanup: remove container from DOM
+      container.remove();
+      mountElement = null;
+    };
+  });
+</script>
+
+{#if mountElement}
+  {#if children}
+    <div use:portal={mountElement}>
+      {@render children()}
+    </div>
+  {/if}
+{/if}

package/dist/components/utilities/Portal.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { Snippet } from 'svelte';
+/**
+ * Portal component - teleports content to a different DOM location.
+ *
+ * **Focus Management**: This component handles DOM manipulation only.
+ * For focus-sensitive content (modals, drawers, toasts), the parent component
+ * should manage focus using the patterns from Modal.svelte and Drawer.svelte:
+ * - Store previousFocus before opening
+ * - Focus appropriate element after mount
+ * - Restore focus on cleanup
+ *
+ * **Stacking Coordination**: Multiple portals can coexist. For z-index stacking,
+ * manage via CSS classes on the portal children or implement a portal manager.
+ */
+interface Props {
+    target?: HTMLElement | string;
+    children?: Snippet;
+}
+declare const Portal: import("svelte").Component<Props, {}, "">;
+type Portal = ReturnType<typeof Portal>;
+export default Portal;