armtek-uikit-react 1.0.268 → 1.0.270

package/lib/esm/ui/Form/TextField/TextField.js

@@ -1,11 +1,17 @@
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
-import { forwardRef, useState, useRef, useImperativeHandle } from "react";
+import { forwardRef, useState, useRef, useImperativeHandle, useEffect, useLayoutEffect } from "react";
 import clsx from "clsx";
 import HelperText from "../../HelperText/HelperText.js";
 import Adornment, { AdornmentContainer } from "../../Adornment/Adornment.js";
 import "../../Icon/Icon.js";
 import { Mi } from "../../Icon/Mi.js";
+import "../../Icon/Mis.js";
 import Tooltip from "../../Tooltip/Tooltip.js";
+const LABEL_TRANSITION_RESTORE_TIMEOUT = 100;
+const hasInputValue = (value) => {
+  if (value === void 0 || value === null) return false;
+  return String(value).length > 0;
+};
 const TextField = forwardRef((props, ref) => {
   var _a;
   let {
@@ -16,6 +22,7 @@ const TextField = forwardRef((props, ref) => {
     helperText,
     size = "large",
     variant = "solid",
+    startAdornment,
     endAdornment,
     className,
     classes,
@@ -24,12 +31,56 @@ const TextField = forwardRef((props, ref) => {
     WrapperProps,
     ...inputProps
   } = props;
-  let [focused, setFocused] = useState(!!props.defaultValue);
+  let [focused, setFocused] = useState(hasInputValue(props.defaultValue) || hasInputValue(props.value));
+  let [disableLabelTransition, setDisableLabelTransition] = useState(false);
+  const restoreLabelTransitionTimeoutRef = useRef(null);
   const inputRef = useRef(null);
+  const temporarilyDisableLabelTransition = () => {
+    setDisableLabelTransition(true);
+    if (restoreLabelTransitionTimeoutRef.current !== null) window.clearTimeout(restoreLabelTransitionTimeoutRef.current);
+    restoreLabelTransitionTimeoutRef.current = window.setTimeout(() => {
+      setDisableLabelTransition(false);
+      restoreLabelTransitionTimeoutRef.current = null;
+    }, LABEL_TRANSITION_RESTORE_TIMEOUT);
+  };
   const currentScrollHeight = (_a = inputRef.current) == null ? void 0 : _a.scrollHeight;
   useImperativeHandle(ref, () => {
     return inputRef.current;
   }, [currentScrollHeight]);
+  useEffect(() => {
+    return () => {
+      if (restoreLabelTransitionTimeoutRef.current !== null) window.clearTimeout(restoreLabelTransitionTimeoutRef.current);
+    };
+  }, []);
+  useLayoutEffect(() => {
+    var _a2;
+    const inputElement = inputRef.current;
+    if (!inputElement) return;
+    const prototype = inputElement instanceof HTMLTextAreaElement ? HTMLTextAreaElement.prototype : HTMLInputElement.prototype;
+    const valueDescriptor = Object.getOwnPropertyDescriptor(prototype, "value");
+    const syncFocusedState = () => {
+      setFocused(hasInputValue(inputElement.value));
+    };
+    syncFocusedState();
+    if (!(valueDescriptor == null ? void 0 : valueDescriptor.get) || !(valueDescriptor == null ? void 0 : valueDescriptor.set)) return;
+    Object.defineProperty(inputElement, "value", {
+      configurable: true,
+      enumerable: (_a2 = valueDescriptor.enumerable) != null ? _a2 : true,
+      get() {
+        var _a3;
+        return (_a3 = valueDescriptor.get) == null ? void 0 : _a3.call(this);
+      },
+      set(nextValue) {
+        var _a3;
+        (_a3 = valueDescriptor.set) == null ? void 0 : _a3.call(this, nextValue);
+        temporarilyDisableLabelTransition();
+        syncFocusedState();
+      }
+    });
+    return () => {
+      Reflect.deleteProperty(inputElement, "value");
+    };
+  }, [multiline]);
   const handleFocus = (e) => {
     setFocused(true);
     if (inputProps.onFocus) inputProps.onFocus(e);
@@ -38,6 +89,7 @@ const TextField = forwardRef((props, ref) => {
     setFocused(false);
     if (inputProps.onBlur) inputProps.onBlur(e);
   };
+  let startContent = /* @__PURE__ */ jsx(AdornmentContainer, { className: "arm-textfield__adornment arm-textfield__adornment_start", children: startAdornment });
   let endContent = /* @__PURE__ */ jsxs(AdornmentContainer, { className: "arm-textfield__adornment", children: [
     endAdornment,
     error && /* @__PURE__ */ jsx(Tooltip, { text: errorTooltip, disabled: !errorTooltip, placement: "top", children: /* @__PURE__ */ jsx(Adornment, { className: "text-error", children: /* @__PURE__ */ jsx(Mi, { icon: "error_outline" }) }) }),
@@ -51,7 +103,8 @@ const TextField = forwardRef((props, ref) => {
       var _a2;
       return editable ? (_a2 = inputRef.current) == null ? void 0 : _a2.focus() : null;
     }, error, success, className: classes == null ? void 0 : classes.root, children: [
-      /* @__PURE__ */ jsx(TextFieldInput, { WrapperProps, wrapperClass: classes == null ? void 0 : classes.wrapper, className: classes == null ? void 0 : classes.input, Component, ref: inputRef, size, variant, label, focused: realFocused, error, multiline, ...inputProps, onFocus: handleFocus, onBlur: handleBlur }),
+      startAdornment && startContent,
+      /* @__PURE__ */ jsx(TextFieldInput, { WrapperProps, wrapperClass: classes == null ? void 0 : classes.wrapper, className: classes == null ? void 0 : classes.input, Component, ref: inputRef, size, variant, label, focused: realFocused, disableLabelTransition, error, multiline, ...inputProps, onFocus: handleFocus, onBlur: handleBlur }),
       endContentExists && endContent
     ] }),
     helperText && /* @__PURE__ */ jsx(HelperText, { className: "arm-textfield__helperText", error, success, children: helperText })
@@ -83,14 +136,58 @@ const TextFieldInput = forwardRef((props, ref) => {
     size,
     variant,
     multiline,
+    rows,
+    minRows,
+    maxRows,
     error,
     focused,
     label,
     wrapperClass,
     WrapperProps,
+    disableLabelTransition,
     className,
+    onInput,
     ...inputProps
   } = props;
+  const inputElementRef = useRef(null);
+  const setInputRef = (node) => {
+    inputElementRef.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref) ref.current = node;
+  };
+  const getRowsCount = (rows2) => {
+    if (typeof rows2 !== "number" || !Number.isFinite(rows2)) return void 0;
+    return Math.max(1, Math.floor(rows2));
+  };
+  const getHeightByRows = (rows2, textarea) => {
+    const style = window.getComputedStyle(textarea);
+    const parsedLineHeight = parseFloat(style.lineHeight);
+    const lineHeight = Number.isFinite(parsedLineHeight) ? parsedLineHeight : 20;
+    const verticalPadding = (parseFloat(style.paddingTop) || 0) + (parseFloat(style.paddingBottom) || 0);
+    const verticalBorders = (parseFloat(style.borderTopWidth) || 0) + (parseFloat(style.borderBottomWidth) || 0);
+    return lineHeight * rows2 + verticalPadding + verticalBorders;
+  };
+  const resizeTextarea = () => {
+    if (!multiline || !(inputElementRef.current instanceof HTMLTextAreaElement)) return;
+    const textarea = inputElementRef.current;
+    const minRowsValue = getRowsCount(minRows) || 1;
+    const maxRowsValue = getRowsCount(maxRows);
+    const resolvedMaxRows = maxRowsValue !== void 0 ? Math.max(minRowsValue, maxRowsValue) : void 0;
+    const minHeight = getHeightByRows(minRowsValue, textarea);
+    const maxHeight = resolvedMaxRows !== void 0 ? getHeightByRows(resolvedMaxRows, textarea) : void 0;
+    textarea.style.height = "auto";
+    const hasValue = textarea.value.length > 0;
+    let nextHeight = hasValue ? Math.max(textarea.scrollHeight, minHeight) : minHeight;
+    if (maxHeight !== void 0) nextHeight = Math.min(nextHeight, maxHeight);
+    textarea.style.height = nextHeight + "px";
+  };
+  useEffect(() => {
+    resizeTextarea();
+  }, [multiline, minRows, maxRows, inputProps.value, inputProps.defaultValue, size]);
+  const handleInput = (event) => {
+    if (multiline) resizeTextarea();
+    if (onInput) onInput(event);
+  };
   const handleWheel = (e) => {
     if (inputProps.type === "number" && e.target instanceof HTMLElement) e.target.blur();
     else if (props.onWheel) props.onWheel(e);
@@ -99,14 +196,15 @@ const TextFieldInput = forwardRef((props, ref) => {
     "arm-textfield__wrapper_label": !!label,
     "arm-textfield__wrapper_outlined": variant === "outlined"
   }), children: [
-    /* @__PURE__ */ jsx(Component, { ref, "data-testid": "textfield_input", ...inputProps, onWheel: handleWheel, className: clsx("arm-textfield__input", ["arm-textfield__input_size_" + size], ["arm-textfield__input_" + variant], {
+    /* @__PURE__ */ jsx(Component, { ref: setInputRef, "data-testid": "textfield_input", ...inputProps, rows: multiline ? rows : void 0, onInput: handleInput, onWheel: handleWheel, className: clsx("arm-textfield__input", ["arm-textfield__input_size_" + size], ["arm-textfield__input_" + variant], {
       "arm-textfield__input_label": !!label,
       "arm-textfield_focused": focused,
       "arm-textfield_error": !!error,
       "arm-textarea": multiline
     }, className) }),
     label && /* @__PURE__ */ jsx("span", { className: clsx("arm-textfield__label", {
-      "arm-textfield__label_focused": focused || !!props.value || typeof ((_a = ref.current) == null ? void 0 : _a.value) === "string" && !!((_b = ref.current) == null ? void 0 : _b.value),
+      "arm-textfield__label_focused": focused || !!props.value || typeof ((_a = inputElementRef.current) == null ? void 0 : _a.value) === "string" && !!((_b = inputElementRef.current) == null ? void 0 : _b.value),
+      "arm-textfield__label_noTransition": disableLabelTransition,
       "arm-textfield__label_small": size === "small",
       "arm-textfield__label_error": error
     }), children: label })

package/lib/esm/ui/Form/TimeField/TimeField.d.ts

@@ -5,14 +5,15 @@ declare const TimeField: import("react").ForwardRefExoticComponent<{
     value?: Date | string | null;
     showTime?: boolean;
     showTimeOnly?: boolean;
+    preserveIncompleteTimeInput?: boolean;
     inputProps?: Omit<import("../TextField").TextFieldProps, "onChange" | "value"> & import("../../../types/theme").DataAttributes;
     showMonthYearPicker?: boolean;
     showYearPicker?: boolean;
 } & {
+    error?: boolean | undefined;
     label?: string | undefined;
     className?: string | undefined | undefined;
     placeholder?: string | undefined | undefined;
-    error?: boolean | undefined;
     helperText?: import("react").ReactNode;
 } & Omit<import("react-datepicker").DatePickerProps, keyof {
     onClick?: (e: import("react").MouseEvent) => void;
@@ -21,6 +22,7 @@ declare const TimeField: import("react").ForwardRefExoticComponent<{
     value?: Date | string | null;
     showTime?: boolean;
     showTimeOnly?: boolean;
+    preserveIncompleteTimeInput?: boolean;
     inputProps?: Omit<import("../TextField").TextFieldProps, "onChange" | "value"> & import("../../../types/theme").DataAttributes;
     showMonthYearPicker?: boolean;
     showYearPicker?: boolean;

package/lib/esm/ui/Form/TimeField/TimeField.js

@@ -2,7 +2,7 @@ import { jsx, Fragment } from "react/jsx-runtime";
 import { DateField } from "../DateField/DateField.js";
 import { forwardRef } from "react";
 const TimeField = forwardRef((props, ref) => {
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(DateField, { ...props, showTime: true, ref, showTimeOnly: true }) });
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(DateField, { ...props, showTime: true, ref, showTimeOnly: true, preserveIncompleteTimeInput: true }) });
 });
 export {
   TimeField as default

package/lib/esm/ui/Icon/Mi.d.ts

@@ -3,4 +3,20 @@ import { TooltipProps } from '../../ui/Tooltip';
 export type MiProps = {
     tooltipProps?: Omit<TooltipProps, 'text' | 'children'>;
 } & IconProps;
-export declare const Mi: (props: MiProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Mi: import("react").ForwardRefExoticComponent<{
+    tooltipProps?: Omit<TooltipProps, "text" | "children">;
+} & {
+    icon: string;
+    variant?: import("../../types/theme").VariantType;
+    color?: import("../../types/theme").ColorType | import("../../types/theme").ColorStatusType;
+    size?: import("../../types/theme").SizeType;
+    theme?: import("../../types/theme").ThemeType;
+    fs?: number;
+} & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, keyof {
+    icon: string;
+    variant?: import("../../types/theme").VariantType;
+    color?: import("../../types/theme").ColorType | import("../../types/theme").ColorStatusType;
+    size?: import("../../types/theme").SizeType;
+    theme?: import("../../types/theme").ThemeType;
+    fs?: number;
+}> & import("react").RefAttributes<HTMLSpanElement>>;

package/lib/esm/ui/Icon/Mi.js

@@ -1,14 +1,15 @@
 import { jsx, Fragment } from "react/jsx-runtime";
 import Icon from "./Icon.js";
 import Tooltip from "../Tooltip/Tooltip.js";
-const Mi = (props) => {
+import { forwardRef } from "react";
+const Mi = forwardRef((props, ref) => {
   const {
     tooltipProps,
     title,
     ...iconProps
   } = props;
-  return /* @__PURE__ */ jsx(Fragment, { children: title ? /* @__PURE__ */ jsx(Tooltip, { ...tooltipProps, text: title, children: /* @__PURE__ */ jsx(Icon, { variant: "outlined", ...iconProps }) }) : /* @__PURE__ */ jsx(Icon, { variant: "outlined", ...iconProps }) });
-};
+  return /* @__PURE__ */ jsx(Fragment, { children: title ? /* @__PURE__ */ jsx(Tooltip, { ...tooltipProps, text: title, children: /* @__PURE__ */ jsx(Icon, { ref, variant: "outlined", ...iconProps }) }) : /* @__PURE__ */ jsx(Icon, { ref, variant: "outlined", ...iconProps }) });
+});
 export {
   Mi
 };

package/lib/esm/ui/Icon/Mis.d.ts

@@ -1,2 +1,2 @@
 import { MiProps } from './Mi';
-export declare const Mis: (props: Omit<MiProps, "variant">) => import("react/jsx-runtime").JSX.Element;
+export declare const Mis: import("react").ForwardRefExoticComponent<Omit<MiProps, "variant"> & import("react").RefAttributes<HTMLSpanElement>>;

package/lib/esm/ui/Icon/Mis.js

@@ -1,8 +1,9 @@
 import { jsx, Fragment } from "react/jsx-runtime";
 import { Mi } from "./Mi.js";
-const Mis = (props) => {
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(Mi, { ...props, variant: "contained" }) });
-};
+import { forwardRef } from "react";
+const Mis = forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(Mi, { ...props, ref, variant: "contained" }) });
+});
 export {
   Mis
 };

package/lib/esm/ui/Link/Link.d.ts

@@ -1,4 +1,4 @@
-import { ComponentPropsWithoutRef, ElementType } from 'react';
+import { ComponentPropsWithoutRef, ElementType, ReactElement, RefAttributes } from 'react';
 import { ColorStatusType, ColorType, SizeType, ThemeType } from '../../types/theme';
 type LinkType = 'a';
 type OwnProps<T extends ElementType = LinkType> = {
@@ -11,5 +11,6 @@ type OwnProps<T extends ElementType = LinkType> = {
     disablestyles?: string;
 };
 export type LinkProps<T extends ElementType = LinkType> = OwnProps<T> & Omit<ComponentPropsWithoutRef<T>, keyof OwnProps<T>>;
-declare const Link: <T extends ElementType = LinkType>(props: LinkProps<T>) => import("react/jsx-runtime").JSX.Element;
+type LinkComponent = <T extends ElementType = LinkType>(props: LinkProps<T> & RefAttributes<HTMLElement>) => ReactElement | null;
+declare const Link: LinkComponent;
 export default Link;

package/lib/esm/ui/Link/Link.js

@@ -1,6 +1,7 @@
 import { jsx, Fragment } from "react/jsx-runtime";
+import { forwardRef } from "react";
 import clsx from "clsx";
-const Link = (props) => {
+const Link = forwardRef((props, ref) => {
   let {
     border,
     children,
@@ -25,8 +26,8 @@ const Link = (props) => {
   const polymorphProps = !!as && typeof as !== "string" ? {
     disablestyles: "true"
   } : {};
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(Component, { "data-testid": "link", ...restProps, ...polymorphProps, className: !disablestyles ? classNames : className, children }) });
-};
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(Component, { ref, "data-testid": "link", ...restProps, ...polymorphProps, className: !disablestyles ? classNames : className, children }) });
+});
 export {
   Link as default
 };

package/lib/esm/ui/Modal.d.ts

@@ -1 +1,2 @@
-export * from './Modal/index'
+export * from './Modal/index'
+export { default } from './Modal/index'

package/lib/esm/ui/Modal.js

@@ -1 +1,2 @@
-export * from './Modal/index.js'
+export * from './Modal/index.js'
+export { default } from './Modal/index.js'

package/lib/esm/ui/Pagination/Pagination.js

@@ -4,6 +4,7 @@ import ButtonIcon from "../ButtonIcon/ButtonIcon.js";
 import { useState, useRef } from "react";
 import "../Icon/Icon.js";
 import { Mi } from "../Icon/Mi.js";
+import "../Icon/Mis.js";
 import Button from "../Button/Button.js";
 import { Popover } from "../Popover/Popover.js";
 import ListItem from "../List/ListItem.js";

package/lib/esm/ui/Pagination.d.ts

@@ -1 +1,2 @@
-export * from './Pagination/index'
+export * from './Pagination/index'
+export { default } from './Pagination/index'

package/lib/esm/ui/Pagination.js

@@ -1 +1,2 @@
-export * from './Pagination/index.js'
+export * from './Pagination/index.js'
+export { default } from './Pagination/index.js'

package/lib/esm/ui/Popover.d.ts

@@ -1 +1,2 @@
-export * from './Popover/index'
+export * from './Popover/index'
+export { default } from './Popover/index'

package/lib/esm/ui/Popover.js

@@ -1 +1,2 @@
-export * from './Popover/index.js'
+export * from './Popover/index.js'
+export { default } from './Popover/index.js'

package/lib/esm/ui/Popper/Popper.d.ts

@@ -1,4 +1,4 @@
 import { PopperBaseProps } from './PopperBase';
 export type PopperProps = {} & PopperBaseProps;
-export declare const Popper: (props: PopperProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const Popper: (props: PopperBaseProps & import("react").RefAttributes<HTMLDivElement>) => JSX.Element;
 export default Popper;

package/lib/esm/ui/Popper/Popper.js

@@ -1,10 +1,11 @@
 import { jsx, Fragment } from "react/jsx-runtime";
 import { createPortal } from "react-dom";
 import { PopperBase } from "./PopperBase.js";
-const Popper = (props) => {
+import { fixedForwardRef } from "../../lib/helpers/genericForwardRef.js";
+const Popper = fixedForwardRef((props, ref) => {
   if (!props.open) return null;
-  return /* @__PURE__ */ jsx(Fragment, { children: createPortal(/* @__PURE__ */ jsx(PopperBase, { ...props, children: props.children }), document.body) });
-};
+  return /* @__PURE__ */ jsx(Fragment, { children: createPortal(/* @__PURE__ */ jsx(PopperBase, { ref, ...props, children: props.children }), document.body) });
+});
 export {
   Popper,
   Popper as default

package/lib/esm/ui/Popper/PopperBase.d.ts

@@ -10,5 +10,5 @@ export type PopperBaseProps = {
     className?: string;
     placement?: 'bottom-end' | 'bottom-start' | 'bottom' | 'left-end' | 'left-start' | 'left' | 'right-end' | 'right-start' | 'right' | 'top-end' | 'top-start' | 'top';
 };
-export declare const PopperBase: (props: PopperBaseProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PopperBase: (props: PopperBaseProps & import("react").RefAttributes<HTMLDivElement>) => JSX.Element;
 export default PopperBase;

package/lib/esm/ui/Popper/PopperBase.js

@@ -1,17 +1,19 @@
 import { jsx, Fragment } from "react/jsx-runtime";
-import { useRef, useEffect } from "react";
+import { useRef, useImperativeHandle, useEffect } from "react";
 import { createPopper } from "@popperjs/core";
 import clsx from "clsx";
-const PopperBase = (props) => {
+import { fixedForwardRef } from "../../lib/helpers/genericForwardRef.js";
+const PopperBase = fixedForwardRef((props, ref) => {
   const {
     anchorEl,
     children,
-    placement,
+    placement = "top",
     className,
     anchorPosition,
     open
   } = props;
   const tooltipRef = useRef(null);
+  useImperativeHandle(ref, () => tooltipRef.current, []);
   useEffect(() => {
     let modifiers = [{
       name: "offset",
@@ -41,7 +43,7 @@ const PopperBase = (props) => {
     };
   }, [open, placement]);
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", { ref: tooltipRef, className: clsx(className, "arm-popper"), "data-testid": "popper", children }) });
-};
+});
 export {
   PopperBase,
   PopperBase as default

package/lib/esm/ui/Popper.d.ts

@@ -1 +1,2 @@
-export * from './Popper/index'
+export * from './Popper/index'
+export { default } from './Popper/index'

package/lib/esm/ui/Popper.js

@@ -1 +1,2 @@
-export * from './Popper/index.js'
+export * from './Popper/index.js'
+export { default } from './Popper/index.js'

package/lib/esm/ui/Skeleton.d.ts

@@ -1 +1,2 @@
-export * from './Skeleton/index'
+export * from './Skeleton/index'
+export { default } from './Skeleton/index'

package/lib/esm/ui/Skeleton.js

@@ -1 +1,2 @@
-export * from './Skeleton/index.js'
+export * from './Skeleton/index.js'
+export { default } from './Skeleton/index.js'

package/lib/esm/ui/Stack/Stack.d.ts

@@ -6,5 +6,5 @@ type OwnProps = {
     center?: boolean;
 };
 export type StackProps = OwnProps & Omit<ComponentPropsWithoutRef<'div'>, keyof OwnProps>;
-declare const Stack: (props: StackProps) => import("react/jsx-runtime").JSX.Element;
+declare const Stack: import("react").ForwardRefExoticComponent<OwnProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof OwnProps> & import("react").RefAttributes<HTMLDivElement>>;
 export default Stack;

package/lib/esm/ui/Stack/Stack.js

@@ -1,11 +1,11 @@
 import { jsx, Fragment } from "react/jsx-runtime";
-import { cloneElement } from "react";
+import { forwardRef, cloneElement } from "react";
 import clsx from "clsx";
 const wrapItem = (item, spacing, index) => {
   if (!Array.isArray(item)) return [cloneElement(/* @__PURE__ */ jsx(StackItem, { spacing, children: item }, index))];
   return item.map((item2, index2) => wrapItem(item2, spacing, index2));
 };
-const Stack = (props) => {
+const Stack = forwardRef((props, ref) => {
   const {
     className,
     children,
@@ -18,12 +18,12 @@ const Stack = (props) => {
   if (Array.isArray(children)) {
     childrenProp = wrapItem(children.filter(Boolean), spacing).flat();
   } else childrenProp = /* @__PURE__ */ jsx(StackItem, { spacing, children });
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", { "data-testid": "stack", ...divProps, className: clsx("arm-stack", "flex", className, {
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", { ref, "data-testid": "stack", ...divProps, className: clsx("arm-stack", "flex", className, {
     "flex-wrap": !!wrap,
     "items-center": center,
     ["arm-stack_spacing_" + spacing]: !!spacing
   }), children: childrenProp }) });
-};
+});
 const StackItem = (props) => {
   const {
     children,

package/lib/esm/ui/Status/Status.d.ts

@@ -1,5 +1,5 @@
 import { ColorStatusType, ColorType, SizeType } from '../../types/theme';
-import { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';
+import { ComponentPropsWithoutRef, ElementType, ReactElement, ReactNode, RefAttributes } from 'react';
 type OwnProps<T extends ElementType = 'span'> = {
     color?: ColorType | ColorStatusType;
     text?: string;
@@ -8,6 +8,7 @@ type OwnProps<T extends ElementType = 'span'> = {
     size?: SizeType;
     as?: T;
 };
-type StatusProps<T extends ElementType = 'span'> = OwnProps<T> & Omit<ComponentPropsWithoutRef<T>, keyof OwnProps<T>>;
-declare function Status<T extends ElementType = 'span'>(props: StatusProps<T>): import("react/jsx-runtime").JSX.Element;
+export type StatusProps<T extends ElementType = 'span'> = OwnProps<T> & Omit<ComponentPropsWithoutRef<T>, keyof OwnProps<T>>;
+type StatusComponent = <T extends ElementType = 'span'>(props: StatusProps<T> & RefAttributes<HTMLElement>) => ReactElement | null;
+declare const Status: StatusComponent;
 export default Status;

package/lib/esm/ui/Status/Status.js

@@ -1,6 +1,7 @@
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
-function Status(props) {
+import { forwardRef } from "react";
+const Status = forwardRef((props, ref) => {
   let {
     color,
     icon,
@@ -12,13 +13,13 @@ function Status(props) {
     ...restProps
   } = props;
   const Component = as || "span";
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Component, { "data-testid": "status", ...restProps, className: clsx("arm-status", ["arm-status_" + color], className, {
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Component, { ref, "data-testid": "status", ...restProps, className: clsx("arm-status", ["arm-status_" + color], className, {
     ["arm-status_size_" + size]: !!size
   }), children: [
     /* @__PURE__ */ jsx("span", { className: "arm-status__content", children: text || children }),
     icon && /* @__PURE__ */ jsx("span", { className: clsx("arm-status__icon", "material_icon"), children: icon })
   ] }) });
-}
+});
 export {
   Status as default
 };

package/lib/esm/ui/Tooltip/Tooltip.js

@@ -3,7 +3,7 @@ import { isValidElement, useState, useRef, cloneElement } from "react";
 import useTimeout from "../../lib/hooks/useTimeout.js";
 import useEventCallback from "../../lib/hooks/useEventCallback.js";
 import { Popper } from "../Popper/Popper.js";
-import "@popperjs/core";
+import "../Popper/PopperBase.js";
 import clsx from "clsx";
 function composeEventHandler(handler, eventHandler) {
   return (event) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "armtek-uikit-react",
-  "version": "1.0.268",
+  "version": "1.0.270",
   "description": "Armtek UIKit for React",
   "main": "lib/cjs/index.cjs",
   "module": "lib/esm/index.js",
@@ -26,7 +26,7 @@
   "scripts": {
     "start": "storybook dev -p 3001 --no-open --config-dir ./config/storybook",
     "build:storybook": "storybook build --config-dir ./config/storybook",
-    "clean:build": "node -e \"const fs=require('fs'); fs.rmSync('lib',{recursive:true,force:true}); fs.rmSync('types',{recursive:true,force:true});\"",
+    "clean:build": "node -e \"const fs=require('fs'); const path=require('path'); const rmOpts={recursive:true,force:true,maxRetries:10,retryDelay:200}; const clean=(dir)=>{ if(!fs.existsSync(dir)) return; for (const entry of fs.readdirSync(dir)) fs.rmSync(path.join(dir, entry), rmOpts); }; clean('lib'); clean('types');\"",
     "build:esm": "vite build --config vite.config.ts --mode esm",
     "build:cjs": "vite build --config vite.config.ts --mode cjs",
     "build": "npm run clean:build && npm run build-types && npm run build:esm && npm run build:cjs && node config/postbuild-vite.mjs",
@@ -74,11 +74,11 @@
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-react": "^7.33.1",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^9.1.7",
     "fs-extra": "^11.1.1",
     "identity-obj-proxy": "^3.0.0",
     "jsdom": "^26.1.0",
     "prettier": "^3.0.1",
+    "react-hook-form": "^7.73.1",
     "sass": "^1.84.0",
     "storybook": "^10.3.5",
     "ts-node": "^10.9.1",