@robr0/design-system 0.3.0 → 0.5.0

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

package/components/RadioButton/RadioButton.d.ts

@@ -13,11 +13,21 @@ type RadioButtonOwnProps = {
     onValueChange?: (value: string) => void;
     /** Additional CSS classes */
     className?: string;
-    /** @deprecated Use `onValueChange` instead. */
+    /**
+     * Legacy change handler, kept for backwards compatibility.
+     *
+     * @deprecated Use `onValueChange` instead.
+     */
     onChange?: (value: string) => void;
-    /** @deprecated Pass the native `aria-label` attribute instead. */
+    /**
+     * Legacy accessible-name prop.
+     *
+     * @deprecated Pass the native `aria-label` attribute instead.
+     */
     ariaLabel?: string;
     /**
+     * Legacy form-field name.
+     *
      * @deprecated No-op. This component renders a `<div role="radio">`, not a
      * native `<input type="radio">`, so it does not group by name or participate
      * in native form submission — `RadioGroup` handles grouping in React state.
@@ -47,7 +57,11 @@ type RadioGroupOwnProps = {
     onValueChange?: (value: string) => void;
     /** Additional CSS classes */
     className?: string;
-    /** @deprecated Use `onValueChange` instead. */
+    /**
+     * Legacy change handler, kept for backwards compatibility.
+     *
+     * @deprecated Use `onValueChange` instead.
+     */
     onChange?: (value: string) => void;
 };
 export interface RadioGroupProps extends RadioGroupOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof RadioGroupOwnProps> {

package/components/Reasoning/Reasoning.css

@@ -0,0 +1,276 @@
+/* ============================================
+   REASONING COMPONENT
+   A model's thinking, disclosed behind a
+   one-line summary. Quiet by construction: the
+   trace is secondary text on a rail, never
+   competing with the answer beside it.
+   ============================================ */
+
+.ds-reasoning {
+  /* Where an AgentStatus summary's label starts: matrix plus its gap.
+     The rail geometry and the handoff slide both derive from it. */
+  --ds-reasoning-align: calc(var(--icon-size-md) + var(--gap-sm-md));
+
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+/* ============================================
+   TRIGGER
+   ============================================ */
+
+.ds-reasoning__trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gap-sm);
+  align-self: flex-start;
+  padding: var(--padding-xxs) var(--padding-xs);
+  margin-left: calc(var(--padding-xs) * -1);
+  background: none;
+  border: none;
+  border-radius: var(--radius-sm);
+  color: var(--color-text-secondary);
+  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);
+  cursor: pointer;
+  transition: color var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-reasoning__trigger:hover {
+  color: var(--color-text-primary);
+}
+
+/* Summary-only: the same line, minus every affordance that would promise a
+   panel behind it. Not a button, so there is nothing to focus or press. */
+.ds-reasoning__trigger--static {
+  cursor: default;
+}
+
+.ds-reasoning__trigger--static:hover {
+  color: var(--color-text-secondary);
+}
+
+.ds-reasoning__trigger:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: -2px;
+}
+
+/* Closed the chevron points at the collapsed trace; open it points down the
+   way the panel expands. The glyph itself points down, so closed is the
+   rotated state — and the quarter turn to open runs clockwise, following
+   the panel as it opens. */
+.ds-reasoning__chevron {
+  --icon-size: var(--icon-size-sm);
+
+  flex: none;
+  transform: rotate(-90deg);
+  transition: transform var(--motion-duration-slow) var(--motion-ease-standard);
+}
+
+.ds-reasoning--open .ds-reasoning__chevron {
+  transform: rotate(0deg);
+}
+
+/* ============================================
+   SUMMARY
+   While the trace streams, a sweep walks the
+   summary left to right — the same gradient
+   AgentStatus uses (primary base, tertiary
+   band, same stops), so "the model is working"
+   looks the same wherever it appears.
+   ============================================ */
+
+.ds-reasoning__summary {
+  position: relative;
+  white-space: nowrap;
+}
+
+/* The live→done handoff. The departing node summary (an AgentStatus)
+   overlays the incoming text, fading out in place, while the text summary
+   slides left from where its label sat into the flush position. The
+   modifier comes off once the animation ends, so nothing stays composited. */
+.ds-reasoning__summary--entering {
+  animation: ds-reasoning-summary-in var(--motion-duration-slow) var(--motion-ease-entrance) both;
+}
+
+.ds-reasoning__summary-leaving {
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  white-space: nowrap;
+  animation: ds-reasoning-summary-out var(--motion-duration-slow) var(--motion-ease-standard) both;
+}
+
+@keyframes ds-reasoning-summary-in {
+  from {
+    opacity: 0;
+    transform: translateX(var(--ds-reasoning-align));
+  }
+}
+
+@keyframes ds-reasoning-summary-out {
+  to {
+    opacity: 0;
+  }
+}
+
+/* A node summary (an AgentStatus) owns its own appearance — the text
+   shimmer below never applies to it. Inline-flex keeps the span exactly
+   the node's height: left inline, the node sits on the text baseline and
+   the leftover descender space pushes it off the chevron's centreline. */
+.ds-reasoning__summary--node {
+  display: inline-flex;
+  align-items: center;
+}
+
+.ds-reasoning--streaming .ds-reasoning__summary:not(.ds-reasoning__summary--node) {
+  background-image: linear-gradient(
+    100deg,
+    var(--color-text-primary) 35%,
+    var(--color-text-tertiary) 50%,
+    var(--color-text-primary) 65%
+  );
+  background-size: 250% 100%;
+  background-clip: text;
+  -webkit-background-clip: text;
+  color: transparent;
+  animation: ds-reasoning-shimmer var(--motion-duration-loop-shimmer)
+    var(--motion-ease-linear) infinite;
+}
+
+@keyframes ds-reasoning-shimmer {
+  from {
+    background-position-x: 100%;
+  }
+
+  to {
+    background-position-x: 0%;
+  }
+}
+
+/* ============================================
+   PANEL
+   ============================================ */
+
+.ds-reasoning__panel {
+  display: grid;
+  grid-template-rows: 0fr;
+  visibility: hidden;
+  transition:
+    grid-template-rows var(--motion-duration-slow) var(--motion-ease-standard),
+    visibility var(--motion-duration-slow) var(--motion-ease-standard);
+}
+
+.ds-reasoning--open .ds-reasoning__panel {
+  grid-template-rows: 1fr;
+  visibility: visible;
+}
+
+.ds-reasoning__content {
+  overflow: hidden;
+  min-height: 0;
+  transition: padding-block var(--motion-duration-slow) var(--motion-ease-standard);
+  /* The rail and trace align to an AgentStatus summary's geometry: the
+     rail runs down the centre of the matrix (half an icon step, corrected
+     by half the rail's own width) and the trace text starts exactly where
+     the status label's first letter starts (matrix + its gap). A plain
+     text summary shares the same geometry, so swapping a live status for
+     the thought-for line never shifts the trace. */
+  margin-left: calc(var(--icon-size-md) / 2 - var(--border-md) / 2);
+  padding-left: calc(var(--icon-size-md) / 2 + var(--gap-sm-md) - var(--border-md) / 2);
+  border-left: var(--border-md) solid var(--color-divider);
+  color: var(--color-text-secondary);
+  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);
+}
+
+/* With the trigger's own bottom padding, the panel opens one --gap-lg
+   below the summary row — the same step a --gap-lg trace list uses
+   between nodes, so the first node isn't tighter than the rest. */
+.ds-reasoning--open .ds-reasoning__content {
+  padding-block: var(--padding-md);
+}
+
+.ds-reasoning__content > :first-child {
+  margin-top: 0;
+}
+
+.ds-reasoning__content > :last-child {
+  margin-bottom: 0;
+}
+
+/* ============================================
+   TRACE NODES
+   Inside Reasoning, a list is the trace's node
+   list: one thinking step per item, no bullets
+   (the rail is the marker), on the same
+   --gap-lg beat the panel opens with. New
+   nodes rise in as the trace builds.
+   ============================================ */
+
+.ds-reasoning__content ul,
+.ds-reasoning__content ol {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-lg);
+}
+
+.ds-reasoning__content li {
+  animation: ds-reasoning-node-in var(--motion-duration-slow) var(--motion-ease-entrance);
+}
+
+@keyframes ds-reasoning-node-in {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+}
+
+/* ============================================
+   SIZES
+   The scale pairs with ChatMessage: default
+   matches default message text, compact
+   matches compact message text.
+   ============================================ */
+
+.ds-reasoning--compact .ds-reasoning__trigger,
+.ds-reasoning--compact .ds-reasoning__content {
+  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);
+}
+
+/* Compact pairs with a compact AgentStatus: sm matrix, sm gap. */
+.ds-reasoning--compact {
+  --ds-reasoning-align: calc(var(--icon-size-sm) + var(--gap-sm));
+}
+
+.ds-reasoning--compact .ds-reasoning__content {
+  margin-left: calc(var(--icon-size-sm) / 2 - var(--border-md) / 2);
+  padding-left: calc(var(--icon-size-sm) / 2 + var(--gap-sm) - var(--border-md) / 2);
+}
+
+/* ============================================
+   REDUCED MOTION
+   ============================================ */
+
+@media (prefers-reduced-motion: reduce) {
+  .ds-reasoning--streaming .ds-reasoning__summary:not(.ds-reasoning__summary--node) {
+    background-image: none;
+    color: var(--color-text-tertiary);
+    animation: none;
+  }
+}

package/components/Reasoning/Reasoning.d.ts

@@ -0,0 +1,55 @@
+import { default as React } from 'react';
+/** Props owned by Reasoning itself — everything else falls through to the root element. */
+type ReasoningOwnProps = {
+    /** The model is still producing the trace. Opens the panel and shimmers the summary. */
+    streaming?: boolean;
+    /** Seconds spent reasoning, shown in the summary once complete. */
+    duration?: number;
+    /** Override the summary line. By default it reports the streaming state and the duration. */
+    label?: string;
+    /**
+     * Replace the summary text with custom content — typically an AgentStatus,
+     * pairing the live indicator with the trace disclosure. The node owns its
+     * own appearance and announcement, so Reasoning's shimmer and live region
+     * stand down.
+     */
+    summary?: React.ReactNode;
+    /**
+     * Render the summary line alone, with no chevron, no trigger, and no
+     * panel — for a model that reports what it is doing but produces no trace
+     * to read. A disclosure that opens onto nothing is a promise the component
+     * cannot keep, so it stops being one.
+     */
+    summaryOnly?: boolean;
+    /**
+     * Text scale, paired with ChatMessage's sizes: `default` matches default
+     * message text, `compact` matches compact message text.
+     */
+    size?: 'default' | 'compact';
+    /** Open state for controlled use. Pair with `onOpenChange`. */
+    open?: boolean;
+    /** Open state for uncontrolled use. Defaults to open while `streaming`. */
+    defaultOpen?: boolean;
+    /** Fires whenever the panel opens or closes, from a click or from the stream ending. */
+    onOpenChange?: (open: boolean) => void;
+    /** Additional CSS classes */
+    className?: string;
+    /** The reasoning trace. */
+    children?: React.ReactNode;
+};
+export interface ReasoningProps extends ReasoningOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof ReasoningOwnProps> {
+}
+/**
+ * Reasoning discloses a model's thinking without letting it dominate the
+ * response: open while the trace streams in, collapsed to a one-line summary
+ * once it finishes.
+ *
+ * The auto-collapse yields to the reader — once someone has toggled the panel
+ * themselves, the stream ending no longer closes it.
+ *
+ * Only the summary line is a live region. A trace announced token by token
+ * floods a screen reader, so the body is ordinary expandable content and the
+ * announcement covers the boundaries: thinking, then thought for so long.
+ */
+export declare const Reasoning: React.ForwardRefExoticComponent<ReasoningProps & React.RefAttributes<HTMLDivElement>>;
+export {};