@homecode/ui 4.27.16 → 4.27.18

package/.nvmrc

@@ -1 +1 @@
-18
+22

package/dist/esm/src/components/Form/Form.js

@@ -63,6 +63,8 @@ function Form(props) {
     const touchedRef = useRef(touched);
     const errorsRef = useRef(errors);
     const onChangeRef = useRef(onChange);
+    const onChangeHandlerRef = useRef(null); // Add this
+    const onBlurHandlerRef = useRef(null); // Add this
     const setValues = (newValues) => {
         _setValues(newValues);
         valuesRef.current = newValues;
@@ -182,14 +184,18 @@ function Form(props) {
         const newValues = { ...valuesRef.current, [field]: val };
         if (onChangeRef.current && !onChangeRef.current(newValues))
             return;
+        const isTouched = !compare(val, initialValues[field]);
         setValue(field, val);
-        setFieldTouched(field, true);
+        setFieldTouched(field, isTouched);
         calcChanged(field, val);
         validate();
-    }, [calcChanged, validate]);
+    }, [calcChanged, validate, initialValues]);
     const onBlurHandler = useCallback((name) => {
         setFieldTouched(name, true);
     }, []);
+    // Update refs to always point to latest handlers
+    onChangeHandlerRef.current = onChangeHandler;
+    onBlurHandlerRef.current = onBlurHandler;
     const onSubmitHandler = async (e) => {
         e?.preventDefault();
         dropFocusFromSubmit();
@@ -199,7 +205,6 @@ function Form(props) {
         await onSubmit({ ...values });
         setIsLoading(false);
     };
-    // Simple field component - let memo on Field handle optimization
     const FieldComponent = useRef((fieldProps) => {
         const { name } = fieldProps;
         const fullProps = {
@@ -209,8 +214,8 @@ function Form(props) {
             markEdited,
             isChanged: changedRef.current[name],
             isTouched: touchedRef.current[name],
-            handleChange: onChangeHandler,
-            handleBlur: onBlurHandler,
+            handleChange: (...args) => onChangeHandlerRef.current(...args),
+            handleBlur: (...args) => onBlurHandlerRef.current(...args),
         };
         if (validationSchemaRef.current?.[name]?.empty === false) {
             fullProps.required = true;
@@ -238,41 +243,29 @@ function Form(props) {
     // Effects
     useEffect(() => {
         validationSchemaRef.current = validationSchema;
+        validate();
     }, [validationSchema]);
+    useEffect(() => {
+        defaultValuesRef.current = updateDefaultValues();
+        calcChangedAll(initialValues);
+    }, [defaultValues]);
+    useEffect(() => {
+        setValues(cloneValues(initialValues));
+        setTouched({});
+        setChanged({});
+        setIsDirty(false);
+        updateIsEmpty();
+        validate();
+        if (onInit)
+            onInit(formAPI);
+    }, [initialValues]);
     useEffect(() => {
         calcChangedAll();
         validate();
         if (onInit)
             onInit(formAPI);
     }, []);
-    useEffect(() => {
-        const validationChanged = !compare(validationSchema, validationSchemaRef.current);
-        const initialValsChanged = !compare(initialValues, props.initialValues);
-        const defaultValsChanged = !compare(defaultValues, props.defaultValues);
-        if (initialValsChanged) {
-            setValues(cloneValues(initialValues));
-            validate();
-            if (onInit)
-                onInit(formAPI);
-        }
-        if (defaultValsChanged) {
-            defaultValuesRef.current = updateDefaultValues();
-        }
-        if (initialValsChanged || defaultValsChanged) {
-            calcChangedAll(initialValues);
-        }
-        if (initialValsChanged || validationChanged) {
-            validate();
-        }
-    }, [
-        initialValues,
-        validationSchema,
-        defaultValues,
-        onInit,
-        formAPI,
-        calcChangedAll,
-        validate,
-    ]);
+    console.log('FORM: initialValues', initialValues);
     const classes = cn(S.root, className, isLoading && S.isLoading);
     return (jsx("form", { className: classes, ...restProps, onSubmit: onSubmitHandler, children: children(formAPI) }));
 }

package/dist/esm/src/components/Input/Input.js

@@ -68,7 +68,24 @@ const Input = forwardRef((props, ref) => {
         return val;
     };
     const onTextareaPaste = e => {
-        // wait for native paste operation completes in DOM
+        // Prevent default paste behavior to strip formatting
+        e.preventDefault();
+        // Get plain text from clipboard
+        const text = (e.clipboardData || window.clipboardData)?.getData('text/plain') || '';
+        // Insert plain text at cursor position
+        if (document.queryCommandSupported('insertText')) {
+            document.execCommand('insertText', false, text);
+        }
+        else {
+            // Fallback for older browsers
+            const selection = window.getSelection();
+            if (!selection.rangeCount)
+                return;
+            selection.deleteFromDocument();
+            selection.getRangeAt(0).insertNode(document.createTextNode(text));
+            selection.collapseToEnd();
+        }
+        // Update the value after paste
         setTimeout(() => {
             if (inputRef.current) {
                 const newValue = inputRef.current.innerText;
@@ -243,7 +260,7 @@ const Input = forwardRef((props, ref) => {
         updateAutoComplete();
         if (value !== inputValue) {
             if (isTextArea)
-                setTextareaValue(String(value));
+                setTextareaValue(String(value ?? ''));
             setInputValue(value);
         }
         if (autoFocus && inputRef.current) {
@@ -252,7 +269,7 @@ const Input = forwardRef((props, ref) => {
     }, [value, autoFocus]);
     useEffect(() => {
         if (isTextArea)
-            setTextareaValue(String(value));
+            setTextareaValue(String(value ?? ''));
     }, []);
     const Control = isTextArea ? 'span' : 'input';
     const classes = cn(S.root, isTextArea && S.isTextArea, S[`size-${size}`], S[`variant-${variant}`], isFocused && S.isFocused, error && S.hasError, hasClear && S.hasClear, disabled && S.isDisabled, round && S.round, className);

package/dist/esm/types/src/components/Icon/Icon.d.ts

@@ -1,91 +1,97 @@
+/// <reference types="uilib/declarations" />
 import * as T from './Icon.types';
 export declare const icons: {
-    attach: () => Promise<any>;
-    arrowRight: () => Promise<any>;
-    arrowLeft: () => Promise<any>;
-    arrowUp: () => Promise<any>;
-    arrowDown: () => Promise<any>;
-    avatar: () => Promise<any>;
-    bookmark: () => Promise<any>;
-    bookmarkAdd: () => Promise<any>;
-    brain: () => Promise<any>;
-    brokenImage: () => Promise<any>;
-    camera: () => Promise<any>;
-    chat: () => Promise<any>;
-    check: () => Promise<any>;
-    close: () => Promise<any>;
-    colors: () => Promise<any>;
-    compass: () => Promise<any>;
-    copy: () => Promise<any>;
-    checkers: () => Promise<any>;
-    chevronUp: () => Promise<any>;
-    chevronDown: () => Promise<any>;
-    chevronRight: () => Promise<any>;
-    chevronLeft: () => Promise<any>;
-    clearAll: () => Promise<any>;
-    cubes: () => Promise<any>;
-    delete: () => Promise<any>;
-    draft: () => Promise<any>;
-    dragHandlerHorizontal: () => Promise<any>;
-    dragHandlerVertical: () => Promise<any>;
-    edit: () => Promise<any>;
-    email: () => Promise<any>;
-    externalLink: () => Promise<any>;
-    eye: () => Promise<any>;
-    forward: () => Promise<any>;
-    folder: () => Promise<any>;
-    folderOpen: () => Promise<any>;
-    fullscreen: () => Promise<any>;
-    fullscreenExit: () => Promise<any>;
-    function: () => Promise<any>;
-    flyover: () => Promise<any>;
-    gear: () => Promise<any>;
-    geolocation: () => Promise<any>;
-    globe: () => Promise<any>;
-    group: () => Promise<any>;
-    history: () => Promise<any>;
-    image: () => Promise<any>;
-    instagram: () => Promise<any>;
-    home: () => Promise<any>;
-    layers: () => Promise<any>;
-    link: () => Promise<any>;
-    loader: () => Promise<any>;
-    lock: () => Promise<any>;
-    lockOpen: () => Promise<any>;
-    map: () => Promise<any>;
-    menu: () => Promise<any>;
-    mic: () => Promise<any>;
-    minus: () => Promise<any>;
-    moreVertical: () => Promise<any>;
-    moreHorizontal: () => Promise<any>;
-    output: () => Promise<any>;
-    pause: () => Promise<any>;
-    play: () => Promise<any>;
-    plus: () => Promise<any>;
-    redo: () => Promise<any>;
-    undo: () => Promise<any>;
-    usage: () => Promise<any>;
-    requiredStar: () => Promise<any>;
-    rewind: () => Promise<any>;
-    rocket: () => Promise<any>;
-    route: () => Promise<any>;
-    routeFrom: () => Promise<any>;
-    routeTo: () => Promise<any>;
-    save: () => Promise<any>;
-    search: () => Promise<any>;
-    send: () => Promise<any>;
-    settings: () => Promise<any>;
-    shoppingBag: () => Promise<any>;
-    smile: () => Promise<any>;
-    soundWave: () => Promise<any>;
-    sparks: () => Promise<any>;
-    star: () => Promise<any>;
-    stopInCircle: () => Promise<any>;
-    syncArrows: () => Promise<any>;
-    table: () => Promise<any>;
-    telegram: () => Promise<any>;
-    tool: () => Promise<any>;
-    trafficLight: () => Promise<any>;
+    attach: () => Promise<typeof import("*.svg")>;
+    apple: () => Promise<typeof import("*.svg")>;
+    arrowRight: () => Promise<typeof import("*.svg")>;
+    arrowLeft: () => Promise<typeof import("*.svg")>;
+    arrowUp: () => Promise<typeof import("*.svg")>;
+    arrowDown: () => Promise<typeof import("*.svg")>;
+    avatar: () => Promise<typeof import("*.svg")>;
+    bookmark: () => Promise<typeof import("*.svg")>;
+    bookmarkAdd: () => Promise<typeof import("*.svg")>;
+    brain: () => Promise<typeof import("*.svg")>;
+    brokenImage: () => Promise<typeof import("*.svg")>;
+    camera: () => Promise<typeof import("*.svg")>;
+    chat: () => Promise<typeof import("*.svg")>;
+    check: () => Promise<typeof import("*.svg")>;
+    close: () => Promise<typeof import("*.svg")>;
+    colors: () => Promise<typeof import("*.svg")>;
+    compass: () => Promise<typeof import("*.svg")>;
+    copy: () => Promise<typeof import("*.svg")>;
+    checkers: () => Promise<typeof import("*.svg")>;
+    chevronUp: () => Promise<typeof import("*.svg")>;
+    chevronDown: () => Promise<typeof import("*.svg")>;
+    chevronRight: () => Promise<typeof import("*.svg")>;
+    chevronLeft: () => Promise<typeof import("*.svg")>;
+    clearAll: () => Promise<typeof import("*.svg")>;
+    cubes: () => Promise<typeof import("*.svg")>;
+    delete: () => Promise<typeof import("*.svg")>;
+    draft: () => Promise<typeof import("*.svg")>;
+    dragHandlerHorizontal: () => Promise<typeof import("*.svg")>;
+    dragHandlerVertical: () => Promise<typeof import("*.svg")>;
+    edit: () => Promise<typeof import("*.svg")>;
+    email: () => Promise<typeof import("*.svg")>;
+    externalLink: () => Promise<typeof import("*.svg")>;
+    eye: () => Promise<typeof import("*.svg")>;
+    forward: () => Promise<typeof import("*.svg")>;
+    folder: () => Promise<typeof import("*.svg")>;
+    folderOpen: () => Promise<typeof import("*.svg")>;
+    fullscreen: () => Promise<typeof import("*.svg")>;
+    fullscreenExit: () => Promise<typeof import("*.svg")>;
+    function: () => Promise<typeof import("*.svg")>;
+    flyover: () => Promise<typeof import("*.svg")>;
+    gear: () => Promise<typeof import("*.svg")>;
+    geolocation: () => Promise<typeof import("*.svg")>;
+    globe: () => Promise<typeof import("*.svg")>;
+    google: () => Promise<typeof import("*.svg")>;
+    group: () => Promise<typeof import("*.svg")>;
+    github: () => Promise<typeof import("*.svg")>;
+    history: () => Promise<typeof import("*.svg")>;
+    image: () => Promise<typeof import("*.svg")>;
+    instagram: () => Promise<typeof import("*.svg")>;
+    home: () => Promise<typeof import("*.svg")>;
+    layers: () => Promise<typeof import("*.svg")>;
+    link: () => Promise<typeof import("*.svg")>;
+    loader: () => Promise<typeof import("*.svg")>;
+    lock: () => Promise<typeof import("*.svg")>;
+    lockOpen: () => Promise<typeof import("*.svg")>;
+    map: () => Promise<typeof import("*.svg")>;
+    menu: () => Promise<typeof import("*.svg")>;
+    mic: () => Promise<typeof import("*.svg")>;
+    micMuted: () => Promise<typeof import("*.svg")>;
+    minus: () => Promise<typeof import("*.svg")>;
+    moreVertical: () => Promise<typeof import("*.svg")>;
+    moreHorizontal: () => Promise<typeof import("*.svg")>;
+    output: () => Promise<typeof import("*.svg")>;
+    pause: () => Promise<typeof import("*.svg")>;
+    play: () => Promise<typeof import("*.svg")>;
+    plus: () => Promise<typeof import("*.svg")>;
+    redo: () => Promise<typeof import("*.svg")>;
+    undo: () => Promise<typeof import("*.svg")>;
+    usage: () => Promise<typeof import("*.svg")>;
+    requiredStar: () => Promise<typeof import("*.svg")>;
+    rewind: () => Promise<typeof import("*.svg")>;
+    rocket: () => Promise<typeof import("*.svg")>;
+    route: () => Promise<typeof import("*.svg")>;
+    routeFrom: () => Promise<typeof import("*.svg")>;
+    routeTo: () => Promise<typeof import("*.svg")>;
+    save: () => Promise<typeof import("*.svg")>;
+    search: () => Promise<typeof import("*.svg")>;
+    send: () => Promise<typeof import("*.svg")>;
+    settings: () => Promise<typeof import("*.svg")>;
+    shoppingBag: () => Promise<typeof import("*.svg")>;
+    smile: () => Promise<typeof import("*.svg")>;
+    soundWave: () => Promise<typeof import("*.svg")>;
+    sparks: () => Promise<typeof import("*.svg")>;
+    star: () => Promise<typeof import("*.svg")>;
+    stop: () => Promise<typeof import("*.svg")>;
+    stopInCircle: () => Promise<typeof import("*.svg")>;
+    syncArrows: () => Promise<typeof import("*.svg")>;
+    table: () => Promise<typeof import("*.svg")>;
+    telegram: () => Promise<typeof import("*.svg")>;
+    tool: () => Promise<typeof import("*.svg")>;
+    trafficLight: () => Promise<typeof import("*.svg")>;
 };
 export type { IconType } from './Icon.types';
 export declare function Icon(props: T.Props): JSX.Element;

package/dist/esm/types/src/components/Icon/icons/index.d.ts

@@ -1,94 +1,95 @@
+/// <reference types="uilib/declarations" />
 declare const _default: {
-    attach: () => Promise<any>;
-    apple: () => Promise<any>;
-    arrowRight: () => Promise<any>;
-    arrowLeft: () => Promise<any>;
-    arrowUp: () => Promise<any>;
-    arrowDown: () => Promise<any>;
-    avatar: () => Promise<any>;
-    bookmark: () => Promise<any>;
-    bookmarkAdd: () => Promise<any>;
-    brain: () => Promise<any>;
-    brokenImage: () => Promise<any>;
-    camera: () => Promise<any>;
-    chat: () => Promise<any>;
-    check: () => Promise<any>;
-    close: () => Promise<any>;
-    colors: () => Promise<any>;
-    compass: () => Promise<any>;
-    copy: () => Promise<any>;
-    checkers: () => Promise<any>;
-    chevronUp: () => Promise<any>;
-    chevronDown: () => Promise<any>;
-    chevronRight: () => Promise<any>;
-    chevronLeft: () => Promise<any>;
-    clearAll: () => Promise<any>;
-    cubes: () => Promise<any>;
-    delete: () => Promise<any>;
-    draft: () => Promise<any>;
-    dragHandlerHorizontal: () => Promise<any>;
-    dragHandlerVertical: () => Promise<any>;
-    edit: () => Promise<any>;
-    email: () => Promise<any>;
-    externalLink: () => Promise<any>;
-    eye: () => Promise<any>;
-    forward: () => Promise<any>;
-    folder: () => Promise<any>;
-    folderOpen: () => Promise<any>;
-    fullscreen: () => Promise<any>;
-    fullscreenExit: () => Promise<any>;
-    function: () => Promise<any>;
-    flyover: () => Promise<any>;
-    gear: () => Promise<any>;
-    geolocation: () => Promise<any>;
-    globe: () => Promise<any>;
-    google: () => Promise<any>;
-    group: () => Promise<any>;
-    github: () => Promise<any>;
-    history: () => Promise<any>;
-    image: () => Promise<any>;
-    instagram: () => Promise<any>;
-    home: () => Promise<any>;
-    layers: () => Promise<any>;
-    link: () => Promise<any>;
-    loader: () => Promise<any>;
-    lock: () => Promise<any>;
-    lockOpen: () => Promise<any>;
-    map: () => Promise<any>;
-    menu: () => Promise<any>;
-    mic: () => Promise<any>;
-    micMuted: () => Promise<any>;
-    minus: () => Promise<any>;
-    moreVertical: () => Promise<any>;
-    moreHorizontal: () => Promise<any>;
-    output: () => Promise<any>;
-    pause: () => Promise<any>;
-    play: () => Promise<any>;
-    plus: () => Promise<any>;
-    redo: () => Promise<any>;
-    undo: () => Promise<any>;
-    usage: () => Promise<any>;
-    requiredStar: () => Promise<any>;
-    rewind: () => Promise<any>;
-    rocket: () => Promise<any>;
-    route: () => Promise<any>;
-    routeFrom: () => Promise<any>;
-    routeTo: () => Promise<any>;
-    save: () => Promise<any>;
-    search: () => Promise<any>;
-    send: () => Promise<any>;
-    settings: () => Promise<any>;
-    shoppingBag: () => Promise<any>;
-    smile: () => Promise<any>;
-    soundWave: () => Promise<any>;
-    sparks: () => Promise<any>;
-    star: () => Promise<any>;
-    stop: () => Promise<any>;
-    stopInCircle: () => Promise<any>;
-    syncArrows: () => Promise<any>;
-    table: () => Promise<any>;
-    telegram: () => Promise<any>;
-    tool: () => Promise<any>;
-    trafficLight: () => Promise<any>;
+    attach: () => Promise<typeof import("*.svg")>;
+    apple: () => Promise<typeof import("*.svg")>;
+    arrowRight: () => Promise<typeof import("*.svg")>;
+    arrowLeft: () => Promise<typeof import("*.svg")>;
+    arrowUp: () => Promise<typeof import("*.svg")>;
+    arrowDown: () => Promise<typeof import("*.svg")>;
+    avatar: () => Promise<typeof import("*.svg")>;
+    bookmark: () => Promise<typeof import("*.svg")>;
+    bookmarkAdd: () => Promise<typeof import("*.svg")>;
+    brain: () => Promise<typeof import("*.svg")>;
+    brokenImage: () => Promise<typeof import("*.svg")>;
+    camera: () => Promise<typeof import("*.svg")>;
+    chat: () => Promise<typeof import("*.svg")>;
+    check: () => Promise<typeof import("*.svg")>;
+    close: () => Promise<typeof import("*.svg")>;
+    colors: () => Promise<typeof import("*.svg")>;
+    compass: () => Promise<typeof import("*.svg")>;
+    copy: () => Promise<typeof import("*.svg")>;
+    checkers: () => Promise<typeof import("*.svg")>;
+    chevronUp: () => Promise<typeof import("*.svg")>;
+    chevronDown: () => Promise<typeof import("*.svg")>;
+    chevronRight: () => Promise<typeof import("*.svg")>;
+    chevronLeft: () => Promise<typeof import("*.svg")>;
+    clearAll: () => Promise<typeof import("*.svg")>;
+    cubes: () => Promise<typeof import("*.svg")>;
+    delete: () => Promise<typeof import("*.svg")>;
+    draft: () => Promise<typeof import("*.svg")>;
+    dragHandlerHorizontal: () => Promise<typeof import("*.svg")>;
+    dragHandlerVertical: () => Promise<typeof import("*.svg")>;
+    edit: () => Promise<typeof import("*.svg")>;
+    email: () => Promise<typeof import("*.svg")>;
+    externalLink: () => Promise<typeof import("*.svg")>;
+    eye: () => Promise<typeof import("*.svg")>;
+    forward: () => Promise<typeof import("*.svg")>;
+    folder: () => Promise<typeof import("*.svg")>;
+    folderOpen: () => Promise<typeof import("*.svg")>;
+    fullscreen: () => Promise<typeof import("*.svg")>;
+    fullscreenExit: () => Promise<typeof import("*.svg")>;
+    function: () => Promise<typeof import("*.svg")>;
+    flyover: () => Promise<typeof import("*.svg")>;
+    gear: () => Promise<typeof import("*.svg")>;
+    geolocation: () => Promise<typeof import("*.svg")>;
+    globe: () => Promise<typeof import("*.svg")>;
+    google: () => Promise<typeof import("*.svg")>;
+    group: () => Promise<typeof import("*.svg")>;
+    github: () => Promise<typeof import("*.svg")>;
+    history: () => Promise<typeof import("*.svg")>;
+    image: () => Promise<typeof import("*.svg")>;
+    instagram: () => Promise<typeof import("*.svg")>;
+    home: () => Promise<typeof import("*.svg")>;
+    layers: () => Promise<typeof import("*.svg")>;
+    link: () => Promise<typeof import("*.svg")>;
+    loader: () => Promise<typeof import("*.svg")>;
+    lock: () => Promise<typeof import("*.svg")>;
+    lockOpen: () => Promise<typeof import("*.svg")>;
+    map: () => Promise<typeof import("*.svg")>;
+    menu: () => Promise<typeof import("*.svg")>;
+    mic: () => Promise<typeof import("*.svg")>;
+    micMuted: () => Promise<typeof import("*.svg")>;
+    minus: () => Promise<typeof import("*.svg")>;
+    moreVertical: () => Promise<typeof import("*.svg")>;
+    moreHorizontal: () => Promise<typeof import("*.svg")>;
+    output: () => Promise<typeof import("*.svg")>;
+    pause: () => Promise<typeof import("*.svg")>;
+    play: () => Promise<typeof import("*.svg")>;
+    plus: () => Promise<typeof import("*.svg")>;
+    redo: () => Promise<typeof import("*.svg")>;
+    undo: () => Promise<typeof import("*.svg")>;
+    usage: () => Promise<typeof import("*.svg")>;
+    requiredStar: () => Promise<typeof import("*.svg")>;
+    rewind: () => Promise<typeof import("*.svg")>;
+    rocket: () => Promise<typeof import("*.svg")>;
+    route: () => Promise<typeof import("*.svg")>;
+    routeFrom: () => Promise<typeof import("*.svg")>;
+    routeTo: () => Promise<typeof import("*.svg")>;
+    save: () => Promise<typeof import("*.svg")>;
+    search: () => Promise<typeof import("*.svg")>;
+    send: () => Promise<typeof import("*.svg")>;
+    settings: () => Promise<typeof import("*.svg")>;
+    shoppingBag: () => Promise<typeof import("*.svg")>;
+    smile: () => Promise<typeof import("*.svg")>;
+    soundWave: () => Promise<typeof import("*.svg")>;
+    sparks: () => Promise<typeof import("*.svg")>;
+    star: () => Promise<typeof import("*.svg")>;
+    stop: () => Promise<typeof import("*.svg")>;
+    stopInCircle: () => Promise<typeof import("*.svg")>;
+    syncArrows: () => Promise<typeof import("*.svg")>;
+    table: () => Promise<typeof import("*.svg")>;
+    telegram: () => Promise<typeof import("*.svg")>;
+    tool: () => Promise<typeof import("*.svg")>;
+    trafficLight: () => Promise<typeof import("*.svg")>;
 };
 export default _default;

package/dist/esm/types/src/components/Notifications/Notifications.d.ts

@@ -1,12 +1,13 @@
+import * as T from './Notifications.types';
 type Props = {
     store?: any;
 };
 export declare const NotificationsStore: import("justorm/dist/esm/proxy").ProxyStore<{
     items: string[];
-    autohide: string[];
+    autoHide: string[];
     data: {};
     paused: boolean;
-    show(data: any): any;
+    show(data: T.ItemParams): any;
     pause(): void;
     unpause(): void;
     close(id: any): void;

package/dist/esm/types/src/components/Tabs/Tabs.types.d.ts

@@ -1,13 +1,15 @@
 import { Size } from 'uilib/types';
 import { ButtonProps } from '../Button/Button';
+import { ReactNode } from 'react';
 type ID = string | number;
-export type Item = ButtonProps & {
+export type Item = Omit<ButtonProps, 'children'> & {
     id: ID;
     label: string;
-    content: React.ReactNode | (() => React.ReactNode);
+    content: ReactNode | (() => ReactNode);
     contentClassName?: string;
     forceRender?: boolean;
     onClick?: (e: MouseEvent) => boolean | void;
+    children?: ButtonProps['children'];
 };
 export type RenderProps = {
     tabs: React.ReactNode;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homecode/ui",
-  "version": "4.27.16",
+  "version": "4.27.18",
   "description": "React UI components library",
   "scripts": {
     "tests": "jest",