@robr0/design-system 0.1.0

package/components/Timeline/Timeline.js

@@ -0,0 +1,69 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import "./Timeline.css";
+import "../../fonts/material-symbols.css";
+const BASE_CLASS = "ds-timeline";
+const renderRoleDates = (role) => {
+  if (!role.start) return null;
+  return /* @__PURE__ */ jsxs("span", { className: `${BASE_CLASS}__role-dates`, children: [
+    role.start,
+    " –",
+    " ",
+    role.present ? /* @__PURE__ */ jsx("span", { className: `${BASE_CLASS}__present`, children: "Present" }) : role.end
+  ] });
+};
+const CompanyTimeline = ({ items, className = "" }) => {
+  const classes = [BASE_CLASS, `${BASE_CLASS}--vertical`, `${BASE_CLASS}--company`, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("ol", { className: classes, children: items.map((company, index) => /* @__PURE__ */ jsxs("li", { className: `${BASE_CLASS}__item`, children: [
+    /* @__PURE__ */ jsx("span", { className: `${BASE_CLASS}__marker ${BASE_CLASS}__marker--logo`, "aria-hidden": "true", children: company.logo }),
+    /* @__PURE__ */ jsxs("div", { className: `${BASE_CLASS}__content`, children: [
+      /* @__PURE__ */ jsx("span", { className: `${BASE_CLASS}__company-name`, children: company.name }),
+      /* @__PURE__ */ jsx("div", { className: `${BASE_CLASS}__roles`, children: company.roles.map((role, roleIndex) => /* @__PURE__ */ jsxs("div", { className: `${BASE_CLASS}__role`, children: [
+        /* @__PURE__ */ jsxs("div", { className: `${BASE_CLASS}__role-header`, children: [
+          /* @__PURE__ */ jsx("h3", { className: `${BASE_CLASS}__role-title`, children: role.title }),
+          renderRoleDates(role)
+        ] }),
+        role.description && /* @__PURE__ */ jsx("p", { className: `${BASE_CLASS}__role-description`, children: role.description }),
+        role.bullets && role.bullets.length > 0 && /* @__PURE__ */ jsx("ul", { className: `${BASE_CLASS}__role-bullets`, children: role.bullets.map((bullet, bulletIndex) => /* @__PURE__ */ jsx("li", { children: bullet }, bulletIndex)) })
+      ] }, `${role.title}-${roleIndex}`)) })
+    ] })
+  ] }, `${company.name}-${index}`)) });
+};
+const Timeline = (props) => {
+  if (props.variant === "company") {
+    return /* @__PURE__ */ jsx(CompanyTimeline, { ...props });
+  }
+  const { items, orientation = "vertical", numbered = false, className = "" } = props;
+  const classes = [
+    BASE_CLASS,
+    `${BASE_CLASS}--${orientation}`,
+    numbered && `${BASE_CLASS}--numbered`,
+    className
+  ].filter(Boolean).join(" ");
+  const renderMarker = (item, index) => {
+    if (item.icon) {
+      return /* @__PURE__ */ jsx("span", { className: `material-symbols-rounded ${BASE_CLASS}__marker-icon`, "aria-hidden": "true", children: item.icon });
+    }
+    if (numbered) {
+      return /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: index + 1 });
+    }
+    return null;
+  };
+  return /* @__PURE__ */ jsx("ol", { className: classes, children: items.map((item, index) => /* @__PURE__ */ jsxs("li", { className: `${BASE_CLASS}__item`, children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: `${BASE_CLASS}__marker${item.icon ? ` ${BASE_CLASS}__marker--icon` : numbered ? ` ${BASE_CLASS}__marker--badge` : ""}`,
+        children: renderMarker(item, index)
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: `${BASE_CLASS}__content`, children: [
+      item.meta && /* @__PURE__ */ jsx("span", { className: `${BASE_CLASS}__meta`, children: item.meta }),
+      /* @__PURE__ */ jsx("span", { className: `${BASE_CLASS}__title`, children: item.title }),
+      item.description && /* @__PURE__ */ jsx("div", { className: `${BASE_CLASS}__description`, children: item.description })
+    ] })
+  ] }, `${item.title}-${index}`)) });
+};
+export {
+  Timeline
+};

package/components/Toast/Toast.css

@@ -0,0 +1,342 @@
+/* ============================================
+   TOAST CONTAINER
+   Fixed position stack for notifications
+   ============================================ */
+
+.ds-toast-container {
+  position: fixed;
+  z-index: 200;
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-sm); /* 8px */
+  pointer-events: none;
+  padding: var(--padding-md); /* 16px */
+}
+
+.ds-toast-container--top-right {
+  top: 0;
+  right: 0;
+  align-items: flex-end;
+}
+
+.ds-toast-container--top-left {
+  top: 0;
+  left: 0;
+  align-items: flex-start;
+}
+
+.ds-toast-container--bottom-right {
+  bottom: 0;
+  right: 0;
+  align-items: flex-end;
+}
+
+.ds-toast-container--bottom-left {
+  bottom: 0;
+  left: 0;
+  align-items: flex-start;
+}
+
+.ds-toast-container--top-center {
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  align-items: center;
+}
+
+.ds-toast-container--bottom-center {
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  align-items: center;
+}
+
+/* ============================================
+   INDIVIDUAL TOAST
+   ============================================ */
+
+.ds-toast {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--gap-sm); /* 8px */
+  padding: var(--padding-md); /* 16px */
+  border: var(--border-xs) solid transparent;
+  border-radius: var(--radius-sm); /* 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-md);
+  line-height: 1;
+}
+
+/* ============================================
+   CONTENT
+   ============================================ */
+
+.ds-toast__content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-xxs); /* 2px */
+  min-width: 0;
+}
+
+.ds-toast__title {
+  font-family: var(--font-paragraph-em-family);
+  font-size: var(--font-paragraph-em-size);
+  font-weight: var(--font-paragraph-em-weight);
+  line-height: var(--font-paragraph-em-line-height);
+  letter-spacing: var(--font-paragraph-em-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-sm); /* 8px */
+  transition: background-color var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-toast__dismiss .material-symbols-rounded {
+  --icon-size: var(--icon-size-md);
+}
+
+.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);
+  }
+}

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 */
+    icon?: string;
+}
+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 */
+    icon?: string;
+    /** 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,213 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useSyncExternalStore, useCallback, useContext, createContext, useRef, useEffect } from "react";
+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), 200);
+  }, [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: "status",
+      "aria-live": variant === "error" || variant === "warning" ? "assertive" : "polite",
+      onMouseEnter: () => setPauseTimer(true),
+      onMouseLeave: () => setPauseTimer(false),
+      onFocus: () => setPauseTimer(true),
+      onBlur: () => setPauseTimer(false),
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: `${baseClass}__icon 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 ?? 5e3,
+        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",
+          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 ?? 5e3,
+              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 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
+};