@yr3/ui 1.0.5 → 1.0.7

package/dist/index.cjs

@@ -83,9 +83,13 @@ __export(index_exports, {
   createVariants: () => createVariants,
   cx: () => cx,
   getContrast: () => getContrast,
+  getCountryCodePhone: () => getCountryCodePhone,
+  getDialPhone: () => getDialPhone,
   getMonthCalendar: () => getMonthCalendar,
+  getNumberPhone: () => getNumberPhone,
   initTheme: () => initTheme,
   isEmpty: () => isEmpty,
+  normalizePhone: () => normalizePhone,
   text: () => text,
   times: () => times,
   uiStyle: () => uiStyle,
@@ -95,6 +99,7 @@ __export(index_exports, {
   useControl: () => useControl,
   useMediaQuery: () => useMediaQuery,
   useNotistack: () => useNotistack,
+  usePlaces: () => usePlaces,
   useTheme: () => useTheme
 });
 module.exports = __toCommonJS(index_exports);
@@ -351,6 +356,48 @@ var createVariants = (config) => {
   };
 };
 
+// src/utils/phone.ts
+var normalizePhone = (phone, dial) => {
+  if (!phone) return null;
+  let clean = phone.replace(/[^\d+]/g, "");
+  let number = clean;
+  if (clean.startsWith(dial)) {
+    number = clean.slice(dial.length);
+  } else if (clean.startsWith("+")) {
+    const match = clean.match(/^\+\d{1,3}(.*)$/);
+    if (match) {
+      number = match[1];
+    }
+  }
+  number = number.replace(/^0+/, "");
+  return {
+    number,
+    full: `${dial}${number}`
+  };
+};
+var getDialPhone = (phone, countries) => {
+  for (const country of countries) {
+    if (phone.startsWith(country.dial)) {
+      return country.dial;
+    }
+  }
+  return null;
+};
+var getCountryCodePhone = (phone, countries) => {
+  for (const country of countries) {
+    if (phone.startsWith(country.dial)) {
+      return country.code;
+    }
+  }
+  return null;
+};
+var getNumberPhone = (phone, dial) => {
+  if (phone.startsWith(dial)) {
+    return phone.slice(dial.length);
+  }
+  return phone;
+};
+
 // src/theme/breakpoint.ts
 var breakpoints = {
   xs: 0,
@@ -817,7 +864,8 @@ var initalPropsComponent = {
     color: "primary",
     bordered: true,
     ui: {},
-    style: {}
+    style: {},
+    component: null
   },
   buttonNext: {
     disabled: false,
@@ -863,7 +911,7 @@ var Calendar = ({ onSelect, propsComponent = initalPropsComponent, mapCalendar,
           children: (0, import_dayjs2.default)().day(i + 1).format("dd")
         }
       ) }, `month_day_${i}`)),
-      times(program.calendar.length, (i) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(React3.Fragment, { children: times(program.calendar[i].length, (j) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      times(program.calendar.length, (i) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(React3.Fragment, { children: times(program.calendar[i].length, (j) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
         "div",
         {
           className: calendarDayVariants({
@@ -885,14 +933,17 @@ var Calendar = ({ onSelect, propsComponent = initalPropsComponent, mapCalendar,
               setSelected(program.calendar[i][j]);
             }
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-            Text,
-            {
-              variant: "body2",
-              color: program.calendar[i][j]?.isFuture ? "text" : "text",
-              children: program.calendar[i][j]?.day || ""
-            }
-          )
+          children: [
+            program.calendar[i][j]?.data && propsComponent?.day?.component ? propsComponent.day.component : null,
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              Text,
+              {
+                variant: "body2",
+                color: program.calendar[i][j]?.isFuture ? "text" : "text",
+                children: program.calendar[i][j]?.day || ""
+              }
+            )
+          ]
         },
         `day-${i}-${j}`
       )) }, i))
@@ -1104,6 +1155,7 @@ var Control = ({
   style,
   ui,
   color = "primary",
+  size = "auto",
   label = true
 }) => {
   const [focused, setFocused] = React7.useState(false);
@@ -1113,7 +1165,7 @@ var Control = ({
     error,
     disabled
   };
-  const classes = controlVariants({ variant, color, label });
+  const classes = controlVariants({ variant, color, label, size });
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ControlContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     "div",
     {
@@ -1595,7 +1647,8 @@ var initiaPropsComponent = {
     display: true,
     ui: {},
     style: {}
-  }
+  },
+  control: {}
 };
 var Input = React12.forwardRef(
   ({
@@ -1610,11 +1663,11 @@ var Input = React12.forwardRef(
     propsComponent = initiaPropsComponent,
     type = "text",
     color = "primary",
+    size = "auto",
     ...props
   }, ref) => {
     const [focused, setFocused] = React12.useState(false);
     const [internalValue, setInternalValue] = React12.useState(defaultValue);
-    const [internalError, setInternalError] = React12.useState(null);
     const isControlled = value !== void 0;
     const currentValue = isControlled ? value : internalValue;
     const isActive = focused || !!currentValue;
@@ -1632,19 +1685,13 @@ var Input = React12.forwardRef(
     };
     const handleChange = (e) => {
       const newValue = e.target.value;
-      const isValid = checkPattern(type, newValue);
-      if (!isValid) {
-        setInternalError("Valore non valido");
-      } else {
-        setInternalError(null);
-      }
       if (!isControlled) {
         setInternalValue(newValue);
       }
       onChange?.(e, newValue);
     };
     const classes = inputVariants({ color, label: propsComponent?.label?.display });
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Control, { variant, color, label: propsComponent?.label?.display, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Control, { variant, color, label: propsComponent?.label?.display, ...propsComponent.control, children: [
       propsComponent?.label?.display && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
         Label,
         {
@@ -1662,6 +1709,7 @@ var Input = React12.forwardRef(
           type,
           autoComplete: "off",
           onChange: handleChange,
+          onKeyDown: (e) => checkPattern(type, e.key),
           onFocus: () => setFocused(true),
           onBlur: () => setFocused(false),
           className: classes,
@@ -1669,144 +1717,13 @@ var Input = React12.forwardRef(
           ...props,
           "data-testid": "yr3Input"
         }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Text, { variant: "helper", "data-testid": "yr3Input-helper", children: error || internalError || "" })
+      )
     ] });
   }
 );
 
-// src/components/Input/InputPhone.tsx
-var React15 = __toESM(require("react"), 1);
-
-// src/components/Select/Selector.tsx
-var React13 = __toESM(require("react"), 1);
-
-// src/Icons/IconDown.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
-var IconDown = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("svg", { width: props.width || "64px", height: props.height || "64px", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "data-testid": "yr3Icons", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("path", { d: "M7 10L12 15L17 10", stroke: props.stroke || "#fff", strokeWidth: props.strokeWidth || "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
-};
-
-// src/components/Select/Selector.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
-var Selector = ({ ui, style, options, name, value, defaultValue, onChange, iconColor, icon }) => {
-  const [open, setOpen] = React13.useState(false);
-  const [valueState, setValueState] = React13.useState(value || defaultValue || null);
-  const ref = React13.useRef(null);
-  useClickAway(ref, () => setOpen(false));
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "yr3Selector-wrapper", ref, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: `yr3Selector ${open ? "yr3Selector--open" : ""}`, style: composeStyles(ui, style), children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "yr3Selector--control", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "yr3Selector--icon", onClick: () => setOpen((prev) => !prev), children: icon ? icon : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(IconDown, { stroke: `var(--color-${iconColor || "disabled"})`, width: 24, height: 24 }) }),
-      valueState
-    ] }) }),
-    open && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "yr3Select--menu", children: options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-      "div",
-      {
-        className: "yr3Select--option",
-        onClick: (e) => {
-          e.stopPropagation();
-          setValueState(opt.value);
-          setOpen(false);
-          const event = {
-            event: e,
-            target: {
-              name,
-              value: opt.value
-            },
-            currentTarget: {
-              name,
-              value: opt.value
-            }
-          };
-          onChange?.(event, opt.value);
-        },
-        children: opt.label
-      },
-      opt.value
-    )) })
-  ] });
-};
-var Selector_default = Selector;
-
-// src/theme/ThemeProvider.tsx
-var React14 = __toESM(require("react"), 1);
-var import_jsx_runtime27 = require("react/jsx-runtime");
-var ThemeContext = React14.createContext(null);
-var ThemeProvider = ({ theme, children }) => {
-  React14.useEffect(() => {
-    applyTheme(theme);
-  }, [theme]);
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ThemeContext.Provider, { value: theme, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(BackdropProvider, { children }) });
-};
-var useTheme = () => React14.useContext(ThemeContext);
-
-// src/components/Input/InputPhone.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
-var Phone = ({
-  name,
-  value,
-  onChange,
-  prefix = "+39",
-  label = "Phone",
-  countries = [],
-  propsComponent
-}) => {
-  const [prefixValue, setPrefixValue] = React15.useState(prefix);
-  const [number, setNumber] = React15.useState(Number(value) || null);
-  const theme = useTheme();
-  const handleChange = (newPrefix, newNumber) => {
-    const full = `${newPrefix}${newNumber.toString()}`;
-    const event = {
-      target: {
-        name,
-        value: full
-      }
-    };
-    onChange?.(event, full);
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Control, { variant: "outlined", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Label, { text: label, className: "yr3Input--active" }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "yr3PhoneInput", "data-testid": "yr3Phone", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Flex, { variant: "row", container: true, center: true, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-        Selector_default,
-        {
-          options: countries.map((c) => ({
-            value: c.dial,
-            label: c.code
-          })),
-          value: prefixValue,
-          onChange: (_, val) => {
-            setPrefixValue(val);
-            handleChange(val, number);
-          },
-          ...propsComponent?.selector,
-          ui: {
-            ...propsComponent?.selector?.ui,
-            padding: 4
-          },
-          style: propsComponent?.selector?.style
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Divider, { orientation: "vertical", ...propsComponent?.divider }),
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-        Input,
-        {
-          type: "phone",
-          variant: "base",
-          value: number,
-          ...propsComponent?.input,
-          onChange: (e, value2) => {
-            setNumber(value2);
-            handleChange(prefixValue, value2);
-          }
-        }
-      )
-    ] }) })
-  ] });
-};
-
 // src/components/InputArea/InputArea.tsx
-var React16 = __toESM(require("react"), 1);
+var React13 = __toESM(require("react"), 1);
 
 // src/components/InputArea/inputAreaVariants.ts
 var inputAreaVariants = createVariants({
@@ -1842,7 +1759,7 @@ var inputAreaVariants = createVariants({
 });
 
 // src/components/InputArea/InputArea.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var initiaPropsComponent2 = {
   label: {
     display: true,
@@ -1867,8 +1784,8 @@ var InputArea = ({
   rounded = false,
   propsComponent = initiaPropsComponent2
 }) => {
-  const ref = React16.useRef(null);
-  const [internalValue, setInternalValue] = React16.useState(defaultValue);
+  const ref = React13.useRef(null);
+  const [internalValue, setInternalValue] = React13.useState(defaultValue);
   const isControlled = value !== void 0;
   const currentValue = isControlled ? value : internalValue;
   const handleChange = (e) => {
@@ -1885,8 +1802,8 @@ var InputArea = ({
     el.style.resize = resize;
   }
   const classes = inputAreaVariants({ variant, color, rounded });
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { style: { position: "relative" }, children: [
-    propsComponent?.label?.display && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { style: { position: "relative" }, children: [
+    propsComponent?.label?.display && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       Label,
       {
         text: label || "",
@@ -1894,7 +1811,7 @@ var InputArea = ({
         ...propsComponent.label
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       "textarea",
       {
         className: classes,
@@ -1906,26 +1823,26 @@ var InputArea = ({
         "data-testid": "yr3InputArea"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Text, { variant: "helper", color: currentValue.length > maxLength ? "error" : "disabled", ui: { textAlign: "right" }, "data-testid": "yr3InputAreaError", children: validate && maxLength ? `${currentValue.length}/${maxLength}` || propsComponent.helperText : "" })
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Text, { variant: "helper", color: currentValue.length > maxLength ? "error" : "disabled", ui: { textAlign: "right" }, "data-testid": "yr3InputAreaError", children: validate && maxLength ? `${currentValue.length}/${maxLength}` || propsComponent.helperText : "" })
   ] });
 };
 
 // src/components/Modal/Modal.tsx
-var React17 = __toESM(require("react"), 1);
+var React14 = __toESM(require("react"), 1);
 
 // src/components/Modal/ModalContainer.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var ModalContainer = ({ children, size = "sm", ui, style }) => {
   const classes = bem("yr3Modal-container");
   const classComponent = classes(void 0, { [`${size}`]: !!size });
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: classComponent, style: composeStyles(ui, style), "data-testid": "yr3Modal-container", children });
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: classComponent, style: composeStyles(ui, style), "data-testid": "yr3Modal-container", children });
 };
 
 // src/components/Modal/Modal.tsx
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var Modal = ({ open, onClose, children, propsComponent }) => {
   const { show, hide } = useBackdrop();
-  React17.useEffect(() => {
+  React14.useEffect(() => {
     if (open) {
       show();
     } else {
@@ -1934,9 +1851,9 @@ var Modal = ({ open, onClose, children, propsComponent }) => {
   }, [open, show]);
   const classes = bem("yr3Modal");
   const classComponent = classes(void 0, { "open": !!open });
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: classComponent, onClick: (e) => e.stopPropagation(), "data-testid": "yr3Modal", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ModalContainer, { ...propsComponent?.container, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(Flex, { variant: "column", container: true, center: true, gap: 1, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: classComponent, onClick: (e) => e.stopPropagation(), "data-testid": "yr3Modal", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ModalContainer, { ...propsComponent?.container, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Flex, { variant: "column", container: true, center: true, gap: 1, children: [
     children,
-    propsComponent?.close ? propsComponent.close : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Button, { variant: "filled", color: "secondary", onClick: onClose, "data-testid": "yr3Modal-close", children: "Close" })
+    propsComponent?.close ? propsComponent.close : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Button, { variant: "filled", color: "secondary", onClick: onClose, "data-testid": "yr3Modal-close", children: "Close" })
   ] }) }) });
 };
 
@@ -1976,15 +1893,15 @@ var notistackVariants = createVariants({
 });
 
 // src/components/Notistack/Notistack.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var Notistack = ({ message, duration = 3e3, variant = "info", color, propsComponent, anchor, exiting = false }) => {
   const classes = notistackVariants({ type: variant, color, exiting, direction: `${anchor?.vertical || "bottom"}-${anchor?.horizontal || "right"}` });
   const containerStyle = composeStyles(propsComponent?.container?.ui, propsComponent?.container?.style);
   const notistackStyle = composeStyles(propsComponent?.notistack?.ui, propsComponent?.notistack?.style);
   const progressStyle = composeStyles(propsComponent?.progress?.ui, propsComponent?.progress?.style);
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: classes, "data-testid": "yr3Notistack", style: notistackStyle, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { style: containerStyle, children: message }),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: classes, "data-testid": "yr3Notistack", style: notistackStyle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { style: containerStyle, children: message }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       "div",
       {
         className: "yr3Notistack--progress",
@@ -2018,7 +1935,7 @@ var pendingVariants = createVariants({
 });
 
 // src/components/Pending/Pending.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 var Pending = ({
   variant,
   width,
@@ -2031,7 +1948,7 @@ var Pending = ({
   const widthStyle = variant === "circle" ? size : width;
   const heightStyle = variant === "circle" ? size : height;
   const uiStylePending = uiStyle({ width: widthStyle, height: heightStyle, ...ui });
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     "div",
     {
       className: pendingVariants({ variant, color }),
@@ -2041,10 +1958,151 @@ var Pending = ({
   );
 };
 
+// src/components/Phone/Phone.tsx
+var React16 = __toESM(require("react"), 1);
+
+// src/components/Selector/Selector.tsx
+var React15 = __toESM(require("react"), 1);
+
+// src/Icons/IconDown.tsx
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var IconDown = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("svg", { width: props.width || "64px", height: props.height || "64px", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "data-testid": "yr3Icons", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("path", { d: "M7 10L12 15L17 10", stroke: props.stroke || "#fff", strokeWidth: props.strokeWidth || "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+};
+
+// src/components/Selector/Selector.tsx
+var import_jsx_runtime31 = require("react/jsx-runtime");
+var initalPropsComponent2 = {
+  text: {
+    variant: "caption",
+    color: "primary",
+    children: void 0
+  },
+  menu: {
+    ui: {},
+    style: {}
+  }
+};
+var Selector = ({ ui, style, options, name, value, defaultValue, onChange, iconColor, icon, propsComponent = initalPropsComponent2 }) => {
+  const [open, setOpen] = React15.useState(false);
+  const [valueState, setValueState] = React15.useState(value || defaultValue || null);
+  const ref = React15.useRef(null);
+  useClickAway(ref, () => setOpen(false));
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "yr3Selector-wrapper", ref, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: `yr3Selector ${open ? "yr3Selector--open" : ""}`, style: composeStyles(ui, style), children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "yr3Selector--control", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "yr3Selector--icon", onClick: () => setOpen((prev) => !prev), children: icon ? icon : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(IconDown, { stroke: `var(--color-${iconColor || "disabled"})`, width: 24, height: 24 }) }),
+      valueState
+    ] }) }),
+    open && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "yr3Selector--menu", style: composeStyles(propsComponent.menu?.ui, propsComponent.menu?.style), children: options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+      "div",
+      {
+        className: "yr3Selector--option",
+        onClick: (e) => {
+          e.stopPropagation();
+          setValueState(opt.value);
+          setOpen(false);
+          const event = {
+            event: e,
+            target: {
+              name,
+              value: opt.value
+            },
+            currentTarget: {
+              name,
+              value: opt.value
+            }
+          };
+          onChange?.(event, opt.value);
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Text, { ...propsComponent?.text, children: propsComponent?.text?.children || opt.label })
+      },
+      opt.value
+    )) })
+  ] });
+};
+var Selector_default = Selector;
+
+// src/components/Phone/Phone.tsx
+var import_jsx_runtime32 = require("react/jsx-runtime");
+var Phone = ({
+  name,
+  value,
+  onChange,
+  label = "Phone",
+  countries,
+  propsComponent,
+  defaultValue
+}) => {
+  const isControlled = value !== void 0;
+  const initial = value || defaultValue || "";
+  const [prefix, setPrefix] = React16.useState(
+    getDialPhone(initial, countries) || countries[0].dial
+  );
+  const [number, setNumber] = React16.useState(
+    getNumberPhone(initial, prefix) || ""
+  );
+  React16.useEffect(() => {
+    if (isControlled && value) {
+      const dial = getDialPhone(value, countries);
+      const num = getNumberPhone(value, dial);
+      setPrefix(dial);
+      setNumber(num);
+    }
+  }, [value]);
+  const handleNumberChange = (e, val) => {
+    const clean = val.replace(/[^\d]/g, "");
+    if (!isControlled) {
+      setNumber(clean);
+    }
+    onChange?.(e, `${prefix}${clean}`);
+  };
+  const handlePrefixChange = (_, val) => {
+    setPrefix(val);
+    onChange?.(null, `${val}${number}`);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(Control, { variant: "outlined", ui: { height: 50, position: "relative" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Label, { text: label, className: "yr3Input--active" }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(Flex, { variant: "row", container: true, center: true, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+        Selector_default,
+        {
+          options: countries.map((c) => ({
+            value: c.dial,
+            label: c.code
+          })),
+          value: prefix,
+          onChange: handlePrefixChange,
+          ...propsComponent?.selector
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+        Divider,
+        {
+          orientation: "vertical",
+          color: "primary",
+          ui: { height: 49 },
+          ...propsComponent?.divider
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+        Input,
+        {
+          type: "number",
+          name,
+          value: number,
+          variant: "base",
+          ...propsComponent?.input,
+          onChange: handleNumberChange
+        }
+      )
+    ] })
+  ] });
+};
+
 // src/components/Places/PlacesAutocomplete.tsx
-var React18 = __toESM(require("react"), 1);
+var React17 = __toESM(require("react"), 1);
 var import_autocomplete_places = require("@yr3/autocomplete-places");
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var initPropsComponent = {
   label: {
     display: true,
@@ -2084,9 +2142,9 @@ var PlacesAutocomplete = ({
   keyApi,
   propsComponent = initPropsComponent
 }) => {
-  const [value, setValue] = React18.useState(null);
-  const inputRef = React18.useRef(null);
-  const [anchorEl, setAnchorEl] = React18.useState(null);
+  const [value, setValue] = React17.useState(null);
+  const inputRef = React17.useRef(null);
+  const [anchorEl, setAnchorEl] = React17.useState(null);
   const { suggestions, selectPlace } = (0, import_autocomplete_places.useAutocompletePlaces)({ input: value, apiKey: keyApi, language, provider });
   const handleSelect = async (id) => {
     const place = await selectPlace(id);
@@ -2106,12 +2164,12 @@ var PlacesAutocomplete = ({
     setValue(place.address);
     setAnchorEl(null);
   };
-  React18.useEffect(() => {
+  React17.useEffect(() => {
     if (defaultLocation) {
       setValue(defaultLocation);
     }
   }, [defaultLocation]);
-  React18.useEffect(() => {
+  React17.useEffect(() => {
     if (value === "") {
       onSelect(null);
     }
@@ -2121,13 +2179,13 @@ var PlacesAutocomplete = ({
     setAnchorEl(e.target.value ? inputRef.current : null);
   };
   const open = suggestions.length > 0 && Boolean(anchorEl);
-  React18.useEffect(() => {
+  React17.useEffect(() => {
     if (onChangeForm) {
       onChangeForm({ target: { value } });
     }
   }, [onChangeForm]);
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Control, { ...propsComponent?.control, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(Control, { ...propsComponent?.control, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       Input,
       {
         ref: inputRef,
@@ -2141,7 +2199,7 @@ var PlacesAutocomplete = ({
       },
       "input-places"
     ),
-    open && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "yr3Places--menu", style: composeStyles(propsComponent.menu?.ui, propsComponent?.menu?.style), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Flex, { container: true, ui: { p: 1 }, children: suggestions.map((s) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Flex, { onClick: () => handleSelect(s.id), ui: { padding: 8, cursor: "pointer", "&:hover": { backgroundColor: "rgba(0,0,0,0.1)" } }, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Text, { ...propsComponent?.menu?.text, children: s.description }) }, s.id)) }) })
+    open && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "yr3Places--menu", style: composeStyles(propsComponent.menu?.ui, propsComponent?.menu?.style), children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Flex, { container: true, ui: { p: 1 }, children: suggestions.map((s) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Flex, { onClick: () => handleSelect(s.id), ui: { padding: 8, cursor: "pointer", "&:hover": { backgroundColor: "rgba(0,0,0,0.1)" } }, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Text, { ...propsComponent?.menu?.text, children: s.description }) }, s.id)) }) })
   ] });
 };
 
@@ -2164,7 +2222,7 @@ var radioVariant = createVariants({
 });
 
 // src/components/Radio/Radio.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var Radio = ({
   checked,
   value,
@@ -2180,8 +2238,8 @@ var Radio = ({
   const bemClass = bem("yr3Radio");
   const classes = bemClass(void 0, { [color]: `color-${color}` });
   const variantClass = radioVariant({ variant });
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("label", { className: classes, "data-testid": "yr3Radio", style: composeStyles(propsComponent?.radio?.ui, propsComponent?.radio?.style), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("label", { className: classes, "data-testid": "yr3Radio", style: composeStyles(propsComponent?.radio?.ui, propsComponent?.radio?.style), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       "input",
       {
         type: "radio",
@@ -2193,8 +2251,8 @@ var Radio = ({
       }
     ),
     iconChecked && checked ? iconChecked : !checked && iconUnchecked ? iconUnchecked : null,
-    !iconChecked && !iconUnchecked && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: variantClass, "data-testid": "yr3Radio-dot" }),
-    typeof label === "string" && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    !iconChecked && !iconUnchecked && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: variantClass, "data-testid": "yr3Radio-dot" }),
+    typeof label === "string" && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       "span",
       {
         className: "yr3Radio--label",
@@ -2207,26 +2265,25 @@ var Radio = ({
 };
 
 // src/components/Select/Select.tsx
-var React19 = __toESM(require("react"), 1);
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var React18 = __toESM(require("react"), 1);
+var import_jsx_runtime35 = require("react/jsx-runtime");
 var Select = ({ label, options, name, value, defaultValue, onChange, propsComponent }) => {
-  const [open, setOpen] = React19.useState(false);
-  const [valueState, setValueState] = React19.useState(value || defaultValue || null);
-  const ref = React19.useRef(null);
+  const [open, setOpen] = React18.useState(false);
+  const [valueState, setValueState] = React18.useState(value || defaultValue || null);
+  const ref = React18.useRef(null);
   useClickAway(ref, () => setOpen(false));
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(Control, { ...propsComponent?.control, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Control, { ...propsComponent?.control, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       Label,
       {
         ...propsComponent?.label,
-        text: label || "seleziona",
-        className: open || valueState ? "yr3Input--active" : ""
+        text: label || "seleziona"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "yr3Select-wrapper", ref, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: `yr3Select ${open ? "yr3Select--open" : ""}`, "data-testid": "yr3Select-wrapper", style: composeStyles(propsComponent?.wrapper?.ui, propsComponent?.wrapper?.style), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "yr3Select--control", children: valueState }),
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "yr3Select--icon", onClick: () => setOpen((prev) => !prev), "data-testid": "yr3Select-icon", children: propsComponent?.icon?.component ? propsComponent.icon.component : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "yr3Select-wrapper", ref, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: `yr3Select ${open ? "yr3Select--open" : ""}`, "data-testid": "yr3Select-wrapper", style: composeStyles(propsComponent?.wrapper?.ui, propsComponent?.wrapper?.style), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "yr3Select--control", children: valueState }),
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "yr3Select--icon", onClick: () => setOpen((prev) => !prev), "data-testid": "yr3Select-icon", children: propsComponent?.icon?.component ? propsComponent.icon.component : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
           IconDown,
           {
             width: propsComponent?.icon?.style?.width || 26,
@@ -2236,13 +2293,13 @@ var Select = ({ label, options, name, value, defaultValue, onChange, propsCompon
           }
         ) })
       ] }),
-      open && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      open && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
         "div",
         {
           className: "yr3Select--menu",
           style: composeStyles(propsComponent?.menu?.ui, propsComponent?.menu?.style),
           "data-testid": "yr3Select-menu",
-          children: options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+          children: options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
             "div",
             {
               className: "yr3Select--option",
@@ -2274,8 +2331,8 @@ var Select = ({ label, options, name, value, defaultValue, onChange, propsCompon
 };
 
 // src/components/Slide/Slide.tsx
-var React20 = __toESM(require("react"), 1);
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var React19 = __toESM(require("react"), 1);
+var import_jsx_runtime36 = require("react/jsx-runtime");
 var Slide = ({
   in: inProp,
   children,
@@ -2289,7 +2346,7 @@ var Slide = ({
     [direction]: true,
     "in": !!inProp
   });
-  React20.useEffect(() => {
+  React19.useEffect(() => {
     let timeoutId;
     if (inProp) {
       timeoutId = setTimeout(() => {
@@ -2299,19 +2356,19 @@ var Slide = ({
     return () => clearTimeout(timeoutId);
   }, [inProp, duration, onTransitionEnd]);
   const uiStyleContent = uiStyle({ ...propsComponent?.slide?.ui, transitionDuration: `${duration}ms` });
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
     "div",
     {
       className: "yr3Slide",
       style: uiStyle({ position: "relative", zIndex: 4, overflow: "hidden" }),
       "data-testid": "yr3Slide",
-      children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
         "div",
         {
           className: classNameContent,
           style: composeStyles(uiStyleContent, propsComponent?.slide?.style || {}),
           "data-testid": "yr3Slide-content",
-          children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Box, { ...propsComponent?.box, "data-testid": "yr3Slide-box", children })
+          children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Box, { ...propsComponent?.box, "data-testid": "yr3Slide-box", children })
         }
       )
     }
@@ -2319,7 +2376,7 @@ var Slide = ({
 };
 
 // src/components/Switch/Switch.tsx
-var React21 = __toESM(require("react"), 1);
+var React20 = __toESM(require("react"), 1);
 
 // src/components/Switch/switch.variants.ts
 var switchVariants = createVariants({
@@ -2348,7 +2405,7 @@ var switchVariants = createVariants({
 });
 
 // src/components/Switch/Switch.tsx
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 var Switch = ({
   checked,
   defaultChecked,
@@ -2358,7 +2415,7 @@ var Switch = ({
   size = "sm",
   label
 }) => {
-  const [internal, setInternal] = React21.useState(defaultChecked || false);
+  const [internal, setInternal] = React20.useState(defaultChecked || false);
   const classname = switchVariants({ colors: color, size, disabled: !!disabled, checked: checked ?? internal });
   const isControlled = checked !== void 0;
   const value = isControlled ? checked : internal;
@@ -2366,13 +2423,13 @@ var Switch = ({
     if (!isControlled) setInternal(e.target.checked);
     onChange?.(e, e.target.checked);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
     "label",
     {
       className: classname,
       "data-testid": "yr3Switch",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
           "input",
           {
             type: "checkbox",
@@ -2381,17 +2438,17 @@ var Switch = ({
             disabled
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "yr3Switch--track", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "yr3Switch--thumb" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "yr3Switch--label", "data-testid": "yr3Switch-label", children: label })
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "yr3Switch--track", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "yr3Switch--thumb" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "yr3Switch--label", "data-testid": "yr3Switch-label", children: label })
       ]
     }
   );
 };
 
 // src/Icons/IconSearch.tsx
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 var IconSearch = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("svg", { width: props.width || "64px", height: props.height || "64px", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("svg", { width: props.width || "64px", height: props.height || "64px", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
     "path",
     {
       d: "M15.7955 15.8111L21 21M18 10.5C18 14.6421 14.6421 18 10.5 18C6.35786 18 3 14.6421 3 10.5C3 6.35786 6.35786 3 10.5 3C14.6421 3 18 6.35786 18 10.5Z",
@@ -2403,6 +2460,18 @@ var IconSearch = (props) => {
   ) });
 };
 
+// src/theme/ThemeProvider.tsx
+var React21 = __toESM(require("react"), 1);
+var import_jsx_runtime39 = require("react/jsx-runtime");
+var ThemeContext = React21.createContext(null);
+var ThemeProvider = ({ theme, children }) => {
+  React21.useEffect(() => {
+    applyTheme(theme);
+  }, [theme]);
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ThemeContext.Provider, { value: theme, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(BackdropProvider, { children }) });
+};
+var useTheme = () => React21.useContext(ThemeContext);
+
 // src/theme/tokens.ts
 var baseTokens = {
   colors: {
@@ -2480,6 +2549,16 @@ function useBreakpointValue(values) {
   return void 0;
 }
 
+// src/hooks/usePlaces.ts
+var import_autocomplete_places2 = require("@yr3/autocomplete-places");
+var usePlaces = ({ input, language, apiKey, provider }) => {
+  const { suggestions, selectPlace } = (0, import_autocomplete_places2.useAutocompletePlaces)({ apiKey, provider, language, input });
+  return {
+    suggestions,
+    selectPlace
+  };
+};
+
 // src/index.ts
 initTheme();
 // Annotate the CommonJS export names for ESM import in node:
@@ -2537,9 +2616,13 @@ initTheme();
   createVariants,
   cx,
   getContrast,
+  getCountryCodePhone,
+  getDialPhone,
   getMonthCalendar,
+  getNumberPhone,
   initTheme,
   isEmpty,
+  normalizePhone,
   text,
   times,
   uiStyle,
@@ -2549,5 +2632,6 @@ initTheme();
   useControl,
   useMediaQuery,
   useNotistack,
+  usePlaces,
   useTheme
 });