@robr0/design-system 0.2.0 → 0.4.0

package/components/ColorPicker/ColorPicker.css

@@ -0,0 +1,278 @@
+/* ============================================
+   COLORPICKER COMPONENT
+   Swatch trigger + saturation/hue/alpha panel
+
+   Colour-mixing constants: the white/black
+   gradient overlays and the hue spectrum are
+   colour-space physics, not theme decisions —
+   they are written as hsl() literals because no
+   semantic token can represent them. Everything
+   themeable uses tokens as usual.
+
+   ds-allow-file(color): colour-space physics —
+   the gradients and spectrum cannot be theme
+   tokens.
+   ============================================ */
+
+/* Base */
+
+.ds-colorpicker {
+  position: relative;
+  /* Field owns no layout — the root class stacks label, trigger and helper */
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--gap-sm);
+}
+
+/* Trigger */
+
+.ds-colorpicker__trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gap-sm);
+  padding: var(--padding-xxs);
+  border: var(--border-xs) solid var(--color-input-border-primary);
+  border-radius: var(--radius-md);
+  background-color: transparent;
+  cursor: pointer;
+  transition: border-color var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-colorpicker__trigger:hover:not(:disabled) {
+  border-color: var(--color-input-border-hover);
+}
+
+.ds-colorpicker__trigger:focus-visible {
+  outline: none;
+  border-color: var(--color-input-border-selected);
+}
+
+.ds-colorpicker--open .ds-colorpicker__trigger {
+  border-color: var(--color-input-border-selected);
+}
+
+.ds-colorpicker__trigger-swatch {
+  width: 24px;
+  height: 24px;
+  border-radius: var(--radius-sm);
+  /* Checkerboard shows through translucent colours */
+  background-color: var(--color-bg-page-primary);
+  background-image:
+    linear-gradient(var(--ds-cp-color), var(--ds-cp-color)),
+    repeating-conic-gradient(var(--color-bg-container-tertiary) 0% 25%, transparent 0% 50%);
+  background-size: 100% 100%, 8px 8px;
+  box-shadow: inset 0 0 0 var(--border-xs) var(--color-bg-container-border);
+  flex-shrink: 0;
+}
+
+.ds-colorpicker__trigger-text {
+  font-family: var(--font-paragraph-sm-family);
+  font-size: var(--font-paragraph-sm-size);
+  line-height: var(--font-paragraph-sm-line-height);
+  color: var(--color-text-primary);
+  font-variant-numeric: tabular-nums;
+  padding-right: var(--padding-xxs);
+}
+
+/* Sizes */
+
+.ds-colorpicker--compact .ds-colorpicker__trigger-swatch {
+  width: 20px;
+  height: 20px;
+}
+
+/* Panel */
+
+.ds-colorpicker__panel {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  margin-top: var(--gap-xxs);
+  width: 240px;
+  padding: var(--padding-sm-md);
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-sm-md);
+  background-color: var(--color-bg-page-primary);
+  border: var(--border-xs) solid var(--color-input-border-primary);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-floating);
+  z-index: 10;
+}
+
+/* Saturation / brightness area */
+
+.ds-colorpicker__saturation {
+  position: relative;
+  height: 150px;
+  border-radius: var(--radius-sm);
+  cursor: crosshair;
+  touch-action: none;
+  background:
+    linear-gradient(to top, hsl(0 0% 0%), transparent),
+    linear-gradient(to right, hsl(0 0% 100%), transparent),
+    hsl(var(--ds-cp-hue) 100% 50%);
+}
+
+.ds-colorpicker__saturation:focus-visible {
+  outline: var(--border-md) solid var(--color-input-border-selected);
+  outline-offset: var(--border-md);
+}
+
+.ds-colorpicker__handle {
+  position: absolute;
+  left: var(--ds-cp-x);
+  top: var(--ds-cp-y);
+  transform: translate(-50%, -50%);
+  width: 14px;
+  height: 14px;
+  border-radius: var(--radius-full);
+  border: var(--border-md) solid hsl(0 0% 100%);
+  box-shadow: var(--shadow-floating);
+  pointer-events: none;
+}
+
+/* Sliders + preview */
+
+.ds-colorpicker__controls {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-sm-md);
+}
+
+.ds-colorpicker__sliders {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-sm);
+  min-width: 0;
+}
+
+.ds-colorpicker__hue,
+.ds-colorpicker__alpha {
+  appearance: none;
+  -webkit-appearance: none;
+  width: 100%;
+  height: 12px;
+  border-radius: var(--radius-full);
+  outline: none;
+  cursor: pointer;
+}
+
+.ds-colorpicker__hue {
+  background: linear-gradient(
+    to right,
+    hsl(0 100% 50%),
+    hsl(60 100% 50%),
+    hsl(120 100% 50%),
+    hsl(180 100% 50%),
+    hsl(240 100% 50%),
+    hsl(300 100% 50%),
+    hsl(360 100% 50%)
+  );
+}
+
+.ds-colorpicker__alpha {
+  background-color: var(--color-bg-page-primary);
+  background-image:
+    linear-gradient(to right, transparent, var(--ds-cp-solid)),
+    repeating-conic-gradient(var(--color-bg-container-tertiary) 0% 25%, transparent 0% 50%);
+  background-size: 100% 100%, 8px 8px;
+}
+
+.ds-colorpicker__hue::-webkit-slider-thumb,
+.ds-colorpicker__alpha::-webkit-slider-thumb {
+  appearance: none;
+  -webkit-appearance: none;
+  width: 16px;
+  height: 16px;
+  border-radius: var(--radius-full);
+  background: hsl(0 0% 100%);
+  border: var(--border-xs) solid var(--color-bg-container-border);
+  box-shadow: var(--shadow-floating);
+}
+
+.ds-colorpicker__hue::-moz-range-thumb,
+.ds-colorpicker__alpha::-moz-range-thumb {
+  width: 16px;
+  height: 16px;
+  border-radius: var(--radius-full);
+  background: hsl(0 0% 100%);
+  border: var(--border-xs) solid var(--color-bg-container-border);
+  box-shadow: var(--shadow-floating);
+}
+
+.ds-colorpicker__hue:focus-visible,
+.ds-colorpicker__alpha:focus-visible {
+  outline: var(--border-md) solid var(--color-input-border-selected);
+  outline-offset: var(--border-md);
+}
+
+.ds-colorpicker__preview {
+  width: 32px;
+  height: 32px;
+  border-radius: var(--radius-sm);
+  background-color: var(--color-bg-page-primary);
+  background-image:
+    linear-gradient(var(--ds-cp-color), var(--ds-cp-color)),
+    repeating-conic-gradient(var(--color-bg-container-tertiary) 0% 25%, transparent 0% 50%);
+  background-size: 100% 100%, 8px 8px;
+  box-shadow: inset 0 0 0 var(--border-xs) var(--color-bg-container-border);
+  flex-shrink: 0;
+}
+
+/* Hex + alpha inputs */
+
+.ds-colorpicker__inputs {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-sm);
+  padding: var(--padding-xxs) var(--padding-sm);
+  border: var(--border-xs) solid var(--color-input-border-primary);
+  border-radius: var(--radius-md);
+  transition: border-color var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-colorpicker__inputs:focus-within {
+  border-color: var(--color-input-border-selected);
+}
+
+.ds-colorpicker__hash {
+  font-family: var(--font-paragraph-sm-family);
+  font-size: var(--font-paragraph-sm-size);
+  color: var(--color-text-tertiary);
+}
+
+.ds-colorpicker__hex-field {
+  flex: 1;
+  min-width: 0;
+  border: none;
+  background: transparent;
+  outline: none;
+  padding: 0;
+  font-family: var(--font-paragraph-sm-family);
+  font-size: var(--font-paragraph-sm-size);
+  line-height: var(--font-paragraph-sm-line-height);
+  color: var(--color-text-primary);
+  text-transform: uppercase;
+  font-variant-numeric: tabular-nums;
+}
+
+.ds-colorpicker__alpha-value {
+  font-family: var(--font-paragraph-sm-family);
+  font-size: var(--font-paragraph-sm-size);
+  color: var(--color-text-secondary);
+  font-variant-numeric: tabular-nums;
+}
+
+/* States */
+
+.ds-colorpicker--disabled .ds-colorpicker__trigger {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.ds-colorpicker--error .ds-colorpicker__trigger {
+  border-color: var(--color-status-error-border);
+}

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