@runwisp/ui 0.4.0

package/src/lib/theme.css

@@ -0,0 +1,276 @@
+/* Copyright (c) PoppyCake, s.r.o. SPDX-License-Identifier: Apache-2.0 */
+
+@import "tailwindcss";
+@plugin "@tailwindcss/forms";
+@plugin "@tailwindcss/typography";
+
+/* RunWisp Design System — Tailwind v4 entrypoint.
+ *
+ * Raw OKLch palette + semantic tokens live in ./theme-tokens.css (plain CSS),
+ * so apps/docs (Starlight, no Tailwind pipeline) can consume the same source.
+ * This file republishes those tokens under Tailwind's --color-* namespace so
+ * utilities like `bg-wisp-500`, `text-surface`, etc. generate.
+ */
+
+@import "./theme-tokens.css";
+
+@import "@fontsource/tasa-orbiter/400.css";
+@import "@fontsource/tasa-orbiter/500.css";
+@import "@fontsource/tasa-orbiter/600.css";
+@import "@fontsource/tasa-orbiter/700.css";
+
+@theme {
+    /* Palette aliases — Tailwind utilities (bg-wisp-500, text-mist-900, …)
+     * resolve through to --rw-color-* declared in theme-tokens.css. */
+    --color-wisp-50: var(--rw-color-wisp-50);
+    --color-wisp-100: var(--rw-color-wisp-100);
+    --color-wisp-200: var(--rw-color-wisp-200);
+    --color-wisp-300: var(--rw-color-wisp-300);
+    --color-wisp-400: var(--rw-color-wisp-400);
+    --color-wisp-500: var(--rw-color-wisp-500);
+    --color-wisp-600: var(--rw-color-wisp-600);
+    --color-wisp-700: var(--rw-color-wisp-700);
+    --color-wisp-800: var(--rw-color-wisp-800);
+    --color-wisp-900: var(--rw-color-wisp-900);
+    --color-wisp-950: var(--rw-color-wisp-950);
+
+    --color-aurora-50: var(--rw-color-aurora-50);
+    --color-aurora-100: var(--rw-color-aurora-100);
+    --color-aurora-200: var(--rw-color-aurora-200);
+    --color-aurora-300: var(--rw-color-aurora-300);
+    --color-aurora-400: var(--rw-color-aurora-400);
+    --color-aurora-500: var(--rw-color-aurora-500);
+    --color-aurora-600: var(--rw-color-aurora-600);
+    --color-aurora-700: var(--rw-color-aurora-700);
+    --color-aurora-800: var(--rw-color-aurora-800);
+    --color-aurora-900: var(--rw-color-aurora-900);
+
+    --color-mist-50: var(--rw-color-mist-50);
+    --color-mist-100: var(--rw-color-mist-100);
+    --color-mist-200: var(--rw-color-mist-200);
+    --color-mist-300: var(--rw-color-mist-300);
+    --color-mist-400: var(--rw-color-mist-400);
+    --color-mist-500: var(--rw-color-mist-500);
+    --color-mist-600: var(--rw-color-mist-600);
+    --color-mist-700: var(--rw-color-mist-700);
+    --color-mist-800: var(--rw-color-mist-800);
+    --color-mist-900: var(--rw-color-mist-900);
+    --color-mist-950: var(--rw-color-mist-950);
+
+    --color-success-50: var(--rw-color-success-50);
+    --color-success-100: var(--rw-color-success-100);
+    --color-success-200: var(--rw-color-success-200);
+    --color-success-300: var(--rw-color-success-300);
+    --color-success-400: var(--rw-color-success-400);
+    --color-success-500: var(--rw-color-success-500);
+    --color-success-600: var(--rw-color-success-600);
+    --color-success-700: var(--rw-color-success-700);
+
+    --color-danger-50: var(--rw-color-danger-50);
+    --color-danger-100: var(--rw-color-danger-100);
+    --color-danger-200: var(--rw-color-danger-200);
+    --color-danger-300: var(--rw-color-danger-300);
+    --color-danger-400: var(--rw-color-danger-400);
+    --color-danger-500: var(--rw-color-danger-500);
+    --color-danger-600: var(--rw-color-danger-600);
+    --color-danger-700: var(--rw-color-danger-700);
+
+    --color-warning-50: var(--rw-color-warning-50);
+    --color-warning-100: var(--rw-color-warning-100);
+    --color-warning-200: var(--rw-color-warning-200);
+    --color-warning-300: var(--rw-color-warning-300);
+    --color-warning-400: var(--rw-color-warning-400);
+    --color-warning-500: var(--rw-color-warning-500);
+    --color-warning-600: var(--rw-color-warning-600);
+    --color-warning-700: var(--rw-color-warning-700);
+
+    /* Typography */
+    --font-sans: "TASA Orbiter", system-ui, -apple-system, sans-serif;
+    --font-mono: "JetBrains Mono", "Fira Code", monospace;
+
+    /* Font sizes */
+    --text-2xs: 0.625rem;
+    --text-xs: 0.75rem;
+    --text-sm: 0.875rem;
+    --text-base: 1rem;
+    --text-lg: 1.125rem;
+    --text-xl: 1.25rem;
+    --text-2xl: 1.5rem;
+    --text-3xl: 1.875rem;
+    --text-4xl: 2.25rem;
+
+    /* Spacing scale */
+    --spacing-px: 1px;
+    --spacing-0: 0;
+    --spacing-0\.5: 0.125rem;
+    --spacing-1: 0.25rem;
+    --spacing-1\.5: 0.375rem;
+    --spacing-2: 0.5rem;
+    --spacing-2\.5: 0.625rem;
+    --spacing-3: 0.75rem;
+    --spacing-3\.5: 0.875rem;
+    --spacing-4: 1rem;
+    --spacing-5: 1.25rem;
+    --spacing-6: 1.5rem;
+    --spacing-7: 1.75rem;
+    --spacing-8: 2rem;
+    --spacing-9: 2.25rem;
+    --spacing-10: 2.5rem;
+    --spacing-12: 3rem;
+    --spacing-14: 3.5rem;
+    --spacing-16: 4rem;
+    --spacing-20: 5rem;
+    --spacing-24: 6rem;
+
+    /* Border radius */
+    --radius-none: 0;
+    --radius-sm: 0.25rem;
+    --radius-md: 0.375rem;
+    --radius-lg: 0.5rem;
+    --radius-xl: 0.75rem;
+    --radius-2xl: 1rem;
+    --radius-3xl: 1.5rem;
+    --radius-full: 9999px;
+
+    /* Shadows — soft, ethereal */
+    --shadow-xs: 0 1px 2px 0 oklch(0.18 0.02 280 / 0.05);
+    --shadow-sm:
+        0 1px 3px 0 oklch(0.18 0.02 280 / 0.08), 0 1px 2px -1px oklch(0.18 0.02 280 / 0.08);
+    --shadow-md:
+        0 4px 6px -1px oklch(0.18 0.02 280 / 0.08), 0 2px 4px -2px oklch(0.18 0.02 280 / 0.08);
+    --shadow-lg:
+        0 10px 15px -3px oklch(0.18 0.02 280 / 0.08), 0 4px 6px -4px oklch(0.18 0.02 280 / 0.08);
+    --shadow-xl:
+        0 20px 25px -5px oklch(0.18 0.02 280 / 0.1), 0 8px 10px -6px oklch(0.18 0.02 280 / 0.1);
+
+    /* Glow effects for wisp theme */
+    --shadow-glow-sm: 0 0 10px oklch(0.58 0.18 270 / 0.15);
+    --shadow-glow-md: 0 0 20px oklch(0.58 0.18 270 / 0.2);
+    --shadow-glow-lg: 0 0 30px oklch(0.58 0.18 270 / 0.25);
+}
+
+/* Semantic Design Tokens — Tailwind utility aliases.
+ * Components use `bg-surface`, `text-primary`, etc.; the values live in
+ * theme-tokens.css under the --rw-* namespace and flip on light/dark. */
+
+@theme {
+    /* Surfaces */
+    --color-surface: var(--rw-surface);
+    --color-surface-raised: var(--rw-surface-raised);
+    --color-surface-overlay: var(--rw-surface-overlay);
+    --color-surface-sunken: var(--rw-surface-sunken);
+    /* On-surface text */
+    --color-on-surface: var(--rw-on-surface);
+    --color-on-surface-muted: var(--rw-on-surface-muted);
+    --color-on-surface-faint: var(--rw-on-surface-faint);
+    /* Borders */
+    --color-outline: var(--rw-outline);
+    --color-outline-hover: var(--rw-outline-hover);
+    --color-outline-faint: var(--rw-outline-faint);
+    --color-ring: var(--rw-ring);
+    --color-backdrop: var(--rw-backdrop);
+    /* Primary */
+    --color-primary: var(--rw-primary);
+    --color-primary-hover: var(--rw-primary-hover);
+    --color-primary-active: var(--rw-primary-active);
+    --color-on-primary: var(--rw-on-primary);
+    --color-primary-soft: var(--rw-primary-soft);
+    --color-primary-soft-text: var(--rw-primary-soft-text);
+    /* Danger */
+    --color-danger-surface: var(--rw-danger);
+    --color-danger-hover: var(--rw-danger-hover);
+    --color-danger-active: var(--rw-danger-active);
+    --color-on-danger: var(--rw-on-danger);
+    --color-danger-soft: var(--rw-danger-soft);
+    --color-danger-soft-text: var(--rw-danger-soft-text);
+    /* Success */
+    --color-success-surface: var(--rw-success);
+    --color-success-hover: var(--rw-success-hover);
+    --color-on-success: var(--rw-on-success);
+    --color-success-soft: var(--rw-success-soft);
+    --color-success-soft-text: var(--rw-success-soft-text);
+    /* Warning */
+    --color-warning-surface: var(--rw-warning);
+    --color-warning-hover: var(--rw-warning-hover);
+    --color-on-warning: var(--rw-on-warning);
+    --color-warning-soft: var(--rw-warning-soft);
+    --color-warning-soft-text: var(--rw-warning-soft-text);
+    /* Info */
+    --color-info: var(--rw-info);
+    --color-info-hover: var(--rw-info-hover);
+    --color-on-info: var(--rw-on-info);
+    --color-info-soft: var(--rw-info-soft);
+    --color-info-soft-text: var(--rw-info-soft-text);
+
+    /* Transition durations */
+    --duration-fast: 100ms;
+    --duration-normal: 200ms;
+    --duration-slow: 300ms;
+
+    /* Easings */
+    --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
+    --ease-in: cubic-bezier(0.4, 0, 1, 1);
+    --ease-out: cubic-bezier(0, 0, 0.2, 1);
+}
+
+/* Base styles */
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+html {
+    font-family: var(--font-sans);
+    font-size: 16px;
+    line-height: 1.5;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+    margin: 0;
+    padding: 0;
+    background-color: var(--rw-surface);
+    color: var(--rw-on-surface);
+}
+
+/* Utility classes for the design system */
+.rw-text-gradient {
+    background: linear-gradient(135deg, var(--rw-color-wisp-600), var(--rw-color-aurora-500));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+.rw-border-subtle {
+    border-color: var(--rw-color-mist-200);
+}
+
+.rw-bg-glass {
+    background: var(--rw-glass);
+    backdrop-filter: var(--rw-glass-blur);
+}
+
+/* Legacy aliases — prefer .rw-bg-glass which adapts to light/dark */
+.rw-bg-glass-dark {
+    background: var(--rw-glass);
+    backdrop-filter: var(--rw-glass-blur);
+}
+
+/* Utilities */
+.spinner {
+    animation: spin 1s linear infinite;
+}
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+.btn-scale {
+    transition: all 0.15s ease-in-out;
+}
+.btn-scale:active {
+    transform: scale(0.97);
+}

package/src/lib/utils/error.ts

@@ -0,0 +1,18 @@
+// SPDX-FileCopyrightText: PoppyCake, s.r.o.
+// SPDX-License-Identifier: Apache-2.0
+
+/**
+ * Extracts a human-readable message from an unknown caught value.
+ */
+export function extractErrorMessage(
+    err: unknown,
+    fallback = "An unexpected error occurred",
+): string {
+    if (err instanceof Error) {
+        return err.message || fallback;
+    }
+    if (typeof err === "string") {
+        return err || fallback;
+    }
+    return fallback;
+}

package/src/lib/utils/format.ts

@@ -0,0 +1,76 @@
+// SPDX-FileCopyrightText: PoppyCake, s.r.o.
+// SPDX-License-Identifier: Apache-2.0
+
+import { formatDistanceToNow } from "date-fns";
+
+export function formatBytes(bytes: number): string {
+    const units: [string, ...string[]] = ["B", "KB", "MB", "GB", "TB", "PB"];
+    let value = bytes;
+    let unitIndex = 0;
+    while (value >= 1024 && unitIndex < units.length - 1) {
+        value /= 1024;
+        unitIndex++;
+    }
+    const unit = units[unitIndex] ?? "B";
+    const digits = value < 10 && unitIndex > 0 ? 1 : 0;
+    return `${new Intl.NumberFormat("en", { maximumFractionDigits: digits }).format(value)} ${unit}`;
+}
+
+export function formatRelativeTime(dateStr: string | Date): string {
+    return formatDistanceToNow(new Date(dateStr), { addSuffix: true });
+}
+
+export function formatRelativeTimeWithAbsolute(dateStr: string | Date): string {
+    const date = new Date(dateStr);
+    const relative = formatDistanceToNow(date, { addSuffix: true }).replace("about ", "");
+    const now = new Date();
+    const diffMs = Math.abs(now.getTime() - date.getTime());
+    const diffDays = diffMs / (1000 * 60 * 60 * 24);
+
+    let absolute: string;
+    if (diffDays < 1) {
+        absolute = date.toLocaleTimeString(undefined, {
+            hour: "numeric",
+            minute: "2-digit",
+            hour12: false,
+        });
+    } else {
+        absolute = date.toLocaleDateString(undefined, { month: "short", day: "numeric" });
+    }
+
+    return `${relative} (${absolute})`;
+}
+
+export function formatDateTime(dateStr: string): string {
+    return new Date(dateStr).toLocaleString(undefined, {
+        year: "numeric",
+        month: "short",
+        day: "numeric",
+        hour: "numeric",
+        minute: "2-digit",
+    });
+}
+
+export function formatDuration(ms: number): string {
+    if (ms < 1000) return String(ms) + "ms";
+    const s = Math.floor(ms / 1000);
+    if (s < 60) return String(s) + "s";
+    const m = Math.floor(s / 60);
+    const rem = s % 60;
+    if (m < 60) return rem > 0 ? String(m) + "m " + String(rem) + "s" : String(m) + "m";
+    const h = Math.floor(m / 60);
+    const remM = m % 60;
+    return remM > 0 ? String(h) + "h " + String(remM) + "m" : String(h) + "h";
+}
+
+export function formatFullDateTime(date: Date | string): string {
+    return new Intl.DateTimeFormat(undefined, {
+        year: "numeric",
+        month: "short",
+        day: "2-digit",
+        hour: "2-digit",
+        minute: "2-digit",
+        second: "2-digit",
+        hour12: false,
+    }).format(new Date(date));
+}

package/src/lib/utils/id.ts

@@ -0,0 +1,6 @@
+// SPDX-FileCopyrightText: PoppyCake, s.r.o.
+// SPDX-License-Identifier: Apache-2.0
+
+export function formatShortId(id: string, length = 8): string {
+    return id.slice(-length);
+}

package/src/lib/utils/toast.svelte.ts

@@ -0,0 +1,87 @@
+// SPDX-FileCopyrightText: PoppyCake, s.r.o.
+// SPDX-License-Identifier: Apache-2.0
+
+import { generateUlid } from "@runwisp/common";
+
+export type ToastType = "success" | "error" | "warning" | "info";
+
+export interface Toast {
+    id: string;
+    type: ToastType;
+    message: string;
+    duration?: number;
+}
+
+const DEFAULT_DURATION = 5000;
+
+class ToastStore {
+    items = $state<Toast[]>([]);
+    private timers = new Map<string, ReturnType<typeof setTimeout>>();
+
+    add(type: ToastType, message: string, duration = DEFAULT_DURATION): string {
+        const existing = this.items.find((t) => t.type === type && t.message === message);
+        if (existing) {
+            this.refreshTimer(existing.id, duration);
+            return existing.id;
+        }
+
+        const id = generateUlid();
+        this.items = [...this.items, { id, type, message, duration }];
+        if (duration > 0) {
+            this.scheduleRemoval(id, duration);
+        }
+        return id;
+    }
+
+    private scheduleRemoval(id: string, duration: number) {
+        this.timers.set(
+            id,
+            setTimeout(() => {
+                this.remove(id);
+            }, duration),
+        );
+    }
+
+    private refreshTimer(id: string, duration: number) {
+        const existing = this.timers.get(id);
+        if (existing) clearTimeout(existing);
+        if (duration > 0) {
+            this.scheduleRemoval(id, duration);
+        }
+    }
+
+    remove(id: string) {
+        const timer = this.timers.get(id);
+        if (timer) {
+            clearTimeout(timer);
+            this.timers.delete(id);
+        }
+        this.items = this.items.filter((t) => t.id !== id);
+    }
+
+    success(message: string, duration?: number): string {
+        return this.add("success", message, duration);
+    }
+
+    error(message: string, duration?: number): string {
+        return this.add("error", message, duration);
+    }
+
+    warning(message: string, duration?: number): string {
+        return this.add("warning", message, duration);
+    }
+
+    info(message: string, duration?: number): string {
+        return this.add("info", message, duration);
+    }
+
+    clear() {
+        for (const timer of this.timers.values()) {
+            clearTimeout(timer);
+        }
+        this.timers.clear();
+        this.items = [];
+    }
+}
+
+export const toast = new ToastStore();

package/src/lib/utils/toast.ts

@@ -0,0 +1,60 @@
+// SPDX-FileCopyrightText: PoppyCake, s.r.o.
+// SPDX-License-Identifier: Apache-2.0
+
+import { generateUlid } from "@runwisp/common";
+
+export type ToastType = "success" | "error" | "warning" | "info";
+
+export interface Toast {
+    id: string;
+    type: ToastType;
+    message: string;
+    duration?: number;
+}
+
+const DEFAULT_DURATION = 5000;
+
+class ToastStore {
+    items = $state<Toast[]>([]);
+
+    add(type: ToastType, message: string, duration = DEFAULT_DURATION): string {
+        const id = generateUlid();
+        const t: Toast = { id, type, message, duration };
+
+        this.items = [...this.items, t];
+
+        if (duration > 0) {
+            setTimeout(() => {
+                this.remove(id);
+            }, duration);
+        }
+
+        return id;
+    }
+
+    remove(id: string) {
+        this.items = this.items.filter((t) => t.id !== id);
+    }
+
+    success(message: string, duration?: number): string {
+        return this.add("success", message, duration);
+    }
+
+    error(message: string, duration?: number): string {
+        return this.add("error", message, duration);
+    }
+
+    warning(message: string, duration?: number): string {
+        return this.add("warning", message, duration);
+    }
+
+    info(message: string, duration?: number): string {
+        return this.add("info", message, duration);
+    }
+
+    clear() {
+        this.items = [];
+    }
+}
+
+export const toast = new ToastStore();

package/src/routes/+layout.svelte

@@ -0,0 +1,10 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script lang="ts">
+    import "./layout.css";
+
+    const { children } = $props();
+</script>
+
+{@render children()}

package/src/routes/+page.svelte

@@ -0,0 +1,5 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<h1>@runwisp/ui</h1>
+<p>Run <code>bun run theme</code> to open Storybook for component development.</p>

package/src/routes/layout.css

@@ -0,0 +1,3 @@
+/* Copyright (c) PoppyCake, s.r.o. SPDX-License-Identifier: Apache-2.0 */
+
+@import "../lib/theme.css";

package/src/stories/Alert.stories.svelte

@@ -0,0 +1,64 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script module>
+    import { defineMeta } from "@storybook/addon-svelte-csf";
+    import Alert from "$lib/components/Alert.svelte";
+    import Button from "$lib/components/Button.svelte";
+
+    const { Story } = defineMeta({
+        title: "Core/Alert",
+        component: Alert,
+        tags: ["autodocs"],
+        argTypes: {
+            variant: {
+                control: "select",
+                options: ["info", "success", "warning", "danger"],
+            },
+        },
+    });
+</script>
+
+<Story name="Info" args={{ variant: "info", title: "Scheduled maintenance" }}>
+    The system will undergo maintenance on January 20th from 2:00 AM to 4:00 AM UTC.
+</Story>
+
+<Story name="Success" args={{ variant: "success", title: "Task completed successfully" }}>
+    The backup task has finished processing 1,234 records.
+</Story>
+
+<Story name="Warning" args={{ variant: "warning", title: "Approaching rate limit" }}>
+    You have used 80% of your monthly task executions.
+</Story>
+
+<Story name="Danger" args={{ variant: "danger", title: "Task execution failed" }}>
+    The sync-data task failed after 3 retry attempts. Check logs for details.
+</Story>
+
+<Story
+    name="Dismissible"
+    args={{ variant: "info", title: "New feature available", dismissible: true }}
+>
+    You can now schedule tasks using natural language expressions.
+</Story>
+
+<Story name="With Actions" asChild>
+    <Alert variant="danger" title="Task failed">
+        The scheduled task "backup-database" has failed.
+        {#snippet actions()}
+            <div class="flex gap-2">
+                <Button variant="danger" size="sm">View Logs</Button>
+                <Button variant="ghost" size="sm">Retry Task</Button>
+            </div>
+        {/snippet}
+    </Alert>
+</Story>
+
+<Story name="All Variants" asChild>
+    <div class="max-w-lg space-y-4">
+        <Alert variant="info" title="Information">This is an informational message.</Alert>
+        <Alert variant="success" title="Success">Operation completed successfully.</Alert>
+        <Alert variant="warning" title="Warning">Please review before proceeding.</Alert>
+        <Alert variant="danger" title="Error">An error has occurred.</Alert>
+    </div>
+</Story>

package/src/stories/Avatar.stories.svelte

@@ -0,0 +1,76 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script module>
+    import { defineMeta } from "@storybook/addon-svelte-csf";
+    import Avatar from "$lib/components/Avatar.svelte";
+
+    const { Story } = defineMeta({
+        title: "Core/Avatar",
+        component: Avatar,
+        tags: ["autodocs"],
+        argTypes: {
+            size: {
+                control: "select",
+                options: ["xs", "sm", "md", "lg", "xl"],
+            },
+            status: {
+                control: "select",
+                options: [undefined, "online", "offline", "busy", "away"],
+            },
+        },
+    });
+</script>
+
+<Story name="Default" args={{ name: "John Doe" }} />
+
+<Story
+    name="With Image"
+    args={{
+        name: "Jane Smith",
+        src: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&h=100&fit=crop",
+    }}
+/>
+
+<Story name="Sizes" asChild>
+    <div class="flex items-center gap-4">
+        <Avatar name="John Doe" size="xs" />
+        <Avatar name="John Doe" size="sm" />
+        <Avatar name="John Doe" size="md" />
+        <Avatar name="John Doe" size="lg" />
+        <Avatar name="John Doe" size="xl" />
+    </div>
+</Story>
+
+<Story name="With Status" asChild>
+    <div class="flex items-center gap-4">
+        <Avatar name="Online User" status="online" />
+        <Avatar name="Offline User" status="offline" />
+        <Avatar name="Busy User" status="busy" />
+        <Avatar name="Away User" status="away" />
+    </div>
+</Story>
+
+<Story name="Different Names" asChild>
+    <div class="flex items-center gap-4">
+        <Avatar name="Alice" />
+        <Avatar name="Bob Chen" />
+        <Avatar name="Charlie Davis" />
+        <Avatar name="Diana Evans" />
+        <Avatar name="Eve Franklin" />
+    </div>
+</Story>
+
+<Story name="Team Members" asChild>
+    <div class="flex items-center -space-x-3">
+        <Avatar name="Alice Johnson" size="md" />
+        <Avatar name="Bob Smith" size="md" />
+        <Avatar name="Charlie Brown" size="md" />
+        <Avatar name="Diana Ross" size="md" />
+        <div
+            class="flex h-10 w-10 items-center justify-center rounded-full bg-mist-200 text-sm font-medium text-mist-600 ring-2 ring-white"
+        >
+            +5
+        </div>
+    </div>
+</Story>