@tecsinapse/cortex-react 2.2.1-beta.0 → 2.2.1-beta.2

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

@@ -0,0 +1,19 @@
+'use strict';
+
+var React = require('react');
+
+const PhoneInputContext = React.createContext(
+  null
+);
+const usePhoneContext = () => {
+  const context = React.useContext(PhoneInputContext);
+  if (!context) {
+    throw new Error(
+      "usePhoneInputContext must be used within a usePhoneInputProvider"
+    );
+  }
+  return context;
+};
+
+exports.PhoneInputContext = PhoneInputContext;
+exports.usePhoneContext = usePhoneContext;

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

@@ -0,0 +1,17 @@
+'use strict';
+
+var Option = require('./Option.js');
+var Options = require('./Options.js');
+var Popover = require('./Popover.js');
+var Root = require('./Root.js');
+var Trigger = require('./Trigger.js');
+
+const PhoneInput = {
+  Root: Root.PhoneInputRoot,
+  Popover: Popover.PhoneInputPopover,
+  Trigger: Trigger.PhoneInputTrigger,
+  Option: Option.PhoneInputOption,
+  Options: Options.PhoneInputOptions
+};
+
+exports.PhoneInput = PhoneInput;

package/dist/cjs/components/ScrollableDigitSelector.js

@@ -46,7 +46,7 @@ const ScrollableDigitSelector = ({
         {
           className: clsx(
             "p-micro rounded-micro border-1 border-transparent hover:bg-primary-light hover:border-primary cursor-pointer",
-            value === val && "bg-primary-medium text-light"
+            value === val && "bg-primary-medium text-on-primary"
           ),
           children: formatValue(val)
         }

package/dist/cjs/components/TimePicker/TimePickerSelector.js

@@ -105,7 +105,7 @@ const TimePickerSelector = ({
                 {
                   className: clsx(
                     dayPeriodStyle,
-                    !isPM && "bg-primary-medium text-light"
+                    !isPM && "bg-primary-medium text-on-primary"
                   ),
                   children: "AM"
                 }
@@ -122,7 +122,7 @@ const TimePickerSelector = ({
                 {
                   className: clsx(
                     dayPeriodStyle,
-                    isPM && "bg-primary-medium text-light"
+                    isPM && "bg-primary-medium text-on-primary"
                   ),
                   children: "PM"
                 }

package/dist/cjs/components/Uploader/Files.js

@@ -10,7 +10,7 @@ const Files = ({
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white w-full border-2 p-deca flex flex-col overflow-y-auto rounded-mili h-[18rem]", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-mili items-center mb-deca", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center w-deca h-deca bg-primary-medium rounded-full text-micro text-light", children: `${files.length}` }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center w-deca h-deca bg-primary-medium rounded-full text-micro text-on-primary", children: `${files.length}` }),
       /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-md font-semibold", "data-testid": "upload-progress", children: uploadProgressText })
     ] }),
     files.map((file, index) => /* @__PURE__ */ jsxRuntime.jsx(Upload.File, { file, index, onDelete }, file.uid))

package/dist/cjs/hooks/useAutocompleteGroupedOptions.js

@@ -0,0 +1,35 @@
+'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

@@ -0,0 +1,35 @@
+'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/cjs/index.js

@@ -44,6 +44,8 @@ var TimeFieldInput = require('./components/TimePicker/TimeFieldInput.js');
 var Toggle = require('./components/Toggle.js');
 var Tooltip = require('./components/Tooltip.js');
 var index$7 = require('./components/Uploader/index.js');
+var index$8 = require('./components/Autocomplete/index.js');
+var index$9 = require('./components/PhoneInput/index.js');
 var useCalendar = require('./hooks/useCalendar.js');
 var useCalendarCell = require('./hooks/useCalendarCell.js');
 var useCalendarGrid = require('./hooks/useCalendarGrid.js');
@@ -127,6 +129,8 @@ exports.TimeFieldInput = TimeFieldInput.TimeFieldInput;
 exports.Toggle = Toggle.Toggle;
 exports.Tooltip = Tooltip.Tooltip;
 exports.Uploader = index$7.Uploader;
+exports.Autocomplete = index$8.Autocomplete;
+exports.PhoneInput = index$9.PhoneInput;
 exports.useCalendar = useCalendar.useCalendar;
 exports.useCalendarCell = useCalendarCell.useCalendarCell;
 exports.useCalendarGrid = useCalendarGrid.useCalendarGrid;

package/dist/cjs/provider/ManagerContext.js

@@ -66,6 +66,14 @@ require('../components/Tooltip.js');
 require('react-icons/hi2');
 require('react-icons/fa6');
 require('react-dom');
+require('../components/Autocomplete/context.js');
+require('../components/Autocomplete/Options.js');
+require('../components/Autocomplete/GroupedOptions.js');
+require('../components/PhoneInput/Options.js');
+require('../components/PhoneInput/context.js');
+require('react-international-phone');
+require('react-icons/io5');
+require('country-flag-icons/react/3x2');
 
 const ManagerContext = React.createContext(null);
 const ManagerProvider = ({ children }) => {

package/dist/cjs/service/SnackbarSonner.js

@@ -35,6 +35,38 @@ class SnackbarSonner {
       { ...this._options, ...options }
     );
   }
+  async promise(promise, config) {
+    const { loading, success, error } = config;
+    const id = this.show(loading.type ?? "info", loading.message, {
+      ...loading.options,
+      duration: loading.options?.duration ?? Infinity
+    });
+    try {
+      await promise;
+      if (!success) {
+        sonner.toast.dismiss(id);
+      } else {
+        const msg = success?.message ?? "Opera\xE7\xE3o conclu\xEDda com sucesso.";
+        this.show(success?.type ?? "success", msg, {
+          ...success?.options,
+          id,
+          duration: success?.options?.duration ?? this._options?.duration ?? 5e3
+        });
+      }
+    } catch (err) {
+      if (!error) {
+        sonner.toast.dismiss(id);
+      } else {
+        const msg = error?.message ?? "Ocorreu um erro inesperado.";
+        this.show(error?.type ?? "error", msg, {
+          ...error?.options,
+          id,
+          duration: error?.options?.duration ?? this._options?.duration ?? 5e3
+        });
+      }
+    }
+    return promise;
+  }
 }
 
 exports.SnackbarSonner = SnackbarSonner;

package/dist/cjs/styles/calendar-cell.js

@@ -15,17 +15,17 @@ const calendarCell = tailwindVariants.tv({
     },
     isSelected: {
       true: {
-        cell: "bg-primary-medium border-2 border-primary-medium text-light hover:bg-primary-medium"
+        cell: "bg-primary-medium border-2 border-primary-medium text-on-primary hover:bg-primary-medium"
       }
     },
     isSelectionStart: {
       true: {
-        cell: "bg-primary-medium border-2 border-primary-medium rounded-r-none text-light"
+        cell: "bg-primary-medium border-2 border-primary-medium rounded-r-none text-on-primary"
       }
     },
     isSelectionEnd: {
       true: {
-        cell: "bg-primary-medium border-2 border-primary-medium rounded-l-none text-light"
+        cell: "bg-primary-medium border-2 border-primary-medium rounded-l-none text-on-primary"
       }
     },
     inRange: {

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

@@ -0,0 +1,40 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { selectVariants } from '@tecsinapse/cortex-core';
+import { useContext } from 'react';
+import { AutocompleteOption } from './Option.js';
+import { useAutocompleteGroupedOptions } from '../../hooks/useAutocompleteGroupedOptions.js';
+import { SkeletonOptions } from '../Select/SkeletonOptions.js';
+import { AutocompleteContext } from './context.js';
+
+const { groupedTitle, list } = selectVariants();
+const AutocompleteGroupedOptions = ({
+  onSelect,
+  groupedLabelExtractor,
+  options
+}) => {
+  const { options: _options, isLoading } = useAutocompleteGroupedOptions({
+    options
+  });
+  const context = useContext(
+    AutocompleteContext
+  );
+  if (!context)
+    throw new Error(
+      "AutocompleteGroupedOptions must be used within AutocompleteRoot"
+    );
+  const { keyExtractor } = context;
+  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
+      },
+      keyExtractor(option)
+    ))
+  ] }, key)) });
+};
+
+export { AutocompleteGroupedOptions };

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

@@ -0,0 +1,38 @@
+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, labelExtractor } = 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: labelExtractor(option$1) })
+    }
+  );
+};
+
+export { AutocompleteOption };

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

@@ -0,0 +1,34 @@
+import { jsx } from 'react/jsx-runtime';
+import { selectVariants } from '@tecsinapse/cortex-core';
+import { useContext } from 'react';
+import { AutocompleteOption } from './Option.js';
+import { useAutocompleteOptions } from '../../hooks/useAutocompleteOptions.js';
+import { SkeletonOptions } from '../Select/SkeletonOptions.js';
+import { AutocompleteContext } from './context.js';
+
+const { list } = selectVariants();
+const AutocompleteOptions = ({
+  options,
+  onSelect,
+  children
+}) => {
+  const context = useContext(
+    AutocompleteContext
+  );
+  if (!context)
+    throw new Error("AutocompleteOptions must be used within AutocompleteRoot");
+  const { keyExtractor } = context;
+  const { options: _options, isLoading } = useAutocompleteOptions({
+    options
+  });
+  return isLoading ? /* @__PURE__ */ jsx(SkeletonOptions, {}) : /* @__PURE__ */ jsx("ul", { role: "listbox", className: list(), children: children ?? _options?.map((option) => /* @__PURE__ */ jsx(
+    AutocompleteOption,
+    {
+      option,
+      onSelect
+    },
+    keyExtractor(option)
+  )) });
+};
+
+export { AutocompleteOptions };

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

@@ -0,0 +1,32 @@
+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

@@ -0,0 +1,38 @@
+import { jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { Popover } from '../Popover/index.js';
+import { AutocompleteContext } from './context.js';
+
+const AutocompleteRoot = ({
+  keyExtractor,
+  labelExtractor,
+  children
+}) => {
+  const [triggerWidth, setTriggerWidth] = useState();
+  const [open, setOpen] = useState(false);
+  return /* @__PURE__ */ jsx(
+    AutocompleteContext.Provider,
+    {
+      value: {
+        open,
+        setOpen,
+        triggerWidth,
+        setTriggerWidth,
+        keyExtractor,
+        labelExtractor
+      },
+      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

@@ -0,0 +1,45 @@
+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("div", { ref: triggerRef, children: /* @__PURE__ */ jsx(
+    Input.Root,
+    {
+      label: label ?? "Selecione uma op\xE7\xE3o",
+      value: inputValue,
+      onChange: handleChange,
+      disabled,
+      placeholder
+    }
+  ) }) });
+};
+
+export { AutocompleteTrigger };

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

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

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

@@ -0,0 +1,17 @@
+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/components/PhoneInput/FlagIcon.js

@@ -0,0 +1,25 @@
+import { jsx } from 'react/jsx-runtime';
+import * as Flags from 'country-flag-icons/react/3x2';
+
+const FlagIcon = ({
+  countryCode,
+  className = "w-[25px]",
+  title
+}) => {
+  if (!countryCode) return null;
+  const upperCode = countryCode.toUpperCase();
+  const FlagComponent = Flags[upperCode];
+  if (!FlagComponent) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    FlagComponent,
+    {
+      className,
+      title: title || upperCode,
+      "aria-label": `Flag of ${upperCode}`
+    }
+  );
+};
+
+export { FlagIcon };

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

@@ -0,0 +1,27 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const PhoneInputOption = ({
+  country,
+  handleSelectCountry,
+  disableClick = false
+}) => {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      className: "flex w-full h-[2rem] items-center justify-between p-centi cursor-pointer hover:bg-secondary-xlight bg-inherit",
+      onClick: () => {
+        handleSelectCountry(country);
+      },
+      disabled: disableClick,
+      children: [
+        /* @__PURE__ */ jsx("span", { children: country?.name }),
+        /* @__PURE__ */ jsxs("span", { className: "text-secondary-light text-sm", children: [
+          "+",
+          country?.dialCode
+        ] })
+      ]
+    }
+  );
+};
+
+export { PhoneInputOption };

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

@@ -0,0 +1,119 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useState, useMemo } from 'react';
+import { Divider } from '../Divider.js';
+import { usePhoneContext } from './context.js';
+import { PhoneInputOption } from './Option.js';
+import 'clsx';
+import '../Accordion/context.js';
+import 'react-icons/lia';
+import '@internationalized/date';
+import '../Badge.js';
+import 'react-icons/md';
+import '@tecsinapse/cortex-core';
+import 'react-aria';
+import 'react-stately';
+import '../../provider/MenubarContext.js';
+import '../../provider/SnackbarProvider.js';
+import '../../provider/CalendarProvider.js';
+import '../../provider/ManagerContext.js';
+import '../Popover/Context.js';
+import 'react-dropzone';
+import 'uuid';
+import '@floating-ui/react';
+import 'currency.js';
+import '../Calendar/CalendarCell.js';
+import 'react-icons/fa';
+import 'react-icons/io';
+import 'embla-carousel-react';
+import 'embla-carousel-autoplay';
+import '../ColorPicker.js';
+import '../DatePicker/DateSegment.js';
+import '../DatePicker/DatePickerInputBase.js';
+import '../GroupButton.js';
+import { Input } from '../Input/index.js';
+import '../Menubar/Left.js';
+import '../../styles/menubar.js';
+import '../Menubar/Right.js';
+import '../Menubar/Dropdown.js';
+import '../Menubar/MostUsed.js';
+import '../Menubar/MostUsedItem.js';
+import '../Menubar/Header.js';
+import '../Menubar/Item.js';
+import '../../provider/CategoriesContext.js';
+import '../Menubar/SubItem.js';
+import '../ProgressBar/Progress.js';
+import '../RadioButton.js';
+import '../Select/GroupedOptions.js';
+import '../Select/context.js';
+import '../Select/MultiGroupedOptions.js';
+import '../Select/MultiOptions.js';
+import '../Select/Options.js';
+import '../Select/Trigger.js';
+import '../../styles/stepNodeVariants.js';
+import '../TextArea/Box.js';
+import '../TextArea/Face.js';
+import '../TextArea/Left.js';
+import '../TextArea/Right.js';
+import '../TextArea/Root.js';
+import '../TimePicker/TimeFieldInput.js';
+import '../Tooltip.js';
+import 'react-icons/hi2';
+import 'react-icons/fa6';
+import 'react-dom';
+import 'react-icons/io5';
+import '../Autocomplete/context.js';
+import '../Autocomplete/Options.js';
+import '../Autocomplete/GroupedOptions.js';
+import { defaultCountries, parseCountry } from 'react-international-phone';
+import 'country-flag-icons/react/3x2';
+
+const countries = defaultCountries.map((c) => {
+  return parseCountry(c);
+});
+const PhoneInputOptions = ({
+  hasSearch = true
+}) => {
+  const { country, setCountry, setIsOpen } = usePhoneContext();
+  const [searchText, setSearchText] = useState("");
+  const filteredCountries = useMemo(() => {
+    return countries.filter(
+      (c) => c.iso2 !== country?.iso2 && (c.name.toLowerCase().includes(searchText.toLowerCase()) || c.dialCode.includes(searchText))
+    );
+  }, [country, searchText]);
+  const handleSelect = (country2) => {
+    setCountry?.(country2.iso2);
+    setIsOpen?.(false);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "w-full h-full flex flex-col overflow-y-auto", children: [
+    hasSearch ? /* @__PURE__ */ jsx(
+      Input.Search,
+      {
+        onChange: (e) => setSearchText(e.target.value),
+        variants: { className: "mx-deca my-centi outline-none" }
+      }
+    ) : null,
+    country ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        PhoneInputOption,
+        {
+          country,
+          handleSelectCountry: handleSelect,
+          disableClick: true
+        }
+      ),
+      /* @__PURE__ */ jsx(Divider, {})
+    ] }) : null,
+    filteredCountries.map((country2) => {
+      return /* @__PURE__ */ jsx(
+        PhoneInputOption,
+        {
+          country: country2,
+          handleSelectCountry: handleSelect
+        },
+        `${country2.dialCode} ${country2.iso2}`
+      );
+    })
+  ] });
+};
+
+export { PhoneInputOptions };