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

package/css/tabs.css

@@ -63,11 +63,11 @@
                 before:opacity-0 before:transition;
 
             :root .light & {
-                @apply text-lightMedium hover:bg-gray-100 focus-visible:ring-primary-500;
+                @apply text-lightMedium hover:bg-gray-100 focus-visible:ring-primary;
             }
 
             :root .dark & {
-                @apply text-darkMedium hover:bg-gray-800 focus-visible:ring-primary-500
+                @apply text-darkMedium hover:bg-gray-800 focus-visible:ring-primary
                     focus-visible:ring-offset-gray-900;
             }
 
@@ -75,11 +75,11 @@
                 @apply before:opacity-100 ;
 
                 :root .light & {
-                    @apply text-lightHigh before:border-b-primary-500 hover:bg-transparent;
+                    @apply text-lightHigh before:border-b-primary hover:bg-transparent;
                 }
 
                 :root .dark & {
-                    @apply text-darkHigh before:border-b-primary-500 hover:bg-transparent;
+                    @apply text-darkHigh before:border-b-primary hover:bg-transparent;
                 }
             }
 
@@ -99,21 +99,21 @@
 
             :root .light & {
                 @apply text-lightMedium bg-gray-100 hover:text-primary-600 hover:bg-primary-100
-                    focus-visible:ring-primary-500 focus-visible:ring-offset-gray-100;
+                    focus-visible:ring-primary focus-visible:ring-offset-gray-100;
             }
 
             :root .dark & {
-                @apply text-darkMedium bg-gray-700 hover:bg-gray-800 focus-visible:ring-primary-500
+                @apply text-darkMedium bg-gray-700 hover:bg-gray-800 focus-visible:ring-primary
                     focus-visible:ring-offset-gray-700;
             }
 
             &.is-active {
                 :root .light & {
-                    @apply text-white bg-primary-500;
+                    @apply text-white bg-primary;
                 }
 
                 :root .dark & {
-                    @apply text-white bg-primary-500;
+                    @apply text-white bg-primary;
                 }
             }
 

package/css/text-link.css

@@ -3,10 +3,10 @@
         focus-visible:before:border-2 focus-visible:before:rounded-lg;
 
     :root .light & {
-        @apply text-primary-500 is-hoverable:text-primary-400 focus-visible:before:border-primary-500;
+        @apply text-primary is-hoverable:text-primary-400 focus-visible:before:border-primary;
     }
 
     :root .dark & {
-        @apply text-primary-500 is-hoverable:text-primary-400 focus-visible:before:border-primary-500;
+        @apply text-primary is-hoverable:text-primary-400 focus-visible:before:border-primary;
     }
 }

package/css/textarea.css

@@ -28,11 +28,11 @@
             @apply ring-2 ring-inset ring-offset-0;
 
             :root .light & {
-                @apply ring-primary-500;
+                @apply ring-primary;
             }
 
             :root .dark & {
-                @apply ring-primary-500;
+                @apply ring-primary;
             }
         }
     }
@@ -83,15 +83,15 @@
         }
 
         .uxf-textarea__wrapper {
-            @apply border-error-500;
+            @apply border-error;
 
             .uxf-textarea__element {
                 :root .light & {
-                    @apply text-error-500;
+                    @apply text-error;
                 }
 
                 :root .dark & {
-                    @apply text-error-500;
+                    @apply text-error;
                 }
             }
         }

package/css/time-picker.css

@@ -15,6 +15,8 @@
     &__hours,
     &__minutes {
         @apply grid grid-cols-4 place-items-center gap-1;
+
+        width: 200px;
     }
 
     :root .light & {

package/css/toggle.css

@@ -27,7 +27,7 @@
     }
 
     &__inner {
-        @apply inline-block h-5 w-5 transform rounded-full bg-white transition transition-all;
+        @apply inline-block h-5 w-5 transform rounded-full bg-white transition-all;
     }
 
     &.is-disabled {
@@ -39,14 +39,14 @@
     }
 
     :root .light & {
-        @apply bg-gray-200 focus-visible:ring-primary-500;
+        @apply bg-gray-200 focus-visible:ring-primary;
 
         &__inner {
             @apply bg-white;
         }
 
         &.is-selected {
-            @apply bg-primary-500;
+            @apply bg-primary;
         }
 
         &.is-disabled {
@@ -59,10 +59,10 @@
     }
 
     :root .dark & {
-        @apply bg-gray-400 focus-visible:ring-primary-500 focus-visible:ring-offset-gray-900;
+        @apply bg-gray-400 focus-visible:ring-primary focus-visible:ring-offset-gray-900;
 
         &.is-selected {
-            @apply bg-primary-500;
+            @apply bg-primary;
         }
 
         &__inner {

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

@@ -1,12 +1,35 @@
 "use strict";
+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;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DatePickerInput = void 0;
-const forwardRef_1 = require("@uxf/core/utils/forwardRef");
 const dayjs_1 = __importDefault(require("dayjs"));
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const date_picker_provider_1 = require("./date-picker-provider");
 const _input_with_popover_1 = require("../_input-with-popover");
-exports.DatePickerInput = (0, forwardRef_1.forwardRef)("UxfUiDatePickerInput", (props, ref) => (react_1.default.createElement(_input_with_popover_1._InputWithPopover, { ...props, onChange: props.onChange, placeholder: props.placeholder ? (0, dayjs_1.default)(props.placeholder).format("l") : "Vyberte datum...", ref: ref, value: props.value ? (0, dayjs_1.default)(props.value).format("l") : "" }, ({ close }) => (react_1.default.createElement(date_picker_provider_1.DatePickerProvider, { closePopoverHandler: close, onChange: props.onChange, selectedDate: props.value })))));
+exports.DatePickerInput = (0, react_1.forwardRef)((props, ref) => (react_1.default.createElement(_input_with_popover_1._InputWithPopover, { ...props, onChange: props.onChange, placeholder: props.placeholder ? (0, dayjs_1.default)(props.placeholder).format("l") : "Vyberte datum...", ref: ref, value: props.value ? (0, dayjs_1.default)(props.value).format("l") : "" }, ({ close }) => (react_1.default.createElement(date_picker_provider_1.DatePickerProvider, { closePopoverHandler: close, onChange: props.onChange, selectedDate: props.value })))));
+exports.DatePickerInput.displayName = "UxfUiDatePickerInput";

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

@@ -30,6 +30,7 @@ const date_picker_decade_1 = require("./date-picker-decade");
 const date_picker_context_1 = require("@uxf/datepicker/contexts/date-picker-context");
 const date_picker_month_1 = require("./date-picker-month");
 const DatePicker = (props) => {
+    // eslint-disable-next-line react/destructuring-assignment
     const { goToDate, activeMonths } = (0, react_1.useContext)(date_picker_context_1.DatePickerContext);
     const [viewMode, setViewMode] = (0, react_1.useState)("month");
     const onYearSelect = (0, react_1.useCallback)(() => setViewMode("decade"), [setViewMode]);

package/dropdown/dropdown.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.Dropdown = void 0;
 const useAnchorProps_1 = require("@uxf/core/hooks/useAnchorProps");
 const cx_1 = require("@uxf/core/utils/cx");
-const forwardRef_1 = require("@uxf/core/utils/forwardRef");
-const react_1 = __importDefault(require("react"));
-const Item = (0, forwardRef_1.forwardRef)("UxfUiDropdownItem", (props, ref) => {
+const react_1 = __importStar(require("react"));
+const Item = (0, react_1.forwardRef)((props, ref) => {
     // eslint-disable-next-line react/destructuring-assignment
     const { children, className, ...restProps } = props;
     const anchorProps = (0, useAnchorProps_1.useAnchorProps)({
@@ -18,10 +37,12 @@ const Item = (0, forwardRef_1.forwardRef)("UxfUiDropdownItem", (props, ref) => {
     });
     return (react_1.default.createElement("a", { ref: ref, ...anchorProps }, children));
 });
-const Items = (0, forwardRef_1.forwardRef)("UxfUiDropdownItems", (props, ref) => {
+Item.displayName = "UxfUiDropdownItem";
+const Items = (0, react_1.forwardRef)((props, ref) => {
     return (react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-dropdown__items", props.className), ref: ref, role: props.role }, props.children));
 });
 exports.Dropdown = {
     Item,
     Items,
 };
+Items.displayName = "UxfUiDropdownItems";

package/dropzone/dropzone-input.js

@@ -30,7 +30,6 @@ const cx_1 = require("@uxf/core/utils/cx");
 const react_1 = __importStar(require("react"));
 const react_dropzone_1 = require("react-dropzone");
 const icon_1 = require("../icon");
-const forwardRef_1 = require("@uxf/core/utils/forwardRef");
 function fileToFileResponse(file) {
     return {
         id: -Math.round(Math.random() * 100000000),
@@ -63,7 +62,7 @@ function fileRejectedHandler(err, dropzoneFile, onValuesChange, values, onUpload
         onValuesChange(values.map((f) => (f.id === dropzoneFile.id ? { ...f, error: err } : f)));
     }
 }
-exports.DropzoneInput = (0, forwardRef_1.forwardRef)("UxfUiDropzoneInput", (props, ref) => {
+exports.DropzoneInput = (0, react_1.forwardRef)((props, ref) => {
     var _a;
     const refValue = (0, react_1.useRef)();
     refValue.current = props.value;
@@ -118,3 +117,4 @@ exports.DropzoneInput = (0, forwardRef_1.forwardRef)("UxfUiDropzoneInput", (prop
                 }) })),
         props.helperText && (react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-helper-text", props.isInvalid && classes_1.CLASSES.IS_INVALID) }, props.helperText))));
 });
+exports.DropzoneInput.displayName = "UxfUiDropzoneInput";

package/file-input/file-input.js

@@ -27,16 +27,15 @@ exports.FileInput = 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 context_1 = require("@uxf/ui/context");
-const form_control_1 = require("@uxf/ui/form-control");
+const form_component_1 = require("../form-component");
 const input_1 = require("@uxf/ui/input");
 const loader_1 = require("@uxf/ui/loader");
 const get_file_url_1 = require("@uxf/ui/utils/files/get-file-url");
 const react_1 = __importStar(require("react"));
 const _file_input_base_1 = require("../_file-input-base");
 // eslint-disable-next-line complexity
-exports.FileInput = (0, forwardRef_1.forwardRef)("UxfUiFileInput", (props, ref) => {
+exports.FileInput = (0, react_1.forwardRef)((props, ref) => {
     var _a, _b;
     const context = (0, react_1.useContext)(context_1.UiContext);
     const [isUploading, setIsUploading] = (0, react_1.useState)(false);
@@ -64,7 +63,7 @@ exports.FileInput = (0, forwardRef_1.forwardRef)("UxfUiFileInput", (props, ref)
             setIsUploading(false);
         }
     };
-    return (react_1.default.createElement(form_control_1.FormControl, { className: (0, cx_1.cx)(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), errorId: errorId, form: props.form, helperText: props.helperText, inputId: id, isRequired: props.isRequired, label: props.label },
+    return (react_1.default.createElement(form_component_1.FormComponent, { className: (0, cx_1.cx)(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), errorId: errorId, form: props.form, helperText: props.helperText, inputId: id, isRequired: props.isRequired, label: props.label },
         react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(_file_input_base_1._FileInputBase, { accept: props.accept, "aria-describedby": errorId, "aria-invalid": props.isInvalid, className: "uxf-file-input__input", form: props.form, id: id, isDisabled: props.isDisabled || isUploading, isInvalid: props.isInvalid, isReadOnly: props.isReadOnly, isRequired: props.isRequired, name: props.name, onBlur: input.onBlur, onChange: onChange, onFocus: input.onFocus, onUploadError: props.onUploadError, onUploadFile: props.onUploadFile, ref: ref, value: props.value }),
             react_1.default.createElement("label", { className: (0, cx_1.cx)("uxf-input", "uxf-file-input__label", input.focused && classes_1.CLASSES.IS_FOCUSED, (props.isDisabled || props.isReadOnly) && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, isUploading && classes_1.CLASSES.IS_LOADING, isUploading && "uxf-file-input__label--has-right-addon", `uxf-input--size-${(_a = props.size) !== null && _a !== void 0 ? _a : "default"}`, `uxf-input--variant-${(_b = props.variant) !== null && _b !== void 0 ? _b : "default"}`), htmlFor: id },
@@ -73,3 +72,4 @@ exports.FileInput = (0, forwardRef_1.forwardRef)("UxfUiFileInput", (props, ref)
                     (context === null || context === void 0 ? void 0 : context.domain) && props.value ? (react_1.default.createElement("a", { className: "uxf-file-input__label__wrapper__file-name-link", href: (0, get_file_url_1.getFileUrl)(context.domain, props.value), target: "_blank", rel: "noreferrer noopenner" }, fileName)) : (react_1.default.createElement("span", { className: "uxf-file-input__label__wrapper__file-name" }, fileName)),
                     props.value && !props.isDisabled && !props.isReadOnly && props.isClearable && (react_1.default.createElement(input_1.Input.RemoveButton, { onChange: props.onChange })))))));
 });
+exports.FileInput.displayName = "UxfUiFileInput";

package/{form-control/form-control.d.ts → form-component/form-component.d.ts}

@@ -1,5 +1,5 @@
 import React, { ReactElement, ReactNode } from "react";
-export interface FormControlProps {
+export interface FormComponentProps {
     children?: ReactElement;
     className?: string;
     errorId?: string;
@@ -10,4 +10,4 @@ export interface FormControlProps {
     isRequired?: boolean;
     label?: ReactNode;
 }
-export declare const FormControl: React.ForwardRefExoticComponent<FormControlProps & React.RefAttributes<HTMLDivElement>>;
+export declare const FormComponent: React.ForwardRefExoticComponent<FormComponentProps & React.RefAttributes<HTMLDivElement>>;

package/form-component/form-component.js

@@ -0,0 +1,41 @@
+"use strict";
+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.FormComponent = void 0;
+const classes_1 = require("@uxf/core/constants/classes");
+const cx_1 = require("@uxf/core/utils/cx");
+const react_1 = __importStar(require("react"));
+const label_1 = require("../label");
+exports.FormComponent = (0, react_1.forwardRef)((props, ref) => {
+    var _a;
+    const helperTextClassName = (0, cx_1.cx)("uxf-helper-text", props.errorId && classes_1.CLASSES.IS_INVALID);
+    return (react_1.default.createElement("div", { className: `uxf-form-component ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`, ref: ref },
+        react_1.default.createElement("div", { className: "uxf-form-component__label" },
+            react_1.default.createElement(label_1.Label, { isHidden: props.hiddenLabel, isRequired: props.isRequired, htmlFor: props.inputId, form: props.form }, props.label)),
+        react_1.default.createElement("div", { className: "uxf-form-component__input" },
+            props.children,
+            props.helperText && (react_1.default.createElement("div", { className: helperTextClassName, id: props.errorId }, props.helperText)))));
+});
+exports.FormComponent.displayName = "UxfUiFormComponent";

package/{form-control/form-control.spec.js → form-component/form-component.spec.js}

@@ -5,5 +5,5 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const snap_test_1 = require("../utils/snap-test");
-const form_control_stories_1 = require("./form-control.stories");
-(0, snap_test_1.snapTest)("render stories", react_1.default.createElement(form_control_stories_1.Default, null));
+const form_component_stories_1 = require("./form-component.stories");
+(0, snap_test_1.snapTest)("render stories", react_1.default.createElement(form_component_stories_1.Default, null));

package/{form-control/form-control.stories.d.ts → form-component/form-component.stories.d.ts}

@@ -1,7 +1,7 @@
 import React from "react";
 declare const _default: {
     title: string;
-    component: React.ForwardRefExoticComponent<import("./form-control").FormControlProps & React.RefAttributes<HTMLDivElement>>;
+    component: React.ForwardRefExoticComponent<import("./form-component").FormComponentProps & React.RefAttributes<HTMLDivElement>>;
     parameters: {
         actions: {
             argTypesRegex: string;

package/form-component/form-component.stories.js

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const react_1 = __importDefault(require("react"));
+const form_component_1 = require("./form-component");
+exports.default = {
+    title: "UI/FormComponent",
+    component: form_component_1.FormComponent,
+    parameters: { actions: { argTypesRegex: "^on.*" } },
+};
+function Default() {
+    return (react_1.default.createElement("div", { className: "space-y-4" },
+        react_1.default.createElement(form_component_1.FormComponent, { inputId: "default", helperText: "helper text", label: "Default" },
+            react_1.default.createElement("div", null, "Default")),
+        react_1.default.createElement(form_component_1.FormComponent, { inputId: "default", helperText: "helper text", label: "Default", isRequired: true },
+            react_1.default.createElement("div", null, "Is required")),
+        react_1.default.createElement(form_component_1.FormComponent, { inputId: "error", helperText: "helper text", label: "Default", errorId: "error--error", isRequired: true },
+            react_1.default.createElement("div", null, "Is invalid")),
+        react_1.default.createElement(form_component_1.FormComponent, { inputId: "error", helperText: "helper text", label: "Default", errorId: "error--error", hiddenLabel: true },
+            react_1.default.createElement("div", null, "hidden label"))));
+}
+exports.Default = Default;

package/form-component/index.d.ts

@@ -0,0 +1,2 @@
+export type { FormComponentProps } from "./form-component";
+export { FormComponent } from "./form-component";

package/form-component/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormComponent = void 0;
+var form_component_1 = require("./form-component");
+Object.defineProperty(exports, "FormComponent", { enumerable: true, get: function () { return form_component_1.FormComponent; } });

package/hooks/use-dropdown.d.ts

@@ -1,2 +1,35 @@
+/// <reference types="react" />
 import { Placement } from "@floating-ui/react";
-export declare function useDropdown(placement: Placement, matchWidth?: boolean): import("@floating-ui/react").UseFloatingReturn<import("@floating-ui/react").ReferenceType>;
+export declare function useDropdown(placement: Placement, matchWidth?: boolean): {
+    placement: Placement;
+    strategy: import("@floating-ui/react").Strategy;
+    middlewareData: import("@floating-ui/react").MiddlewareData;
+    x: number | null;
+    y: number | null;
+    update: () => void;
+    reference: (node: import("@floating-ui/react").ReferenceType | null) => void;
+    floating: (node: HTMLElement | null) => void;
+    positionReference: (node: import("@floating-ui/react").ReferenceType | null) => void;
+    context: {
+        x: number | null;
+        y: number | null;
+        placement: Placement;
+        strategy: import("@floating-ui/react").Strategy;
+        middlewareData: import("@floating-ui/react").MiddlewareData;
+        update: () => void;
+        reference: (node: import("@floating-ui/react").ReferenceType | null) => void;
+        floating: (node: HTMLElement | null) => void;
+        isPositioned: boolean;
+        open: boolean;
+        onOpenChange: (open: boolean) => void;
+        events: import("@floating-ui/react").FloatingEvents;
+        dataRef: import("react").MutableRefObject<import("@floating-ui/react").ContextData>;
+        nodeId: string | undefined;
+        floatingId: string;
+        refs: import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
+        elements: import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
+    };
+    refs: import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
+    elements: import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
+    isPositioned: boolean;
+};

package/icon/icon.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.Icon = void 0;
 const cx_1 = require("@uxf/core/utils/cx");
-const forwardRef_1 = require("@uxf/core/utils/forwardRef");
 const rem_1 = require("@uxf/styles/units/rem");
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const context_1 = require("../context");
-exports.Icon = (0, forwardRef_1.forwardRef)("UxfUiIcon", (props, ref) => {
+exports.Icon = (0, react_1.forwardRef)((props, ref) => {
     var _a, _b;
     const componentContext = (0, context_1.useComponentContext)("icon");
     const CustomComponent = props.Component;
@@ -36,3 +55,4 @@ exports.Icon = (0, forwardRef_1.forwardRef)("UxfUiIcon", (props, ref) => {
         react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512", width: props.size, height: props.size },
             react_1.default.createElement("path", { d: "M144 416c-17.67 0-32 14.33-32 32s14.33 32.01 32 32.01s32-14.34 32-32.01S161.7 416 144 416zM211.2 32H104C46.66 32 0 78.66 0 136v16C0 165.3 10.75 176 24 176S48 165.3 48 152v-16c0-30.88 25.12-56 56-56h107.2C244.7 80 272 107.3 272 140.8c0 22.66-12.44 43.27-32.5 53.81L167 232.8C137.1 248 120 277.9 120 310.6V328c0 13.25 10.75 24.01 24 24.01S168 341.3 168 328V310.6c0-14.89 8.188-28.47 21.38-35.41l72.47-38.14C297.7 218.2 320 181.3 320 140.8C320 80.81 271.2 32 211.2 32z" }))));
 });
+exports.Icon.displayName = "UxfUiIcon";

package/input/input.js

@@ -25,7 +25,6 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Input = void 0;
 const composeRefs_1 = require("@uxf/core/utils/composeRefs");
-const forwardRef_1 = require("@uxf/core/utils/forwardRef");
 const react_1 = __importStar(require("react"));
 const cx_1 = require("@uxf/core/utils/cx");
 const classes_1 = require("@uxf/core/constants/classes");
@@ -38,7 +37,7 @@ function getChildrenById(children, componentName) {
         .filter(react_1.isValidElement)
         .find((ch) => ch.type.displayName === componentName);
 }
-exports.Input = (0, forwardRef_1.forwardRef)("UxfUiInput", (props, ref) => {
+exports.Input = (0, react_1.forwardRef)((props, ref) => {
     var _a, _b;
     const inputRef = (0, react_1.useRef)(null);
     const { children, className, customInputElementDisplayName, inputFocus, isDisabled, isFocused, isInvalid, isReadOnly, variant, size, wrapperRef, tabIndex, ...restProps } = props;
@@ -63,3 +62,4 @@ exports.Input = (0, forwardRef_1.forwardRef)("UxfUiInput", (props, ref) => {
             rightElement),
         rightAddon));
 });
+exports.Input.displayName = "UxfUiInput";

package/label/label.js

@@ -1,16 +1,36 @@
 "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.Label = void 0;
 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_1 = __importDefault(require("react"));
-exports.Label = (0, forwardRef_1.forwardRef)("UxfUiLabel", (props, ref) => {
+const react_1 = __importStar(require("react"));
+exports.Label = (0, react_1.forwardRef)((props, ref) => {
     const className = (0, cx_1.cx)("uxf-label", props.isHidden && "uxf-label--hidden", props.isRequired && classes_1.CLASSES.IS_REQUIRED, props.className);
     return (
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions
     react_1.default.createElement("label", { className: className, form: props.form, htmlFor: props.htmlFor, id: props.id, onClick: props.onClick, ref: ref }, props.children));
 });
+exports.Label.displayName = "UxfUiLabel";

package/layout/layout.js

@@ -46,9 +46,9 @@ const Layout = (props) => {
                     react_1.default.createElement("div", { className: "fixed inset-0 bg-gray-600/75" })),
                 react_1.default.createElement("div", { className: "fixed inset-0 z-40 flex" },
                     react_1.default.createElement(react_2.Transition.Child, { as: react_1.Fragment, enter: "transition ease-in-out duration-300 transform", enterFrom: "-translate-x-full", enterTo: "translate-x-0", leave: "transition ease-in-out duration-300 transform", leaveFrom: "translate-x-0", leaveTo: "-translate-x-full" },
-                        react_1.default.createElement(react_2.Dialog.Panel, { className: "relative flex w-full max-w-xs flex-1 flex-col bg-white pt-5 pb-4" },
+                        react_1.default.createElement(react_2.Dialog.Panel, { className: "relative flex w-full max-w-xs flex-1 flex-col bg-white pb-4 pt-5" },
                             react_1.default.createElement(react_2.Transition.Child, { as: react_1.Fragment, enter: "ease-in-out duration-300", enterFrom: "opacity-0", enterTo: "opacity-100", leave: "ease-in-out duration-300", leaveFrom: "opacity-100", leaveTo: "opacity-0" },
-                                react_1.default.createElement("div", { className: "absolute top-0 right-0 -mr-12 pt-2" },
+                                react_1.default.createElement("div", { className: "absolute right-0 top-0 -mr-12 pt-2" },
                                     react_1.default.createElement("button", { type: "button", className: "ml-1 flex h-10 w-10 items-center justify-center rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white", onClick: () => setSidebarOpen(false) },
                                         react_1.default.createElement("span", { className: "sr-only" }, "Close sidebar"),
                                         react_1.default.createElement(icon_1.Icon, { name: "xmarkLarge", size: 24, className: "text-white" })))),

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