@robr0/design-system 0.1.0

package/components/LinkList/LinkList.js

@@ -0,0 +1,41 @@
+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] : [];
+    return /* @__PURE__ */ jsxs(
+      "a",
+      {
+        href: item.href,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        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
+            }
+          ) : /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded ds-link-list__symbol", children: item.icon ?? "link" }) }),
+          /* @__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: "open_in_new" })
+            ] }),
+            subs.map((s, i) => /* @__PURE__ */ jsx("span", { className: "ds-link-list__sub", children: s }, i))
+          ] })
+        ]
+      },
+      item.href + item.label
+    );
+  }) });
+};
+export {
+  LinkList
+};

package/components/MotionSwatch/MotionSwatch.css

@@ -0,0 +1,176 @@
+/* ============================================
+   MOTION SWATCH COMPONENT
+   Card that displays a motion token with a live
+   animation preview, token name, and value.
+   Click the preview to replay one-shot demos.
+   ============================================ */
+
+.ds-motion-swatch {
+  /* Layout */
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--gap-sm); /* 8px */
+
+  /* Sizing */
+  flex: 1 1 0;
+  min-width: 140px;
+
+  /* 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 */
+}
+
+/* ============================================
+   PREVIEW AREA
+   A button so the demo can be replayed by click
+   or keyboard.
+   ============================================ */
+
+.ds-motion-swatch__preview {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  align-self: stretch;
+  min-height: 60px;
+  margin-bottom: var(--gap-md); /* 12px */
+
+  /* Reset button chrome */
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  font: inherit;
+}
+
+.ds-motion-swatch__preview:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: 2px;
+  border-radius: var(--radius-sm);
+}
+
+.ds-motion-swatch__replay-icon {
+  position: absolute;
+  top: 0;
+  right: 0;
+  --icon-size: var(--icon-size-sm);
+  color: var(--color-text-tertiary);
+  opacity: 0;
+  transition: opacity var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-motion-swatch__preview:hover .ds-motion-swatch__replay-icon,
+.ds-motion-swatch__preview:focus-visible .ds-motion-swatch__replay-icon {
+  opacity: 1;
+}
+
+/* ============================================
+   SLIDE DEMO
+   Dot travels the track using the token's
+   duration or easing.
+   ============================================ */
+
+.ds-motion-swatch__track {
+  display: block;
+  width: 120px;
+  height: 16px;
+  border-radius: var(--radius-full);
+  background: var(--color-bg-container-secondary);
+}
+
+.ds-motion-swatch__dot {
+  display: block;
+  width: 16px;
+  height: 16px;
+  border-radius: var(--radius-full);
+  background: var(--color-core-accent-violet);
+  animation-name: ds-motion-swatch-slide;
+  animation-fill-mode: forwards;
+}
+
+@keyframes ds-motion-swatch-slide {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(104px); /* track width minus dot */
+  }
+}
+
+/* ============================================
+   SPIN DEMO
+   Continuous rotation loop (spinner timing).
+   ============================================ */
+
+.ds-motion-swatch__spinner {
+  display: block;
+  width: 32px;
+  height: 32px;
+  border-radius: var(--radius-full);
+  border: var(--border-md) solid var(--color-bg-container-secondary);
+  border-top-color: var(--color-core-accent-violet);
+  animation-name: ds-motion-swatch-spin;
+  animation-iteration-count: infinite;
+}
+
+@keyframes ds-motion-swatch-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* ============================================
+   SHIMMER DEMO
+   Continuous gradient sweep (skeleton timing).
+   ============================================ */
+
+.ds-motion-swatch__shimmer {
+  display: block;
+  width: 120px;
+  height: 16px;
+  border-radius: var(--radius-full);
+  background: linear-gradient(
+    90deg,
+    var(--color-bg-container-secondary) 25%,
+    var(--color-bg-container-tertiary) 50%,
+    var(--color-bg-container-secondary) 75%
+  );
+  background-size: 200% 100%;
+  animation-name: ds-motion-swatch-shimmer;
+  animation-iteration-count: infinite;
+}
+
+@keyframes ds-motion-swatch-shimmer {
+  from {
+    background-position: 200% 0;
+  }
+  to {
+    background-position: -200% 0;
+  }
+}
+
+/* ============================================
+   LABEL & VALUE
+   ============================================ */
+
+.ds-motion-swatch__label {
+  font-family: var(--font-paragraph-family);
+  font-size: var(--font-paragraph-size);
+  font-weight: var(--font-heading-3-weight);
+  line-height: var(--font-paragraph-line-height);
+  color: var(--color-text-primary);
+  text-align: center;
+}
+
+.ds-motion-swatch__value {
+  font-family: var(--font-paragraph-family);
+  font-size: var(--font-paragraph-sm-size);
+  font-weight: var(--font-paragraph-weight);
+  line-height: var(--font-paragraph-sm-line-height);
+  color: var(--color-text-tertiary);
+  text-align: center;
+  overflow-wrap: anywhere;
+}

package/components/MotionSwatch/MotionSwatch.d.ts

@@ -0,0 +1,25 @@
+export type MotionSwatchKind = 'duration' | 'easing';
+export type MotionSwatchDemo = 'slide' | 'spin' | 'shimmer';
+export interface MotionSwatchProps {
+    /** Token name label (e.g. "Fast", "Standard") */
+    label: string;
+    /** CSS custom property being demonstrated (e.g. "--motion-duration-fast") */
+    token: string;
+    /** Resolved value to display (e.g. "150ms", "ease") */
+    value: string;
+    /** Whether the token is a duration or an easing curve */
+    kind: MotionSwatchKind;
+    /** Which preview animation to render (default "slide") */
+    demo?: MotionSwatchDemo;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * MotionSwatch component.
+ * Displays a motion token card with a live animation preview,
+ * token name, and value. Duration swatches animate at the
+ * token's speed; easing swatches trace the token's curve at a
+ * fixed readable duration. Click the preview to replay.
+ * Loop demos (spin, shimmer) run continuously.
+ */
+export declare const MotionSwatch: ({ label, token, value, kind, demo, className, }: MotionSwatchProps) => import("react").JSX.Element;

package/components/MotionSwatch/MotionSwatch.js

@@ -0,0 +1,74 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import "./MotionSwatch.css";
+const MotionSwatch = ({
+  label,
+  token,
+  value,
+  kind,
+  demo = "slide",
+  className = ""
+}) => {
+  const [playCount, setPlayCount] = useState(0);
+  const baseClass = "ds-motion-swatch";
+  const classes = [baseClass, className].filter(Boolean).join(" ");
+  const isLoop = demo === "spin" || demo === "shimmer";
+  const animationStyle = kind === "duration" ? {
+    animationDuration: `var(${token})`,
+    animationTimingFunction: isLoop ? "var(--motion-ease-linear)" : "var(--motion-ease-emphasized)"
+  } : {
+    animationDuration: "var(--motion-duration-slower)",
+    animationTimingFunction: `var(${token})`
+  };
+  return /* @__PURE__ */ jsxs("div", { className: classes, children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: `${baseClass}__preview`,
+        onClick: () => setPlayCount((count) => count + 1),
+        "aria-label": `Replay ${label} animation`,
+        children: [
+          demo === "slide" && /* @__PURE__ */ jsx("span", { className: `${baseClass}__track`, children: /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: `${baseClass}__dot`,
+              style: animationStyle
+            },
+            playCount
+          ) }),
+          demo === "spin" && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: `${baseClass}__spinner`,
+              style: animationStyle
+            },
+            playCount
+          ),
+          demo === "shimmer" && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: `${baseClass}__shimmer`,
+              style: animationStyle
+            },
+            playCount
+          ),
+          !isLoop && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: `material-symbols-rounded ${baseClass}__replay-icon`,
+              "aria-hidden": "true",
+              children: "replay"
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: `${baseClass}__label`, children: label }),
+    /* @__PURE__ */ jsx("span", { className: `${baseClass}__value`, children: /* @__PURE__ */ jsx("code", { children: token }) }),
+    /* @__PURE__ */ jsx("span", { className: `${baseClass}__value`, children: value })
+  ] });
+};
+export {
+  MotionSwatch
+};

package/components/Nav/Nav.css

@@ -0,0 +1,51 @@
+/* ============================================
+   NAV COMPONENT
+   Top navigation bar using ButtonGroup
+   ============================================ */
+
+.ds-nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  max-width: 1440px;
+  height: 78px;
+}
+
+/* ============================================
+   BRAND / LOGO
+   ============================================ */
+
+.ds-nav__brand {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-lg); /* 20px */
+  flex-shrink: 0;
+  text-decoration: none;
+  color: var(--color-text-primary);
+}
+
+.ds-nav__brand-icon {
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+}
+
+.ds-nav__brand-text {
+  font-family: var(--font-paragraph-em-family);
+  font-size: var(--font-paragraph-em-size);
+  font-weight: var(--font-paragraph-em-weight);
+  line-height: var(--font-paragraph-em-line-height);
+}
+
+/* ============================================
+   RIGHT SECTION
+   ============================================ */
+
+.ds-nav__right {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-xl); /* 24px */
+  flex-shrink: 0;
+  flex-wrap: nowrap;
+}

package/components/Nav/Nav.d.ts

@@ -0,0 +1,19 @@
+import { default as React } from 'react';
+import { ButtonGroupProps } from '../ButtonGroup/ButtonGroup';
+export interface NavProps {
+    /** Brand/logo text */
+    brandText?: string;
+    /** Brand icon element (img, svg, etc.) */
+    brandIcon?: React.ReactNode;
+    /** Navigation buttons config — passed directly to ButtonGroup */
+    buttons: ButtonGroupProps['buttons'];
+    /** Additional elements rendered after the button group (e.g. ToggleSwitch) */
+    trailing?: React.ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * Nav component from Figma design system
+ * Renders a horizontal navigation bar using ButtonGroup
+ */
+export declare const Nav: ({ brandText, brandIcon, buttons, trailing, className, }: NavProps) => React.JSX.Element;

package/components/Nav/Nav.js

@@ -0,0 +1,26 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+import { ButtonGroup } from "../ButtonGroup/ButtonGroup.js";
+import "./Nav.css";
+const Nav = ({
+  brandText,
+  brandIcon,
+  buttons,
+  trailing,
+  className = ""
+}) => {
+  const baseClass = "ds-nav";
+  return /* @__PURE__ */ jsxs("nav", { className: `${baseClass} ${className}`, children: [
+    (brandText || brandIcon) && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__brand`, children: [
+      brandIcon && /* @__PURE__ */ jsx("span", { className: `${baseClass}__brand-icon`, children: brandIcon }),
+      brandText && /* @__PURE__ */ jsx("span", { className: `${baseClass}__brand-text`, children: brandText })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: `${baseClass}__right`, children: [
+      /* @__PURE__ */ jsx(ButtonGroup, { orientation: "horizontal", buttons }),
+      trailing
+    ] })
+  ] });
+};
+export {
+  Nav
+};

package/components/Pagination/Pagination.css

@@ -0,0 +1,126 @@
+/* ============================================
+   PAGINATION COMPONENT
+   Page navigation for long datasets
+   ============================================ */
+
+.ds-pagination {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gap-xs); /* 4px */
+}
+
+.ds-pagination__list {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gap-xs); /* 4px */
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/* ============================================
+   PAGE BUTTONS
+   Pill-shaped, matching CircularButton sizing
+   ============================================ */
+
+.ds-pagination__page,
+.ds-pagination__arrow {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  border: none;
+  border-radius: var(--radius-full); /* pill */
+  background-color: transparent;
+  cursor: pointer;
+  transition: background-color var(--motion-duration-base) var(--motion-ease-standard), color var(--motion-duration-base) var(--motion-ease-standard);
+  font-family: var(--font-paragraph-em-family);
+  font-size: var(--font-paragraph-em-size);
+  font-weight: var(--font-paragraph-em-weight);
+  line-height: var(--font-paragraph-em-line-height);
+  letter-spacing: var(--font-paragraph-em-letter-spacing);
+  color: var(--color-text-secondary);
+}
+
+.ds-pagination__page:hover:not(:disabled):not(.ds-pagination__page--current),
+.ds-pagination__arrow:hover:not(:disabled) {
+  background-color: var(--color-action-passive-bg-hover);
+}
+
+.ds-pagination__page:focus-visible,
+.ds-pagination__arrow:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: 2px;
+}
+
+/* ============================================
+   CURRENT PAGE
+   Same active treatment as SegmentedControl
+   ============================================ */
+
+.ds-pagination__page--current {
+  background-color: var(--color-action-primary-bg);
+  color: var(--color-action-primary-text);
+}
+
+.ds-pagination__page--current:hover {
+  background-color: var(--color-action-primary-bg-hover);
+}
+
+/* ============================================
+   ARROWS
+   ============================================ */
+
+.ds-pagination__icon {
+  --icon-size: var(--icon-size-md);
+  line-height: 1;
+  color: var(--color-icon-primary);
+}
+
+.ds-pagination__arrow:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* ============================================
+   ELLIPSIS
+   ============================================ */
+
+.ds-pagination__ellipsis {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  font-family: var(--font-paragraph-family);
+  font-size: var(--font-paragraph-size);
+  color: var(--color-text-tertiary);
+  user-select: none;
+}
+
+/* ============================================
+   COMPACT
+   Prev/next arrows with a page readout
+   ============================================ */
+
+.ds-pagination--compact .ds-pagination__arrow {
+  width: 32px;
+  height: 32px;
+}
+
+.ds-pagination--compact .ds-pagination__icon {
+  --icon-size: var(--icon-size-sm);
+}
+
+.ds-pagination__readout {
+  padding: 0 var(--padding-sm); /* 8px */
+  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-secondary);
+  white-space: nowrap;
+}

package/components/Pagination/Pagination.d.ts

@@ -0,0 +1,22 @@
+export interface PaginationProps {
+    /** Current page (1-based) */
+    page: number;
+    /** Total number of pages */
+    pageCount: number;
+    /** Callback with the requested page */
+    onPageChange: (page: number) => void;
+    /** Pages shown on each side of the current page */
+    siblingCount?: number;
+    /** Component size — compact swaps the numbers for a "Page X of Y" readout */
+    size?: 'default' | 'compact';
+    /** Accessible label for the nav landmark */
+    ariaLabel?: string;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * Pagination component — page navigation for long datasets.
+ * Numbered pages with ellipses for large ranges, or a compact
+ * prev/next readout. Pairs with Table.
+ */
+export declare const Pagination: ({ page, pageCount, onPageChange, siblingCount, size, ariaLabel, className, }: PaginationProps) => import("react").JSX.Element;

package/components/Pagination/Pagination.js

@@ -0,0 +1,83 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "./Pagination.css";
+import "../../fonts/material-symbols.css";
+const range = (start, end) => Array.from({ length: end - start + 1 }, (_, i) => start + i);
+const getPageItems = (page, pageCount, siblingCount) => {
+  const totalNumbers = siblingCount * 2 + 5;
+  if (pageCount <= totalNumbers) {
+    return range(1, pageCount);
+  }
+  const leftSibling = Math.max(page - siblingCount, 1);
+  const rightSibling = Math.min(page + siblingCount, pageCount);
+  const showLeftEllipsis = leftSibling > 2;
+  const showRightEllipsis = rightSibling < pageCount - 1;
+  if (!showLeftEllipsis && showRightEllipsis) {
+    return [...range(1, 3 + 2 * siblingCount), "end-ellipsis", pageCount];
+  }
+  if (showLeftEllipsis && !showRightEllipsis) {
+    return [1, "start-ellipsis", ...range(pageCount - (2 + 2 * siblingCount), pageCount)];
+  }
+  return [1, "start-ellipsis", ...range(leftSibling, rightSibling), "end-ellipsis", pageCount];
+};
+const Pagination = ({
+  page,
+  pageCount,
+  onPageChange,
+  siblingCount = 1,
+  size = "default",
+  ariaLabel = "Pagination",
+  className = ""
+}) => {
+  const baseClass = "ds-pagination";
+  const compact = size === "compact";
+  const clampedPage = Math.min(Math.max(page, 1), Math.max(pageCount, 1));
+  const isFirst = clampedPage <= 1;
+  const isLast = clampedPage >= pageCount;
+  const goTo = (target) => {
+    const next = Math.min(Math.max(target, 1), pageCount);
+    if (next !== clampedPage) onPageChange(next);
+  };
+  const classes = [baseClass, compact ? `${baseClass}--compact` : "", className].filter(Boolean).join(" ");
+  const arrowButton = (direction) => {
+    const disabled = direction === "previous" ? isFirst : isLast;
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: `${baseClass}__arrow`,
+        onClick: () => goTo(direction === "previous" ? clampedPage - 1 : clampedPage + 1),
+        disabled,
+        "aria-label": direction === "previous" ? "Previous page" : "Next page",
+        children: /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon material-symbols-rounded`, "aria-hidden": "true", children: direction === "previous" ? "chevron_left" : "chevron_right" })
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxs("nav", { className: classes, "aria-label": ariaLabel, children: [
+    arrowButton("previous"),
+    compact ? /* @__PURE__ */ jsxs("span", { className: `${baseClass}__readout`, "aria-live": "polite", children: [
+      "Page ",
+      clampedPage,
+      " of ",
+      pageCount
+    ] }) : /* @__PURE__ */ jsx("ul", { className: `${baseClass}__list`, children: getPageItems(clampedPage, pageCount, siblingCount).map(
+      (item) => typeof item === "number" ? /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: [
+            `${baseClass}__page`,
+            item === clampedPage ? `${baseClass}__page--current` : ""
+          ].filter(Boolean).join(" "),
+          onClick: () => goTo(item),
+          "aria-current": item === clampedPage ? "page" : void 0,
+          "aria-label": `Page ${item}`,
+          children: item
+        }
+      ) }, item) : /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("span", { className: `${baseClass}__ellipsis`, "aria-hidden": "true", children: "…" }) }, item)
+    ) }),
+    arrowButton("next")
+  ] });
+};
+export {
+  Pagination
+};