@tecsinapse/cortex-react 1.3.0-beta.31 → 1.3.0-beta.33

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

@@ -2,31 +2,31 @@
 
 var React = require('react');
 var reactImask = require('react-imask');
-var index = require('./index.js');
+var Root = require('./Root.js');
 
-const useIMaskLocal = (mask, inputProps, ref, onChangeMask) => {
-  const { ref: iMaskRef, maskRef } = reactImask.useIMask(mask, {
-    onAccept: (value, mask2) => {
-      onChangeMask?.({
-        unmaskedValue: mask2._unmaskedValue,
-        value
-      });
-    },
-    ref: ref ? ref : React.createRef()
-  });
-  React.useEffect(() => {
-    if (inputProps.value === "") {
-      maskRef.current?.updateValue();
-    }
-  }, [maskRef, inputProps.value]);
-  return {
-    iMaskRef
-  };
-};
 const InputMask = React.forwardRef(
-  ({ mask, onChange, ...rest }, ref) => {
-    const { iMaskRef } = useIMaskLocal(mask, rest, ref, onChange);
-    return /* @__PURE__ */ React.createElement(index.Input.Root, { ...rest, ref: iMaskRef });
+  ({ mask, onChange, value, controlled, ...rest }, ref) => {
+    const {
+      ref: iMaskRef,
+      setUnmaskedValue,
+      maskRef
+    } = reactImask.useIMask(mask, {
+      onAccept: (value2, mask2) => {
+        onChange?.({
+          unmaskedValue: mask2._unmaskedValue,
+          value: value2
+        });
+      },
+      ref: ref ? ref : React.createRef(),
+      defaultValue: String(value ?? "")
+    });
+    React.useEffect(() => {
+      if (value && controlled) {
+        setUnmaskedValue(String(value));
+        maskRef.current?.updateValue();
+      }
+    }, [value, controlled]);
+    return /* @__PURE__ */ React.createElement(Root.InputRoot, { ...rest, ref: iMaskRef });
   }
 );
 

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

@@ -2,12 +2,14 @@
 
 var React = require('react');
 var io5 = require('react-icons/io5');
-var index = require('./index.js');
 require('@internationalized/date');
 require('react-aria');
 require('react-stately');
 var useDebouncedState = require('../../hooks/useDebouncedState.js');
 require('@floating-ui/react');
+var Box = require('./Box.js');
+var Face = require('./Face.js');
+var Left = require('./Left.js');
 
 const InputSearch = React.forwardRef(
   ({
@@ -24,7 +26,7 @@ const InputSearch = React.forwardRef(
         onChange(searchInputEvent);
       }
     }, [bouncedTextEvent]);
-    return /* @__PURE__ */ React.createElement(index.Input.Face, { variants, className }, /* @__PURE__ */ React.createElement(index.Input.Left, null, /* @__PURE__ */ React.createElement(io5.IoSearchOutline, { "data-testid": "icon-search-left" })), /* @__PURE__ */ React.createElement(index.Input.Box, { ...rest, ref, onChange: (e) => setSearchInputEvent(e) }));
+    return /* @__PURE__ */ React.createElement(Face.InputFace, { variants, className }, /* @__PURE__ */ React.createElement(Left.InputLeft, null, /* @__PURE__ */ React.createElement(io5.IoSearchOutline, { "data-testid": "icon-search-left" })), /* @__PURE__ */ React.createElement(Box.InputBox, { ...rest, ref, onChange: (e) => setSearchInputEvent(e) }));
   }
 );
 

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

@@ -1,14 +1,14 @@
 'use strict';
 
 var React = require('react');
-var index = require('./index.js');
+var Provider = require('./Provider.js');
 
 const PopoverRoot = ({
   children,
   placement,
   trigger
 }) => {
-  return /* @__PURE__ */ React.createElement(index.Popover.Provider, { placement, trigger }, children);
+  return /* @__PURE__ */ React.createElement(Provider.PopoverProvider, { placement, trigger }, children);
 };
 
 exports.PopoverRoot = PopoverRoot;

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

@@ -15,7 +15,7 @@ const Content = ({ children }) => {
     ref,
     onClickOutside: () => setIsOpen(false)
   });
-  return /* @__PURE__ */ React.createElement("div", { className: "w-full relative bg-white", ref }, children);
+  return /* @__PURE__ */ React.createElement("div", { className: "w-full relative", ref }, children);
 };
 
 exports.Content = Content;

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

@@ -2,13 +2,13 @@
 
 var cortexCore = require('@tecsinapse/cortex-core');
 var React = require('react');
-var index = require('./index.js');
 require('@internationalized/date');
 require('react-aria');
 require('react-stately');
 require('@floating-ui/react');
 var useSelectGroupedOptions = require('../../hooks/useSelectGroupedOptions.js');
 var Context = require('../Popover/Context.js');
+var Option = require('./Option.js');
 var SkeletonOptions = require('./SkeletonOptions.js');
 var context = require('./context.js');
 
@@ -29,7 +29,7 @@ const SelectGroupedOptions = ({
     [onSelect]
   );
   return isLoading ? /* @__PURE__ */ React.createElement(SkeletonOptions.SkeletonOptions, null) : /* @__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(
-    index.Select.Option,
+    Option.SelectOption,
     {
       grouped: true,
       option,

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

@@ -2,12 +2,12 @@
 
 var cortexCore = require('@tecsinapse/cortex-core');
 var React = require('react');
-var index = require('./index.js');
 require('@internationalized/date');
 require('react-aria');
 require('react-stately');
 require('@floating-ui/react');
 var useSelectGroupedOptions = require('../../hooks/useSelectGroupedOptions.js');
+var MultiOption = require('./MultiOption.js');
 var SkeletonOptions = require('./SkeletonOptions.js');
 var context = require('./context.js');
 var utils = require('./utils.js');
@@ -32,7 +32,7 @@ const SelectMultiGroupedOptions = ({
     },
     children,
     isLoading ? /* @__PURE__ */ React.createElement(SkeletonOptions.SkeletonOptions, null) : /* @__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(
-      index.Select.MultiOption,
+      MultiOption.SelectMultiOption,
       {
         grouped: true,
         option,

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

@@ -2,12 +2,12 @@
 
 var cortexCore = require('@tecsinapse/cortex-core');
 var React = require('react');
-var index = require('./index.js');
 require('@internationalized/date');
 require('react-aria');
 require('react-stately');
 require('@floating-ui/react');
 var useSelectOptions = require('../../hooks/useSelectOptions.js');
+var MultiOption = require('./MultiOption.js');
 var SkeletonOptions = require('./SkeletonOptions.js');
 var context = require('./context.js');
 var utils = require('./utils.js');
@@ -21,7 +21,7 @@ const SelectMultiOptions = ({
   const { keyExtractor, value: currentValue = [] } = React.useContext(context.SelectContext);
   const { options: _options, isLoading } = useSelectOptions.useSelectOptions({ options });
   return /* @__PURE__ */ React.createElement(context.SelectMultiOptionsContext.Provider, { value: { onSelect, options: _options } }, isLoading ? /* @__PURE__ */ React.createElement(SkeletonOptions.SkeletonOptions, null) : /* @__PURE__ */ React.createElement("ul", { role: "select", className: list() }, children, _options?.map((option) => /* @__PURE__ */ React.createElement(
-    index.Select.MultiOption,
+    MultiOption.SelectMultiOption,
     {
       option,
       key: keyExtractor(option),

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

@@ -2,13 +2,13 @@
 
 var cortexCore = require('@tecsinapse/cortex-core');
 var React = require('react');
-var index = require('./index.js');
 require('@internationalized/date');
 require('react-aria');
 require('react-stately');
 require('@floating-ui/react');
 var useSelectOptions = require('../../hooks/useSelectOptions.js');
 var Context = require('../Popover/Context.js');
+var Option = require('./Option.js');
 var SkeletonOptions = require('./SkeletonOptions.js');
 var context = require('./context.js');
 
@@ -28,7 +28,7 @@ const SelectOptions = ({
     [onSelect]
   );
   return isLoading ? /* @__PURE__ */ React.createElement(SkeletonOptions.SkeletonOptions, null) : /* @__PURE__ */ React.createElement("ul", { role: "select", className: list() }, _options?.map((option) => /* @__PURE__ */ React.createElement(
-    index.Select.Option,
+    Option.SelectOption,
     {
       option,
       key: keyExtractor(option),

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

@@ -22,7 +22,7 @@ const SelectTrigger = ({
   return /* @__PURE__ */ React.createElement(index.Popover.Trigger, null, /* @__PURE__ */ React.createElement(
     "button",
     {
-      className: button({ disabled }),
+      className: button({ disabled, className: "bg-white" }),
       disabled,
       role: "button"
     },

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

@@ -1,30 +1,30 @@
 import React__default, { createRef, useEffect } from 'react';
 import { useIMask } from 'react-imask';
-import { Input } from './index.js';
+import { InputRoot } from './Root.js';
 
-const useIMaskLocal = (mask, inputProps, ref, onChangeMask) => {
-  const { ref: iMaskRef, maskRef } = useIMask(mask, {
-    onAccept: (value, mask2) => {
-      onChangeMask?.({
-        unmaskedValue: mask2._unmaskedValue,
-        value
-      });
-    },
-    ref: ref ? ref : createRef()
-  });
-  useEffect(() => {
-    if (inputProps.value === "") {
-      maskRef.current?.updateValue();
-    }
-  }, [maskRef, inputProps.value]);
-  return {
-    iMaskRef
-  };
-};
 const InputMask = React__default.forwardRef(
-  ({ mask, onChange, ...rest }, ref) => {
-    const { iMaskRef } = useIMaskLocal(mask, rest, ref, onChange);
-    return /* @__PURE__ */ React__default.createElement(Input.Root, { ...rest, ref: iMaskRef });
+  ({ mask, onChange, value, controlled, ...rest }, ref) => {
+    const {
+      ref: iMaskRef,
+      setUnmaskedValue,
+      maskRef
+    } = useIMask(mask, {
+      onAccept: (value2, mask2) => {
+        onChange?.({
+          unmaskedValue: mask2._unmaskedValue,
+          value: value2
+        });
+      },
+      ref: ref ? ref : createRef(),
+      defaultValue: String(value ?? "")
+    });
+    useEffect(() => {
+      if (value && controlled) {
+        setUnmaskedValue(String(value));
+        maskRef.current?.updateValue();
+      }
+    }, [value, controlled]);
+    return /* @__PURE__ */ React__default.createElement(InputRoot, { ...rest, ref: iMaskRef });
   }
 );
 

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

@@ -1,11 +1,13 @@
 import React__default, { useState, useEffect } from 'react';
 import { IoSearchOutline } from 'react-icons/io5';
-import { Input } from './index.js';
 import '@internationalized/date';
 import 'react-aria';
 import 'react-stately';
 import { useDebouncedState } from '../../hooks/useDebouncedState.js';
 import '@floating-ui/react';
+import { InputBox } from './Box.js';
+import { InputFace } from './Face.js';
+import { InputLeft } from './Left.js';
 
 const InputSearch = React__default.forwardRef(
   ({
@@ -22,7 +24,7 @@ const InputSearch = React__default.forwardRef(
         onChange(searchInputEvent);
       }
     }, [bouncedTextEvent]);
-    return /* @__PURE__ */ React__default.createElement(Input.Face, { variants, className }, /* @__PURE__ */ React__default.createElement(Input.Left, null, /* @__PURE__ */ React__default.createElement(IoSearchOutline, { "data-testid": "icon-search-left" })), /* @__PURE__ */ React__default.createElement(Input.Box, { ...rest, ref, onChange: (e) => setSearchInputEvent(e) }));
+    return /* @__PURE__ */ React__default.createElement(InputFace, { variants, className }, /* @__PURE__ */ React__default.createElement(InputLeft, null, /* @__PURE__ */ React__default.createElement(IoSearchOutline, { "data-testid": "icon-search-left" })), /* @__PURE__ */ React__default.createElement(InputBox, { ...rest, ref, onChange: (e) => setSearchInputEvent(e) }));
   }
 );
 

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

@@ -1,12 +1,12 @@
 import React__default from 'react';
-import { Popover } from './index.js';
+import { PopoverProvider } from './Provider.js';
 
 const PopoverRoot = ({
   children,
   placement,
   trigger
 }) => {
-  return /* @__PURE__ */ React__default.createElement(Popover.Provider, { placement, trigger }, children);
+  return /* @__PURE__ */ React__default.createElement(PopoverProvider, { placement, trigger }, children);
 };
 
 export { PopoverRoot };

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

@@ -13,7 +13,7 @@ const Content = ({ children }) => {
     ref,
     onClickOutside: () => setIsOpen(false)
   });
-  return /* @__PURE__ */ React__default.createElement("div", { className: "w-full relative bg-white", ref }, children);
+  return /* @__PURE__ */ React__default.createElement("div", { className: "w-full relative", ref }, children);
 };
 
 export { Content };

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

@@ -1,12 +1,12 @@
 import { selectVariants } from '@tecsinapse/cortex-core';
 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 { SelectOption } from './Option.js';
 import { SkeletonOptions } from './SkeletonOptions.js';
 import { SelectContext } from './context.js';
 
@@ -27,7 +27,7 @@ const SelectGroupedOptions = ({
     [onSelect]
   );
   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,
+    SelectOption,
     {
       grouped: true,
       option,

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

@@ -1,11 +1,11 @@
 import { selectVariants } from '@tecsinapse/cortex-core';
 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 { SelectMultiOption } from './MultiOption.js';
 import { SkeletonOptions } from './SkeletonOptions.js';
 import { SelectContext, SelectMultiOptionsContext } from './context.js';
 import { handleSelectMulti } from './utils.js';
@@ -30,7 +30,7 @@ const SelectMultiGroupedOptions = ({
     },
     children,
     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,
+      SelectMultiOption,
       {
         grouped: true,
         option,

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

@@ -1,11 +1,11 @@
 import { selectVariants } from '@tecsinapse/cortex-core';
 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 { SelectMultiOption } from './MultiOption.js';
 import { SkeletonOptions } from './SkeletonOptions.js';
 import { SelectContext, SelectMultiOptionsContext } from './context.js';
 import { handleSelectMulti } from './utils.js';
@@ -19,7 +19,7 @@ const SelectMultiOptions = ({
   const { keyExtractor, value: currentValue = [] } = useContext(SelectContext);
   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,
+    SelectMultiOption,
     {
       option,
       key: keyExtractor(option),

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

@@ -1,12 +1,12 @@
 import { selectVariants } from '@tecsinapse/cortex-core';
 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 { SelectOption } from './Option.js';
 import { SkeletonOptions } from './SkeletonOptions.js';
 import { SelectContext } from './context.js';
 
@@ -26,7 +26,7 @@ const SelectOptions = ({
     [onSelect]
   );
   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,
+    SelectOption,
     {
       option,
       key: keyExtractor(option),

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

@@ -20,7 +20,7 @@ const SelectTrigger = ({
   return /* @__PURE__ */ React__default.createElement(Popover.Trigger, null, /* @__PURE__ */ React__default.createElement(
     "button",
     {
-      className: button({ disabled }),
+      className: button({ disabled, className: "bg-white" }),
       disabled,
       role: "button"
     },

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

@@ -28,4 +28,5 @@ export interface Mask extends Record<string, any> {
 export interface InputMaskProps extends Omit<InputProps, 'onChange'> {
     onChange?: (e: InputMaskEvent) => void;
     mask: Mask;
+    controlled?: boolean;
 }

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

@@ -1,2 +1,2 @@
-import { SelectGroupedOptionsProps } from '.';
+import { SelectGroupedOptionsProps } from './types';
 export declare const SelectGroupedOptions: <T>({ onSelect, groupedLabelExtractor, options, }: SelectGroupedOptionsProps<T>) => JSX.Element;

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

@@ -1,2 +1,2 @@
-import { SelectMultiGroupedOptionsProps } from '.';
+import { SelectMultiGroupedOptionsProps } from './types';
 export declare const SelectMultiGroupedOptions: <T>({ onSelect, groupedLabelExtractor, options, children, }: SelectMultiGroupedOptionsProps<T>) => JSX.Element;

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

@@ -1,2 +1,2 @@
-import { SelectMultiOptionsProps } from '.';
+import { SelectMultiOptionsProps } from './types';
 export declare const SelectMultiOptions: <T>({ onSelect, options, children, }: SelectMultiOptionsProps<T>) => JSX.Element;

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

@@ -1,2 +1,2 @@
-import { SelectOptionsProps } from '.';
+import { SelectOptionsProps } from './types';
 export declare const SelectOptions: <T>({ onSelect, options, }: SelectOptionsProps<T>) => JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tecsinapse/cortex-react",
-  "version": "1.3.0-beta.31",
+  "version": "1.3.0-beta.33",
   "description": "React components based in @tecsinapse/cortex-core",
   "license": "MIT",
   "main": "dist/esm/index.js",
@@ -43,5 +43,5 @@
     "react-dom": ">=18.0.0",
     "tailwind": ">=3.3.0"
   },
-  "gitHead": "cac77d615452fa145511f48fe32c76d4e10f79b1"
+  "gitHead": "f996aec807a7de3b51e645fe600c9e976369b35b"
 }