@uxf/ui 11.9.0 → 11.11.0

package/alert-bubble/alert-bubble.stories.js

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

package/avatar/avatar.stories.d.ts

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

package/avatar/avatar.stories.js

@@ -6,16 +6,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Default = void 0;
 const react_1 = __importDefault(require("react"));
 const avatar_1 = require("./avatar");
-exports.default = {
-    title: "UI/Avatar",
-    component: avatar_1.Avatar,
-};
 function Default() {
-    const testAvatars = (react_1.default.createElement(react_1.default.Fragment, null,
+    return (react_1.default.createElement("div", { className: "flex space-x-4 p-8" },
         react_1.default.createElement(avatar_1.Avatar, { src: "https://images.pexels.com/photos/14934612/pexels-photo-14934612.jpeg?auto=compress&cs=tinysrgb&w=100&h=100&dpr=1" }),
         react_1.default.createElement(avatar_1.Avatar, null)));
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("div", { className: "light flex items-center space-x-4 rounded bg-white p-8" }, testAvatars),
-        react_1.default.createElement("div", { className: "dark flex items-center space-x-4 rounded bg-gray-900 p-8 text-white" }, testAvatars)));
 }
 exports.Default = Default;

package/avatar-file-input/avatar-file-input.stories.d.ts

@@ -1,7 +1,2 @@
 import React from "react";
-declare const _default: {
-    title: string;
-    component: React.ForwardRefExoticComponent<import("./avatar-file-input").AvatarFileInputProps & React.RefAttributes<HTMLInputElement>>;
-};
-export default _default;
 export declare function Default(): React.JSX.Element;

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

@@ -28,10 +28,6 @@ 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");
 const index_1 = require("./index");
-exports.default = {
-    title: "UI/AvatarFileInput",
-    component: index_1.AvatarFileInput,
-};
 function Default() {
     const [value, setValue] = (0, react_1.useState)(null);
     const onChange = (0, action_1.action)("onChange", (v) => {
@@ -45,12 +41,9 @@ function Default() {
         // eslint-disable-next-line no-console
         console.log("Upload error", err);
     };
-    const storyAvatarFileInputs = (react_1.default.createElement("div", { className: "space-y-8" },
+    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" }),
         react_1.default.createElement(index_1.AvatarFileInput, { isDisabled: true, 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", onChange: onChange, onUploadError: onUploadError, onUploadFile: upload_file_mock_1.uploadFile, value: value })));
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("div", { className: "light space-y-2 p-20" }, storyAvatarFileInputs),
-        react_1.default.createElement("div", { className: "dark space-y-2 bg-gray-900 p-20" }, storyAvatarFileInputs)));
 }
 exports.Default = Default;

package/badge/badge.stories.js

@@ -33,7 +33,6 @@ function Default() {
             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: "light flex items-center space-x-4 rounded bg-white p-8" }, testBadges),
-        react_1.default.createElement("div", { className: "dark flex items-center space-x-4 rounded bg-gray-900 p-8 text-white" }, testBadges)));
+        react_1.default.createElement("div", { className: "flex items-center space-x-4 rounded p-8" }, testBadges)));
 }
 exports.Default = Default;

package/button/button.stories.d.ts

@@ -1,10 +1,2 @@
 import React from "react";
-declare const _default: {
-    title: string;
-    component: React.ForwardRefExoticComponent<import("@uxf/ui/button").ButtonProps & React.RefAttributes<HTMLAnchorElement>>;
-    parameters: {
-        docs: {};
-    };
-};
-export default _default;
 export declare function Default(): React.JSX.Element;

package/button/button.stories.js

@@ -28,20 +28,11 @@ const button_1 = require("@uxf/ui/button");
 const icon_1 = require("@uxf/ui/icon");
 const storybook_config_1 = require("@uxf/ui/utils/storybook-config");
 const react_1 = __importStar(require("react"));
-exports.default = {
-    title: "UI/Button",
-    component: button_1.Button,
-    parameters: {
-        docs: {
-        // page: Docs,
-        },
-    },
-};
 function Default() {
     const config = (0, storybook_config_1.useStorybookConfig)("Button");
     // eslint-disable-next-line no-console
     const onClick = console.log;
-    const storyButtons = 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", { key: `${size}${color}${variant}`, className: "space-y-2 pb-4" },
         react_1.default.createElement("div", { className: "text-sm dark:text-gray-100" },
             "Variant: ",
             react_1.default.createElement("span", { className: "font-semibold" }, variant),
@@ -61,9 +52,6 @@ function Default() {
                 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))))))))));
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("div", { className: "light space-y-2 p-20" }, storyButtons),
-        react_1.default.createElement("div", { className: "dark space-y-2 bg-gray-900 p-20" }, storyButtons)));
+        react_1.default.createElement("hr", null))))))))))));
 }
 exports.Default = Default;

package/button-group/button-group.stories.js

@@ -34,7 +34,6 @@ const Default = () => {
             react_1.default.createElement(tooltip_1.Tooltip, { content: "Tooltip" },
                 react_1.default.createElement(button_1.Button, { size: "sm", variant: "outlined", onClick: onClick }, "Third")))));
     return (react_1.default.createElement("div", { className: "flex flex-col lg:flex-row" },
-        react_1.default.createElement("div", { className: "light space-y-2 p-20 lg:w-1/2" }, component),
-        react_1.default.createElement("div", { className: "dark space-y-2 bg-gray-900 p-20 lg:w-1/2" }, component)));
+        react_1.default.createElement("div", { className: "space-y-2 p-20 lg:w-1/2" }, component)));
 };
 exports.Default = Default;

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

@@ -49,7 +49,6 @@ const Default = () => {
                 { icon: "xmarkLarge", label: "Fourth item", onClick: console.log },
             ], openButton: { variant: "outlined", color: "default" } })));
     return (react_1.default.createElement("div", { className: "flex flex-col lg:flex-row" },
-        react_1.default.createElement("div", { className: "light space-y-2 p-20 lg:w-1/2" }, component),
-        react_1.default.createElement("div", { className: "dark space-y-2 bg-gray-900 p-20 lg:w-1/2" }, component)));
+        react_1.default.createElement("div", { className: "space-y-2 p-20 lg:w-1/2" }, component)));
 };
 exports.Default = Default;

package/calendar/calendar.stories.js

@@ -43,7 +43,6 @@ function Default() {
     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: "light max-w-[640px] space-y-4 rounded bg-white p-8" }, testCalendars),
-        react_1.default.createElement("div", { className: "dark max-w-[640px] space-y-4 rounded bg-gray-900 p-8 text-white" }, testCalendars)));
+        react_1.default.createElement("div", { className: "max-w-[640px] space-y-4 rounded p-8" }, testCalendars)));
 }
 exports.Default = Default;

package/checkbox/checkbox.stories.js

@@ -40,7 +40,6 @@ function Default() {
         react_1.default.createElement(checkbox_1.Checkbox, { isInvalid: true, onChange: onChange, value: checked }),
         react_1.default.createElement(checkbox_1.Checkbox, { onChange: onChange, value: checked, size: "lg" })));
     return (react_1.default.createElement("div", { className: "flex" },
-        react_1.default.createElement("div", { className: "light flex flex-col gap-4 p-20" }, checkboxes),
-        react_1.default.createElement("div", { className: "dark flex flex-col gap-4 bg-gray-900 p-20" }, checkboxes)));
+        react_1.default.createElement("div", { className: "flex flex-col gap-4 p-20" }, checkboxes)));
 }
 exports.Default = Default;

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

@@ -35,11 +35,7 @@ function Default() {
     const [checked, setChecked] = (0, react_1.useState)(true);
     const onChange = (0, action_1.action)("onChange", () => setChecked((prev) => !prev));
     return (react_1.default.createElement("div", { className: "flex" },
-        react_1.default.createElement("div", { className: "light flex flex-col gap-4 p-20" },
-            react_1.default.createElement(index_1.CheckboxButton, { label: "Opravdu?", onChange: onChange, value: checked }),
-            react_1.default.createElement(index_1.CheckboxButton, { label: "Opravdu?", isDisabled: true, onChange: onChange, value: checked }),
-            react_1.default.createElement(index_1.CheckboxButton, { label: "Opravdu?", isInvalid: true, onChange: onChange, value: checked })),
-        react_1.default.createElement("div", { className: "dark flex flex-col gap-4 bg-gray-900 p-20" },
+        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 }),
             react_1.default.createElement(index_1.CheckboxButton, { label: "Opravdu?", isDisabled: true, onChange: onChange, value: checked }),
             react_1.default.createElement(index_1.CheckboxButton, { label: "Opravdu?", isInvalid: true, onChange: onChange, value: checked }))));

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

@@ -41,7 +41,6 @@ function Default() {
         react_1.default.createElement(checkbox_input_1.CheckboxInput, { label: "Opravdu? (size lg)", onChange: onChange, value: checked, size: "lg" }),
         react_1.default.createElement(checkbox_input_1.CheckboxInput, { label: "hidden label", hiddenLabel: true, onChange: onChange, value: checked, size: "lg" })));
     return (react_1.default.createElement("div", { className: "flex" },
-        react_1.default.createElement("div", { className: "light flex flex-col gap-4 p-20" }, checkboxes),
-        react_1.default.createElement("div", { className: "dark flex flex-col gap-4 bg-gray-900 p-20" }, checkboxes)));
+        react_1.default.createElement("div", { className: "flex flex-col gap-4 p-20" }, checkboxes)));
 }
 exports.Default = Default;

package/chip/chip.stories.js

@@ -40,7 +40,7 @@ const getChipsForSize = (colors) => {
     const sizes = ["small", "default", "large"];
     const variants = ["low", "medium", "default"];
     return sizes.map((size) => (react_1.default.createElement(react_1.Fragment, { key: size },
-        react_1.default.createElement("div", { className: "uxf-typo-h5" }, size),
+        react_1.default.createElement("div", { className: "uxf-typo-h5 dark:text-white" }, size),
         react_1.default.createElement("div", { className: "flex flex-col space-y-4 px-5" },
             react_1.default.createElement("div", { className: "grid grid-cols-3 gap-4", key: size }, variants.map((variant) => (react_1.default.createElement("div", { className: "flex flex-col gap-2", key: `${size}${variant}` }, colors.map((color) => (react_1.default.createElement("div", { className: "flex flex-col items-start space-y-2", key: `${size}${variant}${color}` },
                 react_1.default.createElement(chip_1.Chip, { color: color, size: size, variant: variant }, color),
@@ -52,7 +52,6 @@ const getChipsForSize = (colors) => {
 function Default() {
     const config = (0, storybook_config_1.useStorybookConfig)("Chip");
     return (react_1.default.createElement("div", { className: "flex lg:flex-row" },
-        react_1.default.createElement("div", { className: "light space-y-4 rounded bg-white p-10" }, getChipsForSize(config.colors)),
-        react_1.default.createElement("div", { className: "dark space-y-4 rounded bg-gray-900 p-10 text-white" }, getChipsForSize(config.colors))));
+        react_1.default.createElement("div", { className: "space-y-4 rounded p-10" }, getChipsForSize(config.colors))));
 }
 exports.Default = Default;

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

@@ -11,7 +11,7 @@ exports.default = {
     component: color_radio_1.ColorRadio,
 };
 function Default() {
-    const radios = (react_1.default.createElement(react_1.default.Fragment, null,
+    const radios = (react_1.default.createElement("div", { className: "dark:text-white" },
         react_1.default.createElement("div", { className: "mb-2 mt-4 font-semibold" }, "Default"),
         react_1.default.createElement("div", { className: "flex flex-row gap-4" },
             react_1.default.createElement(color_radio_1.ColorRadio, { checked: false, color: "#ff0000", colorLabel: "Red", value: 1 }),
@@ -25,7 +25,6 @@ function Default() {
             react_1.default.createElement(color_radio_1.ColorRadio, { checked: false, color: "#ff0000", colorLabel: "Red", isDisabled: true, value: 1 }),
             react_1.default.createElement(color_radio_1.ColorRadio, { checked: true, color: "#ff0000", colorLabel: "Red", isDisabled: true, value: 2 }))));
     return (react_1.default.createElement("div", { className: "flex" },
-        react_1.default.createElement("div", { className: "light p-20 " }, radios),
-        react_1.default.createElement("div", { className: "dark bg-gray-900 p-20 text-white" }, radios)));
+        react_1.default.createElement("div", { className: "p-20 " }, radios)));
 }
 exports.Default = Default;

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

@@ -73,9 +73,7 @@ function Default() {
     const [value, setValue] = (0, react_1.useState)(options[0].value);
     const onChange = (0, action_1.action)("onChange", setValue);
     return (react_1.default.createElement("div", { className: "flex" },
-        react_1.default.createElement("div", { className: "light w-1/2 p-20" },
-            react_1.default.createElement(index_1.ColorRadioGroup, { id: "radiogroup", label: "Light Color Radio group", onChange: onChange, options: options, value: value })),
-        react_1.default.createElement("div", { className: "dark w-1/2 bg-gray-900 p-20" },
-            react_1.default.createElement(index_1.ColorRadioGroup, { id: "radiogroup", label: "Dark Color Radio group with helper text", helperText: "Some helper text", onChange: onChange, options: options, value: value }))));
+        react_1.default.createElement("div", { className: "w-1/2 p-20" },
+            react_1.default.createElement(index_1.ColorRadioGroup, { id: "radiogroup", label: "Light Color Radio group", onChange: onChange, options: options, value: value }))));
 }
 exports.Default = Default;

package/color-scheme/get-color-scheme-class-name.d.ts

@@ -0,0 +1,2 @@
+import { ColorScheme } from "../types";
+export declare function getColorSchemeClassName(colorScheme: ColorScheme | undefined): "dark" | "light";

package/color-scheme/get-color-scheme-class-name.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getColorSchemeClassName = void 0;
+function getColorSchemeClassName(colorScheme) {
+    switch (colorScheme) {
+        case "dark":
+            return "dark";
+        case "light":
+            return "light";
+        default:
+            return "light";
+    }
+}
+exports.getColorSchemeClassName = getColorSchemeClassName;

package/color-scheme/get-color-scheme.d.ts

@@ -0,0 +1,2 @@
+import { ColorScheme } from "../types";
+export declare function getColorScheme(): ColorScheme | undefined;

package/color-scheme/get-color-scheme.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getColorScheme = void 0;
+const isServer_1 = require("@uxf/core/utils/isServer");
+function getColorScheme() {
+    if (isServer_1.isServer) {
+        return;
+    }
+    const bodyClassList = document.body.classList;
+    if (bodyClassList.contains("light")) {
+        return "light";
+    }
+    if (bodyClassList.contains("dark")) {
+        return "dark";
+    }
+}
+exports.getColorScheme = getColorScheme;

package/color-scheme/index.d.ts

@@ -1,3 +1,5 @@
 export { COLOR_SCHEME_DEFAULTS } from "./color-scheme-defaults";
+export { getColorScheme } from "./get-color-scheme";
+export { getColorSchemeClassName } from "./get-color-scheme-class-name";
 export { useColorScheme } from "./use-color-scheme";
 export { useToggleColorScheme } from "./use-toggle-color-scheme";

package/color-scheme/index.js

@@ -1,8 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useToggleColorScheme = exports.useColorScheme = exports.COLOR_SCHEME_DEFAULTS = void 0;
+exports.useToggleColorScheme = exports.useColorScheme = exports.getColorSchemeClassName = exports.getColorScheme = exports.COLOR_SCHEME_DEFAULTS = void 0;
 var color_scheme_defaults_1 = require("./color-scheme-defaults");
 Object.defineProperty(exports, "COLOR_SCHEME_DEFAULTS", { enumerable: true, get: function () { return color_scheme_defaults_1.COLOR_SCHEME_DEFAULTS; } });
+var get_color_scheme_1 = require("./get-color-scheme");
+Object.defineProperty(exports, "getColorScheme", { enumerable: true, get: function () { return get_color_scheme_1.getColorScheme; } });
+var get_color_scheme_class_name_1 = require("./get-color-scheme-class-name");
+Object.defineProperty(exports, "getColorSchemeClassName", { enumerable: true, get: function () { return get_color_scheme_class_name_1.getColorSchemeClassName; } });
 var use_color_scheme_1 = require("./use-color-scheme");
 Object.defineProperty(exports, "useColorScheme", { enumerable: true, get: function () { return use_color_scheme_1.useColorScheme; } });
 var use_toggle_color_scheme_1 = require("./use-toggle-color-scheme");

package/color-scheme/use-color-scheme.d.ts

@@ -1 +1,2 @@
-export declare function useColorScheme(): () => "dark" | "light" | undefined;
+import { ColorScheme } from "../types";
+export declare function useColorScheme(): ColorScheme | undefined;

package/color-scheme/use-color-scheme.js

@@ -1,19 +1,16 @@
 "use strict";
+"use client";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useColorScheme = void 0;
-const isServer_1 = require("@uxf/core/utils/isServer");
+const react_1 = require("react");
+const get_color_scheme_1 = require("./get-color-scheme");
 function useColorScheme() {
-    return () => {
-        if (isServer_1.isServer) {
-            return;
-        }
-        const bodyClassList = document.body.classList;
-        if (bodyClassList.contains("light")) {
-            return "light";
-        }
-        if (bodyClassList.contains("dark")) {
-            return "dark";
-        }
-    };
+    const [colorScheme, setColorScheme] = (0, react_1.useState)(get_color_scheme_1.getColorScheme);
+    (0, react_1.useEffect)(() => {
+        const observer = new MutationObserver((mutations) => mutations.forEach(() => setColorScheme((0, get_color_scheme_1.getColorScheme)())));
+        observer.observe(document.body, { attributes: true, attributeFilter: ["class"] });
+        return () => observer.disconnect();
+    }, []);
+    return colorScheme;
 }
 exports.useColorScheme = useColorScheme;

package/combobox/combobox.stories.js

@@ -58,8 +58,7 @@ function Default() {
                 option.label,
                 isSelected && " (selected)")) })));
     return (react_1.default.createElement("div", { className: "flex flex-col lg:flex-row" },
-        react_1.default.createElement("div", { className: "light space-y-2 p-20 lg:w-1/2" }, storyComboboxes),
-        react_1.default.createElement("div", { className: "dark space-y-2 bg-gray-900 p-20 lg:w-1/2" }, storyComboboxes)));
+        react_1.default.createElement("div", { className: "space-y-2 p-20 lg:w-1/2" }, storyComboboxes)));
 }
 exports.Default = Default;
 function Async() {
@@ -73,8 +72,7 @@ function Async() {
     const storyComboboxes = (react_1.default.createElement("div", { className: "space-y-8" },
         react_1.default.createElement(index_1.Combobox, { id: "combobox-1", label: "Combobox", name: "combobox", onChange: onChange, loadOptions: loadOptions, placeholder: "Vyberte...", value: value })));
     return (react_1.default.createElement("div", { className: "flex flex-col lg:flex-row" },
-        react_1.default.createElement("div", { className: "light space-y-2 p-20 lg:w-1/2" }, storyComboboxes),
-        react_1.default.createElement("div", { className: "dark space-y-2 bg-gray-900 p-20 lg:w-1/2" }, storyComboboxes)));
+        react_1.default.createElement("div", { className: "space-y-2 p-20 lg:w-1/2" }, storyComboboxes)));
 }
 exports.Async = Async;
 function ComponentStructure() {

package/css/avatar.css

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

package/css/button-list.css

@@ -3,6 +3,8 @@
 
     &__menu {
         @apply relative;
+
+        display: flex;
     }
 
     &__menu-items {

package/css/checkbox.css

@@ -16,7 +16,7 @@
     }
 
     &--size-lg {
-        @apply h-6 w-6;
+        @apply size-6;
 
         .uxf-checkbox__inner {
             @apply h-4 w-4;

package/css/flash-messages.css

@@ -7,8 +7,7 @@
     height: 100vh;
     justify-content: flex-end;
     max-width: 24rem;
-    overflow-x: hidden;
-    overflow-y: auto;
+    overflow: hidden;
     padding: theme("spacing.6") theme("spacing.1") theme("spacing.6") theme("spacing.6");
     pointer-events: none;
     position: fixed;
@@ -19,8 +18,7 @@
     &__dismissable {
         display: flex;
         flex-direction: column-reverse;
-        overflow-x: hidden;
-        overflow-y: scroll;
+        overflow: hidden;
         padding-right: theme("spacing.3");
         pointer-events: auto;
 

package/css/icon.css

@@ -1,6 +1,10 @@
 .uxf-icon {
     @apply h-[var(--i-h)] w-[var(--i-w)] shrink-0;
 
+    :root .dark & {
+        color: theme("colors.white");
+    }
+
     & > use {
         @apply pointer-events-none;
     }

package/css/image-gallery.css

@@ -45,7 +45,7 @@
         @apply bg-black bg-opacity-50 p-5;
 
         &-icon {
-            @apply h-6 w-6 text-white;
+            @apply size-6 text-white;
         }
 
         &-text {

package/css/loader.css

@@ -9,6 +9,10 @@
 
     @apply inline-block rounded-full border-r-transparent border-t-current;
 
+    :root .dark & {
+        @apply text-white;
+    }
+
     &--size-default {
         @apply h-12 w-12 border-r-4 border-t-4;
     }
@@ -18,6 +22,6 @@
     }
 
     &--size-sm {
-        @apply h-6 w-6 border-r-2 border-t-2;
+        @apply size-6 border-r-2 border-t-2;
     }
 }

package/css/radio.css

@@ -20,7 +20,7 @@
     }
 
     &--size-lg {
-        @apply h-6 w-6;
+        @apply size-6;
 
         .uxf-radio__inner {
             @apply h-2.5 w-2.5;

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

@@ -63,7 +63,7 @@ function Default() {
     const [value, setValue] = (0, react_1.useState)(null);
     const onChange = (0, action_1.action)("onChange", setValue);
     const onClose = () => null;
-    const testDatePickers = (react_1.default.createElement(react_1.default.Fragment, null,
+    const testDatePickers = (react_1.default.createElement("div", { className: "flex flex-col space-y-5 dark:text-white" },
         react_1.default.createElement("p", { className: "text-lg" }, "Date picker"),
         react_1.default.createElement(date_picker_1.DatePicker, { closePopoverHandler: onClose, onChange: onChange, selectedDate: value }),
         react_1.default.createElement("p", { className: "text-lg" }, "Date picker with unavailable dates"),
@@ -79,7 +79,6 @@ function Default() {
                 "Bottom content",
                 react_1.default.createElement("p", null, "Here can goes anything")) })));
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("div", { className: "light max-w-[640px] space-y-4 rounded bg-white p-8" }, testDatePickers),
-        react_1.default.createElement("div", { className: "dark max-w-[640px] space-y-4 rounded bg-gray-900 p-8 text-white" }, testDatePickers)));
+        react_1.default.createElement("div", { className: "max-w-[640px] space-y-4 rounded p-8" }, testDatePickers)));
 }
 exports.Default = Default;

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

@@ -47,7 +47,6 @@ function Default() {
                 "Bottom content",
                 react_1.default.createElement("p", null, "Here can goes anything")), id: "date-test", isClearable: true, label: "With bottom content", name: "date", onChange: onChange, placeholder: "Zadejte datum...", value: date })));
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("div", { className: "light max-w-[640px] space-y-4 rounded bg-white p-8" }, testDatePickers),
-        react_1.default.createElement("div", { className: "dark max-w-[640px] space-y-4 rounded bg-gray-900 p-8 text-white" }, testDatePickers)));
+        react_1.default.createElement("div", { className: "max-w-[640px] space-y-4 rounded p-8" }, testDatePickers)));
 }
 exports.Default = Default;

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

@@ -37,7 +37,6 @@ function Default() {
     const testDatePickers = (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(date_range_picker_1.DateRangePicker, { closePopoverHandler: close, onChange: onChange, selectedDates: value })));
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("div", { className: "light max-w-[640px] space-y-4 rounded bg-white p-8" }, testDatePickers),
-        react_1.default.createElement("div", { className: "dark max-w-[640px] space-y-4 rounded bg-gray-900 p-8 text-white" }, testDatePickers)));
+        react_1.default.createElement("div", { className: "max-w-[640px] space-y-4 rounded p-8" }, testDatePickers)));
 }
 exports.Default = Default;

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

@@ -50,7 +50,6 @@ function Default() {
                 "Bottom content",
                 react_1.default.createElement("p", null, "Here can goes anything")), id: "date-test", name: "date", label: "With bottom content", value: range, onChange: onChange, isClearable: true })));
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("div", { className: "light max-w-[640px] space-y-4 rounded bg-white p-8" }, testDatePickers),
-        react_1.default.createElement("div", { className: "dark max-w-[640px] space-y-4 rounded bg-gray-900 p-8 text-white" }, testDatePickers)));
+        react_1.default.createElement("div", { className: "max-w-[640px] space-y-4 rounded p-8" }, testDatePickers)));
 }
 exports.Default = Default;

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

@@ -39,7 +39,6 @@ function Default() {
                 "Bottom content",
                 react_1.default.createElement("p", null, "Here can goes anything")), onChange: onChange, value: value })));
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("div", { className: "light max-w-[640px] space-y-4 rounded bg-white p-8" }, testDatetimePickers),
-        react_1.default.createElement("div", { className: "dark max-w-[640px] space-y-4 rounded bg-gray-900 p-8 text-white" }, testDatetimePickers)));
+        react_1.default.createElement("div", { className: "max-w-[640px] space-y-4 rounded p-8" }, testDatetimePickers)));
 }
 exports.Default = Default;

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

@@ -46,7 +46,6 @@ function Default() {
                 "Bottom content",
                 react_1.default.createElement("p", null, "Here can goes anything")), id: "date-test", isClearable: true, label: "With bottom content", name: "date", onChange: onChange, placeholder: "Zadejte datum...", value: date })));
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("div", { className: "light max-w-[640px] space-y-4 rounded bg-white p-8" }, testDatePickers),
-        react_1.default.createElement("div", { className: "dark max-w-[640px] space-y-4 rounded bg-gray-900 p-8 text-white" }, testDatePickers)));
+        react_1.default.createElement("div", { className: "max-w-[640px] space-y-4 rounded p-8" }, testDatePickers)));
 }
 exports.Default = Default;

package/dialog/dialog.stories.js

@@ -33,8 +33,7 @@ function Default() {
         react_1.default.createElement(button_1.Button, { onClick: () => setOpen(true) }, "Click to open modal - default")));
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement("div", { className: "flex flex-col lg:flex-row" },
-            react_1.default.createElement("div", { className: "light space-y-2 p-20 lg:w-1/2" }, storyDialog),
-            react_1.default.createElement("div", { className: "dark space-y-2 bg-gray-900 p-20 lg:w-1/2" }, storyDialog)),
+            react_1.default.createElement("div", { className: "space-y-2 p-20 lg:w-1/2" }, storyDialog)),
         open && (react_1.default.createElement(dialog_1.Dialog, { onClose: () => setOpen(true), open: open },
             react_1.default.createElement("div", { className: "p-4" },
                 react_1.default.createElement("p", { className: "mb-3 text-lg font-bold" }, "Dialog"),

package/dropdown/dropdown.stories.js

@@ -24,7 +24,6 @@ function Default() {
             react_2.default.createElement(react_1.Menu.Button, { as: button_1.Button, color: "success", title: "Test" }, "Click me"),
             react_2.default.createElement(react_1.Menu.Items, { as: index_1.Dropdown.Items }, testDropdownItems.map((item) => (react_2.default.createElement(react_1.Menu.Item, { key: item.id }, ({ active }) => (react_2.default.createElement(index_1.Dropdown.Item, { className: `first-letter:uppercase ${active ? classes_1.CLASSES.IS_ACTIVE : ""}` }, item.title)))))))));
     return (react_2.default.createElement("div", { className: "flex" },
-        react_2.default.createElement("div", { className: "light grow gap-4 p-4" }, storyDropdown),
-        react_2.default.createElement("div", { className: "dark grow gap-4 bg-gray-900 p-4 text-gray-200" }, storyDropdown)));
+        react_2.default.createElement("div", { className: "grow gap-4 p-4" }, storyDropdown)));
 }
 exports.Default = Default;

package/dropzone/dropzone.stories.js

@@ -67,8 +67,7 @@ function Default() {
                 react_1.default.createElement("pre", null, JSON.stringify(file, null, 4)))), value: files })));
     return (react_1.default.createElement(context_1.UiContextProvider, { value: (0, get_provider_config_1.getProviderConfig)() },
         react_1.default.createElement("div", { className: "flex flex-col lg:flex-row" },
-            react_1.default.createElement("div", { className: "light space-y-2 p-20 lg:w-1/2" }, storyDropzone),
-            react_1.default.createElement("div", { className: "dark space-y-2 bg-gray-900 p-20 lg:w-1/2" }, storyDropzone))));
+            react_1.default.createElement("div", { className: "space-y-2 p-20 lg:w-1/2" }, storyDropzone))));
 }
 exports.Default = Default;
 function ComponentStructure() {

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

@@ -44,7 +44,6 @@ function Default() {
         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 }),
         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 })));
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("div", { className: "light space-y-2 p-20" }, storyFileInputs),
-        react_1.default.createElement("div", { className: "dark space-y-2 bg-gray-900 p-20" }, storyFileInputs)));
+        react_1.default.createElement("div", { className: "space-y-2 p-20" }, storyFileInputs)));
 }
 exports.Default = Default;

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

@@ -14,7 +14,7 @@ exports.default = {
     component: flash_messages_1.FlashMessages,
 };
 function Default() {
-    return (react_1.default.createElement("div", { className: "light inline-flex flex-col space-y-4" },
+    return (react_1.default.createElement("div", { className: "inline-flex flex-col space-y-4" },
         react_1.default.createElement(button_1.Button, { onClick: () => (0, flash_messages_service_1.flashMessage)({
                 message: (react_1.default.createElement("div", { className: "flex items-center space-x-4" },
                     react_1.default.createElement(icon_1.Icon, { name: "check", size: 20 }),

package/hooks/use-dropdown.d.ts

@@ -29,7 +29,7 @@ export declare function useDropdown(placement: Placement, matchWidth?: boolean,
         update: () => void;
         floatingStyles: import("react").CSSProperties;
         open: boolean;
-        onOpenChange: (open: boolean, event?: Event | undefined) => void;
+        onOpenChange: (open: boolean, event?: Event | undefined, reason?: import("@floating-ui/react").OpenChangeReason | undefined) => void;
         events: import("@floating-ui/react").FloatingEvents;
         dataRef: import("react").MutableRefObject<import("@floating-ui/react").ContextData>;
         nodeId: string | undefined;

package/icon/icon.stories.js

@@ -19,8 +19,8 @@ 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 h-28 w-28 flex-col items-center justify-center gap-3" },
-        react_1.default.createElement(icon_1.Icon, { name: iconName, size: 24 }),
+    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" },
+        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)))))));
 }

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

@@ -37,6 +37,6 @@ const prevButtonElement = react_1.default.createElement(icon_1.Icon, { className
 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: "h-56 w-56 cursor-pointer object-cover transition-transform hover:scale-105", customContent: image.title }))))));
+        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 }))))));
 }
 exports.Default = Default;

package/input/input-element.js

@@ -28,6 +28,6 @@ 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-")));
-    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, 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, tabIndex: props.isReadOnly ? -1 : undefined, type: props.type, value: props.value }));
+    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, tabIndex: props.isReadOnly ? -1 : undefined, type: props.type, value: props.value }));
 });
 exports.InputElement.displayName = "UxfUiInputElement";

package/input/input.stories.js

@@ -67,8 +67,7 @@ function Default() {
     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("div", { className: "light space-y-2 p-20" }, storyInputs),
-        react_1.default.createElement("div", { className: "dark space-y-2 bg-gray-900 p-20" }, storyInputs)));
+        react_1.default.createElement("div", { className: "space-y-2 p-20" }, storyInputs)));
 }
 exports.Default = Default;
 function Sizes() {

package/layout/layout.js

@@ -49,7 +49,7 @@ 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 h-10 w-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", { 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("span", { className: "sr-only" }, "Close sidebar"),
                                         react_2.default.createElement(icon_1.Icon, { name: "xmarkLarge", size: 24, className: "text-white" })))),
                             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 })),

package/list-item/list-item.stories.js

@@ -14,7 +14,7 @@ exports.default = {
 function Default() {
     // eslint-disable-next-line no-console
     const onClick = console.log;
-    const storyListItem = (react_1.default.createElement(react_1.default.Fragment, null,
+    const storyListItem = (react_1.default.createElement("div", { className: "dark:text-white" },
         react_1.default.createElement(index_1.ListItem, { endIcon: "chevronRight", onClick: onClick }, "Jm\u00E9no p\u0159\u00EDjmen\u00ED"),
         react_1.default.createElement("div", { className: "border-gray500 border-b" }),
         react_1.default.createElement(index_1.ListItem, { endIcon: "chevronRight", onClick: onClick },
@@ -28,7 +28,6 @@ function Default() {
         react_1.default.createElement(index_1.ListItem, { endElement: react_1.default.createElement(icon_1.Icon, { name: "camera", className: "text-success", size: 24 }), onClick: onClick }, "End element"),
         react_1.default.createElement(index_1.ListItem, { endElement: react_1.default.createElement(icon_1.Icon, { name: "camera", className: "text-success", size: 24 }), endIcon: "chevronRight", onClick: onClick }, "End element and end icon")));
     return (react_1.default.createElement("div", { className: "flex" },
-        react_1.default.createElement("div", { className: "light grow gap-4 p-4" }, storyListItem),
-        react_1.default.createElement("div", { className: "dark grow gap-4 bg-gray-900 p-4 text-gray-200" }, storyListItem)));
+        react_1.default.createElement("div", { className: "grow gap-4 p-4" }, storyListItem)));
 }
 exports.Default = Default;

package/loader/loader.stories.js

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

package/message/message.stories.js

@@ -67,16 +67,11 @@ const getConfirmForSize = (variant, colors) => {
 };
 function Default() {
     const config = (0, storybook_config_1.useStorybookConfig)("Button");
-    return (react_1.default.createElement("div", { className: "flex justify-center lg:flex-row" },
-        react_1.default.createElement("div", { className: "light space-y-4 rounded bg-white p-10" },
+    return (react_1.default.createElement("div", { className: "flex justify-center lg:flex-row dark:text-white" },
+        react_1.default.createElement("div", { className: "space-y-4 rounded p-10" },
             react_1.default.createElement("div", { className: "uxf-typo-h5" }, "default"),
             react_1.default.createElement("div", { className: "flex flex-col space-y-4 px-5" }, getConfirmForSize("centered", config.colors)),
             react_1.default.createElement("div", { className: "uxf-typo-h5" }, "simple"),
-            react_1.default.createElement("div", { className: "flex flex-col space-y-4 px-5" }, getConfirmForSize("simple", config.colors))),
-        react_1.default.createElement("div", { className: "dark space-y-4 rounded bg-gray-900 p-10 text-white" },
-            react_1.default.createElement("div", { className: "uxf-typo-h5" }, "default"),
-            react_1.default.createElement("div", { className: "dark flex flex-col space-y-4 px-5" }, getConfirmForSize("centered", config.colors)),
-            react_1.default.createElement("div", { className: "uxf-typo-h5" }, "simple"),
             react_1.default.createElement("div", { className: "flex flex-col space-y-4 px-5" }, getConfirmForSize("simple", config.colors)))));
 }
 exports.Default = Default;

package/modal/modal.stories.js

@@ -56,7 +56,6 @@ function Default() {
                 disableBackdropClose: true,
             }) }, "Click to open modal - disable backdrop close")));
     return (react_1.default.createElement("div", { className: "flex flex-col lg:flex-row" },
-        react_1.default.createElement("div", { className: "light space-y-2 p-20 lg:w-1/2" }, storyModals),
-        react_1.default.createElement("div", { className: "dark space-y-2 bg-gray-900 p-20 lg:w-1/2" }, storyModals)));
+        react_1.default.createElement("div", { className: "space-y-2 p-20 lg:w-1/2" }, storyModals)));
 }
 exports.Default = Default;

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

@@ -65,8 +65,7 @@ function Default() {
                 "Option: ",
                 option.label), isDisabled: true })));
     return (react_1.default.createElement("div", { className: "flex flex-col lg:flex-row" },
-        react_1.default.createElement("div", { className: "light space-y-2 p-20 lg:w-1/2" }, storyComboboxes),
-        react_1.default.createElement("div", { className: "dark space-y-2 bg-gray-900 p-20 lg:w-1/2" }, storyComboboxes)));
+        react_1.default.createElement("div", { className: "space-y-2 p-20 lg:w-1/2" }, storyComboboxes)));
 }
 exports.Default = Default;
 function Async() {
@@ -80,8 +79,7 @@ function Async() {
     const storyComboboxes = (react_1.default.createElement("div", { className: "space-y-8" },
         react_1.default.createElement(multi_combobox_1.MultiCombobox, { id: "multi-combobox-async-1", label: "MultiCombobox", name: "multi-combobox", onChange: onChange, loadOptions: loadOptions, placeholder: "Vyberte...", value: value })));
     return (react_1.default.createElement("div", { className: "flex flex-col lg:flex-row" },
-        react_1.default.createElement("div", { className: "light space-y-2 p-20 lg:w-1/2" }, storyComboboxes),
-        react_1.default.createElement("div", { className: "dark space-y-2 bg-gray-900 p-20 lg:w-1/2" }, storyComboboxes)));
+        react_1.default.createElement("div", { className: "space-y-2 p-20 lg:w-1/2" }, storyComboboxes)));
 }
 exports.Async = Async;
 function ComponentStructure() {

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

@@ -57,8 +57,7 @@ const Default = () => {
                 "Option: ",
                 option.label) })));
     return (react_1.default.createElement("div", { className: "flex flex-col lg:flex-row" },
-        react_1.default.createElement("div", { className: "light space-y-2 p-20 lg:w-1/2" }, component),
-        react_1.default.createElement("div", { className: "dark space-y-2 bg-gray-900 p-20 lg:w-1/2" }, component)));
+        react_1.default.createElement("div", { className: "space-y-2 p-20 lg:w-1/2" }, component)));
 };
 exports.Default = Default;
 function ComponentStructure() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/ui",
-  "version": "11.9.0",
+  "version": "11.11.0",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -15,12 +15,12 @@
   "author": "UX Fans s.r.o",
   "license": "MIT",
   "dependencies": {
-    "@floating-ui/react": "0.26.0",
+    "@floating-ui/react": "0.26.9",
     "@headlessui/react": "1.7.14",
-    "@uxf/core": "11.9.0",
-    "@uxf/datepicker": "11.1.0",
-    "@uxf/styles": "11.9.0",
-    "color2k": "2.0.2",
+    "@uxf/core": "11.10.0",
+    "@uxf/datepicker": "11.10.0",
+    "@uxf/styles": "11.10.0",
+    "color2k": "2.0.3",
     "dayjs": "1.11.10",
     "jump.js": "1.0.2",
     "react-dropzone": "14.2.3",
@@ -31,8 +31,8 @@
     "react-dom": ">= 18.2.0"
   },
   "devDependencies": {
-    "@types/jump.js": "1.0.4",
-    "@types/react": "18.2.27",
-    "@types/react-dom": "18.2.12"
+    "@types/jump.js": "1.0.6",
+    "@types/react": "18.2.57",
+    "@types/react-dom": "18.2.19"
   }
 }

package/pagination/pagination.stories.js

@@ -35,13 +35,7 @@ function Default() {
     const [page, setPage] = (0, react_1.useState)(1);
     const onPageChange = (0, action_1.action)("onPageChange", setPage);
     return (react_1.default.createElement("div", { className: "flex flex-col lg:flex-row" },
-        react_1.default.createElement("div", { className: "light space-y-2 p-20 lg:w-1/2" },
-            react_1.default.createElement(pagination_1.Pagination, { count: 10, page: page, onPageChange: onPageChange, size: "xs" }),
-            react_1.default.createElement(pagination_1.Pagination, { count: 10, page: page, onPageChange: onPageChange, size: "sm" }),
-            react_1.default.createElement(pagination_1.Pagination, { count: 10, page: page, onPageChange: onPageChange, size: "default" }),
-            react_1.default.createElement(pagination_1.Pagination, { count: 10, page: page, onPageChange: onPageChange, size: "lg" }),
-            react_1.default.createElement(pagination_1.Pagination, { count: 10, page: page, onPageChange: onPageChange, size: "xl" })),
-        react_1.default.createElement("div", { className: "dark space-y-2 bg-gray-900 p-20 text-white lg:w-1/2" },
+        react_1.default.createElement("div", { className: "space-y-2 p-20 lg:w-1/2" },
             react_1.default.createElement(pagination_1.Pagination, { count: 10, page: page, onPageChange: onPageChange, size: "xs" }),
             react_1.default.createElement(pagination_1.Pagination, { count: 10, page: page, onPageChange: onPageChange, size: "sm" }),
             react_1.default.createElement(pagination_1.Pagination, { count: 10, page: page, onPageChange: onPageChange, size: "default" }),

package/radio/radio.stories.js

@@ -11,7 +11,7 @@ exports.default = {
     component: index_1.Radio,
 };
 function Default() {
-    const radios = (react_1.default.createElement(react_1.default.Fragment, null,
+    const radios = (react_1.default.createElement("div", { className: "dark:text-white" },
         react_1.default.createElement("div", { className: "mb-2 mt-4 font-semibold" }, "Default"),
         react_1.default.createElement("div", { className: "flex flex-row gap-4" },
             react_1.default.createElement(index_1.Radio, { checked: false, value: 1 }),
@@ -29,7 +29,6 @@ function Default() {
             react_1.default.createElement(index_1.Radio, { checked: false, size: "lg", value: 1 }),
             react_1.default.createElement(index_1.Radio, { checked: true, size: "lg", value: 2 }))));
     return (react_1.default.createElement("div", { className: "flex" },
-        react_1.default.createElement("div", { className: "light p-20 " }, radios),
-        react_1.default.createElement("div", { className: "dark bg-gray-900 p-20 text-white" }, radios)));
+        react_1.default.createElement("div", { className: "p-20" }, radios)));
 }
 exports.Default = Default;

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

@@ -55,7 +55,6 @@ function Default() {
         react_1.default.createElement(index_1.RadioGroup, { id: "radiogroup", label: "Radio group variant column, radioSize default", onChange: onChange, options: options, value: value, variant: "column", radioSize: "default" }),
         react_1.default.createElement(index_1.RadioGroup, { id: "radiogroup", label: "Radio group variant row, radioSize lg", onChange: onChange, options: options, value: value, variant: "row", radioSize: "lg" })));
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("div", { className: "light rounded bg-white p-8" }, testRadioGroups),
-        react_1.default.createElement("div", { className: "dark rounded bg-gray-900 p-8 text-white" }, testRadioGroups)));
+        react_1.default.createElement("div", { className: "rounded p-8" }, testRadioGroups)));
 }
 exports.Default = Default;

package/select/select.stories.d.ts

@@ -1,12 +1,3 @@
 import React from "react";
-import { SelectOption } from "./index";
-declare const _default: {
-    title: string;
-    component: {
-        <ValueId = import("../_select-base").SelectBaseValueId, Option = SelectOption<ValueId>, Value = Option>(props: import("./select").SelectProps<ValueId, Option, ValueId>): React.JSX.Element;
-        displayName: string;
-    };
-};
-export default _default;
 export declare function Default(): React.JSX.Element;
 export declare function ComponentStructure(): React.JSX.Element;

package/select/select.stories.js

@@ -31,10 +31,6 @@ const react_1 = __importStar(require("react"));
 const action_1 = require("../utils/action");
 const component_structure_analyzer_1 = __importDefault(require("../utils/component-structure-analyzer"));
 const index_1 = require("./index");
-exports.default = {
-    title: "UI/Select",
-    component: index_1.Select,
-};
 const options = [
     { id: "one", label: "Option one" },
     { id: "two", label: "Option two disabled", disabled: true },
@@ -54,7 +50,7 @@ function Default() {
         console.log("Select value: ", v);
         setValue(v);
     });
-    const storySelects = (react_1.default.createElement(react_1.default.Fragment, null,
+    return (react_1.default.createElement("div", { className: "flex flex-col gap-2" },
         react_1.default.createElement(index_1.Select, { helperText: "Helper text", label: "Default select", onChange: onChange, options: options, placeholder: "Vyberte...", value: value }),
         react_1.default.createElement(index_1.Select, { helperText: "Helper text", isInvalid: true, label: "Invalid select", onChange: onChange, options: options, placeholder: "Vyberte...", value: value, isClearable: true }),
         react_1.default.createElement(index_1.Select, { helperText: "Helper text", isDisabled: true, label: "Disabled select", onChange: onChange, options: options, placeholder: "Vyberte...", value: value }),
@@ -71,9 +67,6 @@ function Default() {
                 isSelected && " (selected)")), renderSelectedOption: (option) => react_1.default.createElement(react_1.default.Fragment, null,
                 "Selected: ",
                 option.label) })));
-    return (react_1.default.createElement("div", { className: "flex flex-col lg:flex-row" },
-        react_1.default.createElement("div", { className: "light space-y-2 p-20 lg:w-1/2" }, storySelects),
-        react_1.default.createElement("div", { className: "dark space-y-2 bg-gray-900 p-20 lg:w-1/2" }, storySelects)));
 }
 exports.Default = Default;
 function ComponentStructure() {

package/tabs/tabs.stories.js

@@ -42,7 +42,6 @@ function Default() {
                 react_1.default.createElement(tabs_1.Tabs.Panel, { title: "Tab 3 title", className: "grid h-12 w-56 place-items-center bg-amber-300" }, "content of the Tab 3"),
                 react_1.default.createElement(tabs_1.Tabs.Panel, { title: "Tab 4 title", className: "grid h-12 w-56 place-items-center bg-gray-300" }, "content of the Tab 4")))));
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("div", { className: "light rounded bg-white p-8" }, testTabs),
-        react_1.default.createElement("div", { className: "dark rounded bg-gray-900 p-8 text-white" }, testTabs)));
+        react_1.default.createElement("div", { className: "rounded p-8" }, testTabs)));
 }
 exports.Default = Default;

package/text-input/text-input.stories.d.ts

@@ -1,8 +1,3 @@
 import React from "react";
-declare const _default: {
-    title: string;
-    component: React.ForwardRefExoticComponent<import("@uxf/ui/text-input").TextInputProps & React.RefAttributes<HTMLInputElement>>;
-};
-export default _default;
 export declare function Default(): React.JSX.Element;
 export declare function ComponentStructure(): React.JSX.Element;

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

@@ -35,10 +35,6 @@ const text_input_1 = require("@uxf/ui/text-input");
 const component_structure_analyzer_1 = __importDefault(require("@uxf/ui/utils/component-structure-analyzer"));
 const react_1 = __importStar(require("react"));
 const action_1 = require("../utils/action");
-exports.default = {
-    title: "UI/TextInput",
-    component: text_input_1.TextInput,
-};
 function Default() {
     const [value, setValue] = (0, react_1.useState)("");
     const [timeValue, setTimeValue] = (0, react_1.useState)("");
@@ -51,17 +47,14 @@ function Default() {
             variant: isCopied ? "success" : "error",
         });
     });
-    const storyTextInputs = (react_1.default.createElement("div", { className: "space-y-4" },
-        react_1.default.createElement(text_input_1.TextInput, { label: "Default input", value: value, onChange: onChange, helperText: "Helper text", leftAddon: "https://", rightAddon: ".cz", leftElement: "\uD83C\uDF37", rightElement: "\uD83D\uDD14", placeholder: "Some beautiful placeholder..." }),
-        react_1.default.createElement(text_input_1.TextInput, { label: "Error input", value: value, onChange: onChange, helperText: "Error helper text", leftAddon: "https://", rightAddon: ".cz", leftElement: "\uD83C\uDF37", rightElement: "\uD83D\uDD14", placeholder: "Some beautiful placeholder...", isInvalid: true }),
-        react_1.default.createElement(text_input_1.TextInput, { label: "Read only input", value: value, onChange: onChange, helperText: "Error helper text", leftAddon: "https://", rightAddon: ".cz", leftElement: "\uD83C\uDF37", rightElement: "\uD83D\uDD14", placeholder: "Some beautiful placeholder...", isReadOnly: true }),
-        react_1.default.createElement(text_input_1.TextInput, { label: "Disabled input", value: value, onChange: onChange, helperText: "Error helper text", leftAddon: "https://", rightAddon: ".cz", leftElement: "\uD83C\uDF37", rightElement: "\uD83D\uDD14", placeholder: "Some beautiful placeholder...", isDisabled: true }),
-        react_1.default.createElement(text_input_1.TextInput, { label: "Default html time input", value: timeValue, onChange: onTimeChange, placeholder: "Some beautiful placeholder...", type: "time" }),
-        react_1.default.createElement(text_input_1.TextInput, { label: "Copy to clipboard input", leftAddon: "I can be copied!", onChange: onChange, placeholder: "Some beautiful placeholder...", rightAddon: react_1.default.createElement(button_1.Button, { className: "h-full w-full rounded-l-none border-none", disabled: value === "", onClick: onCopy, variant: "white" },
+    return (react_1.default.createElement("div", { className: "space-y-2 p-20" },
+        react_1.default.createElement(text_input_1.TextInput, { name: "default", label: "Default input", value: value, onChange: onChange, helperText: "Helper text", leftAddon: "https://", rightAddon: ".cz", leftElement: "\uD83C\uDF37", rightElement: "\uD83D\uDD14", placeholder: "Some beautiful placeholder..." }),
+        react_1.default.createElement(text_input_1.TextInput, { name: "error", label: "Error input", value: value, onChange: onChange, helperText: "Error helper text", leftAddon: "https://", rightAddon: ".cz", leftElement: "\uD83C\uDF37", rightElement: "\uD83D\uDD14", placeholder: "Some beautiful placeholder...", isInvalid: true }),
+        react_1.default.createElement(text_input_1.TextInput, { name: "readOnly", label: "Read only input", value: value, onChange: onChange, helperText: "Error helper text", leftAddon: "https://", rightAddon: ".cz", leftElement: "\uD83C\uDF37", rightElement: "\uD83D\uDD14", placeholder: "Some beautiful placeholder...", isReadOnly: true }),
+        react_1.default.createElement(text_input_1.TextInput, { name: "disabled", label: "Disabled input", value: value, onChange: onChange, helperText: "Error helper text", leftAddon: "https://", rightAddon: ".cz", leftElement: "\uD83C\uDF37", rightElement: "\uD83D\uDD14", placeholder: "Some beautiful placeholder...", isDisabled: true }),
+        react_1.default.createElement(text_input_1.TextInput, { name: "defaultHtmlTime", label: "Default html time input", value: timeValue, onChange: onTimeChange, placeholder: "Some beautiful placeholder...", type: "time" }),
+        react_1.default.createElement(text_input_1.TextInput, { name: "copyToClipboard", label: "Copy to clipboard input", leftAddon: "I can be copied!", onChange: onChange, placeholder: "Some beautiful placeholder...", rightAddon: react_1.default.createElement(button_1.Button, { className: "size-full rounded-l-none border-none", disabled: value === "", onClick: onCopy, variant: "white" },
                 react_1.default.createElement(icon_1.Icon, { className: "w-4", name: "copy" })), value: value })));
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("div", { className: "light space-y-2 p-20" }, storyTextInputs),
-        react_1.default.createElement("div", { className: "dark space-y-2 bg-gray-900 p-20" }, storyTextInputs)));
 }
 exports.Default = Default;
 function ComponentStructure() {

package/text-link/text-link.stories.js

@@ -14,12 +14,8 @@ function Default() {
     // eslint-disable-next-line no-console
     const onClick = console.log;
     return (react_1.default.createElement("div", { className: "flex" },
-        react_1.default.createElement("div", { className: "light flex gap-4 p-20" },
-            react_1.default.createElement("p", null,
-                "Pokra\u010Dujte ",
-                react_1.default.createElement(index_1.TextLink, { onClick: onClick }, "t\u00EDmto odkazem"))),
-        react_1.default.createElement("div", { className: "dark flex gap-4 bg-gray-900 p-20 text-gray-200" },
-            react_1.default.createElement("p", null,
+        react_1.default.createElement("div", { className: "flex gap-4 p-20" },
+            react_1.default.createElement("p", { className: "dark:text-white" },
                 "Pokra\u010Dujte ",
                 react_1.default.createElement(index_1.TextLink, { onClick: onClick }, "t\u00EDmto odkazem")))));
 }

package/textarea/textarea.stories.js

@@ -40,7 +40,6 @@ function Default() {
         react_1.default.createElement(index_1.Textarea, { isDisabled: true, id: "textarea-disabled", label: "Textarea disabled", onChange: onChange, value: value }),
         react_1.default.createElement(index_1.Textarea, { id: "textarea-rows10", isInvalid: true, label: "Textarea rows = 10, invalid", placeholder: "Placeholder text....", rows: 10, onChange: onChange, value: value })));
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("div", { className: "light space-y-2 p-20" }, storyTextAreas),
-        react_1.default.createElement("div", { className: "dark space-y-2 bg-gray-900 p-20" }, storyTextAreas)));
+        react_1.default.createElement("div", { className: "space-y-2 p-20" }, storyTextAreas)));
 }
 exports.Default = Default;

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

@@ -38,7 +38,6 @@ function Default() {
     const testTimePickers = (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(time_picker_1.TimePicker, { closePopoverHandler: onClose, onChange: onChange, selectedTime: value })));
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("div", { className: "light max-w-[640px] space-y-4 rounded bg-white p-8" }, testTimePickers),
-        react_1.default.createElement("div", { className: "dark max-w-[640px] space-y-4 rounded bg-gray-900 p-8 text-white" }, testTimePickers)));
+        react_1.default.createElement("div", { className: "max-w-[640px] space-y-4 rounded p-8" }, testTimePickers)));
 }
 exports.Default = Default;

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

@@ -42,7 +42,6 @@ function Default() {
         react_1.default.createElement(time_picker_input_1.TimePickerInput, { id: "time-test-readonly", isReadOnly: true, label: "\u010Cas readonly", name: "time-readonly", onChange: onChange, value: value }),
         react_1.default.createElement(time_picker_input_1.TimePickerInput, { id: "time-test-invalid", isClearable: true, isInvalid: true, label: "\u010Cas invalid", name: "time-invalid", onChange: onChange, value: value })));
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("div", { className: "light max-w-[640px] space-y-4 rounded bg-white p-8" }, testTimePickers),
-        react_1.default.createElement("div", { className: "dark max-w-[640px] space-y-4 rounded bg-gray-900 p-8 text-white" }, testTimePickers)));
+        react_1.default.createElement("div", { className: "max-w-[640px] space-y-4 rounded p-8" }, testTimePickers)));
 }
 exports.Default = Default;

package/toggle/toggle.stories.js

@@ -40,7 +40,6 @@ function Default() {
         react_1.default.createElement(index_1.Toggle, { label: "Opravdu?", onChange: onChange, value: checked, hiddenLabel: true }),
         react_1.default.createElement(index_1.Toggle, { label: "Opravdu? (reversed)", onChange: onChange, value: checked, variant: "reversed" })));
     return (react_1.default.createElement("div", { className: "flex" },
-        react_1.default.createElement("div", { className: "light w-1/2 gap-4 p-20" }, storyToggles),
-        react_1.default.createElement("div", { className: "dark w-1/2 gap-4 bg-gray-900 p-20 text-white" }, storyToggles)));
+        react_1.default.createElement("div", { className: "w-1/2 gap-4 p-20" }, storyToggles)));
 }
 exports.Default = Default;

package/tooltip/use-tooltip.d.ts

@@ -35,7 +35,7 @@ export declare function useTooltip(options: TooltipOptions): {
         update: () => void;
         floatingStyles: import("react").CSSProperties;
         open: boolean;
-        onOpenChange: (open: boolean, event?: Event | undefined) => void;
+        onOpenChange: (open: boolean, event?: Event | undefined, reason?: import("@floating-ui/react").OpenChangeReason | undefined) => void;
         events: import("@floating-ui/react").FloatingEvents;
         dataRef: MutableRefObject<import("@floating-ui/react").ContextData>;
         nodeId: string | undefined;
@@ -45,7 +45,10 @@ export declare function useTooltip(options: TooltipOptions): {
     };
     getReferenceProps: (userProps?: import("react").HTMLProps<Element> | undefined) => Record<string, unknown>;
     getFloatingProps: (userProps?: import("react").HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
-    getItemProps: (userProps?: import("react").HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
+    getItemProps: (userProps?: (Omit<import("react").HTMLProps<HTMLElement>, "active" | "selected"> & {
+        active?: boolean | undefined;
+        selected?: boolean | undefined;
+    }) | undefined) => Record<string, unknown>;
     open: boolean;
     setOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
 };

package/typography/typography.stories.js

@@ -10,7 +10,7 @@ exports.default = {
     component: null,
 };
 function Default() {
-    return (react_1.default.createElement("div", { className: "space-y-4" },
+    return (react_1.default.createElement("div", { className: "space-y-4 dark:text-white" },
         react_1.default.createElement("h1", { className: "uxf-typo-h1" }, ".uxf-typo-h1"),
         react_1.default.createElement("h2", { className: "uxf-typo-h2" }, ".uxf-typo-h2"),
         react_1.default.createElement("h3", { className: "uxf-typo-h3" }, ".uxf-typo-h3"),