@tecsinapse/cortex-react 2.2.0-beta.6 → 2.3.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tecsinapse/cortex-react",
-  "version": "2.2.0-beta.6",
+  "version": "2.3.0-beta.0",
   "description": "React components based in @tecsinapse/cortex-core",
   "license": "MIT",
   "main": "dist/esm/index.js",
@@ -20,14 +20,16 @@
   "dependencies": {
     "@floating-ui/react": "^0.26.18",
     "@internationalized/date": "3.7.0",
-    "@tecsinapse/cortex-core": "2.0.0",
+    "@tecsinapse/cortex-core": "2.1.0-beta.0",
     "clsx": "2.1.1",
+    "country-flag-icons": "^1.6.4",
     "currency.js": "2.0.4",
     "embla-carousel-autoplay": "^8.0.0",
     "embla-carousel-react": "^8.6.0",
     "react-aria": "3.38.1",
     "react-dropzone": "14.3.8",
     "react-imask": "7.6.1",
+    "react-international-phone": "^4.6.1",
     "react-spring": "9.7.5",
     "react-stately": "3.36.1",
     "sonner": "1.7.3",
@@ -48,5 +50,5 @@
     "react-icons": ">=5.2.0",
     "tailwindcss": "^4.1.16"
   },
-  "gitHead": "dc4acfa02813924f4707075b33eec14db030b521"
+  "gitHead": "a28d6b7a49fa7466507b9a5e3d5c8114e9224e83"
 }

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

@@ -1,32 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var cortexCore = require('@tecsinapse/cortex-core');
-var Option = require('./Option.js');
-var useAutocompleteGroupedOptions = require('../../hooks/useAutocompleteGroupedOptions.js');
-var SkeletonOptions = require('../Select/SkeletonOptions.js');
-
-const { groupedTitle, list } = cortexCore.selectVariants();
-const AutocompleteGroupedOptions = ({
-  onSelect,
-  groupedLabelExtractor,
-  options
-}) => {
-  const { options: _options, isLoading } = useAutocompleteGroupedOptions.useAutocompleteGroupedOptions({
-    options
-  });
-  return isLoading ? /* @__PURE__ */ jsxRuntime.jsx(SkeletonOptions.SkeletonOptions, {}) : /* @__PURE__ */ jsxRuntime.jsx("ul", { role: "listbox", className: list(), children: [..._options ?? []].map(([key, value]) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: groupedTitle(), children: groupedLabelExtractor?.(key) }),
-    value.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
-      Option.AutocompleteOption,
-      {
-        grouped: true,
-        option,
-        onSelect
-      },
-      option.value
-    ))
-  ] }, key)) });
-};
-
-exports.AutocompleteGroupedOptions = AutocompleteGroupedOptions;

package/dist/cjs/components/Autocomplete/Option.js

@@ -1,38 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var cortexCore = require('@tecsinapse/cortex-core');
-var React = require('react');
-var context = require('./context.js');
-
-const AutocompleteOption = ({
-  option,
-  onSelect,
-  grouped = false
-}) => {
-  const context$1 = React.useContext(context.AutocompleteContext);
-  if (!context$1)
-    throw new Error("AutocompleteOptions must be used within AutocompleteRoot");
-  const { setOpen } = context$1;
-  const handleSelect = React.useCallback(
-    (option2) => {
-      setOpen(false);
-      onSelect?.(option2);
-    },
-    [onSelect, setOpen]
-  );
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "li",
-    {
-      onClick: () => handleSelect(option),
-      className: cortexCore.option({
-        selected: false,
-        grouped
-      }),
-      role: "option",
-      children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate flex-1", children: option.label })
-    }
-  );
-};
-
-exports.AutocompleteOption = AutocompleteOption;

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

@@ -1,31 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var cortexCore = require('@tecsinapse/cortex-core');
-var React = require('react');
-var Option = require('./Option.js');
-var useAutocompleteOptions = require('../../hooks/useAutocompleteOptions.js');
-var SkeletonOptions = require('../Select/SkeletonOptions.js');
-
-const { list } = cortexCore.selectVariants();
-const AutocompleteOptions = ({
-  options,
-  onSelect,
-  children
-}) => {
-  const { options: _options, isLoading } = useAutocompleteOptions.useAutocompleteOptions({ options });
-  const defaultOptions = React.useMemo(
-    () => _options?.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
-      Option.AutocompleteOption,
-      {
-        option,
-        onSelect
-      },
-      option.value
-    )) ?? [],
-    [_options, onSelect]
-  );
-  return isLoading ? /* @__PURE__ */ jsxRuntime.jsx(SkeletonOptions.SkeletonOptions, {}) : /* @__PURE__ */ jsxRuntime.jsx("ul", { role: "listbox", className: list(), children: children ?? defaultOptions });
-};
-
-exports.AutocompleteOptions = AutocompleteOptions;

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

@@ -1,34 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var react = require('@floating-ui/react');
-var index = require('../Popover/index.js');
-var context = require('./context.js');
-var clsx = require('clsx');
-
-const AutocompletePopover = ({
-  children,
-  className
-}) => {
-  const context$1 = React.useContext(context.AutocompleteContext);
-  if (!context$1)
-    throw new Error("AutocompletePopover must be used within AutocompleteRoot");
-  const { triggerWidth } = context$1;
-  return /* @__PURE__ */ jsxRuntime.jsx(react.FloatingPortal, { children: /* @__PURE__ */ jsxRuntime.jsx(
-    index.Popover.Content,
-    {
-      className: clsx(
-        "bg-white shadow-md rounded-md overflow-y-auto max-h-[30vh] outline-none z-9999",
-        className
-      ),
-      style: {
-        width: triggerWidth ? `${triggerWidth}px` : "auto"
-      },
-      initialFocus: -1,
-      children
-    }
-  ) });
-};
-
-exports.AutocompletePopover = AutocompletePopover;

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

@@ -1,34 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var index = require('../Popover/index.js');
-var context = require('./context.js');
-
-const AutocompleteRoot = ({ children }) => {
-  const [triggerWidth, setTriggerWidth] = React.useState();
-  const [open, setOpen] = React.useState(false);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    context.AutocompleteContext.Provider,
-    {
-      value: {
-        open,
-        setOpen,
-        triggerWidth,
-        setTriggerWidth
-      },
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        index.Popover.Root,
-        {
-          placement: "bottom-start",
-          controlled: true,
-          isOpen: open,
-          setIsOpen: setOpen,
-          children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-full h-full", children })
-        }
-      )
-    }
-  );
-};
-
-exports.AutocompleteRoot = AutocompleteRoot;

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

@@ -1,48 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var index = require('../Popover/index.js');
-var index$1 = require('../Input/index.js');
-var context = require('./context.js');
-
-const AutocompleteTrigger = ({
-  inputValue,
-  onChange,
-  label,
-  disabled,
-  placeholder
-}) => {
-  const context$1 = React.useContext(context.AutocompleteContext);
-  if (!context$1)
-    throw new Error("AutocompleteTrigger must be used within AutocompleteRoot");
-  const { setTriggerWidth, setOpen } = context$1;
-  const triggerRef = React.useRef(null);
-  React.useEffect(() => {
-    if (triggerRef.current && setTriggerWidth) {
-      const width = triggerRef.current.getBoundingClientRect().width;
-      setTriggerWidth(width);
-    }
-  }, [triggerRef.current, setTriggerWidth]);
-  const handleChange = (event) => {
-    onChange(event);
-    if (event.target.value.length > 0) {
-      setOpen(true);
-    } else {
-      setOpen(false);
-    }
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(index.Popover.Trigger, { children: /* @__PURE__ */ jsxRuntime.jsx(
-    index$1.Input.Root,
-    {
-      label: label ?? "Selecione uma op\xE7\xE3o",
-      value: inputValue,
-      onChange: handleChange,
-      disabled,
-      placeholder,
-      ref: triggerRef
-    }
-  ) });
-};
-
-exports.AutocompleteTrigger = AutocompleteTrigger;

package/dist/cjs/components/Autocomplete/context.js

@@ -1,9 +0,0 @@
-'use strict';
-
-var React = require('react');
-
-const AutocompleteContext = React.createContext(
-  void 0
-);
-
-exports.AutocompleteContext = AutocompleteContext;

package/dist/cjs/components/Autocomplete/index.js

@@ -1,19 +0,0 @@
-'use strict';
-
-var Root = require('./Root.js');
-var Trigger = require('./Trigger.js');
-var Popover = require('./Popover.js');
-var Options = require('./Options.js');
-var Option = require('./Option.js');
-var GroupedOptions = require('./GroupedOptions.js');
-
-const Autocomplete = {
-  Root: Root.AutocompleteRoot,
-  Trigger: Trigger.AutocompleteTrigger,
-  Popover: Popover.AutocompletePopover,
-  Options: Options.AutocompleteOptions,
-  Option: Option.AutocompleteOption,
-  GroupedOptions: GroupedOptions.AutocompleteGroupedOptions
-};
-
-exports.Autocomplete = Autocomplete;

package/dist/cjs/hooks/useAutocompleteGroupedOptions.js

@@ -1,35 +0,0 @@
-'use strict';
-
-var React = require('react');
-
-const useAutocompleteGroupedOptions = ({
-  options: _options
-}) => {
-  const [options, setOptions] = React.useState();
-  const [isLoading, setIsLoading] = React.useState();
-  const [error, setError] = React.useState();
-  const initData = async (fetch) => {
-    setIsLoading(true);
-    try {
-      const result = await fetch();
-      if (result) {
-        setOptions(result ?? []);
-      }
-    } catch (e) {
-      setError(String(e));
-    } finally {
-      setIsLoading(false);
-    }
-  };
-  React.useEffect(() => {
-    if (typeof _options === "function") initData(_options);
-    else setOptions(_options);
-  }, [_options]);
-  return {
-    isLoading,
-    options,
-    error
-  };
-};
-
-exports.useAutocompleteGroupedOptions = useAutocompleteGroupedOptions;

package/dist/cjs/hooks/useAutocompleteOptions.js

@@ -1,35 +0,0 @@
-'use strict';
-
-var React = require('react');
-
-const useAutocompleteOptions = ({
-  options: _options
-}) => {
-  const [options, setOptions] = React.useState();
-  const [isLoading, setIsLoading] = React.useState();
-  const [error, setError] = React.useState();
-  const initData = React.useCallback(async (fetch) => {
-    setIsLoading(true);
-    try {
-      const result = await fetch();
-      if (result) {
-        setOptions(result ?? []);
-      }
-    } catch (e) {
-      setError(String(e));
-    } finally {
-      setIsLoading(false);
-    }
-  }, []);
-  React.useEffect(() => {
-    if (typeof _options === "function") initData(_options);
-    else setOptions(_options);
-  }, [_options]);
-  return {
-    isLoading,
-    options,
-    error
-  };
-};
-
-exports.useAutocompleteOptions = useAutocompleteOptions;

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

@@ -1,30 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { selectVariants } from '@tecsinapse/cortex-core';
-import { AutocompleteOption } from './Option.js';
-import { useAutocompleteGroupedOptions } from '../../hooks/useAutocompleteGroupedOptions.js';
-import { SkeletonOptions } from '../Select/SkeletonOptions.js';
-
-const { groupedTitle, list } = selectVariants();
-const AutocompleteGroupedOptions = ({
-  onSelect,
-  groupedLabelExtractor,
-  options
-}) => {
-  const { options: _options, isLoading } = useAutocompleteGroupedOptions({
-    options
-  });
-  return isLoading ? /* @__PURE__ */ jsx(SkeletonOptions, {}) : /* @__PURE__ */ jsx("ul", { role: "listbox", className: list(), children: [..._options ?? []].map(([key, value]) => /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx("span", { className: groupedTitle(), children: groupedLabelExtractor?.(key) }),
-    value.map((option) => /* @__PURE__ */ jsx(
-      AutocompleteOption,
-      {
-        grouped: true,
-        option,
-        onSelect
-      },
-      option.value
-    ))
-  ] }, key)) });
-};
-
-export { AutocompleteGroupedOptions };

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

@@ -1,36 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { option } from '@tecsinapse/cortex-core';
-import { useContext, useCallback } from 'react';
-import { AutocompleteContext } from './context.js';
-
-const AutocompleteOption = ({
-  option: option$1,
-  onSelect,
-  grouped = false
-}) => {
-  const context = useContext(AutocompleteContext);
-  if (!context)
-    throw new Error("AutocompleteOptions must be used within AutocompleteRoot");
-  const { setOpen } = context;
-  const handleSelect = useCallback(
-    (option2) => {
-      setOpen(false);
-      onSelect?.(option2);
-    },
-    [onSelect, setOpen]
-  );
-  return /* @__PURE__ */ jsx(
-    "li",
-    {
-      onClick: () => handleSelect(option$1),
-      className: option({
-        selected: false,
-        grouped
-      }),
-      role: "option",
-      children: /* @__PURE__ */ jsx("span", { className: "truncate flex-1", children: option$1.label })
-    }
-  );
-};
-
-export { AutocompleteOption };

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

@@ -1,29 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { selectVariants } from '@tecsinapse/cortex-core';
-import { useMemo } from 'react';
-import { AutocompleteOption } from './Option.js';
-import { useAutocompleteOptions } from '../../hooks/useAutocompleteOptions.js';
-import { SkeletonOptions } from '../Select/SkeletonOptions.js';
-
-const { list } = selectVariants();
-const AutocompleteOptions = ({
-  options,
-  onSelect,
-  children
-}) => {
-  const { options: _options, isLoading } = useAutocompleteOptions({ options });
-  const defaultOptions = useMemo(
-    () => _options?.map((option) => /* @__PURE__ */ jsx(
-      AutocompleteOption,
-      {
-        option,
-        onSelect
-      },
-      option.value
-    )) ?? [],
-    [_options, onSelect]
-  );
-  return isLoading ? /* @__PURE__ */ jsx(SkeletonOptions, {}) : /* @__PURE__ */ jsx("ul", { role: "listbox", className: list(), children: children ?? defaultOptions });
-};
-
-export { AutocompleteOptions };

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

@@ -1,32 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { useContext } from 'react';
-import { FloatingPortal } from '@floating-ui/react';
-import { Popover } from '../Popover/index.js';
-import { AutocompleteContext } from './context.js';
-import clsx from 'clsx';
-
-const AutocompletePopover = ({
-  children,
-  className
-}) => {
-  const context = useContext(AutocompleteContext);
-  if (!context)
-    throw new Error("AutocompletePopover must be used within AutocompleteRoot");
-  const { triggerWidth } = context;
-  return /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(
-    Popover.Content,
-    {
-      className: clsx(
-        "bg-white shadow-md rounded-md overflow-y-auto max-h-[30vh] outline-none z-9999",
-        className
-      ),
-      style: {
-        width: triggerWidth ? `${triggerWidth}px` : "auto"
-      },
-      initialFocus: -1,
-      children
-    }
-  ) });
-};
-
-export { AutocompletePopover };

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

@@ -1,32 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { useState } from 'react';
-import { Popover } from '../Popover/index.js';
-import { AutocompleteContext } from './context.js';
-
-const AutocompleteRoot = ({ children }) => {
-  const [triggerWidth, setTriggerWidth] = useState();
-  const [open, setOpen] = useState(false);
-  return /* @__PURE__ */ jsx(
-    AutocompleteContext.Provider,
-    {
-      value: {
-        open,
-        setOpen,
-        triggerWidth,
-        setTriggerWidth
-      },
-      children: /* @__PURE__ */ jsx(
-        Popover.Root,
-        {
-          placement: "bottom-start",
-          controlled: true,
-          isOpen: open,
-          setIsOpen: setOpen,
-          children: /* @__PURE__ */ jsx("div", { className: "relative w-full h-full", children })
-        }
-      )
-    }
-  );
-};
-
-export { AutocompleteRoot };

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

@@ -1,46 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { useContext, useRef, useEffect } from 'react';
-import { Popover } from '../Popover/index.js';
-import { Input } from '../Input/index.js';
-import { AutocompleteContext } from './context.js';
-
-const AutocompleteTrigger = ({
-  inputValue,
-  onChange,
-  label,
-  disabled,
-  placeholder
-}) => {
-  const context = useContext(AutocompleteContext);
-  if (!context)
-    throw new Error("AutocompleteTrigger must be used within AutocompleteRoot");
-  const { setTriggerWidth, setOpen } = context;
-  const triggerRef = useRef(null);
-  useEffect(() => {
-    if (triggerRef.current && setTriggerWidth) {
-      const width = triggerRef.current.getBoundingClientRect().width;
-      setTriggerWidth(width);
-    }
-  }, [triggerRef.current, setTriggerWidth]);
-  const handleChange = (event) => {
-    onChange(event);
-    if (event.target.value.length > 0) {
-      setOpen(true);
-    } else {
-      setOpen(false);
-    }
-  };
-  return /* @__PURE__ */ jsx(Popover.Trigger, { children: /* @__PURE__ */ jsx(
-    Input.Root,
-    {
-      label: label ?? "Selecione uma op\xE7\xE3o",
-      value: inputValue,
-      onChange: handleChange,
-      disabled,
-      placeholder,
-      ref: triggerRef
-    }
-  ) });
-};
-
-export { AutocompleteTrigger };

package/dist/esm/components/Autocomplete/context.js

@@ -1,7 +0,0 @@
-import { createContext } from 'react';
-
-const AutocompleteContext = createContext(
-  void 0
-);
-
-export { AutocompleteContext };

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

@@ -1,17 +0,0 @@
-import { AutocompleteRoot } from './Root.js';
-import { AutocompleteTrigger } from './Trigger.js';
-import { AutocompletePopover } from './Popover.js';
-import { AutocompleteOptions } from './Options.js';
-import { AutocompleteOption } from './Option.js';
-import { AutocompleteGroupedOptions } from './GroupedOptions.js';
-
-const Autocomplete = {
-  Root: AutocompleteRoot,
-  Trigger: AutocompleteTrigger,
-  Popover: AutocompletePopover,
-  Options: AutocompleteOptions,
-  Option: AutocompleteOption,
-  GroupedOptions: AutocompleteGroupedOptions
-};
-
-export { Autocomplete };

package/dist/esm/hooks/useAutocompleteGroupedOptions.js

@@ -1,33 +0,0 @@
-import { useState, useEffect } from 'react';
-
-const useAutocompleteGroupedOptions = ({
-  options: _options
-}) => {
-  const [options, setOptions] = useState();
-  const [isLoading, setIsLoading] = useState();
-  const [error, setError] = useState();
-  const initData = async (fetch) => {
-    setIsLoading(true);
-    try {
-      const result = await fetch();
-      if (result) {
-        setOptions(result ?? []);
-      }
-    } catch (e) {
-      setError(String(e));
-    } finally {
-      setIsLoading(false);
-    }
-  };
-  useEffect(() => {
-    if (typeof _options === "function") initData(_options);
-    else setOptions(_options);
-  }, [_options]);
-  return {
-    isLoading,
-    options,
-    error
-  };
-};
-
-export { useAutocompleteGroupedOptions };

package/dist/esm/hooks/useAutocompleteOptions.js

@@ -1,33 +0,0 @@
-import { useState, useCallback, useEffect } from 'react';
-
-const useAutocompleteOptions = ({
-  options: _options
-}) => {
-  const [options, setOptions] = useState();
-  const [isLoading, setIsLoading] = useState();
-  const [error, setError] = useState();
-  const initData = useCallback(async (fetch) => {
-    setIsLoading(true);
-    try {
-      const result = await fetch();
-      if (result) {
-        setOptions(result ?? []);
-      }
-    } catch (e) {
-      setError(String(e));
-    } finally {
-      setIsLoading(false);
-    }
-  }, []);
-  useEffect(() => {
-    if (typeof _options === "function") initData(_options);
-    else setOptions(_options);
-  }, [_options]);
-  return {
-    isLoading,
-    options,
-    error
-  };
-};
-
-export { useAutocompleteOptions };

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

@@ -1,2 +0,0 @@
-import { AutocompleteGroupedOptionsProps } from './types';
-export declare const AutocompleteGroupedOptions: ({ onSelect, groupedLabelExtractor, options, }: AutocompleteGroupedOptionsProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Autocomplete/Option.d.ts

@@ -1,2 +0,0 @@
-import { AutocompleteOptionProps } from './types';
-export declare const AutocompleteOption: ({ option, onSelect, grouped, }: AutocompleteOptionProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,2 +0,0 @@
-import { AutocompleteOptionsProps } from './types';
-export declare const AutocompleteOptions: ({ options, onSelect, children, }: AutocompleteOptionsProps) => import("react/jsx-runtime").JSX.Element;