@uxf/form 11.74.0 → 11.74.1

package/number-input/number-input.js

@@ -0,0 +1,87 @@
+"use strict";
+"use client";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NumberInput = NumberInput;
+const translations_1 = require("@uxf/core-react/translations");
+const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
+const text_input_1 = require("@uxf/ui/text-input");
+const react_1 = __importDefault(require("react"));
+const react_hook_form_1 = require("react-hook-form");
+const form_context_1 = require("../form-id-context/form-context");
+function NumberInput(props) {
+    var _a, _b, _c, _d, _e, _f;
+    const formContext = (0, form_context_1.useFormContext)();
+    const t = (0, translations_1.useUxfTranslation)();
+    const id = (_a = props.id) !== null && _a !== void 0 ? _a : `${formContext.formId}__${props.name}`;
+    const { field, fieldState } = (0, react_hook_form_1.useController)({
+        control: props.control,
+        name: props.name,
+        rules: {
+            required: props.isRequired
+                ? props.requiredMessage || t("uxf-form-number-input:validation.required")
+                : undefined,
+            ...props.rules,
+            validate: {
+                validMinNumber: (value) => {
+                    if (!value) {
+                        return;
+                    }
+                    if (typeof props.min === "number" && !isNaN(props.min) && value < props.min) {
+                        return (props.minMessage ||
+                            t("uxf-form-number-input:validation.min-value", { min: props.min, value: value }));
+                    }
+                },
+                validMaxNumber: (value) => {
+                    if (!value) {
+                        return;
+                    }
+                    if (typeof props.max === "number" && !isNaN(props.max) && value > props.max) {
+                        return (props.maxMessage ||
+                            t("uxf-form-number-input:validation.max-value", { max: props.max, value: value }));
+                    }
+                },
+                ...(typeof ((_b = props.rules) === null || _b === void 0 ? void 0 : _b.validate) === "function"
+                    ? { custom: props.rules.validate }
+                    : (_c = props.rules) === null || _c === void 0 ? void 0 : _c.validate),
+            },
+        },
+        shouldUnregister: props.shouldUnregister,
+    });
+    const onBlur = (event) => {
+        var _a;
+        field.onBlur();
+        (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, event);
+    };
+    const onKeyDown = (event) => {
+        var _a;
+        // Allow special keys
+        const specialKeys = ["Backspace", "Delete", "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Tab"];
+        // Allow keys for copy/paste/select/cut
+        const controlKeys = ["v", "V", "c", "C", "x", "X", "a", "A"];
+        // Allow digits and decimal point (.,)
+        const allowedDigits = /[0-9+\-.,]/;
+        const key = event.key;
+        // Check if the key is allowed
+        if (!specialKeys.includes(key) && !allowedDigits.test(key)) {
+            // Check if Ctrl or Command key is pressed along with control key
+            if (!(event.ctrlKey || event.metaKey) || !controlKeys.includes(key)) {
+                event.preventDefault();
+            }
+        }
+        (_a = props.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(props, event);
+    };
+    const onChange = (value, event) => {
+        var _a;
+        const parsedValue = props.decimalPlaces
+            ? parseFloat(value.replace(" ", ""))
+            : parseInt(value.replace(" ", ""), 10);
+        const returnValue = isNaN(parsedValue) ? null : parsedValue;
+        field.onChange(returnValue);
+        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, returnValue, event);
+    };
+    return (react_1.default.createElement(text_input_1.TextInput, { autoComplete: props.autoComplete, autoFocus: props.autoFocus, className: props.className, enterKeyHint: props.enterKeyHint, form: props.form, helperText: (_e = (_d = fieldState.error) === null || _d === void 0 ? void 0 : _d.message) !== null && _e !== void 0 ? _e : props.helperText, hiddenLabel: props.hiddenLabel, id: id, inputMode: props.decimalPlaces ? "decimal" : "numeric", isDisabled: formContext.isFormDisabled || props.isDisabled, isInvalid: (0, is_not_nil_1.isNotNil)(fieldState.error), isReadOnly: formContext.isFormReadOnly || props.isReadOnly, isRequired: props.isRequired, label: props.label, leftAddon: props.leftAddon, leftElement: props.leftElement, max: props.max, min: props.min, name: field.name, onBlur: onBlur, onChange: onChange, onFocus: props.onFocus, onKeyDown: onKeyDown, pattern: props.pattern, placeholder: props.placeholder, ref: field.ref, rightAddon: props.rightAddon, rightElement: props.rightElement, size: props.size, step: props.decimalPlaces ? Number(0).toFixed(props.decimalPlaces - 1) + "1" : props.step, style: props.style, type: "number", value: (_f = field.value) !== null && _f !== void 0 ? _f : "", variant: props.variant }));
+}
+NumberInput.displayName = "UxfFormNumberInput";

package/number-input/number-input.stories.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { NumberInput } from "./number-input";
+declare const _default: {
+    title: string;
+    component: typeof NumberInput;
+};
+export default _default;
+export declare function Default(): React.JSX.Element;

package/number-input/number-input.stories.js

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = Default;
+const button_1 = require("@uxf/ui/button");
+const react_1 = __importDefault(require("react"));
+const storybook_form_1 = require("../storybook/storybook-form");
+const number_input_1 = require("./number-input");
+exports.default = {
+    title: "Form/NumberInput",
+    component: number_input_1.NumberInput,
+};
+function Default() {
+    const storyFormNumberInputs = (control) => (react_1.default.createElement("div", { className: "light mb-4 space-y-4 p-4" },
+        react_1.default.createElement(number_input_1.NumberInput, { control: control, label: "Default input", name: "default" }),
+        react_1.default.createElement(number_input_1.NumberInput, { control: control, isRequired: true, label: "Required input", name: "required" }),
+        react_1.default.createElement(number_input_1.NumberInput, { control: control, decimalPlaces: 3, label: "Dec\u00EDmal input", name: "decimal" }),
+        react_1.default.createElement(number_input_1.NumberInput, { control: control, label: "max50 input", max: 50, name: "max50" }),
+        react_1.default.createElement(button_1.Button, { type: "submit" }, "Submit")));
+    return (react_1.default.createElement(storybook_form_1.StorybookForm, null, ({ control }) => (react_1.default.createElement("div", { className: "flex flex-col lg:flex-row" },
+        react_1.default.createElement("div", { className: "space-y-2 p-20 lg:w-1/2" }, storyFormNumberInputs(control))))));
+}

package/number-input/translations.d.ts

@@ -0,0 +1,25 @@
+declare const _default: {
+    "uxf-form-number-input": {
+        validation: {
+            required: {
+                cs: string;
+                en: string;
+                sk: string;
+                de: string;
+            };
+            "max-value": {
+                cs: string;
+                en: string;
+                sk: string;
+                de: string;
+            };
+            "min-value": {
+                cs: string;
+                en: string;
+                sk: string;
+                de: string;
+            };
+        };
+    };
+};
+export default _default;

package/number-input/translations.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    "uxf-form-number-input": {
+        validation: {
+            required: {
+                cs: "Toto pole je povinné",
+                en: "This field is required",
+                sk: "Toto pole je povinné",
+                de: "Dieses Feld ist erforderlich",
+            },
+            "max-value": {
+                cs: "Hodnota musí být menší nebo rovna {{max}}.",
+                en: "Value must be less than or equal to {{max}}.",
+                sk: "Hodnota musí byť menšia alebo rovná ako {{max}}.",
+                de: "Wert muss kleiner oder gleich {{max}} sein.",
+            },
+            "min-value": {
+                cs: "Hodnota musí být větší nebo rovna {{min}}.",
+                en: "Value must be greater than or equal to {{min}}.",
+                sk: "Hodnota musí byť väčšia alebo rovná ako {{min}}.",
+                de: "Wert muss größer oder gleich {{min}} sein.",
+            },
+        },
+    },
+};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@uxf/form",
-    "version": "11.74.0",
+    "version": "11.74.1",
     "description": "",
     "publishConfig": {
         "access": "public"
@@ -17,8 +17,8 @@
     "license": "MIT",
     "dependencies": {
         "@uxf/core": "11.72.3",
-        "@uxf/core-react": "11.74.0",
-        "@uxf/ui": "11.74.0",
+        "@uxf/core-react": "11.74.1",
+        "@uxf/ui": "11.74.1",
         "coordinate-parser": "1.0.7",
         "dayjs": "1.11.13",
         "react-hook-form": "7.53.0"

package/password-input/index.d.ts

@@ -0,0 +1 @@
+export * from "./password-input";

package/password-input/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./password-input"), exports);

package/password-input/password-input.d.ts

@@ -0,0 +1,15 @@
+import { TextInputProps as UITextInputProps } from "@uxf/ui/text-input";
+import { FormControlProps } from "@uxf/ui/types";
+import React, { ReactNode } from "react";
+import { FieldValues } from "react-hook-form";
+import { ControlProps } from "../types";
+export type PasswordInputProps<FormData extends FieldValues> = ControlProps<FormData> & Omit<UITextInputProps, "isFocused" | "isInvalid" | "max" | "min" | "name" | "onChange" | "value" | "type"> & {
+    minLengthMessage?: string;
+    onChange?: FormControlProps<string | null>["onChange"];
+    renderVisibilitySetter?: (isVisible: boolean, onToggle: () => void) => ReactNode;
+    requiredMessage?: string;
+};
+export declare function PasswordInput<FormData extends FieldValues>(props: PasswordInputProps<FormData>): React.JSX.Element;
+export declare namespace PasswordInput {
+    var displayName: string;
+}

package/password-input/password-input.js

@@ -0,0 +1,108 @@
+"use strict";
+"use client";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PasswordInput = PasswordInput;
+const use_on_unmount_1 = require("@uxf/core-react/hooks/use-on-unmount");
+const translations_1 = require("@uxf/core-react/translations");
+const compose_refs_1 = require("@uxf/core-react/utils/compose-refs");
+const is_nil_1 = require("@uxf/core/utils/is-nil");
+const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
+const button_1 = require("@uxf/ui/button");
+const icon_1 = require("@uxf/ui/icon");
+const text_input_1 = require("@uxf/ui/text-input");
+const react_1 = __importStar(require("react"));
+const react_hook_form_1 = require("react-hook-form");
+const form_context_1 = require("../form-id-context/form-context");
+function usePasswordVisibility() {
+    const inputRef = (0, react_1.useRef)(null);
+    const [isVisible, setIsVisible] = (0, react_1.useState)(false);
+    const timer = (0, react_1.useRef)();
+    const visibilityChangeHandler = () => {
+        if ((0, is_nil_1.isNil)(inputRef.current)) {
+            return;
+        }
+        setIsVisible((prev) => !prev);
+        timer.current = window.setTimeout(() => {
+            if ((0, is_nil_1.isNil)(inputRef.current)) {
+                return;
+            }
+            const newCursorPosition = inputRef.current.value.length;
+            inputRef.current.selectionStart = newCursorPosition;
+            inputRef.current.selectionEnd = newCursorPosition;
+        }, 0);
+    };
+    (0, use_on_unmount_1.useOnUnmount)(() => clearTimeout(timer.current));
+    return { isVisible, inputRef, onToggle: visibilityChangeHandler };
+}
+function PasswordInput(props) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const formContext = (0, form_context_1.useFormContext)();
+    const t = (0, translations_1.useUxfTranslation)();
+    const id = (_a = props.id) !== null && _a !== void 0 ? _a : `${formContext.formId}__${props.name}`;
+    const { field, fieldState } = (0, react_hook_form_1.useController)({
+        control: props.control,
+        name: props.name,
+        shouldUnregister: props.shouldUnregister,
+        rules: {
+            required: props.isRequired
+                ? props.requiredMessage || t("uxf-form-password-input:validation.required")
+                : undefined,
+            ...props.rules,
+            validate: {
+                minLength: (value) => {
+                    if (!value) {
+                        return;
+                    }
+                    if (typeof props.minLength === "number" &&
+                        !isNaN(props.minLength) &&
+                        value.length < props.minLength) {
+                        return (props.minLengthMessage ||
+                            t("uxf-form-password-input:validation.min-length", {
+                                minLength: props.minLength,
+                                value: value,
+                            }));
+                    }
+                },
+            },
+            ...(typeof ((_b = props.rules) === null || _b === void 0 ? void 0 : _b.validate) === "function" ? { custom: props.rules.validate } : (_c = props.rules) === null || _c === void 0 ? void 0 : _c.validate),
+        },
+    });
+    const passwordVisibility = usePasswordVisibility();
+    const inputRef = (0, compose_refs_1.composeRefs)(field.ref, passwordVisibility.inputRef);
+    const onBlur = (event) => {
+        var _a;
+        field.onBlur();
+        (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, event);
+    };
+    const onChange = (value, event) => {
+        var _a;
+        field.onChange(value);
+        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, value, event);
+    };
+    return (react_1.default.createElement(text_input_1.TextInput, { autoComplete: props.autoComplete, autoFocus: props.autoFocus, className: props.className, enterKeyHint: props.enterKeyHint, form: props.form, helperText: (_e = (_d = fieldState.error) === null || _d === void 0 ? void 0 : _d.message) !== null && _e !== void 0 ? _e : props.helperText, hiddenLabel: props.hiddenLabel, id: id, inputMode: props.inputMode, isDisabled: formContext.isFormDisabled || props.isDisabled, isInvalid: (0, is_not_nil_1.isNotNil)(fieldState.error), isReadOnly: formContext.isFormReadOnly || props.isReadOnly, isRequired: props.isRequired, label: props.label, leftAddon: props.leftAddon, leftElement: props.leftElement, maxLength: props.maxLength, minLength: props.minLength, name: field.name, onBlur: onBlur, onChange: onChange, onFocus: props.onFocus, onKeyDown: props.onKeyDown, pattern: props.pattern, placeholder: props.placeholder, ref: inputRef, rightAddon: props.rightAddon, rightElement: (_g = (_f = props.renderVisibilitySetter) === null || _f === void 0 ? void 0 : _f.call(props, passwordVisibility.isVisible, passwordVisibility.onToggle)) !== null && _g !== void 0 ? _g : (react_1.default.createElement(button_1.Button, { onClick: passwordVisibility.onToggle, size: "sm", variant: "text" },
+            react_1.default.createElement(icon_1.Icon, { name: passwordVisibility.isVisible ? "eye-slash" : "eye", size: 20 }))), size: props.size, style: props.style, type: passwordVisibility.isVisible ? "text" : "password", value: (_h = field.value) !== null && _h !== void 0 ? _h : "", variant: props.variant }));
+}
+PasswordInput.displayName = "UxfFormPasswordInput";

package/password-input/password-input.stories.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { PasswordInput } from "./password-input";
+declare const _default: {
+    title: string;
+    component: typeof PasswordInput;
+};
+export default _default;
+export declare function Default(): React.JSX.Element;

package/password-input/password-input.stories.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = Default;
+const button_1 = require("@uxf/ui/button");
+const react_1 = __importDefault(require("react"));
+const storybook_form_1 = require("../storybook/storybook-form");
+const password_input_1 = require("./password-input");
+exports.default = {
+    title: "Form/PasswordInput",
+    component: password_input_1.PasswordInput,
+};
+function Default() {
+    const storyFormPasswordInputs = (control) => (react_1.default.createElement("div", { className: "mb-4 space-y-4 p-4" },
+        react_1.default.createElement(password_input_1.PasswordInput, { control: control, label: "Default input", name: "default" }),
+        react_1.default.createElement(password_input_1.PasswordInput, { control: control, isRequired: true, label: "Min length 8", minLength: 12, name: "minLength" }),
+        react_1.default.createElement(password_input_1.PasswordInput, { control: control, isRequired: true, label: "Required input", name: "required" }),
+        react_1.default.createElement(button_1.Button, { type: "submit" }, "Submit")));
+    return (react_1.default.createElement(storybook_form_1.StorybookForm, null, ({ control }) => (react_1.default.createElement("div", { className: "flex flex-col lg:flex-row" },
+        react_1.default.createElement("div", { className: "space-y-2 p-20 lg:w-1/2" }, storyFormPasswordInputs(control))))));
+}

package/password-input/translations.d.ts

@@ -0,0 +1,19 @@
+declare const _default: {
+    "uxf-form-password-input": {
+        validation: {
+            required: {
+                cs: string;
+                en: string;
+                sk: string;
+                de: string;
+            };
+            "min-length": {
+                cs: string;
+                en: string;
+                sk: string;
+                de: string;
+            };
+        };
+    };
+};
+export default _default;

package/password-input/translations.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    "uxf-form-password-input": {
+        validation: {
+            required: {
+                cs: "Toto pole je povinné",
+                en: "This field is required",
+                sk: "Toto pole je povinné",
+                de: "Dieses Feld ist erforderlich",
+            },
+            "min-length": {
+                cs: "Heslo musí být nejméně {{minLength}} znaků dlouhé.",
+                en: "Password must be at least {{minLength}} characters long.",
+                sk: "Heslo musí mať aspoň {{minLength}} znakov.",
+                de: "Passwort muss mindestens {{minLength}} Zeichen lang sein.",
+            },
+        },
+    },
+};

package/radio-group/index.d.ts

@@ -0,0 +1 @@
+export * from "./radio-group";

package/radio-group/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./radio-group"), exports);

package/radio-group/radio-group.d.ts

@@ -0,0 +1,13 @@
+import { RadioGroupOptionValueId, RadioGroupProps as UIRadioGroupProps } from "@uxf/ui/radio-group";
+import React from "react";
+import { FieldValues } from "react-hook-form";
+import { ControlProps } from "../types";
+export type RadioGroupProps<FormData extends FieldValues> = ControlProps<FormData> & Omit<UIRadioGroupProps, "isFocused" | "isInvalid" | "name" | "onChange" | "value"> & {
+    onChange?: UIRadioGroupProps["onChange"];
+    requiredMessage?: string;
+};
+export type RadioGroupValue<T extends RadioGroupOptionValueId> = T | null;
+export declare function RadioGroup<FormData extends Record<string, any>>(props: RadioGroupProps<FormData>): React.JSX.Element;
+export declare namespace RadioGroup {
+    var displayName: string;
+}

package/radio-group/radio-group.js

@@ -0,0 +1,42 @@
+"use strict";
+"use client";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RadioGroup = RadioGroup;
+const translations_1 = require("@uxf/core-react/translations");
+const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
+const radio_group_1 = require("@uxf/ui/radio-group");
+const react_1 = __importDefault(require("react"));
+const react_hook_form_1 = require("react-hook-form");
+const form_context_1 = require("../form-id-context/form-context");
+function RadioGroup(props) {
+    var _a, _b, _c, _d;
+    const formContext = (0, form_context_1.useFormContext)();
+    const t = (0, translations_1.useUxfTranslation)();
+    const id = (_a = props.id) !== null && _a !== void 0 ? _a : `${formContext.formId}__${props.name}`;
+    const { field, fieldState } = (0, react_hook_form_1.useController)({
+        control: props.control,
+        name: props.name,
+        rules: {
+            required: props.isRequired
+                ? props.requiredMessage || t("uxf-form-radio-group:validation.required")
+                : undefined,
+            ...props.rules,
+        },
+        shouldUnregister: props.shouldUnregister,
+    });
+    const onBlur = (event) => {
+        var _a;
+        field.onBlur();
+        (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, event);
+    };
+    const onChange = (value, event) => {
+        var _a;
+        field.onChange(value);
+        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, value, event);
+    };
+    return (react_1.default.createElement(radio_group_1.RadioGroup, { className: props.className, forceColumn: props.forceColumn, helperText: (_c = (_b = fieldState.error) === null || _b === void 0 ? void 0 : _b.message) !== null && _c !== void 0 ? _c : props.helperText, hiddenLabel: props.hiddenLabel, id: id, isDisabled: props.options.length === 0 || formContext.isFormDisabled || props.isDisabled, isInvalid: (0, is_not_nil_1.isNotNil)(fieldState.error), isReadOnly: formContext.isFormReadOnly || props.isReadOnly, isRequired: props.isRequired, label: props.label, name: field.name, onBlur: onBlur, onChange: onChange, onFocus: props.onFocus, options: props.options, radioSize: props.radioSize, ref: field.ref, style: props.style, value: (_d = field.value) !== null && _d !== void 0 ? _d : null, variant: props.variant }));
+}
+RadioGroup.displayName = "UxfFormRadioGroup";

package/radio-group/radio-group.stories.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { RadioGroup } from "./index";
+declare const _default: {
+    title: string;
+    component: typeof RadioGroup;
+};
+export default _default;
+export declare function Default(): React.JSX.Element;

package/radio-group/radio-group.stories.js

@@ -0,0 +1,38 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = Default;
+const button_1 = require("@uxf/ui/button");
+const react_1 = __importDefault(require("react"));
+const storybook_form_1 = require("../storybook/storybook-form");
+const index_1 = require("./index");
+exports.default = {
+    title: "Form/RadioGroup",
+    component: index_1.RadioGroup,
+};
+const options = [
+    {
+        id: "1",
+        label: "Radio one",
+    },
+    {
+        id: "2",
+        label: "Radio two",
+    },
+    {
+        id: "3",
+        label: "Radio three-sixty",
+    },
+];
+function Default() {
+    const storyFormRadioGroup = (control) => (react_1.default.createElement("div", { className: "space-y-4" },
+        react_1.default.createElement(index_1.RadioGroup, { control: control, id: "radio-group", label: "Radio group form", name: "radio-group", options: options }),
+        react_1.default.createElement(index_1.RadioGroup, { control: control, id: "radio-group", isDisabled: true, label: "Radio group form disabled", name: "radio-group-disabled", options: options }),
+        react_1.default.createElement(index_1.RadioGroup, { control: control, helperText: "Choose one option", id: "radio-group", label: "Radio group form with helper text", name: "radio-group-helper-text", options: options }),
+        react_1.default.createElement(index_1.RadioGroup, { control: control, id: "radio-group", label: "Radio group form with variant button", name: "radio-group-button", options: options, variant: "radioButton" }),
+        react_1.default.createElement(button_1.Button, { type: "submit" }, "Submit")));
+    return (react_1.default.createElement(storybook_form_1.StorybookForm, null, ({ control }) => (react_1.default.createElement("div", { className: "flex flex-col lg:flex-row" },
+        react_1.default.createElement("div", { className: "space-y-2 p-20 lg:w-1/2" }, storyFormRadioGroup(control))))));
+}

package/radio-group/translations.d.ts

@@ -0,0 +1,13 @@
+declare const _default: {
+    "uxf-form-radio-group": {
+        validation: {
+            required: {
+                cs: string;
+                en: string;
+                sk: string;
+                de: string;
+            };
+        };
+    };
+};
+export default _default;

package/radio-group/translations.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    "uxf-form-radio-group": {
+        validation: {
+            required: {
+                cs: "Toto pole je povinné",
+                en: "This field is required",
+                sk: "Toto pole je povinné",
+                de: "Dieses Feld ist erforderlich",
+            },
+        },
+    },
+};

package/readmes.d.ts

@@ -0,0 +1,28 @@
+import avatarFileInputReadme from "./avatar-file-input/README.md";
+export declare const readmes: {
+    readonly "avatar-file-input": typeof avatarFileInputReadme;
+    readonly "checkbox-button": typeof avatarFileInputReadme;
+    readonly "checkbox-input": typeof avatarFileInputReadme;
+    readonly "checkbox-list": typeof avatarFileInputReadme;
+    readonly "color-radio-group": typeof avatarFileInputReadme;
+    readonly combobox: typeof avatarFileInputReadme;
+    readonly "date-picker-input": typeof avatarFileInputReadme;
+    readonly "date-range-picker-input": typeof avatarFileInputReadme;
+    readonly "datetime-picker-input": typeof avatarFileInputReadme;
+    readonly dropzone: typeof avatarFileInputReadme;
+    readonly "file-input": typeof avatarFileInputReadme;
+    readonly form: typeof avatarFileInputReadme;
+    readonly "form-renderer": typeof avatarFileInputReadme;
+    readonly "gps-input": typeof avatarFileInputReadme;
+    readonly "money-input": typeof avatarFileInputReadme;
+    readonly "multi-combobox": typeof avatarFileInputReadme;
+    readonly "multi-select": typeof avatarFileInputReadme;
+    readonly "number-input": typeof avatarFileInputReadme;
+    readonly "password-input": typeof avatarFileInputReadme;
+    readonly "radio-group": typeof avatarFileInputReadme;
+    readonly select: typeof avatarFileInputReadme;
+    readonly "text-input": typeof avatarFileInputReadme;
+    readonly textarea: typeof avatarFileInputReadme;
+    readonly "time-picker-input": typeof avatarFileInputReadme;
+    readonly toggle: typeof avatarFileInputReadme;
+};