@mrintel/villain-ui 0.3.0 → 0.7.1

package/dist/components/overlays/SkeletonLoader.svelte

@@ -1,82 +1,66 @@
-<script lang="ts">
-  interface Props {
-    variant?: 'text' | 'circular' | 'rectangular';
-    width?: string;
-    height?: string;
-    count?: number;
-  }
-
-  let {
-    variant = 'rectangular',
-    width,
-    height,
-    count = 1
-  }: Props = $props();
-
-  const defaultDimensions = {
-    text: { width: '100%', height: '1rem' },
-    circular: { width: '3rem', height: '3rem' },
-    rectangular: { width: '100%', height: '8rem' }
-  };
-
-  const roundingClasses = {
-    text: 'rounded-[var(--radius-sm)]',
-    circular: 'rounded-[var(--radius-pill)]',
-    rectangular: 'rounded-[var(--radius-lg)]'
-  };
-
-  const finalWidth = width || defaultDimensions[variant].width;
-  const finalHeight = height || defaultDimensions[variant].height;
-</script>
-
-<div
-  aria-busy="true"
-  aria-live="polite"
-  aria-label="Loading content"
->
-  {#if variant === 'text'}
-    {#each Array(count) as _, i}
-      <div
-        class="bg-[var(--color-base-3)] border border-[var(--color-border)] {roundingClasses[variant]} mb-2 skeleton-shimmer"
-        style="width: {i === count - 1 ? '80%' : finalWidth}; height: {finalHeight};"
-      />
-    {/each}
-  {:else}
-    <div
-      class="bg-[var(--color-base-3)] border border-[var(--color-border)] {roundingClasses[variant]} skeleton-shimmer"
-      style="width: {finalWidth}; height: {finalHeight};"
-    />
-  {/if}
-</div>
-
-<style>
-  .skeleton-shimmer {
-    position: relative;
-    overflow: hidden;
-  }
-
-  .skeleton-shimmer::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 200%;
-    height: 100%;
-    background: linear-gradient(
-      90deg,
-      transparent,
-      rgba(127, 61, 255, 0.1),
-      transparent
-    );
-    animation: shimmer 1.5s ease-in-out infinite;
-  }
-
-  @keyframes shimmer {
-    0% {
-      transform: translateX(-100%);
-    }
-    100% {
-      transform: translateX(100%);
-    }
-  }
-</style>
+<script lang="ts">"use strict";
+let { variant = 'rectangular', width, height, count = 1 } = $props();
+const defaultDimensions = {
+    text: { width: '100%', height: '1rem' },
+    circular: { width: '3rem', height: '3rem' },
+    rectangular: { width: '100%', height: '8rem' }
+};
+const roundingClasses = {
+    text: 'rounded-[var(--radius-sm)]',
+    circular: 'rounded-[var(--radius-pill)]',
+    rectangular: 'rounded-[var(--radius-lg)]'
+};
+const finalWidth = width || defaultDimensions[variant].width;
+const finalHeight = height || defaultDimensions[variant].height;
+</script>
+
+<div
+  aria-busy="true"
+  aria-live="polite"
+  aria-label="Loading content"
+>
+  {#if variant === 'text'}
+    {#each Array(count) as _, i}
+      <div
+        class="bg-[var(--color-base-3)] border border-[var(--color-border)] {roundingClasses[variant]} mb-2 skeleton-shimmer"
+        style="width: {i === count - 1 ? '80%' : finalWidth}; height: {finalHeight};"
+      />
+    {/each}
+  {:else}
+    <div
+      class="bg-[var(--color-base-3)] border border-[var(--color-border)] {roundingClasses[variant]} skeleton-shimmer"
+      style="width: {finalWidth}; height: {finalHeight};"
+    />
+  {/if}
+</div>
+
+<style>
+  .skeleton-shimmer {
+    position: relative;
+    overflow: hidden;
+  }
+
+  .skeleton-shimmer::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 200%;
+    height: 100%;
+    background: linear-gradient(
+      90deg,
+      transparent,
+      var(--color-accent-overlay-10),
+      transparent
+    );
+    animation: shimmer 1.5s ease-in-out infinite;
+  }
+
+  @keyframes shimmer {
+    0% {
+      transform: translateX(-100%);
+    }
+    100% {
+      transform: translateX(100%);
+    }
+  }</style>

package/dist/components/overlays/Spinner.svelte

@@ -1,43 +1,33 @@
-<script lang="ts">
-  interface Props {
-    size?: 'sm' | 'md' | 'lg';
-    label?: string;
-  }
-
-  let {
-    size = 'md',
-    label
-  }: Props = $props();
-
-  const sizeClasses = {
-    sm: 'w-4 h-4 border-2',
-    md: 'w-8 h-8 border-4',
-    lg: 'w-12 h-12 border-4'
-  };
-</script>
-
-<div
-  class="inline-flex items-center justify-center"
-  role="status"
-  aria-live="polite"
-  aria-label={label || 'Loading'}
->
-  <div
-    class="{sizeClasses[size]} border-[var(--color-base-3)] border-t-[var(--color-accent)] rounded-[var(--radius-pill)] accent-glow animate-spin"
-  />
-  <span class="sr-only">{label || 'Loading'}</span>
-</div>
-
-<style>
-  .sr-only {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border-width: 0;
-  }
-</style>
+<script lang="ts">"use strict";
+let { size = 'md', label } = $props();
+const sizeClasses = {
+    sm: 'w-4 h-4 border-2',
+    md: 'w-8 h-8 border-4',
+    lg: 'w-12 h-12 border-4'
+};
+</script>
+
+<div
+  class="inline-flex items-center justify-center"
+  role="status"
+  aria-live="polite"
+  aria-label={label || 'Loading'}
+>
+  <div
+    class="{sizeClasses[size]} border-[var(--color-base-3)] border-t-[var(--color-accent)] rounded-[var(--radius-pill)] accent-glow animate-spin"
+  />
+  <span class="sr-only">{label || 'Loading'}</span>
+</div>
+
+<style>
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }</style>

package/dist/components/overlays/Toast.svelte

@@ -1,140 +1,111 @@
-<script lang="ts">
-  interface Props {
-    message: string;
-    variant?: 'info' | 'success' | 'warning' | 'error';
-    duration?: number;
-    position?: 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
-    dismissible?: boolean;
-    onclose?: () => void;
-    /** Index in toast stack for vertical offset. Pass the toast's position in a list to enable stacking. */
-    index?: number;
-  }
-
-  let {
-    message,
-    variant = 'info',
-    duration = 3000,
-    position = 'bottom-right',
-    dismissible = true,
-    onclose,
-    index = 0
-  }: Props = $props();
-
-  let visible = $state(true);
-  let isExiting = $state(false);
-
-  const positionClasses = {
-    'top-left': 'top-4 left-4',
-    'top-center': 'top-4 left-1/2 -translate-x-1/2',
-    'top-right': 'top-4 right-4',
-    'bottom-left': 'bottom-4 left-4',
-    'bottom-center': 'bottom-4 left-1/2 -translate-x-1/2',
-    'bottom-right': 'bottom-4 right-4'
-  };
-
-  const variantBorderClasses = {
-    info: 'border-l-4 border-[var(--color-accent)]',
-    success: 'border-l-4 border-[var(--color-success)]',
-    warning: 'border-l-4 border-[var(--color-warning)]',
-    error: 'border-l-4 border-[var(--color-error)]'
-  };
-
-  const variantIconClasses = {
-    info: 'text-[var(--color-accent-soft)]',
-    success: 'text-[var(--color-success)]',
-    warning: 'text-[var(--color-warning)]',
-    error: 'text-[var(--color-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'>;
-
-  const animationClasses = $derived(
-    position.startsWith('bottom')
-      ? 'animate-[fade-up_0.3s_var(--ease-luxe)]'
-      : 'animate-[fade-in_0.3s_var(--ease-luxe)]'
-  );
-
-  const stackOffset = $derived(
-    position.startsWith('bottom')
-      ? `translateY(-${index * 5}rem)`
-      : `translateY(${index * 5}rem)`
-  );
-
-  function handleClose() {
-    if (isExiting || !visible) return; // Prevent double-close
-    isExiting = true;
-    setTimeout(() => {
-      visible = false;
-      onclose?.();
-    }, 200); // Match fade-out animation duration
-  }
-
-  $effect(() => {
-    // Only auto-dismiss if toast is visible and duration is set
-    if (visible && !isExiting && duration > 0) {
-      const timer = setTimeout(() => {
-        handleClose();
-      }, duration);
-
-      return () => {
-        clearTimeout(timer);
-      };
-    }
-  });
-</script>
-
-{#if visible}
-  <div
-    class="fixed z-[100] {positionClasses[position]} {isExiting ? 'animate-[fade-out_0.2s_var(--ease-sharp)]' : animationClasses}"
-    style="transform: {stackOffset}"
-  >
-    <div
-      class="glass-panel rounded-[var(--radius-lg)] p-4 min-w-[20rem] max-w-md flex gap-3 items-start {variantBorderClasses[variant]}"
-      role={roleMap[variant]}
-      aria-live={ariaLiveMap[variant]}
-      aria-atomic="true"
-    >
-      <div class="flex-shrink-0 {variantIconClasses[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 text-sm text-[var(--color-text)]">
-        {message}
-      </div>
-
-      {#if dismissible}
-        <button
-          type="button"
-          onclick={handleClose}
-          class="flex-shrink-0 text-[var(--color-text-soft)] hover:text-[var(--color-text)] transition-colors"
-          aria-label="Dismiss notification"
-        >
-          <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>
-  </div>
-{/if}
+<script lang="ts">"use strict";
+let { message, variant = 'info', duration = 3000, position = 'bottom-right', dismissible = true, onClose, onclose, index = 0, icon } = $props();
+const onCloseCallback = $derived(onClose ?? onclose);
+let visible = $state(true);
+let isExiting = $state(false);
+const positionClasses = {
+    'top-left': 'top-4 left-4',
+    'top-center': 'top-4 left-1/2 -translate-x-1/2',
+    'top-right': 'top-4 right-4',
+    'bottom-left': 'bottom-4 left-4',
+    'bottom-center': 'bottom-4 left-1/2 -translate-x-1/2',
+    'bottom-right': 'bottom-4 right-4'
+};
+const variantBorderClasses = {
+    info: 'border-l-4 border-[var(--color-accent)]',
+    success: 'border-l-4 border-[var(--color-success)]',
+    warning: 'border-l-4 border-[var(--color-warning)]',
+    error: 'border-l-4 border-[var(--color-error)]'
+};
+const variantIconClasses = {
+    info: 'text-[var(--color-accent-soft)]',
+    success: 'text-[var(--color-success)]',
+    warning: 'text-[var(--color-warning)]',
+    error: 'text-[var(--color-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'
+};
+const animationClasses = $derived(position.startsWith('bottom')
+    ? 'animate-[fade-up_0.3s_var(--ease-luxe)]'
+    : 'animate-[fade-in_0.3s_var(--ease-luxe)]');
+const stackOffset = $derived(position.startsWith('bottom')
+    ? `translateY(-${index * 5}rem)`
+    : `translateY(${index * 5}rem)`);
+function handleClose() {
+    if (isExiting || !visible)
+        return; // Prevent double-close
+    isExiting = true;
+    setTimeout(() => {
+        visible = false;
+        onCloseCallback?.();
+    }, 200); // Match fade-out animation duration
+}
+$effect(() => {
+    // Only auto-dismiss if toast is visible and duration is set
+    if (visible && !isExiting && duration > 0) {
+        const timer = setTimeout(() => {
+            handleClose();
+        }, duration);
+        return () => {
+            clearTimeout(timer);
+        };
+    }
+});
+</script>
+
+{#if visible}
+  <div
+    class="fixed z-[100] {positionClasses[position]} {isExiting ? 'animate-[fade-out_0.2s_var(--ease-sharp)]' : animationClasses}"
+    style="transform: {stackOffset}"
+  >
+    <div
+      class="panel-floating rounded-[var(--radius-lg)] p-4 min-w-[20rem] max-w-md flex gap-3 items-start {variantBorderClasses[variant]}"
+      role={roleMap[variant]}
+      aria-live={ariaLiveMap[variant]}
+      aria-atomic="true"
+    >
+      <div class="flex-shrink-0 {variantIconClasses[variant]}">
+        {#if icon}
+          {@render icon()}
+        {: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 text-sm text-[var(--color-text)]">
+        {message}
+      </div>
+
+      {#if dismissible}
+        <button
+          type="button"
+          onclick={handleClose}
+          class="flex-shrink-0 text-[var(--color-text-soft)] hover:text-[var(--color-text)] transition-colors"
+          aria-label="Dismiss notification"
+        >
+          <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>
+  </div>
+{/if}

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

@@ -4,9 +4,12 @@ interface Props {
     duration?: number;
     position?: 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
     dismissible?: boolean;
+    onClose?: () => void;
+    /** @deprecated Use onClose */
     onclose?: () => void;
     /** Index in toast stack for vertical offset. Pass the toast's position in a list to enable stacking. */
     index?: number;
+    icon?: import('svelte').Snippet;
 }
 declare const Toast: import("svelte").Component<Props, {}, "">;
 type Toast = ReturnType<typeof Toast>;