@robr0/design-system 0.4.0 → 0.5.0

package/components/MessageActions/MessageActions.css

@@ -0,0 +1,76 @@
+/* ============================================
+   MESSAGE ACTIONS COMPONENT
+   The icon-button row under a chat message:
+   copy, retry, feedback. Ghost buttons — no
+   border, no resting background — so the row
+   stays quiet until pointed at.
+
+   Stateless beyond hover: copy feedback is the
+   consumer swapping an item's icon, never a
+   timer inside the row.
+   ============================================ */
+
+.ds-message-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-xxs);
+}
+
+/* ============================================
+   BUTTON
+   Ghost: transparent at rest, the passive
+   action ramp on hover and for the active item.
+   ============================================ */
+
+.ds-message-actions__button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--padding-xxs);
+  border: none;
+  border-radius: var(--radius-sm);
+  background-color: transparent;
+  color: var(--color-icon-primary);
+  cursor: pointer;
+  transition:
+    background-color var(--motion-duration-fast) var(--motion-ease-standard),
+    color var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-message-actions__button .material-symbols-rounded {
+  --icon-size: var(--icon-size-sm);
+}
+
+.ds-message-actions__button:hover:not(:disabled) {
+  background-color: var(--color-action-passive-bg-hover);
+  color: var(--color-text-primary);
+}
+
+/* ============================================
+   ACTIVE
+   The selected item, e.g. the chosen feedback
+   thumb — held on the pressed step of the ramp.
+   ============================================ */
+
+.ds-message-actions__button--active {
+  background-color: var(--color-action-passive-bg-active);
+  color: var(--color-text-primary);
+}
+
+/* ============================================
+   FOCUS
+   ============================================ */
+
+.ds-message-actions__button:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: -2px;
+}
+
+/* ============================================
+   DISABLED
+   ============================================ */
+
+.ds-message-actions__button:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}

package/components/MessageActions/MessageActions.d.ts

@@ -0,0 +1,38 @@
+import { default as React } from 'react';
+/** One action in the row: a stable id, a glyph, and an accessible name. */
+export interface MessageAction {
+    /** Stable identifier passed to `onActionClick`. */
+    id: string;
+    /** Material Symbol name for the button glyph. */
+    icon: string;
+    /** Accessible name, also shown as the tooltip. */
+    label: string;
+    /** Marks the action as selected, e.g. the chosen feedback thumb. */
+    active?: boolean;
+    /** Disables just this action. */
+    disabled?: boolean;
+}
+/** Props owned by MessageActions itself — everything else falls through to the root element. */
+type MessageActionsOwnProps = {
+    /** The actions, rendered left to right. */
+    items: MessageAction[];
+    /** Fires with the pressed action's id. */
+    onActionClick?: (id: string) => void;
+    /** Wrap each button in a Tooltip showing its label. The label stays as `aria-label` either way. */
+    showTooltips?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface MessageActionsProps extends MessageActionsOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof MessageActionsOwnProps> {
+}
+/**
+ * MessageActions is the icon-button row for message-level actions: copy,
+ * retry, feedback. It slots into ChatMessage's `actions` prop, which reveals
+ * it on hover and keyboard focus.
+ *
+ * The row is stateless beyond hover — copy feedback is the consumer swapping
+ * an item's `icon` (content_copy → check) and flipping it back, so the row
+ * never owns a timer or a clipboard call.
+ */
+export declare const MessageActions: React.ForwardRefExoticComponent<MessageActionsProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/MessageActions/MessageActions.js

@@ -0,0 +1,33 @@
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import { Tooltip } from "../Tooltip/Tooltip.js";
+import "./MessageActions.css";
+import "../../fonts/material-symbols.css";
+const MessageActions = React.forwardRef(
+  ({ items, onActionClick, showTooltips = true, className = "", ...rest }, ref) => {
+    const baseClass = "ds-message-actions";
+    const classes = [baseClass, className].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsx("div", { ...rest, ref, className: classes, children: items.map((item) => {
+      const button = /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: [
+            `${baseClass}__button`,
+            item.active ? `${baseClass}__button--active` : ""
+          ].filter(Boolean).join(" "),
+          "aria-label": item.label,
+          "aria-pressed": item.active !== void 0 ? item.active : void 0,
+          disabled: item.disabled,
+          onClick: () => onActionClick?.(item.id),
+          children: /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", "aria-hidden": "true", children: item.icon })
+        }
+      );
+      return showTooltips ? /* @__PURE__ */ jsx(Tooltip, { content: item.label, children: button }, item.id) : /* @__PURE__ */ jsx(React.Fragment, { children: button }, item.id);
+    }) });
+  }
+);
+MessageActions.displayName = "MessageActions";
+export {
+  MessageActions
+};

package/components/MessageCard/MessageCard.css

@@ -0,0 +1,112 @@
+/* ============================================
+   MESSAGE CARD COMPONENT
+   Structured rich content inside a chat turn:
+   media on top, a title/meta/description body,
+   and an actions footer.
+
+   Not the navigation Card — this is content
+   furniture inside a conversation, --radius-md
+   like the other chat primitives, sized by the
+   bubble or turn that holds it.
+   ============================================ */
+
+.ds-message-card {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: var(--ds-message-card-max-width, 100%);
+  background-color: var(--color-bg-container-primary);
+  border: var(--border-xs) solid var(--color-bg-container-border);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+}
+
+/* ============================================
+   MEDIA
+   Full bleed — the card's overflow clip rounds
+   the corners, so the slot carries no padding.
+   ============================================ */
+
+.ds-message-card__media {
+  display: block;
+}
+
+.ds-message-card__media img {
+  display: block;
+  width: 100%;
+}
+
+/* ============================================
+   BODY
+   ============================================ */
+
+.ds-message-card__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-xs);
+  padding: var(--padding-sm-md) var(--padding-md);
+}
+
+.ds-message-card__title-row {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-xs);
+  min-width: 0;
+}
+
+.ds-message-card__icon {
+  display: inline-flex;
+  align-items: center;
+  flex: none;
+  color: var(--color-icon-primary);
+}
+
+.ds-message-card__icon .material-symbols-rounded {
+  --icon-size: var(--icon-size-sm);
+}
+
+.ds-message-card__title {
+  min-width: 0;
+  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);
+  letter-spacing: var(--font-title-body-letter-spacing);
+  color: var(--color-text-primary);
+}
+
+.ds-message-card__meta {
+  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-tertiary);
+}
+
+.ds-message-card__description {
+  margin: 0;
+  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);
+}
+
+/* ============================================
+   ACTIONS
+   Mirrors ToolCall's actions footer exactly, so
+   approvals on a tool call and link actions on
+   a card read as the same row.
+   ============================================ */
+
+.ds-message-card__actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--gap-sm);
+  padding: var(--padding-sm) var(--padding-sm-md);
+  border-top: var(--border-xs) solid var(--color-divider);
+  background-color: var(--color-bg-container-secondary);
+}

package/components/MessageCard/MessageCard.d.ts

@@ -0,0 +1,35 @@
+import { default as React } from 'react';
+/** Props owned by MessageCard itself — everything else falls through to the root element. */
+type MessageCardOwnProps = {
+    /** Card heading. */
+    title?: string;
+    /** One or two lines under the title. */
+    description?: string;
+    /** Top media slot — an image or chart, rendered flush to the card edges (the card clips it). */
+    media?: React.ReactNode;
+    /** Small leading icon beside the title — a Material Symbol name, or any custom element. */
+    icon?: string | React.ReactNode;
+    /** Free-text metadata line, e.g. a domain or date, so callers keep their own formatting. */
+    meta?: string;
+    /**
+     * Action row rendered in a footer outside the body — small secondary or
+     * tertiary Buttons, mirroring ToolCall's actions footer.
+     */
+    actions?: React.ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+    /** Body content between the description and the footer — rich content, a Prose block, a DocumentChip row. */
+    children?: React.ReactNode;
+};
+export interface MessageCardProps extends MessageCardOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof MessageCardOwnProps> {
+}
+/**
+ * MessageCard is a structured rich-content card embedded in a chat message:
+ * media, title, body, and an actions row, for link previews, search results,
+ * and booking-style rich responses inside an assistant turn or bubble.
+ *
+ * It is not the navigation Card — this is content furniture inside a
+ * conversation, sized by the bubble or turn that holds it.
+ */
+export declare const MessageCard: React.ForwardRefExoticComponent<MessageCardProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/MessageCard/MessageCard.js

@@ -0,0 +1,28 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React from "react";
+import "./MessageCard.css";
+import "../../fonts/material-symbols.css";
+const MessageCard = React.forwardRef(
+  ({ title, description, media, icon, meta, actions, className = "", children, ...rest }, ref) => {
+    const baseClass = "ds-message-card";
+    const classes = [baseClass, className].filter(Boolean).join(" ");
+    const hasBody = Boolean(title || icon || meta || description || children);
+    return /* @__PURE__ */ jsxs("div", { ...rest, ref, className: classes, children: [
+      media && /* @__PURE__ */ jsx("div", { className: `${baseClass}__media`, children: media }),
+      hasBody && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__body`, children: [
+        (title || icon) && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__title-row`, children: [
+          icon && /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon`, "aria-hidden": "true", children: typeof icon === "string" ? /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", children: icon }) : icon }),
+          title && /* @__PURE__ */ jsx("span", { className: `${baseClass}__title`, children: title })
+        ] }),
+        meta && /* @__PURE__ */ jsx("span", { className: `${baseClass}__meta`, children: meta }),
+        description && /* @__PURE__ */ jsx("p", { className: `${baseClass}__description`, children: description }),
+        children
+      ] }),
+      actions && /* @__PURE__ */ jsx("div", { className: `${baseClass}__actions`, children: actions })
+    ] });
+  }
+);
+MessageCard.displayName = "MessageCard";
+export {
+  MessageCard
+};

package/components/NavList/NavList.css

@@ -0,0 +1,155 @@
+/* ============================================
+   NAV LIST COMPONENT
+   Vertical navigation link list for drawers and
+   side menus. Rows are tertiary Buttons — their
+   shape, sizing, and states live in Button.css;
+   this file owns only layout, the chevron
+   toggle, and the expand animation.
+   ============================================ */
+
+.ds-nav-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-xxs);
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+/* Every row reserves the toggle's 40px height, so leaf rows (compact
+   Buttons, ~32px) and rows carrying a 40px chevron toggle sit on the same
+   vertical rhythm instead of producing uneven gaps down the list. */
+.ds-nav-list__item {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-height: 40px;
+}
+
+/* ============================================
+   ROWS
+   Full-width, left-aligned Buttons; long labels
+   truncate with an ellipsis.
+   ============================================ */
+
+.ds-nav-list .ds-button {
+  width: 100%;
+  max-width: 100%;
+  justify-content: flex-start;
+  text-align: left;
+}
+
+.ds-nav-list .ds-button__text {
+  min-width: 0;
+  flex: 0 1 auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* A row with a toggle shares its width with the chevron button. */
+.ds-nav-list__row {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-xxs);
+  width: 100%;
+}
+
+.ds-nav-list__row .ds-button {
+  width: auto;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+/* ============================================
+   TOGGLE
+   Mirrors CircularButton's 40px tertiary recipe.
+   ============================================ */
+
+.ds-nav-list__toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  border: none;
+  border-radius: var(--radius-full);
+  background-color: var(--color-action-passive-bg);
+  cursor: pointer;
+  transition: background-color var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-nav-list__toggle:hover {
+  background-color: var(--color-action-passive-bg-hover);
+}
+
+.ds-nav-list__toggle:active {
+  background-color: var(--color-action-passive-bg-active);
+}
+
+.ds-nav-list__toggle:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: -2px;
+}
+
+.ds-nav-list__chevron {
+  --icon-size: var(--icon-size-sm);
+  color: var(--color-icon-primary);
+  line-height: 1;
+  transition: transform var(--motion-duration-slow) var(--motion-ease-standard);
+}
+
+.ds-nav-list__toggle[aria-expanded='true'] .ds-nav-list__chevron {
+  transform: rotate(180deg);
+}
+
+/* ============================================
+   PANEL — collapsible sublist wrapper
+   Grid-rows height animation; reduced motion is
+   handled by the motion-token contract.
+   ============================================ */
+
+.ds-nav-list__panel {
+  display: grid;
+  grid-template-rows: 0fr;
+  margin-top: 0;
+  transition:
+    grid-template-rows var(--motion-duration-slow) var(--motion-ease-emphasized),
+    margin-top var(--motion-duration-slow) var(--motion-ease-emphasized);
+}
+
+/* Open panels take the list's item gap above them, so the first child sits
+   the same distance from its parent row as any two siblings do. */
+.ds-nav-list__panel--open {
+  grid-template-rows: 1fr;
+  margin-top: var(--gap-xxs);
+}
+
+/* ============================================
+   SUBLIST — one indent step per nesting level
+   ============================================ */
+
+.ds-nav-list__sublist {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-xxs);
+  overflow: hidden;
+  min-height: 0;
+  margin: 0;
+  padding: 0;
+  padding-left: var(--padding-xl);
+  list-style: none;
+}
+
+.ds-nav-list__sublist .ds-nav-list__sublist {
+  padding-left: var(--gap-lg);
+}
+
+/* Permanent (non-collapsible) groups render their sublist directly under the
+   row, with no panel — give it the same item gap the panel carries when open. */
+.ds-nav-list__item > .ds-nav-list__sublist {
+  margin-top: var(--gap-xxs);
+}

package/components/NavList/NavList.d.ts

@@ -0,0 +1,56 @@
+import { default as React } from 'react';
+export interface NavListItem {
+    /** Row text. */
+    label: string;
+    /** Link destination — every row is a real link. */
+    href: string;
+    /** Stable identity for expansion state and aria wiring. Defaults to `href`. */
+    id?: string;
+    /** Child rows, indented one level. Nesting is supported three levels deep. */
+    items?: NavListItem[];
+    /**
+     * When false, an item with children renders no toggle and its children stay
+     * visible — a permanent group rather than a collapsible section.
+     */
+    collapsible?: boolean;
+    /**
+     * Forces the current-page treatment on this row regardless of the exact
+     * match against `currentHref` — for prefix-matched sections that should
+     * stay current on their child routes.
+     */
+    current?: boolean;
+}
+/** Props owned by NavList itself — everything else falls through to the list element. */
+type NavListOwnProps = {
+    /** Navigation tree to render. */
+    items: NavListItem[];
+    /** href of the current page — the exactly matching row gets `aria-current="page"` and the active treatment. */
+    currentHref?: string;
+    /** Controlled list of expanded item ids. */
+    expandedIds?: string[];
+    /** Initially expanded item ids (uncontrolled). */
+    defaultExpandedIds?: string[];
+    /** Fires with the full new list of expanded ids whenever a toggle is pressed, in both controlled and uncontrolled modes. */
+    onExpandedChange?: (expandedIds: string[]) => void;
+    /** Allow several sections expanded at once. Default false — expanding one collapses the rest. */
+    multiple?: boolean;
+    /** Fires when any link is clicked, alongside native navigation — e.g. to close the drawer that contains the list. */
+    onNavigate?: (item: NavListItem, event: React.MouseEvent<HTMLElement>) => void;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface NavListProps extends NavListOwnProps, Omit<React.ComponentPropsWithoutRef<'ul'>, keyof NavListOwnProps> {
+}
+/**
+ * Vertical list of navigation links for drawers and side menus.
+ *
+ * Every row is a real link, rendered as a tertiary Button so shape, sizing,
+ * and interaction states stay identical to every other button in the system.
+ * An item with children gets a separate chevron toggle — tapping the label
+ * navigates, tapping the chevron expands — and collapsed sublists are `inert`,
+ * so they leave the tab order and the accessibility tree. Expansion is
+ * uncontrolled by default (`defaultExpandedIds`) or controlled via
+ * `expandedIds` + `onExpandedChange`.
+ */
+export declare const NavList: React.ForwardRefExoticComponent<NavListProps & React.RefAttributes<HTMLUListElement>>;
+export {};

package/components/NavList/NavList.js

@@ -0,0 +1,99 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { useId, useState } from "react";
+import { Button } from "../Button/Button.js";
+import "./NavList.css";
+import "../../fonts/material-symbols.css";
+const MAX_DEPTH = 3;
+const NavList = React.forwardRef(
+  ({
+    items,
+    currentHref,
+    expandedIds,
+    defaultExpandedIds,
+    onExpandedChange,
+    multiple = false,
+    onNavigate,
+    className = "",
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-nav-list";
+    const uid = useId();
+    const [internalExpanded, setInternalExpanded] = useState(
+      defaultExpandedIds ?? []
+    );
+    const expanded = expandedIds ?? internalExpanded;
+    const itemId = (item) => item.id ?? item.href;
+    const toggle = (id) => {
+      const next = expanded.includes(id) ? expanded.filter((entry) => entry !== id) : multiple ? [...expanded, id] : [id];
+      if (expandedIds === void 0) setInternalExpanded(next);
+      onExpandedChange?.(next);
+    };
+    const renderItems = (level, levelItems) => levelItems.map((item) => {
+      const id = itemId(item);
+      const isCurrent = item.current ?? (currentHref !== void 0 && item.href === currentHref);
+      const children = level < MAX_DEPTH ? item.items : void 0;
+      const collapsible = item.collapsible ?? true;
+      const isOpen = expanded.includes(id);
+      const panelId = `${uid}-${id}`;
+      const link = /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "tertiary",
+          size: level === 1 ? "default" : "compact",
+          label: item.label,
+          href: item.href,
+          ariaCurrent: isCurrent,
+          className: isCurrent ? "ds-button--active" : void 0,
+          onClick: (event) => onNavigate?.(item, event)
+        }
+      );
+      if (!children || children.length === 0) {
+        return /* @__PURE__ */ jsx("li", { className: `${baseClass}__item`, children: link }, id);
+      }
+      if (!collapsible) {
+        return /* @__PURE__ */ jsxs("li", { className: `${baseClass}__item`, children: [
+          link,
+          /* @__PURE__ */ jsx("ul", { className: `${baseClass}__sublist`, children: renderItems(level + 1, children) })
+        ] }, id);
+      }
+      return /* @__PURE__ */ jsxs("li", { className: `${baseClass}__item`, children: [
+        /* @__PURE__ */ jsxs("div", { className: `${baseClass}__row`, children: [
+          link,
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: `${baseClass}__toggle`,
+              "aria-expanded": isOpen,
+              "aria-controls": panelId,
+              "aria-label": `${isOpen ? "Collapse" : "Expand"} ${item.label}`,
+              onClick: () => toggle(id),
+              children: /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: `${baseClass}__chevron material-symbols-rounded`,
+                  "aria-hidden": "true",
+                  children: "expand_more"
+                }
+              )
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            id: panelId,
+            className: `${baseClass}__panel ${isOpen ? `${baseClass}__panel--open` : ""}`,
+            inert: !isOpen,
+            children: /* @__PURE__ */ jsx("ul", { className: `${baseClass}__sublist`, children: renderItems(level + 1, children) })
+          }
+        )
+      ] }, id);
+    });
+    return /* @__PURE__ */ jsx("ul", { ...rest, ref, className: `${baseClass} ${className}`.trim(), children: renderItems(1, items) });
+  }
+);
+NavList.displayName = "NavList";
+export {
+  NavList
+};