@uxf/form 11.9.0 → 11.11.0

package/avatar-file-input/avatar-file-input.stories.js

@@ -19,7 +19,6 @@ function Default() {
         react_1.default.createElement(avatar_file_input_1.AvatarFileInput, { control: control, id: `required-${mode}`, isRequired: true, label: "Required file input", name: `required-${mode}`, onUploadFile: upload_file_mock_1.uploadFile }),
         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" }, storyFormAvatarFileInputs(control, "light")),
-        react_1.default.createElement("div", { className: "dark space-y-2 bg-gray-900 p-20 lg:w-1/2" }, storyFormAvatarFileInputs(control, "dark"))))));
+        react_1.default.createElement("div", { className: "space-y-2 p-20 lg:w-1/2" }, storyFormAvatarFileInputs(control, "light"))))));
 }
 exports.Default = Default;

package/checkbox-button/checkbox-button.stories.js

@@ -20,7 +20,6 @@ function Default() {
         react_1.default.createElement(checkbox_button_1.CheckboxButton, { label: "CheckboxButton form readOnly", name: "checkbox-button-read-only", control: control, isReadOnly: 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" }, storyFormCheckboxes(control)),
-        react_1.default.createElement("div", { className: "dark space-y-2 bg-gray-900 p-20 lg:w-1/2" }, storyFormCheckboxes(control))))));
+        react_1.default.createElement("div", { className: "space-y-2 p-20 lg:w-1/2" }, storyFormCheckboxes(control))))));
 }
 exports.Default = Default;

package/checkbox-input/checkbox-input.stories.js

@@ -20,7 +20,6 @@ function Default() {
         react_1.default.createElement(checkbox_input_1.CheckboxInput, { label: "CheckboxInput form readOnly", name: "checkbox-readonly", control: control, isReadOnly: 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" }, storyFormCheckboxes(control)),
-        react_1.default.createElement("div", { className: "dark space-y-2 bg-gray-900 p-20 lg:w-1/2" }, storyFormCheckboxes(control))))));
+        react_1.default.createElement("div", { className: "space-y-2 p-20 lg:w-1/2" }, storyFormCheckboxes(control))))));
 }
 exports.Default = Default;

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

@@ -58,7 +58,6 @@ function Default() {
         react_1.default.createElement(index_1.ColorRadioGroup, { control: control, id: "color-radio-group", label: "Color radio group form with variant button", name: "color-radio-group-button", options: options }),
         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" }, storyFormColorRadioGroup(control)),
-        react_1.default.createElement("div", { className: "dark space-y-2 bg-gray-900 p-20 lg:w-1/2" }, storyFormColorRadioGroup(control))))));
+        react_1.default.createElement("div", { className: "space-y-2 p-20 lg:w-1/2" }, storyFormColorRadioGroup(control))))));
 }
 exports.Default = Default;

package/combobox/combobox.stories.js

@@ -26,7 +26,6 @@ function Default() {
         react_1.default.createElement(combobox_1.Combobox, { label: "Combobox async", dropdownPlacement: "top", name: "select-dropdown-async", control: control, placeholder: "Placeholder", loadOptions: (query) => Promise.resolve(options.filter((option) => !query || option.label.toLowerCase().includes(query.toLowerCase()))), id: "form-combobox", isClearable: true }),
         react_1.default.createElement(button_1.Button, { type: "submit" }, "Submit")));
     return (react_1.default.createElement(storybook_form_1.StorybookForm, { defaultValues: { "select-dropdown-async": { id: "one", label: "Option one" } } }, ({ 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" }, storyFormComboboxes(control)),
-        react_1.default.createElement("div", { className: "dark space-y-2 bg-gray-900 p-20 lg:w-1/2" }, storyFormComboboxes(control))))));
+        react_1.default.createElement("div", { className: "space-y-2 p-20 lg:w-1/2" }, storyFormComboboxes(control))))));
 }
 exports.Default = Default;

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

@@ -26,7 +26,6 @@ function Default() {
     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"),
         } }, ({ 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)),
-        react_1.default.createElement("div", { className: "dark space-y-2 bg-gray-900 p-20 text-white lg:w-1/2" }, storyFormDatePickers(control))))));
+        react_1.default.createElement("div", { className: "light space-y-2 p-20 lg:w-1/2" }, storyFormDatePickers(control))))));
 }
 exports.Default = Default;

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

@@ -21,7 +21,6 @@ function Default() {
                 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)),
-        react_1.default.createElement("div", { className: "dark space-y-2 bg-gray-900 p-20 text-white lg:w-1/2" }, storyFormDatePickers(control))))));
+        react_1.default.createElement("div", { className: "space-y-2 p-20 lg:w-1/2" }, storyFormDatePickers(control))))));
 }
 exports.Default = Default;

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

@@ -25,7 +25,6 @@ function Default() {
     return (react_1.default.createElement(storybook_form_1.StorybookForm, { defaultValues: {
             withDefaultValue: (0, dayjs_1.default)("2023-10-20T14:32:10.511").toISOString(),
         } }, ({ 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)),
-        react_1.default.createElement("div", { className: "dark space-y-2 bg-gray-900 p-20 text-white lg:w-1/2" }, storyFormDatePickers(control))))));
+        react_1.default.createElement("div", { className: "space-y-2 p-20 lg:w-1/2" }, storyFormDatePickers(control))))));
 }
 exports.Default = Default;

package/dropzone/dropzone.stories.js

@@ -60,7 +60,6 @@ function Default() {
         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)),
-            react_1.default.createElement("div", { className: "dark space-y-2 bg-gray-900 p-20 lg:w-1/2" }, storyFormDropzone(control)))))));
+            react_1.default.createElement("div", { className: "space-y-2 p-20 lg:w-1/2" }, storyFormDropzone(control)))))));
 }
 exports.Default = Default;

package/file-input/file-input.stories.js

@@ -26,7 +26,6 @@ function Default() {
         react_1.default.createElement(file_input_1.FileInput, { control: control, label: "Custom button label", name: `default-${mode}`, onUploadFile: upload_file_mock_1.uploadFile, isClearable: true, placeholder: "Nahrajte soubor", uploadButtonLabel: "Nahrajte dokument" }),
         react_1.default.createElement(button_1.Button, { type: "submit" }, "Submit")));
     return (react_1.default.createElement(storybook_form_1.StorybookForm, { defaultValues: { "default-light": DUMMY_FILE } }, ({ 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" }, storyFormFileInputs(control, "light")),
-        react_1.default.createElement("div", { className: "dark space-y-2 bg-gray-900 p-20 lg:w-1/2" }, storyFormFileInputs(control, "dark"))))));
+        react_1.default.createElement("div", { className: "space-y-2 p-20 lg:w-1/2" }, storyFormFileInputs(control, "light"))))));
 }
 exports.Default = Default;

package/form/form.stories.js

@@ -19,10 +19,7 @@ function Default() {
     // eslint-disable-next-line no-console
     react_1.default.createElement(form_1.Form, { formApi: formApi, id: "form", onSubmit: console.log },
         react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement("div", { className: "light mb-4 space-y-4 p-4" },
-                react_1.default.createElement(text_input_1.TextInput, { label: "Default input", name: "default", control: formApi.control, isRequired: true }),
-                react_1.default.createElement(button_1.Button, { type: "submit" }, "Submit")),
-            react_1.default.createElement("div", { className: "dark space-y-4 bg-gray-900 p-4" },
+            react_1.default.createElement("div", { className: "mb-4 space-y-4 p-4" },
                 react_1.default.createElement(text_input_1.TextInput, { label: "Default input", name: "default", control: formApi.control, isRequired: true }),
                 react_1.default.createElement(button_1.Button, { type: "submit" }, "Submit")))));
 }

package/gps-input/gps-input.stories.js

@@ -18,7 +18,6 @@ function Default() {
         react_1.default.createElement(gps_input_1.GpsInput, { placeholder: "Zadejte sou\u0159adnice...", label: "GPS", name: "gps-required", control: control, 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" }, storyFormGpsInputs(control)),
-        react_1.default.createElement("div", { className: "dark space-y-2 bg-gray-900 p-20 lg:w-1/2" }, storyFormGpsInputs(control))))));
+        react_1.default.createElement("div", { className: "space-y-2 p-20 lg:w-1/2" }, storyFormGpsInputs(control))))));
 }
 exports.Default = Default;

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

@@ -44,7 +44,6 @@ function Default() {
                 { id: "two", label: "Option two" },
             ],
         } }, ({ 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" }, storyFormComboboxes(control)),
-        react_1.default.createElement("div", { className: "dark space-y-2 bg-gray-900 p-20 lg:w-1/2" }, storyFormComboboxes(control))))));
+        react_1.default.createElement("div", { className: "space-y-2 p-20 lg:w-1/2" }, storyFormComboboxes(control))))));
 }
 exports.Default = Default;

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

@@ -35,7 +35,6 @@ function Default() {
                 { id: "two", label: "Option two" },
             ],
         } }, ({ 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" }, storyFormMultiSelect(control)),
-        react_1.default.createElement("div", { className: "dark space-y-2 bg-gray-900 p-20 lg:w-1/2" }, storyFormMultiSelect(control))))));
+        react_1.default.createElement("div", { className: "space-y-2 p-20 lg:w-1/2" }, storyFormMultiSelect(control))))));
 }
 exports.Default = Default;

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

@@ -20,7 +20,6 @@ function Default() {
         react_1.default.createElement(number_input_1.NumberInput, { label: "max50 input", name: "max50", max: 50, control: control }),
         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" }, storyFormNumberInputs(control)),
-        react_1.default.createElement("div", { className: "dark space-y-2 bg-gray-900 p-20 lg:w-1/2" }, storyFormNumberInputs(control))))));
+        react_1.default.createElement("div", { className: "space-y-2 p-20 lg:w-1/2" }, storyFormNumberInputs(control))))));
 }
 exports.Default = Default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/form",
-  "version": "11.9.0",
+  "version": "11.11.0",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -12,18 +12,18 @@
   "author": "UX Fans s.r.o",
   "license": "MIT",
   "dependencies": {
-    "@uxf/ui": "11.9.0",
+    "@uxf/ui": "11.11.0",
     "coordinate-parser": "1.0.7",
     "dayjs": "1.11.10",
-    "react-hook-form": "7.47.0"
+    "react-hook-form": "7.50.1"
   },
   "peerDependencies": {
     "react": ">=18.2.0",
     "react-dom": ">=18.2.0"
   },
   "devDependencies": {
-    "@types/react": "18.2.27",
-    "@types/react-dom": "18.2.12",
+    "@types/react": "18.2.57",
+    "@types/react-dom": "18.2.19",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   }

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

@@ -34,7 +34,6 @@ function Default() {
         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: "light space-y-2 p-20 lg:w-1/2" }, storyFormRadioGroup(control)),
-        react_1.default.createElement("div", { className: "dark space-y-2 bg-gray-900 p-20 lg:w-1/2" }, storyFormRadioGroup(control))))));
+        react_1.default.createElement("div", { className: "space-y-2 p-20 lg:w-1/2" }, storyFormRadioGroup(control))))));
 }
 exports.Default = Default;

package/select/select.stories.js

@@ -32,7 +32,6 @@ function Default() {
         react_1.default.createElement(select_1.Select, { label: "Select form with number options", name: "select-dropdown-number", control: control, placeholder: "placeholder", options: numberOptions, id: "form-select", isClearable: 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" }, storyFormSelects(control)),
-        react_1.default.createElement("div", { className: "dark space-y-2 bg-gray-900 p-20 lg:w-1/2" }, storyFormSelects(control))))));
+        react_1.default.createElement("div", { className: "space-y-2 p-20 lg:w-1/2" }, storyFormSelects(control))))));
 }
 exports.Default = Default;

package/storybook/form-data-printer.js

@@ -8,6 +8,6 @@ const react_1 = __importDefault(require("react"));
 const react_hook_form_1 = require("react-hook-form");
 function FormDataPrinter(props) {
     const data = (0, react_hook_form_1.useWatch)({ control: props.control });
-    return react_1.default.createElement("pre", { className: "bg-gray-100 p-2 text-sm" }, JSON.stringify(data, null, "    "));
+    return (react_1.default.createElement("pre", { className: "bg-slate-100 p-2 text-sm dark:bg-slate-800 dark:text-white" }, JSON.stringify(data, null, "    ")));
 }
 exports.FormDataPrinter = FormDataPrinter;

package/text-input/text-input.stories.js

@@ -21,7 +21,6 @@ function Default() {
         react_1.default.createElement(text_input_1.TextInput, { placeholder: "Zadejte...", label: "Password input", name: "password", type: "password", control: control }),
         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" }, storyFormTextInputs(control)),
-        react_1.default.createElement("div", { className: "dark space-y-2 bg-gray-900 p-20 lg:w-1/2" }, storyFormTextInputs(control))))));
+        react_1.default.createElement("div", { className: "space-y-2 p-20 lg:w-1/2" }, storyFormTextInputs(control))))));
 }
 exports.Default = Default;

package/textarea/textarea.stories.js

@@ -18,7 +18,6 @@ function Default() {
         react_1.default.createElement(textarea_1.Textarea, { label: "Textarea required", name: "textarea-required", control: control, placeholder: "placeholder", form: "form-textarea", 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" }, storyFormTextAreas(control)),
-        react_1.default.createElement("div", { className: "dark space-y-2 bg-gray-900 p-20 lg:w-1/2" }, storyFormTextAreas(control))))));
+        react_1.default.createElement("div", { className: "space-y-2 p-20 lg:w-1/2" }, storyFormTextAreas(control))))));
 }
 exports.Default = Default;

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

@@ -21,7 +21,6 @@ function Default() {
     return (react_1.default.createElement(storybook_form_1.StorybookForm, { defaultValues: {
             withDefaultValue: (0, dayjs_1.default)("2023-10-20T14:32:10.511").format("HH:mm:ss"),
         } }, ({ 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)),
-        react_1.default.createElement("div", { className: "dark space-y-2 bg-gray-900 p-20 text-white lg:w-1/2" }, storyFormDatePickers(control))))));
+        react_1.default.createElement("div", { className: "space-y-2 p-20 lg:w-1/2" }, storyFormDatePickers(control))))));
 }
 exports.Default = Default;

package/toggle/toggle.stories.js

@@ -19,7 +19,6 @@ function Default() {
         react_1.default.createElement(toggle_1.Toggle, { label: "Toggle form disabled", name: "toggle-disabled", control: control, isDisabled: 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" }, storyFormToggles(control)),
-        react_1.default.createElement("div", { className: "dark space-y-2 bg-gray-900 p-20 lg:w-1/2" }, storyFormToggles(control))))));
+        react_1.default.createElement("div", { className: "space-y-2 p-20 lg:w-1/2" }, storyFormToggles(control))))));
 }
 exports.Default = Default;