@bizapps/ui 1.5.0 → 1.6.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');
@@ -30,7 +30,26 @@ 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);
 
 // src/components/ui/Alert/alert.tsx
@@ -1054,6 +1073,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 +1154,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 +1200,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 +1211,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 +1228,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 +1329,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);
@@ -5122,6 +5134,8 @@ function NavigationMenuIndicator({
     }
   );
 }
+
+// src/components/authorization/policy.ts
 function matchPermission(pattern, permission) {
   if (pattern === "*") return true;
   if (pattern === permission) return true;
@@ -5137,6 +5151,15 @@ function matchesAny(permissionSet, permission) {
   }
   return false;
 }
+function can(permissionSet, perms, mode = "any") {
+  const list = Array.isArray(perms) ? perms : [perms];
+  if (list.length === 0) return false;
+  if (permissionSet.has("*")) return true;
+  if (mode === "all") {
+    return list.every((p) => matchesAny(permissionSet, p));
+  }
+  return list.some((p) => matchesAny(permissionSet, p));
+}
 var AbilityContext = react.createContext(void 0);
 AbilityContext.displayName = "AbilityContext";
 function AbilityProvider({ children, permissions }) {
@@ -5145,16 +5168,8 @@ function AbilityProvider({ children, permissions }) {
   );
   const [imperativelyResolved, setImperativelyResolved] = react.useState(false);
   const status = permissions !== void 0 || imperativelyResolved ? "ready" : "loading";
-  const can = react.useCallback(
-    (perms, mode = "any") => {
-      const list = Array.isArray(perms) ? perms : [perms];
-      if (list.length === 0) return false;
-      if (permissionSet.has("*")) return true;
-      if (mode === "all") {
-        return list.every((p) => matchesAny(permissionSet, p));
-      }
-      return list.some((p) => matchesAny(permissionSet, p));
-    },
+  const can2 = react.useCallback(
+    (perms, mode = "any") => can(permissionSet, perms, mode),
     [permissionSet]
   );
   const setAbilities = react.useCallback((perms) => {
@@ -5174,8 +5189,8 @@ function AbilityProvider({ children, permissions }) {
     setPermissionSet(new Set(permissions));
   }, [permissionKey, permissions]);
   const value = react.useMemo(
-    () => ({ can, setAbilities, clearAbilities, status }),
-    [can, setAbilities, clearAbilities, status]
+    () => ({ can: can2, setAbilities, clearAbilities, status }),
+    [can2, setAbilities, clearAbilities, status]
   );
   return /* @__PURE__ */ jsxRuntime.jsx(AbilityContext.Provider, { value, children });
 }
@@ -5187,8 +5202,8 @@ function useAbility() {
   return context;
 }
 function useCan(permissions, mode = "any") {
-  const { can } = useAbility();
-  return can(permissions, mode);
+  const { can: can2 } = useAbility();
+  return can2(permissions, mode);
 }
 function useAbilityStatus() {
   return useAbility().status;
@@ -5295,8 +5310,8 @@ function Can({
   children
 }) {
   warnUnknownPermission(permission);
-  const { can, status } = useAbility();
-  const hasPermission = status === "ready" && can(permission, mode);
+  const { can: can2, status } = useAbility();
+  const hasPermission = status === "ready" && can2(permission, mode);
   const show = negate ? !hasPermission : hasPermission;
   if (typeof children === "function") {
     warnRenderPropVoidsProps([
@@ -9702,5 +9717,6 @@ exports.useTableSizing = useTableSizing;
 exports.useTableSorting = useTableSorting;
 exports.useTableVisibility = useTableVisibility;
 exports.useToast = useToast;
+exports.validatePhone = validatePhone;
 //# sourceMappingURL=main.cjs.map
 //# sourceMappingURL=main.cjs.map