@robr0/design-system 0.6.0 → 0.8.0

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

package/components/ModelPicker/ModelPicker.js

@@ -0,0 +1,217 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React, { useId, useRef, useState, useCallback, useEffect } from "react";
+import "./ModelPicker.css";
+import "../../fonts/material-symbols.css";
+const DEFAULT_EFFORT_OPTIONS = [
+  { label: "Low", value: "low" },
+  { label: "Medium", value: "medium" },
+  { label: "High", value: "high" }
+];
+const ModelPicker = React.forwardRef(
+  ({
+    models,
+    value,
+    defaultValue,
+    onValueChange,
+    effort,
+    defaultEffort,
+    onEffortChange,
+    effortOptions = DEFAULT_EFFORT_OPTIONS,
+    placement = "bottom",
+    disabled = false,
+    className = "",
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-model-picker";
+    const id = useId();
+    const listboxId = `${id}-listbox`;
+    const rootRef = useRef(null);
+    const listRef = useRef(null);
+    const [isOpen, setIsOpen] = useState(false);
+    const [focusedIndex, setFocusedIndex] = useState(-1);
+    const isValueControlled = value !== void 0;
+    const [uncontrolledValue, setUncontrolledValue] = useState(
+      defaultValue ?? models[0]?.value
+    );
+    const currentValue = isValueControlled ? value : uncontrolledValue;
+    const isEffortControlled = effort !== void 0;
+    const [uncontrolledEffort, setUncontrolledEffort] = useState(defaultEffort);
+    const currentEffort = isEffortControlled ? effort : uncontrolledEffort;
+    const hasEffort = currentEffort !== void 0;
+    const setRootRef = (node) => {
+      rootRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    };
+    const selectedModel = models.find((m) => m.value === currentValue);
+    const selectModel = (modelValue) => {
+      if (!isValueControlled) setUncontrolledValue(modelValue);
+      onValueChange?.(modelValue);
+      setIsOpen(false);
+    };
+    const selectEffort = (effortValue) => {
+      if (!isEffortControlled) setUncontrolledEffort(effortValue);
+      onEffortChange?.(effortValue);
+    };
+    const handleClickOutside = useCallback((e) => {
+      if (rootRef.current && !rootRef.current.contains(e.target)) {
+        setIsOpen(false);
+      }
+    }, []);
+    useEffect(() => {
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, [handleClickOutside]);
+    const handleTriggerKeyDown = (e) => {
+      if (disabled) return;
+      switch (e.key) {
+        case "Enter":
+        case " ":
+          e.preventDefault();
+          if (isOpen && focusedIndex >= 0 && !models[focusedIndex]?.disabled) {
+            selectModel(models[focusedIndex].value);
+          } else {
+            setIsOpen((prev) => !prev);
+            setFocusedIndex(-1);
+          }
+          break;
+        case "ArrowDown":
+          e.preventDefault();
+          if (!isOpen) {
+            setIsOpen(true);
+          } else {
+            setFocusedIndex((prev) => {
+              let next = prev + 1;
+              while (next < models.length && models[next].disabled) next++;
+              return next < models.length ? next : prev;
+            });
+          }
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          if (isOpen) {
+            setFocusedIndex((prev) => {
+              let next = prev - 1;
+              while (next >= 0 && models[next].disabled) next--;
+              return next >= 0 ? next : prev;
+            });
+          }
+          break;
+        case "Escape":
+          setIsOpen(false);
+          break;
+      }
+    };
+    useEffect(() => {
+      if (isOpen && focusedIndex >= 0 && listRef.current) {
+        const focusedEl = listRef.current.children[focusedIndex];
+        focusedEl?.scrollIntoView({ block: "nearest" });
+      }
+    }, [focusedIndex, isOpen]);
+    const classes = [
+      baseClass,
+      `${baseClass}--${placement}`,
+      isOpen ? `${baseClass}--open` : "",
+      disabled ? `${baseClass}--disabled` : "",
+      className
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs("div", { ...rest, ref: setRootRef, className: classes, children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: `${baseClass}__trigger`,
+          disabled,
+          "aria-expanded": isOpen,
+          "aria-haspopup": "listbox",
+          "aria-controls": isOpen ? listboxId : void 0,
+          "aria-label": rest["aria-label"] ?? "Choose a model",
+          onClick: () => {
+            setIsOpen((prev) => !prev);
+            setFocusedIndex(-1);
+          },
+          onKeyDown: handleTriggerKeyDown,
+          children: [
+            /* @__PURE__ */ jsx("span", { className: `${baseClass}__trigger-label`, children: selectedModel ? selectedModel.label : "Choose a model" }),
+            /* @__PURE__ */ jsx("span", { className: `${baseClass}__chevron material-symbols-rounded`, "aria-hidden": "true", children: "expand_more" })
+          ]
+        }
+      ),
+      isOpen && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__panel`, children: [
+        /* @__PURE__ */ jsx(
+          "ul",
+          {
+            className: `${baseClass}__list`,
+            role: "listbox",
+            id: listboxId,
+            ref: listRef,
+            "aria-label": "Model",
+            children: models.map((model, index) => /* @__PURE__ */ jsxs(
+              "li",
+              {
+                className: [
+                  `${baseClass}__option`,
+                  model.value === currentValue ? `${baseClass}__option--selected` : "",
+                  model.disabled ? `${baseClass}__option--disabled` : "",
+                  index === focusedIndex ? `${baseClass}__option--focused` : ""
+                ].filter(Boolean).join(" "),
+                role: "option",
+                "aria-selected": model.value === currentValue,
+                "aria-disabled": model.disabled,
+                onClick: () => !model.disabled && selectModel(model.value),
+                children: [
+                  /* @__PURE__ */ jsxs("span", { className: `${baseClass}__option-main`, children: [
+                    /* @__PURE__ */ jsxs("span", { className: `${baseClass}__option-label`, children: [
+                      model.label,
+                      model.badge && /* @__PURE__ */ jsx("span", { className: `${baseClass}__option-badge`, children: model.badge })
+                    ] }),
+                    model.description && /* @__PURE__ */ jsx("span", { className: `${baseClass}__option-description`, children: model.description })
+                  ] }),
+                  model.value === currentValue && /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: `${baseClass}__check material-symbols-rounded`,
+                      "aria-hidden": "true",
+                      children: "check"
+                    }
+                  )
+                ]
+              },
+              model.value
+            ))
+          }
+        ),
+        hasEffort && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__effort`, children: [
+          /* @__PURE__ */ jsx("span", { className: `${baseClass}__effort-label`, id: `${id}-effort-label`, children: "Effort" }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `${baseClass}__effort-options`,
+              role: "radiogroup",
+              "aria-labelledby": `${id}-effort-label`,
+              children: effortOptions.map((option) => /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: [
+                    `${baseClass}__effort-option`,
+                    option.value === currentEffort ? `${baseClass}__effort-option--selected` : ""
+                  ].filter(Boolean).join(" "),
+                  role: "radio",
+                  "aria-checked": option.value === currentEffort,
+                  onClick: () => selectEffort(option.value),
+                  children: option.label
+                },
+                option.value
+              ))
+            }
+          )
+        ] })
+      ] })
+    ] });
+  }
+);
+ModelPicker.displayName = "ModelPicker";
+export {
+  ModelPicker
+};