@uxf/ui 1.0.0-beta.100 → 1.0.0-beta.102

package/config/icons-config.d.ts

@@ -1,2 +1,2 @@
-export declare const ICONS_VERSION = "1673628509595";
+export declare const ICONS_VERSION = "1674059698879";
 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 = "1673628509595";
+exports.ICONS_VERSION = "1674059698879";
 exports.ICON_SPRITE = "/.storybook/static-assets/icons-generated/_icon-sprite.svg";

package/config/icons.d.ts

@@ -51,6 +51,18 @@ export declare const ICONS: {
         readonly w: 640;
         readonly h: 512;
     };
+    readonly file: {
+        readonly w: 384;
+        readonly h: 512;
+    };
+    readonly imageFile: {
+        readonly w: 384;
+        readonly h: 512;
+    };
+    readonly videoFile: {
+        readonly w: 384;
+        readonly h: 512;
+    };
     readonly user: {
         readonly w: 448;
         readonly h: 512;
@@ -76,6 +88,9 @@ declare module "@uxf/ui/icon/theme" {
         "chevronsRight": true;
         "chevronUp": true;
         "cloud": true;
+        "file": true;
+        "imageFile": true;
+        "videoFile": true;
         "user": true;
         "xmarkLarge": true;
     }

package/config/icons.js

@@ -16,6 +16,9 @@ exports.ICONS = {
     "chevronsRight": { w: 512, h: 512 },
     "chevronUp": { w: 512, h: 512 },
     "cloud": { w: 640, h: 512 },
+    "file": { w: 384, h: 512 },
+    "imageFile": { w: 384, h: 512 },
+    "videoFile": { w: 384, h: 512 },
     "user": { w: 448, h: 512 },
     "xmarkLarge": { w: 448, h: 512 },
 };

package/css/dropzone.css

@@ -0,0 +1,81 @@
+.uxf-dropzone {
+    @apply rounded-lg focus:outline-none;
+
+    &__input {
+        @apply sr-only;
+    }
+
+    &__label {
+        @apply flex flex-col space-y-2 items-center justify-center p-4 border-2 border-lightBorder border-dashed
+            rounded-inherit cursor-pointer text-lightLow text-[14px];
+
+        &__icon {
+            @apply h-6;
+        }
+
+        &.is-invalid {
+            @apply border-error-600;
+        }
+
+        &.is-disabled {
+            @apply bg-lightBorder/50 cursor-not-allowed;
+        }
+    }
+}
+
+.uxf-dropzone-list {
+    @apply space-y-2;
+
+    &__item-wrapper {
+        @apply flex flex-col items-start justify-start space-y-1;
+    }
+
+    &__item {
+        @apply overflow-scroll border px-4 py-3 shadow-sm sm:rounded-md sm:px-6 flex w-full
+            items-center justify-between space-x-6;
+
+        :root .light & {
+            @apply border-lightBorder text-lightMedium;
+        }
+
+        :root .dark & {
+            @apply border-gray-700 bg-gray-800 text-gray-200;
+        }
+
+        &.is-invalid {
+            :root .light & {
+                @apply border-error-600 text-error-600;
+            }
+
+            :root .dark & {
+                @apply border-error-600 text-error-600;
+            }
+        }
+
+        &__block {
+            @apply flex items-center space-x-4 min-w-0;
+
+            &:nth-child(2) {
+                @apply shrink-0;
+            }
+
+            &__icon {
+                @apply h-6;
+            }
+
+            &__file-name {
+                @apply truncate;
+            }
+
+            &__file-size {
+                @apply whitespace-nowrap shrink-0;
+            }
+
+            &__remove-button {
+                &__icon {
+                    @apply h-4;
+                }
+            }
+        }
+    }
+}

package/css/input.css

@@ -31,10 +31,10 @@
 
     &__left-addon,
     &__right-addon {
-        @apply border px-2 bg-gray-100;
+        @apply border px-2;
 
         :root .light & {
-            @apply border-gray-200;
+            @apply border-gray-200 bg-gray-100;
         }
 
         :root .dark & {
@@ -198,7 +198,7 @@
             }
 
             :root .light & {
-                -webkit-box-shadow: inset 0 0 0 1000px theme("colors.gray.100");
+                -webkit-box-shadow: inset 0 0 0 1000px theme("colors.white");
             }
         }
     }

package/css/loader.css

@@ -7,5 +7,17 @@
 .uxf-loader {
     animation: spinner 1.2s linear infinite;
 
-    @apply inline-block h-12 w-12 rounded-full border-r-4 border-t-4 border-r-transparent border-t-current;
+    @apply inline-block rounded-full border-r-transparent border-t-current;
+
+    &--size-default {
+        @apply h-12 w-12 border-r-4 border-t-4;
+    }
+
+    &--size-lg {
+        @apply h-24 w-24 border-r-8 border-t-8;
+    }
+
+    &--size-sm {
+        @apply h-6 w-6 border-r-2 border-t-2;
+    }
 }

package/css/tooltip.css

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

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

@@ -58,6 +58,6 @@ exports.DatePickerDay = (0, react_1.memo)((props) => {
     if (!day.dayLabel) {
         return react_1.default.createElement("div", null);
     }
-    return (react_1.default.createElement("button", { className: (0, cx_1.cx)("uxf-date-picker__cell uxf-date-picker__cell__day", isDisabled && classes_1.CLASSES.IS_DISABLED, isToday && "uxf-date-picker__cell__day--today", isSelected && "uxf-date-picker__cell__day--selected", !props.currentMonth && "uxf-date-picker__cell__day--not-current-month"), ref: isDisabled ? undefined : (0, composeRefs_1.composeRefs)(dayCellRef, innerRef), onClick: onClick, onKeyDown: onKeyDown, onMouseEnter: onMouseEnter, tabIndex: tabIndex }, day.dayLabel));
+    return (react_1.default.createElement("button", { className: (0, cx_1.cx)("uxf-date-picker__cell uxf-date-picker__cell__day", isDisabled && classes_1.CLASSES.IS_DISABLED, isToday && "uxf-date-picker__cell__day--today", isSelected && "uxf-date-picker__cell__day--selected", !props.currentMonth && "uxf-date-picker__cell__day--not-current-month"), ref: isDisabled ? undefined : (0, composeRefs_1.composeRefs)(dayCellRef, innerRef), onClick: onClick, onKeyDown: onKeyDown, onMouseEnter: onMouseEnter, tabIndex: tabIndex, type: "button" }, day.dayLabel));
 });
 exports.DatePickerDay.displayName = "DatePickerDay";

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

@@ -66,6 +66,6 @@ exports.DatePickerDecade = (0, react_1.memo)((props) => {
             react_1.default.createElement("p", { className: "uxf-date-picker__decade-label" }, decadeLabel),
             react_1.default.createElement(button_1.Button, { isIconButton: true, onClick: handleGoToNextDecadeClick, title: "Vp\u0159ed", variant: "text" },
                 react_1.default.createElement(icon_1.Icon, { name: "chevronRight", size: 16 }))),
-        react_1.default.createElement("div", { className: "uxf-date-picker__decade-calendar" }, years.map((year, index) => (react_1.default.createElement("button", { className: (0, cx_1.cx)("uxf-date-picker__cell uxf-date-picker__cell__year", !canGoToYear(year.date) && classes_1.CLASSES.IS_DISABLED, (0, dayjs_1.default)(year.date).year() === currentYear && "uxf-date-picker__cell__year--current"), key: year.yearLabel + index, onClick: handleSelectYear(year.date) }, year.yearLabel))))));
+        react_1.default.createElement("div", { className: "uxf-date-picker__decade-calendar" }, years.map((year, index) => (react_1.default.createElement("button", { className: (0, cx_1.cx)("uxf-date-picker__cell uxf-date-picker__cell__year", !canGoToYear(year.date) && classes_1.CLASSES.IS_DISABLED, (0, dayjs_1.default)(year.date).year() === currentYear && "uxf-date-picker__cell__year--current"), key: year.yearLabel + index, onClick: handleSelectYear(year.date), type: "button" }, year.yearLabel))))));
 });
 exports.DatePickerDecade.displayName = "DatePickerDecade";

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

@@ -69,6 +69,6 @@ exports.DatePickerYear = (0, react_1.memo)((props) => {
             react_1.default.createElement(button_1.Button, { variant: "text", onClick: handleYearClick }, yearLabel),
             react_1.default.createElement(button_1.Button, { disabled: !canGoToNextYear, isIconButton: true, onClick: canGoToNextYear ? handleGoToNextYear : undefined, title: "Nadch\u00E1zej\u00EDc\u00ED rok", variant: "text" },
                 react_1.default.createElement(icon_1.Icon, { name: "chevronRight", size: 16 }))),
-        react_1.default.createElement("div", { className: "uxf-date-picker__year-calendar" }, months.map((month, index) => (react_1.default.createElement("button", { className: (0, cx_1.cx)("uxf-date-picker__cell uxf-date-picker__cell__month", !canGoToMonth(month.date) && classes_1.CLASSES.IS_DISABLED, (0, dayjs_1.default)(month.date).month() === currentMonth && "uxf-date-picker__cell__month--current"), key: month.monthLabel + index, onClick: handleMonthClick(month.date) }, month.monthLabel))))));
+        react_1.default.createElement("div", { className: "uxf-date-picker__year-calendar" }, months.map((month, index) => (react_1.default.createElement("button", { className: (0, cx_1.cx)("uxf-date-picker__cell uxf-date-picker__cell__month", !canGoToMonth(month.date) && classes_1.CLASSES.IS_DISABLED, (0, dayjs_1.default)(month.date).month() === currentMonth && "uxf-date-picker__cell__month--current"), key: month.monthLabel + index, onClick: handleMonthClick(month.date), type: "button" }, month.monthLabel))))));
 });
 exports.DatePickerYear.displayName = "DatePickerYear";

package/dropzone/dropzone-input.d.ts

@@ -0,0 +1,18 @@
+import { FileResponse, FormControlProps, UploadOptions } from "@uxf/ui/types";
+import React, { ReactNode } from "react";
+import { IconName } from "../icon/types";
+import { Accept, DropzoneFile } from "./types";
+export interface DropzoneInputProps extends FormControlProps<DropzoneFile[]> {
+    accept?: Accept;
+    helperText?: ReactNode;
+    icon?: IconName;
+    label?: ReactNode;
+    maxFileSize?: number;
+    maxFilesCount?: number;
+    minFileSize?: number;
+    noClick?: boolean;
+    noDrag?: boolean;
+    onUploadError?: (err: unknown) => void;
+    onUploadFile: (file: File, options?: UploadOptions) => Promise<FileResponse>;
+}
+export declare const DropzoneInput: React.ForwardRefExoticComponent<DropzoneInputProps & React.RefAttributes<HTMLDivElement>>;

package/dropzone/dropzone-input.js

@@ -0,0 +1,120 @@
+"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.DropzoneInput = void 0;
+const classes_1 = require("@uxf/core/constants/classes");
+const composeRefs_1 = require("@uxf/core/utils/composeRefs");
+const cx_1 = require("@uxf/core/utils/cx");
+const react_1 = __importStar(require("react"));
+const react_dropzone_1 = require("react-dropzone");
+const icon_1 = require("../icon");
+function fileToFileResponse(file) {
+    const nameParts = file.name.split(".");
+    return {
+        id: -Math.round(Math.random() * 100000000),
+        uuid: "00000000-0000-0000-0000-000000000000",
+        name: nameParts.slice(0, -1).join("."),
+        extension: nameParts[nameParts.length - 1],
+    };
+}
+function progressHandler(progressEvent, file, onValuesChange, values) {
+    if (onValuesChange && values) {
+        onValuesChange(values.map((f) => f.id === file.id
+            ? {
+                ...f,
+                progress: progressEvent.lengthComputable
+                    ? Math.round((progressEvent.loaded / progressEvent.total) * 100)
+                    : null,
+            }
+            : f));
+    }
+}
+function fileUploadedHandler(uploadedFile, dropzoneFile, onValuesChange, values) {
+    if (onValuesChange && values) {
+        onValuesChange(values.map((f) => f.id === dropzoneFile.id ? { ...uploadedFile, progress: 100, originalFile: f.originalFile } : f));
+    }
+}
+function fileRejectedHandler(err, dropzoneFile, onValuesChange, values, onUploadError) {
+    onUploadError === null || onUploadError === void 0 ? void 0 : onUploadError(err);
+    dropzoneFile.error = err;
+    if (onValuesChange && values) {
+        onValuesChange(values.map((f) => (f.id === dropzoneFile.id ? { ...f, error: err } : f)));
+    }
+}
+exports.DropzoneInput = (0, react_1.forwardRef)((props, ref) => {
+    var _a;
+    const refValue = (0, react_1.useRef)();
+    refValue.current = props.value;
+    const handleFileDrop = async (acceptedFiles) => {
+        if (!props.onChange) {
+            return;
+        }
+        const files = acceptedFiles.map((file) => ({
+            ...fileToFileResponse(file),
+            abortController: new AbortController(),
+            originalFile: file,
+            progress: 0,
+        }));
+        props.onChange(props.value ? [...props.value, ...files] : files);
+        for (const file of files) {
+            if (!file.originalFile) {
+                file.error = "File not found";
+                continue;
+            }
+            props
+                .onUploadFile(file.originalFile, {
+                abortController: file.abortController,
+                onUploadProgress: (e) => progressHandler(e, file, props.onChange, refValue.current),
+            })
+                .then((res) => fileUploadedHandler(res, file, props.onChange, refValue.current))
+                .catch((err) => fileRejectedHandler(err, file, props.onChange, refValue.current, props.onUploadError));
+        }
+    };
+    const { getRootProps, getInputProps, rootRef } = (0, react_dropzone_1.useDropzone)({
+        accept: props.accept,
+        disabled: props.isDisabled,
+        maxFiles: props.maxFilesCount,
+        maxSize: props.maxFileSize,
+        minSize: props.minFileSize,
+        multiple: props.maxFilesCount !== 1,
+        noClick: props.noClick,
+        noDrag: props.noDrag,
+        onDrop: handleFileDrop,
+        preventDropOnDocument: props.noDrag,
+    });
+    return (react_1.default.createElement("div", { className: "uxf-dropzone" },
+        react_1.default.createElement("label", { ...getRootProps({
+                className: (0, cx_1.cx)("uxf-dropzone__label", props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.noClick && "cursor-auto"),
+            }), ref: (0, composeRefs_1.composeRefs)(ref, rootRef) },
+            react_1.default.createElement(icon_1.Icon, { className: "uxf-dropzone__label__icon", name: (_a = props.icon) !== null && _a !== void 0 ? _a : "cloud" }),
+            typeof props.label === "string" ? react_1.default.createElement("span", null, props.label) : props.label,
+            react_1.default.createElement("input", { ...getInputProps({
+                    className: "uxf-dropzone__input",
+                    name: props.name,
+                    type: "file",
+                }) })),
+        props.helperText && (react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-helper-text", props.isInvalid && classes_1.CLASSES.IS_INVALID) }, props.helperText))));
+});
+exports.DropzoneInput.displayName = "DropzoneInput";

package/dropzone/dropzone-list.d.ts

@@ -0,0 +1,10 @@
+import { FC, ReactNode } from "react";
+import { FormControlProps } from "../types";
+import { DropzoneFile } from "./types";
+export interface DropzoneListProps extends FormControlProps<DropzoneFile[]> {
+    errorText?: string;
+    onAbortWarning?: string;
+    onRemoveWarning?: string;
+    renderItem?: (file: DropzoneFile) => ReactNode;
+}
+export declare const DropzoneList: FC<DropzoneListProps>;

package/dropzone/dropzone-list.js

@@ -0,0 +1,67 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DropzoneList = void 0;
+const classes_1 = require("@uxf/core/constants/classes");
+const cx_1 = require("@uxf/core/utils/cx");
+const react_1 = __importDefault(require("react"));
+const icon_1 = require("../icon");
+const loader_1 = require("../loader/loader");
+function formatBytes(bytes, decimals = 2) {
+    const k = 1024;
+    const dm = decimals < 0 ? 0 : decimals;
+    const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
+}
+function getIconName(extension) {
+    switch (extension) {
+        case "jpg":
+        case "jpeg":
+        case "png":
+        case "gif":
+            return "imageFile";
+        case "mp4":
+        case "avi":
+        case "mov":
+            return "videoFile";
+        default:
+            return "file";
+    }
+}
+const DropzoneList = (props) => {
+    const onRemove = (file, isUploading) => () => {
+        var _a, _b, _c;
+        // eslint-disable-next-line no-alert
+        if (isUploading && props.value && confirm(props.onAbortWarning || "Do you want to abort the file?")) {
+            (_a = file.abortController) === null || _a === void 0 ? void 0 : _a.abort();
+            (_b = props.onChange) === null || _b === void 0 ? void 0 : _b.call(props, props.value.filter((f) => f.id !== file.id));
+            return;
+        }
+        // eslint-disable-next-line no-alert
+        if (!isUploading && props.value && confirm(props.onRemoveWarning || "Do you want to delete the file?")) {
+            (_c = props.onChange) === null || _c === void 0 ? void 0 : _c.call(props, props.value.filter((f) => f.id !== file.id));
+        }
+    };
+    if (!props.value || props.value.length === 0) {
+        return null;
+    }
+    return (react_1.default.createElement("ul", { className: "uxf-dropzone-list" }, props.value.map((file) => {
+        var _a, _b, _c;
+        const isUploading = file.id < 0 && !file.error;
+        return ((_b = (_a = props.renderItem) === null || _a === void 0 ? void 0 : _a.call(props, file)) !== null && _b !== void 0 ? _b : (react_1.default.createElement("li", { className: "uxf-dropzone-list__item-wrapper", key: file.id },
+            react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-dropzone-list__item", !!file.error && classes_1.CLASSES.IS_INVALID) },
+                react_1.default.createElement("div", { className: "uxf-dropzone-list__item__block" },
+                    react_1.default.createElement(icon_1.Icon, { className: "uxf-dropzone-list__item__block__icon", name: getIconName(file.extension) }),
+                    react_1.default.createElement("span", { className: "uxf-dropzone-list__item__block__file-name" }, file.name + "." + file.extension)),
+                react_1.default.createElement("div", { className: "uxf-dropzone-list__item__block" },
+                    isUploading ? (react_1.default.createElement(loader_1.Loader, { size: "sm" })) : (!file.error &&
+                        ((_c = file.originalFile) === null || _c === void 0 ? void 0 : _c.size) && (react_1.default.createElement("span", { className: "uxf-dropzone-list__item__block__file-size" }, formatBytes(file.originalFile.size)))),
+                    react_1.default.createElement("button", { className: "uxf-dropzone-list__item__block__remove-button", onClick: onRemove(file, isUploading), type: "button" },
+                        react_1.default.createElement(icon_1.Icon, { className: "uxf-dropzone-list__item__block__remove-button__icon", name: "xmarkLarge" })))),
+            !!file.error && (react_1.default.createElement("span", { className: (0, cx_1.cx)("uxf-helper-text", classes_1.CLASSES.IS_INVALID) }, props.errorText || "File upload error")))));
+    })));
+};
+exports.DropzoneList = DropzoneList;

package/dropzone/dropzone.stories.d.ts

@@ -0,0 +1,12 @@
+import { FileResponse, UploadOptions } from "@uxf/ui/types/file-response";
+import React from "react";
+declare const _default: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./dropzone-input").DropzoneInputProps & React.RefAttributes<HTMLDivElement>> & {
+        List: React.FC<import("./dropzone-list").DropzoneListProps>;
+    };
+};
+export default _default;
+export declare function uploadFile(file: File, uploadOptions?: UploadOptions): Promise<FileResponse>;
+export declare function Default(): JSX.Element;
+export declare function ComponentStructure(): JSX.Element;

package/dropzone/dropzone.stories.js

@@ -0,0 +1,98 @@
+"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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComponentStructure = exports.Default = exports.uploadFile = void 0;
+const component_structure_analyzer_1 = __importDefault(require("@uxf/ui/utils/component-structure-analyzer"));
+const react_1 = __importStar(require("react"));
+const index_1 = require("./index");
+exports.default = {
+    title: "UI/Dropzone",
+    component: index_1.Dropzone,
+};
+function getRandomUuid() {
+    return "00000000-0000-0000-0000-000000000000"
+        .split("-")
+        .map((el) => Array(el.length)
+        .fill(0)
+        .map(() => Math.round(Math.random() * 9).toString())
+        .join(""))
+        .join("-");
+}
+function uploadFile(file, uploadOptions) {
+    // axios.put("/api/upload", file, { signal: uploadOptions?.abortController?.signal });
+    return new Promise((resolve) => {
+        const time = file.size / 10;
+        const interval = time / 10;
+        let loaded = 0;
+        const timeoutTimer = window.setTimeout(() => {
+            const nameParts = file.name.split(".");
+            resolve({
+                id: Math.round(Math.random() * 100000000),
+                uuid: getRandomUuid(),
+                name: nameParts.slice(0, -1).join("."),
+                extension: nameParts[nameParts.length - 1],
+            });
+        }, time);
+        const intervalTimer = window.setInterval(() => {
+            var _a, _b;
+            if ((_a = uploadOptions === null || uploadOptions === void 0 ? void 0 : uploadOptions.abortController) === null || _a === void 0 ? void 0 : _a.signal.aborted) {
+                clearInterval(intervalTimer);
+                clearTimeout(timeoutTimer);
+                return;
+            }
+            loaded += (file.size / time) * interval;
+            (_b = uploadOptions === null || uploadOptions === void 0 ? void 0 : uploadOptions.onUploadProgress) === null || _b === void 0 ? void 0 : _b.call(uploadOptions, {
+                lengthComputable: true,
+                loaded,
+                total: file.size,
+            });
+        }, interval);
+    });
+}
+exports.uploadFile = uploadFile;
+function Default() {
+    const [files, setFiles] = (0, react_1.useState)([]);
+    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: setFiles, onUploadFile: 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: setFiles, onUploadFile: uploadFile, value: files }),
+        react_1.default.createElement(index_1.Dropzone, { accept: { "image/*": [] }, label: "Only images upload", onChange: setFiles, onUploadFile: uploadFile, value: files }),
+        react_1.default.createElement(index_1.Dropzone, { label: "Single file upload", maxFilesCount: 1, onChange: setFiles, onUploadFile: uploadFile, value: files }),
+        react_1.default.createElement(index_1.Dropzone, { isDisabled: true, label: "Disabled dropzone", onChange: setFiles, onUploadFile: uploadFile, value: files }),
+        react_1.default.createElement(index_1.Dropzone.List, { errorText: "Chyba p\u0159i nahr\u00E1v\u00E1n\u00ED souboru", onAbortWarning: "Opravdu chcete p\u0159eru\u0161it nahr\u00E1v\u00E1n\u00ED?", onChange: setFiles, onRemoveWarning: "Opravdu chcete soubor smazat?", value: files }),
+        react_1.default.createElement(index_1.Dropzone.List, { onChange: setFiles, value: files, renderItem: (file) => (react_1.default.createElement("li", { key: file.id },
+                react_1.default.createElement("pre", null, JSON.stringify(file, null, 4)))) })));
+    return (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" }, storyDropzone),
+        react_1.default.createElement("div", { className: "dark space-y-2 bg-gray-900 p-20 lg:w-1/2" }, storyDropzone)));
+}
+exports.Default = Default;
+function ComponentStructure() {
+    return (react_1.default.createElement(component_structure_analyzer_1.default, null,
+        react_1.default.createElement(index_1.Dropzone, null)));
+}
+exports.ComponentStructure = ComponentStructure;

package/dropzone/index.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export { DropzoneInputProps } from "./dropzone-input";
+export { DropzoneListProps } from "./dropzone-list";
+export declare const Dropzone: import("react").ForwardRefExoticComponent<import("./dropzone-input").DropzoneInputProps & import("react").RefAttributes<HTMLDivElement>> & {
+    List: import("react").FC<import("./dropzone-list").DropzoneListProps>;
+};

package/dropzone/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Dropzone = void 0;
+const dropzone_input_1 = require("./dropzone-input");
+const dropzone_list_1 = require("./dropzone-list");
+exports.Dropzone = Object.assign(dropzone_input_1.DropzoneInput, { List: dropzone_list_1.DropzoneList });

package/dropzone/types.d.ts

@@ -0,0 +1,10 @@
+import { FileResponse } from "@uxf/ui/types";
+export interface DropzoneFile extends FileResponse {
+    abortController?: AbortController;
+    error?: unknown;
+    originalFile?: File;
+    progress: number | null;
+}
+export interface Accept {
+    [key: string]: string[];
+}

package/file-input/file-input-base.d.ts

@@ -1,6 +1,5 @@
+import { FileResponse, FormControlProps } from "@uxf/ui/types";
 import React from "react";
-import { FormControlProps } from "../types";
-import { FileResponse } from "./types";
 export interface BaseFileInputProps extends FormControlProps<string> {
     "aria-describedby"?: string;
     accept?: string;

package/loader/loader.d.ts

@@ -1,2 +1,5 @@
-import React from "react";
-export declare const Loader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+import React, { HTMLAttributes } from "react";
+export interface LoaderProps extends HTMLAttributes<HTMLDivElement> {
+    size?: "default" | "lg" | "sm";
+}
+export declare const Loader: React.ForwardRefExoticComponent<LoaderProps & React.RefAttributes<HTMLDivElement>>;

package/loader/loader.js

@@ -5,9 +5,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Loader = void 0;
 const cx_1 = require("@uxf/core/utils/cx");
-const react_1 = __importDefault(require("react"));
 const forwardRef_1 = require("@uxf/core/utils/forwardRef");
+const react_1 = __importDefault(require("react"));
 exports.Loader = (0, forwardRef_1.forwardRef)("Loader", (props, ref) => {
-    const loaderClassName = (0, cx_1.cx)("uxf-loader", props.className);
+    var _a;
+    const loaderClassName = (0, cx_1.cx)("uxf-loader", `uxf-loader--size-${(_a = props.size) !== null && _a !== void 0 ? _a : "default"}`, props.className);
     return react_1.default.createElement("span", { ref: ref, className: loaderClassName });
 });

package/loader/loader.stories.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 declare const _default: {
     title: string;
-    component: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+    component: React.ForwardRefExoticComponent<import("./loader").LoaderProps & React.RefAttributes<HTMLDivElement>>;
 };
 export default _default;
 export declare function Default(): JSX.Element;

package/loader/loader.stories.js

@@ -12,8 +12,9 @@ exports.default = {
 };
 function Default() {
     const loaders = (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(loader_1.Loader, { size: "sm" }),
         react_1.default.createElement(loader_1.Loader, null),
-        react_1.default.createElement(loader_1.Loader, { className: "h-6 w-6" })));
+        react_1.default.createElement(loader_1.Loader, { size: "lg" })));
     return (react_1.default.createElement("div", { className: "flex flex-col lg:flex-row" },
         react_1.default.createElement("div", { className: "light space-y-4 space-x-4 rounded bg-white p-8" }, loaders),
         react_1.default.createElement("div", { className: "dark space-y-4 space-x-4 rounded bg-gray-900 p-8 text-white" }, loaders)));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/ui",
-  "version": "1.0.0-beta.100",
+  "version": "1.0.0-beta.102",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -20,7 +20,8 @@
     "@uxf/styles": "^2.1.2",
     "color2k": "^2.0.1",
     "dayjs": "^1.11.7",
-    "jump.js": "^1.0.2"
+    "jump.js": "^1.0.2",
+    "react-dropzone": "^14.2.3"
   },
   "devDependencies": {
     "@types/jump.js": "^1.0.4",

package/tooltip/index.d.ts

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

package/tooltip/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("./tooltip"), exports);

package/tooltip/tooltip.d.ts

@@ -0,0 +1,7 @@
+import React, { ReactElement, ReactNode } from "react";
+import { TooltipOptions } from "./use-tooltip";
+export interface TooltipProps extends Omit<TooltipOptions, "arrowRef"> {
+    children: ReactElement;
+    content: ReactNode;
+}
+export declare const Tooltip: React.ForwardRefExoticComponent<TooltipProps & React.RefAttributes<HTMLElement>>;

package/tooltip/tooltip.js

@@ -0,0 +1,79 @@
+"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.Tooltip = void 0;
+const react_1 = require("@floating-ui/react");
+const react_2 = __importStar(require("react"));
+const forwardRef_1 = require("@uxf/core/utils/forwardRef");
+const use_tooltip_1 = require("./use-tooltip");
+const composeRefs_1 = require("@uxf/core/utils/composeRefs");
+const STATIC_SIDES = {
+    top: "bottom",
+    right: "left",
+    bottom: "top",
+    left: "right",
+};
+exports.Tooltip = (0, forwardRef_1.forwardRef)("Tooltip", ({ children, content, ...options }, ref) => {
+    var _a, _b, _c, _d;
+    const arrowRef = (0, react_2.useRef)(null);
+    const tooltip = (0, use_tooltip_1.useTooltip)({ arrowRef, ...options });
+    const { getReferenceProps, getFloatingProps } = (0, react_1.useInteractions)([
+        (0, react_1.useHover)(tooltip.context),
+        (0, react_1.useFocus)(tooltip.context),
+        (0, react_1.useRole)(tooltip.context, { role: "tooltip" }),
+        (0, react_1.useDismiss)(tooltip.context),
+    ]);
+    const arrowX = (_a = tooltip.middlewareData.arrow) === null || _a === void 0 ? void 0 : _a.x;
+    const arrowY = (_b = tooltip.middlewareData.arrow) === null || _b === void 0 ? void 0 : _b.y;
+    const staticSide = STATIC_SIDES[tooltip.placement.split("-")[0]];
+    const stableRef = (0, react_2.useMemo)(() => (0, composeRefs_1.composeRefs)(ref, tooltip.reference, children.ref), [ref, tooltip.reference, children]);
+    return (react_2.default.createElement(react_2.default.Fragment, null,
+        (0, react_2.cloneElement)(children, getReferenceProps({
+            ref: stableRef,
+            ...children.props,
+            "data-state": tooltip.open ? "open" : "closed",
+        })),
+        tooltip.open && (react_2.default.createElement("div", { ...getFloatingProps({
+                ref: tooltip.floating,
+                style: {
+                    position: tooltip.strategy,
+                    top: (_c = tooltip.y) !== null && _c !== void 0 ? _c : 0,
+                    left: (_d = tooltip.x) !== null && _d !== void 0 ? _d : 0,
+                    visibility: tooltip.x === null ? "hidden" : "visible",
+                },
+                className: "uxf-tooltip__content",
+            }) },
+            content,
+            react_2.default.createElement("div", { className: "uxf-tooltip__arrow", ref: arrowRef, style: {
+                    height: "16px",
+                    left: arrowX !== undefined ? `${arrowX}px` : "",
+                    position: "absolute",
+                    top: arrowY !== undefined ? `${arrowY}px` : "",
+                    transform: "rotate(45deg)",
+                    width: "16px",
+                    zIndex: "-1",
+                    [staticSide]: "-6px",
+                } })))));
+});

package/tooltip/tooltip.stories.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+declare const _default: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./tooltip").TooltipProps & React.RefAttributes<HTMLElement>>;
+};
+export default _default;
+export declare function Default(): JSX.Element;

package/tooltip/tooltip.stories.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const react_1 = __importDefault(require("react"));
+const tooltip_1 = require("./tooltip");
+const chip_1 = require("../chip");
+exports.default = {
+    title: "UI/Tooltip",
+    component: tooltip_1.Tooltip,
+};
+function Default() {
+    const sides = ["top", "bottom", "bottom-start", "left", "right"];
+    return (react_1.default.createElement("div", { className: "grid h-96 place-items-center" }, sides.map((placement) => (react_1.default.createElement(tooltip_1.Tooltip, { content: "My tooltip content", key: placement, placement: placement },
+        react_1.default.createElement(chip_1.Chip, { color: "green" }, placement))))));
+}
+exports.Default = Default;

package/tooltip/use-tooltip.d.ts

@@ -0,0 +1,28 @@
+import { MutableRefObject } from "react";
+import { Placement } from "@floating-ui/react";
+export interface TooltipOptions {
+    arrowRef: MutableRefObject<null>;
+    offset?: number;
+    placement?: Placement;
+    shiftPadding?: number;
+}
+export declare function useTooltip(options: TooltipOptions): {
+    placement: Placement;
+    strategy: import("@floating-ui/react").Strategy;
+    middlewareData: import("@floating-ui/react").MiddlewareData;
+    x: number | null;
+    y: number | null;
+    update: () => void;
+    reference: (node: import("@floating-ui/react").ReferenceType | null) => void;
+    floating: (node: HTMLElement | null) => void;
+    positionReference: (node: import("@floating-ui/react").ReferenceType | null) => void;
+    context: import("@floating-ui/react").FloatingContext<import("@floating-ui/react").ReferenceType>;
+    refs: import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
+    elements: import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
+    isPositioned: boolean;
+    getReferenceProps: (userProps?: import("react").HTMLProps<Element> | undefined) => Record<string, unknown>;
+    getFloatingProps: (userProps?: import("react").HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
+    getItemProps: (userProps?: import("react").HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
+    open: boolean;
+    setOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+};

package/tooltip/use-tooltip.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTooltip = void 0;
+const react_1 = require("react");
+const react_2 = require("@floating-ui/react");
+function useTooltip(options) {
+    var _a, _b;
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const data = (0, react_2.useFloating)({
+        placement: options.placement,
+        open,
+        onOpenChange: setOpen,
+        whileElementsMounted: react_2.autoUpdate,
+        middleware: [
+            (0, react_2.offset)((_a = options.offset) !== null && _a !== void 0 ? _a : 16),
+            (0, react_2.flip)(),
+            (0, react_2.shift)({ padding: (_b = options.shiftPadding) !== null && _b !== void 0 ? _b : 8 }),
+            (0, react_2.arrow)({ element: options.arrowRef }),
+        ],
+    });
+    const context = data.context;
+    const hover = (0, react_2.useHover)(context, {
+        move: false,
+    });
+    const dismiss = (0, react_2.useDismiss)(context);
+    const role = (0, react_2.useRole)(context, { role: "tooltip" });
+    const interactions = (0, react_2.useInteractions)([hover, dismiss, role]);
+    return (0, react_1.useMemo)(() => ({
+        open,
+        setOpen,
+        ...interactions,
+        ...data,
+    }), [open, setOpen, interactions, data]);
+}
+exports.useTooltip = useTooltip;

package/types/file-response.d.ts

@@ -0,0 +1,12 @@
+export interface FileResponse {
+    extension: string;
+    id: number;
+    name: string;
+    namespace?: string | null;
+    uuid: string;
+}
+export interface UploadOptions {
+    abortController?: AbortController;
+    onUploadProgress?: (progressEvent: UploadProgressEvent) => void;
+}
+export declare type UploadProgressEvent = Pick<ProgressEvent, "lengthComputable" | "loaded" | "total">;

package/types/file-response.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/types/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./color";
 export * from "./form-control-props";
+export * from "./file-response";

package/types/index.js

@@ -16,3 +16,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./color"), exports);
 __exportStar(require("./form-control-props"), exports);
+__exportStar(require("./file-response"), exports);

package/utils/icons-config.js

@@ -65,6 +65,21 @@ module.exports = {
         height: 512,
         data: `<path d="M144 480C64.5 480 0 415.5 0 336c0-62.8 40.2-116.2 96.2-135.9-.1-2.7-.2-5.4-.2-8.1 0-88.4 71.6-160 160-160 59.3 0 111 32.2 138.7 80.2C409.9 102 428.3 96 448 96c53 0 96 43 96 96 0 12.2-2.3 23.8-6.4 34.6C596 238.4 640 290.1 640 352c0 70.7-57.3 128-128 128H144zm79-217c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l39-39V392c0 13.3 10.7 24 24 24s24-10.7 24-24V257.9l39 39c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-80-80c-9.4-9.4-24.6-9.4-33.9 0l-80 80z" fill="currentColor"/>`,
     },
+    file: {
+        width: 384,
+        height: 512,
+        data: `<path d="M0 64C0 28.65 28.65 0 64 0h165.5c17 0 33.2 6.743 45.2 18.75l90.6 90.55c12 12 18.7 28.2 18.7 45.2V448c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V64zm336 384V160h-80c-17.7 0-32-14.3-32-32V48H64c-8.84 0-16 7.16-16 16v384c0 8.8 7.16 16 16 16h256c8.8 0 16-7.2 16-16z" fill="currentColor" />`,
+    },
+    imageFile: {
+        width: 384,
+        height: 512,
+        data: `<path d="m365.3 93.38-74.63-74.64C278.6 6.742 262.3 0 245.4 0H64C28.65 0 0 28.65 0 64l.0065 384c0 35.34 28.65 64 64 64H320c35.2 0 64-28.8 64-64V138.6c0-16.9-6.7-33.2-18.7-45.22zM336 448c0 8.836-7.164 16-16 16H64.02c-8.838 0-16-7.164-16-16L48 64.13c0-8.836 7.164-16 16-16h160V128c0 17.67 14.33 32 32 32h79.1v288zM215.3 292c-4.68 0-9.051 2.34-11.65 6.234L164 357.8l-11.68-17.53c-2.62-3.97-7.02-6.27-11.62-6.27-4.682 0-9.053 2.34-11.65 6.234l-46.67 70c-2.865 4.297-3.131 9.82-.6953 14.37C84.09 429.2 88.84 432 93.1 432h196c5.163 0 9.907-2.844 12.34-7.395 2.436-4.551 2.17-10.07-.6953-14.37l-74.67-112C224.4 294.3 220 292 215.3 292zm-87.3-4c17.67 0 32-14.33 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32z" fill="currentColor" />`,
+    },
+    videoFile: {
+        width: 384,
+        height: 512,
+        data: `<path d="m365.3 93.38-74.63-74.64C278.6 6.742 262.3 0 245.4 0H64C28.65 0 0 28.65 0 64l.0065 384c0 35.34 28.65 64 64 64H320c35.2 0 64-28.8 64-64V138.6c0-16.9-6.7-33.2-18.7-45.22zM336 448c0 8.836-7.164 16-16 16H64.02c-8.838 0-16-7.164-16-16L48 64.13c0-8.836 7.164-16 16-16h160V128c0 17.67 14.33 32 32 32h79.1v288zm-96-160c0-17.67-14.33-32-32-32h-96c-17.67 0-32 14.33-32 32v96c0 17.67 14.33 32 32 32h96c17.67 0 32-14.33 32-32v-16.52l43.84 30.2c8.46 5.82 20.16-.08 20.16-10.28V284.6c0-10.16-11.64-16.16-20.16-10.32L240 304.5V288z" fill="currentColor" />`,
+    },
     user: {
         width: 448,
         height: 512,

package/file-input/types.d.ts

@@ -1,7 +0,0 @@
-export interface FileResponse {
-    extension: string;
-    id: number;
-    name: string;
-    namespace?: string | null;
-    uuid: string;
-}