@robr0/design-system 0.3.0 → 0.5.0

package/components/Reasoning/Reasoning.js

@@ -0,0 +1,98 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { useId, useState, useRef, useEffect, useCallback } from "react";
+import "./Reasoning.css";
+import "../../fonts/material-symbols.css";
+const Reasoning = React.forwardRef(
+  ({
+    streaming = false,
+    duration,
+    label,
+    summary,
+    summaryOnly = false,
+    size = "default",
+    open,
+    defaultOpen,
+    onOpenChange,
+    className = "",
+    children,
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-reasoning";
+    const id = useId();
+    const panelId = `${id}-panel`;
+    const triggerId = `${id}-trigger`;
+    const isControlled = open !== void 0;
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen ?? streaming);
+    const isOpen = isControlled ? open : uncontrolledOpen;
+    const [leaving, setLeaving] = useState(null);
+    const prevSummary = useRef(summary);
+    useEffect(() => {
+      if (prevSummary.current != null && summary == null) {
+        setLeaving(prevSummary.current);
+      }
+      prevSummary.current = summary;
+    }, [summary]);
+    const readerDecided = useRef(false);
+    const wasStreaming = useRef(streaming);
+    useEffect(() => {
+      if (streaming === wasStreaming.current) return;
+      wasStreaming.current = streaming;
+      if (readerDecided.current) return;
+      if (!isControlled) setUncontrolledOpen(streaming);
+      onOpenChange?.(streaming);
+    }, [streaming, isControlled, onOpenChange]);
+    const toggle = useCallback(() => {
+      readerDecided.current = true;
+      const next = !isOpen;
+      if (!isControlled) setUncontrolledOpen(next);
+      onOpenChange?.(next);
+    }, [isOpen, isControlled, onOpenChange]);
+    const summaryText = label ?? (streaming ? "Thinking" : duration !== void 0 ? `Thought for ${duration}s` : "Thought process");
+    const classes = [
+      baseClass,
+      `${baseClass}--${size}`,
+      isOpen ? `${baseClass}--open` : "",
+      streaming ? `${baseClass}--streaming` : "",
+      className
+    ].filter(Boolean).join(" ");
+    const summaryLine = /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: `${baseClass}__summary${summary ? ` ${baseClass}__summary--node` : ""}${leaving != null && summary == null ? ` ${baseClass}__summary--entering` : ""}`,
+        role: summary ? void 0 : "status",
+        onAnimationEnd: (e) => {
+          if (e.target === e.currentTarget) setLeaving(null);
+        },
+        children: [
+          leaving != null && summary == null && /* @__PURE__ */ jsx("span", { className: `${baseClass}__summary-leaving`, "aria-hidden": "true", children: leaving }),
+          summary ?? summaryText
+        ]
+      }
+    );
+    if (summaryOnly) {
+      return /* @__PURE__ */ jsx("div", { ...rest, ref, className: classes, children: /* @__PURE__ */ jsx("span", { className: `${baseClass}__trigger ${baseClass}__trigger--static`, children: summaryLine }) });
+    }
+    return /* @__PURE__ */ jsxs("div", { ...rest, ref, className: classes, children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          id: triggerId,
+          className: `${baseClass}__trigger`,
+          "aria-expanded": isOpen,
+          "aria-controls": panelId,
+          onClick: toggle,
+          children: [
+            summaryLine,
+            /* @__PURE__ */ jsx("span", { className: `${baseClass}__chevron material-symbols-rounded`, "aria-hidden": "true", children: "expand_more" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: `${baseClass}__panel`, id: panelId, role: "region", "aria-labelledby": triggerId, children: /* @__PURE__ */ jsx("div", { className: `${baseClass}__content`, children }) })
+    ] });
+  }
+);
+Reasoning.displayName = "Reasoning";
+export {
+  Reasoning
+};

package/components/SelectionCard/SelectionCard.d.ts

@@ -23,7 +23,11 @@ type SelectionCardOwnProps = {
     name?: string;
     /** Additional CSS classes */
     className?: string;
-    /** @deprecated Use `onValueChange` instead. */
+    /**
+     * Legacy change handler, kept for backwards compatibility.
+     *
+     * @deprecated Use `onValueChange` instead.
+     */
     onChange?: (value: string | string[]) => void;
 };
 export interface SelectionCardProps extends SelectionCardOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof SelectionCardOwnProps> {

package/components/Slider/Slider.d.ts

@@ -19,7 +19,11 @@ type SliderOwnProps = {
     onValueChange?: (value: number) => void;
     /** Additional CSS classes — applied to the wrapper, not the <input> */
     className?: string;
-    /** @deprecated Pass the native `aria-label` attribute instead. */
+    /**
+     * Legacy accessible-name prop.
+     *
+     * @deprecated Pass the native `aria-label` attribute instead.
+     */
     ariaLabel?: string;
 };
 export interface SliderProps extends SliderOwnProps, Omit<React.ComponentPropsWithoutRef<'input'>, keyof SliderOwnProps | 'type'> {

package/components/SourceChip/SourceChip.css

@@ -0,0 +1,102 @@
+/* ============================================
+   SOURCE CHIP COMPONENT
+   Numbered citation pill linking a claim to
+   its source. Anchor when href is set, plain
+   span otherwise.
+   ============================================ */
+
+.ds-source-chip {
+  /* Layout */
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gap-xs); /* 4px */
+
+  /* Spacing */
+  padding: var(--padding-xxxs) var(--padding-sm); /* 2px 8px */
+
+  /* Shape — borderless pill on the secondary container */
+  border-radius: var(--radius-full);
+  background-color: var(--color-bg-container-secondary);
+
+  /* Typography */
+  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);
+
+  /* The pill shape is the affordance — never an underline */
+  text-decoration: none;
+  cursor: default;
+
+  transition: background-color var(--motion-duration-fast) var(--motion-ease-standard),
+    color var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+/* ============================================
+   INDEX — citation numeral in its own circle
+   ============================================ */
+
+.ds-source-chip__index {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  min-width: var(--icon-size-sm);
+  height: var(--icon-size-sm);
+  border-radius: var(--radius-full);
+  background-color: var(--color-bg-container-tertiary);
+
+  font-family: var(--font-paragraph-sm-em-family);
+  font-size: var(--font-paragraph-sm-em-size);
+  font-weight: var(--font-paragraph-sm-em-weight);
+  letter-spacing: var(--font-paragraph-sm-em-letter-spacing);
+  line-height: 1;
+  font-variant-numeric: tabular-nums;
+  color: var(--color-text-tertiary);
+}
+
+/* ============================================
+   ICON (leading, when no index)
+   ============================================ */
+
+.ds-source-chip__icon {
+  flex-shrink: 0;
+  --icon-size: var(--icon-size-sm);
+  line-height: 1;
+  color: var(--color-icon-primary);
+}
+
+/* ============================================
+   TITLE — truncates with an ellipsis
+   ============================================ */
+
+.ds-source-chip__title {
+  max-width: 24ch;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+/* ============================================
+   LINK (rendered as <a>)
+   ============================================ */
+
+.ds-source-chip--link {
+  cursor: pointer;
+}
+
+.ds-source-chip--link:hover {
+  background-color: var(--color-bg-container-tertiary);
+  color: var(--color-text-primary);
+}
+
+/* ============================================
+   FOCUS
+   ============================================ */
+
+.ds-source-chip--link:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: 2px;
+}

package/components/SourceChip/SourceChip.d.ts

@@ -0,0 +1,32 @@
+import { default as React } from 'react';
+/** Props owned by SourceChip itself — everything else falls through to the root element. */
+type SourceChipOwnProps = {
+    /** The source name, e.g. "Design tokens quarterly". Truncates with an ellipsis when long. */
+    title: string;
+    /** Citation number, rendered as a leading numeral in its own small badge circle. */
+    index?: number;
+    /**
+     * Leading icon — a Material Symbol name (string) or custom element (ReactNode).
+     * The icon and the index share the leading slot: when both are passed, `index` wins
+     * and the icon is not rendered.
+     */
+    icon?: string | React.ReactNode;
+    /** Optional href — renders as an `<a>` instead of a `<span>`. */
+    href?: string;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface SourceChipProps extends SourceChipOwnProps, Omit<React.ComponentPropsWithoutRef<'a'>, keyof SourceChipOwnProps> {
+}
+/**
+ * SourceChip is the numbered citation pill linking a claim to its source.
+ * It renders inline after a sentence or in a sources row under an assistant
+ * chat message: a leading citation number (or icon) beside a truncating
+ * source title.
+ *
+ * Renders an `<a>` when `href` is supplied, a plain `<span>` otherwise.
+ * Forwards a ref to whichever element it renders, and spreads unrecognised
+ * props onto it — `target` and `rel` pass through as native anchor attributes.
+ */
+export declare const SourceChip: React.ForwardRefExoticComponent<SourceChipProps & React.RefAttributes<HTMLSpanElement | HTMLAnchorElement>>;
+export {};

package/components/SourceChip/SourceChip.js

@@ -0,0 +1,31 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import React from "react";
+import "./SourceChip.css";
+import "../../fonts/material-symbols.css";
+const SourceChip = React.forwardRef(
+  ({ title, index, icon, href, className = "", ...rest }, ref) => {
+    const baseClass = "ds-source-chip";
+    const classes = [baseClass, href ? `${baseClass}--link` : "", className].filter(Boolean).join(" ");
+    const leading = index !== void 0 ? /* @__PURE__ */ jsx("span", { className: `${baseClass}__index`, children: index }) : icon ? /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon`, "aria-hidden": "true", children: typeof icon === "string" ? /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", children: icon }) : icon }) : null;
+    const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+      leading,
+      /* @__PURE__ */ jsx("span", { className: `${baseClass}__title`, children: title })
+    ] });
+    if (href) {
+      return /* @__PURE__ */ jsx("a", { ...rest, ref, className: classes, href, children: content });
+    }
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ...rest,
+        ref,
+        className: classes,
+        children: content
+      }
+    );
+  }
+);
+SourceChip.displayName = "SourceChip";
+export {
+  SourceChip
+};

package/components/Stat/Stat.css

@@ -66,11 +66,11 @@
 }
 
 .ds-stat__delta--up {
-  color: var(--color-status-positive-text);
+  color: var(--color-core-accent-mint);
 }
 
 .ds-stat__delta--down {
-  color: var(--color-status-error-text);
+  color: var(--color-core-accent-coral);
 }
 
 .ds-stat__delta--neutral {

package/components/Textarea/Textarea.d.ts

@@ -23,7 +23,11 @@ type TextareaOwnProps = {
     onValueChange?: (value: string) => void;
     /** Additional CSS classes — applied to the wrapper, not the <textarea> */
     className?: string;
-    /** @deprecated Pass the native `aria-label` attribute instead. */
+    /**
+     * Legacy accessible-name prop.
+     *
+     * @deprecated Pass the native `aria-label` attribute instead.
+     */
     ariaLabel?: string;
 };
 export interface TextareaProps extends TextareaOwnProps, Omit<React.ComponentPropsWithoutRef<'textarea'>, keyof TextareaOwnProps> {

package/components/Timeline/Timeline.d.ts

@@ -35,6 +35,7 @@ export interface TimelineCompany {
 }
 /** Default variant — a flat sequence of steps/events with dot, badge, or icon markers. */
 export interface TimelineDefaultProps {
+    /** Selects the flat step/event layout — the default when omitted */
     variant?: 'default';
     /** Ordered list of steps/events */
     items: TimelineItem[];
@@ -47,6 +48,7 @@ export interface TimelineDefaultProps {
 }
 /** Company variant — grouped roles under a logo, for résumé/pipeline histories. */
 export interface TimelineCompanyProps {
+    /** Selects the grouped layout: roles nested under a company logo */
     variant: 'company';
     /** Ordered list of company/tool entries */
     items: TimelineCompany[];

package/components/ToggleGroup/ToggleGroup.d.ts

@@ -23,9 +23,17 @@ type ToggleGroupOwnProps = {
     onValueChange?: (value: string | 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 | string[]) => void;
-    /** @deprecated Pass the native `aria-label` attribute instead. */
+    /**
+     * Legacy accessible-name prop.
+     *
+     * @deprecated Pass the native `aria-label` attribute instead.
+     */
     ariaLabel?: string;
 };
 export interface ToggleGroupProps extends ToggleGroupOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof ToggleGroupOwnProps> {

package/components/ToggleSwitch/ToggleSwitch.d.ts

@@ -13,9 +13,17 @@ type ToggleSwitchOwnProps = {
     onCheckedChange?: (checked: boolean) => void;
     /** Additional CSS classes */
     className?: string;
-    /** @deprecated Use `onCheckedChange` instead. */
+    /**
+     * Legacy change handler, kept for backwards compatibility.
+     *
+     * @deprecated Use `onCheckedChange` instead.
+     */
     onChange?: (checked: boolean) => void;
-    /** @deprecated Pass the native `aria-label` attribute instead. */
+    /**
+     * Legacy accessible-name prop.
+     *
+     * @deprecated Pass the native `aria-label` attribute instead.
+     */
     ariaLabel?: string;
 };
 export interface ToggleSwitchProps extends ToggleSwitchOwnProps, Omit<React.ComponentPropsWithoutRef<'button'>, keyof ToggleSwitchOwnProps | 'type'> {

package/components/ToolCall/ToolCall.css

@@ -0,0 +1,213 @@
+/* ============================================
+   TOOL CALL COMPONENT
+   One tool invocation: a skimmable header row
+   and, behind a disclosure, the arguments and
+   the result.
+
+   The container stays neutral — colour lives in
+   the indicator and the status word, so a long
+   run of calls reads as a list rather than a
+   wall of tinted cards. The two states a person
+   has to act on, pending and error, also take a
+   coloured border.
+   ============================================ */
+
+.ds-tool-call {
+  --ds-tool-call-color: var(--color-text-secondary);
+  --ds-tool-call-border: var(--color-bg-container-border);
+
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  background-color: var(--color-bg-container-primary);
+  border: var(--border-xs) solid var(--ds-tool-call-border);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+}
+
+/* ============================================
+   HEADER
+   ============================================ */
+
+.ds-tool-call__header {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-sm);
+  width: 100%;
+  padding: var(--padding-xs) var(--padding-sm-md);
+  background: none;
+  border: none;
+  text-align: left;
+  cursor: pointer;
+  transition: background-color var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-tool-call__header:hover {
+  background-color: var(--color-bg-container-secondary);
+}
+
+.ds-tool-call__header:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: -2px;
+}
+
+/* No panel to open — the row is a plain div and must not look pressable */
+.ds-tool-call__header--static {
+  cursor: default;
+}
+
+.ds-tool-call__header--static:hover {
+  background-color: transparent;
+}
+
+.ds-tool-call__indicator {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  color: var(--ds-tool-call-color);
+}
+
+.ds-tool-call__indicator .material-symbols-rounded {
+  --icon-size: var(--icon-size-sm);
+}
+
+/* The tool name is an identifier, so it takes the code stack —
+   the one place the system leaves Nunito Sans */
+.ds-tool-call__name {
+  flex: none;
+  font-family: var(--font-family-code);
+  font-size: var(--font-paragraph-sm-size);
+  line-height: var(--font-paragraph-sm-line-height);
+  color: var(--color-text-primary);
+}
+
+.ds-tool-call__summary {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--color-text-tertiary);
+  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-tool-call__status {
+  flex: none;
+  margin-left: auto;
+  color: var(--ds-tool-call-color);
+  font-family: var(--font-paragraph-sm-em-family);
+  font-size: var(--font-paragraph-sm-em-size);
+  font-weight: var(--font-paragraph-sm-em-weight);
+  line-height: var(--font-paragraph-sm-em-line-height);
+  letter-spacing: var(--font-paragraph-sm-em-letter-spacing);
+  white-space: nowrap;
+}
+
+/* A summary already claims the free space; without one the status still
+   needs pushing to the right, which the auto margin above handles */
+.ds-tool-call__summary ~ .ds-tool-call__status {
+  margin-left: 0;
+}
+
+.ds-tool-call__duration {
+  flex: none;
+  color: var(--color-text-tertiary);
+  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);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.ds-tool-call__chevron {
+  --icon-size: var(--icon-size-sm);
+
+  flex: none;
+  color: var(--color-icon-secondary);
+  transition: transform var(--motion-duration-slow) var(--motion-ease-standard);
+}
+
+.ds-tool-call--open .ds-tool-call__chevron {
+  transform: rotate(180deg);
+}
+
+/* ============================================
+   STATUSES
+   ============================================ */
+
+.ds-tool-call--pending {
+  --ds-tool-call-color: var(--color-status-warning-text);
+  --ds-tool-call-border: var(--color-status-warning-border);
+}
+
+.ds-tool-call--running {
+  --ds-tool-call-color: var(--color-status-info-text);
+}
+
+.ds-tool-call--success {
+  --ds-tool-call-color: var(--color-status-positive-text);
+}
+
+.ds-tool-call--error {
+  --ds-tool-call-color: var(--color-status-error-text);
+  --ds-tool-call-border: var(--color-status-error-border);
+}
+
+/* ============================================
+   PANEL
+   ============================================ */
+
+.ds-tool-call__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-tool-call--open .ds-tool-call__panel {
+  grid-template-rows: 1fr;
+  visibility: visible;
+}
+
+.ds-tool-call__content {
+  overflow: hidden;
+  min-height: 0;
+}
+
+.ds-tool-call--open .ds-tool-call__content {
+  padding: var(--padding-sm-md);
+  border-top: var(--border-xs) solid var(--color-divider);
+}
+
+.ds-tool-call__content > :first-child {
+  margin-top: 0;
+}
+
+.ds-tool-call__content > :last-child {
+  margin-bottom: 0;
+}
+
+/* ============================================
+   ACTIONS
+   Outside the panel, so a call awaiting approval
+   can be answered without expanding it first.
+   ============================================ */
+
+.ds-tool-call__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/ToolCall/ToolCall.d.ts

@@ -0,0 +1,43 @@
+import { default as React } from 'react';
+export type ToolCallStatus = 'pending' | 'running' | 'success' | 'error';
+/** Props owned by ToolCall itself — everything else falls through to the root element. */
+type ToolCallOwnProps = {
+    /** The tool that was invoked, shown in monospace. */
+    name: string;
+    /** Where the call has got to. Drives the colour, the indicator, and the default status text. */
+    status?: ToolCallStatus;
+    /** One line describing this particular call, e.g. the target path or query. */
+    summary?: string;
+    /** How long the call took, e.g. "1.2s". Free text, so callers keep their own formatting. */
+    duration?: string;
+    /** Override the status text shown beside the indicator. */
+    statusLabel?: string;
+    /** Open state for controlled use. Pair with `onOpenChange`. */
+    open?: boolean;
+    /** Open state for uncontrolled use. */
+    defaultOpen?: boolean;
+    /** Fires whenever the panel opens or closes. */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Controls for a call awaiting a decision — allow, deny, always allow.
+     * Rendered outside the collapsible panel, so approving never requires
+     * expanding the call first.
+     */
+    actions?: React.ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+    /** The call's arguments and result. */
+    children?: React.ReactNode;
+};
+export interface ToolCallProps extends ToolCallOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof ToolCallOwnProps> {
+}
+/**
+ * ToolCall is the record of one tool invocation: what ran, how it went, how
+ * long it took, and — behind a disclosure — the arguments it was given and
+ * what it returned.
+ *
+ * A run is mostly a list of these, so the collapsed header carries everything
+ * needed to skim it and the body holds everything needed to audit it.
+ */
+export declare const ToolCall: React.ForwardRefExoticComponent<ToolCallProps & React.RefAttributes<HTMLDivElement>>;
+export {};