@uxf/ui 1.0.0-beta.145 → 1.0.0-beta.147

package/list-item/list-item.js

@@ -1,15 +1,34 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ListItem = void 0;
-const forwardRef_1 = require("@uxf/core/utils/forwardRef");
 const useAnchorProps_1 = require("@uxf/core/hooks/useAnchorProps");
 const cx_1 = require("@uxf/core/utils/cx");
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const icon_1 = require("../icon");
-exports.ListItem = (0, forwardRef_1.forwardRef)("UxfUiListItem", (props, ref) => {
+exports.ListItem = (0, react_1.forwardRef)((props, ref) => {
     // eslint-disable-next-line react/destructuring-assignment
     const { className, children, endElement, endIcon, ...restProps } = props;
     const anchorProps = (0, useAnchorProps_1.useAnchorProps)({
@@ -22,3 +41,4 @@ exports.ListItem = (0, forwardRef_1.forwardRef)("UxfUiListItem", (props, ref) =>
         endIcon && (react_1.default.createElement("span", { className: "uxf-list-item__end-icon-wrapper" },
             react_1.default.createElement(icon_1.Icon, { name: endIcon, size: 24 })))));
 });
+exports.ListItem.displayName = "UxfUiListItem";

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

@@ -25,8 +25,8 @@ function Default() {
         react_1.default.createElement("div", { className: "border-gray500 border-b" }),
         react_1.default.createElement(index_1.ListItem, { onClick: onClick }, "No end icon"),
         react_1.default.createElement("div", { className: "border-gray500 border-b" }),
-        react_1.default.createElement(index_1.ListItem, { endElement: react_1.default.createElement(icon_1.Icon, { name: "camera", className: "text-success-500", 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-500", size: 24 }), endIcon: "chevronRight", onClick: onClick }, "End element and end icon")));
+        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)));

package/loader/loader.js

@@ -1,14 +1,34 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Loader = void 0;
 const cx_1 = require("@uxf/core/utils/cx");
-const forwardRef_1 = require("@uxf/core/utils/forwardRef");
-const react_1 = __importDefault(require("react"));
-exports.Loader = (0, forwardRef_1.forwardRef)("UxfUiLoader", (props, ref) => {
+const react_1 = __importStar(require("react"));
+exports.Loader = (0, react_1.forwardRef)((props, ref) => {
     var _a;
     const loaderClassName = (0, cx_1.cx)("uxf-loader", `uxf-loader--size-${(_a = props.size) !== null && _a !== void 0 ? _a : "default"}`, props.className);
     return react_1.default.createElement("span", { ref: ref, className: loaderClassName });
 });
+exports.Loader.displayName = "UxfUiLoader";

package/loader/loader.stories.js

@@ -16,7 +16,7 @@ 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-y-4 space-x-4 rounded bg-white p-8" }, loaders),
-        react_1.default.createElement("div", { className: "dark space-y-4 space-x-4 rounded bg-gray-900 p-8 text-white" }, loaders)));
+        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)));
 }
 exports.Default = Default;

package/multi-combobox/_multi-combobox-base.js

@@ -29,7 +29,6 @@ const classes_1 = require("@uxf/core/constants/classes");
 const useInputFocus_1 = require("@uxf/core/hooks/useInputFocus");
 const composeRefs_1 = require("@uxf/core/utils/composeRefs");
 const cx_1 = require("@uxf/core/utils/cx");
-const forwardRef_1 = require("@uxf/core/utils/forwardRef");
 const slugify_1 = require("@uxf/core/utils/slugify");
 const chip_1 = require("@uxf/ui/chip");
 const use_async_loading_1 = require("@uxf/ui/hooks/use-async-loading");
@@ -38,7 +37,7 @@ const icon_1 = require("@uxf/ui/icon");
 const label_1 = require("@uxf/ui/label");
 const react_2 = __importStar(require("react"));
 const checkbox_input_1 = require("../checkbox-input");
-exports._MultiComboboxBase = (0, forwardRef_1.forwardRef)("UxfUiMultiComboboxBase", (props, ref) => {
+exports._MultiComboboxBase = (0, react_2.forwardRef)((props, ref) => {
     var _a, _b, _c, _d, _e, _f, _g;
     const isAsync = !!props.loadOptions;
     const [query, setQuery] = (0, react_2.useState)("");
@@ -90,9 +89,9 @@ exports._MultiComboboxBase = (0, forwardRef_1.forwardRef)("UxfUiMultiComboboxBas
             ? (_f = props.allOptionsSelectedMessage) !== null && _f !== void 0 ? _f : "Všechny možnosti jsou již vybrány"
             : (_g = props.notFoundMessage) !== null && _g !== void 0 ? _g : "Nic nenalezeno";
     const withoutPopover = !props.withPopover;
-    return (react_2.default.createElement(react_1.Combobox, { as: "div", by: "id", className: (0, cx_1.cx)(withoutPopover && "uxf-form-control", "uxf-multi-combobox", props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isRequired && classes_1.CLASSES.IS_REQUIRED, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.className), disabled: props.isDisabled || props.isReadOnly, multiple: true, onChange: handleComboboxValueChange, value: selectedOptions }, (renderProps) => {
+    return (react_2.default.createElement(react_1.Combobox, { as: "div", by: "id", className: (0, cx_1.cx)(withoutPopover && "uxf-form-component", "uxf-multi-combobox", props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isRequired && classes_1.CLASSES.IS_REQUIRED, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.className), disabled: props.isDisabled || props.isReadOnly, multiple: true, onChange: handleComboboxValueChange, value: selectedOptions }, (renderProps) => {
         const inputElement = (react_2.default.createElement(react_2.default.Fragment, null,
-            react_2.default.createElement(react_1.Combobox.Button, { "aria-invalid": props.isInvalid, "aria-describedby": props.errorId, as: "div", className: (0, cx_1.cx)("uxf-multi-combobox__button", (renderProps.open || input.focused) && classes_1.CLASSES.IS_FOCUSED, renderProps.disabled && classes_1.CLASSES.IS_DISABLED, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isInvalid && classes_1.CLASSES.IS_INVALID, dropdown.placement === "bottom" && "is-open--bottom", dropdown.placement === "top" && "is-open--top", renderProps.open && classes_1.CLASSES.IS_OPEN), onBlur: input.onBlur, onFocus: input.onFocus, ref: stableRef, tabIndex: props.isDisabled || props.isReadOnly ? undefined : 0 },
+            react_2.default.createElement(react_1.Combobox.Button, { "aria-invalid": props.isInvalid, "aria-describedby": props.errorId, as: "div", className: (0, cx_1.cx)("uxf-multi-combobox__button", (renderProps.open || input.focused) && classes_1.CLASSES.IS_FOCUSED, renderProps.disabled && classes_1.CLASSES.IS_DISABLED, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isInvalid && classes_1.CLASSES.IS_INVALID, dropdown.placement === "bottom" && "is-open--bottom", dropdown.placement === "top" && "is-open--top", renderProps.open && classes_1.CLASSES.IS_OPEN), onBlur: input.onBlur, onFocus: input.onFocus, ref: stableRef },
                 selectedOptions.map((item) => (react_2.default.createElement(chip_1.Chip, { className: "uxf-multi-combobox__input-chip", color: item.color, key: item.id, onClose: handleRemove(item.id), size: "large", suppressFocus: true }, item.label))),
                 react_2.default.createElement(react_1.Combobox.Input, { autoComplete: "off", className: "uxf-multi-combobox__input", onChange: handleInputChange, onKeyDown: handleInputKeyDown, placeholder: props.placeholder, type: "text", value: query }),
                 react_2.default.createElement(icon_1.Icon, { className: (0, cx_1.cx)("uxf-select__button-icon", (props.withPopover ? props.isPopoverOpen : renderProps.open) && "is-open"), name: iconName })),
@@ -103,8 +102,9 @@ exports._MultiComboboxBase = (0, forwardRef_1.forwardRef)("UxfUiMultiComboboxBas
             })) : (react_2.default.createElement("div", { className: "uxf-dropdown__empty-wrapper" }, emptyMessage))),
             props.helperText && withoutPopover && (react_2.default.createElement("div", { className: (0, cx_1.cx)("uxf-helper-text", props.isInvalid && classes_1.CLASSES.IS_INVALID), id: props.errorId }, props.helperText))));
         return (react_2.default.createElement(react_2.default.Fragment, null, withoutPopover ? (react_2.default.createElement(react_2.default.Fragment, null,
-            react_2.default.createElement("div", { className: "uxf-form-control__label" },
+            react_2.default.createElement("div", { className: "uxf-form-component__label" },
                 react_2.default.createElement(react_1.Combobox.Label, { as: label_1.Label, isHidden: props.hiddenLabel, onClick: props.isDisabled || props.isReadOnly ? undefined : input.focus }, props.label)),
-            react_2.default.createElement("div", { className: "uxf-form-control__input" }, inputElement))) : (inputElement)));
+            react_2.default.createElement("div", { className: "uxf-form-component__input" }, inputElement))) : (inputElement)));
     }));
 });
+exports._MultiComboboxBase.displayName = "UxfUiMultiComboboxBase";

package/multi-combobox/multi-combobox.js

@@ -27,12 +27,11 @@ exports.MultiCombobox = void 0;
 const react_1 = require("@headlessui/react");
 const classes_1 = require("@uxf/core/constants/classes");
 const cx_1 = require("@uxf/core/utils/cx");
-const forwardRef_1 = require("@uxf/core/utils/forwardRef");
-const form_control_1 = require("@uxf/ui/form-control");
+const form_component_1 = require("../form-component");
 const icon_1 = require("@uxf/ui/icon");
 const react_2 = __importStar(require("react"));
 const _multi_combobox_base_1 = require("./_multi-combobox-base");
-exports.MultiCombobox = (0, forwardRef_1.forwardRef)("UxfUiMultiCombobox", (props, ref) => {
+exports.MultiCombobox = (0, react_2.forwardRef)((props, ref) => {
     var _a, _b, _c;
     const generatedId = (0, react_2.useId)();
     const id = (_a = props.id) !== null && _a !== void 0 ? _a : generatedId;
@@ -54,7 +53,7 @@ exports.MultiCombobox = (0, forwardRef_1.forwardRef)("UxfUiMultiCombobox", (prop
     if (!props.withPopover) {
         return react_2.default.createElement(_multi_combobox_base_1._MultiComboboxBase, { ...props, errorId: errorId, ref: ref });
     }
-    return (react_2.default.createElement(form_control_1.FormControl, { className: (0, cx_1.cx)(props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isReadOnly && classes_1.CLASSES.IS_READONLY), errorId: errorId, form: props.form, helperText: props.helperText, inputId: fakeInputId, isRequired: props.isRequired, label: props.label },
+    return (react_2.default.createElement(form_component_1.FormComponent, { className: (0, cx_1.cx)(props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isReadOnly && classes_1.CLASSES.IS_READONLY), errorId: errorId, form: props.form, helperText: props.helperText, inputId: fakeInputId, isRequired: props.isRequired, label: props.label },
         react_2.default.createElement(react_1.Popover, { className: (0, cx_1.cx)("uxf-multi-combobox", props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isRequired && classes_1.CLASSES.IS_REQUIRED, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.className) }, (popoverRenderProps) => (react_2.default.createElement(react_2.default.Fragment, null,
             react_2.default.createElement(react_1.Popover.Button, { className: (0, cx_1.cx)("uxf-multi-combobox__button uxf-multi-combobox__button--with-popover", popoverRenderProps.open && classes_1.CLASSES.IS_OPEN, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isInvalid && classes_1.CLASSES.IS_INVALID), id: fakeInputId, onKeyDown: handlePopoverButtonKeyPress, ref: fakeInputRef },
                 react_2.default.createElement("span", { className: (0, cx_1.cx)("uxf-multi-combobox__input uxf-multi-combobox__input--with-popover", selectedOptions.length === 0 &&
@@ -65,3 +64,4 @@ exports.MultiCombobox = (0, forwardRef_1.forwardRef)("UxfUiMultiCombobox", (prop
             react_2.default.createElement(react_1.Popover.Panel, { className: "uxf-multi-combobox__popover-panel", focus: popoverRenderProps.open, unmount: false },
                 react_2.default.createElement(_multi_combobox_base_1._MultiComboboxBase, { ...props, errorId: errorId, isPopoverOpen: popoverRenderProps.open, ref: ref, withPopover: true })))))));
 });
+exports.MultiCombobox.displayName = "UxfUiMultiCombobox";

package/multi-select/_multi-select-base.js

@@ -29,13 +29,12 @@ const classes_1 = require("@uxf/core/constants/classes");
 const useInputFocus_1 = require("@uxf/core/hooks/useInputFocus");
 const composeRefs_1 = require("@uxf/core/utils/composeRefs");
 const cx_1 = require("@uxf/core/utils/cx");
-const forwardRef_1 = require("@uxf/core/utils/forwardRef");
 const icon_1 = require("@uxf/ui//icon");
 const chip_1 = require("@uxf/ui/chip");
 const use_dropdown_1 = require("@uxf/ui/hooks/use-dropdown");
 const label_1 = require("@uxf/ui/label");
 const react_2 = __importStar(require("react"));
-exports._MultiSelectBase = (0, forwardRef_1.forwardRef)("UxfUiMultiSelectBase", (props, ref) => {
+exports._MultiSelectBase = (0, react_2.forwardRef)((props, ref) => {
     var _a, _b, _c;
     const innerRef = (0, react_2.useRef)(null);
     const input = (0, useInputFocus_1.useInputFocus)(innerRef, props.onBlur, props.onFocus);
@@ -53,7 +52,7 @@ exports._MultiSelectBase = (0, forwardRef_1.forwardRef)("UxfUiMultiSelectBase",
         props.onChange((_b = (_a = props.value) === null || _a === void 0 ? void 0 : _a.filter((v) => v.id !== valueId)) !== null && _b !== void 0 ? _b : []);
     };
     const withoutPopover = !props.withPopover;
-    return (react_2.default.createElement(react_1.Listbox, { as: "div", className: (0, cx_1.cx)(withoutPopover && "uxf-form-control", "uxf-multi-combobox", props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isRequired && classes_1.CLASSES.IS_REQUIRED, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.className), disabled: props.isDisabled || props.isReadOnly, multiple: true, onChange: handleSelectValueChange, value: selectedOptions }, (renderProps) => {
+    return (react_2.default.createElement(react_1.Listbox, { as: "div", className: (0, cx_1.cx)(withoutPopover && "uxf-form-component", "uxf-multi-combobox", props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isRequired && classes_1.CLASSES.IS_REQUIRED, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.className), disabled: props.isDisabled || props.isReadOnly, multiple: true, onChange: handleSelectValueChange, value: selectedOptions }, (renderProps) => {
         const inputElement = (react_2.default.createElement(react_2.default.Fragment, null,
             react_2.default.createElement(react_1.Listbox.Button, { as: "div", className: (0, cx_1.cx)("uxf-multi-combobox__button", (renderProps.open || input.focused) && classes_1.CLASSES.IS_FOCUSED, renderProps.disabled && classes_1.CLASSES.IS_DISABLED, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isInvalid && classes_1.CLASSES.IS_INVALID, dropdown.placement === "bottom" && "is-open--bottom", dropdown.placement === "top" && "is-open--top", renderProps.open && "is-open"), onBlur: input.onBlur, onFocus: input.onFocus, tabIndex: props.isDisabled || props.isReadOnly ? undefined : 0, ref: stableRef, "aria-invalid": props.isInvalid, "aria-describedby": props.errorId },
                 react_2.default.createElement("div", { className: (0, cx_1.cx)("uxf-multi-select__input", selectedOptions.length === 0 && "uxf-multi-select__input--is-empty") }, selectedOptions.length === 0
@@ -67,8 +66,9 @@ exports._MultiSelectBase = (0, forwardRef_1.forwardRef)("UxfUiMultiSelectBase",
             })),
             props.helperText && withoutPopover && (react_2.default.createElement("div", { className: (0, cx_1.cx)("uxf-helper-text", props.isInvalid && classes_1.CLASSES.IS_INVALID), id: props.errorId }, props.helperText))));
         return (react_2.default.createElement(react_2.default.Fragment, null, withoutPopover ? (react_2.default.createElement(react_2.default.Fragment, null,
-            react_2.default.createElement("div", { className: "uxf-form-control__label" },
+            react_2.default.createElement("div", { className: "uxf-form-component__label" },
                 react_2.default.createElement(react_1.Listbox.Label, { as: label_1.Label, isHidden: props.hiddenLabel, onClick: props.isDisabled || props.isReadOnly ? undefined : input.focus }, props.label)),
-            react_2.default.createElement("div", { className: "uxf-form-control__input" }, inputElement))) : (inputElement)));
+            react_2.default.createElement("div", { className: "uxf-form-component__input" }, inputElement))) : (inputElement)));
     }));
 });
+exports._MultiSelectBase.displayName = "UxfUiMultiSelectBase";

package/multi-select/multi-select.js

@@ -27,12 +27,11 @@ exports.MultiSelect = void 0;
 const react_1 = require("@headlessui/react");
 const classes_1 = require("@uxf/core/constants/classes");
 const cx_1 = require("@uxf/core/utils/cx");
-const forwardRef_1 = require("@uxf/core/utils/forwardRef");
-const form_control_1 = require("@uxf/ui/form-control");
+const form_component_1 = require("../form-component");
 const icon_1 = require("@uxf/ui/icon");
 const react_2 = __importStar(require("react"));
 const _multi_select_base_1 = require("./_multi-select-base");
-exports.MultiSelect = (0, forwardRef_1.forwardRef)("UxfUiMultiSelect", (props, ref) => {
+exports.MultiSelect = (0, react_2.forwardRef)((props, ref) => {
     var _a, _b, _c;
     const generatedId = (0, react_2.useId)();
     const id = (_a = props.id) !== null && _a !== void 0 ? _a : generatedId;
@@ -42,7 +41,7 @@ exports.MultiSelect = (0, forwardRef_1.forwardRef)("UxfUiMultiSelect", (props, r
     if (!props.withPopover) {
         return react_2.default.createElement(_multi_select_base_1._MultiSelectBase, { ...props, errorId: errorId, id: id, ref: ref });
     }
-    return (react_2.default.createElement(form_control_1.FormControl, { className: (0, cx_1.cx)(props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isReadOnly && classes_1.CLASSES.IS_READONLY), errorId: errorId, form: props.form, helperText: props.helperText, inputId: id, isRequired: props.isRequired, label: props.label },
+    return (react_2.default.createElement(form_component_1.FormComponent, { className: (0, cx_1.cx)(props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isReadOnly && classes_1.CLASSES.IS_READONLY), errorId: errorId, form: props.form, helperText: props.helperText, inputId: id, isRequired: props.isRequired, label: props.label },
         react_2.default.createElement(react_1.Popover, { className: (0, cx_1.cx)("uxf-multi-combobox", props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isRequired && classes_1.CLASSES.IS_REQUIRED, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.className) }, (popoverRenderProps) => (react_2.default.createElement(react_2.default.Fragment, null,
             react_2.default.createElement(react_1.Popover.Button, { className: (0, cx_1.cx)("uxf-multi-combobox__button uxf-multi-combobox__button--with-popover", popoverRenderProps.open && classes_1.CLASSES.IS_OPEN, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isInvalid && classes_1.CLASSES.IS_INVALID) },
                 react_2.default.createElement("span", { className: (0, cx_1.cx)("uxf-multi-combobox__input uxf-multi-combobox__input--with-popover", selectedOptions.length === 0 &&
@@ -53,3 +52,4 @@ exports.MultiSelect = (0, forwardRef_1.forwardRef)("UxfUiMultiSelect", (props, r
             react_2.default.createElement(react_1.Popover.Panel, { className: "uxf-multi-combobox__popover-panel", focus: popoverRenderProps.open, unmount: false },
                 react_2.default.createElement(_multi_select_base_1._MultiSelectBase, { ...props, errorId: errorId, isPopoverOpen: popoverRenderProps.open, ref: ref, withPopover: true })))))));
 });
+exports.MultiSelect.displayName = "UxfUiMultiSelect";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/ui",
-  "version": "1.0.0-beta.145",
+  "version": "1.0.0-beta.147",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -13,12 +13,12 @@
   "author": "UX Fans s.r.o",
   "license": "MIT",
   "dependencies": {
-    "@floating-ui/react": "^0.17.0",
-    "@headlessui/react": "^1.7.7",
-    "@uxf/core": "^4.4.2",
+    "@floating-ui/react": "^0.23.1",
+    "@headlessui/react": "^1.7.14",
+    "@uxf/core": "^4.5.1",
     "@uxf/datepicker": "^1.2.0",
     "@uxf/styles": "^2.1.2",
-    "color2k": "^2.0.1",
+    "color2k": "^2.0.2",
     "dayjs": "^1.11.7",
     "jump.js": "^1.0.2",
     "react-dropzone": "^14.2.3"

package/paper/paper.js

@@ -1,13 +1,33 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Paper = void 0;
 const cx_1 = require("@uxf/core/utils/cx");
-const react_1 = __importDefault(require("react"));
-const forwardRef_1 = require("@uxf/core/utils/forwardRef");
-exports.Paper = (0, forwardRef_1.forwardRef)("UxfUiPaper", (props, ref) => {
+const react_1 = __importStar(require("react"));
+exports.Paper = (0, react_1.forwardRef)((props, ref) => {
     const paperClassName = (0, cx_1.cx)("uxf-paper", props.className);
     return (react_1.default.createElement("div", { ref: ref, className: paperClassName }, props.children));
 });
+exports.Paper.displayName = "UxfUiPaper";

package/radio/radio.js

@@ -1,15 +1,34 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Radio = void 0;
 const classes_1 = require("@uxf/core/constants/classes");
 const useClickableProps_1 = require("@uxf/core/hooks/useClickableProps");
 const cx_1 = require("@uxf/core/utils/cx");
-const react_1 = __importDefault(require("react"));
-const forwardRef_1 = require("@uxf/core/utils/forwardRef");
-exports.Radio = (0, forwardRef_1.forwardRef)("UxfUiRadio", (props, ref) => {
+const react_1 = __importStar(require("react"));
+exports.Radio = (0, react_1.forwardRef)((props, ref) => {
     var _a, _b, _c;
     const onChange = props.onChange;
     const onClick = onChange ? () => onChange(props.value) : undefined;
@@ -30,3 +49,4 @@ exports.Radio = (0, forwardRef_1.forwardRef)("UxfUiRadio", (props, ref) => {
     const innerClassName = "uxf-radio__inner";
     return (react_1.default.createElement("span", { ...clickableProps, ref: ref }, (_c = (_b = props.renderContent) === null || _b === void 0 ? void 0 : _b.call(props, innerClassName, props.checked, props.value)) !== null && _c !== void 0 ? _c : react_1.default.createElement("span", { className: innerClassName })));
 });
+exports.Radio.displayName = "UxfUiRadio";

package/radio/radio.stories.js

@@ -12,19 +12,19 @@ exports.default = {
 };
 function Default() {
     const radios = (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("div", { className: "mt-4 mb-2 font-semibold" }, "Default"),
+        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 }),
             react_1.default.createElement(index_1.Radio, { checked: true, value: 2 })),
-        react_1.default.createElement("div", { className: "mt-4 mb-2 font-semibold" }, "Invalid"),
+        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(index_1.Radio, { checked: false, isInvalid: true, value: 1 }),
             react_1.default.createElement(index_1.Radio, { checked: true, isInvalid: true, value: 2 })),
-        react_1.default.createElement("div", { className: "mt-4 mb-2 font-semibold" }, "Disabled"),
+        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(index_1.Radio, { checked: false, isDisabled: true, value: 1 }),
             react_1.default.createElement(index_1.Radio, { checked: true, isDisabled: true, value: 2 })),
-        react_1.default.createElement("div", { className: "mt-4 mb-2 font-semibold" }, "size lg"),
+        react_1.default.createElement("div", { className: "mb-2 mt-4 font-semibold" }, "size lg"),
         react_1.default.createElement("div", { className: "flex flex-row gap-4" },
             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 }))));

package/radio-group/radio-group.js

@@ -27,25 +27,25 @@ exports.RadioGroup = void 0;
 const react_1 = require("@headlessui/react");
 const classes_1 = require("@uxf/core/constants/classes");
 const cx_1 = require("@uxf/core/utils/cx");
-const forwardRef_1 = require("@uxf/core/utils/forwardRef");
 const react_2 = __importStar(require("react"));
 const use_input_submit_1 = require("../hooks/use-input-submit");
 const label_1 = require("../label");
 const radio_1 = require("../radio");
-exports.RadioGroup = (0, forwardRef_1.forwardRef)("UxfUiRadioGroup", (props, ref) => {
+exports.RadioGroup = (0, react_2.forwardRef)((props, ref) => {
     var _a, _b;
     const innerRef = (0, react_2.useRef)(null);
     (0, use_input_submit_1.useInputSubmit)(innerRef, "radio-group", props.isDisabled);
     const errorId = props.isInvalid ? `${props.id}--errormessage` : undefined;
     const variant = (_a = props.variant) !== null && _a !== void 0 ? _a : "list";
     const radioSize = (_b = props.radioSize) !== null && _b !== void 0 ? _b : "default";
-    const rootClassName = (0, cx_1.cx)("uxf-form-control uxf-radio-group", `uxf-radio-group--${variant}`, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, props.className);
+    const rootClassName = (0, cx_1.cx)("uxf-form-component uxf-radio-group", `uxf-radio-group--${variant}`, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, props.className);
     return (react_2.default.createElement(react_1.RadioGroup, { className: rootClassName, disabled: props.isDisabled, id: props.id, onChange: props.onChange, style: props.style, value: props.value },
-        react_2.default.createElement("div", { className: "uxf-form-control__label" },
+        react_2.default.createElement("div", { className: "uxf-form-component__label" },
             react_2.default.createElement(react_1.RadioGroup.Label, { as: label_1.Label, className: "uxf-radio-group__label", isHidden: props.hiddenLabel, ref: ref }, props.label)),
-        react_2.default.createElement("div", { className: "uxf-form-control__input" },
+        react_2.default.createElement("div", { className: "uxf-form-component__input" },
             react_2.default.createElement("div", { className: "uxf-radio-group__options-wrapper" }, props.options.map((option) => (react_2.default.createElement(react_1.RadioGroup.Option, { className: (0, cx_1.cx)("uxf-radio-group__option", props.isDisabled && classes_1.CLASSES.IS_DISABLED), disabled: option.disabled, key: option.value.toString(), value: option.value }, (o) => (react_2.default.createElement("div", { className: (0, cx_1.cx)("uxf-radio-group__option-wrapper", o.checked && classes_1.CLASSES.IS_SELECTED) },
                 react_2.default.createElement("span", { className: "uxf-radio-group__option-label" }, option.label),
                 react_2.default.createElement(radio_1.Radio, { checked: o.checked, isDisabled: props.isDisabled || o.disabled, isInvalid: props.isInvalid, ref: o.checked ? innerRef : undefined, size: radioSize, 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)))));
 });
+exports.RadioGroup.displayName = "UxfUiRadioGroup";

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

@@ -52,6 +52,7 @@ function Default() {
         react_1.default.createElement(index_1.RadioGroup, { id: "radiogroup", label: "Light Radio group", onChange: onChange, options: options, value: value }),
         react_1.default.createElement(index_1.RadioGroup, { id: "radiogroup", label: "Radio group variant radio button", onChange: onChange, options: options, value: value, variant: "radioButton" }),
         react_1.default.createElement(index_1.RadioGroup, { hiddenLabel: true, id: "radiogroup", label: "Radio group variant row with hidden label", onChange: onChange, options: options, value: value, variant: "row" }),
+        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),

package/radio-group/theme.d.ts

@@ -1,4 +1,5 @@
 export interface RadioGroupVariants {
+    column: true;
     list: true;
     radioButton: true;
     row: true;

package/select/select.js

@@ -33,12 +33,12 @@ const SelectedOption = (0, react_2.forwardRef)((props, ref) => (react_2.default.
     react_2.default.createElement("span", { className: "uxf-input__element-text" }, props.children))));
 SelectedOption.displayName = "UxfUiSelectSelectedOption";
 const Select = (props) => {
-    var _a, _b;
+    var _a, _b, _c;
     const selectedOption = props.options.find((option) => option.id === props.value);
     const onChange = (v) => props.onChange(v.id);
-    return (react_2.default.createElement(_select_base_1._SelectBase, { HUIComponent: react_1.Listbox, className: `uxf-select ${props.className}`, customInputElementDisplayName: SelectedOption.displayName, dropdownPlacement: props.dropdownPlacement, emptyMessage: "", forwardRef: props.forwardRef, helperText: props.helperText, hiddenLabel: props.hiddenLabel, iconName: props.iconName, id: props.id, isClearable: props.isClearable, isDisabled: props.isDisabled, isFocused: props.isFocused, isInvalid: props.isInvalid, isReadOnly: props.isReadOnly, isRequired: props.isRequired, keyExtractor: props.keyExtractor, label: props.label, leftAddon: props.leftAddon, leftElement: props.leftElement, name: props.name, onBlur: props.onBlur, onChange: onChange, onFocus: props.onFocus, options: props.options, placeholder: props.placeholder, renderOption: props.renderOption, rightAddon: props.rightAddon, rightElement: props.rightElement, size: props.size, value: props.value, variant: props.variant },
+    return (react_2.default.createElement(_select_base_1._SelectBase, { HUIComponent: react_1.Listbox, className: `uxf-select ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`, customInputElementDisplayName: SelectedOption.displayName, dropdownPlacement: props.dropdownPlacement, emptyMessage: "", forwardRef: props.forwardRef, helperText: props.helperText, hiddenLabel: props.hiddenLabel, iconName: props.iconName, id: props.id, isClearable: props.isClearable, isDisabled: props.isDisabled, isFocused: props.isFocused, isInvalid: props.isInvalid, isReadOnly: props.isReadOnly, isRequired: props.isRequired, keyExtractor: props.keyExtractor, label: props.label, leftAddon: props.leftAddon, leftElement: props.leftElement, name: props.name, onBlur: props.onBlur, onChange: onChange, onFocus: props.onFocus, options: props.options, placeholder: props.placeholder, renderOption: props.renderOption, rightAddon: props.rightAddon, rightElement: props.rightElement, size: props.size, value: props.value, variant: props.variant },
         react_2.default.createElement(SelectedOption, { isEmpty: !(selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) }, selectedOption
-            ? (_b = (_a = props.renderSelectedOption) === null || _a === void 0 ? void 0 : _a.call(props, selectedOption)) !== null && _b !== void 0 ? _b : selectedOption.label
+            ? (_c = (_b = props.renderSelectedOption) === null || _b === void 0 ? void 0 : _b.call(props, selectedOption)) !== null && _c !== void 0 ? _c : selectedOption.label
             : props.placeholder)));
 };
 exports.Select = Select;

package/tabs/tabs.js

@@ -28,11 +28,10 @@ const react_1 = require("@headlessui/react");
 const classes_1 = require("@uxf/core/constants/classes");
 const useMouseDragToScroll_1 = require("@uxf/core/hooks/useMouseDragToScroll");
 const cx_1 = require("@uxf/core/utils/cx");
-const forwardRef_1 = require("@uxf/core/utils/forwardRef");
 const react_2 = __importStar(require("react"));
 const Panel = (props) => (react_2.default.createElement("div", { className: props.className, style: props.style }, props.children));
 Panel.displayName = "UxfUiTabPanel";
-const TabsRoot = (0, forwardRef_1.forwardRef)("UxfUiTabs", (props, ref) => {
+const TabsRoot = (0, react_2.forwardRef)((props, ref) => {
     var _a, _b;
     const tabsClassName = (0, cx_1.cx)("uxf-tabs", props.grow && "uxf-tabs--grow", props.className);
     const containerRef = (0, react_2.useRef)(null);
@@ -66,4 +65,5 @@ const TabsRoot = (0, forwardRef_1.forwardRef)("UxfUiTabs", (props, ref) => {
                 }, key: `${tab.title}--${index}` }, tab.title))))),
         react_2.default.createElement(react_1.Tab.Panels, { className: "uxf-tabs__panels" }, tabPanels.map((tab, index) => (react_2.default.createElement(react_1.Tab.Panel, { className: "outline-none", key: `${tab}--${index}` }, tab))))));
 });
+TabsRoot.displayName = "UxfUiTabs";
 exports.Tabs = Object.assign(TabsRoot, { Panel });

package/text-input/text-input.js

@@ -27,12 +27,11 @@ exports.TextInput = void 0;
 const classes_1 = require("@uxf/core/constants/classes");
 const useInputFocus_1 = require("@uxf/core/hooks/useInputFocus");
 const cx_1 = require("@uxf/core/utils/cx");
-const forwardRef_1 = require("@uxf/core/utils/forwardRef");
 const input_1 = require("@uxf/ui/input");
 const react_1 = __importStar(require("react"));
-const form_control_1 = require("../form-control");
+const form_component_1 = require("../form-component");
 const composeRefs_1 = require("@uxf/core/utils/composeRefs");
-exports.TextInput = (0, forwardRef_1.forwardRef)("UxfUiTextInput", (props, ref) => {
+exports.TextInput = (0, react_1.forwardRef)((props, ref) => {
     var _a, _b;
     const innerRef = (0, react_1.useRef)(null);
     const input = (0, useInputFocus_1.useInputFocus)(innerRef, props.onBlur, props.onFocus);
@@ -40,7 +39,7 @@ exports.TextInput = (0, forwardRef_1.forwardRef)("UxfUiTextInput", (props, ref)
     const id = (_a = props.id) !== null && _a !== void 0 ? _a : generatedId;
     const errorId = props.isInvalid ? `${id}--error-message` : undefined;
     const rootClassName = (0, cx_1.cx)("uxf-text-input", ((_b = props.isFocused) !== null && _b !== void 0 ? _b : input.focused) && classes_1.CLASSES.IS_FOCUSED, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isRequired && classes_1.CLASSES.IS_REQUIRED, props.className);
-    return (react_1.default.createElement(form_control_1.FormControl, { className: rootClassName, errorId: errorId, form: props.form, helperText: props.helperText, hiddenLabel: props.hiddenLabel, inputId: id, isRequired: props.isRequired, label: props.label },
+    return (react_1.default.createElement(form_component_1.FormComponent, { className: rootClassName, errorId: errorId, form: props.form, helperText: props.helperText, hiddenLabel: props.hiddenLabel, inputId: id, isRequired: props.isRequired, label: props.label },
         react_1.default.createElement(input_1.Input, { inputFocus: input, size: props.size, variant: props.variant },
             props.leftAddon && react_1.default.createElement(input_1.Input.LeftAddon, null, props.leftAddon),
             props.leftElement && react_1.default.createElement(input_1.Input.LeftElement, null, props.leftElement),
@@ -48,3 +47,4 @@ exports.TextInput = (0, forwardRef_1.forwardRef)("UxfUiTextInput", (props, ref)
             props.rightElement && react_1.default.createElement(input_1.Input.RightElement, null, props.rightElement),
             props.rightAddon && react_1.default.createElement(input_1.Input.RightAddon, null, props.rightAddon))));
 });
+exports.TextInput.displayName = "UxfUiTextInput";

package/text-link/text-link.js

@@ -1,14 +1,33 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextLink = void 0;
-const forwardRef_1 = require("@uxf/core/utils/forwardRef");
 const useAnchorProps_1 = require("@uxf/core/hooks/useAnchorProps");
 const cx_1 = require("@uxf/core/utils/cx");
-const react_1 = __importDefault(require("react"));
-exports.TextLink = (0, forwardRef_1.forwardRef)("UxfUiTextLink", (props, ref) => {
+const react_1 = __importStar(require("react"));
+exports.TextLink = (0, react_1.forwardRef)((props, ref) => {
     // eslint-disable-next-line react/destructuring-assignment
     const { className, children, variant, ...restProps } = props;
     const anchorProps = (0, useAnchorProps_1.useAnchorProps)({
@@ -17,3 +36,4 @@ exports.TextLink = (0, forwardRef_1.forwardRef)("UxfUiTextLink", (props, ref) =>
     });
     return (react_1.default.createElement("a", { ref: ref, ...anchorProps }, children));
 });
+exports.TextLink.displayName = "UxfUiTextLink";

package/textarea/textarea.js

@@ -29,9 +29,8 @@ const useInputFocus_1 = require("@uxf/core/hooks/useInputFocus");
 const useLatest_1 = require("@uxf/core/hooks/useLatest");
 const composeRefs_1 = require("@uxf/core/utils/composeRefs");
 const cx_1 = require("@uxf/core/utils/cx");
-const forwardRef_1 = require("@uxf/core/utils/forwardRef");
 const react_1 = __importStar(require("react"));
-const form_control_1 = require("../form-control");
+const form_component_1 = require("../form-component");
 function autoHeightHandler(element, rows = 4) {
     element.style.height = "auto";
     if (rows > 1) {
@@ -43,7 +42,7 @@ function autoHeightHandler(element, rows = 4) {
     }
 }
 const EVENTS = ["input", "cut", "paste", "drop"];
-exports.Textarea = (0, forwardRef_1.forwardRef)("UxfUiTextarea", (props, ref) => {
+exports.Textarea = (0, react_1.forwardRef)((props, ref) => {
     var _a, _b;
     const innerRef = (0, react_1.useRef)(null);
     const input = (0, useInputFocus_1.useInputFocus)(innerRef, props.onBlur, props.onFocus);
@@ -67,7 +66,8 @@ exports.Textarea = (0, forwardRef_1.forwardRef)("UxfUiTextarea", (props, ref) =>
         };
     }, [props.disableAutoHeight, latestRows]);
     const onWrapperClick = () => { var _a; return (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.focus(); };
-    return (react_1.default.createElement(form_control_1.FormControl, { className: rootClassName, errorId: errorId, form: props.form, helperText: props.helperText, hiddenLabel: props.hiddenLabel, inputId: id, isRequired: props.isRequired, label: props.label },
+    return (react_1.default.createElement(form_component_1.FormComponent, { className: rootClassName, errorId: errorId, form: props.form, helperText: props.helperText, hiddenLabel: props.hiddenLabel, inputId: id, isRequired: props.isRequired, label: props.label },
         react_1.default.createElement("div", { className: "uxf-textarea__wrapper", onClick: onWrapperClick },
             react_1.default.createElement("textarea", { "aria-describedby": errorId, "aria-invalid": props.isInvalid, autoComplete: props.autoComplete, className: "uxf-textarea__element", disabled: props.isDisabled, form: props.form, id: id, maxLength: props.maxLength, minLength: props.minLength, name: props.name, onBlur: input.onBlur, onChange: (event) => props.onChange(event.target.value, event), onFocus: input.onFocus, placeholder: props.placeholder, readOnly: props.isReadOnly, ref: (0, composeRefs_1.composeRefs)(innerRef, ref), required: props.isRequired, value: props.value }))));
 });
+exports.Textarea.displayName = "UxfUiTextarea";

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

@@ -32,6 +32,7 @@ const classes_1 = require("@uxf/core/constants/classes");
 const button_1 = require("../button");
 const TimePickerHour = (props) => {
     const hourRef = (0, react_1.useRef)(null);
+    // eslint-disable-next-line react/destructuring-assignment
     const { focusedHour, isHourFocused, isHourSelected, onHourSelect, onHourFocus } = (0, react_1.useContext)(time_picker_context_1.TimePickerContext);
     const { onClick, onKeyDown, tabIndex, isSelected } = (0, use_hour_1.useHour)({
         hour: props.hour,