@galaxy-io/dls 1.6.0 → 2.0.0

package/dist/inputs/PinInput.js

@@ -0,0 +1,364 @@
+import { useControlledState } from "../hooks/useControlledState.js";
+import { useDevWarning } from "./internal/devWarn.js";
+import { useFieldWiring } from "./internal/fieldWiring.js";
+import Field, { FieldSize } from "./Field.js";
+import { rootStyle, useOwnField } from "./internal/ownField.js";
+/* empty css                   */
+import { styled } from "@linaria/react";
+import { forwardRef, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "@linaria/core";
+//#region src/inputs/PinInput.tsx
+/**
+* The field for a short code typed one character per box: a one-time password, an email
+* confirmation code, a device pairing code. It draws `length` square boxes in the input frame's
+* looks, each a real `<input>` holding one character, and holds the code as one string
+* (`value` / `defaultValue` / `onChange`), calling `onComplete` once every box is filled. Typing
+* advances, Backspace steps back, arrows move, and pasting a whole code fills every box. It accepts
+* digits (`PinInputType.NUMERIC`) or letters and digits (`ALPHANUMERIC`), and can mask characters.
+*
+* PinInput never validates: whether the code is right is the app's `error`. New in 2.0 (rafa's
+* PinInput, EXAMPLES §14).
+*/
+/** Canonical rungs; PinInput exposes three (EXAMPLES §14). Boxes are squares of the rung height. */
+var PinInputSize = /* @__PURE__ */ function(PinInputSize) {
+	/** 24px boxes, body_md mono characters. */
+	PinInputSize["SMALL"] = "SMALL";
+	/** 32px boxes, body_lg mono characters. The default. */
+	PinInputSize["MEDIUM"] = "MEDIUM";
+	/** 36px boxes, heading_sm mono characters. */
+	PinInputSize["LARGE"] = "LARGE";
+	return PinInputSize;
+}({});
+/** Resting fill of each box (Constitution V-A surface set; the 1.x InputVariant members). */
+var PinInputVariant = /* @__PURE__ */ function(PinInputVariant) {
+	/** `background.base` fill. */
+	PinInputVariant["BASE"] = "BASE";
+	/** `background.primary` fill. The default. */
+	PinInputVariant["PRIMARY"] = "PRIMARY";
+	/** `background.secondary` fill. */
+	PinInputVariant["SECONDARY"] = "SECONDARY";
+	/** `background.tertiary` fill. */
+	PinInputVariant["TERTIARY"] = "TERTIARY";
+	return PinInputVariant;
+}({});
+/** Which characters a box accepts (EXAMPLES §14). */
+var PinInputType = /* @__PURE__ */ function(PinInputType) {
+	/** 0–9; the numeric keypad on mobile. The default. */
+	PinInputType["NUMERIC"] = "NUMERIC";
+	/** A–Z, a–z, 0–9, kept in the case typed; the text keyboard. */
+	PinInputType["ALPHANUMERIC"] = "ALPHANUMERIC";
+	return PinInputType;
+}({});
+/** The characters each type accepts (one at a time). */
+var PIN_INPUT_TYPE_TO_PATTERN_MAP = {
+	["NUMERIC"]: /[0-9]/,
+	["ALPHANUMERIC"]: /[0-9A-Za-z]/
+};
+/** The mobile keyboard each type asks for. */
+var PIN_INPUT_TYPE_TO_INPUT_MODE_MAP = {
+	["NUMERIC"]: "numeric",
+	["ALPHANUMERIC"]: "text"
+};
+/** Keeps only the characters `type` accepts. */
+function accept(text, type) {
+	const pattern = PIN_INPUT_TYPE_TO_PATTERN_MAP[type];
+	return [...text].filter((character) => pattern.test(character)).join("");
+}
+/** The announcement when the last box is filled. */
+var PIN_INPUT_COMPLETE_MESSAGE = "Code complete";
+/** The row of boxes. */
+var Group = /*#__PURE__*/ styled("div")({
+	name: "Group",
+	class: "gx-PinInput-Group-gi2xfa2",
+	propsAsIs: false
+});
+/**
+* One box: a real `<input>` holding one character, framed like an input. Focus, from the mouse or
+* the keyboard, is `FIELD_FOCUS` (`border.focused` at 1px inside the box); `:focus:hover` beats the hover map.
+*/
+var Cell = /*#__PURE__*/ styled("input")({
+	name: "Cell",
+	class: "gx-PinInput-Cell-cf4a6mm",
+	propsAsIs: false
+});
+/** The polite "Code complete" announcement. */
+var StatusRegion = /*#__PURE__*/ styled("span")({
+	name: "StatusRegion",
+	class: "gx-PinInput-StatusRegion-s6vpedl",
+	propsAsIs: false
+});
+/** Gap between boxes per rung. */
+var PIN_INPUT_SIZE_TO_GROUP_CSS_MAP = {
+	["SMALL"]: "gx-PinInput-SMALL-s12gcqos",
+	["MEDIUM"]: "gx-PinInput-MEDIUM-m10mcjx2",
+	["LARGE"]: "gx-PinInput-LARGE-lwr89f6"
+};
+/**
+* The square and the character step: one text step above the rung's control text. Box and line
+* heights are even, so the character centers on whole pixels (4 / 6 / 8px).
+*/
+var PIN_INPUT_SIZE_TO_BOX_CSS_MAP = {
+	["SMALL"]: "gx-PinInput-SMALL-s1smtwrw",
+	["MEDIUM"]: "gx-PinInput-MEDIUM-m1a6i3g5",
+	["LARGE"]: "gx-PinInput-LARGE-lu3w498"
+};
+/** Rest look per variant: fill and hairline color. */
+var PIN_INPUT_VARIANT_TO_CSS_MAP = {
+	["BASE"]: "gx-PinInput-BASE-b1fhhvbm",
+	["PRIMARY"]: "gx-PinInput-PRIMARY-p1lu8dei",
+	["SECONDARY"]: "gx-PinInput-SECONDARY-sn0bkgy",
+	["TERTIARY"]: "gx-PinInput-TERTIARY-t1dzrhdt"
+};
+/** `isGhost`: no fill and no hairline on a box at rest. Declared after the variant map, which it replaces. */
+var GHOST_CSS = "gx-PinInput-GHOST_CSS-gcykbcf";
+/**
+* Hover on an editable box: `border.hovered` (stronger than `border.primary` in both themes,
+* Constitution III.6).
+*/
+var PIN_INPUT_VARIANT_TO_HOVER_CSS_MAP = {
+	["BASE"]: "gx-PinInput-BASE-bwn9jv8",
+	["PRIMARY"]: "gx-PinInput-PRIMARY-p1au6atb",
+	["SECONDARY"]: "gx-PinInput-SECONDARY-s1vuavqe",
+	["TERTIARY"]: "gx-PinInput-TERTIARY-tlommsh"
+};
+/** Hover on an editable ghost box: the frame appears, `border.hovered` with no fill. */
+var GHOST_HOVER_CSS = "gx-PinInput-GHOST_HOVER_CSS-g1cfyci9";
+/** The `Field` a PinInput renders for its own `label` / `error` uses the same rung. */
+var PIN_INPUT_SIZE_TO_FIELD_SIZE_MAP = {
+	["SMALL"]: FieldSize.SMALL,
+	["MEDIUM"]: FieldSize.MEDIUM,
+	["LARGE"]: FieldSize.LARGE
+};
+/** Error border on every box, at rest, on hover and with focus (the 1px inset focus line is red too). */
+var ERROR_CSS = "gx-PinInput-ERROR_CSS-emv6pcb";
+/**
+* Disabled: the variant's resting fill and hairline are kept (`border.disabled` is not used on
+* frames); the box reads as disabled through `text.disabled` and the cursor.
+*/
+var DISABLED_CSS = "gx-PinInput-DISABLED_CSS-dz9kczs";
+/** The boxes, wired to the nearest Field (the PinInput's own or the app's). */
+function PinGroup({ pinProps, forwardedRef, isRoot }) {
+	const { length: lengthProp = 6, value, defaultValue = "", onChange, onComplete, type = "NUMERIC", isMasked = false, size = "MEDIUM", variant = "PRIMARY", isGhost = false, label: _label, error, isError = false, isDisabled = false, isReadOnly = false, isRequired = false, ariaLabel, autoFocus = false, id, "aria-describedby": ariaDescribedBy, className, style, ...rest } = pinProps;
+	const length = Math.max(1, Math.floor(Number.isFinite(lengthProp) ? lengthProp : 1));
+	const { field, controlId, describedBy, isInvalid, isRequired: isRequiredState, hasName } = useFieldWiring({
+		id,
+		ariaLabel,
+		ariaLabelAttribute: rest["aria-label"],
+		ariaLabelledBy: rest["aria-labelledby"],
+		ariaDescribedBy,
+		error,
+		isError,
+		isRequired
+	});
+	const boxId = (index) => index === 0 ? controlId : `${controlId}-${index}`;
+	const [rawValue, setValue] = useControlledState({
+		value,
+		defaultValue,
+		onChange
+	});
+	const code = rawValue.slice(0, length);
+	const codeRef = useRef(code);
+	codeRef.current = code;
+	const inputRefs = useRef([]);
+	const [announcement, setAnnouncement] = useState("");
+	const [composing, setComposing] = useState(null);
+	const isEditable = !isDisabled && !isReadOnly;
+	/** The last box the user may focus: the first empty one, or the last box when full. */
+	const lastFillable = () => Math.min(codeRef.current.length, length - 1);
+	/**
+	* Where an edit from box `index` applies: never past the end of the code, so a box left focused
+	* after the code shrank (an app reset) writes and deletes at the end of the code.
+	*/
+	const fillablePosition = (index) => Math.min(index, codeRef.current.length);
+	const focusBox = (index) => {
+		const input = inputRefs.current[index];
+		if (input === null || input === void 0) return;
+		input.focus();
+		input.select();
+	};
+	/** Writes a new code, calls `onChange`, then `onComplete` when this edit completed it. */
+	const update = (next) => {
+		const previous = codeRef.current;
+		if (next === previous) return;
+		codeRef.current = next;
+		setValue(next);
+		if (previous.length < length && next.length === length) {
+			onComplete?.(next);
+			setAnnouncement(PIN_INPUT_COMPLETE_MESSAGE);
+		} else setAnnouncement("");
+	};
+	/** The accepted characters of `text` overwrite the code from box `index`; focus follows them. */
+	const write = (index, text) => {
+		if (!isEditable) return;
+		const accepted = accept(text, type);
+		if (accepted === "") return;
+		const current = codeRef.current;
+		const start = fillablePosition(index);
+		update((current.slice(0, start) + accepted + current.slice(start + accepted.length)).slice(0, length));
+		focusBox(Math.min(start + accepted.length, length - 1));
+	};
+	const handleChange = (index) => (event) => {
+		if (event.nativeEvent.isComposing) {
+			setComposing({
+				index,
+				text: event.target.value
+			});
+			return;
+		}
+		write(index, event.target.value);
+	};
+	const handleCompositionEnd = (index) => (event) => {
+		setComposing(null);
+		write(index, event.currentTarget.value);
+	};
+	const handleKeyDown = (index) => (event) => {
+		if (event.nativeEvent.isComposing) return;
+		const current = codeRef.current;
+		const position = fillablePosition(index);
+		switch (event.key) {
+			case "Backspace":
+				event.preventDefault();
+				if (!isEditable) return;
+				if (position < current.length) {
+					update(current.slice(0, position) + current.slice(position + 1));
+					focusBox(position);
+				} else if (position > 0) {
+					update(current.slice(0, position - 1) + current.slice(position));
+					focusBox(position - 1);
+				}
+				return;
+			case "Delete":
+				event.preventDefault();
+				if (!isEditable || position >= current.length) return;
+				update(current.slice(0, position) + current.slice(position + 1));
+				focusBox(position);
+				return;
+			case "ArrowLeft":
+				event.preventDefault();
+				focusBox(Math.max(0, index - 1));
+				return;
+			case "ArrowRight":
+				event.preventDefault();
+				focusBox(Math.min(index + 1, lastFillable()));
+				return;
+			case "Home":
+				event.preventDefault();
+				focusBox(0);
+				return;
+			case "End":
+				event.preventDefault();
+				focusBox(lastFillable());
+				return;
+			default: return;
+		}
+	};
+	const handlePaste = (index) => (event) => {
+		event.preventDefault();
+		if (!isEditable) return;
+		const pasted = accept(event.clipboardData.getData("text"), type);
+		if (pasted === "") return;
+		const start = fillablePosition(index);
+		update((codeRef.current.slice(0, start) + pasted).slice(0, length));
+		focusBox(Math.min(start + pasted.length, length - 1));
+	};
+	/** Focus lands on a fillable box; every focus selects the box's character. */
+	const handleFocus = (index) => (event) => {
+		const target = lastFillable();
+		if (index > target) {
+			focusBox(target);
+			return;
+		}
+		event.currentTarget.select();
+	};
+	/** A press focuses the box itself (and selects it), so the caret never lands beside a character. */
+	const handleMouseDown = (index) => (event) => {
+		if (isDisabled || event.button !== 0) return;
+		event.preventDefault();
+		focusBox(Math.min(index, lastFillable()));
+	};
+	useEffect(() => {
+		const active = inputRefs.current.find((input) => input !== null && input.ownerDocument.activeElement === input);
+		if (active === void 0 || active === null) return;
+		if (inputRefs.current.indexOf(active) > lastFillable()) focusBox(lastFillable());
+	});
+	const hasAutoFocusedRef = useRef(false);
+	useEffect(() => {
+		if (!autoFocus || isDisabled || hasAutoFocusedRef.current) return;
+		hasAutoFocusedRef.current = true;
+		focusBox(Math.min(codeRef.current.length, length - 1));
+	});
+	useDevWarning(!hasName, "[@galaxy-io/dls] PinInput has no accessible name. Pass `label`, wrap it in a labelled `Field`, or set `ariaLabel`.");
+	const boxes = Array.from({ length }, (_, index) => index);
+	return /* @__PURE__ */ jsxs(Group, {
+		ref: forwardedRef,
+		role: "group",
+		"aria-labelledby": field?.labelId,
+		"aria-label": ariaLabel,
+		...rest,
+		className: cx(PIN_INPUT_SIZE_TO_GROUP_CSS_MAP[size], isRoot ? className : void 0),
+		...rootStyle(isRoot, style),
+		children: [boxes.map((index) => /* @__PURE__ */ jsx(Cell, {
+			ref: (element) => {
+				inputRefs.current[index] = element;
+			},
+			id: boxId(index),
+			type: isMasked ? "password" : "text",
+			inputMode: PIN_INPUT_TYPE_TO_INPUT_MODE_MAP[type],
+			autoComplete: index === 0 ? "one-time-code" : "off",
+			autoCapitalize: "off",
+			autoCorrect: "off",
+			spellCheck: false,
+			value: composing?.index === index ? composing.text : code[index] ?? "",
+			disabled: isDisabled,
+			readOnly: isReadOnly,
+			tabIndex: index <= Math.min(code.length, length - 1) ? 0 : -1,
+			"aria-label": `Character ${index + 1} of ${length}`,
+			"aria-describedby": describedBy,
+			"aria-invalid": isInvalid ? true : void 0,
+			"aria-required": isRequiredState ? true : void 0,
+			onChange: handleChange(index),
+			onCompositionEnd: handleCompositionEnd(index),
+			onKeyDown: handleKeyDown(index),
+			onPaste: handlePaste(index),
+			onFocus: handleFocus(index),
+			onMouseDown: handleMouseDown(index),
+			className: cx(PIN_INPUT_SIZE_TO_BOX_CSS_MAP[size], isGhost ? GHOST_CSS : PIN_INPUT_VARIANT_TO_CSS_MAP[variant], isEditable && !isInvalid && (isGhost ? GHOST_HOVER_CSS : PIN_INPUT_VARIANT_TO_HOVER_CSS_MAP[variant]), isInvalid && !isDisabled && ERROR_CSS, isDisabled && DISABLED_CSS)
+		}, index)), /* @__PURE__ */ jsx(StatusRegion, {
+			role: "status",
+			"aria-live": "polite",
+			children: announcement
+		})]
+	});
+}
+/** One box per character, for OTP and confirmation codes. */
+var PinInput = forwardRef(function PinInput(props, ref) {
+	const { label, error, isRequired = false, size = "MEDIUM" } = props;
+	const { id, className, style } = props;
+	const ownField = useOwnField({
+		componentName: "PinInput",
+		label,
+		error,
+		isRequired,
+		size: PIN_INPUT_SIZE_TO_FIELD_SIZE_MAP[size],
+		id,
+		className,
+		style
+	});
+	if (ownField !== null) return /* @__PURE__ */ jsx(Field, {
+		...ownField,
+		children: /* @__PURE__ */ jsx(PinGroup, {
+			pinProps: props,
+			forwardedRef: ref,
+			isRoot: false
+		})
+	});
+	return /* @__PURE__ */ jsx(PinGroup, {
+		pinProps: props,
+		forwardedRef: ref,
+		isRoot: true
+	});
+});
+PinInput.displayName = "PinInput";
+//#endregion
+export { PinInputSize, PinInputType, PinInputVariant, PinInput as default };

package/dist/inputs/RadioGroup.d.ts

@@ -0,0 +1,115 @@
+import { type AriaAttributes, type CSSProperties, type ReactElement, type ReactNode, type RefAttributes } from "react";
+import { Orientation } from "../theme/enums.js";
+/** Rung of the group's radios (Constitution III-A.4). Mapped to RadioInputSize and FieldSize one to one. */
+export declare enum RadioGroupSize {
+    /** 12px circles, caption labels. */
+    X_SMALL = "X_SMALL",
+    /** 14px circles, body_sm labels. */
+    SMALL = "SMALL",
+    /** 16px circles, body_md labels. The default. */
+    MEDIUM = "MEDIUM",
+    /** 16px circles, body_lg labels. */
+    LARGE = "LARGE",
+    /** 18px circles, body_lg labels. */
+    X_LARGE = "X_LARGE"
+}
+/** Fill of the unselected circles (Constitution V-A surface set). Mapped to RadioInputVariant one to one. */
+export declare enum RadioGroupVariant {
+    /** `background.base`. */
+    BASE = "BASE",
+    /** `background.primary`. The default. */
+    PRIMARY = "PRIMARY",
+    /** `background.secondary`. */
+    SECONDARY = "SECONDARY",
+    /** `background.tertiary`. */
+    TERTIARY = "TERTIARY"
+}
+/** One choice in a RadioGroup. */
+export interface RadioGroupOption<TId extends string = string> {
+    /** Stable identifier; what `value` holds. */
+    id: TId;
+    /** Text beside the circle. */
+    label: string;
+    /** Help copy under the label. Text and inline `Link`s only. */
+    description?: ReactNode;
+    /**
+     * Disables this option only; the arrow keys skip it.
+     * @default false
+     */
+    isDisabled?: boolean;
+}
+export interface RadioGroupProps<TId extends string = string> extends AriaAttributes {
+    /** The choices, in display order. */
+    options: RadioGroupOption<TId>[];
+    /** Controlled id of the selected option; `null` for none. Pass it with `onChange`. */
+    value?: TId | null;
+    /**
+     * Initially selected id while uncontrolled.
+     * @default null
+     */
+    defaultValue?: TId | null;
+    /** Called with the id the user selects. The user cannot clear a selection. */
+    onChange?: (value: TId) => void;
+    /** The question, rendered through `Field` above the options. For a description, a tooltip or a horizontal layout, wrap the group in `Field` instead. */
+    label?: string;
+    /** Message from the app, shown under the options through `Field`. It also marks the group invalid. */
+    error?: string;
+    /**
+     * Error borders and `aria-invalid` without a message. `error` implies it.
+     * @default false
+     */
+    isError?: boolean;
+    /**
+     * Asterisk on the `label` (via `Field`) and `aria-required` on the group. It does no validation.
+     * @default false
+     */
+    isRequired?: boolean;
+    /**
+     * `VERTICAL` stacks the options; `HORIZONTAL` puts them in a row that wraps.
+     * @default Orientation.VERTICAL
+     */
+    orientation?: Orientation;
+    /**
+     * Rung of every radio and label, of the gaps, and of the `label` and `error` type.
+     * @default RadioGroupSize.MEDIUM
+     */
+    size?: RadioGroupSize;
+    /**
+     * Fill of every unselected circle, from the surface set. Ignored with `isGhost`.
+     * @default RadioGroupVariant.PRIMARY
+     */
+    variant?: RadioGroupVariant;
+    /**
+     * Ghost items: every unselected circle has no fill and keeps its hairline (1.x `TRANSPARENT`);
+     * passed to each RadioInput as `isGhost`.
+     * @default false
+     */
+    isGhost?: boolean;
+    /**
+     * Disables every option.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /** Accessible name of the group when there is no `label` and no wrapping `Field` label. */
+    ariaLabel?: string;
+    /**
+     * DOM id of the group element. A wrapping `Field`'s id wins.
+     * @default useId()
+     */
+    id?: string;
+    /** Any `data-*` attribute, forwarded to the group element. */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+    /** Extra class on the root: the `Field` wrapper when the group renders one, otherwise the group element. */
+    className?: string;
+    /** Inline style on the root; only for setting CSS custom properties. */
+    style?: CSSProperties;
+}
+/**
+ * The public, generic call signature (`TId` inferred from `options`). Never called: it only types
+ * the default export. An arrow function rather than a type literal, so react-docgen-typescript
+ * reads the props for the Docs tab.
+ */
+declare const RADIO_GROUP_SIGNATURE: <TId extends string = string>(_props: RadioGroupProps<TId> & RefAttributes<HTMLDivElement>) => ReactElement | null;
+/** A set of radios answering one question; the value is the selected id. */
+declare const RadioGroup: typeof RADIO_GROUP_SIGNATURE;
+export default RadioGroup;

package/dist/inputs/RadioGroup.js

@@ -0,0 +1,179 @@
+import { Orientation } from "../theme/enums.js";
+import { useControlledState } from "../hooks/useControlledState.js";
+import { useDevWarning } from "./internal/devWarn.js";
+import { useFieldWiring } from "./internal/fieldWiring.js";
+import Field, { FieldSize } from "./Field.js";
+import { rootStyle, useOwnField } from "./internal/ownField.js";
+import RadioInput, { RadioInputSize, RadioInputVariant } from "./RadioInput.js";
+/* empty css                     */
+import { styled } from "@linaria/react";
+import { forwardRef, useCallback, useId } from "react";
+import { jsx } from "react/jsx-runtime";
+import { cx } from "@linaria/core";
+//#region src/inputs/RadioGroup.tsx
+/**
+* One question whose answer is exactly one of a few visible options ("Theme", "Sync schedule"). It
+* renders a `RadioInput` per option, in a column or a wrapping row, all sharing one generated
+* native `name`, so the browser gives them the radio keyboard pattern (one tab stop, arrow keys
+* move and select). It holds the selected id with `value` / `defaultValue` / `onChange`, and it is
+* the `radiogroup` that carries the question's name, required and invalid state. Like the text
+* inputs, it takes `label` and `error` directly and renders them through `Field`; anything more is
+* a wrapping `Field`.
+*
+* It does not validate, is not a segmented control for switching a view (`ToggleInput`), and is
+* not a dropdown for long lists (`SelectInput`). Any number of choices is `CheckboxGroup`. New in
+* 2.0 (1.x rendered `RadioInput`s by hand and enforced single selection in app state).
+*/
+/** Rung of the group's radios (Constitution III-A.4). Mapped to RadioInputSize and FieldSize one to one. */
+var RadioGroupSize = /* @__PURE__ */ function(RadioGroupSize) {
+	/** 12px circles, caption labels. */
+	RadioGroupSize["X_SMALL"] = "X_SMALL";
+	/** 14px circles, body_sm labels. */
+	RadioGroupSize["SMALL"] = "SMALL";
+	/** 16px circles, body_md labels. The default. */
+	RadioGroupSize["MEDIUM"] = "MEDIUM";
+	/** 16px circles, body_lg labels. */
+	RadioGroupSize["LARGE"] = "LARGE";
+	/** 18px circles, body_lg labels. */
+	RadioGroupSize["X_LARGE"] = "X_LARGE";
+	return RadioGroupSize;
+}({});
+/** Fill of the unselected circles (Constitution V-A surface set). Mapped to RadioInputVariant one to one. */
+var RadioGroupVariant = /* @__PURE__ */ function(RadioGroupVariant) {
+	/** `background.base`. */
+	RadioGroupVariant["BASE"] = "BASE";
+	/** `background.primary`. The default. */
+	RadioGroupVariant["PRIMARY"] = "PRIMARY";
+	/** `background.secondary`. */
+	RadioGroupVariant["SECONDARY"] = "SECONDARY";
+	/** `background.tertiary`. */
+	RadioGroupVariant["TERTIARY"] = "TERTIARY";
+	return RadioGroupVariant;
+}({});
+/** The group element. The first row sits in a control-height band (block inset = Field's label offset). */
+var Root = /*#__PURE__*/ styled("div")({
+	name: "Root",
+	class: "gx-RadioGroup-r1g93v93",
+	propsAsIs: false
+});
+/** A column, or a row that wraps. */
+var RADIO_GROUP_ORIENTATION_TO_CSS_MAP = {
+	[Orientation.VERTICAL]: "gx-RadioGroup-Orientation_VERTICAL-ouwhueh",
+	[Orientation.HORIZONTAL]: "gx-RadioGroup-Orientation_HORIZONTAL-o1onppun"
+};
+/** Row gap, column gap and block inset per rung (inset = (control rung − label line) / 2). */
+var RADIO_GROUP_SIZE_TO_CSS_MAP = {
+	["X_SMALL"]: "gx-RadioGroup-X_SMALL-x1hjaxb2",
+	["SMALL"]: "gx-RadioGroup-SMALL-sss5vly",
+	["MEDIUM"]: "gx-RadioGroup-MEDIUM-mc6iiv9",
+	["LARGE"]: "gx-RadioGroup-LARGE-ld02soo",
+	["X_LARGE"]: "gx-RadioGroup-X_LARGE-x1rrw221"
+};
+/** Every radio takes the group's rung. */
+var RADIO_GROUP_SIZE_TO_RADIO_INPUT_SIZE_MAP = {
+	["X_SMALL"]: RadioInputSize.X_SMALL,
+	["SMALL"]: RadioInputSize.SMALL,
+	["MEDIUM"]: RadioInputSize.MEDIUM,
+	["LARGE"]: RadioInputSize.LARGE,
+	["X_LARGE"]: RadioInputSize.X_LARGE
+};
+/** Every radio takes the group's fill. */
+var RADIO_GROUP_VARIANT_TO_RADIO_INPUT_VARIANT_MAP = {
+	["BASE"]: RadioInputVariant.BASE,
+	["PRIMARY"]: RadioInputVariant.PRIMARY,
+	["SECONDARY"]: RadioInputVariant.SECONDARY,
+	["TERTIARY"]: RadioInputVariant.TERTIARY
+};
+/** The `Field` the group renders for its own `label` / `error` uses the same rung. */
+var RADIO_GROUP_SIZE_TO_FIELD_SIZE_MAP = {
+	["X_SMALL"]: FieldSize.X_SMALL,
+	["SMALL"]: FieldSize.SMALL,
+	["MEDIUM"]: FieldSize.MEDIUM,
+	["LARGE"]: FieldSize.LARGE,
+	["X_LARGE"]: FieldSize.X_LARGE
+};
+/** The radiogroup and its radios, wired to the nearest Field (the group's own or the app's). */
+function GroupBody({ groupProps, forwardedRef, isRoot }) {
+	const { options, value, defaultValue, onChange, label: _label, error, isError = false, isRequired = false, orientation = Orientation.VERTICAL, size = "MEDIUM", variant = "PRIMARY", isGhost = false, isDisabled = false, ariaLabel, id, "aria-describedby": ariaDescribedBy, className, style, ...rest } = groupProps;
+	const wiring = useFieldWiring({
+		id,
+		ariaLabel,
+		ariaLabelAttribute: rest["aria-label"],
+		ariaLabelledBy: rest["aria-labelledby"],
+		ariaDescribedBy,
+		error,
+		isError,
+		isRequired
+	});
+	const { field, controlId: groupId, describedBy, isRequired: isRequiredState, hasName } = wiring;
+	const name = useId();
+	const handleChange = useCallback((next) => {
+		if (next !== null) onChange?.(next);
+	}, [onChange]);
+	const [selected, setSelected] = useControlledState({
+		value,
+		defaultValue: defaultValue ?? null,
+		onChange: handleChange
+	});
+	const isInvalid = error !== void 0 || wiring.isInvalid;
+	useDevWarning(!hasName, "[@galaxy-io/dls] RadioGroup has no accessible name. Pass `label`, wrap it in a labelled `Field`, or set `ariaLabel`.");
+	return /* @__PURE__ */ jsx(Root, {
+		ref: forwardedRef,
+		role: "radiogroup",
+		id: groupId,
+		"aria-labelledby": field?.labelId,
+		"aria-label": ariaLabel,
+		"aria-describedby": describedBy,
+		"aria-required": isRequiredState ? true : void 0,
+		"aria-invalid": isInvalid ? true : void 0,
+		"aria-disabled": isDisabled ? true : void 0,
+		...rest,
+		className: cx(RADIO_GROUP_ORIENTATION_TO_CSS_MAP[orientation], RADIO_GROUP_SIZE_TO_CSS_MAP[size], isRoot && className),
+		...rootStyle(isRoot, style),
+		children: options.map((option) => /* @__PURE__ */ jsx(RadioInput, {
+			name,
+			label: option.label,
+			...option.description === void 0 ? {} : { description: option.description },
+			size: RADIO_GROUP_SIZE_TO_RADIO_INPUT_SIZE_MAP[size],
+			variant: RADIO_GROUP_VARIANT_TO_RADIO_INPUT_VARIANT_MAP[variant],
+			isGhost,
+			isSelected: selected === option.id,
+			isDisabled: isDisabled || option.isDisabled === true,
+			isError: isInvalid,
+			onChange: () => setSelected(option.id)
+		}, option.id))
+	});
+}
+/** A set of radios answering one question; the value is the selected id. */
+var RadioGroupBase = forwardRef(function RadioGroup(props, ref) {
+	const { label, error, isRequired = false, size = "MEDIUM" } = props;
+	const { id, className, style } = props;
+	const ownField = useOwnField({
+		componentName: "RadioGroup",
+		label,
+		error,
+		isRequired,
+		size: RADIO_GROUP_SIZE_TO_FIELD_SIZE_MAP[size],
+		id,
+		className,
+		style
+	});
+	if (ownField !== null) return /* @__PURE__ */ jsx(Field, {
+		...ownField,
+		children: /* @__PURE__ */ jsx(GroupBody, {
+			groupProps: props,
+			forwardedRef: ref,
+			isRoot: false
+		})
+	});
+	return /* @__PURE__ */ jsx(GroupBody, {
+		groupProps: props,
+		forwardedRef: ref,
+		isRoot: true
+	});
+});
+RadioGroupBase.displayName = "RadioGroup";
+/** A set of radios answering one question; the value is the selected id. */
+var RadioGroup = RadioGroupBase;
+//#endregion
+export { RadioGroupSize, RadioGroupVariant, RadioGroup as default };