@mrintel/villain-ui 0.2.0 → 0.3.0

package/dist/components/overlays/Modal.svelte

@@ -0,0 +1,130 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { createId } from '../../lib/internal/id.js';
+
+  interface Props {
+    open?: boolean;
+    title?: string;
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    closeOnBackdrop?: boolean;
+    closeOnEscape?: boolean;
+    children?: Snippet;
+    footer?: Snippet;
+  }
+
+  let {
+    open = $bindable(false),
+    title,
+    size = 'md',
+    closeOnBackdrop = true,
+    closeOnEscape = true,
+    children,
+    footer
+  }: Props = $props();
+
+  let modalElement = $state<HTMLDivElement>();
+  let previousFocus = $state<HTMLElement | null>(null);
+
+  const sizeClasses = {
+    sm: 'max-w-[28rem]',
+    md: 'max-w-[36rem]',
+    lg: 'max-w-[48rem]',
+    xl: 'max-w-[64rem]'
+  };
+
+  const titleId = createId('modal-title');
+
+  function handleClose() {
+    open = false;
+  }
+
+  function handleBackdropClick(event: MouseEvent) {
+    if (closeOnBackdrop && event.target === event.currentTarget) {
+      handleClose();
+    }
+  }
+
+  function handleEscape(event: KeyboardEvent) {
+    if (closeOnEscape && event.key === 'Escape') {
+      handleClose();
+    }
+  }
+
+  $effect(() => {
+    if (typeof document === 'undefined') return;
+    
+    if (open) {
+      // Store previous focus
+      previousFocus = document.activeElement as HTMLElement;
+
+      // Prevent body scroll
+      document.body.style.overflow = 'hidden';
+
+      // Add event listeners
+      document.addEventListener('keydown', handleEscape);
+
+      // Focus first interactive element
+      requestAnimationFrame(() => {
+        const firstInteractive = modalElement?.querySelector<HTMLElement>(
+          'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+        );
+        firstInteractive?.focus();
+      });
+
+      return () => {
+        // Restore body scroll
+        document.body.style.overflow = '';
+
+        // Remove event listeners
+        document.removeEventListener('keydown', handleEscape);
+
+        // Restore previous focus
+        previousFocus?.focus();
+      };
+    }
+  });
+</script>
+
+{#if open}
+  <div
+    class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-overlay backdrop-blur-md animate-[fade-in_0.2s_var(--ease-luxe)]"
+    onclick={handleBackdropClick}
+    role="presentation"
+  >
+    <div
+      bind:this={modalElement}
+      class="glass-panel rounded-xl shadow-deep w-full {sizeClasses[size]} animate-[fade-up_0.3s_var(--ease-luxe)] flex flex-col max-h-[90vh]"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby={title ? titleId : undefined}
+    >
+      {#if title}
+        <div class="flex items-center justify-between p-6 border-b border-border">
+          <h2 id={titleId} class="text-xl font-semibold text-text">
+            {title}
+          </h2>
+          <button
+            type="button"
+            onclick={handleClose}
+            class="text-text-soft hover:text-text transition-colors"
+            aria-label="Close modal"
+          >
+            <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="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+      {/if}
+
+      <div class="flex-1 overflow-y-auto p-6 max-h-[70vh]" style="scrollbar-width: thin; scrollbar-color: var(--color-accent) var(--color-base-3);">
+        {@render children?.()}
+      </div>
+
+      {#if footer}
+        <div class="flex items-center justify-end gap-3 p-6 border-t border-border">
+          {@render footer?.()}
+        </div>
+      {/if}
+    </div>
+  </div>
+{/if}

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

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    open?: boolean;
+    title?: string;
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    closeOnBackdrop?: boolean;
+    closeOnEscape?: boolean;
+    children?: Snippet;
+    footer?: Snippet;
+}
+declare const Modal: import("svelte").Component<Props, {}, "open">;
+type Modal = ReturnType<typeof Modal>;
+export default Modal;

package/dist/components/overlays/Popover.svelte

@@ -0,0 +1,131 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { createId } from '../../lib/internal/id.js';
+
+  interface Props {
+    open?: boolean;
+    placement?: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'right';
+    closeOnClickOutside?: boolean;
+    trigger?: Snippet;
+    children?: Snippet;
+  }
+
+  let {
+    open = $bindable(false),
+    placement = 'bottom',
+    closeOnClickOutside = true,
+    trigger,
+    children
+  }: Props = $props();
+
+  let popoverElement = $state<HTMLDivElement>();
+  let wrapperElement = $state<HTMLDivElement>();
+  let actualPlacement = $state(placement);
+
+  const popoverId = createId('popover');
+
+  const placementClasses = {
+    'top': 'bottom-full left-1/2 -translate-x-1/2 mb-2',
+    'top-start': 'bottom-full left-0 mb-2',
+    'top-end': 'bottom-full right-0 mb-2',
+    'bottom': 'top-full left-1/2 -translate-x-1/2 mt-2',
+    'bottom-start': 'top-full left-0 mt-2',
+    'bottom-end': 'top-full right-0 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',
+    'top-start': 'bottom-start',
+    'top-end': 'bottom-end',
+    'bottom': 'top',
+    'bottom-start': 'top-start',
+    'bottom-end': 'top-end',
+    'left': 'right',
+    'right': 'left'
+  } as const;
+
+  function toggleOpen() {
+    open = !open;
+  }
+
+  function handleClickOutside(event: MouseEvent) {
+    if (closeOnClickOutside && popoverElement && wrapperElement && !wrapperElement.contains(event.target as Node)) {
+      open = false;
+    }
+  }
+
+  function handleEscape(event: KeyboardEvent) {
+    if (event.key === 'Escape') {
+      open = false;
+    }
+  }
+
+  // Reset actualPlacement when visibility changes
+  $effect(() => {
+    if (!open) {
+      actualPlacement = placement;
+    }
+  });
+
+  // Check viewport bounds and flip placement if needed
+  $effect(() => {
+    if (typeof window === 'undefined') return;
+    
+    if (open && popoverElement) {
+      const rect = popoverElement.getBoundingClientRect();
+      const viewportWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
+
+      // Determine if current placement overflows and flip if needed
+      if (actualPlacement.startsWith('top') && rect.top < 0) {
+        actualPlacement = oppositePlacement[actualPlacement] || placement;
+      } else if (actualPlacement.startsWith('bottom') && rect.bottom > viewportHeight) {
+        actualPlacement = oppositePlacement[actualPlacement] || placement;
+      } else if (actualPlacement === 'left' && rect.left < 0) {
+        actualPlacement = 'right';
+      } else if (actualPlacement === 'right' && rect.right > viewportWidth) {
+        actualPlacement = 'left';
+      }
+    }
+  });
+
+  $effect(() => {
+    if (typeof document === 'undefined') return;
+    
+    if (open) {
+      document.addEventListener('click', handleClickOutside);
+      document.addEventListener('keydown', handleEscape);
+
+      return () => {
+        document.removeEventListener('click', handleClickOutside);
+        document.removeEventListener('keydown', handleEscape);
+      };
+    }
+  });
+</script>
+
+<div bind:this={wrapperElement} class="relative inline-block">
+  <button
+    type="button"
+    onclick={toggleOpen}
+    aria-haspopup="true"
+    aria-expanded={open}
+    aria-controls={open ? popoverId : undefined}
+    class="bg-transparent border-none p-0 cursor-pointer"
+  >
+    {@render trigger?.()}
+  </button>
+
+  {#if open}
+    <div
+      bind:this={popoverElement}
+      id={popoverId}
+      class="absolute {placementClasses[actualPlacement]} z-50 glass-panel rounded-lg shadow-deep animate-[fade-up_0.2s_var(--ease-luxe)]"
+      role="dialog"
+    >
+      {@render children?.()}
+    </div>
+  {/if}
+</div>

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

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    open?: boolean;
+    placement?: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'right';
+    closeOnClickOutside?: boolean;
+    trigger?: Snippet;
+    children?: Snippet;
+}
+declare const Popover: import("svelte").Component<Props, {}, "open">;
+type Popover = ReturnType<typeof Popover>;
+export default Popover;

package/dist/components/overlays/ProgressBar.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+  interface Props {
+    value: number;
+    max?: number;
+    size?: 'sm' | 'md' | 'lg';
+    showLabel?: boolean;
+    label?: string;
+  }
+
+  let {
+    value,
+    max = 100,
+    size = 'md',
+    showLabel = false,
+    label
+  }: Props = $props();
+
+  const percentage = $derived(Math.min(100, Math.max(0, (value / max) * 100)));
+
+  const heightClasses = {
+    sm: 'h-2',
+    md: 'h-3',
+    lg: 'h-4'
+  };
+</script>
+
+<div
+  class="relative bg-[var(--color-base-3)] border border-[var(--color-border)] rounded-[var(--radius-pill)] overflow-hidden shadow-[var(--shadow-deep)] {heightClasses[size]}"
+  role="progressbar"
+  aria-valuenow={value}
+  aria-valuemin="0"
+  aria-valuemax={max}
+  aria-label={label || `${percentage.toFixed(0)}% complete`}
+>
+  <div
+    class="h-full bg-[var(--color-accent)] accent-glow transition-all duration-500 ease-[var(--ease-luxe)]"
+    style="width: {percentage}%"
+  />
+
+  {#if showLabel}
+    <div class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-[var(--color-text)] text-glow">
+      {label || `${percentage.toFixed(0)}%`}
+    </div>
+  {/if}
+</div>

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

@@ -0,0 +1,10 @@
+interface Props {
+    value: number;
+    max?: number;
+    size?: 'sm' | 'md' | 'lg';
+    showLabel?: boolean;
+    label?: string;
+}
+declare const ProgressBar: import("svelte").Component<Props, {}, "">;
+type ProgressBar = ReturnType<typeof ProgressBar>;
+export default ProgressBar;

package/dist/components/overlays/SkeletonLoader.svelte

@@ -0,0 +1,82 @@
+<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>

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

@@ -0,0 +1,9 @@
+interface Props {
+    variant?: 'text' | 'circular' | 'rectangular';
+    width?: string;
+    height?: string;
+    count?: number;
+}
+declare const SkeletonLoader: import("svelte").Component<Props, {}, "">;
+type SkeletonLoader = ReturnType<typeof SkeletonLoader>;
+export default SkeletonLoader;

package/dist/components/overlays/Spinner.svelte

@@ -0,0 +1,43 @@
+<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>

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

@@ -0,0 +1,7 @@
+interface Props {
+    size?: 'sm' | 'md' | 'lg';
+    label?: string;
+}
+declare const Spinner: import("svelte").Component<Props, {}, "">;
+type Spinner = ReturnType<typeof Spinner>;
+export default Spinner;

package/dist/components/overlays/Toast.svelte

@@ -0,0 +1,140 @@
+<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}

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

@@ -0,0 +1,13 @@
+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;
+}
+declare const Toast: import("svelte").Component<Props, {}, "">;
+type Toast = ReturnType<typeof Toast>;
+export default Toast;