@robr0/design-system 0.1.0 → 0.3.0

package/components/Checkbox/Checkbox.d.ts

@@ -1,5 +1,6 @@
 import { default as React } from 'react';
-export interface CheckboxProps {
+/** Props owned by Checkbox itself — everything else falls through to the wrapper. */
+type CheckboxOwnProps = {
     /** Label text */
     label?: string;
     /** Whether the checkbox is checked */
@@ -10,18 +11,25 @@ export interface CheckboxProps {
     disabled?: boolean;
     /** Component size */
     size?: 'default' | 'compact';
-    /** Callback when toggled */
-    onChange?: (checked: boolean) => void;
+    /** Called with the next checked state when toggled */
+    onCheckedChange?: (checked: boolean) => void;
     /** Additional CSS classes */
     className?: string;
-    /** Accessible label override */
+    /** @deprecated Use `onCheckedChange` instead. */
+    onChange?: (checked: boolean) => void;
+    /** @deprecated Pass the native `aria-label` attribute instead. */
     ariaLabel?: string;
-    /** HTML name attribute */
+    /**
+     * @deprecated No-op. This component renders a `<div role="checkbox">`, not a
+     * native `<input>`, so it cannot participate in native form submission.
+     * Declared only so the attribute is not forwarded to an element that rejects it.
+     */
     name?: string;
-    /** HTML id attribute */
-    id?: string;
+};
+export interface CheckboxProps extends CheckboxOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof CheckboxOwnProps> {
 }
-export interface CheckboxGroupProps {
+export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLDivElement>>;
+type CheckboxGroupOwnProps = {
     /** Group label */
     label?: string;
     /** Checkbox options */
@@ -36,10 +44,14 @@ export interface CheckboxGroupProps {
     direction?: 'vertical' | 'horizontal';
     /** Component size */
     size?: 'default' | 'compact';
-    /** Callback when selection changes */
-    onChange?: (values: string[]) => void;
+    /** Called with the next selected values */
+    onValuesChange?: (values: string[]) => void;
     /** Additional CSS classes */
     className?: string;
+    /** @deprecated Use `onValuesChange` instead. */
+    onChange?: (values: string[]) => void;
+};
+export interface CheckboxGroupProps extends CheckboxGroupOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof CheckboxGroupOwnProps> {
 }
-export declare const CheckboxGroup: ({ label, items, values, direction, size, onChange, className, }: CheckboxGroupProps) => React.JSX.Element;
-export declare const Checkbox: ({ label, checked, indeterminate, disabled, size, onChange, className, ariaLabel, }: CheckboxProps) => React.JSX.Element;
+export declare const CheckboxGroup: React.ForwardRefExoticComponent<CheckboxGroupProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/Checkbox/Checkbox.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import "react";
+import React from "react";
 import "./Checkbox.css";
 const CheckIcon = () => /* @__PURE__ */ jsx(
   "svg",
@@ -31,94 +31,108 @@ const MinusIcon = () => /* @__PURE__ */ jsx(
     viewBox: "0 0 14 14",
     fill: "none",
     "aria-hidden": "true",
-    children: /* @__PURE__ */ jsx(
-      "path",
+    children: /* @__PURE__ */ jsx("path", { d: "M2 7H12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
+  }
+);
+const Checkbox = React.forwardRef(
+  ({
+    label,
+    checked = false,
+    indeterminate = false,
+    disabled = false,
+    size = "default",
+    onCheckedChange,
+    onChange,
+    className = "",
+    ariaLabel,
+    name: _name,
+    onClick,
+    onKeyDown,
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-checkbox";
+    const classes = [
+      baseClass,
+      size === "compact" ? `${baseClass}--compact` : "",
+      checked ? `${baseClass}--checked` : "",
+      indeterminate && !checked ? `${baseClass}--indeterminate` : "",
+      disabled ? `${baseClass}--disabled` : "",
+      className
+    ].filter(Boolean).join(" ");
+    const toggle = () => {
+      if (disabled) return;
+      onCheckedChange?.(!checked);
+      onChange?.(!checked);
+    };
+    const handleClick = (e) => {
+      onClick?.(e);
+      toggle();
+    };
+    const handleKeyDown = (e) => {
+      onKeyDown?.(e);
+      if (e.key === " " || e.key === "Enter") {
+        e.preventDefault();
+        toggle();
+      }
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
       {
-        d: "M2 7H12",
-        stroke: "currentColor",
-        strokeWidth: "2",
-        strokeLinecap: "round"
+        ...rest,
+        ref,
+        className: classes,
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        role: "checkbox",
+        "aria-checked": indeterminate && !checked ? "mixed" : checked,
+        "aria-disabled": disabled,
+        "aria-label": ariaLabel || rest["aria-label"] || label,
+        tabIndex: disabled ? -1 : 0,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: `${baseClass}__box`, children: indeterminate && !checked ? /* @__PURE__ */ jsx(MinusIcon, {}) : /* @__PURE__ */ jsx(CheckIcon, {}) }),
+          label && /* @__PURE__ */ jsx("span", { className: `${baseClass}__label`, children: label })
+        ]
       }
-    )
+    );
   }
 );
-const CheckboxGroup = ({
-  label,
-  items,
-  values = [],
-  direction = "vertical",
-  size = "default",
-  onChange,
-  className = ""
-}) => {
-  const baseClass = "ds-checkbox-group";
-  const directionClass = `${baseClass}--${direction}`;
-  const classes = [baseClass, directionClass, className].filter(Boolean).join(" ");
-  const handleToggle = (itemValue) => {
-    if (!onChange) return;
-    const next = values.includes(itemValue) ? values.filter((v) => v !== itemValue) : [...values, itemValue];
-    onChange(next);
-  };
-  return /* @__PURE__ */ jsxs("div", { className: classes, role: "group", "aria-label": label, children: [
-    label && /* @__PURE__ */ jsx("span", { className: `${baseClass}__label`, children: label }),
-    /* @__PURE__ */ jsx("div", { className: `${baseClass}__items`, children: items.map((item) => /* @__PURE__ */ jsx(
-      Checkbox,
-      {
-        label: item.label,
-        checked: values.includes(item.value),
-        disabled: item.disabled,
-        size,
-        onChange: () => handleToggle(item.value)
-      },
-      item.value
-    )) })
-  ] });
-};
-const Checkbox = ({
-  label,
-  checked = false,
-  indeterminate = false,
-  disabled = false,
-  size = "default",
-  onChange,
-  className = "",
-  ariaLabel
-}) => {
-  const baseClass = "ds-checkbox";
-  const checkedClass = checked ? `${baseClass}--checked` : "";
-  const indeterminateClass = indeterminate && !checked ? `${baseClass}--indeterminate` : "";
-  const disabledClass = disabled ? `${baseClass}--disabled` : "";
-  const sizeClass = size === "compact" ? `${baseClass}--compact` : "";
-  const classes = [baseClass, sizeClass, checkedClass, indeterminateClass, disabledClass, className].filter(Boolean).join(" ");
-  const handleClick = () => {
-    if (!disabled && onChange) {
-      onChange(!checked);
-    }
-  };
-  const handleKeyDown = (e) => {
-    if (e.key === " " || e.key === "Enter") {
-      e.preventDefault();
-      handleClick();
-    }
-  };
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: classes,
-      onClick: handleClick,
-      onKeyDown: handleKeyDown,
-      role: "checkbox",
-      "aria-checked": indeterminate && !checked ? "mixed" : checked,
-      "aria-disabled": disabled,
-      "aria-label": ariaLabel || label,
-      tabIndex: disabled ? -1 : 0,
-      children: [
-        /* @__PURE__ */ jsx("div", { className: `${baseClass}__box`, children: indeterminate && !checked ? /* @__PURE__ */ jsx(MinusIcon, {}) : /* @__PURE__ */ jsx(CheckIcon, {}) }),
-        label && /* @__PURE__ */ jsx("span", { className: `${baseClass}__label`, children: label })
-      ]
-    }
-  );
-};
+Checkbox.displayName = "Checkbox";
+const CheckboxGroup = React.forwardRef(
+  ({
+    label,
+    items,
+    values = [],
+    direction = "vertical",
+    size = "default",
+    onValuesChange,
+    onChange,
+    className = "",
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-checkbox-group";
+    const classes = [baseClass, `${baseClass}--${direction}`, className].filter(Boolean).join(" ");
+    const handleToggle = (itemValue) => {
+      const next = values.includes(itemValue) ? values.filter((v) => v !== itemValue) : [...values, itemValue];
+      onValuesChange?.(next);
+      onChange?.(next);
+    };
+    return /* @__PURE__ */ jsxs("div", { ...rest, ref, className: classes, role: "group", "aria-label": label, children: [
+      label && /* @__PURE__ */ jsx("span", { className: `${baseClass}__label`, children: label }),
+      /* @__PURE__ */ jsx("div", { className: `${baseClass}__items`, children: items.map((item) => /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          label: item.label,
+          checked: values.includes(item.value),
+          disabled: item.disabled,
+          size,
+          onCheckedChange: () => handleToggle(item.value)
+        },
+        item.value
+      )) })
+    ] });
+  }
+);
+CheckboxGroup.displayName = "CheckboxGroup";
 export {
   Checkbox,
   CheckboxGroup

package/components/CircularButton/CircularButton.css

@@ -196,6 +196,17 @@
   background-color: var(--color-action-passive-bg-active);
 }
 
+/* ============================================
+   LOADING
+   Keeps the variant's full-colour appearance (no disabled dim);
+   the spinner replaces the icon and inherits its colour.
+   ============================================ */
+
+.ds-circular-button--loading {
+  cursor: progress;
+  pointer-events: none;
+}
+
 /* ============================================
    FOCUS
    ============================================ */

package/components/CircularButton/CircularButton.d.ts

@@ -7,6 +7,12 @@ export interface CircularButtonProps {
     state?: 'default' | 'hover' | 'active' | 'disabled';
     /** Button size */
     size?: 'default' | 'compact';
+    /**
+     * Shows a spinner in place of the icon and blocks interaction while an
+     * async action runs. Keeps the variant's full-colour appearance (unlike
+     * the disabled state) and sets `aria-busy` on the rendered element.
+     */
+    loading?: boolean;
     /** Accessible label */
     ariaLabel: string;
     /** Optional click handler */
@@ -27,4 +33,4 @@ export interface CircularButtonProps {
  * A round button containing a single icon, available in
  * primary and secondary variants with default and compact sizes.
  */
-export declare const CircularButton: ({ icon, priority, state, size, ariaLabel, onClick, href, target, rel, "aria-describedby": ariaDescribedby, className, }: CircularButtonProps) => import("react").JSX.Element;
+export declare const CircularButton: ({ icon, priority, state, size, loading, ariaLabel, onClick, href, target, rel, "aria-describedby": ariaDescribedby, className, }: CircularButtonProps) => import("react").JSX.Element;

package/components/CircularButton/CircularButton.js

@@ -1,4 +1,5 @@
 import { jsx } from "react/jsx-runtime";
+import { Spinner } from "../Spinner/Spinner.js";
 import "./CircularButton.css";
 import "../../fonts/material-symbols.css";
 const CircularButton = ({
@@ -6,6 +7,7 @@ const CircularButton = ({
   priority = "primary",
   state = "default",
   size = "default",
+  loading,
   ariaLabel,
   onClick,
   href,
@@ -18,10 +20,18 @@ const CircularButton = ({
   const variantClass = `${baseClass}--${priority}`;
   const stateClass = `${baseClass}--${state}`;
   const sizeClass = `${baseClass}--${size}`;
-  const classes = [baseClass, variantClass, stateClass, sizeClass, className].filter(Boolean).join(" ");
+  const isLoading = Boolean(loading);
+  const classes = [
+    baseClass,
+    variantClass,
+    stateClass,
+    sizeClass,
+    isLoading && `${baseClass}--loading`,
+    className
+  ].filter(Boolean).join(" ");
   const isDisabled = state === "disabled";
-  const children = /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon material-symbols-rounded`, "aria-hidden": "true", children: icon });
-  if (href && !isDisabled) {
+  const children = isLoading ? /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon`, "aria-hidden": "true", children: /* @__PURE__ */ jsx(Spinner, { size: size === "compact" ? "sm" : "md", variant: "inherit" }) }) : /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon material-symbols-rounded`, "aria-hidden": "true", children: icon });
+  if (href && !isDisabled && !isLoading) {
     return /* @__PURE__ */ jsx(
       "a",
       {
@@ -42,7 +52,8 @@ const CircularButton = ({
       type: "button",
       className: classes,
       onClick,
-      disabled: isDisabled,
+      disabled: isDisabled || isLoading,
+      "aria-busy": isLoading || void 0,
       "aria-label": ariaLabel,
       "aria-describedby": ariaDescribedby,
       children

package/components/CodeBlock/CodeBlock.js

@@ -77,7 +77,16 @@ const CodeBlock = ({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx("div", { id: panelId, className: `${baseClass}__panel`, "aria-hidden": collapsed || void 0, children: /* @__PURE__ */ jsx("div", { className: `${baseClass}__panel-inner`, children: /* @__PURE__ */ jsx("pre", { className: `${baseClass}__pre`, children: /* @__PURE__ */ jsx("code", { className: `${baseClass}__code`, children: code }) }) }) })
+    /* @__PURE__ */ jsx("div", { id: panelId, className: `${baseClass}__panel`, "aria-hidden": collapsed || void 0, children: /* @__PURE__ */ jsx("div", { className: `${baseClass}__panel-inner`, children: /* @__PURE__ */ jsx(
+      "pre",
+      {
+        className: `${baseClass}__pre`,
+        tabIndex: collapsed ? -1 : 0,
+        role: "region",
+        "aria-label": filename ? `Code: ${filename}` : language ? `Code: ${language}` : "Code",
+        children: /* @__PURE__ */ jsx("code", { className: `${baseClass}__code`, children: code })
+      }
+    ) }) })
   ] });
 };
 export {

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