@gnist/design-system 4.5.1 → 5.0.1

package/CHANGELOG.md

@@ -3,6 +3,27 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.0.1](https://github.com/mollerdigital/design-system-design-system/compare/@gnist/design-system@5.0.0...@gnist/design-system@5.0.1) (2025-11-25)
+
+### Bug Fixes
+
+* check group before setting group.value ([fcb7fb6](https://github.com/mollerdigital/design-system-design-system/commit/fcb7fb6c71faa1bed7a2673beaae172837df773d))
+
+## [5.0.0](https://github.com/mollerdigital/design-system-design-system/compare/@gnist/design-system@4.5.1...@gnist/design-system@5.0.0) (2025-11-24)
+
+### ⚠ BREAKING CHANGES
+
+* RadioButtonGroup renamed to RadioGroup
+
+- Radiobuttons can be used in form provider using RadioGroup for field
+- RadioGroup should control state for RadioButtons (but individual control is still supported)
+
+This commit was to trigger publish. For code, see: https://github.com/mollerdigital/design-system-design-system/pull/747
+
+### Features
+
+* RadioButtonGroup renamed to RadioGroup ([ce61d98](https://github.com/mollerdigital/design-system-design-system/commit/ce61d984db8f646a3e2dc1d4b853edf7e1f144e8))
+
 ## [4.5.1](https://github.com/mollerdigital/design-system-design-system/compare/@gnist/design-system@4.5.0...@gnist/design-system@4.5.1) (2025-11-20)
 
 **Note:** Version bump only for package @gnist/design-system

package/dist/components/actions/index.cjs

@@ -11,7 +11,7 @@ const IconButton = require("./buttons/IconButton.cjs");
 const Checkbox = require("./selectionControls/Checkbox.cjs");
 const RadioButton = require("./selectionControls/RadioButton.cjs");
 const Switch = require("./selectionControls/Switch.cjs");
-const RadioButtonGroup = require("./selectionControls/RadioButtonGroup.cjs");
+const RadioGroup = require("./selectionControls/RadioGroup.cjs");
 const ActionChip = require("./chips/ActionChip.cjs");
 const FilterChip = require("./chips/FilterChip.cjs");
 const TagChip = require("./chips/TagChip.cjs");
@@ -25,7 +25,7 @@ exports.IconButton = IconButton.IconButton;
 exports.Checkbox = Checkbox.Checkbox;
 exports.RadioButton = RadioButton.RadioButton;
 exports.Switch = Switch.Switch;
-exports.RadioButtonGroup = RadioButtonGroup.RadioButtonGroup;
+exports.RadioGroup = RadioGroup.RadioGroup;
 exports.ActionChip = ActionChip.ActionChip;
 exports.FilterChip = FilterChip.FilterChip;
 exports.TagChip = TagChip.TagChip;

package/dist/components/actions/index.js

@@ -9,7 +9,7 @@ import { IconButton } from "./buttons/IconButton.js";
 import { Checkbox } from "./selectionControls/Checkbox.js";
 import { RadioButton } from "./selectionControls/RadioButton.js";
 import { Switch } from "./selectionControls/Switch.js";
-import { RadioButtonGroup } from "./selectionControls/RadioButtonGroup.js";
+import { RadioGroup } from "./selectionControls/RadioGroup.js";
 import { ActionChip } from "./chips/ActionChip.js";
 import { FilterChip } from "./chips/FilterChip.js";
 import { TagChip } from "./chips/TagChip.js";
@@ -22,7 +22,7 @@ export {
   IconButton,
   PrimaryButton,
   RadioButton,
-  RadioButtonGroup,
+  RadioGroup,
   SecondaryButton,
   SuccessButton,
   Switch,

package/dist/components/actions/selectionControls/RadioButton.cjs

@@ -10,6 +10,7 @@ const classNames = require("classnames");
 const radiobutton_css = require("./radiobutton.css.cjs");
 const shared_css = require("./shared.css.cjs");
 const shared = require("./shared.cjs");
+const RadioGroup = require("./RadioGroup.cjs");
 const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
 const classNames__default = /* @__PURE__ */ _interopDefaultCompat(classNames);
 const CustomRadioButton = ({ isChecked, disabled, validity }) => {
@@ -37,19 +38,41 @@ function RadioButton({
   render = defaultRender,
   ref,
   checked,
+  required,
+  name,
   // Input element props
   ...rest
 }) {
+  const group = RadioGroup.useRadio();
   const inputId = id;
   const labelId = `${id}-label`;
   const helperId = `${id}-helper`;
   const { helperTextProps, inputAriaProps } = InputHelperText.useInputHelperText({
     id: helperId,
+    /*
+        Used radiobutton-validity here,
+        as this determines helperText.
+        If controlled by group, error text is in the group component.
+    */
     validity,
     reserveSpaceForMessage: canShowErrorMessage
   });
-  const radioButtonElement = jsxRuntime.jsx("span", { className: classNames__default.default(shared_css.InputWrapper, className), ref, children: jsxRuntime.jsxs("label", { htmlFor: inputId, className: shared_css.LabelRecipe({ disabled }), id: labelId, children: [jsxRuntime.jsx("input", { type: "radio", id: inputId, disabled, onChange, value, checked: checked ?? false, className: shared_css.InputStyleRecipe({ disabled }), tabIndex: 0, ...inputAriaProps, ...rest }), jsxRuntime.jsx(CustomRadioButton, { isChecked: checked ?? false, disabled, validity }), hideLabel ? jsxRuntime.jsx(ScreenReaderOnly.ScreenReaderOnly, { children: label }) : jsxRuntime.jsx("span", { className: shared_css.LabelStyle, children: label })] }) });
-  const descriptionElement = description ? jsxRuntime.jsx(shared.SelectionDescription, { disabled, children: description }) : void 0;
+  const effectiveRequired = group?.required ?? required;
+  const effectiveChecked = group ? group.value === value : !!checked;
+  const effectiveName = group?.name ?? name;
+  const effectiveValidity = group?.validity ?? validity;
+  const effectiveDisabled = group?.disabled ?? disabled;
+  const handleChange = (event) => {
+    if (group?.onChange) {
+      group.onChange(String(value));
+      return;
+    }
+    onChange?.(event);
+  };
+  const radioButtonElement = jsxRuntime.jsx("span", { className: classNames__default.default(shared_css.InputWrapper, className), ref, children: jsxRuntime.jsxs("label", { htmlFor: inputId, className: shared_css.LabelRecipe({ disabled: effectiveDisabled }), id: labelId, children: [jsxRuntime.jsx("input", { type: "radio", id: inputId, name: effectiveName, disabled: effectiveDisabled, required: effectiveRequired, onChange: handleChange, value, checked: effectiveChecked, className: shared_css.InputStyleRecipe({
+    disabled: effectiveDisabled
+  }), tabIndex: 0, ...inputAriaProps, ...rest }), jsxRuntime.jsx(CustomRadioButton, { isChecked: effectiveChecked, disabled: effectiveDisabled, validity: effectiveValidity }), hideLabel ? jsxRuntime.jsx(ScreenReaderOnly.ScreenReaderOnly, { children: label }) : jsxRuntime.jsx("span", { className: shared_css.LabelStyle, children: label })] }) });
+  const descriptionElement = description ? jsxRuntime.jsx(shared.SelectionDescription, { disabled: effectiveDisabled, children: description }) : void 0;
   return jsxRuntime.jsx(shared.HelperTextWrapper, { ...helperTextProps, children: render && render(radioButtonElement, descriptionElement) });
 }
 exports.RadioButton = RadioButton;

package/dist/components/actions/selectionControls/RadioButton.d.ts

@@ -2,16 +2,7 @@ import { Ref } from "react";
 import { SelectionControlProps } from "./shared.js";
 export type RadioButtonProps = SelectionControlProps<string> & {
     ref?: Ref<HTMLSpanElement>;
-    checked: boolean;
+    checked?: boolean;
 };
-/**
-* Radio buttons allow users to select one option from a list. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.
-*
-* Radio buttons should be wrapped in a RadioButtonGroup component to ensure proper accessibility and functionality.
-*
-* Radio buttons should be used instead of checkboxes if only one item can be selected from a list.
-
- Documentation: [RadioButton](https://gnist.moller.no/developers/components/latest/?path=/docs/components-actions-selectioncontrols-radiobutton--docs)
-**/
-export declare function RadioButton({ value, onChange, disabled, validity, label, description, id, hideLabel, canShowErrorMessage, className, render, ref, checked, ...rest }: RadioButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function RadioButton({ value, onChange, disabled, validity, label, description, id, hideLabel, canShowErrorMessage, className, render, ref, checked, required, name, ...rest }: RadioButtonProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=RadioButton.d.ts.map

package/dist/components/actions/selectionControls/RadioButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/selectionControls/RadioButton.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAS5B,OAAO,EAEH,qBAAqB,EAExB,MAAM,aAAa,CAAC;AAErB,MAAM,MAAM,gBAAgB,GAAG,qBAAqB,CAAC,MAAM,CAAC,GAAG;IAC3D,GAAG,CAAC,EAAE,GAAG,CAAC,eAAe,CAAC,CAAC;IAC3B,OAAO,EAAE,OAAO,CAAC;CACpB,CAAC;AA2CF;;;;;;;;GAQG;AAEH,wBAAgB,WAAW,CAAC,EACxB,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,WAAW,EACX,EAA6B,EAC7B,SAAiB,EACjB,mBAA2B,EAC3B,SAAS,EACT,MAAsB,EACtB,GAAG,EACH,OAAO,EAEP,GAAG,IAAI,EACV,EAAE,gBAAgB,2CAsDlB"}
+{"version":3,"file":"RadioButton.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/selectionControls/RadioButton.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAcnC,OAAO,EAEH,qBAAqB,EAExB,MAAM,aAAa,CAAC;AAGrB,MAAM,MAAM,gBAAgB,GAAG,qBAAqB,CAAC,MAAM,CAAC,GAAG;IAC3D,GAAG,CAAC,EAAE,GAAG,CAAC,eAAe,CAAC,CAAC;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAoDF,wBAAgB,WAAW,CAAC,EACxB,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,WAAW,EACX,EAA6B,EAC7B,SAAiB,EACjB,mBAA2B,EAC3B,SAAS,EACT,MAAsB,EACtB,GAAG,EACH,OAAO,EACP,QAAQ,EACR,IAAI,EAEJ,GAAG,IAAI,EACV,EAAE,gBAAgB,2CAmFlB"}

package/dist/components/actions/selectionControls/RadioButton.js

@@ -8,6 +8,7 @@ import classNames from "classnames";
 import { RadioButtonRecipe, CheckedCircleRecipe } from "./radiobutton.css.js";
 import { LabelRecipe, InputStyleRecipe, LabelStyle, InputWrapper, indentedDescriptionStyle } from "./shared.css.js";
 import { SelectionDescription, HelperTextWrapper } from "./shared.js";
+import { useRadio } from "./RadioGroup.js";
 const CustomRadioButton = ({ isChecked, disabled, validity }) => {
   return jsx("span", { className: RadioButtonRecipe({
     disabled,
@@ -33,19 +34,41 @@ function RadioButton({
   render = defaultRender,
   ref,
   checked,
+  required,
+  name,
   // Input element props
   ...rest
 }) {
+  const group = useRadio();
   const inputId = id;
   const labelId = `${id}-label`;
   const helperId = `${id}-helper`;
   const { helperTextProps, inputAriaProps } = useInputHelperText({
     id: helperId,
+    /*
+        Used radiobutton-validity here,
+        as this determines helperText.
+        If controlled by group, error text is in the group component.
+    */
     validity,
     reserveSpaceForMessage: canShowErrorMessage
   });
-  const radioButtonElement = jsx("span", { className: classNames(InputWrapper, className), ref, children: jsxs("label", { htmlFor: inputId, className: LabelRecipe({ disabled }), id: labelId, children: [jsx("input", { type: "radio", id: inputId, disabled, onChange, value, checked: checked ?? false, className: InputStyleRecipe({ disabled }), tabIndex: 0, ...inputAriaProps, ...rest }), jsx(CustomRadioButton, { isChecked: checked ?? false, disabled, validity }), hideLabel ? jsx(ScreenReaderOnly, { children: label }) : jsx("span", { className: LabelStyle, children: label })] }) });
-  const descriptionElement = description ? jsx(SelectionDescription, { disabled, children: description }) : void 0;
+  const effectiveRequired = group?.required ?? required;
+  const effectiveChecked = group ? group.value === value : !!checked;
+  const effectiveName = group?.name ?? name;
+  const effectiveValidity = group?.validity ?? validity;
+  const effectiveDisabled = group?.disabled ?? disabled;
+  const handleChange = (event) => {
+    if (group?.onChange) {
+      group.onChange(String(value));
+      return;
+    }
+    onChange?.(event);
+  };
+  const radioButtonElement = jsx("span", { className: classNames(InputWrapper, className), ref, children: jsxs("label", { htmlFor: inputId, className: LabelRecipe({ disabled: effectiveDisabled }), id: labelId, children: [jsx("input", { type: "radio", id: inputId, name: effectiveName, disabled: effectiveDisabled, required: effectiveRequired, onChange: handleChange, value, checked: effectiveChecked, className: InputStyleRecipe({
+    disabled: effectiveDisabled
+  }), tabIndex: 0, ...inputAriaProps, ...rest }), jsx(CustomRadioButton, { isChecked: effectiveChecked, disabled: effectiveDisabled, validity: effectiveValidity }), hideLabel ? jsx(ScreenReaderOnly, { children: label }) : jsx("span", { className: LabelStyle, children: label })] }) });
+  const descriptionElement = description ? jsx(SelectionDescription, { disabled: effectiveDisabled, children: description }) : void 0;
   return jsx(HelperTextWrapper, { ...helperTextProps, children: render && render(radioButtonElement, descriptionElement) });
 }
 export {

package/dist/components/actions/selectionControls/RadioGroup.cjs

@@ -0,0 +1,35 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const classNames = require("classnames");
+const radiogroup_css = require("./radiogroup.css.cjs");
+const React = require("react");
+const InputHelperText = require("../../../building-blocks/inputs/InputHelperText.cjs");
+require("../../../utilities/layout/Row.cjs");
+require("@gnist/themes/tokens.css.js");
+require("react-content-loader");
+const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
+const classNames__default = /* @__PURE__ */ _interopDefaultCompat(classNames);
+function RadioGroup({ className, label, children, ref, name, value, onChange, required, validity, helperText, direction = "vertical", ...props }) {
+  const nameId = React.useId();
+  const radioName = name ?? `groupName-${nameId}`;
+  const isControlledByGroup = name !== void 0 && value !== void 0 && onChange !== void 0;
+  const contextValue = isControlledByGroup ? {
+    name: radioName,
+    value,
+    onChange,
+    required: required ?? false,
+    validity,
+    disabled: props.disabled
+  } : null;
+  const helperId = `${nameId}-helper`;
+  return jsxRuntime.jsx("fieldset", { className: classNames__default.default(radiogroup_css.fieldSetStyle, className), ref, ...props, children: jsxRuntime.jsxs(RadioGroupContext, { value: contextValue, children: [jsxRuntime.jsx("legend", { className: radiogroup_css.legendStyle, children: label }), jsxRuntime.jsx("div", { className: radiogroup_css.radioContainerStyle({ direction }), children }), jsxRuntime.jsx(InputHelperText.InputHelperText, { helperText, id: helperId, validity })] }) });
+}
+const RadioGroupContext = React.createContext(null);
+function useRadio() {
+  const context = React.use(RadioGroupContext);
+  return context;
+}
+exports.RadioGroup = RadioGroup;
+exports.useRadio = useRadio;

package/dist/components/actions/selectionControls/RadioGroup.d.ts

@@ -0,0 +1,45 @@
+import { InputFieldValidity } from "../../../building-blocks/index.js";
+interface BaseProps extends Omit<React.FieldsetHTMLAttributes<HTMLFieldSetElement>, "onChange" | "name" | "value"> {
+    label: string;
+    children: React.ReactNode;
+    className?: string;
+    ref?: React.Ref<HTMLFieldSetElement>;
+    required?: boolean;
+    validity?: InputFieldValidity<{
+        errorMsgRequired: false;
+    }>;
+    helperText?: string;
+    direction?: "horizontal" | "vertical";
+}
+type ControlledByGroup = {
+    name: string;
+    value: string;
+    onChange: (value: string) => void;
+};
+type ControlledByItem = {
+    name?: never;
+    value?: never;
+    onChange?: never;
+};
+export type RadioGroupProps = BaseProps & (ControlledByGroup | ControlledByItem);
+/**
+ * Radio groups gives a label for a group of radio buttons.
+ *
+ * You should also use the radio group to control the items.
+ *
+ * Documentation: [RadioGroup](https://gnist.moller.no/developers/components/latest/?path=/docs/components-actions-selectioncontrols-radiogroup--docs)
+ **/
+export declare function RadioGroup({ className, label, children, ref, name, value, onChange, required, validity, helperText, direction, ...props }: RadioGroupProps): import("react/jsx-runtime").JSX.Element;
+interface RadioGroupContextProps {
+    name: string;
+    value: string;
+    onChange: (value: string) => void;
+    required: boolean;
+    validity?: InputFieldValidity<{
+        errorMsgRequired: false;
+    }>;
+    disabled?: boolean;
+}
+export declare function useRadio(): RadioGroupContextProps | null;
+export {};
+//# sourceMappingURL=RadioGroup.d.ts.map

package/dist/components/actions/selectionControls/RadioGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/selectionControls/RadioGroup.tsx"],"names":[],"mappings":"AAOA,OAAO,EACH,kBAAkB,EAErB,0CAAsD;AAEvD,UAAU,SACN,SAAQ,IAAI,CACR,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,EACjD,UAAU,GAAG,MAAM,GAAG,OAAO,CAChC;IACD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,kBAAkB,CAAC;QAAE,gBAAgB,EAAE,KAAK,CAAA;KAAE,CAAC,CAAC;IAC3D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CACzC;AAED,KAAK,iBAAiB,GAAG;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC,CAAC;AAEF,KAAK,gBAAgB,GAAG;IACpB,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,SAAS,GACnC,CAAC,iBAAiB,GAAG,gBAAgB,CAAC,CAAC;AAE3C;;;;;;IAMI;AACJ,wBAAgB,UAAU,CAAC,EACvB,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,EACH,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,SAAsB,EACtB,GAAG,KAAK,EACX,EAAE,eAAe,2CAuCjB;AAED,UAAU,sBAAsB;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,kBAAkB,CAAC;QAAE,gBAAgB,EAAE,KAAK,CAAA;KAAE,CAAC,CAAC;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAID,wBAAgB,QAAQ,kCAIvB"}

package/dist/components/actions/selectionControls/RadioGroup.js

@@ -0,0 +1,33 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
+import { legendStyle, radioContainerStyle, fieldSetStyle } from "./radiogroup.css.js";
+import { createContext, useId, use } from "react";
+import { InputHelperText } from "../../../building-blocks/inputs/InputHelperText.js";
+import "../../../utilities/layout/Row.js";
+import "@gnist/themes/tokens.css.js";
+import "react-content-loader";
+function RadioGroup({ className, label, children, ref, name, value, onChange, required, validity, helperText, direction = "vertical", ...props }) {
+  const nameId = useId();
+  const radioName = name ?? `groupName-${nameId}`;
+  const isControlledByGroup = name !== void 0 && value !== void 0 && onChange !== void 0;
+  const contextValue = isControlledByGroup ? {
+    name: radioName,
+    value,
+    onChange,
+    required: required ?? false,
+    validity,
+    disabled: props.disabled
+  } : null;
+  const helperId = `${nameId}-helper`;
+  return jsx("fieldset", { className: classNames(fieldSetStyle, className), ref, ...props, children: jsxs(RadioGroupContext, { value: contextValue, children: [jsx("legend", { className: legendStyle, children: label }), jsx("div", { className: radioContainerStyle({ direction }), children }), jsx(InputHelperText, { helperText, id: helperId, validity })] }) });
+}
+const RadioGroupContext = createContext(null);
+function useRadio() {
+  const context = use(RadioGroupContext);
+  return context;
+}
+export {
+  RadioGroup,
+  useRadio
+};

package/dist/components/actions/selectionControls/index.cjs

@@ -4,8 +4,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const Checkbox = require("./Checkbox.cjs");
 const RadioButton = require("./RadioButton.cjs");
 const Switch = require("./Switch.cjs");
-const RadioButtonGroup = require("./RadioButtonGroup.cjs");
+const RadioGroup = require("./RadioGroup.cjs");
 exports.Checkbox = Checkbox.Checkbox;
 exports.RadioButton = RadioButton.RadioButton;
 exports.Switch = Switch.Switch;
-exports.RadioButtonGroup = RadioButtonGroup.RadioButtonGroup;
+exports.RadioGroup = RadioGroup.RadioGroup;

package/dist/components/actions/selectionControls/index.d.ts

@@ -1,5 +1,5 @@
 export { Checkbox, type CheckboxProps } from "./Checkbox.js";
 export { RadioButton, type RadioButtonProps } from "./RadioButton.js";
 export { Switch, type SwitchProps } from "./Switch.js";
-export { RadioButtonGroup } from "./RadioButtonGroup.js";
+export { RadioGroup } from "./RadioGroup.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/components/actions/selectionControls/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/selectionControls/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,eAAe,CAAC;AAC7D,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACtE,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,aAAa,CAAC;AACvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/selectionControls/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,eAAe,CAAC;AAC7D,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACtE,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,aAAa,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/components/actions/selectionControls/index.js

@@ -2,10 +2,10 @@
 import { Checkbox } from "./Checkbox.js";
 import { RadioButton } from "./RadioButton.js";
 import { Switch } from "./Switch.js";
-import { RadioButtonGroup } from "./RadioButtonGroup.js";
+import { RadioGroup } from "./RadioGroup.js";
 export {
   Checkbox,
   RadioButton,
-  RadioButtonGroup,
+  RadioGroup,
   Switch
 };

package/dist/components/actions/selectionControls/{radiobuttongroup.css.cjs → radiogroup.css.cjs}

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const atoms_css_js = require("@gnist/themes/atoms.css.js");
 const css = require("@vanilla-extract/css");
+const recipes = require("@vanilla-extract/recipes");
 const fieldSetStyle = css.style([
   {
     border: "none"
@@ -17,5 +18,29 @@ const fieldSetStyle = css.style([
 const legendStyle = atoms_css_js.atoms({
   marginBottom: "base"
 });
+const radioContainerStyle = recipes.recipe({
+  base: [
+    atoms_css_js.atoms({
+      display: "flex",
+      gap: "xs"
+    })
+  ],
+  variants: {
+    direction: {
+      vertical: [
+        atoms_css_js.atoms({
+          flexDirection: "column"
+        })
+      ],
+      horizontal: [
+        atoms_css_js.atoms({
+          flexDirection: "row",
+          flexWrap: "wrap"
+        })
+      ]
+    }
+  }
+});
 exports.fieldSetStyle = fieldSetStyle;
 exports.legendStyle = legendStyle;
+exports.radioContainerStyle = radioContainerStyle;

package/dist/components/actions/selectionControls/radiogroup.css.d.ts

@@ -0,0 +1,9 @@
+export declare const fieldSetStyle: string;
+export declare const legendStyle: string;
+export declare const radioContainerStyle: import("@vanilla-extract/recipes").RuntimeFn<{
+    direction: {
+        vertical: string[];
+        horizontal: string[];
+    };
+}>;
+//# sourceMappingURL=radiogroup.css.d.ts.map

package/dist/components/actions/selectionControls/radiogroup.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radiogroup.css.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/selectionControls/radiogroup.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,aAAa,QAUxB,CAAC;AAEH,eAAO,MAAM,WAAW,QAEtB,CAAC;AAEH,eAAO,MAAM,mBAAmB;;;;;EAsB9B,CAAC"}

package/dist/components/actions/selectionControls/radiogroup.css.js

@@ -0,0 +1,46 @@
+"use client";
+import { atoms } from "@gnist/themes/atoms.css.js";
+import { style } from "@vanilla-extract/css";
+import { recipe } from "@vanilla-extract/recipes";
+const fieldSetStyle = style([
+  {
+    border: "none"
+  },
+  atoms({
+    padding: "none",
+    display: "flex",
+    flexDirection: "column",
+    gap: "base"
+  })
+]);
+const legendStyle = atoms({
+  marginBottom: "base"
+});
+const radioContainerStyle = recipe({
+  base: [
+    atoms({
+      display: "flex",
+      gap: "xs"
+    })
+  ],
+  variants: {
+    direction: {
+      vertical: [
+        atoms({
+          flexDirection: "column"
+        })
+      ],
+      horizontal: [
+        atoms({
+          flexDirection: "row",
+          flexWrap: "wrap"
+        })
+      ]
+    }
+  }
+});
+export {
+  fieldSetStyle,
+  legendStyle,
+  radioContainerStyle
+};

package/dist/components/index.cjs

@@ -11,7 +11,7 @@ const IconButton = require("./actions/buttons/IconButton.cjs");
 const Checkbox = require("./actions/selectionControls/Checkbox.cjs");
 const RadioButton = require("./actions/selectionControls/RadioButton.cjs");
 const Switch = require("./actions/selectionControls/Switch.cjs");
-const RadioButtonGroup = require("./actions/selectionControls/RadioButtonGroup.cjs");
+const RadioGroup = require("./actions/selectionControls/RadioGroup.cjs");
 const ActionChip = require("./actions/chips/ActionChip.cjs");
 const FilterChip = require("./actions/chips/FilterChip.cjs");
 const TagChip = require("./actions/chips/TagChip.cjs");
@@ -42,7 +42,7 @@ exports.IconButton = IconButton.IconButton;
 exports.Checkbox = Checkbox.Checkbox;
 exports.RadioButton = RadioButton.RadioButton;
 exports.Switch = Switch.Switch;
-exports.RadioButtonGroup = RadioButtonGroup.RadioButtonGroup;
+exports.RadioGroup = RadioGroup.RadioGroup;
 exports.ActionChip = ActionChip.ActionChip;
 exports.FilterChip = FilterChip.FilterChip;
 exports.TagChip = TagChip.TagChip;

package/dist/components/index.js

@@ -9,7 +9,7 @@ import { IconButton } from "./actions/buttons/IconButton.js";
 import { Checkbox } from "./actions/selectionControls/Checkbox.js";
 import { RadioButton } from "./actions/selectionControls/RadioButton.js";
 import { Switch } from "./actions/selectionControls/Switch.js";
-import { RadioButtonGroup } from "./actions/selectionControls/RadioButtonGroup.js";
+import { RadioGroup } from "./actions/selectionControls/RadioGroup.js";
 import { ActionChip } from "./actions/chips/ActionChip.js";
 import { FilterChip } from "./actions/chips/FilterChip.js";
 import { TagChip } from "./actions/chips/TagChip.js";
@@ -52,8 +52,8 @@ export {
   ProgressBar,
   ProgressBarComponent,
   RadioButton,
-  RadioButtonGroup,
   RadioCard,
+  RadioGroup,
   SecondaryButton,
   SingleSelect,
   Spinner,

package/dist/components/inputs/dropdowns/SelectBase.cjs

@@ -31,8 +31,8 @@ const Checkbox = require("../../actions/selectionControls/Checkbox.cjs");
 require("../../actions/selectionControls/radiobutton.css.cjs");
 require("../../actions/selectionControls/shared.css.cjs");
 require("../../../utilities/layout/Column.cjs");
+require("../../actions/selectionControls/RadioGroup.cjs");
 require("../../actions/selectionControls/switch.css.cjs");
-require("../../actions/selectionControls/radiobuttongroup.css.cjs");
 require("../../../styles/animations.css.cjs");
 require("../../actions/chips/styles.css.cjs");
 const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };

package/dist/components/inputs/dropdowns/SelectBase.js

@@ -30,8 +30,8 @@ import { Checkbox } from "../../actions/selectionControls/Checkbox.js";
 import "../../actions/selectionControls/radiobutton.css.js";
 import "../../actions/selectionControls/shared.css.js";
 import "../../../utilities/layout/Column.js";
+import "../../actions/selectionControls/RadioGroup.js";
 import "../../actions/selectionControls/switch.css.js";
-import "../../actions/selectionControls/radiobuttongroup.css.js";
 import "../../../styles/animations.css.js";
 import "../../actions/chips/styles.css.js";
 function SelectBase(props, isMultiple) {

package/dist/components/inputs/pickers/calendar.cjs

@@ -32,8 +32,8 @@ require("../../actions/selectionControls/checkbox.css.cjs");
 require("../../actions/selectionControls/shared.css.cjs");
 require("../../../utilities/layout/Column.cjs");
 require("../../actions/selectionControls/radiobutton.css.cjs");
+require("../../actions/selectionControls/RadioGroup.cjs");
 require("../../actions/selectionControls/switch.css.cjs");
-require("../../actions/selectionControls/radiobuttongroup.css.cjs");
 require("../../../styles/animations.css.cjs");
 require("../../actions/chips/styles.css.cjs");
 const Calendar_css = require("./Calendar.css.cjs");

package/dist/components/inputs/pickers/calendar.js

@@ -30,8 +30,8 @@ import "../../actions/selectionControls/checkbox.css.js";
 import "../../actions/selectionControls/shared.css.js";
 import "../../../utilities/layout/Column.js";
 import "../../actions/selectionControls/radiobutton.css.js";
+import "../../actions/selectionControls/RadioGroup.js";
 import "../../actions/selectionControls/switch.css.js";
-import "../../actions/selectionControls/radiobuttongroup.css.js";
 import "../../../styles/animations.css.js";
 import "../../actions/chips/styles.css.js";
 import { headerCell, containerStyle, selectMonthRow, buttonRow, arrowButton, gridStyle, rowStyle, cellSkeletonStyle, firstDay, cellRecipe } from "./Calendar.css.js";

package/dist/components/surfaces/modal/Modal.cjs

@@ -26,8 +26,8 @@ require("../../actions/selectionControls/shared.css.cjs");
 require("../../../utilities/layout/Column.cjs");
 require("../../../utilities/layout/Row.cjs");
 require("../../actions/selectionControls/radiobutton.css.cjs");
+require("../../actions/selectionControls/RadioGroup.cjs");
 require("../../actions/selectionControls/switch.css.cjs");
-require("../../actions/selectionControls/radiobuttongroup.css.cjs");
 require("../../../styles/animations.css.cjs");
 require("../../actions/chips/styles.css.cjs");
 const index = require("../../../translations/index.cjs");

package/dist/components/surfaces/modal/Modal.js

@@ -24,8 +24,8 @@ import "../../actions/selectionControls/shared.css.js";
 import "../../../utilities/layout/Column.js";
 import "../../../utilities/layout/Row.js";
 import "../../actions/selectionControls/radiobutton.css.js";
+import "../../actions/selectionControls/RadioGroup.js";
 import "../../actions/selectionControls/switch.css.js";
-import "../../actions/selectionControls/radiobuttongroup.css.js";
 import "../../../styles/animations.css.js";
 import "../../actions/chips/styles.css.js";
 import { useTranslation } from "../../../translations/index.js";

package/dist/index.cjs

@@ -12,7 +12,7 @@ const IconButton = require("./components/actions/buttons/IconButton.cjs");
 const Checkbox = require("./components/actions/selectionControls/Checkbox.cjs");
 const RadioButton = require("./components/actions/selectionControls/RadioButton.cjs");
 const Switch = require("./components/actions/selectionControls/Switch.cjs");
-const RadioButtonGroup = require("./components/actions/selectionControls/RadioButtonGroup.cjs");
+const RadioGroup = require("./components/actions/selectionControls/RadioGroup.cjs");
 const ActionChip = require("./components/actions/chips/ActionChip.cjs");
 const FilterChip = require("./components/actions/chips/FilterChip.cjs");
 const TagChip = require("./components/actions/chips/TagChip.cjs");
@@ -63,7 +63,7 @@ exports.IconButton = IconButton.IconButton;
 exports.Checkbox = Checkbox.Checkbox;
 exports.RadioButton = RadioButton.RadioButton;
 exports.Switch = Switch.Switch;
-exports.RadioButtonGroup = RadioButtonGroup.RadioButtonGroup;
+exports.RadioGroup = RadioGroup.RadioGroup;
 exports.ActionChip = ActionChip.ActionChip;
 exports.FilterChip = FilterChip.FilterChip;
 exports.TagChip = TagChip.TagChip;

package/dist/index.js

@@ -10,7 +10,7 @@ import { IconButton } from "./components/actions/buttons/IconButton.js";
 import { Checkbox } from "./components/actions/selectionControls/Checkbox.js";
 import { RadioButton } from "./components/actions/selectionControls/RadioButton.js";
 import { Switch } from "./components/actions/selectionControls/Switch.js";
-import { RadioButtonGroup } from "./components/actions/selectionControls/RadioButtonGroup.js";
+import { RadioGroup } from "./components/actions/selectionControls/RadioGroup.js";
 import { ActionChip } from "./components/actions/chips/ActionChip.js";
 import { FilterChip } from "./components/actions/chips/FilterChip.js";
 import { TagChip } from "./components/actions/chips/TagChip.js";
@@ -95,8 +95,8 @@ export {
   ProgressBar,
   ProgressBarComponent,
   RadioButton,
-  RadioButtonGroup,
   RadioCard,
+  RadioGroup,
   Row,
   ScreenReaderOnly,
   SecondaryButton,

package/dist/utilities/forms/formInputs.cjs

@@ -8,12 +8,14 @@ function formInputs() {
   const Checkbox = components.FormCheckbox;
   const SingleSelect = components.FormSingleSelect;
   const MultiSelect = components.FormMultiSelect;
+  const RadioGroup = components.FormRadioGroup;
   return {
     TextField,
     TextArea,
     Checkbox,
     SingleSelect,
-    MultiSelect
+    MultiSelect,
+    RadioGroup
   };
 }
 exports.formInputs = formInputs;

package/dist/utilities/forms/formInputs.d.ts

@@ -13,5 +13,8 @@ export declare function formInputs<_T>(): {
     MultiSelect: (originalProps: import("react").PropsWithChildren<Omit<Omit<import("../../components/inputs/dropdowns/MultiSelect.js").MultiSelectProps, "onChange"> & {
         onChange?: ((value: string[]) => void) | undefined;
     }, "value" | "id"> & import("./types.js").FormContext<_T>>) => import("react/jsx-runtime").JSX.Element;
+    RadioGroup: (originalProps: import("react").PropsWithChildren<Omit<Omit<import("../../components/actions/selectionControls/RadioGroup.js").RadioGroupProps, "onChange"> & {
+        onChange?: ((value: string) => void) | undefined;
+    }, "value" | "id"> & import("./types.js").FormContext<_T>>) => import("react/jsx-runtime").JSX.Element;
 };
 //# sourceMappingURL=formInputs.d.ts.map

package/dist/utilities/forms/formInputs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"formInputs.d.ts","sourceRoot":"","sources":["../../../src/utilities/forms/formInputs.tsx"],"names":[],"mappings":"AAQA;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EAAE;;;;;;;;;;EAa5B"}
+{"version":3,"file":"formInputs.d.ts","sourceRoot":"","sources":["../../../src/utilities/forms/formInputs.tsx"],"names":[],"mappings":"AASA;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EAAE;;;;;;;;;;;;;EAe5B"}

package/dist/utilities/forms/formInputs.js

@@ -1,17 +1,19 @@
 "use client";
-import { FormMultiSelect, FormSingleSelect, FormCheckbox, FormTextArea, FormTextField } from "./internal/components.js";
+import { FormRadioGroup, FormMultiSelect, FormSingleSelect, FormCheckbox, FormTextArea, FormTextField } from "./internal/components.js";
 function formInputs() {
   const TextField = FormTextField;
   const TextArea = FormTextArea;
   const Checkbox = FormCheckbox;
   const SingleSelect = FormSingleSelect;
   const MultiSelect = FormMultiSelect;
+  const RadioGroup = FormRadioGroup;
   return {
     TextField,
     TextArea,
     Checkbox,
     SingleSelect,
-    MultiSelect
+    MultiSelect,
+    RadioGroup
   };
 }
 export {

package/dist/utilities/forms/internal/components.cjs

@@ -12,6 +12,7 @@ require("../../validation/validators.cjs");
 const validation = require("../../validation/validation.cjs");
 const formContext = require("../formContext.cjs");
 const useFormProps = require("../useFormProps.cjs");
+const RadioGroup = require("../../../components/actions/selectionControls/RadioGroup.cjs");
 function FormTextField(originalProps) {
   const props = useFormProps.useFormProps(originalProps, (event) => event.target.value);
   return jsxRuntime.jsx(TextField.TextField, { ...props });
@@ -66,8 +67,28 @@ function FormMultiSelect(originalProps) {
   };
   return jsxRuntime.jsx(MultiSelect.MultiSelect, { ...props });
 }
+function FormRadioGroup(originalProps) {
+  const formCtx = formContext.useForm();
+  if (!formCtx) {
+    throw new Error("FormRadioGroup must be used inside a <FormProvider />");
+  }
+  const { id: formId, form } = formCtx;
+  const formProps = form.inputProps(originalProps.field);
+  const props = {
+    ...originalProps,
+    name: `${formId}_${String(originalProps.field)}`,
+    onChange: (value) => {
+      originalProps.onChange?.(value);
+      formProps.setValue(value);
+    },
+    value: formProps.value,
+    validity: formProps.validity ?? originalProps.validity
+  };
+  return jsxRuntime.jsx(RadioGroup.RadioGroup, { ...props });
+}
 exports.FormCheckbox = FormCheckbox;
 exports.FormMultiSelect = FormMultiSelect;
+exports.FormRadioGroup = FormRadioGroup;
 exports.FormSingleSelect = FormSingleSelect;
 exports.FormTextArea = FormTextArea;
 exports.FormTextField = FormTextField;

package/dist/utilities/forms/internal/components.d.ts

@@ -4,6 +4,7 @@ import { CheckboxProps } from "../../../components/actions/selectionControls/Che
 import { TextAreaProps } from "../../../components/inputs/textFields/TextArea.js";
 import { TextFieldProps } from "../../../components/inputs/textFields/TextField.js";
 import { FormComponentProps } from "../types.js";
+import { RadioGroupProps } from "../../../components/actions/selectionControls/RadioGroup.js";
 type FormTextFieldProps<T> = FormComponentProps<T, TextFieldProps>;
 export declare function FormTextField<T>(originalProps: React.PropsWithChildren<FormTextFieldProps<T>>): import("react/jsx-runtime").JSX.Element;
 type FormTextAreaProps<T> = FormComponentProps<T, TextAreaProps>;
@@ -17,5 +18,7 @@ type FormSingleSelectProps<T> = FormComponentProps<T, WithOptional<"onChange", S
 export declare function FormSingleSelect<T>(originalProps: React.PropsWithChildren<FormSingleSelectProps<T>>): import("react/jsx-runtime").JSX.Element;
 type FormMultiSelectProps<T> = FormComponentProps<T, WithOptional<"onChange", MultiSelectProps>>;
 export declare function FormMultiSelect<T>(originalProps: React.PropsWithChildren<FormMultiSelectProps<T>>): import("react/jsx-runtime").JSX.Element;
+type FormRadioGroupProps<T> = FormComponentProps<T, WithOptional<"onChange", RadioGroupProps>>;
+export declare function FormRadioGroup<T>(originalProps: React.PropsWithChildren<FormRadioGroupProps<T>>): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=components.d.ts.map

package/dist/utilities/forms/internal/components.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../../../src/utilities/forms/internal/components.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEH,gBAAgB,EACnB,4DAAwE;AACzE,OAAO,EAEH,iBAAiB,EACpB,6DAAyE;AAC1E,OAAO,EAEH,aAAa,EAChB,MAAM,2DAA2D,CAAC;AACnE,OAAO,EAEH,aAAa,EAChB,MAAM,mDAAmD,CAAC;AAC3D,OAAO,EAEH,cAAc,EACjB,MAAM,oDAAoD,CAAC;AAI5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAGjD,KAAK,kBAAkB,CAAC,CAAC,IAAI,kBAAkB,CAAC,CAAC,EAAE,cAAc,CAAC,CAAC;AAEnE,wBAAgB,aAAa,CAAC,CAAC,EAC3B,aAAa,EAAE,KAAK,CAAC,iBAAiB,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,2CAShE;AAED,KAAK,iBAAiB,CAAC,CAAC,IAAI,kBAAkB,CAAC,CAAC,EAAE,aAAa,CAAC,CAAC;AAEjE,wBAAgB,YAAY,CAAC,CAAC,EAC1B,aAAa,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,2CAU/D;AAED,KAAK,iBAAiB,CAAC,CAAC,IAAI,kBAAkB,CAAC,CAAC,EAAE,aAAa,CAAC,CAAC;AAEjE,wBAAgB,YAAY,CAAC,CAAC,EAC1B,aAAa,EAAE,KAAK,CAAC,iBAAiB,CAClC,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,qBAAqB,CAAC,CACpD,2CASJ;AAED,KAAK,YAAY,CAAC,CAAC,SAAS,MAAM,CAAC,EAAE,CAAC,IAAI,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;KAAG,GAAG,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC;CAAE,CAAC;AAE/E,KAAK,qBAAqB,CAAC,CAAC,IAAI,kBAAkB,CAC9C,CAAC,EACD,YAAY,CAAC,UAAU,EAAE,iBAAiB,CAAC,CAC9C,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,CAAC,EAC9B,aAAa,EAAE,KAAK,CAAC,iBAAiB,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC,2CA8BnE;AAED,KAAK,oBAAoB,CAAC,CAAC,IAAI,kBAAkB,CAC7C,CAAC,EACD,YAAY,CAAC,UAAU,EAAE,gBAAgB,CAAC,CAC7C,CAAC;AAEF,wBAAgB,eAAe,CAAC,CAAC,EAC7B,aAAa,EAAE,KAAK,CAAC,iBAAiB,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAC,2CA8BlE"}
+{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../../../src/utilities/forms/internal/components.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEH,gBAAgB,EACnB,4DAAwE;AACzE,OAAO,EAEH,iBAAiB,EACpB,6DAAyE;AAC1E,OAAO,EAEH,aAAa,EAChB,MAAM,2DAA2D,CAAC;AACnE,OAAO,EAEH,aAAa,EAChB,MAAM,mDAAmD,CAAC;AAC3D,OAAO,EAEH,cAAc,EACjB,MAAM,oDAAoD,CAAC;AAI5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAEjD,OAAO,EAEH,eAAe,EAClB,oEAAgF;AAEjF,KAAK,kBAAkB,CAAC,CAAC,IAAI,kBAAkB,CAAC,CAAC,EAAE,cAAc,CAAC,CAAC;AAEnE,wBAAgB,aAAa,CAAC,CAAC,EAC3B,aAAa,EAAE,KAAK,CAAC,iBAAiB,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,2CAShE;AAED,KAAK,iBAAiB,CAAC,CAAC,IAAI,kBAAkB,CAAC,CAAC,EAAE,aAAa,CAAC,CAAC;AAEjE,wBAAgB,YAAY,CAAC,CAAC,EAC1B,aAAa,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,2CAU/D;AAED,KAAK,iBAAiB,CAAC,CAAC,IAAI,kBAAkB,CAAC,CAAC,EAAE,aAAa,CAAC,CAAC;AAEjE,wBAAgB,YAAY,CAAC,CAAC,EAC1B,aAAa,EAAE,KAAK,CAAC,iBAAiB,CAClC,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,qBAAqB,CAAC,CACpD,2CASJ;AAED,KAAK,YAAY,CAAC,CAAC,SAAS,MAAM,CAAC,EAAE,CAAC,IAAI,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;KAAG,GAAG,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC;CAAE,CAAC;AAE/E,KAAK,qBAAqB,CAAC,CAAC,IAAI,kBAAkB,CAC9C,CAAC,EACD,YAAY,CAAC,UAAU,EAAE,iBAAiB,CAAC,CAC9C,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,CAAC,EAC9B,aAAa,EAAE,KAAK,CAAC,iBAAiB,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC,2CA8BnE;AAED,KAAK,oBAAoB,CAAC,CAAC,IAAI,kBAAkB,CAC7C,CAAC,EACD,YAAY,CAAC,UAAU,EAAE,gBAAgB,CAAC,CAC7C,CAAC;AAEF,wBAAgB,eAAe,CAAC,CAAC,EAC7B,aAAa,EAAE,KAAK,CAAC,iBAAiB,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAC,2CA8BlE;AAED,KAAK,mBAAmB,CAAC,CAAC,IAAI,kBAAkB,CAC5C,CAAC,EACD,YAAY,CAAC,UAAU,EAAE,eAAe,CAAC,CAC5C,CAAC;AAEF,wBAAgB,cAAc,CAAC,CAAC,EAC5B,aAAa,EAAE,KAAK,CAAC,iBAAiB,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC,2CAuBjE"}

package/dist/utilities/forms/internal/components.js

@@ -10,6 +10,7 @@ import "../../validation/validators.js";
 import { addNecessityIndicator } from "../../validation/validation.js";
 import { useForm } from "../formContext.js";
 import { useFormProps } from "../useFormProps.js";
+import { RadioGroup } from "../../../components/actions/selectionControls/RadioGroup.js";
 function FormTextField(originalProps) {
   const props = useFormProps(originalProps, (event) => event.target.value);
   return jsx(TextField, { ...props });
@@ -64,9 +65,29 @@ function FormMultiSelect(originalProps) {
   };
   return jsx(MultiSelect, { ...props });
 }
+function FormRadioGroup(originalProps) {
+  const formCtx = useForm();
+  if (!formCtx) {
+    throw new Error("FormRadioGroup must be used inside a <FormProvider />");
+  }
+  const { id: formId, form } = formCtx;
+  const formProps = form.inputProps(originalProps.field);
+  const props = {
+    ...originalProps,
+    name: `${formId}_${String(originalProps.field)}`,
+    onChange: (value) => {
+      originalProps.onChange?.(value);
+      formProps.setValue(value);
+    },
+    value: formProps.value,
+    validity: formProps.validity ?? originalProps.validity
+  };
+  return jsx(RadioGroup, { ...props });
+}
 export {
   FormCheckbox,
   FormMultiSelect,
+  FormRadioGroup,
   FormSingleSelect,
   FormTextArea,
   FormTextField

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gnist/design-system",
-  "version": "4.5.1",
+  "version": "5.0.1",
   "license": "UNLICENSED",
   "type": "module",
   "main": "dist/index.cjs",
@@ -50,7 +50,7 @@
     "@base-ui-components/react": "1.0.0-beta.2",
     "@formkit/auto-animate": "^0.8.2",
     "@gnist/component-utils": "3.0.10",
-    "@gnist/themes": "^3.22.0",
+    "@gnist/themes": "^3.22.1",
     "@vanilla-extract/css": "^1.17.4",
     "@vanilla-extract/css-utils": "^0.1.6",
     "@vanilla-extract/dynamic": "^2.1.5",
@@ -102,5 +102,5 @@
       "optional": true
     }
   },
-  "gitHead": "2d092158c507427fc0aabbcd8e9fe87f92f6afd5"
+  "gitHead": "c80dadbc6fea53420af1b2e956efebefbe4062d9"
 }

package/dist/components/actions/selectionControls/RadioButtonGroup.cjs

@@ -1,12 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const classNames = require("classnames");
-const radiobuttongroup_css = require("./radiobuttongroup.css.cjs");
-const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
-const classNames__default = /* @__PURE__ */ _interopDefaultCompat(classNames);
-function RadioButtonGroup({ className, label, children, ref, ...props }) {
-  return jsxRuntime.jsxs("fieldset", { className: classNames__default.default(radiobuttongroup_css.fieldSetStyle, className), ref, ...props, children: [jsxRuntime.jsx("legend", { className: radiobuttongroup_css.legendStyle, children: label }), children] });
-}
-exports.RadioButtonGroup = RadioButtonGroup;

package/dist/components/actions/selectionControls/RadioButtonGroup.d.ts

@@ -1,31 +0,0 @@
-interface Props extends React.HTMLAttributes<HTMLFieldSetElement> {
-    label: string;
-    children: React.ReactNode;
-    className?: string;
-    ref?: React.Ref<HTMLFieldSetElement>;
-}
-/**
- * Radio group to wrap RadioButton.
- *
- * @example
- * ```jsx
- * <RadioGroup
- *   label="What option?"
- * >
- *  <RadioButton label="Option 1" name="option1" />
- *  <RadioButton label="Option 2" name="option2" />
- * </RadioGroup>
- * ```
- *
- * @param children - RadioButtons.
- * @param label - Label of group.
- */
-/**
-* Radio button groups gives a label for a group of radio buttons.
-*
-
- Documentation: [RadioButtonGroup](https://gnist.moller.no/developers/components/latest/?path=/docs/components-actions-selectioncontrols-radiobuttongroup--docs)
-**/
-export declare function RadioButtonGroup({ className, label, children, ref, ...props }: Props): import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=RadioButtonGroup.d.ts.map

package/dist/components/actions/selectionControls/RadioButtonGroup.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"RadioButtonGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/selectionControls/RadioButtonGroup.tsx"],"names":[],"mappings":"AAGA,UAAU,KAAM,SAAQ,KAAK,CAAC,cAAc,CAAC,mBAAmB,CAAC;IAC7D,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;CACxC;AAED;;;;;;;;;;;;;;;GAeG;AAEH;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,EAC7B,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,EACH,GAAG,KAAK,EACX,EAAE,KAAK,2CAWP"}

package/dist/components/actions/selectionControls/RadioButtonGroup.js

@@ -1,10 +0,0 @@
-"use client";
-import { jsxs, jsx } from "react/jsx-runtime";
-import classNames from "classnames";
-import { legendStyle, fieldSetStyle } from "./radiobuttongroup.css.js";
-function RadioButtonGroup({ className, label, children, ref, ...props }) {
-  return jsxs("fieldset", { className: classNames(fieldSetStyle, className), ref, ...props, children: [jsx("legend", { className: legendStyle, children: label }), children] });
-}
-export {
-  RadioButtonGroup
-};

package/dist/components/actions/selectionControls/radiobuttongroup.css.d.ts

@@ -1,3 +0,0 @@
-export declare const fieldSetStyle: string;
-export declare const legendStyle: string;
-//# sourceMappingURL=radiobuttongroup.css.d.ts.map

package/dist/components/actions/selectionControls/radiobuttongroup.css.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"radiobuttongroup.css.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/selectionControls/radiobuttongroup.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,aAAa,QAUxB,CAAC;AAEH,eAAO,MAAM,WAAW,QAEtB,CAAC"}

package/dist/components/actions/selectionControls/radiobuttongroup.css.js

@@ -1,21 +0,0 @@
-"use client";
-import { atoms } from "@gnist/themes/atoms.css.js";
-import { style } from "@vanilla-extract/css";
-const fieldSetStyle = style([
-  {
-    border: "none"
-  },
-  atoms({
-    padding: "none",
-    display: "flex",
-    flexDirection: "column",
-    gap: "base"
-  })
-]);
-const legendStyle = atoms({
-  marginBottom: "base"
-});
-export {
-  fieldSetStyle,
-  legendStyle
-};