@uxf/form 11.6.1 → 11.8.0

package/checkbox-input/checkbox-input.js

@@ -32,7 +32,7 @@ function CheckboxInput(props) {
         field.onChange(value);
         (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, value, event);
     };
-    return (react_1.default.createElement(checkbox_input_1.CheckboxInput, { className: props.className, helperText: (_d = (_c = fieldState.error) === null || _c === void 0 ? void 0 : _c.message) !== null && _d !== void 0 ? _d : props.helperText, id: id, isDisabled: props.isDisabled, isInvalid: !!fieldState.error, isReadOnly: props.isReadOnly, isRequired: props.isRequired, label: props.label, name: field.name, onBlur: onBlur, onChange: onChange, onFocus: props.onFocus, ref: field.ref, size: props.size, value: (_e = field.value) !== null && _e !== void 0 ? _e : (!props.nullable ? false : undefined) }));
+    return (react_1.default.createElement(checkbox_input_1.CheckboxInput, { className: props.className, helperText: (_d = (_c = fieldState.error) === null || _c === void 0 ? void 0 : _c.message) !== null && _d !== void 0 ? _d : props.helperText, hiddenLabel: props.hiddenLabel, id: id, isDisabled: props.isDisabled, isInvalid: !!fieldState.error, isReadOnly: props.isReadOnly, isRequired: props.isRequired, label: props.label, name: field.name, onBlur: onBlur, onChange: onChange, onFocus: props.onFocus, ref: field.ref, size: props.size, value: (_e = field.value) !== null && _e !== void 0 ? _e : (!props.nullable ? false : undefined) }));
 }
 exports.CheckboxInput = CheckboxInput;
 CheckboxInput.displayName = "UxfFormCheckboxInput";

package/components.d.ts

@@ -0,0 +1,107 @@
+import * as avatarFileInputStories from "./avatar-file-input/avatar-file-input.stories";
+import * as checkboxButtonStories from "./checkbox-button/checkbox-button.stories";
+import * as checkboxInputStories from "./checkbox-input/checkbox-input.stories";
+import * as colorRadioGroupStories from "./color-radio-group/color-radio-group.stories";
+import * as comboboxStories from "./combobox/combobox.stories";
+import * as datePickerInputStories from "./date-picker-input/date-picker-input.stories";
+import * as dateRangePickerInputStories from "./date-range-picker-input/date-range-picker-input.stories";
+import * as datetimePickerInputStories from "./datetime-picker-input/datetime-picker-input.stories";
+import * as dropzoneStories from "./dropzone/dropzone.stories";
+import * as fileInputStories from "./file-input/file-input.stories";
+import * as formStories from "./form/form.stories";
+import * as gpsInputStories from "./gps-input/gps-input.stories";
+import * as multiComboboxStories from "./multi-combobox/multi-combobox.stories";
+import * as multiSelectStories from "./multi-select/multi-select.stories";
+import * as numberInputStories from "./number-input/number-input.stories";
+import * as radioGroupStories from "./radio-group/radio-group.stories";
+import * as selectStories from "./select/select.stories";
+import * as textInputStories from "./text-input/text-input.stories";
+import * as textareaStories from "./textarea/textarea.stories";
+import * as timePickerInputStories from "./time-picker-input/time-picker-input.stories";
+import * as toggleStories from "./toggle/toggle.stories";
+export declare const components: {
+    readonly "avatar-file-input": {
+        readonly title: "AvatarFileInput";
+        readonly stories: typeof avatarFileInputStories;
+    };
+    readonly "checkbox-button": {
+        readonly title: "CheckboxButton";
+        readonly stories: typeof checkboxButtonStories;
+    };
+    readonly "checkbox-input": {
+        readonly title: "CheckboxInput";
+        readonly stories: typeof checkboxInputStories;
+    };
+    readonly "color-radio-group": {
+        readonly title: "ColorRadioGroup";
+        readonly stories: typeof colorRadioGroupStories;
+    };
+    readonly combobox: {
+        readonly title: "Combobox";
+        readonly stories: typeof comboboxStories;
+    };
+    readonly "date-picker-input": {
+        readonly title: "DatePickerInput";
+        readonly stories: typeof datePickerInputStories;
+    };
+    readonly "date-range-picker-input": {
+        readonly title: "DateRangePickerInput";
+        readonly stories: typeof dateRangePickerInputStories;
+    };
+    readonly "datetime-picker-input": {
+        readonly title: "DatetimePickerInput";
+        readonly stories: typeof datetimePickerInputStories;
+    };
+    readonly dropzone: {
+        readonly title: "Dropzone";
+        readonly stories: typeof dropzoneStories;
+    };
+    readonly "file-input": {
+        readonly title: "FileInput";
+        readonly stories: typeof fileInputStories;
+    };
+    readonly form: {
+        readonly title: "Form";
+        readonly stories: typeof formStories;
+    };
+    readonly "gps-input": {
+        readonly title: "GpsInput";
+        readonly stories: typeof gpsInputStories;
+    };
+    readonly "multi-combobox": {
+        readonly title: "MultiCombobox";
+        readonly stories: typeof multiComboboxStories;
+    };
+    readonly "multi-select": {
+        readonly title: "MultiSelect";
+        readonly stories: typeof multiSelectStories;
+    };
+    readonly "number-input": {
+        readonly title: "NumberInput";
+        readonly stories: typeof numberInputStories;
+    };
+    readonly "radio-group": {
+        readonly title: "RadioGroup";
+        readonly stories: typeof radioGroupStories;
+    };
+    readonly select: {
+        readonly title: "Select";
+        readonly stories: typeof selectStories;
+    };
+    readonly "text-input": {
+        readonly title: "TextInput";
+        readonly stories: typeof textInputStories;
+    };
+    readonly textarea: {
+        readonly title: "Textarea";
+        readonly stories: typeof textareaStories;
+    };
+    readonly "time-picker-input": {
+        readonly title: "TimePickerInput";
+        readonly stories: typeof timePickerInputStories;
+    };
+    readonly toggle: {
+        readonly title: "Toggle";
+        readonly stories: typeof toggleStories;
+    };
+};

package/components.js

@@ -0,0 +1,134 @@
+"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 __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.components = void 0;
+// generated file
+const avatarFileInputStories = __importStar(require("./avatar-file-input/avatar-file-input.stories"));
+const checkboxButtonStories = __importStar(require("./checkbox-button/checkbox-button.stories"));
+const checkboxInputStories = __importStar(require("./checkbox-input/checkbox-input.stories"));
+const colorRadioGroupStories = __importStar(require("./color-radio-group/color-radio-group.stories"));
+const comboboxStories = __importStar(require("./combobox/combobox.stories"));
+const datePickerInputStories = __importStar(require("./date-picker-input/date-picker-input.stories"));
+const dateRangePickerInputStories = __importStar(require("./date-range-picker-input/date-range-picker-input.stories"));
+const datetimePickerInputStories = __importStar(require("./datetime-picker-input/datetime-picker-input.stories"));
+const dropzoneStories = __importStar(require("./dropzone/dropzone.stories"));
+const fileInputStories = __importStar(require("./file-input/file-input.stories"));
+const formStories = __importStar(require("./form/form.stories"));
+const gpsInputStories = __importStar(require("./gps-input/gps-input.stories"));
+const multiComboboxStories = __importStar(require("./multi-combobox/multi-combobox.stories"));
+const multiSelectStories = __importStar(require("./multi-select/multi-select.stories"));
+const numberInputStories = __importStar(require("./number-input/number-input.stories"));
+const radioGroupStories = __importStar(require("./radio-group/radio-group.stories"));
+const selectStories = __importStar(require("./select/select.stories"));
+const textInputStories = __importStar(require("./text-input/text-input.stories"));
+const textareaStories = __importStar(require("./textarea/textarea.stories"));
+const timePickerInputStories = __importStar(require("./time-picker-input/time-picker-input.stories"));
+const toggleStories = __importStar(require("./toggle/toggle.stories"));
+exports.components = {
+    "avatar-file-input": {
+        title: "AvatarFileInput",
+        stories: avatarFileInputStories
+    },
+    "checkbox-button": {
+        title: "CheckboxButton",
+        stories: checkboxButtonStories
+    },
+    "checkbox-input": {
+        title: "CheckboxInput",
+        stories: checkboxInputStories
+    },
+    "color-radio-group": {
+        title: "ColorRadioGroup",
+        stories: colorRadioGroupStories
+    },
+    "combobox": {
+        title: "Combobox",
+        stories: comboboxStories
+    },
+    "date-picker-input": {
+        title: "DatePickerInput",
+        stories: datePickerInputStories
+    },
+    "date-range-picker-input": {
+        title: "DateRangePickerInput",
+        stories: dateRangePickerInputStories
+    },
+    "datetime-picker-input": {
+        title: "DatetimePickerInput",
+        stories: datetimePickerInputStories
+    },
+    "dropzone": {
+        title: "Dropzone",
+        stories: dropzoneStories
+    },
+    "file-input": {
+        title: "FileInput",
+        stories: fileInputStories
+    },
+    "form": {
+        title: "Form",
+        stories: formStories
+    },
+    "gps-input": {
+        title: "GpsInput",
+        stories: gpsInputStories
+    },
+    "multi-combobox": {
+        title: "MultiCombobox",
+        stories: multiComboboxStories
+    },
+    "multi-select": {
+        title: "MultiSelect",
+        stories: multiSelectStories
+    },
+    "number-input": {
+        title: "NumberInput",
+        stories: numberInputStories
+    },
+    "radio-group": {
+        title: "RadioGroup",
+        stories: radioGroupStories
+    },
+    "select": {
+        title: "Select",
+        stories: selectStories
+    },
+    "text-input": {
+        title: "TextInput",
+        stories: textInputStories
+    },
+    "textarea": {
+        title: "Textarea",
+        stories: textareaStories
+    },
+    "time-picker-input": {
+        title: "TimePickerInput",
+        stories: timePickerInputStories
+    },
+    "toggle": {
+        title: "Toggle",
+        stories: toggleStories
+    },
+};

package/date-picker-input/date-picker-input.stories.js

@@ -19,6 +19,9 @@ function Default() {
         react_1.default.createElement(date_picker_input_1.DatePickerInput, { control: control, isClearable: true, isRequired: true, label: "Default date picker with default value", name: "withDefaultValue" }),
         react_1.default.createElement(date_picker_input_1.DatePickerInput, { control: control, isClearable: true, isRequired: true, minDate: "2023-06-10", maxDate: "2023-06-20", label: "Date picker with input validation", name: "withMinMaxValidation", placeholder: "" }),
         react_1.default.createElement(date_picker_input_1.DatePickerInput, { allowedDateFormats: ["MM/DD/YYYY", "M/D/YYYY"], control: control, displayDateFormat: "MM/DD/YYYY", id: "date-custom-format", isClearable: true, label: "Datum s vlastn\u00EDm form\u00E1tem (US)", name: "date" }),
+        react_1.default.createElement(date_picker_input_1.DatePickerInput, { bottomContent: react_1.default.createElement("div", null,
+                "Bottom content",
+                react_1.default.createElement("p", null, "Here can goes anything")), control: control, isClearable: true, isRequired: true, label: "With bottom content", name: "default" }),
         react_1.default.createElement(button_1.Button, { type: "submit" }, "Submit")));
     return (react_1.default.createElement(storybook_form_1.StorybookForm, { defaultValues: {
             withDefaultValue: (0, dayjs_1.default)("2023-10-20T14:32:10.511").format("YYYY-MM-DD"),

package/date-range-picker-input/date-range-picker-input.js

@@ -98,7 +98,7 @@ function DateRangePickerInput(props) {
                 (parsedTo.isValid() ? parsedTo.format(date_range_picker_input_2.DISPLAY_DATE_FORMAT) : fieldTo)
             : field.value
         : null;
-    return (react_1.default.createElement(date_range_picker_input_1.DateRangePickerInput, { autoFocus: props.autoFocus, className: props.className, datesConfig: props.datesConfig, form: props.form, helperText: (_f = (_e = fieldState.error) === null || _e === void 0 ? void 0 : _e.message) !== null && _f !== void 0 ? _f : props.helperText, hiddenLabel: props.hiddenLabel, id: props.id, isClearable: props.isClearable, isDisabled: props.isDisabled, isInvalid: !!fieldState.error, isReadOnly: props.isReadOnly, isRequired: props.isRequired, label: props.label, leftAddon: props.leftAddon, leftElement: props.leftElement, name: field.name, numberOfMonths: props.numberOfMonths, onBlur: onBlur, onChange: onChange, onFocus: props.onFocus, placeholder: props.placeholder, popoverPlacement: props.popoverPlacement, popoverStrategy: props.popoverStrategy, ref: field.ref, rightAddon: props.rightAddon, rightElement: props.rightElement, size: props.size, triggerElement: props.triggerElement, unavailableDates: props.unavailableDates, value: value, variant: props.variant }));
+    return (react_1.default.createElement(date_range_picker_input_1.DateRangePickerInput, { autoFocus: props.autoFocus, bottomContent: props.bottomContent, className: props.className, datesConfig: props.datesConfig, form: props.form, helperText: (_f = (_e = fieldState.error) === null || _e === void 0 ? void 0 : _e.message) !== null && _f !== void 0 ? _f : props.helperText, hiddenLabel: props.hiddenLabel, id: props.id, isClearable: props.isClearable, isDisabled: props.isDisabled, isInvalid: !!fieldState.error, isReadOnly: props.isReadOnly, isRequired: props.isRequired, label: props.label, leftAddon: props.leftAddon, leftElement: props.leftElement, name: field.name, numberOfMonths: props.numberOfMonths, onBlur: onBlur, onChange: onChange, onFocus: props.onFocus, placeholder: props.placeholder, popoverPlacement: props.popoverPlacement, popoverStrategy: props.popoverStrategy, ref: field.ref, rightAddon: props.rightAddon, rightElement: props.rightElement, size: props.size, triggerElement: props.triggerElement, unavailableDates: props.unavailableDates, value: value, variant: props.variant }));
 }
 exports.DateRangePickerInput = DateRangePickerInput;
 DateRangePickerInput.displayName = "UxfFormDateRangePickerInput";

package/date-range-picker-input/date-range-picker-input.stories.js

@@ -16,6 +16,9 @@ function Default() {
     const storyFormDatePickers = (control) => (react_1.default.createElement("div", { className: "space-y-4" },
         react_1.default.createElement(date_range_picker_input_1.DateRangePickerInput, { label: "Default date range picker", name: "default", control: control, isClearable: true, isRequired: true }),
         react_1.default.createElement(date_range_picker_input_1.DateRangePickerInput, { label: "Date range picker with two months", name: "twomonths", numberOfMonths: 2, control: control, isClearable: true, isRequired: true }),
+        react_1.default.createElement(date_range_picker_input_1.DateRangePickerInput, { bottomContent: react_1.default.createElement("div", null,
+                "Bottom content",
+                react_1.default.createElement("p", null, "Here can goes anything")), label: "With bottom content", name: "default", control: control, isClearable: true, isRequired: true }),
         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: "light space-y-2 p-20 lg:w-1/2" }, storyFormDatePickers(control)),

package/datetime-picker-input/datetime-picker-input.js

@@ -84,7 +84,7 @@ function DatetimePickerInput(props) {
         field.onChange(value);
         (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, value, event);
     };
-    return (react_1.default.createElement(datetime_picker_input_1.DatetimePickerInput, { autoFocus: props.autoFocus, className: props.className, form: props.form, helperText: (_g = (_f = fieldState.error) === null || _f === void 0 ? void 0 : _f.message) !== null && _g !== void 0 ? _g : props.helperText, hiddenLabel: props.hiddenLabel, id: id, isClearable: props.isClearable, isDisabled: props.isDisabled, isInvalid: !!fieldState.error, isReadOnly: props.isReadOnly, isRequired: props.isRequired, label: props.label, leftAddon: props.leftAddon, leftElement: props.leftElement, maxDate: props.maxDate, minDate: props.minDate, name: field.name, onBlur: onBlur, onChange: onChange, onFocus: props.onFocus, placeholder: props.placeholder, popoverPlacement: props.popoverPlacement, popoverStrategy: props.popoverStrategy, ref: field.ref, rightAddon: props.rightAddon, rightElement: props.rightElement, size: props.size, triggerElement: props.triggerElement, unavailableDates: props.unavailableDates, value: field.value, variant: props.variant }));
+    return (react_1.default.createElement(datetime_picker_input_1.DatetimePickerInput, { autoFocus: props.autoFocus, bottomContent: props.bottomContent, className: props.className, form: props.form, helperText: (_g = (_f = fieldState.error) === null || _f === void 0 ? void 0 : _f.message) !== null && _g !== void 0 ? _g : props.helperText, hiddenLabel: props.hiddenLabel, id: id, isClearable: props.isClearable, isDisabled: props.isDisabled, isInvalid: !!fieldState.error, isReadOnly: props.isReadOnly, isRequired: props.isRequired, label: props.label, leftAddon: props.leftAddon, leftElement: props.leftElement, maxDate: props.maxDate, minDate: props.minDate, name: field.name, onBlur: onBlur, onChange: onChange, onFocus: props.onFocus, placeholder: props.placeholder, popoverPlacement: props.popoverPlacement, popoverStrategy: props.popoverStrategy, ref: field.ref, rightAddon: props.rightAddon, rightElement: props.rightElement, size: props.size, triggerElement: props.triggerElement, unavailableDates: props.unavailableDates, value: field.value, variant: props.variant }));
 }
 exports.DatetimePickerInput = DatetimePickerInput;
 DatetimePickerInput.displayName = "UxfFormDatePickerInput";

package/datetime-picker-input/datetime-picker-input.stories.js

@@ -18,6 +18,9 @@ function Default() {
         react_1.default.createElement(datetime_picker_input_1.DatetimePickerInput, { control: control, isClearable: true, isRequired: true, label: "Default datetime picker", name: "default" }),
         react_1.default.createElement(datetime_picker_input_1.DatetimePickerInput, { control: control, isClearable: true, isRequired: true, label: "Default datetime picker with default value", name: "withDefaultValue" }),
         react_1.default.createElement(datetime_picker_input_1.DatetimePickerInput, { control: control, isClearable: true, isRequired: true, minDate: "2023-06-10", maxDate: "2023-06-20", label: "Date time picker with input validation", name: "withMinMaxValidation", placeholder: "" }),
+        react_1.default.createElement(datetime_picker_input_1.DatetimePickerInput, { bottomContent: react_1.default.createElement("div", null,
+                "Bottom content",
+                react_1.default.createElement("p", null, "Here can goes anything")), control: control, isClearable: true, isRequired: true, label: "With bottom content", name: "default" }),
         react_1.default.createElement(button_1.Button, { type: "submit" }, "Submit")));
     return (react_1.default.createElement(storybook_form_1.StorybookForm, { defaultValues: {
             withDefaultValue: (0, dayjs_1.default)("2023-10-20T14:32:10.511").toISOString(),

package/dropzone/dropzone-list.d.ts

@@ -4,7 +4,7 @@ import { FormControlProps } from "@uxf/ui/types";
 import React from "react";
 import { FieldValues, UseControllerProps } from "react-hook-form";
 type OnChangeHandler = FormControlProps<DropzoneFile[] | undefined>["onChange"];
-export interface DropzoneListProps<FormData extends FieldValues> extends Pick<UseControllerProps<FormData>, "control" | "name">, Pick<UIDropzoneListProps, "className" | "errorText" | "onAbortWarning" | "onRemoveWarning" | "renderItem"> {
+export interface DropzoneListProps<FormData extends FieldValues> extends Pick<UseControllerProps<FormData>, "control" | "name">, Pick<UIDropzoneListProps, "className" | "errorText" | "onRemoveConfirm" | "renderItem"> {
     onChange?: OnChangeHandler;
 }
 export declare function DropzoneList<FormData extends FieldValues>(props: DropzoneListProps<FormData>): React.JSX.Element;

package/dropzone/dropzone-list.js

@@ -17,7 +17,7 @@ function DropzoneList(props) {
         field.onChange(value);
         (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, value, event);
     };
-    return (react_1.default.createElement(dropzone_1.Dropzone.List, { className: props.className, errorText: props.errorText, onAbortWarning: props.onAbortWarning, onChange: onChange, onRemoveWarning: props.onRemoveWarning, renderItem: props.renderItem, value: field.value }));
+    return (react_1.default.createElement(dropzone_1.Dropzone.List, { className: props.className, errorText: props.errorText, onChange: onChange, onRemoveConfirm: props.onRemoveConfirm, renderItem: props.renderItem, value: field.value }));
 }
 exports.DropzoneList = DropzoneList;
 DropzoneList.displayName = "UxfFormDropzoneList";

package/dropzone/dropzone.stories.js

@@ -5,6 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Default = void 0;
 const button_1 = require("@uxf/ui/button");
+const message_1 = require("@uxf/ui/message");
 const upload_file_mock_1 = require("@uxf/ui/utils/mocks/upload-file.mock");
 const validator_exceptions_1 = require("@uxf/ui/utils/validator/validator-exceptions");
 const react_1 = __importDefault(require("react"));
@@ -31,6 +32,20 @@ const DUMMY_FILES = [
     },
 ];
 function Default() {
+    const onRemoveConfirm = () => {
+        return new Promise((resolve) => {
+            message_1.MessageService.openConfirm({
+                acceptLabel: "Yes, delete",
+                cancelLabel: "Cancel",
+                title: "Do you want to delete the file?",
+                color: "error",
+                variant: "centered",
+                onAccept: () => resolve(true),
+                onCancel: () => resolve(false),
+                CustomIconComponent: null,
+            });
+        });
+    };
     const onUploadError = async (e) => {
         if (e === validator_exceptions_1.ValidatorExceptions.MaxFileSize) {
             // eslint-disable-next-line no-alert
@@ -42,7 +57,7 @@ function Default() {
                 "image/png": [".png"],
             }, control: control, helperText: "Allow multiple files, 1MB max file size, only .png", isRequired: true, label: "Use drag and drop or click to upload", name: "dropzone", onUploadError: onUploadError, onUploadFile: upload_file_mock_1.uploadFile, maxFileSize: 1024 * 1024 }),
         react_1.default.createElement(button_1.Button, { type: "submit" }, "Submit"),
-        react_1.default.createElement(index_1.Dropzone.List, { control: control, errorText: "Oops, n\u011Bco se pokazilo", name: "dropzone", onAbortWarning: "Opravdu chcete zru\u0161it nahr\u00E1v\u00E1n\u00ED?", onRemoveWarning: "Opravdu chcete smazat soubor?" })));
+        react_1.default.createElement(index_1.Dropzone.List, { control: control, errorText: "Oops, n\u011Bco se pokazilo", name: "dropzone", onRemoveConfirm: onRemoveConfirm })));
     return (react_1.default.createElement(storybook_form_1.StorybookForm, { defaultValues: { dropzone: DUMMY_FILES } }, ({ control }) => (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement("div", { className: "flex flex-col lg:flex-row" },
             react_1.default.createElement("div", { className: "light space-y-2 p-20 lg:w-1/2" }, storyFormDropzone(control)),

package/multi-combobox/multi-combobox.stories.js

@@ -14,7 +14,7 @@ exports.default = {
 };
 const options = [
     { id: "one", label: "Option one", color: "red" },
-    { id: "two", label: "Option two", color: "blue", disabled: true },
+    { id: "two", label: "Option two disabled", color: "blue", disabled: true },
     { id: "three", label: "Option three", color: "green" },
     { id: "four", label: "Option four disabled", disabled: true },
     { id: "five", label: "Option five" },
@@ -37,7 +37,7 @@ function Default() {
             ],
             "combobox-with-checkboxes": [
                 { id: "one", label: "Option one" },
-                { id: "two", label: "Option two", disabled: true },
+                { id: "two", label: "Option two disabled", disabled: true },
             ],
             "select-dropdown-async-default": [
                 { id: "one", label: "Option one" },

package/multi-select/multi-select.stories.js

@@ -14,10 +14,10 @@ exports.default = {
 };
 const options = [
     { id: "one", label: "Option one", color: "red" },
-    { id: "two", label: "Option two", color: "blue" },
+    { id: "two", label: "Option two disabled", color: "blue", disabled: true },
     { id: "three", label: "Option three", color: "green" },
     { id: "four", label: "Option four" },
-    { id: "five", label: "Option five disabled", disabled: true },
+    { id: "five", label: "Option five" },
     { id: "six", label: "Option six" },
 ];
 function Default() {
@@ -28,7 +28,7 @@ function Default() {
     return (react_1.default.createElement(storybook_form_1.StorybookForm, { defaultValues: {
             "multi-select": [
                 { id: "one", label: "Option one" },
-                { id: "two", label: "Option two" },
+                { id: "two", label: "Option two disabled", disabled: true },
             ],
             "multi-select-with-popover": [
                 { id: "one", label: "Option one" },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/form",
-  "version": "11.6.1",
+  "version": "11.8.0",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -12,7 +12,7 @@
   "author": "UX Fans s.r.o",
   "license": "MIT",
   "dependencies": {
-    "@uxf/ui": "11.6.1",
+    "@uxf/ui": "11.8.0",
     "coordinate-parser": "1.0.7",
     "dayjs": "1.11.10",
     "react-hook-form": "7.47.0"

package/readmes.d.ts

@@ -0,0 +1,25 @@
+/// <reference types="mdx" />
+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 "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 "gps-input": typeof avatarFileInputReadme;
+    readonly "multi-combobox": typeof avatarFileInputReadme;
+    readonly "multi-select": typeof avatarFileInputReadme;
+    readonly "number-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;
+};

package/readmes.js

@@ -0,0 +1,51 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.readmes = void 0;
+// generated file
+const README_md_1 = __importDefault(require("./avatar-file-input/README.md"));
+const README_md_2 = __importDefault(require("./checkbox-button/README.md"));
+const README_md_3 = __importDefault(require("./checkbox-input/README.md"));
+const README_md_4 = __importDefault(require("./color-radio-group/README.md"));
+const README_md_5 = __importDefault(require("./combobox/README.md"));
+const README_md_6 = __importDefault(require("./date-picker-input/README.md"));
+const README_md_7 = __importDefault(require("./date-range-picker-input/README.md"));
+const README_md_8 = __importDefault(require("./datetime-picker-input/README.md"));
+const README_md_9 = __importDefault(require("./dropzone/README.md"));
+const README_md_10 = __importDefault(require("./file-input/README.md"));
+const README_md_11 = __importDefault(require("./form/README.md"));
+const README_md_12 = __importDefault(require("./gps-input/README.md"));
+const README_md_13 = __importDefault(require("./multi-combobox/README.md"));
+const README_md_14 = __importDefault(require("./multi-select/README.md"));
+const README_md_15 = __importDefault(require("./number-input/README.md"));
+const README_md_16 = __importDefault(require("./radio-group/README.md"));
+const README_md_17 = __importDefault(require("./select/README.md"));
+const README_md_18 = __importDefault(require("./text-input/README.md"));
+const README_md_19 = __importDefault(require("./textarea/README.md"));
+const README_md_20 = __importDefault(require("./time-picker-input/README.md"));
+const README_md_21 = __importDefault(require("./toggle/README.md"));
+exports.readmes = {
+    "avatar-file-input": README_md_1.default,
+    "checkbox-button": README_md_2.default,
+    "checkbox-input": README_md_3.default,
+    "color-radio-group": README_md_4.default,
+    "combobox": README_md_5.default,
+    "date-picker-input": README_md_6.default,
+    "date-range-picker-input": README_md_7.default,
+    "datetime-picker-input": README_md_8.default,
+    "dropzone": README_md_9.default,
+    "file-input": README_md_10.default,
+    "form": README_md_11.default,
+    "gps-input": README_md_12.default,
+    "multi-combobox": README_md_13.default,
+    "multi-select": README_md_14.default,
+    "number-input": README_md_15.default,
+    "radio-group": README_md_16.default,
+    "select": README_md_17.default,
+    "text-input": README_md_18.default,
+    "textarea": README_md_19.default,
+    "time-picker-input": README_md_20.default,
+    "toggle": README_md_21.default,
+};