@uxf/ui 11.10.0 → 11.11.0

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/css/button-list.css

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

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/ui",
-  "version": "11.10.0",
+  "version": "11.11.0",
   "description": "",
   "publishConfig": {
     "access": "public"

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,8 +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: "space-y-2 p-20 lg:w-1/2" }, storySelects)));
 }
 exports.Default = Default;
 function ComponentStructure() {

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,16 +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: "size-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: "space-y-2 p-20" }, storyTextInputs)));
 }
 exports.Default = Default;
 function ComponentStructure() {