@robr0/design-system 0.7.0 → 0.9.0

package/components/EventCalendar/EventCalendar.js

@@ -0,0 +1,214 @@
+"use client";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import React, { useMemo, useState } from "react";
+import "./EventCalendar.css";
+import "../../fonts/material-symbols.css";
+const DAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+const MONTHS = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December"
+];
+function parseMonth(str) {
+  const [y, m] = str.split("-").map(Number);
+  return [y, m - 1];
+}
+function formatMonth(year, monthIndex) {
+  return `${year}-${String(monthIndex + 1).padStart(2, "0")}`;
+}
+function formatDate(date) {
+  const y = date.getFullYear();
+  const m = String(date.getMonth() + 1).padStart(2, "0");
+  const d = String(date.getDate()).padStart(2, "0");
+  return `${y}-${m}-${d}`;
+}
+const EventCalendar = React.forwardRef(
+  ({
+    events = [],
+    month,
+    defaultMonth,
+    onMonthChange,
+    maxEventsPerDay = 3,
+    onEventClick,
+    onDateClick,
+    actions,
+    className = "",
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-event-calendar";
+    const today = useMemo(() => /* @__PURE__ */ new Date(), []);
+    const isControlled = month !== void 0;
+    const [uncontrolledMonth, setUncontrolledMonth] = useState(
+      defaultMonth ?? formatMonth(today.getFullYear(), today.getMonth())
+    );
+    const currentMonth = isControlled ? month : uncontrolledMonth;
+    const [viewYear, viewMonth] = parseMonth(currentMonth);
+    const navigate = (offset) => {
+      const next = new Date(viewYear, viewMonth + offset, 1);
+      const value = formatMonth(next.getFullYear(), next.getMonth());
+      if (!isControlled) setUncontrolledMonth(value);
+      onMonthChange?.(value);
+    };
+    const eventsByDate = useMemo(() => {
+      const map = /* @__PURE__ */ new Map();
+      for (const event of events) {
+        const list = map.get(event.date) ?? [];
+        list.push(event);
+        map.set(event.date, list);
+      }
+      for (const list of map.values()) {
+        list.sort((a, b) => {
+          if (!a.time && !b.time) return 0;
+          if (!a.time) return -1;
+          if (!b.time) return 1;
+          return a.time.localeCompare(b.time);
+        });
+      }
+      return map;
+    }, [events]);
+    const firstDay = new Date(viewYear, viewMonth, 1).getDay();
+    const daysInMonth = new Date(viewYear, viewMonth + 1, 0).getDate();
+    const weekCount = Math.ceil((firstDay + daysInMonth) / 7);
+    const cells = [];
+    for (let i = 0; i < weekCount * 7; i++) {
+      const date = new Date(viewYear, viewMonth, i - firstDay + 1);
+      cells.push({ date, inMonth: date.getMonth() === viewMonth });
+    }
+    const classes = [baseClass, className].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs("div", { ...rest, ref, className: classes, children: [
+      /* @__PURE__ */ jsxs("div", { className: `${baseClass}__header`, children: [
+        /* @__PURE__ */ jsxs("span", { className: `${baseClass}__month`, children: [
+          MONTHS[viewMonth],
+          " ",
+          viewYear
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: `${baseClass}__nav`, children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: `${baseClass}__nav-btn material-symbols-rounded`,
+              onClick: () => navigate(-1),
+              "aria-label": "Previous month",
+              children: "chevron_left"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: `${baseClass}__nav-btn material-symbols-rounded`,
+              onClick: () => navigate(1),
+              "aria-label": "Next month",
+              children: "chevron_right"
+            }
+          )
+        ] }),
+        actions && /* @__PURE__ */ jsx("div", { className: `${baseClass}__actions`, children: actions })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: `${baseClass}__weekdays`, "aria-hidden": "true", children: DAYS.map((day) => /* @__PURE__ */ jsx("div", { className: `${baseClass}__weekday`, children: day }, day)) }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `${baseClass}__grid`,
+          role: "group",
+          "aria-label": `${MONTHS[viewMonth]} ${viewYear}`,
+          children: cells.map(({ date, inMonth }) => {
+            const dateStr = formatDate(date);
+            const dayEvents = eventsByDate.get(dateStr) ?? [];
+            const visible = dayEvents.slice(0, maxEventsPerDay);
+            const overflow = dayEvents.length - visible.length;
+            const isToday = date.getFullYear() === today.getFullYear() && date.getMonth() === today.getMonth() && date.getDate() === today.getDate();
+            const dayLabel = date.toLocaleDateString(void 0, {
+              weekday: "long",
+              year: "numeric",
+              month: "long",
+              day: "numeric"
+            });
+            const cellClasses = [
+              `${baseClass}__cell`,
+              !inMonth ? `${baseClass}__cell--outside` : "",
+              isToday ? `${baseClass}__cell--today` : ""
+            ].filter(Boolean).join(" ");
+            return /* @__PURE__ */ jsxs("div", { className: cellClasses, children: [
+              onDateClick ? /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: `${baseClass}__day`,
+                  onClick: () => onDateClick(dateStr),
+                  "aria-label": dayLabel,
+                  "aria-current": isToday ? "date" : void 0,
+                  children: date.getDate()
+                }
+              ) : /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: `${baseClass}__day`,
+                  "aria-label": dayLabel,
+                  "aria-current": isToday ? "date" : void 0,
+                  children: date.getDate()
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: `${baseClass}__events`, children: [
+                visible.map((event) => {
+                  const pillClasses = [
+                    `${baseClass}__event`,
+                    `${baseClass}__event--${event.color ?? "neutral"}`
+                  ].join(" ");
+                  const pillContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx("span", { className: `${baseClass}__event-dot`, "aria-hidden": "true" }),
+                    /* @__PURE__ */ jsx("span", { className: `${baseClass}__event-title`, children: event.title }),
+                    event.time && /* @__PURE__ */ jsx("span", { className: `${baseClass}__event-time`, children: event.time })
+                  ] });
+                  return onEventClick ? /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: pillClasses,
+                      onClick: () => onEventClick(event),
+                      "aria-label": `${event.title}${event.time ? `, ${event.time}` : ""}, ${dayLabel}`,
+                      children: pillContent
+                    },
+                    event.id
+                  ) : /* @__PURE__ */ jsx("span", { className: pillClasses, children: pillContent }, event.id);
+                }),
+                overflow > 0 && (onDateClick ? /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    className: `${baseClass}__more`,
+                    onClick: () => onDateClick(dateStr),
+                    "aria-label": `${overflow} more event${overflow === 1 ? "" : "s"}, ${dayLabel}`,
+                    children: [
+                      "+",
+                      overflow,
+                      " more"
+                    ]
+                  }
+                ) : /* @__PURE__ */ jsxs("span", { className: `${baseClass}__more`, children: [
+                  "+",
+                  overflow,
+                  " more"
+                ] }))
+              ] })
+            ] }, dateStr);
+          })
+        }
+      )
+    ] });
+  }
+);
+EventCalendar.displayName = "EventCalendar";
+export {
+  EventCalendar
+};

package/components/Field/Field.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import React, { useId } from "react";
 import { FieldContext } from "./FieldContext.js";

package/components/Field/FieldContext.js

@@ -1,3 +1,4 @@
+"use client";
 import React from "react";
 const FieldContext = React.createContext(null);
 const useField = () => React.useContext(FieldContext);

package/components/FileInput/FileInput.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from "react/jsx-runtime";
 import React, { useState, useRef, useId } from "react";
 import { Field } from "../Field/Field.js";

package/components/Input/Input.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import React from "react";
 import { Field } from "../Field/Field.js";

package/components/InterruptCard/InterruptCard.css

@@ -4,33 +4,25 @@
    from the agent, a detail slot, and option
    buttons in a footer.
 
-   ToolCall's pending language promoted to a
-   card — the warning pair on icon and border
-   while a decision is owed, routed through a
-   local custom-property pair so the answered
-   state repoints two variables and the whole
-   card drops to monochrome.
+   The card is deliberately quiet — one tone,
+   the standard container border, no status
+   colour. The question and its buttons are
+   the signal; the visually hidden status
+   announcement carries the waiting state.
    ============================================ */
 
 .ds-interrupt-card {
-  --ds-interrupt-card-color: var(--color-status-warning-text);
-  --ds-interrupt-card-border: var(--color-status-warning-border);
+  --ds-interrupt-card-color: var(--color-icon-secondary);
 
   display: flex;
   flex-direction: column;
   width: 100%;
   background-color: var(--color-bg-container-primary);
-  border: var(--border-xs) solid var(--ds-interrupt-card-border);
+  border: var(--border-xs) solid var(--color-bg-container-border);
   border-radius: var(--radius-md);
   overflow: hidden;
 }
 
-/* Decision made — no signal needed */
-.ds-interrupt-card--answered {
-  --ds-interrupt-card-color: var(--color-text-secondary);
-  --ds-interrupt-card-border: var(--color-bg-container-border);
-}
-
 /* ============================================
    HEADER
    ============================================ */
@@ -39,7 +31,7 @@
   display: flex;
   align-items: flex-start;
   gap: var(--gap-sm);
-  padding: var(--padding-sm) var(--padding-sm-md);
+  padding: var(--padding-sm-md) var(--padding-md);
 }
 
 .ds-interrupt-card__icon {
@@ -88,7 +80,7 @@
    ============================================ */
 
 .ds-interrupt-card__detail {
-  padding: 0 var(--padding-sm-md) var(--padding-sm);
+  padding: 0 var(--padding-md) var(--padding-sm-md);
 }
 
 .ds-interrupt-card__detail > :first-child {
@@ -111,9 +103,8 @@
   align-items: center;
   justify-content: flex-end;
   gap: var(--gap-sm);
-  padding: var(--padding-sm) var(--padding-sm-md);
+  padding: var(--padding-sm-md) var(--padding-md);
   border-top: var(--border-xs) solid var(--color-divider);
-  background-color: var(--color-bg-container-secondary);
 }
 
 /* ============================================
@@ -127,9 +118,8 @@
   align-items: center;
   justify-content: flex-end;
   gap: var(--gap-xs);
-  padding: var(--padding-sm) var(--padding-sm-md);
+  padding: var(--padding-sm-md) var(--padding-md);
   border-top: var(--border-xs) solid var(--color-divider);
-  background-color: var(--color-bg-container-secondary);
   font-family: var(--font-paragraph-sm-family);
   font-size: var(--font-paragraph-sm-size);
   font-weight: var(--font-paragraph-sm-weight);

package/components/InterruptCard/InterruptCard.d.ts

@@ -22,8 +22,7 @@ type InterruptCardOwnProps = {
     onValueChange?: (value: string) => void;
     /**
      * The already-chosen value. When set, the card renders its answered state:
-     * the warning signal drops to monochrome and the options are replaced by an
-     * echo of the chosen label.
+     * the options are replaced by a quiet echo of the chosen label.
      */
     value?: string;
     /** Override the echoed text in the answered state (default: the chosen option's label). */
@@ -43,10 +42,10 @@ export interface InterruptCardProps extends InterruptCardOwnProps, Omit<React.Co
  * with option buttons for the person to decide. "Allow this file edit?" —
  * allow once, always allow, deny.
  *
- * Unanswered it wears ToolCall's pending language promoted to a card: the
- * warning pair on icon and border, options in a footer outside the content.
- * Once `value` is set the decision is made, so the signal drops to monochrome
- * and the footer echoes the chosen label.
+ * The card stays quiet in both states: one tone, the standard container
+ * border, options in a footer outside the content. Once `value` is set the
+ * decision is made and the footer echoes the chosen label; a visually hidden
+ * status announcement carries the waiting state for screen readers.
  *
  * Fully controlled: the card never stores the answer itself — `onValueChange`
  * reports the choice and `value` renders it.

package/components/MessageCard/MessageCard.css

@@ -106,7 +106,6 @@
   align-items: center;
   justify-content: flex-end;
   gap: var(--gap-sm);
-  padding: var(--padding-sm) var(--padding-sm-md);
+  padding: var(--padding-sm-md) var(--padding-md);
   border-top: var(--border-xs) solid var(--color-divider);
-  background-color: var(--color-bg-container-secondary);
 }

package/components/ModelPicker/ModelPicker.css

@@ -0,0 +1,240 @@
+/* ============================================
+   MODEL PICKER COMPONENT
+   A quiet pill trigger showing the current
+   model, and a floating panel of models with
+   descriptions — plus an optional effort row.
+
+   Sized for Composer's action bar: the trigger
+   reads as chrome, not as a call to action, so
+   the send button keeps the only teal.
+   ============================================ */
+
+.ds-model-picker {
+  position: relative;
+  display: inline-flex;
+}
+
+/* ============================================
+   TRIGGER
+   ============================================ */
+
+.ds-model-picker__trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gap-xxs);
+  padding: var(--padding-xxs) var(--padding-sm);
+  background-color: var(--color-action-passive-bg);
+  border: none;
+  border-radius: var(--radius-full);
+  cursor: pointer;
+  color: var(--color-text-secondary);
+  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);
+  transition: background-color var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-model-picker__trigger:hover {
+  background-color: var(--color-action-passive-bg-hover);
+}
+
+.ds-model-picker__trigger:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: 2px;
+}
+
+.ds-model-picker__trigger:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.ds-model-picker__trigger-label {
+  white-space: nowrap;
+}
+
+.ds-model-picker__chevron {
+  --icon-size: var(--icon-size-sm);
+
+  color: var(--color-icon-secondary);
+  transition: transform var(--motion-duration-slow) var(--motion-ease-standard);
+}
+
+.ds-model-picker--open .ds-model-picker__chevron {
+  transform: rotate(180deg);
+}
+
+/* ============================================
+   PANEL
+   ============================================ */
+
+.ds-model-picker__panel {
+  position: absolute;
+  left: 0;
+  z-index: 10;
+  min-width: 260px;
+  display: flex;
+  flex-direction: column;
+  /* Page background, not container: the container fill is semi-transparent
+     in dark mode, and a floating panel must not show text through itself */
+  background-color: var(--color-bg-page-primary);
+  border: var(--border-xs) solid var(--color-bg-container-border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-floating);
+  overflow: hidden;
+}
+
+.ds-model-picker--bottom .ds-model-picker__panel {
+  top: calc(100% + var(--gap-xxs));
+}
+
+.ds-model-picker--top .ds-model-picker__panel {
+  bottom: calc(100% + var(--gap-xxs));
+}
+
+/* ============================================
+   MODEL LIST
+   ============================================ */
+
+.ds-model-picker__list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-xxs);
+  margin: 0;
+  padding: var(--padding-xxs);
+  list-style: none;
+}
+
+.ds-model-picker__option {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-sm);
+  padding: var(--padding-xxs) var(--padding-sm);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: background-color var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-model-picker__option:hover,
+.ds-model-picker__option--focused {
+  background-color: var(--color-bg-container-secondary);
+}
+
+.ds-model-picker__option--disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.ds-model-picker__option--disabled:hover {
+  background-color: transparent;
+}
+
+.ds-model-picker__option-main {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+.ds-model-picker__option-label {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-xs);
+  color: var(--color-text-primary);
+  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);
+}
+
+.ds-model-picker__option-badge {
+  padding: 0 var(--padding-xs);
+  background-color: var(--color-status-info-bg);
+  border-radius: var(--radius-full);
+  color: var(--color-status-info-text);
+  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);
+}
+
+.ds-model-picker__option-description {
+  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-model-picker__check {
+  --icon-size: var(--icon-size-sm);
+
+  flex: none;
+  color: var(--color-action-primary-text-tertiary);
+}
+
+/* ============================================
+   EFFORT ROW
+   ============================================ */
+
+.ds-model-picker__effort {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-sm);
+  padding: var(--padding-xs) var(--padding-sm);
+  border-top: var(--border-xs) solid var(--color-divider);
+}
+
+.ds-model-picker__effort-label {
+  flex: 1 1 auto;
+  color: var(--color-text-secondary);
+  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);
+}
+
+.ds-model-picker__effort-options {
+  display: inline-flex;
+  gap: var(--gap-xxs);
+  padding: var(--padding-xxxs);
+  background-color: var(--color-bg-container-secondary);
+  border-radius: var(--radius-full);
+}
+
+.ds-model-picker__effort-option {
+  padding: var(--padding-xxxs) var(--padding-sm);
+  background: none;
+  border: none;
+  border-radius: var(--radius-full);
+  cursor: pointer;
+  color: var(--color-text-secondary);
+  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);
+  transition:
+    background-color var(--motion-duration-fast) var(--motion-ease-standard),
+    color var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-model-picker__effort-option:hover {
+  color: var(--color-text-primary);
+}
+
+.ds-model-picker__effort-option:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: -2px;
+}
+
+.ds-model-picker__effort-option--selected {
+  background-color: var(--color-bg-container-primary);
+  color: var(--color-text-primary);
+  box-shadow: var(--shadow-floating);
+}

package/components/ModelPicker/ModelPicker.d.ts

@@ -0,0 +1,60 @@
+import { default as React } from 'react';
+export interface ModelPickerModel {
+    /** Display name, e.g. "Fable 5". */
+    label: string;
+    /** Stable identifier reported through `onValueChange`. */
+    value: string;
+    /** One line on what the model is good at or how fast it is. */
+    description?: string;
+    /** Small trailing tag, e.g. "New". */
+    badge?: string;
+    /** Whether this model can be chosen. */
+    disabled?: boolean;
+}
+export interface ModelPickerEffortOption {
+    /** Display label, e.g. "Medium". */
+    label: string;
+    /** Stable identifier reported through `onEffortChange`. */
+    value: string;
+}
+/** Props owned by ModelPicker itself — everything else falls through to the root element. */
+type ModelPickerOwnProps = {
+    /** The models on offer, in display order. */
+    models: ModelPickerModel[];
+    /** Selected model value for controlled use. Pair with `onValueChange`. */
+    value?: string;
+    /** Initially selected model value for uncontrolled use. Defaults to the first model. */
+    defaultValue?: string;
+    /** Fires with the newly selected model's value. */
+    onValueChange?: (value: string) => void;
+    /**
+     * Selected effort level for controlled use. Setting this (or `defaultEffort`)
+     * is what makes the effort row appear at all.
+     */
+    effort?: string;
+    /** Initially selected effort level for uncontrolled use. */
+    defaultEffort?: string;
+    /** Fires with the newly selected effort value. */
+    onEffortChange?: (effort: string) => void;
+    /** The effort levels on offer. Defaults to low, medium and high. */
+    effortOptions?: ModelPickerEffortOption[];
+    /** Which side of the trigger the panel opens on. In a composer pinned to the bottom of the screen, use `top`. */
+    placement?: 'bottom' | 'top';
+    /** Whether the whole control is disabled. */
+    disabled?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface ModelPickerProps extends ModelPickerOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof ModelPickerOwnProps> {
+}
+/**
+ * ModelPicker is the model selector for a chat surface: a quiet pill trigger
+ * showing the current model, and a floating panel listing every model with a
+ * one-line description — plus, when an effort value is provided, a row of
+ * effort levels below a divider.
+ *
+ * Built for Composer's `actions` slot, but freestanding anywhere. Forwards a
+ * ref to the root element and spreads unrecognised props onto it.
+ */
+export declare const ModelPicker: React.ForwardRefExoticComponent<ModelPickerProps & React.RefAttributes<HTMLDivElement>>;
+export {};