@robr0/design-system 0.3.0 → 0.5.0

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
+};

package/components/PromptSuggestions/PromptSuggestions.css

@@ -0,0 +1,87 @@
+/* ============================================
+   PROMPT SUGGESTIONS COMPONENT
+   Horizontal row of tappable prompt chips.
+   Scrolls with pure-CSS edge fades by default;
+   wraps for empty-state hero placements.
+   ============================================ */
+
+.ds-prompt-suggestions {
+  display: flex;
+  gap: var(--gap-sm);
+  /* Breathing room so chip focus rings aren't clipped by the scroll box */
+  padding-block: var(--padding-xxxs);
+}
+
+/* ============================================
+   SIZE
+   The pill scale itself is Chip's — the row only
+   picks which size to ask for. What belongs here
+   is the gutter between pills, which opens up a
+   step at the larger size.
+   ============================================ */
+
+.ds-prompt-suggestions--default {
+  gap: var(--gap-sm-md);
+}
+
+.ds-prompt-suggestions--compact {
+  /* Base gap applies. */
+}
+
+/* ============================================
+   SCROLL — one line, overflow hinted by fades
+   ============================================ */
+
+/* Edge fades — scroll layout only, which is why the layout is named on the
+   element rather than inferred: content near either edge fades out, hinting
+   there is more to scroll. A CSS mask, not a scroll listener.
+   ds-allow(color): mask alpha keywords (black/transparent), not palette colours */
+.ds-prompt-suggestions--scroll {
+  overflow-x: auto;
+  -webkit-mask-image: linear-gradient(
+    to right,
+    transparent,
+    black var(--gap-lg),
+    black calc(100% - var(--gap-lg)),
+    transparent
+  );
+  mask-image: linear-gradient(
+    to right,
+    transparent,
+    black var(--gap-lg),
+    black calc(100% - var(--gap-lg)),
+    transparent
+  );
+}
+
+/* ============================================
+   WRAP — multi-line hero variant, no fades
+   ============================================ */
+
+.ds-prompt-suggestions--wrap {
+  flex-wrap: wrap;
+}
+
+/* ============================================
+   STACK — one suggestion per line
+   For narrow columns, where a wrapped row breaks
+   wherever the labels happen to run out of room
+   and the ragged right edge reads as an accident.
+   Pills still hug their labels: stretching them
+   to a shared width would make a set of prompts
+   look like a set of buttons.
+   ============================================ */
+
+.ds-prompt-suggestions--stack {
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+/* ============================================
+   ITEMS
+   ============================================ */
+
+.ds-prompt-suggestions__item {
+  display: flex;
+  flex-shrink: 0;
+}

package/components/PromptSuggestions/PromptSuggestions.d.ts

@@ -0,0 +1,51 @@
+import { default as React } from 'react';
+/** One tappable suggestion in the row. */
+export interface PromptSuggestion {
+    /** Stable identifier passed to `onValueChange`. */
+    id: string;
+    /** The suggestion text shown in the chip. */
+    label: string;
+    /** Optional leading Material Symbol name. */
+    icon?: string;
+}
+/** Props owned by PromptSuggestions itself — everything else falls through to the root element. */
+type PromptSuggestionsOwnProps = {
+    /** The suggestions to render, in order. */
+    suggestions: PromptSuggestion[];
+    /** Fires with the tapped suggestion's `id`. */
+    onValueChange?: (id: string) => void;
+    /**
+     * How the suggestions are arranged. `scroll` is one line that scrolls
+     * sideways behind edge fades. `wrap` runs them across as many lines as
+     * they need, for empty-state hero placements. `stack` gives each one its
+     * own line, for narrow columns where a wrapped row breaks unevenly and
+     * the ragged right edge reads as an accident.
+     */
+    layout?: 'scroll' | 'wrap' | 'stack';
+    /**
+     * Legacy alias for `layout="wrap"`; ignored when `layout` is set.
+     * @deprecated Use `layout` instead, which also covers `stack`.
+     */
+    wrap?: boolean;
+    /**
+     * Row scale. `default` sits at the body-paragraph scale, so a suggestion
+     * reads at the same weight as the messages it will become; `compact` is
+     * the quieter row for placements alongside a live conversation.
+     */
+    size?: 'default' | 'compact';
+    /** Accessible name for the list. */
+    ariaLabel?: string;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface PromptSuggestionsProps extends PromptSuggestionsOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof PromptSuggestionsOwnProps> {
+}
+/**
+ * PromptSuggestions is a horizontal row of tappable prompts for starting or
+ * steering a conversation. Each suggestion renders as a clickable Chip, so
+ * one component owns the pill look; the row scrolls horizontally with pure
+ * CSS edge fades — no scroll listeners, no measurement — or wraps for
+ * empty-state hero placements.
+ */
+export declare const PromptSuggestions: React.ForwardRefExoticComponent<PromptSuggestionsProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/PromptSuggestions/PromptSuggestions.js

@@ -0,0 +1,34 @@
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import { Chip } from "../Chip/Chip.js";
+import "./PromptSuggestions.css";
+const PromptSuggestions = React.forwardRef(
+  ({
+    suggestions,
+    onValueChange,
+    layout,
+    wrap = false,
+    size = "default",
+    ariaLabel = "Suggested prompts",
+    className = "",
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-prompt-suggestions";
+    const arrangement = layout ?? (wrap ? "wrap" : "scroll");
+    const chipSize = size === "compact" ? "default" : "large";
+    const classes = [baseClass, `${baseClass}--${size}`, `${baseClass}--${arrangement}`, className].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsx("div", { ...rest, ref, className: classes, role: "list", "aria-label": ariaLabel, children: suggestions.map((suggestion) => /* @__PURE__ */ jsx("div", { role: "listitem", className: `${baseClass}__item`, children: /* @__PURE__ */ jsx(
+      Chip,
+      {
+        label: suggestion.label,
+        icon: suggestion.icon,
+        size: chipSize,
+        onClick: () => onValueChange?.(suggestion.id)
+      }
+    ) }, suggestion.id)) });
+  }
+);
+PromptSuggestions.displayName = "PromptSuggestions";
+export {
+  PromptSuggestions
+};