@tecsinapse/cortex-react 2.1.0-beta.1 → 2.1.0-beta.2

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

@@ -0,0 +1,30 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+
+const PhoneInputOption = ({
+  country,
+  handleSelectCountry,
+  disableClick = false
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "flex w-full h-[2rem] items-center justify-between p-centi cursor-pointer hover:bg-gray-100",
+      onClick: () => {
+        if (!disableClick) {
+          handleSelectCountry(country);
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: country?.name }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-gray-400 text-sm", children: [
+          "+",
+          country?.dialCode
+        ] })
+      ]
+    }
+  );
+};
+
+exports.PhoneInputOption = PhoneInputOption;

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

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

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

@@ -0,0 +1,23 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('@floating-ui/react');
+var index = require('../Popover/index.js');
+var context = require('./context.js');
+
+const PhoneInputPopover = ({ children }) => {
+  const { triggerWidth } = context.usePhoneContext();
+  return /* @__PURE__ */ jsxRuntime.jsx(react.FloatingPortal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    index.Popover.Content,
+    {
+      className: "bg-white shadow-md rounded-md overflow-hidden h-full max-h-[30vh] outline-none",
+      style: {
+        zIndex: 9999,
+        width: triggerWidth ? `${triggerWidth}px` : "auto"
+      },
+      children
+    }
+  ) });
+};
+
+exports.PhoneInputPopover = PhoneInputPopover;

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

@@ -0,0 +1,61 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var index = require('../Popover/index.js');
+var clsx = require('clsx');
+var reactInternationalPhone = require('react-international-phone');
+var context = require('./context.js');
+
+const PhoneInputRoot = ({
+  children,
+  className,
+  defaultCountry,
+  value,
+  onChange
+}) => {
+  const [triggerWidth, setTriggerWidth] = React.useState();
+  const [isOpen, setIsOpen] = React.useState(false);
+  const {
+    country,
+    handlePhoneValueChange,
+    inputRef,
+    inputValue,
+    phone,
+    setCountry
+  } = reactInternationalPhone.usePhoneInput({
+    countries: reactInternationalPhone.defaultCountries,
+    onChange,
+    defaultCountry,
+    value
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    index.Popover.Root,
+    {
+      placement: "bottom-start",
+      controlled: true,
+      isOpen,
+      setIsOpen,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        context.PhoneInputContext.Provider,
+        {
+          value: {
+            triggerWidth,
+            setTriggerWidth,
+            isOpen,
+            setIsOpen,
+            country,
+            setCountry,
+            handlePhoneValueChange,
+            inputValue,
+            phone,
+            inputRef
+          },
+          children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx("relative w-full h-full", className), children })
+        }
+      )
+    }
+  );
+};
+
+exports.PhoneInputRoot = PhoneInputRoot;

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

@@ -0,0 +1,122 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var io5 = require('react-icons/io5');
+require('clsx');
+var React = require('react');
+require('../Accordion/context.js');
+require('react-icons/lia');
+require('@internationalized/date');
+require('../Badge.js');
+require('react-icons/md');
+require('@tecsinapse/cortex-core');
+require('react-aria');
+require('react-stately');
+require('../../provider/MenubarContext.js');
+require('../../provider/SnackbarProvider.js');
+require('../../provider/CalendarProvider.js');
+require('../../provider/ManagerContext.js');
+require('../Popover/Context.js');
+require('react-dropzone');
+require('uuid');
+require('@floating-ui/react');
+require('currency.js');
+require('../Calendar/CalendarCell.js');
+require('react-icons/fa');
+require('react-icons/io');
+require('embla-carousel-react');
+require('embla-carousel-autoplay');
+require('../ColorPicker.js');
+require('../DatePicker/DateSegment.js');
+var index = require('../Popover/index.js');
+require('../DatePicker/DatePickerInputBase.js');
+require('../GroupButton.js');
+var index$1 = require('../Input/index.js');
+require('../Menubar/Left.js');
+require('../../styles/menubar.js');
+require('../Menubar/Right.js');
+require('../Menubar/Dropdown.js');
+require('../Menubar/MostUsed.js');
+require('../Menubar/MostUsedItem.js');
+require('../Menubar/Header.js');
+require('../Menubar/Item.js');
+require('../../provider/CategoriesContext.js');
+require('../Menubar/SubItem.js');
+require('../ProgressBar/Progress.js');
+require('../RadioButton.js');
+require('../Select/GroupedOptions.js');
+require('../Select/context.js');
+require('../Select/MultiGroupedOptions.js');
+require('../Select/MultiOptions.js');
+require('../Select/Options.js');
+require('../Select/Trigger.js');
+require('../../styles/stepNodeVariants.js');
+require('../TextArea/Box.js');
+require('../TextArea/Face.js');
+require('../TextArea/Left.js');
+require('../TextArea/Right.js');
+require('../TextArea/Root.js');
+require('../TimePicker/TimeFieldInput.js');
+require('../Tooltip.js');
+require('react-icons/hi2');
+require('react-icons/fa6');
+require('react-dom');
+require('./Options.js');
+var context = require('./context.js');
+require('react-international-phone');
+
+const PhoneInputTrigger = ({
+  disabled = false,
+  label
+}) => {
+  const {
+    setIsOpen,
+    setTriggerWidth,
+    country,
+    handlePhoneValueChange,
+    inputValue
+  } = context.usePhoneContext();
+  const triggerRef = React.useRef(null);
+  React.useEffect(() => {
+    if (triggerRef.current && setTriggerWidth) {
+      const width = triggerRef.current.getBoundingClientRect().width;
+      setTriggerWidth(width);
+    }
+  }, [triggerRef.current, setTriggerWidth]);
+  return /* @__PURE__ */ jsxRuntime.jsx(index.Popover.Trigger, { disabled, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    index$1.Input.Face,
+    {
+      variants: { className: "outline-none border-1" },
+      ref: triggerRef,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          index$1.Input.Box,
+          {
+            value: inputValue,
+            onChange: handlePhoneValueChange,
+            placeholder: label
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(index$1.Input.Right, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: "flex items-center gap-1 cursor-pointer w-full",
+            onClick: () => setIsOpen?.(true),
+            children: [
+              country ? /* @__PURE__ */ jsxRuntime.jsx(
+                "img",
+                {
+                  src: `https://purecatamphetamine.github.io/country-flag-icons/3x2/${country?.iso2.toUpperCase()}.svg`,
+                  className: "w-[25px]"
+                }
+              ) : null,
+              /* @__PURE__ */ jsxRuntime.jsx(io5.IoChevronDown, { className: "h-full text-md" })
+            ]
+          }
+        ) })
+      ]
+    }
+  ) });
+};
+
+exports.PhoneInputTrigger = PhoneInputTrigger;

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/index.js

@@ -44,6 +44,7 @@ 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/PhoneInput/index.js');
 var useCalendar = require('./hooks/useCalendar.js');
 var useCalendarCell = require('./hooks/useCalendarCell.js');
 var useCalendarGrid = require('./hooks/useCalendarGrid.js');
@@ -127,6 +128,7 @@ exports.TimeFieldInput = TimeFieldInput.TimeFieldInput;
 exports.Toggle = Toggle.Toggle;
 exports.Tooltip = Tooltip.Tooltip;
 exports.Uploader = index$7.Uploader;
+exports.PhoneInput = index$8.PhoneInput;
 exports.useCalendar = useCalendar.useCalendar;
 exports.useCalendarCell = useCalendarCell.useCalendarCell;
 exports.useCalendarGrid = useCalendarGrid.useCalendarGrid;

package/dist/cjs/provider/ManagerContext.js

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

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

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

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

@@ -0,0 +1,107 @@
+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 { defaultCountries, parseCountry } from 'react-international-phone';
+
+const countries = defaultCountries.map((c) => {
+  return parseCountry(c);
+});
+const PhoneInputOptions = () => {
+  const { country, setCountry, setIsOpen } = usePhoneContext();
+  const [searchText, setSearchText] = useState("");
+  const filteredCountries = useMemo(() => {
+    return countries.filter(
+      (c) => c.iso2 !== country?.iso2 && c.name.includes(searchText)
+    );
+  }, [country]);
+  const handleSelect = (country2) => {
+    setCountry?.(country2.iso2);
+    setIsOpen?.(false);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "w-full h-full flex flex-col overflow-y-auto", children: [
+    /* @__PURE__ */ jsx(Input.Search, { onChange: (e) => setSearchText(e.target.value) }),
+    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 };

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

@@ -0,0 +1,21 @@
+import { jsx } from 'react/jsx-runtime';
+import { FloatingPortal } from '@floating-ui/react';
+import { Popover } from '../Popover/index.js';
+import { usePhoneContext } from './context.js';
+
+const PhoneInputPopover = ({ children }) => {
+  const { triggerWidth } = usePhoneContext();
+  return /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(
+    Popover.Content,
+    {
+      className: "bg-white shadow-md rounded-md overflow-hidden h-full max-h-[30vh] outline-none",
+      style: {
+        zIndex: 9999,
+        width: triggerWidth ? `${triggerWidth}px` : "auto"
+      },
+      children
+    }
+  ) });
+};
+
+export { PhoneInputPopover };

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

@@ -0,0 +1,59 @@
+import { jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { Popover } from '../Popover/index.js';
+import clsx from 'clsx';
+import { usePhoneInput, defaultCountries } from 'react-international-phone';
+import { PhoneInputContext } from './context.js';
+
+const PhoneInputRoot = ({
+  children,
+  className,
+  defaultCountry,
+  value,
+  onChange
+}) => {
+  const [triggerWidth, setTriggerWidth] = useState();
+  const [isOpen, setIsOpen] = useState(false);
+  const {
+    country,
+    handlePhoneValueChange,
+    inputRef,
+    inputValue,
+    phone,
+    setCountry
+  } = usePhoneInput({
+    countries: defaultCountries,
+    onChange,
+    defaultCountry,
+    value
+  });
+  return /* @__PURE__ */ jsx(
+    Popover.Root,
+    {
+      placement: "bottom-start",
+      controlled: true,
+      isOpen,
+      setIsOpen,
+      children: /* @__PURE__ */ jsx(
+        PhoneInputContext.Provider,
+        {
+          value: {
+            triggerWidth,
+            setTriggerWidth,
+            isOpen,
+            setIsOpen,
+            country,
+            setCountry,
+            handlePhoneValueChange,
+            inputValue,
+            phone,
+            inputRef
+          },
+          children: /* @__PURE__ */ jsx("div", { className: clsx("relative w-full h-full", className), children })
+        }
+      )
+    }
+  );
+};
+
+export { PhoneInputRoot };

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

@@ -0,0 +1,120 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { IoChevronDown } from 'react-icons/io5';
+import 'clsx';
+import { useRef, useEffect } from 'react';
+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 { Popover } from '../Popover/index.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 './Options.js';
+import { usePhoneContext } from './context.js';
+import 'react-international-phone';
+
+const PhoneInputTrigger = ({
+  disabled = false,
+  label
+}) => {
+  const {
+    setIsOpen,
+    setTriggerWidth,
+    country,
+    handlePhoneValueChange,
+    inputValue
+  } = usePhoneContext();
+  const triggerRef = useRef(null);
+  useEffect(() => {
+    if (triggerRef.current && setTriggerWidth) {
+      const width = triggerRef.current.getBoundingClientRect().width;
+      setTriggerWidth(width);
+    }
+  }, [triggerRef.current, setTriggerWidth]);
+  return /* @__PURE__ */ jsx(Popover.Trigger, { disabled, children: /* @__PURE__ */ jsxs(
+    Input.Face,
+    {
+      variants: { className: "outline-none border-1" },
+      ref: triggerRef,
+      children: [
+        /* @__PURE__ */ jsx(
+          Input.Box,
+          {
+            value: inputValue,
+            onChange: handlePhoneValueChange,
+            placeholder: label
+          }
+        ),
+        /* @__PURE__ */ jsx(Input.Right, { children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "flex items-center gap-1 cursor-pointer w-full",
+            onClick: () => setIsOpen?.(true),
+            children: [
+              country ? /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: `https://purecatamphetamine.github.io/country-flag-icons/3x2/${country?.iso2.toUpperCase()}.svg`,
+                  className: "w-[25px]"
+                }
+              ) : null,
+              /* @__PURE__ */ jsx(IoChevronDown, { className: "h-full text-md" })
+            ]
+          }
+        ) })
+      ]
+    }
+  ) });
+};
+
+export { PhoneInputTrigger };

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

@@ -0,0 +1,16 @@
+import { createContext, useContext } from 'react';
+
+const PhoneInputContext = createContext(
+  null
+);
+const usePhoneContext = () => {
+  const context = useContext(PhoneInputContext);
+  if (!context) {
+    throw new Error(
+      "usePhoneInputContext must be used within a usePhoneInputProvider"
+    );
+  }
+  return context;
+};
+
+export { PhoneInputContext, usePhoneContext };

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

@@ -0,0 +1,15 @@
+import { PhoneInputOption } from './Option.js';
+import { PhoneInputOptions } from './Options.js';
+import { PhoneInputPopover } from './Popover.js';
+import { PhoneInputRoot } from './Root.js';
+import { PhoneInputTrigger } from './Trigger.js';
+
+const PhoneInput = {
+  Root: PhoneInputRoot,
+  Popover: PhoneInputPopover,
+  Trigger: PhoneInputTrigger,
+  Option: PhoneInputOption,
+  Options: PhoneInputOptions
+};
+
+export { PhoneInput };

package/dist/esm/index.js

@@ -42,6 +42,7 @@ export { TimeFieldInput } from './components/TimePicker/TimeFieldInput.js';
 export { Toggle } from './components/Toggle.js';
 export { Tooltip } from './components/Tooltip.js';
 export { Uploader } from './components/Uploader/index.js';
+export { PhoneInput } from './components/PhoneInput/index.js';
 export { useCalendar } from './hooks/useCalendar.js';
 export { useCalendarCell } from './hooks/useCalendarCell.js';
 export { useCalendarGrid } from './hooks/useCalendarGrid.js';

package/dist/esm/provider/ManagerContext.js

@@ -64,6 +64,10 @@ import '../components/Tooltip.js';
 import 'react-icons/hi2';
 import 'react-icons/fa6';
 import 'react-dom';
+import '../components/PhoneInput/Options.js';
+import '../components/PhoneInput/context.js';
+import 'react-international-phone';
+import 'react-icons/io5';
 
 const ManagerContext = createContext(null);
 const ManagerProvider = ({ children }) => {

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

@@ -32,3 +32,4 @@ export * from './TimePicker';
 export * from './Toggle';
 export * from './Tooltip';
 export * from './Uploader';
+export * from './PhoneInput';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tecsinapse/cortex-react",
-  "version": "2.1.0-beta.1",
+  "version": "2.1.0-beta.2",
   "description": "React components based in @tecsinapse/cortex-core",
   "license": "MIT",
   "main": "dist/esm/index.js",
@@ -49,5 +49,5 @@
     "react-icons": ">=5.2.0",
     "tailwindcss": "^4.1.16"
   },
-  "gitHead": "13492afebcc2d6530a30969977f7a4bc301521cf"
+  "gitHead": "36974495059d2d5bba9fdaf2ef46a82eb44bfeb4"
 }