@yr3/ui 1.0.6 → 1.0.8

package/dist/index.cjs

@@ -17,7 +17,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
   // If the importer is in node compatibility mode or this is not an ESM
   // file that has been converted to a CommonJS file using a Babel-
@@ -100,6 +99,7 @@ __export(index_exports, {
   useControl: () => useControl,
   useMediaQuery: () => useMediaQuery,
   useNotistack: () => useNotistack,
+  usePlaces: () => usePlaces,
   useTheme: () => useTheme
 });
 module.exports = __toCommonJS(index_exports);
@@ -377,7 +377,6 @@ var normalizePhone = (phone, dial) => {
 };
 var getDialPhone = (phone, countries) => {
   for (const country of countries) {
-    console.log("checking", phone, "against", country.dial);
     if (phone.startsWith(country.dial)) {
       return country.dial;
     }
@@ -562,9 +561,6 @@ function initTheme() {
   applyTheme(createTheme());
 }
 
-// src/index.ts
-__reExport(index_exports, require("@yr3/autocomplete-places"), module.exports);
-
 // src/components/Avatar/Avatar.tsx
 var React = __toESM(require("react"), 1);
 
@@ -716,6 +712,42 @@ var Box = ({
   );
 };
 
+// src/components/Text/text.variants.ts
+var textVariants = createVariants({
+  base: "yr3Text",
+  variants: {
+    variant: {
+      h1: "yr3Text--h1",
+      h2: "yr3Text--h2",
+      h3: "yr3Text--h3",
+      h4: "yr3Text--h4",
+      h5: "yr3Text--h5",
+      h6: "yr3Text--h6",
+      title: "yr3Text--title",
+      subtitle: "yr3Text--subtitle",
+      body1: "yr3Text--body1",
+      body2: "yr3Text--body2",
+      helper: "yr3Text--helper",
+      inherit: "yr3Text--inherit",
+      caption: "yr3Text--caption",
+      button: "yr3Text--button",
+      code: "yr3Text--code"
+    },
+    color: {
+      primary: "yr3Text--color-primary",
+      secondary: "yr3Text--color-secondary",
+      success: "yr3Text--color-success",
+      text: "yr3Text--color-text",
+      disabled: "yr3Text--color-disabled",
+      warning: "yr3Text--color-warning",
+      error: "yr3Text--color-error",
+      info: "yr3Text--color-info",
+      background: "yr3Text--color-background"
+    }
+  }
+});
+var text_variants_default = textVariants;
+
 // src/components/Text/Text.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var Text = ({
@@ -730,16 +762,11 @@ var Text = ({
   onClick
 }) => {
   const styleUI = uiStyle({ ...ui, marginTop: gutters[0] || 0, marginBottom: gutters[1] || 0 });
+  const classes = text_variants_default({ variant, color, weight });
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     Component,
     {
-      className: `
-        yr3Text 
-        yr3Text--${variant}
-        yr3Text--${color}
-        ${weight ? `yr3Text--${weight}` : ""}
-
-      `,
+      className: classes,
       style: composeStyles(styleUI, style),
       onClick,
       "data-testid": "yr3Text",
@@ -868,7 +895,8 @@ var initalPropsComponent = {
     color: "primary",
     bordered: true,
     ui: {},
-    style: {}
+    style: {},
+    component: null
   },
   buttonNext: {
     disabled: false,
@@ -914,7 +942,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({
@@ -936,14 +964,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))
@@ -1155,6 +1186,7 @@ var Control = ({
   style,
   ui,
   color = "primary",
+  size = "auto",
   label = true
 }) => {
   const [focused, setFocused] = React7.useState(false);
@@ -1164,7 +1196,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",
     {
@@ -1646,7 +1678,8 @@ var initiaPropsComponent = {
     display: true,
     ui: {},
     style: {}
-  }
+  },
+  control: {}
 };
 var Input = React12.forwardRef(
   ({
@@ -1661,11 +1694,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;
@@ -1683,19 +1716,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,
         {
@@ -1713,6 +1740,7 @@ var Input = React12.forwardRef(
           type,
           autoComplete: "off",
           onChange: handleChange,
+          onKeyDown: (e) => checkPattern(type, e.key),
           onFocus: () => setFocused(true),
           onBlur: () => setFocused(false),
           className: classes,
@@ -1720,8 +1748,7 @@ var Input = React12.forwardRef(
           ...props,
           "data-testid": "yr3Input"
         }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Text, { variant: "helper", color: "disabled", "data-testid": "yr3Input-helper", ui: { position: "absolute", bottom: -18, left: 0 }, children: error || internalError || "" })
+      )
     ] });
   }
 );
@@ -1981,6 +2008,10 @@ var initalPropsComponent2 = {
     variant: "caption",
     color: "primary",
     children: void 0
+  },
+  menu: {
+    ui: {},
+    style: {}
   }
 };
 var Selector = ({ ui, style, options, name, value, defaultValue, onChange, iconColor, icon, propsComponent = initalPropsComponent2 }) => {
@@ -1993,7 +2024,7 @@ var Selector = ({ ui, style, options, name, value, defaultValue, onChange, iconC
       /* @__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", children: options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    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",
@@ -2033,38 +2064,36 @@ var Phone = ({
   propsComponent,
   defaultValue
 }) => {
-  const [prefixValue, setPrefixValue] = React16.useState(countries?.[0].dial);
-  const [internalValue, setInternalValue] = React16.useState(defaultValue);
   const isControlled = value !== void 0;
-  const currentValue = isControlled ? value : internalValue;
-  const checkPattern = (type, value2) => {
-    switch (type) {
-      case "phone":
-        return /^\d{10}$/.test(value2);
-      default:
-        return true;
-    }
-  };
+  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 (internalValue && countries.length > 0) {
-      const dial = getDialPhone(internalValue, countries) || null;
-      setPrefixValue(dial);
-    }
-  }, [internalValue, countries]);
-  const handleChange = (e, value2) => {
-    const newValue = value2;
-    const isValid = checkPattern("phone", newValue);
-    if (!isValid) {
-      return;
+    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) {
-      setInternalValue(newValue);
+      setNumber(clean);
     }
-    onChange?.(e, normalizePhone(currentValue, prefixValue)?.full);
+    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.jsx)("div", { className: "yr3PhoneInput", "data-testid": "yr3Phone", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(Flex, { variant: "row", container: true, center: true, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(Flex, { variant: "row", container: true, center: true, children: [
       /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
         Selector_default,
         {
@@ -2072,33 +2101,33 @@ var Phone = ({
             value: c.dial,
             label: c.code
           })),
-          value: prefixValue,
-          onChange: (_, val) => {
-            setPrefixValue(val);
-          },
-          ...propsComponent?.selector,
-          ui: {
-            ...propsComponent?.selector?.ui,
-            padding: 4
-          },
-          style: propsComponent?.selector?.style
+          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)(Divider, { orientation: "vertical", color: "primary", ui: { height: 50 - 1, mb: -1 }, ...propsComponent?.divider }),
       /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
         Input,
         {
-          type: "phone",
-          variant: "base",
+          type: "number",
           name,
-          value: normalizePhone(currentValue, prefixValue)?.number.toString() || "",
+          value: number,
+          variant: "base",
           ...propsComponent?.input,
-          onChange: handleChange
-        },
-        currentValue
+          onChange: handleNumberChange
+        }
       )
-    ] }) })
-  ] }, prefixValue);
+    ] })
+  ] });
 };
 
 // src/components/Places/PlacesAutocomplete.tsx
@@ -2268,68 +2297,140 @@ var Radio = ({
 
 // src/components/Select/Select.tsx
 var React18 = __toESM(require("react"), 1);
+
+// src/components/Select/select.variants.ts
+var selectVariants = createVariants({
+  base: "yr3Select",
+  variants: {
+    wrapper: {
+      true: "yr3Select--wrapper"
+    },
+    variant: {
+      filled: "yr3Select--filled",
+      outlined: "yr3Select--outlined",
+      base: "yr3Select--base",
+      lined: "yr3Select--lined"
+    },
+    color: {
+      primary: "yr3Select--color-primary",
+      secondary: "yr3Select--color-secondary",
+      success: "yr3Select--color-success",
+      text: "yr3Select--color-text",
+      disabled: "yr3Select--color-disabled",
+      background: "yr3Select--color-background",
+      error: "yr3Select--color-error",
+      warning: "yr3Select--color-warning",
+      info: "yr3Select--color-info"
+    },
+    animated: {
+      true: "yr3Select--animated"
+    }
+  }
+});
+var select_variants_default = selectVariants;
+
+// src/components/Select/Select.tsx
 var import_jsx_runtime35 = require("react/jsx-runtime");
-var Select = ({ label, options, name, value, defaultValue, onChange, propsComponent }) => {
+var initiaPropsComponent3 = {
+  control: {
+    variant: "outlined",
+    color: "primary",
+    ui: {},
+    style: {}
+  },
+  label: {
+    display: true,
+    ui: {},
+    style: {}
+  },
+  wrapper: {
+    ui: {},
+    style: {}
+  },
+  menu: {
+    ui: {},
+    style: {},
+    options: {
+      text: {
+        variant: "caption",
+        color: "primary"
+      },
+      ui: {},
+      style: {}
+    }
+  },
+  icon: {
+    style: {
+      width: 24,
+      height: 24,
+      stroke: "currentColor"
+    },
+    component: void 0
+  }
+};
+var Select = ({ label, options, name, value, defaultValue, onChange, propsComponent = initiaPropsComponent3 }) => {
   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_runtime35.jsxs)(Control, { ...propsComponent?.control, children: [
+  const classes = select_variants_default({ wrapper: true });
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: classes, ref, children: [
     /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-      Label,
+      Input,
       {
-        ...propsComponent?.label,
-        text: label || "seleziona",
-        className: open || valueState ? "yr3Input--active" : ""
+        label,
+        variant: "base",
+        disabled: true,
+        value: valueState,
+        propsComponent: {
+          control: propsComponent?.control,
+          label: propsComponent?.label
+        }
       }
     ),
-    /* @__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,
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: `yr3Select--icon ${open ? "yr3Select--icon--open" : ""}`, 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,
+        height: propsComponent?.icon?.style?.height,
+        stroke: propsComponent?.icon?.style?.stroke || "currentColor",
+        style: propsComponent?.icon?.style
+      }
+    ) }),
+    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_runtime35.jsx)(
+          "div",
           {
-            width: propsComponent?.icon?.style?.width || 26,
-            height: propsComponent?.icon?.style?.height || 26,
-            stroke: propsComponent?.icon?.style?.stroke || "currentColor",
-            style: propsComponent?.icon?.style
-          }
-        ) })
-      ] }),
-      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_runtime35.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
+            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);
             },
-            opt.value
-          ))
-        }
-      )
-    ] })
+            style: composeStyles(propsComponent?.menu?.options?.ui, propsComponent?.menu?.options?.style),
+            children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Text, { as: "span", variant: "caption", color: propsComponent?.menu?.options?.text?.color || "primary", ...propsComponent?.menu?.options?.text, children: opt.label })
+          },
+          opt.value
+        ))
+      }
+    )
   ] });
 };
 
@@ -2403,6 +2504,10 @@ var switchVariants = createVariants({
     },
     checked: {
       true: "yr3Switch--checked"
+    },
+    placement: {
+      start: "yr3Switch--label-start",
+      end: "yr3Switch--label-end"
     }
   }
 });
@@ -2416,10 +2521,12 @@ var Switch = ({
   disabled,
   color = "primary",
   size = "sm",
-  label
+  label,
+  placement = "end",
+  propsComponent
 }) => {
   const [internal, setInternal] = React20.useState(defaultChecked || false);
-  const classname = switchVariants({ colors: color, size, disabled: !!disabled, checked: checked ?? internal });
+  const classname = switchVariants({ colors: color, size, disabled: !!disabled, checked: checked ?? internal, placement });
   const isControlled = checked !== void 0;
   const value = isControlled ? checked : internal;
   const handleChange = (e) => {
@@ -2442,7 +2549,15 @@ var Switch = ({
           }
         ),
         /* @__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 })
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+          "span",
+          {
+            className: "yr3Switch--label",
+            "data-testid": "yr3Switch-label",
+            style: composeStyles(propsComponent?.label.ui, propsComponent?.label?.style),
+            children: label
+          }
+        )
       ]
     }
   );
@@ -2552,6 +2667,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:
@@ -2625,6 +2750,6 @@ initTheme();
   useControl,
   useMediaQuery,
   useNotistack,
-  useTheme,
-  ...require("@yr3/autocomplete-places")
+  usePlaces,
+  useTheme
 });