@ganpatiinfo/gids-web-dom-reference 2.0.2 → 2.0.5

package/dist/index.d.ts

@@ -1,13 +1,25 @@
 /**
  * Referenced to DOM components
  */
+export * from './components/GidsButton/GidsButton';
 export * from './components/GidsDivider/GidsDivider';
 export * from './components/GidsDisplayTag/GidsDisplayTag';
+export * from './components/GidsIcon/GidsIcon';
+export * from './components/GidsLabel/GidsLabelInfo/GidsLabelInfo';
+export * from './components/GidsLabel/GidsLabel';
+export * from './components/GidsLink/GidsLink';
 export * from './components/_GidsSpinnerControl/GidsSpinnerControl';
 export * from './components/GidsSpinner/GidsSpinner';
-export * from './components/GidsIcon/GidsIcon';
-export * from './components/GidsButton/GidsButton';
 export * from './components/GidsToggleButton/GidsToggleButton';
+export * from './components/_GidsCheckboxControl/GidsCheckboxControl';
+export * from './components/_GidsRadioControl/GidsRadioControl';
+export * from './components/_GidsSwitchControl/GidsSwitchControl';
+export * from './components/GidsCheckbox/GidsCheckbox';
+export * from './components/GidsRadio/GidsRadio';
+export * from './components/GidsSwitch/GidsSwitch';
+export * from './components/GidsCheckboxGroup/GidsCheckboxGroup';
+export * from './components/GidsRadioGroup/GidsRadioGroup';
+export * from './components/GidsSwitchGroup/GidsSwitchGroup';
 /**
  * Utilities
  */

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,sCAAsC,CAAC;AACrD,cAAc,4CAA4C,CAAC;AAC3D,cAAc,qDAAqD,CAAC;AACpE,cAAc,sCAAsC,CAAC;AACrD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,oCAAoC,CAAC;AACnD,cAAc,gDAAgD,CAAC;AAE/D;;GAEG;AACH,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,oCAAoC,CAAC;AACnD,cAAc,sCAAsC,CAAC;AACrD,cAAc,4CAA4C,CAAC;AAC3D,cAAc,gCAAgC,CAAC;AAC/C,cAAc,oDAAoD,CAAC;AACnE,cAAc,kCAAkC,CAAC;AACjD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,qDAAqD,CAAC;AACpE,cAAc,sCAAsC,CAAC;AACrD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,uDAAuD,CAAC;AACtE,cAAc,iDAAiD,CAAC;AAChE,cAAc,mDAAmD,CAAC;AAClE,cAAc,wCAAwC,CAAC;AACvD,cAAc,kCAAkC,CAAC;AACjD,cAAc,oCAAoC,CAAC;AACnD,cAAc,kDAAkD,CAAC;AACjE,cAAc,4CAA4C,CAAC;AAC3D,cAAc,8CAA8C,CAAC;AAE7D;;GAEG;AACH,cAAc,kBAAkB,CAAC"}

package/dist/index.js

@@ -1,13 +1,25 @@
 /**
  * Referenced to DOM components
  */
+export * from './components/GidsButton/GidsButton';
 export * from './components/GidsDivider/GidsDivider';
 export * from './components/GidsDisplayTag/GidsDisplayTag';
+export * from './components/GidsIcon/GidsIcon';
+export * from './components/GidsLabel/GidsLabelInfo/GidsLabelInfo';
+export * from './components/GidsLabel/GidsLabel';
+export * from './components/GidsLink/GidsLink';
 export * from './components/_GidsSpinnerControl/GidsSpinnerControl';
 export * from './components/GidsSpinner/GidsSpinner';
-export * from './components/GidsIcon/GidsIcon';
-export * from './components/GidsButton/GidsButton';
 export * from './components/GidsToggleButton/GidsToggleButton';
+export * from './components/_GidsCheckboxControl/GidsCheckboxControl';
+export * from './components/_GidsRadioControl/GidsRadioControl';
+export * from './components/_GidsSwitchControl/GidsSwitchControl';
+export * from './components/GidsCheckbox/GidsCheckbox';
+export * from './components/GidsRadio/GidsRadio';
+export * from './components/GidsSwitch/GidsSwitch';
+export * from './components/GidsCheckboxGroup/GidsCheckboxGroup';
+export * from './components/GidsRadioGroup/GidsRadioGroup';
+export * from './components/GidsSwitchGroup/GidsSwitchGroup';
 /**
  * Utilities
  */

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,sCAAsC,CAAC;AACrD,cAAc,4CAA4C,CAAC;AAC3D,cAAc,qDAAqD,CAAC;AACpE,cAAc,sCAAsC,CAAC;AACrD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,oCAAoC,CAAC;AACnD,cAAc,gDAAgD,CAAC;AAE/D;;GAEG;AACH,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,oCAAoC,CAAC;AACnD,cAAc,sCAAsC,CAAC;AACrD,cAAc,4CAA4C,CAAC;AAC3D,cAAc,gCAAgC,CAAC;AAC/C,cAAc,oDAAoD,CAAC;AACnE,cAAc,kCAAkC,CAAC;AACjD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,qDAAqD,CAAC;AACpE,cAAc,sCAAsC,CAAC;AACrD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,uDAAuD,CAAC;AACtE,cAAc,iDAAiD,CAAC;AAChE,cAAc,mDAAmD,CAAC;AAClE,cAAc,wCAAwC,CAAC;AACvD,cAAc,kCAAkC,CAAC;AACjD,cAAc,oCAAoC,CAAC;AACnD,cAAc,kDAAkD,CAAC;AACjE,cAAc,4CAA4C,CAAC;AAC3D,cAAc,8CAA8C,CAAC;AAE7D;;GAEG;AACH,cAAc,kBAAkB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@ganpatiinfo/gids-web-dom-reference",
-	"version": "2.0.2",
+	"version": "2.0.5",
 	"private": false,
 	"description": "DOM for components reference implementations",
 	"homepage": "https://ganpatiinfosystem.vercel.app/",
@@ -24,11 +24,11 @@
 		"directory": "packages/private/web-dom-reference"
 	},
 	"dependencies": {
-		"@ganpatiinfo/gids-core-shared": "2.0.2",
-		"@ganpatiinfo/gids-web-shared": "2.0.2"
+		"@ganpatiinfo/gids-core-shared": "2.0.5",
+		"@ganpatiinfo/gids-web-shared": "2.0.5"
 	},
 	"peerDependencies": {
-		"@ganpatiinfo/gids-web-theme-interface": "2.0.2",
+		"@ganpatiinfo/gids-web-theme-interface": "2.0.5",
 		"@jest/globals": "29.7.0",
 		"@types/jasmine": "5.1.7",
 		"expect": "29.7.0"

package/src/components/GidsCheckbox/GidsCheckbox.ts

@@ -0,0 +1,76 @@
+import {
+	type ClassValue,
+	generateId,
+	type GidsCheckboxWebProps,
+	GidsCheckboxWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+import { GidsCheckboxControlDom } from '../_GidsCheckboxControl/GidsCheckboxControl';
+import { GidsLabelDom } from '../GidsLabel/GidsLabel';
+
+const { getGidsCheckboxClassNames } = GidsCheckboxWebUtils;
+
+export interface GidsCheckboxDomProps
+	extends GidsCheckboxWebProps<
+		Element | Element[] | string | string[],
+		Element
+	> {
+	onChange?: (this: HTMLInputElement, event: Event) => void;
+	className?: ClassValue;
+}
+
+export const GidsCheckboxDom = ({
+	// Label props
+	children,
+	fieldRequirement,
+	fieldRequirementOptionalText,
+	fieldRequirementRequiredText,
+	info,
+	labelId,
+
+	// Checkbox props
+	checked,
+	defaultChecked,
+	disabled,
+	indeterminate,
+	required,
+	inputId,
+	name,
+	value,
+	onChange,
+
+	// CheckboxWithLabel props
+	className,
+}: GidsCheckboxDomProps): HTMLDivElement => {
+	const checkboxWithLabel = document.createElement('div');
+	checkboxWithLabel.className = getGidsCheckboxClassNames(className);
+
+	const realInputId = inputId ?? generateId();
+
+	checkboxWithLabel.appendChild(
+		GidsCheckboxControlDom({
+			checked,
+			defaultChecked,
+			disabled,
+			indeterminate,
+			inputId: realInputId,
+			name,
+            value,
+			required,
+			onChange,
+		}),
+	);
+	checkboxWithLabel.appendChild(
+		GidsLabelDom({
+			children,
+			disabled,
+			fieldRequirement,
+			fieldRequirementOptionalText,
+			fieldRequirementRequiredText,
+			htmlFor: realInputId,
+			info,
+			labelId,
+		}),
+	);
+
+	return checkboxWithLabel;
+};

package/src/components/GidsCheckboxGroup/GidsCheckboxGroup.ts

@@ -0,0 +1,21 @@
+import { type GidsCheckboxGroupCommonProps } from '@ganpatiinfo/gids-core-shared';
+import { GidsCheckboxGroupWebUtils } from '@ganpatiinfo/gids-web-shared';
+import { appendAsChildren, type DomChildren } from '../../utils/domUtils';
+
+const { getGidsCheckboxGroupClassNames } = GidsCheckboxGroupWebUtils;
+
+export interface GidsCheckboxGroupDomProps
+	extends GidsCheckboxGroupCommonProps<DomChildren> {
+	extraClasses?: string;
+}
+
+export const GidsCheckboxGroupDom = ({
+	children,
+	extraClasses,
+}: GidsCheckboxGroupDomProps): HTMLDivElement => {
+	const checkboxGroup = document.createElement('div');
+	checkboxGroup.className = getGidsCheckboxGroupClassNames(extraClasses);
+	appendAsChildren(checkboxGroup, children);
+
+	return checkboxGroup;
+};

package/src/components/GidsLabel/GidsLabel.ts

@@ -0,0 +1,58 @@
+import {
+	GidsLabelWebUtils,
+	type GidsLabelWebProps,
+} from '@ganpatiinfo/gids-web-shared';
+import {
+	appendAsChildren,
+	type DomChildren,
+	type DomNodeOrString,
+} from '../../utils/domUtils';
+import { GidsLabelCommonUtils } from '@ganpatiinfo/gids-core-shared';
+
+const { getIndicatorText } = GidsLabelCommonUtils;
+const { getGidsLabelClassNames } = GidsLabelWebUtils;
+
+export interface GidsLabelDomProps
+	extends GidsLabelWebProps<DomChildren, DomNodeOrString> {}
+
+export const GidsLabelDom = ({
+	children,
+	disabled,
+	fieldRequirement,
+	fieldRequirementOptionalText,
+	fieldRequirementRequiredText,
+	info,
+	htmlFor,
+	labelId,
+}: GidsLabelDomProps): HTMLDivElement => {
+	const container = document.createElement('div');
+	container.className = getGidsLabelClassNames({ disabled });
+
+	const label = document.createElement('label');
+	if (htmlFor !== undefined) {
+		label.setAttribute('for', htmlFor);
+	}
+	if (labelId !== undefined) {
+		label.id = labelId;
+	}
+	appendAsChildren(label, children);
+
+	const indicatorText = getIndicatorText({
+		fieldRequirement,
+		fieldRequirementOptionalText,
+		fieldRequirementRequiredText,
+	});
+	if (indicatorText !== undefined) {
+		const fieldRequirementSpan = document.createElement('span');
+		fieldRequirementSpan.className = 'gids-label__field-requirement';
+		fieldRequirementSpan.textContent = indicatorText;
+		label.appendChild(fieldRequirementSpan);
+	}
+
+	container.appendChild(label);
+	if (info) {
+		container.append(info);
+	}
+
+	return container;
+};

package/src/components/GidsLabel/GidsLabelInfo/GidsLabelInfo.ts

@@ -0,0 +1,44 @@
+import { type GidsLabelInfoCommonProps } from '@ganpatiinfo/gids-core-shared';
+import { type ClassValue } from '@ganpatiinfo/gids-web-shared';
+import { GidsLabelInfoWebUtils } from '@ganpatiinfo/gids-web-shared';
+import { toggleAttribute } from '../../../utils/domUtils';
+import { GidsLabelInfoCommonUtils } from '@ganpatiinfo/gids-core-shared';
+import { GidsIconDom } from '../../GidsIcon/GidsIcon';
+
+const { getGidsLabelInfoClassNames } = GidsLabelInfoWebUtils;
+const { getLabelInfoAltText } = GidsLabelInfoCommonUtils;
+
+export interface GidsLabelInfoDomProps extends GidsLabelInfoCommonProps {
+	onClick?: (event: MouseEvent) => void;
+	className?: ClassValue;
+}
+
+export const GidsLabelInfoDom = ({
+	disabled,
+	alt,
+	onClick,
+	className,
+}: GidsLabelInfoDomProps): HTMLButtonElement => {
+	const labelInfo = document.createElement('button');
+	labelInfo.className = getGidsLabelInfoClassNames(className);
+	labelInfo.setAttribute('type', 'button');
+
+	if (onClick) {
+		labelInfo.addEventListener('click', onClick);
+	}
+
+	if (disabled) {
+		toggleAttribute(labelInfo, 'disabled', true);
+	}
+
+	const labelSpan = document.createElement('span');
+	labelSpan.className = 'gids-visually-hidden';
+	labelSpan.textContent = getLabelInfoAltText({ alt });
+
+	labelInfo.appendChild(labelSpan);
+	labelInfo.appendChild(
+		GidsIconDom({ name: 'information', size: 'sm', alt: '' }),
+	);
+
+	return labelInfo;
+};

package/src/components/GidsLink/GidsLink.ts

@@ -0,0 +1,37 @@
+import { type GidsLinkCommonProps } from '@ganpatiinfo/gids-core-shared';
+import { appendAsChildren, type DomChildren } from '../../utils/domUtils';
+import {
+	type ClassValue,
+	GidsLinkWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+
+const { getGidsLinkClassNames } = GidsLinkWebUtils;
+
+export interface GidsLinkDomProps extends GidsLinkCommonProps<DomChildren> {
+	extraClasses?: ClassValue;
+	href?: string;
+	onClick?: (this: HTMLInputElement, event: Event) => void;
+}
+
+export const GidsLinkDom = ({
+	children,
+	size,
+	extraClasses,
+	href,
+	onClick,
+}: GidsLinkDomProps): HTMLAnchorElement => {
+	const linkElement = document.createElement('a');
+	linkElement.className = getGidsLinkClassNames({ size }, extraClasses);
+
+	appendAsChildren(linkElement, children);
+
+	if (href) {
+		linkElement.setAttribute('href', href);
+	}
+
+	if (onClick) {
+		linkElement.addEventListener('click', onClick);
+	}
+
+	return linkElement;
+};

package/src/components/GidsRadio/GidsRadio.ts

@@ -0,0 +1,70 @@
+import {
+	type ClassValue,
+	generateId,
+	type GidsRadioWebProps,
+	GidsRadioWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+import { GidsRadioControlDom } from '../_GidsRadioControl/GidsRadioControl';
+import { GidsLabelDom } from '../GidsLabel/GidsLabel';
+import { type DomChildren, type DomNodeOrString } from '../../utils/domUtils';
+
+const { getGidsRadioClassNames } = GidsRadioWebUtils;
+
+export interface GidsRadioDomProps
+	extends GidsRadioWebProps<DomChildren, DomNodeOrString> {
+	onChange?: (this: HTMLInputElement, event: Event) => void;
+	className?: ClassValue;
+}
+
+export const GidsRadioDom = ({
+	// Label props
+	children,
+	fieldRequirement,
+	fieldRequirementOptionalText,
+	fieldRequirementRequiredText,
+	info,
+	labelId,
+
+	// Radio props
+	checked,
+	defaultChecked,
+	disabled,
+	inputId,
+	name,
+	value,
+	onChange,
+
+	// RadioWithLabel props
+	className,
+}: GidsRadioDomProps): HTMLDivElement => {
+	const radioWithLabel = document.createElement('div');
+	radioWithLabel.className = getGidsRadioClassNames(className);
+
+	const realInputId = inputId ?? generateId();
+
+	radioWithLabel.appendChild(
+		GidsRadioControlDom({
+			checked,
+			defaultChecked,
+			disabled,
+			inputId: realInputId,
+			name,
+			value,
+			onChange,
+		}),
+	);
+	radioWithLabel.appendChild(
+		GidsLabelDom({
+			children,
+			disabled,
+			fieldRequirement,
+			fieldRequirementOptionalText,
+			fieldRequirementRequiredText,
+			htmlFor: realInputId,
+			info,
+			labelId,
+		}),
+	);
+
+	return radioWithLabel;
+};

package/src/components/GidsRadioGroup/GidsRadioGroup.ts

@@ -0,0 +1,14 @@
+import { type GidsRadioGroupCommonProps } from '@ganpatiinfo/gids-core-shared';
+import { appendAsChildren, type DomChildren } from '../../utils/domUtils';
+
+export type GidsRadioGroupDomProps = GidsRadioGroupCommonProps<DomChildren>;
+
+export const GidsRadioGroupDom = ({
+	children,
+}: GidsRadioGroupDomProps): HTMLDivElement => {
+	const radioGroup = document.createElement('div');
+	radioGroup.className = 'gids-radio-group';
+	appendAsChildren(radioGroup, children);
+
+	return radioGroup;
+};

package/src/components/GidsSwitch/GidsSwitch.ts

@@ -0,0 +1,70 @@
+import {
+    type ClassValue,
+    generateId,
+    type GidsSwitchWebProps,
+    GidsSwitchWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+import { GidsSwitchControlDom } from '../_GidsSwitchControl/GidsSwitchControl';
+import { GidsLabelDom } from '../GidsLabel/GidsLabel';
+import { type DomChildren, type DomNodeOrString } from '../../utils/domUtils';
+
+const { getGidsSwitchClassNames } = GidsSwitchWebUtils;
+
+export interface GidsSwitchDomProps
+    extends GidsSwitchWebProps<DomChildren, DomNodeOrString> {
+    onChange?: (this: HTMLInputElement, event: Event) => void;
+    className?: ClassValue;
+}
+
+export const GidsSwitchDom = ({
+    // Label props
+    children,
+    fieldRequirement,
+    fieldRequirementOptionalText,
+    fieldRequirementRequiredText,
+    info,
+    labelId,
+
+    // Switch props
+    checked,
+    defaultChecked,
+    disabled,
+    inputId,
+    name,
+    value,
+    onChange,
+
+    // SwitchWithLabel props
+    className,
+}: GidsSwitchDomProps): HTMLDivElement => {
+    const switchElement = document.createElement('div');
+    switchElement.className = getGidsSwitchClassNames(className);
+
+    const realInputId = inputId ?? generateId();
+
+    switchElement.appendChild(
+        GidsSwitchControlDom({
+            checked,
+            defaultChecked,
+            disabled,
+            inputId: realInputId,
+            name,
+            value,
+            onChange,
+        }),
+    );
+    switchElement.appendChild(
+        GidsLabelDom({
+            children,
+            disabled,
+            fieldRequirement,
+            fieldRequirementOptionalText,
+            fieldRequirementRequiredText,
+            htmlFor: realInputId,
+            info,
+            labelId,
+        }),
+    );
+
+    return switchElement;
+};

package/src/components/GidsSwitchGroup/GidsSwitchGroup.ts

@@ -0,0 +1,14 @@
+import { type GidsSwitchGroupCommonProps } from '@ganpatiinfo/gids-core-shared';
+import { appendAsChildren, type DomChildren } from '../../utils/domUtils';
+
+export type GidsSwitchGroupDomProps = GidsSwitchGroupCommonProps<DomChildren>;
+
+export const GidsSwitchGroupDom = ({
+	children,
+}: GidsSwitchGroupDomProps): HTMLDivElement => {
+	const switchGroup = document.createElement('div');
+	switchGroup.className = 'gids-switch-group';
+	appendAsChildren(switchGroup, children);
+
+	return switchGroup;
+};

package/src/components/_GidsCheckboxControl/GidsCheckboxControl.ts

@@ -0,0 +1,80 @@
+import {
+	type ClassValue,
+	type GidsCheckboxControlWebProps,
+	GidsCheckboxControlWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+import { applyStatefulInputProps, toggleAttribute } from '../../utils/domUtils';
+import { GidsIconDom } from '../GidsIcon/GidsIcon';
+
+const { getGidsCheckboxControlClassNames } = GidsCheckboxControlWebUtils;
+
+export interface GidsCheckboxControlDomProps
+	extends GidsCheckboxControlWebProps {
+	onChange?: (this: HTMLInputElement, event: Event) => void;
+	className?: ClassValue;
+}
+
+export const GidsCheckboxControlDom = ({
+	checked,
+	defaultChecked,
+	disabled,
+	inputId,
+	indeterminate,
+	name,
+	value,
+	required,
+	onChange,
+	className,
+}: GidsCheckboxControlDomProps): HTMLSpanElement => {
+	const checkboxControlWrapper = document.createElement('span');
+	checkboxControlWrapper.className =
+		getGidsCheckboxControlClassNames(className);
+
+	const checkboxInput = document.createElement('input');
+	checkboxInput.className = 'gids-checkbox-control__input';
+	checkboxInput.setAttribute('type', 'checkbox');
+
+	toggleAttribute(checkboxInput, 'disabled', disabled ?? false);
+	toggleAttribute(checkboxInput, 'required', required ?? false);
+
+	applyStatefulInputProps(checkboxInput, {
+		checked,
+		defaultChecked,
+		value,
+	});
+
+	checkboxInput.indeterminate = indeterminate ?? false;
+
+	if (inputId) {
+		checkboxInput.setAttribute('id', inputId);
+	}
+	if (name) {
+		checkboxInput.setAttribute('name', name);
+	}
+
+	if (onChange) {
+		checkboxInput.addEventListener('change', onChange);
+	}
+
+	checkboxControlWrapper.appendChild(checkboxInput);
+
+	checkboxControlWrapper.appendChild(
+		GidsIconDom({
+			size: 'sm',
+			name: 'checkmark',
+			alt: '',
+			className: 'gids-checkbox-control__check',
+		}),
+	);
+
+	checkboxControlWrapper.appendChild(
+		GidsIconDom({
+			size: 'sm',
+			name: 'minus',
+			alt: '',
+			className: 'gids-checkbox-control__minus',
+		}),
+	);
+
+	return checkboxControlWrapper;
+};

package/src/components/_GidsRadioControl/GidsRadioControl.ts

@@ -0,0 +1,58 @@
+import {
+	type ClassValue,
+	type GidsRadioControlWebProps,
+	GidsRadioControlWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+import { applyStatefulInputProps, toggleAttribute } from '../../utils/domUtils';
+
+const { getGidsRadioControlClassNames } = GidsRadioControlWebUtils;
+
+export interface GidsRadioControlDomProps extends GidsRadioControlWebProps {
+	onChange?: (this: HTMLInputElement, event: Event) => void;
+	className?: ClassValue;
+}
+
+export const GidsRadioControlDom = ({
+	checked,
+	defaultChecked,
+	disabled,
+	inputId,
+	name,
+	value,
+	onChange,
+	className,
+}: GidsRadioControlDomProps): HTMLSpanElement => {
+	const checkedDot = document.createElement('span');
+	checkedDot.className = 'gids-radio-control__check';
+
+	const radioControlWrapper = document.createElement('span');
+	radioControlWrapper.className = getGidsRadioControlClassNames(className);
+
+	const radioControlInput = document.createElement('input');
+	radioControlInput.className = 'gids-radio-control__input';
+	radioControlInput.setAttribute('type', 'radio');
+
+	toggleAttribute(radioControlInput, 'disabled', disabled ?? false);
+
+	applyStatefulInputProps(radioControlInput, {
+		checked,
+		defaultChecked,
+		value,
+	});
+
+	if (inputId) {
+		radioControlInput.setAttribute('id', inputId);
+	}
+	if (name) {
+		radioControlInput.setAttribute('name', name);
+	}
+
+	if (onChange) {
+		radioControlInput.addEventListener('click', onChange);
+	}
+
+	radioControlWrapper.appendChild(radioControlInput);
+	radioControlWrapper.appendChild(checkedDot);
+
+	return radioControlWrapper;
+};