@uxf/ui 11.30.1 → 11.32.0

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

@@ -24,14 +24,15 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports._FileInputBase = void 0;
+const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
 const validator_exceptions_1 = require("@uxf/ui//utils/validator/validator-exceptions");
 const react_1 = __importStar(require("react"));
 exports._FileInputBase = (0, react_1.forwardRef)((props, ref) => {
     const onChange = async (e) => {
         var _a, _b;
-        if ((_a = e.target.files) === null || _a === void 0 ? void 0 : _a.length) {
+        const file = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a.item(0);
+        if ((0, is_not_nil_1.isNotNil)(file)) {
             try {
-                const file = e.target.files[0];
                 if (props.maxFileSize && file.size > props.maxFileSize) {
                     throw validator_exceptions_1.ValidatorExceptions.MaxFileSize;
                 }
@@ -43,6 +44,6 @@ exports._FileInputBase = (0, react_1.forwardRef)((props, ref) => {
             }
         }
     };
-    return (react_1.default.createElement("input", { accept: props.accept, "aria-invalid": props.isInvalid, "aria-describedby": props["aria-describedby"], className: props.className, disabled: props.isDisabled, form: props.form, id: props.id, name: props.name, onBlur: props.onBlur, onChange: onChange, onFocus: props.onFocus, readOnly: props.isReadOnly, ref: ref, required: props.isRequired, tabIndex: props.isDisabled ? -1 : undefined, type: "file" }));
+    return (react_1.default.createElement("input", { accept: props.accept, "aria-describedby": props["aria-describedby"], "aria-invalid": props.isInvalid, className: props.className, disabled: props.isDisabled, form: props.form, id: props.id, name: props.name, onBlur: props.onBlur, onChange: onChange, onFocus: props.onFocus, readOnly: props.isReadOnly, ref: ref, required: props.isRequired, tabIndex: props.isDisabled ? -1 : undefined, type: "file" }));
 });
 exports._FileInputBase.displayName = "UxfUiFileInputBase";

package/_input-with-popover/input-with-popover.js

@@ -40,7 +40,7 @@ function useErrorProps(error, id, isInvalid) {
         errorId,
         ariaDescribedby: errorId,
         ariaErrormessage: error && errorId ? `${errorId}--error-message` : undefined,
-        ariaInvalid: !!error,
+        ariaInvalid: Boolean(error),
     };
 }
 exports._InputWithPopover = (0, react_3.forwardRef)((props, ref) => {
@@ -71,7 +71,7 @@ exports._InputWithPopover = (0, react_3.forwardRef)((props, ref) => {
         }),
     });
     const isInteractive = !props.isDisabled && !props.isReadOnly;
-    const showRemoveButton = !!(props.value && isInteractive && props.isClearable);
+    const showRemoveButton = Boolean(props.value && isInteractive && props.isClearable);
     return (react_3.default.createElement(form_component_1.FormComponent, { className: rootClassName, errorId: error.errorId, form: props.form, helperText: props.helperText, hiddenLabel: props.hiddenLabel, inputId: id, isRequired: props.isRequired, label: props.label, name: props.name },
         react_3.default.createElement(react_2.Popover, { as: react_3.Fragment }, (renderProps) => (react_3.default.createElement(react_3.default.Fragment, null,
             react_3.default.createElement(input_1.Input, { inputFocus: input, inputGroupRef: floatingPopover.refs.setReference, ref: (0, compose_refs_1.composeRefs)(innerRef, ref), size: props.size, variant: props.variant },

package/alert-bubble/alert-bubble.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 storybook_config_1 = require("../utils/storybook-config");
 const alert_bubble_1 = require("./alert-bubble");
@@ -33,7 +33,7 @@ exports.default = {
 };
 function Default() {
     const config = (0, storybook_config_1.useStorybookConfig)("AlertBubble");
-    const storyAlertBubbles = config.colors.map((color) => (react_1.default.createElement(react_1.Fragment, { key: color }, config.sizes.map((size) => (react_1.default.createElement("div", { key: `${size}${color}`, className: "space-y-2 pb-4" },
+    const storyAlertBubbles = config.colors.map((color) => (react_1.default.createElement(react_1.Fragment, { key: color }, config.sizes.map((size) => (react_1.default.createElement("div", { className: "space-y-2 pb-4", key: `${size}${color}` },
         react_1.default.createElement("div", { className: "text-sm dark:text-gray-100" },
             "Color: ",
             react_1.default.createElement("span", { className: "font-semibold" }, color),
@@ -43,7 +43,5 @@ function Default() {
         react_1.default.createElement("div", { className: "flex flex-row items-start gap-2" },
             react_1.default.createElement(alert_bubble_1.AlertBubble, { color: color, size: size })),
         react_1.default.createElement("hr", null)))))));
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("div", { className: "light space-y-2 p-20" }, storyAlertBubbles)));
+    return react_1.default.createElement("div", { className: "light space-y-2 p-20" }, storyAlertBubbles);
 }
-exports.Default = Default;

package/avatar/avatar.js

@@ -29,6 +29,6 @@ const react_1 = __importStar(require("react"));
 const icon_1 = require("../icon");
 exports.Avatar = (0, react_1.forwardRef)((props, ref) => {
     const avatarClassName = (0, cx_1.cx)("uxf-avatar", props.className);
-    return (react_1.default.createElement("div", { ref: ref, className: avatarClassName }, props.src ? react_1.default.createElement("img", { alt: "", className: "uxf-avatar__image", src: props.src }) : react_1.default.createElement(icon_1.Icon, { name: "user", size: 16 })));
+    return (react_1.default.createElement("div", { className: avatarClassName, ref: ref }, props.src ? react_1.default.createElement("img", { alt: "", className: "uxf-avatar__image", src: props.src }) : react_1.default.createElement(icon_1.Icon, { name: "user", size: 16 })));
 });
 exports.Avatar.displayName = "UxfUiAvatar";

package/avatar/avatar.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 avatar_1 = require("./avatar");
 function Default() {
@@ -11,4 +11,3 @@ function Default() {
         react_1.default.createElement(avatar_1.Avatar, { src: "https://images.pexels.com/photos/14934612/pexels-photo-14934612.jpeg?auto=compress&cs=tinysrgb&w=100&h=100&dpr=1" }),
         react_1.default.createElement(avatar_1.Avatar, null)));
 }
-exports.Default = Default;

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

@@ -29,6 +29,7 @@ const compose_refs_1 = require("@uxf/core-react/utils/compose-refs");
 const classes_1 = require("@uxf/core/constants/classes");
 const cx_1 = require("@uxf/core/utils/cx");
 const file_1 = require("@uxf/core/utils/file");
+const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
 const react_1 = __importStar(require("react"));
 const _file_input_base_1 = require("../_file-input-base");
 const avatar_1 = require("../avatar");
@@ -56,7 +57,7 @@ exports.AvatarFileInput = (0, react_1.forwardRef)((props, ref) => {
     return (react_1.default.createElement(form_component_1.FormComponent, { className: rootClassName, errorId: props.id, helperText: props.helperText, hiddenLabel: props.hiddenLabel, inputId: id, label: props.label, name: props.name },
         react_1.default.createElement("div", { className: "uxf-avatar-file-input__inner-wrapper" },
             react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-avatar-file-input__input", stateClassName), onClick: onSelectFile },
-                react_1.default.createElement(_file_input_base_1._FileInputBase, { accept: (_c = props.accept) !== null && _c !== void 0 ? _c : "image/*", "aria-describedby": errorId, "aria-invalid": props.isInvalid, className: "uxf-avatar-file-input__input-element", form: props.form, id: id, isDisabled: props.isDisabled, isFocused: props.isFocused, isInvalid: props.isInvalid, isReadOnly: props.isReadOnly, isRequired: props.isRequired, maxFileSize: props.maxFileSize, name: props.name, onBlur: input.onBlur, onFocus: input.onFocus, onChange: props.onChange, onUploadError: props.onUploadError, onUploadFile: props.onUploadFile, ref: (0, compose_refs_1.composeRefs)(innerRef, ref), value: props.value }),
+                react_1.default.createElement(_file_input_base_1._FileInputBase, { accept: (_c = props.accept) !== null && _c !== void 0 ? _c : "image/*", "aria-describedby": errorId, "aria-invalid": props.isInvalid, className: "uxf-avatar-file-input__input-element", form: props.form, id: id, isDisabled: props.isDisabled, isFocused: props.isFocused, isInvalid: props.isInvalid, isReadOnly: props.isReadOnly, isRequired: props.isRequired, maxFileSize: props.maxFileSize, name: props.name, onBlur: input.onBlur, onChange: props.onChange, onFocus: input.onFocus, onUploadError: props.onUploadError, onUploadFile: props.onUploadFile, ref: (0, compose_refs_1.composeRefs)(innerRef, ref), value: props.value }),
                 props.value ? (react_1.default.createElement(avatar_1.Avatar, { className: "uxf-avatar-file-input__input-avatar", src: (0, file_1.getFileUrl)(props.value) })) : (react_1.default.createElement("div", { className: "uxf-avatar-file-input__input-empty" },
                     react_1.default.createElement(icon_1.Icon, { className: "uxf-avatar-file-input__input-empty-icon", name: (_d = props.icon) !== null && _d !== void 0 ? _d : "cloud" })))),
             react_1.default.createElement("div", { className: "uxf-avatar-file-input__controls" }, props.customControls ? (props.customControls({
@@ -64,6 +65,6 @@ exports.AvatarFileInput = (0, react_1.forwardRef)((props, ref) => {
                 onRemoveFile,
             })) : (react_1.default.createElement("div", { className: "uxf-avatar-file-input__controls-buttons" },
                 react_1.default.createElement(button_1.Button, { className: "uxf-avatar-file-input__controls-button uxf-avatar-file-input__controls-button--select", isDisabled: props.isDisabled, onClick: onSelectFile, size: "sm", variant: "secondary" }, (_e = props.selectFileLabel) !== null && _e !== void 0 ? _e : "Upload image"),
-                !!props.value && !props.isDisabled && (react_1.default.createElement(button_1.Button, { className: "uxf-avatar-file-input__controls-button uxf-avatar-file-input__controls-button--remove", color: "negative", isDisabled: props.isDisabled, onClick: onRemoveFile, size: "sm", variant: "secondary" }, (_f = props.removeFileLabel) !== null && _f !== void 0 ? _f : "Remove avatar"))))))));
+                (0, is_not_nil_1.isNotNil)(props.value) && !props.isDisabled && (react_1.default.createElement(button_1.Button, { className: "uxf-avatar-file-input__controls-button uxf-avatar-file-input__controls-button--remove", color: "negative", isDisabled: props.isDisabled, onClick: onRemoveFile, size: "sm", variant: "secondary" }, (_f = props.removeFileLabel) !== null && _f !== void 0 ? _f : "Remove avatar"))))))));
 });
 exports.AvatarFileInput.displayName = "UxfUiAvatarFileInput";

package/avatar-file-input/avatar-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 upload_file_mock_1 = require("@uxf/ui/utils/mocks/upload-file.mock");
 const react_1 = __importStar(require("react"));
 const action_1 = require("../utils/action");
@@ -42,8 +42,7 @@ function Default() {
         console.log("Upload error", err);
     };
     return (react_1.default.createElement("div", { className: "space-y-4 p-20" },
-        react_1.default.createElement(index_1.AvatarFileInput, { label: "Nahrajte fotku", onChange: onChange, onUploadError: onUploadError, onUploadFile: upload_file_mock_1.uploadFile, value: value, variant: "square", name: "avatar-input" }),
-        react_1.default.createElement(index_1.AvatarFileInput, { isDisabled: true, onChange: onChange, onUploadError: onUploadError, onUploadFile: upload_file_mock_1.uploadFile, value: value, variant: "square", name: "avatar-input-disabled" }),
-        react_1.default.createElement(index_1.AvatarFileInput, { id: "afi", isInvalid: true, label: "Vyberte Avatar", onChange: onChange, onUploadError: onUploadError, onUploadFile: upload_file_mock_1.uploadFile, value: value, name: "avatar-input-isInvalid" })));
+        react_1.default.createElement(index_1.AvatarFileInput, { label: "Nahrajte fotku", name: "avatar-input", onChange: onChange, onUploadError: onUploadError, onUploadFile: upload_file_mock_1.uploadFile, value: value, variant: "square" }),
+        react_1.default.createElement(index_1.AvatarFileInput, { isDisabled: true, name: "avatar-input-disabled", onChange: onChange, onUploadError: onUploadError, onUploadFile: upload_file_mock_1.uploadFile, value: value, variant: "square" }),
+        react_1.default.createElement(index_1.AvatarFileInput, { id: "afi", isInvalid: true, label: "Vyberte Avatar", name: "avatar-input-isInvalid", onChange: onChange, onUploadError: onUploadError, onUploadFile: upload_file_mock_1.uploadFile, value: value })));
 }
-exports.Default = Default;

package/badge/badge.js

@@ -29,7 +29,7 @@ const react_1 = __importStar(require("react"));
 exports.Badge = (0, react_1.forwardRef)((props, ref) => {
     var _a;
     const badgeClassName = (0, cx_1.cx)("uxf-badge", `uxf-badge--size-${(_a = props.size) !== null && _a !== void 0 ? _a : "medium"}`, props.className);
-    return (react_1.default.createElement("div", { ref: ref, className: badgeClassName },
+    return (react_1.default.createElement("div", { className: badgeClassName, ref: ref },
         react_1.default.createElement("span", null, props.children)));
 });
 exports.Badge.displayName = "UxfUiBadge";

package/badge/badge.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 icon_1 = require("../icon");
 const badge_1 = require("./badge");
@@ -32,7 +32,5 @@ function Default() {
                 react_1.default.createElement(icon_1.Icon, { name: "check", size: 16 })),
             react_1.default.createElement(badge_1.Badge, { size: "large" },
                 react_1.default.createElement(icon_1.Icon, { name: "check", size: 24 })))));
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("div", { className: "flex items-center space-x-4 rounded p-8" }, testBadges)));
+    return react_1.default.createElement("div", { className: "flex items-center space-x-4 rounded p-8" }, testBadges);
 }
-exports.Default = Default;

package/button/button.stories.js

@@ -23,7 +23,8 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Default = exports.Basic = void 0;
+exports.Basic = Basic;
+exports.Default = Default;
 const button_1 = require("@uxf/ui/button");
 const icon_1 = require("@uxf/ui/icon");
 const storybook_config_1 = require("@uxf/ui/utils/storybook-config");
@@ -37,11 +38,11 @@ function Basic() {
     return (react_1.default.createElement("div", { className: "p-4" },
         react_1.default.createElement("div", { className: "grid gap-3 p-4", style: { gridTemplateColumns } },
             react_1.default.createElement("div", null),
-            config.variants.map((variant) => (react_1.default.createElement("div", { key: variant, style: { gridColumn: "span 4" }, className: "border-b border-blue-500 pb-2 text-center text-xs text-gray-400" },
+            config.variants.map((variant) => (react_1.default.createElement("div", { className: "border-b border-blue-500 pb-2 text-center text-xs text-gray-400", key: variant, style: { gridColumn: "span 4" } },
                 "variant=",
                 variant))),
             react_1.default.createElement("div", null),
-            config.variants.flatMap((variant) => config.sizes.map((size) => (react_1.default.createElement("div", { key: variant, className: "text-center text-xs text-gray-400" },
+            config.variants.flatMap((variant) => config.sizes.map((size) => (react_1.default.createElement("div", { className: "text-center text-xs text-gray-400", key: variant },
                 "size=",
                 size))))),
         config.colors.map((color) => (react_1.default.createElement("div", { className: color === "inverted" ? "min-w-fit bg-[#1F2A37] dark:bg-white" : undefined, key: color },
@@ -49,17 +50,16 @@ function Basic() {
                 react_1.default.createElement("div", { className: "flex items-center text-center text-xs text-gray-400" },
                     "color=",
                     color),
-                config.variants.map((variant) => (react_1.default.createElement(react_1.Fragment, { key: variant }, config.sizes.map((size) => (react_1.default.createElement("div", { key: `${size}${color}${variant}`, className: "flex items-center justify-center gap-2" },
+                config.variants.map((variant) => (react_1.default.createElement(react_1.Fragment, { key: variant }, config.sizes.map((size) => (react_1.default.createElement("div", { className: "flex items-center justify-center gap-2", key: `${size}${color}${variant}` },
                     react_1.default.createElement(button_1.Button, { color: color, onClick: onClick, size: size, variant: variant }, "Button"),
-                    react_1.default.createElement(button_1.Button, { color: color, onClick: onClick, size: size, variant: variant, isIconButton: true },
+                    react_1.default.createElement(button_1.Button, { color: color, isIconButton: true, onClick: onClick, size: size, variant: variant },
                         react_1.default.createElement(icon_1.Icon, { name: "triangle-exclamation" }))))))))))))));
 }
-exports.Basic = Basic;
 function Default() {
     const config = (0, storybook_config_1.useStorybookConfig)("Button");
     // eslint-disable-next-line no-console
     const onClick = console.log;
-    return (react_1.default.createElement("div", { className: "space-y-2 p-20" }, config.variants.map((variant) => (react_1.default.createElement(react_1.Fragment, { key: variant }, config.colors.map((color) => (react_1.default.createElement(react_1.Fragment, { key: color }, config.sizes.map((size) => (react_1.default.createElement("div", { key: `${size}${color}${variant}`, className: "space-y-2 pb-4" },
+    return (react_1.default.createElement("div", { className: "space-y-2 p-20" }, config.variants.map((variant) => (react_1.default.createElement(react_1.Fragment, { key: variant }, config.colors.map((color) => (react_1.default.createElement(react_1.Fragment, { key: color }, config.sizes.map((size) => (react_1.default.createElement("div", { className: "space-y-2 pb-4", key: `${size}${color}${variant}` },
         react_1.default.createElement("div", { className: "text-sm dark:text-gray-100" },
             "Variant: ",
             react_1.default.createElement("span", { className: "font-semibold" }, variant),
@@ -75,10 +75,9 @@ function Default() {
             react_1.default.createElement(button_1.Button, { color: color, isDisabled: true, onClick: onClick, size: size, variant: variant }, "Disabled"),
             react_1.default.createElement(button_1.Button, { color: color, isIconButton: true, onClick: onClick, size: size, variant: variant },
                 react_1.default.createElement(icon_1.Icon, { name: "check" })),
-            react_1.default.createElement(button_1.Button, { color: color, isIconButton: true, onClick: onClick, size: size, variant: variant, isLoading: true },
+            react_1.default.createElement(button_1.Button, { color: color, isIconButton: true, isLoading: true, onClick: onClick, size: size, variant: variant },
                 react_1.default.createElement(icon_1.Icon, { name: "check" })),
             react_1.default.createElement(button_1.Button, { className: "w-[200px]", color: color, onClick: onClick, size: size, variant: variant }, "Custom width")),
         react_1.default.createElement(button_1.Button, { color: color, isFullWidth: true, onClick: onClick, size: size, variant: variant }, "Full width"),
         react_1.default.createElement("hr", null))))))))))));
 }
-exports.Default = Default;

package/button/next-link.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="node" />
 import React from "react";
 import type { UrlObject } from "url";
 type Url = string | UrlObject;

package/button-group/button-group.stories.d.ts

@@ -4,4 +4,4 @@ declare const _default: {
     component: React.FC<React.PropsWithChildren<import("./button-group").ButtonGroupProps>>;
 };
 export default _default;
-export declare const Default: () => React.JSX.Element;
+export declare function Default(): React.JSX.Element;

package/button-group/button-group.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 button_1 = require("../button");
 const icon_1 = require("../icon");
@@ -13,7 +13,7 @@ exports.default = {
     title: "UI/ButtonGroup",
     component: index_1.ButtonGroup,
 };
-const Default = () => {
+function Default() {
     // eslint-disable-next-line no-console
     const onClick = console.log;
     const component = (react_1.default.createElement(react_1.default.Fragment, null,
@@ -23,17 +23,16 @@ const Default = () => {
             react_1.default.createElement(button_1.Button, { isIconButton: true, onClick: onClick },
                 react_1.default.createElement(icon_1.Icon, { name: "check", size: 16 }))),
         react_1.default.createElement(index_1.ButtonGroup, null,
-            react_1.default.createElement(button_1.Button, { size: "sm", variant: "secondary", onClick: onClick }, "First"),
-            react_1.default.createElement(button_1.Button, { size: "sm", variant: "secondary", onClick: onClick }, "Second"),
-            react_1.default.createElement(button_1.Button, { size: "sm", variant: "secondary", onClick: onClick }, "Third")),
+            react_1.default.createElement(button_1.Button, { onClick: onClick, size: "sm", variant: "secondary" }, "First"),
+            react_1.default.createElement(button_1.Button, { onClick: onClick, size: "sm", variant: "secondary" }, "Second"),
+            react_1.default.createElement(button_1.Button, { onClick: onClick, size: "sm", variant: "secondary" }, "Third")),
         react_1.default.createElement(index_1.ButtonGroup, null,
             react_1.default.createElement(tooltip_1.Tooltip, { content: "Tooltip" },
-                react_1.default.createElement(button_1.Button, { size: "sm", variant: "secondary", onClick: onClick }, "Button with tooltip")),
+                react_1.default.createElement(button_1.Button, { onClick: onClick, size: "sm", variant: "secondary" }, "Button with tooltip")),
             react_1.default.createElement(tooltip_1.Tooltip, { content: "Tooltip" },
-                react_1.default.createElement(button_1.Button, { size: "sm", variant: "secondary", onClick: onClick }, "Second")),
+                react_1.default.createElement(button_1.Button, { onClick: onClick, size: "sm", variant: "secondary" }, "Second")),
             react_1.default.createElement(tooltip_1.Tooltip, { content: "Tooltip" },
-                react_1.default.createElement(button_1.Button, { size: "sm", variant: "secondary", onClick: onClick }, "Third")))));
+                react_1.default.createElement(button_1.Button, { onClick: onClick, size: "sm", variant: "secondary" }, "Third")))));
     return (react_1.default.createElement("div", { className: "flex flex-col lg:flex-row" },
         react_1.default.createElement("div", { className: "space-y-2 p-20 lg:w-1/2" }, component)));
-};
-exports.Default = Default;
+}

package/button-list/button-list.js

@@ -29,6 +29,7 @@ const react_2 = require("@headlessui/react");
 const use_anchor_props_1 = require("@uxf/core-react/hooks/use-anchor-props");
 const cx_1 = require("@uxf/core/utils/cx");
 const is_empty_1 = require("@uxf/core/utils/is-empty");
+const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
 const react_3 = __importStar(require("react"));
 const button_1 = require("../button");
 const use_dropdown_1 = require("../hooks/use-dropdown");
@@ -41,7 +42,7 @@ const MenuButton = (0, react_3.forwardRef)((props, ref) => {
         className: (0, cx_1.cx)("uxf-button-list__menu-button", className),
     });
     return (react_3.default.createElement("a", { ref: ref, ...anchorProps },
-        icon && react_3.default.createElement(icon_1.Icon, { name: icon, className: "uxf-button-list__menu-button-icon" }),
+        icon && react_3.default.createElement(icon_1.Icon, { className: "uxf-button-list__menu-button-icon", name: icon }),
         label && react_3.default.createElement("span", { className: "uxf-button-list__menu-button-label" }, label)));
 });
 MenuButton.displayName = "MenuButton";
@@ -49,7 +50,7 @@ const ButtonList = (props) => {
     var _a, _b, _c, _d, _e, _f;
     const buttonsToRender = props.buttons.slice(0, props.visibleButtonsCount);
     const restButtons = props.buttons.slice(props.visibleButtonsCount, props.buttons.length);
-    const openButtonIcon = ((_a = props.openButton) === null || _a === void 0 ? void 0 : _a.icon) === null ? null : (_c = (_b = props.openButton) === null || _b === void 0 ? void 0 : _b.icon) !== null && _c !== void 0 ? _c : "ellipsis-vertical";
+    const openButtonIcon = ((_a = props.openButton) === null || _a === void 0 ? void 0 : _a.icon) === null ? null : ((_c = (_b = props.openButton) === null || _b === void 0 ? void 0 : _b.icon) !== null && _c !== void 0 ? _c : "ellipsis-vertical");
     const openButtonLabel = (_e = (_d = props.openButton) === null || _d === void 0 ? void 0 : _d.label) !== null && _e !== void 0 ? _e : null;
     const dropdown = (0, use_dropdown_1.useDropdown)((_f = props.menuPlacement) !== null && _f !== void 0 ? _f : "bottom-start", false, props.menuMaxHeight, props.menuStrategy);
     if ((0, is_empty_1.isEmpty)(props.buttons)) {
@@ -61,15 +62,15 @@ const ButtonList = (props) => {
         buttonsToRender.map((button, index) => {
             var _a, _b, _c;
             const { icon, label, ...restProps } = button;
-            return (react_3.default.createElement(button_1.Button, { key: index, ...restProps, color: (_a = restProps.color) !== null && _a !== void 0 ? _a : props.color, size: (_b = restProps.size) !== null && _b !== void 0 ? _b : props.size, variant: (_c = restProps.variant) !== null && _c !== void 0 ? _c : props.variant, className: (0, cx_1.cx)(restProps.className, "uxf-button-list__button") },
-                icon && react_3.default.createElement(icon_1.Icon, { name: icon, className: "uxf-button-list__button-icon" }),
+            return (react_3.default.createElement(button_1.Button, { key: index, ...restProps, className: (0, cx_1.cx)(restProps.className, "uxf-button-list__button"), color: (_a = restProps.color) !== null && _a !== void 0 ? _a : props.color, size: (_b = restProps.size) !== null && _b !== void 0 ? _b : props.size, variant: (_c = restProps.variant) !== null && _c !== void 0 ? _c : props.variant },
+                icon && react_3.default.createElement(icon_1.Icon, { className: "uxf-button-list__button-icon", name: icon }),
                 label && react_3.default.createElement("span", { className: "uxf-button-list__button-label" }, label)));
         }),
         restButtons.length > 0 && (react_3.default.createElement(react_2.Menu, { as: "div", className: "uxf-button-list__menu" }, ({ open }) => {
             var _a, _b, _c, _d, _e, _f, _g;
             return (react_3.default.createElement(react_3.default.Fragment, null,
-                react_3.default.createElement(react_2.Menu.Button, { as: button_1.Button, ...openButtonProps, color: (_b = (_a = props.openButton) === null || _a === void 0 ? void 0 : _a.color) !== null && _b !== void 0 ? _b : props.color, size: (_d = (_c = props.openButton) === null || _c === void 0 ? void 0 : _c.size) !== null && _d !== void 0 ? _d : props.size, variant: (_f = (_e = props.openButton) === null || _e === void 0 ? void 0 : _e.variant) !== null && _f !== void 0 ? _f : props.variant, className: (0, cx_1.cx)((_g = props.openButton) === null || _g === void 0 ? void 0 : _g.className, "uxf-button-list__open-button"), isIconButton: !!openButtonIcon && !openButtonLabel, ref: dropdown.refs.setReference },
-                    openButtonIcon && (react_3.default.createElement(icon_1.Icon, { name: openButtonIcon, className: "uxf-button-list__open-button-icon" })),
+                react_3.default.createElement(react_2.Menu.Button, { as: button_1.Button, ...openButtonProps, className: (0, cx_1.cx)((_a = props.openButton) === null || _a === void 0 ? void 0 : _a.className, "uxf-button-list__open-button"), color: (_c = (_b = props.openButton) === null || _b === void 0 ? void 0 : _b.color) !== null && _c !== void 0 ? _c : props.color, isIconButton: (0, is_not_nil_1.isNotNil)(openButtonIcon) && !openButtonLabel, ref: dropdown.refs.setReference, size: (_e = (_d = props.openButton) === null || _d === void 0 ? void 0 : _d.size) !== null && _e !== void 0 ? _e : props.size, variant: (_g = (_f = props.openButton) === null || _f === void 0 ? void 0 : _f.variant) !== null && _g !== void 0 ? _g : props.variant },
+                    openButtonIcon && (react_3.default.createElement(icon_1.Icon, { className: "uxf-button-list__open-button-icon", name: openButtonIcon })),
                     openButtonLabel && (react_3.default.createElement("span", { className: "uxf-button-list__open-button-label" }, openButtonLabel))),
                 open && (react_3.default.createElement(react_1.FloatingPortal, null,
                     react_3.default.createElement(react_2.Menu.Items, { className: "uxf-button-list__menu-items", ref: dropdown.refs.setFloating, style: dropdown.floatingStyles }, restButtons.map((button, index) => {

package/button-list/button-list.stories.d.ts

@@ -4,4 +4,4 @@ declare const _default: {
     component: React.FC<import("./button-list").ButtonListProps>;
 };
 export default _default;
-export declare const Default: () => React.JSX.Element;
+export declare function Default(): React.JSX.Element;

package/button-list/button-list.stories.js

@@ -3,16 +3,17 @@ 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 empty_object_1 = require("@uxf/core/constants/empty-object");
 const react_1 = __importDefault(require("react"));
 const index_1 = require("./index");
 exports.default = {
     title: "UI/ButtonList",
     component: index_1.ButtonList,
 };
-const Default = () => {
+function Default() {
     const component = (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(index_1.ButtonList, { menuMaxHeight: 350, visibleButtonsCount: 0, variant: "secondary", buttons: [
+        react_1.default.createElement(index_1.ButtonList, { buttons: [
                 { label: "First item" },
                 { label: "Second item" },
                 { label: "Third item" },
@@ -24,38 +25,37 @@ const Default = () => {
                 { label: "Nineth item" },
                 { label: "Tenth item" },
                 { label: "Eleventh item" },
-            ] }),
-        react_1.default.createElement(index_1.ButtonList, { visibleButtonsCount: 4, variant: "secondary", buttons: [
+            ], menuMaxHeight: 350, variant: "secondary", visibleButtonsCount: 0 }),
+        react_1.default.createElement(index_1.ButtonList, { buttons: [
                 { label: "First item" },
                 { label: "Second item" },
                 { label: "Third item" },
                 { label: "Fourth item" },
-            ] }),
-        react_1.default.createElement(index_1.ButtonList, { visibleButtonsCount: 2, buttons: [
+            ], variant: "secondary", visibleButtonsCount: 4 }),
+        react_1.default.createElement(index_1.ButtonList, { buttons: [
                 // eslint-disable-next-line no-console
                 { label: "First item", onClick: console.log },
                 { label: "Second item", color: "positive" },
                 { label: "Third item" },
                 // eslint-disable-next-line no-console
                 { label: "Fourth item", onClick: console.log },
-            ] }),
-        react_1.default.createElement(index_1.ButtonList, { visibleButtonsCount: 1, size: "sm", color: "negative", variant: "secondary", buttons: [
+            ], visibleButtonsCount: 2 }),
+        react_1.default.createElement(index_1.ButtonList, { buttons: [
                 // eslint-disable-next-line no-console
                 { icon: "check", label: "First item", onClick: console.log },
                 { icon: "user", label: "Second item", color: "positive" },
                 { icon: "cloud", label: "Third item" },
                 // eslint-disable-next-line no-console
                 { icon: "xmarkLarge", label: "Fourth item", onClick: console.log },
-            ], openButton: {} }),
-        react_1.default.createElement(index_1.ButtonList, { visibleButtonsCount: 3, size: "sm", color: "positive", buttons: [
+            ], color: "negative", openButton: empty_object_1.EMPTY_OBJECT, size: "sm", variant: "secondary", visibleButtonsCount: 1 }),
+        react_1.default.createElement(index_1.ButtonList, { buttons: [
                 // eslint-disable-next-line no-console
                 { icon: "check", label: "First item", onClick: console.log, color: "negative" },
                 { icon: "user", label: "Second item", color: "positive", size: "default" },
                 { icon: "cloud", label: "Third item" },
                 // eslint-disable-next-line no-console
                 { icon: "xmarkLarge", label: "Fourth item", onClick: console.log },
-            ], openButton: { variant: "secondary", color: "default" } })));
+            ], color: "positive", openButton: { variant: "secondary", color: "default" }, size: "sm", visibleButtonsCount: 3 })));
     return (react_1.default.createElement("div", { className: "flex flex-col lg:flex-row" },
         react_1.default.createElement("div", { className: "space-y-2 p-20 lg:w-1/2" }, component)));
-};
-exports.Default = Default;
+}

package/calendar/calendar-day-cell.js

@@ -59,7 +59,7 @@ exports.CalendarDayCell = (0, react_1.memo)((props) => {
     if (!props.day.dayLabel) {
         return react_1.default.createElement("div", null);
     }
-    return (react_1.default.createElement("button", { className: (0, cx_1.cx)("uxf-calendar__cell uxf-calendar__cell-day", isFirstDisabled && props.day.currentMonth && "is-disabled-start", isLastDisabled && props.day.currentMonth && "is-disabled-end", disabledDate && classes_1.CLASSES.IS_DISABLED, isToday && "uxf-calendar__cell--today", isSelected && "uxf-calendar__cell--selected", isInsideRange && "uxf-calendar__cell--inside-range", isWithinHoverRange && "uxf-calendar__cell--is-within-hover-range", isHovered && "uxf-calendar__cell--is-hovered", !props.day.currentMonth && "uxf-calendar__cell--not-current-month", (0, get_class_names_from_flags_1.getClassNamesFromFlags)(flags)), ref: disabledDate ? undefined : (0, compose_refs_1.composeRefs)(dayCellRef, innerRef), onClick: onClick, onKeyDown: onKeyDown, onMouseEnter: onMouseEnter, tabIndex: tabIndex, type: "button" },
+    return (react_1.default.createElement("button", { className: (0, cx_1.cx)("uxf-calendar__cell uxf-calendar__cell-day", isFirstDisabled && props.day.currentMonth && "is-disabled-start", isLastDisabled && props.day.currentMonth && "is-disabled-end", disabledDate && classes_1.CLASSES.IS_DISABLED, isToday && "uxf-calendar__cell--today", isSelected && "uxf-calendar__cell--selected", isInsideRange && "uxf-calendar__cell--inside-range", isWithinHoverRange && "uxf-calendar__cell--is-within-hover-range", isHovered && "uxf-calendar__cell--is-hovered", !props.day.currentMonth && "uxf-calendar__cell--not-current-month", (0, get_class_names_from_flags_1.getClassNamesFromFlags)(flags)), onClick: onClick, onKeyDown: onKeyDown, onMouseEnter: onMouseEnter, ref: disabledDate ? undefined : (0, compose_refs_1.composeRefs)(dayCellRef, innerRef), tabIndex: tabIndex, type: "button" },
         react_1.default.createElement("span", { className: "uxf-calendar__cell__inner" }, props.day.dayLabel)));
 });
 exports.CalendarDayCell.displayName = "UxfUiCalendarDayCell";

package/calendar/calendar-navigation.js

@@ -11,7 +11,7 @@ const CalendarNavigation = (props) => {
     return (react_1.default.createElement("div", { className: "uxf-calendar-navigation" },
         react_1.default.createElement(button_1.Button, { isIconButton: true, size: "sm", variant: "secondary", ...props.prevButtonProps },
             react_1.default.createElement(icon_1.Icon, { name: "arrow-left", size: 16 })),
-        props.selectButtonProps.onClick ? (react_1.default.createElement(button_1.Button, { variant: "text", size: "sm", color: "default", ...props.selectButtonProps })) : (react_1.default.createElement("p", { className: "uxf-calendar-navigation__title" }, props.selectButtonProps.children)),
+        props.selectButtonProps.onClick ? (react_1.default.createElement(button_1.Button, { color: "default", size: "sm", variant: "text", ...props.selectButtonProps })) : (react_1.default.createElement("p", { className: "uxf-calendar-navigation__title" }, props.selectButtonProps.children)),
         react_1.default.createElement(button_1.Button, { isIconButton: true, size: "sm", variant: "secondary", ...props.nextButtonProps },
             react_1.default.createElement(icon_1.Icon, { name: "arrow-right", size: 16 }))));
 };

package/calendar/calendar.js

@@ -33,18 +33,18 @@ const dayjs_1 = __importDefault(require("dayjs"));
 const react_1 = __importStar(require("react"));
 const calendar_day_cell_1 = require("./calendar-day-cell");
 exports.Calendar = (0, react_1.forwardRef)((props, ref) => {
-    var _a, _b;
+    var _a, _b, _c, _d, _e, _f;
     const calendarClassName = (0, cx_1.cx)("uxf-calendar", props.className);
     const { days, weekdayLabels } = (0, use_month_1.useMonth)({
         dayLabelFormat: (date) => (0, dayjs_1.default)(date).format("D"),
         firstDayOfWeek: props.datePickerProps.firstDayOfWeek,
-        month: (_a = props.month) !== null && _a !== void 0 ? _a : props.datePickerProps.activeMonths[0].month,
+        month: (_c = (_a = props.month) !== null && _a !== void 0 ? _a : (_b = props.datePickerProps.activeMonths.at(0)) === null || _b === void 0 ? void 0 : _b.month) !== null && _c !== void 0 ? _c : new Date().getMonth(),
         monthLabelFormat: (date) => (0, dayjs_1.default)(date).format("MMMM YYYY"),
         weekdayLabelFormat: (date) => (0, dayjs_1.default)(date).format("dd"),
-        year: (_b = props.year) !== null && _b !== void 0 ? _b : props.datePickerProps.activeMonths[0].year,
+        year: (_f = (_d = props.year) !== null && _d !== void 0 ? _d : (_e = props.datePickerProps.activeMonths.at(0)) === null || _e === void 0 ? void 0 : _e.year) !== null && _f !== void 0 ? _f : new Date().getFullYear(),
     });
-    return (react_1.default.createElement("div", { ref: ref, className: calendarClassName },
-        react_1.default.createElement("div", { className: "uxf-calendar__weekdays" }, weekdayLabels.map((weekdayLabel, index) => (react_1.default.createElement("span", { key: `${index}`, className: "uxf-calendar__weekday" }, weekdayLabel)))),
+    return (react_1.default.createElement("div", { className: calendarClassName, ref: ref },
+        react_1.default.createElement("div", { className: "uxf-calendar__weekdays" }, weekdayLabels.map((weekdayLabel, index) => (react_1.default.createElement("span", { className: "uxf-calendar__weekday", key: `${index}` }, weekdayLabel)))),
         react_1.default.createElement("div", { className: "uxf-calendar__days" }, days.map((day, index) => (react_1.default.createElement(calendar_day_cell_1.CalendarDayCell, { datePickerProps: props.datePickerProps, day: day, key: day.dayLabel + index }))))));
 });
 exports.Calendar.displayName = "UxfUiCalendar";

package/calendar/calendar.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 calendar_1 = require("./calendar");
@@ -40,9 +40,6 @@ exports.default = {
 function Default() {
     const [date, setDate] = (0, react_1.useState)(null);
     const onChange = (0, action_1.action)("onChange", setDate);
-    const testCalendars = (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(calendar_provider_1.CalendarProvider, { selectedDate: date, onChange: onChange })));
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("div", { className: "max-w-[640px] space-y-4 rounded p-8" }, testCalendars)));
+    const testCalendars = react_1.default.createElement(calendar_provider_1.CalendarProvider, { onChange: onChange, selectedDate: date });
+    return react_1.default.createElement("div", { className: "max-w-screen-sm space-y-4 rounded p-8" }, testCalendars);
 }
-exports.Default = Default;

package/checkbox/checkbox.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 checkbox_1 = require("./checkbox");
@@ -35,11 +35,10 @@ function Default() {
     const [checked, setChecked] = (0, react_1.useState)(true);
     const onChange = (0, action_1.action)("onChange", () => setChecked((prev) => !prev));
     const checkboxes = (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(checkbox_1.Checkbox, { onChange: onChange, value: checked, name: "checkbox" }),
-        react_1.default.createElement(checkbox_1.Checkbox, { isDisabled: true, onChange: onChange, value: checked, name: "checkbox-disabled" }),
-        react_1.default.createElement(checkbox_1.Checkbox, { isInvalid: true, onChange: onChange, value: checked, name: "checkbox-invalid" }),
-        react_1.default.createElement(checkbox_1.Checkbox, { onChange: onChange, value: checked, size: "lg", name: "checkbox-size-lg" })));
+        react_1.default.createElement(checkbox_1.Checkbox, { name: "checkbox", onChange: onChange, value: checked }),
+        react_1.default.createElement(checkbox_1.Checkbox, { isDisabled: true, name: "checkbox-disabled", onChange: onChange, value: checked }),
+        react_1.default.createElement(checkbox_1.Checkbox, { isInvalid: true, name: "checkbox-invalid", onChange: onChange, value: checked }),
+        react_1.default.createElement(checkbox_1.Checkbox, { name: "checkbox-size-lg", onChange: onChange, size: "lg", value: checked })));
     return (react_1.default.createElement("div", { className: "flex" },
         react_1.default.createElement("div", { className: "flex flex-col gap-4 p-20" }, checkboxes)));
 }
-exports.Default = Default;

package/checkbox-button/checkbox-button.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 index_1 = require("./index");
@@ -36,8 +36,7 @@ function Default() {
     const onChange = (0, action_1.action)("onChange", () => setChecked((prev) => !prev));
     return (react_1.default.createElement("div", { className: "flex" },
         react_1.default.createElement("div", { className: "flex flex-col gap-4 p-20" },
-            react_1.default.createElement(index_1.CheckboxButton, { label: "Opravdu?", onChange: onChange, value: checked, name: "checkbox-button" }),
-            react_1.default.createElement(index_1.CheckboxButton, { label: "Opravdu?", isDisabled: true, onChange: onChange, value: checked, name: "checkbox-button-disabled" }),
-            react_1.default.createElement(index_1.CheckboxButton, { label: "Opravdu?", isInvalid: true, onChange: onChange, value: checked, name: "checkbox-button-invalid" }))));
+            react_1.default.createElement(index_1.CheckboxButton, { label: "Opravdu?", name: "checkbox-button", onChange: onChange, value: checked }),
+            react_1.default.createElement(index_1.CheckboxButton, { isDisabled: true, label: "Opravdu?", name: "checkbox-button-disabled", onChange: onChange, value: checked }),
+            react_1.default.createElement(index_1.CheckboxButton, { isInvalid: true, label: "Opravdu?", name: "checkbox-button-invalid", onChange: onChange, value: checked }))));
 }
-exports.Default = Default;

package/checkbox-input/checkbox-input.js

@@ -33,10 +33,10 @@ exports.CheckboxInput = (0, react_2.forwardRef)((props, ref) => {
     const id = (_a = props.id) !== null && _a !== void 0 ? _a : generatedId;
     const errorId = props.isInvalid ? `${id}--error-message` : undefined;
     return (react_2.default.createElement(react_1.Switch.Group, null,
-        react_2.default.createElement("div", { className: `uxf-checkbox-input__wrapper ${(_b = props.className) !== null && _b !== void 0 ? _b : ""}`, style: props.style, "data-name": props.name },
-            react_2.default.createElement(react_1.Switch, { as: react_2.Fragment, checked: props.value, name: props.name, onChange: props.onChange }, ({ checked }) => (react_2.default.createElement(checkbox_1.Checkbox, { className: "uxf-checkbox-input", id: props.id, indeterminate: props.indeterminate, isDisabled: props.isDisabled, isFocused: props.isFocused, isInvalid: props.isInvalid, isReadOnly: props.isReadOnly, isRequired: props.isRequired, onChange: props.onChange, ref: ref, size: props.size, value: checked, name: props.name }))),
+        react_2.default.createElement("div", { className: `uxf-checkbox-input__wrapper ${(_b = props.className) !== null && _b !== void 0 ? _b : ""}`, "data-name": props.name, style: props.style },
+            react_2.default.createElement(react_1.Switch, { as: react_2.Fragment, checked: props.value, name: props.name, onChange: props.onChange }, ({ checked }) => (react_2.default.createElement(checkbox_1.Checkbox, { className: "uxf-checkbox-input", id: props.id, indeterminate: props.indeterminate, isDisabled: props.isDisabled, isFocused: props.isFocused, isInvalid: props.isInvalid, isReadOnly: props.isReadOnly, isRequired: props.isRequired, name: props.name, onChange: props.onChange, ref: ref, size: props.size, value: checked }))),
             react_2.default.createElement(react_1.Switch.Label, { className: `uxf-checkbox-input__label ${props.hiddenLabel ? "uxf-checkbox-input__label--hidden" : ""}` },
                 react_2.default.createElement("span", { className: "uxf-checkbox-input__label--text" }, props.label),
-                react_2.default.createElement("span", { id: errorId, className: "uxf-checkbox-input__label--subtitle" }, props.helperText)))));
+                react_2.default.createElement("span", { className: "uxf-checkbox-input__label--subtitle", id: errorId }, props.helperText)))));
 });
 exports.CheckboxInput.displayName = "UxfUiCheckboxInput";