@bizapps/ui 1.5.1 → 1.7.0

package/dist/main.cjs

@@ -12,7 +12,7 @@ var dateFns = require('date-fns');
 var useEmblaCarousel = require('embla-carousel-react');
 var libphonenumberJs = require('libphonenumber-js');
 var cmdk = require('cmdk');
-var _3x2 = require('country-flag-icons/react/3x2');
+var countryFlags = require('country-flag-icons/react/3x2');
 var react$1 = require('motion/react');
 var reactDropzone = require('react-dropzone');
 var Color = require('color');
@@ -26,12 +26,33 @@ require('temporal-polyfill/global');
 var temporalPolyfill = require('temporal-polyfill');
 var reactHookForm = require('react-hook-form');
 var zod = require('@hookform/resolvers/zod');
+var confetti = require('canvas-confetti');
 var reactTable = require('@tanstack/react-table');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
 var useEmblaCarousel__default = /*#__PURE__*/_interopDefault(useEmblaCarousel);
+var countryFlags__namespace = /*#__PURE__*/_interopNamespace(countryFlags);
 var Color__default = /*#__PURE__*/_interopDefault(Color);
+var confetti__default = /*#__PURE__*/_interopDefault(confetti);
 
 // src/components/ui/Alert/alert.tsx
 function cn(...inputs) {
@@ -1054,6 +1075,15 @@ function Link({
     }
   );
 }
+function validatePhone(value) {
+  if (!value) {
+    return { isValid: false };
+  }
+  if (libphonenumberJs.isValidPhoneNumber(value)) {
+    return { isValid: true };
+  }
+  return { isValid: false, problem: libphonenumberJs.validatePhoneNumberLength(value) ?? "INVALID" };
+}
 function Popover({ ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Popover.Root, { "data-slot": "popover", ...props });
 }
@@ -1126,68 +1156,36 @@ function stripLeadingDialCode(raw, dialCode) {
   const code = dialCode.replace(/\D/g, "");
   return code && digits.startsWith(code) ? digits.length > code.length ? digits.slice(code.length) : "" : digits;
 }
-var flagByCode = {
-  AR: _3x2.AR,
-  BO: _3x2.BO,
-  BR: _3x2.BR,
-  CA: _3x2.CA,
-  CL: _3x2.CL,
-  CO: _3x2.CO,
-  CR: _3x2.CR,
-  CU: _3x2.CU,
-  DE: _3x2.DE,
-  DO: _3x2.DO,
-  EC: _3x2.EC,
-  ES: _3x2.ES,
-  FR: _3x2.FR,
-  GB: _3x2.GB,
-  GT: _3x2.GT,
-  HN: _3x2.HN,
-  IN: _3x2.IN,
-  IT: _3x2.IT,
-  MX: _3x2.MX,
-  NI: _3x2.NI,
-  PA: _3x2.PA,
-  PE: _3x2.PE,
-  PT: _3x2.PT,
-  PY: _3x2.PY,
-  SV: _3x2.SV,
-  US: _3x2.US,
-  UY: _3x2.UY,
-  VE: _3x2.VE
-};
+var flagByCode = countryFlags__namespace;
 function CountryFlag({
   code,
   flagUrl,
   className
 }) {
-  if (flagUrl) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "img",
-      {
-        src: flagUrl,
-        alt: "",
-        "aria-hidden": "true",
-        className: cn("size-4 shrink-0 rounded-[2px] object-cover", className)
-      }
-    );
-  }
-  const FlagComponent = flagByCode[(code || "").toUpperCase()];
-  if (FlagComponent) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      FlagComponent,
-      {
-        "aria-hidden": "true",
-        className: cn("size-4 shrink-0 rounded-[2px]", className)
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: cn("bg-muted size-4 shrink-0 rounded-full", className) });
+  const isoCode = (code || "").toUpperCase();
+  const FlagComponent = flagByCode[isoCode];
+  const flag = flagUrl ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: flagUrl, alt: "", "aria-hidden": "true", className: "size-full object-cover" }) : FlagComponent ? /* @__PURE__ */ jsxRuntime.jsx(FlagComponent, { "aria-hidden": "true", className: "size-full" }) : null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      "data-slot": "phone-field-country-flag",
+      "data-country": isoCode || void 0,
+      "data-fallback": flag ? void 0 : "true",
+      "aria-hidden": "true",
+      className: cn(
+        "size-4 shrink-0 overflow-hidden rounded-[2px]",
+        !flag && "bg-muted rounded-full",
+        className
+      ),
+      children: flag
+    }
+  );
 }
 function PhoneField({
   countries,
   value,
   onValueChange,
+  onValidityChange,
   defaultCountry,
   placeholder = "Phone number",
   disabled = false,
@@ -1204,6 +1202,7 @@ function PhoneField({
   const listRef = react.useRef(null);
   const inputRef = react.useRef(null);
   const caretRef = react.useRef(null);
+  const lastValidityRef = react.useRef(null);
   const listId = `${react.useId()}-countries-list`;
   const isControlled = value !== void 0;
   const currentValue = isControlled ? value : internalValue;
@@ -1214,7 +1213,9 @@ function PhoneField({
   const callingCodeInList = parsedCallingCode !== void 0 && countries.some(
     (country) => country.dialCode.replace(/\D/g, "") === parsedCallingCode
   );
-  const representedCode = countryInList ? parsedCountry : callingCodeInList ? countries.find(
+  const pickedCountry = pickedCode ? countries.find((country) => country.code.toUpperCase() === pickedCode.toUpperCase()) : void 0;
+  const pickMatchesValue = pickedCountry !== void 0 && pickedCountry.dialCode.replace(/\D/g, "") === parsedCallingCode;
+  const representedCode = countryInList ? parsedCountry : pickMatchesValue ? pickedCountry.code : callingCodeInList ? countries.find(
     (country) => country.dialCode.replace(/\D/g, "") === parsedCallingCode
   )?.code : void 0;
   const selectedCode = representedCode ?? pickedCode ?? defaultCountry ?? countries[0]?.code;
@@ -1229,6 +1230,15 @@ function PhoneField({
     nationalDigits
   ) : nationalDigits;
   const isInvalid = inputProps["aria-invalid"] === true || inputProps["aria-invalid"] === "true";
+  const { isValid, problem } = validatePhone(currentValue);
+  react.useEffect(() => {
+    const last = lastValidityRef.current;
+    if (last && last.isValid === isValid && last.problem === problem) {
+      return;
+    }
+    lastValidityRef.current = { isValid, problem };
+    onValidityChange?.({ isValid, problem });
+  }, [isValid, problem, onValidityChange]);
   react.useLayoutEffect(() => {
     const input = inputRef.current;
     const caret = caretRef.current;
@@ -1321,17 +1331,21 @@ function PhoneField({
         }
       }
     }
-    if (nextPickedCode) {
-      setPickedCode(nextPickedCode);
-    }
-    if (!national) {
-      onValueChange?.("");
-      if (!isControlled) {
-        setInternalValue("");
+    const next = national ? `+${emitCode}${national}` : "";
+    const grew = national.replace(/\D/g, "").length > nationalDigits.length;
+    const isPaste = nativeEvent?.inputType === "insertFromPaste";
+    if (grew && !isPaste && libphonenumberJs.validatePhoneNumberLength(next) === "TOO_LONG") {
+      if (input) {
+        const caret = Math.max(0, (input.selectionStart ?? inputValue.length) - 1);
+        input.value = inputValue;
+        input.setSelectionRange(caret, caret);
       }
+      caretRef.current = null;
       return;
     }
-    const next = `+${emitCode}${national}`;
+    if (nextPickedCode) {
+      setPickedCode(nextPickedCode);
+    }
     onValueChange?.(next);
     if (!isControlled) {
       setInternalValue(next);
@@ -7100,6 +7114,38 @@ var logos = {
   monochBlack: `${CDN_BASE}/logos/Logo_Total_monochB.webp`,
   monochOrange: `${CDN_BASE}/logos/Logo_Total_monochO.webp`
 };
+var CONFETTI_COLORS = [
+  "#22205f",
+  // --color-main-blue-primary
+  "#f66a24",
+  // --color-main-orange-primary
+  "#faca4a",
+  // --color-main-yellow-primary
+  "#01d42f",
+  // --color-main-positive-state
+  "#d93235"
+  // --color-main-warning-state
+];
+function fireConfetti({
+  particleCount = 60,
+  originY = 0.7,
+  colors = [...CONFETTI_COLORS]
+} = {}) {
+  const shared = {
+    particleCount,
+    colors,
+    spread: 70,
+    startVelocity: 55,
+    disableForReducedMotion: true
+  };
+  return Promise.all([
+    confetti__default.default({ ...shared, angle: 60, origin: { x: 0, y: originY } }),
+    confetti__default.default({ ...shared, angle: 120, origin: { x: 1, y: originY } })
+  ]).then(() => void 0);
+}
+function resetConfetti() {
+  confetti__default.default.reset();
+}
 function Table({
   className,
   containerClassName = "overflow-x-auto",
@@ -9431,6 +9477,7 @@ exports.BreadcrumbList = BreadcrumbList;
 exports.BreadcrumbPage = BreadcrumbPage;
 exports.BreadcrumbSeparator = BreadcrumbSeparator;
 exports.Button = Button;
+exports.CONFETTI_COLORS = CONFETTI_COLORS;
 exports.Can = Can;
 exports.CanNot = CanNot;
 exports.Card = Card;
@@ -9658,6 +9705,7 @@ exports.createBackendParamsWithFilters = createBackendParamsWithFilters;
 exports.duration = duration;
 exports.ease = ease;
 exports.fadeIn = fadeIn;
+exports.fireConfetti = fireConfetti;
 exports.getActiveFilterCount = getActiveFilterCount;
 exports.getActiveFilterValues = getActiveFilterValues;
 exports.getColumnValueCounts = getColumnValueCounts;
@@ -9673,6 +9721,7 @@ exports.parseJsonToFilters = parseJsonToFilters;
 exports.parseQueryParamsToFilters = parseQueryParamsToFilters;
 exports.progressIndicatorVariants = progressIndicatorVariants;
 exports.progressVariants = progressVariants;
+exports.resetConfetti = resetConfetti;
 exports.scaleIn = scaleIn;
 exports.searchInArray = searchInArray;
 exports.skeletonVariants = skeletonVariants;
@@ -9705,5 +9754,6 @@ exports.useTableSizing = useTableSizing;
 exports.useTableSorting = useTableSorting;
 exports.useTableVisibility = useTableVisibility;
 exports.useToast = useToast;
+exports.validatePhone = validatePhone;
 //# sourceMappingURL=main.cjs.map
 //# sourceMappingURL=main.cjs.map