@dalcvil/steam-green-react 0.1.0 → 1.0.0

package/dist/components/Checkbox/Checkbox.css

@@ -0,0 +1,116 @@
+/*
+ * Green Steam checkbox.
+ *
+ * The signature detail is the **inverted** bevel: dark on top/left, light on
+ * bottom/right, so the box reads as a hole in the panel rather than a raised
+ * button (docs/components/Checkbox.md). Getting it the same way round as
+ * `.vgui-button` is the common mistake.
+ *
+ * The sprite set is replaced with CSS geometry — a rotated bordered box for
+ * `chkSelStd`, a filled rect for `chkIndeterminate` — so no assets ship.
+ *
+ * Deviations required by WCAG:
+ *
+ *   - `chk*Focus`'s dotted `#000` inner rectangle is 1.15:1 on the box face, so
+ *     the shipped ring is `--vgui-focus-ring` at the same `-3px` offset (the
+ *     geometry still reads as VGUI); the literal ring is the `.vgui-crisp`
+ *     opt-in.
+ *   - The 15×15 box is below the 24×24 minimum target, so the whole row is the
+ *     hit area: the control is wrapped in a `<label>`, exactly as VGUI's
+ *     `labelTextOffset` made the label part of the clickable region.
+ */
+
+.vgui-checkbox {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  font: inherit;
+  color: var(--vgui-text);
+  cursor: pointer;
+}
+
+/* Hidden but present and focusable — never `display: none`. */
+.vgui-checkbox__input {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.vgui-checkbox__box {
+  position: relative;
+  flex: 0 0 auto;
+  box-sizing: border-box;
+  inline-size: var(--vgui-checkbox-size);
+  block-size: var(--vgui-checkbox-size);
+  background-color: var(--vgui-surface);
+  border-top: var(--vgui-bevel-width) solid var(--vgui-bevel-dark);
+  border-left: var(--vgui-bevel-width) solid var(--vgui-bevel-dark);
+  border-bottom: var(--vgui-bevel-width) solid var(--vgui-bevel-light);
+  border-right: var(--vgui-bevel-width) solid var(--vgui-bevel-light);
+}
+
+/* `chkSelStd` as two borders on a rotated box: a shape, not a colour signal. */
+.vgui-checkbox__input:checked ~ .vgui-checkbox__box::after {
+  content: '';
+  position: absolute;
+  left: 4px;
+  top: 1px;
+  inline-size: 5px;
+  block-size: 8px;
+  border-right: 2px solid var(--vgui-text-strong);
+  border-bottom: 2px solid var(--vgui-text-strong);
+  transform: rotate(45deg);
+}
+
+/*
+ * `chkIndeterminate` is a horizontal bar. It is easy to miss on its own, which
+ * is why the real input carries the state and announces "mixed".
+ */
+.vgui-checkbox__input:indeterminate ~ .vgui-checkbox__box::after {
+  content: '';
+  position: absolute;
+  left: 2px;
+  top: 5px;
+  inline-size: 9px;
+  block-size: 3px;
+  background-color: var(--vgui-text-strong);
+  transform: none;
+  border: 0;
+}
+
+.vgui-checkbox__input:focus-visible ~ .vgui-checkbox__box {
+  outline: var(--vgui-focus-ring);
+  outline-offset: var(--vgui-focus-ring-offset);
+}
+
+/* Valve's literal `chk*Focus` ring, reachable only through the opt-in. */
+.vgui-crisp .vgui-checkbox__input:focus-visible ~ .vgui-checkbox__box {
+  outline: var(--vgui-focus-ring-valve);
+  outline-offset: var(--vgui-focus-ring-valve-offset);
+}
+
+/* DisabledText1 over DisabledText2 at +1px +1px. Colour is decorative here:
+ * the `disabled` attribute is what carries the meaning. */
+.vgui-checkbox__input:disabled ~ .vgui-checkbox__label {
+  color: var(--vgui-text-disabled);
+  text-shadow: 1px 1px 0 var(--vgui-text-disabled-shadow);
+}
+
+.vgui-checkbox__input:disabled ~ .vgui-checkbox__box {
+  cursor: not-allowed;
+}
+
+.vgui-checkbox--label-end {
+  flex-direction: row-reverse;
+}
+
+.vgui-checkbox__label {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}

package/dist/components/Checkbox/Checkbox.css.d.ts

@@ -0,0 +1 @@
+export {}

package/dist/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,19 @@
+import type { InputHTMLAttributes, ReactNode } from 'react';
+import './Checkbox.css';
+export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+    /** The label. Rendered as part of the clickable area. */
+    label?: ReactNode;
+    /** Render the indeterminate third state. */
+    indeterminate?: boolean;
+    /** Put the box after the label instead of before. */
+    labelPosition?: 'start' | 'end';
+}
+/**
+ * A 15×15 box with an *inset* bevel — a hole in the panel, not a raised button.
+ *
+ * The real `<input type="checkbox">` stays in the DOM, focusable and hidden by
+ * `clip-path`, so `Space`, form participation and the platform's "mixed"
+ * announcement all keep working (docs/components/Checkbox.md, "Accessibility").
+ */
+export declare const Checkbox: import("react").ForwardRefExoticComponent<CheckboxProps & import("react").RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=Checkbox.d.ts.map

package/dist/components/Checkbox/Checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAE3D,OAAO,gBAAgB,CAAA;AAEvB,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IACxF,yDAAyD;IACzD,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,4CAA4C;IAC5C,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,qDAAqD;IACrD,aAAa,CAAC,EAAE,OAAO,GAAG,KAAK,CAAA;CAChC;AAED;;;;;;GAMG;AACH,eAAO,MAAM,QAAQ,4GAyCnB,CAAA"}

package/dist/components/Checkbox/Checkbox.js

@@ -0,0 +1,51 @@
+import { forwardRef, useCallback, useEffect, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import "./Checkbox.css";
+//#region src/components/Checkbox/Checkbox.tsx
+/**
+* A 15×15 box with an *inset* bevel — a hole in the panel, not a raised button.
+*
+* The real `<input type="checkbox">` stays in the DOM, focusable and hidden by
+* `clip-path`, so `Space`, form participation and the platform's "mixed"
+* announcement all keep working (docs/components/Checkbox.md, "Accessibility").
+*/
+var Checkbox = forwardRef(function Checkbox({ className, label, indeterminate = false, labelPosition = "start", ...rest }, ref) {
+	const inputRef = useRef(null);
+	const setInputRef = useCallback((node) => {
+		inputRef.current = node;
+		if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	}, [ref]);
+	useEffect(() => {
+		if (inputRef.current) inputRef.current.indeterminate = indeterminate;
+	}, [indeterminate]);
+	const classes = ["vgui-checkbox"];
+	if (labelPosition === "end") classes.push("vgui-checkbox--label-end");
+	if (className) classes.push(className);
+	const box = /* @__PURE__ */ jsx("span", {
+		className: "vgui-checkbox__box",
+		"aria-hidden": "true"
+	});
+	return /* @__PURE__ */ jsxs("label", {
+		className: classes.join(" "),
+		children: [
+			/* @__PURE__ */ jsx("input", {
+				ref: setInputRef,
+				type: "checkbox",
+				className: "vgui-checkbox__input",
+				...rest
+			}),
+			labelPosition === "end" ? null : box,
+			label == null ? null : /* @__PURE__ */ jsx("span", {
+				className: "vgui-checkbox__label",
+				children: label
+			}),
+			labelPosition === "end" ? box : null
+		]
+	});
+});
+Checkbox.displayName = "Checkbox";
+//#endregion
+export { Checkbox };
+
+//# sourceMappingURL=Checkbox.js.map

package/dist/components/Checkbox/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","names":[],"sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { forwardRef, useCallback, useEffect, useRef } from 'react'\nimport type { InputHTMLAttributes, ReactNode } from 'react'\n\nimport './Checkbox.css'\n\nexport interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {\n  /** The label. Rendered as part of the clickable area. */\n  label?: ReactNode\n  /** Render the indeterminate third state. */\n  indeterminate?: boolean\n  /** Put the box after the label instead of before. */\n  labelPosition?: 'start' | 'end'\n}\n\n/**\n * A 15×15 box with an *inset* bevel — a hole in the panel, not a raised button.\n *\n * The real `<input type=\"checkbox\">` stays in the DOM, focusable and hidden by\n * `clip-path`, so `Space`, form participation and the platform's \"mixed\"\n * announcement all keep working (docs/components/Checkbox.md, \"Accessibility\").\n */\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(\n  { className, label, indeterminate = false, labelPosition = 'start', ...rest },\n  ref,\n) {\n  const inputRef = useRef<HTMLInputElement | null>(null)\n\n  const setInputRef = useCallback(\n    (node: HTMLInputElement | null) => {\n      inputRef.current = node\n      if (typeof ref === 'function') ref(node)\n      else if (ref) ref.current = node\n    },\n    [ref],\n  )\n\n  // `indeterminate` is a DOM property with no attribute, so it can only be\n  // written imperatively — and it never touches `checked` (the doc's React API).\n  useEffect(() => {\n    if (inputRef.current) inputRef.current.indeterminate = indeterminate\n  }, [indeterminate])\n\n  if (import.meta.env.DEV && label == null) {\n    console.warn(\n      'Checkbox: no `label` means the 15×15 box is the whole hit area and the control has no accessible name.',\n    )\n  }\n\n  const classes = ['vgui-checkbox']\n  if (labelPosition === 'end') classes.push('vgui-checkbox--label-end')\n  if (className) classes.push(className)\n\n  const box = <span className=\"vgui-checkbox__box\" aria-hidden=\"true\" />\n\n  return (\n    <label className={classes.join(' ')}>\n      <input ref={setInputRef} type=\"checkbox\" className=\"vgui-checkbox__input\" {...rest} />\n      {labelPosition === 'end' ? null : box}\n      {label == null ? null : <span className=\"vgui-checkbox__label\">{label}</span>}\n      {labelPosition === 'end' ? box : null}\n    </label>\n  )\n})\n\nCheckbox.displayName = 'Checkbox'\n"],"mappings":";;;;;;;;;;;AAqBA,IAAa,WAAW,WAA4C,SAAS,SAC3E,EAAE,WAAW,OAAO,gBAAgB,OAAO,gBAAgB,SAAS,GAAG,QACvE,KACA;CACA,MAAM,WAAW,OAAgC,IAAI;CAErD,MAAM,cAAc,aACjB,SAAkC;EACjC,SAAS,UAAU;EACnB,IAAI,OAAO,QAAQ,YAAY,IAAI,IAAI;OAClC,IAAI,KAAK,IAAI,UAAU;CAC9B,GACA,CAAC,GAAG,CACN;CAIA,gBAAgB;EACd,IAAI,SAAS,SAAS,SAAS,QAAQ,gBAAgB;CACzD,GAAG,CAAC,aAAa,CAAC;CAQlB,MAAM,UAAU,CAAC,eAAe;CAChC,IAAI,kBAAkB,OAAO,QAAQ,KAAK,0BAA0B;CACpE,IAAI,WAAW,QAAQ,KAAK,SAAS;CAErC,MAAM,MAAM,oBAAC,QAAD;EAAM,WAAU;EAAqB,eAAY;CAAQ,CAAA;CAErE,OACE,qBAAC,SAAD;EAAO,WAAW,QAAQ,KAAK,GAAG;EAAlC,UAAA;GACE,oBAAC,SAAD;IAAO,KAAK;IAAa,MAAK;IAAW,WAAU;IAAuB,GAAI;GAAO,CAAA;GACpF,kBAAkB,QAAQ,OAAO;GACjC,SAAS,OAAO,OAAO,oBAAC,QAAD;IAAM,WAAU;IAAwB,UAAA;GAAY,CAAA;GAC3E,kBAAkB,QAAQ,MAAM;EAC5B;;AAEX,CAAC;AAED,SAAS,cAAc"}

package/dist/components/Checkbox/index.d.ts

@@ -0,0 +1,3 @@
+export { Checkbox } from './Checkbox';
+export type { CheckboxProps } from './Checkbox';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Checkbox/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA"}

package/dist/components/ColorPicker/ColorPicker.css

@@ -0,0 +1,331 @@
+/*
+ * ColorPicker — library-original; `docs/components/ColorPicker.md` is explicit
+ * that the control has no corpus evidence, so every value here is either a real
+ * theme token or a metric the doc names itself.
+ */
+
+.vgui-color-picker {
+  /*
+   * Component-local tokens. The doc names all three and none of them belongs in
+   * the theme layer, so they keep their literal default here.
+   */
+  --vgui-color-picker-swatch: 18px;
+  --vgui-color-picker-columns: 12;
+  /* `BorderSelection`, `steamscheme.res:70`; the token layer spells it
+     `--vgui-border-selection`. */
+  --vgui-color-picker-selection: var(--vgui-border-selection);
+
+  position: relative;
+  display: inline-block;
+  font-family: var(--vgui-font);
+  font-size: var(--vgui-font-size);
+  color: var(--vgui-text);
+}
+
+/* The trigger is a ComboBox: recessed field, inset "3 0 0 0", DarkGreenBG. */
+.vgui-color-picker__trigger {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-block-size: var(--vgui-control-height);
+  padding: 0 2px 0 3px;
+  font: inherit;
+  font-size: var(--vgui-font-size);
+  color: var(--vgui-text-strong);
+  background-color: var(--vgui-surface-dark);
+  border-top: var(--vgui-bevel-width) solid var(--vgui-bevel-dark);
+  border-left: var(--vgui-bevel-width) solid var(--vgui-bevel-dark);
+  border-bottom: var(--vgui-bevel-width) solid var(--vgui-bevel-light);
+  border-right: var(--vgui-bevel-width) solid var(--vgui-bevel-light);
+  cursor: pointer;
+}
+
+/*
+ * Hover does nothing: `steam.styles:722` restates the base `ComboBox` values,
+ * and the doc is emphatic that the restatement is the rule. The focus ring is
+ * the one documented addition.
+ */
+.vgui-color-picker__trigger:focus-visible {
+  outline: var(--vgui-focus-ring);
+  outline-offset: var(--vgui-focus-ring-offset);
+}
+
+.vgui-crisp .vgui-color-picker__trigger:focus-visible {
+  outline: var(--vgui-focus-ring-valve);
+  outline-offset: var(--vgui-focus-ring-valve-offset);
+}
+
+.vgui-color-picker__trigger:disabled {
+  color: var(--vgui-text-disabled);
+  cursor: default;
+}
+
+/* Every surface in this theme has a 1px bevel; a swatch is a surface. */
+.vgui-color-picker__swatch {
+  flex: none;
+  inline-size: var(--vgui-color-picker-swatch);
+  block-size: var(--vgui-color-picker-swatch);
+  background-color: var(--vgui-swatch, transparent);
+  border-top: var(--vgui-bevel-width) solid var(--vgui-bevel-light);
+  border-left: var(--vgui-bevel-width) solid var(--vgui-bevel-light);
+  border-bottom: var(--vgui-bevel-width) solid var(--vgui-bevel-dark);
+  border-right: var(--vgui-bevel-width) solid var(--vgui-bevel-dark);
+}
+
+/* Checkerboard for alpha < 1. Two flat greys — the theme has no gradients. */
+.vgui-color-picker__swatch[data-alpha='true'],
+.vgui-color-picker__option[data-alpha='true'] {
+  background-image:
+    linear-gradient(45deg, var(--vgui-bevel-light) 25%, transparent 25%),
+    linear-gradient(-45deg, var(--vgui-bevel-light) 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, var(--vgui-bevel-light) 75%),
+    linear-gradient(-45deg, transparent 75%, var(--vgui-bevel-light) 75%);
+  background-size: 8px 8px;
+  background-position:
+    0 0,
+    0 4px,
+    4px -4px,
+    -4px 0;
+}
+
+.vgui-color-picker__label {
+  font-family: var(--vgui-font-mono);
+  font-size: var(--vgui-font-size-small);
+  color: var(--vgui-text-strong);
+  white-space: nowrap;
+}
+
+.vgui-color-picker__trigger:disabled .vgui-color-picker__label {
+  color: var(--vgui-text-disabled);
+}
+
+/* The 7x4 staircase arrow from `Scrollbar.md`; the glyph has no token. */
+.vgui-color-picker__arrow {
+  flex: none;
+  inline-size: 7px;
+  block-size: 4px;
+  margin-inline-start: auto;
+  background-color: currentColor;
+  clip-path: polygon(50% 0, 100% 100%, 0 100%);
+}
+
+/* The panel is a raised surface, like a Menu. */
+.vgui-color-picker__panel {
+  position: absolute;
+  inset-block-start: 100%;
+  inset-inline-start: 0;
+  z-index: 10;
+  display: flex;
+  flex-direction: column;
+  gap: var(--vgui-field-inset);
+  margin-block-start: var(--vgui-bevel-width);
+  padding: var(--vgui-field-inset);
+  background-color: var(--vgui-surface);
+  border-top: var(--vgui-bevel-width) solid var(--vgui-bevel-light);
+  border-left: var(--vgui-bevel-width) solid var(--vgui-bevel-light);
+  border-bottom: var(--vgui-bevel-width) solid var(--vgui-bevel-dark);
+  border-right: var(--vgui-bevel-width) solid var(--vgui-bevel-dark);
+}
+
+/* `--inline`: same stack, no trigger and no popup. */
+.vgui-color-picker--inline {
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--vgui-field-inset);
+  padding: var(--vgui-field-inset);
+  background-color: var(--vgui-surface);
+  border-top: var(--vgui-bevel-width) solid var(--vgui-bevel-light);
+  border-left: var(--vgui-bevel-width) solid var(--vgui-bevel-light);
+  border-bottom: var(--vgui-bevel-width) solid var(--vgui-bevel-dark);
+  border-right: var(--vgui-bevel-width) solid var(--vgui-bevel-dark);
+}
+
+.vgui-color-picker__grid {
+  display: grid;
+  grid-template-columns: repeat(var(--vgui-color-picker-columns), auto);
+  gap: 2px;
+}
+
+.vgui-color-picker__grid:focus-visible {
+  outline: var(--vgui-focus-ring);
+  outline-offset: var(--vgui-focus-ring-offset);
+}
+
+.vgui-crisp .vgui-color-picker__grid:focus-visible {
+  outline: var(--vgui-focus-ring-valve);
+  outline-offset: var(--vgui-focus-ring-valve-offset);
+}
+
+.vgui-color-picker__option {
+  inline-size: var(--vgui-color-picker-swatch);
+  block-size: var(--vgui-color-picker-swatch);
+  background-color: var(--vgui-option-color);
+  border: var(--vgui-bevel-width) solid transparent;
+  cursor: pointer;
+}
+
+/* Swatch hover: `--vgui-surface-light` behind the swatch. */
+.vgui-color-picker__option:hover {
+  border-color: var(--vgui-surface-light);
+}
+
+/* The keyboard highlight: `BorderSelection`, "0 0 0 255". */
+.vgui-color-picker__option[data-active='true'] {
+  border-color: var(--vgui-color-picker-selection);
+}
+
+/*
+ * The committed choice: `MaizeBG` fill (`steam.styles:703`). The fill is a
+ * shape as well as a colour, which is what keeps the selection from depending
+ * on hue alone.
+ */
+.vgui-color-picker__option[aria-selected='true'] {
+  background-color: var(--vgui-accent-dark);
+}
+
+/* The one field in the component; the doc's token table names DarkGreenBG. */
+.vgui-color-picker__hex {
+  box-sizing: border-box;
+  inline-size: 100%;
+  min-block-size: var(--vgui-control-height);
+  padding: 0 var(--vgui-field-inset);
+  font-family: var(--vgui-font-mono);
+  font-size: var(--vgui-font-size-small);
+  color: var(--vgui-text-strong);
+  background-color: var(--vgui-surface-dark);
+  border-top: var(--vgui-bevel-width) solid var(--vgui-bevel-dark);
+  border-left: var(--vgui-bevel-width) solid var(--vgui-bevel-dark);
+  border-bottom: var(--vgui-bevel-width) solid var(--vgui-bevel-light);
+  border-right: var(--vgui-bevel-width) solid var(--vgui-bevel-light);
+}
+
+.vgui-color-picker__hex:focus-visible {
+  outline: var(--vgui-focus-ring);
+  outline-offset: var(--vgui-focus-ring-offset);
+}
+
+.vgui-crisp .vgui-color-picker__hex:focus-visible {
+  outline: var(--vgui-focus-ring-valve);
+  outline-offset: var(--vgui-focus-ring-valve-offset);
+}
+
+/* Invalid hex: the label goes red and no colour is applied. */
+.vgui-color-picker__hex[aria-invalid='true'] {
+  color: var(--vgui-danger);
+}
+
+/*
+ * The alpha/hue/saturation/brightness sliders reuse the Slider groove and
+ * thumb, so the whole family stays in one visual language.
+ */
+.vgui-color-picker__slider {
+  inline-size: 100%;
+  min-block-size: var(--vgui-min-target-size);
+  background: none;
+  appearance: none;
+  color: var(--vgui-bevel-light-strong);
+  cursor: pointer;
+}
+
+.vgui-color-picker__slider:focus {
+  outline: none;
+}
+
+.vgui-color-picker__slider:focus-visible {
+  outline: var(--vgui-focus-ring);
+  outline-offset: 2px;
+}
+
+.vgui-crisp .vgui-color-picker__slider:focus-visible {
+  outline: var(--vgui-focus-ring-valve);
+  outline-offset: var(--vgui-focus-ring-valve-offset);
+}
+
+.vgui-color-picker__slider::-webkit-slider-runnable-track {
+  block-size: var(--vgui-slider-track-height);
+  background-color: var(--vgui-surface-dark);
+  border-top: var(--vgui-bevel-width) solid var(--vgui-bevel-dark);
+  border-left: var(--vgui-bevel-width) solid var(--vgui-bevel-dark);
+  border-bottom: var(--vgui-bevel-width) solid var(--vgui-bevel-light);
+  border-right: var(--vgui-bevel-width) solid var(--vgui-bevel-light);
+}
+
+.vgui-color-picker__slider::-moz-range-track,
+.vgui-color-picker__slider::-moz-range-progress {
+  block-size: var(--vgui-slider-track-height);
+  background-color: var(--vgui-surface-dark);
+  border-top: var(--vgui-bevel-width) solid var(--vgui-bevel-dark);
+  border-left: var(--vgui-bevel-width) solid var(--vgui-bevel-dark);
+  border-bottom: var(--vgui-bevel-width) solid var(--vgui-bevel-light);
+  border-right: var(--vgui-bevel-width) solid var(--vgui-bevel-light);
+}
+
+.vgui-color-picker__slider::-webkit-slider-thumb {
+  position: relative;
+  top: calc((var(--vgui-slider-thumb-height) - var(--vgui-slider-track-height)) / -2);
+  box-sizing: border-box;
+  inline-size: var(--vgui-slider-thumb-width);
+  block-size: var(--vgui-slider-thumb-height);
+  border-radius: 0;
+  background-color: var(--vgui-surface);
+  border-top: var(--vgui-bevel-width) solid var(--vgui-bevel-light);
+  border-left: var(--vgui-bevel-width) solid var(--vgui-bevel-light);
+  border-bottom: var(--vgui-bevel-width) solid var(--vgui-bevel-dark);
+  border-right: var(--vgui-bevel-width) solid var(--vgui-bevel-dark);
+  appearance: none;
+}
+
+.vgui-color-picker__slider::-moz-range-thumb {
+  box-sizing: border-box;
+  inline-size: var(--vgui-slider-thumb-width);
+  block-size: var(--vgui-slider-thumb-height);
+  border-radius: 0;
+  background-color: var(--vgui-surface);
+  border-top: var(--vgui-bevel-width) solid var(--vgui-bevel-light);
+  border-left: var(--vgui-bevel-width) solid var(--vgui-bevel-light);
+  border-bottom: var(--vgui-bevel-width) solid var(--vgui-bevel-dark);
+  border-right: var(--vgui-bevel-width) solid var(--vgui-bevel-dark);
+}
+
+.vgui-color-picker__slider:disabled {
+  cursor: default;
+}
+
+.vgui-color-picker__slider:disabled::-webkit-slider-thumb,
+.vgui-color-picker__slider:disabled::-moz-range-thumb {
+  background-color: var(--vgui-surface-dark);
+  border-color: var(--vgui-surface-dark);
+}
+
+/* The alpha slider shows the transparency it is editing. */
+.vgui-color-picker__alpha::-webkit-slider-runnable-track {
+  background-image:
+    linear-gradient(45deg, var(--vgui-bevel-light) 25%, transparent 25%),
+    linear-gradient(-45deg, var(--vgui-bevel-light) 25%, transparent 25%);
+  background-size: 8px 8px;
+}
+
+/* The `--continuous` stack. Data visualisation, NOT period-accurate. */
+.vgui-color-picker__continuous {
+  display: contents;
+}
+
+.vgui-color-picker--continuous .vgui-color-picker__sv {
+  inline-size: 180px;
+  block-size: 120px;
+  background-color: var(--vgui-hue);
+  background-image:
+    linear-gradient(to top, var(--vgui-border-selection), transparent),
+    linear-gradient(to right, var(--vgui-text-strong), transparent);
+  border-top: var(--vgui-bevel-width) solid var(--vgui-bevel-dark);
+  border-left: var(--vgui-bevel-width) solid var(--vgui-bevel-dark);
+  border-bottom: var(--vgui-bevel-width) solid var(--vgui-bevel-light);
+  border-right: var(--vgui-bevel-width) solid var(--vgui-bevel-light);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .vgui-color-picker__panel {
+    transition: none;
+  }
+}

package/dist/components/ColorPicker/ColorPicker.css.d.ts

@@ -0,0 +1 @@
+export {}

package/dist/components/ColorPicker/ColorPicker.d.ts

@@ -0,0 +1,29 @@
+import type { HTMLAttributes } from 'react';
+import './ColorPicker.css';
+export interface ColorPickerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /** Current colour as `#RRGGBB` or `#RRGGBBAA`. */
+    value?: string;
+    /** Called with the new colour when the user commits a choice. */
+    onValueChange?: (value: string) => void;
+    /** Palette to show. Defaults to the scheme's named colours. */
+    palette?: Array<{
+        name: string;
+        value: string;
+    }>;
+    /** Show the hex text input beside the grid. */
+    hex?: boolean;
+    /** Add a hue strip and saturation/value square. Not period-accurate. */
+    continuous?: boolean;
+    /** Allow alpha editing. */
+    alpha?: boolean;
+    /** Grid columns. 12 fits the scheme palette in three tidy rows. */
+    columns?: number;
+    /** Render the swatch alone, with no hex label in the trigger. */
+    swatchOnly?: boolean;
+    /** Grid always visible; no trigger or panel. */
+    inline?: boolean;
+    /** Disable the control and the panel. */
+    disabled?: boolean;
+}
+export declare const ColorPicker: import("react").ForwardRefExoticComponent<ColorPickerProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=ColorPicker.d.ts.map

package/dist/components/ColorPicker/ColorPicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../../../src/components/ColorPicker/ColorPicker.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAGV,cAAc,EAEf,MAAM,OAAO,CAAA;AAEd,OAAO,mBAAmB,CAAA;AAwG1B,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IACxF,kDAAkD;IAClD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,iEAAiE;IACjE,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,+DAA+D;IAC/D,OAAO,CAAC,EAAE,KAAK,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;IAChD,+CAA+C;IAC/C,GAAG,CAAC,EAAE,OAAO,CAAA;IACb,wEAAwE;IACxE,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,2BAA2B;IAC3B,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,mEAAmE;IACnE,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,iEAAiE;IACjE,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,gDAAgD;IAChD,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,eAAO,MAAM,WAAW,6GA+XtB,CAAA"}