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

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

@@ -8,9 +8,9 @@ const Files = ({
   onDelete,
   uploadProgressText = "Upload(s) in progress"
 }) => {
-  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: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-surface-overlay 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-white", 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/components/Uploader/Manager.js

@@ -47,7 +47,7 @@ const Manager = ({
                 children: min ? /* @__PURE__ */ jsxRuntime.jsx(io5.IoChevronUp, {}) : /* @__PURE__ */ jsxRuntime.jsx(io5.IoChevronDown, {})
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx("h3", { "data-testid": "upload-progress", children: isLoading ? uploadProgressText : uploadSuccessText }),
+            /* @__PURE__ */ jsxRuntime.jsx("h3", { "data-testid": "upload-progress", className: "font-bold text-h4", children: isLoading ? uploadProgressText : uploadSuccessText }),
             /* @__PURE__ */ jsxRuntime.jsx(
               Button.Button,
               {

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

@@ -18,7 +18,7 @@ const Modal = ({
       {
         open,
         onClose,
-        className: "flex flex-col bg-secondary-xlight rounded-mili min-w-[70vw] max-w-[95vh] max-h-[95vh] overflow-auto",
+        className: "flex flex-col bg-surface-base rounded-mili min-w-[70vw] max-w-[95vh] max-h-[95vh] overflow-auto text-default",
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center justify-between mb-deca", children: [
             /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-deca font-semibold ml-tera flex-1 text-center", children: title }),

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,11 @@ 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');
+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

@@ -4,7 +4,7 @@ var tailwindVariants = require('tailwind-variants');
 
 const calendarCell = tailwindVariants.tv({
   slots: {
-    cell: "text-center rounded-mili text-black hover:bg-primary-light",
+    cell: "text-center rounded-mili hover:bg-primary-light",
     button: "flex aspect-square items-center justify-center"
   },
   variants: {
@@ -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-white 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-white"
       }
     },
     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-white"
       }
     },
     inRange: {
@@ -35,7 +35,7 @@ const calendarCell = tailwindVariants.tv({
     },
     isDisabled: {
       true: {
-        cell: "text-secondary-light cursor-default  hover:bg-white-500",
+        cell: "text-content-minimal cursor-default  hover:bg-surface-overlay",
         button: "cursor-default"
       }
     }

package/dist/cjs/styles/date-picker-input-base.js

@@ -9,7 +9,7 @@ const datePickerInputBase = tailwindVariants.tv({
   variants: {
     disabled: {
       true: {
-        icon: "text-secondary-light cursor-default"
+        icon: "text-content-minimal cursor-default"
       }
     }
   }

package/dist/cjs/styles/date-segment.js

@@ -4,12 +4,12 @@ var tailwindVariants = require('tailwind-variants');
 
 const dateSegment = tailwindVariants.tv({
   slots: {
-    base: "focus:outline-none focus:bg-secondary-light"
+    base: "focus:outline-none focus:bg-content-minimal"
   },
   variants: {
     disabled: {
       true: {
-        base: "text-secondary-light"
+        base: "text-content-minimal"
       }
     }
   }

package/dist/cjs/styles/groupButton.js

@@ -4,12 +4,12 @@ var tailwindVariants = require('tailwind-variants');
 
 const groupButton = tailwindVariants.tv({
   slots: {
-    button: "border-[1px] border-secondary-medium px-centi py-mili items-center flex text-sub font-bold",
-    inactive: "bg-white text-secondary-medium disabled:bg-secondary-light",
+    button: "border-[1px] border-content-low px-centi py-mili items-center flex text-sub font-bold",
+    inactive: "bg-surface-overlay text-content-low disabled:bg-content-minimal",
     firstButton: "first:rounded-l-mili first:border-r-0",
     lastButton: "last:rounded-r-mili last:border-l-0",
     container: "flex flex-row h-[2rem]",
-    active: "text-white bg-secondary-medium"
+    active: "text-white bg-content-low"
   }
 });
 

package/dist/cjs/styles/menubar.js

@@ -4,10 +4,10 @@ var tailwindVariants = require('tailwind-variants');
 
 const menubar = tailwindVariants.tv({
   slots: {
-    header: "relative w-screen px-kilo py-deca flex flex-row md:justify-between bg-white z-header sm:justify-start",
+    header: "relative w-screen px-kilo py-deca flex flex-row md:justify-between bg-surface-overlay z-header sm:justify-start",
     left: "flex items-center w-fit",
     right: "flex items-center gap-x-deca hidden sm:flex",
-    dropdown: "w-full bg-white flex-1 shadow-default z-popover px-[8vw] absolute"
+    dropdown: "w-full bg-surface-overlay flex-1 shadow-default z-popover px-[8vw] absolute"
   },
   variants: {
     show: {
@@ -21,7 +21,7 @@ const menubar = tailwindVariants.tv({
 const mostUsed = tailwindVariants.tv({
   slots: {
     container: "mb-kilo",
-    label: "font-bold mb-centi",
+    label: "font-bold mb-centi text-default",
     containerList: "gap-x-kilo flex flex-row"
   }
 });
@@ -29,26 +29,26 @@ const mostUsedItem = tailwindVariants.tv({
   slots: {
     container: "flex-1 py-mili",
     title: "text-primary-medium font-bold text-base",
-    category: "text-secondary-medium text-label"
+    category: "text-content-low text-label"
   }
 });
 const item = tailwindVariants.tv({
   slots: {
-    container: "flex flex-row gap-x-deca items-center text-secondary-dark hover:cursor-pointer text-base",
+    container: "flex flex-row gap-x-deca items-center text-content-medium hover:cursor-pointer text-base",
     textBehavior: "hover:text-primary-medium",
     icon: "text-primary-medium hover:cursor-pointer"
   }
 });
 const category = tailwindVariants.tv({
   slots: {
-    text: "mb-mili font-bold",
-    hr: "mb-mili border-0 h-px bg-secondary-light",
+    text: "mb-mili font-bold text-default",
+    hr: "mb-mili border-0 h-px bg-content-high",
     container: "flex flex-col gap-y-mili"
   }
 });
 const subItem = tailwindVariants.tv({
   slots: {
-    container: "pl-deca text-sub border-l-[1px] border-primary-medium text-secondary-dark hover:text-primary-medium cursor-pointer"
+    container: "pl-deca text-sub border-l-[1px] border-primary-medium text-content-medium hover:text-primary-medium cursor-pointer"
   }
 });
 const animate = tailwindVariants.tv({

package/dist/cjs/styles/progressBar.js

@@ -5,7 +5,7 @@ var tailwindVariants = require('tailwind-variants');
 const ProgressVariants = tailwindVariants.tv({
   slots: {
     container: "relative",
-    bar: "h-1.5 w-full overflow-hidden bg-secondary-xlight",
+    bar: "h-1.5 w-full overflow-hidden bg-content-inverse",
     progress: "w-full h-full rounded-mili"
   },
   variants: {

package/dist/cjs/styles/stepNodeVariants.js

@@ -30,8 +30,8 @@ const StepNodeVariants = tailwindVariants.tv({
         content: "font-bold"
       },
       false: {
-        content: "text-secondary-medium",
-        separator: "bg-secondary-light"
+        content: "text-content-low",
+        separator: "bg-content-minimal"
       }
     },
     selected: {

package/dist/cjs/styles/time-field-input.js

@@ -9,7 +9,7 @@ const timePickerInputBase = tailwindVariants.tv({
   variants: {
     disabled: {
       true: {
-        icon: "text-secondary-light cursor-default"
+        icon: "text-content-minimal cursor-default"
       }
     }
   }

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

@@ -33,7 +33,7 @@ const AccordionTrigger = ({
     "div",
     {
       className: clsx(
-        "flex justify-between align-center border-secondary-light cursor-pointer",
+        "flex justify-between align-center border-content-minimal cursor-pointer",
         { "mr-deca": floating && direction === "horizontal" },
         { "mb-deca": floating && direction === "vertical" },
         { "border-r flex-col px-mili": direction === "horizontal" },
@@ -45,12 +45,12 @@ const AccordionTrigger = ({
           "div",
           {
             className: clsx(
-              "rounded-mili border border-secondary-light flex align-center justify-center p-micro",
+              "rounded-mili border border-content-minimal flex align-center justify-center p-micro",
               {
-                "absolute -translate-x-micro translate-y-deca bg-white": floating && direction === "horizontal"
+                "absolute -translate-x-micro translate-y-deca bg-surface-overlay": floating && direction === "horizontal"
               },
               {
-                "absolute -translate-y-micro translate-x-deca bg-white": floating && direction === "vertical"
+                "absolute -translate-y-micro translate-x-deca bg-surface-overlay": floating && direction === "vertical"
               },
               className
             ),
@@ -58,7 +58,7 @@ const AccordionTrigger = ({
               LiaAngleRightSolid,
               {
                 className: clsx(
-                  "text-secondary-medium transition-transform duration-200",
+                  "text-content-low transition-transform duration-200",
                   {
                     "rotate-180": invertedArrow ? !open : open
                   }
@@ -68,7 +68,7 @@ const AccordionTrigger = ({
               LiaAngleDownSolid,
               {
                 className: clsx(
-                  "text-secondary-medium transition-transform duration-200",
+                  "text-content-low transition-transform duration-200",
                   {
                     "rotate-180": invertedArrow ? !open : open
                   }

package/dist/esm/components/Avatar.js

@@ -14,7 +14,7 @@ const Avatar = ({ src, name, className, ...rest }) => {
     {
       ...rest,
       className: clsx(
-        "rounded-pill bg-secondary-dark h-mega flex items-center justify-center cursor-pointer aspect-square",
+        "rounded-pill bg-content-medium h-mega flex items-center justify-center cursor-pointer aspect-square",
         className
       ),
       children: src && !hasError ? /* @__PURE__ */ jsx(

package/dist/esm/components/Breadcrumbs/BreadcrumbItem.js

@@ -15,7 +15,7 @@ const BreadcrumbItem = ({
       {
         className: clsx(
           "no-underline",
-          isLast ? "text-secondary-medium cursor-default" : "text-secondary-xdark cursor-pointer"
+          isLast ? "text-content-low cursor-default" : "text-content-medium cursor-pointer"
         ),
         children: title
       }

package/dist/esm/components/Calendar/CalendarGrid.js

@@ -21,7 +21,7 @@ const CalendarGrid = ({ state }) => {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: "bg-white rounded-micro px-deca py-mili",
+      className: "bg-surface-overlay rounded-micro px-deca py-mili",
       "data-testid": "calendar-grid",
       children: /* @__PURE__ */ jsxs("table", { ...gridProps, className: "border-separate border-spacing-y-nano", children: [
         /* @__PURE__ */ jsx("thead", { ...headerProps, children: /* @__PURE__ */ jsx(CalendarGridHeaderRow, { weekDays }) }),

package/dist/esm/components/ColorPicker.js

@@ -4,19 +4,28 @@ import { forwardRef } from 'react';
 
 const Box = forwardRef((props, ref) => {
   const { id, className, ...rest } = props;
-  return /* @__PURE__ */ jsx("div", { className: clsx("w-tera h-kilo border overflow-hidden relative", className), children: /* @__PURE__ */ jsx(
-    "input",
+  return /* @__PURE__ */ jsx(
+    "div",
     {
-      ...rest,
-      id,
-      type: "color",
-      className: "bg-transparent cursor-pointer disabled:opacity-50 disabled:cursor-default absolute -top-1.5 -right-1 w-peta h-giga",
-      ref
+      className: clsx(
+        "w-tera h-kilo border overflow-hidden relative",
+        className
+      ),
+      children: /* @__PURE__ */ jsx(
+        "input",
+        {
+          ...rest,
+          id,
+          type: "color",
+          className: "bg-transparent cursor-pointer disabled:opacity-50 disabled:cursor-default absolute -top-1.5 -right-1 w-peta h-giga",
+          ref
+        }
+      )
     }
-  ) });
+  );
 });
 const Face = ({ children }) => {
-  return /* @__PURE__ */ jsx("div", { className: "rounded-mili p-mili shadow-default bg-white flex flex-row items-center gap-2", children });
+  return /* @__PURE__ */ jsx("div", { className: "rounded-mili p-mili shadow-default bg-default flex flex-row items-center gap-2", children });
 };
 const Label = ({
   children,

package/dist/esm/components/Kanban.js

@@ -7,7 +7,7 @@ const Root = ({ children, className, ...rest }) => {
     {
       ...rest,
       className: clsx(
-        "border border-dashed border-secondary-medium rounded-mili bg-secondary-xlight overflow-hidden",
+        "border border-dashed border-content-low rounded-mili bg-content-inverse overflow-hidden",
         className
       ),
       children

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-content-inverse bg-inherit",
+      onClick: () => {
+        handleSelectCountry(country);
+      },
+      disabled: disableClick,
+      children: [
+        /* @__PURE__ */ jsx("span", { children: country?.name }),
+        /* @__PURE__ */ jsxs("span", { className: "text-content-minimal text-sm", children: [
+          "+",
+          country?.dialCode
+        ] })
+      ]
+    }
+  );
+};
+
+export { PhoneInputOption };

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

@@ -0,0 +1,116 @@
+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';
+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 };

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

@@ -0,0 +1,20 @@
+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-surface-overlay shadow-md rounded-md overflow-hidden h-full max-h-[30vh] outline-none z-9999",
+      style: {
+        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,
+  onChange,
+  ...rest
+}) => {
+  const [triggerWidth, setTriggerWidth] = useState();
+  const [isOpen, setIsOpen] = useState(false);
+  const {
+    country,
+    handlePhoneValueChange,
+    inputRef,
+    inputValue,
+    phone,
+    setCountry
+  } = usePhoneInput({
+    countries: defaultCountries,
+    onChange: ({ phone: phone2, ...rest2 }) => {
+      onChange?.(phone2, { ...rest2 });
+    },
+    ...rest
+  });
+  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 };