rift-ds 1.0.0

package/components/LegendTile/LegendTile.d.ts

@@ -0,0 +1,30 @@
+import { default as React } from 'react';
+/** Props owned by LegendTile itself — everything else falls through to the root div. */
+type LegendTileOwnProps = {
+    /** The series name shown above the value. Truncates with an ellipsis rather than wrapping. */
+    label: string;
+    /**
+     * The reading for this series. Numbers are formatted with `toLocaleString()`;
+     * pass a string when the value carries its own formatting or a unit.
+     */
+    value: string | number;
+    /**
+     * Any CSS colour for the series dot — consumers typically pass a chart
+     * palette token, e.g. `var(--color-chart-series-1)`. When omitted, no dot
+     * renders.
+     */
+    swatch?: string;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface LegendTileProps extends LegendTileOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof LegendTileOwnProps> {
+}
+/**
+ * LegendTile — the labelled value tile that sits under a chart and ties a
+ * series to its number. An inset tile one surface step below its panel, with
+ * an optional series dot matching the chart's palette. Pure JSX and CSS: no
+ * charting library, no hooks, so it renders from a Server Component and a row
+ * of them costs nothing under a dense dashboard.
+ */
+export declare const LegendTile: React.ForwardRefExoticComponent<LegendTileProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/LegendTile/LegendTile.js

@@ -0,0 +1,21 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React from "react";
+import "./LegendTile.css";
+const LegendTile = React.forwardRef(
+  ({ label, value, swatch, className = "", style, ...rest }, ref) => {
+    const baseClass = "ds-legend-tile";
+    const classes = [baseClass, className].filter(Boolean).join(" ");
+    const mergedStyle = swatch ? { ...style, "--legend-tile-swatch": swatch } : style;
+    return /* @__PURE__ */ jsxs("div", { ...rest, ref, className: classes, style: mergedStyle, children: [
+      /* @__PURE__ */ jsxs("span", { className: `${baseClass}__label`, children: [
+        swatch && /* @__PURE__ */ jsx("span", { className: `${baseClass}__dot`, "aria-hidden": "true" }),
+        label
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: `${baseClass}__value`, children: typeof value === "number" ? value.toLocaleString() : value })
+    ] });
+  }
+);
+LegendTile.displayName = "LegendTile";
+export {
+  LegendTile
+};

package/components/Lightbox/Lightbox.css

@@ -0,0 +1,210 @@
+/* ============================================
+   LIGHTBOX COMPONENT
+   Fullscreen media viewer over a frosted scrim
+   ============================================ */
+
+.ds-lightbox {
+  position: fixed;
+  inset: 0;
+  z-index: 100;
+  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-lightbox--open {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+}
+
+/* ============================================
+   BACKDROP
+   The scrim, frosted: blurring the page behind
+   separates the media without a deeper token
+   ============================================ */
+
+.ds-lightbox__backdrop {
+  position: absolute;
+  inset: 0;
+  background-color: var(--color-scrim);
+  /* The frost's strength; an effect length with no token family, chosen by
+     eye — enough to dissolve page detail behind a full-viewport image. */
+  --ds-lightbox-frost: 12px;
+  backdrop-filter: blur(var(--ds-lightbox-frost));
+}
+
+/* A media viewer wants a deeper floor than the dialogs' scrim: the same
+   token laid twice compounds it (≈0.75 light / ≈0.91 dark) while staying
+   theme-driven — no literal colour, no second scrim role. */
+.ds-lightbox__backdrop::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background-color: var(--color-scrim);
+}
+
+/* ============================================
+   PANEL
+   A full-viewport stage: transparent to clicks
+   so the backdrop hears them, while the media
+   and controls stay interactive
+   ============================================ */
+
+.ds-lightbox__panel {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--padding-1000);
+  pointer-events: none;
+  outline: none;
+}
+
+.ds-lightbox__panel > * {
+  pointer-events: auto;
+}
+
+/* ============================================
+   MEDIA
+   ============================================ */
+
+.ds-lightbox__figure {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--gap-400);
+  margin: 0;
+  max-width: 100%;
+  max-height: 100%;
+  transform: scale(0.96);
+  transition: transform var(--motion-duration-base) var(--motion-ease-entrance);
+}
+
+.ds-lightbox--open .ds-lightbox__figure {
+  transform: scale(1);
+}
+
+.ds-lightbox__img {
+  display: block;
+  max-width: calc(100vw - var(--gap-1000) * 4);
+  max-height: calc(100vh - var(--gap-1000) * 4);
+  width: auto;
+  height: auto;
+  border-radius: var(--radius-300);
+  box-shadow: var(--shadow-modal);
+}
+
+/* Custom media (children) takes the same viewport bounds. */
+.ds-lightbox__figure > :not(figcaption) {
+  max-width: calc(100vw - var(--gap-1000) * 4);
+  max-height: calc(100vh - var(--gap-1000) * 4);
+}
+
+/* ============================================
+   CAPTION
+   A glass chip under the media — legible over
+   the scrim in both themes
+   ============================================ */
+
+.ds-lightbox__caption {
+  padding: var(--padding-100) var(--padding-400);
+  border-radius: var(--radius-pill);
+  /* ds-allow(color): on-scrim furniture — the scrim floor is dark in both
+     themes, so the caption chip lives in scrim-world, not page-world; a
+     theme token would dissolve it into the dark-mode scrim. */
+  background-color: rgba(255, 255, 255, 0.12);
+  backdrop-filter: blur(var(--ds-lightbox-frost, 12px));
+  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);
+  /* ds-allow(color): white text on the always-dark scrim wash, both themes */
+  color: #ffffff;
+  text-align: center;
+  max-width: calc(100vw - var(--gap-1000) * 4);
+}
+
+/* ============================================
+   CONTROLS
+   Glass icon buttons: close pinned to the
+   viewer's corner, chevrons at its edges
+   ============================================ */
+
+.ds-lightbox__control {
+  position: absolute;
+  z-index: 1; /* above the media — DOM order alone would sink the prev chevron under a full-width image */
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--icon-size-1200); /* 48px — a viewer-scale target */
+  height: var(--icon-size-1200);
+  padding: 0;
+  border: none;
+  border-radius: var(--radius-pill);
+  /* ds-allow(color): on-scrim furniture — the scrim floor is dark in both
+     themes, so the control wash lives in scrim-world, not page-world; a
+     theme token would dissolve the controls into the dark-mode scrim. */
+  background-color: rgba(255, 255, 255, 0.12);
+  backdrop-filter: blur(var(--ds-lightbox-frost, 12px));
+  cursor: pointer;
+  transition: background-color var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-lightbox__control:hover {
+  /* ds-allow(color): the same on-scrim wash, one step brighter on hover */
+  background-color: rgba(255, 255, 255, 0.24);
+}
+
+.ds-lightbox__control:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: 2px;
+}
+
+.ds-lightbox__control-icon {
+  --icon-size: var(--icon-size-600);
+  line-height: 1;
+  /* ds-allow(color): white glyph on the always-dark scrim wash, both themes */
+  color: #ffffff;
+}
+
+.ds-lightbox__close {
+  top: var(--gap-500);
+  right: var(--gap-500);
+}
+
+.ds-lightbox__nav {
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.ds-lightbox__nav--prev {
+  left: var(--gap-500);
+}
+
+.ds-lightbox__nav--next {
+  right: var(--gap-500);
+}
+
+/* ============================================
+   RESPONSIVE
+   Tighter margins on small screens — the
+   chevrons overlay the media's edges
+   ============================================ */
+
+@media (max-width: 480px) {
+  .ds-lightbox__panel {
+    padding: var(--padding-400);
+  }
+
+  .ds-lightbox__img,
+  .ds-lightbox__figure > :not(figcaption),
+  .ds-lightbox__caption {
+    max-width: calc(100vw - var(--gap-400) * 2);
+  }
+}

package/components/Lightbox/Lightbox.d.ts

@@ -0,0 +1,45 @@
+import { default as React } from 'react';
+/** Props owned by Lightbox itself — everything else falls through to the panel. */
+type LightboxOwnProps = {
+    /** Whether the lightbox is open */
+    open: boolean;
+    /** Callback when the lightbox requests to close */
+    onOpenChange: (open: boolean) => void;
+    /** The image to show. Omit it when `children` supplies the media. */
+    src?: string;
+    /** Image alt text — also the panel's accessible name. Required whenever `src` is set. */
+    alt?: string;
+    /** Optional caption shown in a chip under the media */
+    caption?: string;
+    /**
+     * Custom media instead of `src` — a framework image component, a video, a
+     * live embed. Sized by the same viewport bounds the plain image gets.
+     */
+    children?: React.ReactNode;
+    /** Whether ESC, backdrop click, and the close button can dismiss */
+    dismissible?: boolean;
+    /**
+     * Steps to the previous item. Providing it renders the previous chevron and
+     * arms the Left arrow key — the consumer owns the collection and the index.
+     */
+    onPrev?: () => void;
+    /** Steps to the next item — the next chevron and the Right arrow key. */
+    onNext?: () => void;
+    /** Additional CSS classes — applied to the portal container, not the panel */
+    className?: string;
+};
+export interface LightboxProps extends LightboxOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof LightboxOwnProps> {
+}
+/**
+ * Lightbox — the fullscreen media viewer: an image (or custom media) centred
+ * over a deep frosted scrim, with a caption chip, a close control, and
+ * optional previous/next stepping for galleries. Rides the shared overlay
+ * behavior layer: Escape routes through the layer stack, focus is trapped
+ * and restored with the page inert behind the panel, and the body scroll
+ * lock is counted.
+ *
+ * Renders through a portal into `document.body`. The forwarded ref and any
+ * unrecognised props target the **panel** (the `role="dialog"` element).
+ */
+export declare const Lightbox: React.ForwardRefExoticComponent<LightboxProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/Lightbox/Lightbox.js

@@ -0,0 +1,109 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import React, { useRef, useEffect } from "react";
+import ReactDOM from "react-dom";
+import "./Lightbox.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 Lightbox = React.forwardRef(
+  ({
+    open,
+    onOpenChange,
+    src,
+    alt,
+    caption,
+    children,
+    dismissible = true,
+    onPrev,
+    onNext,
+    className = "",
+    ...rest
+  }, ref) => {
+    const panelRef = useRef(null);
+    const baseClass = "ds-lightbox";
+    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 stepRef = useRef({ onPrev, onNext });
+    stepRef.current = { onPrev, onNext };
+    useEffect(() => {
+      if (!open || !onPrev && !onNext) return;
+      const onKey = (e) => {
+        if (e.key === "ArrowLeft") stepRef.current.onPrev?.();
+        if (e.key === "ArrowRight") stepRef.current.onNext?.();
+      };
+      document.addEventListener("keydown", onKey);
+      return () => document.removeEventListener("keydown", onKey);
+    }, [open, onPrev, onNext]);
+    const handleBackdropClick = () => {
+      if (dismissible) onOpenChange(false);
+    };
+    const containerClasses = [baseClass, open ? `${baseClass}--open` : "", className].filter(Boolean).join(" ");
+    const lightbox = /* @__PURE__ */ jsxs("div", { className: containerClasses, children: [
+      /* @__PURE__ */ jsx("div", { className: `${baseClass}__backdrop`, onClick: handleBackdropClick }),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ...rest,
+          ref: setPanelRef,
+          className: `${baseClass}__panel`,
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-label": alt || caption || "Media viewer",
+          tabIndex: -1,
+          children: [
+            dismissible && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: `${baseClass}__control ${baseClass}__close`,
+                onClick: () => onOpenChange(false),
+                "aria-label": "Close viewer",
+                children: /* @__PURE__ */ jsx("span", { className: `${baseClass}__control-icon material-symbols-rounded`, "aria-hidden": "true", children: "close" })
+              }
+            ),
+            onPrev && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: `${baseClass}__control ${baseClass}__nav ${baseClass}__nav--prev`,
+                onClick: onPrev,
+                "aria-label": "Previous",
+                children: /* @__PURE__ */ jsx("span", { className: `${baseClass}__control-icon material-symbols-rounded`, "aria-hidden": "true", children: "chevron_left" })
+              }
+            ),
+            /* @__PURE__ */ jsxs("figure", { className: `${baseClass}__figure`, children: [
+              children ?? (src ? /* @__PURE__ */ jsx("img", { className: `${baseClass}__img`, src, alt: alt ?? "" }) : null),
+              caption && /* @__PURE__ */ jsx("figcaption", { className: `${baseClass}__caption`, children: caption })
+            ] }),
+            onNext && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: `${baseClass}__control ${baseClass}__nav ${baseClass}__nav--next`,
+                onClick: onNext,
+                "aria-label": "Next",
+                children: /* @__PURE__ */ jsx("span", { className: `${baseClass}__control-icon material-symbols-rounded`, "aria-hidden": "true", children: "chevron_right" })
+              }
+            )
+          ]
+        }
+      )
+    ] });
+    if (!mounted) return null;
+    return ReactDOM.createPortal(lightbox, document.body);
+  }
+);
+Lightbox.displayName = "Lightbox";
+export {
+  Lightbox
+};

package/components/LinkList/LinkList.css

@@ -0,0 +1,71 @@
+.ds-link-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-500);
+}
+
+.ds-link-list__item {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--gap-400);
+  text-decoration: none;
+  color: inherit;
+  transition: opacity var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-link-list__item:hover {
+  opacity: 0.8;
+}
+
+.ds-link-list__icon-wrap {
+  flex-shrink: 0;
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ds-link-list__logo {
+  width: 28px;
+  height: 28px;
+  object-fit: contain;
+}
+
+.ds-link-list__symbol {
+  font-size: 28px;
+  line-height: 1;
+  color: var(--color-text-secondary);
+}
+
+.ds-link-list__content {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+  flex: 1;
+}
+
+.ds-link-list__title {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-100);
+  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-link-list__open-icon {
+  --icon-size: var(--icon-size-500);
+  color: var(--color-text-tertiary);
+}
+
+.ds-link-list__sub {
+  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);
+}

package/components/LinkList/LinkList.d.ts

@@ -0,0 +1,24 @@
+import { default as React } from 'react';
+export interface LinkListItem {
+    /** Link destination */
+    href: string;
+    /** Primary label — shown with the open_in_new icon */
+    label: string;
+    /** One or more subtitle lines shown below the label */
+    sub?: string | string[];
+    /** Path to a logo image (preferred over icon when both are set) */
+    logo?: string;
+    /** Alt text for the logo — defaults to empty string (decorative) */
+    logoAlt?: string;
+    /** Icon used when no logo is provided — Material Symbol name (string, e.g. "emoji_events") or custom element (ReactNode) */
+    icon?: string | React.ReactNode;
+    /** Open in a new tab. Defaults to true; set false for links inside the same site, which swaps the open_in_new indicator for arrow_forward. */
+    newTab?: boolean;
+}
+export interface LinkListProps {
+    /** Links to render, in display order */
+    items: LinkListItem[];
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare const LinkList: ({ items, className }: LinkListProps) => React.JSX.Element;

package/components/LinkList/LinkList.js

@@ -0,0 +1,42 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "./LinkList.css";
+import "../../fonts/material-symbols.css";
+const LinkList = ({ items, className = "" }) => {
+  const classes = ["ds-link-list", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("div", { className: classes, children: items.map((item) => {
+    const subs = item.sub ? Array.isArray(item.sub) ? item.sub : [item.sub] : [];
+    const newTab = item.newTab ?? true;
+    return /* @__PURE__ */ jsxs(
+      "a",
+      {
+        href: item.href,
+        target: newTab ? "_blank" : void 0,
+        rel: newTab ? "noopener noreferrer" : void 0,
+        className: "ds-link-list__item",
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "ds-link-list__icon-wrap", "aria-hidden": "true", children: item.logo ? /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: item.logo,
+              alt: item.logoAlt ?? "",
+              className: "ds-link-list__logo",
+              width: 28,
+              height: 28
+            }
+          ) : typeof item.icon === "string" || item.icon == null ? /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded ds-link-list__symbol", children: item.icon ?? "link" }) : /* @__PURE__ */ jsx("span", { className: "ds-link-list__symbol", children: item.icon }) }),
+          /* @__PURE__ */ jsxs("div", { className: "ds-link-list__content", children: [
+            /* @__PURE__ */ jsxs("div", { className: "ds-link-list__title", children: [
+              /* @__PURE__ */ jsx("span", { children: item.label }),
+              /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded ds-link-list__open-icon", "aria-hidden": "true", children: newTab ? "open_in_new" : "arrow_forward" })
+            ] }),
+            subs.map((s, i) => /* @__PURE__ */ jsx("span", { className: "ds-link-list__sub", children: s }, i))
+          ] })
+        ]
+      },
+      item.href + item.label
+    );
+  }) });
+};
+export {
+  LinkList
+};

package/components/MapCallout/MapCallout.css

@@ -0,0 +1,46 @@
+/* ============================================
+   MAP CALLOUT COMPONENT
+   The annotation beside a marker: a name in
+   capitals over readout lines in the code face.
+   ============================================ */
+
+/* Base */
+
+.ds-map-callout {
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--gap-050);
+  font-family: var(--font-family-code);
+  color: var(--color-text-primary);
+}
+
+.ds-map-callout--start {
+  align-items: flex-start;
+  text-align: left;
+}
+
+.ds-map-callout--end {
+  align-items: flex-end;
+  text-align: right;
+}
+
+/* Parts */
+
+/* The overline face on the code family: the metrics and tracking are the
+   uppercase-label tokens, the family stays monospace with the readouts. */
+.ds-map-callout__title {
+  font-size: var(--font-overline-size);
+  font-weight: var(--font-overline-weight);
+  line-height: var(--font-overline-line-height);
+  letter-spacing: var(--font-overline-letter-spacing);
+  text-transform: uppercase;
+  color: var(--color-text-primary);
+}
+
+.ds-map-callout__line {
+  font-size: var(--font-caption-size);
+  font-weight: var(--font-caption-weight);
+  line-height: var(--font-caption-line-height);
+  color: var(--color-text-tertiary);
+  font-variant-numeric: tabular-nums;
+}

package/components/MapCallout/MapCallout.d.ts

@@ -0,0 +1,29 @@
+import { default as React } from 'react';
+/** Props owned by MapCallout itself — everything else falls through to the root `<div>`. */
+type MapCalloutOwnProps = {
+    /**
+     * The place's name, set in capitals: "Santiago, CL". Intentionally shadows
+     * the native `title` tooltip attribute, which MapCallout does not expose.
+     */
+    title: string;
+    /** Readout lines under the title, in order: a status, a reading, a route. */
+    lines?: React.ReactNode[];
+    /**
+     * Which way the text ranges. A callout sitting left of its marker ranges
+     * right so it hangs off the point; `start` is the ordinary reading order.
+     */
+    align?: 'start' | 'end';
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface MapCalloutProps extends MapCalloutOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof MapCalloutOwnProps | 'children'> {
+}
+/**
+ * MapCallout — the annotation beside a point on a map or globe: the name in
+ * capitals, then the readouts beneath it in the code face, so a coordinate
+ * and a reading line up digit for digit. Pure markup, no hooks, so it
+ * renders from a Server Component; Globe's `renderCallout` is its intended
+ * home, where `align` follows the overlay's `data-side`.
+ */
+export declare const MapCallout: React.ForwardRefExoticComponent<MapCalloutProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/MapCallout/MapCallout.js

@@ -0,0 +1,17 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React from "react";
+import "./MapCallout.css";
+const MapCallout = React.forwardRef(
+  ({ title, lines = [], align = "start", className = "", ...rest }, ref) => {
+    const baseClass = "ds-map-callout";
+    const classes = [baseClass, `${baseClass}--${align}`, className].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs("div", { ...rest, ref, className: classes, children: [
+      /* @__PURE__ */ jsx("span", { className: `${baseClass}__title`, children: title }),
+      lines.map((line, i) => /* @__PURE__ */ jsx("span", { className: `${baseClass}__line`, children: line }, i))
+    ] });
+  }
+);
+MapCallout.displayName = "MapCallout";
+export {
+  MapCallout
+};