@robr0/design-system 0.8.0 → 0.9.0

package/components/TimePicker/TimePicker.css

@@ -0,0 +1,230 @@
+/* ============================================
+   TIMEPICKER COMPONENT
+   Time-of-day field with a dropdown listbox of
+   generated times. Mirrors Dropdown's anatomy;
+   the trigger is a real <button> styled as an
+   input.
+   ============================================ */
+
+/* ============================================
+   BASE
+   ============================================ */
+
+.ds-timepicker {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-sm); /* 8px */
+  width: 100%;
+  position: relative;
+}
+
+/* ============================================
+   TRIGGER
+   ============================================ */
+
+.ds-timepicker__trigger {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-sm); /* 8px */
+  width: 100%;
+  padding: var(--padding-sm) var(--padding-md); /* 8px 16px */
+  border: var(--border-xs) solid var(--color-input-border-primary);
+  border-radius: var(--radius-md); /* 12px — input shape, not the button pill */
+  background-color: var(--color-input-bg-primary);
+  text-align: left;
+  cursor: pointer;
+  transition: border-color var(--motion-duration-base) var(--motion-ease-standard);
+  outline: none;
+}
+
+.ds-timepicker__trigger:hover:not(:focus-visible):not(:disabled) {
+  border-color: var(--color-input-border-hover);
+}
+
+.ds-timepicker__trigger:focus-visible {
+  border-color: var(--color-input-border-selected);
+}
+
+.ds-timepicker--open .ds-timepicker__trigger {
+  border-color: var(--color-input-border-selected);
+}
+
+/* ============================================
+   CLOCK ICON
+   ============================================ */
+
+.ds-timepicker__icon {
+  --icon-size: var(--icon-size-sm);
+  color: var(--color-icon-primary);
+  flex-shrink: 0;
+}
+
+/* ============================================
+   VALUE / PLACEHOLDER
+   ============================================ */
+
+.ds-timepicker__value {
+  font-family: var(--font-paragraph-em-family);
+  font-size: var(--font-paragraph-em-size);
+  font-weight: var(--font-paragraph-em-weight);
+  line-height: var(--font-paragraph-em-line-height);
+  letter-spacing: var(--font-paragraph-em-letter-spacing);
+  color: var(--color-input-text-primary);
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ds-timepicker__value--placeholder {
+  color: var(--color-input-text-placeholder);
+}
+
+/* ============================================
+   CHEVRON
+   ============================================ */
+
+.ds-timepicker__chevron {
+  --icon-size: var(--icon-size-md);
+  color: var(--color-icon-primary);
+  transition: transform var(--motion-duration-base) var(--motion-ease-standard);
+  flex-shrink: 0;
+}
+
+.ds-timepicker--open .ds-timepicker__chevron {
+  transform: rotate(180deg);
+}
+
+/* ============================================
+   MENU
+   ============================================ */
+
+.ds-timepicker__menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  margin-top: var(--gap-xxs); /* 2px */
+  padding: var(--padding-xxs); /* inset gap on all sides */
+  border: var(--border-xs) solid var(--color-input-border-primary);
+  border-radius: var(--radius-md); /* 12px */
+  background-color: var(--color-bg-page-primary);
+  list-style: none;
+  max-height: 240px;
+  overflow-y: auto;
+  z-index: 10;
+  box-shadow: var(--shadow-floating);
+
+  /* Animation */
+  animation: ds-timepicker-appear var(--motion-duration-fast) var(--motion-ease-entrance);
+}
+
+@keyframes ds-timepicker-appear {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* ============================================
+   OPTION
+   ============================================ */
+
+.ds-timepicker__option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--padding-sm) var(--padding-sm-md); /* 8px 12px */
+  border-radius: var(--radius-sm);
+  font-family: var(--font-paragraph-em-family);
+  font-size: var(--font-paragraph-em-size);
+  font-weight: var(--font-paragraph-em-weight);
+  line-height: var(--font-paragraph-em-line-height);
+  letter-spacing: var(--font-paragraph-em-letter-spacing);
+  font-variant-numeric: tabular-nums;
+  color: var(--color-text-primary);
+  cursor: pointer;
+  transition: background-color var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-timepicker__option:hover {
+  background-color: var(--color-action-passive-bg-hover);
+}
+
+.ds-timepicker__option--focused {
+  background-color: var(--color-action-passive-bg-hover);
+}
+
+.ds-timepicker__option--selected {
+  color: var(--color-action-primary-text-tertiary);
+}
+
+/* ============================================
+   CHECK ICON
+   ============================================ */
+
+.ds-timepicker__check {
+  --icon-size: var(--icon-size-md);
+  color: var(--color-action-primary-bg);
+}
+
+/* ============================================
+   ERROR STATE
+   ============================================ */
+
+.ds-timepicker--error .ds-timepicker__trigger {
+  border-color: var(--color-status-error-border);
+}
+
+/* ============================================
+   DISABLED STATE
+   ============================================ */
+
+.ds-timepicker--disabled .ds-timepicker__trigger {
+  background-color: var(--color-input-bg-disabled);
+  border-color: var(--color-input-border-disabled);
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.ds-timepicker--disabled .ds-timepicker__value {
+  color: var(--color-input-text-disabled);
+}
+
+.ds-timepicker--disabled .ds-timepicker__icon,
+.ds-timepicker--disabled .ds-timepicker__chevron {
+  color: var(--color-input-text-disabled);
+}
+
+/* ============================================
+   SIZE — COMPACT
+   ============================================ */
+
+.ds-timepicker--compact .ds-timepicker__trigger {
+  padding: var(--padding-xs) var(--padding-sm-md); /* 6px 12px */
+}
+
+.ds-timepicker--compact .ds-timepicker__value {
+  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-timepicker--compact .ds-timepicker__chevron {
+  --icon-size: var(--icon-size-sm);
+}
+
+.ds-timepicker--compact .ds-timepicker__option {
+  padding: var(--padding-xs) var(--padding-sm); /* 6px 8px */
+  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-timepicker--compact .ds-timepicker__check {
+  --icon-size: var(--icon-size-sm);
+}

package/components/TimePicker/TimePicker.d.ts

@@ -0,0 +1,46 @@
+import { default as React } from 'react';
+/** Props owned by TimePicker itself — everything else falls through to the trigger button. */
+type TimePickerOwnProps = {
+    /** Label text rendered above the trigger */
+    label?: string;
+    /** Placeholder shown when no time is selected */
+    placeholder?: string;
+    /** Currently selected time as a 24-hour "HH:MM" string (controlled) */
+    value?: string;
+    /** Initially selected time as a 24-hour "HH:MM" string (uncontrolled) */
+    defaultValue?: string;
+    /** Earliest generated option, as a 24-hour "HH:MM" string */
+    minTime?: string;
+    /** Latest generated option, as a 24-hour "HH:MM" string */
+    maxTime?: string;
+    /** Minutes between generated options */
+    stepMinutes?: number;
+    /** Display format for the trigger and options — the value stays a 24-hour "HH:MM" string either way */
+    hourFormat?: '12' | '24';
+    /** Component size */
+    size?: 'default' | 'compact';
+    /** Whether the picker is disabled */
+    disabled?: boolean;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Error state */
+    error?: boolean;
+    /** Helper or error message */
+    helperText?: string;
+    /** Called with the newly selected 24-hour "HH:MM" value */
+    onValueChange?: (value: string) => void;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface TimePickerProps extends TimePickerOwnProps, Omit<React.ComponentPropsWithoutRef<'button'>, keyof TimePickerOwnProps | 'type'> {
+}
+/**
+ * Time-of-day form field. A button-shaped trigger opens a scrollable
+ * `role="listbox"` of times generated from `minTime`/`maxTime`/`stepMinutes`,
+ * with full keyboard navigation. The value is always a 24-hour "HH:MM"
+ * string; `hourFormat` only changes the display.
+ *
+ * Forwards a ref to the trigger button and spreads unrecognised props onto it.
+ */
+export declare const TimePicker: React.ForwardRefExoticComponent<TimePickerProps & React.RefAttributes<HTMLButtonElement>>;
+export {};

package/components/TimePicker/TimePicker.js

@@ -0,0 +1,246 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import React, { useState, useRef, useId, useMemo, useCallback, useEffect } from "react";
+import { Field } from "../Field/Field.js";
+import "./TimePicker.css";
+import "../../fonts/material-symbols.css";
+function parseMinutes(time) {
+  const [h, m] = time.split(":").map(Number);
+  return h * 60 + m;
+}
+function toTimeValue(minutes) {
+  const h = Math.floor(minutes / 60);
+  const m = minutes % 60;
+  return `${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}`;
+}
+function formatTime(time, hourFormat) {
+  if (hourFormat === "24") return time;
+  const [h, m] = time.split(":").map(Number);
+  const suffix = h < 12 ? "AM" : "PM";
+  const hour12 = h % 12 === 0 ? 12 : h % 12;
+  return `${hour12}:${String(m).padStart(2, "0")} ${suffix}`;
+}
+const TimePicker = React.forwardRef(
+  ({
+    label,
+    placeholder = "Select time",
+    value,
+    defaultValue,
+    minTime = "00:00",
+    maxTime = "23:30",
+    stepMinutes = 30,
+    hourFormat = "12",
+    size = "default",
+    disabled = false,
+    required = false,
+    error = false,
+    helperText,
+    onValueChange,
+    className = "",
+    id,
+    ...rest
+  }, ref) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [focusedIndex, setFocusedIndex] = useState(-1);
+    const [internalValue, setInternalValue] = useState(defaultValue);
+    const rootRef = useRef(null);
+    const triggerRef = useRef(null);
+    const listRef = useRef(null);
+    const isControlled = value !== void 0;
+    const selectedValue = isControlled ? value : internalValue;
+    const setTriggerRef = (node) => {
+      triggerRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    };
+    const generatedId = useId();
+    const inputId = id || generatedId;
+    const baseClass = "ds-timepicker";
+    const classes = [
+      baseClass,
+      size === "compact" ? `${baseClass}--compact` : "",
+      isOpen ? `${baseClass}--open` : "",
+      error ? `${baseClass}--error` : "",
+      disabled ? `${baseClass}--disabled` : "",
+      className
+    ].filter(Boolean).join(" ");
+    const timeOptions = useMemo(() => {
+      const step = Math.max(1, Math.floor(stepMinutes));
+      const start = parseMinutes(minTime);
+      const end = parseMinutes(maxTime);
+      const opts = [];
+      for (let mins = start; mins <= end; mins += step) {
+        const v = toTimeValue(mins);
+        opts.push({ value: v, label: formatTime(v, hourFormat) });
+      }
+      return opts;
+    }, [minTime, maxTime, stepMinutes, hourFormat]);
+    const selectedIndex = timeOptions.findIndex((opt) => opt.value === selectedValue);
+    const selectedOption = selectedIndex >= 0 ? timeOptions[selectedIndex] : void 0;
+    const openMenu = () => {
+      setIsOpen(true);
+      setFocusedIndex(selectedIndex >= 0 ? selectedIndex : timeOptions.length > 0 ? 0 : -1);
+    };
+    const closeMenu = () => {
+      setIsOpen(false);
+      setFocusedIndex(-1);
+    };
+    const handleToggle = () => {
+      if (disabled) return;
+      if (isOpen) closeMenu();
+      else openMenu();
+    };
+    const handleSelect = (optionValue) => {
+      if (!isControlled) setInternalValue(optionValue);
+      onValueChange?.(optionValue);
+      closeMenu();
+    };
+    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 handleKeyDown = (e) => {
+      if (disabled) return;
+      switch (e.key) {
+        case "Enter":
+        case " ":
+          e.preventDefault();
+          if (isOpen && focusedIndex >= 0 && timeOptions[focusedIndex]) {
+            handleSelect(timeOptions[focusedIndex].value);
+          } else {
+            handleToggle();
+          }
+          break;
+        case "ArrowDown":
+          e.preventDefault();
+          if (!isOpen) {
+            openMenu();
+          } else {
+            setFocusedIndex((prev) => Math.min(prev + 1, timeOptions.length - 1));
+          }
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          if (!isOpen) {
+            openMenu();
+          } else {
+            setFocusedIndex((prev) => Math.max(prev - 1, 0));
+          }
+          break;
+        case "Home":
+          if (isOpen) {
+            e.preventDefault();
+            setFocusedIndex(0);
+          }
+          break;
+        case "End":
+          if (isOpen) {
+            e.preventDefault();
+            setFocusedIndex(timeOptions.length - 1);
+          }
+          break;
+        case "Escape":
+          closeMenu();
+          break;
+        case "Tab":
+          closeMenu();
+          break;
+      }
+    };
+    useEffect(() => {
+      if (isOpen && focusedIndex >= 0 && listRef.current) {
+        const focusedEl = listRef.current.children[focusedIndex];
+        focusedEl?.scrollIntoView({ block: "nearest" });
+      }
+    }, [focusedIndex, isOpen]);
+    return /* @__PURE__ */ jsxs(
+      Field,
+      {
+        ref: rootRef,
+        className: classes,
+        label,
+        helperText,
+        error,
+        required,
+        disabled,
+        size,
+        id: inputId,
+        children: [
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              ...rest,
+              type: "button",
+              id: inputId,
+              ref: setTriggerRef,
+              className: `${baseClass}__trigger`,
+              "aria-expanded": isOpen,
+              "aria-haspopup": "listbox",
+              "aria-controls": `${inputId}-listbox`,
+              "aria-describedby": helperText ? `${inputId}-helper` : rest["aria-describedby"],
+              "aria-invalid": error || void 0,
+              disabled,
+              onClick: handleToggle,
+              onKeyDown: handleKeyDown,
+              children: [
+                /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon material-symbols-rounded`, "aria-hidden": "true", children: "schedule" }),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: `${baseClass}__value ${!selectedOption ? `${baseClass}__value--placeholder` : ""}`,
+                    children: selectedOption ? selectedOption.label : placeholder
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: `${baseClass}__chevron material-symbols-rounded`, "aria-hidden": "true", children: "expand_more" })
+              ]
+            }
+          ),
+          isOpen && /* @__PURE__ */ jsx(
+            "ul",
+            {
+              className: `${baseClass}__menu`,
+              role: "listbox",
+              id: `${inputId}-listbox`,
+              ref: listRef,
+              "aria-labelledby": label ? `${inputId}-label` : void 0,
+              children: timeOptions.map((option, index) => /* @__PURE__ */ jsxs(
+                "li",
+                {
+                  className: [
+                    `${baseClass}__option`,
+                    option.value === selectedValue ? `${baseClass}__option--selected` : "",
+                    index === focusedIndex ? `${baseClass}__option--focused` : ""
+                  ].filter(Boolean).join(" "),
+                  role: "option",
+                  "aria-selected": option.value === selectedValue,
+                  onClick: () => handleSelect(option.value),
+                  children: [
+                    option.label,
+                    option.value === selectedValue && /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: `${baseClass}__check material-symbols-rounded`,
+                        "aria-hidden": "true",
+                        children: "check"
+                      }
+                    )
+                  ]
+                },
+                option.value
+              ))
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+TimePicker.displayName = "TimePicker";
+export {
+  TimePicker
+};

package/components/Toast/Toast.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useState, useSyncExternalStore, useCallback, useContext, createContext, useRef, useEffect } from "react";
 import ReactDOM from "react-dom";

package/components/ToggleGroup/ToggleGroup.js

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

package/components/ToggleSwitch/ToggleSwitch.js

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

package/components/ToolCall/ToolCall.css

@@ -7,20 +7,19 @@
    The container stays neutral — colour lives in
    the indicator and the status word, so a long
    run of calls reads as a list rather than a
-   wall of tinted cards. The two states a person
-   has to act on, pending and error, also take a
-   coloured border.
+   wall of tinted cards. The border is the
+   standard container hairline in every status;
+   the status word and icon carry the state.
    ============================================ */
 
 .ds-tool-call {
   --ds-tool-call-color: var(--color-text-secondary);
-  --ds-tool-call-border: var(--color-bg-container-border);
 
   display: flex;
   flex-direction: column;
   width: 100%;
   background-color: var(--color-bg-container-primary);
-  border: var(--border-xs) solid var(--ds-tool-call-border);
+  border: var(--border-xs) solid var(--color-bg-container-border);
   border-radius: var(--radius-md);
   overflow: hidden;
 }
@@ -34,7 +33,7 @@
   align-items: center;
   gap: var(--gap-sm);
   width: 100%;
-  padding: var(--padding-xs) var(--padding-sm-md);
+  padding: var(--padding-sm) var(--padding-md);
   background: none;
   border: none;
   text-align: left;
@@ -144,7 +143,6 @@
 
 .ds-tool-call--pending {
   --ds-tool-call-color: var(--color-status-warning-text);
-  --ds-tool-call-border: var(--color-status-warning-border);
 }
 
 .ds-tool-call--running {
@@ -157,7 +155,6 @@
 
 .ds-tool-call--error {
   --ds-tool-call-color: var(--color-status-error-text);
-  --ds-tool-call-border: var(--color-status-error-border);
 }
 
 /* ============================================
@@ -184,7 +181,7 @@
 }
 
 .ds-tool-call--open .ds-tool-call__content {
-  padding: var(--padding-sm-md);
+  padding: var(--padding-md);
   border-top: var(--border-xs) solid var(--color-divider);
 }
 
@@ -207,7 +204,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/ToolCall/ToolCall.js

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

package/components/Tooltip/Tooltip.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useState, useRef, useId, isValidElement, cloneElement } from "react";
 import "./Tooltip.css";