@uxf/ui 10.0.0-beta.76 → 10.0.0-beta.79

package/_file-input-base/file-input-base.js

@@ -27,9 +27,15 @@ exports._FileInputBase = void 0;
 const react_1 = __importStar(require("react"));
 exports._FileInputBase = (0, react_1.forwardRef)((props, ref) => {
     const onChange = async (e) => {
+        var _a;
         if (e.target.files) {
-            const res = await props.onUploadFile(e.target.files[0]);
-            props.onChange(res, e);
+            try {
+                const response = await props.onUploadFile(e.target.files[0]);
+                await props.onChange(response, e);
+            }
+            catch (err) {
+                (_a = props.onUploadError) === null || _a === void 0 ? void 0 : _a.call(props, err);
+            }
         }
         else {
             props.onChange(null, e);

package/avatar/README.md

@@ -0,0 +1,8 @@
+# Avatar
+
+## CSS dependencies
+
+```css
+@import url("@uxf/ui/icon/icon.css");
+@import url("@uxf/ui/avatar/avatar.css");
+```

package/avatar/avatar.stories.js

@@ -12,7 +12,7 @@ exports.default = {
 };
 function Default() {
     const testAvatars = (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(avatar_1.Avatar, { src: "https://i.picsum.photos/id/1062/5092/3395.jpg?hmac=o9m7qeU51uOLfXvepXcTrk2ZPiSBJEkiiOp-Qvxja-k" }),
+        react_1.default.createElement(avatar_1.Avatar, { src: "https://images.pexels.com/photos/14934612/pexels-photo-14934612.jpeg?auto=compress&cs=tinysrgb&w=100&h=100&dpr=1" }),
         react_1.default.createElement(avatar_1.Avatar, null)));
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement("div", { className: "light flex items-center space-x-4 rounded bg-white p-8" }, testAvatars),

package/avatar-file-input/README.md

@@ -0,0 +1 @@
+# AvatarFileInput

package/badge/README.md

@@ -0,0 +1 @@
+# Badge

package/button/README.md

@@ -0,0 +1,68 @@
+# Button
+
+### Props configuration
+
+```tsx
+// button.d.ts
+
+declare module "@uxf/ui/icon/theme" {
+    export interface ButtonVariants {
+        default: true;
+        outlined: true;
+        text: true;
+    }
+
+    export interface ButtonSizes {
+        xs: true;
+        sm: true;
+        default: true;
+        lg: true;
+        xl: true;
+    }
+
+    export interface ButtonColors {
+        default: true;
+        white: true;
+        success: true;
+        warning: true;
+        error: true;
+    }
+}
+```
+
+## Css
+
+```css
+// button.css
+
+.uxf-button {
+
+    &__text {
+
+    }
+
+    &.is-disabled {
+
+    }
+
+    &.is-loading {
+
+    }
+
+    &--full-width {
+
+    }
+
+    &--icon-button {
+
+    }
+
+    &--size-{{ size }} {
+
+    }
+
+    &--variant-{{ variant }} {
+
+    }
+}
+```

package/button/button.stories.js

@@ -28,7 +28,6 @@ const button_1 = require("@uxf/ui/button");
 const icon_1 = require("@uxf/ui/icon");
 const storybook_config_1 = require("@uxf/ui/utils/storybook-config");
 const react_1 = __importStar(require("react"));
-// import Docs from "./button.docs.mdx";
 exports.default = {
     title: "UI/Button",
     component: button_1.Button,

package/button-group/README.md

@@ -0,0 +1 @@
+# ButtonGroup

package/button-list/README.md

@@ -0,0 +1 @@
+# ButtonList

package/calendar/README.md

@@ -0,0 +1 @@
+# Calendar

package/checkbox/README.md

@@ -0,0 +1 @@
+# Checkbox

package/checkbox-button/README.md

@@ -0,0 +1 @@
+# CheckboxButton

package/checkbox-input/README.md

@@ -0,0 +1 @@
+# CheckboxInput

package/chip/README.md

@@ -0,0 +1 @@
+# Chip

package/color-radio/README.md

@@ -0,0 +1,8 @@
+# ColorRadio
+
+## Css dependencies
+
+```css
+@import url("@uxf/ui/icon/icon.css");
+@import url("@uxf/ui/color-radio/color-radio.css");
+```

package/color-radio-group/README.md

@@ -0,0 +1,9 @@
+# ColorRadioGroup
+
+## CSS dependencies
+
+```css
+@import url("@uxf/ui/icon/icon.css");
+@import url("@uxf/ui/color-radio-group/color-radio-group.css");
+@import url("@uxf/ui/form-component/form-component.css");
+```

package/combobox/README.md

@@ -0,0 +1,12 @@
+# Combobox
+
+## CSS dependencies
+
+```css
+@import url("@uxf/ui/label/label.css");
+@import url("@uxf/ui/form-component/form-component.css");
+@import url("@uxf/ui/dropdown/dropdown.css");
+@import url("@uxf/ui/input/input.css");
+@import url("@uxf/ui/_select-base/select-base.css");
+@import url("@uxf/ui/input/input-basic.css");
+```

package/config/icons-config.d.ts

@@ -1,2 +1,2 @@
-export declare const ICONS_VERSION = "1687765245583";
+export declare const ICONS_VERSION = "1696711976722";
 export declare const ICON_SPRITE = "/.storybook/static-assets/icons-generated/_icon-sprite.svg";

package/config/icons-config.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ICON_SPRITE = exports.ICONS_VERSION = void 0;
-exports.ICONS_VERSION = "1687765245583";
+exports.ICONS_VERSION = "1696711976722";
 exports.ICON_SPRITE = "/.storybook/static-assets/icons-generated/_icon-sprite.svg";

package/css/avatar.css

@@ -2,7 +2,7 @@
     @apply relative inline-flex h-10 w-10 items-center justify-center rounded-full;
 
     &__image {
-        @apply absolute left-0 top-0 block h-full w-full rounded-inherit object-cover;
+        @apply rounded-inherit absolute left-0 top-0 block h-full w-full object-cover;
     }
 
     :root .light & {

package/css/button-list.css

@@ -6,7 +6,7 @@
     }
 
     &__menu-items {
-        @apply absolute right-0 z-dropdown mt-2 w-40 divide-y rounded-md shadow-lg ring-1 focus:outline-none;
+        @apply z-dropdown absolute right-0 mt-2 w-40 divide-y rounded-md shadow-lg ring-1 focus:outline-none;
 
         :root .light & {
             @apply divide-gray-100 bg-white ring-black/5;
@@ -26,7 +26,7 @@
     }
 
     &__menu-button {
-        @apply flex space-x-3 px-3 py-2 text-sm is-hoverable:hover:cursor-pointer;
+        @apply is-hoverable:hover:cursor-pointer flex space-x-3 px-3 py-2 text-sm;
 
         :root .light & {
             @apply text-black hover:text-gray-800;

package/css/button.css

@@ -192,11 +192,11 @@
 
         &.is-disabled {
             :root .light & {
-                @apply border-gray-300 bg-gray-300 text-lightLow;
+                @apply text-lightLow border-gray-300 bg-gray-300;
             }
 
             :root .dark & {
-                @apply border-gray-700 bg-gray-700 text-darkLow;
+                @apply text-darkLow border-gray-700 bg-gray-700;
             }
         }
     }
@@ -221,7 +221,7 @@
 
             &.is-disabled {
                 :root .light & {
-                    @apply bg-gray-300 text-lightLow;
+                    @apply text-lightLow bg-gray-300;
                 }
 
                 :root .dark & {
@@ -243,7 +243,7 @@
 
             &.is-disabled {
                 :root .light & {
-                    @apply bg-gray-300 text-lightLow;
+                    @apply text-lightLow bg-gray-300;
                 }
 
                 :root .dark & {
@@ -265,7 +265,7 @@
 
             &.is-disabled {
                 :root .light & {
-                    @apply bg-gray-300 text-lightLow;
+                    @apply text-lightLow bg-gray-300;
                 }
 
                 :root .dark & {
@@ -287,7 +287,7 @@
 
             &.is-disabled {
                 :root .light & {
-                    @apply bg-gray-300 text-lightLow;
+                    @apply text-lightLow bg-gray-300;
                 }
 
                 :root .dark & {
@@ -298,10 +298,10 @@
     }
 
     &--variant-white {
-        @apply border focus-visible:ring-primary;
+        @apply focus-visible:ring-primary border;
 
         :root .light & {
-            @apply border-lightBorder bg-white text-lightMedium is-hoverable:bg-gray-100;
+            @apply border-lightBorder text-lightMedium is-hoverable:bg-gray-100 bg-white;
         }
 
         :root .dark & {

package/css/checkbox-button.css

@@ -9,7 +9,7 @@
     }
 
     :root .light & {
-        @apply bg-gray-200 focus-visible:ring-primary;
+        @apply focus-visible:ring-primary bg-gray-200;
 
         .uxf-checkbox-button__icon {
             @apply before:border-gray-600;
@@ -57,7 +57,7 @@
     }
 
     :root .dark & {
-        @apply bg-gray-800 focus-visible:ring-primary focus-visible:ring-offset-gray-900;
+        @apply focus-visible:ring-primary bg-gray-800 focus-visible:ring-offset-gray-900;
 
         .uxf-checkbox-button__icon {
             @apply before:border-transparent;

package/css/checkbox.css

@@ -35,10 +35,10 @@
     }
 
     :root .light & {
-        @apply border-gray-400 bg-white focus-visible:before:border-primary;
+        @apply focus-visible:before:border-primary border-gray-400 bg-white;
 
         &.is-selected {
-            @apply border-transparent bg-primary is-hoverable:bg-primary-700;
+            @apply bg-primary is-hoverable:bg-primary-700 border-transparent;
 
             .uxf-checkbox__inner {
                 @apply text-white;
@@ -77,10 +77,10 @@
     }
 
     :root .dark & {
-        @apply border-gray-400 bg-gray-900 focus-visible:before:border-primary;
+        @apply focus-visible:before:border-primary border-gray-400 bg-gray-900;
 
         &.is-selected {
-            @apply border-transparent bg-primary is-hoverable:bg-primary-300;
+            @apply bg-primary is-hoverable:bg-primary-300 border-transparent;
 
             .uxf-checkbox__inner {
                 @apply text-white;

package/css/color-radio-group.css

@@ -1,6 +1,6 @@
 .uxf-color-radio-group {
     &__option {
-        @apply rounded-full outline-none focus-visible:ring-2 focus-visible:ring-offset-2 is-disabled:pointer-events-none;
+        @apply is-disabled:pointer-events-none rounded-full outline-none focus-visible:ring-2 focus-visible:ring-offset-2;
 
         :root .light & {
             @apply focus-visible:ring-[color:var(--option-color)] focus-visible:ring-offset-white;

package/css/color-radio.css

@@ -20,7 +20,7 @@
     }
 
     &.is-disabled {
-        @apply pointer-events-none after:absolute after:inset-0 after:rounded-inherit;
+        @apply after:rounded-inherit pointer-events-none after:absolute after:inset-0;
 
         :root .light & {
             @apply after:bg-white/50;

package/css/datetime-picker.css

@@ -4,7 +4,7 @@
     }
 
     &__tab {
-        @apply px-3 py-0 text-body2;
+        @apply text-body2 px-3 py-0;
 
         height: theme("inputSize.xs");
     }

package/css/dropdown.css

@@ -1,5 +1,5 @@
 .uxf-dropdown {
-    @apply absolute z-dropdown w-full overflow-y-auto rounded-md py-1 text-base shadow-lg ring-1 ring-black
+    @apply z-dropdown absolute w-full overflow-y-auto rounded-md py-1 text-base shadow-lg ring-1 ring-black
         ring-opacity-5 sm:text-sm;
 
     outline: none;

package/css/dropzone.css

@@ -6,8 +6,8 @@
     }
 
     &__label {
-        @apply flex cursor-pointer flex-col items-center justify-center space-y-2 rounded-inherit border-2 border-dashed
-            border-lightBorder p-4 text-[14px] text-lightLow;
+        @apply rounded-inherit border-lightBorder text-lightLow flex cursor-pointer flex-col items-center justify-center space-y-2
+            border-2 border-dashed p-4 text-[14px];
 
         &__icon {
             @apply h-6;
@@ -18,7 +18,7 @@
         }
 
         &.is-disabled {
-            @apply cursor-not-allowed bg-lightBorder/50;
+            @apply bg-lightBorder/50 cursor-not-allowed;
         }
     }
 }

package/css/error-message.css

@@ -1,3 +1,3 @@
 .uxf-error-message {
-    @apply mt-1 block text-right text-error;
+    @apply text-error mt-1 block text-right;
 }

package/css/image-gallery.css

@@ -1,5 +1,5 @@
 .uxf-image-gallery {
-    @apply fixed inset-0 z-imageGallery flex flex-col;
+    @apply z-imageGallery fixed inset-0 flex flex-col;
 
     &__content {
         @apply mx-auto max-h-[calc(100%-128px)] grow;

package/css/input.css

@@ -234,11 +234,11 @@
 
             .uxf-input__element {
                 :root .light & {
-                    @apply border-gray-200 text-error placeholder:text-error;
+                    @apply text-error placeholder:text-error border-gray-200;
                 }
 
                 :root .dark & {
-                    @apply border-gray-700 text-error placeholder:text-error;
+                    @apply text-error placeholder:text-error border-gray-700;
                 }
             }
         }

package/css/layout.css

@@ -9,7 +9,7 @@ body {
 }
 
 .uxf-app-bar {
-    @apply fixed left-0 top-0 flex h-14 w-full items-center bg-primary-600;
+    @apply bg-primary-600 fixed left-0 top-0 flex h-14 w-full items-center;
 
     &__left-container {
         @apply flex grow items-center;

package/css/list-item.css

@@ -1,6 +1,6 @@
 .uxf-list-item {
-    @apply relative flex min-h-[64px] grow justify-between space-x-3 px-5 py-4 outline-none
-        transition-opacity before:absolute before:inset-0 before:rounded-lg focus-visible:before:border-2 is-hoverable:opacity-75;
+    @apply is-hoverable:opacity-75 relative flex min-h-[64px] grow justify-between space-x-3 px-5 py-4
+        outline-none transition-opacity before:absolute before:inset-0 before:rounded-lg focus-visible:before:border-2;
 
     &__inner {
         @apply w-full;

package/css/multi-combobox.css

@@ -25,7 +25,7 @@
         }
 
         :root .light & {
-            @apply bg-white text-lightHigh before:border-gray-200;
+            @apply text-lightHigh bg-white before:border-gray-200;
 
             .is-empty {
                 @apply text-lightLow;
@@ -33,7 +33,7 @@
         }
 
         :root .dark & {
-            @apply bg-gray-800 text-darkHigh before:border-gray-700;
+            @apply text-darkHigh bg-gray-800 before:border-gray-700;
 
             .is-empty {
                 @apply text-darkLow;

package/css/pagination.css

@@ -16,11 +16,11 @@
             @apply z-10;
 
             :root .light & {
-                @apply border border-primary bg-indigo-50 text-primary-600;
+                @apply border-primary text-primary-600 border bg-indigo-50;
             }
 
             :root .dark & {
-                @apply border border-primary-700 bg-indigo-900/20 text-primary-300;
+                @apply border-primary-700 text-primary-300 border bg-indigo-900/20;
             }
         }
 

package/css/paper.css

@@ -1,3 +1,3 @@
 .uxf-paper {
-    @apply rounded-lg bg-white shadow-paper;
+    @apply shadow-paper rounded-lg bg-white;
 }

package/css/radio.css

@@ -28,10 +28,10 @@
     }
 
     :root .light & {
-        @apply border-gray-400 focus-visible:ring-primary;
+        @apply focus-visible:ring-primary border-gray-400;
 
         &.is-selected {
-            @apply border-none bg-primary;
+            @apply bg-primary border-none;
 
             .uxf-radio__inner {
                 @apply bg-white;
@@ -64,10 +64,10 @@
     }
 
     :root .dark & {
-        @apply border-gray-400 focus-visible:ring-primary focus-visible:ring-offset-gray-900;
+        @apply focus-visible:ring-primary border-gray-400 focus-visible:ring-offset-gray-900;
 
         &.is-selected {
-            @apply border-none bg-primary;
+            @apply bg-primary border-none;
 
             .uxf-radio__inner {
                 @apply bg-white;

package/css/tabs.css

@@ -54,20 +54,20 @@
     }
 
     &__tab {
-        @apply inline-flex cursor-pointer items-center justify-center overflow-visible whitespace-nowrap px-2 py-2
-            text-center outline-none transition-colors
-            focus-visible:ring-2 focus-visible:ring-offset-1 is-disabled:pointer-events-none;
+        @apply is-disabled:pointer-events-none inline-flex cursor-pointer items-center justify-center overflow-visible whitespace-nowrap px-2
+            py-2 text-center outline-none
+            transition-colors focus-visible:ring-2 focus-visible:ring-offset-1;
 
         &--default {
             @apply relative rounded-lg before:absolute before:bottom-[-6px] before:w-full before:border-b-2
                 before:opacity-0 before:transition;
 
             :root .light & {
-                @apply text-lightMedium hover:bg-gray-100 focus-visible:ring-primary;
+                @apply text-lightMedium focus-visible:ring-primary hover:bg-gray-100;
             }
 
             :root .dark & {
-                @apply text-darkMedium hover:bg-gray-800 focus-visible:ring-primary
+                @apply text-darkMedium focus-visible:ring-primary hover:bg-gray-800
                     focus-visible:ring-offset-gray-900;
             }
 
@@ -98,12 +98,12 @@
             @apply rounded;
 
             :root .light & {
-                @apply bg-gray-100 text-lightMedium hover:bg-primary-100 hover:text-primary-600
-                    focus-visible:ring-primary focus-visible:ring-offset-gray-100;
+                @apply text-lightMedium hover:bg-primary-100 hover:text-primary-600 focus-visible:ring-primary
+                    bg-gray-100 focus-visible:ring-offset-gray-100;
             }
 
             :root .dark & {
-                @apply bg-gray-700 text-darkMedium hover:bg-gray-800 focus-visible:ring-primary
+                @apply text-darkMedium focus-visible:ring-primary bg-gray-700 hover:bg-gray-800
                     focus-visible:ring-offset-gray-700;
             }
 

package/css/toggle.css

@@ -39,7 +39,7 @@
     }
 
     :root .light & {
-        @apply bg-gray-200 focus-visible:ring-primary;
+        @apply focus-visible:ring-primary bg-gray-200;
 
         &__inner {
             @apply bg-white;
@@ -59,7 +59,7 @@
     }
 
     :root .dark & {
-        @apply bg-gray-400 focus-visible:ring-primary focus-visible:ring-offset-gray-900;
+        @apply focus-visible:ring-primary bg-gray-400 focus-visible:ring-offset-gray-900;
 
         &.is-selected {
             @apply bg-primary;

package/css/tooltip.css

@@ -1,7 +1,7 @@
 .uxf-tooltip {
-    @apply z-tooltip w-max max-w-[calc(100vw-20px)] rounded-lg bg-lightHigh p-3 text-white;
+    @apply z-tooltip bg-lightHigh w-max max-w-[calc(100vw-20px)] rounded-lg p-3 text-white;
 
     &__arrow {
-        @apply z-tooltip rounded-sm bg-lightHigh;
+        @apply z-tooltip bg-lightHigh rounded-sm;
     }
 }

package/date-picker/README.md

@@ -0,0 +1,9 @@
+# DatePicker
+
+## CSS dependencies
+
+```css
+@import url("@uxf/ui/button/button.css");
+@import url("@uxf/ui/calendar/calendar.css");
+@import url("@uxf/ui/date-picker/date-picker.css");
+```

package/date-picker-input/README.md

@@ -0,0 +1,11 @@
+# DatePickerInput
+
+## CSS dependencies
+
+```css
+@import url("@uxf/ui/icon/icon.css");
+@import url("@uxf/ui/button/button.css");
+@import url("@uxf/ui/calendar/calendar.css");
+@import url("@uxf/ui/date-picker/date-picker.css");
+@import url("@uxf/ui/_input-with-popover/input-with-popover.css");
+```

package/date-range-picker/README.md

@@ -0,0 +1 @@
+# DateRangePicker

package/date-range-picker-input/README.md

@@ -0,0 +1 @@
+# DateRangePickerInput

package/datetime-picker/README.md

@@ -0,0 +1,13 @@
+# DatetimePicker
+
+## CSS dependencies
+
+```css
+@import url("@uxf/ui/icon/icon.css");
+@import url("@uxf/ui/button/button.css");
+@import url("@uxf/ui/calendar/calendar.css");
+@import url("@uxf/ui/date-picker/date-picker.css");
+@import url("@uxf/ui/tabs/tabs.css");
+@import url("@uxf/ui/time-picker/time-picker.css");
+@import url("@uxf/ui/_input-with-popover/input-with-popover.css");
+```

package/datetime-picker-input/README.md

@@ -0,0 +1 @@
+# DatetimePickerInput

package/dropdown/README.md

@@ -0,0 +1 @@
+# Dropdown

package/dropzone/README.md

@@ -0,0 +1,8 @@
+# Dropzone
+
+## CSS dependencies
+
+```css
+@import url("@uxf/ui/icon/icon.css");
+@import url("@uxf/ui/dropzone/dropzone.css");
+```

package/dropzone/dropzone.stories.js

@@ -43,7 +43,7 @@ function Default() {
     const onChange = (0, action_1.action)("onChange", setFiles);
     const storyDropzone = (react_1.default.createElement("div", { className: "space-y-2" },
         react_1.default.createElement(index_1.Dropzone, { helperText: "Disabled drag 'n' drop", label: "Use drag and drop or click to upload", noDrag: true, onChange: onChange, onUploadFile: uploadFIle_mock_1.uploadFile, value: files }),
-        react_1.default.createElement(index_1.Dropzone, { helperText: "Disabled onClick upload", label: react_1.default.createElement("span", { className: "rounded-lg bg-primary-600 px-4 py-2 font-bold text-white" }, "JSX label"), noClick: true, onChange: onChange, onUploadFile: uploadFIle_mock_1.uploadFile, value: files }),
+        react_1.default.createElement(index_1.Dropzone, { helperText: "Disabled onClick upload", label: react_1.default.createElement("span", { className: "bg-primary-600 rounded-lg px-4 py-2 font-bold text-white" }, "JSX label"), noClick: true, onChange: onChange, onUploadFile: uploadFIle_mock_1.uploadFile, value: files }),
         react_1.default.createElement(index_1.Dropzone, { accept: { "image/*": [] }, label: "Only images upload", onChange: onChange, onUploadFile: uploadFIle_mock_1.uploadFile, value: files }),
         react_1.default.createElement(index_1.Dropzone, { label: "Single file upload", maxFilesCount: 1, onChange: onChange, onUploadFile: uploadFIle_mock_1.uploadFile, value: files }),
         react_1.default.createElement(index_1.Dropzone, { isDisabled: true, label: "Disabled dropzone", onChange: onChange, onUploadFile: uploadFIle_mock_1.uploadFile, value: files }),

package/error-message/README.md

@@ -0,0 +1,7 @@
+# ErrorMessage
+
+## CSS dependencies
+
+```css
+@import url("@uxf/ui/error-message/error-message.css");
+```

package/file-input/README.md

@@ -0,0 +1,11 @@
+# FileInput
+
+## CSS dependencies
+
+```css
+@import url("@uxf/ui/input/input-basic.css");
+@import url("@uxf/ui/input/input.css");
+@import url("@uxf/ui/label/label.css");
+@import url("@uxf/ui/form-component/form-component.css");
+@import url("@uxf/ui/file-input/file-input.css");
+```

package/file-input/file-input.js

@@ -45,27 +45,15 @@ exports.FileInput = (0, react_1.forwardRef)((props, ref) => {
     const input = (0, useInputFocus_1.useInputFocus)(innerRef, props.onBlur, props.onFocus);
     const errorId = props.isInvalid && props.id ? `${props.id}--errormessage` : undefined;
     const fileName = props.value ? `${props.value.name}` : props.placeholder || "No file has been selected yet";
-    const onChange = async (_, e) => {
-        var _a, _b;
-        const file = (_a = e === null || e === void 0 ? void 0 : e.target.files) === null || _a === void 0 ? void 0 : _a[0];
-        if (!file) {
-            return;
-        }
+    const onUploadFile = async (file) => {
         setIsUploading(true);
-        try {
-            const response = await props.onUploadFile(file);
-            await props.onChange(response);
-        }
-        catch (err) {
-            (_b = props.onUploadError) === null || _b === void 0 ? void 0 : _b.call(props, err);
-        }
-        finally {
-            setIsUploading(false);
-        }
+        const response = await props.onUploadFile(file);
+        setIsUploading(false);
+        return response;
     };
     return (react_1.default.createElement(form_component_1.FormComponent, { className: (0, cx_1.cx)(input.focused && classes_1.CLASSES.IS_FOCUSED, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isReadOnly && classes_1.CLASSES.IS_READONLY), errorId: errorId, form: props.form, helperText: props.helperText, inputId: id, isRequired: props.isRequired, label: props.label, hiddenLabel: props.hiddenLabel },
         react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(_file_input_base_1._FileInputBase, { accept: props.accept, "aria-describedby": errorId, "aria-invalid": props.isInvalid, className: `uxf-file-input__input ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`, form: props.form, id: id, isDisabled: props.isDisabled || isUploading, isInvalid: props.isInvalid, isReadOnly: props.isReadOnly, isRequired: props.isRequired, name: props.name, onBlur: input.onBlur, onChange: onChange, onFocus: input.onFocus, onUploadError: props.onUploadError, onUploadFile: props.onUploadFile, ref: ref, value: props.value }),
+            react_1.default.createElement(_file_input_base_1._FileInputBase, { accept: props.accept, "aria-describedby": errorId, "aria-invalid": props.isInvalid, className: `uxf-file-input__input ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`, form: props.form, id: id, isDisabled: props.isDisabled || isUploading, isInvalid: props.isInvalid, isReadOnly: props.isReadOnly, isRequired: props.isRequired, name: props.name, onBlur: input.onBlur, onChange: props.onChange, onFocus: input.onFocus, onUploadError: props.onUploadError, onUploadFile: onUploadFile, ref: ref, value: props.value }),
             react_1.default.createElement("label", { className: (0, cx_1.cx)("uxf-input", "uxf-file-input__label", input.focused && classes_1.CLASSES.IS_FOCUSED, (props.isDisabled || props.isReadOnly) && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, isUploading && classes_1.CLASSES.IS_LOADING, isUploading && "uxf-file-input__label--has-right-addon", `uxf-input--size-${(_b = props.size) !== null && _b !== void 0 ? _b : "default"}`, `uxf-input--variant-${(_c = props.variant) !== null && _c !== void 0 ? _c : "default"}`), htmlFor: id },
                 react_1.default.createElement("div", { className: "uxf-input__left-addon uxf-file-input__label__button" }, !isUploading ? ((_d = props.uploadButtonLabel) !== null && _d !== void 0 ? _d : "Vyberte soubor") : (react_1.default.createElement(loader_1.Loader, { className: "uxf-file-input__label__loader", size: "sm" }))),
                 react_1.default.createElement("div", { className: "uxf-file-input__label__wrapper" },

package/flash-messages/README.md

@@ -0,0 +1,23 @@
+# FlashMessages
+
+## CSS dependencies
+
+```css
+@import url("@uxf/ui/flash-messages/flash-messages.css");
+```
+
+## Implementation
+
+```tsx
+import {AppProps} from "next/app";
+import {FlashMessages, getFlashMessagesRef} from "@uxf/ui/flash-messages";
+
+function App(props: AppProps) {
+    return (
+        <UiContextProvider value={...}>
+            {props.children}
+            <FlashMessages ref={getFlashMessagesRef()}/>
+        </UiContextProvider>
+    );
+}
+```

package/form-component/README.md

@@ -0,0 +1,7 @@
+# FormComponent
+
+## CSS dependencies
+
+```css
+@import url("@uxf/ui/form-component/form-component.css");
+```

package/hooks/use-dropdown.d.ts

@@ -3,7 +3,7 @@ import { Placement, Strategy } from "@floating-ui/react";
 export declare function useDropdown(placement: Placement, matchWidth?: boolean, strategy?: Strategy): {
     placement: Placement;
     strategy: Strategy;
-    middlewareData: import("@floating-ui/react").MiddlewareData;
+    middlewareData: import("@floating-ui/core").MiddlewareData;
     x: number;
     y: number;
     update: () => void;
@@ -12,7 +12,7 @@ export declare function useDropdown(placement: Placement, matchWidth?: boolean,
         y: number;
         strategy: Strategy;
         placement: Placement;
-        middlewareData: import("@floating-ui/react").MiddlewareData;
+        middlewareData: import("@floating-ui/core").MiddlewareData;
         update: () => void;
         isPositioned: boolean;
         floatingStyles: import("react").CSSProperties;

package/icon/README.md

@@ -0,0 +1,11 @@
+# Icon
+
+## CSS dependencies
+
+```css
+@import url("@uxf/ui/icon/icon.css");
+```
+
+## Implementation
+
+TODO

package/input/README.md

@@ -0,0 +1,8 @@
+# Input
+
+## CSS dependencies
+
+```css
+@import url("@uxf/ui/input/input-basic.css");
+@import url("@uxf/ui/input/input.css");
+```

package/label/README.md

@@ -0,0 +1,7 @@
+# Label
+
+## CSS dependencies
+
+```css
+@import url("@uxf/ui/label/label.css");
+```

package/list-item/README.md

@@ -0,0 +1,7 @@
+# ListItem
+
+## CSS Dependencies
+
+```css
+@import url("@uxf/ui/list-item/list-item.css");
+```

package/loader/README.md

@@ -0,0 +1,7 @@
+# Loader
+
+## CSS dependencies
+
+```css
+@import url("@uxf/ui/loader/loader.css");
+```

package/message/README.md

@@ -0,0 +1 @@
+# Message

package/modal/README.md

@@ -0,0 +1,24 @@
+# Modal
+
+## CSS dependencies
+
+```css
+@import url("@uxf/ui/dialog/dialog.css");
+@import url("@uxf/ui/modal/modal.css");
+```
+
+## Implementation
+
+```tsx
+import {AppProps} from "next/app";
+import {getModalRef, Modal} from "@uxf/ui/modal";
+
+function App(props: AppProps) {
+    return (
+        <UiContextProvider value={...}>
+            {props.children}
+            <Modal ref={getModalRef()}/>
+        </UiContextProvider>
+    );
+}
+```

package/multi-combobox/README.md

@@ -0,0 +1 @@
+# MultiCombobox

package/multi-select/README.md

@@ -0,0 +1 @@
+# MultiSelect

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/ui",
-  "version": "10.0.0-beta.76",
+  "version": "10.0.0-beta.79",
   "description": "",
   "publishConfig": {
     "access": "public"

package/pagination/README.md

@@ -0,0 +1 @@
+# Pagination

package/paper/README.md

@@ -0,0 +1 @@
+# Paper

package/radio/README.md

@@ -0,0 +1 @@
+# Radio

package/radio-group/README.md

@@ -0,0 +1 @@
+# RadioGroup

package/raster-image/README.md

@@ -0,0 +1 @@
+# RasterImage

package/select/README.md

@@ -0,0 +1 @@
+# Select

package/tabs/README.md

@@ -0,0 +1 @@
+# Tabs

package/text-input/README.md

@@ -0,0 +1 @@
+# TextInput

package/text-link/README.md

@@ -0,0 +1,34 @@
+# TextLink
+
+### Props configuration
+
+```tsx
+// textLink.d.ts
+
+declare module "@uxf/ui/icon/theme" {
+    export interface TextLinkVariants {
+        default: true;
+    }
+}
+```
+
+## Css
+
+```scss
+// textLink.css
+
+.uxf-textLink {
+
+    &.is-disabled {
+
+    }
+
+    &.is-loading {
+
+    }
+
+    &--variant-{{ variant }} {
+
+    }
+}
+```

package/textarea/README.md

@@ -0,0 +1 @@
+# Textarea

package/time-picker/README.md

@@ -0,0 +1 @@
+# TimePicker

package/time-picker-input/README.md

@@ -0,0 +1 @@
+# TimePickerInput

package/toggle/README.md

@@ -0,0 +1 @@
+# Toggle

package/tooltip/README.md

@@ -0,0 +1 @@
+# Tooltip

package/tooltip/use-tooltip.d.ts

@@ -8,17 +8,17 @@ export interface TooltipOptions {
 }
 export declare function useTooltip(options: TooltipOptions): {
     placement: Placement;
-    strategy: import("@floating-ui/react").Strategy;
-    middlewareData: import("@floating-ui/react").MiddlewareData;
+    strategy: import("@floating-ui/utils").Strategy;
+    middlewareData: import("@floating-ui/core").MiddlewareData;
     x: number;
     y: number;
     update: () => void;
     context: {
         x: number;
         y: number;
-        strategy: import("@floating-ui/react").Strategy;
+        strategy: import("@floating-ui/utils").Strategy;
         placement: Placement;
-        middlewareData: import("@floating-ui/react").MiddlewareData;
+        middlewareData: import("@floating-ui/core").MiddlewareData;
         update: () => void;
         isPositioned: boolean;
         floatingStyles: import("react").CSSProperties;

package/typography/README.md

@@ -0,0 +1 @@
+# Typography

package/utils/action.d.ts

@@ -1,2 +1,3 @@
-import { HandlerFunction } from "@storybook/addon-actions";
+type HandlerFunction = (...args: any[]) => void;
 export declare function action(name: string, handler: HandlerFunction): HandlerFunction;
+export {};

package/utils/action.js

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.action = void 0;
-const addon_actions_1 = require("@storybook/addon-actions");
 function action(name, handler) {
     return function (...args) {
-        (0, addon_actions_1.action)(name)(...args);
+        // eslint-disable-next-line no-console
+        console.log(name, ...args);
         handler(...args);
     };
 }