rift-ds 1.0.0

package/components/ContactCard/ContactCard.css

@@ -0,0 +1,132 @@
+/* ============================================
+   CONTACT CARD
+   ============================================ */
+.ds-contact-card {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-500);
+  padding: var(--padding-500);
+  border: 1px solid var(--color-bg-container-border);
+  border-radius: var(--radius-300);
+  background: var(--color-bg-container-primary-semi);
+  text-decoration: none;
+  color: inherit;
+  transition: background var(--motion-duration-fast) var(--motion-ease-standard), border-color var(--motion-duration-fast) var(--motion-ease-standard);
+  /* Resets so the card renders identically whether it's an <a> or a <button>
+     (copy-only cards use a button). */
+  width: 100%;
+  box-sizing: border-box;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.ds-contact-card:hover {
+  background: var(--color-bg-container-secondary);
+  border-color: var(--color-bg-container-border);
+}
+
+.ds-contact-card:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: 2px;
+}
+
+/* Icon / logo slot */
+.ds-contact-card__icon-wrap {
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.ds-contact-card__icon {
+  --icon-size: var(--icon-size-600);
+  color: var(--color-text-secondary);
+}
+
+.ds-contact-card__logo {
+  width: 24px;
+  height: 24px;
+  object-fit: contain;
+}
+
+/* Text */
+.ds-contact-card__text {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  flex: 1;
+  min-width: 0;
+}
+
+.ds-contact-card__label {
+  font-family: var(--font-title-body-family);
+  font-size: var(--font-title-body-size);
+  font-weight: var(--font-title-body-weight);
+  line-height: var(--font-title-body-line-height);
+  color: var(--color-text-primary);
+}
+
+.ds-contact-card__value {
+  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);
+  color: var(--color-text-tertiary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Actions */
+.ds-contact-card__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-100);
+  flex-shrink: 0;
+}
+
+.ds-contact-card__copy-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: none;
+  border-radius: var(--radius-pill);
+  background: transparent;
+  color: var(--color-text-tertiary);
+  cursor: pointer;
+  transition: background var(--motion-duration-fast) var(--motion-ease-standard), color var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-contact-card__copy-btn:hover {
+  background: var(--color-bg-container-tertiary);
+  color: var(--color-text-primary);
+}
+
+.ds-contact-card__copy-btn:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: 2px;
+}
+
+.ds-contact-card__copy-btn .material-symbols-rounded {
+  --icon-size: var(--icon-size-500);
+}
+
+.ds-contact-card__chevron {
+  --icon-size: var(--icon-size-500);
+  color: var(--color-text-tertiary);
+  flex-shrink: 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-contact-card .material-symbols-rounded {
+  color: inherit;
+}

package/components/ContactCard/ContactCard.d.ts

@@ -0,0 +1,24 @@
+import { default as React } from 'react';
+export interface ContactCardProps {
+    /** Primary label — e.g. "Email" */
+    label: string;
+    /** Visible value or description — e.g. "hello@example.com" */
+    value: string;
+    /** Link destination */
+    href: string;
+    /** Icon used when no logo is set — Material Symbol name (string) or custom element (ReactNode) */
+    icon?: string | React.ReactNode;
+    /** Path to a logo image — preferred over icon when both are provided */
+    logo?: string;
+    /** Opens link in a new tab and shows open_in_new indicator */
+    external?: boolean;
+    /** Renders a copy-to-clipboard button; fires onCopy(value) when clicked */
+    copyable?: boolean;
+    /** Called with the card's value when the copy button is clicked */
+    onCopy?: (value: string) => void;
+    /** Renders the whole card as a button that copies `value` on click — no navigation */
+    copyOnClick?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare const ContactCard: ({ label, value, href, icon, logo, external, copyable, onCopy, copyOnClick, className, }: ContactCardProps) => React.JSX.Element;

package/components/ContactCard/ContactCard.js

@@ -0,0 +1,79 @@
+"use client";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import "./ContactCard.css";
+import "../../fonts/material-symbols.css";
+const ContactCard = ({
+  label,
+  value,
+  href,
+  icon,
+  logo,
+  external = false,
+  copyable = false,
+  onCopy,
+  copyOnClick = false,
+  className = ""
+}) => {
+  const classes = ["ds-contact-card", className].filter(Boolean).join(" ");
+  const isProtocolLink = /^(mailto:|tel:)/i.test(href);
+  const openInNewTab = external && !isProtocolLink;
+  const trailingIcon = copyOnClick ? "content_copy" : external ? "open_in_new" : "arrow_forward";
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { className: "ds-contact-card__icon-wrap", "aria-hidden": "true", children: logo ? /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: logo,
+        alt: "",
+        width: 24,
+        height: 24,
+        className: "ds-contact-card__logo"
+      }
+    ) : typeof icon === "string" || icon == null ? /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded ds-contact-card__icon", children: icon ?? "link" }) : /* @__PURE__ */ jsx("span", { className: "ds-contact-card__icon", children: icon }) }),
+    /* @__PURE__ */ jsxs("div", { className: "ds-contact-card__text", children: [
+      /* @__PURE__ */ jsx("span", { className: "ds-contact-card__label", children: label }),
+      /* @__PURE__ */ jsx("span", { className: "ds-contact-card__value", children: value })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "ds-contact-card__actions", children: [
+      copyable && !copyOnClick && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            onCopy?.(value);
+          },
+          className: "ds-contact-card__copy-btn",
+          "aria-label": `Copy ${value}`,
+          children: /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", "aria-hidden": "true", children: "content_copy" })
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded ds-contact-card__chevron", "aria-hidden": "true", children: trailingIcon })
+    ] })
+  ] });
+  if (copyOnClick) {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: classes,
+        onClick: () => onCopy?.(value),
+        "aria-label": `Copy ${value} to clipboard`,
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      href,
+      target: openInNewTab ? "_blank" : void 0,
+      rel: openInNewTab ? "noopener noreferrer" : void 0,
+      className: classes,
+      children: content
+    }
+  );
+};
+export {
+  ContactCard
+};

package/components/ContextMenu/ContextMenu.css

@@ -0,0 +1,258 @@
+/* ============================================
+   CONTEXT MENU COMPONENT
+   Right-click menu anchored at the pointer.
+   Panel and item styling mirror DropdownMenu.
+   ============================================ */
+
+/* Base — a plain block wrapper around the right-clickable area
+   (a real box, so the keyboard-invocation fallback can measure it) */
+.ds-context-menu {
+  display: block;
+}
+
+/* ============================================
+   PANEL
+   Fixed-positioned at the pointer; left/top are
+   set inline from the contextmenu event coords.
+   ============================================ */
+
+.ds-context-menu__panel {
+  position: fixed;
+  z-index: 50;
+  min-width: 200px;
+
+  /* Appearance — same recipe as DropdownMenu */
+  background: var(--color-bg-page-primary);
+  border: var(--border-025) solid var(--color-input-border-primary);
+  border-radius: var(--radius-300);
+  box-shadow: var(--shadow-floating);
+
+  /* Inset gap */
+  padding: var(--padding-100);
+
+  /* Reset list */
+  list-style: none;
+  margin: 0;
+
+  outline: none;
+
+  /* Animation */
+  animation: ds-context-menu-appear var(--motion-duration-fast) var(--motion-ease-entrance);
+}
+
+/* Compact items: paragraph-sm-em, tighter padding, radius-sm */
+.ds-context-menu__panel--compact .ds-context-menu__item {
+  padding: var(--padding-150) var(--padding-300);
+  border-radius: var(--radius-200);
+  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);
+}
+
+.ds-context-menu__panel--compact .ds-context-menu__item-icon {
+  --icon-size: var(--icon-size-500);
+}
+
+.ds-context-menu__panel--compact .ds-context-menu__submenu-icon {
+  --icon-size: var(--icon-size-500);
+}
+
+.ds-context-menu__panel--compact .ds-context-menu__group-label {
+  min-height: auto;
+  padding: var(--padding-150) var(--padding-300);
+  font-size: var(--font-paragraph-sm-emphasis-size);
+  line-height: var(--font-paragraph-sm-emphasis-line-height);
+  letter-spacing: var(--font-paragraph-sm-emphasis-letter-spacing);
+}
+
+.ds-context-menu__panel--compact .ds-context-menu__separator {
+  margin: var(--padding-100) var(--padding-300);
+}
+
+/* ============================================
+   SUB-MENU PANEL
+   Positioned relative to its parent item.
+   ============================================ */
+
+.ds-context-menu__submenu {
+  position: absolute;
+  left: 100%;
+  top: 0;
+  margin-left: var(--gap-050);
+}
+
+/* ============================================
+   MENU ITEM
+   ============================================ */
+
+.ds-context-menu__item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--gap-400);
+  padding: var(--padding-200) var(--padding-400);
+  border-radius: var(--radius-300);
+  cursor: pointer;
+  position: relative;
+  white-space: nowrap;
+  list-style: none;
+
+  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);
+  color: var(--color-action-passive-text);
+
+  transition: background-color var(--motion-duration-fast) var(--motion-ease-standard), color var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-context-menu__item:hover,
+.ds-context-menu__item--focused {
+  background-color: var(--color-action-passive-bg-hover);
+}
+
+/* States — disabled */
+.ds-context-menu__item--disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.ds-context-menu__item--disabled:hover,
+.ds-context-menu__item--disabled.ds-context-menu__item--focused {
+  background-color: transparent;
+}
+
+/* ============================================
+   ITEM LABEL (text + optional icon)
+   ============================================ */
+
+.ds-context-menu__item-label {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-200);
+  line-height: 1;
+}
+
+.ds-context-menu__item-icon {
+  --icon-size: var(--icon-size-600);
+  color: var(--color-icon-secondary);
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+}
+
+/* ============================================
+   KEYBOARD SHORTCUT
+   ============================================ */
+
+.ds-context-menu__shortcut {
+  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-left: auto;
+  flex-shrink: 0;
+}
+
+/* ============================================
+   SUB-MENU INDICATOR
+   ============================================ */
+
+.ds-context-menu__submenu-icon {
+  --icon-size: var(--icon-size-600);
+  color: var(--color-text-tertiary);
+  margin-left: auto;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+}
+
+.ds-context-menu__item--has-submenu {
+  padding-right: var(--padding-300);
+}
+
+/* ============================================
+   SEPARATOR
+   ============================================ */
+
+.ds-context-menu__separator {
+  height: 1px;
+  background: var(--color-input-border-primary);
+  margin: var(--padding-100) var(--padding-400);
+  list-style: none;
+}
+
+/* ============================================
+   GROUP
+   ============================================ */
+
+.ds-context-menu__group {
+  list-style: none;
+}
+
+.ds-context-menu__group-label {
+  display: flex;
+  align-items: center;
+  min-height: 40px;
+  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);
+  color: var(--color-text-tertiary);
+  padding-left: var(--padding-400);
+  padding-right: var(--padding-400);
+  user-select: none;
+}
+
+.ds-context-menu__group-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/* ============================================
+   DESTRUCTIVE ITEM
+   ============================================ */
+
+.ds-context-menu__item--destructive {
+  color: var(--color-core-accent-coral);
+}
+
+.ds-context-menu__item--destructive .ds-context-menu__item-icon {
+  color: var(--color-core-accent-coral);
+}
+
+.ds-context-menu__item--destructive .ds-context-menu__shortcut {
+  color: var(--color-core-accent-coral);
+  opacity: 0.7;
+}
+
+.ds-context-menu__item--destructive:hover,
+.ds-context-menu__item--destructive.ds-context-menu__item--focused {
+  background-color: var(--color-status-error-bg);
+}
+
+/* ============================================
+   APPEAR ANIMATION
+   ============================================ */
+
+@keyframes ds-context-menu-appear {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}

package/components/ContextMenu/ContextMenu.d.ts

@@ -0,0 +1,26 @@
+import { default as React } from 'react';
+import { DropdownMenuEntry } from '../DropdownMenu/DropdownMenu';
+/** Props owned by ContextMenu itself — everything else falls through to the wrapper div. */
+type ContextMenuOwnProps = {
+    /** Menu entries — the same model as DropdownMenu (items, groups, separators) */
+    items: DropdownMenuEntry[];
+    /** Component size */
+    size?: 'default' | 'compact';
+    /** Accessible name for the menu */
+    ariaLabel?: string;
+    /** Additional CSS classes */
+    className?: string;
+    /** The right-clickable area the menu is attached to */
+    children: React.ReactNode;
+};
+export interface ContextMenuProps extends ContextMenuOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof ContextMenuOwnProps> {
+}
+/**
+ * ContextMenu opens a floating menu at the pointer position when the wrapped
+ * area is right-clicked (or the keyboard ContextMenu / Shift+F10 key is used).
+ * Entries use the same model as DropdownMenu — items, groups, separators,
+ * icons, shortcut hints, destructive and disabled states, and one level of
+ * sub-menus.
+ */
+export declare const ContextMenu: React.ForwardRefExoticComponent<ContextMenuProps & React.RefAttributes<HTMLDivElement>>;
+export {};