@mrintel/villain-ui 0.2.2 → 0.6.3

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,10 @@
+<script lang="ts">"use strict";
+let { children } = $props();
+</script>
+
+<code
+	class="inline-flex items-center transition-all duration-300 hover:shadow-[0_0_12px_var(--color-accent-overlay-30)]"
+	style="background: var(--color-accent-overlay-10); 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,15 @@
+<script lang="ts">"use strict";
+let { level = 1, glow = false, variant = 'default', as, children } = $props();
+const element = $derived(as ?? `h${level}`);
+const variantClasses = {
+    default: '',
+    accent: 'text-accent',
+    gradient: 'text-gradient'
+};
+const baseClasses = $derived(`transition-all duration-300 ${glow ? 'text-glow' : ''} ${variantClasses[variant]}`);
+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); letter-spacing: var(--text-h${level}-letter-spacing); 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,10 @@
+interface Props {
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+    glow?: boolean;
+    variant?: 'default' | 'accent' | 'gradient';
+    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,21 @@
+<script lang="ts">"use strict";
+let { variant = 'body', color = 'default', weight = 'normal', as = 'p', children } = $props();
+const colorMap = {
+    default: 'var(--color-text)',
+    soft: 'var(--color-text-soft)',
+    muted: 'var(--color-text-muted)',
+    success: 'var(--color-success)',
+    warning: 'var(--color-warning)',
+    error: 'var(--color-error)',
+};
+const weightMap = {
+    normal: '400',
+    semibold: '600',
+    bold: '700',
+};
+const styles = $derived(`font-size: var(--text-${variant}-size); line-height: var(--text-${variant}-line-height); font-weight: ${weightMap[weight] || '400'}; letter-spacing: var(--text-${variant}-letter-spacing); 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,10 @@
+interface Props {
+    variant?: 'body' | 'caption';
+    color?: 'default' | 'soft' | 'muted' | 'success' | 'warning' | 'error';
+    weight?: 'normal' | 'bold' | 'semibold';
+    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,54 @@
+<script lang="ts">import Collapse from './Collapse.svelte';
+let { items, openItems = $bindable([]), mode = 'single', onToggle, ontoggle } = $props();
+const onToggleCallback = $derived(onToggle ?? ontoggle);
+// Normalize openItems to array
+let openItemsArray = $derived(mode === 'single'
+    ? typeof openItems === 'string'
+        ? [openItems]
+        : []
+    : Array.isArray(openItems)
+        ? openItems
+        : []);
+function isItemOpen(id) {
+    return openItemsArray.includes(id);
+}
+function toggleItem(id) {
+    const wasOpen = isItemOpen(id);
+    if (mode === 'single') {
+        // Single mode: only one item open at a time
+        if (wasOpen) {
+            openItems = '';
+        }
+        else {
+            openItems = id;
+        }
+    }
+    else {
+        // Multiple mode: toggle independently
+        if (wasOpen) {
+            openItems = openItemsArray.filter(itemId => itemId !== id);
+        }
+        else {
+            openItems = [...openItemsArray, id];
+        }
+    }
+    // Call onToggle callback if provided
+    onToggleCallback?.(id, !wasOpen);
+}
+</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,17 @@
+import type { Snippet } from 'svelte';
+interface AccordionItem {
+    id: string;
+    title: string;
+    content: string | Snippet;
+}
+export interface Props {
+    items: AccordionItem[];
+    openItems?: string | string[];
+    mode?: 'single' | 'multiple';
+    onToggle?: (itemId: string, isOpen: boolean) => void;
+    /** @deprecated Use onToggle */
+    ontoggle?: (itemId: string, isOpen: boolean) => void;
+}
+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,124 @@
+<script lang="ts">let { items, currentIndex = $bindable(0), autoplay = false, autoplayInterval = 3000, showDots = true, showArrows = true } = $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) {
+    if (items.length === 0 || index < 0 || index >= items.length)
+        return;
+    currentIndex = index;
+}
+function handleTouchStart(event) {
+    isDragging = true;
+    startX = event.touches[0].clientX;
+    currentX = startX;
+}
+function handleTouchMove(event) {
+    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;
+    }
+});
+export {};
+</script>
+
+<div class="relative">
+  <div class="panel-raised rounded-[var(--radius-lg)] overflow-hidden">
+    <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>
+  </div>
+
+  {#if showArrows && items.length}
+    <button
+      type="button"
+      onclick={goToPrev}
+      class="absolute left-2 top-1/2 -translate-y-1/2 obsidian-surface metal-edge 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-2 top-1/2 -translate-y-1/2 obsidian-surface metal-edge 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,46 @@
+<script lang="ts">import { createId } from '../../lib/internal/id.js';
+let { open, title, children, onToggle } = $props();
+let contentElement = $state();
+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 ? 'panel-raised' : ''}">
+  <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/Hero.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">"use strict";
+let { title, text, features, children, class: className = '', ...restProps } = $props();
+</script>
+
+<div class="hero-section {className}" {...restProps}>
+	{#if title}
+		<div class="mb-4">
+			{@render title()}
+		</div>
+	{/if}
+
+	{#if text}
+		<div class="mb-8 mx-auto max-w-3xl">
+			{@render text()}
+		</div>
+	{/if}
+
+	{#if features}
+		<div class="feature-tags">
+			{@render features()}
+		</div>
+	{/if}
+
+	{#if children}
+		{@render children()}
+	{/if}
+</div>
+
+<style>
+	.feature-tags {
+		display: flex;
+		gap: 1rem;
+		justify-content: center;
+		flex-wrap: wrap;
+		margin-top: 2rem;
+	}
+
+	.hero-section {
+		text-align: center;
+		padding-bottom: 3rem;
+		margin-bottom: 3rem;
+	}</style>

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

@@ -0,0 +1,10 @@
+interface Props {
+    title?: import('svelte').Snippet;
+    text?: import('svelte').Snippet;
+    features?: import('svelte').Snippet;
+    children?: import('svelte').Snippet;
+    class?: string;
+}
+declare const Hero: import("svelte").Component<Props, {}, "">;
+type Hero = ReturnType<typeof Hero>;
+export default Hero;

package/dist/components/utilities/Portal.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">let { target = 'body', children } = $props();
+let mountElement = $state(null);
+function portal(node, currentTarget) {
+    currentTarget.appendChild(node);
+    return {
+        update(newTarget) {
+            // 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(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;
+    };
+});
+export {};
+</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;

package/dist/components/utilities/ScrollArea.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">let { height = '400px', children } = $props();
+export {};
+</script>
+
+<div
+  class="overflow-y-auto"
+  style="
+    height: {height};
+    scrollbar-width: thin;
+    scrollbar-color: var(--color-accent) var(--color-base-3);
+  "
+>
+  {@render children?.()}
+</div>
+
+<style>
+  div::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  div::-webkit-scrollbar-track {
+    background: var(--color-base-3);
+    border-radius: var(--radius-sm);
+  }
+
+  div::-webkit-scrollbar-thumb {
+    background: var(--color-accent);
+    border-radius: var(--radius-sm);
+  }
+
+  div::-webkit-scrollbar-thumb:hover {
+    background: var(--color-accent-soft);
+  }</style>

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

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