@robr0/design-system 0.4.0 → 0.6.0

package/components/ChatHeader/ChatHeader.js

@@ -0,0 +1,17 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React from "react";
+import "./ChatHeader.css";
+const ChatHeader = React.forwardRef(
+  ({ title, actions, className = "", ...rest }, ref) => {
+    const baseClass = "ds-chat-header";
+    const classes = [baseClass, className].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs("header", { ...rest, ref, className: classes, children: [
+      typeof title === "string" ? /* @__PURE__ */ jsx("span", { className: `${baseClass}__title`, children: title }) : title,
+      actions && /* @__PURE__ */ jsx("div", { className: `${baseClass}__actions`, children: actions })
+    ] });
+  }
+);
+ChatHeader.displayName = "ChatHeader";
+export {
+  ChatHeader
+};

package/components/ChatMarker/ChatMarker.css

@@ -0,0 +1,52 @@
+/* ============================================
+   CHAT MARKER COMPONENT
+   Inline conversation separator for dates and system notes
+   ============================================ */
+
+.ds-chat-marker {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-sm-md);
+  width: 100%;
+}
+
+/* Flanking lines — kept as flex spacers when bare, so the label
+   stays centred either way */
+.ds-chat-marker::before,
+.ds-chat-marker::after {
+  content: '';
+  flex: 1;
+  height: var(--border-xs);
+  background-color: var(--color-divider);
+}
+
+.ds-chat-marker--bare::before,
+.ds-chat-marker--bare::after {
+  background-color: transparent;
+}
+
+/* ============================================
+   LABEL
+   ============================================ */
+
+.ds-chat-marker__label {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gap-xs);
+  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-tertiary);
+}
+
+.ds-chat-marker__icon {
+  display: inline-flex;
+  align-items: center;
+}
+
+.ds-chat-marker__icon .material-symbols-rounded {
+  --icon-size: var(--icon-size-sm);
+}

package/components/ChatMarker/ChatMarker.d.ts

@@ -0,0 +1,22 @@
+import { default as React } from 'react';
+/** Props owned by ChatMarker itself — everything else falls through to the root element. */
+type ChatMarkerOwnProps = {
+    /** Leading icon — a Material Symbol name, or any custom element. */
+    icon?: string | React.ReactNode;
+    /** Draw the flanking divider lines. Turn off for a bare centred note. */
+    line?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+    /** The marker text, e.g. "Today" or "Chat renamed". */
+    children?: React.ReactNode;
+};
+export interface ChatMarkerProps extends ChatMarkerOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof ChatMarkerOwnProps> {
+}
+/**
+ * ChatMarker is the inline separator a conversation uses for anything that
+ * is not a turn: date breaks, joins, mode changes, system notes. It reads
+ * as furniture rather than as a message — quiet tertiary text between two
+ * divider lines, so the eye skips it while scanning turns.
+ */
+export declare const ChatMarker: React.ForwardRefExoticComponent<ChatMarkerProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/ChatMarker/ChatMarker.js

@@ -0,0 +1,18 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import "./ChatMarker.css";
+import "../../fonts/material-symbols.css";
+const ChatMarker = React.forwardRef(
+  ({ icon, line = true, className = "", children, ...rest }, ref) => {
+    const baseClass = "ds-chat-marker";
+    const classes = [baseClass, line ? "" : `${baseClass}--bare`, className].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsx("div", { ...rest, ref, className: classes, role: "separator", children: /* @__PURE__ */ jsxs("span", { className: `${baseClass}__label`, children: [
+      icon && /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon`, "aria-hidden": "true", children: typeof icon === "string" ? /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", children: icon }) : icon }),
+      children
+    ] }) });
+  }
+);
+ChatMarker.displayName = "ChatMarker";
+export {
+  ChatMarker
+};

package/components/ChatMessage/ChatMessage.css

@@ -0,0 +1,310 @@
+/* ============================================
+   CHAT MESSAGE COMPONENT
+   A single chat turn: avatar, author, timestamp,
+   and bubble or plain content aligned by role.
+
+   Bubble surfaces come only from the four
+   --color-chat-bubble-* tokens — never the
+   container ramp directly — so re-theming a chat
+   means repointing those four and nothing else.
+   ============================================ */
+
+.ds-chat-message {
+  /* Gutter width matches the Avatar sm footprint, so a run of turns keeps
+     its left edge whether or not each row shows its avatar. Consumers can
+     repoint it for a larger avatar. */
+  --ds-chat-message-gutter: var(--icon-size-lg);
+
+  display: flex;
+  align-items: flex-start;
+  gap: var(--gap-sm-md);
+  width: 100%;
+}
+
+.ds-chat-message--user {
+  flex-direction: row-reverse;
+}
+
+/* ============================================
+   GUTTER
+   ============================================ */
+
+.ds-chat-message__gutter {
+  flex: none;
+  display: flex;
+  justify-content: center;
+  width: var(--ds-chat-message-gutter);
+}
+
+/* Hidden, not removed — the reserved width is what keeps a run aligned */
+.ds-chat-message__gutter--hidden {
+  visibility: hidden;
+}
+
+/* ============================================
+   BODY
+   ============================================ */
+
+.ds-chat-message__body {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--gap-xs);
+}
+
+.ds-chat-message--user .ds-chat-message__body {
+  align-items: flex-end;
+}
+
+/* ============================================
+   META ROW
+   ============================================ */
+
+.ds-chat-message__meta {
+  display: flex;
+  align-items: baseline;
+  gap: var(--gap-sm);
+}
+
+.ds-chat-message__author {
+  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-secondary);
+}
+
+.ds-chat-message__timestamp {
+  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;
+  color: var(--color-text-tertiary);
+}
+
+/* ============================================
+   CONTENT
+   ============================================ */
+
+.ds-chat-message__content {
+  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);
+  /* Content never pushes the turn wider than its container — an unbroken
+     run (a URL, a token) wraps inside the bubble or column instead. */
+  min-width: 0;
+  max-width: 100%;
+  overflow-wrap: anywhere;
+}
+
+/* Plain — the assistant default: no surface, full width, primary text */
+.ds-chat-message--plain .ds-chat-message__content {
+  width: 100%;
+  color: var(--color-text-primary);
+}
+
+/* Bubble — capped width so a short line never drags a surface across the
+   whole row; the fallback is the sanctioned consumer-override hook */
+.ds-chat-message--bubble .ds-chat-message__content {
+  max-width: var(--ds-chat-message-max-width, 75%);
+  padding: var(--padding-sm-md) var(--padding-lg);
+  border-radius: var(--radius-xl);
+}
+
+/* Sent — the user's own turns */
+.ds-chat-message--bubble.ds-chat-message--user .ds-chat-message__content {
+  background-color: var(--color-chat-bubble-sent-bg);
+  color: var(--color-chat-bubble-sent-text);
+}
+
+/* Received — an assistant turn opted into a bubble */
+.ds-chat-message--bubble.ds-chat-message--assistant .ds-chat-message__content {
+  background-color: var(--color-chat-bubble-received-bg);
+  color: var(--color-chat-bubble-received-text);
+}
+
+/* Tail — the speaker-side bottom corner squares off to point at them */
+.ds-chat-message--tail.ds-chat-message--bubble.ds-chat-message--user
+  .ds-chat-message__content {
+  border-bottom-right-radius: var(--radius-xs);
+}
+
+.ds-chat-message--tail.ds-chat-message--bubble.ds-chat-message--assistant
+  .ds-chat-message__content {
+  border-bottom-left-radius: var(--radius-xs);
+}
+
+/* ============================================
+   GROUPED
+   A follow-on row in the same speaker's run:
+   no meta, avatar hidden but gutter kept, and
+   the row pulls up towards the one above so the
+   run reads as one utterance. The negative
+   margin offsets part of the container's gap.
+   ============================================ */
+
+.ds-chat-message--grouped {
+  margin-top: calc(-1 * var(--gap-sm));
+}
+
+/* ============================================
+   COMPACT
+   ============================================ */
+
+.ds-chat-message--compact .ds-chat-message__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);
+}
+
+.ds-chat-message--compact.ds-chat-message--bubble .ds-chat-message__content {
+  padding: var(--padding-xs) var(--padding-sm-md);
+}
+
+/* ============================================
+   PENDING
+   Three dots pulsing in sequence while the
+   first content is still on its way.
+   ============================================ */
+
+.ds-chat-message__pending {
+  --ds-chat-message-pending-cycle: var(--motion-duration-loop-matrix);
+
+  display: inline-flex;
+  align-items: center;
+}
+
+.ds-chat-message__dots {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gap-xs);
+}
+
+.ds-chat-message__dot {
+  width: var(--gap-sm);
+  height: var(--gap-sm);
+  border-radius: var(--radius-full);
+  background-color: var(--color-text-tertiary);
+  opacity: 0.25;
+  animation: ds-chat-message-dot var(--ds-chat-message-pending-cycle)
+    var(--motion-ease-linear) infinite;
+}
+
+.ds-chat-message__dot:nth-child(2) {
+  animation-delay: calc(var(--ds-chat-message-pending-cycle) / 6);
+}
+
+.ds-chat-message__dot:nth-child(3) {
+  animation-delay: calc(var(--ds-chat-message-pending-cycle) / 3);
+}
+
+/* Each dot brightens and falls back within the first half of the cycle, so
+   the stagger reads as a wave rather than three independent blinkers */
+@keyframes ds-chat-message-dot {
+  0%,
+  60%,
+  100% {
+    opacity: 0.25;
+  }
+
+  30% {
+    opacity: 1;
+  }
+}
+
+/* ============================================
+   ACTIONS
+   Hidden until the row is hovered or holds
+   keyboard focus; touch has no hover, so there
+   they stay visible.
+
+   Opacity only, never visibility: hidden would
+   drop the buttons from the tab order, so a
+   message with no other focusable child could
+   never match :focus-within and keyboard users
+   could never reach the actions. Invisible-but-
+   tabbable is the point — the first Tab into a
+   button reveals the row.
+   ============================================ */
+
+.ds-chat-message__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-xs);
+  /* The row hides with opacity, not display, so this offset is always
+     reserved — the body's own gap plus this margin sets the row a full
+     --gap-md off the content without loosening the meta stack above. */
+  margin-top: var(--gap-sm-md);
+  opacity: 0;
+  transition: opacity var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-chat-message:hover .ds-chat-message__actions,
+.ds-chat-message:focus-within .ds-chat-message__actions {
+  opacity: 1;
+}
+
+/* showActions pins the row on: the actions are part of the response, not a
+   secondary affordance to discover. */
+.ds-chat-message--show-actions .ds-chat-message__actions {
+  opacity: 1;
+}
+
+@media (hover: none) {
+  .ds-chat-message__actions {
+    opacity: 1;
+  }
+}
+
+/* ============================================
+   FOOTER
+   ============================================ */
+
+.ds-chat-message__footer {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--gap-xs);
+}
+
+/* ============================================
+   VISUALLY HIDDEN
+   The pending label is for screen readers only.
+   ============================================ */
+
+.ds-chat-message__sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* ============================================
+   REDUCED MOTION
+   The global guard collapses the loop to its
+   final frame, which is the dim phase — three
+   near-invisible dots. Park them at a legible
+   static opacity instead; the visually hidden
+   label still says what is happening.
+   ============================================ */
+
+@media (prefers-reduced-motion: reduce) {
+  .ds-chat-message__dot {
+    animation: none;
+    opacity: 0.55;
+  }
+}

package/components/ChatMessage/ChatMessage.d.ts

@@ -0,0 +1,74 @@
+import { default as React } from 'react';
+/** Props owned by ChatMessage itself — everything else falls through to the root element. */
+type ChatMessageOwnProps = {
+    /**
+     * Which side of the conversation this turn belongs to. Drives alignment
+     * and the default surface: user turns are right-aligned bubbles,
+     * assistant turns are surface-less full-width text. Shadows the ARIA
+     * role attribute; the root renders no ARIA role.
+     */
+    role?: 'user' | 'assistant';
+    /** Avatar slot, e.g. an `<Avatar>`. Omit for no gutter at all. */
+    avatar?: React.ReactNode;
+    /**
+     * Show the passed avatar. When false the avatar is hidden but its gutter
+     * space is kept, so consecutive rows in a run stay aligned.
+     */
+    showAvatar?: boolean;
+    /** Display name shown above the content. */
+    author?: string;
+    /** Time shown beside the author, e.g. "2:41 PM". Free text, so callers keep their own formatting. */
+    timestamp?: string;
+    /**
+     * Consecutive-message mode: hides the avatar (keeping its gutter), drops
+     * the author and timestamp, and tightens the spacing to the row above.
+     */
+    grouped?: boolean;
+    /**
+     * Override the role's default surface. Explicit true on an assistant turn
+     * renders a received bubble; explicit false on a user turn renders plain text.
+     */
+    bubble?: boolean;
+    /**
+     * Square the speaker-side bottom corner of the bubble — bottom-right on a
+     * sent bubble, bottom-left on a received one. Only meaningful when a
+     * bubble renders.
+     */
+    tail?: boolean;
+    /** Compact drops the type one size step and tightens the bubble padding. */
+    size?: 'default' | 'compact';
+    /** Waiting for the first content: renders a three-dot pulse in place of children. */
+    pending?: boolean;
+    /** Accessible text announced for the pending state. */
+    pendingLabel?: string;
+    /** Action row under the content, revealed on hover and keyboard focus (always visible on touch) — `showActions` pins it on. */
+    actions?: React.ReactNode;
+    /**
+     * Always show the action row instead of revealing it on hover and focus.
+     * For surfaces where the actions are part of the response — a copy or
+     * feedback row — rather than a secondary affordance.
+     */
+    showActions?: boolean;
+    /** Footer slot under the content — a sources row, an edited note. */
+    footer?: React.ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+    /**
+     * The message content. The package ships no markdown renderer; render
+     * markdown yourself, ideally wrapped in Prose, and pass the result.
+     */
+    children?: React.ReactNode;
+};
+export interface ChatMessageProps extends ChatMessageOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof ChatMessageOwnProps> {
+}
+/**
+ * ChatMessage is a single chat turn: avatar, author, timestamp, and the
+ * content itself, aligned by role. User turns read as right-aligned bubbles;
+ * assistant turns read as plain full-width text, so a transcript keeps the
+ * question-and-answer rhythm without every row wearing a surface.
+ *
+ * The bubble colours come exclusively from the four `--color-chat-bubble-*`
+ * tokens, so re-theming a chat means repointing those and nothing else.
+ */
+export declare const ChatMessage: React.ForwardRefExoticComponent<ChatMessageProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/ChatMessage/ChatMessage.js

@@ -0,0 +1,71 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React from "react";
+import "./ChatMessage.css";
+const ChatMessage = React.forwardRef(
+  ({
+    role = "assistant",
+    avatar,
+    showAvatar = true,
+    author,
+    timestamp,
+    grouped = false,
+    bubble,
+    tail = false,
+    size = "default",
+    pending = false,
+    pendingLabel = "Waiting for a reply",
+    actions,
+    showActions = false,
+    footer,
+    className = "",
+    children,
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-chat-message";
+    const hasBubble = bubble ?? role === "user";
+    const hideAvatar = grouped || !showAvatar;
+    const classes = [
+      baseClass,
+      `${baseClass}--${role}`,
+      hasBubble ? `${baseClass}--bubble` : `${baseClass}--plain`,
+      tail ? `${baseClass}--tail` : "",
+      grouped ? `${baseClass}--grouped` : "",
+      size === "compact" ? `${baseClass}--compact` : "",
+      pending ? `${baseClass}--pending` : "",
+      showActions ? `${baseClass}--show-actions` : "",
+      className
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs("div", { ...rest, ref, className: classes, children: [
+      avatar !== void 0 && /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: [
+            `${baseClass}__gutter`,
+            hideAvatar ? `${baseClass}__gutter--hidden` : ""
+          ].filter(Boolean).join(" "),
+          children: avatar
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: `${baseClass}__body`, children: [
+        !grouped && (author || timestamp) && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__meta`, children: [
+          author && /* @__PURE__ */ jsx("span", { className: `${baseClass}__author`, children: author }),
+          timestamp && /* @__PURE__ */ jsx("span", { className: `${baseClass}__timestamp`, children: timestamp })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: `${baseClass}__content`, children: pending ? /* @__PURE__ */ jsxs("span", { className: `${baseClass}__pending`, role: "status", children: [
+          /* @__PURE__ */ jsx("span", { className: `${baseClass}__sr-only`, children: pendingLabel }),
+          /* @__PURE__ */ jsxs("span", { className: `${baseClass}__dots`, "aria-hidden": "true", children: [
+            /* @__PURE__ */ jsx("span", { className: `${baseClass}__dot` }),
+            /* @__PURE__ */ jsx("span", { className: `${baseClass}__dot` }),
+            /* @__PURE__ */ jsx("span", { className: `${baseClass}__dot` })
+          ] })
+        ] }) : children }),
+        actions && /* @__PURE__ */ jsx("div", { className: `${baseClass}__actions`, children: actions }),
+        footer && /* @__PURE__ */ jsx("div", { className: `${baseClass}__footer`, children: footer })
+      ] })
+    ] });
+  }
+);
+ChatMessage.displayName = "ChatMessage";
+export {
+  ChatMessage
+};