rift-ds 1.0.0

package/components/DocumentChip/DocumentChip.js

@@ -0,0 +1,78 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import React from "react";
+import { ProgressBar } from "../ProgressBar/ProgressBar.js";
+import "./DocumentChip.css";
+import "../../fonts/material-symbols.css";
+const FILE_TYPE_ICONS = {
+  pdf: "picture_as_pdf",
+  doc: "description",
+  sheet: "table",
+  slide: "co_present",
+  image: "image",
+  code: "code",
+  archive: "folder_zip",
+  generic: "draft"
+};
+const DocumentChip = React.forwardRef(
+  ({
+    name,
+    fileType = "generic",
+    icon,
+    meta,
+    progress,
+    error,
+    size = "default",
+    onClick,
+    onRemove,
+    removeLabel = "Remove file",
+    className = "",
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-document-chip";
+    const classes = [
+      baseClass,
+      `${baseClass}--${size}`,
+      error ? `${baseClass}--error` : "",
+      onClick ? `${baseClass}--clickable` : "",
+      onRemove ? `${baseClass}--removable` : "",
+      className
+    ].filter(Boolean).join(" ");
+    const typeIcon = icon ?? FILE_TYPE_ICONS[fileType];
+    const showDetail = size !== "compact";
+    const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon`, "aria-hidden": "true", children: typeof typeIcon === "string" ? /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", children: typeIcon }) : typeIcon }),
+      /* @__PURE__ */ jsxs("span", { className: `${baseClass}__text`, children: [
+        /* @__PURE__ */ jsx("span", { className: `${baseClass}__name`, children: name }),
+        showDetail && error && /* @__PURE__ */ jsx("span", { className: `${baseClass}__error`, children: error }),
+        showDetail && !error && progress !== void 0 && /* @__PURE__ */ jsx(
+          ProgressBar,
+          {
+            className: `${baseClass}__progress`,
+            size: "compact",
+            value: progress,
+            showLabel: true,
+            ariaLabel: `Uploading ${name}`
+          }
+        ),
+        showDetail && !error && progress === void 0 && meta && /* @__PURE__ */ jsx("span", { className: `${baseClass}__meta`, children: meta })
+      ] })
+    ] });
+    return /* @__PURE__ */ jsxs("div", { ...rest, ref, className: classes, children: [
+      onClick ? /* @__PURE__ */ jsx("button", { type: "button", className: `${baseClass}__main`, onClick, children: body }) : body,
+      onRemove && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: `${baseClass}__remove`,
+          onClick: onRemove,
+          "aria-label": removeLabel,
+          children: /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", "aria-hidden": "true", children: "close" })
+        }
+      )
+    ] });
+  }
+);
+DocumentChip.displayName = "DocumentChip";
+export {
+  DocumentChip
+};

package/components/Drawer/Drawer.css

@@ -0,0 +1,262 @@
+/* ============================================
+   DRAWER COMPONENT
+   Edge-anchored modal panel that slides in
+   ============================================ */
+
+.ds-drawer {
+  position: fixed;
+  inset: 0;
+  z-index: 100;
+  display: flex;
+  visibility: hidden; /* keeps panel controls out of the tab order when closed */
+  pointer-events: none;
+  transition: visibility var(--motion-duration-slow) var(--motion-ease-standard);
+}
+
+.ds-drawer--open {
+  visibility: visible;
+  pointer-events: auto;
+}
+
+/* Anchor the panel to the requested edge */
+.ds-drawer--left {
+  justify-content: flex-start;
+  align-items: stretch;
+}
+
+.ds-drawer--right {
+  justify-content: flex-end;
+  align-items: stretch;
+}
+
+.ds-drawer--top {
+  align-items: flex-start;
+  justify-content: stretch;
+}
+
+.ds-drawer--bottom {
+  align-items: flex-end;
+  justify-content: stretch;
+}
+
+/* ============================================
+   SCRIM
+   ============================================ */
+
+.ds-drawer__scrim {
+  position: absolute;
+  inset: 0;
+  background-color: var(--color-scrim);
+  opacity: 0;
+  transition: opacity var(--motion-duration-slow) var(--motion-ease-standard);
+}
+
+.ds-drawer--open .ds-drawer__scrim {
+  opacity: 1;
+}
+
+/* ============================================
+   PANEL
+   ============================================ */
+
+.ds-drawer__panel {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-400); /* 16px */
+  padding: var(--padding-500); /* 20px */
+  background-color: var(--color-bg-page-primary);
+  box-shadow: var(--shadow-modal);
+  transition: transform var(--motion-duration-slow) var(--motion-ease-standard);
+  outline: none;
+  overflow: hidden;
+}
+
+/* Edge-specific border + resting (off-screen) transform */
+.ds-drawer--left .ds-drawer__panel {
+  height: 100%;
+  border-right: var(--border-025) solid var(--color-bg-container-border);
+  transform: translateX(-100%);
+}
+
+.ds-drawer--right .ds-drawer__panel {
+  height: 100%;
+  border-left: var(--border-025) solid var(--color-bg-container-border);
+  transform: translateX(100%);
+}
+
+.ds-drawer--top .ds-drawer__panel {
+  width: 100%;
+  border-bottom: var(--border-025) solid var(--color-bg-container-border);
+  transform: translateY(-100%);
+}
+
+.ds-drawer--bottom .ds-drawer__panel {
+  width: 100%;
+  border-top: var(--border-025) solid var(--color-bg-container-border);
+  transform: translateY(100%);
+}
+
+.ds-drawer--open .ds-drawer__panel {
+  transform: translate(0, 0);
+}
+
+/* ============================================
+   SIZES — measured along the slide axis
+   ============================================ */
+
+.ds-drawer--left.ds-drawer--sm .ds-drawer__panel,
+.ds-drawer--right.ds-drawer--sm .ds-drawer__panel {
+  width: 320px;
+  max-width: 100vw;
+}
+
+.ds-drawer--left.ds-drawer--md .ds-drawer__panel,
+.ds-drawer--right.ds-drawer--md .ds-drawer__panel {
+  width: 420px;
+  max-width: 100vw;
+}
+
+.ds-drawer--left.ds-drawer--lg .ds-drawer__panel,
+.ds-drawer--right.ds-drawer--lg .ds-drawer__panel {
+  width: 560px;
+  max-width: 100vw;
+}
+
+.ds-drawer--top.ds-drawer--sm .ds-drawer__panel,
+.ds-drawer--bottom.ds-drawer--sm .ds-drawer__panel {
+  max-height: 30vh;
+}
+
+.ds-drawer--top.ds-drawer--md .ds-drawer__panel,
+.ds-drawer--bottom.ds-drawer--md .ds-drawer__panel {
+  max-height: 50vh;
+}
+
+.ds-drawer--top.ds-drawer--lg .ds-drawer__panel,
+.ds-drawer--bottom.ds-drawer--lg .ds-drawer__panel {
+  max-height: 75vh;
+}
+
+/* ============================================
+   HEADER
+   ============================================ */
+
+.ds-drawer__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--gap-400); /* 16px */
+  flex-shrink: 0;
+}
+
+.ds-drawer__heading {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-100); /* 4px */
+  min-width: 0;
+}
+
+.ds-drawer__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-drawer__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-drawer__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-drawer__close:hover {
+  background-color: var(--color-action-passive-bg-hover);
+}
+
+.ds-drawer__close:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: 2px;
+}
+
+.ds-drawer__close-icon {
+  --icon-size: var(--icon-size-500);
+  line-height: 1;
+  color: var(--color-icon-primary);
+}
+
+/* ============================================
+   BODY
+   ============================================ */
+
+.ds-drawer__body {
+  flex: 1;
+  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-drawer__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--gap-200); /* 8px */
+  padding-top: var(--padding-150); /* 6px */
+  flex-shrink: 0;
+}
+
+/* ============================================
+   RESPONSIVE
+   Side drawers go full-width on narrow screens
+   ============================================ */
+
+@media (max-width: 480px) {
+  .ds-drawer--left .ds-drawer__panel,
+  .ds-drawer--right .ds-drawer__panel {
+    width: 100vw;
+  }
+}
+
+/* ============================================
+   REDUCED MOTION
+   ============================================ */
+
+@media (prefers-reduced-motion: reduce) {
+  .ds-drawer,
+  .ds-drawer__panel,
+  .ds-drawer__scrim {
+    transition: none;
+  }
+}

package/components/Drawer/Drawer.d.ts

@@ -0,0 +1,41 @@
+import { default as React } from 'react';
+/** Props owned by Drawer itself — everything else falls through to the panel. */
+type DrawerOwnProps = {
+    /** Whether the drawer is open */
+    open: boolean;
+    /** Callback when the drawer requests to close */
+    onOpenChange: (open: boolean) => void;
+    /**
+     * Drawer title.
+     * Note: this shadows the native `title` tooltip attribute, which Drawer does not expose.
+     */
+    title: string;
+    /** Optional subtitle under the title */
+    description?: string;
+    /** Drawer body content */
+    children?: React.ReactNode;
+    /** Optional footer slot — typically a row of Buttons */
+    footer?: React.ReactNode;
+    /** Edge the panel slides in from */
+    side?: 'left' | 'right' | 'top' | 'bottom';
+    /** Panel size along the axis it slides on */
+    size?: 'sm' | 'md' | 'lg';
+    /** Whether ESC, scrim click, and the close button can dismiss */
+    dismissible?: boolean;
+    /** Additional CSS classes — applied to the portal container, not the panel */
+    className?: string;
+};
+export interface DrawerProps extends DrawerOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof DrawerOwnProps> {
+}
+/**
+ * Drawer component — an edge-anchored panel that slides in over the page.
+ * Shares Dialog's modal semantics (focus trap, focus restore, scroll lock,
+ * ESC/scrim dismissal) but is anchored to a viewport edge, which suits
+ * filter panels, detail views, and mobile navigation.
+ *
+ * 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.
+ */
+export declare const Drawer: React.ForwardRefExoticComponent<DrawerProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/Drawer/Drawer.js

@@ -0,0 +1,101 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import React, { useRef, useId } from "react";
+import ReactDOM from "react-dom";
+import "./Drawer.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 Drawer = React.forwardRef(
+  ({
+    open,
+    onOpenChange,
+    title,
+    description,
+    children,
+    footer,
+    side = "right",
+    size = "md",
+    dismissible = true,
+    className = "",
+    ...rest
+  }, ref) => {
+    const panelRef = useRef(null);
+    const titleId = useId();
+    const descId = useId();
+    const baseClass = "ds-drawer";
+    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 handleScrimClick = () => {
+      if (dismissible) onOpenChange(false);
+    };
+    const classes = [
+      baseClass,
+      `${baseClass}--${side}`,
+      `${baseClass}--${size}`,
+      open ? `${baseClass}--open` : "",
+      className
+    ].filter(Boolean).join(" ");
+    const drawer = /* @__PURE__ */ jsxs("div", { className: classes, children: [
+      /* @__PURE__ */ jsx("div", { className: `${baseClass}__scrim`, onClick: handleScrimClick }),
+      /* @__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 drawer",
+                  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(drawer, document.body);
+  }
+);
+Drawer.displayName = "Drawer";
+export {
+  Drawer
+};