@tecsinapse/cortex-react 1.15.3 → 2.0.0-beta.0

package/dist/cjs/components/Button.js

@@ -2,10 +2,9 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var cortexCore = require('@tecsinapse/cortex-core');
-var React = require('react');
 
-const Button = React.forwardRef((props, ref) => {
-  const { variants, intent, variant, size, children, className, ...rest } = props;
+const Button = (props) => {
+  const { variants, intent, variant, size, children, className, ref, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(
     "button",
     {
@@ -15,6 +14,6 @@ const Button = React.forwardRef((props, ref) => {
       children
     }
   );
-});
+};
 
 exports.Button = Button;

package/dist/cjs/components/Card.js

@@ -2,11 +2,10 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var cortexCore = require('@tecsinapse/cortex-core');
-var React = require('react');
 
-const Card = React.forwardRef((props, ref) => {
-  const { children, className, ...rest } = props;
+const Card = (props) => {
+  const { children, className, ref, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cortexCore.card({ className }), ref, ...rest, children });
-});
+};
 
 exports.Card = Card;

package/dist/cjs/components/Carousel/CarouselItem.js

@@ -57,7 +57,7 @@ const CarouselItem = ({ item }) => {
           {
             type: "button",
             "data-testid": "button-link-carousel",
-            className: "z-absolute absolute bottom-deca left-[10%]",
+            className: "z-absolute absolute bottom-giga left-[10%]",
             children: item.button.title
           }
         )

package/dist/cjs/components/Checkbox.js

@@ -4,9 +4,9 @@ var jsxRuntime = require('react/jsx-runtime');
 var cortexCore = require('@tecsinapse/cortex-core');
 var React = require('react');
 
-const Checkbox = React.forwardRef((props, ref) => {
+const Checkbox = (props) => {
   const localRef = React.useRef(null);
-  const { className, indeterminate, ...rest } = props;
+  const { className, indeterminate, ref, ...rest } = props;
   const setIndeterminate = React.useCallback((value) => {
     if (localRef?.current) {
       localRef.current.indeterminate = value;
@@ -31,6 +31,6 @@ const Checkbox = React.forwardRef((props, ref) => {
       ...rest
     }
   );
-});
+};
 
 exports.Checkbox = Checkbox;

package/dist/cjs/components/Hint.js

@@ -2,11 +2,10 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var cortexCore = require('@tecsinapse/cortex-core');
-var React = require('react');
 
-const Hint = React.forwardRef((props, ref) => {
-  const { children, variants } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cortexCore.hint(variants), ref, children: children ?? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {}) });
-});
+const Hint = (props) => {
+  const { children, variants, ref, ...rest } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cortexCore.hint(variants), ref, ...rest, children: children ?? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {}) });
+};
 
 exports.Hint = Hint;

package/dist/cjs/components/Input/Face.js

@@ -13,14 +13,19 @@ const getValidChildren = (children) => {
 const InputFace = React.forwardRef(
   ({ children, variants, className, ...rest }, ref) => {
     const clones = getValidChildren(children).map((el) => {
-      return React.cloneElement(el, { ...el.props, variants });
+      const element = el;
+      const elProps = element.props || {};
+      return React.cloneElement(element, { ...elProps, variants });
     });
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         "data-testid": "input-face",
         ...rest,
-        className: clsx(cortexCore.input(variants), className),
+        className: clsx(
+          cortexCore.input(variants),
+          className
+        ),
         ref,
         children: clones
       }

package/dist/cjs/components/Modal.js

@@ -2,10 +2,9 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var cortexCore = require('@tecsinapse/cortex-core');
-var React = require('react');
 
-const Modal = React.forwardRef((props, ref) => {
-  const { open, onClose, children, className, ...rest } = props;
+const Modal = (props) => {
+  const { open, onClose, children, className, ref, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
@@ -26,6 +25,6 @@ const Modal = React.forwardRef((props, ref) => {
       }
     )
   ] });
-});
+};
 
 exports.Modal = Modal;

package/dist/cjs/components/Popover/Trigger.js

@@ -13,7 +13,7 @@ const isDisabledProps = {
 };
 const PopoverTrigger = ({ children, disabled }) => {
   const { triggerProps } = Context.usePopoverContext();
-  const isDisabled = disabled ?? children.props?.disabled;
+  const isDisabled = disabled ?? children.props.disabled;
   return react.cloneWithProps(children, {
     ...triggerProps,
     ...isDisabled ? isDisabledProps : {}

package/dist/cjs/components/RadioButton.js

@@ -2,24 +2,21 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var cortexCore = require('@tecsinapse/cortex-core');
-var React = require('react');
 
 const { container, input, label: labelStyle } = cortexCore.radioButtonStyles();
-const RadioButton = React.forwardRef(
-  ({ label, reversed, id, ...rest }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        className: container({ reversed }),
-        ref,
-        "data-testid": "radio-button-container",
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("input", { id, type: "radio", className: input(), ...rest }),
-          label ? /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: id, className: labelStyle(), children: label }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {})
-        ]
-      }
-    );
-  }
-);
+const RadioButton = ({ label, reversed, id, ref, ...rest }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: container({ reversed }),
+      ref,
+      "data-testid": "radio-button-container",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("input", { id, type: "radio", className: input(), ...rest }),
+        label ? /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: id, className: labelStyle(), children: label }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {})
+      ]
+    }
+  );
+};
 
 exports.RadioButton = RadioButton;

package/dist/cjs/components/Snackbar/BaseSnackbar.js

@@ -2,13 +2,10 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var cortexCore = require('@tecsinapse/cortex-core');
-var React = require('react');
 
-const BaseSnackbar = React.forwardRef(
-  (props, ref) => {
-    const { children, show, variants } = props;
-    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: show ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: cortexCore.snackbar(variants), ref, "data-testid": "snackbar", children }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {}) });
-  }
-);
+const BaseSnackbar = (props) => {
+  const { children, show, variants, ref } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: show ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: cortexCore.snackbar(variants), ref, "data-testid": "snackbar", children }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {}) });
+};
 
 exports.BaseSnackbar = BaseSnackbar;

package/dist/cjs/components/Stepper/Root.js

@@ -14,8 +14,11 @@ const Root = ({
   const initialSelectedIndex = React.useMemo(() => {
     let initialIndex = null;
     React.Children.forEach(children, (child, index) => {
-      if (React.isValidElement(child) && child.props.selected) {
-        initialIndex = index;
+      if (React.isValidElement(child)) {
+        const element = child;
+        if (element.props.selected) {
+          initialIndex = index;
+        }
       }
     });
     return initialIndex;
@@ -41,13 +44,14 @@ const Root = ({
   const renderNode = React.useMemo(
     () => (child, index) => {
       if (React.isValidElement(child) && child.type === Node.Node) {
-        return React.cloneElement(child, {
+        const element = child;
+        return React.cloneElement(element, {
           isFirst: index === 0,
           isLast: index === childrenCount - 1,
           selected: selectedNode === index,
           segmented,
           interactive,
-          onClick: () => handleNodeClick(index, child.props.onClick)
+          onClick: () => handleNodeClick(index, element.props.onClick)
         });
       }
       return null;

package/dist/cjs/components/Tag.js

@@ -2,7 +2,6 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var cortexCore = require('@tecsinapse/cortex-core');
-var React = require('react');
 var lia = require('react-icons/lia');
 
 const Close = ({
@@ -28,8 +27,8 @@ const Label = ({
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("p", { className, ...rest, children });
 };
-const Face = React.forwardRef((props, ref) => {
-  const { variants, className, intent, children, style, ...rest } = props;
+const Face = (props) => {
+  const { variants, className, intent, children, style, ref, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -44,26 +43,24 @@ const Face = React.forwardRef((props, ref) => {
       children
     }
   );
-});
-const Root = React.forwardRef(
-  (props, ref) => {
-    const { label, variants, intent, className, onDismiss, ...rest } = props;
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      Face,
-      {
-        ...rest,
-        variants,
-        intent,
-        className,
-        ref,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Label, { children: label }),
-          onDismiss ? /* @__PURE__ */ jsxRuntime.jsx(Close, { onClick: onDismiss }) : null
-        ]
-      }
-    );
-  }
-);
+};
+const Root = (props) => {
+  const { label, variants, intent, className, onDismiss, ref, ...rest } = props;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Face,
+    {
+      ...rest,
+      variants,
+      intent,
+      className,
+      ref,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Label, { children: label }),
+        onDismiss ? /* @__PURE__ */ jsxRuntime.jsx(Close, { onClick: onDismiss }) : null
+      ]
+    }
+  );
+};
 const Tag = {
   Root,
   Close,

package/dist/cjs/components/TextArea/Face.js

@@ -9,7 +9,9 @@ var utils = require('./utils.js');
 const TextAreaFace = React.forwardRef(
   ({ children, variants, className, ...rest }, ref) => {
     const clones = utils.getValidChildren(children).map((el) => {
-      return React.cloneElement(el, { ...el.props, variants });
+      const element = el;
+      const elProps = element.props || {};
+      return React.cloneElement(element, { ...elProps, variants });
     });
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",

package/dist/cjs/components/Toggle.js

@@ -2,9 +2,9 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var cortexCore = require('@tecsinapse/cortex-core');
-var React = require('react');
 
-const Toggle = React.forwardRef((props, ref) => {
+const Toggle = (props) => {
+  const { ref, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -18,13 +18,13 @@ const Toggle = React.forwardRef((props, ref) => {
             className: cortexCore.styleInputElement(),
             ref,
             "data-testid": "toggle-input",
-            ...props
+            ...rest
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: cortexCore.toggle() })
       ] })
     }
   );
-});
+};
 
 exports.Toggle = Toggle;

package/dist/cjs/hooks/useDebouncedState.js

@@ -3,7 +3,7 @@
 var React = require('react');
 
 function useDebouncedState(initialState, timeoutCallback, timeoutMs = 166) {
-  const timeoutId = React.useRef();
+  const timeoutId = React.useRef(void 0);
   const [state, setState] = React.useState(initialState);
   React.useEffect(() => {
     if (timeoutId.current) clearTimeout(timeoutId.current);

package/dist/cjs/provider/ManagerContext.js

@@ -9,8 +9,7 @@ require('react-icons/lia');
 require('@internationalized/date');
 require('../components/Badge.js');
 require('react-icons/md');
-require('../components/Card.js');
-require('../components/Button.js');
+require('@tecsinapse/cortex-core');
 require('react-aria');
 require('react-stately');
 require('./MenubarContext.js');
@@ -23,17 +22,14 @@ var types = require('../components/Uploader/types.js');
 require('@floating-ui/react');
 require('currency.js');
 require('../components/Calendar/CalendarCell.js');
-require('@tecsinapse/cortex-core');
 require('react-icons/fa');
 require('react-icons/io');
 require('embla-carousel-react');
 require('embla-carousel-autoplay');
-require('../components/Checkbox.js');
 require('../components/ColorPicker.js');
 require('../components/DatePicker/DateSegment.js');
 require('../components/DatePicker/DatePickerInputBase.js');
 require('../components/GroupButton.js');
-require('../components/Hint.js');
 require('../components/Input/Box.js');
 require('../components/Input/Face.js');
 require('../components/Input/Left.js');
@@ -51,7 +47,6 @@ require('../components/Menubar/Header.js');
 require('../components/Menubar/Item.js');
 require('./CategoriesContext.js');
 require('../components/Menubar/SubItem.js');
-require('../components/Modal.js');
 require('../components/ProgressBar/Progress.js');
 require('../components/RadioButton.js');
 require('../components/Select/GroupedOptions.js');
@@ -60,16 +55,13 @@ require('../components/Select/MultiGroupedOptions.js');
 require('../components/Select/MultiOptions.js');
 require('../components/Select/Options.js');
 require('../components/Select/Trigger.js');
-require('../components/Snackbar/BaseSnackbar.js');
 require('../styles/stepNodeVariants.js');
-require('../components/Tag.js');
 require('../components/TextArea/Box.js');
 require('../components/TextArea/Face.js');
 require('../components/TextArea/Left.js');
 require('../components/TextArea/Right.js');
 require('../components/TextArea/Root.js');
 require('../components/TimePicker/TimeFieldInput.js');
-require('../components/Toggle.js');
 require('../components/Tooltip.js');
 require('react-icons/hi2');
 require('react-icons/fa6');

package/dist/esm/components/Button.js

@@ -1,9 +1,8 @@
 import { jsx } from 'react/jsx-runtime';
 import { button } from '@tecsinapse/cortex-core';
-import { forwardRef } from 'react';
 
-const Button = forwardRef((props, ref) => {
-  const { variants, intent, variant, size, children, className, ...rest } = props;
+const Button = (props) => {
+  const { variants, intent, variant, size, children, className, ref, ...rest } = props;
   return /* @__PURE__ */ jsx(
     "button",
     {
@@ -13,6 +12,6 @@ const Button = forwardRef((props, ref) => {
       children
     }
   );
-});
+};
 
 export { Button };

package/dist/esm/components/Card.js

@@ -1,10 +1,9 @@
 import { jsx } from 'react/jsx-runtime';
 import { card } from '@tecsinapse/cortex-core';
-import { forwardRef } from 'react';
 
-const Card = forwardRef((props, ref) => {
-  const { children, className, ...rest } = props;
+const Card = (props) => {
+  const { children, className, ref, ...rest } = props;
   return /* @__PURE__ */ jsx("div", { className: card({ className }), ref, ...rest, children });
-});
+};
 
 export { Card };

package/dist/esm/components/Carousel/CarouselItem.js

@@ -55,7 +55,7 @@ const CarouselItem = ({ item }) => {
           {
             type: "button",
             "data-testid": "button-link-carousel",
-            className: "z-absolute absolute bottom-deca left-[10%]",
+            className: "z-absolute absolute bottom-giga left-[10%]",
             children: item.button.title
           }
         )

package/dist/esm/components/Checkbox.js

@@ -1,10 +1,10 @@
 import { jsx } from 'react/jsx-runtime';
 import { checkbox } from '@tecsinapse/cortex-core';
-import { forwardRef, useRef, useCallback, useEffect, useImperativeHandle } from 'react';
+import { useRef, useCallback, useEffect, useImperativeHandle } from 'react';
 
-const Checkbox = forwardRef((props, ref) => {
+const Checkbox = (props) => {
   const localRef = useRef(null);
-  const { className, indeterminate, ...rest } = props;
+  const { className, indeterminate, ref, ...rest } = props;
   const setIndeterminate = useCallback((value) => {
     if (localRef?.current) {
       localRef.current.indeterminate = value;
@@ -29,6 +29,6 @@ const Checkbox = forwardRef((props, ref) => {
       ...rest
     }
   );
-});
+};
 
 export { Checkbox };

package/dist/esm/components/Hint.js

@@ -1,10 +1,9 @@
 import { jsx, Fragment } from 'react/jsx-runtime';
 import { hint } from '@tecsinapse/cortex-core';
-import { forwardRef } from 'react';
 
-const Hint = forwardRef((props, ref) => {
-  const { children, variants } = props;
-  return /* @__PURE__ */ jsx("div", { className: hint(variants), ref, children: children ?? /* @__PURE__ */ jsx(Fragment, {}) });
-});
+const Hint = (props) => {
+  const { children, variants, ref, ...rest } = props;
+  return /* @__PURE__ */ jsx("div", { className: hint(variants), ref, ...rest, children: children ?? /* @__PURE__ */ jsx(Fragment, {}) });
+};
 
 export { Hint };

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

@@ -11,14 +11,19 @@ const getValidChildren = (children) => {
 const InputFace = React.forwardRef(
   ({ children, variants, className, ...rest }, ref) => {
     const clones = getValidChildren(children).map((el) => {
-      return React.cloneElement(el, { ...el.props, variants });
+      const element = el;
+      const elProps = element.props || {};
+      return React.cloneElement(element, { ...elProps, variants });
     });
     return /* @__PURE__ */ jsx(
       "div",
       {
         "data-testid": "input-face",
         ...rest,
-        className: clsx(input(variants), className),
+        className: clsx(
+          input(variants),
+          className
+        ),
         ref,
         children: clones
       }

package/dist/esm/components/Modal.js

@@ -1,9 +1,8 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { overlay, modal } from '@tecsinapse/cortex-core';
-import { forwardRef } from 'react';
 
-const Modal = forwardRef((props, ref) => {
-  const { open, onClose, children, className, ...rest } = props;
+const Modal = (props) => {
+  const { open, onClose, children, className, ref, ...rest } = props;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       "div",
@@ -24,6 +23,6 @@ const Modal = forwardRef((props, ref) => {
       }
     )
   ] });
-});
+};
 
 export { Modal };

package/dist/esm/components/Popover/Trigger.js

@@ -11,7 +11,7 @@ const isDisabledProps = {
 };
 const PopoverTrigger = ({ children, disabled }) => {
   const { triggerProps } = usePopoverContext();
-  const isDisabled = disabled ?? children.props?.disabled;
+  const isDisabled = disabled ?? children.props.disabled;
   return cloneWithProps(children, {
     ...triggerProps,
     ...isDisabled ? isDisabledProps : {}

package/dist/esm/components/RadioButton.js

@@ -1,23 +1,20 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { radioButtonStyles } from '@tecsinapse/cortex-core';
-import { forwardRef } from 'react';
 
 const { container, input, label: labelStyle } = radioButtonStyles();
-const RadioButton = forwardRef(
-  ({ label, reversed, id, ...rest }, ref) => {
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: container({ reversed }),
-        ref,
-        "data-testid": "radio-button-container",
-        children: [
-          /* @__PURE__ */ jsx("input", { id, type: "radio", className: input(), ...rest }),
-          label ? /* @__PURE__ */ jsx("label", { htmlFor: id, className: labelStyle(), children: label }) : /* @__PURE__ */ jsx(Fragment, {})
-        ]
-      }
-    );
-  }
-);
+const RadioButton = ({ label, reversed, id, ref, ...rest }) => {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: container({ reversed }),
+      ref,
+      "data-testid": "radio-button-container",
+      children: [
+        /* @__PURE__ */ jsx("input", { id, type: "radio", className: input(), ...rest }),
+        label ? /* @__PURE__ */ jsx("label", { htmlFor: id, className: labelStyle(), children: label }) : /* @__PURE__ */ jsx(Fragment, {})
+      ]
+    }
+  );
+};
 
 export { RadioButton };

package/dist/esm/components/Snackbar/BaseSnackbar.js

@@ -1,12 +1,9 @@
 import { jsx, Fragment } from 'react/jsx-runtime';
 import { snackbar } from '@tecsinapse/cortex-core';
-import { forwardRef } from 'react';
 
-const BaseSnackbar = forwardRef(
-  (props, ref) => {
-    const { children, show, variants } = props;
-    return /* @__PURE__ */ jsx(Fragment, { children: show ? /* @__PURE__ */ jsx("div", { className: snackbar(variants), ref, "data-testid": "snackbar", children }) : /* @__PURE__ */ jsx(Fragment, {}) });
-  }
-);
+const BaseSnackbar = (props) => {
+  const { children, show, variants, ref } = props;
+  return /* @__PURE__ */ jsx(Fragment, { children: show ? /* @__PURE__ */ jsx("div", { className: snackbar(variants), ref, "data-testid": "snackbar", children }) : /* @__PURE__ */ jsx(Fragment, {}) });
+};
 
 export { BaseSnackbar };

package/dist/esm/components/Stepper/Root.js

@@ -12,8 +12,11 @@ const Root = ({
   const initialSelectedIndex = useMemo(() => {
     let initialIndex = null;
     React.Children.forEach(children, (child, index) => {
-      if (React.isValidElement(child) && child.props.selected) {
-        initialIndex = index;
+      if (React.isValidElement(child)) {
+        const element = child;
+        if (element.props.selected) {
+          initialIndex = index;
+        }
       }
     });
     return initialIndex;
@@ -39,13 +42,14 @@ const Root = ({
   const renderNode = useMemo(
     () => (child, index) => {
       if (React.isValidElement(child) && child.type === Node) {
-        return React.cloneElement(child, {
+        const element = child;
+        return React.cloneElement(element, {
           isFirst: index === 0,
           isLast: index === childrenCount - 1,
           selected: selectedNode === index,
           segmented,
           interactive,
-          onClick: () => handleNodeClick(index, child.props.onClick)
+          onClick: () => handleNodeClick(index, element.props.onClick)
         });
       }
       return null;

package/dist/esm/components/Tag.js

@@ -1,6 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { tag } from '@tecsinapse/cortex-core';
-import { forwardRef } from 'react';
 import { LiaTimesSolid } from 'react-icons/lia';
 
 const Close = ({
@@ -26,8 +25,8 @@ const Label = ({
 }) => {
   return /* @__PURE__ */ jsx("p", { className, ...rest, children });
 };
-const Face = forwardRef((props, ref) => {
-  const { variants, className, intent, children, style, ...rest } = props;
+const Face = (props) => {
+  const { variants, className, intent, children, style, ref, ...rest } = props;
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -42,26 +41,24 @@ const Face = forwardRef((props, ref) => {
       children
     }
   );
-});
-const Root = forwardRef(
-  (props, ref) => {
-    const { label, variants, intent, className, onDismiss, ...rest } = props;
-    return /* @__PURE__ */ jsxs(
-      Face,
-      {
-        ...rest,
-        variants,
-        intent,
-        className,
-        ref,
-        children: [
-          /* @__PURE__ */ jsx(Label, { children: label }),
-          onDismiss ? /* @__PURE__ */ jsx(Close, { onClick: onDismiss }) : null
-        ]
-      }
-    );
-  }
-);
+};
+const Root = (props) => {
+  const { label, variants, intent, className, onDismiss, ref, ...rest } = props;
+  return /* @__PURE__ */ jsxs(
+    Face,
+    {
+      ...rest,
+      variants,
+      intent,
+      className,
+      ref,
+      children: [
+        /* @__PURE__ */ jsx(Label, { children: label }),
+        onDismiss ? /* @__PURE__ */ jsx(Close, { onClick: onDismiss }) : null
+      ]
+    }
+  );
+};
 const Tag = {
   Root,
   Close,

package/dist/esm/components/TextArea/Face.js

@@ -7,7 +7,9 @@ import { getValidChildren } from './utils.js';
 const TextAreaFace = React.forwardRef(
   ({ children, variants, className, ...rest }, ref) => {
     const clones = getValidChildren(children).map((el) => {
-      return React.cloneElement(el, { ...el.props, variants });
+      const element = el;
+      const elProps = element.props || {};
+      return React.cloneElement(element, { ...elProps, variants });
     });
     return /* @__PURE__ */ jsx(
       "div",

package/dist/esm/components/Toggle.js

@@ -1,8 +1,8 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { styleLabelElement, styleInputElement, toggle } from '@tecsinapse/cortex-core';
-import { forwardRef } from 'react';
 
-const Toggle = forwardRef((props, ref) => {
+const Toggle = (props) => {
+  const { ref, ...rest } = props;
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -16,13 +16,13 @@ const Toggle = forwardRef((props, ref) => {
             className: styleInputElement(),
             ref,
             "data-testid": "toggle-input",
-            ...props
+            ...rest
           }
         ),
         /* @__PURE__ */ jsx("div", { className: toggle() })
       ] })
     }
   );
-});
+};
 
 export { Toggle };

package/dist/esm/hooks/useDebouncedState.js

@@ -1,7 +1,7 @@
 import { useRef, useState, useEffect } from 'react';
 
 function useDebouncedState(initialState, timeoutCallback, timeoutMs = 166) {
-  const timeoutId = useRef();
+  const timeoutId = useRef(void 0);
   const [state, setState] = useState(initialState);
   useEffect(() => {
     if (timeoutId.current) clearTimeout(timeoutId.current);

package/dist/esm/provider/ManagerContext.js

@@ -7,8 +7,7 @@ import 'react-icons/lia';
 import '@internationalized/date';
 import '../components/Badge.js';
 import 'react-icons/md';
-import '../components/Card.js';
-import '../components/Button.js';
+import '@tecsinapse/cortex-core';
 import 'react-aria';
 import 'react-stately';
 import './MenubarContext.js';
@@ -21,17 +20,14 @@ import { FileStatus } from '../components/Uploader/types.js';
 import '@floating-ui/react';
 import 'currency.js';
 import '../components/Calendar/CalendarCell.js';
-import '@tecsinapse/cortex-core';
 import 'react-icons/fa';
 import 'react-icons/io';
 import 'embla-carousel-react';
 import 'embla-carousel-autoplay';
-import '../components/Checkbox.js';
 import '../components/ColorPicker.js';
 import '../components/DatePicker/DateSegment.js';
 import '../components/DatePicker/DatePickerInputBase.js';
 import '../components/GroupButton.js';
-import '../components/Hint.js';
 import '../components/Input/Box.js';
 import '../components/Input/Face.js';
 import '../components/Input/Left.js';
@@ -49,7 +45,6 @@ import '../components/Menubar/Header.js';
 import '../components/Menubar/Item.js';
 import './CategoriesContext.js';
 import '../components/Menubar/SubItem.js';
-import '../components/Modal.js';
 import '../components/ProgressBar/Progress.js';
 import '../components/RadioButton.js';
 import '../components/Select/GroupedOptions.js';
@@ -58,16 +53,13 @@ import '../components/Select/MultiGroupedOptions.js';
 import '../components/Select/MultiOptions.js';
 import '../components/Select/Options.js';
 import '../components/Select/Trigger.js';
-import '../components/Snackbar/BaseSnackbar.js';
 import '../styles/stepNodeVariants.js';
-import '../components/Tag.js';
 import '../components/TextArea/Box.js';
 import '../components/TextArea/Face.js';
 import '../components/TextArea/Left.js';
 import '../components/TextArea/Right.js';
 import '../components/TextArea/Root.js';
 import '../components/TimePicker/TimeFieldInput.js';
-import '../components/Toggle.js';
 import '../components/Tooltip.js';
 import 'react-icons/hi2';
 import 'react-icons/fa6';

package/dist/types/components/Button.d.ts

@@ -6,5 +6,6 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
     variant?: ButtonVariants['variant'];
     size?: ButtonVariants['size'];
     children?: React.ReactNode;
+    ref?: React.Ref<HTMLButtonElement>;
 }
-export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
+export declare const Button: (props: ButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Card.d.ts

@@ -1,5 +1,6 @@
 import React, { HTMLAttributes } from 'react';
 export interface CardProps extends HTMLAttributes<HTMLDivElement> {
     children?: React.ReactNode;
+    ref?: React.Ref<HTMLDivElement>;
 }
-export declare const Card: React.ForwardRefExoticComponent<CardProps & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export declare const Card: (props: CardProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Checkbox.d.ts

@@ -1,8 +1,9 @@
 import React, { HTMLAttributes } from 'react';
 export interface CheckboxProps extends HTMLAttributes<HTMLInputElement> {
     indeterminate?: boolean;
+    ref?: React.Ref<CheckboxRef>;
 }
 export interface CheckboxRef extends HTMLAttributes<HTMLInputElement> {
     setIndeterminate: (value: boolean) => void;
 }
-export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.HTMLAttributes<HTMLInputElement> & React.RefAttributes<CheckboxRef>>;
+export declare const Checkbox: (props: CheckboxProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Hint.d.ts

@@ -1,7 +1,8 @@
 import { HintVariants } from '@tecsinapse/cortex-core';
-import React from 'react';
-export interface HintProps {
+import React, { HTMLProps } from 'react';
+export interface HintProps extends Omit<HTMLProps<HTMLDivElement>, 'className'> {
     children: React.ReactNode;
     variants?: HintVariants;
+    ref?: React.Ref<HTMLDivElement>;
 }
-export declare const Hint: React.ForwardRefExoticComponent<Omit<HintProps & Omit<React.HTMLProps<HTMLDivElement>, "className">, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Hint: (props: HintProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Masonry.d.ts

@@ -1,7 +1,7 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 export interface MasonryProps {
     columns: number;
     children?: ReactNode;
 }
-declare const Masonry: ({ children, columns }: MasonryProps) => JSX.Element;
+declare const Masonry: ({ children, columns }: MasonryProps) => React.ReactElement;
 export default Masonry;

package/dist/types/components/Modal.d.ts

@@ -1,8 +1,9 @@
 import { ReactNode, type DialogHTMLAttributes } from 'react';
-interface ModalProps {
+interface ModalProps extends DialogHTMLAttributes<HTMLDialogElement> {
     open: boolean;
     onClose: () => void;
     children?: ReactNode;
+    ref?: React.Ref<HTMLDialogElement>;
 }
-export declare const Modal: import("react").ForwardRefExoticComponent<ModalProps & DialogHTMLAttributes<HTMLDialogElement> & import("react").RefAttributes<HTMLDialogElement>>;
+export declare const Modal: (props: ModalProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/components/RadioButton.d.ts

@@ -2,5 +2,6 @@ import React, { InputHTMLAttributes } from 'react';
 export interface RadioButtonProps extends InputHTMLAttributes<HTMLInputElement> {
     label?: string;
     reversed?: boolean;
+    ref?: React.Ref<HTMLDivElement>;
 }
-export declare const RadioButton: React.ForwardRefExoticComponent<RadioButtonProps & React.RefAttributes<HTMLDivElement>>;
+export declare const RadioButton: ({ label, reversed, id, ref, ...rest }: RadioButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Select/useMultiSelectOption.d.ts

@@ -3,6 +3,6 @@ export declare const useMultiSelectOption: <T>(option: T, onSelect?: (option: T[
     value: any;
     isChecked: boolean;
     onClickOption: () => void;
-    inputRef: import("react").RefObject<HTMLInputElement>;
+    inputRef: import("react").RefObject<HTMLInputElement | null>;
     labelExtractor: (value: any) => string;
 };

package/dist/types/components/Snackbar/BaseSnackbar.d.ts

@@ -4,6 +4,7 @@ interface SnackbarProps {
     variants?: SnackbarVariants;
     children?: ReactNode;
     show: boolean;
+    ref?: React.Ref<HTMLDivElement>;
 }
-export declare const BaseSnackbar: React.ForwardRefExoticComponent<SnackbarProps & React.RefAttributes<HTMLDivElement>>;
+export declare const BaseSnackbar: (props: SnackbarProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/components/Tag.d.ts

@@ -1,14 +1,19 @@
 import { TagVariants } from '@tecsinapse/cortex-core';
 import React, { HTMLProps } from 'react';
-export interface TagProps {
+export interface TagProps extends HTMLProps<HTMLDivElement> {
     variants?: TagVariants;
     intent?: TagVariants['intent'];
     label: string;
     onDismiss?: () => void;
+    ref?: React.Ref<HTMLDivElement>;
+}
+interface FaceProps extends Pick<TagProps, 'variants' | 'intent'>, HTMLProps<HTMLDivElement> {
+    ref?: React.Ref<HTMLDivElement>;
 }
 export declare const Tag: {
-    Root: React.ForwardRefExoticComponent<Omit<TagProps & React.HTMLProps<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Root: (props: TagProps) => import("react/jsx-runtime").JSX.Element;
     Close: ({ onClick, className, ...rest }: Omit<HTMLProps<HTMLButtonElement>, "children" | "type">) => import("react/jsx-runtime").JSX.Element;
     Label: ({ children, className, ...rest }: HTMLProps<HTMLParagraphElement>) => import("react/jsx-runtime").JSX.Element;
-    Face: React.ForwardRefExoticComponent<Omit<Pick<TagProps, "intent" | "variants"> & React.HTMLProps<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Face: (props: FaceProps) => import("react/jsx-runtime").JSX.Element;
 };
+export {};

package/dist/types/components/Toggle.d.ts

@@ -1,2 +1,5 @@
-import React from 'react';
-export declare const Toggle: React.ForwardRefExoticComponent<React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement>>;
+import React, { InputHTMLAttributes } from 'react';
+export interface ToggleProps extends InputHTMLAttributes<HTMLInputElement> {
+    ref?: React.Ref<HTMLInputElement>;
+}
+export declare const Toggle: (props: ToggleProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/hooks/useCalendarCell.d.ts

@@ -5,7 +5,7 @@ interface useCalendarCellProps {
     date: CalendarDate;
 }
 export declare const useCalendarCell: ({ state, date }: useCalendarCellProps) => {
-    ref: import("react").MutableRefObject<null>;
+    ref: import("react").RefObject<null>;
     cellProps: import("@react-types/shared").DOMAttributes<import("@react-types/shared").FocusableElement>;
     buttonProps: import("@react-types/shared").DOMAttributes<import("@react-types/shared").FocusableElement>;
     isSelected: boolean;

package/dist/types/hooks/useDatePickerInput.d.ts

@@ -7,6 +7,6 @@ interface useDatePickerInputProps {
 export declare const useDatePickerInput: ({ value, onChange, minValue, maxValue, }: useDatePickerInputProps) => {
     fieldProps: import("react-aria").AriaDatePickerProps<import("react-aria").DateValue>;
     state: import("react-stately").DatePickerState;
-    ref: import("react").MutableRefObject<null>;
+    ref: import("react").RefObject<null>;
 };
 export {};

package/dist/types/hooks/useDateRangePickerInput.d.ts

@@ -9,6 +9,6 @@ export declare const useDateRangePickerInput: ({ value, onChange, minValue, maxV
     startFieldProps: import("react-aria").AriaDatePickerProps<import("react-aria").DateValue>;
     endFieldProps: import("react-aria").AriaDatePickerProps<import("react-aria").DateValue>;
     state: import("react-stately").DateRangePickerState;
-    ref: import("react").MutableRefObject<null>;
+    ref: import("react").RefObject<null>;
 };
 export {};

package/dist/types/hooks/useRangeCalendar.d.ts

@@ -9,6 +9,6 @@ export declare const useRangeCalendar: ({ value, onChange, minValue, maxValue, }
     calendarProps: import("@react-types/shared").DOMAttributes<import("@react-types/shared").FocusableElement>;
     title: string;
     state: import("react-stately").RangeCalendarState;
-    ref: import("react").MutableRefObject<null>;
+    ref: import("react").RefObject<null>;
 };
 export {};

package/dist/types/utils/react.d.ts

@@ -1,2 +1,2 @@
 import React from 'react';
-export declare function cloneWithProps(children: React.ReactElement, props: any): React.FunctionComponentElement<any>;
+export declare function cloneWithProps(children: React.ReactElement, props: React.HTMLAttributes<HTMLDivElement>): React.FunctionComponentElement<any>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tecsinapse/cortex-react",
-  "version": "1.15.3",
+  "version": "2.0.0-beta.0",
   "description": "React components based in @tecsinapse/cortex-core",
   "license": "MIT",
   "main": "dist/esm/index.js",
@@ -20,7 +20,7 @@
   "dependencies": {
     "@floating-ui/react": "^0.26.18",
     "@internationalized/date": "3.7.0",
-    "@tecsinapse/cortex-core": "1.2.0",
+    "@tecsinapse/cortex-core": "2.0.0-beta.0",
     "clsx": "2.1.1",
     "currency.js": "2.0.4",
     "embla-carousel-autoplay": "^8.0.0",
@@ -43,10 +43,10 @@
   },
   "homepage": "https://tecsinapse.github.io/design-system/",
   "peerDependencies": {
-    "react": ">=18.0.0",
-    "react-dom": ">=18.0.0",
+    "react": ">=18.0.0 || ^19.0.0",
+    "react-dom": ">=18.0.0 || ^19.0.0",
     "react-icons": ">=5.2.0",
-    "tailwind": ">=3.3.0"
+    "tailwindcss": "^4.1.16"
   },
-  "gitHead": "e618077a8d04305e7c1755a5f08b9621b8b7d82a"
-}
+  "gitHead": "093769fc2a963c315d0062216ca73f692ee3d385"
+}