@tangle-network/ui 1.0.0

package/src/primitives/toast.stories.tsx

@@ -0,0 +1,155 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { useState } from 'react'
+import type { Toast } from './toast'
+import { ToastContainer, ToastProvider, useToast } from './toast'
+
+const meta: Meta = {
+  title: 'Primitives/Toast',
+  parameters: { layout: 'centered', backgrounds: { default: 'dark' } },
+}
+
+export default meta
+type Story = StoryObj
+
+// Static display of all variants side by side (no auto-dismiss)
+export const AllVariants: Story = {
+  name: 'All Variants',
+  render: () => {
+    const [toasts, setToasts] = useState<Toast[]>([
+      {
+        id: '1',
+        variant: 'success',
+        title: 'Session started',
+        description: 'sess_01j9x8k2m is running in us-east-1.',
+      },
+      {
+        id: '2',
+        variant: 'error',
+        title: 'Session failed to start',
+        description: 'Container exited with code 1. Check image pull logs.',
+      },
+      {
+        id: '3',
+        variant: 'warning',
+        title: 'Session nearing timeout',
+        description: 'sess_01j9x7r9 will auto-terminate in 5 minutes.',
+      },
+      {
+        id: '4',
+        variant: 'info',
+        title: 'Snapshot created',
+        description: 'snap_01j9xa1b2 saved successfully.',
+      },
+      {
+        id: '5',
+        variant: 'default',
+        title: 'Copied to clipboard',
+      },
+    ])
+
+    return (
+      <div className="flex flex-col gap-2 w-96">
+        <ToastContainer toasts={toasts} onDismiss={(id) => setToasts((t) => t.filter((x) => x.id !== id))} />
+        {toasts.map((t) => (
+          // Render inline for story visibility (not fixed positioned)
+          <div
+            key={t.id}
+            className="pointer-events-auto relative flex w-full items-center justify-between gap-3 overflow-hidden rounded-lg border p-4 shadow-lg"
+            style={{
+              borderColor:
+                t.variant === 'success'
+                  ? 'rgb(34 197 94 / 0.2)'
+                  : t.variant === 'error'
+                    ? 'rgb(239 68 68 / 0.2)'
+                    : t.variant === 'warning'
+                      ? 'rgb(234 179 8 / 0.2)'
+                      : t.variant === 'info'
+                        ? 'rgb(59 130 246 / 0.2)'
+                        : undefined,
+              background:
+                t.variant === 'success'
+                  ? 'rgb(34 197 94 / 0.1)'
+                  : t.variant === 'error'
+                    ? 'rgb(239 68 68 / 0.1)'
+                    : t.variant === 'warning'
+                      ? 'rgb(234 179 8 / 0.1)'
+                      : t.variant === 'info'
+                        ? 'rgb(59 130 246 / 0.1)'
+                        : undefined,
+            }}
+          >
+            <div>
+              <p
+                className="font-medium text-sm"
+                style={{
+                  color:
+                    t.variant === 'success'
+                      ? 'rgb(74 222 128)'
+                      : t.variant === 'error'
+                        ? 'rgb(248 113 113)'
+                        : t.variant === 'warning'
+                          ? 'rgb(250 204 21)'
+                          : t.variant === 'info'
+                            ? 'rgb(96 165 250)'
+                            : undefined,
+                }}
+              >
+                {t.title}
+              </p>
+              {t.description && (
+                <p className="mt-0.5 text-sm text-muted-foreground">{t.description}</p>
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+    )
+  },
+}
+
+function ToastDemo() {
+  const { success, error, warning, info, toast } = useToast()
+  return (
+    <div className="flex flex-wrap gap-2">
+      <button
+        onClick={() => success('Session started', 'sess_01j9x8k2m is running in us-east-1.')}
+        className="rounded-md bg-green-600/20 border border-green-500/30 px-3 py-2 text-sm text-green-400 hover:bg-green-600/30"
+      >
+        Success toast
+      </button>
+      <button
+        onClick={() => error('Session failed', 'Container exited with code 1.')}
+        className="rounded-md bg-red-600/20 border border-red-500/30 px-3 py-2 text-sm text-red-400 hover:bg-red-600/30"
+      >
+        Error toast
+      </button>
+      <button
+        onClick={() => warning('Session nearing timeout', 'Auto-terminate in 5 minutes.')}
+        className="rounded-md bg-yellow-600/20 border border-yellow-500/30 px-3 py-2 text-sm text-yellow-400 hover:bg-yellow-600/30"
+      >
+        Warning toast
+      </button>
+      <button
+        onClick={() => info('Snapshot saved', 'snap_01j9xa1b2 created successfully.')}
+        className="rounded-md bg-blue-600/20 border border-blue-500/30 px-3 py-2 text-sm text-blue-400 hover:bg-blue-600/30"
+      >
+        Info toast
+      </button>
+      <button
+        onClick={() => toast({ title: 'Copied to clipboard' })}
+        className="rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground hover:bg-muted"
+      >
+        Default toast
+      </button>
+    </div>
+  )
+}
+
+export const Interactive: Story = {
+  name: 'Interactive (with Provider)',
+  render: () => (
+    <ToastProvider>
+      <ToastDemo />
+    </ToastProvider>
+  ),
+}

package/src/primitives/toast.tsx

@@ -0,0 +1,190 @@
+"use client";
+
+import { cva } from "class-variance-authority";
+import {
+  AlertCircle,
+  AlertTriangle,
+  CheckCircle2,
+  Info,
+  X,
+} from "lucide-react";
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+const toastVariants = cva(
+  "pointer-events-auto relative flex w-full items-center justify-between gap-3 overflow-hidden rounded-lg border p-4 shadow-lg transition-all",
+  {
+    variants: {
+      variant: {
+        default: "border-border bg-background text-foreground",
+        success: "border-[var(--surface-success-border)] bg-[var(--surface-success-bg)] text-[var(--surface-success-text)]",
+        error: "border-[var(--surface-danger-border)] bg-[var(--surface-danger-bg)] text-[var(--surface-danger-text)]",
+        warning: "border-[var(--surface-warning-border)] bg-[var(--surface-warning-bg)] text-[var(--surface-warning-text)]",
+        info: "border-[var(--surface-info-border)] bg-[var(--surface-info-bg)] text-[var(--surface-info-text)]",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+const icons = {
+  success: CheckCircle2,
+  error: AlertCircle,
+  warning: AlertTriangle,
+  info: Info,
+  default: Info,
+};
+
+export interface Toast {
+  id: string;
+  title: string;
+  description?: string;
+  variant?: "default" | "success" | "error" | "warning" | "info";
+  duration?: number;
+}
+
+interface ToastProps extends Toast {
+  onDismiss: (id: string) => void;
+}
+
+function ToastComponent({
+  id,
+  title,
+  description,
+  variant = "default",
+  onDismiss,
+}: ToastProps) {
+  const Icon = icons[variant];
+
+  return (
+    <div
+      className={cn(toastVariants({ variant }))}
+      role="alert"
+      aria-live="polite"
+    >
+      <div className="flex items-start gap-3">
+        <Icon className="h-5 w-5 shrink-0" aria-hidden="true" />
+        <div className="flex-1">
+          <p className="font-medium text-sm">{title}</p>
+          {description && (
+            <p className="mt-1 text-sm opacity-80">{description}</p>
+          )}
+        </div>
+      </div>
+      <button
+        type="button"
+        onClick={() => onDismiss(id)}
+        className="shrink-0 rounded-md p-1 opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2"
+        aria-label="Dismiss notification"
+      >
+        <X className="h-4 w-4" />
+      </button>
+    </div>
+  );
+}
+
+interface ToastContainerProps {
+  toasts: Toast[];
+  onDismiss: (id: string) => void;
+}
+
+export function ToastContainer({ toasts, onDismiss }: ToastContainerProps) {
+  return (
+    <div
+      className="fixed right-4 bottom-4 z-50 flex max-w-md flex-col gap-2"
+      aria-label="Notifications"
+    >
+      {toasts.map((toast) => (
+        <ToastComponent key={toast.id} {...toast} onDismiss={onDismiss} />
+      ))}
+    </div>
+  );
+}
+
+// Toast Context and Hook
+type ToastInput = Omit<Toast, "id">;
+
+interface ToastContextValue {
+  toasts: Toast[];
+  toast: (input: ToastInput) => void;
+  success: (title: string, description?: string) => void;
+  error: (title: string, description?: string) => void;
+  warning: (title: string, description?: string) => void;
+  info: (title: string, description?: string) => void;
+  dismiss: (id: string) => void;
+}
+
+const ToastContext = React.createContext<ToastContextValue | null>(null);
+
+export function ToastProvider({ children }: { children: React.ReactNode }) {
+  const [toasts, setToasts] = React.useState<Toast[]>([]);
+
+  const dismiss = React.useCallback((id: string) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+
+  const toast = React.useCallback(
+    (input: ToastInput) => {
+      const id = Math.random().toString(36).slice(2);
+      const newToast: Toast = { id, ...input };
+      setToasts((prev) => [...prev, newToast]);
+
+      // Auto-dismiss after duration
+      const duration = input.duration ?? 5000;
+      if (duration > 0) {
+        setTimeout(() => dismiss(id), duration);
+      }
+    },
+    [dismiss],
+  );
+
+  const success = React.useCallback(
+    (title: string, description?: string) => {
+      toast({ title, description, variant: "success" });
+    },
+    [toast],
+  );
+
+  const error = React.useCallback(
+    (title: string, description?: string) => {
+      toast({ title, description, variant: "error" });
+    },
+    [toast],
+  );
+
+  const warning = React.useCallback(
+    (title: string, description?: string) => {
+      toast({ title, description, variant: "warning" });
+    },
+    [toast],
+  );
+
+  const info = React.useCallback(
+    (title: string, description?: string) => {
+      toast({ title, description, variant: "info" });
+    },
+    [toast],
+  );
+
+  const value = React.useMemo(
+    () => ({ toasts, toast, success, error, warning, info, dismiss }),
+    [toasts, toast, success, error, warning, info, dismiss],
+  );
+
+  return (
+    <ToastContext.Provider value={value}>
+      {children}
+      <ToastContainer toasts={toasts} onDismiss={dismiss} />
+    </ToastContext.Provider>
+  );
+}
+
+export function useToast() {
+  const context = React.useContext(ToastContext);
+  if (!context) {
+    throw new Error("useToast must be used within a ToastProvider");
+  }
+  return context;
+}

package/src/primitives/upload-progress.stories.tsx

@@ -0,0 +1,120 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { UploadProgress, type UploadFile } from './upload-progress'
+
+const meta: Meta<typeof UploadProgress> = {
+  title: 'Primitives/UploadProgress',
+  component: UploadProgress,
+  parameters: { layout: 'centered', backgrounds: { default: 'dark' } },
+  decorators: [
+    (Story) => (
+      <div className="w-[420px]">
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof UploadProgress>
+
+const pending: UploadFile = {
+  id: '1',
+  name: 'dataset.csv',
+  size: 204800,
+  status: 'pending',
+}
+
+const uploading45: UploadFile = {
+  id: '2',
+  name: 'report-q4-2024.pdf',
+  size: 1572864,
+  status: 'uploading',
+  progress: 45,
+}
+
+const uploading0: UploadFile = {
+  id: '3',
+  name: 'model-weights.bin',
+  size: 52428800,
+  status: 'uploading',
+  progress: 0,
+}
+
+const complete: UploadFile = {
+  id: '4',
+  name: 'config.json',
+  size: 2048,
+  status: 'complete',
+}
+
+const error: UploadFile = {
+  id: '5',
+  name: 'too-large.zip',
+  size: 524288000,
+  status: 'error',
+  error: 'File exceeds 500 MB limit',
+}
+
+export const Pending: Story = {
+  name: 'Pending',
+  args: { files: [pending] },
+}
+
+export const UploadingStart: Story = {
+  name: 'Uploading — 0%',
+  args: { files: [uploading0], onRemove: (id) => console.log('remove', id) },
+}
+
+export const UploadingMid: Story = {
+  name: 'Uploading — 45%',
+  args: { files: [uploading45], onRemove: (id) => console.log('remove', id) },
+}
+
+export const UploadingAlmostDone: Story = {
+  name: 'Uploading — 90%',
+  args: {
+    files: [{ ...uploading45, progress: 90, name: 'export-final.xlsx' }],
+    onRemove: (id) => console.log('remove', id),
+  },
+}
+
+export const Complete: Story = {
+  name: 'Complete',
+  args: { files: [complete], onRemove: (id) => console.log('remove', id) },
+}
+
+export const Error: Story = {
+  name: 'Error with retry',
+  args: {
+    files: [error],
+    onRemove: (id) => console.log('remove', id),
+    onRetry: (id) => console.log('retry', id),
+  },
+}
+
+export const ErrorNoRetry: Story = {
+  name: 'Error — no retry handler',
+  args: {
+    files: [{ ...error, error: 'Network timeout' }],
+    onRemove: (id) => console.log('remove', id),
+  },
+}
+
+export const MixedQueue: Story = {
+  name: 'Mixed queue',
+  args: {
+    files: [complete, uploading45, pending, error],
+    onRemove: (id) => console.log('remove', id),
+    onRetry: (id) => console.log('retry', id),
+  },
+}
+
+export const Empty: Story = {
+  name: 'Empty (renders nothing)',
+  args: { files: [] },
+}
+
+export const NoActions: Story = {
+  name: 'No remove / retry handlers',
+  args: { files: [complete, uploading45, error] },
+}

package/src/primitives/upload-progress.tsx

@@ -0,0 +1,110 @@
+/**
+ * UploadProgress — file upload status indicators.
+ *
+ * Shows a list of files being uploaded with progress bars,
+ * completion checkmarks, and error states.
+ */
+
+import { AlertCircle, CheckCircle2, FileText, Loader2, RefreshCw, X } from "lucide-react";
+import { cn } from "../lib/utils";
+
+export interface UploadFile {
+  id: string;
+  name: string;
+  size: number;
+  status: "pending" | "uploading" | "complete" | "error";
+  progress?: number; // 0-100
+  error?: string;
+}
+
+export interface UploadProgressProps {
+  files: UploadFile[];
+  onRemove?: (id: string) => void;
+  onRetry?: (id: string) => void;
+  className?: string;
+}
+
+function formatSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes}B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)}KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)}MB`;
+}
+
+export function UploadProgress({ files, onRemove, onRetry, className }: UploadProgressProps) {
+  if (files.length === 0) return null;
+
+  return (
+    <div className={cn("space-y-2", className)}>
+      {files.map((file) => (
+        <div
+          key={file.id}
+          className={cn(
+            "flex items-center gap-3 rounded-lg border px-3 py-2 text-sm",
+            file.status === "error"
+              ? "border-[var(--surface-danger-border)] bg-[var(--surface-danger-bg)]"
+              : file.status === "complete"
+                ? "border-[var(--surface-success-border)] bg-[var(--surface-success-bg)]"
+                : "border-border bg-card",
+          )}
+        >
+          {/* Icon */}
+          {file.status === "complete" && (
+            <CheckCircle2 className="h-4 w-4 shrink-0 text-[var(--surface-success-text)]" />
+          )}
+          {file.status === "error" && (
+            <AlertCircle className="h-4 w-4 shrink-0 text-[var(--surface-danger-text)]" />
+          )}
+          {file.status === "uploading" && (
+            <Loader2 className="h-4 w-4 shrink-0 animate-spin text-primary" />
+          )}
+          {file.status === "pending" && (
+            <FileText className="h-4 w-4 shrink-0 text-muted-foreground" />
+          )}
+
+          {/* Name + size */}
+          <div className="min-w-0 flex-1">
+            <div className="flex items-center gap-2">
+              <span className="truncate font-medium text-foreground">{file.name}</span>
+              <span className="shrink-0 text-xs text-muted-foreground">{formatSize(file.size)}</span>
+            </div>
+            {/* Progress bar */}
+            {file.status === "uploading" && file.progress !== undefined && (
+              <div className="mt-1 h-1 w-full overflow-hidden rounded-full bg-muted/50">
+                <div
+                  className="h-full rounded-full bg-primary transition-all"
+                  style={{ width: `${file.progress}%` }}
+                />
+              </div>
+            )}
+            {/* Error message */}
+            {file.status === "error" && file.error && (
+              <p className="mt-0.5 text-xs text-[var(--surface-danger-text)]">{file.error}</p>
+            )}
+          </div>
+
+          {/* Actions */}
+          <div className="flex shrink-0 items-center gap-1">
+            {file.status === "error" && onRetry && (
+              <button
+                type="button"
+                onClick={() => onRetry(file.id)}
+                className="rounded p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+              >
+                <RefreshCw className="h-3.5 w-3.5" />
+              </button>
+            )}
+            {onRemove && (
+              <button
+                type="button"
+                onClick={() => onRemove(file.id)}
+                className="rounded p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+              >
+                <X className="h-3.5 w-3.5" />
+              </button>
+            )}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}