@gnist/design-system 3.12.4 → 4.0.0

package/CHANGELOG.md

@@ -3,6 +3,31 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [4.0.0](https://github.com/mollerdigital/design-system-design-system/compare/@gnist/design-system@3.12.4...@gnist/design-system@4.0.0) (2025-09-26)
+
+### ⚠ BREAKING CHANGES
+
+* RadioButton value prop changed from boolean to string. Added RadioButtonGroup component for proper grouping.
+
+- RadioButton.value: boolean → string
+- RadioButton now requires name prop for grouping
+- Added RadioButtonGroup component for accessibility
+- SelectionCardProps<TVal> now supports generic types
+- Updated all stories and examples
+
+Migration:
+// Before
+<RadioButton value={true} onChange={...} />
+
+// After
+<RadioButtonGroup name="group">
+  <RadioButton value="option1" checked={selected === "option1"} onChange={...} />
+</RadioButtonGroup>
+
+### Features
+
+* change RadioButton and RadioCard value from boolean to string, add RadioButtonGroup ([03521b4](https://github.com/mollerdigital/design-system-design-system/commit/03521b4c0c0d3b9ea7f7d55994ff34b1f644de35))
+
 ## [3.12.4](https://github.com/mollerdigital/design-system-design-system/compare/@gnist/design-system@3.12.3...@gnist/design-system@3.12.4) (2025-09-19)
 
 ### Bug Fixes

package/dist/components/actions/index.cjs

@@ -11,6 +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 ActionChip = require("./chips/ActionChip.cjs");
 const FilterChip = require("./chips/FilterChip.cjs");
 const TagChip = require("./chips/TagChip.cjs");
@@ -24,6 +25,7 @@ exports.IconButton = IconButton.IconButton;
 exports.Checkbox = Checkbox.Checkbox;
 exports.RadioButton = RadioButton.RadioButton;
 exports.Switch = Switch.Switch;
+exports.RadioButtonGroup = RadioButtonGroup.RadioButtonGroup;
 exports.ActionChip = ActionChip.ActionChip;
 exports.FilterChip = FilterChip.FilterChip;
 exports.TagChip = TagChip.TagChip;

package/dist/components/actions/index.js

@@ -9,6 +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 { ActionChip } from "./chips/ActionChip.js";
 import { FilterChip } from "./chips/FilterChip.js";
 import { TagChip } from "./chips/TagChip.js";
@@ -21,6 +22,7 @@ export {
   IconButton,
   PrimaryButton,
   RadioButton,
+  RadioButtonGroup,
   SecondaryButton,
   SuccessButton,
   Switch,

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

@@ -12,12 +12,12 @@ const shared_css = require("./shared.css.cjs");
 const shared = require("./shared.cjs");
 const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
 const classNames__default = /* @__PURE__ */ _interopDefaultCompat(classNames);
-const CustomRadioButton = ({ value, disabled, validity }) => {
+const CustomRadioButton = ({ isChecked, disabled, validity }) => {
   return jsxRuntime.jsx("span", { className: radiobutton_css.RadioButtonRecipe({
     disabled,
     validity: validity?.type
   }), "aria-hidden": true, children: jsxRuntime.jsx("span", { className: radiobutton_css.CheckedCircleRecipe({
-    checked: value,
+    checked: isChecked,
     disabled,
     validity: validity?.type
   }) }) });
@@ -36,6 +36,7 @@ function RadioButton({
   className,
   render = defaultRender,
   ref,
+  checked,
   // Input element props
   ...rest
 }) {
@@ -47,7 +48,7 @@ function RadioButton({
     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, checked: value === true, className: shared_css.InputStyleRecipe({ disabled }), tabIndex: 0, ...inputAriaProps, ...rest }), jsxRuntime.jsx(CustomRadioButton, { value, disabled, validity }), hideLabel ? jsxRuntime.jsx(ScreenReaderOnly.ScreenReaderOnly, { children: label }) : jsxRuntime.jsx("span", { className: shared_css.LabelStyle, children: label })] }) });
+  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;
   return jsxRuntime.jsx(shared.HelperTextWrapper, { ...helperTextProps, children: render && render(radioButtonElement, descriptionElement) });
 }

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

@@ -1,14 +1,17 @@
 import { Ref } from "react";
 import { SelectionControlProps } from "./shared.js";
-export type RadioButtonProps = SelectionControlProps<boolean> & {
+export type RadioButtonProps = SelectionControlProps<string> & {
     ref?: Ref<HTMLSpanElement>;
+    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, ...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, ...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,OAAO,CAAC,GAAG;IAC5D,GAAG,CAAC,EAAE,GAAG,CAAC,eAAe,CAAC,CAAC;CAC9B,CAAC;AAqCF;;;;;;GAMG;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,EAEH,GAAG,IAAI,EACV,EAAE,gBAAgB,2CAqDlB"}
+{"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,CAAC,EAAE,OAAO,CAAC;CACrB,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"}

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

@@ -8,12 +8,12 @@ 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";
-const CustomRadioButton = ({ value, disabled, validity }) => {
+const CustomRadioButton = ({ isChecked, disabled, validity }) => {
   return jsx("span", { className: RadioButtonRecipe({
     disabled,
     validity: validity?.type
   }), "aria-hidden": true, children: jsx("span", { className: CheckedCircleRecipe({
-    checked: value,
+    checked: isChecked,
     disabled,
     validity: validity?.type
   }) }) });
@@ -32,6 +32,7 @@ function RadioButton({
   className,
   render = defaultRender,
   ref,
+  checked,
   // Input element props
   ...rest
 }) {
@@ -43,7 +44,7 @@ function RadioButton({
     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, checked: value === true, className: InputStyleRecipe({ disabled }), tabIndex: 0, ...inputAriaProps, ...rest }), jsx(CustomRadioButton, { value, disabled, validity }), hideLabel ? jsx(ScreenReaderOnly, { children: label }) : jsx("span", { className: LabelStyle, children: label })] }) });
+  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;
   return jsx(HelperTextWrapper, { ...helperTextProps, children: render && render(radioButtonElement, descriptionElement) });
 }

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

@@ -0,0 +1,12 @@
+"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

@@ -0,0 +1,31 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,10 @@
+"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/index.cjs

@@ -4,6 +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");
 exports.Checkbox = Checkbox.Checkbox;
 exports.RadioButton = RadioButton.RadioButton;
 exports.Switch = Switch.Switch;
+exports.RadioButtonGroup = RadioButtonGroup.RadioButtonGroup;

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

@@ -1,4 +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";
 //# 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"}
+{"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"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"radiobutton.css.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/selectionControls/radiobutton.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;EAwC5B,CAAC;AACH,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;EA8D9B,CAAC"}
+{"version":3,"file":"radiobutton.css.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/selectionControls/radiobutton.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;EAwC5B,CAAC;AACH,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;EA8D9B,CAAC"}

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

@@ -0,0 +1,21 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const atoms_css_js = require("@gnist/themes/atoms.css.js");
+const css = require("@vanilla-extract/css");
+const fieldSetStyle = css.style([
+  {
+    border: "none"
+  },
+  atoms_css_js.atoms({
+    padding: "none",
+    display: "flex",
+    flexDirection: "column",
+    gap: "base"
+  })
+]);
+const legendStyle = atoms_css_js.atoms({
+  marginBottom: "base"
+});
+exports.fieldSetStyle = fieldSetStyle;
+exports.legendStyle = legendStyle;

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

@@ -0,0 +1,3 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,21 @@
+"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
+};

package/dist/components/index.cjs

@@ -11,6 +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 ActionChip = require("./actions/chips/ActionChip.cjs");
 const FilterChip = require("./actions/chips/FilterChip.cjs");
 const TagChip = require("./actions/chips/TagChip.cjs");
@@ -41,6 +42,7 @@ exports.IconButton = IconButton.IconButton;
 exports.Checkbox = Checkbox.Checkbox;
 exports.RadioButton = RadioButton.RadioButton;
 exports.Switch = Switch.Switch;
+exports.RadioButtonGroup = RadioButtonGroup.RadioButtonGroup;
 exports.ActionChip = ActionChip.ActionChip;
 exports.FilterChip = FilterChip.FilterChip;
 exports.TagChip = TagChip.TagChip;

package/dist/components/index.js

@@ -9,6 +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 { ActionChip } from "./actions/chips/ActionChip.js";
 import { FilterChip } from "./actions/chips/FilterChip.js";
 import { TagChip } from "./actions/chips/TagChip.js";
@@ -51,6 +52,7 @@ export {
   ProgressBar,
   ProgressBarComponent,
   RadioButton,
+  RadioButtonGroup,
   RadioCard,
   SecondaryButton,
   SingleSelect,

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

@@ -32,6 +32,7 @@ require("../../actions/selectionControls/radiobutton.css.cjs");
 require("../../actions/selectionControls/shared.css.cjs");
 require("../../../utilities/layout/Column.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

@@ -31,6 +31,7 @@ import "../../actions/selectionControls/radiobutton.css.js";
 import "../../actions/selectionControls/shared.css.js";
 import "../../../utilities/layout/Column.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

@@ -33,6 +33,7 @@ require("../../actions/selectionControls/shared.css.cjs");
 require("../../../utilities/layout/Column.cjs");
 require("../../actions/selectionControls/radiobutton.css.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

@@ -31,6 +31,7 @@ import "../../actions/selectionControls/shared.css.js";
 import "../../../utilities/layout/Column.js";
 import "../../actions/selectionControls/radiobutton.css.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/cards/CheckboxCard.d.ts

@@ -1,6 +1,6 @@
 import { CheckboxProps } from "../../actions/selectionControls/Checkbox.js";
 import { HtmlSelectionControlProps, SelectionCardProps } from "./internal/SelectionCard.js";
-interface CheckboxCardProps extends SelectionCardProps {
+interface CheckboxCardProps extends SelectionCardProps<boolean> {
     /**
      * Change handler function
      */

package/dist/components/surfaces/cards/CheckboxCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxCard.d.ts","sourceRoot":"","sources":["../../../../src/components/surfaces/cards/CheckboxCard.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEH,aAAa,EAChB,MAAM,6CAA6C,CAAC;AACrD,OAAO,EACH,yBAAyB,EAGzB,kBAAkB,EACrB,MAAM,6BAA6B,CAAC;AAKrC,UAAU,iBAAkB,SAAQ,kBAAkB;IAClD;;OAEG;IACH,QAAQ,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACpC;;OAEG;IACH,aAAa,CAAC,EAAE,yBAAyB,CAAC;CAC7C;AAED;;;;;;;;GAQG;AACH,wBAAgB,YAAY,CAAC,EACzB,KAAK,EACL,WAAW,EACX,KAAK,EACL,EAAE,EACF,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,aAAa,EACb,SAAS,EACT,GAAG,EACH,GAAG,KAAK,EACX,EAAE,iBAAiB,2CAwCnB"}
+{"version":3,"file":"CheckboxCard.d.ts","sourceRoot":"","sources":["../../../../src/components/surfaces/cards/CheckboxCard.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEH,aAAa,EAChB,MAAM,6CAA6C,CAAC;AACrD,OAAO,EACH,yBAAyB,EAGzB,kBAAkB,EACrB,MAAM,6BAA6B,CAAC;AAKrC,UAAU,iBAAkB,SAAQ,kBAAkB,CAAC,OAAO,CAAC;IAC3D;;OAEG;IACH,QAAQ,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACpC;;OAEG;IACH,aAAa,CAAC,EAAE,yBAAyB,CAAC;CAC7C;AAED;;;;;;;;GAQG;AACH,wBAAgB,YAAY,CAAC,EACzB,KAAK,EACL,WAAW,EACX,KAAK,EACL,EAAE,EACF,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,aAAa,EACb,SAAS,EACT,GAAG,EACH,GAAG,KAAK,EACX,EAAE,iBAAiB,2CAwCnB"}

package/dist/components/surfaces/cards/RadioCard.d.ts

@@ -1,6 +1,6 @@
 import { RadioButtonProps } from "../../actions/selectionControls/RadioButton.js";
 import { HtmlSelectionControlProps, SelectionCardProps } from "./internal/SelectionCard.js";
-interface RadioCardProps extends SelectionCardProps {
+interface RadioCardProps extends SelectionCardProps<string> {
     /**
      * Change handler function
      */

package/dist/components/surfaces/cards/RadioCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RadioCard.d.ts","sourceRoot":"","sources":["../../../../src/components/surfaces/cards/RadioCard.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEH,gBAAgB,EACnB,MAAM,gDAAgD,CAAC;AACxD,OAAO,EACH,yBAAyB,EAGzB,kBAAkB,EACrB,MAAM,6BAA6B,CAAC;AAKrC,UAAU,cAAe,SAAQ,kBAAkB;IAC/C;;OAEG;IACH,QAAQ,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACvC;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAC/B;;OAEG;IACH,UAAU,CAAC,EAAE,yBAAyB,CAAC;CAC1C;AAED;;;;;;;;GAQG;AACH,wBAAgB,SAAS,CAAC,EACtB,KAAK,EACL,WAAW,EACX,KAAK,EACL,EAAE,EACF,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,SAAS,EACT,GAAG,EACH,GAAG,KAAK,EACX,EAAE,cAAc,2CAqChB"}
+{"version":3,"file":"RadioCard.d.ts","sourceRoot":"","sources":["../../../../src/components/surfaces/cards/RadioCard.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEH,gBAAgB,EACnB,MAAM,gDAAgD,CAAC;AACxD,OAAO,EACH,yBAAyB,EAGzB,kBAAkB,EACrB,MAAM,6BAA6B,CAAC;AAKrC,UAAU,cAAe,SAAQ,kBAAkB,CAAC,MAAM,CAAC;IACvD;;OAEG;IACH,QAAQ,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACvC;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAC/B;;OAEG;IACH,UAAU,CAAC,EAAE,yBAAyB,CAAC;CAC1C;AAED;;;;;;;;GAQG;AACH,wBAAgB,SAAS,CAAC,EACtB,KAAK,EACL,WAAW,EACX,KAAK,EACL,EAAE,EACF,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,SAAS,EACT,GAAG,EACH,GAAG,KAAK,EACX,EAAE,cAAc,2CAqChB"}

package/dist/components/surfaces/cards/internal/SelectionCard.d.ts

@@ -13,12 +13,12 @@ export interface BaseSelectionCardProps {
      */
     children?: React.ReactNode;
 }
-export interface SelectionCardProps extends BaseSelectionCardProps, CardBaseProps<"div">, CardStyleProps, CommonInputProps<boolean>, Validity<{
+export interface SelectionCardProps<TVal> extends BaseSelectionCardProps, CardBaseProps<"div">, CardStyleProps, CommonInputProps<TVal>, Validity<{
     errorMsgRequired: false;
 }> {
 }
 export declare const SelectionCardLoader: ({ type, density, }: {
     type: "checkbox" | "radio";
 } & DensityTextProps) => import("react/jsx-runtime").JSX.Element;
-export declare const SelectionCardContent: ({ description, value, density, children, }: Pick<SelectionCardProps, "description" | "value" | "density" | "children">) => import("react/jsx-runtime").JSX.Element | null;
+export declare const SelectionCardContent: <TVal>({ description, value, density, children, }: Pick<SelectionCardProps<TVal>, "description" | "value" | "density" | "children">) => import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=SelectionCard.d.ts.map

package/dist/components/surfaces/cards/internal/SelectionCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectionCard.d.ts","sourceRoot":"","sources":["../../../../../src/components/surfaces/cards/internal/SelectionCard.tsx"],"names":[],"mappings":"AAMA,OAAO,EACH,gBAAgB,EAChB,QAAQ,EACX,6CAAoE;AACrE,OAAO,EAAE,gBAAgB,EAAE,+BAAwC;AAEnE,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAOhD,MAAM,WAAW,cAAc;IAC3B,SAAS,CAAC,EAAE,WAAW,GAAG,SAAS,CAAC;CACvC;AAED,MAAM,MAAM,yBAAyB,GAAG,IAAI,CACxC,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,EACjC,OAAO,GAAG,OAAO,GAAG,UAAU,GAAG,UAAU,GAAG,IAAI,GAAG,IAAI,CAC5D,CAAC;AAEF,MAAM,WAAW,sBAAsB;IACnC,+EAA+E;IAC/E,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED,MAAM,WAAW,kBACb,SAAQ,sBAAsB,EAC1B,aAAa,CAAC,KAAK,CAAC,EACpB,cAAc,EACd,gBAAgB,CAAC,OAAO,CAAC,EACzB,QAAQ,CAAC;IAAE,gBAAgB,EAAE,KAAK,CAAA;CAAE,CAAC;CAAG;AAEhD,eAAO,MAAM,mBAAmB,uBAG7B;IAAE,IAAI,EAAE,UAAU,GAAG,OAAO,CAAA;CAAE,GAAG,gBAAgB,4CAcnD,CAAC;AAIF,eAAO,MAAM,oBAAoB,+CAK9B,IAAI,CACH,kBAAkB,EAClB,aAAa,GAAG,OAAO,GAAG,SAAS,GAAG,UAAU,CACnD,mDAiBA,CAAC"}
+{"version":3,"file":"SelectionCard.d.ts","sourceRoot":"","sources":["../../../../../src/components/surfaces/cards/internal/SelectionCard.tsx"],"names":[],"mappings":"AAMA,OAAO,EACH,gBAAgB,EAChB,QAAQ,EACX,6CAAoE;AACrE,OAAO,EAAE,gBAAgB,EAAE,+BAAwC;AAEnE,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAOhD,MAAM,WAAW,cAAc;IAC3B,SAAS,CAAC,EAAE,WAAW,GAAG,SAAS,CAAC;CACvC;AAED,MAAM,MAAM,yBAAyB,GAAG,IAAI,CACxC,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,EACjC,OAAO,GAAG,OAAO,GAAG,UAAU,GAAG,UAAU,GAAG,IAAI,GAAG,IAAI,CAC5D,CAAC;AAEF,MAAM,WAAW,sBAAsB;IACnC,+EAA+E;IAC/E,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED,MAAM,WAAW,kBAAkB,CAAC,IAAI,CACpC,SAAQ,sBAAsB,EAC1B,aAAa,CAAC,KAAK,CAAC,EACpB,cAAc,EACd,gBAAgB,CAAC,IAAI,CAAC,EACtB,QAAQ,CAAC;IAAE,gBAAgB,EAAE,KAAK,CAAA;CAAE,CAAC;CAAG;AAEhD,eAAO,MAAM,mBAAmB,uBAG7B;IAAE,IAAI,EAAE,UAAU,GAAG,OAAO,CAAA;CAAE,GAAG,gBAAgB,4CAcnD,CAAC;AAIF,eAAO,MAAM,oBAAoB,GAAI,IAAI,8CAKtC,IAAI,CACH,kBAAkB,CAAC,IAAI,CAAC,EACxB,aAAa,GAAG,OAAO,GAAG,SAAS,GAAG,UAAU,CACnD,mDAiBA,CAAC"}

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

@@ -27,6 +27,7 @@ require("../../../utilities/layout/Column.cjs");
 require("../../../utilities/layout/Row.cjs");
 require("../../actions/selectionControls/radiobutton.css.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

@@ -25,6 +25,7 @@ import "../../../utilities/layout/Column.js";
 import "../../../utilities/layout/Row.js";
 import "../../actions/selectionControls/radiobutton.css.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,6 +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 ActionChip = require("./components/actions/chips/ActionChip.cjs");
 const FilterChip = require("./components/actions/chips/FilterChip.cjs");
 const TagChip = require("./components/actions/chips/TagChip.cjs");
@@ -62,6 +63,7 @@ exports.IconButton = IconButton.IconButton;
 exports.Checkbox = Checkbox.Checkbox;
 exports.RadioButton = RadioButton.RadioButton;
 exports.Switch = Switch.Switch;
+exports.RadioButtonGroup = RadioButtonGroup.RadioButtonGroup;
 exports.ActionChip = ActionChip.ActionChip;
 exports.FilterChip = FilterChip.FilterChip;
 exports.TagChip = TagChip.TagChip;

package/dist/index.js

@@ -10,6 +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 { ActionChip } from "./components/actions/chips/ActionChip.js";
 import { FilterChip } from "./components/actions/chips/FilterChip.js";
 import { TagChip } from "./components/actions/chips/TagChip.js";
@@ -94,6 +95,7 @@ export {
   ProgressBar,
   ProgressBarComponent,
   RadioButton,
+  RadioButtonGroup,
   RadioCard,
   Row,
   ScreenReaderOnly,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gnist/design-system",
-  "version": "3.12.4",
+  "version": "4.0.0",
   "license": "UNLICENSED",
   "type": "module",
   "main": "dist/index.cjs",
@@ -102,5 +102,5 @@
       "optional": true
     }
   },
-  "gitHead": "c1cfe4cbbdc09b75e29af12d5faef9134da9eeef"
+  "gitHead": "a96ca4cc9524bb65377c0532fcf6733aabd41e39"
 }