@robr0/design-system 0.1.0

package/components/ColourSwatch/ColourSwatch.css

@@ -0,0 +1,88 @@
+/* ============================================
+   COLOUR SWATCH COMPONENT
+   Tall card that displays a colour token with
+   Primitive, Hex, and RGB values in a box.
+   ============================================ */
+
+.ds-colour-swatch {
+  /* Layout */
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  /* Sizing */
+  flex: 1 1 0;
+  min-width: 250px;
+  height: 360px;
+
+  /* Appearance */
+  border: var(--border-xs) solid var(--color-bg-container-border);
+  border-radius: var(--radius-xl); /* 24px */
+  padding: var(--padding-lg); /* 20px */
+  overflow: hidden;
+  position: relative;
+}
+
+/* Status variant — 1px full border */
+.ds-colour-swatch--status {
+  border: 1px solid;
+}
+
+/* ============================================
+   TITLE BOX
+   Semi-transparent container at card top,
+   matching the values box treatment for
+   readability on any swatch colour.
+   ============================================ */
+
+.ds-colour-swatch__title-box {
+  background: var(--color-bg-container-primary-semi);
+  border-radius: var(--radius-md); /* 12px */
+  padding: var(--padding-sm) var(--padding-md); /* 8px 16px */
+  align-self: flex-start;
+}
+
+.ds-colour-swatch__title {
+  font-family: var(--font-paragraph-family);
+  font-size: var(--font-heading-3-size);
+  font-weight: var(--font-heading-3-weight);
+  line-height: var(--font-heading-3-line-height);
+  letter-spacing: var(--font-heading-3-letter-spacing);
+  color: var(--color-text-primary);
+}
+
+/* ============================================
+   VALUES BOX
+   Semi-transparent container at card bottom
+   ============================================ */
+
+.ds-colour-swatch__values {
+  background: var(--color-bg-container-primary-semi);
+  border-radius: var(--radius-md); /* 12px */
+  padding: var(--padding-sm) var(--padding-md); /* 8px 16px */
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+/* Row: label + value pair */
+.ds-colour-swatch__row {
+  display: flex;
+  gap: var(--gap-md); /* 16px */
+  font-size: var(--font-paragraph-size);
+  font-weight: var(--font-paragraph-weight);
+  line-height: var(--font-paragraph-line-height);
+  color: var(--color-text-primary);
+}
+
+/* Label column (e.g. "Primitive", "Hex", "RGB") */
+.ds-colour-swatch__label {
+  flex-shrink: 0;
+  min-width: 70px;
+  color: var(--color-text-tertiary);
+}
+
+/* Data column */
+.ds-colour-swatch__data {
+  word-break: break-word;
+}

package/components/ColourSwatch/ColourSwatch.d.ts

@@ -0,0 +1,34 @@
+import { default as React } from 'react';
+export interface ColourSwatchValues {
+    /** The primitive token name this colour maps to (e.g. "--teal--07--") — omit to hide the row */
+    primitive?: string;
+    /** The hex value (e.g. "#118AB2") or rgba string */
+    hex: string;
+    /** The RGB breakdown (e.g. "17 / 138 / 178") */
+    rgb: string;
+}
+export interface ColourSwatchProps {
+    /** Display label for the swatch (e.g. "Primary", "Red") */
+    label: string;
+    /** CSS custom property used as background (e.g. "--color-core-ui-primary") */
+    cssVar: string;
+    /** Values to display for dark theme */
+    dark: ColourSwatchValues;
+    /** Values to display for light theme — defaults to dark values if omitted */
+    light?: ColourSwatchValues;
+    /** Which theme is currently active — controls which values are shown */
+    theme?: 'dark' | 'light';
+    /** Render as a status swatch with left border accent */
+    status?: boolean;
+    /** CSS custom property for the status left border colour */
+    borderVar?: string;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * ColourSwatch component from Figma design system
+ * Displays a colour swatch card with a values box showing
+ * Primitive, Hex, and RGB. Values switch when theme changes.
+ * Used on Semantic colours and Primitive colours pages.
+ */
+export declare const ColourSwatch: ({ label, cssVar, dark, light, theme, status, borderVar, className, }: ColourSwatchProps) => React.JSX.Element;

package/components/ColourSwatch/ColourSwatch.js

@@ -0,0 +1,42 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+import "./ColourSwatch.css";
+const ColourSwatch = ({
+  label,
+  cssVar,
+  dark,
+  light,
+  theme = "dark",
+  status = false,
+  borderVar,
+  className = ""
+}) => {
+  const baseClass = "ds-colour-swatch";
+  const statusClass = status ? `${baseClass}--status` : "";
+  const classes = [baseClass, statusClass, className].filter(Boolean).join(" ");
+  const values = theme === "light" && light ? light : dark;
+  const style = {
+    backgroundColor: `var(${cssVar})`,
+    ...status && borderVar ? { borderColor: `var(${borderVar})` } : {}
+  };
+  return /* @__PURE__ */ jsxs("div", { className: classes, style, children: [
+    /* @__PURE__ */ jsx("div", { className: `${baseClass}__title-box`, children: /* @__PURE__ */ jsx("h3", { className: `${baseClass}__title`, children: label }) }),
+    /* @__PURE__ */ jsxs("div", { className: `${baseClass}__values`, children: [
+      values.primitive && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__row`, children: [
+        /* @__PURE__ */ jsx("span", { className: `${baseClass}__label`, children: "Primitive" }),
+        /* @__PURE__ */ jsx("span", { className: `${baseClass}__data`, children: values.primitive })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: `${baseClass}__row`, children: [
+        /* @__PURE__ */ jsx("span", { className: `${baseClass}__label`, children: "Hex" }),
+        /* @__PURE__ */ jsx("span", { className: `${baseClass}__data`, children: values.hex })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: `${baseClass}__row`, children: [
+        /* @__PURE__ */ jsx("span", { className: `${baseClass}__label`, children: "RGB" }),
+        /* @__PURE__ */ jsx("span", { className: `${baseClass}__data`, children: values.rgb })
+      ] })
+    ] })
+  ] });
+};
+export {
+  ColourSwatch
+};

package/components/Combobox/Combobox.css

@@ -0,0 +1,411 @@
+/* ============================================
+   COMBOBOX COMPONENT
+   Filterable text field + listbox, with optional
+   multi-select chips and async loading state
+   ============================================ */
+
+.ds-combobox {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-sm); /* 8px */
+  width: 100%;
+  position: relative;
+}
+
+/* ============================================
+   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
+   ============================================ */
+
+.ds-combobox__control {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-sm); /* 8px */
+  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 */
+  background-color: var(--color-input-bg-primary);
+  cursor: text;
+  transition: border-color var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-combobox__control:hover {
+  border-color: var(--color-input-border-hover);
+}
+
+.ds-combobox--open .ds-combobox__control,
+.ds-combobox__control:focus-within {
+  border-color: var(--color-input-border-selected);
+}
+
+.ds-combobox__search-icon {
+  --icon-size: var(--icon-size-md);
+  color: var(--color-icon-primary);
+  flex-shrink: 0;
+}
+
+/* ============================================
+   FIELD — chips + text input share one line
+   ============================================ */
+
+.ds-combobox__field {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--gap-xs); /* 4px */
+  flex: 1;
+  min-width: 0;
+}
+
+.ds-combobox__input {
+  flex: 1;
+  min-width: 0;
+  border: none;
+  outline: none;
+  background-color: transparent;
+  padding: 0;
+  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);
+}
+
+.ds-combobox__input::placeholder {
+  color: var(--color-input-text-placeholder);
+}
+
+/* ============================================
+   CHIPS — multi-select selections
+   ============================================ */
+
+.ds-combobox__chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gap-xxs); /* 2px */
+  padding: var(--padding-xxxs) var(--padding-sm); /* 2px 8px */
+  border-radius: var(--radius-full);
+  background-color: var(--color-bg-container-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);
+  color: var(--color-text-primary);
+  max-width: 100%;
+}
+
+.ds-combobox__chip-remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  border-radius: var(--radius-full);
+  background-color: transparent;
+  color: var(--color-icon-primary);
+  cursor: pointer;
+  transition: color var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-combobox__chip-remove:hover {
+  color: var(--color-text-primary);
+}
+
+.ds-combobox__chip-remove:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: 1px;
+}
+
+.ds-combobox__chip-remove .material-symbols-rounded {
+  --icon-size: var(--icon-size-sm);
+}
+
+/* ============================================
+   CLEAR + CHEVRON
+   ============================================ */
+
+.ds-combobox__clear {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  border-radius: var(--radius-full);
+  background-color: transparent;
+  color: var(--color-icon-primary);
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: color var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-combobox__clear:hover {
+  color: var(--color-text-primary);
+}
+
+.ds-combobox__clear:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: 2px;
+}
+
+.ds-combobox__clear .material-symbols-rounded {
+  --icon-size: var(--icon-size-sm);
+}
+
+.ds-combobox__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-combobox--open .ds-combobox__chevron {
+  transform: rotate(180deg);
+}
+
+/* ============================================
+   MENU
+   Floating surface — the one place a shadow is
+   allowed, via the shared elevation token
+   ============================================ */
+
+.ds-combobox__menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  margin-top: var(--gap-xxs); /* 2px */
+  padding: var(--padding-xxs);
+  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: 280px;
+  overflow-y: auto;
+  z-index: 10;
+  box-shadow: var(--shadow-floating);
+  animation: ds-combobox-appear var(--motion-duration-fast) var(--motion-ease-entrance);
+}
+
+@keyframes ds-combobox-appear {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* ============================================
+   OPTION
+   ============================================ */
+
+.ds-combobox__option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--gap-sm);
+  padding: var(--padding-sm) var(--padding-sm-md); /* 8px 12px */
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: background-color var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-combobox__option:hover,
+.ds-combobox__option--focused {
+  background-color: var(--color-action-passive-bg-hover);
+}
+
+.ds-combobox__option--selected .ds-combobox__option-label {
+  color: var(--color-action-primary-text-tertiary);
+}
+
+.ds-combobox__option--disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.ds-combobox__option--disabled:hover {
+  background-color: transparent;
+}
+
+.ds-combobox__option-text {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-xxs);
+  min-width: 0;
+}
+
+.ds-combobox__option-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__option-description {
+  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);
+}
+
+.ds-combobox__check {
+  --icon-size: var(--icon-size-md);
+  color: var(--color-action-primary-bg);
+  flex-shrink: 0;
+}
+
+/* ============================================
+   GROUPS
+   ============================================ */
+
+.ds-combobox__group {
+  list-style: none;
+}
+
+.ds-combobox__group-label {
+  display: block;
+  font-family: var(--font-paragraph-sm-family);
+  font-size: var(--font-paragraph-sm-size);
+  font-weight: var(--font-paragraph-sm-em-weight);
+  line-height: var(--font-paragraph-sm-line-height);
+  letter-spacing: var(--font-paragraph-sm-letter-spacing);
+  color: var(--color-text-tertiary);
+  padding: var(--padding-xs) var(--padding-sm-md);
+  user-select: none;
+}
+
+.ds-combobox__group-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/* ============================================
+   STATUS ROW — loading / empty
+   ============================================ */
+
+.ds-combobox__status {
+  padding: var(--padding-sm) var(--padding-sm-md);
+  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);
+  list-style: none;
+}
+
+/* ============================================
+   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
+   ============================================ */
+
+.ds-combobox--error .ds-combobox__control {
+  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);
+  cursor: not-allowed;
+}
+
+.ds-combobox--disabled .ds-combobox__input {
+  color: var(--color-input-text-disabled);
+  cursor: not-allowed;
+}
+
+.ds-combobox--disabled .ds-combobox__search-icon,
+.ds-combobox--disabled .ds-combobox__chevron {
+  color: var(--color-input-text-disabled);
+}
+
+/* ============================================
+   SIZE — COMPACT
+   ============================================ */
+
+.ds-combobox--compact .ds-combobox__control {
+  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);
+  line-height: var(--font-paragraph-sm-em-line-height);
+  letter-spacing: var(--font-paragraph-sm-em-letter-spacing);
+}
+
+.ds-combobox--compact .ds-combobox__option {
+  padding: var(--padding-xs) var(--padding-sm); /* 6px 8px */
+}
+
+.ds-combobox--compact .ds-combobox__search-icon,
+.ds-combobox--compact .ds-combobox__chevron,
+.ds-combobox--compact .ds-combobox__check {
+  --icon-size: var(--icon-size-sm);
+}
+
+/* ============================================
+   REDUCED MOTION
+   ============================================ */
+
+@media (prefers-reduced-motion: reduce) {
+  .ds-combobox__menu {
+    animation: none;
+  }
+}

package/components/Combobox/Combobox.d.ts

@@ -0,0 +1,73 @@
+import { default as React } from 'react';
+export interface ComboboxOption {
+    /** Display label — also the text matched when filtering */
+    label: string;
+    /** Option value */
+    value: string;
+    /** Optional secondary line shown under the label */
+    description?: string;
+    /** Whether this option is disabled */
+    disabled?: boolean;
+}
+export interface ComboboxOptionGroup {
+    /** Group heading */
+    label: string;
+    /** Options within the group */
+    options: ComboboxOption[];
+}
+export interface ComboboxProps {
+    /** Combobox label text */
+    label?: string;
+    /** Placeholder shown in the text field when nothing is selected */
+    placeholder?: string;
+    /**
+     * Selected value — a `string` in single mode, `string[]` when `multiple`
+     * is set. Leave undefined for an empty selection.
+     */
+    value?: string | string[];
+    /** Available options (flat list) */
+    options: ComboboxOption[];
+    /** Optional grouped options — when provided, `options` is ignored */
+    groups?: ComboboxOptionGroup[];
+    /** Allow selecting more than one option; selections render as removable chips */
+    multiple?: boolean;
+    /** Component size */
+    size?: 'default' | 'compact';
+    /** Whether the combobox is disabled */
+    disabled?: boolean;
+    /** Whether the combobox is required */
+    required?: boolean;
+    /** Error state — shows error styling and message */
+    error?: boolean;
+    /** Helper or error message displayed below the field */
+    helperText?: string;
+    /** Show a loading affordance in the menu — for async option fetching */
+    loading?: boolean;
+    /** Message shown when the filter matches no options */
+    emptyMessage?: string;
+    /** Show a clear button once something is selected */
+    clearable?: boolean;
+    /**
+     * Called with the new selection — a `string` in single mode,
+     * `string[]` when `multiple` is set.
+     */
+    onChange?: (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 */
+    ariaLabel?: string;
+    /** HTML name attribute */
+    name?: string;
+    /** HTML id attribute */
+    id?: string;
+}
+/**
+ * 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.
+ */
+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;