@robr0/design-system 0.1.0 → 0.3.0

package/components/ColorPicker/ColorPicker.d.ts

@@ -0,0 +1,50 @@
+import { default as React } from 'react';
+/** Props owned by ColorPicker itself — everything else falls through to the trigger <button>. */
+type ColorPickerOwnProps = {
+    /** Field label text */
+    label?: string;
+    /** Current colour as a hex string — 3, 6 or 8 digit, with or without `#` */
+    value?: string;
+    /** Initial colour for uncontrolled use */
+    defaultValue?: string;
+    /**
+     * Convenience callback receiving the colour as an uppercase hex string
+     * (`#RRGGBB`, or `#RRGGBBAA` when `showAlpha` and alpha < 100%). Fires
+     * live while dragging.
+     */
+    onValueChange?: (value: string) => void;
+    /** Show the current hex value as text inside the trigger */
+    showText?: boolean;
+    /** Add an alpha (opacity) slider and emit 8-digit hex when alpha < 100% */
+    showAlpha?: boolean;
+    /** 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;
+    /**
+     * When set, a hidden `<input type="hidden">` carries the current hex value
+     * under this name so the picker participates in native form submission.
+     */
+    name?: string;
+    /** Additional CSS classes — applied to the wrapper, not the trigger */
+    className?: string;
+};
+export interface ColorPickerProps extends ColorPickerOwnProps, Omit<React.ComponentPropsWithoutRef<'button'>, keyof ColorPickerOwnProps | 'type'> {
+}
+/**
+ * Colour picker: a swatch trigger that opens a panel with a
+ * saturation/brightness area, hue slider, optional alpha slider and a hex
+ * field. Works controlled (`value` + `onValueChange`) or uncontrolled
+ * (`defaultValue`).
+ *
+ * Forwards a ref to the trigger `<button>` and spreads unrecognised props
+ * onto it.
+ */
+export declare const ColorPicker: React.ForwardRefExoticComponent<ColorPickerProps & React.RefAttributes<HTMLButtonElement>>;
+export {};

package/components/ColorPicker/ColorPicker.js

@@ -0,0 +1,338 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React, { useState, useRef, useEffect, useCallback } from "react";
+import { Field } from "../Field/Field.js";
+import "./ColorPicker.css";
+const clamp = (n, min, max) => Math.min(max, Math.max(min, n));
+function parseHex(input) {
+  const hex = input.trim().replace(/^#/, "");
+  if (!/^([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(hex)) return null;
+  let r, g, b;
+  let a = 255;
+  if (hex.length === 3) {
+    r = parseInt(hex[0] + hex[0], 16);
+    g = parseInt(hex[1] + hex[1], 16);
+    b = parseInt(hex[2] + hex[2], 16);
+  } else {
+    r = parseInt(hex.slice(0, 2), 16);
+    g = parseInt(hex.slice(2, 4), 16);
+    b = parseInt(hex.slice(4, 6), 16);
+    if (hex.length === 8) a = parseInt(hex.slice(6, 8), 16);
+  }
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const d = max - min;
+  let h = 0;
+  if (d !== 0) {
+    if (max === r) h = 60 * ((g - b) / d % 6);
+    else if (max === g) h = 60 * ((b - r) / d + 2);
+    else h = 60 * ((r - g) / d + 4);
+  }
+  if (h < 0) h += 360;
+  return {
+    // h stays a float — rounding it here makes the hex → HSV → hex round
+    // trip drift by one on some colours.
+    h: clamp(h, 0, 359.999),
+    s: max === 0 ? 0 : d / max * 100,
+    v: max / 255 * 100,
+    a: a / 255 * 100
+  };
+}
+function hsvToRgb({ h, s, v }) {
+  const sf = s / 100;
+  const vf = v / 100;
+  const c = vf * sf;
+  const x = c * (1 - Math.abs(h / 60 % 2 - 1));
+  const m = vf - c;
+  const [r, g, b] = h < 60 ? [c, x, 0] : h < 120 ? [x, c, 0] : h < 180 ? [0, c, x] : h < 240 ? [0, x, c] : h < 300 ? [x, 0, c] : [c, 0, x];
+  return [Math.round((r + m) * 255), Math.round((g + m) * 255), Math.round((b + m) * 255)];
+}
+const channelHex = (n) => n.toString(16).padStart(2, "0").toUpperCase();
+function formatHex(hsva, withAlpha) {
+  const [r, g, b] = hsvToRgb(hsva);
+  const base = `#${channelHex(r)}${channelHex(g)}${channelHex(b)}`;
+  if (withAlpha && hsva.a < 100) {
+    return base + channelHex(Math.round(hsva.a / 100 * 255));
+  }
+  return base;
+}
+function toCssColor(hsva) {
+  const [r, g, b] = hsvToRgb(hsva);
+  return `rgba(${r}, ${g}, ${b}, ${hsva.a / 100})`;
+}
+const ColorPicker = React.forwardRef(
+  ({
+    label,
+    value,
+    defaultValue = "#118AB2",
+    onValueChange,
+    showText = false,
+    showAlpha = false,
+    size = "default",
+    disabled = false,
+    required = false,
+    error = false,
+    helperText,
+    name,
+    className = "",
+    id,
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-colorpicker";
+    const [isOpen, setIsOpen] = useState(false);
+    const [hsva, setHsva] = useState(
+      () => parseHex(value ?? defaultValue) ?? { h: 0, s: 0, v: 0, a: 100 }
+    );
+    const [hexDraft, setHexDraft] = useState(null);
+    const rootRef = useRef(null);
+    const triggerRef = useRef(null);
+    const satRef = useRef(null);
+    const hsvaRef = useRef(hsva);
+    hsvaRef.current = hsva;
+    const lastEmitted = useRef(null);
+    const setTriggerRef = (node) => {
+      triggerRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    };
+    useEffect(() => {
+      if (value == null || value === lastEmitted.current) return;
+      const parsed = parseHex(value);
+      if (parsed) setHsva(parsed);
+    }, [value]);
+    const commit = useCallback(
+      (next) => {
+        setHsva(next);
+        const hex = formatHex(next, showAlpha);
+        lastEmitted.current = hex;
+        onValueChange?.(hex);
+      },
+      [onValueChange, showAlpha]
+    );
+    useEffect(() => {
+      if (!isOpen) return;
+      const onMouseDown = (e) => {
+        if (rootRef.current && !rootRef.current.contains(e.target)) {
+          setIsOpen(false);
+          setHexDraft(null);
+        }
+      };
+      document.addEventListener("mousedown", onMouseDown);
+      return () => document.removeEventListener("mousedown", onMouseDown);
+    }, [isOpen]);
+    const handleRootKeyDown = (e) => {
+      if (e.key === "Escape" && isOpen) {
+        e.stopPropagation();
+        setIsOpen(false);
+        setHexDraft(null);
+        triggerRef.current?.focus();
+      }
+    };
+    const updateFromPointer = useCallback(
+      (clientX, clientY) => {
+        const el = satRef.current;
+        if (!el) return;
+        const rect = el.getBoundingClientRect();
+        const s = clamp((clientX - rect.left) / rect.width * 100, 0, 100);
+        const v = clamp((1 - (clientY - rect.top) / rect.height) * 100, 0, 100);
+        commit({ ...hsvaRef.current, s, v });
+      },
+      [commit]
+    );
+    const handleSatPointerDown = (e) => {
+      e.preventDefault();
+      e.currentTarget.setPointerCapture(e.pointerId);
+      e.currentTarget.focus();
+      updateFromPointer(e.clientX, e.clientY);
+    };
+    const handleSatPointerMove = (e) => {
+      if (e.currentTarget.hasPointerCapture(e.pointerId)) {
+        updateFromPointer(e.clientX, e.clientY);
+      }
+    };
+    const handleSatKeyDown = (e) => {
+      const step = e.shiftKey ? 10 : 2;
+      const { h, s, v, a } = hsvaRef.current;
+      switch (e.key) {
+        case "ArrowLeft":
+          e.preventDefault();
+          commit({ h, s: clamp(s - step, 0, 100), v, a });
+          break;
+        case "ArrowRight":
+          e.preventDefault();
+          commit({ h, s: clamp(s + step, 0, 100), v, a });
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          commit({ h, s, v: clamp(v + step, 0, 100), a });
+          break;
+        case "ArrowDown":
+          e.preventDefault();
+          commit({ h, s, v: clamp(v - step, 0, 100), a });
+          break;
+      }
+    };
+    const displayHex = formatHex(hsva, showAlpha);
+    const handleHexChange = (e) => {
+      const text = e.target.value;
+      setHexDraft(text);
+      const parsed = parseHex(text);
+      if (parsed) {
+        const keepAlpha = text.replace(/^#/, "").length < 8;
+        commit(keepAlpha ? { ...parsed, a: hsvaRef.current.a } : parsed);
+      }
+    };
+    const inputId = id || name || label?.toLowerCase().replace(/\s+/g, "-");
+    const cssColor = toCssColor(hsva);
+    const solidHex = formatHex({ ...hsva, a: 100 }, false);
+    const classes = [
+      baseClass,
+      size === "compact" ? `${baseClass}--compact` : "",
+      isOpen ? `${baseClass}--open` : "",
+      error ? `${baseClass}--error` : "",
+      disabled ? `${baseClass}--disabled` : "",
+      className
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs(
+      Field,
+      {
+        ref: rootRef,
+        className: classes,
+        label,
+        helperText,
+        error,
+        required,
+        disabled,
+        size,
+        id: inputId,
+        onKeyDown: handleRootKeyDown,
+        children: [
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              ...rest,
+              ref: setTriggerRef,
+              type: "button",
+              id: inputId,
+              className: `${baseClass}__trigger`,
+              disabled,
+              "aria-haspopup": "dialog",
+              "aria-expanded": isOpen,
+              "aria-describedby": helperText ? `${inputId}-helper` : rest["aria-describedby"],
+              "aria-invalid": error || void 0,
+              "aria-label": rest["aria-label"] ?? (!label ? `Choose colour, ${displayHex}` : void 0),
+              onClick: () => {
+                if (!disabled) setIsOpen((prev) => !prev);
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: `${baseClass}__trigger-swatch`,
+                    style: { "--ds-cp-color": cssColor },
+                    "aria-hidden": "true"
+                  }
+                ),
+                showText && /* @__PURE__ */ jsx("span", { className: `${baseClass}__trigger-text`, children: displayHex })
+              ]
+            }
+          ),
+          name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: displayHex }),
+          isOpen && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: `${baseClass}__panel`,
+              role: "dialog",
+              "aria-label": label ? `${label} colour picker` : "Colour picker",
+              style: {
+                "--ds-cp-hue": hsva.h,
+                "--ds-cp-color": cssColor,
+                "--ds-cp-solid": solidHex
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    ref: satRef,
+                    className: `${baseClass}__saturation`,
+                    role: "slider",
+                    tabIndex: 0,
+                    "aria-label": "Saturation and brightness",
+                    "aria-valuemin": 0,
+                    "aria-valuemax": 100,
+                    "aria-valuenow": Math.round(hsva.v),
+                    "aria-valuetext": `Saturation ${Math.round(hsva.s)}%, brightness ${Math.round(hsva.v)}%`,
+                    onPointerDown: handleSatPointerDown,
+                    onPointerMove: handleSatPointerMove,
+                    onKeyDown: handleSatKeyDown,
+                    style: {
+                      "--ds-cp-x": `${hsva.s}%`,
+                      "--ds-cp-y": `${100 - hsva.v}%`
+                    },
+                    children: /* @__PURE__ */ jsx("span", { className: `${baseClass}__handle` })
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { className: `${baseClass}__controls`, children: [
+                  /* @__PURE__ */ jsxs("div", { className: `${baseClass}__sliders`, children: [
+                    /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        type: "range",
+                        className: `${baseClass}__hue`,
+                        min: 0,
+                        max: 359,
+                        step: 1,
+                        value: Math.round(hsva.h),
+                        "aria-label": "Hue",
+                        onChange: (e) => commit({ ...hsvaRef.current, h: Number(e.target.value) })
+                      }
+                    ),
+                    showAlpha && /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        type: "range",
+                        className: `${baseClass}__alpha`,
+                        min: 0,
+                        max: 100,
+                        step: 1,
+                        value: Math.round(hsva.a),
+                        "aria-label": "Alpha",
+                        onChange: (e) => commit({ ...hsvaRef.current, a: Number(e.target.value) })
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsx("span", { className: `${baseClass}__preview`, "aria-hidden": "true" })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: `${baseClass}__inputs`, children: [
+                  /* @__PURE__ */ jsx("span", { className: `${baseClass}__hash`, "aria-hidden": "true", children: "#" }),
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      type: "text",
+                      className: `${baseClass}__hex-field`,
+                      value: (hexDraft ?? displayHex).replace(/^#/, ""),
+                      maxLength: 8,
+                      spellCheck: false,
+                      autoComplete: "off",
+                      "aria-label": "Hex colour value",
+                      onChange: handleHexChange,
+                      onFocus: () => setHexDraft(displayHex.replace(/^#/, "")),
+                      onBlur: () => setHexDraft(null)
+                    }
+                  ),
+                  showAlpha && /* @__PURE__ */ jsxs("span", { className: `${baseClass}__alpha-value`, children: [
+                    Math.round(hsva.a),
+                    "%"
+                  ] })
+                ] })
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+ColorPicker.displayName = "ColorPicker";
+export {
+  ColorPicker
+};

package/components/Combobox/Combobox.css

@@ -16,19 +16,6 @@
    LABEL
    ============================================ */
 
-.ds-combobox__label {
-  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-text-primary);
-}
-
-.ds-combobox__required {
-  color: var(--color-core-accent-coral);
-}
-
 /* ============================================
    CONTROL
    ============================================ */
@@ -324,16 +311,6 @@
    HELPER TEXT
    ============================================ */
 
-.ds-combobox__helper {
-  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);
-  margin: 0;
-}
-
 /* ============================================
    ERROR STATE
    ============================================ */
@@ -342,18 +319,10 @@
   border-color: var(--color-status-error-border);
 }
 
-.ds-combobox--error .ds-combobox__helper {
-  color: var(--color-status-error-border);
-}
-
 /* ============================================
    DISABLED STATE
    ============================================ */
 
-.ds-combobox--disabled .ds-combobox__label {
-  color: var(--color-input-text-disabled);
-}
-
 .ds-combobox--disabled .ds-combobox__control {
   background-color: var(--color-input-bg-disabled);
   border-color: var(--color-input-border-disabled);
@@ -378,11 +347,6 @@
   padding: var(--padding-xs) var(--padding-sm-md); /* 6px 12px */
 }
 
-.ds-combobox--compact .ds-combobox__label {
-  font-size: var(--font-paragraph-sm-size);
-  line-height: var(--font-paragraph-sm-line-height);
-}
-
 .ds-combobox--compact .ds-combobox__input,
 .ds-combobox--compact .ds-combobox__option-label {
   font-size: var(--font-paragraph-sm-em-size);

package/components/Combobox/Combobox.d.ts

@@ -15,7 +15,8 @@ export interface ComboboxOptionGroup {
     /** Options within the group */
     options: ComboboxOption[];
 }
-export interface ComboboxProps {
+/** Props owned by Combobox itself — everything else falls through to the wrapper. */
+type ComboboxOwnProps = {
     /** Combobox label text */
     label?: string;
     /** Placeholder shown in the text field when nothing is selected */
@@ -51,23 +52,34 @@ export interface ComboboxProps {
      * Called with the new selection — a `string` in single mode,
      * `string[]` when `multiple` is set.
      */
-    onChange?: (value: string | string[]) => void;
+    onValueChange?: (value: string | string[]) => void;
     /** Called as the user types, for async/server-side filtering */
     onSearchChange?: (query: string) => void;
     /** Skip built-in filtering — use when options are filtered upstream */
     manualFiltering?: boolean;
     /** Additional CSS classes */
     className?: string;
-    /** Accessible name override */
+    /** @deprecated Use `onValueChange` instead. */
+    onChange?: (value: string | string[]) => void;
+    /** @deprecated Pass the native `aria-label` attribute instead. */
     ariaLabel?: string;
-    /** HTML name attribute */
+    /**
+     * Used only as a fallback for deriving the element id (`id || name || generated`).
+     *
+     * Note: Combobox renders a `<div>` wrapper around a text input, not a native
+     * `<select>`, so `name` does **not** make the selection participate in native
+     * form submission.
+     */
     name?: string;
-    /** HTML id attribute */
-    id?: string;
+};
+export interface ComboboxProps extends ComboboxOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof ComboboxOwnProps> {
 }
 /**
  * Combobox component — a text field combined with a filterable listbox.
  * Unlike Dropdown (a static select), it narrows options as the user types
  * and supports multi-select chips and async option loading.
+ *
+ * Forwards a ref to the wrapping element and spreads unrecognised props onto it.
  */
-export declare const Combobox: ({ label, placeholder, value, options, groups, multiple, size, disabled, required, error, helperText, loading, emptyMessage, clearable, onChange, onSearchChange, manualFiltering, className, ariaLabel, name, id, }: ComboboxProps) => React.JSX.Element;
+export declare const Combobox: React.ForwardRefExoticComponent<ComboboxProps & React.RefAttributes<HTMLDivElement>>;
+export {};