rift-ds 1.0.0

package/components/AiButton/AiButton.js

@@ -0,0 +1,183 @@
+"use client";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import React, { useState, useRef, useEffect } from "react";
+import { PromptSuggestions } from "../PromptSuggestions/PromptSuggestions.js";
+import { Skeleton } from "../Skeleton/Skeleton.js";
+import { StreamingText } from "../StreamingText/StreamingText.js";
+import { MOTION_SUMMARY_THINK_MS, MOTION_SUMMARY_REVEAL_MS, MOTION_HOVER_EXIT_GRACE_MS, MOTION_HOVER_SHOW_DELAY_MS } from "../../tokens/motion.js";
+import "./AiButton.css";
+import "../../fonts/material-symbols.css";
+const AiButton = React.forwardRef(
+  ({
+    label = "Ask AI",
+    icon = "auto_awesome",
+    size = "default",
+    disabled,
+    href,
+    target,
+    rel,
+    summary,
+    summaryPlacement = "top",
+    summaryPinned = false,
+    onSummaryDismiss,
+    onSummarySuggestion,
+    className = "",
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-ai-button";
+    const [hoverOpen, setHoverOpen] = useState(false);
+    const [dismissed, setDismissed] = useState(false);
+    const [phase, setPhase] = useState("skeleton");
+    const generated = useRef(false);
+    const showTimer = useRef(null);
+    const hideTimer = useRef(null);
+    const panelOpen = Boolean(summary) && !disabled && !dismissed && (summaryPinned || hoverOpen);
+    useEffect(() => {
+      if (!panelOpen) return;
+      if (generated.current) {
+        setPhase("cached");
+        return;
+      }
+      setPhase("skeleton");
+      const t = window.setTimeout(() => {
+        generated.current = true;
+        setPhase("typing");
+      }, MOTION_SUMMARY_THINK_MS);
+      return () => window.clearTimeout(t);
+    }, [panelOpen]);
+    useEffect(
+      () => () => {
+        if (showTimer.current) window.clearTimeout(showTimer.current);
+        if (hideTimer.current) window.clearTimeout(hideTimer.current);
+      },
+      []
+    );
+    const hostEnter = () => {
+      if (hideTimer.current) {
+        window.clearTimeout(hideTimer.current);
+        hideTimer.current = null;
+      }
+      if (!hoverOpen && !showTimer.current) {
+        showTimer.current = window.setTimeout(() => {
+          showTimer.current = null;
+          setHoverOpen(true);
+        }, MOTION_HOVER_SHOW_DELAY_MS);
+      }
+    };
+    const hostLeave = () => {
+      setDismissed(false);
+      if (showTimer.current) {
+        window.clearTimeout(showTimer.current);
+        showTimer.current = null;
+      }
+      if (hoverOpen && !hideTimer.current) {
+        hideTimer.current = window.setTimeout(() => {
+          hideTimer.current = null;
+          setHoverOpen(false);
+        }, MOTION_HOVER_EXIT_GRACE_MS);
+      }
+    };
+    const classes = [
+      baseClass,
+      `${baseClass}--${size}`,
+      disabled && `${baseClass}--disabled`,
+      className
+    ].filter(Boolean).join(" ");
+    const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+      icon && (typeof icon === "string" ? /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon material-symbols-rounded`, "aria-hidden": "true", children: icon }) : /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon`, "aria-hidden": "true", children: icon })),
+      /* @__PURE__ */ jsx("span", { className: `${baseClass}__text`, children: label })
+    ] });
+    const control = href && !disabled ? /* @__PURE__ */ jsx(
+      "a",
+      {
+        ...rest,
+        ref,
+        className: classes,
+        href,
+        target,
+        rel,
+        children: content
+      }
+    ) : /* @__PURE__ */ jsx(
+      "button",
+      {
+        ...rest,
+        ref,
+        type: "button",
+        className: classes,
+        disabled,
+        children: content
+      }
+    );
+    if (!summary) return control;
+    const panelClass = `${baseClass}__summary`;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: [
+          `${baseClass}-host`,
+          `${baseClass}-host--${summaryPlacement}`,
+          panelOpen && `${baseClass}-host--open`
+        ].filter(Boolean).join(" "),
+        onMouseEnter: hostEnter,
+        onMouseLeave: hostLeave,
+        children: [
+          control,
+          /* @__PURE__ */ jsxs("aside", { className: panelClass, "aria-label": `Summary: ${summary.title}`, children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: `${panelClass}-dismiss`,
+                "aria-label": "Dismiss summary",
+                onClick: () => {
+                  setDismissed(true);
+                  setHoverOpen(false);
+                  onSummaryDismiss?.();
+                },
+                children: /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", "aria-hidden": "true", children: "close" })
+              }
+            ),
+            /* @__PURE__ */ jsxs("span", { className: `${panelClass}-meta`, children: [
+              /* @__PURE__ */ jsx("span", { className: `${panelClass}-overline`, children: summary.overline ?? "AI summary" }),
+              summary.caption && /* @__PURE__ */ jsx("span", { className: `${panelClass}-caption`, children: summary.caption })
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: `${panelClass}-title`, children: summary.title }),
+            /* @__PURE__ */ jsx("span", { className: `${panelClass}-text`, children: phase === "skeleton" ? /* @__PURE__ */ jsx(Skeleton, { variant: "text", lines: 3 }) : phase === "typing" ? (
+              /* An invisible ghost of the finished text sizes the
+                 container, so the type-out never jumps the panel and a
+                 short summary leaves no reserved space behind it. */
+              /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("span", { className: `${panelClass}-text-ghost`, "aria-hidden": "true", children: summary.text }),
+                /* @__PURE__ */ jsx("span", { className: `${panelClass}-text-reveal`, children: /* @__PURE__ */ jsx(
+                  StreamingText,
+                  {
+                    text: summary.text,
+                    streaming: false,
+                    cursor: true,
+                    drainMs: MOTION_SUMMARY_REVEAL_MS,
+                    onRevealComplete: () => setPhase("cached")
+                  }
+                ) })
+              ] })
+            ) : summary.text }),
+            summary.suggestions && summary.suggestions.length > 0 && phase === "cached" && /* @__PURE__ */ jsx("span", { className: `${panelClass}-actions`, children: /* @__PURE__ */ jsx(
+              PromptSuggestions,
+              {
+                layout: "stack",
+                size: "compact",
+                ariaLabel: "Suggested prompts",
+                suggestions: summary.suggestions,
+                onValueChange: onSummarySuggestion
+              }
+            ) })
+          ] })
+        ]
+      }
+    );
+  }
+);
+AiButton.displayName = "AiButton";
+export {
+  AiButton
+};

package/components/Alert/Alert.css

@@ -0,0 +1,261 @@
+/* ============================================
+   ALERT COMPONENT
+   Contextual feedback with status variants
+   ============================================ */
+
+.ds-alert {
+  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 */
+  width: 100%;
+}
+
+/* ============================================
+   SIZE — DEFAULT
+   ============================================ */
+
+.ds-alert--default {
+  padding: var(--padding-400); /* 16px */
+}
+
+/* ============================================
+   SIZE — COMPACT
+   ============================================ */
+
+.ds-alert--compact {
+  padding: var(--padding-150) var(--padding-300); /* 6px 12px */
+}
+
+.ds-alert--compact .ds-alert__icon {
+  --icon-size: var(--icon-size-500);
+}
+
+.ds-alert--compact .ds-alert__title {
+  font-size: var(--font-paragraph-sm-size);
+  line-height: var(--font-paragraph-sm-line-height);
+  letter-spacing: var(--font-paragraph-sm-letter-spacing);
+}
+
+.ds-alert--compact .ds-alert__description {
+  font-size: var(--font-paragraph-sm-size);
+  line-height: var(--font-paragraph-sm-line-height);
+  letter-spacing: var(--font-paragraph-sm-letter-spacing);
+}
+
+.ds-alert--compact .ds-alert__dismiss {
+  width: 20px;
+  height: 20px;
+}
+
+.ds-alert--compact .ds-alert__dismiss .material-symbols-rounded {
+  --icon-size: var(--icon-size-500);
+}
+
+/* ============================================
+   ICON
+   ============================================ */
+
+.ds-alert__icon {
+  flex-shrink: 0;
+  --icon-size: var(--icon-size-600);
+  line-height: 1;
+}
+
+/* ============================================
+   CONTENT
+   ============================================ */
+
+.ds-alert__content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-050); /* 2px */
+  min-width: 0;
+}
+
+.ds-alert__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-alert__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-alert__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-alert__dismiss .material-symbols-rounded {
+  --icon-size: var(--icon-size-600);
+}
+
+.ds-alert__dismiss:hover {
+  background-color: var(--color-action-passive-bg-hover);
+}
+
+.ds-alert__dismiss:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: 2px;
+}
+
+/* ============================================
+   VARIANT — INFO
+   ============================================ */
+
+.ds-alert--info {
+  background-color: var(--color-status-info-bg);
+  border-color: var(--color-status-info-border);
+}
+
+.ds-alert--info .ds-alert__icon {
+  color: var(--color-status-info-border);
+}
+
+.ds-alert--info .ds-alert__title {
+  color: var(--color-status-info-text);
+}
+
+.ds-alert--info .ds-alert__description {
+  color: var(--color-status-info-text);
+}
+
+.ds-alert--info .ds-alert__dismiss {
+  color: var(--color-status-info-text);
+}
+
+/* ============================================
+   VARIANT — POSITIVE
+   ============================================ */
+
+.ds-alert--positive {
+  background-color: var(--color-status-positive-bg);
+  border-color: var(--color-status-positive-border);
+}
+
+.ds-alert--positive .ds-alert__icon {
+  color: var(--color-status-positive-border);
+}
+
+.ds-alert--positive .ds-alert__title {
+  color: var(--color-status-positive-text);
+}
+
+.ds-alert--positive .ds-alert__description {
+  color: var(--color-status-positive-text);
+}
+
+.ds-alert--positive .ds-alert__dismiss {
+  color: var(--color-status-positive-text);
+}
+
+/* ============================================
+   VARIANT — WARNING
+   ============================================ */
+
+.ds-alert--warning {
+  background-color: var(--color-status-warning-bg);
+  border-color: var(--color-status-warning-border);
+}
+
+.ds-alert--warning .ds-alert__icon {
+  color: var(--color-status-warning-border);
+}
+
+.ds-alert--warning .ds-alert__title {
+  color: var(--color-status-warning-text);
+}
+
+.ds-alert--warning .ds-alert__description {
+  color: var(--color-status-warning-text);
+}
+
+.ds-alert--warning .ds-alert__dismiss {
+  color: var(--color-status-warning-text);
+}
+
+/* ============================================
+   VARIANT — ERROR
+   ============================================ */
+
+.ds-alert--error {
+  background-color: var(--color-status-error-bg);
+  border-color: var(--color-status-error-border);
+}
+
+.ds-alert--error .ds-alert__icon {
+  color: var(--color-status-error-border);
+}
+
+.ds-alert--error .ds-alert__title {
+  color: var(--color-status-error-text);
+}
+
+.ds-alert--error .ds-alert__description {
+  color: var(--color-status-error-text);
+}
+
+.ds-alert--error .ds-alert__dismiss {
+  color: var(--color-status-error-text);
+}
+
+/* ============================================
+   VARIANT — NEUTRAL
+   ============================================ */
+
+.ds-alert--neutral {
+  background-color: var(--color-status-neutral-bg);
+  border-color: var(--color-status-neutral-border);
+}
+
+.ds-alert--neutral .ds-alert__icon {
+  color: var(--color-status-neutral-text);
+}
+
+.ds-alert--neutral .ds-alert__title {
+  color: var(--color-status-neutral-text);
+}
+
+.ds-alert--neutral .ds-alert__description {
+  color: var(--color-status-neutral-text);
+}
+
+.ds-alert--neutral .ds-alert__dismiss {
+  color: var(--color-status-neutral-text);
+}
+
+/* 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-alert .material-symbols-rounded {
+  color: inherit;
+}

package/components/Alert/Alert.d.ts

@@ -0,0 +1,25 @@
+import { default as React } from 'react';
+export interface AlertProps {
+    /** Alert title text */
+    title?: string;
+    /** Alert description / body text */
+    description?: string;
+    /** Alert variant determines colour and icon */
+    variant?: 'info' | 'positive' | 'warning' | 'error' | 'neutral';
+    /** Component size */
+    size?: 'default' | 'compact';
+    /** Whether the alert can be dismissed */
+    dismissible?: boolean;
+    /** Custom icon override — Material Symbol name (string) or custom element (ReactNode) */
+    icon?: string | React.ReactNode;
+    /** Callback when dismiss button is clicked */
+    onDismiss?: () => void;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * Alert component for contextual feedback messages.
+ * Supports info, positive, warning, error, and neutral variants
+ * with optional dismiss functionality.
+ */
+export declare const Alert: ({ title, description, variant, size, dismissible, icon, onDismiss, className, }: AlertProps) => React.JSX.Element;

package/components/Alert/Alert.js

@@ -0,0 +1,53 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "./Alert.css";
+import "../../fonts/material-symbols.css";
+const defaultIcons = {
+  info: "info",
+  positive: "check_circle",
+  warning: "warning",
+  error: "error",
+  neutral: "info"
+};
+const Alert = ({
+  title,
+  description,
+  variant = "info",
+  size = "default",
+  dismissible = false,
+  icon,
+  onDismiss,
+  className = ""
+}) => {
+  const baseClass = "ds-alert";
+  const variantClass = `${baseClass}--${variant}`;
+  const sizeClass = `${baseClass}--${size}`;
+  const classes = [baseClass, variantClass, sizeClass, className].filter(Boolean).join(" ");
+  const iconValue = icon || defaultIcons[variant];
+  return /* @__PURE__ */ jsxs("div", { className: classes, role: "alert", children: [
+    typeof iconValue === "string" ? /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: `${baseClass}__icon material-symbols-rounded`,
+        "aria-hidden": "true",
+        children: iconValue
+      }
+    ) : /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon`, "aria-hidden": "true", children: iconValue }),
+    /* @__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: onDismiss,
+        "aria-label": "Dismiss alert",
+        children: /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", "aria-hidden": "true", children: "close" })
+      }
+    )
+  ] });
+};
+export {
+  Alert
+};

package/components/AlertDialog/AlertDialog.css

@@ -0,0 +1,133 @@
+/* ============================================
+   ALERT DIALOG COMPONENT
+   Modal confirmation with backdrop overlay
+   ============================================ */
+
+.ds-alert-dialog {
+  position: fixed;
+  inset: 0;
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  visibility: hidden; /* keeps panel controls out of the tab order when closed */
+  pointer-events: none;
+  transition: opacity var(--motion-duration-base) var(--motion-ease-standard), visibility var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-alert-dialog--open {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+}
+
+/* ============================================
+   BACKDROP
+   ============================================ */
+
+.ds-alert-dialog__backdrop {
+  position: absolute;
+  inset: 0;
+  background-color: var(--color-scrim);
+}
+
+/* ============================================
+   PANEL
+   ============================================ */
+
+.ds-alert-dialog__panel {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-400); /* 16px */
+  min-width: 320px;
+  max-width: 480px;
+  padding: var(--padding-500); /* 20px */
+  border: var(--border-025) solid var(--color-bg-container-border);
+  border-radius: var(--radius-300); /* 12px */
+  background-color: var(--color-bg-page-primary);
+  box-shadow: var(--shadow-modal);
+  transform: scale(0.96);
+  transition: transform var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-alert-dialog--open .ds-alert-dialog__panel {
+  transform: scale(1);
+}
+
+/* ============================================
+   HEADER
+   ============================================ */
+
+.ds-alert-dialog__header {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-200); /* 8px */
+}
+
+.ds-alert-dialog__icon {
+  flex-shrink: 0;
+  --icon-size: var(--icon-size-600);
+  line-height: 1;
+  color: var(--color-icon-primary);
+}
+
+.ds-alert-dialog--destructive .ds-alert-dialog__icon {
+  color: var(--color-status-error-border);
+}
+
+/* ============================================
+   TITLE
+   ============================================ */
+
+.ds-alert-dialog__title {
+  font-family: var(--font-heading-3-family);
+  font-size: var(--font-heading-3-size);
+  font-weight: var(--font-heading-3-weight);
+  line-height: var(--font-heading-3-line-height);
+  letter-spacing: var(--font-heading-3-letter-spacing);
+  color: var(--color-text-primary);
+  margin: 0;
+}
+
+.ds-alert-dialog--destructive .ds-alert-dialog__title {
+  color: var(--color-status-error-border);
+}
+
+/* ============================================
+   DESCRIPTION
+   ============================================ */
+
+.ds-alert-dialog__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);
+  color: var(--color-text-secondary);
+  margin: 0;
+}
+
+/* ============================================
+   ACTIONS
+   ============================================ */
+
+.ds-alert-dialog__actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--gap-200); /* 8px */
+  padding-top: var(--padding-150); /* 6px */
+}
+
+/* ============================================
+   RESPONSIVE
+   ============================================ */
+
+@media (max-width: 480px) {
+  .ds-alert-dialog__panel {
+    min-width: auto;
+    margin: var(--padding-400);
+  }
+}

package/components/AlertDialog/AlertDialog.d.ts

@@ -0,0 +1,29 @@
+export interface AlertDialogProps {
+    /** Whether the dialog is open */
+    open: boolean;
+    /** Callback when dialog requests to close */
+    onOpenChange: (open: boolean) => void;
+    /** Dialog title */
+    title: string;
+    /** Dialog description / body text */
+    description?: string;
+    /** Confirm button label */
+    confirmLabel?: string;
+    /** Cancel button label */
+    cancelLabel?: string;
+    /** Callback when confirm is clicked */
+    onConfirm?: () => void;
+    /** Callback when cancel is clicked */
+    onCancel?: () => void;
+    /** Destructive variant for dangerous actions */
+    variant?: 'default' | 'destructive';
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * AlertDialog component for important confirmations.
+ * Renders a modal overlay with title, description,
+ * and confirm / cancel actions. Traps focus and
+ * supports ESC key dismissal.
+ */
+export declare const AlertDialog: ({ open, onOpenChange, title, description, confirmLabel, cancelLabel, onConfirm, onCancel, variant, className, }: AlertDialogProps) => import('react').ReactPortal | null;