@robr0/design-system 0.4.0 → 0.5.0

package/components/ChatThread/ChatThread.js

@@ -0,0 +1,174 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React, { useRef, useEffect, useState, useLayoutEffect } from "react";
+import "./ChatThread.css";
+import "../../fonts/material-symbols.css";
+const SCROLLBAR_SETTLE_MS = 600;
+const JUMP_THRESHOLD_PX = 24;
+const ChatThread = React.forwardRef(
+  ({
+    anchor = true,
+    ariaLabel = "Conversation",
+    jumpLabel = "Scroll to the latest message",
+    className = "",
+    children,
+    onScroll,
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-chat-thread";
+    const scrollRef = useRef(null);
+    const contentRef = useRef(null);
+    const spacerRef = useRef(null);
+    const prevCount = useRef(0);
+    const mounted = useRef(false);
+    const anchorTop = useRef(null);
+    const sizeSpacer = () => {
+      const container = scrollRef.current;
+      const content = contentRef.current;
+      const spacer = spacerRef.current;
+      const top = anchorTop.current;
+      if (!container || !content || !spacer || top == null) return;
+      const needed = Math.max(0, top + container.clientHeight - content.offsetHeight);
+      if (Math.abs(needed - spacer.offsetHeight) > 1) spacer.style.height = `${needed}px`;
+    };
+    useEffect(() => {
+      const container = scrollRef.current;
+      const content = contentRef.current;
+      if (!container || !content) return;
+      const syncGutter = () => {
+        const gutter = container.offsetWidth - container.clientWidth;
+        container.style.setProperty("--ds-chat-thread-gutter", `${gutter}px`);
+      };
+      const observer = new ResizeObserver(() => {
+        syncGutter();
+        const top = anchorTop.current;
+        const wasClamped = top != null && container.scrollTop < top && container.scrollTop >= container.scrollHeight - container.clientHeight - 1;
+        sizeSpacer();
+        if (top != null && wasClamped) container.scrollTo({ top, behavior: "instant" });
+        updateJump();
+      });
+      observer.observe(container);
+      observer.observe(content);
+      return () => observer.disconnect();
+    }, []);
+    const [scrolling, setScrolling] = useState(false);
+    const settleTimer = useRef(void 0);
+    const [canScrollDown, setCanScrollDown] = useState(false);
+    const updateJump = () => {
+      const container = scrollRef.current;
+      const content = contentRef.current;
+      if (!container || !content) return;
+      const remaining = content.offsetHeight - container.scrollTop - container.clientHeight;
+      const next = remaining > JUMP_THRESHOLD_PX;
+      setCanScrollDown((prev) => prev === next ? prev : next);
+    };
+    const setRef = (node) => {
+      scrollRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    };
+    useLayoutEffect(() => {
+      const container = scrollRef.current;
+      const content = contentRef.current;
+      const spacer = spacerRef.current;
+      if (!container || !content || !spacer) return;
+      const childCount = content.children.length;
+      const previous = prevCount.current;
+      const isFirstRun = !mounted.current;
+      mounted.current = true;
+      if (childCount === previous) return;
+      prevCount.current = childCount;
+      if (childCount < previous) {
+        anchorTop.current = null;
+        spacer.style.height = "0px";
+        container.scrollTo({ top: 0 });
+        return;
+      }
+      if (isFirstRun) {
+        if (childCount > 0 && anchor) {
+          const target2 = Math.max(0, content.offsetHeight - container.clientHeight);
+          anchorTop.current = target2;
+          sizeSpacer();
+          container.scrollTo({ top: target2, behavior: "instant" });
+          updateJump();
+        }
+        return;
+      }
+      if (!anchor) return;
+      const contentStyle = getComputedStyle(content);
+      const paddingTop = parseFloat(contentStyle.paddingTop) || 0;
+      if (previous === 0) {
+        const target2 = content.children[0];
+        if (!target2) return;
+        anchorTop.current = 0;
+        sizeSpacer();
+        const paddingBottom = parseFloat(contentStyle.paddingBottom) || 0;
+        const rise = Math.max(
+          0,
+          container.clientHeight - target2.offsetHeight - paddingTop - paddingBottom
+        );
+        content.style.transition = "none";
+        content.style.transform = `translateY(${rise}px)`;
+        void content.offsetHeight;
+        content.style.transition = "";
+        content.style.transform = "";
+        return;
+      }
+      const target = content.children[previous];
+      if (!target) return;
+      const targetTop = target.offsetTop - paddingTop;
+      anchorTop.current = targetTop;
+      sizeSpacer();
+      container.scrollTo({ top: targetTop });
+    });
+    useEffect(updateJump);
+    const handleScroll = (e) => {
+      onScroll?.(e);
+      updateJump();
+      setScrolling(true);
+      window.clearTimeout(settleTimer.current);
+      settleTimer.current = window.setTimeout(
+        () => setScrolling(false),
+        SCROLLBAR_SETTLE_MS
+      );
+    };
+    const jumpToBottom = () => {
+      const container = scrollRef.current;
+      const content = contentRef.current;
+      if (!container || !content) return;
+      container.scrollTo({ top: content.offsetHeight - container.clientHeight });
+    };
+    useEffect(() => () => window.clearTimeout(settleTimer.current), []);
+    const classes = [baseClass, scrolling ? `${baseClass}--scrolling` : "", className].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...rest,
+        ref: setRef,
+        className: classes,
+        role: "region",
+        "aria-label": ariaLabel,
+        tabIndex: 0,
+        onScroll: handleScroll,
+        children: [
+          /* @__PURE__ */ jsx("div", { ref: contentRef, className: `${baseClass}__content`, children }),
+          /* @__PURE__ */ jsx("div", { ref: spacerRef, className: `${baseClass}__spacer`, "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx("div", { className: `${baseClass}__jump-slot`, "aria-hidden": !canScrollDown, children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: `${baseClass}__jump${canScrollDown ? ` ${baseClass}__jump--visible` : ""}`,
+              tabIndex: canScrollDown ? 0 : -1,
+              "aria-label": jumpLabel,
+              onClick: jumpToBottom,
+              children: /* @__PURE__ */ jsx("span", { className: `${baseClass}__jump-icon material-symbols-rounded`, "aria-hidden": "true", children: "arrow_downward" })
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
+ChatThread.displayName = "ChatThread";
+export {
+  ChatThread
+};

package/components/Chip/Chip.css

@@ -32,6 +32,33 @@
     color var(--motion-duration-base) var(--motion-ease-standard), opacity var(--motion-duration-base) var(--motion-ease-standard);
 }
 
+/* ============================================
+   SIZE — LARGE (40px tall)
+   The default Button's footprint and the body
+   paragraph scale, so a chip used as a primary
+   tap target reads at the same weight as the
+   text around it.
+   ============================================ */
+
+.ds-chip--large {
+  padding: var(--padding-sm) var(--padding-lg); /* 8px 20px */
+  font-family: var(--font-paragraph-em-family);
+  font-size: var(--font-paragraph-em-size);
+  font-weight: var(--font-paragraph-em-weight);
+  line-height: var(--font-paragraph-em-line-height);
+  letter-spacing: var(--font-paragraph-em-letter-spacing);
+}
+
+.ds-chip--large .ds-chip__icon,
+.ds-chip--large .ds-chip__remove .material-symbols-rounded {
+  --icon-size: var(--icon-size-md);
+}
+
+.ds-chip--large .ds-chip__icon svg {
+  width: 24px;
+  height: 24px;
+}
+
 /* ============================================
    SIZE — COMPACT (24px tall)
    ============================================ */

package/components/Chip/Chip.d.ts

@@ -8,8 +8,8 @@ export interface ChipProps {
     selected?: boolean;
     /** Disabled state */
     disabled?: boolean;
-    /** Chip size */
-    size?: 'default' | 'compact';
+    /** Chip size — `large` matches the default Button and paragraph body scale, for pills that are a primary tap target rather than metadata */
+    size?: 'large' | 'default' | 'compact';
     /** Click handler — presence makes the chip an interactive <button> */
     onClick?: () => void;
     /** Remove handler — renders a trailing close button (input-style chips) */

package/components/CircularButton/CircularButton.d.ts

@@ -1,4 +1,6 @@
-export interface CircularButtonProps {
+import { default as React } from 'react';
+/** Props owned by CircularButton itself — everything else falls through to the DOM node. */
+type CircularButtonOwnProps = {
     /** Material Symbol icon name */
     icon: string;
     /** Visual treatment */
@@ -9,7 +11,18 @@ export interface CircularButtonProps {
      * @deprecated Use `variant` instead.
      */
     priority?: 'primary' | 'secondary' | 'tertiary';
-    /** Button state */
+    /** Whether the button is disabled */
+    disabled?: boolean;
+    /**
+     * Documentation-only interaction state.
+     *
+     * @deprecated Use `disabled` for the disabled state.
+     *
+     * Documentation-only affordance for rendering a *static* interaction state in
+     * Storybook and the showcase site. Real hover/active styling comes from CSS
+     * pseudo-classes and needs no prop — for docs, prefer
+     * `className="ds-circular-button--hover"`.
+     */
     state?: 'default' | 'hover' | 'active' | 'disabled';
     /** Button size */
     size?: 'default' | 'compact';
@@ -19,24 +32,26 @@ export interface CircularButtonProps {
      * the disabled state) and sets `aria-busy` on the rendered element.
      */
     loading?: boolean;
-    /** Accessible label */
+    /** Accessible label — required, because the button has no visible text */
     ariaLabel: string;
-    /** Optional click handler */
-    onClick?: () => void;
     /** Optional href — renders as <a> instead of <button> */
     href?: string;
     /** Optional target attribute for links */
     target?: string;
     /** Optional rel attribute for links */
     rel?: string;
-    /** Id of an element describing this button — set automatically by Tooltip */
-    'aria-describedby'?: string;
     /** Additional CSS classes */
     className?: string;
+};
+export interface CircularButtonProps extends CircularButtonOwnProps, Omit<React.ComponentPropsWithoutRef<'button'>, keyof CircularButtonOwnProps | 'type'> {
 }
 /**
  * Circular icon button component.
  * A round button containing a single icon, available in
  * primary, secondary and tertiary variants with default and compact sizes.
+ *
+ * Renders a `<button>`, or an `<a>` when `href` is supplied. Forwards a ref to
+ * whichever element it renders, and spreads unrecognised props onto it.
  */
-export declare const CircularButton: ({ icon, variant, priority, state, size, loading, ariaLabel, onClick, href, target, rel, "aria-describedby": ariaDescribedby, className, }: CircularButtonProps) => import("react").JSX.Element;
+export declare const CircularButton: React.ForwardRefExoticComponent<CircularButtonProps & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
+export {};

package/components/CircularButton/CircularButton.js

@@ -1,67 +1,69 @@
 import { jsx } from "react/jsx-runtime";
+import React from "react";
 import { Spinner } from "../Spinner/Spinner.js";
 import "./CircularButton.css";
 import "../../fonts/material-symbols.css";
-const CircularButton = ({
-  icon,
-  variant,
-  priority,
-  state = "default",
-  size = "default",
-  loading,
-  ariaLabel,
-  onClick,
-  href,
-  target,
-  rel,
-  "aria-describedby": ariaDescribedby,
-  className = ""
-}) => {
-  const baseClass = "ds-circular-button";
-  const resolvedVariant = variant ?? priority ?? "primary";
-  const variantClass = `${baseClass}--${resolvedVariant}`;
-  const stateClass = `${baseClass}--${state}`;
-  const sizeClass = `${baseClass}--${size}`;
-  const isLoading = Boolean(loading);
-  const classes = [
-    baseClass,
-    variantClass,
-    stateClass,
-    sizeClass,
-    isLoading && `${baseClass}--loading`,
-    className
-  ].filter(Boolean).join(" ");
-  const isDisabled = state === "disabled";
-  const children = isLoading ? /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon`, "aria-hidden": "true", children: /* @__PURE__ */ jsx(Spinner, { size: size === "compact" ? "sm" : "md", variant: "inherit" }) }) : /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon material-symbols-rounded`, "aria-hidden": "true", children: icon });
-  if (href && !isDisabled && !isLoading) {
+const CircularButton = React.forwardRef(
+  ({
+    icon,
+    variant,
+    priority,
+    disabled,
+    state,
+    size = "default",
+    loading,
+    ariaLabel,
+    href,
+    target,
+    rel,
+    className = "",
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-circular-button";
+    const resolvedVariant = variant ?? priority ?? "primary";
+    const isDisabled = disabled ?? state === "disabled";
+    const resolvedState = state ?? (isDisabled ? "disabled" : "default");
+    const isLoading = Boolean(loading);
+    const classes = [
+      baseClass,
+      `${baseClass}--${resolvedVariant}`,
+      `${baseClass}--${resolvedState}`,
+      `${baseClass}--${size}`,
+      isLoading && `${baseClass}--loading`,
+      className
+    ].filter(Boolean).join(" ");
+    const children = isLoading ? /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon`, "aria-hidden": "true", children: /* @__PURE__ */ jsx(Spinner, { size: size === "compact" ? "sm" : "md", variant: "inherit" }) }) : /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon material-symbols-rounded`, "aria-hidden": "true", children: icon });
+    if (href && !isDisabled && !isLoading) {
+      return /* @__PURE__ */ jsx(
+        "a",
+        {
+          ...rest,
+          ref,
+          className: classes,
+          href,
+          target,
+          rel,
+          "aria-label": ariaLabel,
+          children
+        }
+      );
+    }
     return /* @__PURE__ */ jsx(
-      "a",
+      "button",
       {
+        ...rest,
+        ref,
+        type: "button",
         className: classes,
-        href,
-        target,
-        rel,
-        onClick,
+        disabled: isDisabled || isLoading,
+        "aria-busy": isLoading || void 0,
         "aria-label": ariaLabel,
-        "aria-describedby": ariaDescribedby,
         children
       }
     );
   }
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      type: "button",
-      className: classes,
-      onClick,
-      disabled: isDisabled || isLoading,
-      "aria-busy": isLoading || void 0,
-      "aria-label": ariaLabel,
-      "aria-describedby": ariaDescribedby,
-      children
-    }
-  );
-};
+);
+CircularButton.displayName = "CircularButton";
 export {
   CircularButton
 };

package/components/CodeBlock/CodeBlock.css

@@ -80,7 +80,7 @@
 }
 
 .ds-code-block__filename {
-  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
+  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-secondary);
@@ -172,7 +172,7 @@
 }
 
 .ds-code-block__code {
-  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
+  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);

package/components/Composer/Composer.css

@@ -0,0 +1,164 @@
+/* ============================================
+   COMPOSER COMPONENT
+   The chat input shell: attachments, auto-growing textarea, send/stop
+   ============================================ */
+
+.ds-composer {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  /* The send button's diameter — CircularButton's default size, which is
+     a raw value in CircularButton.css too (icon-button sizes are not on
+     a token scale). Everything concentric derives from it. */
+  --ds-composer-send-size: 40px;
+  background-color: var(--color-input-bg-primary);
+  border: var(--border-xs) solid var(--color-input-border-primary);
+  /* Corner concentric with the send button it wraps: half the button,
+     plus the action bar's padding-sm ring, plus the border width
+     (border-radius applies to the border's outer edge). */
+  border-radius: calc(
+    var(--ds-composer-send-size) / 2 + var(--padding-sm) + var(--border-xs)
+  );
+  box-shadow: var(--shadow-floating);
+  transition: border-color var(--motion-duration-fast) var(--motion-ease-standard);
+  /* The whole shell is the input affordance — clicking anywhere that is
+     not a control focuses the textarea, and the cursor says so. The
+     action bar below opts back out. */
+  cursor: text;
+}
+
+/* The shell carries the input focus/hover treatment — the textarea inside
+   is borderless, so the whole surface reads as one control */
+.ds-composer:hover:not(:focus-within) {
+  border-color: var(--color-input-border-hover);
+}
+
+.ds-composer:focus-within {
+  border-color: var(--color-input-border-selected);
+}
+
+/* ============================================
+   ATTACHMENTS ROW
+   ============================================ */
+
+.ds-composer__attachments {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: var(--gap-xs);
+  /* Top ring only — the text zone below keeps its own full padding-md,
+     so chips sit a clear padding-md above the first text line */
+  padding: var(--padding-md) var(--padding-lg) 0;
+}
+
+/* ============================================
+   CONTENT ZONE
+   The text zone breathes more than the action bar: generous top and
+   inline padding, tighter toward the bar below it.
+   ============================================ */
+
+.ds-composer__content {
+  display: flex;
+  width: 100%;
+  padding: var(--padding-md) var(--padding-lg) var(--padding-sm);
+}
+
+.ds-composer__textarea {
+  width: 100%;
+  padding: 0;
+  border: none;
+  outline: none;
+  background-color: transparent;
+  resize: none;
+  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-input-text-primary);
+  /* Growth cap: the shell owns the block padding, so the cap is rows × line-height.
+     --ds-composer-max-rows is set inline from the maxRows prop. */
+  max-height: calc(var(--ds-composer-max-rows, 8) * var(--font-paragraph-line-height));
+  overflow-y: auto;
+}
+
+.ds-composer__textarea::placeholder {
+  color: var(--color-input-text-placeholder);
+}
+
+/* Overflow scrollbar — thin, trackless, and quiet instead of the bulky
+   platform default. scrollbar-* covers Firefox and modern Chromium;
+   the -webkit rules cover Safari. */
+.ds-composer__textarea {
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-bg-container-secondary) transparent;
+}
+
+.ds-composer__textarea::-webkit-scrollbar {
+  width: 6px;
+}
+
+.ds-composer__textarea::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.ds-composer__textarea::-webkit-scrollbar-thumb {
+  background-color: var(--color-bg-container-secondary);
+  border-radius: var(--radius-full);
+}
+
+/* Native auto-grow where supported; the JS measurement path stands down
+   (it checks the same capability) */
+@supports (field-sizing: content) {
+  .ds-composer__textarea {
+    field-sizing: content;
+  }
+}
+
+/* ============================================
+   FOOTER ROW
+   ============================================ */
+
+.ds-composer__footer {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-xs);
+  /* The tight uniform ring the concentric corner is computed from */
+  padding: var(--padding-sm);
+  /* Empty bar space still focuses the textarea on click, but the bar is
+     control territory, so it keeps the default cursor. */
+  cursor: default;
+}
+
+.ds-composer__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-xs);
+}
+
+.ds-composer__trailing {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-xs);
+  margin-left: auto;
+}
+
+/* ============================================
+   DISABLED
+   ============================================ */
+
+.ds-composer--disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+  background-color: var(--color-input-bg-disabled);
+}
+
+.ds-composer--disabled:hover:not(:focus-within),
+.ds-composer--disabled:focus-within {
+  border-color: var(--color-input-border-disabled);
+}
+
+.ds-composer--disabled .ds-composer__textarea {
+  cursor: not-allowed;
+  color: var(--color-input-text-disabled);
+}

package/components/Composer/Composer.d.ts

@@ -0,0 +1,67 @@
+import { default as React } from 'react';
+/** Props owned by Composer itself — everything else falls through to the <textarea>. */
+type ComposerOwnProps = {
+    /** Current value for controlled use. Pair with `onValueChange`. */
+    value?: string;
+    /** Initial value for uncontrolled use. */
+    defaultValue?: string;
+    /**
+     * Convenience callback receiving the value directly.
+     * Fires alongside `onChange`, which keeps the standard React event signature
+     * so form libraries work unmodified.
+     */
+    onValueChange?: (value: string) => void;
+    /**
+     * Fires with the current value on Enter (without Shift) and on the send
+     * button — never while `streaming`, and never when the trimmed value is
+     * empty. Composer does not clear the value: the consumer owns it and clears
+     * it after a successful submit. Shadows the native `onSubmit` attribute,
+     * which never fires on a textarea anyway.
+     */
+    onSubmit?: (value: string) => void;
+    /**
+     * A response is streaming: the send button becomes a stop button, submit
+     * is blocked, and Enter is inert.
+     */
+    streaming?: boolean;
+    /** Fires when the stop button is pressed while `streaming`. */
+    onStop?: () => void;
+    /** Growth cap in text rows before the textarea scrolls internally. */
+    maxRows?: number;
+    /**
+     * Attachment row rendered above the textarea (DocumentChips). Fully
+     * controlled by the caller — Composer never owns the list.
+     */
+    attachments?: React.ReactNode;
+    /** Leading actions on the left of the action bar (attach button, model picker). */
+    actions?: React.ReactNode;
+    /**
+     * Trailing actions on the right of the action bar, just before the send
+     * button (dictation, voice mode).
+     */
+    trailingActions?: React.ReactNode;
+    /** Accessible label for the send button. */
+    sendLabel?: string;
+    /** Accessible label for the stop button. */
+    stopLabel?: string;
+    /** Additional CSS classes — applied to the shell, not the <textarea>. */
+    className?: string;
+};
+export interface ComposerProps extends ComposerOwnProps, Omit<React.ComponentPropsWithoutRef<'textarea'>, keyof ComposerOwnProps> {
+}
+/**
+ * Composer is the chat input shell: an attachments row, an auto-growing
+ * textarea, a leading actions slot, and a trailing send button — the one
+ * sanctioned primary-action teal in the chat set, because sending a message
+ * is a genuine primary CTA. While `streaming`, send becomes stop and Enter
+ * is inert.
+ *
+ * The textarea grows with its content up to `maxRows`, then scrolls
+ * internally. Where the browser supports `field-sizing: content` the sizing
+ * is fully native; elsewhere a measurement effect keeps the height in step.
+ *
+ * Forwards a ref to the underlying `<textarea>` and spreads unrecognised
+ * props onto it; `className` lands on the shell.
+ */
+export declare const Composer: React.ForwardRefExoticComponent<ComposerProps & React.RefAttributes<HTMLTextAreaElement>>;
+export {};