@robr0/design-system 0.1.0

package/components/CommandPalette/CommandPalette.js

@@ -0,0 +1,263 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useRef, useId, useSyncExternalStore, useCallback, useMemo, useEffect } from "react";
+import ReactDOM from "react-dom";
+import "./CommandPalette.css";
+import "../../fonts/material-symbols.css";
+const emptySubscribe = () => () => {
+};
+const CommandPalette = ({
+  open,
+  onOpenChange,
+  groups,
+  placeholder = "Type a command or search…",
+  emptyMessage = "No matching commands",
+  loading = false,
+  hotkey = true,
+  onSelect,
+  onSearchChange,
+  manualFiltering = false,
+  hideFooter = false,
+  className = ""
+}) => {
+  const [query, setQuery] = useState("");
+  const [rawActiveIndex, setActiveIndex] = useState(0);
+  const [prevOpen, setPrevOpen] = useState(open);
+  const inputRef = useRef(null);
+  const listRef = useRef(null);
+  const previousFocusRef = useRef(null);
+  const generatedId = useId();
+  const baseClass = "ds-command-palette";
+  const mounted = useSyncExternalStore(emptySubscribe, () => true, () => false);
+  const matches = useCallback(
+    (command) => {
+      const q = query.trim().toLowerCase();
+      if (manualFiltering || q === "") return true;
+      const haystack = [command.label, command.description ?? "", ...command.keywords ?? []].join(" ").toLowerCase();
+      return haystack.includes(q);
+    },
+    [manualFiltering, query]
+  );
+  const filteredGroups = useMemo(
+    () => groups.map((group) => ({ ...group, commands: group.commands.filter(matches) })).filter((group) => group.commands.length > 0),
+    [groups, matches]
+  );
+  const flatCommands = useMemo(
+    () => filteredGroups.flatMap((g) => g.commands).filter((c) => !c.disabled),
+    [filteredGroups]
+  );
+  if (prevOpen !== open) {
+    setPrevOpen(open);
+    if (!open) {
+      setQuery("");
+      setActiveIndex(0);
+    }
+  }
+  const activeIndex = Math.min(rawActiveIndex, Math.max(0, flatCommands.length - 1));
+  useEffect(() => {
+    if (!hotkey) return;
+    const handleHotkey = (e) => {
+      if (e.key.toLowerCase() === "k" && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault();
+        onOpenChange(!open);
+      }
+    };
+    document.addEventListener("keydown", handleHotkey);
+    return () => document.removeEventListener("keydown", handleHotkey);
+  }, [hotkey, open, onOpenChange]);
+  useEffect(() => {
+    if (open) {
+      previousFocusRef.current = document.activeElement;
+      const raf = requestAnimationFrame(() => inputRef.current?.focus());
+      return () => cancelAnimationFrame(raf);
+    }
+    if (previousFocusRef.current) {
+      previousFocusRef.current.focus();
+      previousFocusRef.current = null;
+    }
+  }, [open]);
+  useEffect(() => {
+    if (open) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
+    }
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [open]);
+  const runCommand = (command) => {
+    if (command.disabled) return;
+    command.onSelect?.();
+    onSelect?.(command);
+    onOpenChange(false);
+  };
+  const handleKeyDown = (e) => {
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        setActiveIndex(
+          (prev) => flatCommands.length === 0 ? 0 : (prev + 1) % flatCommands.length
+        );
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        setActiveIndex(
+          (prev) => flatCommands.length === 0 ? 0 : (prev - 1 + flatCommands.length) % flatCommands.length
+        );
+        break;
+      case "Home":
+        e.preventDefault();
+        setActiveIndex(0);
+        break;
+      case "End":
+        e.preventDefault();
+        setActiveIndex(Math.max(0, flatCommands.length - 1));
+        break;
+      case "Enter":
+        e.preventDefault();
+        if (flatCommands[activeIndex]) runCommand(flatCommands[activeIndex]);
+        break;
+      case "Escape":
+        e.preventDefault();
+        onOpenChange(false);
+        break;
+    }
+  };
+  useEffect(() => {
+    if (!open || !listRef.current) return;
+    const active = listRef.current.querySelector(
+      `[data-command-index="${activeIndex}"]`
+    );
+    active?.scrollIntoView({ block: "nearest" });
+  }, [activeIndex, open]);
+  const handleQueryChange = (next) => {
+    setQuery(next);
+    setActiveIndex(0);
+    onSearchChange?.(next);
+  };
+  const listboxId = `${generatedId}-listbox`;
+  const activeCommand = flatCommands[activeIndex];
+  const activeDescendantId = activeCommand ? `${generatedId}-command-${activeCommand.id}` : void 0;
+  const classes = [baseClass, open ? `${baseClass}--open` : "", className].filter(Boolean).join(" ");
+  let commandIndex = 0;
+  const palette = /* @__PURE__ */ jsxs("div", { className: classes, children: [
+    /* @__PURE__ */ jsx("div", { className: `${baseClass}__backdrop`, onClick: () => onOpenChange(false) }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `${baseClass}__panel`,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": "Command palette",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: `${baseClass}__search`, children: [
+            /* @__PURE__ */ jsx("span", { className: `${baseClass}__search-icon material-symbols-rounded`, "aria-hidden": "true", children: "search" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref: inputRef,
+                type: "text",
+                className: `${baseClass}__input`,
+                role: "combobox",
+                autoComplete: "off",
+                "aria-expanded": true,
+                "aria-controls": listboxId,
+                "aria-autocomplete": "list",
+                "aria-activedescendant": activeDescendantId,
+                "aria-label": placeholder,
+                placeholder,
+                value: query,
+                onChange: (e) => handleQueryChange(e.target.value),
+                onKeyDown: handleKeyDown
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: `${baseClass}__close`,
+                onClick: () => onOpenChange(false),
+                "aria-label": "Close command palette",
+                children: /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", "aria-hidden": "true", children: "close" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: `${baseClass}__list`, role: "listbox", id: listboxId, ref: listRef, children: [
+            loading && /* @__PURE__ */ jsx("p", { className: `${baseClass}__status`, children: "Loading…" }),
+            !loading && filteredGroups.length === 0 && /* @__PURE__ */ jsx("p", { className: `${baseClass}__status`, children: emptyMessage }),
+            !loading && filteredGroups.map((group) => /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: `${baseClass}__group`,
+                role: "group",
+                "aria-label": group.label,
+                children: [
+                  /* @__PURE__ */ jsx("p", { className: `${baseClass}__group-label`, children: group.label }),
+                  group.commands.map((command) => {
+                    const index = command.disabled ? -1 : commandIndex++;
+                    const isActive = index === activeIndex;
+                    return /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        id: `${generatedId}-command-${command.id}`,
+                        "data-command-index": index,
+                        className: [
+                          `${baseClass}__command`,
+                          isActive ? `${baseClass}__command--active` : "",
+                          command.disabled ? `${baseClass}__command--disabled` : ""
+                        ].filter(Boolean).join(" "),
+                        role: "option",
+                        "aria-selected": isActive,
+                        "aria-disabled": command.disabled,
+                        onMouseEnter: () => index >= 0 && setActiveIndex(index),
+                        onMouseDown: (e) => e.preventDefault(),
+                        onClick: () => runCommand(command),
+                        children: [
+                          command.icon && /* @__PURE__ */ jsx(
+                            "span",
+                            {
+                              className: `${baseClass}__command-icon material-symbols-rounded`,
+                              "aria-hidden": "true",
+                              children: command.icon
+                            }
+                          ),
+                          /* @__PURE__ */ jsxs("span", { className: `${baseClass}__command-text`, children: [
+                            /* @__PURE__ */ jsx("span", { className: `${baseClass}__command-label`, children: command.label }),
+                            command.description && /* @__PURE__ */ jsx("span", { className: `${baseClass}__command-description`, children: command.description })
+                          ] }),
+                          command.shortcut && command.shortcut.length > 0 && /* @__PURE__ */ jsx("span", { className: `${baseClass}__shortcut`, children: command.shortcut.map((key, i) => /* @__PURE__ */ jsx("kbd", { className: `${baseClass}__key`, children: key }, i)) })
+                        ]
+                      },
+                      command.id
+                    );
+                  })
+                ]
+              },
+              group.label
+            ))
+          ] }),
+          !hideFooter && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__footer`, children: [
+            /* @__PURE__ */ jsxs("span", { className: `${baseClass}__hint`, children: [
+              /* @__PURE__ */ jsx("kbd", { className: `${baseClass}__key`, children: "↑" }),
+              /* @__PURE__ */ jsx("kbd", { className: `${baseClass}__key`, children: "↓" }),
+              "to navigate"
+            ] }),
+            /* @__PURE__ */ jsxs("span", { className: `${baseClass}__hint`, children: [
+              /* @__PURE__ */ jsx("kbd", { className: `${baseClass}__key`, children: "↵" }),
+              "to select"
+            ] }),
+            /* @__PURE__ */ jsxs("span", { className: `${baseClass}__hint`, children: [
+              /* @__PURE__ */ jsx("kbd", { className: `${baseClass}__key`, children: "esc" }),
+              "to close"
+            ] })
+          ] })
+        ]
+      }
+    )
+  ] });
+  if (!mounted) return null;
+  return ReactDOM.createPortal(palette, document.body);
+};
+export {
+  CommandPalette
+};

package/components/ContactCard/ContactCard.css

@@ -0,0 +1,123 @@
+/* ============================================
+   CONTACT CARD
+   ============================================ */
+.ds-contact-card {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-lg);
+  padding: var(--padding-lg);
+  border: 1px solid var(--color-bg-container-border);
+  border-radius: var(--radius-md);
+  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-md);
+  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-xs);
+  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-full);
+  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-sm);
+}
+
+.ds-contact-card__chevron {
+  --icon-size: var(--icon-size-sm);
+  color: var(--color-text-tertiary);
+  flex-shrink: 0;
+}

package/components/ContactCard/ContactCard.d.ts

@@ -0,0 +1,23 @@
+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;
+    /** Material Symbol name used when no logo is set */
+    icon?: string;
+    /** 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) => import("react").JSX.Element;

package/components/ContactCard/ContactCard.js

@@ -0,0 +1,78 @@
+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"
+      }
+    ) : /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded ds-contact-card__icon", children: icon ?? "link" }) }),
+    /* @__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/ContributionGraph/ContributionGraph.css

@@ -0,0 +1,142 @@
+/* ============================================
+   CONTRIBUTION GRAPH COMPONENT
+   GitHub-style activity heatmap — one cell per
+   day, coloured by the contribution colour ramp
+   ============================================ */
+
+.ds-contribution-graph {
+  --ds-contribution-cell: 12px;
+  --ds-contribution-gap: 3px;
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-sm);
+  width: 100%;
+  min-width: 0;
+}
+
+/* Grid + month labels scroll together on narrow screens */
+.ds-contribution-graph__scroll {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-xxs);
+  overflow-x: auto;
+  padding-bottom: var(--padding-xxxs);
+}
+
+/* ============================================
+   MONTH LABELS
+   ============================================ */
+
+.ds-contribution-graph__months {
+  display: grid;
+  column-gap: var(--ds-contribution-gap);
+  width: 100%;
+}
+
+.ds-contribution-graph__month-label {
+  grid-row: 1;
+  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;
+}
+
+/* ============================================
+   GRID
+   ============================================ */
+
+.ds-contribution-graph__grid {
+  display: grid;
+  gap: var(--ds-contribution-gap);
+  width: 100%;
+}
+
+.ds-contribution-graph__week {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ds-contribution-gap);
+}
+
+.ds-contribution-graph__cell {
+  width: var(--ds-contribution-cell);
+  height: var(--ds-contribution-cell);
+  border-radius: var(--radius-xxs);
+  flex-shrink: 0;
+}
+
+/* Cells inside the grid stretch with their column; the fixed size above
+   only applies to the legend swatches */
+.ds-contribution-graph__week .ds-contribution-graph__cell {
+  width: 100%;
+  height: auto;
+  aspect-ratio: 1 / 1;
+}
+
+.ds-contribution-graph__cell--empty {
+  background-color: transparent;
+}
+
+.ds-contribution-graph__cell--level-0 {
+  background-color: var(--color-chart-contribution-0);
+}
+
+.ds-contribution-graph__cell--level-1 {
+  background-color: var(--color-chart-contribution-1);
+}
+
+.ds-contribution-graph__cell--level-2 {
+  background-color: var(--color-chart-contribution-2);
+}
+
+.ds-contribution-graph__cell--level-3 {
+  background-color: var(--color-chart-contribution-3);
+}
+
+.ds-contribution-graph__cell--level-4 {
+  background-color: var(--color-chart-contribution-4);
+}
+
+/* ============================================
+   FOOTER — caption + legend
+   ============================================ */
+
+.ds-contribution-graph__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--gap-md);
+  flex-wrap: wrap;
+}
+
+.ds-contribution-graph__caption {
+  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-secondary);
+}
+
+.ds-contribution-graph__legend {
+  display: flex;
+  align-items: center;
+  gap: var(--ds-contribution-gap);
+}
+
+.ds-contribution-graph__legend-label {
+  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);
+}
+
+.ds-contribution-graph__legend-label:first-child {
+  margin-right: var(--gap-xxs);
+}
+
+.ds-contribution-graph__legend-label:last-child {
+  margin-left: var(--gap-xxs);
+}

package/components/ContributionGraph/ContributionGraph.d.ts

@@ -0,0 +1,26 @@
+export interface ContributionDay {
+    /** ISO date string, e.g. "2026-07-08" */
+    date: string;
+    /** Number of contributions on this day */
+    count: number;
+    /** Intensity level 0 (none) to 4 (most) — drives the cell colour */
+    level: 0 | 1 | 2 | 3 | 4;
+}
+export interface ContributionGraphProps {
+    /** One entry per day, ordered oldest to newest */
+    days: ContributionDay[];
+    /** Summary line shown under the grid, e.g. "496 contributions in the last year" */
+    caption?: string;
+    /** Show month labels above the grid */
+    showMonthLabels?: boolean;
+    /** Show the Less → More legend under the grid */
+    showLegend?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * ContributionGraph renders a GitHub-style contribution heatmap:
+ * one cell per day, arranged in weekday rows and week columns,
+ * coloured by activity level via the --color-chart-contribution-* ramp.
+ */
+export declare const ContributionGraph: ({ days, caption, showMonthLabels, showLegend, className, }: ContributionGraphProps) => import("react").JSX.Element;