@helsenorge/designsystem-react 14.10.0 → 14.11.0

package/lib/components/VisualCheckboxGroup/index.js

@@ -0,0 +1,43 @@
+import { t as isComponent } from "../../component.js";
+import { t as useIsMobileBreakpoint } from "../../useIsMobileBreakpoint.js";
+import { t as useIdWithFallback } from "../../useIdWithFallback.js";
+import { t as ErrorWrapper_default } from "../../ErrorWrapper.js";
+import { t as VisualCheckbox_default } from "../../VisualCheckbox.js";
+import classNames from "classnames";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+import styles from "./styles.module.scss";
+const VisualCheckboxGroup = (props) => {
+	const { children, name, variant = "rectangle", mobileLineVariantLimit, error, errorTextId: errorTextIdProp, renderError = true, errorMessageRef, className, errorWrapperClassName, testId, errorWrapperTestId } = props;
+	const errorTextId = useIdWithFallback(errorTextIdProp);
+	const isMobile = useIsMobileBreakpoint();
+	const visualCheckboxCount = React.Children.toArray(children).filter((child) => isComponent(child, VisualCheckbox_default)).length;
+	const effectiveVariant = isMobile && mobileLineVariantLimit !== void 0 && visualCheckboxCount > mobileLineVariantLimit ? "line" : variant;
+	const mapChild = (child) => {
+		if (isComponent(child, VisualCheckbox_default)) return React.cloneElement(child, {
+			name: child.props.name ?? name,
+			variant: child.props.variant ?? effectiveVariant,
+			error: !!error || child.props.error,
+			errorTextId: child.props.errorTextId ?? errorTextId
+		});
+		return child;
+	};
+	return /* @__PURE__ */ jsx(ErrorWrapper_default, {
+		className: classNames(errorWrapperClassName, className),
+		errorText: error,
+		errorTextId,
+		renderError,
+		errorMessageRef,
+		testId: errorWrapperTestId,
+		children: /* @__PURE__ */ jsx("div", {
+			className: classNames(styles["visual-checkbox-group"], { [styles["visual-checkbox-group--variant-line"]]: effectiveVariant === "line" }),
+			"data-testid": testId,
+			children: React.Children.map(children, mapChild)
+		})
+	});
+};
+VisualCheckboxGroup.VisualCheckbox = VisualCheckbox_default;
+var VisualCheckboxGroup_default = VisualCheckboxGroup;
+export { VisualCheckboxGroup, VisualCheckboxGroup_default as default };
+
+//# sourceMappingURL=index.js.map

package/lib/components/VisualCheckboxGroup/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["VisualCheckboxGroup: VisualCheckboxGroupComponent","effectiveVariant: VisualCheckboxVariant | undefined"],"sources":["../../../src/components/VisualCheckboxGroup/VisualCheckboxGroup.tsx","../../../src/components/VisualCheckboxGroup/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport type { VisualCheckboxProps, VisualCheckboxVariant } from './VisualCheckbox/VisualCheckbox';\n\nimport VisualCheckbox from './VisualCheckbox/VisualCheckbox';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { isComponent } from '../../utils/component';\nimport ErrorWrapper from '../ErrorWrapper';\n\nimport styles from './styles.module.scss';\n\nexport interface VisualCheckboxGroupProps {\n  /** Items in the group. Should be VisualCheckboxGroup.VisualCheckbox elements. */\n  children?: React.ReactNode;\n  /** Name shared by all child VisualCheckbox elements (overridable per child) */\n  name?: string;\n  /** Variant applied to all child VisualCheckbox elements (overridable per child). */\n  variant?: VisualCheckboxVariant;\n  /** When set and the number of VisualCheckbox children exceeds this limit on the mobile breakpoint, the variant is forced to `line`. */\n  mobileLineVariantLimit?: number;\n  /** Error message shown above the group */\n  error?: string;\n  /** Error text id (auto-generated if omitted) */\n  errorTextId?: string;\n  /** Renders the error component (Default: true) */\n  renderError?: boolean;\n  /** Ref passed to the error message element */\n  errorMessageRef?: React.Ref<HTMLDivElement | null>;\n  /** Adds custom classes to the root element. */\n  className?: string;\n  /** Adds custom classes to the errorWrapper */\n  errorWrapperClassName?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets the data-testid attribute for the error wrapper */\n  errorWrapperTestId?: string;\n}\n\ninterface VisualCheckboxGroupComponent extends React.FC<VisualCheckboxGroupProps> {\n  VisualCheckbox: typeof VisualCheckbox;\n}\n\nexport const VisualCheckboxGroup: VisualCheckboxGroupComponent = props => {\n  const {\n    children,\n    name,\n    variant = 'rectangle',\n    mobileLineVariantLimit,\n    error,\n    errorTextId: errorTextIdProp,\n    renderError = true,\n    errorMessageRef,\n    className,\n    errorWrapperClassName,\n    testId,\n    errorWrapperTestId,\n  } = props;\n\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n  const isMobile = useIsMobileBreakpoint();\n\n  const visualCheckboxCount = React.Children.toArray(children).filter(child =>\n    isComponent<VisualCheckboxProps>(child, VisualCheckbox)\n  ).length;\n\n  const effectiveVariant: VisualCheckboxVariant | undefined =\n    isMobile && mobileLineVariantLimit !== undefined && visualCheckboxCount > mobileLineVariantLimit ? 'line' : variant;\n\n  const mapChild = (child: React.ReactNode): React.ReactNode => {\n    if (isComponent<VisualCheckboxProps>(child, VisualCheckbox)) {\n      return React.cloneElement(child, {\n        name: child.props.name ?? name,\n        variant: child.props.variant ?? effectiveVariant,\n        error: !!error || child.props.error,\n        errorTextId: child.props.errorTextId ?? errorTextId,\n      });\n    }\n    return child;\n  };\n\n  return (\n    <ErrorWrapper\n      className={classNames(errorWrapperClassName, className)}\n      errorText={error}\n      errorTextId={errorTextId}\n      renderError={renderError}\n      errorMessageRef={errorMessageRef}\n      testId={errorWrapperTestId}\n    >\n      <div\n        className={classNames(styles['visual-checkbox-group'], {\n          [styles['visual-checkbox-group--variant-line']]: effectiveVariant === 'line',\n        })}\n        data-testid={testId}\n      >\n        {React.Children.map(children, mapChild)}\n      </div>\n    </ErrorWrapper>\n  );\n};\n\nVisualCheckboxGroup.VisualCheckbox = VisualCheckbox;\n\nexport default VisualCheckboxGroup;\n","import VisualCheckboxGroup from './VisualCheckboxGroup';\nexport * from './VisualCheckboxGroup';\nexport default VisualCheckboxGroup;\n"],"mappings":";;;;;;;;;AA6CA,MAAaA,uBAAoD,UAAS;CACxE,MAAM,EACJ,UACA,MACA,UAAU,aACV,wBACA,OACA,aAAa,iBACb,cAAc,MACd,iBACA,WACA,uBACA,QACA,uBACE;CAEJ,MAAM,cAAc,kBAAkB,gBAAgB;CACtD,MAAM,WAAW,uBAAuB;CAExC,MAAM,sBAAsB,MAAM,SAAS,QAAQ,SAAS,CAAC,QAAO,UAClE,YAAiC,OAAO,uBAAe,CACxD,CAAC;CAEF,MAAMC,mBACJ,YAAY,2BAA2B,KAAA,KAAa,sBAAsB,yBAAyB,SAAS;CAE9G,MAAM,YAAY,UAA4C;AAC5D,MAAI,YAAiC,OAAO,uBAAe,CACzD,QAAO,MAAM,aAAa,OAAO;GAC/B,MAAM,MAAM,MAAM,QAAQ;GAC1B,SAAS,MAAM,MAAM,WAAW;GAChC,OAAO,CAAC,CAAC,SAAS,MAAM,MAAM;GAC9B,aAAa,MAAM,MAAM,eAAe;GACzC,CAAC;AAEJ,SAAO;;AAGT,QACE,oBAAC,sBAAA;EACC,WAAW,WAAW,uBAAuB,UAAU;EACvD,WAAW;EACE;EACA;EACI;EACjB,QAAQ;YAER,oBAAC,OAAA;GACC,WAAW,WAAW,OAAO,0BAA0B,GACpD,OAAO,yCAAyC,qBAAqB,QACvE,CAAC;GACF,eAAa;aAEZ,MAAM,SAAS,IAAI,UAAU,SAAS;IACnC;GACO;;AAInB,oBAAoB,iBAAiB;ACtGrC,IAAA,8BDwGe"}

package/lib/components/VisualCheckboxGroup/styles.module.scss

@@ -0,0 +1,6 @@
+@use '../../scss/visual-form' as visual-form;
+@import '../../scss/supernova/styles/spacers.css';
+
+.visual-checkbox-group {
+  @include visual-form.visual-form-group;
+}

package/lib/components/VisualCheckboxGroup/styles.module.scss.d.ts

@@ -0,0 +1,10 @@
+export type Styles = {
+  'visual-checkbox-group': string;
+  'visual-checkbox-group--variant-line': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/lib/components/{VisualRadioButtonCloud/RadioButton/RadioButton.d.ts → VisualRadioCloud/Radio/Radio.d.ts}

@@ -1,5 +1,5 @@
 import { ErrorWrapperClassNameProps } from '../../ErrorWrapper';
-export interface RadioButtonProps extends ErrorWrapperClassNameProps, Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'id' | 'className' | 'children' | 'size' | 'value'> {
+export interface RadioProps extends ErrorWrapperClassNameProps, Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'id' | 'className' | 'children' | 'size' | 'value'> {
     /** Adds custom classes to the root element. */
     className?: string;
     /** Label text shown inside the pill. */
@@ -19,5 +19,5 @@ export interface RadioButtonProps extends ErrorWrapperClassNameProps, Omit<React
     /** Ref forwarded to the underlying input element. */
     ref?: React.Ref<HTMLInputElement | null>;
 }
-declare const RadioButton: React.FC<RadioButtonProps>;
-export default RadioButton;
+declare const Radio: React.FC<RadioProps>;
+export default Radio;

package/lib/components/VisualRadioCloud/Radio/index.d.ts

@@ -0,0 +1,3 @@
+import { default as Radio } from './Radio';
+export * from './Radio';
+export default Radio;

package/lib/components/VisualRadioCloud/Radio/index.js

@@ -0,0 +1,5 @@
+import { t as Radio_default$1 } from "../../../Radio.js";
+var Radio_default = Radio_default$1;
+export { Radio_default as default };
+
+//# sourceMappingURL=index.js.map

package/lib/components/VisualRadioCloud/Radio/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/VisualRadioCloud/Radio/index.ts"],"sourcesContent":["import Radio from './Radio';\nexport * from './Radio';\nexport default Radio;\n"],"mappings":";AAEA,IAAA,gBAAe"}

package/lib/components/VisualRadioCloud/Radio/styles.module.scss

@@ -0,0 +1,7 @@
+@use '../../../scss/visual-form' as visual-form;
+@import '../../../scss/supernova/styles/colors.css';
+@import '../../../scss/supernova/styles/spacers.css';
+
+.visual-radio {
+  @include visual-form.visual-form-pill;
+}

package/lib/components/VisualRadioCloud/Radio/styles.module.scss.d.ts

@@ -0,0 +1,15 @@
+export type Styles = {
+  'visual-radio': string;
+  'visual-radio__icon': string;
+  'visual-radio__input': string;
+  'visual-radio__label': string;
+  'visual-radio__pill': string;
+  'visual-radio--checked': string;
+  'visual-radio--invalid': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/lib/components/{VisualRadioButtonCloud/VisualRadioButtonCloud.d.ts → VisualRadioCloud/VisualRadioCloud.d.ts}

@@ -1,9 +1,9 @@
 import { default as React } from 'react';
-import { default as RadioButton } from './RadioButton/RadioButton';
-export interface VisualRadioButtonCloudProps {
-    /** Items in the cloud. Should be VisualRadioButtonCloud.RadioButton elements. */
+import { default as Radio } from './Radio/Radio';
+export interface VisualRadioCloudProps {
+    /** Items in the cloud. Should be VisualRadioCloud.Radio elements. */
     children?: React.ReactNode;
-    /** Name shared by all child RadioButton elements (overridable per child). Required for native form grouping. */
+    /** Name shared by all child Radio elements (overridable per child). Required for native form grouping. */
     name?: string;
     /** Selected value (controlled). */
     value?: string;
@@ -32,8 +32,8 @@ export interface VisualRadioButtonCloudProps {
     /** Id of element labelling the radiogroup (e.g. an external Title/legend). */
     'aria-labelledby'?: string;
 }
-interface VisualRadioButtonCloudComponent extends React.FC<VisualRadioButtonCloudProps> {
-    RadioButton: typeof RadioButton;
+interface VisualRadioCloudComponent extends React.FC<VisualRadioCloudProps> {
+    Radio: typeof Radio;
 }
-export declare const VisualRadioButtonCloud: VisualRadioButtonCloudComponent;
-export default VisualRadioButtonCloud;
+export declare const VisualRadioCloud: VisualRadioCloudComponent;
+export default VisualRadioCloud;

package/lib/components/VisualRadioCloud/index.d.ts

@@ -0,0 +1,3 @@
+import { default as VisualRadioCloud } from './VisualRadioCloud';
+export * from './VisualRadioCloud';
+export default VisualRadioCloud;

package/lib/components/{VisualRadioButtonCloud → VisualRadioCloud}/index.js

@@ -1,12 +1,12 @@
 import { t as isComponent } from "../../component.js";
 import { t as useIdWithFallback } from "../../useIdWithFallback.js";
 import { t as ErrorWrapper_default } from "../../ErrorWrapper.js";
-import { t as RadioButton_default } from "../../RadioButton2.js";
+import { t as Radio_default } from "../../Radio.js";
 import classNames from "classnames";
 import React, { useState } from "react";
 import { jsx } from "react/jsx-runtime";
 import styles from "./styles.module.scss";
-const VisualRadioButtonCloud = (props) => {
+const VisualRadioCloud = (props) => {
 	const { children, name, value, defaultValue, onChange, error, errorTextId: errorTextIdProp, renderError = true, errorMessageRef, className, errorWrapperClassName, testId, errorWrapperTestId, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy } = props;
 	const errorTextId = useIdWithFallback(errorTextIdProp);
 	const [selectedValue, setSelectedValue] = useState(value ?? defaultValue);
@@ -16,7 +16,7 @@ const VisualRadioButtonCloud = (props) => {
 		if (value !== void 0 && value !== selectedValue) setSelectedValue(value);
 	}
 	const mapChild = (child) => {
-		if (isComponent(child, RadioButton_default)) {
+		if (isComponent(child, Radio_default)) {
 			const isSelected = selectedValue !== void 0 && child.props.value === selectedValue;
 			return React.cloneElement(child, {
 				name: child.props.name ?? name,
@@ -45,14 +45,14 @@ const VisualRadioButtonCloud = (props) => {
 			"aria-labelledby": ariaLabelledBy,
 			"aria-invalid": error ? true : void 0,
 			"aria-describedby": error ? errorTextId : void 0,
-			className: styles["visual-radio-button-cloud"],
+			className: styles["visual-radio-cloud"],
 			"data-testid": testId,
 			children: React.Children.map(children, mapChild)
 		})
 	});
 };
-VisualRadioButtonCloud.RadioButton = RadioButton_default;
-var VisualRadioButtonCloud_default = VisualRadioButtonCloud;
-export { VisualRadioButtonCloud, VisualRadioButtonCloud_default as default };
+VisualRadioCloud.Radio = Radio_default;
+var VisualRadioCloud_default = VisualRadioCloud;
+export { VisualRadioCloud, VisualRadioCloud_default as default };
 
 //# sourceMappingURL=index.js.map

package/lib/components/VisualRadioCloud/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["VisualRadioCloud: VisualRadioCloudComponent"],"sources":["../../../src/components/VisualRadioCloud/VisualRadioCloud.tsx","../../../src/components/VisualRadioCloud/index.ts"],"sourcesContent":["import React, { useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { RadioProps } from './Radio/Radio';\n\nimport Radio from './Radio/Radio';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { isComponent } from '../../utils/component';\nimport ErrorWrapper from '../ErrorWrapper';\n\nimport styles from './styles.module.scss';\n\nexport interface VisualRadioCloudProps {\n  /** Items in the cloud. Should be VisualRadioCloud.Radio elements. */\n  children?: React.ReactNode;\n  /** Name shared by all child Radio elements (overridable per child). Required for native form grouping. */\n  name?: string;\n  /** Selected value (controlled). */\n  value?: string;\n  /** Initial selected value (uncontrolled). */\n  defaultValue?: string;\n  /** Called when the selected value changes. */\n  onChange?: (event: React.ChangeEvent<HTMLInputElement>, value: string) => void;\n  /** Error message shown above the cloud */\n  error?: string;\n  /** Error text id (auto-generated if omitted) */\n  errorTextId?: string;\n  /** Renders the error component (Default: true) */\n  renderError?: boolean;\n  /** Ref passed to the error message element */\n  errorMessageRef?: React.Ref<HTMLDivElement | null>;\n  /** Adds custom classes to the root element. */\n  className?: string;\n  /** Adds custom classes to the errorWrapper */\n  errorWrapperClassName?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets the data-testid attribute for the error wrapper */\n  errorWrapperTestId?: string;\n  /** Accessible label for the radiogroup. Use this or `aria-labelledby` when no external `<legend>` labels the group. */\n  'aria-label'?: string;\n  /** Id of element labelling the radiogroup (e.g. an external Title/legend). */\n  'aria-labelledby'?: string;\n}\n\ninterface VisualRadioCloudComponent extends React.FC<VisualRadioCloudProps> {\n  Radio: typeof Radio;\n}\n\nexport const VisualRadioCloud: VisualRadioCloudComponent = props => {\n  const {\n    children,\n    name,\n    value,\n    defaultValue,\n    onChange,\n    error,\n    errorTextId: errorTextIdProp,\n    renderError = true,\n    errorMessageRef,\n    className,\n    errorWrapperClassName,\n    testId,\n    errorWrapperTestId,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n  } = props;\n\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n  const [selectedValue, setSelectedValue] = useState<string | undefined>(value ?? defaultValue);\n  const [prevValue, setPrevValue] = useState<string | undefined>(value);\n  if (prevValue !== value) {\n    setPrevValue(value);\n    if (value !== undefined && value !== selectedValue) {\n      setSelectedValue(value);\n    }\n  }\n\n  const mapChild = (child: React.ReactNode): React.ReactNode => {\n    if (isComponent<RadioProps>(child, Radio)) {\n      const isSelected = selectedValue !== undefined && child.props.value === selectedValue;\n      return React.cloneElement(child, {\n        name: child.props.name ?? name,\n        checked: isSelected,\n        error: !!error || child.props.error,\n        errorTextId: child.props.errorTextId ?? errorTextId,\n        onChange: (e: React.ChangeEvent<HTMLInputElement>) => {\n          setSelectedValue(child.props.value);\n          child.props.onChange?.(e);\n          onChange?.(e, child.props.value);\n        },\n      });\n    }\n    return child;\n  };\n\n  return (\n    <ErrorWrapper\n      className={classNames(errorWrapperClassName, className)}\n      errorText={error}\n      errorTextId={errorTextId}\n      renderError={renderError}\n      errorMessageRef={errorMessageRef}\n      testId={errorWrapperTestId}\n    >\n      <div\n        role=\"radiogroup\"\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-invalid={error ? true : undefined}\n        aria-describedby={error ? errorTextId : undefined}\n        className={styles['visual-radio-cloud']}\n        data-testid={testId}\n      >\n        {React.Children.map(children, mapChild)}\n      </div>\n    </ErrorWrapper>\n  );\n};\n\nVisualRadioCloud.Radio = Radio;\n\nexport default VisualRadioCloud;\n","import VisualRadioCloud from './VisualRadioCloud';\nexport * from './VisualRadioCloud';\nexport default VisualRadioCloud;\n"],"mappings":";;;;;;;;AAkDA,MAAaA,oBAA8C,UAAS;CAClE,MAAM,EACJ,UACA,MACA,OACA,cACA,UACA,OACA,aAAa,iBACb,cAAc,MACd,iBACA,WACA,uBACA,QACA,oBACA,cAAc,WACd,mBAAmB,mBACjB;CAEJ,MAAM,cAAc,kBAAkB,gBAAgB;CACtD,MAAM,CAAC,eAAe,oBAAoB,SAA6B,SAAS,aAAa;CAC7F,MAAM,CAAC,WAAW,gBAAgB,SAA6B,MAAM;AACrE,KAAI,cAAc,OAAO;AACvB,eAAa,MAAM;AACnB,MAAI,UAAU,KAAA,KAAa,UAAU,cACnC,kBAAiB,MAAM;;CAI3B,MAAM,YAAY,UAA4C;AAC5D,MAAI,YAAwB,OAAO,cAAM,EAAE;GACzC,MAAM,aAAa,kBAAkB,KAAA,KAAa,MAAM,MAAM,UAAU;AACxE,UAAO,MAAM,aAAa,OAAO;IAC/B,MAAM,MAAM,MAAM,QAAQ;IAC1B,SAAS;IACT,OAAO,CAAC,CAAC,SAAS,MAAM,MAAM;IAC9B,aAAa,MAAM,MAAM,eAAe;IACxC,WAAW,MAA2C;AACpD,sBAAiB,MAAM,MAAM,MAAM;AACnC,WAAM,MAAM,WAAW,EAAE;AACzB,gBAAW,GAAG,MAAM,MAAM,MAAM;;IAEnC,CAAC;;AAEJ,SAAO;;AAGT,QACE,oBAAC,sBAAA;EACC,WAAW,WAAW,uBAAuB,UAAU;EACvD,WAAW;EACE;EACA;EACI;EACjB,QAAQ;YAER,oBAAC,OAAA;GACC,MAAK;GACL,cAAY;GACZ,mBAAiB;GACjB,gBAAc,QAAQ,OAAO,KAAA;GAC7B,oBAAkB,QAAQ,cAAc,KAAA;GACxC,WAAW,OAAO;GAClB,eAAa;aAEZ,MAAM,SAAS,IAAI,UAAU,SAAS;IACnC;GACO;;AAInB,iBAAiB,QAAQ;ACvHzB,IAAA,2BDyHe"}

package/lib/components/VisualRadioCloud/styles.module.scss

@@ -0,0 +1,6 @@
+@use '../../scss/visual-form' as visual-form;
+@import '../../scss/supernova/styles/spacers.css';
+
+.visual-radio-cloud {
+  @include visual-form.visual-form-cloud;
+}

package/lib/components/{VisualRadioButtonCloud → VisualRadioCloud}/styles.module.scss.d.ts

@@ -1,5 +1,5 @@
 export type Styles = {
-  'visual-radio-button-cloud': string;
+  'visual-radio-cloud': string;
 };
 
 export type ClassNames = keyof Styles;

package/lib/components/VisualRadioGroup/VisualRadio/VisualContent.d.ts

@@ -0,0 +1,10 @@
+export interface VisualContentProps {
+    /** Content rendered inside the circular area – typically an <img> or illustration component. */
+    children: React.ReactNode;
+    /** Adds custom classes to the root element. */
+    className?: string;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+}
+export declare const VisualContent: React.FC<VisualContentProps>;
+export default VisualContent;

package/lib/components/VisualRadioGroup/VisualRadio/VisualRadio.d.ts

@@ -0,0 +1,26 @@
+import { ErrorWrapperClassNameProps } from '../../ErrorWrapper';
+export type VisualRadioVariant = 'line' | 'rectangle';
+export interface VisualRadioProps extends ErrorWrapperClassNameProps, Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'id' | 'className' | 'children' | 'size'> {
+    /** Adds custom classes to the root element. */
+    className?: string;
+    /** Label rendered inside the radio frame. */
+    children: string;
+    /** Content rendered inside the circular visual slot. */
+    visualContent?: React.ReactNode;
+    /** Layout variant. `line` is a thin horizontal pill, `rectangle` is a vertical card. */
+    variant?: VisualRadioVariant;
+    /** input id of the underlying radio */
+    inputId?: string;
+    /** Activates error styling. Can be true while errorText is empty (e.g. when used in a FormGroup). */
+    error?: boolean;
+    /** Error text to show above the component. */
+    errorText?: string;
+    /** Error text id */
+    errorTextId?: string;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+    /** Ref forwarded to the underlying input element. */
+    ref?: React.Ref<HTMLInputElement | null>;
+}
+declare const VisualRadio: React.FC<VisualRadioProps>;
+export default VisualRadio;

package/lib/components/VisualRadioGroup/VisualRadio/index.d.ts

@@ -0,0 +1,3 @@
+import { default as VisualRadio } from './VisualRadio';
+export * from './VisualRadio';
+export default VisualRadio;

package/lib/components/VisualRadioGroup/VisualRadio/index.js

@@ -0,0 +1,5 @@
+import { t as VisualRadio_default$1 } from "../../../VisualRadio.js";
+var VisualRadio_default = VisualRadio_default$1;
+export { VisualRadio_default as default };
+
+//# sourceMappingURL=index.js.map

package/lib/components/VisualRadioGroup/VisualRadio/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/VisualRadioGroup/VisualRadio/index.ts"],"sourcesContent":["import VisualRadio from './VisualRadio';\nexport * from './VisualRadio';\nexport default VisualRadio;\n"],"mappings":";AAEA,IAAA,sBAAe"}

package/lib/components/VisualRadioGroup/VisualRadio/styles.module.scss

@@ -0,0 +1,7 @@
+@use '../../../scss/visual-form' as visual-form;
+@import '../../../scss/supernova/styles/colors.css';
+@import '../../../scss/supernova/styles/spacers.css';
+
+.visual-radio {
+  @include visual-form.visual-form-card;
+}

package/lib/components/VisualRadioGroup/VisualRadio/styles.module.scss.d.ts

@@ -0,0 +1,18 @@
+export type Styles = {
+  'visual-radio': string;
+  'visual-radio__frame': string;
+  'visual-radio__icon': string;
+  'visual-radio__input': string;
+  'visual-radio__label': string;
+  'visual-radio__visual-content': string;
+  'visual-radio--checked': string;
+  'visual-radio--invalid': string;
+  'visual-radio--variant-line': string;
+  'visual-radio--variant-rectangle': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/lib/components/VisualRadioGroup/VisualRadioGroup.d.ts

@@ -0,0 +1,39 @@
+import { default as React } from 'react';
+import { VisualRadioVariant, default as VisualRadio } from './VisualRadio/VisualRadio';
+export interface VisualRadioGroupProps {
+    /** Items in the group. Should be VisualRadioGroup.VisualRadio elements. */
+    children?: React.ReactNode;
+    /** Name shared by all child VisualRadio elements (overridable per child). Auto-generated if omitted. */
+    name?: string;
+    /** Selected value (controlled). */
+    value?: string;
+    /** Initial selected value (uncontrolled). */
+    defaultValue?: string;
+    /** Called when the selected value changes. */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>, value: string) => void;
+    /** Variant applied to all child VisualRadio elements (overridable per child). */
+    variant?: VisualRadioVariant;
+    /** When set and the number of VisualRadio children exceeds this limit on the mobile breakpoint, the variant is forced to `line`. */
+    mobileLineVariantLimit?: number;
+    /** Error message shown above the group */
+    error?: string;
+    /** Error text id (auto-generated if omitted) */
+    errorTextId?: string;
+    /** Renders the error component (Default: true) */
+    renderError?: boolean;
+    /** Ref passed to the error message element */
+    errorMessageRef?: React.Ref<HTMLDivElement | null>;
+    /** Adds custom classes to the root element. */
+    className?: string;
+    /** Adds custom classes to the errorWrapper */
+    errorWrapperClassName?: string;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+    /** Sets the data-testid attribute for the error wrapper */
+    errorWrapperTestId?: string;
+}
+interface VisualRadioGroupComponent extends React.FC<VisualRadioGroupProps> {
+    VisualRadio: typeof VisualRadio;
+}
+export declare const VisualRadioGroup: VisualRadioGroupComponent;
+export default VisualRadioGroup;

package/lib/components/VisualRadioGroup/index.d.ts

@@ -0,0 +1,3 @@
+import { default as VisualRadioGroup } from './VisualRadioGroup';
+export * from './VisualRadioGroup';
+export default VisualRadioGroup;

package/lib/components/VisualRadioGroup/index.js

@@ -0,0 +1,63 @@
+import { t as isComponent } from "../../component.js";
+import { t as useIsMobileBreakpoint } from "../../useIsMobileBreakpoint.js";
+import { t as useIdWithFallback } from "../../useIdWithFallback.js";
+import { t as ErrorWrapper_default } from "../../ErrorWrapper.js";
+import { t as VisualRadio_default } from "../../VisualRadio.js";
+import classNames from "classnames";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+import styles from "./styles.module.scss";
+const VisualRadioGroup = (props) => {
+	const { children, name: nameProp, value, defaultValue, onChange, variant = "rectangle", mobileLineVariantLimit, error, errorTextId: errorTextIdProp, renderError = true, errorMessageRef, className, errorWrapperClassName, testId, errorWrapperTestId } = props;
+	const errorTextId = useIdWithFallback(errorTextIdProp);
+	const name = useIdWithFallback(nameProp);
+	const isMobile = useIsMobileBreakpoint();
+	const radioChildren = React.Children.toArray(children).filter((child) => isComponent(child, VisualRadio_default));
+	const initialSelected = value ?? defaultValue ?? radioChildren.find((child) => child.props.defaultChecked || child.props.checked)?.props.value?.toString();
+	const [selectedValue, setSelectedValue] = React.useState(initialSelected);
+	const [prevValue, setPrevValue] = React.useState(value);
+	if (prevValue !== value) {
+		setPrevValue(value);
+		if (value !== void 0 && value !== selectedValue) setSelectedValue(value);
+	}
+	const effectiveVariant = isMobile && mobileLineVariantLimit !== void 0 && radioChildren.length > mobileLineVariantLimit ? "line" : variant;
+	const mapChild = (child) => {
+		if (isComponent(child, VisualRadio_default)) {
+			const childValue = child.props.value?.toString();
+			const isSelected = selectedValue !== void 0 && childValue !== void 0 && childValue === selectedValue;
+			const childOnChange = child.props.onChange;
+			return React.cloneElement(child, {
+				name: child.props.name ?? name,
+				variant: child.props.variant ?? effectiveVariant,
+				error: !!error || child.props.error,
+				errorTextId: child.props.errorTextId ?? errorTextId,
+				checked: isSelected,
+				onChange: (e) => {
+					if (childValue !== void 0) setSelectedValue(childValue);
+					childOnChange?.(e);
+					if (childValue !== void 0) onChange?.(e, childValue);
+				}
+			});
+		}
+		return child;
+	};
+	return /* @__PURE__ */ jsx(ErrorWrapper_default, {
+		className: classNames(errorWrapperClassName, className),
+		errorText: error,
+		errorTextId,
+		renderError,
+		errorMessageRef,
+		testId: errorWrapperTestId,
+		children: /* @__PURE__ */ jsx("div", {
+			className: classNames(styles["visual-radio-group"], { [styles["visual-radio-group--variant-line"]]: effectiveVariant === "line" }),
+			"data-testid": testId,
+			role: "radiogroup",
+			children: React.Children.map(children, mapChild)
+		})
+	});
+};
+VisualRadioGroup.VisualRadio = VisualRadio_default;
+var VisualRadioGroup_default = VisualRadioGroup;
+export { VisualRadioGroup, VisualRadioGroup_default as default };
+
+//# sourceMappingURL=index.js.map

package/lib/components/VisualRadioGroup/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["VisualRadioGroup: VisualRadioGroupComponent","effectiveVariant: VisualRadioVariant | undefined"],"sources":["../../../src/components/VisualRadioGroup/VisualRadioGroup.tsx","../../../src/components/VisualRadioGroup/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport type { VisualRadioProps, VisualRadioVariant } from './VisualRadio/VisualRadio';\n\nimport VisualRadio from './VisualRadio/VisualRadio';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { isComponent } from '../../utils/component';\nimport ErrorWrapper from '../ErrorWrapper';\n\nimport styles from './styles.module.scss';\n\nexport interface VisualRadioGroupProps {\n  /** Items in the group. Should be VisualRadioGroup.VisualRadio elements. */\n  children?: React.ReactNode;\n  /** Name shared by all child VisualRadio elements (overridable per child). Auto-generated if omitted. */\n  name?: string;\n  /** Selected value (controlled). */\n  value?: string;\n  /** Initial selected value (uncontrolled). */\n  defaultValue?: string;\n  /** Called when the selected value changes. */\n  onChange?: (event: React.ChangeEvent<HTMLInputElement>, value: string) => void;\n  /** Variant applied to all child VisualRadio elements (overridable per child). */\n  variant?: VisualRadioVariant;\n  /** When set and the number of VisualRadio children exceeds this limit on the mobile breakpoint, the variant is forced to `line`. */\n  mobileLineVariantLimit?: number;\n  /** Error message shown above the group */\n  error?: string;\n  /** Error text id (auto-generated if omitted) */\n  errorTextId?: string;\n  /** Renders the error component (Default: true) */\n  renderError?: boolean;\n  /** Ref passed to the error message element */\n  errorMessageRef?: React.Ref<HTMLDivElement | null>;\n  /** Adds custom classes to the root element. */\n  className?: string;\n  /** Adds custom classes to the errorWrapper */\n  errorWrapperClassName?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets the data-testid attribute for the error wrapper */\n  errorWrapperTestId?: string;\n}\n\ninterface VisualRadioGroupComponent extends React.FC<VisualRadioGroupProps> {\n  VisualRadio: typeof VisualRadio;\n}\n\nexport const VisualRadioGroup: VisualRadioGroupComponent = props => {\n  const {\n    children,\n    name: nameProp,\n    value,\n    defaultValue,\n    onChange,\n    variant = 'rectangle',\n    mobileLineVariantLimit,\n    error,\n    errorTextId: errorTextIdProp,\n    renderError = true,\n    errorMessageRef,\n    className,\n    errorWrapperClassName,\n    testId,\n    errorWrapperTestId,\n  } = props;\n\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n  const name = useIdWithFallback(nameProp);\n  const isMobile = useIsMobileBreakpoint();\n\n  const childArray = React.Children.toArray(children);\n  const radioChildren = childArray.filter((child): child is React.ReactElement<VisualRadioProps> =>\n    isComponent<VisualRadioProps>(child, VisualRadio)\n  );\n\n  const initialSelected =\n    value ?? defaultValue ?? radioChildren.find(child => child.props.defaultChecked || child.props.checked)?.props.value?.toString();\n\n  const [selectedValue, setSelectedValue] = React.useState<string | undefined>(initialSelected);\n  const [prevValue, setPrevValue] = React.useState<string | undefined>(value);\n  if (prevValue !== value) {\n    setPrevValue(value);\n    if (value !== undefined && value !== selectedValue) {\n      setSelectedValue(value);\n    }\n  }\n\n  const effectiveVariant: VisualRadioVariant | undefined =\n    isMobile && mobileLineVariantLimit !== undefined && radioChildren.length > mobileLineVariantLimit ? 'line' : variant;\n\n  const mapChild = (child: React.ReactNode): React.ReactNode => {\n    if (isComponent<VisualRadioProps>(child, VisualRadio)) {\n      const childValue = child.props.value?.toString();\n      const isSelected = selectedValue !== undefined && childValue !== undefined && childValue === selectedValue;\n      const childOnChange = child.props.onChange;\n\n      return React.cloneElement(child, {\n        name: child.props.name ?? name,\n        variant: child.props.variant ?? effectiveVariant,\n        error: !!error || child.props.error,\n        errorTextId: child.props.errorTextId ?? errorTextId,\n        checked: isSelected,\n        onChange: (e: React.ChangeEvent<HTMLInputElement>): void => {\n          if (childValue !== undefined) {\n            setSelectedValue(childValue);\n          }\n          childOnChange?.(e);\n          if (childValue !== undefined) {\n            onChange?.(e, childValue);\n          }\n        },\n      });\n    }\n    return child;\n  };\n\n  return (\n    <ErrorWrapper\n      className={classNames(errorWrapperClassName, className)}\n      errorText={error}\n      errorTextId={errorTextId}\n      renderError={renderError}\n      errorMessageRef={errorMessageRef}\n      testId={errorWrapperTestId}\n    >\n      <div\n        className={classNames(styles['visual-radio-group'], {\n          [styles['visual-radio-group--variant-line']]: effectiveVariant === 'line',\n        })}\n        data-testid={testId}\n        role={'radiogroup'}\n      >\n        {React.Children.map(children, mapChild)}\n      </div>\n    </ErrorWrapper>\n  );\n};\n\nVisualRadioGroup.VisualRadio = VisualRadio;\n\nexport default VisualRadioGroup;\n","import VisualRadioGroup from './VisualRadioGroup';\nexport * from './VisualRadioGroup';\nexport default VisualRadioGroup;\n"],"mappings":";;;;;;;;;AAmDA,MAAaA,oBAA8C,UAAS;CAClE,MAAM,EACJ,UACA,MAAM,UACN,OACA,cACA,UACA,UAAU,aACV,wBACA,OACA,aAAa,iBACb,cAAc,MACd,iBACA,WACA,uBACA,QACA,uBACE;CAEJ,MAAM,cAAc,kBAAkB,gBAAgB;CACtD,MAAM,OAAO,kBAAkB,SAAS;CACxC,MAAM,WAAW,uBAAuB;CAGxC,MAAM,gBADa,MAAM,SAAS,QAAQ,SAAS,CAClB,QAAQ,UACvC,YAA8B,OAAO,oBAAY,CAClD;CAED,MAAM,kBACJ,SAAS,gBAAgB,cAAc,MAAK,UAAS,MAAM,MAAM,kBAAkB,MAAM,MAAM,QAAQ,EAAE,MAAM,OAAO,UAAU;CAElI,MAAM,CAAC,eAAe,oBAAoB,MAAM,SAA6B,gBAAgB;CAC7F,MAAM,CAAC,WAAW,gBAAgB,MAAM,SAA6B,MAAM;AAC3E,KAAI,cAAc,OAAO;AACvB,eAAa,MAAM;AACnB,MAAI,UAAU,KAAA,KAAa,UAAU,cACnC,kBAAiB,MAAM;;CAI3B,MAAMC,mBACJ,YAAY,2BAA2B,KAAA,KAAa,cAAc,SAAS,yBAAyB,SAAS;CAE/G,MAAM,YAAY,UAA4C;AAC5D,MAAI,YAA8B,OAAO,oBAAY,EAAE;GACrD,MAAM,aAAa,MAAM,MAAM,OAAO,UAAU;GAChD,MAAM,aAAa,kBAAkB,KAAA,KAAa,eAAe,KAAA,KAAa,eAAe;GAC7F,MAAM,gBAAgB,MAAM,MAAM;AAElC,UAAO,MAAM,aAAa,OAAO;IAC/B,MAAM,MAAM,MAAM,QAAQ;IAC1B,SAAS,MAAM,MAAM,WAAW;IAChC,OAAO,CAAC,CAAC,SAAS,MAAM,MAAM;IAC9B,aAAa,MAAM,MAAM,eAAe;IACxC,SAAS;IACT,WAAW,MAAiD;AAC1D,SAAI,eAAe,KAAA,EACjB,kBAAiB,WAAW;AAE9B,qBAAgB,EAAE;AAClB,SAAI,eAAe,KAAA,EACjB,YAAW,GAAG,WAAW;;IAG9B,CAAC;;AAEJ,SAAO;;AAGT,QACE,oBAAC,sBAAA;EACC,WAAW,WAAW,uBAAuB,UAAU;EACvD,WAAW;EACE;EACA;EACI;EACjB,QAAQ;YAER,oBAAC,OAAA;GACC,WAAW,WAAW,OAAO,uBAAuB,GACjD,OAAO,sCAAsC,qBAAqB,QACpE,CAAC;GACF,eAAa;GACb,MAAM;aAEL,MAAM,SAAS,IAAI,UAAU,SAAS;IACnC;GACO;;AAInB,iBAAiB,cAAc;AC5I/B,IAAA,2BD8Ie"}

package/lib/components/VisualRadioGroup/styles.module.scss

@@ -0,0 +1,6 @@
+@use '../../scss/visual-form' as visual-form;
+@import '../../scss/supernova/styles/spacers.css';
+
+.visual-radio-group {
+  @include visual-form.visual-form-group;
+}

package/lib/components/VisualRadioGroup/styles.module.scss.d.ts

@@ -0,0 +1,10 @@
+export type Styles = {
+  'visual-radio-group': string;
+  'visual-radio-group--variant-line': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;