@aiaiai-pt/design-system 0.5.7 → 0.5.8

package/components/NotificationBell.svelte

@@ -0,0 +1,293 @@
+<!--
+  @component NotificationBell
+
+  Bell icon button with unread badge, opening a dropdown of notifications.
+  Composes Button (ghost, iconOnly), Badge, Menu, and EmptyState.
+
+  Consumes --notification-* tokens from components.css.
+
+  @example
+  <NotificationBell
+    notifications={[
+      { id: '1', message: 'Maintenance started', eventType: 'maintenance_started', createdAt: '2026-04-16T10:00:00Z' },
+    ]}
+    unreadCount={3}
+    onmarkread={(id) => markAsRead(id)}
+    onmarkallread={() => markAllAsRead()}
+  />
+-->
+<script>
+  import Button from './Button.svelte';
+  import Badge from './Badge.svelte';
+  import EmptyState from './EmptyState.svelte';
+  import Popover from './Popover.svelte';
+
+  /**
+   * @typedef {{ id: string; message: string; eventType: string; entityType?: string; entityId?: string; createdAt?: string; read?: boolean }} Notification
+   */
+
+  let {
+    /** @type {Notification[]} */
+    notifications = [],
+    /** @type {number} */
+    unreadCount = 0,
+    /** @type {((id: string) => void) | undefined} */
+    onmarkread = undefined,
+    /** @type {(() => void) | undefined} */
+    onmarkallread = undefined,
+    /** @type {((notification: Notification) => void) | undefined} */
+    onclick = undefined,
+    /** @type {string} */
+    class: className = '',
+    ...rest
+  } = $props();
+
+  let open = $state(false);
+  /** @type {HTMLElement | undefined} */
+  let anchorRef = $state(undefined);
+
+  /** @type {Record<string, string>} */
+  const eventIcons = {
+    maintenance_started: 'play',
+    maintenance_completed: 'check-fat',
+    inspection_completed: 'clipboard-text',
+    reservation_approved: 'thumbs-up',
+    reservation_rejected: 'thumbs-down',
+  };
+
+  /** @type {Record<string, string>} */
+  const eventColors = {
+    maintenance_started: 'var(--color-info)',
+    maintenance_completed: 'var(--color-success)',
+    inspection_completed: 'var(--color-success)',
+    reservation_approved: 'var(--color-success)',
+    reservation_rejected: 'var(--color-destructive)',
+  };
+
+  /**
+   * @param {string | undefined} iso
+   * @returns {string}
+   */
+  function formatTime(iso) {
+    if (!iso) return '';
+    try {
+      const d = new Date(iso);
+      const now = new Date();
+      const diff = now.getTime() - d.getTime();
+      const mins = Math.floor(diff / 60000);
+      if (mins < 1) return 'Just now';
+      if (mins < 60) return `${mins}m ago`;
+      const hrs = Math.floor(mins / 60);
+      if (hrs < 24) return `${hrs}h ago`;
+      const days = Math.floor(hrs / 24);
+      return `${days}d ago`;
+    } catch {
+      return '';
+    }
+  }
+
+  function handleItemClick(notification) {
+    if (!notification.read && onmarkread) {
+      onmarkread(notification.id);
+    }
+    if (onclick) {
+      onclick(notification);
+    }
+  }
+</script>
+
+<div class="notification-bell {className}" {...rest}>
+  <div class="notification-bell-trigger">
+    <Button
+      variant="ghost"
+      size="md"
+      iconOnly
+      aria-label="Notifications"
+      bind:ref={anchorRef}
+      onclick={() => { open = !open; }}
+    >
+      {#snippet icon()}
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256">
+          <path d="M221.8,175.94C216.25,166.38,208,139.33,208,104a80,80,0,1,0-160,0c0,35.34-8.26,62.38-13.81,71.94A16,16,0,0,0,48,200H88.81a40,40,0,0,0,78.38,0H208a16,16,0,0,0,13.8-24.06ZM128,216a24,24,0,0,1-22.62-16h45.24A24,24,0,0,1,128,216ZM48,184c7.7-13.24,16-43.92,16-80a64,64,0,1,1,128,0c0,36.05,8.28,66.73,16,80Z"/>
+        </svg>
+      {/snippet}
+    </Button>
+
+    {#if unreadCount > 0}
+      <div class="notification-bell-badge">
+        <Badge variant="error">
+          {unreadCount > 99 ? '99+' : unreadCount}
+        </Badge>
+      </div>
+    {/if}
+  </div>
+
+  <Popover bind:open anchor={anchorRef} placement="bottom-end">
+    <div class="notification-panel" role="region" aria-label="Notifications">
+      <div class="notification-header">
+        <span class="notification-title">Notifications</span>
+        {#if unreadCount > 0 && onmarkallread}
+          <button class="notification-mark-all" onclick={onmarkallread}>
+            Mark all read
+          </button>
+        {/if}
+      </div>
+
+      {#if notifications.length === 0}
+        <div class="notification-empty">
+          <EmptyState heading="No notifications" body="You're all caught up" />
+        </div>
+      {:else}
+        <div class="notification-list">
+          {#each notifications as notification (notification.id)}
+            <button
+              class="notification-item"
+              class:notification-item--unread={!notification.read}
+              onclick={() => handleItemClick(notification)}
+            >
+              <div
+                class="notification-item-dot"
+                style:background={!notification.read
+                  ? (eventColors[notification.eventType] || 'var(--color-info)')
+                  : 'transparent'}
+              ></div>
+              <div class="notification-item-body">
+                <span class="notification-item-message">{notification.message}</span>
+                <span class="notification-item-time">{formatTime(notification.createdAt)}</span>
+              </div>
+            </button>
+          {/each}
+        </div>
+      {/if}
+    </div>
+  </Popover>
+</div>
+
+<style>
+  .notification-bell {
+    position: relative;
+    display: inline-flex;
+  }
+
+  .notification-bell-trigger {
+    position: relative;
+  }
+
+  .notification-bell-badge {
+    position: absolute;
+    top: -2px;
+    right: -2px;
+    pointer-events: none;
+  }
+
+  .notification-panel {
+    width: var(--notification-panel-width, 360px);
+    max-height: var(--notification-panel-max-height, 420px);
+    display: flex;
+    flex-direction: column;
+    background: var(--color-surface);
+    border-radius: var(--radius-lg);
+    overflow: hidden;
+  }
+
+  .notification-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--space-md) var(--space-lg);
+    border-bottom: var(--elevation-border);
+  }
+
+  .notification-title {
+    font-family: var(--type-heading-font);
+    font-size: var(--type-body-sm-size);
+    font-weight: 600;
+    color: var(--color-text);
+  }
+
+  .notification-mark-all {
+    all: unset;
+    cursor: pointer;
+    font-family: var(--type-label-font);
+    font-size: var(--type-label-size);
+    letter-spacing: var(--type-label-tracking);
+    color: var(--color-accent);
+    transition: opacity var(--duration-instant) var(--easing-default);
+  }
+
+  .notification-mark-all:hover {
+    opacity: 0.8;
+  }
+
+  .notification-mark-all:focus-visible {
+    outline: var(--focus-ring-width) solid var(--focus-ring-color);
+    outline-offset: var(--focus-ring-offset);
+  }
+
+  .notification-empty {
+    padding: var(--space-2xl) var(--space-lg);
+  }
+
+  .notification-list {
+    overflow-y: auto;
+    flex: 1;
+  }
+
+  .notification-item {
+    all: unset;
+    cursor: pointer;
+    display: flex;
+    align-items: flex-start;
+    gap: var(--space-sm);
+    padding: var(--space-sm) var(--space-lg);
+    width: 100%;
+    box-sizing: border-box;
+    transition: background var(--duration-instant) var(--easing-default);
+  }
+
+  .notification-item:hover {
+    background: var(--color-surface-secondary);
+  }
+
+  .notification-item:focus-visible {
+    outline: var(--focus-ring-width) solid var(--focus-ring-color);
+    outline-offset: calc(-1 * var(--focus-ring-width));
+  }
+
+  .notification-item--unread {
+    background: var(--color-surface);
+  }
+
+  .notification-item-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: var(--radius-pill);
+    flex-shrink: 0;
+    margin-top: 6px;
+  }
+
+  .notification-item-body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2xs);
+    flex: 1;
+    min-width: 0;
+  }
+
+  .notification-item-message {
+    font-family: var(--type-body-sm-font);
+    font-size: var(--type-body-sm-size);
+    color: var(--color-text);
+    line-height: 1.4;
+  }
+
+  .notification-item--unread .notification-item-message {
+    font-weight: 600;
+  }
+
+  .notification-item-time {
+    font-family: var(--type-label-font);
+    font-size: var(--type-label-size);
+    color: var(--color-text-muted);
+  }
+</style>

package/components/NotificationBell.svelte.d.ts

@@ -0,0 +1,39 @@
+export default NotificationBell;
+type NotificationBell = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * NotificationBell
+ *
+ * Bell icon button with unread badge, opening a dropdown of notifications.
+ * Composes Button (ghost, iconOnly), Badge, Menu, and EmptyState.
+ *
+ * Consumes --notification-* tokens from components.css.
+ *
+ * @example
+ * <NotificationBell
+ *   notifications={[
+ *     { id: '1', message: 'Maintenance started', eventType: 'maintenance_started', createdAt: '2026-04-16T10:00:00Z' },
+ *   ]}
+ *   unreadCount={3}
+ *   onmarkread={(id) => markAsRead(id)}
+ *   onmarkallread={() => markAllAsRead()}
+ * />
+ */
+declare const NotificationBell: import("svelte").Component<{
+    notifications?: any[];
+    unreadCount?: number;
+    onmarkread?: any;
+    onmarkallread?: any;
+    onclick?: any;
+    class?: string;
+} & Record<string, any>, {}, "">;
+type $$ComponentProps = {
+    notifications?: any[];
+    unreadCount?: number;
+    onmarkread?: any;
+    onmarkallread?: any;
+    onclick?: any;
+    class?: string;
+} & Record<string, any>;

package/components/ToastManager.svelte

@@ -0,0 +1,182 @@
+<!--
+  @component ToastManager
+
+  Lifecycle manager for Toast notifications — positioning, stacking,
+  auto-dismiss, and max-visible limit.  Wraps the visual Toast component.
+
+  Mount once in your root layout.  Use the exported `toasts` store to
+  push notifications from anywhere in the app.
+
+  Consumes --toast-manager-* tokens from components.css.
+
+  @example
+  <script>
+    import { ToastManager, toasts } from '@aiaiai-pt/design-system';
+
+    toasts.push({ variant: 'success', message: 'Saved!' });
+    toasts.push({ variant: 'error', message: 'Failed.', autoDismiss: 8000 });
+  </script>
+
+  <ToastManager />
+-->
+<script>
+  import Toast from './Toast.svelte';
+
+  /**
+   * @typedef {'info' | 'success' | 'warning' | 'error'} Variant
+   * @typedef {{ id: string; variant: Variant; message: string; actionLabel?: string; onaction?: () => void; autoDismiss?: number }} ToastItem
+   */
+
+  let {
+    /** @type {'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'} */
+    position = 'top-right',
+    /** @type {number} ms before auto-dismiss (0 = no auto-dismiss) */
+    autoDismiss = 5000,
+    /** @type {number} max visible toasts — oldest removed when exceeded */
+    maxVisible = 5,
+    /** @type {string} */
+    class: className = '',
+  } = $props();
+
+  /** @type {ToastItem[]} */
+  let items = $state([]);
+
+  /** @type {Map<string, ReturnType<typeof setTimeout>>} */
+  const timers = new Map();
+
+  let _idCounter = 0;
+
+  /**
+   * Add a toast.  Returns the toast id for manual removal.
+   * @param {{ variant?: Variant; message: string; actionLabel?: string; onaction?: () => void; autoDismiss?: number }} toast
+   * @returns {string}
+   */
+  export function push(toast) {
+    const id = `toast-${++_idCounter}-${Date.now()}`;
+    const item = {
+      id,
+      variant: toast.variant ?? 'info',
+      message: toast.message,
+      actionLabel: toast.actionLabel,
+      onaction: toast.onaction,
+      autoDismiss: toast.autoDismiss,
+    };
+
+    items = [...items, item];
+
+    // Enforce max visible
+    if (items.length > maxVisible) {
+      const removed = items[0];
+      items = items.slice(1);
+      _clearTimer(removed.id);
+    }
+
+    // Schedule auto-dismiss
+    const duration = item.autoDismiss ?? autoDismiss;
+    if (duration > 0) {
+      const timer = setTimeout(() => dismiss(id), duration);
+      timers.set(id, timer);
+    }
+
+    return id;
+  }
+
+  /**
+   * Remove a toast by id.
+   * @param {string} id
+   */
+  export function dismiss(id) {
+    _clearTimer(id);
+    items = items.filter((t) => t.id !== id);
+  }
+
+  /** Remove all toasts. */
+  export function clear() {
+    for (const [id] of timers) clearTimeout(timers.get(id));
+    timers.clear();
+    items = [];
+  }
+
+  /**
+   * @param {string} id
+   */
+  function _clearTimer(id) {
+    const timer = timers.get(id);
+    if (timer) {
+      clearTimeout(timer);
+      timers.delete(id);
+    }
+  }
+
+  const positionClasses = {
+    'top-right': 'tm-top tm-right',
+    'top-left': 'tm-top tm-left',
+    'bottom-right': 'tm-bottom tm-right',
+    'bottom-left': 'tm-bottom tm-left',
+  };
+</script>
+
+{#if items.length > 0}
+  <div
+    class="toast-manager {positionClasses[position]} {className}"
+    aria-live="polite"
+    aria-relevant="additions removals"
+  >
+    {#each items as item (item.id)}
+      <div class="toast-slot" data-toast-id={item.id}>
+        <Toast
+          variant={item.variant}
+          actionLabel={item.actionLabel}
+          onaction={item.onaction}
+        >
+          {@html item.message}
+        </Toast>
+      </div>
+    {/each}
+  </div>
+{/if}
+
+<style>
+  .toast-manager {
+    position: fixed;
+    z-index: var(--toast-manager-z, 60);
+    display: flex;
+    flex-direction: column;
+    gap: var(--toast-manager-gap, var(--space-sm));
+    padding: var(--toast-manager-padding, var(--space-lg));
+    pointer-events: none;
+  }
+
+  .toast-manager > :global(*) {
+    pointer-events: auto;
+  }
+
+  /* Position modifiers */
+  .tm-top { top: 0; }
+  .tm-bottom { bottom: 0; flex-direction: column-reverse; }
+  .tm-right { right: 0; align-items: flex-end; }
+  .tm-left { left: 0; align-items: flex-start; }
+
+  /* Entry animation */
+  .toast-slot {
+    animation: toast-enter var(--duration-normal) var(--easing-enter);
+  }
+
+  @keyframes toast-enter {
+    from {
+      opacity: 0;
+      transform: translateX(var(--toast-manager-enter-offset, 16px));
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  /* Reduced motion */
+  @media (prefers-reduced-motion: reduce) {
+    .toast-slot {
+      animation: none;
+    }
+  }
+</style>

package/components/ToastManager.svelte.d.ts

@@ -0,0 +1,59 @@
+export default ToastManager;
+type ToastManager = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+} & {
+    push: (toast: {
+        variant?: Variant;
+        message: string;
+        actionLabel?: string;
+        onaction?: () => void;
+        autoDismiss?: number;
+    }) => string;
+    dismiss: (id: string) => void;
+    clear: () => void;
+};
+/**
+ * ToastManager
+ *
+ * Lifecycle manager for Toast notifications — positioning, stacking,
+ * auto-dismiss, and max-visible limit.  Wraps the visual Toast component.
+ *
+ * Mount once in your root layout.  Use the exported `toasts` store to
+ * push notifications from anywhere in the app.
+ *
+ * Consumes --toast-manager-* tokens from components.css.
+ *
+ * @example
+ * <script>
+ *   import { ToastManager, toasts } from '@aiaiai-pt/design-system';
+ *
+ *   toasts.push({ variant: 'success', message: 'Saved!' });
+ *   toasts.push({ variant: 'error', message: 'Failed.', autoDismiss: 8000 });
+ * </script>
+ *
+ * <ToastManager />
+ */
+declare const ToastManager: import("svelte").Component<{
+    position?: string;
+    autoDismiss?: number;
+    maxVisible?: number;
+    class?: string;
+}, {
+    push: (toast: {
+        variant?: "info" | "success" | "warning" | "error";
+        message: string;
+        actionLabel?: string;
+        onaction?: () => void;
+        autoDismiss?: number;
+    }) => string;
+    dismiss: (id: string) => void;
+    clear: () => void;
+}, "">;
+type $$ComponentProps = {
+    position?: string;
+    autoDismiss?: number;
+    maxVisible?: number;
+    class?: string;
+};
+type Variant = "info" | "success" | "warning" | "error";

package/components/index.js

@@ -63,7 +63,9 @@ export { default as TabPanel } from "./TabPanel.svelte";
 // Feedback
 export { default as Alert } from "./Alert.svelte";
 export { default as Toast } from "./Toast.svelte";
+export { default as ToastManager } from "./ToastManager.svelte";
 export { default as EmptyState } from "./EmptyState.svelte";
+export { default as NotificationBell } from "./NotificationBell.svelte";
 
 // Navigation
 export { default as Sidebar } from "./Sidebar.svelte";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aiaiai-pt/design-system",
-  "version": "0.5.7",
+  "version": "0.5.8",
   "description": "Design system tokens and Svelte components for aiaiai products",
   "license": "MIT",
   "type": "module",

package/tokens/components.css

@@ -244,6 +244,16 @@
   --toast-font-size: var(--type-body-sm-size);
   --toast-max-width: 360px;
 
+  /* Toast Manager */
+  --toast-manager-z: 60;
+  --toast-manager-gap: var(--space-sm);
+  --toast-manager-padding: var(--space-lg);
+  --toast-manager-enter-offset: 16px;
+
+  /* Notification Bell */
+  --notification-panel-width: 360px;
+  --notification-panel-max-height: 420px;
+
   /* Empty state */
   --empty-icon-size: var(--icon-size-2xl);
   --empty-icon-color: var(--color-text-muted);