@dalcvil/steam-green-react 0.2.0 → 1.0.0

package/dist/components/ProgressBar/ProgressBar.d.ts

@@ -0,0 +1,22 @@
+import type { HTMLAttributes } from 'react';
+import './ProgressBar.css';
+export interface ProgressBarProps extends HTMLAttributes<HTMLDivElement> {
+    /** 0–100. Omit to render the indeterminate variant. */
+    value?: number;
+    /** Upper bound when `value` is absolute rather than a percentage. Defaults to 100. */
+    max?: number;
+    /** Show a label under the bar. */
+    showValue?: boolean;
+    /** Format the label. Defaults to "NN%". */
+    formatValue?: (value: number, max: number) => string;
+    /** Accessible name. Required when there is no visible label. */
+    label?: string;
+    /** Compact variant, for inline use. */
+    small?: boolean;
+    /** Render the error frame. */
+    error?: boolean;
+    /** Continuous variant: no discrete value, advances on its own. */
+    continuous?: boolean;
+}
+export declare const ProgressBar: import("react").ForwardRefExoticComponent<ProgressBarProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=ProgressBar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../../src/components/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAiB,cAAc,EAAE,MAAM,OAAO,CAAA;AAE1D,OAAO,mBAAmB,CAAA;AAE1B,MAAM,WAAW,gBAAiB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACtE,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,sFAAsF;IACtF,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,kCAAkC;IAClC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,2CAA2C;IAC3C,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,MAAM,CAAA;IACpD,gEAAgE;IAChE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,uCAAuC;IACvC,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,8BAA8B;IAC9B,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,kEAAkE;IAClE,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAED,eAAO,MAAM,WAAW,6GAkDtB,CAAA"}

package/dist/components/ProgressBar/ProgressBar.js

@@ -0,0 +1,43 @@
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import "./ProgressBar.css";
+//#region src/components/ProgressBar/ProgressBar.tsx
+var ProgressBar = forwardRef(function ProgressBar({ className, value, max = 100, showValue = false, formatValue, label, small = false, error = false, continuous = false, ...rest }, ref) {
+	const ratio = value === void 0 || max <= 0 ? 0 : value / max;
+	const percent = Math.min(100, Math.max(0, ratio * 100));
+	const text = value === void 0 ? null : formatValue ? formatValue(value, max) : `${Math.round(percent)}%`;
+	const hasText = text !== null;
+	const classes = ["vgui-progress"];
+	if (small) classes.push("vgui-progress--small");
+	if (error) classes.push("vgui-progress--error");
+	if (value === void 0) classes.push("vgui-progress--indeterminate");
+	if (continuous) classes.push("vgui-progress--continuous");
+	if (showValue && hasText) classes.push("vgui-progress--with-text");
+	if (className) classes.push(className);
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: classes.join(" "),
+		role: "progressbar",
+		"aria-label": label,
+		"aria-valuemin": 0,
+		"aria-valuemax": max,
+		"aria-valuenow": value === void 0 ? void 0 : value,
+		"aria-valuetext": formatValue && hasText ? text : void 0,
+		...rest,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "vgui-progress__trough",
+			children: /* @__PURE__ */ jsx("div", {
+				className: "vgui-progress__fill",
+				style: { "--vgui-progress": `${percent}%` }
+			})
+		}), showValue && text !== null ? /* @__PURE__ */ jsx("span", {
+			className: "vgui-progress__text",
+			children: text
+		}) : null]
+	});
+});
+ProgressBar.displayName = "ProgressBar";
+//#endregion
+export { ProgressBar };
+
+//# sourceMappingURL=ProgressBar.js.map

package/dist/components/ProgressBar/ProgressBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.js","names":[],"sources":["../../../src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport type { CSSProperties, HTMLAttributes } from 'react'\n\nimport './ProgressBar.css'\n\nexport interface ProgressBarProps extends HTMLAttributes<HTMLDivElement> {\n  /** 0–100. Omit to render the indeterminate variant. */\n  value?: number\n  /** Upper bound when `value` is absolute rather than a percentage. Defaults to 100. */\n  max?: number\n  /** Show a label under the bar. */\n  showValue?: boolean\n  /** Format the label. Defaults to \"NN%\". */\n  formatValue?: (value: number, max: number) => string\n  /** Accessible name. Required when there is no visible label. */\n  label?: string\n  /** Compact variant, for inline use. */\n  small?: boolean\n  /** Render the error frame. */\n  error?: boolean\n  /** Continuous variant: no discrete value, advances on its own. */\n  continuous?: boolean\n}\n\nexport const ProgressBar = forwardRef<HTMLDivElement, ProgressBarProps>(function ProgressBar(\n  {\n    className,\n    value,\n    max = 100,\n    showValue = false,\n    formatValue,\n    label,\n    small = false,\n    error = false,\n    continuous = false,\n    ...rest\n  },\n  ref,\n) {\n  const ratio = value === undefined || max <= 0 ? 0 : value / max\n  const percent = Math.min(100, Math.max(0, ratio * 100))\n  const text = value === undefined ? null : formatValue ? formatValue(value, max) : `${Math.round(percent)}%`\n  const hasText = text !== null\n\n  const classes = ['vgui-progress']\n  if (small) classes.push('vgui-progress--small')\n  if (error) classes.push('vgui-progress--error')\n  if (value === undefined) classes.push('vgui-progress--indeterminate')\n  if (continuous) classes.push('vgui-progress--continuous')\n  if (showValue && hasText) classes.push('vgui-progress--with-text')\n  if (className) classes.push(className)\n\n  return (\n    <div\n      ref={ref}\n      className={classes.join(' ')}\n      role=\"progressbar\"\n      aria-label={label}\n      aria-valuemin={0}\n      aria-valuemax={max}\n      /* Omitted entirely when unknown: `0` would announce \"0%\", not \"busy\". */\n      aria-valuenow={value === undefined ? undefined : value}\n      aria-valuetext={formatValue && hasText ? text : undefined}\n      {...rest}\n    >\n      <div className=\"vgui-progress__trough\">\n        <div\n          className=\"vgui-progress__fill\"\n          style={{ '--vgui-progress': `${percent}%` } as CSSProperties}\n        />\n      </div>\n      {showValue && text !== null ? <span className=\"vgui-progress__text\">{text}</span> : null}\n    </div>\n  )\n})\n\nProgressBar.displayName = 'ProgressBar'\n"],"mappings":";;;;AAwBA,IAAa,cAAc,WAA6C,SAAS,YAC/E,EACE,WACA,OACA,MAAM,KACN,YAAY,OACZ,aACA,OACA,QAAQ,OACR,QAAQ,OACR,aAAa,OACb,GAAG,QAEL,KACA;CACA,MAAM,QAAQ,UAAU,KAAA,KAAa,OAAO,IAAI,IAAI,QAAQ;CAC5D,MAAM,UAAU,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,QAAQ,GAAG,CAAC;CACtD,MAAM,OAAO,UAAU,KAAA,IAAY,OAAO,cAAc,YAAY,OAAO,GAAG,IAAI,GAAG,KAAK,MAAM,OAAO,EAAE;CACzG,MAAM,UAAU,SAAS;CAEzB,MAAM,UAAU,CAAC,eAAe;CAChC,IAAI,OAAO,QAAQ,KAAK,sBAAsB;CAC9C,IAAI,OAAO,QAAQ,KAAK,sBAAsB;CAC9C,IAAI,UAAU,KAAA,GAAW,QAAQ,KAAK,8BAA8B;CACpE,IAAI,YAAY,QAAQ,KAAK,2BAA2B;CACxD,IAAI,aAAa,SAAS,QAAQ,KAAK,0BAA0B;CACjE,IAAI,WAAW,QAAQ,KAAK,SAAS;CAErC,OACE,qBAAC,OAAD;EACO;EACL,WAAW,QAAQ,KAAK,GAAG;EAC3B,MAAK;EACL,cAAY;EACZ,iBAAe;EACf,iBAAe;EAEf,iBAAe,UAAU,KAAA,IAAY,KAAA,IAAY;EACjD,kBAAgB,eAAe,UAAU,OAAO,KAAA;EAChD,GAAI;EAVN,UAAA,CAYE,oBAAC,OAAD;GAAK,WAAU;GACb,UAAA,oBAAC,OAAD;IACE,WAAU;IACV,OAAO,EAAE,mBAAmB,GAAG,QAAQ,GAAG;GAC3C,CAAA;EACE,CAAA,GACJ,aAAa,SAAS,OAAO,oBAAC,QAAD;GAAM,WAAU;GAAuB,UAAA;EAAW,CAAA,IAAI,IACjF;;AAET,CAAC;AAED,YAAY,cAAc"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ProgressBar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAA"}

package/dist/components/Radio/Radio.css

@@ -0,0 +1,125 @@
+/*
+ * Green Steam radio button and its group.
+ *
+ * Geometry is identical to `.vgui-checkbox` — same 15×15, same 3px inset, same
+ * *inverted* bevel, same dotted `rad*Focus` ring — and only the shape and the
+ * mark differ (docs/components/Radio.md). The two stylesheets are kept as
+ * siblings rather than sharing a `vgui-check-control` base: a shared rule would
+ * have to live in one component's stylesheet and be imported by the other, and
+ * per-component CSS is what travels with a tree-shaken import.
+ *
+ * The circle and the dot are pure geometry — `border-radius` and a filled
+ * `::after` — so no sprites ship.
+ *
+ * Deviations required by WCAG:
+ *
+ *   - `rad*Focus`'s dotted ring is 1.15:1 on the circle face; the shipped ring
+ *     is `--vgui-focus-ring` at the same `-3px` offset, with the literal ring
+ *     behind the `.vgui-crisp` opt-in.
+ *   - A horizontal group wraps instead of overflowing at 200% zoom.
+ */
+
+.vgui-radio-group {
+  display: block;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font: inherit;
+  color: var(--vgui-text);
+}
+
+/* The legend is the group's accessible name: "Fullscreen, selected, 1 of 3"
+ * is only intelligible with the question attached. */
+.vgui-radio-group__legend {
+  padding: 0;
+  color: var(--vgui-text);
+}
+
+.vgui-radio-group__options {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  padding-top: 3px;
+}
+
+.vgui-radio-group--horizontal .vgui-radio-group__options {
+  flex-direction: row;
+  flex-wrap: wrap;
+  column-gap: 12px;
+  row-gap: var(--vgui-field-inset);
+}
+
+.vgui-radio {
+  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-radio__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-radio__circle {
+  position: relative;
+  flex: 0 0 auto;
+  box-sizing: border-box;
+  inline-size: var(--vgui-checkbox-size);
+  block-size: var(--vgui-checkbox-size);
+  border-radius: 50%;
+  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);
+}
+
+/* `radSelStd`: a centred 5px filled dot, leaving a ring of background between
+ * the mark and the border, which is what the sprite shows. */
+.vgui-radio__input:checked ~ .vgui-radio__circle::after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  inline-size: 5px;
+  block-size: 5px;
+  margin: -2.5px 0 0 -2.5px;
+  border-radius: 50%;
+  background-color: var(--vgui-text-strong);
+}
+
+.vgui-radio__input:focus-visible ~ .vgui-radio__circle {
+  outline: var(--vgui-focus-ring);
+  outline-offset: var(--vgui-focus-ring-offset);
+}
+
+/* Valve's literal `rad*Focus` ring, reachable only through the opt-in. */
+.vgui-crisp .vgui-radio__input:focus-visible ~ .vgui-radio__circle {
+  outline: var(--vgui-focus-ring-valve);
+  outline-offset: var(--vgui-focus-ring-valve-offset);
+}
+
+.vgui-radio__input:disabled ~ .vgui-radio__label {
+  color: var(--vgui-text-disabled);
+  text-shadow: 1px 1px 0 var(--vgui-text-disabled-shadow);
+}
+
+.vgui-radio__input:disabled ~ .vgui-radio__circle {
+  cursor: not-allowed;
+}
+
+.vgui-radio__label {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}

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

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

package/dist/components/Radio/Radio.d.ts

@@ -0,0 +1,40 @@
+import type { InputHTMLAttributes, ReactNode } from 'react';
+import './Radio.css';
+export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+    /** Value reported to the enclosing RadioGroup. */
+    value: string;
+    /** The label. Rendered as part of the clickable area. */
+    label?: ReactNode;
+}
+export interface RadioGroupProps {
+    /** Group legend, rendered as a <legend>. */
+    label: ReactNode;
+    /** Controlled selected value. */
+    value?: string;
+    /** Initial value for uncontrolled use. */
+    defaultValue?: string;
+    /** Called with the newly selected value. */
+    onValueChange?: (value: string) => void;
+    /** Shared input name; useId() is used when omitted. */
+    name?: string;
+    /** Lay the radios out horizontally rather than stacked. */
+    orientation?: 'vertical' | 'horizontal';
+    /** Disable the whole group. */
+    disabled?: boolean;
+    children: ReactNode;
+}
+/**
+ * A `fieldset`/`legend` group for `Radio`s. It is a context provider, not a DOM
+ * wrapper for logic: it passes `name`, the selected value, `onChange` and
+ * `disabled` down, so `Radio` stays a thin wrapper over a native input and the
+ * browser's own arrow-key navigation inside the group keeps working
+ * (docs/components/Radio.md, "Grouping").
+ */
+export declare function RadioGroup({ label, value, defaultValue, onValueChange, name, orientation, disabled, children, }: RadioGroupProps): import("react").JSX.Element;
+/**
+ * A 15×15 circle with the same *inset* bevel as `Checkbox` — dark top/left,
+ * light bottom/right — and a filled dot instead of a tick
+ * (docs/components/Radio.md, "CSS recipe").
+ */
+export declare const Radio: import("react").ForwardRefExoticComponent<RadioProps & import("react").RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=Radio.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../src/components/Radio/Radio.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAe,mBAAmB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAExE,OAAO,aAAa,CAAA;AAWpB,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IACrF,kDAAkD;IAClD,KAAK,EAAE,MAAM,CAAA;IACb,yDAAyD;IACzD,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB;AAED,MAAM,WAAW,eAAe;IAC9B,4CAA4C;IAC5C,KAAK,EAAE,SAAS,CAAA;IAChB,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,4CAA4C;IAC5C,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,uDAAuD;IACvD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,2DAA2D;IAC3D,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAA;IACvC,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,KAAK,EACL,YAAY,EACZ,aAAa,EACb,IAAI,EACJ,WAAwB,EACxB,QAAgB,EAChB,QAAQ,GACT,EAAE,eAAe,+BAkCjB;AAED;;;;GAIG;AACH,eAAO,MAAM,KAAK,yGA+BhB,CAAA"}

package/dist/components/Radio/Radio.js

@@ -0,0 +1,91 @@
+import { createContext, forwardRef, useCallback, useContext, useId, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import "./Radio.css";
+//#region src/components/Radio/Radio.tsx
+var RadioGroupContext = createContext(null);
+/**
+* A `fieldset`/`legend` group for `Radio`s. It is a context provider, not a DOM
+* wrapper for logic: it passes `name`, the selected value, `onChange` and
+* `disabled` down, so `Radio` stays a thin wrapper over a native input and the
+* browser's own arrow-key navigation inside the group keeps working
+* (docs/components/Radio.md, "Grouping").
+*/
+function RadioGroup({ label, value, defaultValue, onValueChange, name, orientation = "vertical", disabled = false, children }) {
+	const generatedName = useId();
+	const isControlled = value !== void 0;
+	const [uncontrolled, setUncontrolled] = useState(defaultValue);
+	const selected = isControlled ? value : uncontrolled;
+	const select = useCallback((next) => {
+		if (!isControlled) setUncontrolled(next);
+		onValueChange?.(next);
+	}, [isControlled, onValueChange]);
+	const context = useMemo(() => ({
+		name: name ?? generatedName,
+		value: selected,
+		select,
+		disabled
+	}), [
+		name,
+		generatedName,
+		selected,
+		select,
+		disabled
+	]);
+	return /* @__PURE__ */ jsxs("fieldset", {
+		className: orientation === "horizontal" ? "vgui-radio-group vgui-radio-group--horizontal" : "vgui-radio-group",
+		disabled,
+		children: [/* @__PURE__ */ jsx("legend", {
+			className: "vgui-radio-group__legend",
+			children: label
+		}), /* @__PURE__ */ jsx("div", {
+			className: "vgui-radio-group__options",
+			children: /* @__PURE__ */ jsx(RadioGroupContext.Provider, {
+				value: context,
+				children
+			})
+		})]
+	});
+}
+/**
+* A 15×15 circle with the same *inset* bevel as `Checkbox` — dark top/left,
+* light bottom/right — and a filled dot instead of a tick
+* (docs/components/Radio.md, "CSS recipe").
+*/
+var Radio = forwardRef(function Radio({ className, value, label, name, checked, disabled, onChange, ...rest }, ref) {
+	const group = useContext(RadioGroupContext);
+	const classes = ["vgui-radio"];
+	if (className) classes.push(className);
+	const handleChange = (event) => {
+		onChange?.(event);
+		if (!event.defaultPrevented) group?.select(value);
+	};
+	return /* @__PURE__ */ jsxs("label", {
+		className: classes.join(" "),
+		children: [
+			/* @__PURE__ */ jsx("input", {
+				ref,
+				type: "radio",
+				className: "vgui-radio__input",
+				value,
+				name: name ?? group?.name,
+				checked: checked ?? (group ? group.value === value : void 0),
+				disabled: disabled ?? group?.disabled ?? false,
+				onChange: handleChange,
+				...rest
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "vgui-radio__circle",
+				"aria-hidden": "true"
+			}),
+			label == null ? null : /* @__PURE__ */ jsx("span", {
+				className: "vgui-radio__label",
+				children: label
+			})
+		]
+	});
+});
+Radio.displayName = "Radio";
+//#endregion
+export { Radio, RadioGroup };
+
+//# sourceMappingURL=Radio.js.map

package/dist/components/Radio/Radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.js","names":[],"sources":["../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import { createContext, forwardRef, useCallback, useContext, useId, useMemo, useState } from 'react'\nimport type { ChangeEvent, InputHTMLAttributes, ReactNode } from 'react'\n\nimport './Radio.css'\n\ninterface RadioGroupContextValue {\n  name: string\n  value: string | undefined\n  select: (value: string) => void\n  disabled: boolean\n}\n\nconst RadioGroupContext = createContext<RadioGroupContextValue | null>(null)\n\nexport interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {\n  /** Value reported to the enclosing RadioGroup. */\n  value: string\n  /** The label. Rendered as part of the clickable area. */\n  label?: ReactNode\n}\n\nexport interface RadioGroupProps {\n  /** Group legend, rendered as a <legend>. */\n  label: ReactNode\n  /** Controlled selected value. */\n  value?: string\n  /** Initial value for uncontrolled use. */\n  defaultValue?: string\n  /** Called with the newly selected value. */\n  onValueChange?: (value: string) => void\n  /** Shared input name; useId() is used when omitted. */\n  name?: string\n  /** Lay the radios out horizontally rather than stacked. */\n  orientation?: 'vertical' | 'horizontal'\n  /** Disable the whole group. */\n  disabled?: boolean\n  children: ReactNode\n}\n\n/**\n * A `fieldset`/`legend` group for `Radio`s. It is a context provider, not a DOM\n * wrapper for logic: it passes `name`, the selected value, `onChange` and\n * `disabled` down, so `Radio` stays a thin wrapper over a native input and the\n * browser's own arrow-key navigation inside the group keeps working\n * (docs/components/Radio.md, \"Grouping\").\n */\nexport function RadioGroup({\n  label,\n  value,\n  defaultValue,\n  onValueChange,\n  name,\n  orientation = 'vertical',\n  disabled = false,\n  children,\n}: RadioGroupProps) {\n  const generatedName = useId()\n  const isControlled = value !== undefined\n  const [uncontrolled, setUncontrolled] = useState(defaultValue)\n  const selected = isControlled ? value : uncontrolled\n\n  const select = useCallback(\n    (next: string) => {\n      if (!isControlled) setUncontrolled(next)\n      onValueChange?.(next)\n    },\n    [isControlled, onValueChange],\n  )\n\n  const context = useMemo<RadioGroupContextValue>(\n    () => ({ name: name ?? generatedName, value: selected, select, disabled }),\n    [name, generatedName, selected, select, disabled],\n  )\n\n  return (\n    <fieldset\n      className={\n        orientation === 'horizontal'\n          ? 'vgui-radio-group vgui-radio-group--horizontal'\n          : 'vgui-radio-group'\n      }\n      disabled={disabled}\n    >\n      <legend className=\"vgui-radio-group__legend\">{label}</legend>\n      <div className=\"vgui-radio-group__options\">\n        <RadioGroupContext.Provider value={context}>{children}</RadioGroupContext.Provider>\n      </div>\n    </fieldset>\n  )\n}\n\n/**\n * A 15×15 circle with the same *inset* bevel as `Checkbox` — dark top/left,\n * light bottom/right — and a filled dot instead of a tick\n * (docs/components/Radio.md, \"CSS recipe\").\n */\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>(function Radio(\n  { className, value, label, name, checked, disabled, onChange, ...rest },\n  ref,\n) {\n  const group = useContext(RadioGroupContext)\n\n  const classes = ['vgui-radio']\n  if (className) classes.push(className)\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    onChange?.(event)\n    if (!event.defaultPrevented) group?.select(value)\n  }\n\n  return (\n    <label className={classes.join(' ')}>\n      <input\n        ref={ref}\n        type=\"radio\"\n        className=\"vgui-radio__input\"\n        value={value}\n        name={name ?? group?.name}\n        checked={checked ?? (group ? group.value === value : undefined)}\n        disabled={disabled ?? group?.disabled ?? false}\n        onChange={handleChange}\n        {...rest}\n      />\n      <span className=\"vgui-radio__circle\" aria-hidden=\"true\" />\n      {label == null ? null : <span className=\"vgui-radio__label\">{label}</span>}\n    </label>\n  )\n})\n\nRadio.displayName = 'Radio'\n"],"mappings":";;;;AAYA,IAAM,oBAAoB,cAA6C,IAAI;;;;;;;;AAkC3E,SAAgB,WAAW,EACzB,OACA,OACA,cACA,eACA,MACA,cAAc,YACd,WAAW,OACX,YACkB;CAClB,MAAM,gBAAgB,MAAM;CAC5B,MAAM,eAAe,UAAU,KAAA;CAC/B,MAAM,CAAC,cAAc,mBAAmB,SAAS,YAAY;CAC7D,MAAM,WAAW,eAAe,QAAQ;CAExC,MAAM,SAAS,aACZ,SAAiB;EAChB,IAAI,CAAC,cAAc,gBAAgB,IAAI;EACvC,gBAAgB,IAAI;CACtB,GACA,CAAC,cAAc,aAAa,CAC9B;CAEA,MAAM,UAAU,eACP;EAAE,MAAM,QAAQ;EAAe,OAAO;EAAU;EAAQ;CAAS,IACxE;EAAC;EAAM;EAAe;EAAU;EAAQ;CAAQ,CAClD;CAEA,OACE,qBAAC,YAAD;EACE,WACE,gBAAgB,eACZ,kDACA;EAEI;EANZ,UAAA,CAQE,oBAAC,UAAD;GAAQ,WAAU;GAA4B,UAAA;EAAc,CAAA,GAC5D,oBAAC,OAAD;GAAK,WAAU;GACb,UAAA,oBAAC,kBAAkB,UAAnB;IAA4B,OAAO;IAAU;GAAqC,CAAA;EAC/E,CAAA,CACG;;AAEd;;;;;;AAOA,IAAa,QAAQ,WAAyC,SAAS,MACrE,EAAE,WAAW,OAAO,OAAO,MAAM,SAAS,UAAU,UAAU,GAAG,QACjE,KACA;CACA,MAAM,QAAQ,WAAW,iBAAiB;CAE1C,MAAM,UAAU,CAAC,YAAY;CAC7B,IAAI,WAAW,QAAQ,KAAK,SAAS;CAErC,MAAM,gBAAgB,UAAyC;EAC7D,WAAW,KAAK;EAChB,IAAI,CAAC,MAAM,kBAAkB,OAAO,OAAO,KAAK;CAClD;CAEA,OACE,qBAAC,SAAD;EAAO,WAAW,QAAQ,KAAK,GAAG;EAAlC,UAAA;GACE,oBAAC,SAAD;IACO;IACL,MAAK;IACL,WAAU;IACH;IACP,MAAM,QAAQ,OAAO;IACrB,SAAS,YAAY,QAAQ,MAAM,UAAU,QAAQ,KAAA;IACrD,UAAU,YAAY,OAAO,YAAY;IACzC,UAAU;IACV,GAAI;GACL,CAAA;GACD,oBAAC,QAAD;IAAM,WAAU;IAAqB,eAAY;GAAQ,CAAA;GACxD,SAAS,OAAO,OAAO,oBAAC,QAAD;IAAM,WAAU;IAAqB,UAAA;GAAY,CAAA;EACpE;;AAEX,CAAC;AAED,MAAM,cAAc"}

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

@@ -0,0 +1,3 @@
+export { Radio, RadioGroup } from './Radio';
+export type { RadioProps, RadioGroupProps } from './Radio';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Radio/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAC3C,YAAY,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA"}

package/dist/components/RichText/RichText.css

@@ -0,0 +1,96 @@
+/*
+ * Green Steam rich text — `RichText` and its three inline runs
+ * (docs/components/RichText.md).
+ *
+ * `RichText` draws its own bevel *and* fills the interior with `DarkGreenBG`,
+ * which is what makes the 1px border read as a carved edge rather than a hollow
+ * outline. The frame orientation is the inverse of `Button`'s raised bevel.
+ *
+ * Two documented departures from the corpus live here:
+ *   - selected text is dark (`--vgui-selection-text`) rather than `White`,
+ *     because `MaizeBG` + white is 3.70:1 and foundations.md §10 baseline 1
+ *     requires dark text on every maize highlight;
+ *   - `url` gains a hover/focus colour, because the corpus's `"RichText
+ *     url:hover"` is a no-op and underline alone is the weaker signal.
+ *
+ * Component-local metrics are declared here per foundations.md §4 (with `var()`
+ * fallbacks, as the docs' convention requires); shared palette tokens are
+ * referenced bare.
+ */
+
+.vgui-rich-text {
+  --vgui-richtext-bg: var(--vgui-surface-dark); /* DarkGreenBG */
+  --vgui-richtext-text: var(--vgui-text-strong); /* textcolor = White */
+  --vgui-richtext-selection-bg: var(--vgui-accent-dark); /* MaizeBG */
+  --vgui-richtext-inset: 6px; /* RichText.InsetX / InsetY */
+  --vgui-richtext-font-weight-bold: 700; /* origin 1000; 700 always resolves */
+  --vgui-richtext-underline-offset: 2px;
+
+  position: relative;
+  background-color: var(--vgui-richtext-bg);
+  color: var(--vgui-richtext-text);
+  font-family: var(--vgui-font);
+  font-size: var(--vgui-font-size);
+  font-weight: normal;
+  /* Recessed: top/left dark, bottom/right lit. */
+  border-block-start: var(--vgui-bevel-width) solid var(--vgui-bevel-dark);
+  border-inline-start: var(--vgui-bevel-width) solid var(--vgui-bevel-dark);
+  border-inline-end: var(--vgui-bevel-width) solid var(--vgui-bevel-light);
+  border-block-end: var(--vgui-bevel-width) solid var(--vgui-bevel-light);
+  padding: var(--vgui-richtext-inset);
+}
+
+/* `RichTextInterior {}` — an empty hook kept for parity; it only removes the
+   paragraph margin the browser would otherwise add inside the frame. */
+.vgui-rich-text__interior {
+  margin: 0;
+}
+
+/*
+ * Two maizes exist: the corpus's `selectedbgcolor` (MaizeBG) and the theme
+ * layer's own `::selection`. Dark text is required on both, so the rule covers
+ * the container's own selection and any descendant's.
+ */
+.vgui-rich-text::selection,
+.vgui-rich-text ::selection {
+  background-color: var(--vgui-richtext-selection-bg);
+  color: var(--vgui-selection-text);
+}
+
+.vgui-rich-text__bold {
+  font-weight: var(--vgui-richtext-font-weight-bold, 700);
+}
+
+.vgui-rich-text__emphasis {
+  font-style: italic;
+}
+
+.vgui-rich-text__url {
+  color: inherit;
+  text-decoration: underline;
+  text-underline-offset: var(--vgui-richtext-underline-offset, 2px);
+}
+
+/* Not in the corpus, where hover is byte-identical to idle. */
+.vgui-rich-text__url:hover {
+  color: var(--vgui-text-hover);
+}
+
+/*
+ * The corpus's focus style is a 1px dotted `BorderDark` ring; the accessible
+ * ring is the default here, per foundations.md §10 — the Valve ring remains
+ * available as `--vgui-focus-ring-valve` for a `.vgui-crisp` subtree.
+ */
+.vgui-rich-text__url:focus-visible {
+  color: var(--vgui-text-hover);
+  outline: var(--vgui-focus-ring);
+  outline-offset: var(--vgui-focus-ring-offset);
+}
+
+/* Inside a List or a Panel the frame belongs to the container, not to us. */
+.vgui-rich-text--interior,
+.vgui-rich-text--list {
+  border: 0;
+  padding: 0;
+  background: transparent;
+}

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

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

package/dist/components/RichText/RichText.d.ts

@@ -0,0 +1,25 @@
+import type { AnchorHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
+import './RichText.css';
+export interface RichTextProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Sanitised HTML. Never pass untrusted markup — see Accessibility. */
+    children?: ReactNode;
+    /** Drops the recessed frame; use inside a List or Panel. */
+    interior?: boolean;
+}
+export interface RichTextLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+}
+export interface RichTextBoldProps extends HTMLAttributes<HTMLElement> {
+}
+export interface RichTextEmphasisProps extends HTMLAttributes<HTMLElement> {
+}
+export declare const RichText: import("react").ForwardRefExoticComponent<RichTextProps & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * `"RichText url"` — the element the style maps onto. Prefer a bare `<a>` with
+ * `vgui-rich-text__url`; this exists for call sites that want a React component.
+ */
+export declare const RichTextLink: import("react").ForwardRefExoticComponent<RichTextLinkProps & import("react").RefAttributes<HTMLAnchorElement>>;
+/** `"RichText bold"` — `<strong>`, so the emphasis survives without the font. */
+export declare const RichTextBold: import("react").ForwardRefExoticComponent<RichTextBoldProps & import("react").RefAttributes<HTMLElement>>;
+/** `"RichText emphasis"` — `<em>`, for the same reason. */
+export declare const RichTextEmphasis: import("react").ForwardRefExoticComponent<RichTextEmphasisProps & import("react").RefAttributes<HTMLElement>>;
+//# sourceMappingURL=RichText.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RichText.d.ts","sourceRoot":"","sources":["../../../src/components/RichText/RichText.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAE5E,OAAO,gBAAgB,CAAA;AAEvB,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IACrF,uEAAuE;IACvE,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,iBAAkB,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;CAAG;AAErF,MAAM,WAAW,iBAAkB,SAAQ,cAAc,CAAC,WAAW,CAAC;CAAG;AAEzE,MAAM,WAAW,qBAAsB,SAAQ,cAAc,CAAC,WAAW,CAAC;CAAG;AAE7E,eAAO,MAAM,QAAQ,0GAanB,CAAA;AAIF;;;GAGG;AACH,eAAO,MAAM,YAAY,iHAOxB,CAAA;AAID,iFAAiF;AACjF,eAAO,MAAM,YAAY,2GAOxB,CAAA;AAID,2DAA2D;AAC3D,eAAO,MAAM,gBAAgB,+GAO5B,CAAA"}

package/dist/components/RichText/RichText.js

@@ -0,0 +1,56 @@
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import "./RichText.css";
+//#region src/components/RichText/RichText.tsx
+var RichText = forwardRef(function RichText({ className, children, interior = false, ...rest }, ref) {
+	const classes = ["vgui-rich-text"];
+	if (interior) classes.push("vgui-rich-text--interior");
+	if (className) classes.push(className);
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: classes.join(" "),
+		...rest,
+		children
+	});
+});
+RichText.displayName = "RichText";
+/**
+* `"RichText url"` — the element the style maps onto. Prefer a bare `<a>` with
+* `vgui-rich-text__url`; this exists for call sites that want a React component.
+*/
+var RichTextLink = forwardRef(function RichTextLink({ className, ...rest }, ref) {
+	const classes = ["vgui-rich-text__url"];
+	if (className) classes.push(className);
+	return /* @__PURE__ */ jsx("a", {
+		ref,
+		className: classes.join(" "),
+		...rest
+	});
+});
+RichTextLink.displayName = "RichTextLink";
+/** `"RichText bold"` — `<strong>`, so the emphasis survives without the font. */
+var RichTextBold = forwardRef(function RichTextBold({ className, ...rest }, ref) {
+	const classes = ["vgui-rich-text__bold"];
+	if (className) classes.push(className);
+	return /* @__PURE__ */ jsx("strong", {
+		ref,
+		className: classes.join(" "),
+		...rest
+	});
+});
+RichTextBold.displayName = "RichTextBold";
+/** `"RichText emphasis"` — `<em>`, for the same reason. */
+var RichTextEmphasis = forwardRef(function RichTextEmphasis({ className, ...rest }, ref) {
+	const classes = ["vgui-rich-text__emphasis"];
+	if (className) classes.push(className);
+	return /* @__PURE__ */ jsx("em", {
+		ref,
+		className: classes.join(" "),
+		...rest
+	});
+});
+RichTextEmphasis.displayName = "RichTextEmphasis";
+//#endregion
+export { RichText, RichTextBold, RichTextEmphasis, RichTextLink };
+
+//# sourceMappingURL=RichText.js.map

package/dist/components/RichText/RichText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RichText.js","names":[],"sources":["../../../src/components/RichText/RichText.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport type { AnchorHTMLAttributes, HTMLAttributes, ReactNode } from 'react'\n\nimport './RichText.css'\n\nexport interface RichTextProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {\n  /** Sanitised HTML. Never pass untrusted markup — see Accessibility. */\n  children?: ReactNode\n  /** Drops the recessed frame; use inside a List or Panel. */\n  interior?: boolean\n}\n\nexport interface RichTextLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {}\n\nexport interface RichTextBoldProps extends HTMLAttributes<HTMLElement> {}\n\nexport interface RichTextEmphasisProps extends HTMLAttributes<HTMLElement> {}\n\nexport const RichText = forwardRef<HTMLDivElement, RichTextProps>(function RichText(\n  { className, children, interior = false, ...rest },\n  ref,\n) {\n  const classes = ['vgui-rich-text']\n  if (interior) classes.push('vgui-rich-text--interior')\n  if (className) classes.push(className)\n\n  return (\n    <div ref={ref} className={classes.join(' ')} {...rest}>\n      {children}\n    </div>\n  )\n})\n\nRichText.displayName = 'RichText'\n\n/**\n * `\"RichText url\"` — the element the style maps onto. Prefer a bare `<a>` with\n * `vgui-rich-text__url`; this exists for call sites that want a React component.\n */\nexport const RichTextLink = forwardRef<HTMLAnchorElement, RichTextLinkProps>(\n  function RichTextLink({ className, ...rest }, ref) {\n    const classes = ['vgui-rich-text__url']\n    if (className) classes.push(className)\n\n    return <a ref={ref} className={classes.join(' ')} {...rest} />\n  },\n)\n\nRichTextLink.displayName = 'RichTextLink'\n\n/** `\"RichText bold\"` — `<strong>`, so the emphasis survives without the font. */\nexport const RichTextBold = forwardRef<HTMLElement, RichTextBoldProps>(\n  function RichTextBold({ className, ...rest }, ref) {\n    const classes = ['vgui-rich-text__bold']\n    if (className) classes.push(className)\n\n    return <strong ref={ref} className={classes.join(' ')} {...rest} />\n  },\n)\n\nRichTextBold.displayName = 'RichTextBold'\n\n/** `\"RichText emphasis\"` — `<em>`, for the same reason. */\nexport const RichTextEmphasis = forwardRef<HTMLElement, RichTextEmphasisProps>(\n  function RichTextEmphasis({ className, ...rest }, ref) {\n    const classes = ['vgui-rich-text__emphasis']\n    if (className) classes.push(className)\n\n    return <em ref={ref} className={classes.join(' ')} {...rest} />\n  },\n)\n\nRichTextEmphasis.displayName = 'RichTextEmphasis'\n"],"mappings":";;;;AAkBA,IAAa,WAAW,WAA0C,SAAS,SACzE,EAAE,WAAW,UAAU,WAAW,OAAO,GAAG,QAC5C,KACA;CACA,MAAM,UAAU,CAAC,gBAAgB;CACjC,IAAI,UAAU,QAAQ,KAAK,0BAA0B;CACrD,IAAI,WAAW,QAAQ,KAAK,SAAS;CAErC,OACE,oBAAC,OAAD;EAAU;EAAK,WAAW,QAAQ,KAAK,GAAG;EAAG,GAAI;EAC9C;CACE,CAAA;AAET,CAAC;AAED,SAAS,cAAc;;;;;AAMvB,IAAa,eAAe,WAC1B,SAAS,aAAa,EAAE,WAAW,GAAG,QAAQ,KAAK;CACjD,MAAM,UAAU,CAAC,qBAAqB;CACtC,IAAI,WAAW,QAAQ,KAAK,SAAS;CAErC,OAAO,oBAAC,KAAD;EAAQ;EAAK,WAAW,QAAQ,KAAK,GAAG;EAAG,GAAI;CAAO,CAAA;AAC/D,CACF;AAEA,aAAa,cAAc;;AAG3B,IAAa,eAAe,WAC1B,SAAS,aAAa,EAAE,WAAW,GAAG,QAAQ,KAAK;CACjD,MAAM,UAAU,CAAC,sBAAsB;CACvC,IAAI,WAAW,QAAQ,KAAK,SAAS;CAErC,OAAO,oBAAC,UAAD;EAAa;EAAK,WAAW,QAAQ,KAAK,GAAG;EAAG,GAAI;CAAO,CAAA;AACpE,CACF;AAEA,aAAa,cAAc;;AAG3B,IAAa,mBAAmB,WAC9B,SAAS,iBAAiB,EAAE,WAAW,GAAG,QAAQ,KAAK;CACrD,MAAM,UAAU,CAAC,0BAA0B;CAC3C,IAAI,WAAW,QAAQ,KAAK,SAAS;CAErC,OAAO,oBAAC,MAAD;EAAS;EAAK,WAAW,QAAQ,KAAK,GAAG;EAAG,GAAI;CAAO,CAAA;AAChE,CACF;AAEA,iBAAiB,cAAc"}

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

@@ -0,0 +1,3 @@
+export { RichText, RichTextBold, RichTextEmphasis, RichTextLink } from './RichText';
+export type { RichTextBoldProps, RichTextEmphasisProps, RichTextLinkProps, RichTextProps, } from './RichText';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/RichText/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AACnF,YAAY,EACV,iBAAiB,EACjB,qBAAqB,EACrB,iBAAiB,EACjB,aAAa,GACd,MAAM,YAAY,CAAA"}