rift-ds 1.0.0

package/components/Carousel/Carousel.css

@@ -0,0 +1,121 @@
+/* ============================================
+   CAROUSEL COMPONENT
+   Sliding content viewer with navigation
+   ============================================ */
+
+.ds-carousel {
+  position: relative;
+  width: 100%;
+}
+
+/* ============================================
+   VIEWPORT & TRACK
+   ============================================ */
+
+.ds-carousel__viewport {
+  overflow: hidden;
+  border-radius: var(--radius-200); /* 8px */
+}
+
+.ds-carousel__track {
+  display: flex;
+  transition: transform var(--motion-duration-deliberate) var(--motion-ease-standard);
+}
+
+.ds-carousel__slide {
+  min-width: 100%;
+  flex-shrink: 0;
+}
+
+/* ============================================
+   ARROWS
+   ============================================ */
+
+.ds-carousel__arrow {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border: var(--border-025) solid var(--color-bg-container-border);
+  border-radius: var(--radius-pill);
+  background-color: var(--color-bg-page-primary);
+  cursor: pointer;
+  z-index: 2;
+  color: var(--color-icon-primary);
+  padding: 0;
+  transition: background-color var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-carousel__arrow:hover:not(:disabled) {
+  background-color: var(--color-action-passive-bg-hover);
+}
+
+.ds-carousel__arrow:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: 2px;
+}
+
+.ds-carousel__arrow--prev {
+  left: var(--gap-200); /* 8px */
+}
+
+.ds-carousel__arrow--next {
+  right: var(--gap-200);
+}
+
+.ds-carousel__arrow:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.ds-carousel__arrow .material-symbols-rounded {
+  --icon-size: var(--icon-size-500);
+}
+
+/* ============================================
+   DOTS
+   ============================================ */
+
+.ds-carousel__dots {
+  display: flex;
+  justify-content: center;
+  gap: var(--gap-200); /* 8px */
+  padding-top: var(--padding-200); /* 8px */
+}
+
+.ds-carousel__dot {
+  width: 8px;
+  height: 8px;
+  border-radius: var(--radius-pill);
+  border: none;
+  padding: 0;
+  background-color: var(--color-bg-container-border);
+  cursor: pointer;
+  transition: background-color var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-carousel__dot:hover {
+  background-color: var(--color-text-tertiary);
+}
+
+.ds-carousel__dot--active {
+  background-color: var(--color-action-primary-bg);
+}
+
+.ds-carousel__dot: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-carousel .material-symbols-rounded {
+  color: inherit;
+}

package/components/Carousel/Carousel.d.ts

@@ -0,0 +1,25 @@
+import { default as React, ReactNode } from 'react';
+export interface CarouselProps {
+    /** Carousel slides */
+    children?: ReactNode;
+    /** Show dot indicators */
+    showDots?: boolean;
+    /** Show previous/next navigation arrows */
+    showArrows?: boolean;
+    /** Auto-play slides */
+    autoPlay?: boolean;
+    /** Auto-play interval in milliseconds */
+    autoPlayInterval?: number;
+    /** Whether navigation should loop */
+    loop?: boolean;
+    /** Callback when active slide changes */
+    onSlideChange?: (index: number) => void;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * Carousel component for sliding through content.
+ * Supports navigation arrows, dot indicators, auto-play,
+ * and keyboard navigation.
+ */
+export declare const Carousel: ({ children, showDots, showArrows, autoPlay, autoPlayInterval, loop, onSlideChange, className, }: CarouselProps) => React.JSX.Element | null;

package/components/Carousel/Carousel.js

@@ -0,0 +1,160 @@
+"use client";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import React, { useState, useSyncExternalStore, useRef, useCallback, useEffect } from "react";
+import { MOTION_AUTOPLAY_INTERVAL_MS } from "../../tokens/motion.js";
+import "./Carousel.css";
+import "../../fonts/material-symbols.css";
+const REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
+const subscribeReducedMotion = (callback) => {
+  const query = window.matchMedia(REDUCED_MOTION_QUERY);
+  query.addEventListener("change", callback);
+  return () => query.removeEventListener("change", callback);
+};
+const getReducedMotion = () => window.matchMedia(REDUCED_MOTION_QUERY).matches;
+const getServerReducedMotion = () => false;
+const Carousel = ({
+  children,
+  showDots = true,
+  showArrows = true,
+  autoPlay = false,
+  autoPlayInterval = MOTION_AUTOPLAY_INTERVAL_MS,
+  loop = false,
+  onSlideChange,
+  className = ""
+}) => {
+  const slides = React.Children.toArray(children);
+  const slideCount = slides.length;
+  const [activeIndex, setActiveIndex] = useState(0);
+  const [paused, setPaused] = useState(false);
+  const reducedMotion = useSyncExternalStore(
+    subscribeReducedMotion,
+    getReducedMotion,
+    getServerReducedMotion
+  );
+  const containerRef = useRef(null);
+  const baseClass = "ds-carousel";
+  const goTo = useCallback(
+    (index) => {
+      let next = index;
+      if (loop) {
+        next = (index % slideCount + slideCount) % slideCount;
+      } else {
+        next = Math.max(0, Math.min(index, slideCount - 1));
+      }
+      setActiveIndex(next);
+      onSlideChange?.(next);
+    },
+    [slideCount, loop, onSlideChange]
+  );
+  const goNext = useCallback(() => goTo(activeIndex + 1), [activeIndex, goTo]);
+  const goPrev = useCallback(() => goTo(activeIndex - 1), [activeIndex, goTo]);
+  useEffect(() => {
+    if (!autoPlay || paused || reducedMotion || slideCount <= 1) return;
+    const interval = setInterval(goNext, autoPlayInterval);
+    return () => clearInterval(interval);
+  }, [autoPlay, paused, reducedMotion, autoPlayInterval, goNext, slideCount]);
+  const handleKeyDown = (e) => {
+    if (e.key === "ArrowLeft") {
+      e.preventDefault();
+      goPrev();
+    } else if (e.key === "ArrowRight") {
+      e.preventDefault();
+      goNext();
+    }
+  };
+  const handleDotKeyDown = (e, index) => {
+    let target;
+    if (e.key === "ArrowRight") {
+      target = loop ? (index + 1) % slideCount : Math.min(index + 1, slideCount - 1);
+    } else if (e.key === "ArrowLeft") {
+      target = loop ? (index - 1 + slideCount) % slideCount : Math.max(index - 1, 0);
+    }
+    if (target === void 0) return;
+    e.preventDefault();
+    e.stopPropagation();
+    goTo(target);
+    const dotList = e.target.parentElement;
+    const dots = dotList?.querySelectorAll(`.${baseClass}__dot`);
+    dots?.[target]?.focus();
+  };
+  const canGoPrev = loop || activeIndex > 0;
+  const canGoNext = loop || activeIndex < slideCount - 1;
+  const containerClasses = [baseClass, className].filter(Boolean).join(" ");
+  if (slideCount === 0) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: containerClasses,
+      ref: containerRef,
+      onMouseEnter: () => setPaused(true),
+      onMouseLeave: () => setPaused(false),
+      onFocus: () => setPaused(true),
+      onBlur: () => setPaused(false),
+      onKeyDown: handleKeyDown,
+      role: "region",
+      "aria-roledescription": "carousel",
+      "aria-label": "Carousel",
+      children: [
+        /* @__PURE__ */ jsx("div", { className: `${baseClass}__viewport`, children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: `${baseClass}__track`,
+            style: { transform: `translateX(-${activeIndex * 100}%)` },
+            children: slides.map((slide, index) => /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: `${baseClass}__slide`,
+                role: "group",
+                "aria-roledescription": "slide",
+                "aria-label": `Slide ${index + 1} of ${slideCount}`,
+                children: slide
+              },
+              index
+            ))
+          }
+        ) }),
+        showArrows && slideCount > 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: `${baseClass}__arrow ${baseClass}__arrow--prev`,
+              onClick: goPrev,
+              disabled: !canGoPrev,
+              "aria-label": "Previous slide",
+              type: "button",
+              children: /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", "aria-hidden": "true", children: "chevron_left" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: `${baseClass}__arrow ${baseClass}__arrow--next`,
+              onClick: goNext,
+              disabled: !canGoNext,
+              "aria-label": "Next slide",
+              type: "button",
+              children: /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", "aria-hidden": "true", children: "chevron_right" })
+            }
+          )
+        ] }),
+        showDots && slideCount > 1 && /* @__PURE__ */ jsx("div", { className: `${baseClass}__dots`, role: "tablist", "aria-label": "Slide indicators", children: slides.map((_, index) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: `${baseClass}__dot${index === activeIndex ? ` ${baseClass}__dot--active` : ""}`,
+            onClick: () => goTo(index),
+            onKeyDown: (e) => handleDotKeyDown(e, index),
+            role: "tab",
+            "aria-selected": index === activeIndex,
+            tabIndex: index === activeIndex ? 0 : -1,
+            "aria-label": `Go to slide ${index + 1}`,
+            type: "button"
+          },
+          index
+        )) })
+      ]
+    }
+  );
+};
+export {
+  Carousel
+};

package/components/Chart/AreaChart.d.ts

@@ -0,0 +1,40 @@
+import { ChartSummaryItem } from './BarChart';
+export interface AreaSeriesConfig {
+    /** Key in data for this series */
+    dataKey: string;
+    /** Display name (shown in tooltip and legend) */
+    label: string;
+    /** Area stroke / fill colour — CSS value */
+    color?: string;
+    /** Fill opacity (0–1) */
+    fillOpacity?: number;
+}
+export interface AreaChartProps {
+    /** Array of data objects */
+    data: Record<string, unknown>[];
+    /** Key in data for x-axis values */
+    xKey?: string;
+    /** One or more area series to render */
+    series: AreaSeriesConfig[];
+    /** Whether areas stack on top of each other */
+    stacked?: boolean;
+    /** Chart title */
+    title?: string;
+    /** Description text below the title */
+    subtitle?: string;
+    /** Summary stats displayed in the header */
+    summaryItems?: ChartSummaryItem[];
+    /** Chart area height in pixels */
+    height?: number;
+    /** Show the legend under a multi-series chart */
+    showLegend?: boolean;
+    /** Strip the card chrome (border, padding, fill) when the chart sits inside another panel that supplies the surface */
+    bare?: boolean;
+    /** Additional CSS classes on the wrapper */
+    className?: string;
+}
+/**
+ * Area chart built on Recharts with design-system tokens.
+ * Supports multiple stacked or overlapping series with gradient fills.
+ */
+export declare const AreaChart: ({ data, xKey, series, stacked, title, subtitle, summaryItems, height, showLegend, bare, className, }: AreaChartProps) => import("react").JSX.Element;

package/components/Chart/AreaChart.js

@@ -0,0 +1,101 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { ResponsiveContainer, AreaChart as AreaChart$1, CartesianGrid, XAxis, YAxis, Tooltip, Area, Legend } from "recharts";
+import { getChartSeriesColors } from "./palette.js";
+import "./Chart.css";
+function getCSSVar(name, fallback) {
+  return `var(${name}, ${fallback})`;
+}
+function AreaTooltip({ active, payload, label }) {
+  if (!active || !payload?.length) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "ds-chart__tooltip", children: [
+    /* @__PURE__ */ jsx("div", { className: "ds-chart__tooltip-label", children: label }),
+    payload.map((entry, i) => /* @__PURE__ */ jsxs("div", { className: "ds-chart__tooltip-row", children: [
+      /* @__PURE__ */ jsx("span", { className: "ds-chart__tooltip-dot", style: { backgroundColor: entry.color } }),
+      /* @__PURE__ */ jsx("span", { className: "ds-chart__tooltip-name", children: entry.name }),
+      /* @__PURE__ */ jsx("span", { className: "ds-chart__tooltip-value", children: entry.value?.toLocaleString() })
+    ] }, i))
+  ] });
+}
+const AreaChart = ({
+  data,
+  xKey = "label",
+  series,
+  stacked = false,
+  title,
+  subtitle,
+  summaryItems,
+  height = 350,
+  showLegend = true,
+  bare = false,
+  className = ""
+}) => {
+  const baseClass = "ds-chart";
+  const classes = [baseClass, bare ? `${baseClass}--bare` : "", className].filter(Boolean).join(" ");
+  const textSecondary = getCSSVar("--color-text-secondary", "#303030");
+  const gridColor = getCSSVar("--color-divider", "rgba(214, 214, 214, 0.8)");
+  const seriesColors = getChartSeriesColors();
+  const renderTooltip = useCallback(
+    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+    (props) => /* @__PURE__ */ jsx(AreaTooltip, { ...props }),
+    []
+  );
+  return /* @__PURE__ */ jsxs("div", { className: classes, children: [
+    (title || subtitle || summaryItems) && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__header`, children: [
+      /* @__PURE__ */ jsxs("div", { className: `${baseClass}__header-text`, children: [
+        title && /* @__PURE__ */ jsx("h3", { className: `${baseClass}__title`, children: title }),
+        subtitle && /* @__PURE__ */ jsx("p", { className: `${baseClass}__subtitle`, children: subtitle })
+      ] }),
+      summaryItems && summaryItems.length > 0 && /* @__PURE__ */ jsx("div", { className: `${baseClass}__summary`, children: summaryItems.map((item, i) => /* @__PURE__ */ jsxs("div", { className: `${baseClass}__summary-item`, children: [
+        /* @__PURE__ */ jsx("span", { className: `${baseClass}__summary-label`, children: item.label }),
+        /* @__PURE__ */ jsx("span", { className: `${baseClass}__summary-value`, children: typeof item.value === "number" ? item.value.toLocaleString() : item.value })
+      ] }, i)) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: `${baseClass}__body`, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxs(AreaChart$1, { data, margin: { top: 8, right: 4, bottom: 0, left: -12 }, children: [
+      /* @__PURE__ */ jsx("defs", { children: series.map((s, i) => {
+        const color = s.color || seriesColors[i % seriesColors.length];
+        return /* @__PURE__ */ jsxs("linearGradient", { id: `area-gradient-${s.dataKey}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+          /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.4 }),
+          /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0.05 })
+        ] }, `grad-${s.dataKey}`);
+      }) }),
+      /* @__PURE__ */ jsx(CartesianGrid, { vertical: false, stroke: gridColor }),
+      /* @__PURE__ */ jsx(
+        XAxis,
+        {
+          dataKey: xKey,
+          tick: { fill: textSecondary, fontSize: 12 },
+          tickLine: false,
+          axisLine: { stroke: gridColor }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        YAxis,
+        {
+          tick: { fill: textSecondary, fontSize: 12 },
+          tickLine: false,
+          axisLine: false
+        }
+      ),
+      /* @__PURE__ */ jsx(Tooltip, { content: renderTooltip }),
+      series.map((s, i) => /* @__PURE__ */ jsx(
+        Area,
+        {
+          type: "monotone",
+          dataKey: s.dataKey,
+          name: s.label,
+          stroke: s.color || seriesColors[i % seriesColors.length],
+          strokeWidth: 2,
+          fill: `url(#area-gradient-${s.dataKey})`,
+          fillOpacity: s.fillOpacity ?? 1,
+          stackId: stacked ? "stack" : void 0
+        },
+        s.dataKey
+      )),
+      showLegend && series.length > 1 && /* @__PURE__ */ jsx(Legend, { wrapperStyle: { color: textSecondary, fontSize: 12 } })
+    ] }) }) })
+  ] });
+};
+export {
+  AreaChart
+};

package/components/Chart/BarChart.d.ts

@@ -0,0 +1,36 @@
+export interface ChartSummaryItem {
+    /** Label shown above the value */
+    label: string;
+    /** Formatted value to display */
+    value: string | number;
+}
+export interface BarChartProps {
+    /** Array of data objects */
+    data: Record<string, unknown>[];
+    /** Key in data for x-axis values */
+    xKey?: string;
+    /** Key in data for y-axis values */
+    yKey?: string;
+    /** Display name for the data series (shown in tooltip) */
+    dataLabel?: string;
+    /** Chart title */
+    title?: string;
+    /** Description text below the title */
+    subtitle?: string;
+    /** Summary stats displayed in the header */
+    summaryItems?: ChartSummaryItem[];
+    /** Bar fill colour — CSS value or token reference */
+    barColor?: string;
+    /** Chart area height in pixels */
+    height?: number;
+    /** Strip the card chrome (border, padding, fill) when the chart sits inside another panel that supplies the surface */
+    bare?: boolean;
+    /** Additional CSS classes on the wrapper */
+    className?: string;
+}
+/**
+ * Bar chart built on Recharts with design-system tokens.
+ * Part of the Chart component family — shares wrapper, header,
+ * tooltip, and summary-stat styles with future chart types.
+ */
+export declare const BarChart: ({ data, xKey, yKey, dataLabel, title, subtitle, summaryItems, barColor, height, bare, className, }: BarChartProps) => import("react").JSX.Element;

package/components/Chart/BarChart.js

@@ -0,0 +1,107 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { ResponsiveContainer, BarChart as BarChart$1, CartesianGrid, XAxis, YAxis, Tooltip, Bar } from "recharts";
+import "./Chart.css";
+function getCSSVar(name, fallback) {
+  return `var(${name}, ${fallback})`;
+}
+function ChartTooltip({
+  active,
+  payload,
+  label,
+  barColor,
+  dataLabel
+}) {
+  if (!active || !payload?.length) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "ds-chart__tooltip", children: [
+    /* @__PURE__ */ jsx("div", { className: "ds-chart__tooltip-label", children: label }),
+    payload.map((entry, i) => /* @__PURE__ */ jsxs("div", { className: "ds-chart__tooltip-row", children: [
+      /* @__PURE__ */ jsx("span", { className: "ds-chart__tooltip-dot", style: { backgroundColor: barColor } }),
+      /* @__PURE__ */ jsx("span", { className: "ds-chart__tooltip-name", children: dataLabel }),
+      /* @__PURE__ */ jsx("span", { className: "ds-chart__tooltip-value", children: entry.value?.toLocaleString() })
+    ] }, i))
+  ] });
+}
+const BarChart = ({
+  data,
+  xKey = "label",
+  yKey = "value",
+  dataLabel = "Value",
+  title,
+  subtitle,
+  summaryItems,
+  barColor,
+  height = 350,
+  bare = false,
+  className = ""
+}) => {
+  const baseClass = "ds-chart";
+  const classes = [baseClass, bare ? `${baseClass}--bare` : "", className].filter(Boolean).join(" ");
+  const resolvedBarColor = barColor || getCSSVar("--color-action-primary-bg", "#0E6E8F");
+  const textSecondary = getCSSVar("--color-text-secondary", "#303030");
+  const gridColor = getCSSVar("--color-divider", "rgba(214, 214, 214, 0.8)");
+  const cursorColor = getCSSVar("--color-bg-container-secondary", "#F1F1F1");
+  const renderTooltip = useCallback(
+    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+    (props) => /* @__PURE__ */ jsx(ChartTooltip, { ...props, barColor: resolvedBarColor, dataLabel }),
+    [resolvedBarColor, dataLabel]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: classes, children: [
+    (title || subtitle || summaryItems) && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__header`, children: [
+      /* @__PURE__ */ jsxs("div", { className: `${baseClass}__header-text`, children: [
+        title && /* @__PURE__ */ jsx("h3", { className: `${baseClass}__title`, children: title }),
+        subtitle && /* @__PURE__ */ jsx("p", { className: `${baseClass}__subtitle`, children: subtitle })
+      ] }),
+      summaryItems && summaryItems.length > 0 && /* @__PURE__ */ jsx("div", { className: `${baseClass}__summary`, children: summaryItems.map((item, i) => /* @__PURE__ */ jsxs("div", { className: `${baseClass}__summary-item`, children: [
+        /* @__PURE__ */ jsx("span", { className: `${baseClass}__summary-label`, children: item.label }),
+        /* @__PURE__ */ jsx("span", { className: `${baseClass}__summary-value`, children: typeof item.value === "number" ? item.value.toLocaleString() : item.value })
+      ] }, i)) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: `${baseClass}__body`, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxs(BarChart$1, { data, margin: { top: 8, right: 4, bottom: 0, left: -12 }, children: [
+      /* @__PURE__ */ jsx(
+        CartesianGrid,
+        {
+          vertical: false,
+          stroke: gridColor,
+          strokeDasharray: ""
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        XAxis,
+        {
+          dataKey: xKey,
+          tick: { fill: textSecondary, fontSize: 12 },
+          tickLine: false,
+          axisLine: { stroke: gridColor }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        YAxis,
+        {
+          tick: { fill: textSecondary, fontSize: 12 },
+          tickLine: false,
+          axisLine: false
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Tooltip,
+        {
+          content: renderTooltip,
+          cursor: { fill: cursorColor, opacity: 0.4 }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Bar,
+        {
+          dataKey: yKey,
+          fill: resolvedBarColor,
+          radius: [3, 3, 0, 0],
+          maxBarSize: 32
+        }
+      )
+    ] }) }) })
+  ] });
+};
+export {
+  BarChart
+};