@robr0/design-system 0.1.0

package/components/ButtonGroup/ButtonGroup.js

@@ -0,0 +1,37 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { Button } from "../Button/Button.js";
+import "./ButtonGroup.css";
+const ButtonGroup = ({
+  orientation = "horizontal",
+  buttons,
+  ariaLabel,
+  className = ""
+}) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `ds-button-group ds-button-group--${orientation} ${className}`,
+      role: "group",
+      "aria-label": ariaLabel,
+      children: buttons.map((button, index) => /* @__PURE__ */ jsx(
+        Button,
+        {
+          priority: button.priority || "tertiary",
+          state: button.state || "default",
+          label: button.label,
+          iconLeft: button.iconLeft,
+          iconRight: button.iconRight,
+          icon: button.icon,
+          onClick: button.onClick,
+          href: button.href,
+          ariaCurrent: button.ariaCurrent
+        },
+        index
+      ))
+    }
+  );
+};
+export {
+  ButtonGroup
+};

package/components/Card/Card.css

@@ -0,0 +1,169 @@
+/* ============================================
+   CARD COMPONENT
+   Content card with preview area and title
+   ============================================ */
+
+.ds-card {
+  /* Layout */
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-md); /* 12px */
+
+  /* Sizing */
+  flex: 1 1 0;
+  min-width: 250px;
+  height: 268px;
+
+  /* Appearance */
+  background: var(--color-bg-container-primary-semi);
+  border: var(--border-xs) solid var(--color-bg-container-border);
+  border-radius: var(--radius-xl); /* 24px */
+  padding: var(--padding-lg); /* 20px */
+  overflow: hidden;
+  color: inherit;
+  text-decoration: none;
+
+  /* Interaction */
+  transition: transform var(--motion-duration-slow) var(--motion-ease-standard), box-shadow var(--motion-duration-slow) var(--motion-ease-standard);
+  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+}
+
+.ds-card--interactive {
+  cursor: pointer;
+}
+
+.ds-card--interactive:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
+}
+
+/* ============================================
+   PREVIEW AREA
+   ============================================ */
+
+.ds-card__preview {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 184px;
+  min-height: 0;
+}
+
+/* ============================================
+   TITLE
+   ============================================ */
+
+.ds-card__title {
+  font-family: var(--font-paragraph-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);
+  width: 100%;
+  text-align: center;
+}
+
+/* ============================================
+   CASE-STUDY VARIANT
+   ============================================ */
+
+.ds-card--case-study {
+  height: auto;
+  min-width: 0;
+  padding: 0;
+  gap: 0;
+  overflow: hidden;
+  cursor: pointer;
+}
+
+.ds-card--case-study:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
+}
+
+.ds-card--case-study--placeholder {
+  opacity: 0.55;
+  cursor: default;
+}
+
+.ds-card--case-study--placeholder:hover {
+  transform: none;
+  box-shadow: none;
+}
+
+.ds-card--case-study__cover-wrap {
+  width: 100%;
+  aspect-ratio: 940 / 480;
+  overflow: hidden;
+  background: var(--color-bg-container-secondary);
+}
+
+.ds-card--case-study__cover-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.ds-card--case-study__cover-placeholder {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--color-bg-container-secondary);
+}
+
+.ds-card--case-study__cover-placeholder-logo {
+  width: 64px;
+  height: 64px;
+  object-fit: contain;
+  opacity: 0.6;
+}
+
+.ds-card--case-study__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-sm);
+  padding: var(--padding-lg);
+}
+
+.ds-card--case-study__eyebrow {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-xs);
+}
+
+.ds-card--case-study__company-logo {
+  width: 20px;
+  height: 20px;
+  object-fit: contain;
+  flex-shrink: 0;
+}
+
+.ds-card--case-study__company-name {
+  font-size: var(--font-paragraph-sm-size);
+  font-weight: var(--font-paragraph-sm-em-weight);
+  line-height: var(--font-paragraph-sm-line-height);
+  color: var(--color-text-secondary);
+}
+
+.ds-card--case-study__title {
+  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;
+  text-align: left;
+}
+
+.ds-card--case-study__dek {
+  font-size: var(--font-paragraph-size);
+  font-weight: var(--font-paragraph-weight);
+  line-height: var(--font-paragraph-line-height);
+  color: var(--color-text-secondary);
+  margin: 0;
+}

package/components/Card/Card.d.ts

@@ -0,0 +1,30 @@
+import { default as React } from 'react';
+export interface CardProps {
+    /** Card variant */
+    variant?: 'default' | 'case-study';
+    /** Card title displayed below the preview */
+    title: string;
+    /** Preview content rendered inside the card (default variant only) */
+    children?: React.ReactNode;
+    /** Whether the card is interactive (hoverable) */
+    interactive?: boolean;
+    /** Click handler */
+    onClick?: () => void;
+    /** Additional CSS classes */
+    className?: string;
+    /** Navigation href — renders the card as an <a> tag */
+    href?: string;
+    /** Cover image src */
+    coverSrc?: string;
+    /** Cover image alt text */
+    coverAlt?: string;
+    /** Path to the company logo shown in the eyebrow */
+    companyLogo?: string;
+    /** Company name shown in the eyebrow */
+    companyName?: string;
+    /** Subtitle / dek line below the title */
+    dek?: string;
+    /** Render as a disabled placeholder (no href, dimmed, not interactive) */
+    placeholder?: boolean;
+}
+export declare const Card: ({ variant, title, children, interactive, onClick, className, href, coverSrc, coverAlt, companyLogo, companyName, dek, placeholder, }: CardProps) => React.JSX.Element;

package/components/Card/Card.js

@@ -0,0 +1,90 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import "react";
+import "./Card.css";
+import "../../fonts/material-symbols.css";
+const Card = ({
+  variant = "default",
+  title,
+  children,
+  interactive = false,
+  onClick,
+  className = "",
+  href,
+  coverSrc,
+  coverAlt,
+  companyLogo,
+  companyName,
+  dek,
+  placeholder = false
+}) => {
+  if (variant === "case-study") {
+    const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: "ds-card--case-study__cover-wrap", children: coverSrc ? /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: coverSrc,
+          alt: coverAlt ?? `${title} cover`,
+          className: "ds-card--case-study__cover-image"
+        }
+      ) : /* @__PURE__ */ jsx("div", { className: "ds-card--case-study__cover-placeholder", children: companyLogo && /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: companyLogo,
+          alt: "",
+          className: "ds-card--case-study__cover-placeholder-logo"
+        }
+      ) }) }),
+      /* @__PURE__ */ jsxs("div", { className: "ds-card--case-study__body", children: [
+        (companyLogo || companyName) && /* @__PURE__ */ jsxs("div", { className: "ds-card--case-study__eyebrow", children: [
+          companyLogo && /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: companyLogo,
+              alt: "",
+              className: "ds-card--case-study__company-logo"
+            }
+          ),
+          companyName && /* @__PURE__ */ jsx("span", { className: "ds-card--case-study__company-name", children: companyName })
+        ] }),
+        /* @__PURE__ */ jsx("h3", { className: "ds-card--case-study__title", children: title }),
+        dek && /* @__PURE__ */ jsx("p", { className: "ds-card--case-study__dek", children: dek })
+      ] })
+    ] });
+    const classes2 = [
+      "ds-card",
+      "ds-card--case-study",
+      placeholder ? "ds-card--case-study--placeholder" : "",
+      className
+    ].filter(Boolean).join(" ");
+    if (placeholder || !href) {
+      return /* @__PURE__ */ jsx("div", { className: classes2, "aria-disabled": "true", children: inner });
+    }
+    return /* @__PURE__ */ jsx("a", { href, className: classes2, children: inner });
+  }
+  const baseClass = "ds-card";
+  const interactiveClass = interactive ? `${baseClass}--interactive` : "";
+  const classes = [baseClass, interactiveClass, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classes,
+      onClick: interactive ? onClick : void 0,
+      onKeyDown: interactive ? (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onClick?.();
+        }
+      } : void 0,
+      role: interactive ? "button" : void 0,
+      tabIndex: interactive ? 0 : void 0,
+      "aria-label": interactive ? title : void 0,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: `${baseClass}__preview`, children }),
+        /* @__PURE__ */ jsx("h3", { className: `${baseClass}__title`, children: title })
+      ]
+    }
+  );
+};
+export {
+  Card
+};

package/components/Carousel/Carousel.css

@@ -0,0 +1,112 @@
+/* ============================================
+   CAROUSEL COMPONENT
+   Sliding content viewer with navigation
+   ============================================ */
+
+.ds-carousel {
+  position: relative;
+  width: 100%;
+}
+
+/* ============================================
+   VIEWPORT & TRACK
+   ============================================ */
+
+.ds-carousel__viewport {
+  overflow: hidden;
+  border-radius: var(--radius-sm); /* 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-xs) solid var(--color-bg-container-border);
+  border-radius: var(--radius-full);
+  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-sm); /* 8px */
+}
+
+.ds-carousel__arrow--next {
+  right: var(--gap-sm);
+}
+
+.ds-carousel__arrow:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.ds-carousel__arrow .material-symbols-rounded {
+  --icon-size: var(--icon-size-sm);
+}
+
+/* ============================================
+   DOTS
+   ============================================ */
+
+.ds-carousel__dots {
+  display: flex;
+  justify-content: center;
+  gap: var(--gap-sm); /* 8px */
+  padding-top: var(--padding-sm); /* 8px */
+}
+
+.ds-carousel__dot {
+  width: 8px;
+  height: 8px;
+  border-radius: var(--radius-full);
+  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;
+}

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,126 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import React, { useState, useRef, useCallback, useEffect } from "react";
+import "./Carousel.css";
+import "../../fonts/material-symbols.css";
+const Carousel = ({
+  children,
+  showDots = true,
+  showArrows = true,
+  autoPlay = false,
+  autoPlayInterval = 5e3,
+  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 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 || slideCount <= 1) return;
+    const interval = setInterval(goNext, autoPlayInterval);
+    return () => clearInterval(interval);
+  }, [autoPlay, paused, autoPlayInterval, goNext, slideCount]);
+  const handleKeyDown = (e) => {
+    if (e.key === "ArrowLeft") {
+      e.preventDefault();
+      goPrev();
+    } else if (e.key === "ArrowRight") {
+      e.preventDefault();
+      goNext();
+    }
+  };
+  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),
+      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),
+            role: "tab",
+            "aria-selected": index === activeIndex,
+            "aria-label": `Go to slide ${index + 1}`,
+            type: "button"
+          },
+          index
+        )) })
+      ]
+    }
+  );
+};
+export {
+  Carousel
+};

package/components/Chart/AreaChart.d.ts

@@ -0,0 +1,36 @@
+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;
+    /** 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, className, }: AreaChartProps) => import("react").JSX.Element;