@robr0/design-system 0.7.0 → 0.8.0

package/components/EventCalendar/EventCalendar.js

@@ -0,0 +1,213 @@
+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/ModelPicker/ModelPicker.css

@@ -0,0 +1,238 @@
+/* ============================================
+   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;
+  background-color: var(--color-bg-container-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 {};