@robr0/design-system 0.4.0 → 0.5.0

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

package/components/Prose/Prose.css

@@ -0,0 +1,252 @@
+/* ============================================
+   PROSE COMPONENT
+   Token-styled typography for rendered markdown
+   ============================================ */
+
+.ds-prose {
+  font-family: var(--font-paragraph-family);
+  font-size: var(--font-paragraph-size);
+  font-weight: var(--font-paragraph-weight);
+  line-height: var(--font-paragraph-line-height);
+  letter-spacing: var(--font-paragraph-letter-spacing);
+  color: var(--color-text-primary);
+}
+
+/* Block rhythm — every block owns its bottom margin; the edges are
+   trimmed so Prose slots into bubbles and cards cleanly */
+.ds-prose p,
+.ds-prose ul,
+.ds-prose ol,
+.ds-prose pre,
+.ds-prose blockquote,
+.ds-prose table,
+.ds-prose hr,
+.ds-prose img {
+  margin: 0;
+  margin-block-end: var(--gap-md);
+}
+
+.ds-prose > :first-child {
+  margin-block-start: 0;
+}
+
+.ds-prose > :last-child {
+  margin-block-end: 0;
+}
+
+/* ============================================
+   PARAGRAPHS
+   ============================================ */
+
+.ds-prose p {
+  font-family: var(--font-paragraph-family);
+  font-size: var(--font-paragraph-size);
+  font-weight: var(--font-paragraph-weight);
+  line-height: var(--font-paragraph-line-height);
+  letter-spacing: var(--font-paragraph-letter-spacing);
+  color: var(--color-text-primary);
+}
+
+/* ============================================
+   HEADINGS
+   Hierarchy carried by the token scale; the
+   weight contrast is encoded in the tokens
+   ============================================ */
+
+.ds-prose h1,
+.ds-prose h2,
+.ds-prose h3,
+.ds-prose h4 {
+  margin: 0;
+  margin-block-start: var(--gap-lg);
+  margin-block-end: var(--gap-sm-md);
+  color: var(--color-text-primary);
+}
+
+.ds-prose h1 {
+  font-family: var(--font-heading-1-family);
+  font-size: var(--font-heading-1-size);
+  font-weight: var(--font-heading-1-weight);
+  line-height: var(--font-heading-1-line-height);
+  letter-spacing: var(--font-heading-1-letter-spacing);
+}
+
+.ds-prose h2 {
+  font-family: var(--font-heading-2-family);
+  font-size: var(--font-heading-2-size);
+  font-weight: var(--font-heading-2-weight);
+  line-height: var(--font-heading-2-line-height);
+  letter-spacing: var(--font-heading-2-letter-spacing);
+}
+
+.ds-prose h3 {
+  font-family: var(--font-heading-3-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);
+}
+
+.ds-prose h4 {
+  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);
+}
+
+/* ============================================
+   LISTS
+   ============================================ */
+
+.ds-prose ul,
+.ds-prose ol {
+  padding-inline-start: var(--padding-md);
+}
+
+.ds-prose li {
+  font-family: var(--font-paragraph-family);
+  font-size: var(--font-paragraph-size);
+  font-weight: var(--font-paragraph-weight);
+  line-height: var(--font-paragraph-line-height);
+  letter-spacing: var(--font-paragraph-letter-spacing);
+  color: var(--color-text-primary);
+}
+
+.ds-prose li + li {
+  margin-block-start: var(--gap-xs);
+}
+
+/* Nested lists sit tight under their parent item */
+.ds-prose li > ul,
+.ds-prose li > ol {
+  margin-block-start: var(--gap-xs);
+  margin-block-end: 0;
+}
+
+/* ============================================
+   INLINE ELEMENTS
+   ============================================ */
+
+.ds-prose a {
+  color: var(--color-action-primary-text-tertiary);
+  text-decoration: underline;
+}
+
+.ds-prose strong {
+  font-weight: var(--font-paragraph-em-weight);
+}
+
+.ds-prose em {
+  font-style: italic;
+}
+
+.ds-prose code {
+  font-family: var(--font-family-code);
+  font-size: var(--font-paragraph-sm-size);
+  background-color: var(--color-bg-container-secondary);
+  border-radius: var(--radius-xxs);
+  padding-inline: var(--padding-xxxs);
+}
+
+/* ============================================
+   CODE BLOCKS
+   The plain fallback — CodeBlock is the richer
+   choice for standalone code
+   ============================================ */
+
+.ds-prose pre {
+  font-family: var(--font-family-code);
+  font-size: var(--font-paragraph-sm-size);
+  line-height: var(--font-paragraph-sm-line-height);
+  background-color: var(--color-bg-container-primary);
+  border: var(--border-xs) solid var(--color-bg-container-border);
+  border-radius: var(--radius-md);
+  padding: var(--padding-md);
+  overflow-x: auto;
+}
+
+.ds-prose pre code {
+  background-color: transparent;
+  border-radius: 0;
+  padding-inline: 0;
+  font-size: inherit;
+}
+
+/* ============================================
+   BLOCKQUOTES
+   Mirrors Reasoning's trace rail
+   ============================================ */
+
+.ds-prose blockquote {
+  border-inline-start: var(--border-md) solid var(--color-divider);
+  padding-inline-start: var(--padding-md);
+  color: var(--color-text-secondary);
+}
+
+.ds-prose blockquote p {
+  color: var(--color-text-secondary);
+}
+
+/* ============================================
+   TABLES
+   ============================================ */
+
+.ds-prose table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.ds-prose th {
+  font-family: var(--font-title-body-family);
+  font-size: var(--font-paragraph-sm-size);
+  font-weight: var(--font-title-body-weight);
+  line-height: var(--font-paragraph-sm-line-height);
+  letter-spacing: var(--font-title-body-letter-spacing);
+  background-color: var(--color-bg-container-secondary);
+  text-align: start;
+}
+
+.ds-prose th,
+.ds-prose td {
+  padding: var(--padding-xs) var(--padding-sm-md);
+  border-block-end: var(--border-xs) solid var(--color-divider);
+}
+
+/* ============================================
+   RULES AND MEDIA
+   ============================================ */
+
+.ds-prose hr {
+  border: none;
+  border-block-start: var(--border-xs) solid var(--color-divider);
+}
+
+.ds-prose img {
+  max-width: 100%;
+  border-radius: var(--radius-md);
+}
+
+/* ============================================
+   SMALL SIZE
+   Dense chat contexts — body scale drops to the
+   small paragraph tokens; headings keep their tiers
+   ============================================ */
+
+.ds-prose--sm,
+.ds-prose--sm p,
+.ds-prose--sm li {
+  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);
+}
+
+.ds-prose--sm strong {
+  font-weight: var(--font-paragraph-sm-em-weight);
+}
+
+.ds-prose--sm code {
+  font-size: var(--font-paragraph-sm-size);
+}

package/components/Prose/Prose.d.ts

@@ -0,0 +1,21 @@
+import { default as React } from 'react';
+/** Props owned by Prose itself — everything else falls through to the root element. */
+type ProseOwnProps = {
+    /** Body scale. `sm` maps paragraphs, lists and code to the small paragraph tokens for dense chat contexts. */
+    size?: 'default' | 'sm';
+    /** Additional CSS classes */
+    className?: string;
+    /** The rendered markup to style — the output of whatever markdown renderer the consumer uses. */
+    children?: React.ReactNode;
+};
+export interface ProseProps extends ProseOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof ProseOwnProps> {
+}
+/**
+ * Prose is the typography kit for rendered markdown and rich agent output.
+ * The package ships no markdown renderer: consumers render markdown with
+ * whatever library they already use and wrap the result in Prose, which
+ * styles the descendant elements — headings, paragraphs, lists, links,
+ * code, quotes, tables — with the token scale.
+ */
+export declare const Prose: React.ForwardRefExoticComponent<ProseProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/Prose/Prose.js

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import "./Prose.css";
+const Prose = React.forwardRef(
+  ({ size = "default", className = "", children, ...rest }, ref) => {
+    const baseClass = "ds-prose";
+    const classes = [baseClass, size === "sm" ? `${baseClass}--sm` : "", className].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsx("div", { ...rest, ref, className: classes, children });
+  }
+);
+Prose.displayName = "Prose";
+export {
+  Prose
+};