@robr0/design-system 0.4.0 → 0.6.0

package/components/Composer/Composer.css

@@ -0,0 +1,163 @@
+/* ============================================
+   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);
+  /* The token's default is concentric with the send button: half the
+     button, plus the action bar's padding-sm ring, plus the border width
+     (border-radius applies to the border's outer edge). A token rather
+     than the calc so radius re-theming reaches this corner too. */
+  border-radius: var(--radius-composer);
+  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 {};

package/components/Composer/Composer.js

@@ -0,0 +1,120 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React, { useRef, useState, useLayoutEffect } from "react";
+import { CircularButton } from "../CircularButton/CircularButton.js";
+import "./Composer.css";
+const Composer = React.forwardRef(
+  ({
+    value,
+    defaultValue,
+    onValueChange,
+    onSubmit,
+    streaming = false,
+    onStop,
+    maxRows = 8,
+    attachments,
+    actions,
+    trailingActions,
+    sendLabel = "Send message",
+    stopLabel = "Stop generating",
+    className = "",
+    onChange,
+    onKeyDown,
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-composer";
+    const textareaRef = useRef(null);
+    const isControlled = value !== void 0;
+    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue ?? "");
+    const currentValue = isControlled ? value : uncontrolledValue;
+    const disabled = Boolean(rest.disabled);
+    const canSend = !disabled && currentValue.trim() !== "";
+    const setTextareaRef = (node) => {
+      textareaRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    };
+    useLayoutEffect(() => {
+      const node = textareaRef.current;
+      if (!node) return;
+      if (typeof CSS !== "undefined" && CSS.supports("field-sizing", "content")) return;
+      node.style.height = "auto";
+      node.style.height = `${node.scrollHeight}px`;
+    }, [currentValue]);
+    const submit = () => {
+      if (streaming || !canSend) return;
+      onSubmit?.(currentValue);
+    };
+    const handleChange = (e) => {
+      if (!isControlled) setUncontrolledValue(e.target.value);
+      onChange?.(e);
+      onValueChange?.(e.target.value);
+    };
+    const handleKeyDown = (e) => {
+      onKeyDown?.(e);
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        submit();
+      }
+    };
+    const handleShellClick = (e) => {
+      const target = e.target;
+      if (target.closest('button, a, textarea, input, select, [role="button"]')) return;
+      textareaRef.current?.focus();
+    };
+    const classes = [baseClass, disabled ? `${baseClass}--disabled` : "", className].filter(Boolean).join(" ");
+    const ariaLabel = rest["aria-label"] ?? (rest["aria-labelledby"] !== void 0 ? void 0 : "Message");
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: classes,
+        style: { "--ds-composer-max-rows": maxRows },
+        onClick: handleShellClick,
+        children: [
+          attachments && /* @__PURE__ */ jsx("div", { className: `${baseClass}__attachments`, children: attachments }),
+          /* @__PURE__ */ jsx("div", { className: `${baseClass}__content`, children: /* @__PURE__ */ jsx(
+            "textarea",
+            {
+              ...rest,
+              ref: setTextareaRef,
+              className: `${baseClass}__textarea`,
+              rows: 1,
+              value: currentValue,
+              "aria-label": ariaLabel,
+              onChange: handleChange,
+              onKeyDown: handleKeyDown
+            }
+          ) }),
+          /* @__PURE__ */ jsxs("div", { className: `${baseClass}__footer`, children: [
+            actions && /* @__PURE__ */ jsx("div", { className: `${baseClass}__actions`, children: actions }),
+            /* @__PURE__ */ jsxs("div", { className: `${baseClass}__trailing`, children: [
+              trailingActions,
+              streaming ? /* @__PURE__ */ jsx(
+                CircularButton,
+                {
+                  icon: "stop",
+                  variant: "primary",
+                  ariaLabel: stopLabel,
+                  disabled,
+                  onClick: onStop
+                }
+              ) : /* @__PURE__ */ jsx(
+                CircularButton,
+                {
+                  icon: "arrow_upward",
+                  variant: "primary",
+                  ariaLabel: sendLabel,
+                  disabled: !canSend,
+                  onClick: submit
+                }
+              )
+            ] })
+          ] })
+        ]
+      }
+    );
+  }
+);
+Composer.displayName = "Composer";
+export {
+  Composer
+};

package/components/DocumentChip/DocumentChip.css

@@ -0,0 +1,181 @@
+/* ============================================
+   DOCUMENT CHIP COMPONENT
+   Compact file reference tile: type icon, name,
+   metadata line, upload progress, optional remove.
+   ============================================ */
+
+.ds-document-chip {
+  /* Accent indirection — the error modifier repoints one variable
+     instead of restyling each part */
+  --ds-document-chip-border: var(--color-bg-container-border);
+
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gap-sm);
+
+  padding: var(--padding-xs) var(--padding-sm-md);
+
+  border: var(--border-xs) solid var(--ds-document-chip-border);
+  border-radius: var(--radius-md);
+  background-color: var(--color-bg-container-primary);
+
+  transition: border-color var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+/* ============================================
+   SIZE — COMPACT (single line for composer rows)
+   ============================================ */
+
+.ds-document-chip--compact {
+  gap: var(--gap-xs);
+  padding: var(--padding-xxs) var(--padding-sm);
+}
+
+/* ============================================
+   ERROR — repoint the border accent
+   ============================================ */
+
+.ds-document-chip--error {
+  --ds-document-chip-border: var(--color-status-error-border);
+}
+
+/* ============================================
+   MAIN — body button when the chip is clickable
+   ============================================ */
+
+.ds-document-chip__main {
+  display: inline-flex;
+  align-items: center;
+  gap: inherit;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: none;
+  border-radius: var(--radius-sm);
+  font: inherit;
+  letter-spacing: inherit;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+  transition: background-color var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-document-chip__main:hover {
+  background-color: var(--color-bg-container-secondary);
+}
+
+/* ============================================
+   TYPE ICON
+   ============================================ */
+
+.ds-document-chip__icon {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: var(--color-icon-primary);
+  transition: color var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-document-chip__icon .material-symbols-rounded {
+  --icon-size: var(--icon-size-md);
+}
+
+.ds-document-chip--compact .ds-document-chip__icon .material-symbols-rounded {
+  --icon-size: var(--icon-size-sm);
+}
+
+.ds-document-chip--error .ds-document-chip__icon {
+  color: var(--color-status-error-text);
+}
+
+/* ============================================
+   TEXT BLOCK — name over one detail line
+   ============================================ */
+
+.ds-document-chip__text {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--gap-xxs);
+  min-width: 0;
+}
+
+.ds-document-chip__name {
+  /* Consumer-overridable truncation width */
+  max-width: var(--ds-document-chip-max-width, 28ch);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  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);
+  color: var(--color-text-primary);
+}
+
+.ds-document-chip__meta,
+.ds-document-chip__error {
+  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);
+  white-space: nowrap;
+}
+
+.ds-document-chip__meta {
+  color: var(--color-text-tertiary);
+}
+
+.ds-document-chip__error {
+  color: var(--color-status-error-text);
+}
+
+/* Composed ProgressBar replacing the metadata line */
+.ds-document-chip__progress {
+  align-self: stretch;
+}
+
+/* ============================================
+   REMOVE BUTTON
+   ============================================ */
+
+.ds-document-chip__remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: none;
+  border-radius: var(--radius-full);
+  color: var(--color-icon-primary);
+  cursor: pointer;
+  transition: color var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-document-chip__remove .material-symbols-rounded {
+  --icon-size: var(--icon-size-sm);
+}
+
+.ds-document-chip__remove:not(:disabled):hover {
+  color: var(--color-text-primary);
+}
+
+.ds-document-chip__remove:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* ============================================
+   FOCUS
+   ============================================ */
+
+.ds-document-chip__main:focus-visible,
+.ds-document-chip__remove:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: -2px;
+}

package/components/DocumentChip/DocumentChip.d.ts

@@ -0,0 +1,41 @@
+import { default as React } from 'react';
+export type DocumentChipFileType = 'pdf' | 'doc' | 'sheet' | 'slide' | 'image' | 'code' | 'archive' | 'generic';
+/** Props owned by DocumentChip itself — everything else falls through to the root element. */
+type DocumentChipOwnProps = {
+    /** File name, truncated with an ellipsis when it outgrows the tile. */
+    name: string;
+    /** Document type — picks the leading Material Symbol. */
+    fileType?: DocumentChipFileType;
+    /** Override the type icon — a Material Symbol name, or any custom element. */
+    icon?: string | React.ReactNode;
+    /** Free-text metadata line, e.g. "1.2 MB" or "12 pages" — callers keep their own formatting. */
+    meta?: string;
+    /** Upload progress, 0–100. While set, replaces the metadata line with a progress bar. */
+    progress?: number;
+    /** Error message — replaces the metadata line and colours the tile with the error pair. */
+    error?: string;
+    /** Tile size. Compact drops the metadata line — name only — for dense composer rows. */
+    size?: 'default' | 'compact';
+    /** Click handler — presence makes the chip body (icon + text) an interactive button. */
+    onClick?: () => void;
+    /** Remove handler — renders a trailing close button. */
+    onRemove?: () => void;
+    /** Accessible label for the remove button. */
+    removeLabel?: string;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface DocumentChipProps extends DocumentChipOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof DocumentChipOwnProps> {
+}
+/**
+ * DocumentChip is a compact file reference: a two-line tile with a type
+ * icon, name, metadata line, upload progress, and an optional remove
+ * button. It references documents attached to chat messages or queued
+ * above a composer — Chip stays the one-line pill for attributes, and
+ * FileInput stays the form control that owns selection.
+ *
+ * The root is always a `<div>`; passing `onClick` turns the body into a
+ * `<button>` so click and remove coexist without nesting controls.
+ */
+export declare const DocumentChip: React.ForwardRefExoticComponent<DocumentChipProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/DocumentChip/DocumentChip.js

@@ -0,0 +1,78 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import React from "react";
+import { ProgressBar } from "../ProgressBar/ProgressBar.js";
+import "./DocumentChip.css";
+import "../../fonts/material-symbols.css";
+const FILE_TYPE_ICONS = {
+  pdf: "picture_as_pdf",
+  doc: "description",
+  sheet: "table",
+  slide: "co_present",
+  image: "image",
+  code: "code",
+  archive: "folder_zip",
+  generic: "draft"
+};
+const DocumentChip = React.forwardRef(
+  ({
+    name,
+    fileType = "generic",
+    icon,
+    meta,
+    progress,
+    error,
+    size = "default",
+    onClick,
+    onRemove,
+    removeLabel = "Remove file",
+    className = "",
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-document-chip";
+    const classes = [
+      baseClass,
+      `${baseClass}--${size}`,
+      error ? `${baseClass}--error` : "",
+      onClick ? `${baseClass}--clickable` : "",
+      onRemove ? `${baseClass}--removable` : "",
+      className
+    ].filter(Boolean).join(" ");
+    const typeIcon = icon ?? FILE_TYPE_ICONS[fileType];
+    const showDetail = size !== "compact";
+    const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon`, "aria-hidden": "true", children: typeof typeIcon === "string" ? /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", children: typeIcon }) : typeIcon }),
+      /* @__PURE__ */ jsxs("span", { className: `${baseClass}__text`, children: [
+        /* @__PURE__ */ jsx("span", { className: `${baseClass}__name`, children: name }),
+        showDetail && error && /* @__PURE__ */ jsx("span", { className: `${baseClass}__error`, children: error }),
+        showDetail && !error && progress !== void 0 && /* @__PURE__ */ jsx(
+          ProgressBar,
+          {
+            className: `${baseClass}__progress`,
+            size: "compact",
+            value: progress,
+            showLabel: true,
+            ariaLabel: `Uploading ${name}`
+          }
+        ),
+        showDetail && !error && progress === void 0 && meta && /* @__PURE__ */ jsx("span", { className: `${baseClass}__meta`, children: meta })
+      ] })
+    ] });
+    return /* @__PURE__ */ jsxs("div", { ...rest, ref, className: classes, children: [
+      onClick ? /* @__PURE__ */ jsx("button", { type: "button", className: `${baseClass}__main`, onClick, children: body }) : body,
+      onRemove && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: `${baseClass}__remove`,
+          onClick: onRemove,
+          "aria-label": removeLabel,
+          children: /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", "aria-hidden": "true", children: "close" })
+        }
+      )
+    ] });
+  }
+);
+DocumentChip.displayName = "DocumentChip";
+export {
+  DocumentChip
+};