twintrinsic 0.0.1

package/dist/components/Toast/Toast.svelte

@@ -0,0 +1,313 @@
+<!--
+@component
+Toast - A component for displaying temporary notifications.
+Provides consistent styling, accessibility features, and various display options.
+
+Usage:
+```svelte
+<script>
+import { showToast } from "./toastStore"
+
+function notify() {
+  showToast({
+    message: "Operation completed successfully",
+    variant: "success",
+    duration: 3000,
+  })
+}
+</script>
+
+<button onclick={notify}>Show Toast</button>
+
+<Toast />
+```
+-->
+<script>
+  import { onMount, onDestroy } from 'svelte';
+  import { toastStore } from './toastStore';
+  import { fly, fade } from 'svelte/transition';
+
+  const {
+    /** @type {string} - Additional CSS classes */
+    class: className = '',
+
+    /** @type {string} - Position of toasts (top-right, top-left, bottom-right, bottom-left, top-center, bottom-center) */
+    position = 'bottom-right',
+
+    /** @type {number} - Maximum number of toasts to show at once */
+    maxToasts = 5,
+
+    /** @type {number} - Default duration in milliseconds */
+    duration = 5000,
+
+    /** @type {boolean} - Whether toasts can be dismissed by clicking */
+    dismissible = true,
+
+    /** @type {boolean} - Whether to pause toast timers on hover */
+    pauseOnHover = true
+  } = $props();
+
+  // Component state
+  let toasts = $state([]);
+  let container;
+  
+  // Determine position classes
+  const positionClasses = $derived({
+    'top-right': 'toast-top-right',
+    'top-left': 'toast-top-left',
+    'bottom-right': 'toast-bottom-right',
+    'bottom-left': 'toast-bottom-left',
+    'top-center': 'toast-top-center',
+    'bottom-center': 'toast-bottom-center'
+  }[position] || 'toast-bottom-right');
+  
+  // Subscribe to toast store
+  onMount(() => {
+    const unsubscribe = toastStore.subscribe(($toasts) => {
+      // Limit to maxToasts
+      toasts = $toasts.slice(0, maxToasts);
+    });
+    
+    return unsubscribe;
+  });
+  
+  /**
+   * Removes a toast by id
+   * @param {string} id - Toast id
+   */
+  function removeToast(id) {
+    toastStore.remove(id);
+  }
+  
+  /**
+   * Pauses a toast's timer
+   * @param {string} id - Toast id
+   */
+  function pauseToast(id) {
+    if (pauseOnHover) {
+      toastStore.pause(id);
+    }
+  }
+  
+  /**
+   * Resumes a toast's timer
+   * @param {string} id - Toast id
+   */
+  function resumeToast(id) {
+    if (pauseOnHover) {
+      toastStore.resume(id);
+    }
+  }
+  
+  // Clean up on component destroy
+  onDestroy(() => {
+    toastStore.clear();
+  });
+</script>
+
+<div
+  class="
+    toast-container
+    {positionClasses}
+    {className}
+  "
+  aria-live="polite"
+  aria-atomic="true"
+  bind:this={container}
+>
+  {#each toasts as toast (toast.id)}
+    <div
+      class="
+        toast
+        toast-{toast.variant || 'default'}
+      "
+      role="alert"
+      aria-live={toast.variant === 'error' ? 'assertive' : 'polite'}
+      onclick={() => dismissible && removeToast(toast.id)}
+      onmouseenter={() => pauseToast(toast.id)}
+      onmouseleave={() => resumeToast(toast.id)}
+      in:fly={{ y: 20, duration: 200 }}
+      out:fly={{ x: 20, duration: 200 }}
+    >
+      <div class="toast-content">
+        {#if toast.icon}
+          <div class="toast-icon">
+            {@html toast.icon}
+          </div>
+        {:else}
+          <div class="toast-icon">
+            {#if toast.variant === 'success'}
+              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
+              </svg>
+            {:else if toast.variant === 'error'}
+              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+              </svg>
+            {:else if toast.variant === 'warning'}
+              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="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"></path>
+              </svg>
+            {:else if toast.variant === 'info'}
+              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+              </svg>
+            {/if}
+          </div>
+        {/if}
+        
+        <div class="toast-message">
+          {#if toast.title}
+            <div class="toast-title">{toast.title}</div>
+          {/if}
+          <div>{toast.message}</div>
+        </div>
+        
+        {#if dismissible}
+          <button
+            type="button"
+            class="toast-close"
+            aria-label="Close notification"
+            onclick={(e) => { e.stopPropagation(); removeToast(toast.id) }}
+          >
+            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+            </svg>
+          </button>
+        {/if}
+      </div>
+      
+      {#if toast.progress !== false}
+        <div class="toast-progress-container">
+          <div 
+            class="toast-progress" 
+            style="width: {toast.progress || 100}%"
+          ></div>
+        </div>
+      {/if}
+    </div>
+  {/each}
+</div>
+
+<style>
+  @reference "../../twintrinsic.css";
+  
+  .toast-container {
+    @apply fixed z-50;
+    @apply flex flex-col gap-2;
+    @apply max-w-sm w-full;
+    @apply pointer-events-none;
+  }
+  
+  .toast-top-right {
+    @apply top-4 right-4;
+  }
+  
+  .toast-top-left {
+    @apply top-4 left-4;
+  }
+  
+  .toast-bottom-right {
+    @apply bottom-4 right-4;
+  }
+  
+  .toast-bottom-left {
+    @apply bottom-4 left-4;
+  }
+  
+  .toast-top-center {
+    @apply top-4 left-1/2 -translate-x-1/2;
+  }
+  
+  .toast-bottom-center {
+    @apply bottom-4 left-1/2 -translate-x-1/2;
+  }
+  
+  .toast {
+    @apply bg-surface dark:bg-surface;
+    @apply text-text dark:text-text;
+    @apply rounded-lg shadow-lg;
+    @apply overflow-hidden;
+    @apply pointer-events-auto;
+  }
+  
+  .toast-content {
+    @apply flex items-start p-4;
+  }
+  
+  .toast-icon {
+    @apply flex-shrink-0 mr-3 mt-0.5;
+  }
+  
+  .toast-message {
+    @apply flex-grow;
+  }
+  
+  .toast-title {
+    @apply font-medium mb-0.5;
+  }
+  
+  .toast-close {
+    @apply flex-shrink-0 ml-3 -mr-1 p-1;
+    @apply text-muted dark:text-muted;
+    @apply hover:text-text dark:hover:text-text;
+    @apply rounded-full;
+    @apply focus:outline-none focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400;
+    @apply transition-colors duration-150;
+  }
+  
+  .toast-progress-container {
+    @apply h-1 w-full bg-muted/10 dark:bg-muted/10;
+  }
+  
+  .toast-progress {
+    @apply h-full transition-all duration-150 ease-linear;
+  }
+  
+  /* Variant styles */
+  .toast-default .toast-progress {
+    @apply bg-muted dark:bg-muted;
+  }
+  
+  .toast-primary .toast-icon {
+    @apply text-primary-500 dark:text-primary-500;
+  }
+  
+  .toast-primary .toast-progress {
+    @apply bg-primary-500 dark:bg-primary-500;
+  }
+  
+  .toast-success .toast-icon {
+    @apply text-success-500 dark:text-success-500;
+  }
+  
+  .toast-success .toast-progress {
+    @apply bg-success-500 dark:bg-success-500;
+  }
+  
+  .toast-warning .toast-icon {
+    @apply text-warning-500 dark:text-warning-500;
+  }
+  
+  .toast-warning .toast-progress {
+    @apply bg-warning-500 dark:bg-warning-500;
+  }
+  
+  .toast-error .toast-icon {
+    @apply text-error-500 dark:text-error-500;
+  }
+  
+  .toast-error .toast-progress {
+    @apply bg-error-500 dark:bg-error-500;
+  }
+  
+  .toast-info .toast-icon {
+    @apply text-info-500 dark:text-info-500;
+  }
+  
+  .toast-info .toast-progress {
+    @apply bg-info-500 dark:bg-info-500;
+  }
+  
+  /* No custom animations needed - using Svelte transitions */
+</style>

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

@@ -0,0 +1,44 @@
+export default Toast;
+type Toast = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * Toast - A component for displaying temporary notifications.
+ * Provides consistent styling, accessibility features, and various display options.
+ *
+ * Usage:
+ * ```svelte
+ * <script>
+ * import { showToast } from "./toastStore"
+ *
+ * function notify() {
+ * showToast({
+ *   message: "Operation completed successfully",
+ *   variant: "success",
+ *   duration: 3000,
+ * })
+ * }
+ * </script>
+ *
+ * <button onclick={notify}>Show Toast</button>
+ *
+ * <Toast />
+ * ```
+ */
+declare const Toast: import("svelte").Component<{
+    class?: string;
+    position?: string;
+    maxToasts?: number;
+    duration?: number;
+    dismissible?: boolean;
+    pauseOnHover?: boolean;
+}, {}, "">;
+type $$ComponentProps = {
+    class?: string;
+    position?: string;
+    maxToasts?: number;
+    duration?: number;
+    dismissible?: boolean;
+    pauseOnHover?: boolean;
+};

package/dist/components/Toast/toastStore.d.ts

@@ -0,0 +1,40 @@
+export const toastStore: Object;
+export const showToast: any;
+export type Toast = {
+    /**
+     * - Unique identifier
+     */
+    id: string;
+    /**
+     * - Toast message content
+     */
+    message: string;
+    /**
+     * - Optional toast title
+     */
+    title?: string | undefined;
+    /**
+     * - Visual style variant (default, primary, success, warning, error, info)
+     */
+    variant?: string | undefined;
+    /**
+     * - Duration in milliseconds
+     */
+    duration?: number | undefined;
+    /**
+     * - Custom icon or false to hide icon
+     */
+    icon?: string | boolean | undefined;
+    /**
+     * - Whether toast can be dismissed by clicking
+     */
+    dismissible?: boolean | undefined;
+    /**
+     * - Progress percentage (0-100) or false to hide progress
+     */
+    progress?: number | undefined;
+    /**
+     * - Whether toast is in closing animation
+     */
+    closing?: boolean | undefined;
+};

package/dist/components/Toast/toastStore.js

@@ -0,0 +1,293 @@
+/**
+ * Toast notification store
+ * Manages toast notifications for the application
+ *
+ * @module toastStore
+ */
+
+import { writable } from "svelte/store"
+
+/**
+ * @typedef {Object} Toast
+ * @property {string} id - Unique identifier
+ * @property {string} message - Toast message content
+ * @property {string} [title] - Optional toast title
+ * @property {string} [variant] - Visual style variant (default, primary, success, warning, error, info)
+ * @property {number} [duration] - Duration in milliseconds
+ * @property {string|boolean} [icon] - Custom icon or false to hide icon
+ * @property {boolean} [dismissible] - Whether toast can be dismissed by clicking
+ * @property {number} [progress] - Progress percentage (0-100) or false to hide progress
+ * @property {boolean} [closing] - Whether toast is in closing animation
+ */
+
+/**
+ * Create a toast store
+ * @returns {Object} Toast store with methods
+ */
+function createToastStore() {
+  // Create writable store
+  const { subscribe, update } = writable(/** @type {Toast[]} */ ([]))
+
+  // Timer map to track toast timeouts
+  const timers = new Map()
+
+  /**
+   * Add a new toast
+   * @param {Object} toast - Toast configuration
+   * @param {string} toast.message - Toast message
+   * @param {string} [toast.title] - Toast title
+   * @param {string} [toast.variant] - Toast variant (default, primary, success, warning, error, info)
+   * @param {number} [toast.duration] - Duration in milliseconds
+   * @param {string|boolean} [toast.icon] - Custom icon or false to hide icon
+   * @param {boolean} [toast.dismissible] - Whether toast can be dismissed
+   * @param {boolean} [toast.progress] - Whether to show progress
+   * @returns {string} Toast ID
+   */
+  function add(toast) {
+    const id = crypto.randomUUID()
+    const duration = toast.duration || 5000
+
+    // Create toast object
+    const newToast = {
+      id,
+      message: toast.message,
+      title: toast.title,
+      variant: toast.variant || "default",
+      duration,
+      icon: toast.icon,
+      dismissible: toast.dismissible !== false,
+      progress: toast.progress !== false ? 100 : false,
+      closing: false,
+      createdAt: Date.now(),
+    }
+
+    // Add toast to store
+    update((toasts) => [newToast, ...toasts])
+
+    // Start timer for auto-removal
+    if (duration > 0) {
+      const timer = startTimer(id, duration)
+      timers.set(id, timer)
+    }
+
+    return id
+  }
+
+  /**
+   * Start a timer for toast removal
+   * @param {string} id - Toast ID
+   * @param {number} duration - Duration in milliseconds
+   * @returns {Object} Timer object with interval and timeout
+   */
+  function startTimer(id, duration) {
+    // Progress update interval (update every 100ms)
+    const interval = setInterval(() => {
+      update((toasts) => {
+        return toasts.map((toast) => {
+          if (toast.id === id && toast.progress !== false) {
+            const elapsed = Date.now() - toast.createdAt
+            const remaining = Math.max(0, duration - elapsed)
+            const progress = (remaining / duration) * 100
+
+            return { ...toast, progress }
+          }
+          return toast
+        })
+      })
+    }, 100)
+
+    // Timeout for removal
+    const timeout = setTimeout(() => {
+      // Start closing animation
+      update((toasts) => {
+        return toasts.map((toast) => {
+          if (toast.id === id) {
+            return { ...toast, closing: true }
+          }
+          return toast
+        })
+      })
+
+      // Remove after animation completes
+      setTimeout(() => {
+        remove(id)
+      }, 200) // Match animation duration
+    }, duration)
+
+    return { interval, timeout }
+  }
+
+  /**
+   * Remove a toast by ID
+   * @param {string} id - Toast ID
+   */
+  function remove(id) {
+    // Clear timers
+    if (timers.has(id)) {
+      const timer = timers.get(id)
+      clearInterval(timer.interval)
+      clearTimeout(timer.timeout)
+      timers.delete(id)
+    }
+
+    // Remove from store
+    update((toasts) => toasts.filter((toast) => toast.id !== id))
+  }
+
+  /**
+   * Pause a toast's timer
+   * @param {string} id - Toast ID
+   */
+  function pause(id) {
+    if (timers.has(id)) {
+      const timer = timers.get(id)
+      clearInterval(timer.interval)
+      clearTimeout(timer.timeout)
+
+      // Store remaining time
+      update((toasts) => {
+        return toasts.map((toast) => {
+          if (toast.id === id) {
+            const elapsed = Date.now() - toast.createdAt
+            const remaining = Math.max(0, toast.duration - elapsed)
+
+            return {
+              ...toast,
+              remaining,
+              paused: true,
+            }
+          }
+          return toast
+        })
+      })
+    }
+  }
+
+  /**
+   * Resume a toast's timer
+   * @param {string} id - Toast ID
+   */
+  function resume(id) {
+    update((toasts) => {
+      const toastToResume = toasts.find((toast) => toast.id === id && toast.paused)
+
+      if (toastToResume) {
+        // Update creation time to account for pause
+        const newCreatedAt = Date.now() - (toastToResume.duration - toastToResume.remaining)
+
+        // Restart timer
+        const timer = startTimer(id, toastToResume.remaining)
+        timers.set(id, timer)
+
+        // Update toast
+        return toasts.map((toast) => {
+          if (toast.id === id) {
+            return {
+              ...toast,
+              createdAt: newCreatedAt,
+              paused: false,
+              remaining: undefined,
+            }
+          }
+          return toast
+        })
+      }
+
+      return toasts
+    })
+  }
+
+  /**
+   * Clear all toasts
+   */
+  function clear() {
+    // Clear all timers
+    timers.forEach((timer) => {
+      clearInterval(timer.interval)
+      clearTimeout(timer.timeout)
+    })
+    timers.clear()
+
+    // Clear store
+    update(() => [])
+  }
+
+  /**
+   * Show a success toast
+   * @param {string|Object} message - Message or toast config
+   * @param {string} [title] - Toast title
+   * @param {number} [duration] - Duration in milliseconds
+   * @returns {string} Toast ID
+   */
+  function success(message, title, duration) {
+    const config =
+      typeof message === "string"
+        ? { message, title, duration }
+        : { ...message, variant: "success" }
+
+    return add({ ...config, variant: "success" })
+  }
+
+  /**
+   * Show an error toast
+   * @param {string|Object} message - Message or toast config
+   * @param {string} [title] - Toast title
+   * @param {number} [duration] - Duration in milliseconds
+   * @returns {string} Toast ID
+   */
+  function error(message, title, duration) {
+    const config =
+      typeof message === "string" ? { message, title, duration } : { ...message, variant: "error" }
+
+    return add({ ...config, variant: "error" })
+  }
+
+  /**
+   * Show a warning toast
+   * @param {string|Object} message - Message or toast config
+   * @param {string} [title] - Toast title
+   * @param {number} [duration] - Duration in milliseconds
+   * @returns {string} Toast ID
+   */
+  function warning(message, title, duration) {
+    const config =
+      typeof message === "string"
+        ? { message, title, duration }
+        : { ...message, variant: "warning" }
+
+    return add({ ...config, variant: "warning" })
+  }
+
+  /**
+   * Show an info toast
+   * @param {string|Object} message - Message or toast config
+   * @param {string} [title] - Toast title
+   * @param {number} [duration] - Duration in milliseconds
+   * @returns {string} Toast ID
+   */
+  function info(message, title, duration) {
+    const config =
+      typeof message === "string" ? { message, title, duration } : { ...message, variant: "info" }
+
+    return add({ ...config, variant: "info" })
+  }
+
+  return {
+    subscribe,
+    add,
+    remove,
+    pause,
+    resume,
+    clear,
+    success,
+    error,
+    warning,
+    info,
+  }
+}
+
+// Create and export toast store
+export const toastStore = createToastStore()
+
+// Alias for add method
+export const showToast = toastStore.add