rift-ds 1.0.0

package/components/Toast/Toast.css

@@ -0,0 +1,363 @@
+/* ============================================
+   TOAST CONTAINER
+   Fixed position stack for notifications
+
+   Consumer hooks (custom properties with fallbacks, so the defaults hold
+   until a consumer sets them): a page that keeps its own fixed chrome in a
+   corner (a chat launcher, a cookie bar, a docked panel) sets the matching
+   inset so toasts stack clear of it rather than on top of it, and raises
+   --ds-toast-z above its own overlay layers. Toasts are transient feedback
+   and must be seen; a launcher can be covered for five seconds.
+     --ds-toast-z             stacking order (default 200, the library's top)
+     --ds-toast-inset-top     gap from the top edge for top-* placements
+     --ds-toast-inset-bottom  gap from the bottom edge for bottom-* placements
+     --ds-toast-inset-left    gap from the left edge for *-left placements
+     --ds-toast-inset-right   gap from the right edge for *-right placements
+   ============================================ */
+
+.ds-toast-container {
+  position: fixed;
+  z-index: var(--ds-toast-z, 200);
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-200); /* 8px */
+  pointer-events: none;
+  padding: var(--padding-400); /* 16px */
+}
+
+.ds-toast-container--top-right {
+  top: var(--ds-toast-inset-top, 0);
+  right: var(--ds-toast-inset-right, 0);
+  align-items: flex-end;
+}
+
+.ds-toast-container--top-left {
+  top: var(--ds-toast-inset-top, 0);
+  left: var(--ds-toast-inset-left, 0);
+  align-items: flex-start;
+}
+
+.ds-toast-container--bottom-right {
+  bottom: var(--ds-toast-inset-bottom, 0);
+  right: var(--ds-toast-inset-right, 0);
+  align-items: flex-end;
+}
+
+.ds-toast-container--bottom-left {
+  bottom: var(--ds-toast-inset-bottom, 0);
+  left: var(--ds-toast-inset-left, 0);
+  align-items: flex-start;
+}
+
+.ds-toast-container--top-center {
+  top: var(--ds-toast-inset-top, 0);
+  left: 50%;
+  transform: translateX(-50%);
+  align-items: center;
+}
+
+.ds-toast-container--bottom-center {
+  bottom: var(--ds-toast-inset-bottom, 0);
+  left: 50%;
+  transform: translateX(-50%);
+  align-items: center;
+}
+
+/* ============================================
+   INDIVIDUAL TOAST
+   ============================================ */
+
+.ds-toast {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--gap-200); /* 8px */
+  padding: var(--padding-400); /* 16px */
+  border: var(--border-025) solid transparent;
+  border-radius: var(--radius-200); /* 8px */
+  min-width: 300px;
+  max-width: 420px;
+  box-shadow: var(--shadow-floating);
+  pointer-events: auto;
+  position: relative;
+  overflow: hidden;
+  animation: ds-toast-enter var(--motion-duration-slow) var(--motion-ease-standard) forwards;
+}
+
+.ds-toast--exiting {
+  animation: ds-toast-exit var(--motion-duration-base) var(--motion-ease-standard) forwards;
+}
+
+/* ============================================
+   ICON
+   ============================================ */
+
+.ds-toast__icon {
+  flex-shrink: 0;
+  --icon-size: var(--icon-size-600);
+  line-height: 1;
+}
+
+/* ============================================
+   CONTENT
+   ============================================ */
+
+.ds-toast__content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-050); /* 2px */
+  min-width: 0;
+}
+
+.ds-toast__title {
+  font-family: var(--font-paragraph-emphasis-family);
+  font-size: var(--font-paragraph-emphasis-size);
+  font-weight: var(--font-paragraph-emphasis-weight);
+  line-height: var(--font-paragraph-emphasis-line-height);
+  letter-spacing: var(--font-paragraph-emphasis-letter-spacing);
+  margin: 0;
+}
+
+.ds-toast__description {
+  font-family: var(--font-paragraph-family);
+  font-size: var(--font-paragraph-size);
+  font-weight: var(--font-paragraph-weight);
+  line-height: var(--font-paragraph-line-height);
+  letter-spacing: var(--font-paragraph-letter-spacing);
+  margin: 0;
+}
+
+/* ============================================
+   DISMISS BUTTON
+   ============================================ */
+
+.ds-toast__dismiss {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: none;
+  background: none;
+  cursor: pointer;
+  border-radius: var(--radius-200); /* 8px */
+  transition: background-color var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-toast__dismiss .material-symbols-rounded {
+  --icon-size: var(--icon-size-600);
+}
+
+.ds-toast__dismiss:hover {
+  background-color: var(--color-action-passive-bg-hover);
+}
+
+.ds-toast__dismiss:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: 2px;
+}
+
+/* ============================================
+   PROGRESS BAR
+   ============================================ */
+
+.ds-toast__progress {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: 3px;
+  width: 100%;
+  transform-origin: left;
+  animation: ds-toast-progress linear forwards;
+}
+
+/* ============================================
+   VARIANT — INFO
+   ============================================ */
+
+.ds-toast--info {
+  background-color: var(--color-status-info-bg);
+  border-color: var(--color-status-info-border);
+}
+
+.ds-toast--info .ds-toast__icon {
+  color: var(--color-status-info-border);
+}
+
+.ds-toast--info .ds-toast__title {
+  color: var(--color-status-info-text);
+}
+
+.ds-toast--info .ds-toast__description {
+  color: var(--color-status-info-text);
+}
+
+.ds-toast--info .ds-toast__dismiss {
+  color: var(--color-status-info-text);
+}
+
+.ds-toast--info .ds-toast__progress {
+  background-color: var(--color-status-info-border);
+}
+
+/* ============================================
+   VARIANT — POSITIVE
+   ============================================ */
+
+.ds-toast--positive {
+  background-color: var(--color-status-positive-bg);
+  border-color: var(--color-status-positive-border);
+}
+
+.ds-toast--positive .ds-toast__icon {
+  color: var(--color-status-positive-border);
+}
+
+.ds-toast--positive .ds-toast__title {
+  color: var(--color-status-positive-text);
+}
+
+.ds-toast--positive .ds-toast__description {
+  color: var(--color-status-positive-text);
+}
+
+.ds-toast--positive .ds-toast__dismiss {
+  color: var(--color-status-positive-text);
+}
+
+.ds-toast--positive .ds-toast__progress {
+  background-color: var(--color-status-positive-border);
+}
+
+/* ============================================
+   VARIANT — WARNING
+   ============================================ */
+
+.ds-toast--warning {
+  background-color: var(--color-status-warning-bg);
+  border-color: var(--color-status-warning-border);
+}
+
+.ds-toast--warning .ds-toast__icon {
+  color: var(--color-status-warning-border);
+}
+
+.ds-toast--warning .ds-toast__title {
+  color: var(--color-status-warning-text);
+}
+
+.ds-toast--warning .ds-toast__description {
+  color: var(--color-status-warning-text);
+}
+
+.ds-toast--warning .ds-toast__dismiss {
+  color: var(--color-status-warning-text);
+}
+
+.ds-toast--warning .ds-toast__progress {
+  background-color: var(--color-status-warning-border);
+}
+
+/* ============================================
+   VARIANT — ERROR
+   ============================================ */
+
+.ds-toast--error {
+  background-color: var(--color-status-error-bg);
+  border-color: var(--color-status-error-border);
+}
+
+.ds-toast--error .ds-toast__icon {
+  color: var(--color-status-error-border);
+}
+
+.ds-toast--error .ds-toast__title {
+  color: var(--color-status-error-text);
+}
+
+.ds-toast--error .ds-toast__description {
+  color: var(--color-status-error-text);
+}
+
+.ds-toast--error .ds-toast__dismiss {
+  color: var(--color-status-error-text);
+}
+
+.ds-toast--error .ds-toast__progress {
+  background-color: var(--color-status-error-border);
+}
+
+/* ============================================
+   VARIANT — NEUTRAL
+   ============================================ */
+
+.ds-toast--neutral {
+  background-color: var(--color-status-neutral-bg);
+  border-color: var(--color-status-neutral-border);
+}
+
+.ds-toast--neutral .ds-toast__icon {
+  color: var(--color-status-neutral-border);
+}
+
+.ds-toast--neutral .ds-toast__title {
+  color: var(--color-status-neutral-text);
+}
+
+.ds-toast--neutral .ds-toast__description {
+  color: var(--color-status-neutral-text);
+}
+
+.ds-toast--neutral .ds-toast__dismiss {
+  color: var(--color-status-neutral-text);
+}
+
+.ds-toast--neutral .ds-toast__progress {
+  background-color: var(--color-status-neutral-border);
+}
+
+/* ============================================
+   ANIMATIONS
+   ============================================ */
+
+@keyframes ds-toast-enter {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes ds-toast-exit {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+}
+
+@keyframes ds-toast-progress {
+  from {
+    transform: scaleX(1);
+  }
+  to {
+    transform: scaleX(0);
+  }
+}
+
+/* Icons take the colour of the text around them. Explicit, not just
+   inherited by default: a consumer stylesheet that sets a colour on
+   .material-symbols-rounded itself (a common global default) would
+   otherwise override inheritance and detach the icon from the state
+   colours this component sets on its parents. */
+.ds-toast .material-symbols-rounded {
+  color: inherit;
+}

package/components/Toast/Toast.d.ts

@@ -0,0 +1,63 @@
+import { ReactNode } from 'react';
+export interface ToastData {
+    /** Unique ID (auto-generated if not provided) */
+    id?: string;
+    /** Toast title text */
+    title?: string;
+    /** Toast description / body text */
+    description?: string;
+    /** Toast variant determines colour and icon */
+    variant?: 'info' | 'positive' | 'warning' | 'error' | 'neutral';
+    /** Auto-dismiss duration in ms (0 = no auto-dismiss) */
+    duration?: number;
+    /** Whether the toast can be manually dismissed */
+    dismissible?: boolean;
+    /** Custom icon override — Material Symbol name (string) or custom element (ReactNode) */
+    icon?: string | React.ReactNode;
+}
+export interface ToastProviderProps {
+    /** Children that can access the toast context */
+    children: ReactNode;
+    /** Position of the toast stack */
+    position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center';
+    /** Maximum number of visible toasts */
+    maxToasts?: number;
+}
+export interface ToastContextValue {
+    /** Add a toast */
+    toast: (data: ToastData) => string;
+    /** Dismiss a specific toast by ID */
+    dismiss: (id: string) => void;
+    /** Dismiss all toasts */
+    dismissAll: () => void;
+}
+/**
+ * Hook to access the toast API.
+ * Must be used within a ToastProvider.
+ */
+export declare const useToast: () => ToastContextValue;
+/**
+ * ToastProvider wraps your application and provides the
+ * toast context. Renders a fixed container that stacks
+ * toast notifications.
+ */
+export declare const ToastProvider: ({ children, position, maxToasts, }: ToastProviderProps) => import("react").JSX.Element;
+export interface ToastProps {
+    /** Toast title text */
+    title?: string;
+    /** Toast description / body text */
+    description?: string;
+    /** Toast variant */
+    variant?: 'info' | 'positive' | 'warning' | 'error' | 'neutral';
+    /** Whether the toast can be manually dismissed */
+    dismissible?: boolean;
+    /** Custom icon override — Material Symbol name (string) or custom element (ReactNode) */
+    icon?: string | React.ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * Standalone Toast component for static display.
+ * For dynamic toast notifications, use ToastProvider + useToast.
+ */
+export declare const Toast: ({ title, description, variant, dismissible, icon, className, }: ToastProps) => import("react").JSX.Element;

package/components/Toast/Toast.js

@@ -0,0 +1,215 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useSyncExternalStore, useCallback, useContext, createContext, useRef, useEffect } from "react";
+import { MOTION_AUTO_DISMISS_MS, MOTION_EXIT_SYNC_MS } from "../../tokens/motion.js";
+import ReactDOM from "react-dom";
+import "./Toast.css";
+import "../../fonts/material-symbols.css";
+const emptySubscribe = () => () => {
+};
+const ToastContext = createContext(null);
+const useToast = () => {
+  const context = useContext(ToastContext);
+  if (!context) {
+    throw new Error("useToast must be used within a ToastProvider");
+  }
+  return context;
+};
+const defaultIcons = {
+  info: "info",
+  positive: "check_circle",
+  warning: "warning",
+  error: "error",
+  neutral: "info"
+};
+let toastCounter = 0;
+const ToastItem = ({
+  id,
+  title,
+  description,
+  variant,
+  dismissible,
+  icon,
+  duration,
+  onDismiss
+}) => {
+  const [exiting, setExiting] = useState(false);
+  const [pauseTimer, setPauseTimer] = useState(false);
+  const timerRef = useRef(void 0);
+  const remainingRef = useRef(duration);
+  const startTimeRef = useRef(0);
+  const baseClass = "ds-toast";
+  const handleDismiss = useCallback(() => {
+    setExiting(true);
+    setTimeout(() => onDismiss(id), MOTION_EXIT_SYNC_MS);
+  }, [id, onDismiss]);
+  useEffect(() => {
+    if (duration <= 0 || pauseTimer) return;
+    startTimeRef.current = Date.now();
+    timerRef.current = setTimeout(handleDismiss, remainingRef.current);
+    return () => {
+      clearTimeout(timerRef.current);
+      remainingRef.current -= Date.now() - startTimeRef.current;
+      if (remainingRef.current < 0) remainingRef.current = 0;
+    };
+  }, [duration, pauseTimer, handleDismiss]);
+  const iconName = icon || defaultIcons[variant];
+  const classes = [
+    baseClass,
+    `${baseClass}--${variant}`,
+    exiting ? `${baseClass}--exiting` : ""
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classes,
+      role: variant === "error" || variant === "warning" ? "alert" : void 0,
+      onMouseEnter: () => setPauseTimer(true),
+      onMouseLeave: () => setPauseTimer(false),
+      onFocus: () => setPauseTimer(true),
+      onBlur: () => setPauseTimer(false),
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: `${baseClass}__icon${typeof iconName === "string" ? " material-symbols-rounded" : ""}`,
+            "aria-hidden": "true",
+            children: iconName
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: `${baseClass}__content`, children: [
+          title && /* @__PURE__ */ jsx("p", { className: `${baseClass}__title`, children: title }),
+          description && /* @__PURE__ */ jsx("p", { className: `${baseClass}__description`, children: description })
+        ] }),
+        dismissible && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: `${baseClass}__dismiss`,
+            onClick: handleDismiss,
+            "aria-label": "Dismiss notification",
+            children: /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", "aria-hidden": "true", children: "close" })
+          }
+        ),
+        duration > 0 && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: `${baseClass}__progress`,
+            style: {
+              animationDuration: `${duration}ms`,
+              animationPlayState: pauseTimer ? "paused" : "running"
+            }
+          }
+        )
+      ]
+    }
+  );
+};
+const ToastProvider = ({
+  children,
+  position = "bottom-right",
+  maxToasts = 5
+}) => {
+  const [toasts, setToasts] = useState([]);
+  const mounted = useSyncExternalStore(emptySubscribe, () => true, () => false);
+  const toast = useCallback(
+    (data) => {
+      const id = data.id || `toast-${++toastCounter}`;
+      const newToast = {
+        ...data,
+        id,
+        variant: data.variant || "info",
+        duration: data.duration ?? MOTION_AUTO_DISMISS_MS,
+        dismissible: data.dismissible ?? true
+      };
+      setToasts((prev) => {
+        const next = [...prev, newToast];
+        if (next.length > maxToasts) {
+          return next.slice(next.length - maxToasts);
+        }
+        return next;
+      });
+      return id;
+    },
+    [maxToasts]
+  );
+  const dismiss = useCallback((id) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+  const dismissAll = useCallback(() => {
+    setToasts([]);
+  }, []);
+  const baseClass = "ds-toast-container";
+  const containerClasses = [baseClass, `${baseClass}--${position}`].join(" ");
+  return /* @__PURE__ */ jsxs(ToastContext.Provider, { value: { toast, dismiss, dismissAll }, children: [
+    children,
+    mounted && ReactDOM.createPortal(
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: containerClasses,
+          role: "region",
+          "aria-label": "Notifications",
+          "aria-live": "polite",
+          children: toasts.map((t) => /* @__PURE__ */ jsx(
+            ToastItem,
+            {
+              id: t.id,
+              title: t.title,
+              description: t.description,
+              variant: t.variant || "info",
+              dismissible: t.dismissible ?? true,
+              icon: t.icon,
+              duration: t.duration ?? MOTION_AUTO_DISMISS_MS,
+              onDismiss: dismiss
+            },
+            t.id
+          ))
+        }
+      ),
+      document.body
+    )
+  ] });
+};
+const Toast = ({
+  title,
+  description,
+  variant = "info",
+  dismissible = true,
+  icon,
+  className = ""
+}) => {
+  const baseClass = "ds-toast";
+  const iconName = icon || defaultIcons[variant];
+  const classes = [baseClass, `${baseClass}--${variant}`, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("div", { className: classes, role: "status", children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: `${baseClass}__icon${typeof iconName === "string" ? " material-symbols-rounded" : ""}`,
+        "aria-hidden": "true",
+        children: iconName
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: `${baseClass}__content`, children: [
+      title && /* @__PURE__ */ jsx("p", { className: `${baseClass}__title`, children: title }),
+      description && /* @__PURE__ */ jsx("p", { className: `${baseClass}__description`, children: description })
+    ] }),
+    dismissible && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: `${baseClass}__dismiss`,
+        onClick: () => {
+        },
+        "aria-label": "Dismiss notification",
+        children: /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", "aria-hidden": "true", children: "close" })
+      }
+    )
+  ] });
+};
+export {
+  Toast,
+  ToastProvider,
+  useToast
+};