@uxf/ui 11.19.0 → 11.20.0

package/_input-with-popover/input-with-popover.js

@@ -26,8 +26,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports._InputWithPopover = void 0;
 const react_1 = require("@floating-ui/react");
 const react_2 = require("@headlessui/react");
+const use_input_focus_1 = require("@uxf/core-react/hooks/use-input-focus");
 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 react_3 = __importStar(require("react"));
@@ -47,7 +47,7 @@ exports._InputWithPopover = (0, react_3.forwardRef)((props, ref) => {
     const generatedId = (0, react_3.useId)();
     const id = (_a = props.id) !== null && _a !== void 0 ? _a : generatedId;
     const innerRef = (0, react_3.useRef)(null);
-    const input = (0, useInputFocus_1.useInputFocus)(innerRef, props.onBlur, props.onFocus);
+    const input = (0, use_input_focus_1.useInputFocus)(innerRef, props.onBlur, props.onFocus);
     const error = useErrorProps(props.error, id, props.isInvalid);
     const rootClassName = (0, cx_1.cx)("uxf-input-with-popover", ((_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);
     const floatingPopover = (0, react_1.useFloating)({

package/_select-base/_select-base.js

@@ -25,9 +25,9 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports._SelectBase = void 0;
 const react_1 = require("@floating-ui/react");
+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 classes_1 = require("@uxf/core/constants/classes");
-const useInputFocus_1 = require("@uxf/core/hooks/useInputFocus");
-const useOnUnmount_1 = require("@uxf/core/hooks/useOnUnmount");
 const composeRefs_1 = require("@uxf/core/utils/composeRefs");
 const cx_1 = require("@uxf/core/utils/cx");
 const use_dropdown_1 = require("@uxf/ui/hooks/use-dropdown");
@@ -59,7 +59,7 @@ const InputArrow = (props) => {
 const Options = (props) => {
     var _a, _b;
     const HUIComponent = props.HUIComponent;
-    (0, useOnUnmount_1.useOnUnmount)(() => {
+    (0, use_on_unmount_1.useOnUnmount)(() => {
         var _a;
         (_a = props.onUnmount) === null || _a === void 0 ? void 0 : _a.call(props);
     });
@@ -78,7 +78,7 @@ const _SelectBase = (props) => {
     const id = (_a = props.id) !== null && _a !== void 0 ? _a : generatedId;
     const innerRef = (0, react_2.useRef)(null);
     const errorId = props.isInvalid ? `${id}--error-message` : undefined;
-    const input = (0, useInputFocus_1.useInputFocus)(innerRef, props.onBlur, props.onFocus);
+    const input = (0, use_input_focus_1.useInputFocus)(innerRef, props.onBlur, props.onFocus);
     const dropdown = (0, use_dropdown_1.useDropdown)((_b = props.dropdownPlacement) !== null && _b !== void 0 ? _b : "bottom", (_c = props.dropdownMatchesInputWidth) !== null && _c !== void 0 ? _c : true, props.dropdownMaxHeight, props.dropdownStrategy);
     const stableRef = (0, react_2.useMemo)(() => (0, composeRefs_1.composeRefs)(innerRef, props.forwardRef, dropdown.refs.setReference), [dropdown.refs.setReference, props.forwardRef]);
     const HUIComponent = props.HUIComponent;

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

@@ -24,8 +24,8 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AvatarFileInput = void 0;
+const use_input_focus_1 = require("@uxf/core-react/hooks/use-input-focus");
 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 file_1 = require("@uxf/core/utils/file");
@@ -40,7 +40,7 @@ exports.AvatarFileInput = (0, react_1.forwardRef)((props, ref) => {
     const generatedId = (0, react_1.useId)();
     const id = props.id || generatedId;
     const innerRef = (0, react_1.useRef)(null);
-    const input = (0, useInputFocus_1.useInputFocus)(innerRef, props.onBlur, props.onFocus);
+    const input = (0, use_input_focus_1.useInputFocus)(innerRef, props.onBlur, props.onFocus);
     const errorId = props.isInvalid && props.id ? `${props.id}--errormessage` : undefined;
     const stateClassName = (0, cx_1.cx)(((_a = props.isFocused) !== null && _a !== void 0 ? _a : 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);
     const rootClassName = (0, cx_1.cx)(`uxf-avatar-file-input uxf-avatar-file-input--variant-${(_b = props.variant) !== null && _b !== void 0 ? _b : "default"}`, stateClassName, props.className);

package/button/button.d.ts

@@ -1,4 +1,4 @@
-import { UseAnchorProps } from "@uxf/core/hooks/useAnchorProps";
+import { UseAnchorProps } from "@uxf/core-react/hooks/use-anchor-props";
 import { ButtonColors, ButtonSizes, ButtonVariants } from "@uxf/ui/button/theme";
 import React, { AnchorHTMLAttributes } from "react";
 import { NextLink } from "./next-link";

package/button/button.js

@@ -24,14 +24,14 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Button = void 0;
-const useAnchorProps_1 = require("@uxf/core/hooks/useAnchorProps");
+const use_anchor_props_1 = require("@uxf/core-react/hooks/use-anchor-props");
 const cx_1 = require("@uxf/core/utils/cx");
 const react_1 = __importStar(require("react"));
 exports.Button = (0, react_1.forwardRef)((props, ref) => {
     // eslint-disable-next-line react/destructuring-assignment
     const { as = "a", color, isIconButton, isFullWidth, size, variant, className, ...restProps } = props;
     const Component = as;
-    const anchorProps = (0, useAnchorProps_1.useAnchorProps)({
+    const anchorProps = (0, use_anchor_props_1.useAnchorProps)({
         ...restProps,
         className: (0, cx_1.cx)("uxf-button", `uxf-button--color-${color !== null && color !== void 0 ? color : "default"}`, `uxf-button--size-${size !== null && size !== void 0 ? size : "default"}`, `uxf-button--variant-${variant !== null && variant !== void 0 ? variant : "default"}`, isIconButton && "uxf-button--icon-button", isFullWidth && "uxf-button--full-width", className),
     });

package/button-list/button-list.js

@@ -26,7 +26,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ButtonList = void 0;
 const react_1 = require("@floating-ui/react");
 const react_2 = require("@headlessui/react");
-const useAnchorProps_1 = require("@uxf/core/hooks/useAnchorProps");
+const use_anchor_props_1 = require("@uxf/core-react/hooks/use-anchor-props");
 const cx_1 = require("@uxf/core/utils/cx");
 const is_empty_1 = require("@uxf/core/utils/is-empty");
 const react_3 = __importStar(require("react"));
@@ -36,7 +36,7 @@ const icon_1 = require("../icon");
 const MenuButton = (0, react_3.forwardRef)((props, ref) => {
     // eslint-disable-next-line react/destructuring-assignment,@typescript-eslint/no-unused-vars
     const { variant, color, isIconButton, isFullWidth, size, icon, label, className, ...restProps } = props;
-    const anchorProps = (0, useAnchorProps_1.useAnchorProps)({
+    const anchorProps = (0, use_anchor_props_1.useAnchorProps)({
         ...restProps,
         className: (0, cx_1.cx)("uxf-button-list__menu-button", className),
     });

package/calendar/calendar-day-cell.js

@@ -24,8 +24,8 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CalendarDayCell = void 0;
+const use_on_mount_1 = require("@uxf/core-react/hooks/use-on-mount");
 const classes_1 = require("@uxf/core/constants/classes");
-const useOnMount_1 = require("@uxf/core/hooks/useOnMount");
 const composeRefs_1 = require("@uxf/core/utils/composeRefs");
 const cx_1 = require("@uxf/core/utils/cx");
 const use_day_1 = require("@uxf/datepicker/hooks/use-day");
@@ -50,7 +50,7 @@ exports.CalendarDayCell = (0, react_1.memo)((props) => {
         preventScroll: props.datePickerProps.preventScroll,
         unavailableDates: props.datePickerProps.unavailableDates,
     });
-    (0, useOnMount_1.useOnMount)(() => {
+    (0, use_on_mount_1.useOnMount)(() => {
         const node = innerRef.current;
         if (node && (isToday || isSelected)) {
             node.focus({ preventScroll: props.datePickerProps.preventScroll });

package/checkbox/checkbox.js

@@ -24,15 +24,15 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Checkbox = void 0;
+const use_clickable_props_1 = require("@uxf/core-react/hooks/use-clickable-props");
 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 = __importStar(require("react"));
 const icon_1 = require("../icon");
 exports.Checkbox = (0, react_1.forwardRef)((props, ref) => {
     var _a, _b, _c;
     const onChange = () => props.onChange(!props.value);
-    const clickableProps = (0, useClickableProps_1.useClickableProps)({
+    const clickableProps = (0, use_clickable_props_1.useClickableProps)({
         "aria-checked": props.value,
         "aria-disabled": props.isDisabled,
         "aria-invalid": props.isInvalid,

package/chip/chip.d.ts

@@ -1,4 +1,4 @@
-import { UseAnchorProps } from "@uxf/core/hooks/useAnchorProps";
+import { UseAnchorProps } from "@uxf/core-react/hooks/use-anchor-props";
 import { ChipColor, ChipSize, ChipVariant } from "@uxf/ui/chip/theme";
 import React, { AnchorHTMLAttributes, MouseEventHandler } from "react";
 export interface ChipProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "color" | "type">, UseAnchorProps {

package/chip/chip.js

@@ -24,7 +24,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Chip = void 0;
-const useAnchorProps_1 = require("@uxf/core/hooks/useAnchorProps");
+const use_anchor_props_1 = require("@uxf/core-react/hooks/use-anchor-props");
 const cx_1 = require("@uxf/core/utils/cx");
 const react_1 = __importStar(require("react"));
 const CloseButton = (props) => {
@@ -43,7 +43,7 @@ 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 anchorProps = (0, useAnchorProps_1.useAnchorProps)({
+    const anchorProps = (0, use_anchor_props_1.useAnchorProps)({
         className: (0, cx_1.cx)(chipClassName),
         tabIndex: suppressFocus ? -1 : tabIndex,
         ...restProps,

package/color-radio/color-radio.js

@@ -24,8 +24,8 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ColorRadio = void 0;
+const use_clickable_props_1 = require("@uxf/core-react/hooks/use-clickable-props");
 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 = __importStar(require("react"));
 const icon_1 = require("../icon");
@@ -44,7 +44,7 @@ exports.ColorRadio = (0, react_1.forwardRef)((props, ref) => {
     };
     const onChange = props.onChange;
     const onClick = onChange ? () => onChange(props.value) : undefined;
-    const clickableProps = (0, useClickableProps_1.useClickableProps)({
+    const clickableProps = (0, use_clickable_props_1.useClickableProps)({
         "aria-checked": props.checked,
         "aria-disabled": props.isDisabled,
         "aria-invalid": props.isInvalid,

package/css/flash-messages.css

@@ -18,7 +18,7 @@
     &__dismissable {
         display: flex;
         flex-direction: column-reverse;
-        overflow: hidden;
+        overflow: hidden scroll;
         padding-right: theme("spacing.3");
         pointer-events: auto;
 
@@ -39,6 +39,11 @@
         &:hover {
             padding-top: 0;
         }
+
+        &.is-collapsed {
+            padding-right: theme("spacing.5");
+            scrollbar-width: none;
+        }
     }
 
     &__permanent {
@@ -70,35 +75,41 @@
         margin-top: theme("spacing.4");
 
         .uxf-flash-messages__dismissable & {
-            margin-top: -2.75rem;
+            position: relative;
         }
     }
 
     .uxf-flash-messages__dismissable & {
         &:nth-last-child(n + 5) {
-            display: none;
+            opacity: 0;
+            pointer-events: none;
+            transform: translateY(calc(var(--flash-message-height) * 4));
+            visibility: hidden;
         }
 
         &:nth-last-child(4) {
             opacity: 0.6;
-            transform: scale(0.85);
+            transform: translateY(calc(var(--flash-message-height) * 3)) scale(0.85);
         }
 
         &:nth-last-child(3) {
             opacity: 0.7;
-            transform: scale(0.9);
+            transform: translateY(calc(var(--flash-message-height) * 2)) scale(0.9);
         }
 
         &:nth-last-child(2) {
             opacity: 0.8;
-            transform: scale(0.95);
+            transform: translateY(calc(var(--flash-message-height))) scale(0.95);
         }
     }
 
     .uxf-flash-messages__dismissable:hover & {
-        display: block;
+        --flash-message-height: auto !important;
+
         opacity: 1;
-        transform: scale(1);
+        pointer-events: auto;
+        transform: none;
+        visibility: visible;
 
         &:not(:first-of-type) {
             margin-top: theme("spacing.4");
@@ -117,6 +128,7 @@
     border-radius: theme("borderRadius.lg");
     color: var(--flash-message-color);
     font-size: 0.875rem;
+    height: var(--flash-message-height);
     line-height: 1.25rem;
     min-width: 15rem;
     padding: theme("spacing.4") theme("spacing.5");

package/dropdown/dropdown.d.ts

@@ -1,4 +1,4 @@
-import { UseAnchorProps } from "@uxf/core/hooks/useAnchorProps";
+import { UseAnchorProps } from "@uxf/core-react/hooks/use-anchor-props";
 import React, { AnchorHTMLAttributes, HTMLAttributes } from "react";
 export interface DropdownItemProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "type">, UseAnchorProps {
 }

package/dropdown/dropdown.js

@@ -24,13 +24,13 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Dropdown = void 0;
-const useAnchorProps_1 = require("@uxf/core/hooks/useAnchorProps");
+const use_anchor_props_1 = require("@uxf/core-react/hooks/use-anchor-props");
 const cx_1 = require("@uxf/core/utils/cx");
 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)({
+    const anchorProps = (0, use_anchor_props_1.useAnchorProps)({
         className: `uxf-dropdown__item ${className || ""}`,
         role: "menuitem",
         ...restProps,

package/file-input/file-input.js

@@ -24,8 +24,8 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FileInput = void 0;
+const use_input_focus_1 = require("@uxf/core-react/hooks/use-input-focus");
 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 context_1 = require("@uxf/ui/context");
@@ -43,7 +43,7 @@ exports.FileInput = (0, react_1.forwardRef)((props, ref) => {
     const generatedId = (0, react_1.useId)();
     const id = props.id || generatedId;
     const innerRef = (0, react_1.useRef)(null);
-    const input = (0, useInputFocus_1.useInputFocus)(innerRef, props.onBlur, props.onFocus);
+    const input = (0, use_input_focus_1.useInputFocus)(innerRef, props.onBlur, props.onFocus);
     const errorId = props.isInvalid && props.id ? `${props.id}--errormessage` : undefined;
     const fileName = props.value ? `${props.value.name}` : props.placeholder || "No file has been selected yet";
     const onUploadFile = async (file) => {

package/flash-messages/flash-message.d.ts

@@ -1,5 +1,5 @@
 import { FlashMessageVariants } from "@uxf/ui/flash-messages/theme";
-import { FC, MouseEventHandler, ReactNode } from "react";
+import React, { CSSProperties, MouseEventHandler, ReactNode } from "react";
 export type FlashMessageVariant = keyof FlashMessageVariants;
 export interface Notification {
     autoDismiss?: boolean;
@@ -12,5 +12,6 @@ export interface Notification {
 export interface FlashMessageProps {
     notification: Notification;
     onClose: MouseEventHandler<HTMLDivElement>;
+    style?: CSSProperties;
 }
-export declare const FlashMessage: FC<FlashMessageProps>;
+export declare const FlashMessage: React.ForwardRefExoticComponent<FlashMessageProps & React.RefAttributes<HTMLDivElement>>;

package/flash-messages/flash-message.js

@@ -24,24 +24,23 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FlashMessage = void 0;
-const useClickableProps_1 = require("@uxf/core/hooks/useClickableProps");
+const use_clickable_props_1 = require("@uxf/core-react/hooks/use-clickable-props");
 const react_1 = __importStar(require("react"));
-// eslint-disable-next-line react/destructuring-assignment
-const FlashMessage = ({ notification, onClose }) => {
+exports.FlashMessage = (0, react_1.forwardRef)((props, ref) => {
     (0, react_1.useEffect)(() => {
-        const { autoDismiss, dismissTimeout } = notification;
+        const { autoDismiss, dismissTimeout } = props.notification;
         let timer;
         if (autoDismiss) {
-            timer = window.setTimeout(onClose, dismissTimeout);
+            timer = window.setTimeout(props.onClose, dismissTimeout);
         }
         return () => clearTimeout(timer);
-    }, [onClose, notification]);
-    const clickableProps = (0, useClickableProps_1.useClickableProps)({
-        className: `uxf-flash-message uxf-flash-message--${notification.variant || "success"}`,
-        onClick: onClose,
+    }, [props.onClose, props.notification]);
+    const clickableProps = (0, use_clickable_props_1.useClickableProps)({
+        className: `uxf-flash-message uxf-flash-message--${props.notification.variant || "success"}`,
+        onClick: props.onClose,
         role: "listitem alert",
+        style: props.style,
     });
-    return react_1.default.createElement("div", { ...clickableProps }, notification.message);
-};
-exports.FlashMessage = FlashMessage;
+    return (react_1.default.createElement("div", { ...clickableProps, ref: ref }, props.notification.message));
+});
 exports.FlashMessage.displayName = "UxfUiFlashMessage";

package/flash-messages/flash-messages.js

@@ -25,6 +25,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FlashMessages = void 0;
 const react_1 = require("@headlessui/react");
+const useClickableProps_1 = require("@uxf/core/hooks/useClickableProps");
 const react_2 = __importStar(require("react"));
 const flash_message_1 = require("./flash-message");
 exports.FlashMessages = (0, react_2.forwardRef)((props, ref) => {
@@ -32,7 +33,15 @@ exports.FlashMessages = (0, react_2.forwardRef)((props, ref) => {
     const permanentNotificationsRef = (0, react_2.useRef)(null);
     const permanentNotifications = notifications.filter((notification) => !notification.autoDismiss);
     const dismissableNotifications = notifications.filter((notification) => !!notification.autoDismiss);
+    const [lastToastHeight, setLastToastHeight] = (0, react_2.useState)(0);
+    const lastToastRef = (0, react_2.useRef)(null);
+    const [isCollapsed, setIsCollapsed] = (0, react_2.useState)(true);
     const [showDivider, setShowDivider] = (0, react_2.useState)(false);
+    (0, react_2.useEffect)(() => {
+        if (lastToastRef.current) {
+            setLastToastHeight(lastToastRef.current.offsetHeight);
+        }
+    }, [lastToastHeight, dismissableNotifications]);
     (0, react_2.useEffect)(() => {
         const dividerHandler = () => {
             if (permanentNotificationsRef.current &&
@@ -73,10 +82,20 @@ exports.FlashMessages = (0, react_2.forwardRef)((props, ref) => {
         closeAll: innerRef.current.closeAll,
         open: innerRef.current.open,
     }), []);
+    const clickableProps = (0, useClickableProps_1.useClickableProps)({
+        className: `uxf-flash-messages__dismissable ${isCollapsed ? "is-collapsed" : ""}`,
+        onMouseEnter: () => setIsCollapsed(false),
+        onMouseLeave: () => setIsCollapsed(true),
+    });
     return notifications.length > 0 ? (react_2.default.createElement("div", { className: "uxf-flash-messages" },
-        dismissableNotifications.length > 0 && (react_2.default.createElement("div", { className: "uxf-flash-messages__dismissable" },
-            react_2.default.createElement("div", null, dismissableNotifications.map((notification) => {
-                return (react_2.default.createElement(react_1.Transition, { key: notification.id, appear: true, show: true, enterFrom: "uxf-flash-message-wrapper--enter-from", enterTo: "uxf-flash-message-wrapper--enter-to", className: "uxf-flash-message-wrapper" },
+        dismissableNotifications.length > 0 && (react_2.default.createElement("div", { ...clickableProps },
+            react_2.default.createElement("div", null, dismissableNotifications.map((notification, index) => {
+                const isLast = index === dismissableNotifications.length - 1;
+                return (react_2.default.createElement(react_1.Transition, { key: notification.id, appear: true, show: true, enterFrom: "uxf-flash-message-wrapper--enter-from", enterTo: "uxf-flash-message-wrapper--enter-to", className: "uxf-flash-message-wrapper", ref: isLast ? lastToastRef : null, style: isLast
+                        ? {}
+                        : {
+                            "--flash-message-height": `${lastToastHeight}px`,
+                        } },
                     react_2.default.createElement(flash_message_1.FlashMessage, { notification: notification, onClose: () => close(notification) })));
             })))),
         showDivider && react_2.default.createElement("hr", { className: "uxf-flash-messages__divider" }),

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

@@ -13,6 +13,12 @@ exports.default = {
     title: "UI/FlashMessages",
     component: flash_messages_1.FlashMessages,
 };
+// Random texts for flash message height testing
+const randomTexts = [
+    "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa ex fuga neque. Delectus error, esse eum exercitationem iste iure maiores mollitia officia quasi reiciendis saepe voluptates voluptatum? Commodi, nulla, quo!",
+    "ulpa ex fuga neque. Delectus error",
+    "consectetur adipisicing elit. Culpa ex fuga neque. Delectus error, esse eum exercit",
+];
 function Default() {
     return (react_1.default.createElement("div", { className: "inline-flex flex-col space-y-4" },
         react_1.default.createElement(button_1.Button, { onClick: () => (0, flash_messages_service_1.flashMessage)({
@@ -57,6 +63,14 @@ function Default() {
                 message: "Small",
                 autoDismiss: false,
                 variant: "info",
-            }) }, "Small flash message")));
+            }) }, "Small flash message"),
+        react_1.default.createElement(button_1.Button, { onClick: () => {
+                const randomNumber = Math.floor(Math.random() * randomTexts.length);
+                return (0, flash_messages_service_1.flashMessage)({
+                    message: (react_1.default.createElement("div", { className: "flex items-center space-x-4" },
+                        react_1.default.createElement(icon_1.Icon, { name: "check", size: 20 }),
+                        react_1.default.createElement("span", null, randomTexts[randomNumber]))),
+                });
+            } }, "Flash message, variant success, random text")));
 }
 exports.Default = Default;

package/image-gallery/use-image.js

@@ -1,12 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useImage = void 0;
-const useOnMount_1 = require("@uxf/core/hooks/useOnMount");
+const use_on_mount_1 = require("@uxf/core-react/hooks/use-on-mount");
 const react_1 = require("react");
 const context_1 = require("./context");
 function useImage(props) {
     const { registerImage, unregisterImage, openGallery } = (0, context_1.useImageGalleryContext)();
-    (0, useOnMount_1.useOnMount)(() => {
+    (0, use_on_mount_1.useOnMount)(() => {
         registerImage(props);
         return () => {
             unregisterImage(props);

package/input/input.d.ts

@@ -1,4 +1,4 @@
-import { useInputFocus } from "@uxf/core/hooks/useInputFocus";
+import { useInputFocus } from "@uxf/core-react/hooks/use-input-focus";
 import { InputGroupSizes, InputGroupVariants } from "@uxf/ui/input/theme";
 import React, { CSSProperties, ReactNode, Ref } from "react";
 export interface InputProps {

package/input/input.js

@@ -24,8 +24,8 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Input = void 0;
+const use_input_focus_1 = require("@uxf/core-react/hooks/use-input-focus");
 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 react_1 = __importStar(require("react"));
@@ -46,7 +46,7 @@ exports.Input = (0, react_1.forwardRef)((props, ref) => {
     const rightAddon = getChildrenById(children, "UxfUiInputRightAddon");
     const leftElement = getChildrenById(children, "UxfUiInputLeftElement");
     const rightElement = getChildrenById(children, "UxfUiInputRightElement");
-    const input = (0, useInputFocus_1.useInputFocus)(inputRef, (_a = inputFocus === null || inputFocus === void 0 ? void 0 : inputFocus.onBlur) !== null && _a !== void 0 ? _a : mainInput === null || mainInput === void 0 ? void 0 : mainInput.props.onBlur, (_b = inputFocus === null || inputFocus === void 0 ? void 0 : inputFocus.onFocus) !== null && _b !== void 0 ? _b : mainInput === null || mainInput === void 0 ? void 0 : mainInput.props.onFocus);
+    const input = (0, use_input_focus_1.useInputFocus)(inputRef, (_a = inputFocus === null || inputFocus === void 0 ? void 0 : inputFocus.onBlur) !== null && _a !== void 0 ? _a : mainInput === null || mainInput === void 0 ? void 0 : mainInput.props.onBlur, (_b = inputFocus === null || inputFocus === void 0 ? void 0 : inputFocus.onFocus) !== null && _b !== void 0 ? _b : mainInput === null || mainInput === void 0 ? void 0 : mainInput.props.onFocus);
     const inputGroupClasses = (0, cx_1.cx)("uxf-input", leftAddon && "uxf-input--has-left-addon", leftElement && "uxf-input--has-left-element", rightElement && "uxf-input--has-right-element", rightAddon && "uxf-input--has-right-addon", isApplicable(isFocused, mainInput === null || mainInput === void 0 ? void 0 : mainInput.props.isFocused, inputFocus === null || inputFocus === void 0 ? void 0 : inputFocus.focused, input.focused) && classes_1.CLASSES.IS_FOCUSED, isApplicable(isInvalid, mainInput === null || mainInput === void 0 ? void 0 : mainInput.props.isInvalid) && classes_1.CLASSES.IS_INVALID, isApplicable(isDisabled, mainInput === null || mainInput === void 0 ? void 0 : mainInput.props.isDisabled) && classes_1.CLASSES.IS_DISABLED, isApplicable(isReadOnly, mainInput === null || mainInput === void 0 ? void 0 : mainInput.props.isReadOnly) && classes_1.CLASSES.IS_READONLY, `uxf-input--size-${size !== null && size !== void 0 ? size : "default"}`, `uxf-input--variant-${variant !== null && variant !== void 0 ? variant : "default"}`, className);
     return (react_1.default.createElement("div", { className: inputGroupClasses, ref: wrapperRef, style: props.style, tabIndex: tabIndex },
         leftAddon,

package/list-item/list-item.d.ts

@@ -1,4 +1,4 @@
-import { UseAnchorProps } from "@uxf/core/hooks/useAnchorProps";
+import { UseAnchorProps } from "@uxf/core-react/hooks/use-anchor-props";
 import React, { AnchorHTMLAttributes, ReactNode } from "react";
 import { IconName } from "../icon/types";
 export interface ListItemProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "type">, UseAnchorProps {

package/list-item/list-item.js

@@ -24,14 +24,14 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ListItem = void 0;
-const useAnchorProps_1 = require("@uxf/core/hooks/useAnchorProps");
+const use_anchor_props_1 = require("@uxf/core-react/hooks/use-anchor-props");
 const cx_1 = require("@uxf/core/utils/cx");
 const react_1 = __importStar(require("react"));
 const icon_1 = require("../icon");
 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)({
+    const anchorProps = (0, use_anchor_props_1.useAnchorProps)({
         ...restProps,
         className: (0, cx_1.cx)("uxf-list-item", className),
     });

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

@@ -26,8 +26,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports._MultiComboboxBase = void 0;
 const react_1 = require("@floating-ui/react");
 const react_2 = require("@headlessui/react");
+const use_input_focus_1 = require("@uxf/core-react/hooks/use-input-focus");
 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 last_1 = require("@uxf/core/utils/last");
@@ -72,7 +72,7 @@ exports._MultiComboboxBase = (0, react_3.forwardRef)((props, ref) => {
     const iconName = (_c = props.iconName) !== null && _c !== void 0 ? _c : "caretDown";
     const dropdown = (0, use_dropdown_1.useDropdown)((_d = props.dropdownPlacement) !== null && _d !== void 0 ? _d : "bottom", true, props.dropdownMaxHeight, props.dropdownStrategy);
     const inputRef = (0, react_3.useRef)(null);
-    const input = (0, useInputFocus_1.useInputFocus)(inputRef, props.onBlur, props.onFocus);
+    const input = (0, use_input_focus_1.useInputFocus)(inputRef, props.onBlur, props.onFocus);
     const stableRef = (0, react_3.useMemo)(() => (0, composeRefs_1.composeRefs)(inputRef, ref, dropdown.refs.setReference), [ref, dropdown.refs.setReference]);
     const onRemove = (valueId) => { var _a, _b; return props.onChange((_b = (_a = props.value) === null || _a === void 0 ? void 0 : _a.filter((v) => v.id !== valueId)) !== null && _b !== void 0 ? _b : []); };
     const handleRemove = (valueId) => (e) => {

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

@@ -26,8 +26,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports._MultiSelectBase = void 0;
 const react_1 = require("@floating-ui/react");
 const react_2 = require("@headlessui/react");
+const use_input_focus_1 = require("@uxf/core-react/hooks/use-input-focus");
 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 icon_1 = require("@uxf/ui//icon");
@@ -38,7 +38,7 @@ const react_3 = __importStar(require("react"));
 exports._MultiSelectBase = (0, react_3.forwardRef)((props, ref) => {
     var _a, _b, _c;
     const innerRef = (0, react_3.useRef)(null);
-    const input = (0, useInputFocus_1.useInputFocus)(innerRef, props.onBlur, props.onFocus);
+    const input = (0, use_input_focus_1.useInputFocus)(innerRef, props.onBlur, props.onFocus);
     const dropdown = (0, use_dropdown_1.useDropdown)((_a = props.dropdownPlacement) !== null && _a !== void 0 ? _a : "bottom", true, props.dropdownMaxHeight, props.dropdownStrategy);
     const stableRef = (0, react_3.useMemo)(() => (0, composeRefs_1.composeRefs)(innerRef, ref, dropdown.refs.setReference), [ref, dropdown.refs.setReference]);
     const iconName = (_b = props.iconName) !== null && _b !== void 0 ? _b : "caretDown";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/ui",
-  "version": "11.19.0",
+  "version": "11.20.0",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -17,9 +17,10 @@
   "dependencies": {
     "@floating-ui/react": "0.26.9",
     "@headlessui/react": "1.7.14",
-    "@uxf/core": "11.19.0",
+    "@uxf/core": "11.20.0",
+    "@uxf/core-react": "11.20.0",
     "@uxf/datepicker": "11.11.3",
-    "@uxf/styles": "11.19.0",
+    "@uxf/styles": "11.20.0",
     "color2k": "2.0.3",
     "dayjs": "1.11.10",
     "jump.js": "1.0.2",

package/pagination/pagination.js

@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Pagination = void 0;
-const usePagination_1 = require("@uxf/core/hooks/usePagination");
+const use_pagination_1 = require("@uxf/core-react/hooks/use-pagination");
 const cx_1 = require("@uxf/core/utils/cx");
 const react_1 = __importDefault(require("react"));
 const icon_1 = require("../icon");
@@ -13,7 +13,7 @@ const Pagination = (props) => {
     const isCurrentPageFirst = props.page === 1;
     const isCurrentPageLast = props.page === props.count;
     const className = (0, cx_1.cx)("uxf-pagination", `uxf-pagination--size-${(_a = props.size) !== null && _a !== void 0 ? _a : "default"}`, props.className);
-    const pagination = (0, usePagination_1.usePagination)({
+    const pagination = (0, use_pagination_1.usePagination)({
         count: props.count,
         page: props.page,
         showFirstButton: true,

package/radio/radio.js

@@ -24,15 +24,15 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Radio = void 0;
+const use_clickable_props_1 = require("@uxf/core-react/hooks/use-clickable-props");
 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 = __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;
-    const clickableProps = (0, useClickableProps_1.useClickableProps)({
+    const clickableProps = (0, use_clickable_props_1.useClickableProps)({
         "aria-checked": props.checked,
         "aria-disabled": props.isDisabled,
         "aria-invalid": props.isInvalid,

package/raster-image/img-sources.d.ts

@@ -0,0 +1,17 @@
+import type { Dimension, GetImgSrcSetOptions, Quality } from "@uxf/core/utils/image";
+import type { ImageSource } from "@uxf/core/utils/resizer";
+import React from "react";
+export type ImageSourcesOptions = Omit<GetImgSrcSetOptions, "quality" | "toFormat"> & {
+    isAvifDisabled?: boolean;
+    isWebPDisabled?: boolean;
+};
+export interface ImageSourcesProps {
+    breakpointIndex?: number;
+    breakpoints?: string[];
+    height: Dimension;
+    options?: ImageSourcesOptions;
+    quality?: Quality;
+    src: ImageSource;
+    width: Dimension;
+}
+export declare function ImgSources(props: ImageSourcesProps): React.JSX.Element | null;

package/raster-image/img-sources.js

@@ -0,0 +1,45 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImgSources = void 0;
+const hide_1 = require("@uxf/core-react/components/hide");
+const image_1 = require("@uxf/core/utils/image");
+const react_1 = __importDefault(require("react"));
+function ImgSources(props) {
+    var _a, _b, _c, _d, _e;
+    if (!props.src) {
+        return null;
+    }
+    const imageResponse = (0, image_1.toImageResponse)(props.src);
+    if (imageResponse && !imageResponse.uuid) {
+        return null;
+    }
+    const staticImageData = (0, image_1.toStaticImageData)(props.src);
+    if (staticImageData && !staticImageData.src) {
+        return null;
+    }
+    let media;
+    if (props.breakpoints && props.breakpointIndex) {
+        media = `(min-width: ${props.breakpoints[props.breakpointIndex]})`;
+    }
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(hide_1.Hide, { when: Boolean((_a = props.options) === null || _a === void 0 ? void 0 : _a.isAvifDisabled) },
+            react_1.default.createElement("source", { media: media, srcSet: (0, image_1.getImgSrcSet)(props.src, props.width, props.height, {
+                    ...((_b = props.options) !== null && _b !== void 0 ? _b : {}),
+                    quality: (0, image_1.getImgQuality)(props.quality, "avif"),
+                    toFormat: "avif",
+                }), type: "image/avif" })),
+        react_1.default.createElement(hide_1.Hide, { when: Boolean((_c = props.options) === null || _c === void 0 ? void 0 : _c.isWebPDisabled) },
+            react_1.default.createElement("source", { media: media, srcSet: (0, image_1.getImgSrcSet)(props.src, props.width, props.height, {
+                    ...((_d = props.options) !== null && _d !== void 0 ? _d : {}),
+                    quality: (0, image_1.getImgQuality)(props.quality, "webp"),
+                    toFormat: "webp",
+                }), type: "image/webp" })),
+        react_1.default.createElement("source", { media: media, srcSet: (0, image_1.getImgSrcSet)(props.src, props.width, props.height, {
+                ...((_e = props.options) !== null && _e !== void 0 ? _e : {}),
+                quality: (0, image_1.getImgQuality)(props.quality, "original"),
+            }) })));
+}
+exports.ImgSources = ImgSources;

package/raster-image/raster-image.d.ts

@@ -1,6 +1,7 @@
-import { ImageSourcesOptions, Quality } from "@uxf/core/utils/image";
+import { Quality } from "@uxf/core/utils/image";
 import { ImageSource } from "@uxf/core/utils/resizer";
 import { FC, ImgHTMLAttributes, ReactNode } from "react";
+import type { ImageSourcesOptions } from "./img-sources";
 type ImgProps = ImgHTMLAttributes<HTMLImageElement>;
 export type RasterImageProps = {
     alt: string;

package/raster-image/raster-image.js

@@ -9,6 +9,7 @@ const image_1 = require("@uxf/core/utils/image");
 const resizer_1 = require("@uxf/core/utils/resizer");
 const react_1 = __importDefault(require("react"));
 const context_1 = require("../context");
+const img_sources_1 = require("./img-sources");
 const RasterImage = (props) => {
     var _a, _b, _c, _d, _e, _f, _g, _h;
     const componentContext = (0, context_1.useComponentContext)("rasterImage");
@@ -27,11 +28,11 @@ const RasterImage = (props) => {
             react_1.default.createElement("img", { alt: props.alt, className: imgClassName, height: props.height, loading: props.loading, src: svgUrl, width: props.width })));
     }
     const breakpoints = ["0em", ...Object.values((_d = props.breakpoints) !== null && _d !== void 0 ? _d : componentContext.breakpoints)];
-    return (react_1.default.createElement("picture", { className: className }, (_f = (_e = props.widths) === null || _e === void 0 ? void 0 : _e.map((w, i) => i < breakpoints.length && (react_1.default.createElement(image_1.ImgSources, { breakpointIndex: i, breakpoints: breakpoints, height: props.heights && props.heights[i]
+    return (react_1.default.createElement("picture", { className: className }, (_f = (_e = props.widths) === null || _e === void 0 ? void 0 : _e.map((w, i) => i < breakpoints.length && (react_1.default.createElement(img_sources_1.ImgSources, { breakpointIndex: i, breakpoints: breakpoints, height: props.heights && props.heights[i]
             ? props.heights[i]
             : props.width && props.height
                 ? Math.ceil((props.height / props.width) * w)
-                : "auto", key: `${w}-${i}`, options: props.options, quality: props.quality, src: props.src, width: w }))).reverse()) !== null && _f !== void 0 ? _f : (react_1.default.createElement(image_1.ImgSources, { height: (_g = props.height) !== null && _g !== void 0 ? _g : "auto", options: props.options, quality: props.quality, src: props.src, width: (_h = props.width) !== null && _h !== void 0 ? _h : "auto" })),
+                : "auto", key: `${w}-${i}`, options: props.options, quality: props.quality, src: props.src, width: w }))).reverse()) !== null && _f !== void 0 ? _f : (react_1.default.createElement(img_sources_1.ImgSources, { height: (_g = props.height) !== null && _g !== void 0 ? _g : "auto", options: props.options, quality: props.quality, src: props.src, width: (_h = props.width) !== null && _h !== void 0 ? _h : "auto" })),
         react_1.default.createElement("img", { alt: props.alt, className: imgClassName, height: (0, image_1.getImgElementHeight)(props.src, props.width, props.height), loading: props.loading, src: resizerSrc, width: (0, image_1.getImgElementWidth)(props.src, props.width, props.height) })));
 };
 exports.RasterImage = RasterImage;

package/tabs/tabs.js

@@ -25,8 +25,8 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tabs = void 0;
 const react_1 = require("@headlessui/react");
+const use_mouse_drag_to_scroll_1 = require("@uxf/core-react/hooks/use-mouse-drag-to-scroll");
 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 react_2 = __importStar(require("react"));
 const Panel = (props) => (react_2.default.createElement("div", { className: props.className, style: props.style }, props.children));
@@ -35,7 +35,7 @@ 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);
-    const dragStyle = (0, useMouseDragToScroll_1.useMouseDragToScroll)(containerRef);
+    const dragStyle = (0, use_mouse_drag_to_scroll_1.useMouseDragToScroll)(containerRef);
     const [hasOverflow, setHasOverflow] = (0, react_2.useState)();
     (0, react_2.useEffect)(() => {
         const node = containerRef.current;

package/text-input/text-input.js

@@ -24,8 +24,8 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextInput = void 0;
+const use_input_focus_1 = require("@uxf/core-react/hooks/use-input-focus");
 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 input_1 = require("@uxf/ui/input");
@@ -34,7 +34,7 @@ const form_component_1 = require("../form-component");
 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);
+    const input = (0, use_input_focus_1.useInputFocus)(innerRef, props.onBlur, props.onFocus);
     const generatedId = (0, react_1.useId)();
     const id = (_a = props.id) !== null && _a !== void 0 ? _a : generatedId;
     const errorId = props.isInvalid ? `${id}--error-message` : undefined;

package/text-link/text-link.d.ts

@@ -1,4 +1,4 @@
-import { UseAnchorProps } from "@uxf/core/hooks/useAnchorProps";
+import { UseAnchorProps } from "@uxf/core-react/hooks/use-anchor-props";
 import { TextLinkVariants } from "@uxf/ui/text-link/theme";
 import React, { AnchorHTMLAttributes } from "react";
 export type TextLinkVariant = keyof TextLinkVariants;

package/text-link/text-link.js

@@ -24,13 +24,13 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextLink = void 0;
-const useAnchorProps_1 = require("@uxf/core/hooks/useAnchorProps");
+const use_anchor_props_1 = require("@uxf/core-react/hooks/use-anchor-props");
 const cx_1 = require("@uxf/core/utils/cx");
 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)({
+    const anchorProps = (0, use_anchor_props_1.useAnchorProps)({
         ...restProps,
         className: (0, cx_1.cx)("uxf-text-link", `uxf-text-link--variant-${variant !== null && variant !== void 0 ? variant : "default"}`, className),
     });

package/textarea/textarea.js

@@ -24,9 +24,9 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Textarea = void 0;
+const use_input_focus_1 = require("@uxf/core-react/hooks/use-input-focus");
+const use_latest_1 = require("@uxf/core-react/hooks/use-latest");
 const classes_1 = require("@uxf/core/constants/classes");
-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 react_1 = __importStar(require("react"));
@@ -45,12 +45,12 @@ const EVENTS = ["input", "cut", "paste", "drop"];
 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);
+    const input = (0, use_input_focus_1.useInputFocus)(innerRef, props.onBlur, props.onFocus);
     const generatedId = (0, react_1.useId)();
     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-textarea", ((_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);
-    const latestRows = (0, useLatest_1.useLatest)(props.rows);
+    const latestRows = (0, use_latest_1.useLatest)(props.rows);
     (0, react_1.useEffect)(() => {
         const node = innerRef.current;
         if (!node || props.disableAutoHeight) {