@tecsinapse/cortex-react 1.3.0-beta.25 → 1.3.0-beta.27

package/dist/esm/components/RadioButton.js

@@ -1,18 +1,18 @@
 import { radioButtonStyles } from '@tecsinapse/cortex-core';
-import React, { forwardRef } from 'react';
+import React__default, { forwardRef } from 'react';
 
 const { container, input, label: labelStyle } = radioButtonStyles();
 const RadioButton = forwardRef(
   ({ label, reversed, id, ...rest }, ref) => {
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React__default.createElement(
       "div",
       {
         className: container({ reversed }),
         ref,
         "data-testid": "radio-button-container"
       },
-      /* @__PURE__ */ React.createElement("input", { id, type: "radio", className: input(), ...rest }),
-      label ? /* @__PURE__ */ React.createElement("label", { htmlFor: id, className: labelStyle() }, label) : /* @__PURE__ */ React.createElement(React.Fragment, null)
+      /* @__PURE__ */ React__default.createElement("input", { id, type: "radio", className: input(), ...rest }),
+      label ? /* @__PURE__ */ React__default.createElement("label", { htmlFor: id, className: labelStyle() }, label) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null)
     );
   }
 );

package/dist/esm/components/Select/Content.js

@@ -1,9 +1,9 @@
-import React, { useRef } from 'react';
+import React__default, { useRef } from 'react';
 import '@internationalized/date';
 import 'react-aria';
 import 'react-stately';
-import { useOutsideClickListener } from '../../hooks/useOutsideClickListener.js';
 import '@floating-ui/react';
+import { useOutsideClickListener } from '../../hooks/useOutsideClickListener.js';
 import { usePopoverContext } from '../Popover/Context.js';
 
 const Content = ({ children }) => {
@@ -13,7 +13,7 @@ const Content = ({ children }) => {
     ref,
     onClickOutside: () => setIsOpen(false)
   });
-  return /* @__PURE__ */ React.createElement("div", { className: "w-full relative bg-white", ref }, children);
+  return /* @__PURE__ */ React__default.createElement("div", { className: "w-full relative bg-white", ref }, children);
 };
 
 export { Content };

package/dist/esm/components/Select/GroupedOptions.js

@@ -1,7 +1,13 @@
 import { selectVariants } from '@tecsinapse/cortex-core';
-import React, { useContext, useCallback } from 'react';
+import React__default, { useContext, useCallback } from 'react';
 import { Select } from './index.js';
+import '@internationalized/date';
+import 'react-aria';
+import 'react-stately';
+import '@floating-ui/react';
+import { useSelectGroupedOptions } from '../../hooks/useSelectGroupedOptions.js';
 import { usePopoverContext } from '../Popover/Context.js';
+import { SkeletonOptions } from './SkeletonOptions.js';
 import { SelectContext } from './context.js';
 
 const { groupedTitle, list } = selectVariants();
@@ -12,6 +18,7 @@ const SelectGroupedOptions = ({
 }) => {
   const { keyExtractor } = useContext(SelectContext);
   const { setIsOpen } = usePopoverContext();
+  const { options: _options, isLoading } = useSelectGroupedOptions({ options });
   const handleSelect = useCallback(
     (option) => {
       onSelect(option);
@@ -19,7 +26,7 @@ const SelectGroupedOptions = ({
     },
     [onSelect]
   );
-  return /* @__PURE__ */ React.createElement("ul", { role: "select", className: list() }, [...options ?? []].map(([key, value]) => /* @__PURE__ */ React.createElement("div", { key }, /* @__PURE__ */ React.createElement("span", { className: groupedTitle() }, groupedLabelExtractor?.(key)), value.map((option) => /* @__PURE__ */ React.createElement(
+  return isLoading ? /* @__PURE__ */ React__default.createElement(SkeletonOptions, null) : /* @__PURE__ */ React__default.createElement("ul", { role: "select", className: list() }, [..._options ?? []].map(([key, value]) => /* @__PURE__ */ React__default.createElement("div", { key }, /* @__PURE__ */ React__default.createElement("span", { className: groupedTitle() }, groupedLabelExtractor?.(key)), value.map((option) => /* @__PURE__ */ React__default.createElement(
     Select.Option,
     {
       grouped: true,

package/dist/esm/components/Select/MultiCheckAllOptions.js

@@ -1,5 +1,5 @@
 import { option, checkbox } from '@tecsinapse/cortex-core';
-import React, { useContext, useMemo, useCallback } from 'react';
+import React__default, { useContext, useMemo, useCallback } from 'react';
 import { SelectContext, SelectMultiOptionsContext } from './context.js';
 
 const SelectMultiCheckAllOptions = ({
@@ -31,15 +31,15 @@ const SelectMultiCheckAllOptions = ({
       onSelect(updateSelected);
     }
   }, [options, onSelect]);
-  return options?.length ? /* @__PURE__ */ React.createElement("div", { className: option(), onClick: checkAll }, /* @__PURE__ */ React.createElement(
+  return options?.length ? /* @__PURE__ */ React__default.createElement("div", { className: option(), onClick: checkAll }, /* @__PURE__ */ React__default.createElement(
     "input",
     {
       type: "checkbox",
       className: checkbox(),
-      onChange: checkAll,
+      onChange: () => void 0,
       checked: isChecked
     }
-  ), /* @__PURE__ */ React.createElement("span", null, checkAllLabel)) : /* @__PURE__ */ React.createElement(React.Fragment, null);
+  ), /* @__PURE__ */ React__default.createElement("span", null, checkAllLabel)) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null);
 };
 
 export { SelectMultiCheckAllOptions };

package/dist/esm/components/Select/MultiGroupedOptions.js

@@ -1,6 +1,12 @@
 import { selectVariants } from '@tecsinapse/cortex-core';
-import React, { useContext, useMemo } from 'react';
+import React__default, { useContext, useMemo } from 'react';
 import { Select } from './index.js';
+import '@internationalized/date';
+import 'react-aria';
+import 'react-stately';
+import '@floating-ui/react';
+import { useSelectGroupedOptions } from '../../hooks/useSelectGroupedOptions.js';
+import { SkeletonOptions } from './SkeletonOptions.js';
 import { SelectContext, SelectMultiOptionsContext } from './context.js';
 import { handleSelectMulti } from './utils.js';
 
@@ -12,17 +18,18 @@ const SelectMultiGroupedOptions = ({
   children
 }) => {
   const { value: currentValue = [], keyExtractor } = useContext(SelectContext);
+  const { options: _options, isLoading } = useSelectGroupedOptions({ options });
   const flattenMap = useMemo(
-    () => options ? Array.from(options?.values()).flatMap((value) => value) : [],
+    () => _options ? Array.from(_options?.values()).flatMap((value) => value) : [],
     [options]
   );
-  return /* @__PURE__ */ React.createElement("ul", { role: "select", className: list() }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(
     SelectMultiOptionsContext.Provider,
     {
       value: { onSelect, options: flattenMap }
     },
     children,
-    [...options ?? []].map(([key, value]) => /* @__PURE__ */ React.createElement("div", { key }, /* @__PURE__ */ React.createElement("span", { className: groupedTitle() }, groupedLabelExtractor?.(key)), value.map((option) => /* @__PURE__ */ React.createElement(
+    isLoading ? /* @__PURE__ */ React__default.createElement(SkeletonOptions, null) : /* @__PURE__ */ React__default.createElement("ul", { role: "select", className: list() }, [..._options ?? []].map(([key, value]) => /* @__PURE__ */ React__default.createElement("div", { key }, /* @__PURE__ */ React__default.createElement("span", { className: groupedTitle() }, groupedLabelExtractor?.(key)), value.map((option) => /* @__PURE__ */ React__default.createElement(
       Select.MultiOption,
       {
         grouped: true,
@@ -35,8 +42,8 @@ const SelectMultiGroupedOptions = ({
           keyExtractor
         )
       }
-    ))))
-  ));
+    )))))
+  );
 };
 
 export { SelectMultiGroupedOptions };

package/dist/esm/components/Select/MultiOption.js

@@ -1,5 +1,5 @@
 import { option, checkbox } from '@tecsinapse/cortex-core';
-import React, { useContext, useRef, useMemo, useCallback } from 'react';
+import React__default, { useContext, useRef, useMemo, useCallback } from 'react';
 import { SelectContext } from './context.js';
 
 const SelectMultiOption = ({
@@ -17,14 +17,14 @@ const SelectMultiOption = ({
     onSelectOption(option$1);
     inputRef.current?.click();
   }, [onSelectOption, inputRef]);
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(
     "li",
     {
       onClick: onClickOption,
       className: option({ grouped }),
       role: "option"
     },
-    /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React__default.createElement(
       "input",
       {
         type: "checkbox",

package/dist/esm/components/Select/MultiOptions.js

@@ -1,6 +1,12 @@
 import { selectVariants } from '@tecsinapse/cortex-core';
-import React, { useContext } from 'react';
+import React__default, { useContext } from 'react';
 import { Select } from './index.js';
+import '@internationalized/date';
+import 'react-aria';
+import 'react-stately';
+import '@floating-ui/react';
+import { useSelectOptions } from '../../hooks/useSelectOptions.js';
+import { SkeletonOptions } from './SkeletonOptions.js';
 import { SelectContext, SelectMultiOptionsContext } from './context.js';
 import { handleSelectMulti } from './utils.js';
 
@@ -11,7 +17,8 @@ const SelectMultiOptions = ({
   children
 }) => {
   const { keyExtractor, value: currentValue = [] } = useContext(SelectContext);
-  return /* @__PURE__ */ React.createElement(SelectMultiOptionsContext.Provider, { value: { onSelect, options } }, /* @__PURE__ */ React.createElement("ul", { role: "select", className: list() }, children, (options ?? []).map((option) => /* @__PURE__ */ React.createElement(
+  const { options: _options, isLoading } = useSelectOptions({ options });
+  return /* @__PURE__ */ React__default.createElement(SelectMultiOptionsContext.Provider, { value: { onSelect, options: _options } }, isLoading ? /* @__PURE__ */ React__default.createElement(SkeletonOptions, null) : /* @__PURE__ */ React__default.createElement("ul", { role: "select", className: list() }, children, _options?.map((option) => /* @__PURE__ */ React__default.createElement(
     Select.MultiOption,
     {
       option,

package/dist/esm/components/Select/Option.js

@@ -1,5 +1,5 @@
 import { option } from '@tecsinapse/cortex-core';
-import React, { useContext } from 'react';
+import React__default, { useContext } from 'react';
 import { SelectContext } from './context.js';
 
 const SelectOption = ({
@@ -8,7 +8,7 @@ const SelectOption = ({
   grouped = false
 }) => {
   const { keyExtractor, labelExtractor, value } = useContext(SelectContext);
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(
     "li",
     {
       onClick: () => onSelectOption(option$1),

package/dist/esm/components/Select/Options.js

@@ -1,7 +1,13 @@
 import { selectVariants } from '@tecsinapse/cortex-core';
-import React, { useContext, useCallback } from 'react';
+import React__default, { useContext, useCallback } from 'react';
 import { Select } from './index.js';
+import '@internationalized/date';
+import 'react-aria';
+import 'react-stately';
+import '@floating-ui/react';
+import { useSelectOptions } from '../../hooks/useSelectOptions.js';
 import { usePopoverContext } from '../Popover/Context.js';
+import { SkeletonOptions } from './SkeletonOptions.js';
 import { SelectContext } from './context.js';
 
 const { list } = selectVariants();
@@ -11,6 +17,7 @@ const SelectOptions = ({
 }) => {
   const { keyExtractor } = useContext(SelectContext);
   const { setIsOpen } = usePopoverContext();
+  const { options: _options, isLoading } = useSelectOptions({ options });
   const handleSelect = useCallback(
     (option) => {
       onSelect(option);
@@ -18,7 +25,7 @@ const SelectOptions = ({
     },
     [onSelect]
   );
-  return /* @__PURE__ */ React.createElement("ul", { role: "select", className: list() }, (options ?? []).map((option) => /* @__PURE__ */ React.createElement(
+  return isLoading ? /* @__PURE__ */ React__default.createElement(SkeletonOptions, null) : /* @__PURE__ */ React__default.createElement("ul", { role: "select", className: list() }, _options?.map((option) => /* @__PURE__ */ React__default.createElement(
     Select.Option,
     {
       option,

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

@@ -1,8 +1,8 @@
-import React from 'react';
+import React__default from 'react';
 import { Popover } from '../Popover/index.js';
 
 const SelectPopover = ({ children }) => {
-  return /* @__PURE__ */ React.createElement(Popover.Content, { className: "bg-white max-h-[30vh] w-full overflow-y-scroll gap-y-mili flex flex-col p-0" }, children);
+  return /* @__PURE__ */ React__default.createElement(Popover.Content, { className: "bg-white max-h-[30vh] w-full overflow-y-scroll gap-y-mili flex flex-col p-0" }, children);
 };
 
 export { SelectPopover };

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 import { Popover } from '../Popover/index.js';
 import { Content } from './Content.js';
 import { SelectContext } from './context.js';
@@ -9,7 +9,7 @@ const SelectRoot = ({
   keyExtractor,
   labelExtractor
 }) => {
-  return /* @__PURE__ */ React.createElement(Popover.Provider, null, /* @__PURE__ */ React.createElement(Popover.Root, { placement: "bottom", trigger: "click" }, /* @__PURE__ */ React.createElement(SelectContext.Provider, { value: { value, keyExtractor, labelExtractor } }, /* @__PURE__ */ React.createElement(Content, null, children))));
+  return /* @__PURE__ */ React__default.createElement(Popover.Provider, null, /* @__PURE__ */ React__default.createElement(Popover.Root, { placement: "bottom", trigger: "click" }, /* @__PURE__ */ React__default.createElement(SelectContext.Provider, { value: { value, keyExtractor, labelExtractor } }, /* @__PURE__ */ React__default.createElement(Content, null, children))));
 };
 
 export { SelectRoot };

package/dist/esm/components/Select/SkeletonOptions.js

@@ -0,0 +1,9 @@
+import React__default from 'react';
+import { Skeleton } from '../Skeleton.js';
+
+const optionSkeletonStyle = "w-full px-deca my-nano h-[30px]";
+const SkeletonOptions = () => {
+  return /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-col gap-y-nano" }, Array.from(Array(10).keys()).map((value) => /* @__PURE__ */ React__default.createElement(Skeleton, { key: value }, /* @__PURE__ */ React__default.createElement("div", { className: optionSkeletonStyle }))));
+};
+
+export { SkeletonOptions };

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

@@ -1,5 +1,5 @@
 import { selectVariants } from '@tecsinapse/cortex-core';
-import React, { useContext, useMemo } from 'react';
+import React__default, { useContext, useMemo } from 'react';
 import { IoChevronDownOutline } from 'react-icons/io5';
 import { Popover } from '../Popover/index.js';
 import { SelectContext } from './context.js';
@@ -13,15 +13,15 @@ const SelectTrigger = ({ label, disabled }) => {
     if (value?.length > 1) return `${value.length} items selected`;
     return labelExtractor(value);
   }, [label, value]);
-  return /* @__PURE__ */ React.createElement(Popover.Trigger, null, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(Popover.Trigger, null, /* @__PURE__ */ React__default.createElement(
     "button",
     {
       className: button({ disabled }),
       disabled,
       role: "button"
     },
-    /* @__PURE__ */ React.createElement("span", { "data-testid": "select-placeholder" }, placeholder),
-    /* @__PURE__ */ React.createElement(IoChevronDownOutline, null)
+    /* @__PURE__ */ React__default.createElement("span", { "data-testid": "select-placeholder" }, placeholder),
+    /* @__PURE__ */ React__default.createElement(IoChevronDownOutline, null)
   ));
 };
 

package/dist/esm/components/Skeleton.js

@@ -1,12 +1,8 @@
 import clsx from 'clsx';
-import React from 'react';
+import React__default from 'react';
 
-const Skeleton = ({
-  className,
-  children,
-  ...rest
-}) => {
-  return /* @__PURE__ */ React.createElement(
+const Skeleton = ({ className, children, ...rest }) => {
+  return /* @__PURE__ */ React__default.createElement(
     "div",
     {
       ...rest,

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

@@ -1,10 +1,10 @@
-import React, { forwardRef } from 'react';
 import { snackbar } from '@tecsinapse/cortex-core';
+import React__default, { forwardRef } from 'react';
 
 const BaseSnackbar = forwardRef(
   (props, ref) => {
     const { children, show, variants } = props;
-    return /* @__PURE__ */ React.createElement(React.Fragment, null, show ? /* @__PURE__ */ React.createElement("div", { className: snackbar(variants), ref, "data-testid": "snackbar" }, children) : /* @__PURE__ */ React.createElement(React.Fragment, null));
+    return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, show ? /* @__PURE__ */ React__default.createElement("div", { className: snackbar(variants), ref, "data-testid": "snackbar" }, children) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null));
   }
 );
 

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 import { IoMdInformationCircleOutline, IoMdClose } from 'react-icons/io';
 import { BaseSnackbar } from './BaseSnackbar.js';
 
@@ -6,13 +6,13 @@ const DefaultSnack = ({
   text,
   onDismiss,
   variants
-}) => /* @__PURE__ */ React.createElement(BaseSnackbar, { show: true, variants: { intent: variants?.intent } }, /* @__PURE__ */ React.createElement("div", { className: "flex justify-between items-center flex-row gap-x-mili" }, /* @__PURE__ */ React.createElement(
+}) => /* @__PURE__ */ React__default.createElement(BaseSnackbar, { show: true, variants: { intent: variants?.intent } }, /* @__PURE__ */ React__default.createElement("div", { className: "flex justify-between items-center flex-row gap-x-mili" }, /* @__PURE__ */ React__default.createElement(
   IoMdInformationCircleOutline,
   {
     className: "w-[20px] h-[20px] shrink-0",
     "data-testid": "icon-info"
   }
-), /* @__PURE__ */ React.createElement("p", null, text), /* @__PURE__ */ React.createElement(
+), /* @__PURE__ */ React__default.createElement("p", null, text), /* @__PURE__ */ React__default.createElement(
   IoMdClose,
   {
     "data-testid": "icon-close",

package/dist/esm/components/Table.js

@@ -1,42 +1,42 @@
 import { tHead, tRow, tHeadCell, hr, tCell, tFoot, tRoot } from '@tecsinapse/cortex-core';
-import React from 'react';
+import React__default from 'react';
 
 const THead = ({
   children,
   className,
   ...rest
-}) => /* @__PURE__ */ React.createElement("thead", { className: tHead({ className }), "data-testid": "thead", ...rest }, children);
+}) => /* @__PURE__ */ React__default.createElement("thead", { className: tHead({ className }), "data-testid": "thead", ...rest }, children);
 const TRow = ({
   children,
   className,
   ...rest
-}) => /* @__PURE__ */ React.createElement("tr", { className: tRow({ className }), "data-testid": "trow", ...rest }, children);
+}) => /* @__PURE__ */ React__default.createElement("tr", { className: tRow({ className }), "data-testid": "trow", ...rest }, children);
 const THeadCell = ({
   children,
   className,
   ...rest
-}) => /* @__PURE__ */ React.createElement("th", { className: tHeadCell({ className }), "data-testid": "thead-cell", ...rest }, children);
+}) => /* @__PURE__ */ React__default.createElement("th", { className: tHeadCell({ className }), "data-testid": "thead-cell", ...rest }, children);
 const TRowHeader = ({
   children
-}) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("tr", { className: tRow(), "data-testid": "trow-header" }, children), /* @__PURE__ */ React.createElement("tr", { className: tRow() }, /* @__PURE__ */ React.createElement("td", { colSpan: 99 }, /* @__PURE__ */ React.createElement("hr", { className: hr() }))));
+}) => /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("tr", { className: tRow(), "data-testid": "trow-header" }, children), /* @__PURE__ */ React__default.createElement("tr", { className: tRow() }, /* @__PURE__ */ React__default.createElement("td", { colSpan: 99 }, /* @__PURE__ */ React__default.createElement("hr", { className: hr() }))));
 const TCell = ({
   children,
   className,
   ...rest
-}) => /* @__PURE__ */ React.createElement("td", { className: tCell({ className }), "data-testid": "tcell", ...rest }, children);
+}) => /* @__PURE__ */ React__default.createElement("td", { className: tCell({ className }), "data-testid": "tcell", ...rest }, children);
 const TFoot = ({
   children,
   className,
   ...rest
-}) => /* @__PURE__ */ React.createElement("tfoot", { className: tFoot({ className }), "data-testid": "tfoot", ...rest }, children);
+}) => /* @__PURE__ */ React__default.createElement("tfoot", { className: tFoot({ className }), "data-testid": "tfoot", ...rest }, children);
 const Table = ({
   children,
   className,
   ...rest
-}) => /* @__PURE__ */ React.createElement("table", { className: tRoot({ className }), "data-testid": "table", ...rest }, children);
+}) => /* @__PURE__ */ React__default.createElement("table", { className: tRoot({ className }), "data-testid": "table", ...rest }, children);
 const Td = ({
   children,
   ...rest
-}) => /* @__PURE__ */ React.createElement("td", { "data-testid": "td", ...rest }, children);
+}) => /* @__PURE__ */ React__default.createElement("td", { "data-testid": "td", ...rest }, children);
 
 export { TCell, TFoot, THead, THeadCell, TRow, TRowHeader, Table, Td };

package/dist/esm/components/Tag.js

@@ -1,9 +1,9 @@
 import { tag } from '@tecsinapse/cortex-core';
-import React, { forwardRef } from 'react';
+import React__default, { forwardRef } from 'react';
 
 const Tag = forwardRef((props, ref) => {
   const { label, variants } = props;
-  return /* @__PURE__ */ React.createElement("div", { className: tag(variants), ref }, /* @__PURE__ */ React.createElement("p", null, label));
+  return /* @__PURE__ */ React__default.createElement("div", { className: tag(variants), ref }, /* @__PURE__ */ React__default.createElement("p", null, label));
 });
 
 export { Tag };

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

@@ -0,0 +1,45 @@
+import { inputBox, labelStyle } from '@tecsinapse/cortex-core';
+import clsx from 'clsx';
+import React__default from 'react';
+
+const TextAreaBox = React__default.forwardRef(
+  ({
+    id,
+    name,
+    variants,
+    label,
+    placeholder,
+    rows,
+    className,
+    ...rest
+  }, ref) => {
+    return /* @__PURE__ */ React__default.createElement("div", { className: "flex w-full flex-col" }, /* @__PURE__ */ React__default.createElement(
+      "textarea",
+      {
+        "data-testid": "textarea-box",
+        ref,
+        id: id ?? name,
+        name,
+        placeholder: placeholder ?? " ",
+        className: clsx(
+          inputBox(placeholder, label, className),
+          "resize-none mt-mili"
+        ),
+        rows,
+        ...rest
+      }
+    ), /* @__PURE__ */ React__default.createElement(
+      "label",
+      {
+        htmlFor: id ?? name,
+        className: labelStyle({
+          intent: variants?.intent,
+          placeholder
+        })
+      },
+      label
+    ));
+  }
+);
+
+export { TextAreaBox };

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

@@ -0,0 +1,25 @@
+import { input } from '@tecsinapse/cortex-core';
+import clsx from 'clsx';
+import React__default from 'react';
+import { getValidChildren } from './utils.js';
+
+const TextAreaFace = React__default.forwardRef(
+  ({ children, variants, className, ...rest }, ref) => {
+    const clones = getValidChildren(children).map((el) => {
+      return React__default.cloneElement(el, { ...el.props, variants });
+    });
+    return /* @__PURE__ */ React__default.createElement(
+      "div",
+      {
+        ref,
+        className: clsx(input(variants), className),
+        "data-testid": "textarea-face",
+        id: "textarea-face",
+        ...rest
+      },
+      clones
+    );
+  }
+);
+
+export { TextAreaFace };

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

@@ -0,0 +1,8 @@
+import clsx from 'clsx';
+import React__default from 'react';
+
+const TextAreaLeft = React__default.forwardRef(({ children, className, ...rest }, ref) => {
+  return /* @__PURE__ */ React__default.createElement("div", { className: clsx(className, "mr-2.5"), ...rest, ref }, children);
+});
+
+export { TextAreaLeft };

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

@@ -0,0 +1,8 @@
+import clsx from 'clsx';
+import React__default from 'react';
+
+const TextAreaRight = React__default.forwardRef(({ children, className, ...rest }, ref) => {
+  return /* @__PURE__ */ React__default.createElement("div", { className: clsx(className, "ml-2.5"), ...rest, ref }, children);
+});
+
+export { TextAreaRight };

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

@@ -0,0 +1,9 @@
+import React__default from 'react';
+import { TextAreaBox } from './Box.js';
+import { TextAreaFace } from './Face.js';
+
+const TextAreaRoot = React__default.forwardRef(({ variants, className, ...rest }, ref) => {
+  return /* @__PURE__ */ React__default.createElement(TextAreaFace, { variants, className }, /* @__PURE__ */ React__default.createElement(TextAreaBox, { ref, ...rest }));
+});
+
+export { TextAreaRoot };

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

@@ -0,0 +1,15 @@
+import { TextAreaBox } from './Box.js';
+import { TextAreaFace } from './Face.js';
+import { TextAreaLeft } from './Left.js';
+import { TextAreaRight } from './Right.js';
+import { TextAreaRoot } from './Root.js';
+
+const TextArea = {
+  Root: TextAreaRoot,
+  Face: TextAreaFace,
+  Box: TextAreaBox,
+  Left: TextAreaLeft,
+  Right: TextAreaRight
+};
+
+export { TextArea };

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

@@ -0,0 +1,9 @@
+import React__default from 'react';
+
+const getValidChildren = (children) => {
+  return React__default.Children.toArray(children).filter(
+    (el) => React__default.isValidElement(el)
+  );
+};
+
+export { getValidChildren };

package/dist/esm/components/TimeField/TimeField.js

@@ -1,10 +1,10 @@
-import React from 'react';
+import React__default from 'react';
 import { useTimeField } from '../../hooks/useTimeField.js';
 import { DateSegment } from '../DatePicker/DateSegment.js';
 
 const TimeField = (props) => {
   const { fieldProps, ref, state } = useTimeField(props);
-  return /* @__PURE__ */ React.createElement("div", { ...fieldProps, ref, className: "flex flex-row" }, state.segments.map((segment, i) => /* @__PURE__ */ React.createElement(DateSegment, { key: i, segment, state })));
+  return /* @__PURE__ */ React__default.createElement("div", { ...fieldProps, ref, className: "flex flex-row" }, state.segments.map((segment, i) => /* @__PURE__ */ React__default.createElement(DateSegment, { key: i, segment, state })));
 };
 
 export { TimeField };

package/dist/esm/components/TimeField/TimeFieldInput.js

@@ -1,19 +1,19 @@
 import { labelStyle, inputBox } from '@tecsinapse/cortex-core';
-import React from 'react';
+import React__default from 'react';
 import { Input } from '../Input/index.js';
 import { TimeField } from './TimeField.js';
 
 const TimeFieldInput = (props) => {
   const { onChange, value, label, variants } = props;
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
     Input.Face,
     {
       variants,
       className: "flex flex-row",
       "data-testid": "time-field-input"
     },
-    /* @__PURE__ */ React.createElement("span", { className: labelStyle({}) }, label),
-    /* @__PURE__ */ React.createElement("div", { className: inputBox("", label) }, /* @__PURE__ */ React.createElement(TimeField, { onChange, value }))
+    /* @__PURE__ */ React__default.createElement("span", { className: labelStyle({}) }, label),
+    /* @__PURE__ */ React__default.createElement("div", { className: inputBox("", label) }, /* @__PURE__ */ React__default.createElement(TimeField, { onChange, value }))
   ));
 };
 

package/dist/esm/components/Toggle.js

@@ -1,14 +1,14 @@
 import { styleLabelElement, styleInputElement, toggle } from '@tecsinapse/cortex-core';
-import React, { forwardRef } from 'react';
+import React__default, { forwardRef } from 'react';
 
 const Toggle = forwardRef((props, ref) => {
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(
     "div",
     {
       className: "flex flex-row items-center gap-x-centi",
       "data-testid": "toggle-div"
     },
-    /* @__PURE__ */ React.createElement("label", { className: styleLabelElement() }, /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React__default.createElement("label", { className: styleLabelElement() }, /* @__PURE__ */ React__default.createElement(
       "input",
       {
         type: "checkbox",
@@ -17,7 +17,7 @@ const Toggle = forwardRef((props, ref) => {
         "data-testid": "toggle-input",
         ...props
       }
-    ), /* @__PURE__ */ React.createElement("div", { className: toggle() }))
+    ), /* @__PURE__ */ React__default.createElement("div", { className: toggle() }))
   );
 });