@uxf/ui 11.31.0 → 11.33.0

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";

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

@@ -23,7 +23,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Default = void 0;
+exports.Default = Default;
 const react_1 = __importStar(require("react"));
 const action_1 = require("../utils/action");
 const checkbox_input_1 = require("./checkbox-input");
@@ -35,12 +35,11 @@ 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_input_1.CheckboxInput, { label: "Opravdu?", onChange: onChange, value: checked, name: "checkbox-input" }),
-        react_1.default.createElement(checkbox_input_1.CheckboxInput, { label: "Opravdu?", isDisabled: true, onChange: onChange, value: checked, name: "checkbox-input-disabled" }),
-        react_1.default.createElement(checkbox_input_1.CheckboxInput, { label: "Opravdu?", isInvalid: true, onChange: onChange, value: checked, name: "checkbox-input-invalid" }),
-        react_1.default.createElement(checkbox_input_1.CheckboxInput, { label: "Opravdu? (size lg)", onChange: onChange, value: checked, size: "lg", name: "checkbox-input-lg" }),
-        react_1.default.createElement(checkbox_input_1.CheckboxInput, { label: "hidden label", hiddenLabel: true, onChange: onChange, value: checked, size: "lg", name: "checkbox-input-hidden-label-lg" })));
+        react_1.default.createElement(checkbox_input_1.CheckboxInput, { label: "Opravdu?", name: "checkbox-input", onChange: onChange, value: checked }),
+        react_1.default.createElement(checkbox_input_1.CheckboxInput, { isDisabled: true, label: "Opravdu?", name: "checkbox-input-disabled", onChange: onChange, value: checked }),
+        react_1.default.createElement(checkbox_input_1.CheckboxInput, { isInvalid: true, label: "Opravdu?", name: "checkbox-input-invalid", onChange: onChange, value: checked }),
+        react_1.default.createElement(checkbox_input_1.CheckboxInput, { label: "Opravdu? (size lg)", name: "checkbox-input-lg", onChange: onChange, size: "lg", value: checked }),
+        react_1.default.createElement(checkbox_input_1.CheckboxInput, { hiddenLabel: true, label: "hidden label", name: "checkbox-input-hidden-label-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/chip/chip.js

@@ -26,6 +26,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Chip = void 0;
 const use_anchor_props_1 = require("@uxf/core-react/hooks/use-anchor-props");
 const cx_1 = require("@uxf/core/utils/cx");
+const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
 const react_1 = __importStar(require("react"));
 const CloseButton = (props) => {
     const onClose = (e) => {
@@ -36,13 +37,13 @@ const CloseButton = (props) => {
     };
     return (react_1.default.createElement("button", { className: "uxf-chip__button", onClick: onClose, tabIndex: props.suppressFocus ? -1 : undefined, type: "button" },
         react_1.default.createElement("span", { className: "uxf-chip__button-label" }, "Odebrat polo\u017Eku"),
-        react_1.default.createElement("svg", { className: "uxf-chip__button-icon", stroke: "currentColor", fill: "none", viewBox: "0 0 8 8" },
-            react_1.default.createElement("path", { strokeLinecap: "round", strokeWidth: "1.5", d: "M1 1l6 6m0-6L1 7" }))));
+        react_1.default.createElement("svg", { className: "uxf-chip__button-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 8 8" },
+            react_1.default.createElement("path", { d: "M1 1l6 6m0-6L1 7", strokeLinecap: "round", strokeWidth: "1.5" }))));
 };
 exports.Chip = (0, react_1.forwardRef)((props, ref) => {
     var _a, _b, _c;
     const { children, className, onClose, suppressFocus, tabIndex, ...restProps } = props;
-    const chipClassName = (0, cx_1.cx)("uxf-chip", `uxf-chip--color-${(_a = props.color) !== null && _a !== void 0 ? _a : "default"}`, `uxf-chip--size-${(_b = props.size) !== null && _b !== void 0 ? _b : "default"}`, `uxf-chip--variant-${(_c = props.variant) !== null && _c !== void 0 ? _c : "default"}`, onClose && "has-button", className);
+    const chipClassName = (0, cx_1.cx)("uxf-chip", `uxf-chip--color-${(_a = props.color) !== null && _a !== void 0 ? _a : "default"}`, `uxf-chip--size-${(_b = props.size) !== null && _b !== void 0 ? _b : "default"}`, `uxf-chip--variant-${(_c = props.variant) !== null && _c !== void 0 ? _c : "default"}`, (0, is_not_nil_1.isNotNil)(onClose) && "has-button", className);
     const anchorProps = (0, use_anchor_props_1.useAnchorProps)({
         className: (0, cx_1.cx)(chipClassName),
         tabIndex: suppressFocus ? -1 : tabIndex,
@@ -50,6 +51,6 @@ exports.Chip = (0, react_1.forwardRef)((props, ref) => {
     });
     return (react_1.default.createElement("a", { ref: ref, ...anchorProps },
         typeof children === "string" ? react_1.default.createElement("span", { className: "uxf-chip__text" }, children) : children,
-        !!onClose && react_1.default.createElement(CloseButton, { onClose: onClose })));
+        (0, is_not_nil_1.isNotNil)(onClose) && react_1.default.createElement(CloseButton, { onClose: onClose })));
 });
 exports.Chip.displayName = "UxfChip";

package/chip/chip.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 chip_1 = require("@uxf/ui/chip");
 const react_1 = __importStar(require("react"));
 const storybook_config_1 = require("../utils/storybook-config");
@@ -44,7 +44,7 @@ const getChipsForSize = (colors) => {
         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),
-                react_1.default.createElement(chip_1.Chip, { color: color, size: size, onClose: () => null, variant: variant }, color),
+                react_1.default.createElement(chip_1.Chip, { color: color, onClose: () => null, size: size, variant: variant }, color),
                 react_1.default.createElement(chip_1.Chip, { color: color, href: "https://uxf.cz", onClose: () => null, size: size, target: "_blank", variant: variant },
                     "#",
                     color))))))))))));
@@ -54,4 +54,3 @@ function Default() {
     return (react_1.default.createElement("div", { className: "flex lg:flex-row" },
         react_1.default.createElement("div", { className: "space-y-4 rounded p-10" }, getChipsForSize(config.colors))));
 }
-exports.Default = Default;

package/color-radio/color-radio.js

@@ -37,10 +37,10 @@ function readableColorIsBlack(bgColor) {
     return r * 0.299 + g * 0.587 + b * 0.114 > 146;
 }
 exports.ColorRadio = (0, react_1.forwardRef)((props, ref) => {
-    var _a, _b, _c;
+    var _a, _b;
     const colorRadioStyle = {
         "--bg-color": props.color,
-        ...((_a = props.style) !== null && _a !== void 0 ? _a : {}),
+        ...props.style,
     };
     const onChange = props.onChange;
     const onClick = onChange ? () => onChange(props.value) : undefined;
@@ -60,6 +60,6 @@ exports.ColorRadio = (0, react_1.forwardRef)((props, ref) => {
     });
     const innerClassName = `uxf-color-radio__inner ${readableColorIsBlack(props.color) ? "uxf-color-radio__inner--dark" : ""}`;
     return (react_1.default.createElement("div", { ...clickableProps, ref: ref },
-        react_1.default.createElement("span", { className: "uxf-color-radio__color-label" }, props.colorLabel), (_c = (_b = props.renderContent) === null || _b === void 0 ? void 0 : _b.call(props, innerClassName, props.checked, props.colorLabel, props.value)) !== null && _c !== void 0 ? _c : (react_1.default.createElement(icon_1.Icon, { className: innerClassName, name: "check" }))));
+        react_1.default.createElement("span", { className: "uxf-color-radio__color-label" }, props.colorLabel), (_b = (_a = props.renderContent) === null || _a === void 0 ? void 0 : _a.call(props, innerClassName, props.checked, props.colorLabel, props.value)) !== null && _b !== void 0 ? _b : (react_1.default.createElement(icon_1.Icon, { className: innerClassName, name: "check" }))));
 });
 exports.ColorRadio.displayName = "UxfUiColorRadio";

package/color-radio/color-radio.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 color_radio_1 = require("./color-radio");
 exports.default = {
@@ -14,17 +14,16 @@ function Default() {
     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, name: "value-1" }),
-            react_1.default.createElement(color_radio_1.ColorRadio, { checked: true, color: "#cc0000", colorLabel: "Red", value: 2, name: "value-2" })),
+            react_1.default.createElement(color_radio_1.ColorRadio, { checked: false, color: "#ff0000", colorLabel: "Red", name: "value-1", value: 1 }),
+            react_1.default.createElement(color_radio_1.ColorRadio, { checked: true, color: "#cc0000", colorLabel: "Red", name: "value-2", value: 2 })),
         react_1.default.createElement("div", { className: "mb-2 mt-4 font-semibold" }, "Invalid"),
         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", isInvalid: true, value: 1, name: "value-1" }),
-            react_1.default.createElement(color_radio_1.ColorRadio, { checked: true, color: "#ff0000", colorLabel: "Red", isInvalid: true, value: 2, name: "value-2" })),
+            react_1.default.createElement(color_radio_1.ColorRadio, { checked: false, color: "#ff0000", colorLabel: "Red", isInvalid: true, name: "value-1", value: 1 }),
+            react_1.default.createElement(color_radio_1.ColorRadio, { checked: true, color: "#ff0000", colorLabel: "Red", isInvalid: true, name: "value-2", value: 2 })),
         react_1.default.createElement("div", { className: "mb-2 mt-4 font-semibold" }, "Disabled"),
         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", isDisabled: true, value: 1, name: "value-1" }),
-            react_1.default.createElement(color_radio_1.ColorRadio, { checked: true, color: "#ff0000", colorLabel: "Red", isDisabled: true, value: 2, name: "value-2" }))));
+            react_1.default.createElement(color_radio_1.ColorRadio, { checked: false, color: "#ff0000", colorLabel: "Red", isDisabled: true, name: "value-1", value: 1 }),
+            react_1.default.createElement(color_radio_1.ColorRadio, { checked: true, color: "#ff0000", colorLabel: "Red", isDisabled: true, name: "value-2", value: 2 }))));
     return (react_1.default.createElement("div", { className: "flex" },
-        react_1.default.createElement("div", { className: "p-20 " }, radios)));
+        react_1.default.createElement("div", { className: "p-20" }, radios)));
 }
-exports.Default = Default;

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

@@ -42,7 +42,7 @@ exports.ColorRadioGroup = (0, react_2.forwardRef)((props, ref) => {
         react_2.default.createElement("div", { className: "uxf-form-component__input" },
             react_2.default.createElement("div", { className: "uxf-color-radio-group__options-wrapper" }, props.options.map((option) => {
                 const optionStyle = { "--option-color": option.value };
-                return (react_2.default.createElement(react_1.RadioGroup.Option, { className: (0, cx_1.cx)("uxf-color-radio-group__option", props.isDisabled && classes_1.CLASSES.IS_DISABLED), key: option.value.toString(), value: option.value, style: optionStyle }, (o) => (react_2.default.createElement(color_radio_1.ColorRadio, { checked: o.checked, isDisabled: props.isDisabled || o.disabled, colorLabel: option.label, color: option.value, ref: o.checked ? innerRef : undefined, value: option.value, name: props.name }))));
+                return (react_2.default.createElement(react_1.RadioGroup.Option, { className: (0, cx_1.cx)("uxf-color-radio-group__option", props.isDisabled && classes_1.CLASSES.IS_DISABLED), key: option.value.toString(), style: optionStyle, value: option.value }, (o) => (react_2.default.createElement(color_radio_1.ColorRadio, { checked: o.checked, color: option.value, colorLabel: option.label, isDisabled: props.isDisabled || o.disabled, name: props.name, ref: o.checked ? innerRef : undefined, value: option.value }))));
             })),
             props.helperText && (react_2.default.createElement("div", { className: (0, cx_1.cx)("uxf-helper-text", props.isInvalid && classes_1.CLASSES.IS_INVALID), id: errorId }, props.helperText)))));
 });

package/color-radio-group/color-radio-group.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");
@@ -70,10 +70,10 @@ const options = [
     },
 ];
 function Default() {
-    const [value, setValue] = (0, react_1.useState)(options[0].value);
+    var _a, _b;
+    const [value, setValue] = (0, react_1.useState)((_b = (_a = options.at(0)) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : null);
     const onChange = (0, action_1.action)("onChange", setValue);
     return (react_1.default.createElement("div", { className: "flex" },
         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, name: "color-radio-button" }))));
+            react_1.default.createElement(index_1.ColorRadioGroup, { id: "radiogroup", label: "Light Color Radio group", name: "color-radio-button", onChange: onChange, options: options, value: value }))));
 }
-exports.Default = Default;

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

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

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getColorScheme = void 0;
+exports.getColorScheme = getColorScheme;
 const isServer_1 = require("@uxf/core/utils/isServer");
 function getColorScheme() {
     if (isServer_1.isServer) {
@@ -14,4 +14,3 @@ function getColorScheme() {
         return "dark";
     }
 }
-exports.getColorScheme = getColorScheme;

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

@@ -1,7 +1,7 @@
 "use strict";
 "use client";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useColorScheme = void 0;
+exports.useColorScheme = useColorScheme;
 const react_1 = require("react");
 const get_color_scheme_1 = require("./get-color-scheme");
 function useColorScheme() {
@@ -13,4 +13,3 @@ function useColorScheme() {
     }, []);
     return colorScheme;
 }
-exports.useColorScheme = useColorScheme;

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useHandleColorScheme = void 0;
+exports.useHandleColorScheme = useHandleColorScheme;
 const react_1 = require("react");
 const color_scheme_defaults_1 = require("./color-scheme-defaults");
 function useHandleColorScheme(props) {
@@ -21,4 +21,3 @@ function useHandleColorScheme(props) {
         }
     }, [defaultColorScheme, getUserSettings, respectSystemSetting, respectUserSettings, setUserSettings]);
 }
-exports.useHandleColorScheme = useHandleColorScheme;

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useToggleColorScheme = void 0;
+exports.useToggleColorScheme = useToggleColorScheme;
 const isServer_1 = require("@uxf/core/utils/isServer");
 const react_1 = require("react");
 const context_1 = require("../context");
@@ -27,4 +27,3 @@ function useToggleColorScheme() {
         }
     }, [getUserSettings, respectSystemSetting, respectUserSettings, setUserSettings]);
 }
-exports.useToggleColorScheme = useToggleColorScheme;

package/combobox/combobox.js

@@ -23,7 +23,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Combobox = void 0;
+exports.Combobox = Combobox;
 const react_1 = require("@floating-ui/react");
 const react_2 = require("@headlessui/react");
 const show_1 = require("@uxf/core-react/components/show");
@@ -31,6 +31,7 @@ const use_input_focus_1 = require("@uxf/core-react/hooks/use-input-focus");
 const use_on_unmount_1 = require("@uxf/core-react/hooks/use-on-unmount");
 const compose_refs_1 = require("@uxf/core-react/utils/compose-refs");
 const classes_1 = require("@uxf/core/constants/classes");
+const empty_array_1 = require("@uxf/core/constants/empty-array");
 const cx_1 = require("@uxf/core/utils/cx");
 const is_empty_1 = require("@uxf/core/utils/is-empty");
 const is_not_empty_1 = require("@uxf/core/utils/is-not-empty");
@@ -60,13 +61,13 @@ function Combobox(props) {
     var _a, _b, _c, _d, _e, _f, _g, _h;
     const isAsync = (0, is_not_nil_1.isNotNil)(props.loadOptions);
     const [query, setQuery] = (0, react_3.useState)("");
-    const options = (0, use_async_loading_1.useAsyncLoading)(query, (_a = props.options) !== null && _a !== void 0 ? _a : [], props.loadOptions);
+    const options = (0, use_async_loading_1.useAsyncLoading)(query, (_a = props.options) !== null && _a !== void 0 ? _a : empty_array_1.EMPTY_ARRAY, props.loadOptions);
     const filteredData = (0, is_empty_1.isEmpty)(query) || isAsync ? options : options.filter((item) => (0, slugify_1.slugify)(item.label).includes((0, slugify_1.slugify)(query)));
     const emptyMessage = (0, is_empty_1.isEmpty)(query)
-        ? (_b = props.noQueryMessage) !== null && _b !== void 0 ? _b : "Pro zobrazení možností začněte psát"
+        ? ((_b = props.noQueryMessage) !== null && _b !== void 0 ? _b : "Pro zobrazení možností začněte psát")
         : (0, is_empty_1.isEmpty)(options)
-            ? (_c = props.noOptionsMessage) !== null && _c !== void 0 ? _c : "Nabídka neosahuje žádné položky"
-            : (_d = props.notFoundMessage) !== null && _d !== void 0 ? _d : "Nic nenalezeno";
+            ? ((_c = props.noOptionsMessage) !== null && _c !== void 0 ? _c : "Nabídka neosahuje žádné položky")
+            : ((_d = props.notFoundMessage) !== null && _d !== void 0 ? _d : "Nic nenalezeno");
     const clearQuery = () => setQuery("");
     const onChange = (v) => props.onChange(v);
     const onInputChange = (event) => setQuery(event.target.value);
@@ -84,7 +85,7 @@ function Combobox(props) {
         react_3.default.createElement("div", { className: "uxf-form-component__label" },
             react_3.default.createElement(react_2.Combobox.Label, { as: label_1.Label, isHidden: props.hiddenLabel, onClick: isNotInteractive ? undefined : input.focus }, props.label)),
         react_3.default.createElement("div", { className: "uxf-form-component__input" },
-            react_3.default.createElement(react_2.Combobox.Button, { as: input_1.Input, "aria-invalid": props.isInvalid, "aria-describedby": errorId, className: (0, cx_1.cx)("uxf-combobox__button", dropdown.placement === "bottom" && `${classes_1.CLASSES.IS_OPEN}--bottom`, dropdown.placement === "top" && `${classes_1.CLASSES.IS_OPEN}--top`, renderProps.open && classes_1.CLASSES.IS_OPEN), customInputElementDisplayName: react_2.Combobox.Input.displayName, inputFocus: input, inputGroupRef: stableRef, inputWrapperRef: props.inputWrapperRef, isDisabled: props.isDisabled, isFocused: renderProps.open, isInvalid: props.isInvalid, isReadOnly: props.isReadOnly, ref: props.inputRef, size: props.size, variant: props.variant },
+            react_3.default.createElement(react_2.Combobox.Button, { "aria-describedby": errorId, "aria-invalid": props.isInvalid, as: input_1.Input, className: (0, cx_1.cx)("uxf-combobox__button", dropdown.placement === "bottom" && `${classes_1.CLASSES.IS_OPEN}--bottom`, dropdown.placement === "top" && `${classes_1.CLASSES.IS_OPEN}--top`, renderProps.open && classes_1.CLASSES.IS_OPEN), customInputElementDisplayName: react_2.Combobox.Input.displayName, inputFocus: input, inputGroupRef: stableRef, inputWrapperRef: props.inputWrapperRef, isDisabled: props.isDisabled, isFocused: renderProps.open, isInvalid: props.isInvalid, isReadOnly: props.isReadOnly, ref: props.inputRef, size: props.size, variant: props.variant },
                 props.leftAddon && react_3.default.createElement(input_1.Input.LeftAddon, null, props.leftAddon),
                 props.leftElement && react_3.default.createElement(input_1.Input.LeftElement, null, props.leftElement),
                 react_3.default.createElement(react_2.Combobox.Input, { autoComplete: "off", className: "uxf-input__element", displayValue: displayValue, onBlur: props.onBlur, onChange: onInputChange, placeholder: props.placeholder, type: "text" }),
@@ -99,5 +100,4 @@ function Combobox(props) {
             react_3.default.createElement(show_1.Show, { when: Boolean(props.helperText) },
                 react_3.default.createElement("div", { className: (0, cx_1.cx)("uxf-helper-text", props.isInvalid && classes_1.CLASSES.IS_INVALID), id: errorId }, props.helperText)))))));
 }
-exports.Combobox = Combobox;
 Combobox.displayName = "UxfUiCombobox";

package/combobox/combobox.stories.js

@@ -26,7 +26,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ComponentStructure = exports.Async = exports.Default = void 0;
+exports.Default = Default;
+exports.Async = Async;
+exports.ComponentStructure = ComponentStructure;
 const react_1 = __importStar(require("react"));
 const action_1 = require("../utils/action");
 const component_structure_analyzer_1 = __importDefault(require("../utils/component-structure-analyzer"));
@@ -52,15 +54,14 @@ function Default() {
         react_1.default.createElement(index_1.Combobox, { id: "combobox-1", label: "Combobox", name: "combobox", onChange: onChange, options: options, placeholder: "Vyberte...", value: value }),
         react_1.default.createElement(index_1.Combobox, { helperText: "Start typing to see options...", id: "combobox-1", label: "Combobox with helper text", name: "combobox", onChange: onChange, options: options, placeholder: "Vyberte...", value: value }),
         react_1.default.createElement(index_1.Combobox, { helperText: "Error message", id: "combobox-1", isInvalid: true, isRequired: true, label: "Combobox invalid", name: "combobox", onChange: onChange, options: options, placeholder: "Vyberte...", value: value }),
-        react_1.default.createElement(index_1.Combobox, { dropdownPlacement: "top", id: "combobox-1", label: "Combobox with dropdown top", name: "combobox", onChange: onChange, options: options, placeholder: "Vyberte...", isClearable: true, value: value }),
-        react_1.default.createElement(index_1.Combobox, { id: "combobox-render", label: "RenderOption", name: "combobox", onChange: onChange, options: options, placeholder: "Vyberte...", isClearable: true, value: value, renderOption: (option, isSelected) => (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(index_1.Combobox, { dropdownPlacement: "top", id: "combobox-1", isClearable: true, label: "Combobox with dropdown top", name: "combobox", onChange: onChange, options: options, placeholder: "Vyberte...", value: value }),
+        react_1.default.createElement(index_1.Combobox, { id: "combobox-render", isClearable: true, label: "RenderOption", name: "combobox", onChange: onChange, options: options, placeholder: "Vyberte...", renderOption: (option, isSelected) => (react_1.default.createElement(react_1.default.Fragment, null,
                 "Option: ",
                 option.label,
-                isSelected && " (selected)")) })));
+                isSelected && " (selected)")), value: value })));
     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" }, storyComboboxes)));
 }
-exports.Default = Default;
 function Async() {
     const [value, setValue] = (0, react_1.useState)(null);
     const onChange = (0, action_1.action)("onChange", (v) => {
@@ -70,14 +71,12 @@ function Async() {
     });
     const loadOptions = (query) => Promise.resolve(options.filter((option) => !query || option.label.toLowerCase().includes(query.toLowerCase())));
     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 })));
+        react_1.default.createElement(index_1.Combobox, { id: "combobox-1", label: "Combobox", loadOptions: loadOptions, name: "combobox", onChange: onChange, placeholder: "Vyberte...", value: value })));
     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" }, storyComboboxes)));
 }
-exports.Async = Async;
 function ComponentStructure() {
     const [value, onChange] = (0, react_1.useState)(null);
     return (react_1.default.createElement(component_structure_analyzer_1.default, null,
-        react_1.default.createElement(index_1.Combobox, { id: "combobox-structure", name: "combobox", label: "Combobox with helper text", options: options, onChange: onChange, value: value, helperText: "Start typing to see options..." })));
+        react_1.default.createElement(index_1.Combobox, { helperText: "Start typing to see options...", id: "combobox-structure", label: "Combobox with helper text", name: "combobox", onChange: onChange, options: options, value: value })));
 }
-exports.ComponentStructure = ComponentStructure;

package/context/context.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ColorSchemeOptions } from "../color-scheme/use-handle-color-scheme";
 import { IconName } from "../icon/types";
 export type UiContextType = {

package/context/use-component-context.d.ts

@@ -1,3 +1,3 @@
 import { UiContextType } from "./context";
 export type UiContextComponent = keyof UiContextType;
-export declare const useComponentContext: <T extends keyof UiContextType>(componentName: T) => UiContextType[T];
+export declare const useComponentContext: <T extends UiContextComponent>(componentName: T) => UiContextType[T];

package/create-component-preview-page/create-component-preview-page.js

@@ -3,7 +3,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createComponentPreviewPage = void 0;
+exports.createComponentPreviewPage = createComponentPreviewPage;
+const empty_array_1 = require("@uxf/core/constants/empty-array");
 const is_nil_1 = require("@uxf/core/utils/is-nil");
 const react_1 = __importDefault(require("react"));
 const components_1 = require("../components");
@@ -32,9 +33,8 @@ function createComponentPreviewPage() {
     };
     component.getInitialProps = (ctx) => {
         var _a;
-        const [componentName, storyName] = (_a = ctx.query.slug) !== null && _a !== void 0 ? _a : [];
+        const [componentName, storyName] = (_a = ctx.query.slug) !== null && _a !== void 0 ? _a : empty_array_1.EMPTY_ARRAY;
         return { componentName, storyName };
     };
     return component;
 }
-exports.createComponentPreviewPage = createComponentPreviewPage;

package/css/button-list.css

@@ -24,7 +24,7 @@
     }
 
     &__menu-button {
-        @apply is-hoverable:hover:cursor-pointer flex space-x-3 px-3 py-2 text-sm text-black hover:text-gray-800;
+        @apply is-hoverable:cursor-pointer flex space-x-3 px-3 py-2 text-sm text-black hover:text-gray-800;
 
         :root .dark & {
             @apply text-white hover:text-gray-200;

package/css/checkbox-button.css

@@ -1,12 +1,8 @@
 .uxf-checkbox-button {
-    @apply focus-visible:ring-primary relative inline-flex shrink-0 items-center justify-between space-x-4 rounded-lg bg-gray-200 px-4
-        py-3 outline-none transition before:absolute before:inset-0 before:rounded-lg
-        before:border before:border-transparent before:transition
-        focus-visible:ring-2 focus-visible:ring-offset-2;
+    @apply focus-visible:ring-primary relative inline-flex shrink-0 items-center justify-between space-x-4 rounded-lg bg-gray-200 px-4 py-3 outline-none transition before:absolute before:inset-0 before:rounded-lg before:border before:border-transparent before:transition focus-visible:ring-2 focus-visible:ring-offset-2;
 
     &__icon {
-        @apply relative h-5 w-5 rounded bg-white p-1 text-transparent before:absolute before:inset-0 before:rounded
-            before:border before:transition;
+        @apply relative h-5 w-5 rounded bg-white p-1 text-transparent before:absolute before:inset-0 before:rounded before:border before:transition;
     }
 
     @apply focus-visible:ring-primary bg-gray-200;

package/css/checkbox.css

@@ -1,7 +1,5 @@
 .uxf-checkbox {
-    @apply focus-visible:before:border-primary relative flex shrink-0 items-center justify-center rounded border border-gray-400
-        bg-white outline-none transition focus-visible:before:absolute
-        focus-visible:before:inset-[-5px] focus-visible:before:rounded-lg focus-visible:before:border-2;
+    @apply focus-visible:before:border-primary relative flex shrink-0 items-center justify-center rounded border border-gray-400 bg-white outline-none transition focus-visible:before:absolute focus-visible:before:inset-[-5px] focus-visible:before:rounded-lg focus-visible:before:border-2;
 
     :root .dark & {
         @apply focus-visible:before:border-primary border-gray-400 bg-gray-900;

package/css/color-radio-group.css

@@ -1,7 +1,6 @@
 .uxf-color-radio-group {
     &__option {
-        @apply is-disabled:pointer-events-none rounded-full outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--option-color)]
-            focus-visible:ring-offset-2 focus-visible:ring-offset-white;
+        @apply is-disabled:pointer-events-none rounded-full outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--option-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-white;
 
         :root .dark & {
             @apply focus-visible:ring-[color:var(--option-color)] focus-visible:ring-offset-gray-900;

package/css/colors.css

@@ -5,6 +5,7 @@
     --uxf-color-base-border-border: #e5e7eb;
     --uxf-color-base-surface-main: #fff;
     --uxf-color-base-surface-main-hover: #f3f4f6;
+    --uxf-color-base-surface-background: #f9fafb;
     --uxf-color-base-surface-input-disabled: #f3f4f6;
     --uxf-color-base-surface-disabled: #d2d6db;
     --uxf-color-base-surface-inverted-main: #ffffff14;
@@ -50,8 +51,10 @@
         /** base */
         --uxf-color-base-border-inverted: #3842501f;
         --uxf-color-base-border-input: #384250;
+        --uxf-color-base-border-border: #e5e7eb1f;
         --uxf-color-base-surface-main: #111927;
         --uxf-color-base-surface-main-hover: #1f2a37;
+        --uxf-color-base-surface-background: #1f2a37;
         --uxf-color-base-surface-input-disabled: #4d5761;
         --uxf-color-base-surface-disabled: #d2d6db;
         --uxf-color-base-surface-inverted-main: #20293914;
@@ -84,6 +87,8 @@
         --uxf-color-warning-border: #dc6803;
         --uxf-color-warning-surface-default: #fdb022;
         --uxf-color-warning-surface-default-hover: #fec84b;
+        --uxf-color-warning-surface-muted: #93370c;
+        --uxf-color-warning-icon-on-muted: #fec84b;
 
         /** info */
         --uxf-color-info-text: #b3b8db;

package/css/dialog.css

@@ -61,6 +61,7 @@
 
         .uxf-dialog__panel {
             @screen sm {
+                border-left: theme("borderWidth.DEFAULT") solid var(--uxf-color-base-border-border);
                 border-radius: 0;
             }
         }

package/css/input.css

@@ -1,5 +1,5 @@
 .uxf-input {
-    @apply rounded-md bg-white bg-white text-gray-900 shadow-sm;
+    @apply rounded-md bg-white text-gray-900 shadow-sm;
 
     :root .dark & {
         @apply bg-gray-900 text-gray-300;

package/css/list-item.css

@@ -1,7 +1,5 @@
 .uxf-list-item {
-    @apply is-hoverable:opacity-75 focus-visible:before:border-primary relative flex min-h-[64px] grow justify-between space-x-3 px-5
-        py-4 outline-none transition-opacity before:absolute before:inset-0 before:rounded-lg
-        focus-visible:before:border-2;
+    @apply is-hoverable:opacity-75 focus-visible:before:border-primary relative flex min-h-[64px] grow justify-between space-x-3 px-5 py-4 outline-none transition-opacity before:absolute before:inset-0 before:rounded-lg focus-visible:before:border-2;
 
     :root .dark & {
         @apply focus-visible:before:border-primary;

package/css/modal-header.css

@@ -1,18 +1,18 @@
 :root {
     /** modal header variables */
-    --uxf-modal-header-background-color: var(--uxf-color-base-surface-main);
-    --uxf-modal-header-border-color: var(--uxf-color-base-border-border);
     --uxf-modal-header-border-width: theme("borderWidth.DEFAULT");
     --uxf-modal-header-description-font-size: theme("fontSize.caption");
     --uxf-modal-header-description-font-weight: theme("fontWeight.normal");
-    --uxf-modal-header-description-text-color: var(--uxf-color-base-text-low-emphasis);
     --uxf-modal-header-title-font-size: 18px;
     --uxf-modal-header-title-font-weight: theme("fontWeight.semibold");
     --uxf-modal-header-title-line-height: 1.3333;
-    --uxf-modal-header-title-text-color: var(--uxf-color-base-text-high-emphasis);
 }
 
 .uxf-modal-header {
+    --uxf-modal-header-background-color: var(--uxf-color-base-surface-main);
+    --uxf-modal-header-border-color: var(--uxf-color-base-border-border);
+    --uxf-modal-header-description-text-color: var(--uxf-color-base-text-low-emphasis);
+    --uxf-modal-header-title-text-color: var(--uxf-color-base-text-high-emphasis);
     --uxf-icon-color: var(--uxf-modal-header-title-text-color);
 
     background-color: var(--uxf-modal-header-background-color);

package/css/pagination.css

@@ -2,8 +2,7 @@
     @apply isolate inline-flex -space-x-px rounded-md;
 
     &__button {
-        @apply relative inline-flex cursor-pointer items-center border border-gray-300 bg-white text-sm
-            font-medium text-gray-500 hover:bg-gray-50 focus:z-10;
+        @apply relative inline-flex cursor-pointer items-center border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-10;
 
         :root .dark & {
             @apply border-gray-600 bg-gray-900 text-gray-200 hover:bg-gray-800;

package/css/radio-group.css

@@ -1,7 +1,6 @@
 .uxf-radio-group {
     &__option {
-        @apply focus-visible:ring-primary outline-none focus-visible:rounded-lg focus-visible:ring-2
-            focus-visible:ring-offset-2 focus-visible:ring-offset-white;
+        @apply focus-visible:ring-primary outline-none focus-visible:rounded-lg focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white;
 
         :root .dark & {
             @apply focus-visible:ring-primary focus-visible:ring-offset-gray-900;
@@ -78,8 +77,7 @@
     }
 
     .uxf-radio-group__option-wrapper {
-        @apply relative min-w-[112px] flex-col-reverse p-3
-            before:pointer-events-none before:absolute before:inset-0 before:rounded-lg before:border before:border-gray-400;
+        @apply relative min-w-[112px] flex-col-reverse p-3 before:pointer-events-none before:absolute before:inset-0 before:rounded-lg before:border before:border-gray-400;
 
         :root .dark & {
             @apply border-gray-400;

package/css/radio.css

@@ -1,6 +1,5 @@
 .uxf-radio {
-    @apply focus-visible:ring-primary flex shrink-0 items-center justify-center rounded-full border border-gray-400
-        transition focus-visible:ring-2;
+    @apply focus-visible:ring-primary flex shrink-0 items-center justify-center rounded-full border border-gray-400 transition focus-visible:ring-2;
 
     :root .dark & {
         @apply focus-visible:ring-primary border-gray-400 focus-visible:ring-offset-gray-900;