@uxf/ui 11.31.0 → 11.33.0

package/file-input/file-input.js

@@ -60,13 +60,13 @@ exports.FileInput = (0, react_1.forwardRef)((props, ref) => {
         }
         props.onChange(value, event);
     };
-    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, name: props.name },
+    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, hiddenLabel: props.hiddenLabel, inputId: id, isRequired: props.isRequired, label: props.label, name: props.name },
         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, maxFileSize: props.maxFileSize, name: props.name, onBlur: input.onBlur, onChange: onChange, onFocus: input.onFocus, onUploadError: props.onUploadError, onUploadFile: onUploadFile, ref: (0, compose_refs_1.composeRefs)(ref, innerRef), 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-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" },
-                    (context === null || context === void 0 ? void 0 : context.domain) && props.value ? (react_1.default.createElement("a", { className: "uxf-file-input__label__wrapper__file-name-link", href: (0, get_file_url_1.getFileUrl)(context.domain, props.value), target: "_blank", rel: "noreferrer noopenner" }, fileName)) : (react_1.default.createElement("span", { className: "uxf-file-input__label__wrapper__file-name" }, fileName)),
+                    (context === null || context === void 0 ? void 0 : context.domain) && props.value ? (react_1.default.createElement("a", { className: "uxf-file-input__label__wrapper__file-name-link", href: (0, get_file_url_1.getFileUrl)(context.domain, props.value), rel: "noreferrer noopenner", target: "_blank" }, fileName)) : (react_1.default.createElement("span", { className: "uxf-file-input__label__wrapper__file-name" }, fileName)),
                     props.value && !props.isDisabled && !props.isReadOnly && props.isClearable && (react_1.default.createElement(input_1.Input.RemoveButton, { onChange: onChange })))))));
 });
 exports.FileInput.displayName = "UxfUiFileInput";

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

@@ -23,7 +23,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Default = void 0;
+exports.Default = Default;
 const react_1 = __importStar(require("react"));
 const action_1 = require("../utils/action");
 const upload_file_mock_1 = require("../utils/mocks/upload-file.mock");
@@ -39,11 +39,9 @@ function Default() {
         // eslint-disable-next-line no-console
         console.log("Upload error", err);
     };
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("div", { className: "space-y-2 p-20" },
-            react_1.default.createElement("div", { className: "space-y-2" },
-                react_1.default.createElement(index_1.FileInput, { label: "Default file input", onChange: onChange, onUploadError: onUploadError, onUploadFile: upload_file_mock_1.uploadFile, value: value, name: "file-input" }),
-                react_1.default.createElement(index_1.FileInput, { helperText: "Error file input", id: "error-file-input", isInvalid: true, label: "Error file input", onChange: onChange, onUploadError: onUploadError, onUploadFile: upload_file_mock_1.uploadFile, value: value, isClearable: true, name: "file-input-error-message" }),
-                react_1.default.createElement(index_1.FileInput, { helperText: "Readonly/disabled file input", label: "Readonly/disabled file input", isReadOnly: true, isDisabled: true, onChange: onChange, onUploadError: onUploadError, onUploadFile: upload_file_mock_1.uploadFile, value: value, name: "file-input-read-only" })))));
+    return (react_1.default.createElement("div", { className: "space-y-2 p-20" },
+        react_1.default.createElement("div", { className: "space-y-2" },
+            react_1.default.createElement(index_1.FileInput, { label: "Default file input", name: "file-input", onChange: onChange, onUploadError: onUploadError, onUploadFile: upload_file_mock_1.uploadFile, value: value }),
+            react_1.default.createElement(index_1.FileInput, { helperText: "Error file input", id: "error-file-input", isClearable: true, isInvalid: true, label: "Error file input", name: "file-input-error-message", onChange: onChange, onUploadError: onUploadError, onUploadFile: upload_file_mock_1.uploadFile, value: value }),
+            react_1.default.createElement(index_1.FileInput, { helperText: "Readonly/disabled file input", isDisabled: true, isReadOnly: true, label: "Readonly/disabled file input", name: "file-input-read-only", onChange: onChange, onUploadError: onUploadError, onUploadFile: upload_file_mock_1.uploadFile, value: value }))));
 }
-exports.Default = Default;

package/flash-messages/flash-messages-service.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Notification } from "@uxf/ui/flash-messages/flash-message";
 import { FlashMessagesRef } from "@uxf/ui/flash-messages/flash-messages";
 export declare function getFlashMessagesRef(): import("react").RefObject<FlashMessagesRef>;

package/flash-messages/flash-messages-service.js

@@ -1,15 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.flashMessage = exports.getFlashMessagesRef = void 0;
+exports.getFlashMessagesRef = getFlashMessagesRef;
+exports.flashMessage = flashMessage;
 const react_1 = require("react");
 const flashMessagesRef = (0, react_1.createRef)();
 function getFlashMessagesRef() {
     return flashMessagesRef;
 }
-exports.getFlashMessagesRef = getFlashMessagesRef;
 function flashMessage(notification) {
     if (flashMessagesRef.current) {
         flashMessagesRef.current.open(notification);
     }
 }
-exports.flashMessage = flashMessage;

package/flash-messages/flash-messages.js

@@ -32,7 +32,7 @@ exports.FlashMessages = (0, react_2.forwardRef)((props, ref) => {
     const [notifications, setNotifications] = (0, react_2.useState)([]);
     const permanentNotificationsRef = (0, react_2.useRef)(null);
     const permanentNotifications = notifications.filter((notification) => !notification.autoDismiss);
-    const dismissableNotifications = notifications.filter((notification) => !!notification.autoDismiss);
+    const dismissableNotifications = notifications.filter((notification) => Boolean(notification.autoDismiss));
     const [lastToastHeight, setLastToastHeight] = (0, react_2.useState)(0);
     const lastToastRef = (0, react_2.useRef)(null);
     const [isCollapsed, setIsCollapsed] = (0, react_2.useState)(true);
@@ -91,7 +91,7 @@ exports.FlashMessages = (0, react_2.forwardRef)((props, ref) => {
         dismissableNotifications.length > 0 && (react_2.default.createElement("div", { ...clickableProps },
             react_2.default.createElement("div", null, dismissableNotifications.map((notification, index) => {
                 const isLast = index === dismissableNotifications.length - 1;
-                return (react_2.default.createElement(react_1.Transition, { key: notification.id, appear: true, show: true, enterFrom: "uxf-flash-message-wrapper--enter-from", enterTo: "uxf-flash-message-wrapper--enter-to", className: "uxf-flash-message-wrapper", ref: isLast ? lastToastRef : null, style: isLast
+                return (react_2.default.createElement(react_1.Transition, { appear: true, className: "uxf-flash-message-wrapper", enterFrom: "uxf-flash-message-wrapper--enter-from", enterTo: "uxf-flash-message-wrapper--enter-to", key: notification.id, ref: isLast ? lastToastRef : null, show: true, style: isLast
                         ? {}
                         : {
                             "--flash-message-height": `${lastToastHeight}px`,
@@ -99,9 +99,9 @@ exports.FlashMessages = (0, react_2.forwardRef)((props, ref) => {
                     react_2.default.createElement(flash_message_1.FlashMessage, { notification: notification, onClose: () => close(notification) })));
             })))),
         showDivider && react_2.default.createElement("hr", { className: "uxf-flash-messages__divider" }),
-        permanentNotifications.length > 0 && (react_2.default.createElement("div", { ref: permanentNotificationsRef, className: "uxf-flash-messages__permanent" },
+        permanentNotifications.length > 0 && (react_2.default.createElement("div", { className: "uxf-flash-messages__permanent", ref: permanentNotificationsRef },
             react_2.default.createElement("div", null, permanentNotifications.map((notification) => {
-                return (react_2.default.createElement(react_1.Transition, { key: notification.id, appear: true, show: true, enterFrom: "uxf-flash-message-wrapper--enter-from", enterTo: "uxf-flash-message-wrapper--enter-to", className: "uxf-flash-message-wrapper" },
+                return (react_2.default.createElement(react_1.Transition, { appear: true, className: "uxf-flash-message-wrapper", enterFrom: "uxf-flash-message-wrapper--enter-from", enterTo: "uxf-flash-message-wrapper--enter-to", key: notification.id, show: true },
                     react_2.default.createElement(flash_message_1.FlashMessage, { notification: notification, onClose: () => close(notification) })));
             })))))) : null;
 });

package/flash-messages/flash-messages.stories.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Default = void 0;
+exports.Default = Default;
 const button_1 = require("@uxf/ui/button");
 const icon_1 = require("@uxf/ui/icon");
 const react_1 = __importDefault(require("react"));
@@ -73,4 +73,3 @@ function Default() {
                 });
             } }, "Flash message, variant success, random text")));
 }
-exports.Default = Default;

package/form-component/form-component.js

@@ -31,9 +31,9 @@ const label_1 = require("../label");
 exports.FormComponent = (0, react_1.forwardRef)((props, ref) => {
     var _a;
     const helperTextClassName = (0, cx_1.cx)("uxf-helper-text", props.errorId && classes_1.CLASSES.IS_INVALID);
-    return (react_1.default.createElement("div", { className: `uxf-form-component ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`, ref: ref, "data-name": props.name },
+    return (react_1.default.createElement("div", { className: `uxf-form-component ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`, "data-name": props.name, ref: ref },
         react_1.default.createElement("div", { className: "uxf-form-component__label" },
-            react_1.default.createElement(label_1.Label, { isHidden: props.hiddenLabel, isRequired: props.isRequired, htmlFor: props.inputId, form: props.form }, props.label)),
+            react_1.default.createElement(label_1.Label, { form: props.form, htmlFor: props.inputId, isHidden: props.hiddenLabel, isRequired: props.isRequired }, props.label)),
         react_1.default.createElement("div", { className: "uxf-form-component__input" },
             props.children,
             props.helperText && (react_1.default.createElement("div", { className: helperTextClassName, id: props.errorId }, props.helperText)))));

package/form-component/form-component.stories.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Default = void 0;
+exports.Default = Default;
 const react_1 = __importDefault(require("react"));
 const form_component_1 = require("./form-component");
 exports.default = {
@@ -13,13 +13,12 @@ exports.default = {
 };
 function Default() {
     return (react_1.default.createElement("div", { className: "space-y-4" },
-        react_1.default.createElement(form_component_1.FormComponent, { inputId: "default", helperText: "helper text", label: "Default", name: "form-component" },
+        react_1.default.createElement(form_component_1.FormComponent, { helperText: "helper text", inputId: "default", label: "Default", name: "form-component" },
             react_1.default.createElement("div", null, "Default")),
-        react_1.default.createElement(form_component_1.FormComponent, { inputId: "default", helperText: "helper text", label: "Default", isRequired: true, name: "form-component-required" },
+        react_1.default.createElement(form_component_1.FormComponent, { helperText: "helper text", inputId: "default", isRequired: true, label: "Default", name: "form-component-required" },
             react_1.default.createElement("div", null, "Is required")),
-        react_1.default.createElement(form_component_1.FormComponent, { inputId: "error", helperText: "helper text", label: "Default", errorId: "error--error", isRequired: true, name: "form-component-invalid" },
+        react_1.default.createElement(form_component_1.FormComponent, { errorId: "error--error", helperText: "helper text", inputId: "error", isRequired: true, label: "Default", name: "form-component-invalid" },
             react_1.default.createElement("div", null, "Is invalid")),
-        react_1.default.createElement(form_component_1.FormComponent, { inputId: "error", helperText: "helper text", label: "Default", errorId: "error--error", hiddenLabel: true, name: "form-component-hidden-label" },
+        react_1.default.createElement(form_component_1.FormComponent, { errorId: "error--error", helperText: "helper text", hiddenLabel: true, inputId: "error", label: "Default", name: "form-component-hidden-label" },
             react_1.default.createElement("div", null, "hidden label"))));
 }
-exports.Default = Default;

package/hooks/use-async-loading.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useAsyncLoading = void 0;
+exports.useAsyncLoading = useAsyncLoading;
 const react_1 = require("react");
 function useAsyncLoading(query, initialOptions, loadOptions) {
     const [options, setOptions] = (0, react_1.useState)(initialOptions);
@@ -29,4 +29,3 @@ function useAsyncLoading(query, initialOptions, loadOptions) {
     }, [getOptions, query]);
     return options;
 }
-exports.useAsyncLoading = useAsyncLoading;

package/hooks/use-dropdown.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Placement, Strategy } from "@floating-ui/react";
 export declare function useDropdown(placement: Placement, matchWidth?: boolean, maxHeight?: number, strategy?: Strategy): {
     placement: Placement;
@@ -29,7 +28,7 @@ export declare function useDropdown(placement: Placement, matchWidth?: boolean,
         update: () => void;
         floatingStyles: import("react").CSSProperties;
         open: boolean;
-        onOpenChange: (open: boolean, event?: Event | undefined, reason?: import("@floating-ui/react").OpenChangeReason | undefined) => void;
+        onOpenChange: (open: boolean, event?: Event, reason?: import("@floating-ui/react").OpenChangeReason) => void;
         events: import("@floating-ui/react").FloatingEvents;
         dataRef: import("react").MutableRefObject<import("@floating-ui/react").ContextData>;
         nodeId: string | undefined;

package/hooks/use-dropdown.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useDropdown = void 0;
+exports.useDropdown = useDropdown;
 const react_1 = require("@floating-ui/react");
 const with_unit_1 = require("@uxf/styles/units/with-unit");
 function useDropdown(placement, matchWidth = false, maxHeight, strategy) {
@@ -26,4 +26,3 @@ function useDropdown(placement, matchWidth = false, maxHeight, strategy) {
         }),
     });
 }
-exports.useDropdown = useDropdown;

package/hooks/use-input-submit.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useInputSubmit = void 0;
+exports.useInputSubmit = useInputSubmit;
 const react_1 = require("react");
 function childrenHasFocus(node) {
     node.childNodes.forEach((child) => {
@@ -37,4 +37,3 @@ function useInputSubmit(ref, type, disabled) {
         return () => node.removeEventListener("keydown", handleSubmit);
     }, [disabled, ref, type]);
 }
-exports.useInputSubmit = useInputSubmit;

package/icon/icon.js

@@ -29,7 +29,7 @@ const rem_1 = require("@uxf/styles/units/rem");
 const react_1 = __importStar(require("react"));
 const context_1 = require("../context");
 exports.Icon = (0, react_1.forwardRef)((props, ref) => {
-    var _a, _b;
+    var _a;
     const componentContext = (0, context_1.useComponentContext)("icon");
     const CustomComponent = props.Component;
     const className = (0, cx_1.cx)("uxf-icon", props.color && `uxf-icon--color-${props.color}`, props.className);
@@ -38,7 +38,7 @@ exports.Icon = (0, react_1.forwardRef)((props, ref) => {
         ? {
             "--i-h": (0, rem_1.rem)(props.size),
             "--i-w": (0, rem_1.rem)(props.size),
-            ...((_b = props.style) !== null && _b !== void 0 ? _b : {}),
+            ...props.style,
         }
         : props.style;
     if (CustomComponent) {

package/icon/icon.stories.js

@@ -3,7 +3,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SpriteIconNotExists = exports.SpriteIcon = exports.CustomComponent = exports.ColorAndSizes = exports.AllIcons = void 0;
+exports.AllIcons = AllIcons;
+exports.ColorAndSizes = ColorAndSizes;
+exports.CustomComponent = CustomComponent;
+exports.SpriteIcon = SpriteIcon;
+exports.SpriteIconNotExists = SpriteIconNotExists;
 const react_1 = __importDefault(require("react"));
 const context_1 = require("../context");
 const icon_1 = require("./icon");
@@ -19,35 +23,30 @@ exports.default = {
 };
 function AllIcons() {
     const iconContext = (0, context_1.useComponentContext)("icon");
-    return (react_1.default.createElement("div", { className: "flex flex-row flex-wrap" }, Object.keys(iconContext.iconsConfig).map((iconName) => (react_1.default.createElement("div", { key: iconName, className: "flex size-28 flex-col items-center justify-center gap-3" },
+    return (react_1.default.createElement("div", { className: "flex flex-row flex-wrap" }, Object.keys(iconContext.iconsConfig).map((iconName) => (react_1.default.createElement("div", { className: "flex size-28 flex-col items-center justify-center gap-3", key: iconName },
         react_1.default.createElement(icon_1.Icon, { className: "dark:text-white", name: iconName, size: 24 }),
         react_1.default.createElement("div", { className: "text-gray-400" },
             react_1.default.createElement("small", null, iconName)))))));
 }
-exports.AllIcons = AllIcons;
 function ColorAndSizes() {
     return (react_1.default.createElement("div", { className: "flex flex-row flex-wrap gap-4" },
         react_1.default.createElement(icon_1.Icon, { name: "camera", size: 12 }),
         react_1.default.createElement(icon_1.Icon, { name: "camera", size: 16 }),
         react_1.default.createElement(icon_1.Icon, { name: "camera", size: 20 }),
-        react_1.default.createElement(icon_1.Icon, { name: "camera", size: 12, className: "text-primary-600" }),
-        react_1.default.createElement(icon_1.Icon, { name: "camera", size: 16, className: "text-orange-600" }),
-        react_1.default.createElement(icon_1.Icon, { name: "camera", size: 20, className: "text-green-600" })));
+        react_1.default.createElement(icon_1.Icon, { className: "text-primary-600", name: "camera", size: 12 }),
+        react_1.default.createElement(icon_1.Icon, { className: "text-orange-600", name: "camera", size: 16 }),
+        react_1.default.createElement(icon_1.Icon, { className: "text-green-600", name: "camera", size: 20 })));
 }
-exports.ColorAndSizes = ColorAndSizes;
 function CustomComponent() {
     const SvgIcon = (props) => {
         return (react_1.default.createElement("svg", { viewBox: "0 0 29.65 40", ...props },
-            react_1.default.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M0 14.83C0 6.61 6.61 0 14.83 0c8.11 0 14.83 6.61 14.83 14.83 0 8.64-8.85 19.41-14.83 25.17C8.75 34.24 0 23.47 0 14.83zm9.28 0c0-3.09 2.45-5.55 5.55-5.55 2.99 0 5.44 2.45 5.44 5.55 0 2.99-2.45 5.44-5.44 5.44-3.1 0-5.55-2.46-5.55-5.44z", clipRule: "evenodd" })));
+            react_1.default.createElement("path", { clipRule: "evenodd", d: "M0 14.83C0 6.61 6.61 0 14.83 0c8.11 0 14.83 6.61 14.83 14.83 0 8.64-8.85 19.41-14.83 25.17C8.75 34.24 0 23.47 0 14.83zm9.28 0c0-3.09 2.45-5.55 5.55-5.55 2.99 0 5.44 2.45 5.44 5.55 0 2.99-2.45 5.44-5.44 5.44-3.1 0-5.55-2.46-5.55-5.44z", fill: "currentColor", fillRule: "evenodd" })));
     };
     return react_1.default.createElement(icon_1.Icon, { Component: SvgIcon, size: 16 });
 }
-exports.CustomComponent = CustomComponent;
 function SpriteIcon() {
     return react_1.default.createElement(icon_1.Icon, { name: "camera", size: 16 });
 }
-exports.SpriteIcon = SpriteIcon;
 function SpriteIconNotExists() {
     return react_1.default.createElement(icon_1.Icon, { name: "not-exists", size: 16 });
 }
-exports.SpriteIconNotExists = SpriteIconNotExists;

package/image-gallery/components/gallery.js

@@ -63,7 +63,7 @@ const Gallery = (props) => {
         onSwipedRight: () => props.onPrevious(),
         swipeDuration: 500,
     });
-    return (react_1.default.createElement("div", { className: "uxf-image-gallery", role: "dialog", "aria-modal": true },
+    return (react_1.default.createElement("div", { "aria-modal": true, className: "uxf-image-gallery", role: "dialog" },
         react_1.default.createElement("div", { "aria-hidden": true, className: "uxf-image-gallery__backdrop", onClick: !props.disableBackdropClose ? props.onClose : undefined }),
         react_1.default.createElement("div", { className: "uxf-image-gallery__close-button-wrapper" },
             react_1.default.createElement(close_button_1.CloseButton, { buttonElement: props.closeButtonElement, onClick: props.onClose, text: props.closeButtonTitle })),
@@ -72,9 +72,9 @@ const Gallery = (props) => {
             react_1.default.createElement(next_button_1.NextButton, { buttonElement: props.nextButtonElement, onClick: props.onNext }))),
         react_1.default.createElement("div", { className: "uxf-image-gallery__content", ...handlers },
             react_1.default.createElement("div", { className: "uxf-image-gallery__inner" },
-                react_1.default.createElement("img", { alt: "", className: "uxf-image-gallery__image", src: typeof imageSrc === "string" ? imageSrc : (_a = (0, resizer_1.resizerImageUrl)(imageSrc)) !== null && _a !== void 0 ? _a : "" }),
+                react_1.default.createElement("img", { alt: "", className: "uxf-image-gallery__image", src: typeof imageSrc === "string" ? imageSrc : ((_a = (0, resizer_1.resizerImageUrl)(imageSrc)) !== null && _a !== void 0 ? _a : "") }),
                 react_1.default.createElement("div", { className: "uxf-image-gallery__custom-content" }, customContent))),
-        props.images.length > 1 && (react_1.default.createElement("div", { className: "uxf-image-gallery__dots" }, props.images.map((image, index) => (react_1.default.createElement(dot_1.Dot, { key: (0, image_1.getImgUniqueIdentifier)(image.src) || index, active: index === props.imageIndex })))))));
+        props.images.length > 1 && (react_1.default.createElement("div", { className: "uxf-image-gallery__dots" }, props.images.map((image, index) => (react_1.default.createElement(dot_1.Dot, { active: index === props.imageIndex, key: (0, image_1.getImgUniqueIdentifier)(image.src) || index })))))));
 };
 exports.Gallery = Gallery;
 exports.Gallery.displayName = "UxfUiGallery";

package/image-gallery/context.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ImageGalleryImageProps } from "./types";
 type ContextType = {
     registerImage: (props: ImageGalleryImageProps) => void;

package/image-gallery/image-gallery.js

@@ -48,7 +48,7 @@ const ImageGallery = (props) => {
     const contextValue = { registerImage, unregisterImage, openGallery };
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(context_1.ImageGalleryProvider, { value: contextValue }, props.children),
-        typeof moduloImageIndex === "number" && (react_1.default.createElement(gallery_1.Gallery, { closeButtonTitle: props.closeButtonTitle, disableBackdropClose: props.disableBackdropClose, onClose: () => setImageIndex(null), onNext: onNext, onPrevious: onPrevious, imageIndex: moduloImageIndex, images: images, nextButtonElement: props.nextButtonElement, prevButtonElement: props.prevButtonElement, closeButtonElement: props.closeButtonElement }))));
+        typeof moduloImageIndex === "number" && (react_1.default.createElement(gallery_1.Gallery, { closeButtonElement: props.closeButtonElement, closeButtonTitle: props.closeButtonTitle, disableBackdropClose: props.disableBackdropClose, imageIndex: moduloImageIndex, images: images, nextButtonElement: props.nextButtonElement, onClose: () => setImageIndex(null), onNext: onNext, onPrevious: onPrevious, prevButtonElement: props.prevButtonElement }))));
 };
 exports.ImageGallery = ImageGallery;
 exports.ImageGallery.displayName = "UxfUiImageGallery";

package/image-gallery/image-gallery.stories.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Default = void 0;
+exports.Default = Default;
 const image_1 = require("@uxf/core/utils/image");
 const react_1 = __importDefault(require("react"));
 const icon_1 = require("../icon");
@@ -36,7 +36,6 @@ const nextButtonElement = react_1.default.createElement(icon_1.Icon, { className
 const prevButtonElement = react_1.default.createElement(icon_1.Icon, { className: "uxf-image-gallery__button-icon", name: "chevronLeft" });
 const closeButtonElement = react_1.default.createElement(icon_1.Icon, { className: "uxf-image-gallery__button-icon", name: "xmarkLarge" });
 function Default() {
-    return (react_1.default.createElement(index_1.ImageGallery, { prevButtonElement: prevButtonElement, nextButtonElement: nextButtonElement, closeButtonElement: closeButtonElement },
-        react_1.default.createElement("div", { className: "flex-direction flex gap-2" }, images.map((image, index) => (react_1.default.createElement(index_1.ImageGallery.Image, { key: (0, image_1.getImgUniqueIdentifier)(image.src) || index, src: image.src, className: "size-56 cursor-pointer object-cover transition-transform hover:scale-105", customContent: image.title }))))));
+    return (react_1.default.createElement(index_1.ImageGallery, { closeButtonElement: closeButtonElement, nextButtonElement: nextButtonElement, prevButtonElement: prevButtonElement },
+        react_1.default.createElement("div", { className: "flex-direction flex gap-2" }, images.map((image, index) => (react_1.default.createElement(index_1.ImageGallery.Image, { className: "size-56 cursor-pointer object-cover transition-transform hover:scale-105", customContent: image.title, key: (0, image_1.getImgUniqueIdentifier)(image.src) || index, src: image.src }))))));
 }
-exports.Default = Default;

package/image-gallery/image.js

@@ -12,7 +12,7 @@ const Image = (props) => {
     const openGallery = (0, use_image_1.useImage)(props);
     return (
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions
-    react_1.default.createElement("img", { alt: props.alt, className: props.className, onClick: openGallery, src: typeof props.src === "string" ? props.src : (_a = (0, resizer_1.resizerImageUrl)(props.src)) !== null && _a !== void 0 ? _a : "", title: props.title }));
+    react_1.default.createElement("img", { alt: props.alt, className: props.className, onClick: openGallery, src: typeof props.src === "string" ? props.src : ((_a = (0, resizer_1.resizerImageUrl)(props.src)) !== null && _a !== void 0 ? _a : ""), title: props.title }));
 };
 exports.Image = Image;
 exports.Image.displayName = "UxfUiImageGalleryImage";

package/image-gallery/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export { useImage } from "./use-image";
 export declare const ImageGallery: import("react").FC<import("./image-gallery").ImageGalleryProps> & {
     Image: import("react").FC<import("./types").ImageGalleryImageProps>;

package/image-gallery/use-image.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useImage = void 0;
+exports.useImage = useImage;
 const use_on_mount_1 = require("@uxf/core-react/hooks/use-on-mount");
 const react_1 = require("react");
 const context_1 = require("./context");
@@ -14,4 +14,3 @@ function useImage(props) {
     });
     return (0, react_1.useCallback)(() => openGallery(props), [props, openGallery]);
 }
-exports.useImage = useImage;

package/input/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { InputArrowIcon } from "./input-arrow-icon";
 export type { InputProps } from "./input";
 export type { InputElementProps } from "./input-element";

package/input/input-arrow-icon.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.InputArrowIcon = void 0;
+exports.InputArrowIcon = InputArrowIcon;
 const classes_1 = require("@uxf/core/constants/classes");
 const cx_1 = require("@uxf/core/utils/cx");
 const icon_1 = require("@uxf/ui/icon");
@@ -13,4 +13,3 @@ function InputArrowIcon(props) {
     const iconName = (_a = props.iconName) !== null && _a !== void 0 ? _a : "caretDown";
     return react_1.default.createElement(icon_1.Icon, { className: (0, cx_1.cx)("uxf-input__arrow-icon", props.isOpen && classes_1.CLASSES.IS_OPEN), name: iconName });
 }
-exports.InputArrowIcon = InputArrowIcon;

package/input/input-element.js

@@ -27,7 +27,7 @@ exports.InputElement = void 0;
 const react_1 = __importStar(require("react"));
 exports.InputElement = (0, react_1.forwardRef)((props, ref) => {
     const onChange = (event) => props.onChange(event.target.value, event);
-    const filteredProps = Object.fromEntries(Object.entries(props).filter((p) => p[0].startsWith("aria-") || p[0].startsWith("data-")));
+    const filteredProps = Object.fromEntries(Object.entries(props).filter((p) => { var _a, _b; return Boolean(((_a = p.at(0)) === null || _a === void 0 ? void 0 : _a.startsWith("aria-")) || ((_b = p.at(0)) === null || _b === void 0 ? void 0 : _b.startsWith("data-"))); }));
     return (react_1.default.createElement("input", { ...filteredProps, "aria-describedby": props["aria-describedby"], "aria-invalid": props.isInvalid, autoComplete: props.autoComplete, autoFocus: props.autoFocus, className: "uxf-input__element", disabled: props.isDisabled, form: props.form, id: props.id, inputMode: props.inputMode, max: props.max, maxLength: props.maxLength, min: props.min, minLength: props.minLength, name: props.name, onBlur: props.onBlur, onChange: onChange, onFocus: props.onFocus, onKeyDown: props.onKeyDown, pattern: props.pattern, placeholder: props.placeholder, readOnly: props.isReadOnly, ref: ref, step: props.step, style: props.style, tabIndex: props.isReadOnly ? -1 : undefined, type: props.type, value: props.value }));
 });
 exports.InputElement.displayName = "UxfUiInputElement";

package/input/input.js

@@ -30,7 +30,7 @@ const classes_1 = require("@uxf/core/constants/classes");
 const cx_1 = require("@uxf/core/utils/cx");
 const react_1 = __importStar(require("react"));
 const isApplicable = (...args) => {
-    return args.some((i) => !!i);
+    return args.some(Boolean);
 };
 function getChildrenById(children, componentName) {
     return react_1.Children.toArray(children)

package/input/input.stories.js

@@ -26,7 +26,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ComponentStructure = exports.Sizes = exports.Default = void 0;
+exports.Default = Default;
+exports.Sizes = Sizes;
+exports.ComponentStructure = ComponentStructure;
 const input_1 = require("@uxf/ui/input");
 const action_1 = require("@uxf/ui/utils/action");
 const component_structure_analyzer_1 = __importDefault(require("@uxf/ui/utils/component-structure-analyzer"));
@@ -44,32 +46,31 @@ function Default() {
         react_1.default.createElement(input_1.Input, null,
             react_1.default.createElement(input_1.Input.LeftAddon, null, "InputLeftAddon"),
             react_1.default.createElement(input_1.Input.LeftElement, null, "InputLeftElement"),
-            react_1.default.createElement(input_1.Input.Element, { value: value, onChange: onChange, placeholder: "Placeholder", isInvalid: isInvalid, name: "input-element-1" }),
+            react_1.default.createElement(input_1.Input.Element, { isInvalid: isInvalid, name: "input-element-1", onChange: onChange, placeholder: "Placeholder", value: value }),
             react_1.default.createElement(input_1.Input.RightElement, null, "InputRightElement"),
             react_1.default.createElement(input_1.Input.RightAddon, null, "InputRightAddon")),
         react_1.default.createElement(input_1.Input, null,
             react_1.default.createElement(input_1.Input.LeftAddon, null, "https://"),
-            react_1.default.createElement(input_1.Input.Element, { value: value, onChange: onChange, placeholder: "Placeholder", isInvalid: isInvalid, name: "input-element-2" }),
+            react_1.default.createElement(input_1.Input.Element, { isInvalid: isInvalid, name: "input-element-2", onChange: onChange, placeholder: "Placeholder", value: value }),
             react_1.default.createElement(input_1.Input.RightAddon, null, ".uxf.cz")),
         react_1.default.createElement(input_1.Input, null,
-            react_1.default.createElement(input_1.Input.Element, { value: value, onChange: onChange, placeholder: "Placeholder", isInvalid: isInvalid, name: "input-element-3" }),
+            react_1.default.createElement(input_1.Input.Element, { isInvalid: isInvalid, name: "input-element-3", onChange: onChange, placeholder: "Placeholder", value: value }),
             react_1.default.createElement(input_1.Input.RightAddon, null, ".test.cz")),
         react_1.default.createElement(input_1.Input, null,
             react_1.default.createElement(input_1.Input.LeftElement, null, "\uD83C\uDF37"),
-            react_1.default.createElement(input_1.Input.Element, { value: value, onChange: onChange, placeholder: "Placeholder", isInvalid: isInvalid, name: "input-element-4" }),
+            react_1.default.createElement(input_1.Input.Element, { isInvalid: isInvalid, name: "input-element-4", onChange: onChange, placeholder: "Placeholder", value: value }),
             react_1.default.createElement(input_1.Input.RightElement, null, "\uD83D\uDD14")),
         react_1.default.createElement(input_1.Input, null,
-            react_1.default.createElement(input_1.Input.Element, { value: value, onChange: onChange, placeholder: "Placeholder", isInvalid: isInvalid, name: "input-element-5" })),
+            react_1.default.createElement(input_1.Input.Element, { isInvalid: isInvalid, name: "input-element-5", onChange: onChange, placeholder: "Placeholder", value: value })),
         react_1.default.createElement(input_1.Input, null,
-            react_1.default.createElement(input_1.Input.Element, { value: value, onChange: onChange, placeholder: "Disabled", isInvalid: isInvalid, isDisabled: true, name: "input-element-6" })),
+            react_1.default.createElement(input_1.Input.Element, { isDisabled: true, isInvalid: isInvalid, name: "input-element-6", onChange: onChange, placeholder: "Disabled", value: value })),
         react_1.default.createElement(input_1.Input, null,
-            react_1.default.createElement(input_1.Input.Element, { value: value, onChange: onChange, placeholder: "Read Only", isInvalid: isInvalid, isReadOnly: true, name: "input-element-7" }))));
+            react_1.default.createElement(input_1.Input.Element, { isInvalid: isInvalid, isReadOnly: true, name: "input-element-7", onChange: onChange, placeholder: "Read Only", value: value }))));
     const onInvalidChange = (e) => setInvalid(e.target.checked);
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("input", { type: "checkbox", checked: isInvalid, onChange: onInvalidChange }),
+        react_1.default.createElement("input", { checked: isInvalid, onChange: onInvalidChange, type: "checkbox" }),
         react_1.default.createElement("div", { className: "space-y-2 p-20" }, storyInputs)));
 }
-exports.Default = Default;
 function Sizes() {
     const config = (0, storybook_config_1.useStorybookConfig)("Input");
     const [value, setValue] = (0, react_1.useState)("");
@@ -77,19 +78,17 @@ function Sizes() {
     return (react_1.default.createElement("div", { className: "space-y-4" }, config.sizes.map((size) => (react_1.default.createElement(input_1.Input, { key: size, size: size },
         react_1.default.createElement(input_1.Input.LeftAddon, null, "LeftAddon"),
         react_1.default.createElement(input_1.Input.LeftElement, null, "\uD83C\uDF37"),
-        react_1.default.createElement(input_1.Input.Element, { value: value, onChange: onChange, placeholder: size, name: `input-element-size-${size}` }),
+        react_1.default.createElement(input_1.Input.Element, { name: `input-element-size-${size}`, onChange: onChange, placeholder: size, value: value }),
         react_1.default.createElement(input_1.Input.RightElement, null, "\uD83D\uDD14"),
         react_1.default.createElement(input_1.Input.RightAddon, null, "RightAddon"))))));
 }
-exports.Sizes = Sizes;
 function ComponentStructure() {
     const [value, onChange] = (0, react_1.useState)("");
     return (react_1.default.createElement(component_structure_analyzer_1.default, null,
         react_1.default.createElement(input_1.Input, null,
             react_1.default.createElement(input_1.Input.LeftAddon, null, "Left addon"),
             react_1.default.createElement(input_1.Input.LeftElement, null, "Left element"),
-            react_1.default.createElement(input_1.Input.Element, { value: value, onChange: onChange, name: "input-element-component-structure" }),
+            react_1.default.createElement(input_1.Input.Element, { name: "input-element-component-structure", onChange: onChange, value: value }),
             react_1.default.createElement(input_1.Input.RightElement, null, "Right element"),
             react_1.default.createElement(input_1.Input.RightAddon, null, "Right addon"))));
 }
-exports.ComponentStructure = ComponentStructure;

package/label/label.stories.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Default = void 0;
+exports.Default = Default;
 const react_1 = __importDefault(require("react"));
 const index_1 = require("./index");
 exports.default = {
@@ -14,4 +14,3 @@ function Default() {
     return (react_1.default.createElement("div", { className: "space-y-2" },
         react_1.default.createElement(index_1.Label, null, "Label")));
 }
-exports.Default = Default;

package/layout/layout.js

@@ -36,11 +36,11 @@ const Layout = (props) => {
             react_2.default.createElement("div", { className: "uxf-sidebar__content" }, props.sidebar)),
         react_2.default.createElement("div", { className: "uxf-app-bar" },
             react_2.default.createElement("div", { className: "uxf-app-bar__left-container" },
-                react_2.default.createElement("button", { type: "button", className: "uxf-app-bar__menu-button", onClick: () => setSidebarOpen(true) },
-                    react_2.default.createElement(icon_1.Icon, { name: "bars", className: "text-white", size: 26 })),
+                react_2.default.createElement("button", { className: "uxf-app-bar__menu-button", onClick: () => setSidebarOpen(true), type: "button" },
+                    react_2.default.createElement(icon_1.Icon, { className: "text-white", name: "bars", size: 26 })),
                 react_2.default.createElement("div", { className: "uxf-app-bar__logo" }, (_a = props.logo) !== null && _a !== void 0 ? _a : react_2.default.createElement(uxf_logo_1.UxfLogo, null))),
             react_2.default.createElement("div", { className: "uxf-app-bar__right-container" }, props.toolbarRight)),
-        react_2.default.createElement(react_1.Transition.Root, { show: sidebarOpen, as: react_2.Fragment },
+        react_2.default.createElement(react_1.Transition.Root, { as: react_2.Fragment, show: sidebarOpen },
             react_2.default.createElement(react_1.Dialog, { as: "div", className: "relative z-40 md:hidden", onClose: setSidebarOpen },
                 react_2.default.createElement(react_1.Transition.Child, { as: react_2.Fragment, enter: "transition-opacity ease-linear duration-300", enterFrom: "opacity-0", enterTo: "opacity-100", leave: "transition-opacity ease-linear duration-300", leaveFrom: "opacity-100", leaveTo: "opacity-0" },
                     react_2.default.createElement("div", { className: "fixed inset-0 bg-gray-600/75" })),
@@ -49,12 +49,12 @@ const Layout = (props) => {
                         react_2.default.createElement(react_1.Dialog.Panel, { className: "relative flex w-full max-w-xs flex-1 flex-col bg-white pb-4 pt-5" },
                             react_2.default.createElement(react_1.Transition.Child, { as: react_2.Fragment, enter: "ease-in-out duration-300", enterFrom: "opacity-0", enterTo: "opacity-100", leave: "ease-in-out duration-300", leaveFrom: "opacity-100", leaveTo: "opacity-0" },
                                 react_2.default.createElement("div", { className: "absolute right-0 top-0 -mr-12 pt-2" },
-                                    react_2.default.createElement("button", { type: "button", className: "ml-1 flex size-10 items-center justify-center rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white", onClick: () => setSidebarOpen(false) },
+                                    react_2.default.createElement("button", { className: "ml-1 flex size-10 items-center justify-center rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white", onClick: () => setSidebarOpen(false), type: "button" },
                                         react_2.default.createElement("span", { className: "sr-only" }, "Close sidebar"),
-                                        react_2.default.createElement(icon_1.Icon, { name: "xmarkLarge", size: 24, className: "text-white" })))),
+                                        react_2.default.createElement(icon_1.Icon, { className: "text-white", name: "xmarkLarge", size: 24 })))),
                             react_2.default.createElement("div", { className: "uxf-drawer__logo" }, (_b = props.logo) !== null && _b !== void 0 ? _b : react_2.default.createElement(uxf_logo_1.UxfLogo, { isDark: true })),
                             react_2.default.createElement("div", { className: "uxf-drawer__content" }, props.sidebar))),
-                    react_2.default.createElement("div", { className: "w-14 shrink-0", "aria-hidden": "true" })))),
+                    react_2.default.createElement("div", { "aria-hidden": "true", className: "w-14 shrink-0" })))),
         react_2.default.createElement("main", { className: "uxf-layout__content" }, props.children)));
 };
 exports.Layout = Layout;

package/layout/layout.stories.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Default = void 0;
+exports.Default = Default;
 const react_1 = __importDefault(require("react"));
 const layout_1 = require("./layout");
 exports.default = {
@@ -18,4 +18,3 @@ function Default() {
         react_1.default.createElement("div", { className: "p-8" },
             react_1.default.createElement("div", { className: "flex h-64 items-center justify-center rounded-xl border-4 border-dashed border-gray-200 text-xl font-semibold text-gray-300" }, "children"))));
 }
-exports.Default = Default;