@robr0/design-system 0.3.0 → 0.5.0

package/components/AgentStatus/AgentStatus.d.ts

@@ -0,0 +1,41 @@
+import { default as React } from 'react';
+import { AgentStatusPattern, AgentStatusState } from './AgentStatusPatterns';
+/** Props owned by AgentStatus itself — everything else falls through to the root element. */
+type AgentStatusOwnProps = {
+    /** What the agent is doing. Drives the colour, the default label, and whether the matrix animates. */
+    state?: AgentStatusState;
+    /** Status text. Falls back to a default for the state. Ignored when `children` are given. */
+    label?: string;
+    /** Which dot-matrix choreography to run. */
+    pattern?: AgentStatusPattern;
+    /**
+     * Sweep a highlight across the label while the agent is active. Defaults to
+     * on for `thinking`, `working` and `waiting`, off for the resting states.
+     */
+    shimmer?: boolean;
+    /**
+     * Indicator and text scale, paired with ChatMessage's sizes: `default`
+     * matches default message text, `compact` matches compact message text.
+     * `sm` and `md` are legacy aliases for `compact` and `default`.
+     */
+    size?: 'default' | 'compact' | 'sm' | 'md';
+    /** `inline` sits in a line of content; `bar` is a full-width row for the top of a panel. */
+    variant?: 'inline' | 'bar';
+    /** Additional CSS classes */
+    className?: string;
+    /** Status text, when it needs markup the `label` string cannot express. */
+    children?: React.ReactNode;
+};
+export interface AgentStatusProps extends AgentStatusOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof AgentStatusOwnProps> {
+}
+/**
+ * AgentStatus reports what an agent is doing right now: a dot-matrix indicator
+ * beside a line of status text.
+ *
+ * Colour carries meaning rather than decoration — the three working states are
+ * monochrome, and only `waiting`, `done` and `error` take a status colour.
+ * The whole thing is one polite live region, so a screen reader hears the state
+ * change without the caller wiring anything up.
+ */
+export declare const AgentStatus: React.ForwardRefExoticComponent<AgentStatusProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/AgentStatus/AgentStatus.js

@@ -0,0 +1,85 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import React, { useState, useRef, useEffect } from "react";
+import "./AgentStatus.css";
+const DOT_COUNT = 12;
+const DEFAULT_LABELS = {
+  idle: "Idle",
+  thinking: "Thinking",
+  working: "Working",
+  waiting: "Waiting for you",
+  done: "Done",
+  error: "Failed"
+};
+const ACTIVE_STATES = ["thinking", "working", "waiting"];
+const AgentStatus = React.forwardRef(
+  ({
+    state = "thinking",
+    label,
+    pattern = "orbit",
+    shimmer,
+    size = "default",
+    variant = "inline",
+    className = "",
+    children,
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-agent-status";
+    const isActive = ACTIVE_STATES.includes(state);
+    const isShimmering = shimmer ?? isActive;
+    const resolvedSize = size === "sm" ? "compact" : size === "md" ? "default" : size;
+    const resolvedLabel = label ?? DEFAULT_LABELS[state];
+    const [outgoing, setOutgoing] = useState(null);
+    const lastLabel = useRef(resolvedLabel);
+    useEffect(() => {
+      if (children != null) return;
+      if (lastLabel.current !== resolvedLabel) {
+        setOutgoing(lastLabel.current);
+        lastLabel.current = resolvedLabel;
+      }
+    }, [resolvedLabel, children]);
+    const isSwapping = outgoing !== null;
+    const classes = [
+      baseClass,
+      `${baseClass}--${state}`,
+      `${baseClass}--${pattern}`,
+      `${baseClass}--${resolvedSize}`,
+      `${baseClass}--${variant}`,
+      isActive ? `${baseClass}--animated` : "",
+      className
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs("div", { ...rest, ref, className: classes, role: "status", children: [
+      /* @__PURE__ */ jsx("span", { className: `${baseClass}__matrix`, "aria-hidden": "true", children: Array.from({ length: DOT_COUNT }, (_, i) => /* @__PURE__ */ jsx("span", { className: `${baseClass}__dot` }, i)) }),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: `${baseClass}__label${isShimmering ? ` ${baseClass}__label--shimmer` : ""}${isSwapping ? ` ${baseClass}__label--swapping` : ""}`,
+          children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+            isSwapping && /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: `${baseClass}__label-text ${baseClass}__label-text--out`,
+                "aria-hidden": "true",
+                children: outgoing
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: `${baseClass}__label-text${isSwapping ? ` ${baseClass}__label-text--in` : ""}`,
+                onAnimationEnd: (e) => {
+                  if (e.target === e.currentTarget) setOutgoing(null);
+                },
+                children: resolvedLabel
+              },
+              resolvedLabel
+            )
+          ] })
+        }
+      )
+    ] });
+  }
+);
+AgentStatus.displayName = "AgentStatus";
+export {
+  AgentStatus
+};

package/components/AgentStatus/AgentStatusPatterns.d.ts

@@ -0,0 +1,17 @@
+/**
+ * AgentStatus's vocabulary, kept out of the component file so that module
+ * exports only a component (react-refresh) — and exported rather than kept
+ * private so a consumer building a pattern picker, and this repo's own docs
+ * gallery, can iterate the list instead of restating it.
+ *
+ * `.tsx` despite holding no JSX: the barrel generator and the
+ * `./components/*` export subpath both address `.tsx`, so that extension is
+ * what makes this reachable as `@robr0/design-system/components/AgentStatus/AgentStatusPatterns`.
+ */
+/**
+ * The dot-matrix animations. Each pattern is a named choreography over the
+ * same 4x3 grid, so switching pattern never changes the indicator's footprint.
+ */
+export declare const agentStatusPatterns: readonly ["braille", "orbit", "breathe", "snake", "fill-sweep", "pulse", "columns", "checkerboard", "scan", "rain", "cascade", "sparkle", "wave-rows", "helix", "diagonal-swipe"];
+export type AgentStatusPattern = (typeof agentStatusPatterns)[number];
+export type AgentStatusState = 'idle' | 'thinking' | 'working' | 'waiting' | 'done' | 'error';

package/components/AgentStatus/AgentStatusPatterns.js

@@ -0,0 +1,20 @@
+const agentStatusPatterns = [
+  "braille",
+  "orbit",
+  "breathe",
+  "snake",
+  "fill-sweep",
+  "pulse",
+  "columns",
+  "checkerboard",
+  "scan",
+  "rain",
+  "cascade",
+  "sparkle",
+  "wave-rows",
+  "helix",
+  "diagonal-swipe"
+];
+export {
+  agentStatusPatterns
+};

package/components/AiButton/AiButton.css

@@ -0,0 +1,163 @@
+/* ============================================
+   AI BUTTON
+   The AI entry point: transparent field, slowly
+   rotating gradient ring, soft glow of the same
+   gradient. The ring is the system's "a model
+   answers here" signal — ordinary actions keep
+   the flat action teal.
+   ============================================ */
+
+/* The rotation animates a registered custom property: a conic gradient's
+   angle cannot tween otherwise. Browsers without @property render the ring
+   at its initial angle, static — a correct, quieter fallback. */
+@property --ds-ai-button-angle {
+  syntax: '<angle>';
+  initial-value: 0deg;
+  inherits: false;
+}
+
+/* Base */
+.ds-ai-button {
+  /* Layout */
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--gap-sm);
+
+  /* Spacing — matches Button so the two sit on one control scale */
+  padding: var(--padding-sm) var(--padding-lg);
+
+  /* Buttons are always pill-shaped (design.md invariant) */
+  border-radius: var(--radius-full);
+
+  /* Typography — the clickable-control face, same as Button */
+  font-family: var(--font-paragraph-em-family);
+  font-weight: var(--font-paragraph-em-weight);
+  font-size: var(--font-paragraph-em-size);
+  line-height: var(--font-paragraph-em-line-height);
+  letter-spacing: var(--font-paragraph-em-letter-spacing);
+  text-align: center;
+
+  /* The field is transparent by design: the ring and glow are the button */
+  background: transparent;
+  color: var(--color-text-primary);
+
+  transition: opacity var(--motion-duration-base) var(--motion-ease-standard);
+
+  /* Reset */
+  cursor: pointer;
+  border: none;
+  text-decoration: none;
+}
+
+/* The gradient ring: a conic gradient painted across the whole button, then
+   masked to the border band (two fills, exclude-composited, inset by the
+   border width). The gradient repeats back to its start colour so the seam
+   at 360° is invisible while it turns. */
+.ds-ai-button::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  padding: var(--border-xs);
+  background: conic-gradient(
+    from var(--ds-ai-button-angle),
+    var(--color-ai-gradient-start),
+    var(--color-ai-gradient-mid),
+    var(--color-ai-gradient-end),
+    var(--color-ai-gradient-mid),
+    var(--color-ai-gradient-start)
+  );
+  /* Standard properties only — the build pipeline prefixes per its browser
+     targets, and hand-written -webkit- duplicates confuse its merging. */
+  mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  mask-composite: exclude;
+  pointer-events: none;
+  /* ds-allow(motion): ambient signature rotation, tuned by eye — deliberately
+     far slower than the interaction-scale motion tokens */
+  animation: ds-ai-button-turn 7s linear infinite;
+}
+
+/* The glow: the same gradient, blurred behind the button at low opacity.
+   A colour effect, not an elevation shadow — depth stays token-owned. */
+.ds-ai-button::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: conic-gradient(
+    from var(--ds-ai-button-angle),
+    var(--color-ai-gradient-start),
+    var(--color-ai-gradient-mid),
+    var(--color-ai-gradient-end),
+    var(--color-ai-gradient-mid),
+    var(--color-ai-gradient-start)
+  );
+  /* The glow's spread; a length with no token family, chosen by eye. */
+  --ds-ai-button-glow: 14px;
+  filter: blur(var(--ds-ai-button-glow));
+  opacity: 0.3;
+  z-index: -1;
+  pointer-events: none;
+  transition: opacity var(--motion-duration-base) var(--motion-ease-standard);
+  /* ds-allow(motion): same ambient rotation as the ring, kept in phase */
+  animation: ds-ai-button-turn 7s linear infinite;
+}
+
+@keyframes ds-ai-button-turn {
+  to {
+    --ds-ai-button-angle: 360deg;
+  }
+}
+
+/* Icon rides the icon-size scale */
+.ds-ai-button__icon {
+  --icon-size: var(--icon-size-md);
+  line-height: 1;
+}
+
+/* States */
+.ds-ai-button:hover::after {
+  opacity: 0.55;
+}
+
+.ds-ai-button:focus-visible {
+  outline: var(--border-md) solid var(--color-action-primary-bg);
+  outline-offset: 2px;
+}
+
+.ds-ai-button--disabled,
+.ds-ai-button:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.ds-ai-button--disabled::before,
+.ds-ai-button--disabled::after,
+.ds-ai-button:disabled::before,
+.ds-ai-button:disabled::after {
+  animation-play-state: paused;
+}
+
+/* Sizes */
+.ds-ai-button--compact {
+  padding: var(--padding-xs) var(--padding-sm-md);
+  font-size: var(--font-paragraph-sm-em-size);
+  line-height: var(--font-paragraph-sm-em-line-height);
+  letter-spacing: var(--font-paragraph-sm-em-letter-spacing);
+}
+
+.ds-ai-button--compact .ds-ai-button__icon {
+  --icon-size: var(--icon-size-sm);
+}
+
+/* Reduced motion: the ring and glow stay, the turning stops. */
+@media (prefers-reduced-motion: reduce) {
+  .ds-ai-button::before,
+  .ds-ai-button::after {
+    animation: none;
+  }
+}

package/components/AiButton/AiButton.d.ts

@@ -0,0 +1,36 @@
+import { default as React } from 'react';
+/** Props owned by AiButton itself — everything else falls through to the DOM node. */
+type AiButtonOwnProps = {
+    /** Button text content */
+    label?: string;
+    /** Leading icon — Material Symbol name (string) or custom element (ReactNode) */
+    icon?: string | React.ReactNode;
+    /** Button size */
+    size?: 'default' | 'compact';
+    /** Whether the button is disabled */
+    disabled?: boolean;
+    /** Optional href — renders as <a> instead of <button> */
+    href?: string;
+    /** Optional target attribute for links */
+    target?: string;
+    /** Optional rel attribute for links */
+    rel?: string;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface AiButtonProps extends AiButtonOwnProps, Omit<React.ComponentPropsWithoutRef<'button'>, keyof AiButtonOwnProps | 'type'> {
+}
+/**
+ * The AI entry point. Icon and label on a transparent field, ringed by the
+ * AI gradient (`--color-ai-gradient-*`) rotating slowly, with a soft glow of
+ * the same gradient behind it. The treatment is the design system's signal
+ * for "a model answers here": ordinary actions keep the flat action teal,
+ * and this ring is reserved for AI surfaces so neither affordance dilutes
+ * the other.
+ *
+ * Renders a `<button>`, or an `<a>` when `href` is supplied. Forwards a ref
+ * to whichever element it renders, and spreads unrecognised props onto it.
+ * The rotation pauses under `prefers-reduced-motion`; the ring and glow stay.
+ */
+export declare const AiButton: React.ForwardRefExoticComponent<AiButtonProps & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
+export {};

package/components/AiButton/AiButton.js

@@ -0,0 +1,58 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import React from "react";
+import "./AiButton.css";
+import "../../fonts/material-symbols.css";
+const AiButton = React.forwardRef(
+  ({
+    label = "Ask AI",
+    icon = "auto_awesome",
+    size = "default",
+    disabled,
+    href,
+    target,
+    rel,
+    className = "",
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-ai-button";
+    const classes = [
+      baseClass,
+      `${baseClass}--${size}`,
+      disabled && `${baseClass}--disabled`,
+      className
+    ].filter(Boolean).join(" ");
+    const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+      icon && (typeof icon === "string" ? /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon material-symbols-rounded`, "aria-hidden": "true", children: icon }) : /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon`, "aria-hidden": "true", children: icon })),
+      /* @__PURE__ */ jsx("span", { className: `${baseClass}__text`, children: label })
+    ] });
+    if (href && !disabled) {
+      return /* @__PURE__ */ jsx(
+        "a",
+        {
+          ...rest,
+          ref,
+          className: classes,
+          href,
+          target,
+          rel,
+          children: content
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ...rest,
+        ref,
+        type: "button",
+        className: classes,
+        disabled,
+        children: content
+      }
+    );
+  }
+);
+AiButton.displayName = "AiButton";
+export {
+  AiButton
+};

package/components/AlertDialog/AlertDialog.css

@@ -81,11 +81,11 @@
    ============================================ */
 
 .ds-alert-dialog__title {
-  font-family: var(--font-heading-6-family);
-  font-size: var(--font-heading-6-size);
-  font-weight: var(--font-heading-6-weight);
-  line-height: var(--font-heading-6-line-height);
-  letter-spacing: var(--font-heading-6-letter-spacing);
+  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);
   color: var(--color-text-primary);
   margin: 0;
 }

package/components/Button/Button.d.ts

@@ -29,9 +29,15 @@ type ButtonOwnProps = {
     ariaCurrent?: boolean;
     /** Additional CSS classes */
     className?: string;
-    /** @deprecated Use `variant` instead. */
+    /**
+     * Legacy alias for `variant`.
+     *
+     * @deprecated Use `variant` instead.
+     */
     priority?: 'primary' | 'secondary' | 'tertiary' | 'destructive';
     /**
+     * Documentation-only interaction state.
+     *
      * @deprecated Use `disabled` for the disabled state.
      *
      * Documentation-only affordance for rendering a *static* interaction state in
@@ -39,9 +45,15 @@ type ButtonOwnProps = {
      * pseudo-classes and needs no prop — for docs, prefer `className="ds-button--hover"`.
      */
     state?: 'default' | 'hover' | 'active' | 'disabled';
-    /** @deprecated Use `iconLeft` instead. */
+    /**
+     * Legacy alias for `iconLeft`.
+     *
+     * @deprecated Use `iconLeft` instead.
+     */
     icon?: string;
     /**
+     * Legacy toggle for showing the text label.
+     *
      * @deprecated Will be removed once `label` loses its default in the next major;
      * an icon-only button will simply omit `label`.
      */

package/components/ButtonGroup/ButtonGroup.js

@@ -17,15 +17,8 @@ const ButtonGroup = ({
       children: buttons.map((button, index) => /* @__PURE__ */ jsx(
         Button,
         {
-          priority: button.priority || "tertiary",
-          state: button.state || "default",
-          label: button.label,
-          iconLeft: button.iconLeft,
-          iconRight: button.iconRight,
-          icon: button.icon,
-          onClick: button.onClick,
-          href: button.href,
-          ariaCurrent: button.ariaCurrent
+          ...button,
+          variant: button.variant ?? button.priority ?? "tertiary"
         },
         index
       ))

package/components/ChatHeader/ChatHeader.css

@@ -0,0 +1,35 @@
+/* ============================================
+   CHAT HEADER COMPONENT
+   Top row of a chat surface: title on the
+   left, controls on the right. No divider —
+   it floats free of the transcript.
+   ============================================ */
+
+/* Base */
+.ds-chat-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--gap-md);
+  padding: var(--padding-xs) var(--padding-md);
+}
+
+/* Title */
+.ds-chat-header__title {
+  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);
+  color: var(--color-text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Actions */
+.ds-chat-header__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-xs);
+  flex-shrink: 0;
+}

package/components/ChatHeader/ChatHeader.d.ts

@@ -0,0 +1,30 @@
+import { default as React } from 'react';
+/** Props owned by ChatHeader itself — everything else falls through to the root element. */
+type ChatHeaderOwnProps = {
+    /**
+     * The chat or assistant name. Deliberately shadows the native `title`
+     * tooltip attribute — a header's title is content, not a tooltip. Pass a
+     * string for the default treatment, or your own heading element.
+     */
+    title?: React.ReactNode;
+    /**
+     * Trailing controls: a new-chat CircularButton, a view switcher, a close
+     * button. The slot only lays them out — each control owns its behaviour.
+     */
+    actions?: React.ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface ChatHeaderProps extends ChatHeaderOwnProps, Omit<React.ComponentPropsWithoutRef<'header'>, keyof ChatHeaderOwnProps> {
+}
+/**
+ * ChatHeader is the top row of a chat surface: the conversation's name on the
+ * left, its controls on the right. It draws no bottom border — like the
+ * composer below, it floats free of the transcript, and the thread's own
+ * padding provides the separation.
+ *
+ * Purely presentational, so it renders from a Server Component; the controls
+ * passed into `actions` bring their own interactivity.
+ */
+export declare const ChatHeader: React.ForwardRefExoticComponent<ChatHeaderProps & React.RefAttributes<HTMLElement>>;
+export {};

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