rift-ds 1.0.0

package/components/Dialog/Dialog.css

@@ -0,0 +1,178 @@
+/* ============================================
+   DIALOG COMPONENT
+   General-purpose modal with backdrop overlay
+   ============================================ */
+
+.ds-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-dialog--open {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+}
+
+/* ============================================
+   BACKDROP
+   ============================================ */
+
+.ds-dialog__backdrop {
+  position: absolute;
+  inset: 0;
+  background-color: var(--color-scrim);
+}
+
+/* ============================================
+   PANEL
+   ============================================ */
+
+.ds-dialog__panel {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-400); /* 16px */
+  width: 100%;
+  max-height: calc(100vh - var(--gap-1000) * 2); /* breathing room top/bottom */
+  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);
+  outline: none;
+}
+
+.ds-dialog--open .ds-dialog__panel {
+  transform: scale(1);
+}
+
+/* Sizes */
+.ds-dialog--sm .ds-dialog__panel {
+  max-width: 400px;
+}
+
+.ds-dialog--md .ds-dialog__panel {
+  max-width: 560px;
+}
+
+.ds-dialog--lg .ds-dialog__panel {
+  max-width: 720px;
+}
+
+/* ============================================
+   HEADER
+   ============================================ */
+
+.ds-dialog__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--gap-400); /* 16px */
+}
+
+.ds-dialog__heading {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-100); /* 4px */
+  min-width: 0;
+}
+
+.ds-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-dialog__description {
+  font-family: var(--font-paragraph-sm-family);
+  font-size: var(--font-paragraph-sm-size);
+  font-weight: var(--font-paragraph-sm-weight);
+  line-height: var(--font-paragraph-sm-line-height);
+  letter-spacing: var(--font-paragraph-sm-letter-spacing);
+  color: var(--color-text-tertiary);
+  margin: 0;
+}
+
+/* Close button — ghost icon button */
+.ds-dialog__close {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: none;
+  border-radius: var(--radius-pill); /* pill */
+  background-color: transparent;
+  cursor: pointer;
+  transition: background-color var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-dialog__close:hover {
+  background-color: var(--color-action-passive-bg-hover);
+}
+
+.ds-dialog__close:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: 2px;
+}
+
+.ds-dialog__close-icon {
+  --icon-size: var(--icon-size-500);
+  line-height: 1;
+  color: var(--color-icon-primary);
+}
+
+/* ============================================
+   BODY
+   Scrolls when content exceeds the panel height
+   ============================================ */
+
+.ds-dialog__body {
+  overflow-y: auto;
+  min-height: 0;
+  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);
+}
+
+/* ============================================
+   FOOTER
+   ============================================ */
+
+.ds-dialog__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--gap-200); /* 8px */
+  padding-top: var(--padding-150); /* 6px */
+}
+
+/* ============================================
+   RESPONSIVE
+   ============================================ */
+
+@media (max-width: 480px) {
+  .ds-dialog__panel {
+    margin: var(--padding-400);
+  }
+}

package/components/Dialog/Dialog.d.ts

@@ -0,0 +1,39 @@
+import { default as React } from 'react';
+/** Props owned by Dialog itself — everything else falls through to the panel. */
+type DialogOwnProps = {
+    /** Whether the dialog is open */
+    open: boolean;
+    /** Callback when dialog requests to close */
+    onOpenChange: (open: boolean) => void;
+    /**
+     * Dialog title.
+     * Note: this shadows the native `title` tooltip attribute, which Dialog does not expose.
+     */
+    title: string;
+    /** Optional subtitle under the title */
+    description?: string;
+    /** Dialog body content */
+    children?: React.ReactNode;
+    /** Optional footer slot — typically a row of Buttons */
+    footer?: React.ReactNode;
+    /** Panel width */
+    size?: 'sm' | 'md' | 'lg';
+    /** Whether ESC, backdrop click, and the close button can dismiss */
+    dismissible?: boolean;
+    /** Additional CSS classes — applied to the portal container, not the panel */
+    className?: string;
+};
+export interface DialogProps extends DialogOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof DialogOwnProps> {
+}
+/**
+ * Dialog component — a general-purpose modal with arbitrary
+ * content and an optional footer. Traps focus, restores it on
+ * close, locks body scroll, and supports ESC / backdrop / close
+ * button dismissal. For confirm/cancel prompts use AlertDialog.
+ *
+ * Renders through a portal into `document.body`. The forwarded ref and any
+ * unrecognised props target the **panel** (the `role="dialog"` element), not the
+ * portal container — that is the element worth focusing or measuring.
+ */
+export declare const Dialog: React.ForwardRefExoticComponent<DialogProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/Dialog/Dialog.js

@@ -0,0 +1,99 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import React, { useRef, useId } from "react";
+import ReactDOM from "react-dom";
+import "./Dialog.css";
+import "../../fonts/material-symbols.css";
+import { useMounted } from "../../behaviors/useMounted.js";
+import { useLayer } from "../../behaviors/useLayer.js";
+import { useFocusScope } from "../../behaviors/useFocusScope.js";
+import { useScrollLock } from "../../behaviors/useScrollLock.js";
+const Dialog = React.forwardRef(
+  ({
+    open,
+    onOpenChange,
+    title,
+    description,
+    children,
+    footer,
+    size = "md",
+    dismissible = true,
+    className = "",
+    ...rest
+  }, ref) => {
+    const panelRef = useRef(null);
+    const titleId = useId();
+    const descId = useId();
+    const baseClass = "ds-dialog";
+    const setPanelRef = (node) => {
+      panelRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    };
+    const mounted = useMounted();
+    useLayer({ open, dismissOnEscape: dismissible, onDismiss: () => onOpenChange(false) });
+    useFocusScope(panelRef, { active: open });
+    useScrollLock(open);
+    const handleBackdropClick = () => {
+      if (dismissible) onOpenChange(false);
+    };
+    const containerClasses = [
+      baseClass,
+      `${baseClass}--${size}`,
+      open ? `${baseClass}--open` : "",
+      className
+    ].filter(Boolean).join(" ");
+    const dialog = /* @__PURE__ */ jsxs("div", { className: containerClasses, children: [
+      /* @__PURE__ */ jsx("div", { className: `${baseClass}__backdrop`, onClick: handleBackdropClick }),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ...rest,
+          className: `${baseClass}__panel`,
+          ref: setPanelRef,
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-labelledby": titleId,
+          "aria-describedby": description ? descId : rest["aria-describedby"],
+          tabIndex: -1,
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: `${baseClass}__header`, children: [
+              /* @__PURE__ */ jsxs("div", { className: `${baseClass}__heading`, children: [
+                /* @__PURE__ */ jsx("h2", { className: `${baseClass}__title`, id: titleId, children: title }),
+                description && /* @__PURE__ */ jsx("p", { className: `${baseClass}__description`, id: descId, children: description })
+              ] }),
+              dismissible && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: `${baseClass}__close`,
+                  onClick: () => onOpenChange(false),
+                  "aria-label": "Close dialog",
+                  children: /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: `${baseClass}__close-icon material-symbols-rounded`,
+                      "aria-hidden": "true",
+                      children: "close"
+                    }
+                  )
+                }
+              )
+            ] }),
+            children && // Scrollable when content is long; without a tab stop a keyboard
+            // user cannot reach that scroll. The initial-focus query below
+            // still prefers a real control, so this does not steal focus.
+            /* @__PURE__ */ jsx("div", { className: `${baseClass}__body`, tabIndex: 0, children }),
+            footer && /* @__PURE__ */ jsx("div", { className: `${baseClass}__footer`, children: footer })
+          ]
+        }
+      )
+    ] });
+    if (!mounted) return null;
+    return ReactDOM.createPortal(dialog, document.body);
+  }
+);
+Dialog.displayName = "Dialog";
+export {
+  Dialog
+};

package/components/Divider/Divider.css

@@ -0,0 +1,100 @@
+/* ============================================
+   DIVIDER COMPONENT
+   Thin rule separating stacked content
+   ============================================ */
+
+/* Base — plain horizontal <hr> */
+.ds-divider {
+  border: none;
+  margin: 0;
+  border-top: var(--border-025) solid var(--color-divider);
+  width: 100%;
+}
+
+/* ============================================
+   SPACING
+   Block margin for horizontal, inline for vertical
+   ============================================ */
+
+.ds-divider--spacing-none {
+  margin-block: 0;
+}
+
+.ds-divider--spacing-sm {
+  margin-block: var(--gap-200); /* 8px */
+}
+
+.ds-divider--spacing-md {
+  margin-block: var(--gap-400); /* 16px */
+}
+
+.ds-divider--spacing-lg {
+  margin-block: var(--gap-500); /* 20px */
+}
+
+/* ============================================
+   LABELED
+   Text label inline with the rule
+   ============================================ */
+
+.ds-divider--labeled {
+  border-top: none;
+  display: flex;
+  align-items: center;
+  gap: var(--gap-300); /* 12px */
+}
+
+.ds-divider--labeled::before,
+.ds-divider--labeled::after {
+  content: '';
+  flex: 1;
+  height: var(--border-025);
+  background-color: var(--color-divider);
+}
+
+/* Label at the start — no leading segment */
+.ds-divider--label-start::before {
+  display: none;
+}
+
+.ds-divider__label {
+  flex-shrink: 0;
+  font-family: var(--font-paragraph-sm-family);
+  font-size: var(--font-paragraph-sm-size);
+  font-weight: var(--font-paragraph-sm-weight);
+  line-height: var(--font-paragraph-sm-line-height);
+  letter-spacing: var(--font-paragraph-sm-letter-spacing);
+  color: var(--color-text-secondary);
+}
+
+/* ============================================
+   VERTICAL
+   Stretches to container height inside flex rows
+   ============================================ */
+
+.ds-divider--vertical {
+  border-top: none;
+  width: var(--border-025);
+  align-self: stretch;
+  background-color: var(--color-divider);
+}
+
+.ds-divider--vertical.ds-divider--spacing-none {
+  margin-block: 0;
+  margin-inline: 0;
+}
+
+.ds-divider--vertical.ds-divider--spacing-sm {
+  margin-block: 0;
+  margin-inline: var(--gap-200); /* 8px */
+}
+
+.ds-divider--vertical.ds-divider--spacing-md {
+  margin-block: 0;
+  margin-inline: var(--gap-400); /* 16px */
+}
+
+.ds-divider--vertical.ds-divider--spacing-lg {
+  margin-block: 0;
+  margin-inline: var(--gap-500); /* 20px */
+}

package/components/Divider/Divider.d.ts

@@ -0,0 +1,18 @@
+export interface DividerProps {
+    /** Divider direction */
+    orientation?: 'horizontal' | 'vertical';
+    /** Optional label rendered inline in the line (horizontal only) */
+    label?: string;
+    /** Label placement along the line */
+    labelPosition?: 'start' | 'center';
+    /** Margin around the divider (block for horizontal, inline for vertical) */
+    spacing?: 'none' | 'sm' | 'md' | 'lg';
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * Divider component — a thin rule separating stacked content.
+ * Plain horizontal by default; supports an inline text label
+ * and a vertical orientation for use inside flex rows.
+ */
+export declare const Divider: ({ orientation, label, labelPosition, spacing, className, }: DividerProps) => import("react").JSX.Element;

package/components/Divider/Divider.js

@@ -0,0 +1,31 @@
+import { jsx } from "react/jsx-runtime";
+import "./Divider.css";
+const Divider = ({
+  orientation = "horizontal",
+  label,
+  labelPosition = "center",
+  spacing = "md",
+  className = ""
+}) => {
+  const baseClass = "ds-divider";
+  const spacingClass = `${baseClass}--spacing-${spacing}`;
+  if (orientation === "vertical") {
+    const classes2 = [baseClass, `${baseClass}--vertical`, spacingClass, className].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsx("div", { className: classes2, role: "separator", "aria-orientation": "vertical" });
+  }
+  if (label) {
+    const classes2 = [
+      baseClass,
+      `${baseClass}--labeled`,
+      `${baseClass}--label-${labelPosition}`,
+      spacingClass,
+      className
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsx("div", { className: classes2, role: "separator", "aria-orientation": "horizontal", children: /* @__PURE__ */ jsx("span", { className: `${baseClass}__label`, children: label }) });
+  }
+  const classes = [baseClass, spacingClass, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("hr", { className: classes });
+};
+export {
+  Divider
+};

package/components/DocumentChip/DocumentChip.css

@@ -0,0 +1,190 @@
+/* ============================================
+   DOCUMENT CHIP COMPONENT
+   Compact file reference tile: type icon, name,
+   metadata line, upload progress, optional remove.
+   ============================================ */
+
+.ds-document-chip {
+  /* Accent indirection — the error modifier repoints one variable
+     instead of restyling each part */
+  --ds-document-chip-border: var(--color-bg-container-border);
+
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gap-200);
+
+  padding: var(--padding-150) var(--padding-300);
+
+  border: var(--border-025) solid var(--ds-document-chip-border);
+  border-radius: var(--radius-300);
+  background-color: var(--color-bg-container-primary);
+
+  transition: border-color var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+/* ============================================
+   SIZE — COMPACT (single line for composer rows)
+   ============================================ */
+
+.ds-document-chip--compact {
+  gap: var(--gap-100);
+  padding: var(--padding-100) var(--padding-200);
+}
+
+/* ============================================
+   ERROR — repoint the border accent
+   ============================================ */
+
+.ds-document-chip--error {
+  --ds-document-chip-border: var(--color-status-error-border);
+}
+
+/* ============================================
+   MAIN — body button when the chip is clickable
+   ============================================ */
+
+.ds-document-chip__main {
+  display: inline-flex;
+  align-items: center;
+  gap: inherit;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: none;
+  border-radius: var(--radius-200);
+  font: inherit;
+  letter-spacing: inherit;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+  transition: background-color var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-document-chip__main:hover {
+  background-color: var(--color-bg-container-secondary);
+}
+
+/* ============================================
+   TYPE ICON
+   ============================================ */
+
+.ds-document-chip__icon {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: var(--color-icon-primary);
+  transition: color var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-document-chip__icon .material-symbols-rounded {
+  --icon-size: var(--icon-size-600);
+}
+
+.ds-document-chip--compact .ds-document-chip__icon .material-symbols-rounded {
+  --icon-size: var(--icon-size-500);
+}
+
+.ds-document-chip--error .ds-document-chip__icon {
+  color: var(--color-status-error-text);
+}
+
+/* ============================================
+   TEXT BLOCK — name over one detail line
+   ============================================ */
+
+.ds-document-chip__text {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--gap-050);
+  min-width: 0;
+}
+
+.ds-document-chip__name {
+  /* Consumer-overridable truncation width */
+  max-width: var(--ds-document-chip-max-width, 28ch);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  font-family: var(--font-paragraph-sm-emphasis-family);
+  font-size: var(--font-paragraph-sm-emphasis-size);
+  font-weight: var(--font-paragraph-sm-emphasis-weight);
+  line-height: var(--font-paragraph-sm-emphasis-line-height);
+  letter-spacing: var(--font-paragraph-sm-emphasis-letter-spacing);
+  color: var(--color-text-primary);
+}
+
+.ds-document-chip__meta,
+.ds-document-chip__error {
+  font-family: var(--font-paragraph-sm-family);
+  font-size: var(--font-paragraph-sm-size);
+  font-weight: var(--font-paragraph-sm-weight);
+  line-height: var(--font-paragraph-sm-line-height);
+  letter-spacing: var(--font-paragraph-sm-letter-spacing);
+  white-space: nowrap;
+}
+
+.ds-document-chip__meta {
+  color: var(--color-text-tertiary);
+}
+
+.ds-document-chip__error {
+  color: var(--color-status-error-text);
+}
+
+/* Composed ProgressBar replacing the metadata line */
+.ds-document-chip__progress {
+  align-self: stretch;
+}
+
+/* ============================================
+   REMOVE BUTTON
+   ============================================ */
+
+.ds-document-chip__remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: none;
+  border-radius: var(--radius-pill);
+  color: var(--color-icon-primary);
+  cursor: pointer;
+  transition: color var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-document-chip__remove .material-symbols-rounded {
+  --icon-size: var(--icon-size-500);
+}
+
+.ds-document-chip__remove:not(:disabled):hover {
+  color: var(--color-text-primary);
+}
+
+.ds-document-chip__remove:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* ============================================
+   FOCUS
+   ============================================ */
+
+.ds-document-chip__main:focus-visible,
+.ds-document-chip__remove:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: -2px;
+}
+
+/* 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-document-chip .material-symbols-rounded {
+  color: inherit;
+}

package/components/DocumentChip/DocumentChip.d.ts

@@ -0,0 +1,41 @@
+import { default as React } from 'react';
+export type DocumentChipFileType = 'pdf' | 'doc' | 'sheet' | 'slide' | 'image' | 'code' | 'archive' | 'generic';
+/** Props owned by DocumentChip itself — everything else falls through to the root element. */
+type DocumentChipOwnProps = {
+    /** File name, truncated with an ellipsis when it outgrows the tile. */
+    name: string;
+    /** Document type — picks the leading Material Symbol. */
+    fileType?: DocumentChipFileType;
+    /** Override the type icon — a Material Symbol name, or any custom element. */
+    icon?: string | React.ReactNode;
+    /** Free-text metadata line, e.g. "1.2 MB" or "12 pages" — callers keep their own formatting. */
+    meta?: string;
+    /** Upload progress, 0–100. While set, replaces the metadata line with a progress bar. */
+    progress?: number;
+    /** Error message — replaces the metadata line and colours the tile with the error pair. */
+    error?: string;
+    /** Tile size. Compact drops the metadata line — name only — for dense composer rows. */
+    size?: 'default' | 'compact';
+    /** Click handler — presence makes the chip body (icon + text) an interactive button. */
+    onClick?: () => void;
+    /** Remove handler — renders a trailing close button. */
+    onRemove?: () => void;
+    /** Accessible label for the remove button. */
+    removeLabel?: string;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface DocumentChipProps extends DocumentChipOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof DocumentChipOwnProps> {
+}
+/**
+ * DocumentChip is a compact file reference: a two-line tile with a type
+ * icon, name, metadata line, upload progress, and an optional remove
+ * button. It references documents attached to chat messages or queued
+ * above a composer — Chip stays the one-line pill for attributes, and
+ * FileInput stays the form control that owns selection.
+ *
+ * The root is always a `<div>`; passing `onClick` turns the body into a
+ * `<button>` so click and remove coexist without nesting controls.
+ */
+export declare const DocumentChip: React.ForwardRefExoticComponent<DocumentChipProps & React.RefAttributes<HTMLDivElement>>;
+export {};