@mrintel/villain-ui 0.3.0 → 0.7.1

package/dist/components/overlays/Tooltip.svelte

@@ -1,115 +1,94 @@
-<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>
+<script lang="ts">import { createId } from '../../lib/internal/id.js';
+let { content, placement = 'top', delay = 200, trigger, children, class: className = '' } = $props();
+// Use children as fallback if trigger not provided
+const renderedTrigger = $derived(trigger ?? children);
+let visible = $state(false);
+let actualPlacement = $state(placement);
+let tooltipElement = $state();
+let timeoutId;
+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'
+};
+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={tooltipId}
+    onmouseenter={handleMouseEnter}
+    onmouseleave={handleMouseLeave}
+    onfocus={handleFocus}
+    onblur={handleBlur}
+    role="presentation"
+    class="contents"
+  >
+    {@render renderedTrigger?.()}
+  </div>
+
+  <div
+    bind:this={tooltipElement}
+    id={tooltipId}
+    role="tooltip"
+    aria-hidden={visible ? 'false' : 'true'}
+    class="absolute {placementClasses[actualPlacement]} z-[var(--z-50)] panel-floating rounded-[var(--radius-md)] px-4 py-2.5 text-sm text-text whitespace-nowrap pointer-events-none {className} {visible ? 'animate-[fade-in_0.15s_var(--ease-luxe)] opacity-100' : 'opacity-0 invisible'}"
+  >
+    {content}
+  </div>
+</div>

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

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

package/dist/components/typography/Code.svelte

@@ -1,14 +1,10 @@
-<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>
+<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/Heading.svelte

@@ -1,22 +1,15 @@
-<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>
+<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

@@ -1,6 +1,7 @@
 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;
 }

package/dist/components/typography/Text.svelte

@@ -1,24 +1,21 @@
-<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>
+<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

@@ -1,6 +1,7 @@
 interface Props {
     variant?: 'body' | 'caption';
-    color?: 'default' | 'soft' | 'muted';
+    color?: 'default' | 'soft' | 'muted' | 'success' | 'warning' | 'error';
+    weight?: 'normal' | 'bold' | 'semibold';
     as?: 'p' | 'span' | 'div';
     children?: import('svelte').Snippet;
 }

package/dist/components/utilities/Accordion.svelte

@@ -1,67 +1,54 @@
-<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>
+<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

@@ -4,10 +4,13 @@ interface AccordionItem {
     title: string;
     content: string | Snippet;
 }
-interface Props {
+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>;